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

package/src/css/types.ts

@@ -132,44 +132,6 @@ export type ColorCardVarName =
   | `--color-${Scheme}-${CardTone}-avatar-${AvatarColor}-bg`
   | `--color-${Scheme}-${CardTone}-avatar-${AvatarColor}-fg`
   | `--color-${Scheme}-${CardTone}-backdrop`
-  | `--color-${Scheme}-${CardTone}-code-bg`
-  | `--color-${Scheme}-${CardTone}-code-fg`
-  | `--color-${Scheme}-${CardTone}-code-token-atrule`
-  | `--color-${Scheme}-${CardTone}-code-token-attr-name`
-  | `--color-${Scheme}-${CardTone}-code-token-attr-value`
-  | `--color-${Scheme}-${CardTone}-code-token-attribute`
-  | `--color-${Scheme}-${CardTone}-code-token-boolean`
-  | `--color-${Scheme}-${CardTone}-code-token-builtin`
-  | `--color-${Scheme}-${CardTone}-code-token-cdata`
-  | `--color-${Scheme}-${CardTone}-code-token-char`
-  | `--color-${Scheme}-${CardTone}-code-token-class`
-  | `--color-${Scheme}-${CardTone}-code-token-class-name`
-  | `--color-${Scheme}-${CardTone}-code-token-comment`
-  | `--color-${Scheme}-${CardTone}-code-token-constant`
-  | `--color-${Scheme}-${CardTone}-code-token-deleted`
-  | `--color-${Scheme}-${CardTone}-code-token-doctype`
-  | `--color-${Scheme}-${CardTone}-code-token-entity`
-  | `--color-${Scheme}-${CardTone}-code-token-function`
-  | `--color-${Scheme}-${CardTone}-code-token-hexcode`
-  | `--color-${Scheme}-${CardTone}-code-token-id`
-  | `--color-${Scheme}-${CardTone}-code-token-important`
-  | `--color-${Scheme}-${CardTone}-code-token-inserted`
-  | `--color-${Scheme}-${CardTone}-code-token-keyword`
-  | `--color-${Scheme}-${CardTone}-code-token-number`
-  | `--color-${Scheme}-${CardTone}-code-token-operator`
-  | `--color-${Scheme}-${CardTone}-code-token-prolog`
-  | `--color-${Scheme}-${CardTone}-code-token-property`
-  | `--color-${Scheme}-${CardTone}-code-token-pseudo-class`
-  | `--color-${Scheme}-${CardTone}-code-token-pseudo-element`
-  | `--color-${Scheme}-${CardTone}-code-token-punctuation`
-  | `--color-${Scheme}-${CardTone}-code-token-regex`
-  | `--color-${Scheme}-${CardTone}-code-token-selector`
-  | `--color-${Scheme}-${CardTone}-code-token-string`
-  | `--color-${Scheme}-${CardTone}-code-token-symbol`
-  | `--color-${Scheme}-${CardTone}-code-token-tag`
-  | `--color-${Scheme}-${CardTone}-code-token-unit`
-  | `--color-${Scheme}-${CardTone}-code-token-url`
-  | `--color-${Scheme}-${CardTone}-code-token-variable`
   | `--color-${Scheme}-${CardTone}-focus-ring`
   | `--color-${Scheme}-${CardTone}-link-fg`
   | `--color-${Scheme}-${CardTone}-muted-bg`
@@ -181,50 +143,48 @@ export type ColorCardVarName =
   | `--color-${Scheme}-${CardTone}-shadow-ambient`
   | `--color-${Scheme}-${CardTone}-skeleton-from`
   | `--color-${Scheme}-${CardTone}-skeleton-to`
