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

package/src/css/primitives/popover/popover.ts

@@ -1,9 +1,11 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function popover(): string | undefined {
   return _comp('popover')
 }
 
+/** @public */
 export function popoverCard(): string | undefined {
   return _comp('popover-card')
 }

package/src/css/primitives/radio/radio.ts

@@ -1,5 +1,6 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function radio(): string | undefined {
   return _comp('radio')
 }

package/src/css/primitives/select/select.ts

@@ -3,10 +3,12 @@ import {composeClassNames} from '../../composeClassNames'
 import {_input, _inputPresentation} from '../_input'
 import {SelectStyleProps} from './types'
 
+/** @public */
 export function select(props: SelectStyleProps): string | undefined {
   return composeClassNames(_comp('select'), _input(props))
 }
 
+/** @public */
 export function selectPresentation(): string | undefined {
   return composeClassNames(_comp('select-presentation'), _inputPresentation())
 }

package/src/css/primitives/spinner/spinner.ts

@@ -1,9 +1,11 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function spinner(): string | undefined {
   return _comp('spinner')
 }
 
+/** @public */
 export function animatedSpinnerIcon(): string | undefined {
   return _comp('animated-spinner-icon')
 }

package/src/css/primitives/switch/switch.ts

@@ -1,21 +1,26 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function _switch(): string | undefined {
   return _comp('switch')
 }
 
+/** @public */
 export function _switchElement(): string | undefined {
   return _comp('switch-element')
 }
 
+/** @public */
 export function _switchPresentation(): string | undefined {
   return _comp('switch-presentation')
 }
 
+/** @public */
 export function _switchThumb(): string | undefined {
   return _comp('switch-thumb')
 }
 
+/** @public */
 export function _switchTrack(): string | undefined {
   return _comp('switch-track')
 }

package/src/css/primitives/text/types.ts

@@ -1,10 +1,14 @@
 import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export type TextSize = number
 
 /** @public */
 export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
+  /**
+   * @deprecated Will be removed in next major version
+   */
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>

package/src/css/primitives/textArea/textArea.ts

@@ -3,6 +3,7 @@ import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextAreaStyleProps} from './types'
 
+/** @public */
 export function textArea(props: TextAreaStyleProps): string | undefined {
   return composeClassNames(_comp('text-area'), _input(props))
 }

package/src/css/primitives/textInput/textInput.ts

@@ -3,6 +3,7 @@ import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextInputStyleProps} from './types'
 
+/** @public */
 export function textInput(props: TextInputStyleProps): string | undefined {
   return composeClassNames(_input(props), _comp('text-input'))
 }

package/src/css/primitives/token/token.style.ts

