paris 0.23.0 → 0.24.0

package/dist/stories/theme/themes.js

@@ -0,0 +1,854 @@
+import { createTheme } from 'pte';
+import merge from 'ts-deepmerge';
+import { Tokens } from './tokens.js';
+
+const Shadows = {
+  shallowAbove: "0px -4px 20px 0px rgba(0, 0, 0, 0.2)",
+  deepAbove: "0px -8px 20px 0px rgba(0, 0, 0, 0.2)",
+  shallowBelow: "0px 4px 20px 0px rgba(0, 0, 0, 0.2)",
+  deepBelow: "0px 8px 20px 0px rgba(0, 0, 0, 0.2)",
+  shallowLeft: "-20px 0px 40px 0px rgba(0, 0, 0, 0.1)",
+  shallowRight: "20px 0px 40px 0px rgba(0, 0, 0, 0.1)",
+  subtlePopup: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
+  shallowPopup: "0px 0px 30px 0px rgba(0, 0, 0, 0.2)",
+  deepPopup: "0px 0px 40px 0px rgba(0, 0, 0, 0.2)"
+};
+const ShadowsDark = {
+  ...Shadows,
+  deepBelow: "0px 20px 30px 10px rgba(0, 0, 0, 0.5)",
+  shallowLeft: "-20px 0px 60px 20px rgba(0, 0, 0, 0.25)",
+  shallowRight: "20px 0px 60px 20px rgba(0, 0, 0, 0.25)",
+  deepPopup: "0px 0px 40px 15px rgba(0, 0, 0, 0.35)"
+};
+const Glows = {
+  glowSubtle1: "0px 0px 3px 0px rgba(29, 238, 205, 0.3)",
+  glowSubtle2: "0px 0px 6px 0px rgba(29, 238, 205, 0.2)",
+  glowSubtle3: "0px 0px 9px 0px rgba(29, 238, 205, 0.1)",
+  glowDeep1: "0px 0px 3px 1px rgba(29, 238, 205, 0.3)",
+  glowDeep2: "0px 0px 9px 3px rgba(29, 238, 205, 0.3)",
+  glowDeep3: "0px 0px 15px 0px rgba(29, 238, 205, 0.2)"
+};
+const GlowsDark = {
+  glowSubtle1: "0px 0px 3px 0px rgba(29, 238, 205, 0.15)",
+  glowSubtle2: "0px 0px 6px 0px rgba(29, 238, 205, 0.1)",
+  glowSubtle3: "0px 0px 9px 0px rgba(29, 238, 205, 0.05)",
+  glowDeep1: "0px 0px 3px 1px rgba(29, 238, 205, 0.15)",
+  glowDeep2: "0px 0px 9px 3px rgba(29, 238, 205, 0.15)",
+  glowDeep3: "0px 0px 12px 0px rgba(29, 238, 205, 0.1)"
+};
+const TimingFunctions = {
+  easeInOut: "cubic-bezier(0.42, 0.0, 0.58, 1.0)",
+  easeOut: "cubic-bezier(0.0, 0.0, 0.58, 1.0)",
+  easeIn: "cubic-bezier(0.42, 0.0, 1.0, 1.0)",
+  easeOutQuad: "cubic-bezier(0.5, 1, 0.89, 1)",
+  easeInQuad: "cubic-bezier(0.11, 0, 0.5, 0)",
+  easeInOutExpo: "cubic-bezier(0.87, 0, 0.13, 1)"
+};
+const DisplayFontClass = {
+  fontStyle: "normal",
+  letterSpacing: "-0.01em",
+  fontWeight: 600,
+  textTransform: "none"
+};
+const HeadingFontClass = {
+  fontStyle: "normal",
+  letterSpacing: "normal",
+  fontWeight: 600,
+  textTransform: "none"
+};
+const LabelFontClass = {
+  fontStyle: "normal",
+  letterSpacing: "0.1em",
+  fontWeight: 600,
+  textTransform: "uppercase"
+};
+const ParagraphFontClass = {
+  fontStyle: "normal",
+  letterSpacing: "normal",
+  fontWeight: 400,
+  textTransform: "none"
+};
+const LightTheme = {
+  new: {
+    tokens: Tokens.new,
+    utils: {
+      defaultUserSelect: "none"
+    },
+    colors: {
+      // Content
+      contentPrimary: Tokens.new.colors.grey2400,
+      contentSecondary: Tokens.new.colors.grey1600,
+      contentTertiary: Tokens.new.colors.grey1400,
+      contentDisabled: Tokens.new.colors.grey1100,
+      contentAccent: Tokens.new.colors.teal400,
+      contentNegative: Tokens.new.colors.red400,
+      contentWarning: Tokens.new.colors.yellow500,
+      contentPositive: Tokens.new.colors.green400,
+      contentLink: Tokens.new.colors.blue500,
+      // Content Inverse
+      contentInversePrimary: Tokens.new.colors.white,
+      contentInverseSecondary: Tokens.new.colors.grey600,
+      contentInverseTertiary: Tokens.new.colors.grey1000,
+      contentInverseDisabled: Tokens.new.colors.grey1400,
+      // Background
+      backgroundPrimary: Tokens.new.colors.white,
+      backgroundSecondary: Tokens.new.colors.grey100,
+      backgroundMobilePrimary: Tokens.new.colors.white,
+      backgroundMobileSecondary: Tokens.new.colors.grey100,
+      backgroundNegative: Tokens.new.colors.red100,
+      backgroundNegativeMedium: Tokens.new.colors.red200,
+      backgroundNegativeStrong: Tokens.new.colors.red300,
+      backgroundWarning: Tokens.new.colors.yellow100,
+      backgroundWarningMedium: Tokens.new.colors.yellow200,
+      backgroundWarningStrong: Tokens.new.colors.yellow300,
+      backgroundPositive: Tokens.new.colors.green100,
+      backgroundPositiveMedium: Tokens.new.colors.green200,
+      backgroundPositiveStrong: Tokens.new.colors.green300,
+      backgroundAccent: Tokens.new.colors.teal100,
+      backgroundAccentMedium: Tokens.new.colors.teal200,
+      backgroundAccentStrong: Tokens.new.colors.teal300,
+      // Surface
+      surfacePrimary: Tokens.new.colors.white,
+      surfaceSecondary: Tokens.new.colors.grey200,
+      surfaceTertiary: Tokens.new.colors.grey400,
+      surfaceQuaternary: Tokens.new.colors.grey100,
+      // Border
+      borderSubtle: Tokens.new.colors.grey400,
+      borderMedium: Tokens.new.colors.grey600,
+      borderStrong: Tokens.new.colors.grey700,
+      borderUltrastrong: Tokens.new.colors.grey1400,
+      // Button
+      buttonFill: Tokens.new.colors.grey2400,
+      buttonFillHover: Tokens.new.colors.grey1900,
+      buttonFillDisabled: Tokens.new.colors.grey500,
+      buttonFillHoverAlt: Tokens.new.colors.grey300,
+      buttonFillHoverNegative: Tokens.new.colors.red100,
+      buttonBorder: Tokens.new.colors.grey2400,
+      buttonBorderDisabled: Tokens.new.colors.grey1000,
+      buttonBorderNegative: Tokens.new.colors.red400,
+      // Input
+      inputFill: Tokens.new.colors.grey300,
+      inputFillFocus: Tokens.new.colors.grey400,
+      inputFillNegative: Tokens.new.colors.red100,
+      inputFillDisabled: Tokens.new.colors.grey200,
+      inputBorderFocus: Tokens.new.colors.grey1400,
+      inputBorderNegative: Tokens.new.colors.red400,
+      // Overlay
+      overlaySubtle: "rgba(0, 0, 0, 0.02)",
+      overlayMedium: "rgba(0, 0, 0, 0.03)",
+      overlayStrong: "rgba(0, 0, 0, 0.05)",
+      overlayInverseSubtle: "rgba(255, 255, 255, 0.02)",
+      overlayInverseMedium: "rgba(255, 255, 255, 0.05)",
+      overlayWhiteSubtle: "rgba(255, 255, 255, 0.04)",
+      overlayWhiteMedium: "rgba(255, 255, 255, 0.09)",
+      overlayWhiteStrong: "rgba(255, 255, 255, 0.11)",
+      overlayWhiteUltrastrong: "rgba(255, 255, 255, 0.85)",
+      overlayBlackSubtle: "rgba(0, 0, 0, 0.04)",
+      overlayBlackMedium: "rgba(0, 0, 0, 0.07)",
+      overlayBlackStrong: "rgba(0, 0, 0, 0.1)",
+      overlayPageBackground: "rgba(60, 60, 60, 0.65)",
+      overlayRed: "rgba(253, 77, 46, 0.07)",
+      overlayTeal: "rgba(29, 238, 205, 0.1)"
+    },
+    blurs: {
+      strong: "blur(17.5px)",
+      ultrastrong: "blur(37.5px)"
+    },
+    typography: {
+      fontFamily: '"Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
+      italicLetterSpacing: "-0.01em",
+      verticalMetricsAdjust: "1px",
+      fontWeights: {
+        thin: 100,
+        extralight: 200,
+        light: 300,
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        black: 900,
+        extrablack: 950
+      },
+      fontStyles: {
+        italic: "italic",
+        normal: "normal"
+      },
+      styles: {
+        // Display
+        displayLarge: {
+          ...DisplayFontClass,
+          fontSize: "72px",
+          lineHeight: "86px"
+        },
+        displayMedium: {
+          ...DisplayFontClass,
+          fontSize: "52px",
+          lineHeight: "62px"
+        },
+        display: {
+          ...DisplayFontClass,
+          fontSize: "42px",
+          lineHeight: "50.4px"
+        },
+        displaySmall: {
+          ...DisplayFontClass,
+          fontSize: "34px",
+          lineHeight: "41px"
+        },
+        // Heading
+        headingLarge: {
+          ...HeadingFontClass,
+          fontSize: "32px",
+          lineHeight: "38px"
+        },
+        headingMedium: {
+          ...HeadingFontClass,
+          fontSize: "28px",
+          lineHeight: "34px"
+        },
+        headingSmall: {
+          ...HeadingFontClass,
+          fontSize: "24px",
+          lineHeight: "29px"
+        },
+        headingXSmall: {
+          ...HeadingFontClass,
+          fontSize: "20px",
+          lineHeight: "24px"
+        },
+        headingXXSmall: {
+          ...HeadingFontClass,
+          fontSize: "18px",
+          lineHeight: "22px"
+        },
+        // Label
+        labelXLarge: {
+          ...LabelFontClass,
+          fontSize: "18px",
+          lineHeight: "22px"
+        },
+        labelLarge: {
+          ...LabelFontClass,
+          fontSize: "16px",
+          lineHeight: "19px"
+        },
+        labelMedium: {
+          ...LabelFontClass,
+          fontSize: "14px",
+          lineHeight: "17px"
+        },
+        labelSmall: {
+          ...LabelFontClass,
+          fontSize: "12px",
+          lineHeight: "14px"
+        },
+        labelXSmall: {
+          ...LabelFontClass,
+          fontSize: "10px",
+          lineHeight: "12px"
+        },
+        labelXXSmall: {
+          ...LabelFontClass,
+          fontSize: "9px",
+          lineHeight: "10.8px"
+        },
+        // Paragraph
+        paragraphLarge: {
+          ...ParagraphFontClass,
+          fontSize: "18px",
+          lineHeight: "150%"
+        },
+        paragraphMedium: {
+          ...ParagraphFontClass,
+          fontSize: "16px",
+          lineHeight: "150%"
+        },
+        paragraphSmall: {
+          ...ParagraphFontClass,
+          fontSize: "14px",
+          lineHeight: "150%"
+        },
+        paragraphXSmall: {
+          ...ParagraphFontClass,
+          fontSize: "12px",
+          lineHeight: "150%"
+        },
+        paragraphXXSmall: {
+          ...ParagraphFontClass,
+          fontSize: "10px",
+          lineHeight: "150%"
+        }
+      }
+    },
+    lighting: {
+      ...Shadows,
+      ...Glows
+    },
+    materials: {
+      whiteThin: {
+        background: "rgba(255, 255, 255, 0.5)"
+      },
+      whiteRegular: {
+        background: "rgba(255, 255, 255, 0.85)"
+      },
+      whiteThick: {
+        background: "rgba(255, 255, 255, 0.93)"
+      },
+      blackThin: {
+        background: "rgba(0, 0, 0, 0.3)"
+      },
+      blackRegular: {
+        background: "rgba(0, 0, 0, 0.75)"
+      },
+      blackThick: {
+        background: "rgba(0, 0, 0, 0.85)"
+      },
+      lightGreyUltrathin: {
+        background: "rgba(191, 191, 191, 0.44)",
+        backgroundBlend: "#303030",
+        mixBlendMode: "color-dodge"
+      },
+      lightGreyThin: {
+        background: "rgba(166, 166, 166, 0.70)",
+        backgroundBlend: "#3D3D3D",
+        mixBlendMode: "color-dodge"
+      },
+      lightGreyRegular: {
+        background: "rgba(179, 179, 179, 0.82)",
+        backgroundBlend: "#434343",
+        mixBlendMode: "color-dodge"
+      },
+      lightGreyThick: {
+        background: "rgba(153, 153, 153, 0.97)",
+        backgroundBlend: "#5F5F5F",
+        mixBlendMode: "color-dodge"
+      },
+      darkGreyUltrathin: {
+        background: "rgba(37, 37, 37, 0.55)",
+        backgroundBlend: "#9C9C9C",
+        mixBlendMode: "overlay"
+      },
+      darkGreyThin: {
+        background: "rgba(37, 37, 37, 0.70)",
+        backgroundBlend: "#9C9C9C",
+        mixBlendMode: "overlay"
+      },
+      darkGreyRegular: {
+        background: "rgba(37, 37, 37, 0.82)",
+        backgroundBlend: "#8C8C8C",
+        mixBlendMode: "overlay"
+      },
+      darkGreyThick: {
+        background: "rgba(37, 37, 37, 0.90)",
+        backgroundBlend: "#7C7C7C",
+        mixBlendMode: "overlay"
+      },
+      greyUltrathin: {
+        background: "rgba(37, 37, 37, 0.55)",
+        backgroundBlend: "#D2D2D2",
+        mixBlendMode: "overlay"
+      },
+      greyThin: {
+        background: "rgba(37, 37, 37, 0.70)",
+        backgroundBlend: "#CFCFCF",
+        mixBlendMode: "overlay"
+      },
+      greyRegular: {
+        background: "rgba(37, 37, 37, 0.82)",
+        backgroundBlend: "#BCBCBC",
+        mixBlendMode: "overlay"
+      },
+      greyThick: {
+        background: "rgba(37, 37, 37, 0.90)",
+        backgroundBlend: "#B6B6B6",
+        mixBlendMode: "overlay"
+      },
+      primaryThin: {
+        background: "rgba(255, 255, 255, 0.5)"
+      },
+      primaryRegular: {
+        background: "rgba(255, 255, 255, 0.85)"
+      },
+      primaryThick: {
+        background: "rgba(255, 255, 255, 0.93)"
+      },
+      secondaryUltrathin: {
+        background: "rgba(191, 191, 191, 0.44)",
+        backgroundBlend: "#303030",
+        mixBlendMode: "color-dodge"
+      },
+      secondaryThin: {
+        background: "rgba(166, 166, 166, 0.70)",
+        backgroundBlend: "#3D3D3D",
+        mixBlendMode: "color-dodge"
+      },
+      secondaryRegular: {
+        background: "rgba(179, 179, 179, 0.82)",
+        backgroundBlend: "#434343",
+        mixBlendMode: "color-dodge"
+      },
+      secondaryThick: {
+        background: "rgba(153, 153, 153, 0.97)",
+        backgroundBlend: "#5F5F5F",
+        mixBlendMode: "color-dodge"
+      }
+    },
+    borders: {
+      radius: {
+        pill: "1000px",
+        circle: "100%",
+        rectangle: "0px",
+        rounded: "8px",
+        roundedSmall: "4px",
+        roundedMedium: "6px",
+        roundedLarge: "12px",
+        roundedXL: "16px"
+      },
+      dropdown: {
+        shadow: Shadows.deepBelow,
+        color: "transparent",
+        border: "none"
+      }
+    },
+    surfaces: {
+      dialog: {
+        border: "8px solid rgba(0, 0, 0, 0.2)",
+        outline: "1px solid rgba(0, 0, 0, 0.25)",
+        background: "rgba(255, 255, 255, 0.9)",
+        backdropFilter: "blur(6px)"
+      }
+    },
+    animations: {
+      interaction: "200ms cubic-bezier(0.5, 1, 0.89, 1)",
+      timing: {
+        ...TimingFunctions,
+        default: TimingFunctions.easeOut
+      },
+      duration: {
+        rapid: "50ms",
+        fast: "100ms",
+        normal: "200ms",
+        relaxed: "300ms",
+        slow: "400ms",
+        gradual: "600ms"
+      }
+    },
+    breakpoints: {
+      sm: "480px",
+      md: "640px",
+      lg: "768px",
+      xl: "1024px"
+    },
+    layers: {
+      below: -1,
+      sticky: 100,
+      overlay: 300,
+      dropdown: 350,
+      popover: 400,
+      menu: 500
+    }
+  },
+  tokens: Tokens,
+  utils: {
+    defaultUserSelect: "none"
+  },
+  colors: {
+    // Primary
+    black: Tokens.colors.black,
+    white: Tokens.colors.white,
+    accent: Tokens.colors.teal,
+    negative: Tokens.colors.red,
+    warning: Tokens.colors.yellow,
+    positive: Tokens.colors.green,
+    // Content
+    contentPrimary: Tokens.colors.grey1050,
+    contentSecondary: Tokens.colors.grey600,
+    contentTertiary: Tokens.colors.grey500,
+    contentDisabled: Tokens.colors.grey400,
+    contentAccent: Tokens.colors.teal400,
+    contentNegative: Tokens.colors.red400,
+    contentWarning: Tokens.colors.yellow400,
+    contentPositive: Tokens.colors.green400,
+    // Content Inverse
+    contentInversePrimary: Tokens.colors.white,
+    contentInverseSecondary: Tokens.colors.grey200,
+    contentInverseTertiary: Tokens.colors.grey400,
+    contentInverseDisabled: Tokens.colors.grey500,
+    // Background
+    backgroundSidebar: Tokens.colors.black,
+    backgroundPrimary: Tokens.colors.white,
+    backgroundSecondary: Tokens.colors.grey50,
+    backgroundTertiary: Tokens.colors.grey100,
+    backgroundAccent: Tokens.colors.teal100,
+    backgroundNegative: Tokens.colors.red100,
+    backgroundWarning: Tokens.colors.yellow100,
+    backgroundPositive: Tokens.colors.green100,
+    // Background Inverse
+    backgroundInverseSidebar: Tokens.colors.grey1050,
+    backgroundInversePrimary: Tokens.colors.black,
+    backgroundInverseSecondary: Tokens.colors.grey900,
+    backgroundInverseTertiary: Tokens.colors.grey800,
+    backgroundInverseNegative: Tokens.colors.red700,
+    backgroundInverseWarning: Tokens.colors.yellow600,
+    backgroundInversePositive: Tokens.colors.green700,
+    // Background Overlays
+    backgroundOverlayLight: "rgba(255, 255, 255, 0.07)",
+    backgroundOverlayXLight: "rgba(255, 255, 255, 0.1)",
+    backgroundOverlayGrey: "rgba(60, 60, 60, 0.65)",
+    backgroundOverlayDark: "rgba(0, 0, 0, 0.1)",
+    backgroundOverlayTeal: "rgba(29, 238, 205, 0.1)",
+    // Border
+    borderOpaque: Tokens.colors.grey200,
+    borderSelected: Tokens.colors.grey500,
+    borderAccent: Tokens.colors.teal400,
+    borderNegative: Tokens.colors.red400,
+    borderWarning: Tokens.colors.yellow400,
+    borderPositive: Tokens.colors.green400,
+    // Border Inverse
+    borderInverseOpaque: Tokens.colors.grey750,
+    borderInverseSelected: Tokens.colors.grey200
+  },
+  typography: {
+    fontFamily: '"Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
+    italicLetterSpacing: "-0.01em",
+    verticalMetricsAdjust: "1px",
+    fontWeights: {
+      thin: 100,
+      extralight: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+      black: 900,
+      extrablack: 950
+    },
+    fontStyles: {
+      italic: "italic",
+      normal: "normal"
+    },
+    styles: {
+      // Display
+      displayLarge: {
+        ...DisplayFontClass,
+        fontSize: "72px",
+        lineHeight: "86px"
+      },
+      displayMedium: {
+        ...DisplayFontClass,
+        fontSize: "52px",
+        lineHeight: "62px"
+      },
+      display: {
+        ...DisplayFontClass,
+        fontSize: "42px",
+        lineHeight: "50.4px"
+      },
+      displaySmall: {
+        ...DisplayFontClass,
+        fontSize: "34px",
+        lineHeight: "41px"
+      },
+      // Heading
+      headingLarge: {
+        ...HeadingFontClass,
+        fontSize: "32px",
+        lineHeight: "38px"
+      },
+      headingMedium: {
+        ...HeadingFontClass,
+        fontSize: "28px",
+        lineHeight: "34px"
+      },
+      headingSmall: {
+        ...HeadingFontClass,
+        fontSize: "24px",
+        lineHeight: "29px"
+      },
+      headingXSmall: {
+        ...HeadingFontClass,
+        fontSize: "20px",
+        lineHeight: "24px"
+      },
+      headingXXSmall: {
+        ...HeadingFontClass,
+        fontSize: "18px",
+        lineHeight: "22px"
+      },
+      // Label
+      labelXLarge: {
+        ...LabelFontClass,
+        fontSize: "18px",
+        lineHeight: "22px"
+      },
+      labelLarge: {
+        ...LabelFontClass,
+        fontSize: "16px",
+        lineHeight: "19px"
+      },
+      labelMedium: {
+        ...LabelFontClass,
+        fontSize: "14px",
+        lineHeight: "17px"
+      },
+      labelSmall: {
+        ...LabelFontClass,
+        fontSize: "12px",
+        lineHeight: "14px"
+      },
+      labelXSmall: {
+        ...LabelFontClass,
+        fontSize: "10px",
+        lineHeight: "12px"
+      },
+      labelXXSmall: {
+        ...LabelFontClass,
+        fontSize: "9px",
+        lineHeight: "10.8px"
+      },
+      // Paragraph
+      paragraphLarge: {
+        ...ParagraphFontClass,
+        fontSize: "18px",
+        lineHeight: "150%"
+      },
+      paragraphMedium: {
+        ...ParagraphFontClass,
+        fontSize: "16px",
+        lineHeight: "150%"
+      },
+      paragraphSmall: {
+        ...ParagraphFontClass,
+        fontSize: "14px",
+        lineHeight: "150%"
+      },
+      paragraphXSmall: {
+        ...ParagraphFontClass,
+        fontSize: "12px",
+        lineHeight: "150%"
+      },
+      paragraphXXSmall: {
+        ...ParagraphFontClass,
+        fontSize: "10px",
+        lineHeight: "150%"
+      }
+    }
+  },
+  lighting: {
+    ...Shadows
+  },
+  borders: {
+    radius: {
+      pill: "1000px",
+      circle: "100%",
+      rectangle: "0px",
+      rounded: "8px",
+      roundedSmall: "4px",
+      roundedLarge: "12px",
+      roundedXL: "16px"
+    },
+    dropdown: {
+      shadow: Shadows.deepBelow,
+      color: "transparent",
+      border: "none"
+    }
+  },
+  surfaces: {
+    dialog: {
+      border: "8px solid rgba(0, 0, 0, 0.2)",
+      outline: "1px solid rgba(0, 0, 0, 0.25)",
+      background: "rgba(255, 255, 255, 0.9)",
+      backdropFilter: "blur(6px)"
+    }
+  },
+  animations: {
+    interaction: "200ms cubic-bezier(0.5, 1, 0.89, 1)",
+    timing: {
+      ...TimingFunctions,
+      default: TimingFunctions.easeOut
+    },
+    duration: {
+      rapid: "50ms",
+      fast: "100ms",
+      normal: "200ms",
+      relaxed: "300ms",
+      slow: "400ms",
+      gradual: "600ms"
+    }
+  },
+  breakpoints: {
+    sm: "480px",
+    md: "640px",
+    lg: "768px",
+    xl: "1024px"
+  }
+};
+const DarkTheme = merge(LightTheme, {
+  new: {
+    colors: {
+      // Content
+      contentPrimary: Tokens.new.colors.grey200,
+      contentSecondary: Tokens.new.colors.grey800,
+      contentTertiary: Tokens.new.colors.grey1000,
+      contentDisabled: Tokens.new.colors.grey1300,
+      contentLink: Tokens.new.colors.blue400,
+      contentInversePrimary: Tokens.new.colors.grey2400,
+      contentInverseSecondary: Tokens.new.colors.grey1600,
+      contentInverseTertiary: Tokens.new.colors.grey1400,
+      contentInverseDisabled: Tokens.new.colors.grey1000,
+      // Background
+      backgroundPrimary: Tokens.new.colors.grey2400,
+      backgroundSecondary: Tokens.new.colors.grey2200,
+      backgroundMobilePrimary: Tokens.new.colors.black,
+      backgroundMobileSecondary: Tokens.new.colors.grey2300,
+      backgroundNegative: Tokens.new.colors.red800,
+      backgroundNegativeMedium: Tokens.new.colors.red700,
+      backgroundNegativeStrong: Tokens.new.colors.red600,
+      backgroundWarning: Tokens.new.colors.yellow800,
+      backgroundWarningMedium: Tokens.new.colors.yellow700,
+      backgroundWarningStrong: Tokens.new.colors.yellow600,
+      backgroundPositive: Tokens.new.colors.green800,
+      backgroundPositiveMedium: Tokens.new.colors.green700,
+      backgroundPositiveStrong: Tokens.new.colors.green600,
+      backgroundAccent: Tokens.new.colors.teal800,
+      backgroundAccentMedium: Tokens.new.colors.teal700,
+      backgroundAccentStrong: Tokens.new.colors.teal600,
+      // Surface
+      surfacePrimary: Tokens.new.colors.grey2000,
+      surfaceSecondary: Tokens.new.colors.grey2100,
+      surfaceTertiary: Tokens.new.colors.grey2200,
+      surfaceQuaternary: Tokens.new.colors.grey1900,
+      // Border
+      borderSubtle: Tokens.new.colors.grey2000,
+      borderMedium: Tokens.new.colors.grey1700,
+      borderStrong: Tokens.new.colors.grey1600,
+      borderUltrastrong: Tokens.new.colors.grey900,
+      // Button
+      buttonFill: Tokens.new.colors.grey200,
+      buttonFillHover: Tokens.new.colors.grey400,
+      buttonFillDisabled: Tokens.new.colors.grey1700,
+      buttonFillHoverAlt: Tokens.new.colors.grey2000,
+      buttonFillHoverNegative: Tokens.new.colors.red800,
+      buttonBorder: Tokens.new.colors.grey100,
+      buttonBorderDisabled: Tokens.new.colors.grey1400,
+      buttonBorderNegative: Tokens.new.colors.red400,
+      // Input
+      inputFill: Tokens.new.colors.grey2200,
+      inputFillFocus: Tokens.new.colors.grey2300,
+      inputFillNegative: Tokens.new.colors.red800,
+      inputFillDisabled: Tokens.new.colors.grey2100,
+      inputBorderFocus: Tokens.new.colors.grey900,
+      // Overlay
+      overlaySubtle: "rgba(255, 255, 255, 0.03)",
+      overlayMedium: "rgba(255, 255, 255, 0.07)",
+      overlayStrong: "rgba(255, 255, 255, 0.09)",
+      overlayInverseSubtle: "rgba(0, 0, 0, 0.02)",
+      overlayInverseMedium: "rgba(0, 0, 0, 0.05)",
+      overlayWhiteUltrastrong: "rgba(255, 255, 255, 0.18)",
+      overlayBlackSubtle: "rgba(0, 0, 0, 0.2)",
+      overlayBlackMedium: "rgba(0, 0, 0, 0.3)",
+      overlayBlackStrong: "rgba(0, 0, 0, 0.4)",
+      overlayPageBackground: "rgba(18, 18, 18, 0.75)"
+    },
+    lighting: {
+      ...ShadowsDark,
+      ...GlowsDark
+    },
+    materials: {
+      primaryThin: {
+        background: "rgba(0, 0, 0, 0.3)"
+      },
+      primaryRegular: {
+        background: "rgba(0, 0, 0, 0.75)"
+      },
+      primaryThick: {
+        background: "rgba(0, 0, 0, 0.85)"
+      },
+      secondaryUltrathin: {
+        background: "rgba(37, 37, 37, 0.55)",
+        backgroundBlend: "#9C9C9C",
+        mixBlendMode: "overlay"
+      },
+      secondaryThin: {
+        background: "rgba(37, 37, 37, 0.70)",
+        backgroundBlend: "#9C9C9C",
+        mixBlendMode: "overlay"
+      },
+      secondaryRegular: {
+        background: "rgba(37, 37, 37, 0.82)",
+        backgroundBlend: "#8C8C8C",
+        mixBlendMode: "overlay"
+      },
+      secondaryThick: {
+        background: "rgba(37, 37, 37, 0.90)",
+        backgroundBlend: "#7C7C7C",
+        mixBlendMode: "overlay"
+      }
+    },
+    borders: {
+      dropdown: {
+        shadow: ShadowsDark.deepBelow,
+        color: "transparent",
+        border: "none"
+      }
+    },
+    surfaces: {
+      dialog: {
+        border: "8px solid rgba(255, 255, 255, 0.2)",
+        outline: "1px solid rgba(255, 255, 255, 0.25)",
+        background: "rgba(0, 0, 0, 0.6)",
+        backdropFilter: "blur(6px)"
+      }
+    }
+  },
+  colors: {
+    // Reverse all inverse colors
+    contentPrimary: LightTheme.colors.contentInversePrimary,
+    contentSecondary: LightTheme.colors.contentInverseSecondary,
+    contentTertiary: LightTheme.colors.contentInverseTertiary,
+    contentDisabled: LightTheme.colors.contentInverseDisabled,
+    backgroundSidebar: LightTheme.colors.backgroundInverseSidebar,
+    backgroundPrimary: LightTheme.colors.backgroundInversePrimary,
+    backgroundSecondary: LightTheme.colors.backgroundInverseSecondary,
+    backgroundTertiary: LightTheme.colors.backgroundInverseTertiary,
+    backgroundNegative: LightTheme.colors.backgroundInverseNegative,
+    backgroundWarning: LightTheme.colors.backgroundInverseWarning,
+    backgroundPositive: LightTheme.colors.backgroundInversePositive,
+    borderOpaque: LightTheme.colors.borderInverseOpaque,
+    borderSelected: LightTheme.colors.borderInverseSelected,
+    contentInversePrimary: LightTheme.colors.contentPrimary,
+    contentInverseSecondary: LightTheme.colors.contentSecondary,
+    contentInverseTertiary: LightTheme.colors.contentTertiary,
+    contentInverseDisabled: LightTheme.colors.contentDisabled,
+    backgroundInverseSidebar: LightTheme.colors.backgroundSidebar,
+    backgroundInversePrimary: LightTheme.colors.backgroundPrimary,
+    backgroundInverseSecondary: LightTheme.colors.backgroundSecondary,
+    backgroundInverseTertiary: LightTheme.colors.backgroundTertiary,
+    backgroundInverseNegative: LightTheme.colors.backgroundNegative,
+    backgroundInverseWarning: LightTheme.colors.backgroundWarning,
+    backgroundInversePositive: LightTheme.colors.backgroundPositive,
+    borderInverseOpaque: LightTheme.colors.borderOpaque,
+    borderInverseSelected: LightTheme.colors.borderSelected
+  },
+  borders: {
+    dropdown: {
+      shadow: "none",
+      color: Tokens.colors.grey600,
+      border: `1px solid ${Tokens.colors.grey600}`
+    }
+  },
+  surfaces: {
+    dialog: {
+      border: "8px solid rgba(255, 255, 255, 0.2)",
+      outline: "1px solid rgba(255, 255, 255, 0.25)",
+      background: "rgba(0, 0, 0, 0.6)",
+      backdropFilter: "blur(6px)"
+    }
+  }
+});
+const { theme, pvar, pget, updateTheme, injectTheme, generateThemeInjection } = createTheme(LightTheme);
+
+export { DarkTheme, DisplayFontClass, HeadingFontClass, LabelFontClass, LightTheme, ParagraphFontClass, generateThemeInjection, injectTheme, pget, pvar, theme, updateTheme };
+//# sourceMappingURL=themes.js.map