storybook 10.1.0-beta.1 → 10.1.0-beta.3

package/dist/_browser-chunks/{chunk-L4RMQ7D7.js → chunk-BRX2HXH7.js}

@@ -31,7 +31,7 @@ var color = {
   darker: "#454C54",
   darkest: "#2E3338",
   // For borders
-  border: "hsla(212, 50%, 30%, 0.15)",
+  border: "hsl(212 50% 30% / 0.15)",
   // Status
   positive: "#66BF3C",
   warning: "#E69D00",
@@ -98,6 +98,69 @@ var color = {
     l3: 48,
     code: 90
   }
+}, tokens = {
+  light: {
+    fgColor: {
+      default: color.darkest,
+      muted: color.dark,
+      accent: color.secondary,
+      inverse: color.lightest,
+      // TODO: add 'disabled'
+      positive: "#427C27",
+      warning: "#7A4100",
+      negative: "#C23400",
+      critical: "#FFFFFF"
+    },
+    bgColor: {
+      default: color.lightest,
+      muted: background.app,
+      // TODO: add 'accent'? white or blue?
+      positive: "#F1FFEB",
+      warning: "#FFF7EB",
+      negative: "#FFF0EB",
+      critical: "#D13800"
+    },
+    borderColor: {
+      default: color.border,
+      muted: "hsl(0 0% 0% / 0.1)",
+      inverse: "hsl(0 0% 100% / 0.1)",
+      positive: "#BFE7AC",
+      warning: "#FFCE85",
+      negative: "#FFC3AD",
+      critical: "hsl(16 100% 100% / 0)"
+    }
+  },
+  dark: {
+    fgColor: {
+      default: "#C9CCCF",
+      muted: "#95999D",
+      accent: "#479DFF",
+      inverse: "#1B1C1D",
+      // TODO: add 'disabled'
+      positive: "#86CE64",
+      warning: "#FFAD33",
+      negative: "#FF6933",
+      critical: "#FF6933"
+    },
+    bgColor: {
+      default: "#222325",
+      muted: "#1B1C1D",
+      // TODO: add 'accent'? white or blue?
+      positive: "hsl(101 100% 100% / 0)",
+      warning: "hsl(101 100% 100% / 0)",
+      negative: "hsl(101 100% 100% / 0)",
+      critical: "hsl(101 100% 100% / 0)"
+    },
+    borderColor: {
+      default: "hsl(0 0% 100% / 0.1)",
+      muted: "hsl(0 0% 100% / 0.5)",
+      inverse: "hsl(0 0% 0% / 0.1)",
+      positive: "hsl(101 52% 64% / 0.15)",
+      warning: "hsl(36 100% 64% / 0.15)",
+      negative: "hsl(16 100% 64% / 0.15)",
+      critical: "#FF6933"
+    }
+  }
 };
 
 // src/theming/themes/dark.ts
@@ -112,7 +175,7 @@ var theme = {
   appContentBg: "#222325",
   appHoverBg: "#233952",
   appPreviewBg: color.lightest,
-  appBorderColor: "rgba(255,255,255,.1)",
+  appBorderColor: "hsl(0 0% 100% / 0.1)",
   appBorderRadius: 4,
   // Fonts
   fontBase: typography.fonts.base,
@@ -128,11 +191,11 @@ var theme = {
   barBg: "#222325",
   // Form colors
   buttonBg: "#1B1C1D",
-  buttonBorder: "hsl(0 0 100 / 0.1)",
+  buttonBorder: "hsl(0 0% 100% / 0.1)",
   booleanBg: "#1B1C1D",
   booleanSelectedBg: "#292B2E",
   inputBg: "#1B1C1D",
-  inputBorder: "hsl(0 0 100 / 0.1)",
+  inputBorder: "hsl(0 0% 100% / 0.1)",
   inputTextColor: "#C9CCCF",
   inputBorderRadius: 4
 }, dark_default = theme;
@@ -195,11 +258,17 @@ var themesBase = {
 }, preferredColorScheme = getPreferredColorScheme(), themes = {
   ...themesBase,
   normal: themesBase[preferredColorScheme]
-}, create = (vars = { base: preferredColorScheme }, rest) => {
+}, create = (vars = {
+  base: preferredColorScheme
+}, rest) => {
   let inherit = {
+    // We always inherit the preferred color scheme.
     ...themes[preferredColorScheme],
+    // And then the declared theme base if it exists.
     ...themes[vars.base] || {},
+    // And then the actual theme content.
     ...vars,
+    // If no theme base was declared, we declare the preferred color scheme as the base.
     base: themes[vars.base] ? vars.base : preferredColorScheme
   };
   return {
@@ -213,6 +282,7 @@ export {
   color,
   background,
   typography,
+  tokens,
   light_default,
   mkColor,
   lightenColor,