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

package/dist/css.d.ts

@@ -1,4 +1,5 @@
 import {AvatarSize} from '@sanity/ui/theme'
+import {ColorTintKey} from '@sanity/color'
 import {ContainerWidth} from '@sanity/ui/theme'
 import {default as CSS_2} from 'csstype'
 import {FontCodeSize} from '@sanity/ui/theme'
@@ -19,33 +20,47 @@ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {Tint} from '@sanity/ui/theme'
 
+/** @public */
 export declare function animatedSpinnerIcon(): string | undefined
 
 /** @internal */
 export declare function _arrow(): string | undefined
 
+/** @internal */
 export declare function _arrowShape(): string | undefined
 
+/** @internal */
 export declare function _arrowStroke(): string | undefined
 
+/** @internal */
+export declare function _arrowStrokeMask(): string | undefined
+
+/** @public */
 export declare function avatar(props: AvatarStyleProps): string | undefined
 
+/** @public */
 export declare function avatarArrow(): string | undefined
 
+/** @public */
 export declare function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined
 
+/** @public */
 export declare function avatarImage(): string | undefined
 
+/** @public */
 export declare function avatarInitials(): string | undefined
 
+/** @public */
 export declare type AvatarScopedVarName =
   | `--avatar-bg-color`
   | `--avatar-fg-color`
   | `--avatar-distance`
   | `--avatar-size`
 
+/** @public */
 export declare function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined
 
