@sanity/ui 3.0.0-static.32 → 3.0.0-static.34

package/src/css/types.ts

@@ -1,7 +1,11 @@
 import type {
   AvatarColor,
   AvatarSize,
+  CardTone,
+  ColorScheme,
+  ColorVariant,
   ContainerScale,
+  ElementTone,
   FontCodeSize,
   FontHeadingSize,
   FontLabelSize,
@@ -10,12 +14,9 @@ import type {
   Radius,
   Shadow,
   Space,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  ThemeColorStateToneKey,
-  ThemeColorVariantKey,
   Tint,
 } from '@sanity/ui/theme'
+import type {createThemeContract} from '@vanilla-extract/css'
 
 import type {BREAKPOINTS} from './constants'
 
@@ -32,13 +33,29 @@ export type ResponsiveRules = Record<Breakpoint, string>
 export type ResponsiveRuleOptions<K extends string | number> = Record<K, ResponsiveRules>
 
 /** @public */
-export type CSSThemeColorPalette = {
-  black: string
-  white: string
-} & Record<Hue, Record<Tint, string>>
+export type CSSVarFunction = `var(--${string})`
+
+/** @public */
+export type ElementColorTokens = {
+  bg: {
+    0: string
+    4: string
+  }
+  border: {
+    0: string
+    4: string
+  }
+  fg: {
+    0: string
+    4: string
+  }
+}
 
 /** @public */
-export type CSSThemeColorCard = {
+export type VariantColorTokens = Record<ElementTone, ElementColorTokens>
+
+/** @public */
+export type CSSCardColorTokens = {
   avatar: Record<AvatarColor, {bg: string; fg: string}>
   backdrop: string
   code: {
@@ -97,37 +114,22 @@ export type CSSThemeColorCard = {
     from: string
     to: string
   }
-} & Record<
-  ThemeColorVariantKey,
-  Record<
-    ThemeColorStateToneKey,
-    {
-      bg: {
-        0: string
-        4: string
-      }
-      border: {
-        0: string
-        4: string
-      }
-      fg: {
-        0: string
-        4: string
-      }
-    }
-  >
->
+} & Record<ColorVariant, VariantColorTokens>
+
+/** @public */
+export type SchemeColorTokens = Record<CardTone, CSSCardColorTokens>
 
 /** @public */
-export type CSSThemeColorScheme = Record<ThemeColorCardToneKey, CSSThemeColorCard>
+export type ColorPaletteTokens = {
+  black: string
+  white: string
+} & Record<Hue, Record<Tint, string>>
 
 /** @public */
-export type CSSThemeColor = {
-  palette: CSSThemeColorPalette
-} & Record<ThemeColorSchemeKey, CSSThemeColorScheme>
+export type ColorTokens = Record<ColorScheme, SchemeColorTokens>
 
 /** @public */
-export type CSSThemeFont<FontScaleIndex extends number> = {
+export type FontTokens<FontScaleIndex extends number> = {
   family: string
   featureSettings: string
   weight: {
@@ -151,9 +153,8 @@ export type CSSThemeFont<FontScaleIndex extends number> = {
 }
 
 /** @public */
-export type CSSTheme = {
-  '@layer'?: string
-  'avatar': {
+export type ThemeTokens = {
+  avatar: {
     focusRing: {
       offset: string
       width: string
@@ -166,7 +167,7 @@ export type CSSTheme = {
       }
     >
   }
-  'button': {
+  button: {
     border: {
       width: string
     }
@@ -175,20 +176,20 @@ export type CSSTheme = {
       width: string
     }
   }
-  'card': {
+  card: {
     shadow: {
       outline: string
     }
   }
-  'color': CSSThemeColor
-  'container': Record<ContainerScale, string>
-  'font': {
-    code: CSSThemeFont<FontCodeSize>
-    heading: CSSThemeFont<FontHeadingSize>
-    label: CSSThemeFont<FontLabelSize>
-    text: CSSThemeFont<FontTextSize>
+  color: ColorTokens
+  container: Record<ContainerScale, string>
+  font: {
+    code: FontTokens<FontCodeSize>
+    heading: FontTokens<FontHeadingSize>
+    label: FontTokens<FontLabelSize>
+    text: FontTokens<FontTextSize>
   }
-  'input': {
+  input: {
     border: {
       width: string
     }
@@ -231,8 +232,8 @@ export type CSSTheme = {
       }
     }
   }
-  'radius': Record<Radius, string>
-  'shadow': Record<
+  radius: Record<Radius, string>
+  shadow: Record<
     Shadow,
     {
       umbra: string
@@ -240,10 +241,181 @@ export type CSSTheme = {
       ambient: string
     }
   >
-  'space': Record<Space, string>
+  space: Record<Space, string>
+}
+
+/** @public */
+export type RootThemeTokens = ThemeTokens & {
+  color: {palette: ColorPaletteTokens}
+}
+
+/** @public */
+export type ScopedTokens = {
+  arrow: {
+    size: string
+  }
+  avatar: {
+    distance: string
+    size: string
+  }
+  button: {
+    boxShadow: string
+  }
+  card: {
+    test: string
+  }
+  color: {
+    avatar: {
+      bg: string
+      fg: string
+    }
+    bg: string
+    border: string
+    fg: string
+    muted: {
+      bg: string
+      border: string
+      fg: string
+    }
+    input: {
+      checkbox: {
+        bg: string
+        border: string
+        fg: string
+      }
+      text: {
+        bg: string
+        border: string
+        fg: string
+        placeholder: string
+      }
+      radio: {
+        bg: string
+        border: string
+        fg: string
+      }
+      switch: {
+        bg: string
+        fg: string
+      }
+    }
+  } & CSSCardColorTokens &
+    Record<
+      ColorVariant,
+      Record<
+        ElementTone,
+        {
+          bg: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+          border: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+          fg: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+        }
+      >
+    > &
+    Record<
+      CardTone,
+      CSSCardColorTokens &
+        Record<
+          ColorVariant,
+          Record<
+            ElementTone,
+            {
+              bg: {
+                0: string
+                4: string
+              }
+              border: {
+                0: string
+                4: string
+              }
+              fg: {
+                0: string
+                4: string
+              }
+            }
+          >
+        >
+    >
+
+  font: {
+    family: string
+    featureSettings: string
+    fontSize: string
+    lineHeight: string
+    letterSpacing: string
+    fontWeight: string
+
+    ascenderHeight: string
+    descenderHeight: string
+    iconSize: string
+    customIconSize: string
+    capHeight: string
+    iconOffset: string
+    customIconOffset: string
+
+    skeleton: {
+      ascenderHeight: string
+      descenderHeight: string
+      lineHeight: string
+    }
+
+    weight: {
+      regular: string
+      medium: string
+      semibold: string
+      bold: string
+    }
+  }
+
+  input: {
+    switch: {
+      thumb: {
+        offset: string
+        size: string
+      }
+    }
+    text: {
+      fontSize: string
+      lineHeight: string
+      letterSpacing: string
+      ascenderHeight: string
+      descenderHeight: string
+      padding: string
+      gap: string
+    }
+  }
 }
 
-/** @internal */
-export type _CSSThemeWithoutPalette = Omit<CSSTheme, '@layer' | 'color'> & {
-  color: Omit<CSSThemeColor, 'palette'>
+/** @public */
+export type NullableTokens = {
+  [key: string]: string | NullableTokens
 }
+
+/** @public */
+export type ThemeContract<T extends NullableTokens> = ReturnType<typeof createThemeContract<T>>
+
+/** @public */
+export type ColorPaletteVars = ThemeContract<ColorPaletteTokens>
+
+/** @public */
+export type ScopedVars = ThemeContract<ScopedTokens>
+
+/** @public */
+export type ThemeVars = ThemeContract<RootThemeTokens & ScopedTokens> // _CSSThemeWithoutPaletteTokens & ScopedVars

package/src/css/util.ts

@@ -1,4 +1,4 @@
-import {type ThemeBoxShadow} from '@sanity/ui/theme'
+import type {BoxShadow} from '@sanity/ui/theme'
 
 /** @internal */
 export function rem(value: number): string {
@@ -15,7 +15,7 @@ export function px(value: number): string {
 }
 
 /** @internal */
-export function toBoxShadow(value: ThemeBoxShadow | undefined): string {
+export function toBoxShadow(value: BoxShadow | undefined): string {
   if (!value) return 'none'
 
   return value.map((n) => px(n)).join(' ')

package/src/css/vars.css.ts

@@ -2,8 +2,11 @@ import {COLOR_HUES, COLOR_TINTS} from '@sanity/color'
 import {
   AVATAR_COLORS,
   AVATAR_SIZE,
+  CARD_TONES,
+  COLOR_SCHEMES,
   COLOR_VARIANTS,
   CONTAINER_SCALE,
+  ELEMENT_TONES,
   FONT_CODE_SIZE,
   FONT_HEADING_SIZE,
   FONT_LABEL_SIZE,
@@ -11,21 +14,22 @@ import {
   RADIUS,
   SHADOW,
   SPACE,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_SCHEMES,
-  THEME_COLOR_STATE_TONES,
 } from '@sanity/ui/theme'
 import {createThemeContract, createVar} from '@vanilla-extract/css'
 
 import {_fromEntries} from './_fromEntries'
-import type {_CSSThemeWithoutPalette, CSSThemeColorPalette} from './types'
+import type {
+  ColorPaletteTokens,
+  ColorPaletteVars,
+  RootThemeTokens,
+  ThemeContract,
+  ThemeTokens,
+  ThemeVars,
+} from './types'
 
-/** @public */
-export const paletteVars = createThemeContract({
+const paletteTokens: ColorPaletteTokens = {
   black: '',
   white: '',
-
-  // hues
   ..._fromEntries(
     COLOR_HUES.map((h) => [
       h,
@@ -34,9 +38,12 @@ export const paletteVars = createThemeContract({
       },
     ]),
   ),
-}) satisfies CSSThemeColorPalette
+}
+
+/** @public */
+export const paletteVars: ColorPaletteVars = createThemeContract(paletteTokens)
 
-const _themeVars = createThemeContract({
+const themeTokens: ThemeTokens = {
   avatar: {
     focusRing: {
       offset: '',
@@ -71,29 +78,20 @@ const _themeVars = createThemeContract({
   color: {
     // schemes
     ..._fromEntries(
-      THEME_COLOR_SCHEMES.map((s) => [
+      COLOR_SCHEMES.map((s) => [
         s,
         {
           ..._fromEntries(
-            THEME_COLOR_CARD_TONES.map((t) => [
+            CARD_TONES.map((t) => [
               t,
               {
                 avatar: {
                   ..._fromEntries(AVATAR_COLORS.map((c) => [c, {bg: '', fg: ''}])),
                 },
                 backdrop: '',
-                // bg: {
-                //   '0': '',
-                //   '4': '',
-                // },
-                // border: {
-                //   '0': '',
-                //   '4': '',
-                // },
                 code: {
                   bg: '',
                   fg: '',
-
                   token: {
                     atrule: '',
                     attrName: '',
@@ -133,34 +131,26 @@ const _themeVars = createThemeContract({
                     variable: '',
                   },
                 },
-                // fg: {
-                //   '0': '',
-                //   '4': '',
-                // },
-
                 focusRing: '',
                 link: {
                   fg: '',
                 },
-
                 shadow: {
                   outline: '',
                   umbra: '',
                   penumbra: '',
                   ambient: '',
                 },
-
                 skeleton: {
                   from: '',
                   to: '',
                 },
-
                 ..._fromEntries(
                   COLOR_VARIANTS.map((v) => [
                     v,
                     {
                       ..._fromEntries(
-                        THEME_COLOR_STATE_TONES.map((t) => [
+                        ELEMENT_TONES.map((t) => [
                           t,
                           {
                             bg: {
@@ -358,13 +348,15 @@ const _themeVars = createThemeContract({
   space: {
     ..._fromEntries(SPACE.map((s) => [s, ''])),
   },
-}) satisfies _CSSThemeWithoutPalette
+}
+
+const _themeVars: ThemeContract<ThemeTokens> = createThemeContract(themeTokens)
 
 /**
  * Variables to be defined in a theme.
  *
  * @public */
-export const themeVars = {
+export const themeVars: ThemeContract<RootThemeTokens> = {
   ..._themeVars,
   color: {
     ..._themeVars.color,
@@ -377,7 +369,7 @@ export const themeVars = {
  *
  * @public
  */
-export const vars = {
+export const vars: ThemeVars = {
   ...themeVars,
   avatar: {
     ...themeVars.avatar,
@@ -391,6 +383,10 @@ export const vars = {
     ...themeVars.button,
     boxShadow: createVar(),
   },
+  card: {
+    ...themeVars.card,
+    test: createVar(),
+  },
   color: {
     ...themeVars.color,
     avatar: {
@@ -486,13 +482,14 @@ export const vars = {
       from: createVar(),
       to: createVar(),
     },
+
     // variants
     ..._fromEntries(
       COLOR_VARIANTS.map((v) => [
         v,
         {
           ..._fromEntries(
-            THEME_COLOR_STATE_TONES.map((t) => [
+            ELEMENT_TONES.map((t) => [
               t,
               {
                 bg: {
@@ -525,7 +522,7 @@ export const vars = {
 
     // tones
     ..._fromEntries(
-      THEME_COLOR_CARD_TONES.map((t) => [
+      CARD_TONES.map((t) => [
         t,
         {
           avatar: {
@@ -601,7 +598,7 @@ export const vars = {
               v,
               {
                 ..._fromEntries(
-                  THEME_COLOR_STATE_TONES.map((t) => [
+                  ELEMENT_TONES.map((t) => [
                     t,
                     {
                       bg: {

package/src/theme/{v3/_parseColorToken.ts → _parseColorToken.ts}

@@ -1,5 +1,5 @@
-import type {ColorToken} from './color'
-import {type Hue, HUES, type Tint, TINTS} from './palette'
+import {HUES, TINTS} from './constants'
+import type {ColorToken, Hue, Tint} from './types'
 
 const RE_PERCENTAGE = /^([0-9]+)%/
 const RE_OPACITY = /^(1|0\.[0-9]+)?/

package/src/theme/buildTheme.ts

@@ -0,0 +1,33 @@
+import {black, hues, white} from '@sanity/color'
+
+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'
+
+/** @public */
+export function buildTheme(options?: Options): Theme {
+  const tokens = resolveTokens({
+    ...options?.tokens,
+    color: options?.tokens?.color ?? defaultColor,
+  })
+
+  return {
+    _version: 3,
+    _tokens: tokens,
+    avatar: defaultTheme.avatar,
+    button: defaultTheme.button,
+    card: defaultTheme.card,
+    color: tokens.color,
+    container: defaultTheme.container,
+    font: defaultFonts,
+    input: defaultTheme.input,
+    layer: defaultTheme.layer,
+    media: defaultTheme.media,
+    palette: {black, white, hues},
+    radius: defaultTheme.radius,
+    shadow: defaultTheme.shadow,
+    space: defaultTheme.space,
+  }
+}

package/src/theme/constants.ts

@@ -0,0 +1,90 @@
+/** @public */
+export const HUES = [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+] as const
+
+/** @public */
+export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+
+/** @public */
+export const AVATAR_SIZE = [0, 1, 2, 3] as const
+
+/** @public */
+export const CONTAINER_SCALE = [0, 1, 2, 3, 4, 5] as const
+
+/** @public */
+export const CONTAINER: [...typeof CONTAINER_SCALE, 'auto'] = [...CONTAINER_SCALE, 'auto']
+
+/** @public */
+export const RADIUS = [0, 1, 2, 3, 4, 5, 6] as const
+
+/** @public */
+export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
+
+/** @public */
+export const FONT_CODE_SIZE = [0, 1, 2, 3, 4] as const
+
+/** @public */
+export const FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5] as const
+
+/** @public */
+export const FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5] as const
+
+/** @public */
+export const FONT_TEXT_SIZE = [0, 1, 2, 3, 4] as const
+
+/** @public */
+export const SHADOW = [0, 1, 2, 3, 4, 5] as const
+
+/** @public */
+export const COLOR_SCHEMES = ['light', 'dark'] as const
+
+/** @public */
+export const COLOR_VARIANTS = ['tinted', 'solid'] as const
+
+/** @public */
+export const AVATAR_COLORS = [
+  'gray',
+  'blue',
+  'purple',
+  'magenta',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+] as const
+
+/** @public */
+export const CARD_TONES = [
+  'transparent',
+  'default',
+  'neutral',
+  'primary', // selections
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const ELEMENT_TONES = [
+  'default',
+  'neutral',
+  'primary', // selections
+  'suggest',
+  'positive',
+  'caution',
+  'critical',
+] as const
+
+/** @public */
+export const BUTTON_MODES = ['default', 'ghost', 'bleed'] as const