@sanity/ui 3.0.0-static.4 → 3.0.0-static.5

package/dist/theme.mjs

@@ -1,18 +1,4 @@
-import { THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, THEME_COLOR_STATE_TONES, THEME_COLOR_AVATAR_COLORS, v3_v2, THEME_COLOR_STATES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES } from "./_chunks-es/v3_v2.mjs";
-import { THEME_COLOR_SCHEMES } from "./_chunks-es/v3_v2.mjs";
 import { COLOR_HUES, COLOR_TINTS } from "@sanity/color";
-function isColorBlendModeValue(str) {
-  return THEME_COLOR_BLEND_MODES.includes(str);
-}
-function isColorHueKey(str) {
-  return COLOR_HUES.includes(str);
-}
-function isColorTintKey(str) {
-  return COLOR_TINTS.includes(str);
-}
-function isColorButtonMode(str) {
-  return THEME_COLOR_BUTTON_MODES.includes(str);
-}
 const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
 function createSelectableTones(opts, base, dark, solid, muted) {
   return {
@@ -1447,7 +1433,39 @@ const defaultThemeConfig = {
       letterSpacing: 0
     }]
   }
-}, HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
+}, THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
+  "transparent",
+  "default",
+  "neutral",
+  "primary",
+  // deprecated
+  "suggest",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATE_TONES = [
+  "default",
+  "neutral",
+  "primary",
+  // deprecated
+  "suggest",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+function isColorBlendModeValue(str) {
+  return THEME_COLOR_BLEND_MODES.includes(str);
+}
+function isColorHueKey(str) {
+  return COLOR_HUES.includes(str);
+}
+function isColorTintKey(str) {
+  return COLOR_TINTS.includes(str);
+}
+function isColorButtonMode(str) {
+  return THEME_COLOR_BUTTON_MODES.includes(str);
+}
+const HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
 function parseColor$1(str) {
   let cursor = 0;
   const color = getColor();
@@ -1806,7 +1824,7 @@ const defaultTokens = {
               4: ["800", "300 50%"]
             },
             border: {
-              0: ["900", "100"],
+              0: ["900", "300 40%"],
               4: ["700", "300"]
             },
             fg: {
@@ -2153,6 +2171,224 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
+function themeColor_v3_v2(options) {
+  const {
+    color,
+    dark
+  } = options;
+  return {
+    _blend: "screen",
+    _dark: dark,
+    ...buildColorState({
+      cardColor: color,
+      state: "enabled",
+      tone: "default",
+      variant: "tinted"
+    }),
+    backdrop: color.backdrop,
+    button: THEME_COLOR_BUTTON_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
+      cardColor: color,
+      state,
+      tone,
+      variant: mode === "default" ? "solid" : "tinted"
+    }), mode === "bleed" && (states[state].border = "transparent"), states), {}), tones2), {}), modes), {}),
+    focusRing: color.focusRing,
+    input: THEME_COLOR_INPUT_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_INPUT_STATES.reduce((states, state) => (states[state] = buildInputState(color.variant.tinted.default), states), {}), modes), {}),
+    selectable: THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
+      cardColor: color,
+      // cardVars: vars,
+      state,
+      tone,
+      variant: "tinted"
+    }), states), {}), tones2), {}),
+    shadow: color.shadow,
+    syntax: color.token
+  };
+}
+const stateShades = {
+  enabled: {
+    bg: [0, 1, 2],
+    border: [0, 1, 2],
+    fg: [0, 1, 2]
+  },
+  hovered: {
+    bg: [1, 2, 3],
+    border: [1, 2, 3],
+    fg: [1, 2, 3]
+  },
+  pressed: {
+    bg: [2, 3, 4],
+    border: [2, 3, 4],
+    fg: [2, 3, 4]
+  },
+  selected: {
+    bg: [3, 4, 4],
+    border: [3, 4, 4],
+    fg: [3, 4, 4]
+  },
+  disabled: {
+    bg: [4, 4, 4],
+    border: [4, 4, 4],
+    fg: [4, 4, 4]
+  }
+};
+function mix$1(tokens, index) {
+  return index === 0 ? tokens[0] : index === 4 ? tokens[4] : `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`;
+}
+function buildColorState(options) {
+  const {
+    cardColor,
+    state,
+    tone,
+    variant
+  } = options, color = cardColor.variant[variant][tone], shades = stateShades[state];
+  return {
+    accent: {
+      fg: color.fg[4]
+    },
+    avatar: cardColor.avatar,
+    badge: THEME_COLOR_STATE_TONES.reduce((tones2, tone2) => (tones2[tone2] = {
+      bg: mix$1(color.bg, 1),
+      fg: mix$1(color.fg, 1),
+      dot: mix$1(color.fg, 3),
+      icon: mix$1(color.fg, 3)
+    }, tones2), {}),
+    bg: mix$1(color.bg, shades.bg[0]),
+    border: mix$1(color.border, shades.border[0]),
+    fg: mix$1(color.fg, shades.fg[0]),
+    code: {
+      bg: mix$1(color.bg, shades.bg[1]),
+      fg: mix$1(color.fg, shades.fg[2])
+    },
+    icon: mix$1(color.fg, shades.fg[2]),
+    kbd: {
+      bg: mix$1(color.bg, 0),
+      fg: mix$1(color.fg, 0),
+      border: mix$1(color.bg, 0)
+    },
+    link: {
+      fg: mix$1(color.fg, shades.fg[2])
+    },
+    muted: {
+      bg: mix$1(color.bg, shades.bg[1]),
+      fg: mix$1(color.fg, shades.fg[2])
+    },
+    skeleton: cardColor.skeleton
+  };
+}
+function buildInputState(colorElement) {
+  return {
+    bg: colorElement.bg[0],
+    border: colorElement.bg[0],
+    fg: colorElement.fg[0],
+    muted: {
+      bg: colorElement.bg[0]
+    },
+    placeholder: colorElement.fg[0]
+  };
+}
+function v3_v2(theme_v3) {
+  return {
+    _version: 2,
+    avatar: theme_v3.avatar,
+    button: theme_v3.button,
+    card: theme_v3.card,
+    color: {
+      dark: {
+        transparent: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.transparent,
+          dark: !0
+          // vars: vars.color.dark.transparent,
+        }),
+        default: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.default,
+          dark: !0
+          // vars: vars.color.dark.default,
+        }),
+        neutral: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.neutral,
+          dark: !0
+          // vars: vars.color.dark.neutral,
+        }),
+        primary: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.primary,
+          dark: !0
+          // vars: vars.color.dark.primary,
+        }),
+        suggest: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.suggest,
+          dark: !0
+          // vars: vars.color.dark.suggest,
+        }),
+        positive: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.positive,
+          dark: !0
+          // vars: vars.color.dark.positive,
+        }),
+        caution: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.caution,
+          dark: !0
+          // vars: vars.color.dark.caution,
+        }),
+        critical: themeColor_v3_v2({
+          color: theme_v3.color.dark.card.critical,
+          dark: !0
+          // vars: vars.color.dark.critical,
+        })
+      },
+      light: {
+        transparent: themeColor_v3_v2({
+          color: theme_v3.color.light.card.transparent,
+          dark: !1
+          // vars: vars.color.light.transparent,
+        }),
+        default: themeColor_v3_v2({
+          color: theme_v3.color.light.card.default,
+          dark: !1
+          // vars: vars.color.light.default,
+        }),
+        neutral: themeColor_v3_v2({
+          color: theme_v3.color.light.card.neutral,
+          dark: !1
+          // vars: vars.color.light.neutral,
+        }),
+        primary: themeColor_v3_v2({
+          color: theme_v3.color.light.card.primary,
+          dark: !1
+          // vars: vars.color.light.primary,
+        }),
+        suggest: themeColor_v3_v2({
+          color: theme_v3.color.light.card.suggest,
+          dark: !1
+          // vars: vars.color.light.suggest,
+        }),
+        positive: themeColor_v3_v2({
+          color: theme_v3.color.light.card.positive,
+          dark: !1
+          // vars: vars.color.light.positive,
+        }),
+        caution: themeColor_v3_v2({
+          color: theme_v3.color.light.card.caution,
+          dark: !1
+          // vars: vars.color.light.caution,
+        }),
+        critical: themeColor_v3_v2({
+          color: theme_v3.color.light.card.critical,
+          dark: !1
+          // vars: vars.color.light.critical,
+        })
+      }
+    },
+    container: theme_v3.container,
+    font: theme_v3.font,
+    input: theme_v3.input,
+    layer: theme_v3.layer,
+    media: theme_v3.media,
+    radius: theme_v3.radius,
+    shadow: theme_v3.shadow,
+    space: theme_v3.space
+  };
+}
 function buildTheme(_config) {
   const v3 = buildTheme_v3({
     v2: _config