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

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

@@ -0,0 +1,11 @@
+import {Rules} from '../../types'
+
+export const srOnlyRules: Rules = {
+  'sr-only': {
+    display: 'block',
+    width: 0,
+    height: 0,
+    position: 'absolute',
+    overflow: ['hidden', 'clip'],
+  },
+}

package/src/css/varNames.ts

@@ -9,8 +9,6 @@ import {
   type FontHeadingSize,
   type FontLabelSize,
   type FontTextSize,
-  RADIUS,
-  Radius,
   SPACE,
   type Space,
   THEME_COLOR_STATE_TONES,
@@ -21,8 +19,8 @@ import {
 import {
   type ColorCardVarNames,
   type ColorVariantVarNames,
+  type CSSVarName,
   type FontSizeVarNames,
-  type VarName,
   type VarNames,
 } from './types'
 
@@ -41,10 +39,10 @@ export const varNames: VarNames = {
           [size]: {
             distance: `--avatar-${size}-distance`,
             size: `--avatar-${size}-size`,
-          } satisfies {distance: VarName; size: VarName},
+          } satisfies {distance: CSSVarName; size: CSSVarName},
         }
       },
-      {} as Record<AvatarSize, {distance: VarName; size: VarName}>,
+      {} as Record<AvatarSize, {distance: CSSVarName; size: CSSVarName}>,
     ),
   },
   color: {
@@ -96,49 +94,6 @@ export const varNames: VarNames = {
     backdrop: `--color-backdrop`,
     bg: `--color-bg`,
     border: `--color-border`,
-    code: {
-      bg: `--color-code-bg`,
-      fg: `--color-code-fg`,
-
-      token: {
-        atrule: `--color-code-token-atrule`,
-        attrName: `--color-code-token-attr-name`,
-        attrValue: `--color-code-token-attr-value`,
-        attribute: `--color-code-token-attribute`,
-        boolean: `--color-code-token-boolean`,
-        builtin: `--color-code-token-builtin`,
-        cdata: `--color-code-token-cdata`,
-        char: `--color-code-token-char`,
-        class: `--color-code-token-class`,
-        className: `--color-code-token-class-name`,
-        comment: `--color-code-token-comment`,
-        constant: `--color-code-token-constant`,
-        deleted: `--color-code-token-deleted`,
-        doctype: `--color-code-token-doctype`,
-        entity: `--color-code-token-entity`,
-        function: `--color-code-token-function`,
-        hexcode: `--color-code-token-hexcode`,
-        id: `--color-code-token-id`,
-        important: `--color-code-token-important`,
-        inserted: `--color-code-token-inserted`,
-        keyword: `--color-code-token-keyword`,
-        number: `--color-code-token-number`,
-        operator: `--color-code-token-operator`,
-        prolog: `--color-code-token-prolog`,
-        property: `--color-code-token-property`,
-        pseudoClass: `--color-code-token-pseudo-class`,
-        pseudoElement: `--color-code-token-pseudo-element`,
-        punctuation: `--color-code-token-punctuation`,
-        regex: `--color-code-token-regex`,
-        selector: `--color-code-token-selector`,
-        string: `--color-code-token-string`,
-        symbol: `--color-code-token-symbol`,
-        tag: `--color-code-token-tag`,
-        unit: `--color-code-token-unit`,
-        url: `--color-code-token-url`,
-        variable: `--color-code-token-variable`,
-      },
-    },
     fg: `--color-fg`,
     focusRing: `--color-focus-ring`,
     input: {
@@ -164,6 +119,44 @@ export const varNames: VarNames = {
       from: `--color-skeleton-from`,
       to: `--color-skeleton-to`,
     },
+    token: {
+      atrule: `--color-token-atrule`,
+      attrName: `--color-token-attr-name`,
+      attrValue: `--color-token-attr-value`,
+      attribute: `--color-token-attribute`,
+      boolean: `--color-token-boolean`,
+      builtin: `--color-token-builtin`,
+      cdata: `--color-token-cdata`,
+      char: `--color-token-char`,
+      class: `--color-token-class`,
+      className: `--color-token-class-name`,
+      comment: `--color-token-comment`,
+      constant: `--color-token-constant`,
+      deleted: `--color-token-deleted`,
+      doctype: `--color-token-doctype`,
+      entity: `--color-token-entity`,
+      function: `--color-token-function`,
+      hexcode: `--color-token-hexcode`,
+      id: `--color-token-id`,
+      important: `--color-token-important`,
+      inserted: `--color-token-inserted`,
+      keyword: `--color-token-keyword`,
+      number: `--color-token-number`,
+      operator: `--color-token-operator`,
+      prolog: `--color-token-prolog`,
+      property: `--color-token-property`,
+      pseudoClass: `--color-token-pseudo-class`,
+      pseudoElement: `--color-token-pseudo-element`,
+      punctuation: `--color-token-punctuation`,
+      regex: `--color-token-regex`,
+      selector: `--color-token-selector`,
+      string: `--color-token-string`,
+      symbol: `--color-token-symbol`,
+      tag: `--color-token-tag`,
+      unit: `--color-token-unit`,
+      url: `--color-token-url`,
+      variable: `--color-token-variable`,
+    },
 
     solid: buildColorVariantVarNames({variant: 'solid'}),
     tinted: buildColorVariantVarNames({variant: 'tinted'}),
@@ -200,14 +193,6 @@ export const varNames: VarNames = {
       critical: buildColorCardVarNames({scheme: 'light', tone: 'critical'}),
     },
   },
-  container: {
-    0: `--container-0`,
-    1: `--container-1`,
-    2: `--container-2`,
-    3: `--container-3`,
-    4: `--container-4`,
-    5: `--container-5`,
-  },
   font: {
     code: {
       family: `--font-code-family`,
@@ -227,12 +212,6 @@ export const varNames: VarNames = {
         },
         {} as Record<FontCodeSize, FontSizeVarNames>,
       ),
-      weight: {
-        regular: `--font-code-weight-regular`,
-        medium: `--font-code-weight-medium`,
-        semibold: `--font-code-weight-semibold`,
-        bold: `--font-code-weight-bold`,
-      },
     },
     heading: {
       family: `--font-heading-family`,
@@ -252,12 +231,6 @@ export const varNames: VarNames = {
         },
         {} as Record<FontHeadingSize, FontSizeVarNames>,
       ),
-      weight: {
-        regular: `--font-heading-weight-regular`,
-        medium: `--font-heading-weight-medium`,
-        semibold: `--font-heading-weight-semibold`,
-        bold: `--font-heading-weight-bold`,
-      },
     },
     label: {
       family: `--font-label-family`,
@@ -277,12 +250,6 @@ export const varNames: VarNames = {
         },
         {} as Record<FontLabelSize, FontSizeVarNames>,
       ),
-      weight: {
-        regular: `--font-label-weight-regular`,
-        medium: `--font-label-weight-medium`,
-        semibold: `--font-label-weight-semibold`,
-        bold: `--font-label-weight-bold`,
-      },
     },
     text: {
       family: `--font-text-family`,
@@ -302,12 +269,6 @@ export const varNames: VarNames = {
         },
         {} as Record<FontTextSize, FontSizeVarNames>,
       ),
