storybook 10.1.0-alpha.9 → 10.1.0-beta.1

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

@@ -1,19 +1,15 @@
 import {
   curriedDarken$1,
   curriedLighten$1,
-  curriedTransparentize$1,
   rgba
-} from "./chunk-OBXWFEPB.js";
-import {
-  __name
-} from "./chunk-MM7DTO55.js";
+} from "./chunk-AXG2BOBL.js";
 
 // src/theming/base.ts
 var color = {
   // Official color palette
   primary: "#FF4785",
   // coral
-  secondary: "#029CFD",
+  secondary: "#006DEB",
   // ocean
   tertiary: "#FAFBFC",
   ancillary: "#22a699",
@@ -26,43 +22,40 @@ var color = {
   ultraviolet: "#2A0481",
   // Monochrome
   lightest: "#FFFFFF",
-  lighter: "#F7FAFC",
-  light: "#EEF3F6",
-  mediumlight: "#ECF4F9",
-  medium: "#D9E8F2",
-  mediumdark: "#73828C",
-  dark: "#5C6870",
-  darker: "#454E54",
-  darkest: "#2E3438",
+  lighter: "#F6F9FC",
+  light: "#EEF2F6",
+  mediumlight: "#ECF2F9",
+  medium: "#D9E5F2",
+  mediumdark: "#737F8C",
+  dark: "#5C6570",
+  darker: "#454C54",
+  darkest: "#2E3338",
   // For borders
-  border: "hsla(203, 50%, 30%, 0.15)",
+  border: "hsla(212, 50%, 30%, 0.15)",
   // Status
   positive: "#66BF3C",
-  negative: "#FF4400",
   warning: "#E69D00",
+  negative: "#FF4400",
   critical: "#FFFFFF",
   // Text
-  defaultText: "#2E3438",
+  defaultText: "#2E3338",
   inverseText: "#FFFFFF",
-  positiveText: "#448028",
-  negativeText: "#D43900",
-  warningText: "#A15C20"
-};
-var background = {
+  positiveText: "#427C27",
+  warningText: "#955B1E",
+  negativeText: "#C23400"
+}, background = {
   app: "#F6F9FC",
   bar: color.lightest,
   content: color.lightest,
   preview: color.lightest,
   gridCellSize: 10,
-  hoverable: curriedTransparentize$1(0.9, color.secondary),
-  // hover state for items in a list
+  hoverable: "#DBECFF",
   // Notification, error, and warning backgrounds
-  positive: "#E1FFD4",
-  negative: "#FEDED2",
-  warning: "#FFF5CF",
-  critical: "#FF4400"
-};
-var typography = {
+  positive: "#F1FFEB",
+  warning: "#FFF9EB",
+  negative: "#FFF0EB",
+  critical: "#D13800"
+}, typography = {
   fonts: {
     base: [
       '"Nunito Sans"',
@@ -113,11 +106,11 @@ var theme = {
   // Storybook-specific color palette
   colorPrimary: "#FF4785",
   // coral
-  colorSecondary: "#029CFD",
-  // ocean
+  colorSecondary: "#479DFF",
   // UI
-  appBg: "#222425",
-  appContentBg: "#1B1C1D",
+  appBg: "#1B1C1D",
+  appContentBg: "#222325",
+  appHoverBg: "#233952",
   appPreviewBg: color.lightest,
   appBorderColor: "rgba(255,255,255,.1)",
   appBorderRadius: 4,
@@ -125,37 +118,35 @@ var theme = {
   fontBase: typography.fonts.base,
   fontCode: typography.fonts.mono,
   // Text colors
-  textColor: "#C9CDCF",
-  textInverseColor: "#222425",
-  textMutedColor: "#798186",
+  textColor: "#C9CCCF",
+  textInverseColor: "#1B1C1D",
+  textMutedColor: "#95999D",
   // Toolbar default and active colors
-  barTextColor: color.mediumdark,
-  barHoverColor: color.secondary,
-  barSelectedColor: color.secondary,
-  barBg: "#292C2E",
+  barTextColor: "#95999D",
+  barHoverColor: "#70B3FF",
+  barSelectedColor: "#479DFF",
+  barBg: "#222325",
   // Form colors
-  buttonBg: "#222425",
-  buttonBorder: "rgba(255,255,255,.1)",
-  booleanBg: "#222425",
-  booleanSelectedBg: "#2E3438",
+  buttonBg: "#1B1C1D",
+  buttonBorder: "hsl(0 0 100 / 0.1)",
+  booleanBg: "#1B1C1D",
+  booleanSelectedBg: "#292B2E",
   inputBg: "#1B1C1D",
-  inputBorder: "rgba(255,255,255,.1)",
-  inputTextColor: color.lightest,
+  inputBorder: "hsl(0 0 100 / 0.1)",
+  inputTextColor: "#C9CCCF",
   inputBorderRadius: 4
-};
-var dark_default = theme;
+}, dark_default = theme;
 
 // src/theming/themes/light.ts
 var theme2 = {
   base: "light",
   // Storybook-specific color palette
-  colorPrimary: "#FF4785",
-  // coral
-  colorSecondary: "#029CFD",
-  // ocean
+  colorPrimary: color.primary,
+  colorSecondary: color.secondary,
   // UI
   appBg: background.app,
   appContentBg: color.lightest,
+  appHoverBg: "#DBECFF",
   appPreviewBg: color.lightest,
   appBorderColor: color.border,
   appBorderRadius: 4,
@@ -167,9 +158,9 @@ var theme2 = {
   textInverseColor: color.lightest,
   textMutedColor: color.dark,
   // Toolbar default and active colors
-  barTextColor: color.mediumdark,
-  barHoverColor: color.secondary,
-  barSelectedColor: color.secondary,
+  barTextColor: color.dark,
+  barHoverColor: "#005CC7",
+  barSelectedColor: "#0063D6",
   barBg: color.lightest,
   // Form colors
   buttonBg: background.app,
@@ -180,84 +171,43 @@ var theme2 = {
   inputBorder: color.border,
   inputTextColor: color.darkest,
   inputBorderRadius: 4
-};
-var light_default = theme2;
+}, light_default = theme2;
 
 // src/theming/utils.ts
 import { logger } from "storybook/internal/client-logger";
 import { global } from "@storybook/global";
-var { window: globalWindow } = global;
-var mkColor = /* @__PURE__ */ __name((color2) => ({ color: color2 }), "mkColor");
-var isColorString = /* @__PURE__ */ __name((color2) => {
-  if (typeof color2 !== "string") {
-    logger.warn(
-      `Color passed to theme object should be a string. Instead ${color2}(${typeof color2}) was passed.`
-    );
-    return false;
-  }
-  return true;
-}, "isColorString");
-var isValidColorForPolished = /* @__PURE__ */ __name((color2) => {
-  return !/(gradient|var|calc)/.test(color2);
-}, "isValidColorForPolished");
-var applyPolished = /* @__PURE__ */ __name((type, color2) => {
-  if (type === "darken") {
-    return rgba(`${curriedDarken$1(1, color2)}`, 0.95);
-  }
-  if (type === "lighten") {
-    return rgba(`${curriedLighten$1(1, color2)}`, 0.95);
-  }
-  return color2;
-}, "applyPolished");
-var colorFactory = /* @__PURE__ */ __name((type) => (color2) => {
-  if (!isColorString(color2)) {
+var { window: globalWindow } = global, mkColor = (color2) => ({ color: color2 }), isColorString = (color2) => typeof color2 != "string" ? (logger.warn(
+  `Color passed to theme object should be a string. Instead ${color2}(${typeof color2}) was passed.`
+), !1) : !0, isValidColorForPolished = (color2) => !/(gradient|var|calc)/.test(color2), applyPolished = (type, color2) => type === "darken" ? rgba(`${curriedDarken$1(1, color2)}`, 0.95) : type === "lighten" ? rgba(`${curriedLighten$1(1, color2)}`, 0.95) : color2, colorFactory = (type) => (color2) => {
+  if (!isColorString(color2) || !isValidColorForPolished(color2))
     return color2;
-  }
-  if (!isValidColorForPolished(color2)) {
-    return color2;
-  }
   try {
     return applyPolished(type, color2);
-  } catch (error) {
+  } catch {
     return color2;
   }
-}, "colorFactory");
-var lightenColor = colorFactory("lighten");
-var darkenColor = colorFactory("darken");
-var getPreferredColorScheme = /* @__PURE__ */ __name(() => {
-  if (!globalWindow || !globalWindow.matchMedia) {
-    return "light";
-  }
-  const isDarkThemePreferred = globalWindow.matchMedia("(prefers-color-scheme: dark)").matches;
-  if (isDarkThemePreferred) {
-    return "dark";
-  }
-  return "light";
-}, "getPreferredColorScheme");
+}, lightenColor = colorFactory("lighten"), darkenColor = colorFactory("darken"), getPreferredColorScheme = () => !globalWindow || !globalWindow.matchMedia ? "light" : globalWindow.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 
 // src/theming/create.ts
 var themesBase = {
   light: light_default,
   dark: dark_default
-};
-var preferredColorScheme = getPreferredColorScheme();
-var themes = {
+}, preferredColorScheme = getPreferredColorScheme(), themes = {
   ...themesBase,
   normal: themesBase[preferredColorScheme]
-};
-var create = /* @__PURE__ */ __name((vars = { base: preferredColorScheme }, rest) => {
-  const inherit = {
+}, create = (vars = { base: preferredColorScheme }, rest) => {
+  let inherit = {
     ...themes[preferredColorScheme],
     ...themes[vars.base] || {},
     ...vars,
-    ...{ base: themes[vars.base] ? vars.base : preferredColorScheme }
+    base: themes[vars.base] ? vars.base : preferredColorScheme
   };
   return {
     ...rest,
     ...inherit,
-    ...{ barSelectedColor: vars.barSelectedColor || inherit.colorSecondary }
+    barSelectedColor: vars.barSelectedColor || inherit.colorSecondary
   };
-}, "create");
+};
 
 export {
   color,