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

package/src/css/vars.ts

@@ -1,3 +1,4 @@
+import {COLOR_HUES, COLOR_TINTS, ColorHueKey, ColorTintKey} from '@sanity/color'
 import {
   AVATAR_SIZE,
   AvatarSize,
@@ -11,6 +12,8 @@ import {
   type FontTextSize,
   RADIUS,
   Radius,
+  SHADOW,
+  Shadow,
   SPACE,
   type Space,
   THEME_COLOR_AVATAR_COLORS,
@@ -44,9 +47,6 @@ for (const tone of THEME_COLOR_CARD_TONES) {
 }
 
 const colorVars: Vars['color'] = {
-  accent: {
-    fg: `var(${varNames.color.accent.fg})`,
-  },
   avatar: {
     bg: `var(${varNames.color.avatar.bg})`,
     fg: `var(${varNames.color.avatar.fg})`,
@@ -173,6 +173,7 @@ const colorVars: Vars['color'] = {
   light: lightColorVars,
 }
 
+/** @public */
 export const vars: Vars = {
   avatar: {
     distance: `var(${varNames.avatar.distance})`,
@@ -190,6 +191,11 @@ export const vars: Vars = {
       {} as Record<AvatarSize, {distance: CSSVar; size: CSSVar}>,
     ),
   },
+  card: {
+    shadow: {
+      outline: `var(${varNames.card.shadow.outline})`,
+    },
+  },
   color: colorVars,
   container: {
     0: `var(${varNames.container[0]})`,
@@ -219,10 +225,10 @@ export const vars: Vars = {
         {} as Record<FontCodeSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.code.weight.regular})`,
-        medium: `var(${varNames.font.code.weight.medium})`,
-        semibold: `var(${varNames.font.code.weight.semibold})`,
-        bold: `var(${varNames.font.code.weight.bold})`,
+        regular: `var(${varNames.font.code.weights.regular})`,
+        medium: `var(${varNames.font.code.weights.medium})`,
+        semibold: `var(${varNames.font.code.weights.semibold})`,
+        bold: `var(${varNames.font.code.weights.bold})`,
       },
     },
     heading: {
@@ -244,10 +250,10 @@ export const vars: Vars = {
         {} as Record<FontHeadingSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.heading.weight.regular})`,
-        medium: `var(${varNames.font.heading.weight.medium})`,
-        semibold: `var(${varNames.font.heading.weight.semibold})`,
-        bold: `var(${varNames.font.heading.weight.bold})`,
+        regular: `var(${varNames.font.heading.weights.regular})`,
+        medium: `var(${varNames.font.heading.weights.medium})`,
+        semibold: `var(${varNames.font.heading.weights.semibold})`,
+        bold: `var(${varNames.font.heading.weights.bold})`,
       },
     },
     label: {
@@ -269,10 +275,10 @@ export const vars: Vars = {
         {} as Record<FontLabelSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.label.weight.regular})`,
-        medium: `var(${varNames.font.label.weight.medium})`,
-        semibold: `var(${varNames.font.label.weight.semibold})`,
-        bold: `var(${varNames.font.label.weight.bold})`,
+        regular: `var(${varNames.font.label.weights.regular})`,
+        medium: `var(${varNames.font.label.weights.medium})`,
+        semibold: `var(${varNames.font.label.weights.semibold})`,
+        bold: `var(${varNames.font.label.weights.bold})`,
       },
     },
     text: {
@@ -294,10 +300,10 @@ export const vars: Vars = {
         {} as Record<FontTextSize, FontSizeVars>,
       ),
       weight: {
-        regular: `var(${varNames.font.text.weight.regular})`,
-        medium: `var(${varNames.font.text.weight.medium})`,
-        semibold: `var(${varNames.font.text.weight.semibold})`,
-        bold: `var(${varNames.font.text.weight.bold})`,
+        regular: `var(${varNames.font.text.weights.regular})`,
+        medium: `var(${varNames.font.text.weights.medium})`,
+        semibold: `var(${varNames.font.text.weights.semibold})`,
+        bold: `var(${varNames.font.text.weights.bold})`,
       },
     },
   },
@@ -322,9 +328,37 @@ export const vars: Vars = {
   radius: Object.fromEntries(
     RADIUS.map((radius) => [radius, `var(${varNames.radius[radius]})` as const]),
   ) as Record<Radius, CSSVar>,
+  shadow: Object.fromEntries(
+    SHADOW.map((shadow) => [
+      shadow,
+      {
+        umbra: `var(${varNames.shadow[shadow].umbra})`,
+        penumbra: `var(${varNames.shadow[shadow].penumbra})`,
+        ambient: `var(${varNames.shadow[shadow].ambient})`,
+      },
+    ]),
+  ) as Record<Shadow, {umbra: CSSVar; penumbra: CSSVar; ambient: CSSVar}>,
   space: Object.fromEntries(
     SPACE.map((space) => [space, `var(${varNames.space[space]})` as const]),
   ) as Record<Space, CSSVar>,
+
+  // color
+  black: `var(${varNames.black})`,
+  white: `var(${varNames.white})`,
+  ...COLOR_HUES.reduce(
+    (acc, hue) => {
+      const tints = {} as Record<ColorTintKey, CSSVar>
+
+      for (const tint of COLOR_TINTS) {
+        tints[tint] = `var(--${hue}-${tint})`
+      }
+
+      acc[hue] = tints
+
+      return acc
+    },
+    {} as Record<ColorHueKey, Record<ColorTintKey, CSSVar>>,
+  ),
 } as const
 
 function buildColorCardVars(props: {scheme?: Scheme; tone: CardTone}): ColorCardVars {
@@ -333,9 +367,6 @@ function buildColorCardVars(props: {scheme?: Scheme; tone: CardTone}): ColorCard
   const prefix = scheme ? varNames.color[scheme][tone] : varNames.color[tone]
 
   return {
-    accent: {
-      fg: `var(${prefix.accent.fg})`,
-    },
     avatar: {
       ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
         return {

package/src/theme/palette/constants.ts

@@ -1,3 +1,4 @@
+/** @public */
 export const HUES = [
   'gray',
   'blue',
@@ -10,4 +11,5 @@ export const HUES = [
   'cyan',
 ] as const
 
+/** @public */
 export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const

package/src/theme/palette/types.ts

@@ -1,4 +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/types.ts

@@ -3,17 +3,13 @@ import {RootTheme_v0} from './v0/theme'
 import {RootTheme_v2, Theme_v2} from './v2/theme'
 import {Theme_v3} from './v3'
 
-/**
- * @public
- */
+/** @public */
 export interface RootTheme extends RootTheme_v0 {
   v2?: RootTheme_v2
   v3?: Theme_v3
 }
 
-/**
- * @public
- */
+/** @public */
 export type BaseTheme = RootTheme
 
 /**

package/src/theme/v0/focusRing.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeFocusRing {
   offset: number
   width: number

package/src/theme/v0/font.ts

@@ -1,16 +1,10 @@
-/**
- * @public
- */
+/** @public */
 export type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFontSize {
   ascenderHeight: number
   descenderHeight: number
@@ -20,9 +14,7 @@ export interface ThemeFontSize {
   lineHeight: number
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFontWeight {
   regular: number
   medium: number
@@ -30,9 +22,7 @@ export interface ThemeFontWeight {
   bold: number
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFont {
   family: string
   featureSettings?: string
@@ -42,9 +32,7 @@ export interface ThemeFont {
   horizontalOffset?: number
 }
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeFonts {
   code: ThemeFont
   heading: ThemeFont

package/src/theme/v0/layer.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeLayer {
   dialog: {zOffset: number}
   popover: {zOffset: number}

package/src/theme/v0/shadow.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export type ThemeBoxShadow = [
   // offsetX, offsetY, blurRadius, spreadRadius
   number,
@@ -9,9 +7,7 @@ export type ThemeBoxShadow = [
   number,
 ]
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeShadow {
   umbra: ThemeBoxShadow
   penumbra: ThemeBoxShadow

package/src/theme/v2/avatar.ts

@@ -1,8 +1,6 @@
 import {ThemeFocusRing} from '../v0/focusRing'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeAvatar_v2 {
   sizes: {
     /** Spacing between avatars in an <AvatarStack> component (px) */

package/src/theme/v2/color/_system.ts

@@ -10,9 +10,7 @@ import {
   THEME_COLOR_STATES,
 } from './_constants'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
 
 /** @public */

package/src/theme/v2/color/avatar.ts

@@ -1,15 +1,11 @@
 import {ThemeColorAvatarColorKey, ThemeColorBlendModeKey} from './_system'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorAvatarHue_v2 {
   _blend?: ThemeColorBlendModeKey
   bg: string
   fg: string
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>

package/src/theme/v2/color/badge.ts

@@ -1,8 +1,6 @@
 import {ThemeColorStateToneKey} from './_system'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorBadgeTone_v2 {
   bg: string
   fg: string
@@ -10,7 +8,5 @@ export interface ThemeColorBadgeTone_v2 {
   icon: string
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>

package/src/theme/v2/color/button.ts

@@ -1,17 +1,11 @@
 import {ThemeColorButtonModeKey, ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
 import {ThemeColorState_v2} from './state'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>

package/src/theme/v2/color/color.ts

@@ -6,9 +6,7 @@ import {ThemeColorShadow} from './shadow'
 import {ThemeColorState_v2} from './state'
 import {ThemeColorSyntax} from './syntax'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   /** @internal */
   _blend: ThemeColorBlendModeKey
@@ -23,12 +21,8 @@ export interface ThemeColorCard_v2 extends ThemeColorState_v2 {
   syntax: ThemeColorSyntax
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>

package/src/theme/v2/color/input.ts

@@ -1,8 +1,6 @@
 import {ThemeColorBlendModeKey, ThemeColorInputModeKey, ThemeColorInputStateKey} from './_system'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorInputState_v2 {
   _blend?: ThemeColorBlendModeKey
   bg: string
@@ -14,12 +12,8 @@ export interface ThemeColorInputState_v2 {
   placeholder: string
 }
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>

package/src/theme/v2/color/kbd.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorKBD {
   bg: string
   fg: string

package/src/theme/v2/color/selectable.ts

@@ -1,12 +1,8 @@
 import {ThemeColorStateKey, ThemeColorStateToneKey} from './_system'
 import {ThemeColorState_v2} from './state'
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
 
-/**
- * @public
- */
+/** @public */
 export type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>

package/src/theme/v2/color/state.ts

@@ -3,9 +3,7 @@ import {ThemeColorAvatar_v2} from './avatar'
 import {ThemeColorBadge_v2} from './badge'
 import {ThemeColorKBD} from './kbd'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorState_v2 {
   /** @internal */
   _blend?: ThemeColorBlendModeKey

package/src/theme/v2/color/syntax.ts

@@ -1,6 +1,4 @@
-/**
- * @public
- */
+/** @public */
 export interface ThemeColorSyntax {
   atrule: string
   attrName: string

package/src/theme/v2/input.ts

@@ -1,8 +1,6 @@
 import {ThemeFocusRing} from '../v0/focusRing'
 
-/**
- * @public
- */
+/** @public */
 export interface ThemeInput_v2 {
   checkbox: {
     size: number

package/src/theme/v2/theme.ts

@@ -7,9 +7,7 @@ import {ThemeAvatar_v2} from './avatar'
 import {ThemeColorCard_v2, ThemeColorSchemes_v2} from './color'
 import {ThemeInput_v2} from './input'
 
-/**
- * @public
- */
+/** @public */
 export interface RootTheme_v2 {
   _version: 2
   avatar: ThemeAvatar_v2
@@ -35,9 +33,7 @@ export interface RootTheme_v2 {
   /** @internal */
   style?: ThemeStyles
 }
-/**
- * @public
- */
+/** @public */
 export type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
   color: ThemeColorCard_v2
   /**

package/src/theme/v3/buildTheme_v3.ts

@@ -1,10 +1,11 @@
 import {defaultThemeConfig} from '../defaults/config'
 import {defaultThemeFonts} from '../defaults/fonts'
 import {buildColor_v3} from './color/buildColor_v3'
-import {defaultTokens} from './defaults'
+import {defaultTokens} from './defaultTokens'
 import {resolveTokens} from './resolveTokens'
 import {Theme_v3, ThemeOptions} from './types'
 
+/** @public */
 export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
   const {v2} = options ?? {}
 

package/src/theme/v3/color/color.ts

@@ -6,8 +6,7 @@ import {
   ThemeColorStateToneKey,
 } from '../../v2'
 
-// export interface ThemeColorAvatarHue_v2 {}
-
+/** @public */
 export interface ThemeColorElement {
   _hue: Hue
   bg: {
@@ -24,12 +23,13 @@ export interface ThemeColorElement {
   }
 }
 
+/** @public */
 export type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
 
+/** @public */
 export type ThemeColorVariantKey = 'tinted' | 'solid'
 
-// export type ThemeColorCard_v3 = Record<ThemeColorVariantKey, ThemeColorVariant>
-
+/** @public */
 export interface ThemeColorCard_v3 {
   _hue: Hue
   avatar: ThemeColorAvatar_v2
@@ -90,9 +90,11 @@ export interface ThemeColorCard_v3 {
   variant: Record<ThemeColorVariantKey, ThemeColorVariant>
 }
 
+/** @public */
 export interface ThemeColorScheme_v3 {
   card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
 }
 
+/** @public */
 // color[scheme].card[cardTone][colorVariant][elementTone][property][level]
 export type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>

package/src/theme/v3/color/renderColor.ts

@@ -3,14 +3,17 @@ import {ThemeColorSchemeKey} from '../../v2'
 import {parseColor} from './parseColor'
 import {ColorToken} from './token'
 
-type CSSVariableKey = `--${string}`
+/** @public */
+export type CSSVariableKey = `--${string}`
 
+/** @public */
 export interface RenderColorContext {
   bgVar: CSSVariableKey
   hue: Hue
   scheme: ThemeColorSchemeKey
 }
 
+/** @public */
 export function renderColor(token: [ColorToken, ColorToken], context: RenderColorContext): string {
   const {bgVar, hue, scheme} = context
 

package/src/theme/v3/{defaults.ts → defaultTokens.ts}

@@ -1,9 +1,9 @@
 import {PartialTokens, Tokens} from './tokens'
 
+/** @internal */
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {
-      // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ['black/0.5', 'gray/100/0.5'],
       code: {
         bg: ['950', '50'],
@@ -61,7 +61,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['950', '50'],
-              4: ['800', '200'],
+              4: ['700', '300'],
             },
             border: {
               0: ['700', '100'],

package/src/theme/v3/index.ts

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

package/src/theme/v3/resolveTokens.ts

@@ -52,48 +52,48 @@ 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 ?? ['400', '500'],
+        fg: tokens?.avatar?.gray?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.blue?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.purple?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.magenta?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.red?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.orange?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.yellow?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.green?.fg ?? ['900', 'white'],
       },
       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 ?? ['400', '500'],
+        fg: tokens?.avatar?.cyan?.fg ?? ['900', 'white'],
       },
     },
     backdrop: tokens?.backdrop ?? ['900', '100'],