-      weight: {
-        regular: `--font-text-weight-regular`,
-        medium: `--font-text-weight-medium`,
-        semibold: `--font-text-weight-semibold`,
-        bold: `--font-text-weight-bold`,
-      },
     },
   },
   input: {
@@ -321,12 +282,9 @@ export const varNames: VarNames = {
     gap: `--input-gap`,
     padding: `--input-padding`,
   },
-  radius: Object.fromEntries(
-    RADIUS.map((radius) => [radius, `--radius-${radius}` as VarName]),
-  ) as Record<Radius, VarName>,
   space: Object.fromEntries(
-    SPACE.map((space) => [space, `--space-${String(space).replace('.', '_')}` as VarName]),
-  ) as Record<Space, VarName>,
+    SPACE.map((space) => [space, `--space-${String(space).replace('.', '_')}` as CSSVarName]),
+  ) as Record<Space, CSSVarName>,
 } as const
 
 function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): ColorCardVarNames {
@@ -379,48 +337,6 @@ function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): Color
       },
     },
     backdrop: `${sourcePrefix}-backdrop`,
-    code: {
-      bg: `${sourcePrefix}-code-bg`,
-      fg: `${sourcePrefix}-code-fg`,
-      token: {
-        atrule: `${sourcePrefix}-code-token-atrule`,
-        attrName: `${sourcePrefix}-code-token-attr-name`,
-        attrValue: `${sourcePrefix}-code-token-attr-value`,
-        attribute: `${sourcePrefix}-code-token-attribute`,
-        boolean: `${sourcePrefix}-code-token-boolean`,
-        builtin: `${sourcePrefix}-code-token-builtin`,
-        cdata: `${sourcePrefix}-code-token-cdata`,
-        char: `${sourcePrefix}-code-token-char`,
-        class: `${sourcePrefix}-code-token-class`,
-        className: `${sourcePrefix}-code-token-class-name`,
-        comment: `${sourcePrefix}-code-token-comment`,
-        constant: `${sourcePrefix}-code-token-constant`,
-        deleted: `${sourcePrefix}-code-token-deleted`,
-        doctype: `${sourcePrefix}-code-token-doctype`,
-        entity: `${sourcePrefix}-code-token-entity`,
-        function: `${sourcePrefix}-code-token-function`,
-        hexcode: `${sourcePrefix}-code-token-hexcode`,
-        id: `${sourcePrefix}-code-token-id`,
-        important: `${sourcePrefix}-code-token-important`,
-        inserted: `${sourcePrefix}-code-token-inserted`,
-        keyword: `${sourcePrefix}-code-token-keyword`,
-        number: `${sourcePrefix}-code-token-number`,
-        operator: `${sourcePrefix}-code-token-operator`,
-        prolog: `${sourcePrefix}-code-token-prolog`,
-        property: `${sourcePrefix}-code-token-property`,
-        pseudoClass: `${sourcePrefix}-code-token-pseudo-class`,
-        pseudoElement: `${sourcePrefix}-code-token-pseudo-element`,
-        punctuation: `${sourcePrefix}-code-token-punctuation`,
-        regex: `${sourcePrefix}-code-token-regex`,
-        selector: `${sourcePrefix}-code-token-selector`,
-        string: `${sourcePrefix}-code-token-string`,
-        symbol: `${sourcePrefix}-code-token-symbol`,
-        tag: `${sourcePrefix}-code-token-tag`,
-        unit: `${sourcePrefix}-code-token-unit`,
-        url: `${sourcePrefix}-code-token-url`,
-        variable: `${sourcePrefix}-code-token-variable`,
-      },
-    },
     focusRing: `${sourcePrefix}-focus-ring`,
     link: {
       fg: `${sourcePrefix}-link-fg`,
@@ -439,7 +355,44 @@ function buildColorCardVarNames(props: {scheme?: Scheme; tone: CardTone}): Color
       from: `${sourcePrefix}-skeleton-from`,
       to: `${sourcePrefix}-skeleton-to`,
     },
