@sanity/ui 3.0.0-static.1 → 3.0.0-static.10

package/src/theme/_constants.ts

@@ -0,0 +1,26 @@
+/** @public */
+export const AVATAR_SIZE = [0, 1, 2, 3] as const
+
+/** @public */
+export const CONTAINER = [0, 1, 2, 3, 4, 5, 'auto'] as const
+
+/** @public */
+export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full'] as const
+
+/** @public */
+export const SPACE = [0, 0.5, 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

package/src/theme/_types.ts

@@ -0,0 +1,41 @@
+import {
+  AVATAR_SIZE,
+  CONTAINER,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  RADIUS,
+  SHADOW,
+  SPACE,
+} from './_constants'
+
+/** @public */
+export type AvatarSize = (typeof AVATAR_SIZE)[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]

package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts

@@ -4,7 +4,7 @@ import {
   ThemeColorSelectable,
   ThemeColorSelectableStates,
   ThemeColorSolid,
-} from '../../../../system'
+} from '../../../../v0'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSelectableTones(

package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorSolid, ThemeColorName} from '../../../../system'
+import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../v0'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSolidTones(

package/src/theme/build/_deprecated/color/button/createButtonModes.ts

@@ -1,9 +1,4 @@
-import {
-  ThemeColorBase,
-  ThemeColorButton,
-  ThemeColorMuted,
-  ThemeColorSolid,
-} from '../../../../system'
+import {ThemeColorBase, ThemeColorButton, ThemeColorMuted, ThemeColorSolid} from '../../../../v0'
 import {ThemeColorBuilderOpts} from '../factory'
 import {createButtonTones} from './createButtonTones'
 

package/src/theme/build/_deprecated/color/button/createButtonTones.ts

@@ -1,10 +1,10 @@
 import {
   ThemeColorBase,
-  ThemeColorButtonModeKey,
   ThemeColorButtonTones,
   ThemeColorMuted,
   ThemeColorSolid,
-} from '../../../../system'
+} from '../../../../v0'
+import {ThemeColorButtonModeKey} from '../../../../v2'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createButtonTones(

package/src/theme/build/_deprecated/color/card/createCardStates.ts

@@ -2,9 +2,9 @@ import {
   ThemeColorBase,
   ThemeColorCard,
   ThemeColorMuted,
-  ThemeColorSolid,
   ThemeColorName,
-} from '../../../../system'
+  ThemeColorSolid,
+} from '../../../../v0'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createCardStates(

package/src/theme/build/_deprecated/color/factory.ts

@@ -1,21 +1,20 @@
 import {
-  ThemeColorGenericState,
+  ThemeColor,
   ThemeColorBase,
-  ThemeColorButtonModeKey,
   ThemeColorButtonStates,
+  ThemeColorGenericState,
   ThemeColorInputState,
   ThemeColorMuted,
   ThemeColorMutedTone,
-  ThemeColorSolid,
-  ThemeColorSolidTone,
-  ThemeColorSyntax,
   ThemeColorName,
   ThemeColorScheme,
   ThemeColorSchemes,
-  ThemeColor,
-  ThemeColorToneKey,
+  ThemeColorSolid,
+  ThemeColorSolidTone,
   ThemeColorSpotKey,
-} from '../../../system'
+  ThemeColorToneKey,
+} from '../../../v0'
+import {ThemeColorButtonModeKey, ThemeColorSyntax} from '../../../v2'
 import {createSelectableTones} from './_selectable/createSelectableTones'
 import {createSolidTones} from './_solid/createSolidTones'
 import {createButtonModes} from './button/createButtonModes'
