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

package/src/css/types.ts

@@ -1,27 +1,50 @@
 import {
-  AvatarSize,
-  ContainerWidth,
-  FontCodeSize,
-  FontHeadingSize,
-  FontLabelSize,
-  FontTextSize,
-  FontWeight,
-  Radius,
-  Shadow,
-  Space,
-  ThemeColorAvatarColorKey,
-  ThemeColorButtonModeKey,
-  ThemeColorCardToneKey,
-  ThemeColorInputModeKey,
-  ThemeColorInputStateKey,
-  ThemeColorSchemeKey,
-  ThemeColorStateKey,
-  ThemeColorStateToneKey,
+  type AvatarSize,
+  type ContainerWidth,
+  type FontCodeSize,
+  type FontHeadingSize,
+  type FontLabelSize,
+  type FontTextSize,
+  type FontWeight,
+  type Hue,
+  type Radius,
+  type Shadow,
+  type Space,
+  type ThemeColorAvatarColorKey as AvatarColor,
+  type ThemeColorCardToneKey as CardTone,
+  type ThemeColorSchemeKey as Scheme,
+  type ThemeColorStateToneKey as ElementTone,
+  type Tint,
 } from '@sanity/ui/theme'
-import * as CSS from 'csstype'
+import CSS from 'csstype'
 
+/** @public */
 export type ResponsiveProp<T> = T | Array<T | null | undefined>
 
+/** @public */
+export type PaletteVarName = `--black` | `--white` | `--${Hue}-${Tint}`
+
+/** @public */
+export type ElementColorVariant = 'solid' | 'tinted'
+
+/** @public */
+export type ElementColorVariantKey =
+  | 'bg-0'
+  | 'bg-1'
+  | 'bg-2'
+  | 'bg-3'
+  | 'bg-4'
+  | 'border-0'
+  | 'border-1'
+  | 'border-2'
+  | 'border-3'
+  | 'border-4'
+  | 'fg-0'
+  | 'fg-1'
+  | 'fg-2'
+  | 'fg-3'
+  | 'fg-4'
+
 /** @public */
 export type ThemeVarName =
   | `--avatar-focus-ring-offset`
@@ -35,121 +58,44 @@ export type ThemeVarName =
   | `--card-border-width`
   | `--card-focus-ring-offset`
   | `--card-focus-ring-width`
-  | `--card-shadow-outline`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-accent-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-dot`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-badge-${ThemeColorStateToneKey}-icon`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-accent-fg`
-  // | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ButtonMode}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-avatar`
-  // | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ButtonMode}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-badge`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-code-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-code-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-icon`
-  // | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ButtonMode}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-kbd`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-link-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-muted-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-muted-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-skeleton-from`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-button-${ThemeColorButtonModeKey}-${ThemeColorStateToneKey}-${ThemeColorStateKey}-skeleton-to`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-code-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-focus-ring`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-icon`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-kbd-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-link-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-from`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-to`
-  // input
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-border`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-fg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-muted-bg`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-placeholder`
-  // selectable
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-outline`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-umbra`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-penumbra`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-ambient`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-atrule`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attrName`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attrValue`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-attribute`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-boolean`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-builtin`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-cdata`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-char`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-class`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-className`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-comment`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-constant`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-deleted`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-doctype`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-entity`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-function`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-hexcode`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-id`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-important`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-inserted`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-keyword`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-number`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-operator`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-prolog`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-property`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-pseudoClass`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-pseudoElement`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-punctuation`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-regex`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-selector`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-string`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-symbol`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-tag`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-unit`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-url`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-syntax-variable`
-  | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-fg`
+  | `--shadow-outline`
   | `--container-${ContainerWidth}`
   | `--font-code-family`
+  | `--font-code-feature-settings`
   | `--font-code-weight-${FontWeight}`
   | `--font-code-${FontCodeSize}-ascender-height`
   | `--font-code-${FontCodeSize}-descender-height`
+  // | `--font-code-${FontCodeSize}-cap-height`
   | `--font-code-${FontCodeSize}-size`
   | `--font-code-${FontCodeSize}-line-height`
   | `--font-code-${FontCodeSize}-letter-spacing`
   | `--font-code-${FontCodeSize}-icon-size`
   | `--font-heading-family`