-
+    token: {
+      atrule: `${sourcePrefix}-token-atrule`,
+      attrName: `${sourcePrefix}-token-attr-name`,
+      attrValue: `${sourcePrefix}-token-attr-value`,
+      attribute: `${sourcePrefix}-token-attribute`,
+      boolean: `${sourcePrefix}-token-boolean`,
+      builtin: `${sourcePrefix}-token-builtin`,
+      cdata: `${sourcePrefix}-token-cdata`,
+      char: `${sourcePrefix}-token-char`,
+      class: `${sourcePrefix}-token-class`,
+      className: `${sourcePrefix}-token-class-name`,
+      comment: `${sourcePrefix}-token-comment`,
+      constant: `${sourcePrefix}-token-constant`,
+      deleted: `${sourcePrefix}-token-deleted`,
+      doctype: `${sourcePrefix}-token-doctype`,
+      entity: `${sourcePrefix}-token-entity`,
+      function: `${sourcePrefix}-token-function`,
+      hexcode: `${sourcePrefix}-token-hexcode`,
+      id: `${sourcePrefix}-token-id`,
+      important: `${sourcePrefix}-token-important`,
+      inserted: `${sourcePrefix}-token-inserted`,
+      keyword: `${sourcePrefix}-token-keyword`,
+      number: `${sourcePrefix}-token-number`,
+      operator: `${sourcePrefix}-token-operator`,
+      prolog: `${sourcePrefix}-token-prolog`,
+      property: `${sourcePrefix}-token-property`,
+      pseudoClass: `${sourcePrefix}-token-pseudo-class`,
+      pseudoElement: `${sourcePrefix}-token-pseudo-element`,
+      punctuation: `${sourcePrefix}-token-punctuation`,
+      regex: `${sourcePrefix}-token-regex`,
+      selector: `${sourcePrefix}-token-selector`,
+      string: `${sourcePrefix}-token-string`,
+      symbol: `${sourcePrefix}-token-symbol`,
+      tag: `${sourcePrefix}-token-tag`,
+      unit: `${sourcePrefix}-token-unit`,
+      url: `${sourcePrefix}-token-url`,
+      variable: `${sourcePrefix}-token-variable`,
+    },
     solid: buildColorVariantVarNames({scheme, tone, variant: 'solid'}),
     tinted: buildColorVariantVarNames({scheme, tone, variant: 'tinted'}),
   }

