@sanity/ui 3.0.0-static.35 → 3.0.0-static.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.35",
+  "version": "3.0.0-static.36",
   "keywords": [
     "react",
     "ui",

package/src/css/index.ts

@@ -4,7 +4,8 @@ export * from './layers.css'
 export * from './vars.css'
 
 // theme
-export * from './defaultTheme.css'
+export * from './theme/buildCSSThemeTokens'
+export * from './theme/defaultTheme.css'
 
 // props
 export * from './props/alignItems/alignItems'
@@ -86,8 +87,8 @@ export * from './props/width/types'
 export * from './primitives/_arrow/_arrow'
 export * from './primitives/_input/input'
 export * from './primitives/_input/types'
-export * from './primitives/_selectable/selectable'
-export * from './primitives/_selectable/types'
+export * from './primitives/selectable/selectable'
+export * from './primitives/selectable/types'
 export * from './primitives/avatar/avatar'
 export * from './primitives/avatar/types'
 export * from './primitives/badge/badge'
@@ -140,4 +141,3 @@ export * from './components/tree/tree'
 
 export * from './constants'
 export * from './types'
-export * from './util'

package/src/css/primitives/root/root.ts

@@ -1,5 +1,5 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {themeClassName} from '../../defaultTheme.css'
+import {themeClassName} from '../../theme/defaultTheme.css'
 import {height} from '../../props/height/height'
 import {card} from '../card/card'
 import {_root} from './root.css'

package/src/css/primitives/{_selectable/_selectable.css.ts → selectable/selectable.css.ts}

@@ -40,7 +40,7 @@ export const tones: Record<ElementTone, string> = {
         _style(layers.primitives, {
           'vars': {
             [vars.color.bg]: tinted.bg[0],
-            [vars.color.border]: tinted.border[2],
+            [vars.color.border]: tinted.border[1],
             [vars.color.fg]: tinted.fg[2],
           },
 
@@ -51,7 +51,7 @@ export const tones: Record<ElementTone, string> = {
                   {
                     vars: {
                       [vars.color.bg]: tinted.bg[1],
-                      [vars.color.border]: tinted.border[1],
+                      [vars.color.border]: tinted.border[2],
                       [vars.color.fg]: tinted.fg[1],
                     },
                   },

package/src/css/primitives/{_selectable → selectable}/selectable.ts

@@ -1,6 +1,6 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {radius} from '../../props/radius/radius'
-import {root, tones} from './_selectable.css'
+import {root, tones} from './selectable.css'
 import type {SelectableStyleProps} from './types'
 
 /** @internal */

package/src/css/theme/buildCSSThemeTokens.ts

@@ -0,0 +1,481 @@
+import {black, hues, white} from '@sanity/color'
+import {
+  _parseColorToken,
+  AVATAR_COLORS,
+  AVATAR_SIZE,
+  type BoxShadow,
+  buildTheme,
+  CARD_TONES,
+  type CardColorTokens,
+  type CardTone,
+  COLOR_VARIANTS,
+  type ColorScheme,
+  type ColorValue,
+  type ColorVariant,
+  CONTAINER_SCALE,
+  ELEMENT_TONES,
+  type ElementTone,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  type Hue,
+  HUES,
+  RADIUS,
+  SHADOW,
+  SPACE,
+  type Theme,
+  type ThemeOptions,
+  TINTS,
+} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../_fromEntries'
+import type {
+  CSSCardColorTokens,
+  ElementColorTokens,
+  SchemeColorTokens,
+  ThemeTokens,
+  VariantColorTokens,
+} from '../types'
+import {paletteVars} from '../vars.css'
+
+/** @public */
+export function buildCSSThemeTokens(options?: ThemeOptions): ThemeTokens {
+  const theme = buildTheme(options)
+
+  return {
+    avatar: {
+      focusRing: {
+        offset: px(theme.avatar.focusRing.offset),
+        width: px(theme.avatar.focusRing.width),
+      },
+      scale: {
+        ..._fromEntries(
+          AVATAR_SIZE.map((s) => [
+            s,
+            {
+              distance: px(theme.avatar.sizes[s].distance),
+              size: px(theme.avatar.sizes[s].size),
+            },
+          ]),
+        ),
+      },
+    },
+    button: {
+      border: {
+        width: px(theme.button.border.width),
+      },
+      focusRing: {
+        offset: px(theme.button.focusRing.offset),
+        width: px(theme.button.focusRing.width),
+      },
+    },
+    card: {
+      shadow: {
+        outline: px(theme.card.shadow.outline),
+      },
+    },
+    container: {
+      ..._fromEntries(CONTAINER_SCALE.map((s) => [s, rem(theme.container[s])])),
+    },
+    color: {
+      palette: {
+        black: black.hex,
+        white: white.hex,
+        ..._fromEntries(
+          HUES.map((h) => [h, {..._fromEntries(TINTS.map((t) => [t, hues[h][t].hex]))}]),
+        ),
+      },
+
+      light: renderColorScheme({theme, scheme: 'light'}),
+      dark: renderColorScheme({theme, scheme: 'dark'}),
+    },
+    font: {
+      code: {
+        family: theme.font.code.family,
+        featureSettings: theme.font.code.featureSettings || 'normal',
+        weight: {
+          regular: theme.font.code.weight.regular.toString(),
+          medium: theme.font.code.weight.medium.toString(),
+          semibold: theme.font.code.weight.semibold.toString(),
+          bold: theme.font.code.weight.bold.toString(),
+        },
+        scale: {
+          ..._fromEntries(
+            FONT_CODE_SIZE.map((s) => [
+              s,
+              {
+                fontSize: rem(theme.font.code.scale[s].fontSize),
+                lineHeight: rem(theme.font.code.scale[s].lineHeight),
+                letterSpacing: rem(theme.font.code.scale[s].letterSpacing),
+                ascenderHeight: rem(theme.font.code.scale[s].ascenderHeight),
+                descenderHeight: rem(theme.font.code.scale[s].descenderHeight),
+                iconSize: rem(theme.font.code.scale[s].iconSize),
+                customIconSize: rem(theme.font.code.scale[s].customIconSize),
+              },
+            ]),
+          ),
+        },
+      },
+
+      heading: {
+        family: theme.font.heading.family,
+        featureSettings: theme.font.heading.featureSettings || 'normal',
+        weight: {
+          regular: theme.font.heading.weight.regular.toString(),
+          medium: theme.font.heading.weight.medium.toString(),
+          semibold: theme.font.heading.weight.semibold.toString(),
+          bold: theme.font.heading.weight.bold.toString(),
+        },
+        scale: {
+          ..._fromEntries(
+            FONT_HEADING_SIZE.map((s) => [
+              s,
+              {
+                fontSize: rem(theme.font.heading.scale[s].fontSize),
+                lineHeight: rem(theme.font.heading.scale[s].lineHeight),
+                letterSpacing: rem(theme.font.heading.scale[s].letterSpacing),
+                ascenderHeight: rem(theme.font.heading.scale[s].ascenderHeight),
+                descenderHeight: rem(theme.font.heading.scale[s].descenderHeight),
+                iconSize: rem(theme.font.heading.scale[s].iconSize),
+                customIconSize: rem(theme.font.heading.scale[s].customIconSize),
+              },
+            ]),
+          ),
+        },
+      },
+
+      label: {
+        family: theme.font.label.family,
+        featureSettings: theme.font.label.featureSettings || 'normal',
+        weight: {
+          regular: theme.font.label.weight.regular.toString(),
+          medium: theme.font.label.weight.medium.toString(),
+          semibold: theme.font.label.weight.semibold.toString(),
+          bold: theme.font.label.weight.bold.toString(),
+        },
+        scale: {
+          ..._fromEntries(
+            FONT_LABEL_SIZE.map((s) => [
+              s,
+              {
+                fontSize: rem(theme.font.label.scale[s].fontSize),
+                lineHeight: rem(theme.font.label.scale[s].lineHeight),
+                letterSpacing: rem(theme.font.label.scale[s].letterSpacing),
+                ascenderHeight: rem(theme.font.label.scale[s].ascenderHeight),
+                descenderHeight: rem(theme.font.label.scale[s].descenderHeight),
+                iconSize: rem(theme.font.label.scale[s].iconSize),
+                customIconSize: rem(theme.font.label.scale[s].customIconSize),
+              },
+            ]),
+          ),
+        },
+      },
+
+      text: {
+        family: theme.font.text.family,
+        featureSettings: theme.font.text.featureSettings || 'normal',
+        weight: {
+          regular: theme.font.text.weight.regular.toString(),
+          medium: theme.font.text.weight.medium.toString(),
+          semibold: theme.font.text.weight.semibold.toString(),
+          bold: theme.font.text.weight.bold.toString(),
+        },
+        scale: {
+          ..._fromEntries(
+            FONT_TEXT_SIZE.map((s) => [
+              s,
+              {
+                fontSize: rem(theme.font.text.scale[s].fontSize),
+                lineHeight: rem(theme.font.text.scale[s].lineHeight),
+                letterSpacing: rem(theme.font.text.scale[s].letterSpacing),
+                ascenderHeight: rem(theme.font.text.scale[s].ascenderHeight),
+                descenderHeight: rem(theme.font.text.scale[s].descenderHeight),
+                iconSize: rem(theme.font.text.scale[s].iconSize),
+                customIconSize: rem(theme.font.text.scale[s].customIconSize),
+              },
+            ]),
+          ),
+        },
+      },
+    },
+    input: {
+      border: {
+        width: px(theme.input.border.width),
+      },
+      checkbox: {
+        size: rem(theme.input.checkbox.size),
+        focusRing: {
+          offset: px(theme.input.checkbox.focusRing.offset),
+          width: px(theme.input.checkbox.focusRing.width),
+        },
+      },
+      radio: {
+        size: rem(theme.input.radio.size),
+        markSize: rem(theme.input.radio.markSize),
+        focusRing: {
+          offset: px(theme.input.radio.focusRing.offset),
+          width: px(theme.input.radio.focusRing.width),
+        },
+      },
+      select: {
+        focusRing: {
+          offset: px(theme.input.select.focusRing.offset),
+          width: px(theme.input.select.focusRing.width),
+        },
+      },
+      switch: {
+        width: rem(theme.input.switch.width),
+        height: rem(theme.input.switch.height),
+        focusRing: {
+          offset: px(theme.input.switch.focusRing.offset),
+          width: px(theme.input.switch.focusRing.width),
+        },
+        padding: rem(theme.input.switch.padding),
+        transitionDurationMs: `${theme.input.switch.transitionDurationMs}ms`,
+        transitionTimingFunction: theme.input.switch.transitionTimingFunction,
+      },
+      text: {
+        focusRing: {
+          offset: px(theme.input.text.focusRing.offset),
+          width: px(theme.input.text.focusRing.width),
+        },
+      },
+    },
+    radius: _fromEntries(RADIUS.map((key) => [key, `${theme.radius[key]}px`])),
+    shadow: _fromEntries(
+      SHADOW.map((s) => [
+        s,
+        {
+          umbra: toBoxShadow(theme.shadow[s]?.umbra),
+          penumbra: toBoxShadow(theme.shadow[s]?.penumbra),
+          ambient: toBoxShadow(theme.shadow[s]?.ambient),
+        },
+      ]),
+    ),
+    space: _fromEntries(SPACE.map((key) => [key, `${theme.space[key]}px`])),
+  } as const
+}
+
+function renderColorScheme(options: {theme: Theme; scheme: ColorScheme}): SchemeColorTokens {
+  const {theme, scheme} = options
+
+  const defaultCardColor = renderCardColor({
+    theme,
+    tone: 'default',
+    scheme,
+  })
+
+  return {
+    ..._fromEntries(
+      CARD_TONES.map((key) => {
+        if (key === 'default') {
+          return [key, defaultCardColor]
+        }
+
+        return [
+          key,
+          renderCardColor({
+            bgValue: defaultCardColor.tinted.default.bg[0],
+            theme,
+            tone: key,
+            scheme,
+          }),
+        ]
+      }),
+    ),
+  }
+}
+
+function renderCardColor(options: {
+  bgValue?: string
+  theme: Theme
+  tone: CardTone
+  scheme: 'light' | 'dark'
+}): CSSCardColorTokens {
+  const {bgValue, theme, tone: t, scheme} = options
+
+  const tokens = theme.color[t]
+
+  const tintedDefaultVariant = renderColorElement(tokens, {
+    bgValue,
+    variant: 'tinted',
+    scheme,
+    tone: 'default',
+  })
+
+  const colorOptions = {
+    bgValue: tintedDefaultVariant.bg[0],
+    defaultHue: tokens._hue ?? 'gray',
+    scheme,
+  } as const
+
+  return {
+    avatar: {
+      ..._fromEntries(
+        AVATAR_COLORS.map((c) => [
+          c,
+          {
+            bg: renderColor(tokens.avatar[c].bg, {...colorOptions, defaultHue: c}),
+            fg: renderColor(tokens.avatar[c].fg, {...colorOptions, defaultHue: c}),
+          },
+        ]),
+      ),
+    },
+    backdrop: renderColor(tokens.backdrop, colorOptions),
+    code: {
+      bg: renderColor(tokens.code.bg, colorOptions),
+      fg: renderColor(tokens.code.fg, colorOptions),
+
+      token: {
+        atrule: renderColor(tokens.code.token.atrule, colorOptions),
+        attrName: renderColor(tokens.code.token.attrName, colorOptions),
+        attrValue: renderColor(tokens.code.token.attrValue, colorOptions),
+        attribute: renderColor(tokens.code.token.attribute, colorOptions),
+        boolean: renderColor(tokens.code.token.boolean, colorOptions),
+        builtin: renderColor(tokens.code.token.builtin, colorOptions),
+        cdata: renderColor(tokens.code.token.cdata, colorOptions),
+        char: renderColor(tokens.code.token.char, colorOptions),
+        class: renderColor(tokens.code.token.class, colorOptions),
+        className: renderColor(tokens.code.token.className, colorOptions),
+        comment: renderColor(tokens.code.token.comment, colorOptions),
+        constant: renderColor(tokens.code.token.constant, colorOptions),
+        deleted: renderColor(tokens.code.token.deleted, colorOptions),
+        doctype: renderColor(tokens.code.token.doctype, colorOptions),
+        entity: renderColor(tokens.code.token.entity, colorOptions),
+        function: renderColor(tokens.code.token.function, colorOptions),
+        hexcode: renderColor(tokens.code.token.hexcode, colorOptions),
+        id: renderColor(tokens.code.token.id, colorOptions),
+        important: renderColor(tokens.code.token.important, colorOptions),
+        inserted: renderColor(tokens.code.token.inserted, colorOptions),
+        keyword: renderColor(tokens.code.token.keyword, colorOptions),
+        number: renderColor(tokens.code.token.number, colorOptions),
+        operator: renderColor(tokens.code.token.operator, colorOptions),
+        prolog: renderColor(tokens.code.token.prolog, colorOptions),
+        property: renderColor(tokens.code.token.property, colorOptions),
+        pseudoClass: renderColor(tokens.code.token.pseudoClass, colorOptions),
+        pseudoElement: renderColor(tokens.code.token.pseudoElement, colorOptions),
+        punctuation: renderColor(tokens.code.token.punctuation, colorOptions),
+        regex: renderColor(tokens.code.token.regex, colorOptions),
+        selector: renderColor(tokens.code.token.selector, colorOptions),
+        string: renderColor(tokens.code.token.string, colorOptions),
+        symbol: renderColor(tokens.code.token.symbol, colorOptions),
+        tag: renderColor(tokens.code.token.tag, colorOptions),
+        unit: renderColor(tokens.code.token.unit, colorOptions),
+        url: renderColor(tokens.code.token.url, colorOptions),
+        variable: renderColor(tokens.code.token.variable, colorOptions),
+      },
+    },
+    focusRing: renderColor(tokens.focusRing, colorOptions),
+    link: {
+      fg: renderColor(tokens.link.fg, colorOptions),
+    },
+    shadow: {
+      outline: renderColor(tokens.shadow.outline, colorOptions),
+      umbra: renderColor(tokens.shadow.umbra, colorOptions),
+      penumbra: renderColor(tokens.shadow.penumbra, colorOptions),
+      ambient: renderColor(tokens.shadow.ambient, colorOptions),
+    },
+    skeleton: {
+      from: renderColor(tokens.skeleton.from, colorOptions),
+      to: renderColor(tokens.skeleton.to, colorOptions),
+    },
+    // variants
+    ..._fromEntries(
+      COLOR_VARIANTS.map((v) => [
+        v,
+        {
+          ..._fromEntries(
+            ELEMENT_TONES.map((t) => {
+              if (v === 'tinted' && t === 'default') {
+                return [t, tintedDefaultVariant]
+              }
+
+              return [t, renderColorElement(tokens, {scheme, variant: v, tone: t})]
+            }),
+          ),
+        } satisfies VariantColorTokens,
+      ]),
+    ),
+  }
+}
+
+function renderColorElement(
+  tokens: CardColorTokens,
+  options: {
+    bgValue?: string
+    scheme: ColorScheme
+    variant: ColorVariant
+    tone: ElementTone
+  },
+): ElementColorTokens {
+  const {bgValue, scheme, variant: v, tone: t} = options
+
+  const elementColorOptions = {bgValue, defaultHue: tokens.variant[v][t]._hue, scheme}
+
+  return {
+    bg: {
+      0: renderColor(tokens.variant[v][t].bg[0], elementColorOptions),
+      4: renderColor(tokens.variant[v][t].bg[4], elementColorOptions),
+    },
+    border: {
+      0: renderColor(tokens.variant[v][t].border[0], elementColorOptions),
+      4: renderColor(tokens.variant[v][t].border[4], elementColorOptions),
+    },
+    fg: {
+      0: renderColor(tokens.variant[v][t].fg[0], elementColorOptions),
+      4: renderColor(tokens.variant[v][t].fg[4], elementColorOptions),
+    },
+  }
+}
+
+function renderColor(
+  value: ColorValue,
+  context: {bgValue?: string; defaultHue: Hue; scheme: 'light' | 'dark'},
+): string {
+  const {bgValue = 'transparent', defaultHue, scheme} = context
+
+  const expr = _parseColorToken(value[scheme === 'light' ? 0 : 1], {defaultHue})
+
+  if (expr.type === 'inherit') {
+    return bgValue
+  }
+
+  let v = bgValue
+
+  if (expr.type === 'color') {
+    v = paletteVars[expr.name]
+  }
+
+  if (expr.type === 'tint') {
+    v = paletteVars[expr.hue][expr.tint]
+  }
+
+  if (expr.mix < 1) {
+    v = `color-mix(in srgb, ${bgValue}, ${v} ${expr.mix * 100}%)`
+  }
+
+  if (expr.opacity < 1) {
+    v = `color-mix(in srgb, transparent, ${v} ${expr.opacity * 100}%)`
+  }
+
+  return v
+}
+
+function rem(value: number): string {
+  if (value === 0) return '0'
+
+  return `${value / 16}rem`
+}
+
+function px(value: number): string {
+  if (value === 0) return '0'
+
+  return `${value}px`
+}
+
+function toBoxShadow(value: BoxShadow | undefined): string {
+  if (!value) return 'none'
+
+  return value.map((n) => px(n)).join(' ')
+}

package/src/css/theme/defaultTheme.css.ts

@@ -0,0 +1,64 @@
+import {createTheme, globalFontFace} from '@vanilla-extract/css'
+
+import {layers} from '../layers.css'
+import {themeVars} from '../vars.css'
+import {buildCSSThemeTokens} from './buildCSSThemeTokens'
+
+const fontDisplay: FontDisplay = 'swap'
+
+globalFontFace('Inter', [
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '400',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '400',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '500',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '500',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '600',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '600',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'normal',
+    fontWeight: '700',
+  },
+  {
+    src: `url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2')`,
+    fontDisplay,
+    fontStyle: 'italic',
+    fontWeight: '700',
+  },
+])
+
+/** @public */
+export const themeClassName: string = createTheme(themeVars, {
+  '@layer': layers.theme,
+  ...buildCSSThemeTokens(),
+})

package/src/css/types.ts

@@ -153,7 +153,7 @@ export type FontTokens<FontScaleIndex extends number> = {
 }
 
 /** @public */
-export type ThemeTokens = {
+export type CoreThemeTokens = {
   avatar: {
     focusRing: {
       offset: string
@@ -245,7 +245,7 @@ export type ThemeTokens = {
 }
 
 /** @public */
-export type RootThemeTokens = ThemeTokens & {
+export type ThemeTokens = CoreThemeTokens & {
   color: {palette: ColorPaletteTokens}
 }
 
@@ -418,4 +418,4 @@ export type ColorPaletteVars = ThemeContract<ColorPaletteTokens>
 export type ScopedVars = ThemeContract<ScopedTokens>
 
 /** @public */
-export type ThemeVars = ThemeContract<RootThemeTokens & ScopedTokens> // _CSSThemeWithoutPaletteTokens & ScopedVars
+export type ThemeVars = ThemeContract<ThemeTokens & ScopedTokens> // _CSSThemeWithoutPaletteTokens & ScopedVars

package/src/css/vars.css.ts

@@ -21,7 +21,7 @@ import {_fromEntries} from './_fromEntries'
 import type {
   ColorPaletteTokens,
   ColorPaletteVars,
-  RootThemeTokens,
+  CoreThemeTokens,
   ThemeContract,
   ThemeTokens,
   ThemeVars,
@@ -40,10 +40,10 @@ const paletteTokens: ColorPaletteTokens = {
   ),
 }
 
-/** @public */
+/** @internal */
 export const paletteVars: ColorPaletteVars = createThemeContract(paletteTokens)
 
-const themeTokens: ThemeTokens = {
+const themeTokens: CoreThemeTokens = {
   avatar: {
     focusRing: {
       offset: '',
@@ -350,13 +350,13 @@ const themeTokens: ThemeTokens = {
   },
 }
 
-const _themeVars: ThemeContract<ThemeTokens> = createThemeContract(themeTokens)
+const _themeVars: ThemeContract<CoreThemeTokens> = createThemeContract(themeTokens)
 
 /**
  * Variables to be defined in a theme.
  *
- * @public */
-export const themeVars: ThemeContract<RootThemeTokens> = {
+ * @internal */
+export const themeVars: ThemeContract<ThemeTokens> = {
   ..._themeVars,
   color: {
     ..._themeVars.color,

package/src/theme/buildTheme.ts

@@ -4,10 +4,10 @@ import {defaultColor} from './defaults/color'
 import {defaultTheme} from './defaults/common'
 import {defaultFonts} from './defaults/fonts'
 import {resolveTokens} from './resolveTokens'
-import type {Options, Theme} from './types'
+import type {Theme, ThemeOptions} from './types'
 
 /** @public */
-export function buildTheme(options?: Options): Theme {
+export function buildTheme(options?: ThemeOptions): Theme {
   const tokens = resolveTokens({
     ...options?.tokens,
     color: options?.tokens?.color ?? defaultColor,