pkg-components
Version:
314 lines (312 loc) • 8.21 kB
JavaScript
export const choices = {
color: {
brand: {
// Primary
pigmentGreen: '#00a650',
alizarinCrimson: '#ff0000',
guardsmanRed: '#C00000',
tabasco: '#A21B11',
chablis: '#FFF4F4',
turquoise: '#63BBAE',
whiteIce: '#deffed',
crispyMintGreen: '#1ea664',
pinkLight: '#FFC2C2',
darkerRed: '#5C0F0A',
redGradient: 'linear-gradient(180deg, #ea1d2c 0%, #C00000 96.15%)',
redGradientButton: 'linear-gradient(180deg, #ea1d2c 0%, #C00000 44.44%)',
// Secondary
deepCerulean: '#0062ff',
surfaceHover: '#00000012',
blueLagoon: '#006C85',
blueStone: '#00586C',
foam: '#E4F7FC',
// Neutral
mineShaft: '#282828',
doveGray: '#666666',
silver: '#C4C4C4',
overline: 'rgba(0, 0, 0, 0.4)',
selection: 'rgba(0, 0, 0, 0.1)',
mercury: '#E5E5E5',
wildSand: '#F5F5F5',
alabaster: '#F9F9F9',
white: '#FFFFFF',
// Campaigns
heavyMetal: '#212322',
schoolBusYellow: '#FEDD00',
// Feedback
japaneseLaurel: '#50a773',
red: '#F80000',
fuelYellow: '#F0A92E',
meteor: '#CC870F',
// Text
lust: '#ea1d2c',
easternBlue: '#0062ff',
steel: '#666666',
paleSlate: '#c4c4c4',
bokaraGray: '#282828',
indiaGreen: '#1a8900',
kuCrimson: '#EE0000',
// Backgrounds
lilyWhite: '#e4f7fc',
whiteSmoke: '#f5f5f5',
sweetPink: '#ec938d',
// Icons
kellyGreen: '#24ba00',
// Loaders
backgroundLoader: '#f3f3f3',
foreGroundLoader: '#ecebeb',
// Tags
blueTag: '#006c85',
orangeTag: '#e07c00'
},
gradient: {
shimmer: 'linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0) 81%)',
skeleton: '-48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed'
},
base: {
mineShaft: '#282828',
white: '#FFFFFF',
transparent: 'transparent'
}
},
spacing: {
none: 0,
xs: '0.125rem',
sm: '0.25rem',
md: '0.5rem',
lg: '0.75rem',
xl: '1rem',
'2xl': '1.5rem',
'3xl': '2rem',
'4xl': '3rem',
'5xl': '3.5rem',
'6xl': '4rem',
'7xl': '5rem',
'8xl': '6rem',
'9xl': '7rem',
'10xl': '8rem'
},
fontFamily: {
sans: ['Open Sans'],
light: ['PFont-Light'],
regular: ['PFont-Regular'],
medium: ['PFont-Medium'],
bold: ['PFont-Bold']
},
fontSize: {
base: '16px',
xs: '0.688rem',
'2xs': '0.625rem',
sm: '0.75rem',
md: '0.875rem',
lg: '1rem',
xl: '1.125rem',
'2xl': '1.25rem',
'3xl': '1.5rem',
'5xl': '1.875rem',
'6xl': '3rem',
'9xl': '5.862rem',
'10xl': '12.5rem'
},
fontSizeTitles: {
base: '16px',
'3xs': '0.75rem',
'2xs': '0.875rem',
xs: '1rem',
sm: '1.125rem',
md: '1.25rem',
md2: '1.375rem',
lg: '1.5rem',
xl: '1.75rem',
'2xl': '1.875rem'
},
fontWeight: {
none: 0,
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
},
lineHeight: {
none: '0.063rem',
xs: '0.936em',
'2xs': '0.625rem',
sm: '1.021rem',
md: '1.192rem',
lg: '1.362rem',
xl: '1.532rem',
'2xl': '1.703rem',
'3xl': '2.043rem',
'4xl': '2.383rem',
'5xl': '2.553rem',
'6xl': '4.086rem',
'9xl': '8rem',
'10xl': '17.05rem'
},
letterSpacing: {
tightest: '-.075rem',
tighter: '-.05rem',
tight: '-.025rem',
normal: '0',
wider: '.05rem',
widest: '.25rem'
},
boxShadow: {
none: 'none',
xs: '4px -6px 18px rgba(0, 0, 0, 0.05)',
'2xs': '0px 4px 8px rgba(27, 33, 56, 0.06)',
sm: '4px 4px 18px rgba(0, 0, 0, 0.12)',
md: '0px 16px 24px rgba(0, 0, 0, 0.14), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.2)',
lg: '-1px 7px 18px -2px rgba(0, 0, 0, 0.12)',
xl: '0px 4px 8px rgba(27, 33, 56, 0.06)',
redRose: 'rgb(232, 137, 137) 0px 0px 0px 2px',
red: 'rgb(210, 5, 5) 0px 0px 0px 2px',
blue: '0 0 0 .125em rgb(52, 131, 250)'
},
filter: {
none: 'none',
xs: 'drop-shadow(20px 20px 80px #1b21380d)'
},
borderRadius: {
none: '0',
'2xs': '0.25rem',
xs: '0.375rem',
sm: '0.625rem',
md: '0.75rem',
lg: '1.25rem',
full: '624.938rem'
},
borderWidth: {
none: '0',
xs: '0.063rem',
md: '0.094rem',
lg: '0.125rem',
xl: '0.188rem'
},
opacity: {
0: '0',
20: '0.20',
25: '0.25',
30: '0.3',
35: '0.35',
40: '0.4',
45: '0.45',
50: '0.5',
55: '0.55',
75: '0.75',
100: '1'
},
width: {
maxDesktop: '1366px',
maxMobile: '960px'
},
zIndex: {
auto: 'auto',
'-2': '-2',
'-1': '-1',
0: '0',
5: '5',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50',
999: '999',
9999: '9999',
99999: '99999',
high: '999999999',
modal: '99999999999',
toast: '99999999999999'
}
}
/**
* darkChoices
* Dark theme overrides for the `choices` design tokens.
* Keeps all original tokens and replaces/adjusts colors to fit a dark UI.
* @type {import('./path-to-choices').choices} // adjust path/type as needed
*/
export const darkChoices = {
...choices,
color: {
...choices.color,
base: {
...choices.color.base,
// surfaces: use deep/dark surfaces instead of bright whites
white: '#12151c', // main surface / background
black: '#FFFFFF' // text / foreground in dark theme (inverse naming kept for compatibility)
},
brand: {
...choices.color.brand,
// Primary family — tuned for dark backgrounds (slightly brighter/higher contrast)
pigmentGreen: '#00c06a',
alizarinCrimson: '#ff5252',
guardsmanRed: '#b71c1c',
tabasco: '#7a0f0c',
chablis: '#232425',
turquoise: '#2aa19a',
pinkLight: '#5a2b2b',
darkerRed: '#3a0705',
redGradient: 'linear-gradient(180deg, #D9382A 0%, #9B0E0E 96.15%)',
redGradientButton: 'linear-gradient(180deg, #D9382A 0%, #9B0E0E 44.44%)',
// Secondary
deepCerulean: '#3e99ff',
blueLagoon: '#4fb0c0',
blueStone: '#274b50',
foam: '#081216',
// Neutral (lightened for readable contrast on dark backgrounds)
mineShaft: '#d6d6d6',
doveGray: '#cfcfcf',
silver: '#8f8f8f',
overline: 'rgba(255, 255, 255, 0.08)',
selection: 'rgba(255, 255, 255, 0.06)',
mercury: '#2b2b2b',
wildSand: '#0f0f0f',
alabaster: '#070707',
white: '#0b0e0f',
// Campaigns
heavyMetal: '#0f1111',
schoolBusYellow: '#d4a900',
// Feedback
japaneseLaurel: '#57c17a',
red: '#ff6b6b',
fuelYellow: '#d79a2a',
meteor: '#a56809',
// Text-specific tokens preserved but lightened
lust: '#ff6b6b',
easternBlue: '#8fb8ff',
steel: '#cfcfcf',
paleSlate: '#9ea6ab',
bokaraGray: '#eeeeee',
indiaGreen: '#6ec26f',
kuCrimson: '#ff7373',
// Backgrounds adapted to dark surfaces
lilyWhite: '#071e1f',
whiteSmoke: '#0e0e0e',
sweetPink: '#4a2b28',
// Icons & extras
kellyGreen: '#1fb43a',
backgroundLoader: '#0f1313',
foreGroundLoader: '#191919',
blueTag: '#2f9aa0',
orangeTag: '#b86100'
},
// Clear text token group for dark theme (primary/secondary/inverse/disabled)
text: {
primary: '#FFFFFF',
secondary: '#C4C4C4',
disabled: 'rgba(255, 255, 255, 0.36)',
inverse: '#0b0f10'
},
gradient: {
...choices.color.gradient,
shimmer:
'linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0) 81%)',
skeleton: '-48px 78px 0 -48px #2a2f33, -51px 102px 0 -51px #2a2f33'
},
}
}