package/src/css/vars.ts

@@ -9,8 +9,6 @@ import {
   type FontHeadingSize,
   type FontLabelSize,
   type FontTextSize,
-  RADIUS,
-  Radius,
   SPACE,
   type Space,
   THEME_COLOR_AVATAR_COLORS,
@@ -90,49 +88,6 @@ const colorVars: Vars['color'] = {
   backdrop: `var(${varNames.color.backdrop})`,
   bg: `var(${varNames.color.bg})`,
   border: `var(${varNames.color.border})`,
-  code: {
-    bg: `var(${varNames.color.code.bg})`,
-    fg: `var(${varNames.color.code.fg})`,
-
-    token: {
-      atrule: `var(${varNames.color.code.token.atrule})`,
-      attrName: `var(${varNames.color.code.token.attrName})`,
-      attrValue: `var(${varNames.color.code.token.attrValue})`,
-      attribute: `var(${varNames.color.code.token.attribute})`,
-      boolean: `var(${varNames.color.code.token.boolean})`,
-      builtin: `var(${varNames.color.code.token.builtin})`,
-      cdata: `var(${varNames.color.code.token.cdata})`,
-      char: `var(${varNames.color.code.token.char})`,
-      class: `var(${varNames.color.code.token.class})`,
-      className: `var(${varNames.color.code.token.className})`,
-      comment: `var(${varNames.color.code.token.comment})`,
-      constant: `var(${varNames.color.code.token.constant})`,
-      deleted: `var(${varNames.color.code.token.deleted})`,
-      doctype: `var(${varNames.color.code.token.doctype})`,
-      entity: `var(${varNames.color.code.token.entity})`,
-      function: `var(${varNames.color.code.token.function})`,
-      hexcode: `var(${varNames.color.code.token.hexcode})`,
-      id: `var(${varNames.color.code.token.id})`,
-      important: `var(${varNames.color.code.token.important})`,
-      inserted: `var(${varNames.color.code.token.inserted})`,
-      keyword: `var(${varNames.color.code.token.keyword})`,
-      number: `var(${varNames.color.code.token.number})`,
-      operator: `var(${varNames.color.code.token.operator})`,
-      prolog: `var(${varNames.color.code.token.prolog})`,
-      property: `var(${varNames.color.code.token.property})`,
-      pseudoClass: `var(${varNames.color.code.token.pseudoClass})`,
-      pseudoElement: `var(${varNames.color.code.token.pseudoElement})`,
-      punctuation: `var(${varNames.color.code.token.punctuation})`,
-      regex: `var(${varNames.color.code.token.regex})`,
-      selector: `var(${varNames.color.code.token.selector})`,
-      string: `var(${varNames.color.code.token.string})`,
-      symbol: `var(${varNames.color.code.token.symbol})`,
-      tag: `var(${varNames.color.code.token.tag})`,
-      unit: `var(${varNames.color.code.token.unit})`,
-      url: `var(${varNames.color.code.token.url})`,
-      variable: `var(${varNames.color.code.token.variable})`,
-    },
-  },
   fg: `var(${varNames.color.fg})`,
   focusRing: `var(${varNames.color.focusRing})`,
   input: {
@@ -158,6 +113,44 @@ const colorVars: Vars['color'] = {
     from: `var(${varNames.color.skeleton.from})`,
     to: `var(${varNames.color.skeleton.to})`,
   },
+  token: {
+    atrule: `var(${varNames.color.token.atrule})`,
+    attrName: `var(${varNames.color.token.attrName})`,
+    attrValue: `var(${varNames.color.token.attrValue})`,
+    attribute: `var(${varNames.color.token.attribute})`,
+    boolean: `var(${varNames.color.token.boolean})`,
+    builtin: `var(${varNames.color.token.builtin})`,
+    cdata: `var(${varNames.color.token.cdata})`,
+    char: `var(${varNames.color.token.char})`,
+    class: `var(${varNames.color.token.class})`,
+    className: `var(${varNames.color.token.className})`,
+    comment: `var(${varNames.color.token.comment})`,
+    constant: `var(${varNames.color.token.constant})`,
+    deleted: `var(${varNames.color.token.deleted})`,
+    doctype: `var(${varNames.color.token.doctype})`,
+    entity: `var(${varNames.color.token.entity})`,
+    function: `var(${varNames.color.token.function})`,
+    hexcode: `var(${varNames.color.token.hexcode})`,
+    id: `var(${varNames.color.token.id})`,
+    important: `var(${varNames.color.token.important})`,
+    inserted: `var(${varNames.color.token.inserted})`,
+    keyword: `var(${varNames.color.token.keyword})`,
+    number: `var(${varNames.color.token.number})`,
+    operator: `var(${varNames.color.token.operator})`,
+    prolog: `var(${varNames.color.token.prolog})`,
+    property: `var(${varNames.color.token.property})`,
+    pseudoClass: `var(${varNames.color.token.pseudoClass})`,
+    pseudoElement: `var(${varNames.color.token.pseudoElement})`,
+    punctuation: `var(${varNames.color.token.punctuation})`,
+    regex: `var(${varNames.color.token.regex})`,
+    selector: `var(${varNames.color.token.selector})`,
+    string: `var(${varNames.color.token.string})`,
+    symbol: `var(${varNames.color.token.symbol})`,
+    tag: `var(${varNames.color.token.tag})`,
+    unit: `var(${varNames.color.token.unit})`,
+    url: `var(${varNames.color.token.url})`,
+    variable: `var(${varNames.color.token.variable})`,
+  },
 
   solid: buildColorVariantVars({variant: 'solid'}),
   tinted: buildColorVariantVars({variant: 'tinted'}),
@@ -191,14 +184,6 @@ export const vars: Vars = {
     ),
   },
   color: colorVars,
-  container: {
-    0: `var(${varNames.container[0]})`,
-    1: `var(${varNames.container[1]})`,
-    2: `var(${varNames.container[2]})`,
-    3: `var(${varNames.container[3]})`,
-    4: `var(${varNames.container[4]})`,
-    5: `var(${varNames.container[5]})`,
-  },
   font: {
     code: {
       family: `var(${varNames.font.code.family})`,
@@ -218,12 +203,6 @@ export const vars: Vars = {
         },
         {} as Record<FontCodeSize, FontSizeVars>,
       ),
-      weight: {
-        regular: `var(${varNames.font.code.weight.regular})`,
-        medium: `var(${varNames.font.code.weight.medium})`,
-        semibold: `var(${varNames.font.code.weight.semibold})`,
-        bold: `var(${varNames.font.code.weight.bold})`,
-      },
     },
     heading: {
       family: `var(${varNames.font.heading.family})`,
@@ -243,12 +222,6 @@ export const vars: Vars = {
         },
         {} as Record<FontHeadingSize, FontSizeVars>,
       ),
-      weight: {
-        regular: `var(${varNames.font.heading.weight.regular})`,
-        medium: `var(${varNames.font.heading.weight.medium})`,
-        semibold: `var(${varNames.font.heading.weight.semibold})`,
-        bold: `var(${varNames.font.heading.weight.bold})`,
-      },
     },
     label: {
       family: `var(${varNames.font.label.family})`,
@@ -268,12 +241,6 @@ export const vars: Vars = {
         },
         {} as Record<FontLabelSize, FontSizeVars>,
       ),
-      weight: {
-        regular: `var(${varNames.font.label.weight.regular})`,
-        medium: `var(${varNames.font.label.weight.medium})`,
-        semibold: `var(${varNames.font.label.weight.semibold})`,
-        bold: `var(${varNames.font.label.weight.bold})`,
-      },
     },
     text: {
       family: `var(${varNames.font.text.family})`,
@@ -293,12 +260,6 @@ export const vars: Vars = {
         },
         {} as Record<FontTextSize, FontSizeVars>,
       ),