+  | `--font-heading-feature-settings`
   | `--font-heading-weight-${FontWeight}`
   | `--font-heading-${FontHeadingSize}-ascender-height`
   | `--font-heading-${FontHeadingSize}-descender-height`
+  // | `--font-heading-${FontHeadingSize}-cap-height`
   | `--font-heading-${FontHeadingSize}-size`
   | `--font-heading-${FontHeadingSize}-line-height`
   | `--font-heading-${FontHeadingSize}-letter-spacing`
   | `--font-heading-${FontHeadingSize}-icon-size`
   | `--font-label-family`
+  | `--font-label-feature-settings`
   | `--font-label-weight-${FontWeight}`
   | `--font-label-${FontLabelSize}-ascender-height`
   | `--font-label-${FontLabelSize}-descender-height`
+  // | `--font-label-${FontLabelSize}-cap-height`
   | `--font-label-${FontLabelSize}-size`
   | `--font-label-${FontLabelSize}-line-height`
   | `--font-label-${FontLabelSize}-letter-spacing`
   | `--font-label-${FontLabelSize}-icon-size`
   | `--font-text-family`
+  | `--font-text-feature-settings`
   | `--font-text-weight-${FontWeight}`
   | `--font-text-${FontTextSize}-ascender-height`
   | `--font-text-${FontTextSize}-descender-height`
+  // | `--font-text-${FontTextSize}-cap-height`
   | `--font-text-${FontTextSize}-size`
   | `--font-text-${FontTextSize}-line-height`
   | `--font-text-${FontTextSize}-letter-spacing`
@@ -181,34 +127,167 @@ export type ThemeVarName =
   | `--shadow-${Shadow}-penumbra`
   | `--shadow-${Shadow}-ambient`
 
