import { ColorDesignToken, ShadowDesignToken } from '@shoptet/tokens';

import { Scales } from './scales';

export const legacyConfig = {
  default: {
    effect: {
      boxShadow: {
        shadowDown: ShadowDesignToken({
          offsetX: Scales.dimension[0],
          offsetY: Scales.dimension[3],
          blur: Scales.dimension[7],
          spread: Scales.dimension[0],
          color: ColorDesignToken([Scales.swatch.neutral[0], Scales.blend[8]]),
        }),
        shadowUp: ShadowDesignToken({
          offsetX: Scales.dimension[0],
          offsetY: Scales.dimension[-3],
          blur: Scales.dimension[7],
          spread: Scales.dimension[0],
          color: ColorDesignToken([Scales.swatch.neutral[0], Scales.blend[8]]),
        }),
        shadowFocus: ShadowDesignToken({
          offsetX: Scales.dimension[0],
          offsetY: Scales.dimension[0],
          blur: Scales.dimension[2],
          spread: Scales.dimension[0],
          color: ColorDesignToken(Scales.swatch.controls[725]),
        }),
      },
    },
    colors: {
      forms: {
        background: ColorDesignToken(Scales.swatch.neutral[1000]),
        border: ColorDesignToken(Scales.swatch.neutral[875]),
        activated: ColorDesignToken(Scales.swatch.controls[725]),
        shadow: ColorDesignToken(Scales.swatch.controls[725]),
        critical: ColorDesignToken(Scales.swatch.critical[600]),
        disabled: ColorDesignToken(Scales.swatch.neutral[950]),
        warning: ColorDesignToken(Scales.swatch.warning[775]),
      },
      surface: {
        primary: ColorDesignToken(Scales.swatch.neutral[950]),
        secondary: ColorDesignToken(Scales.swatch.neutral[1000]),
        tertiary: ColorDesignToken(Scales.swatch.neutral[1000]),
        overlay: ColorDesignToken([Scales.swatch.neutral[0], Scales.blend[50]]),
        lightGray: ColorDesignToken(Scales.swatch.neutral[975]),
        lightBlue: ColorDesignToken(Scales.swatch.blue[975]),
        inverted: ColorDesignToken(Scales.swatch.neutral[325]),
      },
      foregrounds: {
        headlines: {
          primary: ColorDesignToken(Scales.swatch.blue[725]),
          secondary: ColorDesignToken(Scales.swatch.neutral[0]),
          tertiary: ColorDesignToken(Scales.swatch.green[625]),
        },
        content: {
          primary: ColorDesignToken(Scales.swatch.neutral[0]),
          secondary: ColorDesignToken(Scales.swatch.neutral[575]),
          tertiary: ColorDesignToken(Scales.swatch.neutral[675]),
          inverted: ColorDesignToken(Scales.swatch.neutral[1000]),
        },
        icons: {
          primary: ColorDesignToken(Scales.swatch.neutral[0]),
          secondary: ColorDesignToken(Scales.swatch.neutral[675]),
          tertiary: ColorDesignToken(Scales.swatch.neutral[1000]),
        },
        borders: {
          primary: ColorDesignToken(Scales.swatch.neutral[950]),
          secondary: ColorDesignToken(Scales.swatch.neutral[900]),
        },
      },
      interactive: {
        primary: {
          enabled: ColorDesignToken(Scales.swatch.controls[725]),
          hover: ColorDesignToken(Scales.swatch.controls[650]),
          disabled: ColorDesignToken(Scales.swatch.neutral[675]),
        },
        action: {
          enabled: ColorDesignToken(Scales.swatch.main[775]),
          hover: ColorDesignToken(Scales.swatch.main[650]),
          disabled: ColorDesignToken(Scales.swatch.neutral[675]),
        },
        links: {
          enabled: ColorDesignToken(Scales.swatch.links[475]),
          hover: ColorDesignToken(Scales.swatch.links[550]),
          disabled: ColorDesignToken([Scales.swatch.links[475], Scales.blend[5]]),
        },
        destructive: {
          enabled: ColorDesignToken(Scales.swatch.critical[600]),
          hover: ColorDesignToken(Scales.swatch.critical[525]),
          disabled: ColorDesignToken(Scales.swatch.neutral[675]),
        },
        secondary: {
          enabled: ColorDesignToken(Scales.swatch.neutral[675]),
          hover: ColorDesignToken(Scales.swatch.neutral[0]),
          disabled: ColorDesignToken(Scales.swatch.neutral[675]),
          activated: ColorDesignToken(Scales.swatch.controls[725]),
        },
        tabs: {
          backgroundEnabled: ColorDesignToken(Scales.swatch.neutral[950]),
          backgroundSelected: ColorDesignToken(Scales.swatch.neutral[1000]),
          border: ColorDesignToken(Scales.swatch.neutral[775]),
          selectedIndicator: ColorDesignToken(Scales.swatch.main[775]),
          backgroundHover: ColorDesignToken(Scales.swatch.controls[725]),
        },
        ghost: {
          enabled: ColorDesignToken(Scales.swatch.neutral[1000]),
          hover: ColorDesignToken(Scales.swatch.neutral[950]),
          activated: ColorDesignToken(Scales.swatch.controls[725]),
          subtle: ColorDesignToken(Scales.swatch.controls[925]),
          subtleHover: ColorDesignToken(Scales.swatch.controls[875]),
          activatedHover: ColorDesignToken(Scales.swatch.controls[650]),
        },
        superadmin: {
          enabled: ColorDesignToken(Scales.swatch.superadmin[600]),
          hover: ColorDesignToken(Scales.swatch.superadmin[525]),
          activated: ColorDesignToken(Scales.swatch.superadmin[525]),
        },
        content: {
          primary: ColorDesignToken(Scales.swatch.neutral[1000]),
          secondary: ColorDesignToken(Scales.swatch.neutral[0]),
        },
        focus: {
          primary: ColorDesignToken(Scales.swatch.controls[600]),
        },
        tertiary: {
          enabled: ColorDesignToken(Scales.swatch.neutral[0]),
          hover: ColorDesignToken(Scales.swatch.neutral[425]),
          disabled: ColorDesignToken([Scales.swatch.neutral[0], Scales.blend[50]]),
          activated: ColorDesignToken(Scales.swatch.controls[725]),
        },
        loader: {
          lightForegrounds: ColorDesignToken(Scales.swatch.controls[725]),
          lightBackground: ColorDesignToken(Scales.swatch.controls[925]),
          darkForegrounds: ColorDesignToken(Scales.swatch.neutral[1000]),
          darkBackground: ColorDesignToken([Scales.swatch.neutral[1000], Scales.blend[5]]),
        },
      },
      tables: {
        backgrounds: {
          primary: ColorDesignToken(Scales.swatch.neutral[1000]),
          secondary: ColorDesignToken(Scales.swatch.neutral[975]),
          tertiary: ColorDesignToken(Scales.swatch.neutral[950]),
        },
        border: {
          primary: ColorDesignToken(Scales.swatch.neutral[925]),
          secondary: ColorDesignToken(Scales.swatch.blue[725]),
        },
        states: {
          success: ColorDesignToken(Scales.swatch.success[950]),
          warning: ColorDesignToken(Scales.swatch.warning[950]),
          critical: ColorDesignToken(Scales.swatch.critical[825]),
          notice: ColorDesignToken(Scales.swatch.informative[950]),
        },
      },
      states: {
        primary: {
          default: ColorDesignToken(Scales.swatch.neutral[500]),
          notice: ColorDesignToken(Scales.swatch.notice[725]),
          success: ColorDesignToken(Scales.swatch.success[600]),
          alert: ColorDesignToken(Scales.swatch.warning[775]),
          error: ColorDesignToken(Scales.swatch.critical[600]),
          informative: ColorDesignToken(Scales.swatch.informative[450]),
        },
        secondary: {
          default: ColorDesignToken(Scales.swatch.neutral[875]),
          notice: ColorDesignToken(Scales.swatch.informative[950]),
          success: ColorDesignToken(Scales.swatch.success[975]),
          alert: ColorDesignToken(Scales.swatch.warning[975]),
          error: ColorDesignToken(Scales.swatch.critical[950]),
          informative: ColorDesignToken(Scales.swatch.informative[925]),
        },
      },
      sidebar: {
        backgrounds: {
          enabled: ColorDesignToken(Scales.swatch.neutral[1000]),
          hover: ColorDesignToken(Scales.swatch.neutral[950]),
          activated: ColorDesignToken(Scales.swatch.controls[950]),
        },
        content: {
          enabled: ColorDesignToken(Scales.swatch.neutral[0]),
          activated: ColorDesignToken(Scales.swatch.controls[725]),
          disabled: ColorDesignToken(Scales.swatch.neutral[675]),
        },
      },
      header: {
        background: ColorDesignToken(Scales.swatch.blue[725]),
        hover: ColorDesignToken([Scales.swatch.neutral[0], Scales.blend[15]]),
        shop: ColorDesignToken([Scales.swatch.neutral[0], Scales.blend[30]]),
      },
      lists: {
        background: {
          enabled: ColorDesignToken(Scales.swatch.neutral[1000]),
          hover: ColorDesignToken(Scales.swatch.neutral[950]),
          activated: ColorDesignToken(Scales.swatch.controls[950]),
        },
        content: {
          enabled: ColorDesignToken(Scales.swatch.neutral[0]),
          activated: ColorDesignToken(Scales.swatch.controls[725]),
          disabled: ColorDesignToken(Scales.swatch.neutral[675]),
        },
      },
      codeSnippet: {
        background: ColorDesignToken(Scales.swatch.code[975]),
        border: ColorDesignToken(Scales.swatch.code[775]),
      },
    },
    spacing: {
      xxs: Scales.dimension[2],
      xs: Scales.dimension[4],
      xxl: Scales.dimension[48],
      xl: Scales.dimension[24],
      lg: Scales.dimension[16],
      md: Scales.dimension[12],
      sm: Scales.dimension[8],
      xl32: Scales.dimension[32],
    },
    borderRadius: {
      borderRadius0: Scales.dimension[0],
      borderRadius4: Scales.dimension[4],
      borderRadius8: Scales.dimension[8],
      borderRadius16: Scales.dimension[16],
      borderRadius24: Scales.dimension[24],
      borderRadius32: Scales.dimension[32],
    },
    typography: {
      headlines: {
        headline1: {
          fontSize: Scales.fontSize[36],
          fontFamily: Scales.fontFamily.accent,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[46],
        },
        headline2: {
          fontSize: Scales.fontSize[22],
          fontFamily: Scales.fontFamily.accent,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[28],
        },
        headline3: {
          fontSize: Scales.fontSize[18],
          fontFamily: Scales.fontFamily.accent,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[24],
        },
        headline4: {
          fontSize: Scales.fontSize[16],
          fontFamily: Scales.fontFamily.accent,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[24],
        },
        headline5: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.accent,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[14],
        },
      },
      bodyCopy: {
        l: {
          fontSize: Scales.fontSize[14],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0.16],
          lineHeight: Scales.fontSize[22],
        },
        lb: {
          fontSize: Scales.fontSize[14],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[0.16],
          lineHeight: Scales.fontSize[22],
        },
        m: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0.1],
          lineHeight: Scales.fontSize[18],
        },
        mb: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[0.1],
          lineHeight: Scales.fontSize[18],
        },
        s: {
          fontSize: Scales.fontSize[10],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0.06],
          lineHeight: Scales.fontSize[16],
        },
        sb: {
          fontSize: Scales.fontSize[10],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[0.06],
          lineHeight: Scales.fontSize[16],
        },
      },
      interactive: {
        buttons: {
          l: {
            fontSize: Scales.fontSize[16],
            fontFamily: Scales.fontFamily.default,
            fontWeight: Scales.fontWeight[400],
            letterSpacing: Scales.letterSpacing[0.4],
            lineHeight: Scales.fontSize[24],
          },
          m: {
            fontSize: Scales.fontSize[12],
            fontFamily: Scales.fontFamily.default,
            fontWeight: Scales.fontWeight[400],
            letterSpacing: Scales.letterSpacing[0.4],
            lineHeight: Scales.fontSize[24],
          },
          s: {
            fontSize: Scales.fontSize[12],
            fontFamily: Scales.fontFamily.default,
            fontWeight: Scales.fontWeight[400],
            letterSpacing: Scales.letterSpacing[0.4],
            lineHeight: Scales.fontSize[16],
          },
        },
        menu: {
          enabled: {
            fontSize: Scales.fontSize[14],
            fontFamily: Scales.fontFamily.default,
            fontWeight: Scales.fontWeight[400],
            letterSpacing: Scales.letterSpacing[0.1],
            lineHeight: Scales.fontSize[20],
          },
          selected: {
            fontSize: Scales.fontSize[14],
            fontFamily: Scales.fontFamily.default,
            fontWeight: Scales.fontWeight[700],
            letterSpacing: Scales.letterSpacing[0.1],
            lineHeight: Scales.fontSize[20],
          },
        },
      },
      forms: {
        helperText: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0.1],
          lineHeight: Scales.fontSize[16],
        },
        label: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0.1],
          lineHeight: Scales.fontSize[18],
        },
        text: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0.1],
          lineHeight: Scales.fontSize[16],
        },
      },
      numbers: {
        l: {
          fontSize: Scales.fontSize[60],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[72],
        },
        m: {
          fontSize: Scales.fontSize[36],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[44],
        },
        s: {
          fontSize: Scales.fontSize[24],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[0],
          lineHeight: Scales.fontSize[28],
        },
      },
      responsive: {
        headlines: {
          headline1: {
            fontSize: Scales.fontSize[26],
            fontFamily: Scales.fontFamily.accent,
            fontWeight: Scales.fontWeight[400],
            letterSpacing: Scales.letterSpacing[0],
            lineHeight: Scales.fontSize[32],
          },
        },
      },
      numbersMono: {
        l: {
          fontSize: Scales.fontSize[14],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[-0.28],
          lineHeight: Scales.fontSize[22],
        },
        lb: {
          fontSize: Scales.fontSize[14],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[-0.28],
          lineHeight: Scales.fontSize[22],
        },
        m: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[-0.24],
          lineHeight: Scales.fontSize[18],
        },
        mb: {
          fontSize: Scales.fontSize[12],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[-0.24],
          lineHeight: Scales.fontSize[18],
        },
        s: {
          fontSize: Scales.fontSize[10],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[400],
          letterSpacing: Scales.letterSpacing[-0.2],
          lineHeight: Scales.fontSize[16],
        },
        sb: {
          fontSize: Scales.fontSize[10],
          fontFamily: Scales.fontFamily.default,
          fontWeight: Scales.fontWeight[700],
          letterSpacing: Scales.letterSpacing[-0.2],
          lineHeight: Scales.fontSize[16],
        },
      },
    },
    breakpoints: {
      sm: Scales.dimension[576],
      md: Scales.dimension[768],
      lg: Scales.dimension[992],
      xl: Scales.dimension[1024],
      xxl: Scales.dimension[1400],
    },
    elevations: {
      default: Scales.elevation[1],
      overlay: Scales.elevation[999],
      sidebar: Scales.elevation[1003],
      header: Scales.elevation[1100],
      modal: Scales.elevation[11_000],
      loader: Scales.elevation[12_000],
    },
  },
};