-      weight: {
-        regular: `var(${varNames.font.text.weight.regular})`,
-        medium: `var(${varNames.font.text.weight.medium})`,
-        semibold: `var(${varNames.font.text.weight.semibold})`,
-        bold: `var(${varNames.font.text.weight.bold})`,
-      },
     },
   },
   input: {
@@ -319,9 +280,6 @@ export const vars: Vars = {
       },
     },
   },
-  radius: Object.fromEntries(
-    RADIUS.map((radius) => [radius, `var(${varNames.radius[radius]})` as const]),
-  ) as Record<Radius, CSSVar>,
   space: Object.fromEntries(
     SPACE.map((space) => [space, `var(${varNames.space[space]})` as const]),
   ) as Record<Space, CSSVar>,
@@ -348,48 +306,6 @@ function buildColorCardVars(props: {scheme?: Scheme; tone: CardTone}): ColorCard
       }, {} as ColorAvatarVars),
     },
     backdrop: `var(${prefix.backdrop})`,
-    code: {
-      bg: `var(${prefix.code.bg})`,
-      fg: `var(${prefix.code.fg})`,
-      token: {
-        atrule: `var(${prefix.code.token.atrule})`,
-        attrName: `var(${prefix.code.token.attrName})`,
-        attrValue: `var(${prefix.code.token.attrValue})`,
-        attribute: `var(${prefix.code.token.attribute})`,
-        boolean: `var(${prefix.code.token.boolean})`,
-        builtin: `var(${prefix.code.token.builtin})`,
-        cdata: `var(${prefix.code.token.cdata})`,
-        char: `var(${prefix.code.token.char})`,
-        class: `var(${prefix.code.token.class})`,
-        className: `var(${prefix.code.token.className})`,
-        comment: `var(${prefix.code.token.comment})`,
-        constant: `var(${prefix.code.token.constant})`,
-        deleted: `var(${prefix.code.token.deleted})`,
-        doctype: `var(${prefix.code.token.doctype})`,
-        entity: `var(${prefix.code.token.entity})`,
-        function: `var(${prefix.code.token.function})`,
-        hexcode: `var(${prefix.code.token.hexcode})`,
-        id: `var(${prefix.code.token.id})`,
-        important: `var(${prefix.code.token.important})`,
-        inserted: `var(${prefix.code.token.inserted})`,
-        keyword: `var(${prefix.code.token.keyword})`,
-        number: `var(${prefix.code.token.number})`,
-        operator: `var(${prefix.code.token.operator})`,
-        prolog: `var(${prefix.code.token.prolog})`,
-        property: `var(${prefix.code.token.property})`,
-        pseudoClass: `var(${prefix.code.token.pseudoClass})`,
-        pseudoElement: `var(${prefix.code.token.pseudoElement})`,
-        punctuation: `var(${prefix.code.token.punctuation})`,
-        regex: `var(${prefix.code.token.regex})`,
-        selector: `var(${prefix.code.token.selector})`,
-        string: `var(${prefix.code.token.string})`,
-        symbol: `var(${prefix.code.token.symbol})`,
-        tag: `var(${prefix.code.token.tag})`,
-        unit: `var(${prefix.code.token.unit})`,
-        url: `var(${prefix.code.token.url})`,
-        variable: `var(${prefix.code.token.variable})`,
-      },
-    },
     focusRing: `var(${prefix.focusRing})`,
     link: {
       fg: `var(${prefix.link.fg})`,
@@ -408,6 +324,44 @@ function buildColorCardVars(props: {scheme?: Scheme; tone: CardTone}): ColorCard
       from: `var(${prefix.skeleton.from})`,
       to: `var(${prefix.skeleton.to})`,
     },
