storybook 9.0.0-alpha.1 → 9.0.0-alpha.11

package/dist/theming/create.cjs

@@ -0,0 +1,232 @@
+"use strict";
+var l = Object.defineProperty;
+var B = Object.getOwnPropertyDescriptor;
+var x = Object.getOwnPropertyNames;
+var k = Object.prototype.hasOwnProperty;
+var a = (e, t) => l(e, "name", { value: t, configurable: !0 });
+var T = (e, t) => {
+  for (var o in t)
+    l(e, o, { get: t[o], enumerable: !0 });
+}, S = (e, t, o, F) => {
+  if (t && typeof t == "object" || typeof t == "function")
+    for (let s of x(t))
+      !k.call(e, s) && s !== o && l(e, s, { get: () => t[s], enumerable: !(F = B(t, s)) || F.enumerable });
+  return e;
+};
+var D = (e) => S(l({}, "__esModule", { value: !0 }), e);
+
+// src/theming/create.ts
+var R = {};
+T(R, {
+  create: () => M,
+  themes: () => d
+});
+module.exports = D(R);
+
+// src/theming/base.ts
+var h = require("polished"), r = {
+  // Official color palette
+  primary: "#FF4785",
+  // coral
+  secondary: "#029CFD",
+  // ocean
+  tertiary: "#FAFBFC",
+  ancillary: "#22a699",
+  // Complimentary
+  orange: "#FC521F",
+  gold: "#FFAE00",
+  green: "#66BF3C",
+  seafoam: "#37D5D3",
+  purple: "#6F2CAC",
+  ultraviolet: "#2A0481",
+  // Monochrome
+  lightest: "#FFFFFF",
+  lighter: "#F7FAFC",
+  light: "#EEF3F6",
+  mediumlight: "#ECF4F9",
+  medium: "#D9E8F2",
+  mediumdark: "#73828C",
+  dark: "#5C6870",
+  darker: "#454E54",
+  darkest: "#2E3438",
+  // For borders
+  border: "hsla(203, 50%, 30%, 0.15)",
+  // Status
+  positive: "#66BF3C",
+  negative: "#FF4400",
+  warning: "#E69D00",
+  critical: "#FFFFFF",
+  // Text
+  defaultText: "#2E3438",
+  inverseText: "#FFFFFF",
+  positiveText: "#448028",
+  negativeText: "#D43900",
+  warningText: "#A15C20"
+}, p = {
+  app: "#F6F9FC",
+  bar: r.lightest,
+  content: r.lightest,
+  preview: r.lightest,
+  gridCellSize: 10,
+  hoverable: (0, h.transparentize)(0.9, r.secondary),
+  // hover state for items in a list
+  // Notification, error, and warning backgrounds
+  positive: "#E1FFD4",
+  negative: "#FEDED2",
+  warning: "#FFF5CF",
+  critical: "#FF4400"
+}, i = {
+  fonts: {
+    base: [
+      '"Nunito Sans"',
+      "-apple-system",
+      '".SFNSText-Regular"',
+      '"San Francisco"',
+      "BlinkMacSystemFont",
+      '"Segoe UI"',
+      '"Helvetica Neue"',
+      "Helvetica",
+      "Arial",
+      "sans-serif"
+    ].join(", "),
+    mono: [
+      "ui-monospace",
+      "Menlo",
+      "Monaco",
+      '"Roboto Mono"',
+      '"Oxygen Mono"',
+      '"Ubuntu Monospace"',
+      '"Source Code Pro"',
+      '"Droid Sans Mono"',
+      '"Courier New"',
+      "monospace"
+    ].join(", ")
+  },
+  weight: {
+    regular: 400,
+    bold: 700
+  },
+  size: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+    code: 90
+  }
+};
+
+// src/theming/themes/dark.ts
+var v = {
+  base: "dark",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: "#222425",
+  appContentBg: "#1B1C1D",
+  appPreviewBg: r.lightest,
+  appBorderColor: "rgba(255,255,255,.1)",
+  appBorderRadius: 4,
+  // Fonts
+  fontBase: i.fonts.base,
+  fontCode: i.fonts.mono,
+  // Text colors
+  textColor: "#C9CDCF",
+  textInverseColor: "#222425",
+  textMutedColor: "#798186",
+  // Toolbar default and active colors
+  barTextColor: r.mediumdark,
+  barHoverColor: r.secondary,
+  barSelectedColor: r.secondary,
+  barBg: "#292C2E",
+  // Form colors
+  buttonBg: "#222425",
+  buttonBorder: "rgba(255,255,255,.1)",
+  booleanBg: "#222425",
+  booleanSelectedBg: "#2E3438",
+  inputBg: "#1B1C1D",
+  inputBorder: "rgba(255,255,255,.1)",
+  inputTextColor: r.lightest,
+  inputBorderRadius: 4
+}, u = v;
+
+// src/theming/themes/light.ts
+var V = {
+  base: "light",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: p.app,
+  appContentBg: r.lightest,
+  appPreviewBg: r.lightest,
+  appBorderColor: r.border,
+  appBorderRadius: 4,
+  // Fonts
+  fontBase: i.fonts.base,
+  fontCode: i.fonts.mono,
+  // Text colors
+  textColor: r.darkest,
+  textInverseColor: r.lightest,
+  textMutedColor: r.dark,
+  // Toolbar default and active colors
+  barTextColor: r.mediumdark,
+  barHoverColor: r.secondary,
+  barSelectedColor: r.secondary,
+  barBg: r.lightest,
+  // Form colors
+  buttonBg: p.app,
+  buttonBorder: r.medium,
+  booleanBg: r.mediumlight,
+  booleanSelectedBg: r.lightest,
+  inputBg: r.lightest,
+  inputBorder: r.border,
+  inputTextColor: r.darkest,
+  inputBorderRadius: 4
+}, g = V;
+
+// src/theming/utils.ts
+var C = require("storybook/internal/client-logger"), b = require("@storybook/global"), n = require("polished");
+var { window: m } = b.global;
+var E = /* @__PURE__ */ a((e) => typeof e != "string" ? (C.logger.warn(
+  `Color passed to theme object should be a string. Instead ${e}(${typeof e}) was passed.`
+), !1) : !0, "isColorString"), w = /* @__PURE__ */ a((e) => !/(gradient|var|calc)/.test(e), "isValidColorForPolished"), P = /* @__PURE__ */ a(
+(e, t) => e === "darken" ? (0, n.rgba)(`${(0, n.darken)(1, t)}`, 0.95) : e === "lighten" ? (0, n.rgba)(`${(0, n.lighten)(1, t)}`, 0.95) : t,
+"applyPolished"), f = /* @__PURE__ */ a((e) => (t) => {
+  if (!E(t) || !w(t))
+    return t;
+  try {
+    return P(e, t);
+  } catch {
+    return t;
+  }
+}, "colorFactory"), z = f("lighten"), U = f("darken"), y = /* @__PURE__ */ a(() => !m || !m.matchMedia ? "light" : m.matchMedia("(prefers-co\
+lor-scheme: dark)").matches ? "dark" : "light", "getPreferredColorScheme");
+
+// src/theming/create.ts
+var d = {
+  light: g,
+  dark: u,
+  normal: g
+}, c = y(), M = /* @__PURE__ */ a((e = { base: c }, t) => {
+  let o = {
+    ...d[c],
+    ...d[e.base] || {},
+    ...e,
+    base: d[e.base] ? e.base : c
+  };
+  return {
+    ...t,
+    ...o,
+    barSelectedColor: e.barSelectedColor || o.colorSecondary
+  };
+}, "create");

