Add more customizability

Make custom theme scalable and more flexible in terms of customization.

src/components/Keyboard/Keyboard.tsx

@@ -107,6 +107,7 @@ const Keyboard: React.FC<Props> = ({
         width: width!,
         height: height!,
       }}
+      role="presentation"
     >
       {keys.map((k) => {
         const isNatural = isNaturalKey(k)

src/components/StyledAccidentalKey/StyledAccidentalKey.tsx

@@ -3,125 +3,140 @@ import * as PropTypes from 'prop-types'
 import styled from 'styled-components'
 import keyPropTypes from '../../services/keyPropTypes'
 
+const DEFAULT_COLOR = '#35313b'
+const LIGHT_COLOR = 'white'
+
 const Base = styled('div')({
   width: '100%',
   height: '100%',
   position: 'relative',
 })
 
-const B1 = styled('div')`
-  width: 100%;
-  height: 100%;
-  position: relative;
-  border-radius: 1px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-`
-const B2 = styled('div')`
-  width: 100%;
-  height: 100%;
-  border-radius: 0 0 1px 1px;
-  background-color: var(--color-accidental-key, #35313b);
-  mask-image: linear-gradient(to bottom, white, rgba(0, 0, 0, 0.9));
-`
-const B3 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-accidental-key, #35313b);
-`
-const B4 = styled('div')`
-  width: 100%;
-  height: 4px;
-  padding: 1px 0 0 0;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-const B5 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  opacity: 0.12;
-`
-const B6 = styled('div')`
-  width: 2px;
-  height: 11px;
-  padding: 1px 1px 1px 0;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  right: 0;
-`
-const B7 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  mask-image: linear-gradient(to bottom, transparent, white);
-  opacity: 0.4;
-`
-const B8 = styled('div')`
-  width: 2px;
-  height: 100%;
-  padding: 10px 1px 6px 0;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  right: 0;
-`
-const B9 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  opacity: 0.4;
-  border-bottom-right-radius: 1px;
-`
-const B10 = styled('div')`
-  width: 100%;
-  padding: 0 1px 1px 1px;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`
-const B11 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  border-radius: 4px 4px 1px 1px;
-  opacity: 0.12;
-`
-const B12 = styled('div')`
-  width: 100%;
-  height: 100%;
-  padding: 3px 3px 7px 2px;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-const B13 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  mask-image: linear-gradient(to bottom, transparent, white);
-  border-radius: 99999px;
-`
-const B14 = styled('div')`
-  width: 100%;
-  height: 6px;
-  padding: 0 1px 5px 1px;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`
-const B15 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  border-radius: 0 0 1px 1px;
-  opacity: 0.4;
-`
+const B2 = styled('div')({
+  width: '100%',
+  height: '100%',
+  borderRadius: '0 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  backgroundColor: `var(--color-accidental-key, ${DEFAULT_COLOR})`,
+  maskImage: 'linear-gradient(to bottom, white, rgba(0, 0, 0, 0.9))',
+})
+
+const B3 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: `var(--color-accidental-key, ${DEFAULT_COLOR})`,
+})
+
+const B4 = styled('div')({
+  width: '100%',
+  height: 'calc(4px * var(--size-scale-factor, 1))',
+  padding: 'calc(1px * var(--size-scale-factor, 1)) 0 0 0',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+})
+
+const B5 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  opacity: '0.12',
+})
+
+const B6 = styled('div')({
+  width: 'calc(2px * var(--size-scale-factor, 1))',
+  height: 'calc(11px * var(--size-scale-factor, 1))',
+  padding:
+    'calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) 0',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+})
+
+const B7 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: LIGHT_COLOR,
+  maskImage: 'linear-gradient(to bottom, transparent, white)',
+  opacity: '0.4',
+})
+
+const B8 = styled('div')({
+  width: 'calc(2px * var(--size-scale-factor, 1))',
+  height: '100%',
+  padding:
+    'calc(10px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(6px * var(--size-scale-factor, 1)) 0',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+})
+
+const B9 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: LIGHT_COLOR,
+  opacity: '0.4',
+  borderBottomRightRadius: 'calc(1px * var(--size-scale-factor, 1))',
+})
+
+const B10 = styled('div')({
+  width: '100%',
+  padding:
+    '0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+})
+
+const B11 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: LIGHT_COLOR,
+  borderRadius:
+    'calc(4px * var(--size-scale-factor, 1)) calc(4px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  opacity: '0.12',
+})
+
+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))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+})
+
+const B13 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: LIGHT_COLOR,
+  maskImage: 'linear-gradient(to bottom, transparent, white)',
+  borderRadius: 99999,
+})
+
+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))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+})
+
+const B15 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: LIGHT_COLOR,
+  borderRadius: '0 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  opacity: '0.4',
+})
 
 const B16 = styled('div')({
   width: '100%',
@@ -130,97 +145,113 @@ const B16 = styled('div')({
   position: 'absolute',
   top: 0,
   left: 0,
+  borderRadius: '0 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+})
+
+const B17 = styled('div')({
+  width: '100%',
+  height: 'calc(6 / 50 * 100%)',
+  padding: '0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
 })
 
-const B17 = styled('div')`
-  width: 100%;
-  height: calc(6 / 50 * 100%);
-  padding: 0 1px 1px;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`
-
-const B18 = styled('div')`
-  width: 100%;
-  height: calc(44 / 50 * 100%);
-  padding: 1px 1px 0;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-`
+const B18 = styled('div')({
+  width: '100%',
+  height: 'calc(44 / 50 * 100%)',
+  padding: 'calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1)) 0',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+})
+
+const B19 = styled('div')({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  borderRadius: 'calc(1px * var(--size-scale-factor, 1))',
+  boxShadow: '0 0 0 calc(1px * var(--size-scale-factor, 1)) rgba(0, 0, 0, 0.25)',
+})
 
 type Props = PropTypes.InferProps<typeof keyPropTypes>
 
 const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
   const hasKeyChannels = Array.isArray(keyChannels!) && keyChannels.length > 0
   return (
-    <Base>
-      <B1
-        style={{
-          // @ts-ignore
-          '--color-accidental-key': hasKeyChannels ? `var(--color-channel-${keyChannels![0]!.channel})` : undefined,
-        }}
-      >
-        <B16 />
-        <B17>
-          <B2
-            style={{
-              opacity: hasKeyChannels ? 0.75 : 1,
-            }}
-          />
-        </B17>
-        <B18>
-          <B3
-            style={{
-              opacity: hasKeyChannels ? 0.75 : 1,
-            }}
-          />
-        </B18>
-        <B4>
-          <B5 />
-        </B4>
-        <B6
-          style={{
-            opacity: hasKeyChannels ? 0.5 : 1,
-          }}
-        >
-          <B7 />
-        </B6>
-        <B8
+    <Base
+      style={{
+        // @ts-ignore
+        '--color-accidental-key': hasKeyChannels ? `var(--color-channel-${keyChannels![0]!.channel})` : undefined,
+      }}
+    >
+      <B19 />
+      <B16 />
+      <B17>
+        <B2
           style={{
-            paddingBottom: hasKeyChannels ? 3 : 5,
-            opacity: hasKeyChannels ? 0.5 : 1,
+            opacity: hasKeyChannels ? 0.75 : '1',
           }}
-        >
-          <B9 />
-        </B8>
-        <B10
+        />
+      </B17>
+      <B18>
+        <B3
           style={{
-            opacity: hasKeyChannels ? 3 : 4,
+            opacity: hasKeyChannels ? 0.75 : '1',
           }}
-        >
-          <B11 />
-        </B10>
-        <B12>
-          <B13
-            style={{
-              opacity: hasKeyChannels ? 0.06 : 0.12,
-            }}
-          />
-        </B12>
-        <B14
+        />
+      </B18>
+      <B4>
+        <B5 />
+      </B4>
+      <B6
+        style={{
+          opacity: hasKeyChannels ? 0.5 : '1',
+        }}
+      >
+        <B7 />
+      </B6>
+      <B8
+        style={{
+          paddingBottom: hasKeyChannels
+            ? 'calc(3px * var(--size-scale-factor, 1))'
+            : 'calc(5px * var(--size-scale-factor, 1))',
+          opacity: hasKeyChannels ? 0.5 : '1',
+        }}
+      >
+        <B9 />
+      </B8>
+      <B10
+        style={{
+          opacity: hasKeyChannels ? 3 : '4',
+        }}
+      >
+        <B11 />
+      </B10>
+      <B12>
+        <B13
           style={{
-            height: hasKeyChannels ? 4 : 6,
-            paddingBottom: hasKeyChannels ? 3 : 5,
-            opacity: hasKeyChannels ? 0.5 : 1,
+            opacity: hasKeyChannels ? 0.06 : '0.12',
           }}
-        >
-          <B15 />
-        </B14>
-      </B1>
+        />
+      </B12>
+      <B14
+        style={{
+          height: hasKeyChannels
+            ? 'calc(4px * var(--size-scale-factor, 1))'
+            : 'calc(6px * var(--size-scale-factor, 1))',
+          paddingBottom: hasKeyChannels
+            ? 'calc(3px * var(--size-scale-factor, 1))'
+            : 'calc(5px * var(--size-scale-factor, 1))',
+          opacity: hasKeyChannels ? 0.5 : '1',
+        }}
+      >
+        <B15 />
+      </B14>
     </Base>
   )
 }

src/components/StyledNaturalKey/StyledNaturalKey.tsx

@@ -3,163 +3,170 @@ import * as PropTypes from 'prop-types'
 import styled from 'styled-components'
 import keyPropTypes from '../../services/keyPropTypes'
 
+const DEFAULT_COLOR = '#e3e3e5'
+const LIGHT_COLOR = 'white'
+
 const Base = styled('div')({
   width: '100%',
   height: '100%',
   position: 'relative',
 })
 
-const N1 = styled('div')`
-  width: 100%;
-  height: 100%;
-  position: relative;
-`
+const N1 = styled('div')({
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+})
 
-const N2 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  position: absolute;
-  top: 0;
-  left: 0;
-`
+const N2 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+})
 
-const N3 = styled('div')`
-  width: 100%;
-  height: 100%;
-  padding: 1px 0 1px 1px;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-`
+const N3 = styled('div')({
+  width: '100%',
+  height: '100%',
+  padding:
+    'calc(1px * var(--size-scale-factor, 1)) 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+})
 
-const N4 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-natural-key, #e3e3e5);
-  border-radius: 0 0 1px 1px;
-`
+const N4 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: `var(--color-natural-key, ${DEFAULT_COLOR})`,
+  borderRadius: '0 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+})
 
-const N5 = styled('div')`
-  width: 100%;
-  height: calc(33 / 80 * 100%);
-  padding: 0 1px 2px 2px;
-  box-sizing: border-box;
-  background-clip: content-box;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  opacity: 0.25;
-  mask-image: linear-gradient(to bottom, transparent, white);
-`
+const N5 = styled('div')({
+  width: '100%',
+  height: 'calc(33 / 80 * 100%)',
+  padding:
+    '0 calc(1px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  backgroundClip: 'content-box',
+  position: 'absolute',
+  bottom: '0',
+  left: '0',
+  opacity: '0.25',
+  maskImage: 'linear-gradient(to bottom, transparent, white)',
+})
 
-const N6 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  padding: 1px 2px 3px 3px;
-  box-sizing: border-box;
-  background-clip: content-box;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  opacity: 0.08;
-  mask-image: linear-gradient(to bottom, transparent, white);
-`
+const N6 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  padding:
+    'calc(1px * 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))',
+  boxSizing: 'border-box',
+  backgroundClip: 'content-box',
+  position: 'absolute',
+  bottom: '0',
+  left: '0',
+  opacity: '0.08',
+  maskImage: 'linear-gradient(to bottom, transparent, white)',
+})
 
-const N7 = styled('div')`
-  width: 100%;
-  height: 2px;
-  padding: 0 0 1px 1px;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`
+const N7 = styled('div')({
+  width: '100%',
+  height: 'calc(2px * var(--size-scale-factor, 1))',
+  padding: '0 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  bottom: '0',
+  left: '0',
+})
 
-const N8 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  border-radius: 0 0 1px 1px;
-  opacity: 0.25;
-`
-const N9 = styled('div')`
-  width: 2px;
-  height: 100%;
-  padding: 1px 0 1px 1px;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-`
-const N10 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  border-radius: 0 0 0 1px;
-  opacity: 0.07;
-`
-const N11 = styled('div')`
-  width: 100%;
-  height: 6px;
-  padding: 1px 0 0 1px;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-const N12 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  mask-image: linear-gradient(to bottom, white, transparent);
-  opacity: 0.12;
-`
-const N13 = styled('div')`
-  width: 100%;
-  padding: 1px 0 0 1px;
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  left: 0;
-`
-const N14 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  opacity: 0.12;
-`
-const N15 = styled('div')`
-  width: 1px;
-  height: 100%;
-  padding: 1px 0 1px 0;
-  box-sizing: border-box;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-`
-const N16 = styled('div')`
-  width: 100%;
-  height: 100%;
-  background-color: white;
-  border-radius: 0 0 1px 0;
-  opacity: 0.12;
-`
+const N8 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  borderRadius: '0 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  opacity: '0.25',
+})
+const N9 = styled('div')({
+  width: 'calc(2px * var(--size-scale-factor, 1))',
+  height: '100%',
+  padding:
+    'calc(1px * var(--size-scale-factor, 1)) 0 calc(1px * var(--size-scale-factor, 1)) calc(1px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  bottom: '0',
+  left: '0',
+})
+const N10 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  borderRadius: '0 0 0 calc(1px * var(--size-scale-factor, 1))',
+  opacity: '0.07',
+})
+const N11 = styled('div')({
+  width: '100%',
+  height: 'calc(6px * var(--size-scale-factor, 1))',
+  padding: 'calc(1px * var(--size-scale-factor, 1)) 0 0 calc(1px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+})
+const N12 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  maskImage: 'linear-gradient(to bottom, white, transparent)',
+  opacity: '0.12',
+})
+const N13 = styled('div')({
+  width: '100%',
+  padding: 'calc(1px * var(--size-scale-factor, 1)) 0 0 calc(1px * var(--size-scale-factor, 1))',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  top: '0',
+  left: '0',
+})
+const N14 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'black',
+  opacity: '0.12',
+})
+const N15 = styled('div')({
+  width: 'calc(1px * var(--size-scale-factor, 1))',
+  height: '100%',
+  padding: 'calc(1px * var(--size-scale-factor, 1)) 0 calc(1px * var(--size-scale-factor, 1)) 0',
+  boxSizing: 'border-box',
+  position: 'absolute',
+  bottom: '0',
+  right: '0',
+})
+const N16 = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: LIGHT_COLOR,
+  borderRadius: '0 0 calc(1px * var(--size-scale-factor, 1)) 0',
+  opacity: '0.12',
+})
 
 type Props = PropTypes.InferProps<typeof keyPropTypes>
 
 const StyledNaturalKey: React.FC<Props> = ({ keyChannels }) => {
   const hasKeyChannels = Array.isArray(keyChannels!) && keyChannels.length > 0
   return (
-    <Base>
-      <N1
-        style={{
-          // @ts-ignore
-          '--color-natural-key': hasKeyChannels ? `var(--color-channel-${keyChannels![0]!.channel})` : undefined,
-        }}
-      >
+    <Base
+      style={{
+        // @ts-ignore
+        '--color-natural-key': hasKeyChannels ? `var(--color-channel-${keyChannels![0]!.channel})` : undefined,
+      }}
+    >
+      <N1>
         <N2 />
         <N3>
           <N4
@@ -170,7 +177,7 @@ const StyledNaturalKey: React.FC<Props> = ({ keyChannels }) => {
         </N3>
         <N5
           style={{
-            backgroundColor: hasKeyChannels ? 'black' : 'white',
+            backgroundColor: hasKeyChannels ? 'black' : LIGHT_COLOR,
             opacity: hasKeyChannels ? 0.12 : 0.25,
           }}
         />
@@ -186,7 +193,9 @@ const StyledNaturalKey: React.FC<Props> = ({ keyChannels }) => {
         </N11>
         <N13
           style={{
-            height: hasKeyChannels ? 4 : 3,
+            height: hasKeyChannels
+              ? 'calc(4px * var(--size-scale-factor, 1))'
+              : 'calc(3px * var(--size-scale-factor, 1))',
           }}
         >
           <N14 />