+    token: {
+      atrule: `var(${prefix.token.atrule})`,
+      attrName: `var(${prefix.token.attrName})`,
+      attrValue: `var(${prefix.token.attrValue})`,
+      attribute: `var(${prefix.token.attribute})`,
+      boolean: `var(${prefix.token.boolean})`,
+      builtin: `var(${prefix.token.builtin})`,
+      cdata: `var(${prefix.token.cdata})`,
+      char: `var(${prefix.token.char})`,
+      class: `var(${prefix.token.class})`,
+      className: `var(${prefix.token.className})`,
+      comment: `var(${prefix.token.comment})`,
+      constant: `var(${prefix.token.constant})`,
+      deleted: `var(${prefix.token.deleted})`,
+      doctype: `var(${prefix.token.doctype})`,
+      entity: `var(${prefix.token.entity})`,
+      function: `var(${prefix.token.function})`,
+      hexcode: `var(${prefix.token.hexcode})`,
+      id: `var(${prefix.token.id})`,
+      important: `var(${prefix.token.important})`,
+      inserted: `var(${prefix.token.inserted})`,
+      keyword: `var(${prefix.token.keyword})`,
+      number: `var(${prefix.token.number})`,
+      operator: `var(${prefix.token.operator})`,
+      prolog: `var(${prefix.token.prolog})`,
+      property: `var(${prefix.token.property})`,
+      pseudoClass: `var(${prefix.token.pseudoClass})`,
+      pseudoElement: `var(${prefix.token.pseudoElement})`,
+      punctuation: `var(${prefix.token.punctuation})`,
+      regex: `var(${prefix.token.regex})`,
+      selector: `var(${prefix.token.selector})`,
+      string: `var(${prefix.token.string})`,
+      symbol: `var(${prefix.token.symbol})`,
+      tag: `var(${prefix.token.tag})`,
+      unit: `var(${prefix.token.unit})`,
+      url: `var(${prefix.token.url})`,
+      variable: `var(${prefix.token.variable})`,
+    },
 
     solid: buildColorVariantVars({scheme, tone, variant: 'solid'}),
     tinted: buildColorVariantVars({scheme, tone, variant: 'tinted'}),