package/dist/theming/create.d.ts

@@ -0,0 +1,50 @@
+interface ThemeVars extends ThemeVarsBase, ThemeVarsColors {
+}
+interface ThemeVarsPartial extends ThemeVarsBase, Partial<ThemeVarsColors> {
+}
+interface ThemeVarsBase {
+    base: 'light' | 'dark';
+}
+interface ThemeVarsColors {
+    colorPrimary: string;
+    colorSecondary: string;
+    appBg: string;
+    appContentBg: string;
+    appPreviewBg: string;
+    appBorderColor: string;
+    appBorderRadius: number;
+    fontBase: string;
+    fontCode: string;
+    textColor: string;
+    textInverseColor: string;
+    textMutedColor: string;
+    barTextColor: string;
+    barHoverColor: string;
+    barSelectedColor: string;
+    barBg: string;
+    buttonBg: string;
+    buttonBorder: string;
+    booleanBg: string;
+    booleanSelectedBg: string;
+    inputBg: string;
+    inputBorder: string;
+    inputTextColor: string;
+    inputBorderRadius: number;
+    brandTitle?: string;
+    brandUrl?: string;
+    brandImage?: string;
+    brandTarget?: string;
+    gridCellSize?: number;
+}
+
+declare const themes: {
+    light: ThemeVars;
+    dark: ThemeVars;
+    normal: ThemeVars;
+};
+interface Rest {
+    [key: string]: any;
+}
+declare const create: (vars?: ThemeVarsPartial, rest?: Rest) => ThemeVars;
+
+export { create, themes };

