Tokens

import { type ThemeTokens } from '@blockle/blocks-core';

export const tokens: ThemeTokens = {
  border: {
    radius: {
      1: '4px',
      2: '8px',
      3: '16px',
      4: '32px',
    },
    width: {
      thin: '1px',
      thick: '2px',
    },
  },
  color: {
    white: '#fff',
    black: '#000',
    primary: {
      '100': '#E4DFFF',
      '200': '#C6B7FF',
      '300': '#A488FF',
      '400': '#8660FF',
      '500': '#7265E3',
      '600': '#5E4DBA',
      '700': '#4D3CAB',
      '800': '#3B2A82',
      '900': '#2A1B5A',
    },
    secondary: {
      '100': '#DFFAF9',
      '200': '#B3F1EE',
      '300': '#7CF5CD',
      '400': '#4CE8BA',
      '500': '#7FE3F0',
      '600': '#68C6EF',
      '700': '#4DB8E8',
      '800': '#3399CC',
      '900': '#1A7FB3',
    },
    danger: {
      '100': '#FFE3E1',
      '200': '#FFBDB8',
      '300': '#FF9B90',
      '400': '#FF7A70',
      '500': '#FF5A52',
      '600': '#E03E39',
      '700': '#B32422',
      '800': '#80120F',
      '900': '#4D0A08',
    },
    info: {
      '100': '#E1F0FF',
      '200': '#B8DBFF',
      '300': '#90C4FF',
      '400': '#6CAEFF',
      '500': '#4D98FF',
      '600': '#337FEC',
      '700': '#1A66CC',
      '800': '#0D4D99',
      '900': '#053366',
    },
    success: {
      '100': '#E6F9F0',
      '200': '#B3F0D6',
      '300': '#7CE3BA',
      '400': '#4CE8A3',
      '500': '#1AD88C',
      '600': '#00B36A',
      '700': '#009354',
      '800': '#00773D',
      '900': '#005C29',
    },
    warning: {
      '100': '#FFF4E5',
      '200': '#FFE0B3',
      '300': '#FFCC80',
      '400': '#FFB84D',
      '500': '#FFA31A',
      '600': '#E08000',
      '700': '#B26600',
      '800': '#804D00',
      '900': '#4D3300',
    },
    background: {
      100: '#FFFFFF',
      200: '#F5F5F5',
      300: '#E0E0E0',
      400: '#AEAEAE',
      500: '#7A7A7A',
      600: '#4C4C4C',
      700: '#2E2E2E',
      800: '#1A1A1A',
      900: '#0D0D0D',
    },
    text: {
      100: '#FFFFFF',
      200: '#F5F5F5',
      300: '#E0E0E0',
      400: '#AEAEAE',
      500: '#7A7A7A',
      600: '#4C4C4C',
      700: '#2E2E2E',
      800: '#1A1A1A',
      900: '#0D0D0D',
    },
    neutral: {
      100: '#F7F7F7',
      200: '#E1E1E1',
      300: '#CFCFCF',
      400: '#B1B1B1',
      500: '#9E9E9E',
      600: '#7E7E7E',
      700: '#5E5E5E',
      800: '#3C3C3C',
      900: '#1A1A1A',
    },
  },
  shadow: {
    1: '0px 4px 8px rgba(0, 0, 0, 0.08)',
    2: '0px 8px 16px rgba(0, 0, 0, 0.08)',
    3: '0px 16px 24px rgba(0, 0, 0, 0.08)',
    4: '0px 24px 32px rgba(0, 0, 0, 0.08)',
    5: '0px 32px 40px rgba(0, 0, 0, 0.08)',
  },
  focus: {
    boxShadow: '0 0 1px 2px #7FE3F0',
  },
  spacing: {
    1: '4px',
    2: '8px',
    3: '16px',
    4: '24px',
    5: '32px',
    6: '40px',
    7: '48px',
    8: '64px',
  },
  transition: {
    slow: '240ms',
    normal: '120ms',
    fast: '80ms',
  },
  typography: {
    fontFamily: {
      body: '"Rubik", sans-serif',
      heading: '"Rubik", sans-serif',
      mono: '"Rubik", monospace',
    },
    fontSize: {
      xsmall: '12px',
      small: '14px',
      medium: '16px',
      large: '20px',
      xlarge: '24px',
    },
    fontWeight: {
      light: 300,
      normal: 400,
      medium: 500,
      strong: 700,
      bold: 800,
    },
    lineHeight: {
      xsmall: '16px',
      small: '20px',
      medium: '24px',
      large: '28px',
      xlarge: '32px',
    },
  },
};