Make accidentals more prominent

Adjust metrics of styled accidentals.

src/components/StyledAccidentalKey/StyledAccidentalKey.tsx

@@ -107,9 +107,8 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           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',
+          height: 'calc(10 / 52 * 100%)',
+          padding: '0 calc(1px * var(--size-scale-factor, 1)) 0 0',
           boxSizing: 'border-box',
           position: 'absolute',
           top: 0,
@@ -131,16 +130,13 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           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',
+          height: hasKeyChannels ? 'calc(38 / 52 * 100%)' : 'calc(34 / 52 * 100%)',
           boxSizing: 'border-box',
           position: 'absolute',
-          top: 0,
+          bottom: hasKeyChannels ? 'calc(4 / 52 * 100%)' : 'calc(8 / 52 * 100%)',
           right: 0,
-          paddingBottom: hasKeyChannels
-            ? 'calc(3px * var(--size-scale-factor, 1))'
-            : 'calc(5px * var(--size-scale-factor, 1))',
+          paddingRight: 'calc(1px * var(--size-scale-factor, 1))',
+          paddingLeft: 0,
           opacity: hasKeyChannels ? 0.5 : '1',
         }}
       >
@@ -157,6 +153,7 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           width: '100%',
+          height: hasKeyChannels ? 'calc(2 / 52 * 100%)' : 'calc(6 / 52 * 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',
@@ -180,12 +177,11 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           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(3px * var(--size-scale-factor, 1))',
+          height: hasKeyChannels ? 'calc(42 / 52 * 100%)' : 'calc(38 / 52 * 100%)',
+          padding: '0 calc(3px * var(--size-scale-factor, 1)) 0 calc(3px * var(--size-scale-factor, 1))',
           boxSizing: 'border-box',
           position: 'absolute',
-          top: 0,
+          top: 'calc(3px * var(--size-scale-factor, 1))',
           left: 0,
         }}
       >
@@ -204,18 +200,14 @@ const StyledAccidentalKey: React.FC<Props> = ({ keyChannels }) => {
       <div
         style={{
           width: '100%',
-          padding:
-            '0 calc(1px * var(--size-scale-factor, 1)) calc(5px * var(--size-scale-factor, 1)) calc(2px * var(--size-scale-factor, 1))',
+          paddingTop: 0,
+          paddingRight: 'calc(1px * var(--size-scale-factor, 1))',
+          paddingLeft: 'calc(2px * var(--size-scale-factor, 1))',
           boxSizing: 'border-box',
           position: 'absolute',
-          bottom: 0,
+          bottom: hasKeyChannels ? 'calc(4 / 52 * 100%)' : 'calc(8 / 52 * 100%)',
           left: 0,
-          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))',
+          height: 'calc(1px * var(--size-scale-factor, 1))',
           opacity: hasKeyChannels ? 0.5 : '1',
         }}
       >

src/components/StyledNaturalKey/StyledNaturalKey.tsx

@@ -64,7 +64,7 @@ const StyledNaturalKey: React.FC<Props> = ({ keyChannels }) => {
           left: '0',
           maskImage: 'linear-gradient(to bottom, transparent, white)',
           WebkitMaskImage: 'linear-gradient(to bottom, transparent, white)',
-          backgroundColor: hasKeyChannels ? 'black' : LIGHT_COLOR,
+          backgroundColor: LIGHT_COLOR,
           opacity: hasKeyChannels ? 0.12 : 0.25,
         }}
       />

tsconfig.json

@@ -11,6 +11,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
+    "noImplicitAny": true,
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",