From 4be84388d0643e2a7227f40ce6ebd1ea63a74c89 Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sat, 8 Aug 2020 15:15:23 +0800
Subject: [PATCH] Add another styled story

Demonstrate scaling of detail in styled key set.
---
 src/components/Keyboard/Keyboard.stories.tsx  | 38 +++++++++++++++++++
 .../StyledAccidentalKey.tsx                   |  4 +-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/Keyboard/Keyboard.stories.tsx b/src/components/Keyboard/Keyboard.stories.tsx
index d432207..aa5c991 100644
--- a/src/components/Keyboard/Keyboard.stories.tsx
+++ b/src/components/Keyboard/Keyboard.stories.tsx
@@ -106,3 +106,41 @@ export const Styled = (props?: Partial<Props>) => (
     />
   </Wrapper>
 )
+
+export const AnotherStyled = (props?: Partial<Props>) => (
+  <div
+    style={{
+      // @ts-ignore
+      '--size-scale-factor': 2,
+    }}
+  >
+    <Wrapper>
+      <Keyboard
+        {...props}
+        startKey={21}
+        endKey={108}
+        keyChannels={[
+          {
+            channel: 0,
+            key: 60,
+            velocity: 1,
+          },
+          {
+            channel: 0,
+            key: 63,
+            velocity: 1,
+          },
+          {
+            channel: 0,
+            key: 67,
+            velocity: 1,
+          },
+        ]}
+        keyComponents={{
+          natural: StyledNaturalKey,
+          accidental: StyledAccidentalKey,
+        }}
+      />
+    </Wrapper>
+  </div>
+)
diff --git a/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx b/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
index 199d905..17e3bfa 100644
--- a/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
+++ b/src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
@@ -104,7 +104,7 @@ const B12 = styled('div')({
   width: '100%',
   height: '100%',
   padding:
-    'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
+    'calc(3px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1)) calc(7px * var(--size-scale-factor, 1)) calc(3px * var(--size-scale-factor, 1))',
   boxSizing: 'border-box',
   position: 'absolute',
   top: 0,
@@ -123,7 +123,7 @@ const B14 = styled('div')({
   width: '100%',
   height: 'calc(6px * var(--size-scale-factor, 1))',
   padding:
-    '0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+    '0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
   boxSizing: 'border-box',
   position: 'absolute',
   bottom: 0,