+  | `--color-${Scheme}-${CardTone}-token-atrule`
+  | `--color-${Scheme}-${CardTone}-token-attr-name`
+  | `--color-${Scheme}-${CardTone}-token-attr-value`
+  | `--color-${Scheme}-${CardTone}-token-attribute`
+  | `--color-${Scheme}-${CardTone}-token-boolean`
+  | `--color-${Scheme}-${CardTone}-token-builtin`
+  | `--color-${Scheme}-${CardTone}-token-cdata`
+  | `--color-${Scheme}-${CardTone}-token-char`
+  | `--color-${Scheme}-${CardTone}-token-class`
+  | `--color-${Scheme}-${CardTone}-token-class-name`
+  | `--color-${Scheme}-${CardTone}-token-comment`
+  | `--color-${Scheme}-${CardTone}-token-constant`
+  | `--color-${Scheme}-${CardTone}-token-deleted`
+  | `--color-${Scheme}-${CardTone}-token-doctype`
+  | `--color-${Scheme}-${CardTone}-token-entity`
+  | `--color-${Scheme}-${CardTone}-token-function`
+  | `--color-${Scheme}-${CardTone}-token-hexcode`
+  | `--color-${Scheme}-${CardTone}-token-id`
+  | `--color-${Scheme}-${CardTone}-token-important`
+  | `--color-${Scheme}-${CardTone}-token-inserted`
+  | `--color-${Scheme}-${CardTone}-token-keyword`
+  | `--color-${Scheme}-${CardTone}-token-number`
+  | `--color-${Scheme}-${CardTone}-token-operator`
+  | `--color-${Scheme}-${CardTone}-token-prolog`
+  | `--color-${Scheme}-${CardTone}-token-property`
+  | `--color-${Scheme}-${CardTone}-token-pseudo-class`
+  | `--color-${Scheme}-${CardTone}-token-pseudo-element`
+  | `--color-${Scheme}-${CardTone}-token-punctuation`
+  | `--color-${Scheme}-${CardTone}-token-regex`
+  | `--color-${Scheme}-${CardTone}-token-selector`
+  | `--color-${Scheme}-${CardTone}-token-string`
+  | `--color-${Scheme}-${CardTone}-token-symbol`
+  | `--color-${Scheme}-${CardTone}-token-tag`
+  | `--color-${Scheme}-${CardTone}-token-unit`
+  | `--color-${Scheme}-${CardTone}-token-url`
+  | `--color-${Scheme}-${CardTone}-token-variable`
 
 export type ColorCardToneScopedVarName =
   | `--color-${CardTone}-accent-fg`
   | `--color-${CardTone}-avatar-${AvatarColor}-bg`
   | `--color-${CardTone}-avatar-${AvatarColor}-fg`
   | `--color-${CardTone}-backdrop`
-  | `--color-${CardTone}-code-bg`
-  | `--color-${CardTone}-code-fg`
-  | `--color-${CardTone}-code-token-atrule`
-  | `--color-${CardTone}-code-token-attr-name`
-  | `--color-${CardTone}-code-token-attr-value`
-  | `--color-${CardTone}-code-token-attribute`
-  | `--color-${CardTone}-code-token-boolean`
-  | `--color-${CardTone}-code-token-builtin`
-  | `--color-${CardTone}-code-token-cdata`
-  | `--color-${CardTone}-code-token-char`
-  | `--color-${CardTone}-code-token-class`
-  | `--color-${CardTone}-code-token-class-name`
-  | `--color-${CardTone}-code-token-comment`
-  | `--color-${CardTone}-code-token-constant`
-  | `--color-${CardTone}-code-token-deleted`
-  | `--color-${CardTone}-code-token-doctype`
-  | `--color-${CardTone}-code-token-entity`
-  | `--color-${CardTone}-code-token-function`
-  | `--color-${CardTone}-code-token-hexcode`
-  | `--color-${CardTone}-code-token-id`
-  | `--color-${CardTone}-code-token-important`
-  | `--color-${CardTone}-code-token-inserted`
-  | `--color-${CardTone}-code-token-keyword`
-  | `--color-${CardTone}-code-token-number`
-  | `--color-${CardTone}-code-token-operator`
-  | `--color-${CardTone}-code-token-prolog`
-  | `--color-${CardTone}-code-token-property`
-  | `--color-${CardTone}-code-token-pseudo-class`
-  | `--color-${CardTone}-code-token-pseudo-element`
-  | `--color-${CardTone}-code-token-punctuation`
-  | `--color-${CardTone}-code-token-regex`
-  | `--color-${CardTone}-code-token-selector`
-  | `--color-${CardTone}-code-token-string`
-  | `--color-${CardTone}-code-token-symbol`
-  | `--color-${CardTone}-code-token-tag`
-  | `--color-${CardTone}-code-token-unit`
-  | `--color-${CardTone}-code-token-url`
-  | `--color-${CardTone}-code-token-variable`
   | `--color-${CardTone}-focus-ring`
   | `--color-${CardTone}-link-fg`
   | `--color-${CardTone}-muted-bg`
