@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

package/src/css/varNames.ts

@@ -1,3 +1,4 @@
+import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
 import {
   AVATAR_SIZE,
   AvatarSize,
@@ -11,10 +12,14 @@ import {
   type FontTextSize,
   RADIUS,
   Radius,
+  SHADOW,
+  Shadow,
   SPACE,
   type Space,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_STATE_TONES,
   type ThemeColorCardToneKey as CardTone,
+  ThemeColorCardToneKey,
   type ThemeColorSchemeKey as Scheme,
 } from '@sanity/ui/theme'
 
@@ -26,6 +31,7 @@ import {
   type VarNames,
 } from './types'
 
+/** @public */
 export const varNames: VarNames = {
   avatar: {
     distance: `--avatar-distance`,
@@ -47,11 +53,22 @@ export const varNames: VarNames = {
       {} as Record<AvatarSize, {distance: VarName; size: VarName}>,
     ),
   },
+  button: {
+    border: {
+      width: `--button-border-width`,
+    },
+    focusRing: {
+      offset: `--button-focus-ring-offset`,
+      width: `--button-focus-ring-width`,
+    },
+  },
+  card: {
+    shadow: {
+      outline: `--card-shadow-outline`,
+    },
+  },
   color: {
     // card scope
-    accent: {
-      fg: `--color-accent-fg`,
-    },
     avatar: {
       bg: `--color-avatar-bg`,
       fg: `--color-avatar-fg`,
@@ -169,36 +186,32 @@ export const varNames: VarNames = {
     tinted: buildColorVariantVarNames({variant: 'tinted'}),
 
     // tone scopes
-    transparent: buildColorCardVarNames({tone: 'transparent'}),
-    default: buildColorCardVarNames({tone: 'default'}),
-    neutral: buildColorCardVarNames({tone: 'neutral'}),
-    primary: buildColorCardVarNames({tone: 'primary'}),
-    suggest: buildColorCardVarNames({tone: 'suggest'}),
-    positive: buildColorCardVarNames({tone: 'positive'}),
-    caution: buildColorCardVarNames({tone: 'caution'}),
-    critical: buildColorCardVarNames({tone: 'critical'}),
-
-    // scheme scope
-    dark: {
-      transparent: buildColorCardVarNames({scheme: 'dark', tone: 'transparent'}),
-      default: buildColorCardVarNames({scheme: 'dark', tone: 'default'}),
-      neutral: buildColorCardVarNames({scheme: 'dark', tone: 'neutral'}),
-      primary: buildColorCardVarNames({scheme: 'dark', tone: 'primary'}),
-      suggest: buildColorCardVarNames({scheme: 'dark', tone: 'neutral'}),
-      positive: buildColorCardVarNames({scheme: 'dark', tone: 'positive'}),
-      caution: buildColorCardVarNames({scheme: 'dark', tone: 'caution'}),
-      critical: buildColorCardVarNames({scheme: 'dark', tone: 'critical'}),
-    },
-    light: {
-      transparent: buildColorCardVarNames({scheme: 'light', tone: 'transparent'}),
-      default: buildColorCardVarNames({scheme: 'light', tone: 'default'}),
-      neutral: buildColorCardVarNames({scheme: 'light', tone: 'neutral'}),
-      primary: buildColorCardVarNames({scheme: 'light', tone: 'primary'}),
-      suggest: buildColorCardVarNames({scheme: 'light', tone: 'suggest'}),
-      positive: buildColorCardVarNames({scheme: 'light', tone: 'positive'}),
-      caution: buildColorCardVarNames({scheme: 'light', tone: 'caution'}),
-      critical: buildColorCardVarNames({scheme: 'light', tone: 'critical'}),
-    },
+    ...THEME_COLOR_CARD_TONES.reduce(
+      (acc, tone) => {
+        acc[tone] = buildColorCardVarNames({tone})
+
+        return acc
+      },
+      {} as Record<ThemeColorCardToneKey, ColorCardVarNames>,
+    ),
+
+    // scheme scopes
+    dark: THEME_COLOR_CARD_TONES.reduce(
+      (acc, tone) => {
+        acc[tone] = buildColorCardVarNames({scheme: 'dark', tone})
+
+        return acc
+      },
+      {} as Record<ThemeColorCardToneKey, ColorCardVarNames>,
+    ),
+    light: THEME_COLOR_CARD_TONES.reduce(
+      (acc, tone) => {
+        acc[tone] = buildColorCardVarNames({scheme: 'light', tone})
+
+        return acc
+      },
+      {} as Record<ThemeColorCardToneKey, ColorCardVarNames>,
+    ),
   },
   container: {
     0: `--container-0`,
@@ -211,6 +224,7 @@ export const varNames: VarNames = {
   font: {
     code: {
       family: `--font-code-family`,
+      featureSettings: `--font-code-feature-settings`,
       sizes: FONT_CODE_SIZE.reduce(
         (acc, size) => {
           return {
@@ -227,7 +241,7 @@ export const varNames: VarNames = {
         },
         {} as Record<FontCodeSize, FontSizeVarNames>,
       ),
-      weight: {
+      weights: {
         regular: `--font-code-weight-regular`,
         medium: `--font-code-weight-medium`,
         semibold: `--font-code-weight-semibold`,
@@ -236,6 +250,7 @@ export const varNames: VarNames = {
     },
     heading: {
       family: `--font-heading-family`,
+      featureSettings: `--font-heading-feature-settings`,
       sizes: FONT_HEADING_SIZE.reduce(
         (acc, size) => {
           return {
@@ -252,7 +267,7 @@ export const varNames: VarNames = {
         },
         {} as Record<FontHeadingSize, FontSizeVarNames>,
       ),
-      weight: {
+      weights: {
         regular: `--font-heading-weight-regular`,
         medium: `--font-heading-weight-medium`,
         semibold: `--font-heading-weight-semibold`,
@@ -261,6 +276,7 @@ export const varNames: VarNames = {
     },
     label: {
       family: `--font-label-family`,
+      featureSettings: `--font-label-feature-settings`,
       sizes: FONT_LABEL_SIZE.reduce(
         (acc, size) => {
           return {
@@ -277,7 +293,7 @@ export const varNames: VarNames = {
         },
         {} as Record<FontLabelSize, FontSizeVarNames>,
       ),
-      weight: {
+      weights: {
         regular: `--font-label-weight-regular`,
         medium: `--font-label-weight-medium`,
         semibold: `--font-label-weight-semibold`,
@@ -286,6 +302,7 @@ export const varNames: VarNames = {
     },
     text: {
       family: `--font-text-family`,
+      featureSettings: `--font-text-feature-settings`,
       sizes: FONT_TEXT_SIZE.reduce(
         (acc, size) => {
           return {
@@ -302,7 +319,7 @@ export const varNames: VarNames = {
         },
         {} as Record<FontTextSize, FontSizeVarNames>,
       ),
-      weight: {
+      weights: {
         regular: `--font-text-weight-regular`,
         medium: `--font-text-weight-medium`,
         semibold: `--font-text-weight-semibold`,
@@ -311,12 +328,59 @@ export const varNames: VarNames = {
     },
   },
   input: {
+    border: {
+      width: `--input-border-width`,
+    },
+
+    checkbox: {
+      focusRing: {
+        offset: `--input-checkbox-focus-ring-offset`,
+        width: `--input-checkbox-focus-ring-width`,
+      },
+      size: `--input-checkbox-size`,
+    },
+
+    radio: {
+      focusRing: {
+        offset: `--input-radio-focus-ring-offset`,
+        width: `--input-radio-focus-ring-width`,
+      },
+      markSize: `--input-radio-mark-size`,
+      size: `--input-radio-size`,
+    },
+
+    select: {
+      focusRing: {
+        offset: `--input-select-focus-ring-offset`,
+        width: `--input-select-focus-ring-width`,
+      },
+    },
+
+    switch: {
+      focusRing: {
+        offset: `--input-switch-focus-ring-offset`,
+        width: `--input-switch-focus-ring-width`,
+      },
+      height: `--input-switch-height`,
+      padding: `--input-switch-padding`,
+      transitionDurationMs: `--input-switch-transition-duration-ms`,
+      transitionTimingFunction: `--input-switch-transition-timing-function`,
+      width: `--input-switch-width`,
+    },
+
+    text: {
+      focusRing: {
+        offset: `--input-text-focus-ring-offset`,
+        width: `--input-text-focus-ring-width`,
+      },
+    },
+
     fontSize: `--input-font-size`,
+
     lineHeight: `--input-line-height`,
     letterSpacing: `--input-letter-spacing`,
     ascenderHeight: `--input-ascender-height`,
     descenderHeight: `--input-descender-height`,
-    // capHeight: `--input-cap-height`,
 
     gap: `--input-gap`,
     padding: `--input-padding`,
@@ -324,120 +388,143 @@ export const varNames: VarNames = {
   radius: Object.fromEntries(
     RADIUS.map((radius) => [radius, `--radius-${radius}` as VarName]),
   ) as Record<Radius, VarName>,
+  shadow: Object.fromEntries(
+    SHADOW.map((shadow) => [
+      shadow,
+      {
+        umbra: `--shadow-${shadow}-umbra`,
+        penumbra: `--shadow-${shadow}-penumbra`,
+        ambient: `--shadow-${shadow}-ambient`,
+      },
+    ]),
+  ) as Record<Shadow, {umbra: VarName; penumbra: VarName; ambient: VarName}>,
   space: Object.fromEntries(
     SPACE.map((space) => [space, `--space-${String(space).replace('.', '_')}` as VarName]),
   ) as Record<Space, VarName>,
+
+  // color
+  black: `--black`,
+  white: `--white`,
+  ...COLOR_HUES.reduce(
+    (acc, hue) => {
+      const tints = {} as Record<ColorTintKey, VarName>
+
+      for (const tint of COLOR_TINTS) {
+        tints[tint] = `--${hue}-${tint}`
+      }
+
+      acc[hue] = tints
+
+      return acc
+    },
+    {} as Record<ColorHueKey, Record<ColorTintKey, VarName>>,
+  ),
 } as const
 
 function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): ColorCardVarNames {
   const {scheme, tone} = props
 
-  const sourcePrefix = scheme
-    ? (`--color-${scheme}-${tone}` as const)
-    : (`--color-${tone}` as const)
+  const prefix = scheme ? (`--color-${scheme}-${tone}` as const) : (`--color-${tone}` as const)
 
   return {
-    accent: {
-      fg: `${sourcePrefix}-accent-fg`,
-    },
     avatar: {
       gray: {
-        bg: `${sourcePrefix}-avatar-gray-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`,
+        bg: `${prefix}-avatar-gray-bg`,
+        fg: `${prefix}-avatar-gray-fg`,
       },
       blue: {
-        bg: `${sourcePrefix}-avatar-blue-bg`,
-        fg: `${sourcePrefix}-avatar-blue-fg`,
+        bg: `${prefix}-avatar-blue-bg`,
+        fg: `${prefix}-avatar-blue-fg`,
       },
       purple: {
-        bg: `${sourcePrefix}-avatar-purple-bg`,
-        fg: `${sourcePrefix}-avatar-purple-fg`,
+        bg: `${prefix}-avatar-purple-bg`,
+        fg: `${prefix}-avatar-purple-fg`,
       },
       magenta: {
-        bg: `${sourcePrefix}-avatar-magenta-bg`,
-        fg: `${sourcePrefix}-avatar-magenta-fg`,
+        bg: `${prefix}-avatar-magenta-bg`,
+        fg: `${prefix}-avatar-magenta-fg`,
       },
       red: {
-        bg: `${sourcePrefix}-avatar-red-bg`,
-        fg: `${sourcePrefix}-avatar-red-fg`,
+        bg: `${prefix}-avatar-red-bg`,
+        fg: `${prefix}-avatar-red-fg`,
       },
       orange: {
-        bg: `${sourcePrefix}-avatar-orange-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`,
+        bg: `${prefix}-avatar-orange-bg`,
+        fg: `${prefix}-avatar-gray-fg`,
       },
       yellow: {
-        bg: `${sourcePrefix}-avatar-yellow-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`,
+        bg: `${prefix}-avatar-yellow-bg`,
+        fg: `${prefix}-avatar-yellow-fg`,
       },
       green: {
-        bg: `${sourcePrefix}-avatar-green-bg`,
-        fg: `${sourcePrefix}-avatar-green-fg`,
+        bg: `${prefix}-avatar-green-bg`,
+        fg: `${prefix}-avatar-green-fg`,
       },
       cyan: {
-        bg: `${sourcePrefix}-avatar-cyan-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`,
+        bg: `${prefix}-avatar-cyan-bg`,
+        fg: `${prefix}-avatar-yellow-fg`,
       },
     },
-    backdrop: `${sourcePrefix}-backdrop`,
+    backdrop: `${prefix}-backdrop`,
     code: {
-      bg: `${sourcePrefix}-code-bg`,
-      fg: `${sourcePrefix}-code-fg`,
+      bg: `${prefix}-code-bg`,
+      fg: `${prefix}-code-fg`,
       token: {
-        atrule: `${sourcePrefix}-code-token-atrule`,
-        attrName: `${sourcePrefix}-code-token-attr-name`,
-        attrValue: `${sourcePrefix}-code-token-attr-value`,
-        attribute: `${sourcePrefix}-code-token-attribute`,
-        boolean: `${sourcePrefix}-code-token-boolean`,
-        builtin: `${sourcePrefix}-code-token-builtin`,
-        cdata: `${sourcePrefix}-code-token-cdata`,
-        char: `${sourcePrefix}-code-token-char`,
-        class: `${sourcePrefix}-code-token-class`,
-        className: `${sourcePrefix}-code-token-class-name`,
-        comment: `${sourcePrefix}-code-token-comment`,
-        constant: `${sourcePrefix}-code-token-constant`,
-        deleted: `${sourcePrefix}-code-token-deleted`,
-        doctype: `${sourcePrefix}-code-token-doctype`,
-        entity: `${sourcePrefix}-code-token-entity`,
-        function: `${sourcePrefix}-code-token-function`,
-        hexcode: `${sourcePrefix}-code-token-hexcode`,
-        id: `${sourcePrefix}-code-token-id`,
-        important: `${sourcePrefix}-code-token-important`,
-        inserted: `${sourcePrefix}-code-token-inserted`,
-        keyword: `${sourcePrefix}-code-token-keyword`,
-        number: `${sourcePrefix}-code-token-number`,
-        operator: `${sourcePrefix}-code-token-operator`,
-        prolog: `${sourcePrefix}-code-token-prolog`,
-        property: `${sourcePrefix}-code-token-property`,
-        pseudoClass: `${sourcePrefix}-code-token-pseudo-class`,
-        pseudoElement: `${sourcePrefix}-code-token-pseudo-element`,
-        punctuation: `${sourcePrefix}-code-token-punctuation`,
-        regex: `${sourcePrefix}-code-token-regex`,
-        selector: `${sourcePrefix}-code-token-selector`,
-        string: `${sourcePrefix}-code-token-string`,
-        symbol: `${sourcePrefix}-code-token-symbol`,
-        tag: `${sourcePrefix}-code-token-tag`,
-        unit: `${sourcePrefix}-code-token-unit`,
-        url: `${sourcePrefix}-code-token-url`,
-        variable: `${sourcePrefix}-code-token-variable`,
+        atrule: `${prefix}-code-token-atrule`,
+        attrName: `${prefix}-code-token-attr-name`,
+        attrValue: `${prefix}-code-token-attr-value`,
+        attribute: `${prefix}-code-token-attribute`,
+        boolean: `${prefix}-code-token-boolean`,
+        builtin: `${prefix}-code-token-builtin`,
+        cdata: `${prefix}-code-token-cdata`,
+        char: `${prefix}-code-token-char`,
+        class: `${prefix}-code-token-class`,
+        className: `${prefix}-code-token-class-name`,
+        comment: `${prefix}-code-token-comment`,
+        constant: `${prefix}-code-token-constant`,
+        deleted: `${prefix}-code-token-deleted`,
+        doctype: `${prefix}-code-token-doctype`,
+        entity: `${prefix}-code-token-entity`,
+        function: `${prefix}-code-token-function`,
+        hexcode: `${prefix}-code-token-hexcode`,
+        id: `${prefix}-code-token-id`,
+        important: `${prefix}-code-token-important`,
+        inserted: `${prefix}-code-token-inserted`,
+        keyword: `${prefix}-code-token-keyword`,
+        number: `${prefix}-code-token-number`,
+        operator: `${prefix}-code-token-operator`,
+        prolog: `${prefix}-code-token-prolog`,
+        property: `${prefix}-code-token-property`,
+        pseudoClass: `${prefix}-code-token-pseudo-class`,
+        pseudoElement: `${prefix}-code-token-pseudo-element`,
+        punctuation: `${prefix}-code-token-punctuation`,
+        regex: `${prefix}-code-token-regex`,
+        selector: `${prefix}-code-token-selector`,
+        string: `${prefix}-code-token-string`,
+        symbol: `${prefix}-code-token-symbol`,
+        tag: `${prefix}-code-token-tag`,
+        unit: `${prefix}-code-token-unit`,
+        url: `${prefix}-code-token-url`,
+        variable: `${prefix}-code-token-variable`,
       },
     },
-    focusRing: `${sourcePrefix}-focus-ring`,
+    focusRing: `${prefix}-focus-ring`,
     link: {
-      fg: `${sourcePrefix}-link-fg`,
+      fg: `${prefix}-link-fg`,
     },
     muted: {
-      bg: `${sourcePrefix}-muted-bg`,
-      fg: `${sourcePrefix}-muted-fg`,
+      bg: `${prefix}-muted-bg`,
+      fg: `${prefix}-muted-fg`,
     },
     shadow: {
-      outline: `${sourcePrefix}-shadow-outline`,
-      umbra: `${sourcePrefix}-shadow-umbra`,
-      penumbra: `${sourcePrefix}-shadow-penumbra`,
-      ambient: `${sourcePrefix}-shadow-ambient`,
+      outline: `${prefix}-shadow-outline`,
+      umbra: `${prefix}-shadow-umbra`,
+      penumbra: `${prefix}-shadow-penumbra`,
+      ambient: `${prefix}-shadow-ambient`,
     },
     skeleton: {
-      from: `${sourcePrefix}-skeleton-from`,
-      to: `${sourcePrefix}-skeleton-to`,
+      from: `${prefix}-skeleton-from`,
+      to: `${prefix}-skeleton-to`,
     },
 
     solid: buildColorVariantVarNames({scheme, tone, variant: 'solid'}),
@@ -452,7 +539,7 @@ function buildColorVariantVarNames(options: {
 }): ColorVariantVarNames {
   const {scheme, tone, variant} = options
 
-  const _prefix =
+  const prefix =
     scheme && tone
       ? (`--color-${scheme}-${tone}-${variant}` as const)
       : tone
@@ -461,30 +548,30 @@ function buildColorVariantVarNames(options: {
 
   const vars = {
     bg: {
-      0: `${_prefix}-bg-0`,
-      1: `${_prefix}-bg-1`,
-      2: `${_prefix}-bg-2`,
-      3: `${_prefix}-bg-3`,
-      4: `${_prefix}-bg-4`,
+      0: `${prefix}-bg-0`,
+      1: `${prefix}-bg-1`,
+      2: `${prefix}-bg-2`,
+      3: `${prefix}-bg-3`,
+      4: `${prefix}-bg-4`,
     },
     border: {
-      0: `${_prefix}-border-0`,
-      1: `${_prefix}-border-1`,
-      2: `${_prefix}-border-2`,
-      3: `${_prefix}-border-3`,
-      4: `${_prefix}-border-4`,
+      0: `${prefix}-border-0`,
+      1: `${prefix}-border-1`,
+      2: `${prefix}-border-2`,
+      3: `${prefix}-border-3`,
+      4: `${prefix}-border-4`,
     },
     fg: {
-      0: `${_prefix}-fg-0`,
-      1: `${_prefix}-fg-1`,
-      2: `${_prefix}-fg-2`,
-      3: `${_prefix}-fg-3`,
-      4: `${_prefix}-fg-4`,
+      0: `${prefix}-fg-0`,
+      1: `${prefix}-fg-1`,
+      2: `${prefix}-fg-2`,
+      3: `${prefix}-fg-3`,
+      4: `${prefix}-fg-4`,
     },
   } as ColorVariantVarNames
 
   for (const elementTone of THEME_COLOR_STATE_TONES) {
-    const prefix =
+    const _prefix =
       scheme && tone
         ? (`--color-${scheme}-${tone}-${variant}-${elementTone}` as const)
         : tone
@@ -493,25 +580,25 @@ function buildColorVariantVarNames(options: {
 
     vars[elementTone] = {
       bg: {
-        0: `${prefix}-bg-0`,
-        1: `${prefix}-bg-1`,
-        2: `${prefix}-bg-2`,
-        3: `${prefix}-bg-3`,
-        4: `${prefix}-bg-4`,
+        0: `${_prefix}-bg-0`,
+        1: `${_prefix}-bg-1`,
+        2: `${_prefix}-bg-2`,
+        3: `${_prefix}-bg-3`,
+        4: `${_prefix}-bg-4`,
       },
       border: {
-        0: `${prefix}-border-0`,
-        1: `${prefix}-border-1`,
-        2: `${prefix}-border-2`,
-        3: `${prefix}-border-3`,
-        4: `${prefix}-border-4`,
+        0: `${_prefix}-border-0`,
+        1: `${_prefix}-border-1`,
+        2: `${_prefix}-border-2`,
+        3: `${_prefix}-border-3`,
+        4: `${_prefix}-border-4`,
       },
       fg: {
-        0: `${prefix}-fg-0`,
-        1: `${prefix}-fg-1`,
-        2: `${prefix}-fg-2`,
-        3: `${prefix}-fg-3`,
-        4: `${prefix}-fg-4`,
+        0: `${_prefix}-fg-0`,
+        1: `${_prefix}-fg-1`,
+        2: `${_prefix}-fg-2`,
+        3: `${_prefix}-fg-3`,
+        4: `${_prefix}-fg-4`,
       },
     }
   }