+export type ColorCardVarName =
+  | `--color-${Scheme}-${CardTone}-accent-fg`
+  | `--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`
+  | `--color-${Scheme}-${CardTone}-muted-fg`
+  | `--color-${Scheme}-${CardTone}-${ElementColorVariant}-${ElementTone}-${ElementColorVariantKey}`
+  | `--color-${Scheme}-${CardTone}-shadow-outline`
+  | `--color-${Scheme}-${CardTone}-shadow-umbra`
+  | `--color-${Scheme}-${CardTone}-shadow-penumbra`
+  | `--color-${Scheme}-${CardTone}-shadow-ambient`
+  | `--color-${Scheme}-${CardTone}-skeleton-from`
+  | `--color-${Scheme}-${CardTone}-skeleton-to`
+
+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`
+  | `--color-${CardTone}-muted-fg`
+  | `--color-${CardTone}-${ElementColorVariant}-${ElementTone}-${ElementColorVariantKey}`
+  | `--color-${CardTone}-shadow-outline`
+  | `--color-${CardTone}-shadow-umbra`
+  | `--color-${CardTone}-shadow-penumbra`
+  | `--color-${CardTone}-shadow-ambient`
+  | `--color-${CardTone}-skeleton-from`
+  | `--color-${CardTone}-skeleton-to`
+
+/** @public */
 export type CardScopedVarName =
   | `--color-accent-fg`
-  | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
-  | `--color-avatar-${ThemeColorAvatarColorKey}-fg`
+  | `--color-avatar-bg`
+  | `--color-avatar-fg`
+  | `--color-avatar-${AvatarColor}-bg`
+  | `--color-avatar-${AvatarColor}-fg`
   | `--color-backdrop`
-  | `--color-badge-bg`
-  | `--color-badge-dot`
-  | `--color-badge-fg`
-  | `--color-badge-icon`
-  | `--color-badge-${ThemeColorStateToneKey}-bg`
-  | `--color-badge-${ThemeColorStateToneKey}-dot`
-  | `--color-badge-${ThemeColorStateToneKey}-fg`
-  | `--color-badge-${ThemeColorStateToneKey}-icon`
+  | `--color-${ElementColorVariant}-${ElementTone}-${ElementColorVariantKey}`
   | `--color-bg`
   | `--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-icon`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-bg`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-border`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-fg`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-muted-bg`
-  | `--color-input-${ThemeColorInputModeKey}-${ThemeColorInputStateKey}-placeholder`
-  | `--color-kbd-bg`
-  | `--color-kbd-border`
-  | `--color-kbd-fg`
   | `--color-link-fg`
   | `--color-muted-bg`
   | `--color-muted-fg`
@@ -218,51 +297,50 @@ export type CardScopedVarName =
   | `--color-shadow-ambient`
   | `--color-skeleton-from`
   | `--color-skeleton-to`
-  | `--color-syntax-atrule`
-  | `--color-syntax-attrName`
-  | `--color-syntax-attrValue`
-  | `--color-syntax-attribute`
-  | `--color-syntax-boolean`
-  | `--color-syntax-builtin`
-  | `--color-syntax-cdata`
-  | `--color-syntax-char`
-  | `--color-syntax-class`
-  | `--color-syntax-className`
-  | `--color-syntax-comment`
-  | `--color-syntax-constant`
-  | `--color-syntax-deleted`
-  | `--color-syntax-doctype`
-  | `--color-syntax-entity`
-  | `--color-syntax-function`
-  | `--color-syntax-hexcode`
-  | `--color-syntax-id`
-  | `--color-syntax-important`
-  | `--color-syntax-inserted`
-  | `--color-syntax-keyword`
-  | `--color-syntax-number`
-  | `--color-syntax-operator`
-  | `--color-syntax-prolog`
-  | `--color-syntax-property`
-  | `--color-syntax-pseudoClass`
-  | `--color-syntax-pseudoElement`
-  | `--color-syntax-punctuation`
-  | `--color-syntax-regex`
-  | `--color-syntax-selector`
-  | `--color-syntax-string`
-  | `--color-syntax-symbol`
-  | `--color-syntax-tag`
-  | `--color-syntax-unit`
-  | `--color-syntax-url`
-  | `--color-syntax-variable`
+  // todo
+  | `--color-checkbox-bg`
+  | `--color-checkbox-fg`
+  | `--color-checkbox-border`
+  | `--font-ascender-height`
+  // | `--font-cap-height`
+  | `--font-descender-height`
+  | `--font-family`
+  | `--font-feature-settings`
+  | `--font-icon-offset`
+  | `--font-icon-size`
+  | `--font-letter-spacing`
+  | `--font-line-height`
+  | `--font-size`
+  | `--font-skeleton-line-height`
+  | `--font-skeleton-ascender-height`
+  | `--font-skeleton-descender-height`
+  | `--font-weight-regular`
+  | `--font-weight-medium`
+  | `--font-weight-semibold`
+  | `--font-weight-bold`
+  | `--font-weight`
+  | `--fg-color`
+  | `--padding-top`
+  | `--padding-right`
+  | `--padding-bottom`
+  | `--padding-left`
+
+export type AvatarScopedVarName =
+  | `--avatar-bg-color`
+  | `--avatar-fg-color`
+  | `--avatar-distance`
+  | `--avatar-size`
+
+export type LegacyCardScopedVarName =
   // legacy
   | `--card-accent-fg-color`
-  | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
-  | `--card-avatar-${ThemeColorAvatarColorKey}-fg-color`
+  | `--card-avatar-${AvatarColor}-bg-color`
+  | `--card-avatar-${AvatarColor}-fg-color`
   | `--card-backdrop-color`
-  | `--card-badge-${ThemeColorStateToneKey}-bg-color`
-  | `--card-badge-${ThemeColorStateToneKey}-dot-color`
-  | `--card-badge-${ThemeColorStateToneKey}-fg-color`
-  | `--card-badge-${ThemeColorStateToneKey}-icon-color`
+  | `--card-badge-${ElementTone}-bg-color`
+  | `--card-badge-${ElementTone}-dot-color`
+  | `--card-badge-${ElementTone}-fg-color`
+  | `--card-badge-${ElementTone}-icon-color`
   | `--card-bg-color`
   | `--card-bg-image`
   | `--card-bg2-color`
@@ -287,185 +365,285 @@ export type CardScopedVarName =
   | `--card-shadow-ambient-color`
   | `--card-skeleton-from-color`
   | `--card-skeleton-to-color`
-  // todo
-  | `--avatar-bg-color`
-  | `--avatar-fg-color`
-  | `--color-checkbox-bg`
-  | `--color-checkbox-fg`
-  | `--color-checkbox-border`
-  | `--font-ascender-height`
-  | `--font-cap-height`
-  | `--font-descender-height`
-  | `--font-family`
-  | `--font-icon-offset`
-  | `--font-icon-size`
-  | `--font-letter-spacing`
-  | `--font-line-height`
-  | `--font-size`
-  | `--font-skeleton-line-height`
-  | `--font-skeleton-ascender-height`
-  | `--font-skeleton-descender-height`
-  | `--font-weight-regular`
-  | `--font-weight-medium`
-  | `--font-weight-semibold`
-  | `--font-weight-bold`
-  | `--font-weight`
-  | `--fg-color`
-  | `--input-bg-color`
-  | `--input-border-color`
-  | `--input-fg-color`
-  | `--padding-top`
-  | `--padding-right`
-  | `--padding-bottom`
-  | `--padding-left`
 
-// export type CardVarName = `--card-${CardSize}-${CardVariant}-${CardState}-${CardElement}`
+/** @public */
+export type ElementColorVariantScopedVarName =
+  `--color-${ElementColorVariant}-${ElementColorVariantKey}`
+
+export type ButtonScopedVarName = '--button-box-shadow'
+
+/** @public */
+export type InputScopedVarName =
+  | `--color-input-bg`
+  | `--color-input-border`
+  | `--color-input-fg`
+  | `--color-input-placeholder`
+  | `--input-ascender-height`
+  | `--input-descender-height`
+  // | `--input-cap-height`
+  | `--input-font-size`
+  | `--input-gap`
+  | `--input-letter-spacing`
+  | `--input-line-height`
+  | `--input-padding`
 
 /** @public */
-export type CSSVarName = ThemeVarName | CardScopedVarName // `--${string}`
+export type SwitchScopedVarName =
+  | `--switch-bg-color`
+  | `--switch-fg-color`
+  | '--switch-thumb-offset'
+  | '--switch-thumb-size'
 
 /** @public */
-export interface CustomCSSProperties extends Record<CSSVarName, string> {}
+export type VarName =
+  | AvatarScopedVarName
+  | LegacyCardScopedVarName
+  | PaletteVarName
+  | ThemeVarName
+  | ColorCardVarName
+  // scoped var names
+  | ButtonScopedVarName
+  | ColorCardToneScopedVarName
+  | CardScopedVarName
+  | ElementColorVariantScopedVarName
+  | InputScopedVarName
+  | SwitchScopedVarName
 
 /** @public */
-export interface Properties extends CSS.PropertiesFallback, Partial<CustomCSSProperties> {
-  '@keyframes'?: Record<string, Record<string, Properties>>
-  '@media'?: Record<string, Properties>
-  '@nest'?: Record<string, Properties>
+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>>
+
+/** @public */
+export type StyleLayers = Record<string, StyleRules>
+
+/** @public */
+export type Style = {
+  // todo
+  // containers?: StyleContainers
+  keyframes?: StyleKeyframes
+  layers?: StyleLayers
+  rules?: StyleRules
 }
 
+// /** @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(${CSSVarName})`
+export type CSSVar = `var(${VarName})`
 
