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

package/src/css/varNames.ts

@@ -1,3 +1,4 @@
+import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
 import {
   AVATAR_SIZE,
   AvatarSize,
@@ -11,6 +12,8 @@ import {
   type FontTextSize,
   RADIUS,
   Radius,
+  SHADOW,
+  Shadow,
   SPACE,
   type Space,
   THEME_COLOR_STATE_TONES,
@@ -47,6 +50,20 @@ 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: {
@@ -211,6 +228,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 +245,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 +254,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 +271,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 +280,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 +297,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 +306,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 +323,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,7 +332,55 @@ 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`,
@@ -324,9 +393,37 @@ 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 {

package/src/css/vars.ts

@@ -1,3 +1,4 @@
+import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
 import {
   AVATAR_SIZE,
   AvatarSize,
@@ -11,6 +12,8 @@ import {
   type FontTextSize,
   RADIUS,
   Radius,
+  SHADOW,
+  Shadow,
   SPACE,
   type Space,
   THEME_COLOR_AVATAR_COLORS,
@@ -190,6 +193,11 @@ export const vars: Vars = {
       {} as Record<AvatarSize, {distance: CSSVar; size: CSSVar}>,
     ),
   },
+  card: {
+    shadow: {
+      outline: `var(${varNames.card.shadow.outline})`,
+    },
+  },
   color: colorVars,
   container: {
     0: `var(${varNames.container[0]})`,
@@ -219,10 +227,10 @@ export const vars: Vars = {
         {} as Record<FontCodeSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.code.weight.regular})`,
-        medium: `var(${varNames.font.code.weight.medium})`,
-        semibold: `var(${varNames.font.code.weight.semibold})`,
-        bold: `var(${varNames.font.code.weight.bold})`,
+        regular: `var(${varNames.font.code.weights.regular})`,
+        medium: `var(${varNames.font.code.weights.medium})`,
+        semibold: `var(${varNames.font.code.weights.semibold})`,
+        bold: `var(${varNames.font.code.weights.bold})`,
       },
     },
     heading: {
@@ -244,10 +252,10 @@ export const vars: Vars = {
         {} as Record<FontHeadingSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.heading.weight.regular})`,
-        medium: `var(${varNames.font.heading.weight.medium})`,
-        semibold: `var(${varNames.font.heading.weight.semibold})`,
-        bold: `var(${varNames.font.heading.weight.bold})`,
+        regular: `var(${varNames.font.heading.weights.regular})`,
+        medium: `var(${varNames.font.heading.weights.medium})`,
+        semibold: `var(${varNames.font.heading.weights.semibold})`,
+        bold: `var(${varNames.font.heading.weights.bold})`,
       },
     },
     label: {
@@ -269,10 +277,10 @@ export const vars: Vars = {
         {} as Record<FontLabelSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.label.weight.regular})`,
-        medium: `var(${varNames.font.label.weight.medium})`,
-        semibold: `var(${varNames.font.label.weight.semibold})`,
-        bold: `var(${varNames.font.label.weight.bold})`,
+        regular: `var(${varNames.font.label.weights.regular})`,
+        medium: `var(${varNames.font.label.weights.medium})`,
+        semibold: `var(${varNames.font.label.weights.semibold})`,
+        bold: `var(${varNames.font.label.weights.bold})`,
       },
     },
     text: {
@@ -294,10 +302,10 @@ export const vars: Vars = {
         {} as Record<FontTextSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.text.weight.regular})`,
-        medium: `var(${varNames.font.text.weight.medium})`,
-        semibold: `var(${varNames.font.text.weight.semibold})`,
-        bold: `var(${varNames.font.text.weight.bold})`,
+        regular: `var(${varNames.font.text.weights.regular})`,
+        medium: `var(${varNames.font.text.weights.medium})`,
+        semibold: `var(${varNames.font.text.weights.semibold})`,
+        bold: `var(${varNames.font.text.weights.bold})`,
       },
     },
   },
@@ -322,9 +330,37 @@ export const vars: Vars = {
   radius: Object.fromEntries(
     RADIUS.map((radius) => [radius, `var(${varNames.radius[radius]})` as const]),
   ) as Record<Radius, CSSVar>,
+  shadow: Object.fromEntries(
+    SHADOW.map((shadow) => [
+      shadow,
+      {
+        umbra: `var(${varNames.shadow[shadow].umbra})`,
+        penumbra: `var(${varNames.shadow[shadow].penumbra})`,
+        ambient: `var(${varNames.shadow[shadow].ambient})`,
+      },
+    ]),
+  ) as Record<Shadow, {umbra: CSSVar; penumbra: CSSVar; ambient: CSSVar}>,
   space: Object.fromEntries(
     SPACE.map((space) => [space, `var(${varNames.space[space]})` as const]),
   ) as Record<Space, CSSVar>,
+
+  // color
+  black: `var(${varNames.black})`,
+  white: `var(${varNames.white})`,
+  ...COLOR_HUES.reduce(
+    (acc, hue) => {
+      const tints = {} as Record<ColorTintKey, CSSVar>
+
+      for (const tint of COLOR_TINTS) {
+        tints[tint] = `var(--${hue}-${tint})`
+      }
+
+      acc[hue] = tints
+
+      return acc
+    },
+    {} as Record<ColorHueKey, Record<ColorTintKey, CSSVar>>,
+  ),
 } as const
 
 function buildColorCardVars(props: {scheme?: Scheme; tone: CardTone}): ColorCardVars {

package/src/theme/v3/buildTheme_v3.ts

@@ -1,7 +1,7 @@
 import {defaultThemeConfig} from '../defaults/config'
 import {defaultThemeFonts} from '../defaults/fonts'
 import {buildColor_v3} from './color/buildColor_v3'
-import {defaultTokens} from './defaults'
+import {defaultTokens} from './defaultTokens'
 import {resolveTokens} from './resolveTokens'
 import {Theme_v3, ThemeOptions} from './types'
 

package/src/theme/v3/{defaults.ts → defaultTokens.ts}

@@ -3,7 +3,6 @@ import {PartialTokens, Tokens} from './tokens'
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {
-      // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ['black/0.5', 'gray/100/0.5'],
       code: {
         bg: ['950', '50'],
@@ -61,7 +60,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['950', '50'],
-              4: ['800', '200'],
+              4: ['700', '300'],
             },
             border: {
               0: ['700', '100'],

package/src/theme/v3/index.ts

@@ -1,6 +1,6 @@
 export * from './buildTheme_v3'
 export * from './color'
-export * from './defaults'
+export * from './defaultTokens'
 export * from './resolveTokens'
 export * from './tokens'
 export * from './types'

package/src/theme/v3/resolveTokens.ts

@@ -52,47 +52,47 @@ function resolveCardColorTokens(
     avatar: {
       gray: {
         _hue: tokens?.avatar?.gray?._hue ?? 'gray',
-        bg: tokens?.avatar?.gray?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.gray?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.gray?.fg ?? ['900', '900'],
       },
       blue: {
         _hue: tokens?.avatar?.blue?._hue ?? 'blue',
-        bg: tokens?.avatar?.blue?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.blue?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.blue?.fg ?? ['900', '900'],
       },
       purple: {
         _hue: tokens?.avatar?.purple?._hue ?? 'purple',
-        bg: tokens?.avatar?.purple?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.purple?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.purple?.fg ?? ['900', '900'],
       },
       magenta: {
         _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
-        bg: tokens?.avatar?.magenta?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.magenta?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.magenta?.fg ?? ['900', '900'],
       },
       red: {
         _hue: tokens?.avatar?.red?._hue ?? 'red',
-        bg: tokens?.avatar?.red?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.red?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.red?.fg ?? ['900', '900'],
       },
       orange: {
         _hue: tokens?.avatar?.orange?._hue ?? 'orange',
-        bg: tokens?.avatar?.orange?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.orange?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.orange?.fg ?? ['900', '900'],
       },
       yellow: {
         _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
-        bg: tokens?.avatar?.yellow?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.yellow?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.yellow?.fg ?? ['900', '900'],
       },
       green: {
         _hue: tokens?.avatar?.green?._hue ?? 'green',
-        bg: tokens?.avatar?.green?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.green?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.green?.fg ?? ['900', '900'],
       },
       cyan: {
         _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
-        bg: tokens?.avatar?.cyan?.bg ?? ['400', '400'],
+        bg: tokens?.avatar?.cyan?.bg ?? ['400', '500'],
         fg: tokens?.avatar?.cyan?.fg ?? ['900', '900'],
       },
     },

package/src/ui/RootClassNames.tsx

@@ -0,0 +1,41 @@
+import {card, scopeClassName as _} from '@sanity/ui/css'
+import {useEffect} from 'react'
+
+import {_raf2} from './helpers'
+import {useCard} from './primitives'
+
+export function RootClassNames(props: {element: HTMLElement}) {
+  const {element} = props
+  const {scheme, tone} = useCard() ?? {}
+
+  useEffect(() => {
+    const els = document.querySelectorAll(
+      [_('button'), _('card'), _('font')].map((n) => `.${n}`).join(', '),
+    )
+
+    // temporarily disable all transitions when the theme changes
+    for (const el of els) {
+      if (el instanceof HTMLElement) {
+        el.style.transition = 'none'
+      }
+    }
+
+    _raf2(() => {
+      document.documentElement.className = card({scheme, tone}) ?? ''
+
+      _raf2(() => {
+        for (const el of els) {
+          if (el instanceof HTMLElement) {
+            el.style.transition = ''
+          }
+        }
+      })
+    })
+
+    return () => {
+      document.documentElement.className = ''
+    }
+  }, [element, scheme, tone])
+
+  return null
+}

package/src/ui/_compat/helpers.ts

@@ -0,0 +1,72 @@
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgba as _rgba,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  screen as _screen,
+} from '@sanity/ui/theme'
+
+export {
+  /** @deprecated use `px` from `@sanity/ui/css` */
+  px,
+  /** @deprecated use `rem` from `@sanity/ui/css` */
+  rem,
+} from '@sanity/ui/css'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+export const screen = _screen

package/src/ui/_compat/index.ts

@@ -1,9 +1,5 @@
+export * from './helpers'
+export * from './studioTheme'
 export * from './styles'
 export * from './theme'
 export * from './types'
-export {
-  /** @deprecated use `px` from `@sanity/ui/css` */
-  px,
-  /** @deprecated use `rem` from `@sanity/ui/css` */
-  rem,
-} from '@sanity/ui/css'

package/src/ui/_compat/studioTheme.ts

@@ -0,0 +1,7 @@
+import {buildTheme} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+export const studioTheme = buildTheme()

package/src/ui/_compat/types.ts

@@ -2,7 +2,6 @@
 
 import {
   type BaseTheme as _BaseTheme,
-  buildTheme,
   type HSL as _HSL,
   type PartialThemeColorBuilderOpts,
   type RGB as _RGB,
@@ -190,85 +189,3 @@ export {
   type ThemeColorToneKey,
   type ThemeInput,
 }
-
-import {
-  createColorTheme as _createColorTheme,
-  hexToRgb as _hexToRgb,
-  hslToRgb as _hslToRgb,
-  multiply as _multiply,
-  parseColor as _parseColor,
-  rgba as _rgba,
-  rgbToHex as _rgbToHex,
-  rgbToHsl as _rgbToHsl,
-  screen as _screen,
-} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
- */
-export const createColorTheme = _createColorTheme
-
-/**
- * @public
- * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
- */
-export const hexToRgb = _hexToRgb
-
-/**
- * @public
- * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
- */
-export const hslToRgb = _hslToRgb
-
-/**
- * @public
- * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
- */
-export const multiply = _multiply
-
-/**
- * @public
- * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
- */
-export const parseColor = _parseColor
-
-/**
- * @public
- * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
- */
-export const rgbToHex = _rgbToHex
-
-/**
- * @public
- * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
- */
-export const rgbToHsl = _rgbToHsl
-
-/**
- * @public
- * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
- */
-export const rgba = _rgba
-
-/**
- * @public
- * @deprecated Use `screen` from `@sanity/ui/theme` instead.
- */
-export const screen = _screen
-
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export const studioTheme = (() => {
-  let theme: ReturnType<typeof buildTheme> | undefined
-  return {
-    get value() {
-      if (!theme) {
-        theme = buildTheme()
-      }
-      return theme
-    },
-  }
-})()

package/src/ui/index.ts

@@ -4,6 +4,7 @@ export * from './helpers'
 export * from './hooks'
 export * from './observers'
 export * from './primitives'
+export * from './RootClassNames'
 export * from './StyleTags'
 export * from './types'
 export * from './utils'

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

@@ -58,7 +58,7 @@ export const Button = forwardRef(function Button(
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
   const {
-    align = 'center',
+    // align = 'center',
     as: As = 'button',
     children,
     className,
@@ -94,10 +94,9 @@ export const Button = forwardRef(function Button(
     type = 'button',
     muted = false,
     width,
-    wrap,
+    // wrap,
     ...restProps
   } = props
-  // const {button: buttonTheme} = useTheme_v2()
 
   return (
     <As
@@ -183,9 +182,9 @@ export const Button = forwardRef(function Button(
           // direction={direction}
           // display="flex"
           flex={1}
-          gap={gap}
-          gapX={gapX}
-          gapY={gapY}
+          // gap={gap}
+          // gapX={gapX}
+          // gapY={gapY}
           // justify={justify}
           padding={padding}
           paddingX={paddingX}