@gobolt/genesis 0.2.21 → 0.3.1

package/dist/styles/theme/genesis-theme.js

@@ -1,1325 +0,0 @@
-import { Size4, Size3, Size2, Size1, Size25, Size025, Size15, Size05, Size64, Size50, Size43, Size39, Size35, Size34, Size32, Size30, Size28, Size27, Size24, Size20, Size18, Size16, Size14, Size13, Size12, Size10, Size8, Size7, Size6, Size5, Size2_5, Size1_5, BorderRadiusMd, BorderRadiusSm, ColorGrayWhite, ColorGrayBlack, ColorGray900, ColorGray800, ColorGray700, ColorGray600, ColorGray500, ColorGray400, ColorGray300, ColorGray200, ColorGray100, ColorPurple900, ColorPurple800, ColorPurple700, ColorPurple600, ColorPurple500, ColorPurple400, ColorPurple300, ColorPurple200, ColorPurple100, ColorBlue900, ColorBlue800, ColorBlue700, ColorBlue600, ColorBlue500, ColorBlue400, ColorBlue300, ColorBlue200, ColorBlue100, ColorSky900, ColorSky800, ColorSky700, ColorSky600, ColorSky500, ColorSky400, ColorSky300, ColorSky200, ColorSky100, ColorGreen900, ColorGreen800, ColorGreen700, ColorGreen600, ColorGreen500, ColorGreen400, ColorGreen300, ColorGreen200, ColorGreen100, ColorYellow900, ColorYellow800, ColorYellow700, ColorYellow600, ColorYellow500, ColorYellow400, ColorYellow300, ColorYellow200, ColorYellow100, ColorOrange900, ColorOrange800, ColorOrange700, ColorOrange600, ColorOrange500, ColorOrange400, ColorOrange300, ColorOrange200, ColorOrange100, ColorRed900, ColorRed800, ColorRed700, ColorRed600, ColorRed500, ColorRed400, ColorRed300, ColorRed200, ColorRed100, TypographyNarrowFontSizeDigits3, TypographyNarrowFontSizeDigits2, TypographyNarrowFontSizeDigits1, TypographyNarrowFontSizeLink3, TypographyNarrowFontSizeLink2, TypographyNarrowFontSizeLink1, TypographyNarrowFontSizeLabel3, TypographyNarrowFontSizeLabel2, TypographyNarrowFontSizeLabel1, TypographyNarrowFontSizeOverline3, TypographyNarrowFontSizeOverline2, TypographyNarrowFontSizeOverline1, TypographyNarrowFontSizeMessage, TypographyNarrowFontSizeBody5, TypographyNarrowFontSizeBody4, TypographyNarrowFontSizeBody3, TypographyNarrowFontSizeBody2, TypographyNarrowFontSizeBody1, TypographyNarrowFontSizeSubHeading3, TypographyNarrowFontSizeSubHeading2, TypographyNarrowFontSizeSubHeading1, TypographyNarrowFontSizeHeading3, TypographyNarrowFontSizeHeading2, TypographyNarrowFontSizeHeading1, TypographyNarrowFontSizeDisplay3, TypographyNarrowFontSizeDisplay2, TypographyNarrowFontSizeDisplay1, TypographyMediumFontSizeDigits3, TypographyMediumFontSizeDigits2, TypographyMediumFontSizeDigits1, TypographyMediumFontSizeLink3, TypographyMediumFontSizeLink2, TypographyMediumFontSizeLink1, TypographyMediumFontSizeLabel3, TypographyMediumFontSizeLabel2, TypographyMediumFontSizeLabel1, TypographyMediumFontSizeOverline3, TypographyMediumFontSizeOverline2, TypographyMediumFontSizeOverline1, TypographyMediumFontSizeMessage, TypographyMediumFontSizeBody5, TypographyMediumFontSizeBody4, TypographyMediumFontSizeBody3, TypographyMediumFontSizeBody2, TypographyMediumFontSizeBody1, TypographyMediumFontSizeSubHeading3, TypographyMediumFontSizeSubHeading2, TypographyMediumFontSizeSubHeading1, TypographyMediumFontSizeHeading3, TypographyMediumFontSizeHeading2, TypographyMediumFontSizeHeading1, TypographyMediumFontSizeDisplay3, TypographyMediumFontSizeDisplay2, TypographyMediumFontSizeDisplay1, TypographyWideFontSizeDigits3, TypographyWideFontSizeDigits2, TypographyWideFontSizeDigits1, TypographyWideFontSizeLink3, TypographyWideFontSizeLink2, TypographyWideFontSizeLink1, TypographyWideFontSizeLabel3, TypographyWideFontSizeLabel2, TypographyWideFontSizeLabel1, TypographyWideFontSizeOverline3, TypographyWideFontSizeOverline2, TypographyWideFontSizeOverline1, TypographyWideFontSizeMessage, TypographyWideFontSizeBody5, TypographyWideFontSizeBody4, TypographyWideFontSizeBody3, TypographyWideFontSizeBody2, TypographyWideFontSizeBody1, TypographyWideFontSizeSubHeading3, TypographyWideFontSizeSubHeading2, TypographyWideFontSizeSubHeading1, TypographyWideFontSizeHeading3, TypographyWideFontSizeHeading2, TypographyWideFontSizeHeading1, TypographyWideFontSizeDisplay3, TypographyWideFontSizeDisplay2, TypographyWideFontSizeDisplay1, TypographyPrimaryFontFamily, BorderRadiusRounded, BorderRadiusXxxl, BorderRadiusXxl, BorderRadiusXl, BorderRadiusLg, BorderRadiusXs, BorderRadiusNone } from "../design-tokens/variables.js";
-const breakpoints = {
-  wide: 1280,
-  medium: 1024,
-  narrow: 480
-};
-const borderRadius = {
-  BorderRadiusNone,
-  BorderRadiusXs,
-  BorderRadiusSm,
-  BorderRadiusMd,
-  BorderRadiusLg,
-  BorderRadiusXl,
-  BorderRadiusXxl,
-  BorderRadiusXxxl,
-  BorderRadiusRounded
-};
-const sizing = {
-  Size1,
-  // 4px
-  Size1_5,
-  // 6px
-  Size2,
-  // 8px
-  Size2_5,
-  // 10px
-  Size3,
-  // 12px
-  Size4,
-  // 16px
-  Size5,
-  // 20px
-  Size6,
-  // 24px
-  Size7,
-  // 28px
-  Size8,
-  // 32px
-  Size10,
-  // 40px
-  Size12,
-  // 48px
-  Size13,
-  // 52px
-  Size14,
-  // 56px
-  Size16,
-  // 64px
-  Size18,
-  // 72px
-  Size20,
-  // 80px
-  Size24,
-  // 96px
-  Size27,
-  // 108px
-  Size28,
-  // 112px
-  Size30,
-  // 120px
-  Size32,
-  // 128px
-  Size34,
-  // 136px
-  Size35,
-  // 140px
-  Size39,
-  // 156px
-  Size43,
-  // 172px
-  Size50,
-  // 200px
-  Size64,
-  // 256px
-  Size05,
-  // 2px
-  Size15,
-  // 6px
-  Size025,
-  // 1px
-  Size25,
-  // 10px
-  xs: Size1,
-  // 4px
-  sm: Size2,
-  // 8px
-  md: Size3,
-  // 12px
-  lg: Size4,
-  // 16px
-  typography1: 12,
-  typography2: 14,
-  typography3: 16
-};
-const TypographySizeKey = {
-  display1: "display1",
-  display2: "display2",
-  display3: "display3",
-  heading1: "heading1",
-  heading2: "heading2",
-  heading3: "heading3",
-  subHeading1: "subHeading1",
-  subHeading2: "subHeading2",
-  subHeading3: "subHeading3",
-  body1: "body1",
-  body2: "body2",
-  body3: "body3",
-  body4: "body4",
-  body5: "body5",
-  message: "message",
-  overline1: "overline1",
-  overline2: "overline2",
-  overline3: "overline3",
-  label1: "label1",
-  label2: "label2",
-  label3: "label3",
-  link1: "link1",
-  link2: "link2",
-  link3: "link3",
-  digits1: "digits1",
-  digits2: "digits2",
-  digits3: "digits3"
-};
-const wideTypography = {
-  display1: {
-    fontSize: TypographyWideFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: TypographyWideFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: TypographyWideFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: TypographyWideFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: TypographyWideFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: TypographyWideFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: TypographyWideFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: TypographyWideFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: TypographyWideFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: TypographyWideFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: TypographyWideFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: TypographyWideFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: TypographyWideFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: TypographyWideFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: TypographyWideFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: TypographyWideFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: TypographyWideFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: TypographyWideFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: TypographyWideFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: TypographyWideFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: TypographyWideFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: TypographyWideFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: TypographyWideFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: TypographyWideFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: TypographyWideFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: TypographyWideFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: TypographyWideFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-const mediumTypography = {
-  display1: {
-    fontSize: TypographyMediumFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: TypographyMediumFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: TypographyMediumFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: TypographyMediumFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: TypographyMediumFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: TypographyMediumFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: TypographyMediumFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: TypographyMediumFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: TypographyMediumFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: TypographyMediumFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: TypographyMediumFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: TypographyMediumFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: TypographyMediumFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: TypographyMediumFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: TypographyMediumFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: TypographyMediumFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: TypographyMediumFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: TypographyMediumFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: TypographyMediumFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: TypographyMediumFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: TypographyMediumFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: TypographyMediumFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: TypographyMediumFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: TypographyMediumFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: TypographyMediumFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: TypographyMediumFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: TypographyMediumFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-const narrowTypography = {
-  display1: {
-    fontSize: TypographyNarrowFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display2: {
-    fontSize: TypographyNarrowFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  display3: {
-    fontSize: TypographyNarrowFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading1: {
-    fontSize: TypographyNarrowFontSizeHeading1,
-    lineHeight: "2rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading2: {
-    fontSize: TypographyNarrowFontSizeHeading2,
-    lineHeight: "1.75rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  heading3: {
-    fontSize: TypographyNarrowFontSizeHeading3,
-    lineHeight: "1.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  subHeading1: {
-    fontSize: TypographyNarrowFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading2: {
-    fontSize: TypographyNarrowFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  subHeading3: {
-    fontSize: TypographyNarrowFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
-    letterSpacing: "0"
-  },
-  body1: {
-    fontSize: TypographyNarrowFontSizeBody1,
-    lineHeight: "1.5rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body2: {
-    fontSize: TypographyNarrowFontSizeBody2,
-    lineHeight: "1.25rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body3: {
-    fontSize: TypographyNarrowFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body4: {
-    fontSize: TypographyNarrowFontSizeBody4,
-    lineHeight: "0.875rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  body5: {
-    fontSize: TypographyNarrowFontSizeBody5,
-    lineHeight: "0.75rem",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  message: {
-    fontSize: TypographyNarrowFontSizeMessage,
-    lineHeight: "23px",
-    fontWeight: 400,
-    letterSpacing: "0"
-  },
-  overline1: {
-    fontSize: TypographyNarrowFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline2: {
-    fontSize: TypographyNarrowFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  overline3: {
-    fontSize: TypographyNarrowFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label1: {
-    fontSize: TypographyNarrowFontSizeLabel1,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label2: {
-    fontSize: TypographyNarrowFontSizeLabel2,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  label3: {
-    fontSize: TypographyNarrowFontSizeLabel3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link1: {
-    fontSize: TypographyNarrowFontSizeLink1,
-    lineHeight: "1.5rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link2: {
-    fontSize: TypographyNarrowFontSizeLink2,
-    lineHeight: "1.25rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  link3: {
-    fontSize: TypographyNarrowFontSizeLink3,
-    lineHeight: "1rem",
-    fontWeight: 500,
-    letterSpacing: "0"
-  },
-  digits1: {
-    fontSize: TypographyNarrowFontSizeDigits1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits2: {
-    fontSize: TypographyNarrowFontSizeDigits2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  },
-  digits3: {
-    fontSize: TypographyNarrowFontSizeDigits3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
-  }
-};
-const typography = {
-  fontFamily: TypographyPrimaryFontFamily,
-  wide: wideTypography,
-  medium: mediumTypography,
-  narrow: narrowTypography
-};
-const colors = {
-  red: {
-    100: ColorRed100,
-    200: ColorRed200,
-    300: ColorRed300,
-    400: ColorRed400,
-    500: ColorRed500,
-    600: ColorRed600,
-    700: ColorRed700,
-    800: ColorRed800,
-    900: ColorRed900
-  },
-  orange: {
-    100: ColorOrange100,
-    200: ColorOrange200,
-    300: ColorOrange300,
-    400: ColorOrange400,
-    500: ColorOrange500,
-    600: ColorOrange600,
-    700: ColorOrange700,
-    800: ColorOrange800,
-    900: ColorOrange900
-  },
-  yellow: {
-    100: ColorYellow100,
-    200: ColorYellow200,
-    300: ColorYellow300,
-    400: ColorYellow400,
-    500: ColorYellow500,
-    600: ColorYellow600,
-    700: ColorYellow700,
-    800: ColorYellow800,
-    900: ColorYellow900
-  },
-  green: {
-    100: ColorGreen100,
-    200: ColorGreen200,
-    300: ColorGreen300,
-    400: ColorGreen400,
-    500: ColorGreen500,
-    600: ColorGreen600,
-    700: ColorGreen700,
-    800: ColorGreen800,
-    900: ColorGreen900
-  },
-  sky: {
-    100: ColorSky100,
-    200: ColorSky200,
-    300: ColorSky300,
-    400: ColorSky400,
-    500: ColorSky500,
-    600: ColorSky600,
-    700: ColorSky700,
-    800: ColorSky800,
-    900: ColorSky900
-  },
-  blue: {
-    100: ColorBlue100,
-    200: ColorBlue200,
-    300: ColorBlue300,
-    400: ColorBlue400,
-    500: ColorBlue500,
-    600: ColorBlue600,
-    700: ColorBlue700,
-    800: ColorBlue800,
-    900: ColorBlue900
-  },
-  purple: {
-    100: ColorPurple100,
-    200: ColorPurple200,
-    300: ColorPurple300,
-    400: ColorPurple400,
-    500: ColorPurple500,
-    600: ColorPurple600,
-    700: ColorPurple700,
-    800: ColorPurple800,
-    900: ColorPurple900
-  },
-  gray: {
-    100: ColorGray100,
-    200: ColorGray200,
-    300: ColorGray300,
-    400: ColorGray400,
-    500: ColorGray500,
-    600: ColorGray600,
-    700: ColorGray700,
-    800: ColorGray800,
-    900: ColorGray900,
-    black: ColorGrayBlack,
-    white: ColorGrayWhite
-  }
-};
-const button = {
-  padding: {
-    verPadding: sizing.Size25,
-    // 25px
-    horPadding: sizing.Size6
-    // 10px
-  },
-  gap: sizing.Size2,
-  // 8px
-  radius: borderRadius.BorderRadiusMd
-  // 6px
-};
-const utilityButton = {
-  padding: {
-    verPadding: 10,
-    horPadding: 12
-  },
-  gap: sizing.Size2,
-  // 8px
-  radius: borderRadius.BorderRadiusSm
-  // 6px
-};
-const iconButton = {
-  padding: {
-    verPadding: 10,
-    horPadding: 12
-  },
-  gap: sizing.Size2,
-  // 8px
-  radius: borderRadius.BorderRadiusSm
-  // 6px
-};
-const input = {
-  suffixPrefixVerPadding: 11,
-  // special case - see sizing in FIGMA
-  suffixPrefixHorPadding: sizing.Size2
-};
-const disabled = {
-  color: "#6C6C6C",
-  backgroundColor: "#EEEEEE",
-  borderColor: "#CBCBCB"
-};
-const error = {
-  color: "#CF3237",
-  backgroundColor: "#FFEBEE",
-  borderColor: "#FFEBEE"
-};
-const lightInteractive = {
-  interactive: {
-    primary: {
-      active: "#30606B",
-      hover: "#00282B",
-      pressed: "#214148",
-      onsurface: "#FFFFFF"
-    },
-    secondary: {
-      active: "#9A9A9A",
-      hover: "#222222",
-      pressed: "#101010",
-      onsurface: "#3E3E3E"
-    },
-    tertiary: {
-      active: "#FFCA7D",
-      hover: "#E7A13C",
-      pressed: "#B27330",
-      onsurface: "#222222"
-    },
-    destructive: {
-      active: "#CF3237",
-      hover: "#AA292D",
-      pressed: "#842023",
-      onsurface: "#FFFFFF"
-    },
-    link: {
-      active: "#30606B"
-    },
-    utility: {
-      active: "#FFF",
-      onsurface: "#222222",
-      border: "#CBCBCB",
-      hover: "#DEEFF3",
-      pressed: "#CBCBCB"
-    }
-  },
-  inputs: {
-    onsurface: {
-      focus: "#384DF6"
-    }
-  },
-  transparent: "transparent"
-};
-const darkInteractive = {
-  interactive: {
-    tertiary: {
-      active: "#FFCA7D",
-      hover: "#E7A13C",
-      pressed: "#B27330",
-      onsurface: "#222222"
-    }
-  }
-};
-const lightModeColors = {
-  primary: {
-    active: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.active,
-      borderColor: lightInteractive.interactive.primary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.hover,
-      borderColor: lightInteractive.interactive.primary.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.pressed,
-      borderColor: lightInteractive.interactive.primary.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.active,
-      borderColor: lightInteractive.interactive.primary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.primary.active,
-      borderColor: lightInteractive.interactive.primary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  secondary: {
-    active: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.secondary.hover,
-      borderColor: lightInteractive.interactive.secondary.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.primary.onsurface,
-      backgroundColor: lightInteractive.interactive.secondary.pressed,
-      borderColor: lightInteractive.interactive.secondary.active
-    },
-    focussed: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  tertiary: {
-    active: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.hover,
-      borderColor: lightInteractive.interactive.tertiary.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.pressed,
-      borderColor: lightInteractive.interactive.tertiary.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  destructive: {
-    active: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.active,
-      borderColor: lightInteractive.interactive.destructive.active
-    },
-    hover: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.hover,
-      borderColor: lightInteractive.interactive.destructive.hover
-    },
-    pressed: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.pressed,
-      borderColor: lightInteractive.interactive.destructive.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.active,
-      borderColor: lightInteractive.interactive.destructive.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.destructive.onsurface,
-      backgroundColor: lightInteractive.interactive.destructive.active,
-      borderColor: lightInteractive.interactive.destructive.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  utility: {
-    active: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: "#FFF",
-      borderColor: lightInteractive.interactive.secondary.active
-    },
-    hover: {
-      color: lightInteractive.interactive.utility.onsurface,
-      backgroundColor: lightInteractive.interactive.utility.hover,
-      borderColor: lightInteractive.interactive.utility.border
-    },
-    pressed: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.interactive.utility.pressed,
-      borderColor: lightInteractive.interactive.utility.pressed
-    },
-    focussed: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: "#FFF",
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.secondary.onsurface,
-      backgroundColor: lightInteractive.transparent,
-      borderColor: lightInteractive.interactive.secondary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  icon: {
-    active: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "transparent",
-      borderColor: "transparent"
-    },
-    hover: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "#DEEFF3",
-      borderColor: "transparent"
-    },
-    pressed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "#DEEFF3",
-      borderColor: "transparent"
-    },
-    selected: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "#DEEFF3",
-      borderColor: "transparent"
-    },
-    focussed: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: "transparent",
-      borderColor: "transparent",
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    error: {
-      ...error,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    default: {
-      color: lightInteractive.interactive.tertiary.onsurface,
-      backgroundColor: lightInteractive.interactive.tertiary.active,
-      borderColor: lightInteractive.interactive.tertiary.active,
-      ringColor: lightInteractive.inputs.onsurface.focus
-    },
-    disabled
-  },
-  status: {
-    error: {
-      default: "#CF3237",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#AA292D",
-      surface: "#F9D4D5",
-      "surface-hover": "#F3A9AB"
-    },
-    success: {
-      default: "#32863E",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#296E33",
-      surface: "#D3EFD7",
-      "surface-hover": "#A7DFAF"
-    },
-    warning: {
-      default: ColorYellow500,
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#704819",
-      surface: "#FFF2DF",
-      "surface-hover": "#FFE5BE"
-    },
-    info: {
-      default: "#384DF6",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#2E3FCA",
-      surface: "#D7DBFD"
-    },
-    generic: {
-      default: "#9A9A9A",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#3E3E3E",
-      surface: "#F4F4F4",
-      "surface-hover": "#F4F4F4"
-    },
-    hollow: {
-      default: "#9A9A9A",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#3E3E3E",
-      surface: "#F4F4F4",
-      "surface-hover": "#FFFFFF"
-    },
-    disabled: {
-      default: "#6C6C6C",
-      ringColor: lightInteractive.inputs.onsurface.focus,
-      onsurface: "#EEEEEE",
-      surface: "#EEEEEE"
-    }
-  },
-  timebox: {
-    evening: {
-      default: "#9F539F"
-    }
-  },
-  interactive: {
-    primary: {
-      active: "#30606B",
-      hover: "#00282B",
-      pressed: "#214148",
-      onsurface: "#FFFFFF"
-    },
-    secondary: {
-      active: "#9A9A9A",
-      hover: "#222222",
-      pressed: "#101010",
-      onsurface: "#3E3E3E"
-    },
-    tertiary: {
-      active: "#FFCA7D",
-      hover: "#E7A13C",
-      pressed: "#B27330",
-      onsurface: "#222222"
-    },
-    link: {
-      active: ColorSky700,
-      hover: ColorSky900,
-      disabled: ColorGray100,
-      current: "#384DF6"
-    },
-    ...lightInteractive.interactive
-  },
-  inputs: {
-    surface: {
-      active: ColorGrayWhite,
-      border: ColorGray500,
-      disabled: ColorGray100,
-      checked: "#384DF6",
-      "checked-hover": "#24319D"
-    },
-    onsurface: {
-      active: "#222222",
-      focus: "#384DF6",
-      placeholder: "#6C6C6C",
-      "icon-disabled": "#6C6C6C"
-    },
-    progress: {
-      empty: ColorGray300,
-      success: ColorGreen400,
-      error: ColorRed500,
-      info: ColorBlue400
-    }
-  },
-  surface: {
-    border: "#CBCBCB",
-    secondary: "#F4F4F4",
-    tertiary: "#EEEEEE",
-    "border-light": "#DFDFDF"
-  },
-  transparent: "transparent",
-  onsurface: {
-    copy: "#3E3E3E",
-    "copy-light": ColorGray700,
-    "copy-dark": "#222222",
-    "copy-disabled": "#6C6C6C"
-  }
-};
-const darkModeColors = lightModeColors;
-({
-  primary: {
-    active: {
-      color: colors.gray.white
-    },
-    hover: {
-      color: colors.gray.white
-    },
-    pressed: {
-      color: colors.gray.white
-    },
-    focussed: {
-      color: colors.gray.white
-    },
-    disabled: {
-      color: colors.gray[600]
-    }
-  },
-  secondary: {
-    active: {
-      color: colors.gray.white
-    },
-    hover: {
-      color: colors.gray.white
-    },
-    pressed: {
-      color: colors.gray.white
-    },
-    focussed: {
-      color: colors.gray.white
-    },
-    disabled: {
-      color: colors.gray[600]
-    }
-  },
-  tertiary: {
-    active: {
-      color: colors.gray.white
-    },
-    hover: {
-      color: colors.gray.white
-    },
-    pressed: {
-      color: colors.gray.white
-    },
-    focussed: {
-      color: colors.gray.white
-    },
-    disabled: {
-      color: colors.gray[600]
-    }
-  },
-  utility: {
-    active: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.active,
-      borderColor: darkInteractive.interactive.tertiary.active
-    },
-    hover: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.hover,
-      borderColor: darkInteractive.interactive.tertiary.hover
-    },
-    pressed: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.pressed,
-      borderColor: darkInteractive.interactive.tertiary.pressed
-    },
-    focussed: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.active,
-      borderColor: darkInteractive.interactive.tertiary.active
-    },
-    default: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.active,
-      borderColor: darkInteractive.interactive.tertiary.active
-    }
-  },
-  icon: {
-    active: {
-      color: darkInteractive.interactive.tertiary.onsurface
-    },
-    hover: {
-      color: darkInteractive.interactive.tertiary.onsurface
-    },
-    pressed: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.pressed,
-      borderColor: darkInteractive.interactive.tertiary.pressed
-    },
-    focussed: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.active,
-      borderColor: darkInteractive.interactive.tertiary.active
-    },
-    default: {
-      color: darkInteractive.interactive.tertiary.onsurface,
-      backgroundColor: darkInteractive.interactive.tertiary.active,
-      borderColor: darkInteractive.interactive.tertiary.active
-    }
-  }
-});
-const shadows = {
-  general: {
-    "1": "box-shadow: 0px 4px 16px 0px #00000026",
-    "2": "box-shadow: 0px 8px 24px -4px #00000026",
-    "3": "box-shadow: 0px 2px 3px -1px #00000026",
-    "4": "box-shadow: 4px 0px 7px -3px #0000001F"
-  },
-  actions: {
-    "1": "box-shadow: 0px 2px 2px -1px #00000033",
-    "2": "box-shadow: 0px 1px 2px 0px #00000026"
-  },
-  inputs: {
-    "1": "box-shadow: 0px 1px 2px 0px #0000001F"
-  }
-};
-const motion = {
-  instant: 0,
-  veryfast: 0.15,
-  fast: 0.33,
-  medium: 0.5,
-  slow: 1,
-  veryslow: 2
-};
-const badge = {
-  "ver-padding": 4,
-  "right-padding": 8,
-  "left-padding": 8,
-  radius: 50
-};
-const popover = {
-  "ver-padding": sizing.Size1,
-  "hor-padding": sizing.Size2,
-  radius: borderRadius.BorderRadiusMd,
-  gap: sizing.Size1
-};
-const row = {
-  "ver-padding": sizing.Size5,
-  "hor-padding": sizing.Size6,
-  gap: sizing.Size2
-};
-const components = {
-  button,
-  utilityButton,
-  iconButton,
-  input,
-  row,
-  badge,
-  popover
-};
-const getStatusColor = (colors2, status) => {
-  return colors2.status[status].default;
-};
-const baseTokens = {
-  breakpoints,
-  sizing,
-  borderRadius,
-  typography,
-  allColors: colors,
-  components,
-  motion,
-  shadows,
-  getStatusColor
-};
-const lightTheme = {
-  ...baseTokens,
-  colors: lightModeColors,
-  mode: "light"
-};
-const darkTheme = {
-  ...baseTokens,
-  colors: darkModeColors,
-  mode: "dark"
-};
-export {
-  TypographySizeKey,
-  baseTokens,
-  breakpoints,
-  darkTheme,
-  lightTheme,
-  sizing
-};