package/src/theme/_constants.ts

@@ -2,7 +2,7 @@
 export const AVATAR_SIZE = [0, 1, 2, 3] as const
 
 /** @public */
-export const CONTAINER = [0, 1, 2, 3, 4, 5, 'auto'] as const
+export const CONTAINER = [0, 1, 2, 3, 4, 5] as const
 
 /** @public */
 export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full'] as const

package/src/theme/_types.ts

@@ -14,10 +14,10 @@ import {
 export type AvatarSize = (typeof AVATAR_SIZE)[number]
 
 /** @public */
-export type ContainerWidth = (typeof CONTAINER)[number]
+export type ContainerWidth = (typeof CONTAINER)[number] | 'auto' | 'fill'
 
 /** @public */
-export type Radius = (typeof RADIUS)[number] // | 'full'
+export type Radius = (typeof RADIUS)[number] | 'full'
 
 /** @public */
 export type Space = (typeof SPACE)[number]

package/src/theme/build/buildTheme.ts

@@ -1,12 +1,12 @@
 import {type ThemeConfig} from '../config'
 import {type RootTheme} from '../types'
-import {buildTheme_v3} from '../v3'
+import {buildTheme_v3, type Theme_v3} from '../v3'
 import {v2_v0} from '../versioning/v2_v0'
 import {v3_v2} from '../versioning/v3_v2'
 
 /** @internal */
 export function buildTheme(_config?: ThemeConfig): RootTheme {
-  const v3 = buildTheme_v3({v2: _config})
+  const v3: Theme_v3 = buildTheme_v3({v2: _config})
 
   return v2_v0(v3_v2(v3), v3)
 }

package/src/theme/defaults/colorTokens.ts

@@ -368,12 +368,12 @@ export const defaultColorTokens: ThemeColorTokens = {
           },
         },
         'hovered': {
-          bg: ['50', '900'],
+          bg: ['50', '950'],
           fg: ['800', '200'],
           icon: ['800 70%', '300 70%'],
         },
         'pressed': {
-          bg: ['100', '800'],
+          bg: ['100', '900'],
           fg: ['800', '200'],
           icon: ['800 70%', '200 70%'],
         },

package/src/theme/defaults/config.ts

@@ -31,7 +31,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     popover: {zOffset: 400},
     tooltip: {zOffset: 200},
   },
-  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
+  radius: [0, 1, 5, 9, 13, 17, 25, 45, 77, 129],
   shadow: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},

package/src/theme/defaults/fonts.ts

@@ -57,10 +57,10 @@ export const defaultThemeFonts: ThemeFonts = {
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
     weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900,
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
     },
     sizes: [
       {

package/src/theme/palette/constants.ts

@@ -10,4 +10,6 @@ export const HUES = [
   'cyan',
 ] as const
 
-export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+export const TINTS = [
+  50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
+] as const

package/src/theme/palette/types.ts

@@ -2,3 +2,15 @@ import {type HUES, type TINTS} from './constants'
 
 export type Hue = (typeof HUES)[number]
 export type Tint = (typeof TINTS)[number]
+
+export type PaletteConfig = {
+  chroma: {
+    min: number
+    max: number
+  }
+  luminosity: {
+    min: number
+    max: number
+  }
+  hues: Record<Hue, {h: number; c: number}>
+}