@@ -236,6 +196,42 @@ export type ColorCardToneScopedVarName =
   | `--color-${CardTone}-shadow-ambient`
   | `--color-${CardTone}-skeleton-from`
   | `--color-${CardTone}-skeleton-to`
+  | `--color-${CardTone}-token-atrule`
+  | `--color-${CardTone}-token-attr-name`
+  | `--color-${CardTone}-token-attr-value`
+  | `--color-${CardTone}-token-attribute`
+  | `--color-${CardTone}-token-boolean`
+  | `--color-${CardTone}-token-builtin`
+  | `--color-${CardTone}-token-cdata`
+  | `--color-${CardTone}-token-char`
+  | `--color-${CardTone}-token-class`
+  | `--color-${CardTone}-token-class-name`
+  | `--color-${CardTone}-token-comment`
+  | `--color-${CardTone}-token-constant`
+  | `--color-${CardTone}-token-deleted`
+  | `--color-${CardTone}-token-doctype`
+  | `--color-${CardTone}-token-entity`
+  | `--color-${CardTone}-token-function`
+  | `--color-${CardTone}-token-hexcode`
+  | `--color-${CardTone}-token-id`
+  | `--color-${CardTone}-token-important`
+  | `--color-${CardTone}-token-inserted`
+  | `--color-${CardTone}-token-keyword`
+  | `--color-${CardTone}-token-number`
+  | `--color-${CardTone}-token-operator`
+  | `--color-${CardTone}-token-prolog`
+  | `--color-${CardTone}-token-property`
+  | `--color-${CardTone}-token-pseudo-class`
+  | `--color-${CardTone}-token-pseudo-element`
+  | `--color-${CardTone}-token-punctuation`
+  | `--color-${CardTone}-token-regex`
+  | `--color-${CardTone}-token-selector`
+  | `--color-${CardTone}-token-string`
+  | `--color-${CardTone}-token-symbol`
+  | `--color-${CardTone}-token-tag`
+  | `--color-${CardTone}-token-unit`
+  | `--color-${CardTone}-token-url`
+  | `--color-${CardTone}-token-variable`
 
 /** @public */
 export type CardScopedVarName =
@@ -250,42 +246,6 @@ export type CardScopedVarName =
   | `--color-border`
   | `--color-code-bg`
   | `--color-code-fg`
