@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

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,96 +52,96 @@ function resolveCardColorTokens(
     avatar: {
       gray: {
         _hue: tokens?.avatar?.gray?._hue ?? 'gray',
-        bg: tokens?.avatar?.gray?.bg ?? ['400', '500'],
-        fg: tokens?.avatar?.gray?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.blue?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.purple?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.magenta?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.red?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.orange?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.yellow?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.green?.fg ?? ['900', 'white'],
+        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', '500'],
-        fg: tokens?.avatar?.cyan?.fg ?? ['900', 'white'],
+        bg: tokens?.avatar?.cyan?.bg ?? ['500', '400'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['white', '900'],
       },
     },
-    backdrop: tokens?.backdrop ?? ['900', '100'],
+    backdrop: tokens?.backdrop ?? ['100', '900'],
     code: {
-      bg: tokens?.code?.bg ?? ['950', '50'],
-      fg: tokens?.code?.fg ?? ['400', '600'],
+      bg: tokens?.code?.bg ?? ['50', '950'],
+      fg: tokens?.code?.fg ?? ['600', '400'],
       token: {
-        atrule: tokens?.code?.token?.atrule ?? ['400', '600'],
-        attribute: tokens?.code?.token?.attribute ?? ['400', '600'],
-        attrName: tokens?.code?.token?.attrName ?? ['400', '600'],
-        attrValue: tokens?.code?.token?.attrValue ?? ['400', '600'],
-        boolean: tokens?.code?.token?.boolean ?? ['400', '600'],
-        builtin: tokens?.code?.token?.builtin ?? ['400', '600'],
-        cdata: tokens?.code?.token?.cdata ?? ['400', '600'],
-        char: tokens?.code?.token?.char ?? ['400', '600'],
-        class: tokens?.code?.token?.class ?? ['400', '600'],
-        className: tokens?.code?.token?.className ?? ['400', '600'],
-        comment: tokens?.code?.token?.comment ?? ['600', '400'],
-        constant: tokens?.code?.token?.constant ?? ['400', '600'],
-        deleted: tokens?.code?.token?.deleted ?? ['400', '600'],
-        doctype: tokens?.code?.token?.doctype ?? ['400', '600'],
-        entity: tokens?.code?.token?.entity ?? ['400', '600'],
-        function: tokens?.code?.token?.function ?? ['400', '600'],
-        hexcode: tokens?.code?.token?.hexcode ?? ['400', '600'],
-        id: tokens?.code?.token?.id ?? ['400', '600'],
-        important: tokens?.code?.token?.important ?? ['400', '600'],
-        inserted: tokens?.code?.token?.inserted ?? ['400', '600'],
-        keyword: tokens?.code?.token?.keyword ?? ['400', '600'],
-        number: tokens?.code?.token?.number ?? ['400', '600'],
-        operator: tokens?.code?.token?.operator ?? ['400', '600'],
-        prolog: tokens?.code?.token?.prolog ?? ['400', '600'],
-        property: tokens?.code?.token?.property ?? ['400', '600'],
-        pseudoClass: tokens?.code?.token?.pseudoClass ?? ['400', '600'],
-        pseudoElement: tokens?.code?.token?.pseudoElement ?? ['400', '600'],
-        punctuation: tokens?.code?.token?.punctuation ?? ['400', '600'],
-        regex: tokens?.code?.token?.regex ?? ['400', '600'],
-        selector: tokens?.code?.token?.selector ?? ['400', '600'],
-        string: tokens?.code?.token?.string ?? ['400', '600'],
-        symbol: tokens?.code?.token?.symbol ?? ['400', '600'],
-        tag: tokens?.code?.token?.tag ?? ['400', '600'],
-        unit: tokens?.code?.token?.unit ?? ['400', '600'],
-        url: tokens?.code?.token?.url ?? ['400', '600'],
-        variable: tokens?.code?.token?.variable ?? ['400', '600'],
+        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'],
       },
     },
     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'],
@@ -150,8 +150,8 @@ function resolveCardColorTokens(
       ambient: tokens?.shadow?.ambient ?? ['500', '500'],
     },
     skeleton: {
-      from: tokens?.skeleton?.from ?? ['900', '100'],
-      to: tokens?.skeleton?.to ?? ['950', '50'],
+      from: tokens?.skeleton?.from ?? ['100', '900'],
+      to: tokens?.skeleton?.to ?? ['50', '950'],
     },
 
     variant: {

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,8 +1,54 @@
-import {ThemeConfig} from '../config'
-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, ThemeFonts, 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]
@@ -13,6 +59,13 @@ export interface ThemeOptions {
   tokens?: PartialTokens<Tokens>
 }
 
+/** @public */
+export interface ThemePalette_v3 {
+  black: ColorTint
+  white: ColorTint
+  hues: ColorHues
+}
+
 /**
  * Supersedes `RootTheme` and `RootTheme_v2`.
  *
@@ -39,7 +92,8 @@ export interface Theme_v3 {
   input: ThemeInput_v2
   layer: ThemeLayer
   media: number[]
-  radius: number[]
+  palette: ThemePalette_v3
+  radius: Record<Radius, number>
   shadow: Array<ThemeShadow | null>
-  space: number[]
+  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,