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

package/src/css/varNames.ts

@@ -96,49 +96,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 +121,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'}),
@@ -227,12 +222,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 +241,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 +260,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 +279,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: {
@@ -379,48 +350,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 +368,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

@@ -90,49 +90,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 +115,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'}),
@@ -218,12 +213,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 +232,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 +251,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 +270,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: {
@@ -348,48 +319,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 +337,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/defaults/config.ts

@@ -1,6 +1,6 @@
 import {RootTheme_v2} from '../v2'
 
-const BORDER_WIDTH = 1
+const BORDER_WIDTH = 0.5
 const OUTLINE_WIDTH = 0.5
 
 export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
@@ -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}>
+}

package/src/theme/v3/buildTheme_v3.ts

@@ -1,7 +1,7 @@
 import {defaultThemeConfig} from '../defaults/config'
 import {defaultThemeFonts} from '../defaults/fonts'
 import {buildColor_v3} from './color/buildColor_v3'
-import {defaultTokens} from './defaults'
+import {defaultPalette, defaultTokens} from './defaults'
 import {resolveTokens} from './resolveTokens'
 import {Theme_v3, ThemeOptions} from './types'
 
@@ -12,6 +12,7 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
 
   return {
     _version: 3,
+    _palette: options?.palette ?? defaultPalette,
     _tokens: tokens,
     avatar: v2?.avatar ?? defaultThemeConfig.avatar,
     button: v2?.button ?? defaultThemeConfig.button,

package/src/theme/v3/color/buildColor_v3.ts

@@ -72,48 +72,6 @@ function buildColorCard_v3(
       return acc
     }, {} as ThemeColorAvatar_v2),
     backdrop: renderColor(tokens.backdrop, context),
-    code: {
-      bg: renderColor(tokens.code.bg, context),
-      fg: renderColor(tokens.code.fg, context),
-      token: {
-        atrule: renderColor(tokens.code.token.atrule, context),
-        attrName: renderColor(tokens.code.token.attrName, context),
-        attrValue: renderColor(tokens.code.token.attrValue, context),
-        attribute: renderColor(tokens.code.token.attribute, context),
-        boolean: renderColor(tokens.code.token.boolean, context),
-        builtin: renderColor(tokens.code.token.builtin, context),
-        cdata: renderColor(tokens.code.token.cdata, context),
-        char: renderColor(tokens.code.token.char, context),
-        class: renderColor(tokens.code.token.class, context),
-        className: renderColor(tokens.code.token.className, context),
-        comment: renderColor(tokens.code.token.comment, context),
-        constant: renderColor(tokens.code.token.constant, context),
-        deleted: renderColor(tokens.code.token.deleted, context),
-        doctype: renderColor(tokens.code.token.doctype, context),
-        entity: renderColor(tokens.code.token.entity, context),
-        function: renderColor(tokens.code.token.function, context),
-        hexcode: renderColor(tokens.code.token.hexcode, context),
-        id: renderColor(tokens.code.token.id, context),
-        important: renderColor(tokens.code.token.important, context),
-        inserted: renderColor(tokens.code.token.inserted, context),
-        keyword: renderColor(tokens.code.token.keyword, context),
-        number: renderColor(tokens.code.token.number, context),
-        operator: renderColor(tokens.code.token.operator, context),
-        prolog: renderColor(tokens.code.token.prolog, context),
-        property: renderColor(tokens.code.token.property, context),
-        pseudoClass: renderColor(tokens.code.token.pseudoClass, context),
-        pseudoElement: renderColor(tokens.code.token.pseudoElement, context),
-        punctuation: renderColor(tokens.code.token.punctuation, context),
-        regex: renderColor(tokens.code.token.regex, context),
-        selector: renderColor(tokens.code.token.selector, context),
-        string: renderColor(tokens.code.token.string, context),
-        symbol: renderColor(tokens.code.token.symbol, context),
-        tag: renderColor(tokens.code.token.tag, context),
-        unit: renderColor(tokens.code.token.unit, context),
-        url: renderColor(tokens.code.token.url, context),
-        variable: renderColor(tokens.code.token.variable, context),
-      },
-    },
     focusRing: renderColor(tokens.focusRing, context),
     shadow: {
       outline: renderColor(tokens.shadow.outline, context),
@@ -125,7 +83,44 @@ function buildColorCard_v3(
       from: renderColor(tokens.skeleton.from, context),
       to: renderColor(tokens.skeleton.to, context),
     },
-
+    token: {
+      atrule: renderColor(tokens.token.atrule, context),
+      attrName: renderColor(tokens.token.attrName, context),
+      attrValue: renderColor(tokens.token.attrValue, context),
+      attribute: renderColor(tokens.token.attribute, context),
+      boolean: renderColor(tokens.token.boolean, context),
+      builtin: renderColor(tokens.token.builtin, context),
+      cdata: renderColor(tokens.token.cdata, context),
+      char: renderColor(tokens.token.char, context),
+      class: renderColor(tokens.token.class, context),
+      className: renderColor(tokens.token.className, context),
+      comment: renderColor(tokens.token.comment, context),
+      constant: renderColor(tokens.token.constant, context),
+      deleted: renderColor(tokens.token.deleted, context),
+      doctype: renderColor(tokens.token.doctype, context),
+      entity: renderColor(tokens.token.entity, context),
+      function: renderColor(tokens.token.function, context),
+      hexcode: renderColor(tokens.token.hexcode, context),
+      id: renderColor(tokens.token.id, context),
+      important: renderColor(tokens.token.important, context),
+      inserted: renderColor(tokens.token.inserted, context),
+      keyword: renderColor(tokens.token.keyword, context),
+      number: renderColor(tokens.token.number, context),
+      operator: renderColor(tokens.token.operator, context),
+      prolog: renderColor(tokens.token.prolog, context),
+      property: renderColor(tokens.token.property, context),
+      pseudoClass: renderColor(tokens.token.pseudoClass, context),
+      pseudoElement: renderColor(tokens.token.pseudoElement, context),
+      punctuation: renderColor(tokens.token.punctuation, context),
+      regex: renderColor(tokens.token.regex, context),
+      selector: renderColor(tokens.token.selector, context),
+      string: renderColor(tokens.token.string, context),
+      symbol: renderColor(tokens.token.symbol, context),
+      tag: renderColor(tokens.token.tag, context),
+      unit: renderColor(tokens.token.unit, context),
+      url: renderColor(tokens.token.url, context),
+      variable: renderColor(tokens.token.variable, context),
+    },
     variant: {
       solid: {
         ...THEME_COLOR_STATE_TONES.reduce(