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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.10",
+  "version": "3.0.0-static.3",
   "keywords": [
     "sanity",
     "ui",
@@ -125,7 +125,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/ui-workshop": "^2.1.3",
+    "@sanity/ui-workshop": "^2.1.2",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-docs": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",

package/src/cli/buildCommand.ts

@@ -1,10 +1,10 @@
 import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
+import {buildTheme_v3, defaultPalette, RootTheme} from '@sanity/ui/theme'
 import fs from 'fs/promises'
 import path from 'path'
 
 async function buildPalette(outDir: string) {
-  const css = compilePalette()
+  const css = compilePalette(defaultPalette)
 
   await fs.mkdir(outDir, {recursive: true})
 

package/src/css/_comp.ts

@@ -4,7 +4,6 @@ import {scopeClassName} from './scopeClassName'
 export function _comp(...classNames: Array<string | false | undefined>): string | undefined {
   return (
     getClassNames(...classNames)
-      .filter(Boolean)
       .map(scopeClassName)
       .join(' ') || undefined
   )

package/src/css/aspects/flex/flexJustify.style.ts

@@ -6,8 +6,8 @@ const util: StyleRules = {}
 _responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
 _responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
 _responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
-_responsiveRule(util, 'flex-justify-space-between', {justifyContent: 'space-between'})
-_responsiveRule(util, 'flex-justify-space-around', {justifyContent: 'space-around'})
-_responsiveRule(util, 'flex-justify-space-evenly', {justifyContent: 'space-evenly'})
+_responsiveRule(util, 'flex-justify-between', {justifyContent: 'space-between'})
+_responsiveRule(util, 'flex-justify-around', {justifyContent: 'space-around'})
+_responsiveRule(util, 'flex-justify-evenly', {justifyContent: 'space-evenly'})
 
 export const flexJustifyStyle: Style = {layers: {util}}

package/src/css/aspects/grid/types.ts

@@ -15,9 +15,9 @@ export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
  */
 export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
-export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
 
 /** @public */
 export interface GridStyleProps {

package/src/css/aspects/index.ts

@@ -10,7 +10,6 @@ export * from './height'
 export * from './inset'
 export * from './margin'
 export * from './maxWidth'
-export * from './minWidth'
 export * from './overflow'
 export * from './padding'
 export * from './pointerEvents'

package/src/css/aspects/textOverflow/textOverflow.ts

@@ -1,6 +1,6 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 import {TextOverflowStyleProps} from './types'
 
 export function textOverflow(props: TextOverflowStyleProps): string | undefined {
-  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`)
+  return composeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`)
 }

package/src/css/compile/compilePalette.ts

@@ -1,25 +1,58 @@
-import {color} from '@sanity/color'
-import {HUES, TINTS} from '@sanity/ui/theme'
+import {HUES, PaletteConfig, TINTS} from '@sanity/ui/theme'
 
 import {compileRule} from './compileRule'
 
-export function compilePalette(): string {
+export function compilePalette(config: PaletteConfig): string {
   const props: Record<string, string> = {
-    ...compileHues(),
+    '--l-min': `${config.luminosity.min * 100}%`,
+    '--l-max': `${config.luminosity.max * 100}%`,
+    '--l-range': `calc(var(--l-max) - var(--l-min))`,
 
-    '--black': color.black.hex,
-    '--white': color.white.hex,
+    '--c-min': `${config.chroma.min}`,
+    '--c-max': `${config.chroma.max}`,
+    '--c-range': `calc(var(--c-max) - var(--c-min))`,
+
+    ...compileHues(config.hues),
+
+    '--black': `oklch(
+      calc(var(--l-min) + 0.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`,
+
+    '--white': `oklch(
+      calc(var(--l-min) + 1.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`,
   }
 
   return compileRule(':root', props, {keyframes: {}, media: {}})
 }
 
-function compileHues() {
+function compileHues(hues: PaletteConfig['hues']) {
   const rules: Record<string, string> = {}
 
   for (const hue of HUES) {
+    const {c, h} = hues[hue]
+
+    rules[`--${hue}-h`] = `${h}`
+    rules[`--${hue}-c`] = `${c}`
+    rules[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`
+    rules[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`
+
     for (const tint of TINTS) {
-      rules[`--${hue}-${tint}`] = color[hue][tint].hex
+      const l_offset = parseFloat((1 - tint / 1000).toFixed(2))
+      const c_offset_tmp = tint / 500
+      const c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1))
+
+      rules[`--${hue}-${tint}`] = [
+        `oklch(`,
+        `calc(var(--l-min) + ${l_offset} * var(--l-range)) `,
+        `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `,
+        `var(--${hue}-h)`,
+        `)`,
+      ].join('')
     }
   }
 

package/src/css/compile/compileRule.ts

@@ -2,7 +2,6 @@ import {PREFIX} from '../constants'
 import {type Properties} from '../types'
 import {CompileRulesContext} from './types'
 
-// TODO: remove this
 export function compileRule(
   selector: string,
   props: Properties,

package/src/css/compile/compileStyle.ts

@@ -112,7 +112,7 @@ function compileStyleRule(_selector: string, properties: Properties): string {
         ? _nestedSelector.replace(/\./g, `.${PREFIX}`)
         : _nestedSelector
 
-      css += `${nestedSelector.replace(/&/g, selector)} {\n`
+      css += `${nestedSelector.replace('&', selector)} {\n`
       css += compileProperties(nestedProperties)
       css += '}\n\n'
     }

package/src/css/compile/compileTheme_v3.ts

@@ -22,6 +22,8 @@ export function compileTheme_v3(theme: Theme_v3): string {
 }
 
 function compileThemeProperties(theme: Theme_v3): Properties {
+  // const palette = defaultPalette
+
   return {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
@@ -34,10 +36,26 @@ function compileThemeProperties(theme: Theme_v3): Properties {
     ...buildRadiusThemeProperties(theme),
     ...buildShadowThemeProperties(theme),
     ...buildSpaceThemeProperties(theme),
+    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme),
   }
 }
 
+// function buildColorPaletteProperties(palette: Color): Properties {
+//   const props: Properties = {
+//     '--black': palette.black.hex,
+//     '--white': palette.white.hex,
+//   }
+
+//   for (const hue of COLOR_HUES) {
+//     for (const tint of COLOR_TINTS) {
+//       props[`--${hue}-${tint}`] = palette[hue][tint].hex
+//     }
+//   }
+
+//   return props
+// }
+
 function buildAvatarThemeProperties(theme: Theme_v3): Properties {
   return {
     [`--avatar-focus-ring-offset`]: px(theme.avatar.focusRing.offset),
@@ -339,62 +357,53 @@ function buildColorCardThemeProperties(
   const context: RenderColorContext = {bgVar: `${prefix}-bg-0`, hue: tokens._hue, scheme}
 
   const props: Properties = {
-    // backdrop
     [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
 
-    // code
-    [`${prefix}-code-bg`]: renderColor(tokens.code.bg, context),
-    [`${prefix}-code-fg`]: renderColor(tokens.code.fg, context),
-
-    // code / token
-    [`${prefix}-code-token-atrule`]: renderColor(tokens.code.token.atrule, context),
-    [`${prefix}-code-token-attr-name`]: renderColor(tokens.code.token.attrName, context),
-    [`${prefix}-code-token-attr-value`]: renderColor(tokens.code.token.attrValue, context),
-    [`${prefix}-code-token-attribute`]: renderColor(tokens.code.token.attribute, context),
-    [`${prefix}-code-token-boolean`]: renderColor(tokens.code.token.boolean, context),
-    [`${prefix}-code-token-builtin`]: renderColor(tokens.code.token.builtin, context),
-    [`${prefix}-code-token-cdata`]: renderColor(tokens.code.token.cdata, context),
-    [`${prefix}-code-token-char`]: renderColor(tokens.code.token.char, context),
-    [`${prefix}-code-token-class-name`]: renderColor(tokens.code.token.className, context),
-    [`${prefix}-code-token-class`]: renderColor(tokens.code.token.class, context),
-    [`${prefix}-code-token-comment`]: renderColor(tokens.code.token.comment, context),
-    [`${prefix}-code-token-constant`]: renderColor(tokens.code.token.constant, context),
-    [`${prefix}-code-token-deleted`]: renderColor(tokens.code.token.deleted, context),
-    [`${prefix}-code-token-doctype`]: renderColor(tokens.code.token.doctype, context),
-    [`${prefix}-code-token-entity`]: renderColor(tokens.code.token.entity, context),
-    [`${prefix}-code-token-function`]: renderColor(tokens.code.token.function, context),
-    [`${prefix}-code-token-hexcode`]: renderColor(tokens.code.token.hexcode, context),
-    [`${prefix}-code-token-id`]: renderColor(tokens.code.token.id, context),
-    [`${prefix}-code-token-important`]: renderColor(tokens.code.token.important, context),
-    [`${prefix}-code-token-inserted`]: renderColor(tokens.code.token.inserted, context),
-    [`${prefix}-code-token-keyword`]: renderColor(tokens.code.token.keyword, context),
-    [`${prefix}-code-token-number`]: renderColor(tokens.code.token.number, context),
-    [`${prefix}-code-token-operator`]: renderColor(tokens.code.token.operator, context),
-    [`${prefix}-code-token-prolog`]: renderColor(tokens.code.token.prolog, context),
-    [`${prefix}-code-token-property`]: renderColor(tokens.code.token.property, context),
-    [`${prefix}-code-token-pseudo-class`]: renderColor(tokens.code.token.pseudoClass, context),
-    [`${prefix}-code-token-pseudo-eelement`]: renderColor(tokens.code.token.pseudoElement, context),
-    [`${prefix}-code-token-punctuation`]: renderColor(tokens.code.token.punctuation, context),
-    [`${prefix}-code-token-regex`]: renderColor(tokens.code.token.regex, context),
-    [`${prefix}-code-token-selector`]: renderColor(tokens.code.token.selector, context),
-    [`${prefix}-code-token-string`]: renderColor(tokens.code.token.string, context),
-    [`${prefix}-code-token-symbol`]: renderColor(tokens.code.token.symbol, context),
-    [`${prefix}-code-token-tag`]: renderColor(tokens.code.token.tag, context),
-    [`${prefix}-code-token-unit`]: renderColor(tokens.code.token.unit, context),
-    [`${prefix}-code-token-url`]: renderColor(tokens.code.token.url, context),
-    [`${prefix}-code-token-variable`]: renderColor(tokens.code.token.variable, context),
-
-    // focus ring
     [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
 
-    // link
     [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
 
-    // shadow
     [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
     [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
     [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
     [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context),
+
+    [`${prefix}-token-atrule`]: renderColor(tokens.token.atrule, context),
+    [`${prefix}-token-attr-name`]: renderColor(tokens.token.attrName, context),
+    [`${prefix}-token-attr-value`]: renderColor(tokens.token.attrValue, context),
+    [`${prefix}-token-attribute`]: renderColor(tokens.token.attribute, context),
+    [`${prefix}-token-boolean`]: renderColor(tokens.token.boolean, context),
+    [`${prefix}-token-builtin`]: renderColor(tokens.token.builtin, context),
+    [`${prefix}-token-cdata`]: renderColor(tokens.token.cdata, context),
+    [`${prefix}-token-char`]: renderColor(tokens.token.char, context),
+    [`${prefix}-token-class-name`]: renderColor(tokens.token.className, context),
+    [`${prefix}-token-class`]: renderColor(tokens.token.class, context),
+    [`${prefix}-token-comment`]: renderColor(tokens.token.comment, context),
+    [`${prefix}-token-constant`]: renderColor(tokens.token.constant, context),
+    [`${prefix}-token-deleted`]: renderColor(tokens.token.deleted, context),
+    [`${prefix}-token-doctype`]: renderColor(tokens.token.doctype, context),
+    [`${prefix}-token-entity`]: renderColor(tokens.token.entity, context),
+    [`${prefix}-token-function`]: renderColor(tokens.token.function, context),
+    [`${prefix}-token-hexcode`]: renderColor(tokens.token.hexcode, context),
+    [`${prefix}-token-id`]: renderColor(tokens.token.id, context),
+    [`${prefix}-token-important`]: renderColor(tokens.token.important, context),
+    [`${prefix}-token-inserted`]: renderColor(tokens.token.inserted, context),
+    [`${prefix}-token-keyword`]: renderColor(tokens.token.keyword, context),
+    [`${prefix}-token-number`]: renderColor(tokens.token.number, context),
+    [`${prefix}-token-operator`]: renderColor(tokens.token.operator, context),
+    [`${prefix}-token-prolog`]: renderColor(tokens.token.prolog, context),
+    [`${prefix}-token-property`]: renderColor(tokens.token.property, context),
+    [`${prefix}-token-pseudo-class`]: renderColor(tokens.token.pseudoClass, context),
+    [`${prefix}-token-pseudo-eelement`]: renderColor(tokens.token.pseudoElement, context),
+    [`${prefix}-token-punctuation`]: renderColor(tokens.token.punctuation, context),
+    [`${prefix}-token-regex`]: renderColor(tokens.token.regex, context),
+    [`${prefix}-token-selector`]: renderColor(tokens.token.selector, context),
+    [`${prefix}-token-string`]: renderColor(tokens.token.string, context),
+    [`${prefix}-token-symbol`]: renderColor(tokens.token.symbol, context),
+    [`${prefix}-token-tag`]: renderColor(tokens.token.tag, context),
+    [`${prefix}-token-unit`]: renderColor(tokens.token.unit, context),
+    [`${prefix}-token-url`]: renderColor(tokens.token.url, context),
+    [`${prefix}-token-variable`]: renderColor(tokens.token.variable, context),
   }
 
   return props

package/src/css/index.ts

@@ -1,4 +1,4 @@
-export * from './aspects'
+export * from '../theme/versioning/v3_v2'
 export * from './compile/compilePalette'
 export * from './compile/compileSystem'
 export * from './compile/compileTheme'
@@ -27,13 +27,13 @@ export * from './primitives/popover'
 export * from './primitives/radio'
 export * from './primitives/select'
 export * from './primitives/spinner'
-export * from './primitives/stack'
 export * from './primitives/switch'
 export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
 export * from './primitives/tooltip'
 export * from './scopeClassName'
+export * from './aspects'
 export * from './types'
 export * from './util'
 export * from './utils/srOnly'

package/src/css/primitives/_input/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'css/input',
+  name: './css/input',
   title: 'Input',
   stories: [
     {

package/src/css/primitives/_selectable/_contants.ts

@@ -1,7 +1,7 @@
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'default',
+  default: 'surface',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -15,7 +15,7 @@ const primitive: StyleRules = {
 for (const tone of THEME_COLOR_STATE_TONES) {
   primitive[`.badge-${tone}`] = {
     [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[3],
+    [varNames.color.fg]: vars.color.tinted[tone].fg[1],
   }
 }
 

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

@@ -3,7 +3,7 @@ import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.box': {
-    // todo: move to aspects
+    'minWidth': 0,
     'minHeight': 0,
 
     '@nest': {

package/src/css/primitives/box/box.ts

@@ -12,7 +12,6 @@ import {
   inset,
   margin,
   maxWidth,
-  minWidth,
   overflow,
   padding,
   pointerEvents,
@@ -40,7 +39,6 @@ export function box(props: BoxStyleProps): string | undefined {
     inset(props),
     margin(props),
     maxWidth(props),
-    minWidth(props),
     props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),

package/src/css/primitives/box/types.ts

@@ -10,7 +10,6 @@ import {
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
-  MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
   PointerEventsStyleProps,
@@ -38,7 +37,6 @@ export interface BoxStyleProps
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
-    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,

package/src/css/primitives/button/_constants.ts

@@ -1,7 +1,7 @@
 import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'default',
+  default: 'surface',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -24,8 +24,6 @@ const primitive: StyleRules = {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
     'boxShadow': 'var(--button-box-shadow)',
-    'alignItems': 'center',
-    // 'justifyContent': 'center',
 
     '@nest': {
       '&::-moz-focus-inner': {
@@ -66,7 +64,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
     [varNames.color.fg]: solid.fg[0],
-    [varNames.color.muted.bg]: solid.bg[1],
     [varNames.color.muted.fg]: solid.fg[4],
     '--button-box-shadow': 'none',
 
@@ -75,7 +72,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: solid.bg[1],
         [varNames.color.border]: solid.border[2],
         [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[2],
         [varNames.color.muted.fg]: solid.fg[4],
       },
 
@@ -83,7 +79,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
         [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4],
       },
 
@@ -91,7 +86,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
         [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4],
       },
 
@@ -99,7 +93,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
         [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
       },
     },
@@ -107,47 +100,40 @@ for (const tone of THEME_COLOR_STATE_TONES) {
 
   // mode: ghost
   primitive[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
-    [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[0],
+    [varNames.color.bg]: tinted.bg[0],
+    [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[2],
-    [varNames.color.muted.fg]: tinted.fg[4],
-    '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
+    '--button-box-shadow': [
+      `inset 0 0 0 var(--button-border-width) var(--color-border)`,
+      `inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)`,
+    ].join(','),
 
     '@nest': {
       '&:not([data-disabled]):hover': {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[1],
+        [varNames.color.bg]: tinted.bg[1],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3],
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled]):active': {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled])[data-selected]': {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&[data-disabled]': {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
+        [varNames.color.bg]: vars.color.default.tinted.bg[0],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
       },
     },
   }
@@ -158,7 +144,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[1],
     [varNames.color.muted.fg]: tinted.fg[4],
     '--button-box-shadow': 'none',
 
@@ -167,7 +152,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[1],
         [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[2],
         [varNames.color.muted.fg]: tinted.fg[3],
       },
 
@@ -175,7 +159,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
         [varNames.color.muted.fg]: tinted.fg[3],
       },
 
@@ -183,7 +166,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
         [varNames.color.muted.fg]: tinted.fg[3],
       },
 
@@ -191,7 +173,6 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: vars.color.default.tinted.bg[0],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.muted.fg]: vars.color.default.tinted.fg[1],
       },
     },

package/src/css/primitives/card/_constants.ts

@@ -1,8 +1,8 @@
 import {ThemeColorCardToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorCardToneKey | 'inherit', string | undefined> = {
-  transparent: 'transparent',
-  default: 'default',
+  transparent: 'canvas',
+  default: 'surface',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',