@sanity/ui 3.0.0-static.6 → 3.0.0-static.8

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

@@ -16,22 +16,16 @@ const primitive: StyleRules = {
     padding: 0,
     margin: 0,
 
-    /* Place the input element above the representation element */
+    // place the input element on top of the representation element
     zIndex: 1,
   },
 
   '.switch-presentation': {
     '--switch-bg-color': 'var(--color-tinted-default-border-2)',
-    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
     '--switch-fg-color': 'var(--color-tinted-default-bg-0)',
-    // --switch-bg-color: ${color.input.default.enabled.border};
-    // --switch-fg-color: ${color.input.default.enabled.bg};
     '--switch-thumb-offset': '0',
     '--switch-thumb-size': 'calc(var(--input-switch-height) - var(--input-switch-padding) * 2)',
     'display': 'block',
-    // &:not([hidden]) {
-    //   display: block;
-    // }
     'position': 'relative',
     'width': 'var(--input-switch-width)',
     'height': 'var(--input-switch-height)',
@@ -42,59 +36,29 @@ const primitive: StyleRules = {
     'pointerEvents': 'none',
 
     '@nest': {
-      // '&::after': {
-      //   content: '""',
-      //   display: 'block',
-      //   position: 'absolute',
-      //   top: 0,
-      //   left: 0,
-      //   right: 0,
-      //   bottom: 0,
-      //   zIndex: 1,
-      //   // boxShadow: 'var(--switch-box-shadow)',
-      //   borderRadius: 'inherit',
-      // },
       '.switch-element:focus + &': {
-        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
         outline: 'var(--input-switch-focus-ring-width) solid var(--color-focus-ring)',
       },
+
       'input:focus:not(:focus-visible) + &': {
         outline: 'none',
       },
+
       'input:checked + &': {
         '--switch-bg-color': 'var(--color-solid-default-bg-0)',
-        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
         '--switch-fg-color': 'var(--color-solid-default-fg-0)',
       },
-      // input:not([data-read-only]):disabled + && {
-      //   --switch-bg-color: ${color.input.default.disabled.border};
-      //   --switch-fg-color: ${color.input.default.disabled.bg};
-      // }
-      // input[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.border};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
-      // input:checked[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.fg};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
 
       '.switch-element:checked + &': {
         '--switch-thumb-offset':
           'calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))',
       },
-    },
 
-    // @media (hover: hover) {
-    //   input:not(:disabled):hover + && {
-    //     --switch-bg-color: ${color.input.default.hovered.border};
-    //     --switch-fg-color: ${color.input.default.hovered.bg};
-    //   }
-    //   input:not(:disabled):checked:hover + && {
-    //     --switch-bg-color: ${color.input.default.enabled.fg};
-    //     --switch-fg-color: ${color.input.default.enabled.bg};
-    //   }
-    // }
+      '[data-indeterminate] > .switch-element + &': {
+        '--switch-thumb-offset':
+          'calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))',
+      },
+    },
   },
 
   '.switch-track': {
@@ -106,15 +70,12 @@ const primitive: StyleRules = {
     right: 0,
     bottom: 0,
     borderRadius: 'inherit',
-    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
 
     transition:
       'box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
   },
 
   '.switch-thumb': {
-    // '--switch-thumb-offset': '0',
-
     display: 'block',
     position: 'absolute',
     left: 'var(--input-switch-padding)',
@@ -127,42 +88,6 @@ const primitive: StyleRules = {
     transform: 'translate3d(var(--switch-thumb-offset), 0, 0)',
     transition:
       'transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
-    //     transition-property: transform;
-    // transition-duration: ${input.switch.transitionDurationMs}ms;
-    // transition-timing-function: ${input.switch.transitionTimingFunction};
-
-    // const {$indeterminate} = props
-    // const {input} = getTheme_v2(props.theme)
-    // const trackWidth = input.switch.width
-    // const trackHeight = input.switch.height
-    // const trackPadding = input.switch.padding
-    // const size = trackHeight - input.switch.padding * 2
-    // const checkedOffset = trackWidth - trackPadding * 2 - size
-    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-    // const checked = $indeterminate !== true && props.$checked === true
-    // return css`
-
-    //   position: absolute;
-    //   left: ${rem(trackPadding)};
-    //   top: ${rem(trackPadding)};
-    //   height: ${rem(size)};
-    //   width: ${rem(size)};
-    //   border-radius: ${rem(size / 2)};
-    //   transition-property: transform;
-    //   transition-duration: ${input.switch.transitionDurationMs}ms;
-    //   transition-timing-function: ${input.switch.transitionTimingFunction};
-    //   background: var(--switch-fg-color);
-    //   transform: translate3d(0, 0, 0);
-    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-    //   ${checked &&
-    //   css`
-    //     transform: translate3d(${checkedOffset}px, 0, 0);
-    //   `}
-    //   ${$indeterminate &&
-    //   css`
-    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
-    //   `}
-    // `
   },
 }
 

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

@@ -2,6 +2,7 @@ import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.text': {
@@ -25,9 +26,16 @@ const primitive: StyleRules = {
         color: 'var(--color-fg)',
       },
 
-      // '& svg': {
-      //   color: 'var(--color-icon)',
-      // },
+      '& code': {
+        fontFamily: vars.font.code.family,
+        color: 'var(--color-code-fg)',
+        backgroundColor: 'var(--color-muted-bg)',
+        borderRadius: vars.radius[2],
+      },
+
+      '& svg': {
+        color: 'var(--color-muted-fg)',
+      },
     },
   },
 

package/src/css/system.style.ts

@@ -23,6 +23,7 @@ import {heightStyle} from './aspects/height/height.style'
 import {insetStyle} from './aspects/inset/inset.style'
 import {marginStyle} from './aspects/margin/margin.style'
 import {maxWidthStyle} from './aspects/maxWidth/maxWidth.style'
+import {minWidthStyle} from './aspects/minWidth/minWidth.style'
 import {outlineStyle} from './aspects/outline/outline.style'
 import {overflowStyle} from './aspects/overflow/overflow.style'
 import {paddingStyle} from './aspects/padding/padding.style'
@@ -104,6 +105,7 @@ export const systemStyle: Style = _mergeStyles([
   insetStyle,
   marginStyle,
   maxWidthStyle,
+  minWidthStyle,
   outlineStyle,
   overflowStyle,
   paddingStyle,

package/src/css/types.ts

@@ -132,6 +132,44 @@ 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`
@@ -143,48 +181,50 @@ 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`
@@ -196,42 +236,6 @@ 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 =
@@ -246,6 +250,42 @@ 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`
@@ -257,42 +297,6 @@ 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`
@@ -503,6 +507,49 @@ export interface ColorCardVarNames {
   }
   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
   link: {
     fg: VarName
@@ -521,48 +568,9 @@ export interface ColorCardVarNames {
     from: VarName
     to: 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
-  }
-  // variant: {
+
   solid: ColorVariantVarNames
   tinted: ColorVariantVarNames
-  // }
 }
 
 /** @public */
@@ -680,6 +688,49 @@ 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
@@ -698,48 +749,9 @@ 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 */