@@ -1,47 +1,48 @@
 import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.token': {
     '_prefix': false,
 
     '@nest': {
-      '&.atrule': {color: 'var(--color-token-atrule)'},
-      '&.attr-name': {color: 'var(--color-token-attr-name)'},
-      '&.attr-value': {color: 'var(--color-token-attr-value)'},
-      '&.attribute': {color: 'var(--color-token-attribute)'},
-      '&.boolean': {color: 'var(--color-token-boolean)'},
-      '&.builtin': {color: 'var(--color-token-builtin)'},
-      '&.cdata': {color: 'var(--color-token-cdata)'},
-      '&.char': {color: 'var(--color-token-char)'},
-      '&.class': {color: 'var(--color-token-class)'},
-      '&.class-name': {color: 'var(--color-token-class-name)'},
-      '&.comment': {color: 'var(--color-token-comment)'},
-      '&.constant': {color: 'var(--color-token-constant)'},
-      '&.deleted': {color: 'var(--color-token-deleted)'},
-      '&.doctype': {color: 'var(--color-token-doctype)'},
-      '&.entity': {color: 'var(--color-token-entity)'},
-      '&.function': {color: 'var(--color-token-function)'},
-      '&.hexcode': {color: 'var(--color-token-hexcode)'},
-      '&.id': {color: 'var(--color-token-id)'},
-      '&.important': {color: 'var(--color-token-important)'},
-      '&.inserted': {color: 'var(--color-token-inserted)'},
-      '&.keyword': {color: 'var(--color-token-keyword)'},
-      '&.number': {color: 'var(--color-token-number)'},
-      '&.operator': {color: 'var(--color-token-operator)'},
-      '&.prolog': {color: 'var(--color-token-prolog)'},
-      '&.property': {color: 'var(--color-token-property)'},
-      '&.pseudo-class': {color: 'var(--color-token-pseudo-class)'},
-      '&.pseudo-element': {color: 'var(--color-token-pseudo-element)'},
-      '&.punctuation': {color: 'var(--color-token-punctuation)'},
+      '&.atrule': {color: vars.color.code.token.atrule},
+      '&.attr-name': {color: vars.color.code.token.attrName},
+      '&.attr-value': {color: vars.color.code.token.attrValue},
+      '&.attribute': {color: vars.color.code.token.attribute},
+      '&.boolean': {color: vars.color.code.token.boolean},
+      '&.builtin': {color: vars.color.code.token.builtin},
+      '&.cdata': {color: vars.color.code.token.cdata},
+      '&.char': {color: vars.color.code.token.char},
+      '&.class': {color: vars.color.code.token.class},
+      '&.class-name': {color: vars.color.code.token.className},
+      '&.comment': {color: vars.color.code.token.comment},
+      '&.constant': {color: vars.color.code.token.constant},
+      '&.deleted': {color: vars.color.code.token.deleted},
+      '&.doctype': {color: vars.color.code.token.doctype},
+      '&.entity': {color: vars.color.code.token.entity},
+      '&.function': {color: vars.color.code.token.function},
+      '&.hexcode': {color: vars.color.code.token.hexcode},
+      '&.id': {color: vars.color.code.token.id},
+      '&.important': {color: vars.color.code.token.important},
+      '&.inserted': {color: vars.color.code.token.inserted},
+      '&.keyword': {color: vars.color.code.token.keyword},
+      '&.number': {color: vars.color.code.token.number},
+      '&.operator': {color: vars.color.code.token.operator},
+      '&.prolog': {color: vars.color.code.token.prolog},
+      '&.property': {color: vars.color.code.token.property},
+      '&.pseudo-class': {color: vars.color.code.token.pseudoClass},
+      '&.pseudo-element': {color: vars.color.code.token.pseudoElement},
+      '&.punctuation': {color: vars.color.code.token.punctuation},
       '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
-      '&.regex': {color: 'var(--color-token-regex)'},
-      '&.selector': {color: 'var(--color-token-selector)'},
-      '&.string': {color: 'var(--color-token-string)'},
-      '&.symbol': {color: 'var(--color-token-symbol)'},
-      '&.tag': {color: 'var(--color-token-tag)'},
-      '&.unit': {color: 'var(--color-token-unit)'},
-      '&.url': {color: 'var(--color-token-url)'},
-      '&.variable': {color: 'var(--color-token-variable)'},
+      '&.regex': {color: vars.color.code.token.regex},
+      '&.selector': {color: vars.color.code.token.selector},
+      '&.string': {color: vars.color.code.token.string},
+      '&.symbol': {color: vars.color.code.token.symbol},
+      '&.tag': {color: vars.color.code.token.tag},
+      '&.unit': {color: vars.color.code.token.unit},
+      '&.url': {color: vars.color.code.token.url},
+      '&.variable': {color: vars.color.code.token.variable},
     },
   },
 }

package/src/css/primitives/tooltip/tooltip.ts

@@ -1,9 +1,11 @@
 import {_comp} from '../../_comp'
 
+/** @public */
 export function tooltip(): string | undefined {
   return _comp('tooltip')
 }
 
+/** @public */
 export function tooltipCard(): string | undefined {
   return _comp('tooltip-card')
 }

package/src/css/responsiveRules.ts