+/** @public */
 export declare interface AvatarStyleProps {
   color: ThemeColorAvatarColorKey
   size: ResponsiveProp<AvatarSize>
@@ -74,17 +89,13 @@ export declare interface BorderStyleProps {
 /** @public */
 export declare function box(props: BoxStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type BoxHeight = 'stretch' | 'fill'
 
 /** @public */
 export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
 
-/**
- * @public
- */
+/** @public */
 export declare type BoxSizing = 'content' | 'border'
 
 /** @public */
@@ -112,14 +123,29 @@ export declare interface BoxStyleProps
   sizing?: ResponsiveProp<BoxSizing>
 }
 
+/** @public */
 export declare function breadcrumbs(): string | undefined
 
+/** @public */
+export declare const BREAKPOINTS: {
+  1: number
+  2: number
+  3: number
+  4: number
+  5: number
+  6: number
+}
+
+/** @public */
 export declare function button(props: ButtonStyleProps): string | undefined
 
+/** @public */
 export declare function buttonLoadingBox(): string | undefined
 
+/** @public */
 export declare type ButtonScopedVarName = '--button-box-shadow'
 
+/** @public */
 export declare interface ButtonStyleProps
   extends DisplayStyleProps,
     FlexItemStyleProps,
@@ -129,11 +155,11 @@ export declare interface ButtonStyleProps
   tone?: ThemeColorStateToneKey
 }
 
+/** @public */
 export declare function card(props: CardStyleProps): string | undefined
 
 /** @public */
 export declare type CardScopedVarName =
-  | `--color-accent-fg`
   | `--color-avatar-bg`
   | `--color-avatar-fg`
   | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
@@ -217,14 +243,17 @@ export declare type CardScopedVarName =
   | `--padding-bottom`
   | `--padding-left`
 
-export declare interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
+/** @public */
+export declare interface CardStyleProps extends ShadowStyleProps {
   checkered?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey | 'inherit'
 }
 
+/** @public */
 export declare function checkbox(): string | undefined
 
+/** @public */
 export declare function checkboxInput(): string | undefined
 
 /** @public */
@@ -233,8 +262,10 @@ export declare function code(props: CodeStyleProps): string | undefined
 /** @public */
 export declare type CodeSize = number
 
+/** @beta */
 export declare function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface CodeSkeletonStyleProps {
   size?: ResponsiveProp<FontCodeSize>
 }
@@ -270,8 +301,8 @@ export declare interface ColorBadgeToneVars {
 /** @public */
 export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
 
+/** @public */
 export declare type ColorCardToneScopedVarName =
-  | `--color-${ThemeColorCardToneKey}-accent-fg`
   | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
   | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
   | `--color-${ThemeColorCardToneKey}-backdrop`
@@ -325,8 +356,8 @@ export declare type ColorCardToneScopedVarName =
   | `--color-${ThemeColorCardToneKey}-skeleton-from`
   | `--color-${ThemeColorCardToneKey}-skeleton-to`
 
+/** @public */
 export declare type ColorCardVarName =
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-accent-fg`
   | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
   | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
   | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
@@ -382,9 +413,6 @@ export declare type ColorCardVarName =
 
 /** @public */
 export declare interface ColorCardVarNames {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
   backdrop: VarName
   code: {
@@ -453,9 +481,6 @@ export declare interface ColorCardVarNames {
 
 /** @public */
 export declare interface ColorCardVars {
-  accent: {
-    fg: CSSVar
-  }
   avatar: ColorAvatarVars
   backdrop: CSSVar
   code: {
@@ -589,6 +614,7 @@ export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCar
 /** @public */
 export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey, ColorCardVars> {}
 
+/** @public */
 export declare interface ColorVariantVarNames
   extends ColorElementVarNames,
     Record<ThemeColorStateToneKey, ColorElementVarNames> {}
@@ -598,21 +624,27 @@ export declare interface ColorVariantVars
   extends Record<ThemeColorStateToneKey, ColorElementVars>,
     ColorElementVars {}
 
+/** @public */
 export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
+/** @internal */
 export declare function compilePalette(): string
 
-/** @public */
+/** @internal */
 export declare function compileSystem(): string
 
+/** @internal */
 export declare function compileTheme(theme: RootTheme): string
 
+/** @public */
 export declare function composeClassNames(
   ...classNames: Array<string | false | undefined>
 ): string | undefined
 
+/** @public */
 export declare function container(props: ContainerStyleProps): string | undefined
 
+/** @public */
 export declare interface ContainerStyleProps {
   width?: ResponsiveProp<ContainerWidth>
 }
@@ -623,23 +655,28 @@ export declare type CSSVar = `var(${VarName})`
 /** @public */
 export declare interface CustomCSSProperties extends Record<VarName, string> {}
 
+/** @public */
 export declare function dialog(): string | undefined
 
+/** @public */
 export declare function dialogCardRoot(): string | undefined
 
+/** @public */
 export declare function dialogContainer(): string | undefined
 
+/** @public */
 export declare function dialogContent(): string | undefined
 
+/** @public */
 export declare function dialogFooter(): string | undefined
 
+/** @public */
 export declare function dialogHeader(): string | undefined
 
+/** @public */
 export declare function dialogLayout(): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type Display =
   | 'block'
   | 'inline-block'
@@ -649,8 +686,10 @@ export declare type Display =
   | 'inline-grid'
   | 'none'
 
+/** @internal */
 export declare function display(props: DisplayStyleProps): string | undefined
 
+/** @public */
 export declare interface DisplayStyleProps {
   display?: ResponsiveProp<Display>
 }
@@ -683,14 +722,10 @@ export declare type ElementColorVariantScopedVarName =
 /** @public */
 export declare function flex(props: FlexStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
 /** @public */
@@ -701,9 +736,7 @@ export declare interface FlexItemStyleProps {
   flex?: ResponsiveProp<FlexValue>
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexJustify =
   | 'flex-start'
   | 'flex-end'
@@ -720,9 +753,7 @@ export declare interface FlexStyleProps {
   wrap?: ResponsiveProp<FlexWrap>
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexValue =
   | 'none'
   | 'auto'
@@ -741,9 +772,7 @@ export declare type FlexValue =
   | 11
   | 12
 
-/**
- * @public
- */
+/** @public */
 export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
 /** @public */
@@ -775,10 +804,12 @@ export declare interface FontStyleProps {
   weight?: FontWeight
 }
 
+/** @public */
 export declare interface FontVarNames<Size extends number> {
   family: VarName
+  featureSettings: VarName
   sizes: Record<Size, FontSizeVarNames>
-  weight: Record<FontWeight, VarName>
+  weights: Record<FontWeight, VarName>
 }
 
 /** @public */
@@ -798,58 +829,43 @@ export declare interface GapStyleProps {
   gapY?: ResponsiveProp<Space>
 }
 
-export declare function getClassNames(...classNames: Array<string | false | undefined>): string[]
+/** @internal */
+export declare function _getClassNames(...classNames: Array<string | false | undefined>): string[]
 
+/** @internal */
 export declare function grid(props: GridStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
 
-/**
- * @public
- */
+/** @public */
 export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-/**
- * @public
- */
+/** @public */
 export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
-/** @public */
+/** @internal */
 export declare function gridItem(props: GridItemStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemColumn = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemColumnEnd = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemColumnStart = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemRow = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemRowEnd = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export declare type GridItemRowStart = 'auto' | number
 
+/** @public */
 export declare interface GridItemStyleProps {
   column?: ResponsiveProp<GridItemColumn>
   columnStart?: ResponsiveProp<GridItemColumnStart>
@@ -874,8 +890,10 @@ export declare function heading(props: HeadingStyleProps): string | undefined
 /** @public */
 export declare type HeadingSize = number
 
+/** @beta */
 export declare function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface HeadingSkeletonStyleProps {
   size?: ResponsiveProp<FontHeadingSize>
 }
@@ -887,9 +905,10 @@ export declare interface HeadingStyleProps extends FontStyleProps, FlexItemStyle
   size?: ResponsiveProp<HeadingSize>
 }
 
-/** @public */
+/** @internal */
 export declare function height(props: HeightStyleProps): string | undefined
 
+/** @public */
 export declare interface HeightStyleProps {
   height?: ResponsiveProp<BoxHeight>
 }
@@ -897,8 +916,10 @@ export declare interface HeightStyleProps {
 /** @internal */
 export declare function _input(props: InputStyleProps): string | undefined
 
+/** @internal */
 export declare function _inputElement(): string | undefined
 
+/** @internal */
 export declare function _inputPresentation(): string | undefined
 
 /** @public */
@@ -926,6 +947,7 @@ export declare interface InputStyleProps extends RadiusStyleProps, WidthStylePro
 /** @public */
 export declare type Inset = 0
 
+/** @internal */
 export declare function inset(props: InsetStyleProps): string | undefined
 
 /** @public */
@@ -937,10 +959,13 @@ export declare interface InsetStyleProps {
   insetLeft?: ResponsiveProp<Inset>
 }
 
+/** @internal */
 export declare function isArray(value: unknown): value is unknown[]
 
+/** @internal */
 export declare function isRecord(value: unknown): value is Record<string, unknown>
 
+/** @public */
 export declare function kbd(props: KBDStyleProps): string | undefined
 
 /** @public */
@@ -949,11 +974,16 @@ export declare interface KBDStyleProps extends RadiusStyleProps {}
 /** @public */
 export declare function label(props: LabelStyleProps): string | undefined
 
-/** @public */
+/**
+ * @public
+ * @deprecated Use `FontLabelSize` from `@sanity/ui/theme` instead
+ */
 export declare type LabelSize = number
 
+/** @beta */
 export declare function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface LabelSkeletonStyleProps {
   size?: ResponsiveProp<FontLabelSize>
 }
@@ -962,9 +992,10 @@ export declare interface LabelSkeletonStyleProps {
 export declare interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
   muted?: boolean
-  size?: ResponsiveProp<LabelSize>
+  size?: ResponsiveProp<FontLabelSize>
 }
 
+/** @public */
 export declare type LegacyCardScopedVarName =
   | `--card-accent-fg-color`
   | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
@@ -999,8 +1030,10 @@ export declare type LegacyCardScopedVarName =
   | `--card-skeleton-from-color`
   | `--card-skeleton-to-color`
 
+/** @internal */
 export declare function margin(props: MarginStyleProps): string | undefined
 
+/** @public */
 export declare interface MarginStyleProps {
   margin?: ResponsiveProp<number>
   marginTop?: ResponsiveProp<number>
@@ -1011,24 +1044,32 @@ export declare interface MarginStyleProps {
   marginY?: ResponsiveProp<number>
 }
 
+/** @internal */
 export declare function maxWidth(props: MaxWidthStyleProps): string
 
+/** @public */
 export declare interface MaxWidthStyleProps {
   maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
 }
 
+/** @public */
 export declare function menu(): string | undefined
 
+/** @public */
 export declare function menuDivider(): string | undefined
 
+/** @public */
 export declare type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
 
+/** @internal */
 export declare function minWidth(props: MinWidthStyleProps): string
 
+/** @public */
 export declare interface MinWidthStyleProps {
   minWidth?: ResponsiveProp<MinWidth>
 }
 
+/** @internal */
 export declare function overflow(props: OverflowStyleProps): string | undefined
 
 /** @public */
@@ -1038,6 +1079,7 @@ export declare interface OverflowStyleProps {
   overflowY?: ResponsiveProp<BoxOverflow>
 }
 
+/** @internal */
 export declare function padding(props: PaddingStyleProps): string | undefined
 
 /** @public */
@@ -1057,6 +1099,7 @@ export declare type PaletteVarName = `--black` | `--white` | `--${Hue}-${Tint}`
 /** @public */
 export declare type PointerEvents = 'auto' | 'none'
 
+/** @internal */
 export declare function pointerEvents(props: PointerEventsStyleProps): string | undefined
 
 /** @public */
@@ -1064,13 +1107,16 @@ export declare interface PointerEventsStyleProps {
   pointerEvents?: PointerEvents
 }
 
+/** @public */
 export declare function popover(): string | undefined
 
+/** @public */
 export declare function popoverCard(): string | undefined
 
 /** @public */
 export declare type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
 
+/** @internal */
 export declare function position(props: PositionStyleProps): string | undefined
 
 /** @public */
@@ -1078,6 +1124,9 @@ export declare interface PositionStyleProps {
   position?: ResponsiveProp<Position>
 }
 
+/** @public */
+export declare const PREFIX = 's-'
+
 /** @public */
 export declare type Properties = PropertiesWithVarsAndNested & {
   '@media'?: Record<string, PropertiesWithVarsAndNested>
@@ -1094,8 +1143,10 @@ export declare type PropertiesWithVarsAndNested = PropertiesWithVars & {
   '@nest'?: Record<string, PropertiesWithVars>
 }
 
+/** @internal */
 export declare function px(value: number): string
 
+/** @public */
 export declare function radio(): string | undefined
 
 /** @public */
@@ -1106,11 +1157,13 @@ export declare interface RadiusStyleProps {
   radius?: ResponsiveProp<Radius | 'full'>
 }
 
+/** @internal */
 export declare function rem(value: number): string
 
 /** @public */
 export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
 
+/** @public */
 export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */
@@ -1118,12 +1171,11 @@ export declare interface Rules {
   [className: string]: Properties
 }
 
+/** @public */
 export declare function scopeClassName(className: string | undefined): string | undefined
 
+/** @public */
 export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
-  accent: {
-    fg: VarName
-  }
   avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
   bg: VarName
   border: VarName
@@ -1136,6 +1188,7 @@ export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'av
   }
 }
 
+/** @public */
 export declare interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
   avatar: ColorAvatarVars & ColorAvatarColorVars
   bg: CSSVar
@@ -1149,6 +1202,7 @@ export declare interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
   }
 }
 
+/** @public */
 export declare function select(props: SelectStyleProps): string | undefined
 
 /** @internal */
@@ -1159,11 +1213,13 @@ export declare interface SelectableStyleProps extends RadiusStyleProps {
   tone?: ThemeColorStateToneKey
 }
 
+/** @public */
 export declare function selectPresentation(): string | undefined
 
 /** @public */
 export declare interface SelectStyleProps extends InputStyleProps {}
 
+/** @internal */
 export declare function shadow(props: ShadowStyleProps): string | undefined
 
 /** @public */
@@ -1177,8 +1233,10 @@ export declare function skeleton(props: SkeletonStyleProps): string | undefined
 /** @beta */
 export declare interface SkeletonStyleProps extends RadiusStyleProps {}
 
+/** @public */
 export declare function spinner(): string | undefined
 
+/** @public */
 export declare function srOnly(): string | undefined
 
 /** @public */
@@ -1203,10 +1261,13 @@ export declare type StyleRules = Partial<Record<StyleSelector, Properties>>
 /** @public */
 export declare type StyleSelector = `.${string}` | `#${string}` | `:root`
 
+/** @public */
 export declare function _switch(): string | undefined
 
+/** @public */
 export declare function _switchElement(): string | undefined
 
+/** @public */
 export declare function _switchPresentation(): string | undefined
 
 /** @public */
@@ -1216,30 +1277,34 @@ export declare type SwitchScopedVarName =
   | '--switch-thumb-offset'
   | '--switch-thumb-size'
 
+/** @public */
 export declare function _switchThumb(): string | undefined
 
+/** @public */
 export declare function _switchTrack(): string | undefined
 
 /** @public */
 export declare function text(props: TextStyleProps): string | undefined
 
-/**
- * @public
- */
+/** @public */
 export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
+/** @public */
 export declare function textArea(props: TextAreaStyleProps): string | undefined
 
 /** @public */
 export declare interface TextAreaStyleProps extends InputStyleProps {}
 
+/** @public */
 export declare function textInput(props: TextInputStyleProps): string | undefined
 
 /** @public */
 export declare interface TextInputStyleProps extends InputStyleProps {}
 
+/** @internal */
 export declare function textOverflow(props: TextOverflowStyleProps): string | undefined
 
+/** @internal */
 export declare interface TextOverflowStyleProps {
   /**
    * Controls how overflowing text is treated.
@@ -1249,16 +1314,22 @@ export declare interface TextOverflowStyleProps {
   textOverflow?: 'ellipsis' | 'clip'
 }
 
+/** @public */
 export declare type TextSize = number
 
+/** @beta */
 export declare function textSkeleton(props: TextSkeletonStyleProps): string | undefined
 
+/** @beta */
 export declare interface TextSkeletonStyleProps {
   size?: ResponsiveProp<FontTextSize>
 }
 
 /** @public */
 export declare interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
+  /**
+   * @deprecated Will be removed in next major version
+   */
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>
@@ -1277,7 +1348,7 @@ export declare 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`
@@ -1342,22 +1413,31 @@ export declare type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
+/** @public */
 export declare function toast(): string | undefined
 
+/** @public */
 export declare function toastLayer(): string | undefined
 
+/** @public */
 export declare function toastLoadingBar(): string | undefined
 
+/** @public */
 export declare function toastLoadingBarMask(): string | undefined
 
+/** @public */
 export declare function toastLoadingBarProgress(): string | undefined
 
+/** @internal */
 export declare function toBoxShadow(value: ThemeBoxShadow | undefined): string
 
+/** @public */
 export declare function tooltip(): string | undefined
 
+/** @public */
 export declare function tooltipCard(): string | undefined
 
+/** @beta */
 export declare function treeItem(): string | undefined
 
 /** @public */
@@ -1376,6 +1456,20 @@ export declare type VarName =
 
 /** @public */
 export declare interface VarNames {
+  button: {
+    border: {
+      width: VarName
+    }
+    focusRing: {
+      offset: VarName
+      width: VarName
+    }
+  }
+  card: {
+    shadow: {
+      outline: VarName
+    }
+  }
   color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> &
     ScopedColorVarNames &
     Record<ThemeColorCardToneKey, ColorCardVarNames>
@@ -1402,6 +1496,47 @@ export declare 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
@@ -1411,9 +1546,29 @@ export declare interface VarNames {
     padding: VarName
   }
   radius: Record<Radius, VarName>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: VarName
+      penumbra: VarName
+      ambient: VarName
+    }
+  >
   space: Record<Space, VarName>
+  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 */
 export declare const varNames: VarNames
 
 /** @public */
@@ -1429,6 +1584,11 @@ export declare interface Vars {
       }
     >
   }
+  card: {
+    shadow: {
+      outline: CSSVar
+    }
+  }
   color: {
     dark: ColorSchemeVars
     light: ColorSchemeVars
@@ -1457,15 +1617,38 @@ export declare interface Vars {
     }
   }
   radius: Record<Radius, CSSVar>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: CSSVar
+      penumbra: CSSVar
+      ambient: CSSVar
+    }
+  >
   space: Record<Space, CSSVar>
+  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>
 }
 
+/** @public */
 export declare const vars: Vars
 
+/** @public */
 export declare type Width = ContainerWidth | 'fill'
 
+/** @internal */
 export declare function width(props: WidthStyleProps): string
 
+/** @public */
 export declare interface WidthStyleProps {
   width?: ResponsiveProp<Width>
 }