-  | `--color-code-token-atrule`
-  | `--color-code-token-attr-name`
-  | `--color-code-token-attr-value`
-  | `--color-code-token-attribute`
-  | `--color-code-token-boolean`
-  | `--color-code-token-builtin`
-  | `--color-code-token-cdata`
-  | `--color-code-token-char`
-  | `--color-code-token-class`
-  | `--color-code-token-class-name`
-  | `--color-code-token-comment`
-  | `--color-code-token-constant`
-  | `--color-code-token-deleted`
-  | `--color-code-token-doctype`
-  | `--color-code-token-entity`
-  | `--color-code-token-function`
-  | `--color-code-token-hexcode`
-  | `--color-code-token-id`
-  | `--color-code-token-important`
-  | `--color-code-token-inserted`
-  | `--color-code-token-keyword`
-  | `--color-code-token-number`
-  | `--color-code-token-operator`
-  | `--color-code-token-prolog`
-  | `--color-code-token-property`
-  | `--color-code-token-pseudo-class`
-  | `--color-code-token-pseudo-element`
-  | `--color-code-token-punctuation`
-  | `--color-code-token-regex`
-  | `--color-code-token-selector`
-  | `--color-code-token-string`
-  | `--color-code-token-symbol`
-  | `--color-code-token-tag`
-  | `--color-code-token-unit`
-  | `--color-code-token-url`
-  | `--color-code-token-variable`
   | `--color-fg`
   | `--color-focus-ring`
   | `--color-link-fg`
@@ -297,6 +257,42 @@ export type CardScopedVarName =
   | `--color-shadow-ambient`
   | `--color-skeleton-from`
   | `--color-skeleton-to`
+  | `--color-token-atrule`
+  | `--color-token-attr-name`
+  | `--color-token-attr-value`
+  | `--color-token-attribute`
+  | `--color-token-boolean`
+  | `--color-token-builtin`
+  | `--color-token-cdata`
+  | `--color-token-char`
+  | `--color-token-class`
+  | `--color-token-class-name`
+  | `--color-token-comment`
+  | `--color-token-constant`
+  | `--color-token-deleted`
+  | `--color-token-doctype`
+  | `--color-token-entity`
+  | `--color-token-function`
+  | `--color-token-hexcode`
+  | `--color-token-id`
+  | `--color-token-important`
+  | `--color-token-inserted`
+  | `--color-token-keyword`
+  | `--color-token-number`
+  | `--color-token-operator`
+  | `--color-token-prolog`
+  | `--color-token-property`
+  | `--color-token-pseudo-class`
+  | `--color-token-pseudo-element`
+  | `--color-token-punctuation`
+  | `--color-token-regex`
+  | `--color-token-selector`
+  | `--color-token-string`
+  | `--color-token-symbol`
+  | `--color-token-tag`
+  | `--color-token-unit`
+  | `--color-token-url`
+  | `--color-token-variable`
   // todo
   | `--color-checkbox-bg`
   | `--color-checkbox-fg`
@@ -370,8 +366,6 @@ export type LegacyCardScopedVarName =
 export type ElementColorVariantScopedVarName =
   `--color-${ElementColorVariant}-${ElementColorVariantKey}`
 
-export type ButtonScopedVarName = '--button-box-shadow'
-
 /** @public */
 export type InputScopedVarName =
   | `--color-input-bg`
@@ -395,104 +389,65 @@ export type SwitchScopedVarName =
   | '--switch-thumb-size'
 
 /** @public */
-export type VarName =
+export type CSSVarName =
   | AvatarScopedVarName
   | LegacyCardScopedVarName
   | PaletteVarName
   | ThemeVarName
   | ColorCardVarName
-  // scoped var names
-  | ButtonScopedVarName
   | ColorCardToneScopedVarName
   | CardScopedVarName
   | ElementColorVariantScopedVarName
   | InputScopedVarName
   | SwitchScopedVarName
 
-/** @public */
-export type PropertiesWithVars = CSS.Properties &
-  Partial<Record<VarName, string>> & {
-    _prefix?: boolean
-  }
-
-/** @public */
-export type PropertiesWithVarsAndNested = PropertiesWithVars & {
-  '@nest'?: Record<string, PropertiesWithVars>
-}
-
-/** @public */
-export type Properties = PropertiesWithVarsAndNested & {
-  '@media'?: Record<string, PropertiesWithVarsAndNested>
-}
-
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface CustomCSSProperties extends Record<VarName, string> {}
-
-/** @public */
-export type StyleSelector = `.${string}` | `#${string}` | `:root`
-
-/** @public */
-export type StyleRules = Partial<Record<StyleSelector, Properties>>
-
-/** @public */
-export type StyleKeyframes = Record<string, Record<string, Properties>>
+export interface CustomCSSProperties extends Record<CSSVarName, string> {}
 
 /** @public */