@@ -1,25 +1,18 @@
+import {BREAKPOINTS} from './constants'
 import {type Properties, type Rules} from './types'
 
 export function responsiveRules(className: string, props: Properties): Rules {
-  return {
+  const rules: Rules = {
     [className]: props,
-    [`_1:${className}`]: {
-      '@media': {'screen and (min-width: 360px)': props},
-    },
-    [`_2:${className}`]: {
-      '@media': {'screen and (min-width: 600px)': props},
-    },
-    [`_3:${className}`]: {
-      '@media': {'screen and (min-width: 900px)': props},
-    },
-    [`_4:${className}`]: {
-      '@media': {'screen and (min-width: 1200px)': props},
-    },
-    [`_5:${className}`]: {
-      '@media': {'screen and (min-width: 1800px)': props},
-    },
-    [`_6:${className}`]: {
-      '@media': {'screen and (min-width: 2400px)': props},
-    },
   }
+
+  for (const [index, width] of Object.entries(BREAKPOINTS)) {
+    rules[`_${index}:${className}`] = {
+      '@media': {
+        [`screen and (min-width: ${width}px)`]: props,
+      },
+    }
+  }
+
+  return rules
 }

package/src/css/scopeClassName.ts

@@ -1,5 +1,6 @@
 import {PREFIX} from './constants'
 
+/** @public */
 export function scopeClassName(className: string | undefined) {
   if (className === undefined) return undefined
   return `${PREFIX}${className.trim()}`

package/src/css/types.ts

@@ -1,3 +1,4 @@
+import {ColorTintKey} from '@sanity/color'
 import {
   type AvatarSize,
   type ContainerWidth,
@@ -58,7 +59,7 @@ export type ThemeVarName =
   | `--card-border-width`
   | `--card-focus-ring-offset`
   | `--card-focus-ring-width`
-  | `--shadow-outline`
+  | `--card-shadow-outline`
   | `--container-${ContainerWidth}`
   | `--font-code-family`
   | `--font-code-feature-settings`
@@ -127,8 +128,8 @@ export type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
+/** @public */
 export type ColorCardVarName =
-  | `--color-${Scheme}-${CardTone}-accent-fg`
   | `--color-${Scheme}-${CardTone}-avatar-${AvatarColor}-bg`
   | `--color-${Scheme}-${CardTone}-avatar-${AvatarColor}-fg`
   | `--color-${Scheme}-${CardTone}-backdrop`
@@ -182,8 +183,8 @@ export type ColorCardVarName =
   | `--color-${Scheme}-${CardTone}-skeleton-from`
   | `--color-${Scheme}-${CardTone}-skeleton-to`
 
+/** @public */
 export type ColorCardToneScopedVarName =
-  | `--color-${CardTone}-accent-fg`
   | `--color-${CardTone}-avatar-${AvatarColor}-bg`
   | `--color-${CardTone}-avatar-${AvatarColor}-fg`
   | `--color-${CardTone}-backdrop`
@@ -239,7 +240,6 @@ export type ColorCardToneScopedVarName =
 
 /** @public */
 export type CardScopedVarName =
-  | `--color-accent-fg`
   | `--color-avatar-bg`
   | `--color-avatar-fg`
   | `--color-avatar-${AvatarColor}-bg`
@@ -325,12 +325,14 @@ export type CardScopedVarName =
   | `--padding-bottom`
   | `--padding-left`
 
+/** @public */
 export type AvatarScopedVarName =
   | `--avatar-bg-color`
   | `--avatar-fg-color`
   | `--avatar-distance`
   | `--avatar-size`
 
+/** @public */
 export type LegacyCardScopedVarName =
   // legacy
   | `--card-accent-fg-color`
@@ -370,6 +372,7 @@ export type LegacyCardScopedVarName =
 export type ElementColorVariantScopedVarName =
   `--color-${ElementColorVariant}-${ElementColorVariantKey}`
 
+/** @public */
 export type ButtonScopedVarName = '--button-box-shadow'
 
 /** @public */
@@ -496,15 +499,13 @@ export interface ColorElementVarNames {
   }
 }
 
+/** @public */
 export interface ColorVariantVarNames
   extends ColorElementVarNames,
     Record<ElementTone, ColorElementVarNames> {}
 
 /** @public */
 export interface ColorCardVarNames {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames>
   backdrop: VarName
   code: {
@@ -576,10 +577,8 @@ export interface ColorCardVarNames {
 /** @public */
 export type ColorSchemeVarNames = Record<CardTone, ColorCardVarNames>
 
+/** @public */
 export interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
   bg: VarName
   border: VarName
@@ -602,14 +601,30 @@ export interface FontSizeVarNames {
   iconSize: VarName
 }
 
+/** @public */
 export interface FontVarNames<Size extends number> {
   family: VarName
+  featureSettings: VarName
   sizes: Record<Size, FontSizeVarNames>
-  weight: Record<FontWeight, VarName>
+  weights: Record<FontWeight, VarName>
 }
 
 /** @public */
 export interface VarNames {
+  button: {
+    border: {
+      width: VarName
+    }
+    focusRing: {
+      offset: VarName
+      width: VarName
+    }
+  }
+  card: {
+    shadow: {
+      outline: VarName
+    }
+  }
   color: Record<Scheme, ColorSchemeVarNames> &
     ScopedColorVarNames &
     Record<CardTone, ColorCardVarNames>
@@ -630,17 +645,85 @@ export interface VarNames {
     text: FontVarNames<FontTextSize>
   }
   input: {
+    border: {
+      width: VarName
+    }
+
+    checkbox: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      size: VarName
+    }
+
+    radio: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      markSize: VarName
+      size: VarName
+    }
+
+    select: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+    }
+
+    switch: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      height: VarName
+      padding: VarName
+
+      transitionDurationMs: VarName
+      transitionTimingFunction: VarName
+      width: VarName
+    }
+
+    text: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+    }
+
     fontSize: VarName
     lineHeight: VarName
     letterSpacing: VarName
     ascenderHeight: VarName
     descenderHeight: VarName
-    // capHeight: CSSVarName
     gap: VarName
     padding: VarName
   }
   radius: Record<Radius, VarName>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: VarName
+      penumbra: VarName
+      ambient: VarName
+    }
+  >
   space: Record<Space, VarName>
