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