-export type StyleLayers = Record<string, StyleRules>
-
-/** @public */
-export type Style = {
-  // todo
-  // containers?: StyleContainers
-  keyframes?: StyleKeyframes
-  layers?: StyleLayers
-  rules?: StyleRules
+export interface Properties extends CSS.PropertiesFallback, Partial<CustomCSSProperties> {
+  '@keyframes'?: Record<string, Record<string, Properties>>
+  '@media'?: Record<string, Properties>
+  '@nest'?: Record<string, Properties>
 }
 
-// /** @public */
-// export interface Properties extends CSS.PropertiesFallback, Partial<CustomCSSProperties> {
-//   '@keyframes'?: Record<string, Record<string, Properties>>
-//   '@media'?: Record<string, Properties>
-//   '@nest'?: Record<string, Properties>
-// }
-
 /** @public */
 export interface Rules {
   [className: string]: Properties
 }
 
 /** @public */
-export type CSSVar = `var(${VarName})`
+export type CSSVar = `var(${CSSVarName})`
 
 /** @public */
 export interface ColorAvatarColorVarNames {
-  bg: VarName
-  fg: VarName
+  bg: CSSVarName
+  fg: CSSVarName
 }
 
 /** @public */
 export interface ColorElementVarNames {
   bg: {
-    0: VarName
-    1: VarName
-    2: VarName
-    3: VarName
-    4: VarName
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
   }
   border: {
-    0: VarName
-    1: VarName
-    2: VarName
-    3: VarName
-    4: VarName
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
   }
   fg: {
-    0: VarName
-    1: VarName
-    2: VarName
-    3: VarName
-    4: VarName
+    0: CSSVarName
+    1: CSSVarName
+    2: CSSVarName
+    3: CSSVarName
+    4: CSSVarName
   }
 }
 
@@ -503,74 +458,70 @@ export interface ColorVariantVarNames
 /** @public */
 export interface ColorCardVarNames {
   accent: {
-    fg: VarName
+    fg: CSSVarName
   }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames>
-  backdrop: VarName
-  code: {
-    bg: VarName
-    fg: VarName
-
-    token: {
-      atrule: VarName
-      attrName: VarName
-      attrValue: VarName
-      attribute: VarName
-      boolean: VarName
-      builtin: VarName
-      cdata: VarName
-      char: VarName
-      class: VarName
-      className: VarName
-      comment: VarName
-      constant: VarName
-      deleted: VarName
-      doctype: VarName
-      entity: VarName
-      function: VarName
-      hexcode: VarName
-      id: VarName
-      important: VarName
-      inserted: VarName
-      keyword: VarName
-      number: VarName
-      operator: VarName
-      prolog: VarName
-      property: VarName
-      pseudoClass: VarName
-      pseudoElement: VarName
-      punctuation: VarName
-      regex: VarName
-      selector: VarName
-      string: VarName
-      symbol: VarName
-      tag: VarName
-      unit: VarName
-      url: VarName
-      variable: VarName
-    }
-  }
-  focusRing: VarName
+  backdrop: CSSVarName
+  focusRing: CSSVarName
   link: {
-    fg: VarName
+    fg: CSSVarName
   }
   muted: {
-    bg: VarName
-    fg: VarName
+    bg: CSSVarName
+    fg: CSSVarName
   }
   shadow: {
-    outline: VarName
-    umbra: VarName
-    penumbra: VarName
-    ambient: VarName
+    outline: CSSVarName
+    umbra: CSSVarName
+    penumbra: CSSVarName
+    ambient: CSSVarName
   }
   skeleton: {
-    from: VarName
-    to: VarName
+    from: CSSVarName
+    to: CSSVarName
   }
-
+  token: {
+    atrule: CSSVarName
+    attrName: CSSVarName
+    attrValue: CSSVarName
+    attribute: CSSVarName
+    boolean: CSSVarName
+    builtin: CSSVarName
+    cdata: CSSVarName
+    char: CSSVarName
+    class: CSSVarName
+    className: CSSVarName
+    comment: CSSVarName
+    constant: CSSVarName
+    deleted: CSSVarName
+    doctype: CSSVarName
+    entity: CSSVarName
+    function: CSSVarName
+    hexcode: CSSVarName
+    id: CSSVarName
+    important: CSSVarName
+    inserted: CSSVarName
+    keyword: CSSVarName
+    number: CSSVarName
+    operator: CSSVarName
+    prolog: CSSVarName
+    property: CSSVarName
+    pseudoClass: CSSVarName
+    pseudoElement: CSSVarName
+    punctuation: CSSVarName
+    regex: CSSVarName
+    selector: CSSVarName
+    string: CSSVarName
+    symbol: CSSVarName
+    tag: CSSVarName
+    unit: CSSVarName
+    url: CSSVarName
+    variable: CSSVarName
+  }
+  // variant: {
   solid: ColorVariantVarNames
   tinted: ColorVariantVarNames
+  // }
 }
 
 /** @public */
@@ -578,34 +529,33 @@ export type ColorSchemeVarNames = Record<CardTone, ColorCardVarNames>
 
 export interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
   accent: {
-    fg: VarName
+    fg: CSSVarName
   }
   avatar: Record<AvatarColor, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
-  bg: VarName
-  border: VarName
-  fg: VarName
+  bg: CSSVarName
+  border: CSSVarName
+  fg: CSSVarName
   input: {
-    bg: VarName
-    border: VarName
-    fg: VarName
-    placeholder: VarName
+    bg: CSSVarName
+    border: CSSVarName
+    fg: CSSVarName
+    placeholder: CSSVarName
   }
 }
 
 /** @public */
 export interface FontSizeVarNames {
-  ascenderHeight: VarName
-  descenderHeight: VarName
-  fontSize: VarName
-  lineHeight: VarName
-  letterSpacing: VarName
-  iconSize: VarName
+  ascenderHeight: CSSVarName
+  descenderHeight: CSSVarName
+  fontSize: CSSVarName
+  lineHeight: CSSVarName
+  letterSpacing: CSSVarName
+  iconSize: CSSVarName
 }
 
 export interface FontVarNames<Size extends number> {
-  family: VarName
+  family: CSSVarName
   sizes: Record<Size, FontSizeVarNames>
-  weight: Record<FontWeight, VarName>
 }
 
 /** @public */