+
+  // color
+  black: VarName
+  white: VarName
+  gray: Record<ColorTintKey, VarName>
+  blue: Record<ColorTintKey, VarName>
+  purple: Record<ColorTintKey, VarName>
+  magenta: Record<ColorTintKey, VarName>
+  red: Record<ColorTintKey, VarName>
+  orange: Record<ColorTintKey, VarName>
+  yellow: Record<ColorTintKey, VarName>
+  green: Record<ColorTintKey, VarName>
+  cyan: Record<ColorTintKey, VarName>
 }
 
 /** @public */
@@ -684,9 +767,6 @@ export interface ColorVariantVars extends Record<ElementTone, ColorElementVars>,
 
 /** @public */
 export interface ColorCardVars {
-  accent: {
-    fg: CSSVar
-  }
   avatar: ColorAvatarVars
   backdrop: CSSVar
   code: {
@@ -779,6 +859,7 @@ export interface ColorAvatarColorVars {
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface ColorSchemeVars extends Record<CardTone, ColorCardVars> {}
 
+/** @public */
 export interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
   avatar: ColorAvatarVars & ColorAvatarColorVars
   bg: CSSVar
@@ -817,6 +898,11 @@ export interface Vars {
     size: CSSVar
     sizes: Record<AvatarSize, {distance: CSSVar; size: CSSVar}>
   }
+  card: {
+    shadow: {
+      outline: CSSVar
+    }
+  }
   color: {
     dark: ColorSchemeVars
     light: ColorSchemeVars
@@ -848,5 +934,19 @@ export interface Vars {
     }
   }
   radius: Record<Radius, CSSVar>
+  shadow: Record<Shadow, {umbra: CSSVar; penumbra: CSSVar; ambient: CSSVar}>
   space: Record<Space, CSSVar>
+
+  // color
+  black: CSSVar
+  white: CSSVar
+  gray: Record<ColorTintKey, CSSVar>
+  blue: Record<ColorTintKey, CSSVar>
+  purple: Record<ColorTintKey, CSSVar>
+  magenta: Record<ColorTintKey, CSSVar>
+  red: Record<ColorTintKey, CSSVar>
+  orange: Record<ColorTintKey, CSSVar>
+  yellow: Record<ColorTintKey, CSSVar>
+  green: Record<ColorTintKey, CSSVar>
+  cyan: Record<ColorTintKey, CSSVar>
 }

package/src/css/util.ts

@@ -1,25 +1,30 @@
 import {type ThemeBoxShadow} from '@sanity/ui/theme'
 
+/** @internal */
 export function isRecord(value: unknown): value is Record<string, unknown> {
   return value !== null && typeof value === 'object' && !Array.isArray(value)
 }
 
+/** @internal */
 export function isArray(value: unknown): value is unknown[] {
   return Array.isArray(value)
 }
 
+/** @internal */
 export function rem(value: number): string {
   if (value === 0) return '0'
 
   return `${value / 16}rem`
 }
 
+/** @internal */
 export function px(value: number): string {
   if (value === 0) return '0'
 
   return `${value}px`
 }
 
+/** @internal */
 export function toBoxShadow(value: ThemeBoxShadow | undefined): string {
   if (!value) return 'none'
 

package/src/css/utils/srOnly/srOnly.ts

@@ -1,5 +1,6 @@
 import {composeClassNames} from '../../composeClassNames'
 
+/** @public */
 export function srOnly(): string | undefined {
   return composeClassNames('sr-only')
 }