113 lines
No EOL
3.7 KiB
JavaScript
113 lines
No EOL
3.7 KiB
JavaScript
// https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale
|
|
|
|
const light = {
|
|
step1: '#fbfdff', // Step 1: App background
|
|
step2: '#f9f9f9', // Step 2: Subtle background
|
|
step3: '#f1f1f1', // Step 3: UI element background
|
|
step4: '#ebebeb', // Step 4: Hovered UI element background
|
|
step5: '#e4e4e4', // Step 5: Active / Selected UI element background
|
|
step6: '#ddd', // Step 6: Subtle borders and separators
|
|
step7: '#d4d4d4', // Step 7: UI element border and focus rings
|
|
step8: '#bbb', // Step 8: Hovered UI element border
|
|
step9: '#8d8d8d', // Step 9: Solid backgrounds
|
|
step10: '#808080', // Step 10: Hovered solid backgrounds
|
|
step11: '#646464', // Step 11: Low-contrast text
|
|
step12: '#202020', // Step 12: High-contrast text
|
|
};
|
|
|
|
const dark = {
|
|
step1: '#090a0b', // Step 1: App background
|
|
step2: '#151515', // Step 2: Subtle background
|
|
step3: '#18181b', // Step 3: UI element background
|
|
step4: '#303030', // Step 4: Hovered UI element background
|
|
step5: '#373737', // Step 5: Active / Selected UI element background
|
|
step6: '#201c1c', // Step 6: Subtle borders and separators
|
|
step7: '#4a4a4a', // Step 7: UI element border and focus rings
|
|
step8: '#606060', // Step 8: Hovered UI element border
|
|
step9: '#6e6e6e', // Step 9: Solid backgrounds
|
|
step10: '#818181', // Step 10: Hovered solid backgrounds
|
|
step11: '#b1b1b1', // Step 11: Low-contrast text
|
|
step12: '#eee', // Step 12: High-contrast text
|
|
};
|
|
|
|
const lightColors = {
|
|
'light-app-bg': light.step1,
|
|
'light-subtle-bg': light.step2,
|
|
'light-ui-element-bg': light.step3,
|
|
'light-hover-ui-element-bg': light.step4,
|
|
'light-active-ui-element-bg': light.step5,
|
|
'light-subtle-separator': light.step6,
|
|
'light-ui-element-separator': light.step7,
|
|
'light-hover-ui-element-separator': light.step8,
|
|
'light-solid-bg': light.step9,
|
|
'light-hover-solid-bg': light.step10,
|
|
'light-low-contrast-txt': light.step11,
|
|
'light-high-contrast-txt': light.step12,
|
|
};
|
|
|
|
const darkColors = {
|
|
'dark-app-bg': dark.step1,
|
|
'dark-subtle-bg': dark.step2,
|
|
'dark-ui-element-bg': dark.step3,
|
|
'dark-hover-ui-element-bg': dark.step4,
|
|
'dark-active-ui-element-bg': dark.step5,
|
|
'dark-subtle-separator': dark.step6,
|
|
'dark-ui-element-separator': dark.step7,
|
|
'dark-hover-ui-element-separator': dark.step8,
|
|
'dark-solid-bg': dark.step9,
|
|
'dark-hover-solid-bg': dark.step10,
|
|
'dark-low-contrast-txt': dark.step11,
|
|
'dark-high-contrast-txt': dark.step12,
|
|
};
|
|
|
|
const theme = {
|
|
accent: '#4F81FE',
|
|
field: '#1E2023',
|
|
item: '#141719',
|
|
background: '#090A0B',
|
|
|
|
'widget-fill': '#0C0D0E99',
|
|
'widget-stroke': '#292C3180',
|
|
'widget-placeholder': '#292C3180',
|
|
|
|
'button-disabled': '#292A2A',
|
|
'button-secondary-active': '#1E212480',
|
|
'button-secondary-selected': '#343841',
|
|
'button-secondary-active-solid': '#2F3138',
|
|
'button-dark-transparent-fill': '#141719B3',
|
|
'button-dark-stroke-from': '#181B1E',
|
|
'button-dark-stroke-to': '#141719',
|
|
'button-dark-fill': '#141719',
|
|
|
|
'icon-inactive': '#677283',
|
|
'icon-active': '#fff',
|
|
'icon-disabled': '#2F343F',
|
|
|
|
'text-header': '#F4F6F6',
|
|
'text-primary': '#D1D6DB',
|
|
'text-secondary': '#768698',
|
|
'text-teritary': '#424C56',
|
|
'text-typeable': '#8B9299',
|
|
'text-clickable': '#637B96',
|
|
'text-disabled': '#404242',
|
|
|
|
'menu-border-from': '#6A748917',
|
|
'menu-border-to': '#12141957',
|
|
'menu-fill': '#161717CC',
|
|
'menu-transparent-fill': '#16171766',
|
|
};
|
|
|
|
const extras = {
|
|
'accent-hover': '#729AFE',
|
|
'accent-active': '#95B3FE',
|
|
};
|
|
|
|
const colors = {
|
|
...lightColors,
|
|
...darkColors,
|
|
...extras,
|
|
...theme,
|
|
};
|
|
|
|
export default colors;
|
|
|