@sanity/ui 3.0.0-static.3 → 3.0.0-static.30

package/src/theme/v3/defaultTokens.ts

@@ -0,0 +1,199 @@
+import type {PartialTokens, Tokens} from './tokens'
+
+/** @internal */
+export const defaultTokens: PartialTokens<Tokens> = {
+  color: {
+    '*': {
+      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/v3/index.ts

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

package/src/theme/v3/palette/constants.ts

@@ -0,0 +1,15 @@
+/** @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

package/src/theme/v3/palette/types.ts

@@ -0,0 +1,7 @@
+import {type HUES, type TINTS} from './constants'
+
+/** @public */
+export type Hue = (typeof HUES)[number]
+
+/** @public */
+export type Tint = (typeof TINTS)[number]

package/src/theme/v3/resolveTokens.ts

@@ -1,13 +1,13 @@
 import {
   THEME_COLOR_CARD_TONES,
   THEME_COLOR_STATE_TONES,
-  ThemeColorCardToneKey,
-  ThemeColorStateToneKey,
+  type ThemeColorCardToneKey,
+  type ThemeColorStateToneKey,
 } from '../v2'
-import {CardColorTokens} from './color/card'
-import {ElementColorTokens} from './color/element'
+import type {CardColorTokens} from './color/card'
+import type {ElementColorTokens} from './color/element'
 import {merge} from './merge'
-import {PartialTokens, Tokens} from './tokens'
+import type {PartialTokens, Tokens} from './tokens'
 
 const defaultElementTokens: ElementColorTokens = {
   _hue: 'gray',
@@ -52,54 +52,96 @@ function resolveCardColorTokens(
     avatar: {
       gray: {
         _hue: tokens?.avatar?.gray?._hue ?? 'gray',
-        bg: tokens?.avatar?.gray?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.gray?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.gray?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.gray?.fg ?? ['white', '900'],
       },
       blue: {
         _hue: tokens?.avatar?.blue?._hue ?? 'blue',
-        bg: tokens?.avatar?.blue?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.blue?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.blue?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.blue?.fg ?? ['white', '900'],
       },
       purple: {
         _hue: tokens?.avatar?.purple?._hue ?? 'purple',
-        bg: tokens?.avatar?.purple?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.purple?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.purple?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.purple?.fg ?? ['white', '900'],
       },
       magenta: {
         _hue: tokens?.avatar?.magenta?._hue ?? 'magenta',
-        bg: tokens?.avatar?.magenta?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.magenta?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.magenta?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.magenta?.fg ?? ['white', '900'],
       },
       red: {
         _hue: tokens?.avatar?.red?._hue ?? 'red',
-        bg: tokens?.avatar?.red?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.red?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.red?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.red?.fg ?? ['white', '900'],
       },
       orange: {
         _hue: tokens?.avatar?.orange?._hue ?? 'orange',
-        bg: tokens?.avatar?.orange?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.orange?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.orange?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.orange?.fg ?? ['white', '900'],
       },
       yellow: {
         _hue: tokens?.avatar?.yellow?._hue ?? 'yellow',
-        bg: tokens?.avatar?.yellow?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.yellow?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.yellow?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.yellow?.fg ?? ['white', '900'],
       },
       green: {
         _hue: tokens?.avatar?.green?._hue ?? 'green',
-        bg: tokens?.avatar?.green?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.green?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.green?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.green?.fg ?? ['white', '900'],
       },
       cyan: {
         _hue: tokens?.avatar?.cyan?._hue ?? 'cyan',
-        bg: tokens?.avatar?.cyan?.bg ?? ['400', '400'],
-        fg: tokens?.avatar?.cyan?.fg ?? ['900', '900'],
+        bg: tokens?.avatar?.cyan?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['white', '900'],
+      },
+    },
+    backdrop: tokens?.backdrop ?? ['100', '900'],
+    code: {
+      bg: tokens?.code?.bg ?? ['50', '950'],
+      fg: tokens?.code?.fg ?? ['600', '400'],
+      token: {
+        atrule: tokens?.code?.token?.atrule ?? ['600', '400'],
+        attribute: tokens?.code?.token?.attribute ?? ['600', '400'],
+        attrName: tokens?.code?.token?.attrName ?? ['600', '400'],
+        attrValue: tokens?.code?.token?.attrValue ?? ['600', '400'],
+        boolean: tokens?.code?.token?.boolean ?? ['600', '400'],
+        builtin: tokens?.code?.token?.builtin ?? ['600', '400'],
+        cdata: tokens?.code?.token?.cdata ?? ['600', '400'],
+        char: tokens?.code?.token?.char ?? ['600', '400'],
+        class: tokens?.code?.token?.class ?? ['600', '400'],
+        className: tokens?.code?.token?.className ?? ['600', '400'],
+        comment: tokens?.code?.token?.comment ?? ['400', '600'],
+        constant: tokens?.code?.token?.constant ?? ['600', '400'],
+        deleted: tokens?.code?.token?.deleted ?? ['600', '400'],
+        doctype: tokens?.code?.token?.doctype ?? ['600', '400'],
+        entity: tokens?.code?.token?.entity ?? ['600', '400'],
+        function: tokens?.code?.token?.function ?? ['600', '400'],
+        hexcode: tokens?.code?.token?.hexcode ?? ['600', '400'],
+        id: tokens?.code?.token?.id ?? ['600', '400'],
+        important: tokens?.code?.token?.important ?? ['600', '400'],
+        inserted: tokens?.code?.token?.inserted ?? ['600', '400'],
+        keyword: tokens?.code?.token?.keyword ?? ['600', '400'],
+        number: tokens?.code?.token?.number ?? ['600', '400'],
+        operator: tokens?.code?.token?.operator ?? ['600', '400'],
+        prolog: tokens?.code?.token?.prolog ?? ['600', '400'],
+        property: tokens?.code?.token?.property ?? ['600', '400'],
+        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['600', '400'],
+        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['600', '400'],
+        punctuation: tokens?.code?.token?.punctuation ?? ['600', '400'],
+        regex: tokens?.code?.token?.regex ?? ['600', '400'],
+        selector: tokens?.code?.token?.selector ?? ['600', '400'],
+        string: tokens?.code?.token?.string ?? ['600', '400'],
+        symbol: tokens?.code?.token?.symbol ?? ['600', '400'],
+        tag: tokens?.code?.token?.tag ?? ['600', '400'],
+        unit: tokens?.code?.token?.unit ?? ['600', '400'],
+        url: tokens?.code?.token?.url ?? ['600', '400'],
+        variable: tokens?.code?.token?.variable ?? ['600', '400'],
       },
     },
-    backdrop: tokens?.backdrop ?? ['900', '100'],
     focusRing: tokens?.focusRing ?? ['500', '500'],
     link: {
-      fg: tokens?.link?.fg ?? ['400', '600'],
+      fg: tokens?.link?.fg ?? ['600', '400'],
     },
     shadow: {
       outline: tokens?.shadow?.outline ?? ['500', '500'],
@@ -108,47 +150,10 @@ function resolveCardColorTokens(
       ambient: tokens?.shadow?.ambient ?? ['500', '500'],
     },
     skeleton: {
-      from: tokens?.skeleton?.from ?? ['900', '100'],
-      to: tokens?.skeleton?.to ?? ['950', '50'],
-    },
-    token: {
-      atrule: tokens?.token?.atrule ?? ['400', '600'],
-      attribute: tokens?.token?.attribute ?? ['400', '600'],
-      attrName: tokens?.token?.attrName ?? ['400', '600'],
-      attrValue: tokens?.token?.attrValue ?? ['400', '600'],
-      boolean: tokens?.token?.boolean ?? ['400', '600'],
-      builtin: tokens?.token?.builtin ?? ['400', '600'],
-      cdata: tokens?.token?.cdata ?? ['400', '600'],
-      char: tokens?.token?.char ?? ['400', '600'],
-      class: tokens?.token?.class ?? ['400', '600'],
-      className: tokens?.token?.className ?? ['400', '600'],
-      comment: tokens?.token?.comment ?? ['600', '400'],
-      constant: tokens?.token?.constant ?? ['400', '600'],
-      deleted: tokens?.token?.deleted ?? ['400', '600'],
-      doctype: tokens?.token?.doctype ?? ['400', '600'],
-      entity: tokens?.token?.entity ?? ['400', '600'],
-      function: tokens?.token?.function ?? ['400', '600'],
-      hexcode: tokens?.token?.hexcode ?? ['400', '600'],
-      id: tokens?.token?.id ?? ['400', '600'],
-      important: tokens?.token?.important ?? ['400', '600'],
-      inserted: tokens?.token?.inserted ?? ['400', '600'],
-      keyword: tokens?.token?.keyword ?? ['400', '600'],
-      number: tokens?.token?.number ?? ['400', '600'],
-      operator: tokens?.token?.operator ?? ['400', '600'],
-      prolog: tokens?.token?.prolog ?? ['400', '600'],
-      property: tokens?.token?.property ?? ['400', '600'],
-      pseudoClass: tokens?.token?.pseudoClass ?? ['400', '600'],
-      pseudoElement: tokens?.token?.pseudoElement ?? ['400', '600'],
-      punctuation: tokens?.token?.punctuation ?? ['400', '600'],
-      regex: tokens?.token?.regex ?? ['400', '600'],
-      selector: tokens?.token?.selector ?? ['400', '600'],
-      string: tokens?.token?.string ?? ['400', '600'],
-      symbol: tokens?.token?.symbol ?? ['400', '600'],
-      tag: tokens?.token?.tag ?? ['400', '600'],
-      unit: tokens?.token?.unit ?? ['400', '600'],
-      url: tokens?.token?.url ?? ['400', '600'],
-      variable: tokens?.token?.variable ?? ['400', '600'],
+      from: tokens?.skeleton?.from ?? ['100', '900'],
+      to: tokens?.skeleton?.to ?? ['50', '950'],
     },
+
     variant: {
       solid: {
         '*': resolveElementTokens(tokens?.variant?.solid?.['*']),

package/src/theme/v3/tokens.ts

@@ -1,5 +1,5 @@
-import {ColorToken} from './color/token'
-import {ColorTokens} from './color/tokens'
+import type {ColorToken} from './color/token'
+import type {ColorTokens} from './color/tokens'
 
 /** @public */
 export interface Tokens {

package/src/theme/v3/types.ts

@@ -1,9 +1,60 @@
-import {ThemeConfig} from '../config'
-import {PaletteConfig} from '../palette'
-import {ThemeFocusRing, ThemeFonts, ThemeFontWeightKey, ThemeLayer, ThemeShadow} from '../v0'
-import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
-import {ThemeColor_v3} from './color'
-import {PartialTokens, Tokens} from './tokens'
+import type {ColorHues, ColorTint} from '@sanity/color'
+
+import type {
+  ThemeFocusRing,
+  ThemeFontWeight,
+  ThemeFontWeightKey,
+  ThemeLayer,
+  ThemeShadow,
+} from '../v0'
+import type {ThemeAvatar_v2, ThemeConfig, ThemeInput_v2} from '../v2'
+import type {
+  AVATAR_SIZE,
+  CONTAINER,
+  CONTAINER_SCALE,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  RADIUS,
+  SHADOW,
+  SPACE,
+} from './_constants'
+import type {ThemeColor_v3} from './color'
+import type {PartialTokens, Tokens} from './tokens'
+
+/** @public */
+export type AvatarSize = (typeof AVATAR_SIZE)[number]
+
+/** @public */
+export type ContainerScale = (typeof CONTAINER_SCALE)[number]
+
+/** @public */
+export type ContainerWidth = (typeof CONTAINER)[number]
+
+/** @public */
+export type Radius = (typeof RADIUS)[number] // | 'full'
+
+/** @public */
+export type Space = (typeof SPACE)[number]
+
+/** @public */
+export type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/** @public */
+export type FontCodeSize = (typeof FONT_CODE_SIZE)[number]
+
+/** @public */
+export type FontHeadingSize = (typeof FONT_HEADING_SIZE)[number]
+
+/** @public */
+export type FontLabelSize = (typeof FONT_LABEL_SIZE)[number]
+
+/** @public */
+export type FontTextSize = (typeof FONT_TEXT_SIZE)[number]
+
+/** @public */
+export type Shadow = (typeof SHADOW)[number]
 
 /** @public */
 export type ThemeEntry = [`--${string}`, string]
@@ -11,10 +62,43 @@ export type ThemeEntry = [`--${string}`, string]
 /** @public */
 export interface ThemeOptions {
   v2?: ThemeConfig
-  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
+/** @public */
+export interface ThemePalette_v3 {
+  black: ColorTint
+  white: ColorTint
+  hues: ColorHues
+}
+
+/** @public */
+export interface ThemeFontSize_v3 {
+  ascenderHeight: number
+  descenderHeight: number
+  fontSize: number
+  iconSize: number
+  letterSpacing: number
+  lineHeight: number
+  customIconSize: number
+}
+
+/** @public */
+export interface ThemeFont_v3 {
+  family: string
+  featureSettings?: string
+  weight: ThemeFontWeight
+  scale: ThemeFontSize_v3[]
+}
+
+/** @public */
+export interface ThemeFonts_v3 {
+  code: ThemeFont_v3
+  heading: ThemeFont_v3
+  label: ThemeFont_v3
+  text: ThemeFont_v3
+}
+
 /**
  * Supersedes `RootTheme` and `RootTheme_v2`.
  *
@@ -22,7 +106,6 @@ export interface ThemeOptions {
  */
 export interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {
@@ -38,11 +121,13 @@ export interface Theme_v3 {
   color: ThemeColor_v3
   // color: ThemeColorSchemes_v2
   container: number[]
-  font: ThemeFonts
+  font: ThemeFonts_v3
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
-  radius: number[]
-  shadow: Array<ThemeShadow | null>
-  space: number[]
+  palette: ThemePalette_v3
+  radius: Record<Radius, number>
+  // shadow: Array<ThemeShadow | null>
+  shadow: Record<Shadow, ThemeShadow | undefined>
+  space: Record<Space, number>
 }

package/src/theme/versioning/getTheme_v2.ts

@@ -1,6 +1,6 @@
-import {defaultThemeConfig} from '../defaults/config'
-import {Theme} from '../types'
-import {Theme_v2} from '../v2'
+import type {Theme} from '../types'
+import type {Theme_v2} from '../v2'
+import {defaultThemeConfig} from '../v2/defaults/config'
 import {themeColor_v0_v2} from './themeColor_v0_v2'
 
 const cache = new WeakMap<Theme, Theme_v2>()

package/src/theme/versioning/is_v0.ts

@@ -1,5 +1,5 @@
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import type {RootTheme} from '../types'
+import type {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme {

package/src/theme/versioning/is_v2.ts

@@ -1,5 +1,5 @@
-import {RootTheme} from '../types'
-import {RootTheme_v2} from '../v2'
+import type {RootTheme} from '../types'
+import type {RootTheme_v2} from '../v2'
 
 /** @internal */
 export function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2 {

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -1,11 +1,11 @@
-import {
+import type {
   ThemeColor,
   ThemeColorGenericState,
   ThemeColorInputState,
   ThemeColorInputStates,
   ThemeColorMuted,
 } from '../v0'
-import {
+import type {
   ThemeColorCard_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,

package/src/theme/versioning/themeColor_v2_v2_9.ts

@@ -1,4 +1,4 @@
-import {ThemeColorCard_v2} from '../v2'
+import type {ThemeColorCard_v2} from '../v2'
 
 /**
  * Apply `neutral` and `suggest` if they're not already part of the color object,