+/** @public */
 export interface ColorAvatarColorVarNames {
-  bg: CSSVarName
-  fg: CSSVarName
+  bg: VarName
+  fg: VarName
 }
 
-export interface ColorBadgeToneVarNames {
-  bg: CSSVarName
-  dot: CSSVarName
-  fg: CSSVarName
-  icon: CSSVarName
-}
-
-export interface ColorInputStateVarNames {
-  bg: CSSVarName
-  border: CSSVarName
-  fg: CSSVarName
-  muted: {
-    bg: CSSVarName
+/** @public */
+export interface ColorElementVarNames {
+  bg: {
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
+  }
+  border: {
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
+  }
+  fg: {
+    0: VarName
+    1: VarName
+    2: VarName
+    3: VarName
+    4: VarName
   }
-  placeholder: CSSVarName
 }
 
-export interface ColorStateVarNames {
+export interface ColorVariantVarNames
+  extends ColorElementVarNames,
+    Record<ElementTone, ColorElementVarNames> {}
+
+/** @public */
+export interface ColorCardVarNames {
   accent: {
-    fg: CSSVarName
+    fg: VarName
   }
-  avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
-  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVarNames>
-  // badge
-  bg: CSSVarName
-  border: CSSVarName
+  avatar: Record<AvatarColor, ColorAvatarColorVarNames>
+  backdrop: VarName
   code: {
-    bg: CSSVarName
-    fg: CSSVarName
-  }
-  fg: CSSVarName
-  icon: CSSVarName
-  // kbd
-  kbd: {
-    bg: CSSVarName
-    border: CSSVarName
-    fg: CSSVarName
+    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
   link: {
-    fg: CSSVarName
+    fg: VarName
   }
   muted: {
-    bg: CSSVarName
-    fg: CSSVarName
+    bg: VarName
+    fg: VarName
   }
   shadow: {
-    outline: CSSVarName
-    umbra: CSSVarName
-    penumbra: CSSVarName
-    ambient: CSSVarName
+    outline: VarName
+    umbra: VarName
+    penumbra: VarName
+    ambient: VarName
   }
   skeleton: {
-    from: CSSVarName
-    to: CSSVarName
-  }
-  syntax: {
-    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
+    from: VarName
+    to: VarName
   }
+
+  solid: ColorVariantVarNames
+  tinted: ColorVariantVarNames
 }
 
-export interface ColorCardVarNames extends ColorStateVarNames {
-  backdrop: ThemeVarName
-  focusRing: ThemeVarName
-  input: Record<ThemeColorInputModeKey, Record<ThemeColorInputStateKey, ColorInputStateVarNames>>
+/** @public */
+export type ColorSchemeVarNames = Record<CardTone, ColorCardVarNames>
+
+export interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'avatar'> {
+  accent: {
+    fg: VarName
+  }
+  avatar: Record<AvatarColor, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
+  bg: VarName
+  border: VarName
+  fg: VarName
+  input: {
+    bg: VarName
+    border: VarName
+    fg: VarName
+    placeholder: VarName
+  }
 }
 
-export type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCardVarNames>
+/** @public */
+export interface FontSizeVarNames {
+  ascenderHeight: VarName
+  descenderHeight: VarName
+  fontSize: VarName
+  lineHeight: VarName
+  letterSpacing: VarName
+  iconSize: VarName
+}
 
-export interface ScopedColorVarNames extends Omit<ColorStateVarNames, 'badge'> {
-  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVarNames> & ColorBadgeToneVarNames
+export interface FontVarNames<Size extends number> {
+  family: VarName
+  sizes: Record<Size, FontSizeVarNames>
+  weight: Record<FontWeight, VarName>
 }
 
 /** @public */
 export interface VarNames {
-  color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> & ScopedColorVarNames
+  color: Record<Scheme, ColorSchemeVarNames> &
+    ScopedColorVarNames &
+    Record<CardTone, ColorCardVarNames>
+  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
   avatar: {
+    distance: VarName
     focusRing: {
-      offset: CSSVarName
-      width: CSSVarName
+      offset: VarName
+      width: VarName
     }
+    size: VarName
+    sizes: Record<AvatarSize, {distance: VarName; size: VarName}>
+  }
+  font: {
+    code: FontVarNames<FontCodeSize>
+    heading: FontVarNames<FontHeadingSize>
+    label: FontVarNames<FontLabelSize>
+    text: FontVarNames<FontTextSize>
   }
-  space: Record<Space, CSSVarName>
+  input: {
+    fontSize: VarName
+    lineHeight: VarName
+    letterSpacing: VarName
+    ascenderHeight: VarName
+    descenderHeight: VarName
+    // capHeight: CSSVarName
+    gap: VarName
+    padding: VarName
+  }
+  radius: Record<Radius, VarName>
+  space: Record<Space, VarName>
 }
 
+/** @public */
 export interface ColorInputStateVars {
   bg: CSSVar
   border: CSSVar
@@ -476,58 +654,85 @@ export interface ColorInputStateVars {
   placeholder: CSSVar
 }
 
-export interface ColorCardVars extends ColorStateVars {
-  backdrop: CSSVar
-  focusRing: CSSVar
-  input: Record<ThemeColorInputModeKey, Record<ThemeColorInputStateKey, ColorInputStateVars>>
-}
-
-export interface ColorBadgeToneVars {
-  bg: CSSVar
-  dot: CSSVar
-  fg: CSSVar
-  icon: CSSVar
-}
-
-export type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
-
-export type ColorAvatarVars = Record<ThemeColorAvatarColorKey, ColorAvatarColorVars>
-
-export interface ColorInputStateVars {
-  bg: CSSVar
-  border: CSSVar
-  fg: CSSVar
-  muted: {
-    bg: CSSVar
+/** @public */
+export interface ColorElementVars {
+  bg: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
+  }
+  border: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
+  }
+  fg: {
+    0: CSSVar
+    1: CSSVar
+    2: CSSVar
+    3: CSSVar
+    4: CSSVar
   }
-  placeholder: CSSVar
 }
 
-export type ColorInputModeVars = Record<ThemeColorInputStateKey, ColorInputStateVars>
-
-export type ColorInputVars = Record<ThemeColorInputModeKey, ColorInputModeVars>
+/** @public */
+export interface ColorVariantVars extends Record<ElementTone, ColorElementVars>, ColorElementVars {}
 
-export interface ColorStateVars {
+/** @public */
+export interface ColorCardVars {
   accent: {
     fg: CSSVar
   }
   avatar: ColorAvatarVars
-  badge: Record<ThemeColorStateToneKey, ColorBadgeToneVars>
-  // badge
-  bg: CSSVar
-  border: CSSVar
+  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
+    }
   }
-  fg: CSSVar
-  icon: CSSVar
-  input: ColorInputVars
-  kbd: {
-    bg: CSSVar
-    border: CSSVar
-    fg: CSSVar
-  }
+  focusRing: CSSVar
   link: {
     fg: CSSVar
   }
@@ -545,57 +750,49 @@ export interface ColorStateVars {
     from: CSSVar
     to: CSSVar
   }
-  syntax: {
-    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
-  }
+
+  solid: ColorVariantVars
+  tinted: ColorVariantVars
 }
 
+/** @public */
+export interface ColorBadgeToneVars {
+  bg: CSSVar
+  dot: CSSVar
+  fg: CSSVar
+  icon: CSSVar
+}
+
+/** @public */
+export type ColorBadgeVars = Record<ElementTone, ColorBadgeToneVars>
+
+/** @public */
+export type ColorAvatarVars = Record<AvatarColor, ColorAvatarColorVars>
+
+/** @public */
 export interface ColorAvatarColorVars {
   bg: CSSVar
   fg: CSSVar
 }
 
-export type ColorSchemeVars = Record<ThemeColorCardToneKey, ColorCardVars>
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ColorSchemeVars extends Record<CardTone, ColorCardVars> {}
 
-export interface ScopedColorVars extends Omit<ColorStateVars, 'badge'> {
-  badge: ColorBadgeVars & ColorBadgeToneVars
+export interface ScopedColorVars extends Omit<ColorCardVars, 'avatar'> {
+  avatar: ColorAvatarVars & ColorAvatarColorVars
+  bg: CSSVar
+  border: CSSVar
+  fg: CSSVar
+  input: {
+    bg: CSSVar
+    border: CSSVar
+    fg: CSSVar
+    placeholder: CSSVar
+  }
 }
 
+/** @public */
 export interface FontSizeVars {
   ascenderHeight: CSSVar
   descenderHeight: CSSVar
@@ -603,24 +800,53 @@ export interface FontSizeVars {
   lineHeight: CSSVar
   letterSpacing: CSSVar
   iconSize: CSSVar
+  // capHeight: CSSVar
 }
 
+/** @public */
 export interface FontVars<Size extends number> {
   family: CSSVar
   sizes: Record<Size, FontSizeVars>
+  weight: Record<FontWeight, CSSVar>
 }
 
 /** @public */
 export interface Vars {
+  avatar: {
+    distance: CSSVar
+    size: CSSVar
+    sizes: Record<AvatarSize, {distance: CSSVar; size: CSSVar}>
+  }
   color: {
     dark: ColorSchemeVars
     light: ColorSchemeVars
-  } & ScopedColorVars
+  } & ScopedColorVars &
+    Record<CardTone, ColorCardVars>
+  container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
   font: {
     code: FontVars<FontCodeSize>
     heading: FontVars<FontHeadingSize>
     label: FontVars<FontLabelSize>
     text: FontVars<FontTextSize>
   }
+  input: {
+    fontSize: CSSVar
+    lineHeight: CSSVar
+    letterSpacing: CSSVar
+    ascenderHeight: CSSVar
+    descenderHeight: CSSVar
+    // capHeight: CSSVar
+
+    gap: CSSVar
+    padding: CSSVar
+
+    text: {
+      focusRing: {
+        offset: CSSVar
+        width: CSSVar
+      }
+    }
+  }
+  radius: Record<Radius, CSSVar>
   space: Record<Space, CSSVar>
 }