Browse Source

Add more customizability

Make custom theme scalable and more flexible in terms of customization.
master
TheoryOfNekomata 4 years ago
parent
commit
aafaf3e10d
3 changed files with 371 additions and 330 deletions
  1. +1
    -0
      src/components/Keyboard/Keyboard.tsx
  2. +221
    -190
      src/components/StyledAccidentalKey/StyledAccidentalKey.tsx
  3. +149
    -140
      src/components/StyledNaturalKey/StyledNaturalKey.tsx

+ 1
- 0
src/components/Keyboard/Keyboard.tsx View File

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


+ 221
- 190
src/components/StyledAccidentalKey/StyledAccidentalKey.tsx View File

@@ -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>
)
}


+ 149
- 140
src/components/StyledNaturalKey/StyledNaturalKey.tsx View File

@@ -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 />


Loading…
Cancel
Save