@@ -34,7 +33,7 @@ export interface ThemeColorBuilderOpts {
   solid: (opts: {
     base: ThemeColorBase
     dark: boolean
-    tone: ThemeColorToneKey
+    tone: ThemeColorName
     name: ThemeColorName
     state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
   }) => ThemeColorGenericState

package/src/theme/build/_deprecated/color/input/createInputModes.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../system'
+import {ThemeColorBase, ThemeColorInput, ThemeColorMuted, ThemeColorSolid} from '../../../../v0'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createInputModes(

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -1,11 +1,11 @@
-import {ThemeColorBase, ThemeColorCardToneKey, ThemeColorMuted} from '../../../../system'
+import {ThemeColorBase, ThemeColorMuted, ThemeColorName} from '../../../../v0'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createMutedTones(
   opts: ThemeColorBuilderOpts,
   base: ThemeColorBase,
   dark: boolean,
-  name: ThemeColorCardToneKey,
+  name: ThemeColorName,
 ): ThemeColorMuted {
   return {
     default: {

package/src/theme/build/_deprecated/color/spot/createSpot.ts

@@ -1,4 +1,4 @@
-import {ThemeColorBase, ThemeColorSpot} from '../../../../system'
+import {ThemeColorBase, ThemeColorSpot} from '../../../../v0'
 import {ThemeColorBuilderOpts} from '../factory'
 
 export function createSpot(

package/src/theme/build/buildColorTheme.ts

@@ -1,30 +1,31 @@
 import {ThemeColorBadgeTokens, ThemeColorStateTokens, ThemeConfig} from '../config'
 import {
   THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_STATES,
+  THEME_COLOR_CARD_TONES,
   THEME_COLOR_STATE_TONES,
-  ThemeColorAvatarColorKey,
-  ThemeColorCardToneKey,
-  ThemeColorButtonModeKey,
-  ThemeColorStateKey,
-  ThemeColorStateToneKey,
+  THEME_COLOR_STATES,
   ThemeColorAvatar_v2,
+  ThemeColorAvatarColorKey,
+  ThemeColorAvatarHue_v2,
   ThemeColorBadge_v2,
-  ThemeColorSyntax,
-  ThemeColorSchemes_v2,
-  ThemeColorScheme_v2,
-  ThemeColorCard_v2,
-  ThemeColorSchemeKey,
-  ThemeColorShadow,
-  ThemeColorState_v2,
   ThemeColorButton_v2,
   ThemeColorButtonMode_v2,
+  ThemeColorButtonModeKey,
   ThemeColorButtonTone_v2,
-  ThemeColorAvatarHue_v2,
+  ThemeColorCard_v2,
+  ThemeColorCardToneKey,
   ThemeColorInput_v2,
   ThemeColorInputMode_v2,
   ThemeColorInputState_v2,
-} from '../system'
+  ThemeColorScheme_v2,
+  ThemeColorSchemeKey,
+  ThemeColorSchemes_v2,
+  ThemeColorShadow,
+  ThemeColorState_v2,
+  ThemeColorStateKey,
+  ThemeColorStateToneKey,
+  ThemeColorSyntax,
+} from '../v2'
 import {ColorTokenContext, resolveColorTokenValue as _color} from './colorToken'
 import {resolveColorTokens} from './resolveColorTokens'
 
@@ -46,14 +47,13 @@ function buildColorScheme(
 ): ThemeColorScheme_v2 {
   const {scheme} = options
 
-  return {
-    transparent: buildCardColorTheme({scheme, tone: 'transparent'}, config),
-    default: buildCardColorTheme({scheme, tone: 'default'}, config),
-    primary: buildCardColorTheme({scheme, tone: 'primary'}, config),
-    positive: buildCardColorTheme({scheme, tone: 'positive'}, config),
-    caution: buildCardColorTheme({scheme, tone: 'caution'}, config),
-    critical: buildCardColorTheme({scheme, tone: 'critical'}, config),
+  const colorScheme = {} as ThemeColorScheme_v2
+
+  for (const tone of THEME_COLOR_CARD_TONES) {
+    colorScheme[tone] = buildCardColorTheme({scheme, tone}, config)
   }
+
+  return colorScheme
 }
 
 function buildCardColorTheme(
@@ -77,7 +77,7 @@ function buildCardColorTheme(
     badge: buildBadgeColorTheme(tokens?.badge, {scheme}, config),
     bg: _color(context, tokens?.bg),
     border: _color(context, tokens?.border),
-    button: buildButtonColorTheme({scheme}, config),
+    button: buildButtonColorTheme({scheme, tone}, config),
     code: {
       bg: _color(context, tokens?.code?.bg),
       fg: _color(context, tokens?.code?.fg),
@@ -98,7 +98,7 @@ function buildCardColorTheme(
       bg: _color(context, tokens?.muted?.bg),
       fg: _color(context, tokens?.muted?.fg),
     },
-    selectable: buildSelectableColorTheme({scheme}, config),
+    selectable: buildSelectableColorTheme({scheme, tone}, config),
     shadow: buildShadowColorTheme({scheme, tone}, config),
     skeleton: {
       from: _color(context, tokens?.skeleton?.from),
@@ -167,13 +167,13 @@ function buildBadgeColorTheme(
 ): ThemeColorBadge_v2 {
   const {scheme} = options
 
-  return {
-    default: _buildBadgeColorTheme(tokens, {scheme, tone: 'default'}, config),
-    primary: _buildBadgeColorTheme(tokens, {scheme, tone: 'primary'}, config),
-    positive: _buildBadgeColorTheme(tokens, {scheme, tone: 'positive'}, config),
-    caution: _buildBadgeColorTheme(tokens, {scheme, tone: 'caution'}, config),
-    critical: _buildBadgeColorTheme(tokens, {scheme, tone: 'critical'}, config),
+  const colorBadge = {} as ThemeColorBadge_v2
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    colorBadge[tone] = _buildBadgeColorTheme(tokens, {scheme, tone}, config)
   }
+
+  return colorBadge
 }
 
 function _buildBadgeColorTheme(
@@ -195,15 +195,15 @@ function _buildBadgeColorTheme(
 }
 
 function buildButtonColorTheme(
-  options: {scheme: ThemeColorSchemeKey},
+  options: {scheme: ThemeColorSchemeKey; tone: ThemeColorCardToneKey},
   config?: ThemeConfig,
 ): ThemeColorButton_v2 {
-  const {scheme} = options
+  const {scheme, tone: cardTone} = options
 
   const modes: Partial<ThemeColorButton_v2> = {}
 
   for (const mode of THEME_COLOR_BUTTON_MODES) {
-    modes[mode] = buildButtonTonesColorTheme({scheme, mode}, config)
+    modes[mode] = buildButtonTonesColorTheme({cardTone, scheme, mode}, config)
   }
 
   return modes as ThemeColorButton_v2
@@ -211,17 +211,18 @@ function buildButtonColorTheme(
 
 function buildButtonTonesColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     mode: ThemeColorButtonModeKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonMode_v2 {
-  const {mode, scheme} = options
+  const {cardTone, mode, scheme} = options
 
   const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildButtonStatesColorTheme({mode, scheme, tone}, config)
+    tones[tone] = buildButtonStatesColorTheme({cardTone, mode, scheme, tone}, config)
   }
 
   return tones as ThemeColorButtonMode_v2
@@ -229,18 +230,19 @@ function buildButtonTonesColorTheme(
 
 function buildButtonStatesColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     mode: ThemeColorButtonModeKey
     scheme: ThemeColorSchemeKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonTone_v2 {
-  const {mode, scheme, tone} = options
+  const {cardTone, mode, scheme, tone} = options
 
   const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildButtonStateColorTheme({mode, tone, scheme, state}, config)
+    states[state] = buildButtonStateColorTheme({cardTone, mode, tone, scheme, state}, config)
   }
 
   return states as ThemeColorButtonTone_v2
@@ -248,6 +250,7 @@ function buildButtonStatesColorTheme(
 
 function buildButtonStateColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     mode: ThemeColorButtonModeKey
     tone: ThemeColorStateToneKey
     scheme: ThemeColorSchemeKey
@@ -255,9 +258,10 @@ function buildButtonStateColorTheme(
   },
   config?: ThemeConfig,
 ): ThemeColorState_v2 {
-  const {mode, tone, scheme, state} = options
+  const {cardTone, mode, tone, scheme, state} = options
+  const cardTokens = config?.color?.base?.[cardTone]
   const tokens = config?.color?.button?.[mode]?.[tone]?.[state]
-  const hue = tokens?._hue || 'gray'
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}
 
@@ -318,25 +322,26 @@ function buildInputStatesColorTheme(
   const {mode, scheme, tone} = options
 
   return {
-    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', tone}, config),
-    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', tone}, config),
-    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', tone}, config),
-    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', tone}, config),
+    enabled: buildInputStateColorTheme({mode, scheme, state: 'enabled', cardTone: tone}, config),
+    hovered: buildInputStateColorTheme({mode, scheme, state: 'hovered', cardTone: tone}, config),
+    readOnly: buildInputStateColorTheme({mode, scheme, state: 'readOnly', cardTone: tone}, config),
+    disabled: buildInputStateColorTheme({mode, scheme, state: 'disabled', cardTone: tone}, config),
   }
 }
 
 function buildInputStateColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     mode: 'default' | 'invalid'
     scheme: ThemeColorSchemeKey
     state: 'enabled' | 'hovered' | 'readOnly' | 'disabled'
-    tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorInputState_v2 {
-  const {mode, tone, scheme, state} = options
+  const {cardTone, mode, scheme, state} = options
+  const cardTokens = config?.color?.base?.[cardTone]
   const tokens = config?.color?.input?.[mode]?.[state]
-  const hue = tokens?._hue || config?.color?.base?.[tone]?._hue || 'gray'
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}
 
@@ -355,15 +360,16 @@ function buildInputStateColorTheme(
 function buildSelectableColorTheme(
   options: {
     scheme: ThemeColorSchemeKey
+    tone: ThemeColorCardToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonMode_v2 {
-  const {scheme} = options
+  const {scheme, tone: cardTone} = options
 
   const tones: Partial<ThemeColorButtonMode_v2> = {}
 
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildSelectableStatesColorTheme({scheme, tone}, config)
+    tones[tone] = buildSelectableStatesColorTheme({cardTone, scheme, tone}, config)
   }
 
   return tones as ThemeColorButtonMode_v2
@@ -371,17 +377,18 @@ function buildSelectableColorTheme(
 
 function buildSelectableStatesColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorButtonTone_v2 {
-  const {scheme, tone} = options
+  const {cardTone, scheme, tone} = options
 
   const states: Partial<ThemeColorButtonTone_v2> = {}
 
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildSelectableStateColorTheme({tone, scheme, state}, config)
+    states[state] = buildSelectableStateColorTheme({cardTone, tone, scheme, state}, config)
   }
 
   return states as ThemeColorButtonTone_v2
@@ -389,15 +396,18 @@ function buildSelectableStatesColorTheme(
 
 function buildSelectableStateColorTheme(
   options: {
+    cardTone: ThemeColorCardToneKey
     scheme: ThemeColorSchemeKey
     state: ThemeColorStateKey
     tone: ThemeColorStateToneKey
   },
   config?: ThemeConfig,
 ): ThemeColorState_v2 {
-  const {scheme, state, tone} = options
+  const {cardTone, scheme, state, tone} = options
+  const cardTokens = config?.color?.base?.[cardTone]
   const tokens = config?.color?.selectable?.[tone]?.[state]
-  const hue = tokens?._hue || 'gray'
+
+  const hue = tokens?._hue || cardTokens?._hue || 'gray'
   const blendMode = tokens?._blend || ['screen', 'multiply']
   const context: ColorTokenContext = {hue, scheme}
 

package/src/theme/build/buildTheme.ts

@@ -1,36 +1,12 @@
-import {ThemeConfig} from '../config'
-import {defaultThemeConfig} from '../defaults/config'
-import {defaultThemeFonts} from '../defaults/fonts'
-import {RootTheme, RootTheme_v2} from '../system'
-import {v2_v0} from '../versioning'
-import {buildColorTheme} from './buildColorTheme'
-import {renderThemeColorSchemes} from './renderColorTheme'
+import {type ThemeConfig} from '../config'
+import {type RootTheme} from '../types'
+import {buildTheme_v3} from '../v3'
+import {v2_v0} from '../versioning/v2_v0'
+import {v3_v2} from '../versioning/v3_v2'
 
 /** @internal */
-export function buildTheme(config?: ThemeConfig): RootTheme {
-  const colorTheme = buildColorTheme(config)
+export function buildTheme(_config?: ThemeConfig): RootTheme {
+  const v3 = buildTheme_v3({v2: _config})
 
-  const v2: RootTheme_v2 = {
-    _version: 2,
-    avatar: config?.avatar ?? defaultThemeConfig.avatar,
-    button: config?.button ?? defaultThemeConfig.button,
-    card: config?.card ?? defaultThemeConfig.card,
-    // How colors are generated:
-    // 1. Merge custom tokens with default tokens
-    // 2. Generate tree of color keys (gray/500, black, white, etc.)
-    // 3. Apply mixing and render to hex values
-    // render(build(mergeWithDefaults()))
-    color: renderThemeColorSchemes(colorTheme, config),
-    container: config?.container ?? defaultThemeConfig.container,
-    font: config?.font ?? defaultThemeFonts,
-    input: config?.input ?? defaultThemeConfig.input,
-    layer: config?.layer ?? defaultThemeConfig.layer,
-    media: config?.media ?? defaultThemeConfig.media,
-    radius: config?.radius ?? defaultThemeConfig.radius,
-    shadow: config?.shadow ?? defaultThemeConfig.shadow,
-    space: config?.space ?? defaultThemeConfig.space,
-    style: config?.style ?? defaultThemeConfig.style,
-  }
-
-  return v2_v0(v2)
+  return v2_v0(v3_v2(v3), v3)
 }

package/src/theme/build/colorToken/colorToken.ts

@@ -1,4 +1,4 @@
-import {ThemeColorTokenValue, parseTokenValue} from '../../config'
+import {parseTokenValue, ThemeColorTokenValue} from '../../config'
 import {compileColorTokenValue} from './compileColorToken'
 import {ColorTokenContext} from './types'
 

package/src/theme/build/lib/color-fns/rgba.ts

@@ -4,6 +4,10 @@ import {parseColor} from './parse'
  * @internal
  */
 export function rgba(color: unknown, a: number): string {
+  if (typeof color === 'string' && color.startsWith('var(')) {
+    return `color-mix(in srgb, transparent, ${color} ${a * 100}%)`
+  }
+
   const rgb = parseColor(color)
 
   return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`

package/src/theme/build/merge.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import {isRecord} from './lib/isRecord'
 
 export function merge<T extends Record<string, any>>(...records: (T | undefined)[]): T {

package/src/theme/build/mixThemeColor.ts

@@ -1,4 +1,4 @@
-import {RGB, multiply, parseColor, rgbToHex, screen} from './lib/color-fns'
+import {multiply, parseColor, RGB, rgbToHex, screen} from './lib/color-fns'
 import {clamp, range} from './lib/utils'
 
 const RGB_RANGE: [number, number] = [0, 255]