@@ -613,15 +563,14 @@ export interface VarNames {
   color: Record<Scheme, ColorSchemeVarNames> &
     ScopedColorVarNames &
     Record<CardTone, ColorCardVarNames>
-  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
   avatar: {
-    distance: VarName
+    distance: CSSVarName
     focusRing: {
-      offset: VarName
-      width: VarName
+      offset: CSSVarName
+      width: CSSVarName
     }
-    size: VarName
-    sizes: Record<AvatarSize, {distance: VarName; size: VarName}>
+    size: CSSVarName
+    sizes: Record<AvatarSize, {distance: CSSVarName; size: CSSVarName}>
   }
   font: {
     code: FontVarNames<FontCodeSize>
@@ -630,17 +579,17 @@ export interface VarNames {
     text: FontVarNames<FontTextSize>
   }
   input: {
-    fontSize: VarName
-    lineHeight: VarName
-    letterSpacing: VarName
-    ascenderHeight: VarName
-    descenderHeight: VarName
+    fontSize: CSSVarName
+    lineHeight: CSSVarName
+    letterSpacing: CSSVarName
+    ascenderHeight: CSSVarName
+    descenderHeight: CSSVarName
     // capHeight: CSSVarName
-    gap: VarName
-    padding: VarName
+
+    gap: CSSVarName
+    padding: CSSVarName
   }
-  radius: Record<Radius, VarName>
-  space: Record<Space, VarName>
+  space: Record<Space, CSSVarName>
 }
 
 /** @public */
@@ -689,49 +638,6 @@ export interface ColorCardVars {
   }
   avatar: ColorAvatarVars
   backdrop: CSSVar
-  code: {
-    bg: CSSVar
-    fg: CSSVar
-
-    token: {
-      atrule: CSSVar
-      attrName: CSSVar
-      attrValue: CSSVar
-      attribute: CSSVar
-      boolean: CSSVar
-      builtin: CSSVar
-      cdata: CSSVar
-      char: CSSVar
-      class: CSSVar
-      className: CSSVar
-      comment: CSSVar
-      constant: CSSVar
-      deleted: CSSVar
-      doctype: CSSVar
-      entity: CSSVar
-      function: CSSVar
-      hexcode: CSSVar
-      id: CSSVar
-      important: CSSVar
-      inserted: CSSVar
-      keyword: CSSVar
-      number: CSSVar
-      operator: CSSVar
-      prolog: CSSVar
-      property: CSSVar
-      pseudoClass: CSSVar
-      pseudoElement: CSSVar
-      punctuation: CSSVar
-      regex: CSSVar
-      selector: CSSVar
-      string: CSSVar
-      symbol: CSSVar
-      tag: CSSVar
-      unit: CSSVar
-      url: CSSVar
-      variable: CSSVar
-    }
-  }
   focusRing: CSSVar
   link: {
     fg: CSSVar
@@ -750,9 +656,48 @@ export interface ColorCardVars {
     from: CSSVar
     to: CSSVar
   }
-
+  token: {
+    atrule: CSSVar
+    attrName: CSSVar
+    attrValue: CSSVar
+    attribute: CSSVar
+    boolean: CSSVar
+    builtin: CSSVar
+    cdata: CSSVar
+    char: CSSVar
+    class: CSSVar
+    className: CSSVar
+    comment: CSSVar
+    constant: CSSVar
+    deleted: CSSVar
+    doctype: CSSVar
+    entity: CSSVar
+    function: CSSVar
+    hexcode: CSSVar
+    id: CSSVar
+    important: CSSVar
+    inserted: CSSVar
+    keyword: CSSVar
+    number: CSSVar
+    operator: CSSVar
+    prolog: CSSVar
+    property: CSSVar
+    pseudoClass: CSSVar
+    pseudoElement: CSSVar
+    punctuation: CSSVar
+    regex: CSSVar
+    selector: CSSVar
+    string: CSSVar
+    symbol: CSSVar
+    tag: CSSVar
+    unit: CSSVar
+    url: CSSVar
+    variable: CSSVar
+  }
+  // variant: {
   solid: ColorVariantVars
   tinted: ColorVariantVars
+  // }
 }
 
 /** @public */
@@ -807,7 +752,6 @@ export interface FontSizeVars {
 export interface FontVars<Size extends number> {
   family: CSSVar
   sizes: Record<Size, FontSizeVars>
-  weight: Record<FontWeight, CSSVar>
 }
 
 /** @public */
@@ -822,7 +766,6 @@ export interface Vars {
     light: ColorSchemeVars
   } & ScopedColorVars &
     Record<CardTone, ColorCardVars>
-  container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
   font: {
     code: FontVars<FontCodeSize>
     heading: FontVars<FontHeadingSize>
@@ -847,6 +790,5 @@ export interface Vars {
       }
     }
   }
-  radius: Record<Radius, CSSVar>
   space: Record<Space, CSSVar>
 }