theme.ts

import { Theme } from 'vocs';

export const baseColors = {
  white: 'white',
  failure: '#ED4B9E',
  failure33: '#ED4B9E33',
  primary: '#1FC7D4',
  primary0f: '#1FC7D40f',
  primary3D: '#1FC7D43D',
  primaryBright: '#53DEE9',
  primaryDark: '#0098A1',
  success: '#31D0AA',
  success19: '#31D0AA19',
  warning: '#FFB237',
  warning2D: '#ED4B9E2D',
  warning33: '#ED4B9E33',
};

export const additionalColors = {
  binance: '#F0B90B',
  overlay: '#452a7a',
  gold: '#FFC700',
  silver: '#B2B2B2',
  bronze: '#E7974D',
  yellow: '#D67E0A',
};

export const lightColors = {
  ...baseColors,
  ...additionalColors,
  secondary: '#7645D9',
  secondary80: '#7645D980',
  background: '#FAF9FA',
  backgroundDisabled: '#E9EAEB',
  backgroundAlt: '#FFFFFF',
  backgroundAlt2: 'rgba(255, 255, 255, 0.7)',
  cardBorder: '#E7E3EB',
  contrast: '#191326',
  dropdown: '#F6F6F6',
  dropdownDeep: '#EEEEEE',
  invertedContrast: '#FFFFFF',
  input: '#eeeaf4',
  inputSecondary: '#d7caec',
  tertiary: '#EFF4F5',
  text: '#280D5F',
  text99: '#280D5F99',
  textDisabled: '#BDC2C4',
  textSubtle: '#7A6EAA',
  disabled: '#E9EAEB',
  gradientPrimary:
    'linear-gradient(228.54deg, #1FC7D4 -13.69%, #7645D9 91.33%)',
  gradientBubblegum:
    'linear-gradient(139.73deg, #E5FDFF 0%, #F3EFFF 100%)',
  gradientInverseBubblegum:
    'linear-gradient(139.73deg, #F3EFFF 0%, #E5FDFF 100%)',
  gradientCardHeader:
    'linear-gradient(111.68deg, #F2ECF2 0%, #E8F2F6 100%)',
  gradientBlue: 'linear-gradient(180deg, #A7E8F1 0%, #94E1F2 100%)',
  gradientViolet: 'linear-gradient(180deg, #E2C9FB 0%, #CDB8FA 100%)',
  gradientVioletAlt:
    'linear-gradient(180deg, #CBD7EF 0%, #9A9FD0 100%)',
  gradientGold: 'linear-gradient(180deg, #FFD800 0%, #FDAB32 100%)',
  gradientBold: 'linear-gradient(#53DEE9, #7645D9)',
};

export const darkColors = {
  ...baseColors,
  ...additionalColors,
  secondary: '#A881FC',
  secondary80: '#A881FC80',
  background: '#08060B',
  backgroundDisabled: '#3c3742',
  backgroundAlt: '#27262c',
  backgroundAlt2: 'rgba(39, 38, 44, 0.7)',
  cardBorder: '#383241',
  contrast: '#FFFFFF',
  dropdown: '#1E1D20',
  dropdownDeep: '#100C18',
  invertedContrast: '#191326',
  input: '#372F47',
  inputSecondary: '#262130',
  primaryDark: '#0098A1',
  tertiary: '#353547',
  text: '#F4EEFF',
  text99: '#F4EEFF99',
  textDisabled: '#666171',
  textSubtle: '#B8ADD2',
  disabled: '#524B63',
  gradientPrimary:
    'linear-gradient(228.54deg, #1FC7D4 -13.69%, #9A6AFF 91.33%)',
  gradientBubblegum:
    'linear-gradient(139.73deg, #313D5C 0%, #3D2A54 100%)',
  gradientInverseBubblegum:
    'linear-gradient(139.73deg, #3D2A54 0%, #313D5C 100%)',
  gradientCardHeader:
    'linear-gradient(166.77deg, #3B4155 0%, #3A3045 100%)',
  gradientBlue: 'linear-gradient(180deg, #00707F 0%, #19778C 100%)',
  gradientViolet: 'linear-gradient(180deg, #6C4999 0%, #6D4DB2 100%)',
  gradientVioletAlt:
    'linear-gradient(180deg, #434575 0%, #66578D 100%)',
  gradientGold: 'linear-gradient(180deg, #FFD800 0%, #FDAB32 100%)',
  gradientBold: 'linear-gradient(#53DEE9, #9A6AFF)',
};

const message = {
  warning: '#D67E0A',
  success: '#129E7D',
  danger: baseColors.failure,
};

export const theme: Theme = {
  accentColor: baseColors.primary,
  variables: {
    color: {
      warningBackground: '#FFB23719',
      warningText: message.warning,
      warningBorder: baseColors.warning,
      successBackground: 'rgba(49, 208, 170, 0.1)',
      successBorder: baseColors.success,
      successText: message.success,
      dangerBackground: '#ED4B9E19',
      dangerBorder: baseColors.failure,
      dangerText: message.danger,
      text: {
        dark: darkColors.text,
        light: lightColors.text,
      },
      text2: {
        dark: darkColors.textSubtle,
        light: lightColors.textSubtle,
      },
      text3: {
        dark: darkColors.text99,
        light: lightColors.text99,
      },
      text4: {
        dark: darkColors.textDisabled,
        light: lightColors.textDisabled,
      },
      background: {
        dark: darkColors.backgroundAlt,
        light: lightColors.backgroundAlt,
      },
      background2: {
        dark: darkColors.dropdown,
        light: lightColors.dropdown,
      },
      background3: {
        dark: darkColors.background,
        light: lightColors.background,
      },
      background4: {
        dark: darkColors.backgroundDisabled,
        light: lightColors.backgroundDisabled,
      },
      background5: {
        dark: darkColors.cardBorder,
        light: lightColors.cardBorder,
      },
    },
  },
};