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

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

package/src/theme/defaults/color.ts

@@ -0,0 +1,197 @@
+import type {ColorTokens, PartialTokens} from '../types'
+
+/** @internal */
+export const defaultColor: PartialTokens<ColorTokens> = {
+  '*': {
+    backdrop: ['gray-100/0.5', 'black/0.5'],
+    code: {
+      bg: ['50', '950'],
+      fg: ['700', '300'],
+      token: {
+        atrule: ['purple-600', 'purple-400'],
+        attrName: ['green-600', 'green-400'],
+        attrValue: ['yellow-600', 'yellow-400'],
+        attribute: ['yellow-600', 'yellow-400'],
+        boolean: ['purple-600', 'purple-400'],
+        builtin: ['purple-600', 'purple-400'],
+        cdata: ['yellow-600', 'yellow-400'],
+        char: ['yellow-600', 'yellow-400'],
+        class: ['orange-600', 'orange-400'],
+        className: ['cyan-600', 'cyan-400'],
+        comment: ['gray-400', 'gray-600'],
+        constant: ['purple-600', 'purple-400'],
+        deleted: ['red-600', 'red-400'],
+        entity: ['red-600', 'red-400'],
+        function: ['green-600', 'green-400'],
+        hexcode: ['blue-600', 'blue-400'],
+        id: ['purple-600', 'purple-400'],
+        important: ['purple-600', 'purple-400'],
+        inserted: ['green-600', 'green-400'],
+        keyword: ['magenta-600', 'magenta-400'],
+        number: ['purple-600', 'purple-400'],
+        operator: ['magenta-600', 'magenta-400'],
+        prolog: ['gray-600', 'gray-400'],
+        property: ['blue-600', 'blue-400'],
+        pseudoClass: ['yellow-600', 'yellow-400'],
+        pseudoElement: ['yellow-600', 'yellow-400'],
+        punctuation: ['gray-600', 'gray-400'],
+        regex: ['blue-600', 'blue-400'],
+        selector: ['red-600', 'red-400'],
+        string: ['yellow-600', 'yellow-400'],
+        symbol: ['purple-600', 'purple-400'],
+        tag: ['red-600', 'red-400'],
+        unit: ['orange-600', 'orange-400'],
+        url: ['red-600', 'red-400'],
+        variable: ['red-600', 'red-400'],
+      },
+    },
+    focusRing: ['blue-500', 'blue-500'],
+    link: {
+      fg: ['blue-600', 'blue-400'],
+    },
+    shadow: {
+      outline: ['600/0.3', '500/0.4'],
+      umbra: ['600/0.1', 'black/0.2'],
+      penumbra: ['600/0.07', 'black/0.14'],
+      ambient: ['600/0.06', 'black/0.12'],
+    },
+    skeleton: {
+      from: ['200 70%', '800 35%'],
+      to: ['200 40%', '800 50%'],
+    },
+    variant: {
+      tinted: {
+        '*': {
+          bg: {
+            0: ['100 75%', '900 75%'],
+            4: ['300', '700'],
+          },
+          border: {
+            0: ['200', '700 50%'],
+            4: ['300 75%', '500'],
+          },
+          fg: {
+            0: ['900', '100'],
+            4: ['700', '300'],
+          },
+        },
+        'primary': {
+          _hue: 'blue',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'suggest': {
+          _hue: 'purple',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'positive': {
+          _hue: 'green',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'caution': {
+          _hue: 'yellow',
+          bg: {0: ['inherit', 'inherit']},
+        },
+        'critical': {
+          _hue: 'red',
+          bg: {0: ['inherit', 'inherit']},
+        },
+      },
+      solid: {
+        '*': {
+          bg: {
+            0: ['500', '400'],
+            4: ['600', '300'],
+          },
+          border: {
+            0: ['400', '200'],
+            4: ['500', '100'],
+          },
+          fg: {
+            0: ['white', 'black'],
+            4: ['200', '700'],
+          },
+        },
+        'default': {
+          bg: {
+            0: ['800', '200'],
+            4: ['black', 'white'],
+          },
+          border: {
+            0: ['700', '300'],
+            4: ['800', '200'],
+          },
+        },
+        'primary': {
+          _hue: 'blue',
+        },
+        'suggest': {
+          _hue: 'purple',
+        },
+        'positive': {
+          _hue: 'green',
+        },
+        'caution': {
+          _hue: 'yellow',
+        },
+        'critical': {
+          _hue: 'red',
+        },
+      },
+    },
+  },
+  'transparent': {
+    variant: {
+      tinted: {
+        '*': {
+          bg: {
+            0: ['gray-50', 'black'],
+            4: ['300 75%', '700 75%'],
+          },
+          border: {
+            0: ['200', '800 75%'],
+            4: ['400', '700'],
+          },
+          fg: {
+            0: ['black', '100'],
+            4: ['700', '400'],
+          },
+        },
+      },
+    },
+  },
+  'default': {
+    variant: {
+      tinted: {
+        '*': {
+          bg: {
+            0: ['white', '950'],
+            4: ['300 75%', '700'],
+          },
+          border: {
+            0: ['200', '800 75%'],
+            4: ['400', '700'],
+          },
+          fg: {
+            0: ['black', 'white'],
+            4: ['600', '400'],
+          },
+        },
+      },
+    },
+  },
+  'primary': {
+    _hue: 'blue',
+  },
+  'suggest': {
+    _hue: 'purple',
+  },
+  'positive': {
+    _hue: 'green',
+  },
+  'caution': {
+    _hue: 'yellow',
+  },
+  'critical': {
+    _hue: 'red',
+  },
+}

package/src/theme/{v2/defaults/config.ts → defaults/common.ts}

@@ -1,10 +1,9 @@
-import type {RootTheme_v2} from '../theme'
+import type {Theme} from '../types'
 
 const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
 
-export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
-  _version: 2,
+export const defaultTheme: Omit<Theme, '_version' | '_tokens' | 'color' | 'font' | 'palette'> = {
   avatar: {
     sizes: [
       {distance: -4, size: 19},
@@ -33,7 +32,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
   },
   radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
   shadow: [
-    null,
+    undefined,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
     {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
     {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
@@ -69,16 +68,4 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
       focusRing: {offset: -1, width: 1},
     },
   },
-  style: {
-    button: {
-      root: {
-        transition: 'background-color 100ms,border-color 100ms,color 100ms',
-      },
-    },
-    // card: {
-    //   root: {
-    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
-    //   },
-    // },
-  },
 }

package/src/theme/{v3/defaultFonts.ts → defaults/fonts.ts}

@@ -1,6 +1,6 @@
-import type {ThemeFonts_v3} from './types'
+import type {Fonts} from '../types'
 
-export const defaultThemeFonts: ThemeFonts_v3 = {
+export const defaultFonts: Fonts = {
   code: {
     family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
     weight: {

package/src/theme/index.ts

@@ -1,6 +1,5 @@
-export * from './getScopedTheme'
+export * from './_parseColorToken'
+export * from './buildTheme'
+export * from './constants'
+export * from './resolveTokens'
 export * from './types'
-export * from './v0'
-export * from './v2'
-export * from './v3'
-export * from './versioning'

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

@@ -1,13 +1,13 @@
-import {
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_STATE_TONES,
-  type ThemeColorCardToneKey,
-  type ThemeColorStateToneKey,
-} from '../v2'
-import type {CardColorTokens} from './color/card'
-import type {ElementColorTokens} from './color/element'
+import {CARD_TONES, ELEMENT_TONES} from './constants'
 import {merge} from './merge'
-import type {PartialTokens, Tokens} from './tokens'
+import type {
+  CardColorTokens,
+  CardTone,
+  ElementColorTokens,
+  ElementTone,
+  PartialTokens,
+  Tokens,
+} from './types'
 
 const defaultElementTokens: ElementColorTokens = {
   _hue: 'gray',
@@ -31,14 +31,14 @@ export function resolveTokens(tokens: PartialTokens<Tokens> = {}): Tokens {
     color: {
       '*': resolveCardColorTokens(tokens.color?.['*']),
 
-      ...THEME_COLOR_CARD_TONES.reduce(
+      ...CARD_TONES.reduce(
         (acc, tone) => {
           return {
             ...acc,
             [tone]: resolveCardColorTokens(merge(tokens.color?.['*'], tokens.color?.[tone])),
           }
         },
-        {} as Record<ThemeColorCardToneKey, CardColorTokens>,
+        {} as Record<CardTone, CardColorTokens>,
       ),
     },
   }
@@ -157,7 +157,7 @@ function resolveCardColorTokens(
     variant: {
       solid: {
         '*': resolveElementTokens(tokens?.variant?.solid?.['*']),
-        ...THEME_COLOR_STATE_TONES.reduce(
+        ...ELEMENT_TONES.reduce(
           (acc, tone) => {
             acc[tone] = resolveElementTokens(
               merge(tokens, tokens?.variant?.solid?.['*'], tokens?.variant?.solid?.[tone]),
@@ -165,12 +165,12 @@ function resolveCardColorTokens(
 
             return acc
           },
-          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+          {} as Record<ElementTone, ElementColorTokens>,
         ),
       },
       tinted: {
         '*': resolveElementTokens(tokens?.variant?.tinted?.['*']),
-        ...THEME_COLOR_STATE_TONES.reduce(
+        ...ELEMENT_TONES.reduce(
           (acc, tone) => {
             acc[tone] = resolveElementTokens(
               merge(tokens, tokens?.variant?.tinted?.['*'], tokens?.variant?.tinted?.[tone]),
@@ -178,7 +178,7 @@ function resolveCardColorTokens(
 
             return acc
           },
-          {} as Record<ThemeColorStateToneKey, ElementColorTokens>,
+          {} as Record<ElementTone, ElementColorTokens>,
         ),
       },
     },