package/dist/theming/create.js

@@ -0,0 +1,216 @@
+var h = Object.defineProperty;
+var o = (r, t) => h(r, "name", { value: t, configurable: !0 });
+
+// src/theming/base.ts
+import { transparentize as u } from "polished";
+var e = {
+  // Official color palette
+  primary: "#FF4785",
+  // coral
+  secondary: "#029CFD",
+  // ocean
+  tertiary: "#FAFBFC",
+  ancillary: "#22a699",
+  // Complimentary
+  orange: "#FC521F",
+  gold: "#FFAE00",
+  green: "#66BF3C",
+  seafoam: "#37D5D3",
+  purple: "#6F2CAC",
+  ultraviolet: "#2A0481",
+  // Monochrome
+  lightest: "#FFFFFF",
+  lighter: "#F7FAFC",
+  light: "#EEF3F6",
+  mediumlight: "#ECF4F9",
+  medium: "#D9E8F2",
+  mediumdark: "#73828C",
+  dark: "#5C6870",
+  darker: "#454E54",
+  darkest: "#2E3438",
+  // For borders
+  border: "hsla(203, 50%, 30%, 0.15)",
+  // Status
+  positive: "#66BF3C",
+  negative: "#FF4400",
+  warning: "#E69D00",
+  critical: "#FFFFFF",
+  // Text
+  defaultText: "#2E3438",
+  inverseText: "#FFFFFF",
+  positiveText: "#448028",
+  negativeText: "#D43900",
+  warningText: "#A15C20"
+}, i = {
+  app: "#F6F9FC",
+  bar: e.lightest,
+  content: e.lightest,
+  preview: e.lightest,
+  gridCellSize: 10,
+  hoverable: u(0.9, e.secondary),
+  // hover state for items in a list
+  // Notification, error, and warning backgrounds
+  positive: "#E1FFD4",
+  negative: "#FEDED2",
+  warning: "#FFF5CF",
+  critical: "#FF4400"
+}, a = {
+  fonts: {
+    base: [
+      '"Nunito Sans"',
+      "-apple-system",
+      '".SFNSText-Regular"',
+      '"San Francisco"',
+      "BlinkMacSystemFont",
+      '"Segoe UI"',
+      '"Helvetica Neue"',
+      "Helvetica",
+      "Arial",
+      "sans-serif"
+    ].join(", "),
+    mono: [
+      "ui-monospace",
+      "Menlo",
+      "Monaco",
+      '"Roboto Mono"',
+      '"Oxygen Mono"',
+      '"Ubuntu Monospace"',
+      '"Source Code Pro"',
+      '"Droid Sans Mono"',
+      '"Courier New"',
+      "monospace"
+    ].join(", ")
+  },
+  weight: {
+    regular: 400,
+    bold: 700
+  },
+  size: {
+    s1: 12,
+    s2: 14,
+    s3: 16,
+    m1: 20,
+    m2: 24,
+    m3: 28,
+    l1: 32,
+    l2: 40,
+    l3: 48,
+    code: 90
+  }
+};
+
+// src/theming/themes/dark.ts
+var C = {
+  base: "dark",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: "#222425",
+  appContentBg: "#1B1C1D",
+  appPreviewBg: e.lightest,
+  appBorderColor: "rgba(255,255,255,.1)",
+  appBorderRadius: 4,
+  // Fonts
+  fontBase: a.fonts.base,
+  fontCode: a.fonts.mono,
+  // Text colors
+  textColor: "#C9CDCF",
+  textInverseColor: "#222425",
+  textMutedColor: "#798186",
+  // Toolbar default and active colors
+  barTextColor: e.mediumdark,
+  barHoverColor: e.secondary,
+  barSelectedColor: e.secondary,
+  barBg: "#292C2E",
+  // Form colors
+  buttonBg: "#222425",
+  buttonBorder: "rgba(255,255,255,.1)",
+  booleanBg: "#222425",
+  booleanSelectedBg: "#2E3438",
+  inputBg: "#1B1C1D",
+  inputBorder: "rgba(255,255,255,.1)",
+  inputTextColor: e.lightest,
+  inputBorderRadius: 4
+}, g = C;
+
+// src/theming/themes/light.ts
+var b = {
+  base: "light",
+  // Storybook-specific color palette
+  colorPrimary: "#FF4785",
+  // coral
+  colorSecondary: "#029CFD",
+  // ocean
+  // UI
+  appBg: i.app,
+  appContentBg: e.lightest,
+  appPreviewBg: e.lightest,
+  appBorderColor: e.border,
+  appBorderRadius: 4,
+  // Fonts
+  fontBase: a.fonts.base,
+  fontCode: a.fonts.mono,
+  // Text colors
+  textColor: e.darkest,
+  textInverseColor: e.lightest,
+  textMutedColor: e.dark,
+  // Toolbar default and active colors
+  barTextColor: e.mediumdark,
+  barHoverColor: e.secondary,
+  barSelectedColor: e.secondary,
+  barBg: e.lightest,
+  // Form colors
+  buttonBg: i.app,
+  buttonBorder: e.medium,
+  booleanBg: e.mediumlight,
+  booleanSelectedBg: e.lightest,
+  inputBg: e.lightest,
+  inputBorder: e.border,
+  inputTextColor: e.darkest,
+  inputBorderRadius: 4
+}, s = b;
+
+// src/theming/utils.ts
+import { logger as f } from "storybook/internal/client-logger";
+import { global as y } from "@storybook/global";
+import { darken as B, lighten as x, rgba as m } from "polished";
+var { window: l } = y;
+var k = /* @__PURE__ */ o((r) => typeof r != "string" ? (f.warn(
+  `Color passed to theme object should be a string. Instead ${r}(${typeof r}) was passed.`
+), !1) : !0, "isColorString"), T = /* @__PURE__ */ o((r) => !/(gradient|var|calc)/.test(r), "isValidColorForPolished"), S = /* @__PURE__ */ o(
+(r, t) => r === "darken" ? m(`${B(1, t)}`, 0.95) : r === "lighten" ? m(`${x(1, t)}`, 0.95) : t, "applyPolished"), c = /* @__PURE__ */ o((r) => (t) => {
+  if (!k(t) || !T(t))
+    return t;
+  try {
+    return S(r, t);
+  } catch {
+    return t;
+  }
+}, "colorFactory"), I = c("lighten"), N = c("darken"), F = /* @__PURE__ */ o(() => !l || !l.matchMedia ? "light" : l.matchMedia("(prefers-co\
+lor-scheme: dark)").matches ? "dark" : "light", "getPreferredColorScheme");
+
+// src/theming/create.ts
+var d = {
+  light: s,
+  dark: g,
+  normal: s
+}, p = F(), W = /* @__PURE__ */ o((r = { base: p }, t) => {
+  let n = {
+    ...d[p],
+    ...d[r.base] || {},
+    ...r,
+    base: d[r.base] ? r.base : p
+  };
+  return {
+    ...t,
+    ...n,
+    barSelectedColor: r.barSelectedColor || n.colorSecondary
+  };
+}, "create");
+export {
+  W as create,
+  d as themes
+};