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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.4",
+  "version": "3.0.0-static.5",
   "keywords": [
     "sanity",
     "ui",

package/src/css/aspects/flex/flexJustify.style.ts

@@ -6,8 +6,8 @@ const util: StyleRules = {}
 _responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
 _responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
 _responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
-_responsiveRule(util, 'flex-justify-between', {justifyContent: 'space-between'})
-_responsiveRule(util, 'flex-justify-around', {justifyContent: 'space-around'})
-_responsiveRule(util, 'flex-justify-evenly', {justifyContent: 'space-evenly'})
+_responsiveRule(util, 'flex-justify-space-between', {justifyContent: 'space-between'})
+_responsiveRule(util, 'flex-justify-space-around', {justifyContent: 'space-around'})
+_responsiveRule(util, 'flex-justify-space-evenly', {justifyContent: 'space-evenly'})
 
 export const flexJustifyStyle: Style = {layers: {util}}

package/src/css/aspects/grid/types.ts

@@ -15,9 +15,9 @@ export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
  */
 export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */
 export interface GridStyleProps {

package/src/css/index.ts

@@ -1,4 +1,4 @@
-export * from '../theme/versioning/v3_v2'
+export * from './aspects'
 export * from './compile/compilePalette'
 export * from './compile/compileSystem'
 export * from './compile/compileTheme'
@@ -27,13 +27,13 @@ export * from './primitives/popover'
 export * from './primitives/radio'
 export * from './primitives/select'
 export * from './primitives/spinner'
+export * from './primitives/stack'
 export * from './primitives/switch'
 export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
 export * from './primitives/tooltip'
 export * from './scopeClassName'
-export * from './aspects'
 export * from './types'
 export * from './util'
 export * from './utils/srOnly'

package/src/css/primitives/button/button.style.ts

@@ -24,6 +24,8 @@ const primitive: StyleRules = {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
     'boxShadow': 'var(--button-box-shadow)',
+    'alignItems': 'center',
+    // 'justifyContent': 'center',
 
     '@nest': {
       '&::-moz-focus-inner': {
@@ -101,28 +103,28 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   // mode: ghost
   primitive[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
     [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[1],
+    [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
     '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
 
     '@nest': {
       '&:not([data-disabled]):hover': {
         [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.border]: tinted.border[1],
         [varNames.color.fg]: tinted.fg[1],
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled]):active': {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled])[data-selected]': {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },

package/src/css/primitives/stack/index.ts

@@ -0,0 +1 @@
+export * from './stack'

package/src/css/primitives/stack/stack.style.ts

@@ -0,0 +1,9 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.stack': {
+    gridTemplateColumns: 'minmax(0, 1fr)',
+  },
+}
+
+export const stackStyle: Style = {layers: {primitive}}

package/src/css/primitives/stack/stack.ts

@@ -0,0 +1,6 @@
+import {_comp} from '../../_comp'
+
+/** @public */
+export function stack(): string | undefined {
+  return _comp('stack')
+}

package/src/css/system.style.ts

@@ -56,6 +56,7 @@ import {popoverStyle} from './primitives/popover/popover.style'
 import {radioStyle} from './primitives/radio/radio.style'
 import {selectStyle} from './primitives/select/select.style'
 import {spinnerStyle} from './primitives/spinner/spinner.style'
+import {stackStyle} from './primitives/stack/stack.style'
 import {switchStyle} from './primitives/switch/switch.style'
 import {textStyle} from './primitives/text/text.style'
 import {textAreaStyle} from './primitives/textArea/textArea.style'
@@ -136,6 +137,7 @@ export const systemStyle: Style = _mergeStyles([
   radioStyle,
   selectStyle,
   spinnerStyle,
+  stackStyle,
   switchStyle,
   textAreaStyle,
   textInputStyle,

package/src/theme/v3/defaults.ts

@@ -136,7 +136,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
               4: ['800', '300 50%'],
             },
             border: {
-              0: ['900', '100'],
+              0: ['900', '300 40%'],
               4: ['700', '300'],
             },
             fg: {

package/src/ui/primitives/box/box.tsx

@@ -32,6 +32,9 @@ export const Box = forwardRef(function Box(
   const {
     align,
     as: As = 'div',
+    autoCols,
+    autoFlow,
+    autoRows,
     border,
     borderTop,
     borderRight,
@@ -93,6 +96,9 @@ export const Box = forwardRef(function Box(
         className,
         box({
           align,
+          autoCols,
+          autoFlow,
+          autoRows,
           border,
           borderTop,
           borderRight,

package/src/ui/primitives/button/button.tsx

@@ -113,11 +113,12 @@ export const Button = forwardRef(function Button(
     >
       {Boolean(loading) && (
         <Box
+          align="center"
           as="span"
           className={buttonLoadingBox()}
           display="flex"
           flex={1}
-          justify={justify}
+          justify="center"
           width="fill"
         >
           <Spinner size={fontSize} />
@@ -126,8 +127,8 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box
+          // align={align}
           as="span"
-          align={align}
           direction={direction}
           display="flex"
           flex={1}
@@ -142,8 +143,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
+          // width="fill"
+          // wrap={wrap}
         >
           {IconComponent && (
             <Text as="span" flex="none" muted size={fontSize}>
@@ -177,15 +178,15 @@ export const Button = forwardRef(function Button(
 
       {children && (
         <Box
-          align={align}
+          // align={align}
           as="span"
-          direction={direction}
-          display="flex"
+          // direction={direction}
+          // display="flex"
           flex={1}
           gap={gap}
           gapX={gapX}
           gapY={gapY}
-          justify={justify}
+          // justify={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -193,8 +194,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
+          // width="fill"
+          // wrap={wrap}
         >
           {children}
         </Box>

package/src/ui/primitives/stack/stack.tsx

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '@sanity/ui/css'
+import {composeClassNames, ResponsiveProp, stack} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {ForwardedRef, forwardRef} from 'react'
 
@@ -8,7 +8,11 @@ import {Box, BoxProps} from '../box'
 /**
  * @public
  */
-export interface StackProps extends Omit<BoxProps, 'direction' | 'display' | 'gapX' | 'gapY'> {
+export interface StackProps
+  extends Omit<
+    BoxProps,
+    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
+  > {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
@@ -22,15 +26,16 @@ export const Stack = forwardRef(function Stack(
   props: Props<StackProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, gap, space, ...restProps} = props
+  const {as, className, gap, space, ...restProps} = props
 
   return (
     <Box
       data-ui="Stack"
       {...restProps}
       as={as}
-      direction="column"
-      display="flex"
+      autoRows="min"
+      className={composeClassNames(className, stack())}
+      display="grid"
       gap={gap ?? space}
       ref={ref}
     />

package/dist/_chunks-cjs/v3_v2.js

@@ -1,251 +0,0 @@
-"use strict";
-var color = require("@sanity/color");
-const 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.COLOR_HUES;
-function themeColor_v3_v2(options) {
-  const {
-    color: color2,
-    dark
-  } = options;
-  return {
-    _blend: "screen",
-    _dark: dark,
-    ...buildColorState({
-      cardColor: color2,
-      state: "enabled",
-      tone: "default",
-      variant: "tinted"
-    }),
-    backdrop: color2.backdrop,
-    button: THEME_COLOR_BUTTON_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_STATE_TONES.reduce((tones, tone) => (tones[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
-      cardColor: color2,
-      state,
-      tone,
-      variant: mode === "default" ? "solid" : "tinted"
-    }), mode === "bleed" && (states[state].border = "transparent"), states), {}), tones), {}), modes), {}),
-    focusRing: color2.focusRing,
-    input: THEME_COLOR_INPUT_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_INPUT_STATES.reduce((states, state) => (states[state] = buildInputState(color2.variant.tinted.default), states), {}), modes), {}),
-    selectable: THEME_COLOR_STATE_TONES.reduce((tones, tone) => (tones[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
-      cardColor: color2,
-      // cardVars: vars,
-      state,
-      tone,
-      variant: "tinted"
-    }), states), {}), tones), {}),
-    shadow: color2.shadow,
-    syntax: color2.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(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, color2 = cardColor.variant[variant][tone], shades = stateShades[state];
-  return {
-    accent: {
-      fg: color2.fg[4]
-    },
-    avatar: cardColor.avatar,
-    badge: THEME_COLOR_STATE_TONES.reduce((tones, tone2) => (tones[tone2] = {
-      bg: mix(color2.bg, 1),
-      fg: mix(color2.fg, 1),
-      dot: mix(color2.fg, 3),
-      icon: mix(color2.fg, 3)
-    }, tones), {}),
-    bg: mix(color2.bg, shades.bg[0]),
-    border: mix(color2.border, shades.border[0]),
-    fg: mix(color2.fg, shades.fg[0]),
-    code: {
-      bg: mix(color2.bg, shades.bg[1]),
-      fg: mix(color2.fg, shades.fg[2])
-    },
-    icon: mix(color2.fg, shades.fg[2]),
-    kbd: {
-      bg: mix(color2.bg, 0),
-      fg: mix(color2.fg, 0),
-      border: mix(color2.bg, 0)
-    },
-    link: {
-      fg: mix(color2.fg, shades.fg[2])
-    },
-    muted: {
-      bg: mix(color2.bg, shades.bg[1]),
-      fg: mix(color2.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
-  };
-}
-exports.THEME_COLOR_AVATAR_COLORS = THEME_COLOR_AVATAR_COLORS;
-exports.THEME_COLOR_BLEND_MODES = THEME_COLOR_BLEND_MODES;
-exports.THEME_COLOR_BUTTON_MODES = THEME_COLOR_BUTTON_MODES;
-exports.THEME_COLOR_CARD_TONES = THEME_COLOR_CARD_TONES;
-exports.THEME_COLOR_INPUT_MODES = THEME_COLOR_INPUT_MODES;
-exports.THEME_COLOR_INPUT_STATES = THEME_COLOR_INPUT_STATES;
-exports.THEME_COLOR_SCHEMES = THEME_COLOR_SCHEMES;
-exports.THEME_COLOR_STATES = THEME_COLOR_STATES;
-exports.THEME_COLOR_STATE_TONES = THEME_COLOR_STATE_TONES;
-exports.v3_v2 = v3_v2;
-//# sourceMappingURL=v3_v2.js.map

package/dist/_chunks-cjs/v3_v2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"v3_v2.js","sources":["../../src/theme/v2/color/_constants.ts","../../src/theme/versioning/themeColor_v3_v2.ts","../../src/theme/versioning/v3_v2.ts"],"sourcesContent":["import {COLOR_HUES} from '@sanity/color'\n\n/** @public */\nexport const THEME_COLOR_SCHEMES = ['light', 'dark'] as const\n\n/** @public */\nexport const THEME_COLOR_BLEND_MODES = ['multiply', 'screen'] as const\n\n/** @public */\nexport const THEME_COLOR_CARD_TONES = [\n  'transparent',\n  'default',\n  'neutral',\n  'primary', // deprecated\n  'suggest',\n  'positive',\n  'caution',\n  'critical',\n] as const\n\n/** @public */\nexport const THEME_COLOR_STATE_TONES = [\n  'default',\n  'neutral',\n  'primary', // deprecated\n  'suggest',\n  'positive',\n  'caution',\n  'critical',\n] as const\n\n/** @public */\nexport const THEME_COLOR_STATES = ['enabled', 'hovered', 'pressed', 'selected', 'disabled'] as const\n\n/** @public */\nexport const THEME_COLOR_BUTTON_MODES = ['default', 'ghost', 'bleed'] as const\n\n/** @public */\nexport const THEME_COLOR_INPUT_MODES = ['default', 'invalid'] as const\n\n/** @public */\nexport const THEME_COLOR_INPUT_STATES = ['enabled', 'hovered', 'readOnly', 'disabled'] as const\n\n/** @public */\nexport const THEME_COLOR_AVATAR_COLORS = COLOR_HUES\n","import {\n  THEME_COLOR_BUTTON_MODES,\n  THEME_COLOR_INPUT_MODES,\n  THEME_COLOR_INPUT_STATES,\n  THEME_COLOR_STATE_TONES,\n  THEME_COLOR_STATES,\n  ThemeColorBadge_v2,\n  ThemeColorButton_v2,\n  ThemeColorButtonMode_v2,\n  ThemeColorButtonTone_v2,\n  ThemeColorCard_v2,\n  ThemeColorInput_v2,\n  ThemeColorInputMode_v2,\n  ThemeColorInputState_v2,\n  ThemeColorSelectable_v2,\n  ThemeColorSelectableTone_v2,\n  ThemeColorState_v2,\n  ThemeColorStateKey,\n  ThemeColorStateToneKey,\n} from '../v2'\nimport {ThemeColorCard_v3, ThemeColorElement, ThemeColorVariantKey} from '../v3'\n\nexport function themeColor_v3_v2(options: {\n  color: ThemeColorCard_v3\n  dark: boolean\n}): ThemeColorCard_v2 {\n  const {color, dark} = options\n\n  return {\n    _blend: 'screen',\n    _dark: dark,\n    ...buildColorState({\n      cardColor: color,\n      state: 'enabled',\n      tone: 'default',\n      variant: 'tinted',\n    }),\n    backdrop: color.backdrop,\n    button: THEME_COLOR_BUTTON_MODES.reduce<ThemeColorButton_v2>((modes, mode) => {\n      modes[mode] = THEME_COLOR_STATE_TONES.reduce<ThemeColorButtonMode_v2>((tones, tone) => {\n        tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorButtonTone_v2>((states, state) => {\n          states[state] = buildColorState({\n            cardColor: color,\n            state,\n            tone,\n            variant: mode === 'default' ? 'solid' : 'tinted',\n          })\n\n          if (mode === 'bleed') {\n            states[state].border = 'transparent'\n          }\n\n          return states\n        }, {} as ThemeColorButtonTone_v2)\n\n        return tones\n      }, {} as ThemeColorButtonMode_v2)\n\n      return modes\n    }, {} as ThemeColorButton_v2),\n    focusRing: color.focusRing,\n    input: THEME_COLOR_INPUT_MODES.reduce<ThemeColorInput_v2>((modes, mode) => {\n      modes[mode] = THEME_COLOR_INPUT_STATES.reduce<ThemeColorInputMode_v2>((states, state) => {\n        states[state] = buildInputState(color.variant.tinted.default)\n\n        return states\n      }, {} as ThemeColorInputMode_v2)\n\n      return modes\n    }, {} as ThemeColorInput_v2),\n    selectable: THEME_COLOR_STATE_TONES.reduce<ThemeColorSelectable_v2>((tones, tone) => {\n      tones[tone] = THEME_COLOR_STATES.reduce<ThemeColorSelectableTone_v2>((states, state) => {\n        states[state] = buildColorState({\n          cardColor: color,\n          // cardVars: vars,\n          state,\n          tone,\n          variant: 'tinted',\n        })\n\n        return states\n      }, {} as ThemeColorSelectableTone_v2)\n\n      return tones\n    }, {} as ThemeColorSelectable_v2),\n    shadow: color.shadow,\n    syntax: color.token,\n  }\n}\n\ntype ElementTokenIndex = 0 | 1 | 2 | 3 | 4\n\nconst stateShades: Record<\n  ThemeColorStateKey,\n  {\n    bg: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]\n    border: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]\n    fg: [ElementTokenIndex, ElementTokenIndex, ElementTokenIndex]\n  }\n> = {\n  enabled: {\n    bg: [0, 1, 2],\n    border: [0, 1, 2],\n    fg: [0, 1, 2],\n  },\n  hovered: {\n    bg: [1, 2, 3],\n    border: [1, 2, 3],\n    fg: [1, 2, 3],\n  },\n  pressed: {\n    bg: [2, 3, 4],\n    border: [2, 3, 4],\n    fg: [2, 3, 4],\n  },\n  selected: {\n    bg: [3, 4, 4],\n    border: [3, 4, 4],\n    fg: [3, 4, 4],\n  },\n  disabled: {\n    bg: [4, 4, 4],\n    border: [4, 4, 4],\n    fg: [4, 4, 4],\n  },\n}\n\nfunction mix(\n  tokens: {\n    0: string\n    4: string\n  },\n  index: ElementTokenIndex,\n) {\n  if (index === 0) {\n    return tokens[0]\n  }\n\n  if (index === 4) {\n    return tokens[4]\n  }\n\n  return `color-mix(in oklch, ${tokens[0]}, ${tokens[4]} ${index * 25}%)`\n}\n\nfunction buildColorState(options: {\n  cardColor: ThemeColorCard_v3\n  state: ThemeColorStateKey\n  tone: ThemeColorStateToneKey\n  variant: ThemeColorVariantKey\n}): ThemeColorState_v2 {\n  const {cardColor, state, tone, variant} = options\n  const color = cardColor.variant[variant][tone]\n\n  const shades = stateShades[state]\n\n  return {\n    accent: {\n      fg: color.fg[4],\n    },\n    avatar: cardColor.avatar,\n    badge: THEME_COLOR_STATE_TONES.reduce<ThemeColorBadge_v2>((tones, tone) => {\n      tones[tone] = {\n        bg: mix(color.bg, 1),\n        fg: mix(color.fg, 1),\n        dot: mix(color.fg, 3),\n        icon: mix(color.fg, 3),\n      }\n\n      return tones\n    }, {} as ThemeColorBadge_v2),\n    bg: mix(color.bg, shades.bg[0]),\n    border: mix(color.border, shades.border[0]),\n    fg: mix(color.fg, shades.fg[0]),\n    code: {\n      bg: mix(color.bg, shades.bg[1]),\n      fg: mix(color.fg, shades.fg[2]),\n    },\n    icon: mix(color.fg, shades.fg[2]),\n    kbd: {\n      bg: mix(color.bg, 0),\n      fg: mix(color.fg, 0),\n      border: mix(color.bg, 0),\n    },\n    link: {\n      fg: mix(color.fg, shades.fg[2]),\n    },\n    muted: {\n      bg: mix(color.bg, shades.bg[1]),\n      fg: mix(color.fg, shades.fg[2]),\n    },\n    skeleton: cardColor.skeleton,\n  }\n}\n\nfunction buildInputState(colorElement: ThemeColorElement): ThemeColorInputState_v2 {\n  return {\n    bg: colorElement.bg[0],\n    border: colorElement.bg[0],\n    fg: colorElement.fg[0],\n    muted: {\n      bg: colorElement.bg[0],\n    },\n    placeholder: colorElement.fg[0],\n  }\n}\n","// import {vars} from '@sanity/ui/css'\n\nimport {RootTheme_v2} from '../v2'\nimport {Theme_v3} from '../v3'\nimport {themeColor_v3_v2} from './themeColor_v3_v2'\n\nexport function v3_v2(theme_v3: Theme_v3): RootTheme_v2 {\n  return {\n    _version: 2,\n    avatar: theme_v3.avatar,\n    button: theme_v3.button,\n    card: theme_v3.card,\n    color: {\n      dark: {\n        transparent: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.transparent,\n          dark: true,\n          // vars: vars.color.dark.transparent,\n        }),\n        default: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.default,\n          dark: true,\n          // vars: vars.color.dark.default,\n        }),\n        neutral: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.neutral,\n          dark: true,\n          // vars: vars.color.dark.neutral,\n        }),\n        primary: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.primary,\n          dark: true,\n          // vars: vars.color.dark.primary,\n        }),\n        suggest: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.suggest,\n          dark: true,\n          // vars: vars.color.dark.suggest,\n        }),\n        positive: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.positive,\n          dark: true,\n          // vars: vars.color.dark.positive,\n        }),\n        caution: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.caution,\n          dark: true,\n          // vars: vars.color.dark.caution,\n        }),\n        critical: themeColor_v3_v2({\n          color: theme_v3.color.dark.card.critical,\n          dark: true,\n          // vars: vars.color.dark.critical,\n        }),\n      },\n      light: {\n        transparent: themeColor_v3_v2({\n          color: theme_v3.color.light.card.transparent,\n          dark: false,\n          // vars: vars.color.light.transparent,\n        }),\n        default: themeColor_v3_v2({\n          color: theme_v3.color.light.card.default,\n          dark: false,\n          // vars: vars.color.light.default,\n        }),\n        neutral: themeColor_v3_v2({\n          color: theme_v3.color.light.card.neutral,\n          dark: false,\n          // vars: vars.color.light.neutral,\n        }),\n        primary: themeColor_v3_v2({\n          color: theme_v3.color.light.card.primary,\n          dark: false,\n          // vars: vars.color.light.primary,\n        }),\n        suggest: themeColor_v3_v2({\n          color: theme_v3.color.light.card.suggest,\n          dark: false,\n          // vars: vars.color.light.suggest,\n        }),\n        positive: themeColor_v3_v2({\n          color: theme_v3.color.light.card.positive,\n          dark: false,\n          // vars: vars.color.light.positive,\n        }),\n        caution: themeColor_v3_v2({\n          color: theme_v3.color.light.card.caution,\n          dark: false,\n          // vars: vars.color.light.caution,\n        }),\n        critical: themeColor_v3_v2({\n          color: theme_v3.color.light.card.critical,\n          dark: false,\n          // vars: vars.color.light.critical,\n        }),\n      },\n    },\n    container: theme_v3.container,\n    font: theme_v3.font,\n    input: theme_v3.input,\n    layer: theme_v3.layer,\n    media: theme_v3.media,\n    radius: theme_v3.radius,\n    shadow: theme_v3.shadow,\n    space: theme_v3.space,\n  }\n}\n"],"names":["THEME_COLOR_SCHEMES","THEME_COLOR_BLEND_MODES","THEME_COLOR_CARD_TONES","THEME_COLOR_STATE_TONES","THEME_COLOR_STATES","THEME_COLOR_BUTTON_MODES","THEME_COLOR_INPUT_MODES","THEME_COLOR_INPUT_STATES","THEME_COLOR_AVATAR_COLORS","COLOR_HUES","themeColor_v3_v2","options","color","dark","_blend","_dark","buildColorState","cardColor","state","tone","variant","backdrop","button","reduce","modes","mode","tones","states","border","focusRing","input","buildInputState","tinted","default","selectable","shadow","syntax","token","stateShades","enabled","bg","fg","hovered","pressed","selected","disabled","mix","tokens","index","shades","accent","avatar","badge","dot","icon","code","kbd","link","muted","skeleton","colorElement","placeholder","v3_v2","theme_v3","_version","card","transparent","neutral","primary","suggest","positive","caution","critical","light","container","font","layer","media","radius","space"],"mappings":"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"}