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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.6",
+  "version": "3.0.0-static.8",
   "keywords": [
     "sanity",
     "ui",

package/src/css/aspects/index.ts

@@ -10,6 +10,7 @@ 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/minWidth/index.ts

@@ -0,0 +1,2 @@
+export * from './minWidth'
+export * from './types'

package/src/css/aspects/minWidth/minWidth.style.ts

@@ -0,0 +1,13 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'min-w-0', {minWidth: '0'})
+_responsiveRule(util, 'min-w-auto', {minWidth: 'auto'})
+_responsiveRule(util, 'min-w-full', {minWidth: '100%'})
+_responsiveRule(util, 'min-w-min', {minWidth: 'min-content'})
+_responsiveRule(util, 'min-w-max', {minWidth: 'max-content'})
+_responsiveRule(util, 'min-w-fit', {minWidth: 'fit-content'})
+
+export const minWidthStyle: Style = {layers: {util}}

package/src/css/aspects/minWidth/minWidth.ts

@@ -0,0 +1,6 @@
+import {_resp} from '../../_resp'
+import {MinWidthStyleProps} from './types'
+
+export function minWidth(props: MinWidthStyleProps): string {
+  return _resp('min-w', props.minWidth) ?? ''
+}

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

@@ -0,0 +1,7 @@
+import {ResponsiveProp} from '../../types'
+
+export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
+
+export interface MinWidthStyleProps {
+  minWidth?: ResponsiveProp<MinWidth>
+}

package/src/css/compile/compileRule.ts

@@ -2,6 +2,7 @@ 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('&', selector)} {\n`
+      css += `${nestedSelector.replace(/&/g, selector)} {\n`
       css += compileProperties(nestedProperties)
       css += '}\n\n'
     }

package/src/css/compile/compileTheme_v3.ts

@@ -339,53 +339,62 @@ 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/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[1],
+    [varNames.color.fg]: vars.color.tinted[tone].fg[3],
   }
 }
 

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

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

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

@@ -12,6 +12,7 @@ import {
   inset,
   margin,
   maxWidth,
+  minWidth,
   overflow,
   padding,
   pointerEvents,
@@ -23,9 +24,6 @@ import {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  // props.align
-  // props.autoCols
-
   return _comp(
     'box',
     props.muted && 'muted', // todo: consider this naming
@@ -42,6 +40,7 @@ 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,6 +10,7 @@ import {
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
+  MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
   PointerEventsStyleProps,
@@ -37,6 +38,7 @@ export interface BoxStyleProps
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,

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

@@ -66,6 +66,7 @@ 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',
 
@@ -74,6 +75,7 @@ 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],
       },
 
@@ -81,6 +83,7 @@ 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],
       },
 
@@ -88,6 +91,7 @@ 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],
       },
 
@@ -95,6 +99,7 @@ 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],
       },
     },
@@ -105,6 +110,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: tinted.bg[1],
     [varNames.color.border]: tinted.border[0],
     [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)`,
 
     '@nest': {
@@ -112,6 +119,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[1],
         [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)`,
       },
 
@@ -119,6 +128,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[2],
         [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)`,
       },
 
@@ -126,6 +137,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[2],
         [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)`,
       },
 
@@ -133,6 +146,8 @@ 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],
       },
     },
   }
@@ -143,6 +158,7 @@ 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',
 
@@ -151,6 +167,7 @@ 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],
       },
 
@@ -158,6 +175,7 @@ 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],
       },
 
@@ -165,6 +183,7 @@ 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],
       },
 
@@ -172,6 +191,7 @@ 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/card.style.ts

@@ -17,12 +17,14 @@ const primitive: StyleRules = {
 
     [varNames.color.bg]: vars.color.tinted.default.bg[0],
     [varNames.color.border]: vars.color.tinted.default.border[1],
+    [varNames.color.code.bg]: vars.color.code.bg,
+    [varNames.color.code.fg]: vars.color.code.fg,
     [varNames.color.fg]: vars.color.tinted.default.fg[0],
     [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
     [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
 
     '@nest': {
-      '&:is(button)': {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         outline: 'none',
@@ -33,15 +35,82 @@ const primitive: StyleRules = {
         width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
       },
 
-      '&:is(a)': {
+      'a&': {
+        // border: 'none',
         outline: 'none',
         textDecoration: 'none',
       },
 
-      '&:is(pre)': {
+      'pre&': {
         font: 'inherit',
         whiteSpace: 'inherit',
       },
+
+      'a&:not([data-disabled]):hover, button&:not([data-disabled]):hover': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.border]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.fg[1],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      // toggle button
+      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
+        {
+          [varNames.color.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.border]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        },
+
+      'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
+        [varNames.color.bg]: vars.color.solid.primary.bg[0],
+        [varNames.color.border]: vars.color.solid.primary.border[1],
+        [varNames.color.fg]: vars.color.solid.primary.fg[0],
+        [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+        [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
+      },
+
+      // '&:not([data-disabled]):focus': {
+      //   '--color-bg': vars.color.solid.bg[0],
+      //   '--color-border': vars.color.solid.border[1],
+      //   '--color-fg': vars.color.solid.fg[1],
+      //   '--color-muted-bg': vars.color.solid.bg[1],
+      //   '--color-muted-fg': vars.color.solid.fg[3],
+      // },
+
+      'a&[data-disabled]), button&[data-disabled]': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      // '&[data-disabled]': {
+      //   '--color-bg': vars.color.tinted.bg[0],
+      //   '--color-border': vars.color.tinted.border[1],
+      //   '--color-fg': vars.color.tinted.border[4],
+      //   '--color-muted-bg': vars.color.tinted.bg[1],
+      //   '--color-muted-fg': vars.color.tinted.border[4],
+      // },
     },
   },
 }
@@ -78,10 +147,12 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     '--card-bg-color': vars.color.bg,
     '--card-bg2-color': vars.color.muted.bg,
     '--card-border-color': vars.color.border,
-    '--card-code-bg-color': vars.color.muted.bg,
-    '--card-code-fg-color': vars.color.tinted.default.fg[4],
+    '--card-code-bg-color': vars.color.code.bg,
+    '--card-code-fg-color': vars.color.code.fg,
     '--card-fg-color': vars.color.fg,
     '--card-focus-ring-color': vars.color.focusRing,
+    '--card-hairline-soft-color': vars.color.tinted.default.border[1],
+    '--card-hairline-hard-color': vars.color.tinted.default.border[2],
     '--card-icon-color': vars.color.fg,
     '--card-kbd-bg-color': vars.color.muted.bg,
     '--card-kbd-border-color': vars.color.tinted.default.border[1],
@@ -96,8 +167,6 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     '--card-shadow-ambient-color': vars.color.shadow.ambient,
     // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-    '--card-hairline-soft-color': vars.color.tinted.default.border[1],
-    '--card-hairline-hard-color': vars.color.tinted.default.border[2],
   })
 
   primitive[`.card.${toneMap[tone]}`] = toneProps
@@ -122,6 +191,46 @@ function _assignToneProps(
   Object.assign(toneProps, {
     [_varNames.backdrop]: _vars.backdrop,
 
+    [_varNames.code.fg]: _vars.code.fg,
+    [_varNames.code.bg]: _vars.code.bg,
+
+    [_varNames.code.token.atrule]: _vars.code.token.atrule,
+    [_varNames.code.token.attrName]: _vars.code.token.attrName,
+    [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
+    [_varNames.code.token.attribute]: _vars.code.token.attribute,
+    [_varNames.code.token.boolean]: _vars.code.token.boolean,
+    [_varNames.code.token.builtin]: _vars.code.token.builtin,
+    [_varNames.code.token.cdata]: _vars.code.token.cdata,
+    [_varNames.code.token.char]: _vars.code.token.char,
+    [_varNames.code.token.class]: _vars.code.token.class,
+    [_varNames.code.token.className]: _vars.code.token.className,
+    [_varNames.code.token.comment]: _vars.code.token.comment,
+    [_varNames.code.token.constant]: _vars.code.token.constant,
+    [_varNames.code.token.deleted]: _vars.code.token.deleted,
+    [_varNames.code.token.doctype]: _vars.code.token.doctype,
+    [_varNames.code.token.entity]: _vars.code.token.entity,
+    [_varNames.code.token.function]: _vars.code.token.function,
+    [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
+    [_varNames.code.token.id]: _vars.code.token.id,
+    [_varNames.code.token.important]: _vars.code.token.important,
+    [_varNames.code.token.inserted]: _vars.code.token.inserted,
+    [_varNames.code.token.keyword]: _vars.code.token.keyword,
+    [_varNames.code.token.number]: _vars.code.token.number,
+    [_varNames.code.token.operator]: _vars.code.token.operator,
+    [_varNames.code.token.prolog]: _vars.code.token.prolog,
+    [_varNames.code.token.property]: _vars.code.token.property,
+    [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
+    [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
+    [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
+    [_varNames.code.token.regex]: _vars.code.token.regex,
+    [_varNames.code.token.selector]: _vars.code.token.selector,
+    [_varNames.code.token.string]: _vars.code.token.string,
+    [_varNames.code.token.symbol]: _vars.code.token.symbol,
+    [_varNames.code.token.tag]: _vars.code.token.tag,
+    [_varNames.code.token.unit]: _vars.code.token.unit,
+    [_varNames.code.token.url]: _vars.code.token.url,
+    [_varNames.code.token.variable]: _vars.code.token.variable,
+
     [_varNames.focusRing]: _vars.focusRing,
 
     [_varNames.link.fg]: _vars.link.fg,
@@ -130,43 +239,6 @@ function _assignToneProps(
     [_varNames.shadow.umbra]: _vars.shadow.umbra,
     [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
     [_varNames.shadow.ambient]: _vars.shadow.ambient,
-
-    [_varNames.token.atrule]: _vars.token.atrule,
-    [_varNames.token.attrName]: _vars.token.attrName,
-    [_varNames.token.attrValue]: _vars.token.attrValue,
-    [_varNames.token.attribute]: _vars.token.attribute,
-    [_varNames.token.boolean]: _vars.token.boolean,
-    [_varNames.token.builtin]: _vars.token.builtin,
-    [_varNames.token.cdata]: _vars.token.cdata,
-    [_varNames.token.char]: _vars.token.char,
-    [_varNames.token.class]: _vars.token.class,
-    [_varNames.token.className]: _vars.token.className,
-    [_varNames.token.comment]: _vars.token.comment,
-    [_varNames.token.constant]: _vars.token.constant,
-    [_varNames.token.deleted]: _vars.token.deleted,
-    [_varNames.token.doctype]: _vars.token.doctype,
-    [_varNames.token.entity]: _vars.token.entity,
-    [_varNames.token.function]: _vars.token.function,
-    [_varNames.token.hexcode]: _vars.token.hexcode,
-    [_varNames.token.id]: _vars.token.id,
-    [_varNames.token.important]: _vars.token.important,
-    [_varNames.token.inserted]: _vars.token.inserted,
-    [_varNames.token.keyword]: _vars.token.keyword,
-    [_varNames.token.number]: _vars.token.number,
-    [_varNames.token.operator]: _vars.token.operator,
-    [_varNames.token.prolog]: _vars.token.prolog,
-    [_varNames.token.property]: _vars.token.property,
-    [_varNames.token.pseudoClass]: _vars.token.pseudoClass,
-    [_varNames.token.pseudoElement]: _vars.token.pseudoElement,
-    [_varNames.token.punctuation]: _vars.token.punctuation,
-    [_varNames.token.regex]: _vars.token.regex,
-    [_varNames.token.selector]: _vars.token.selector,
-    [_varNames.token.string]: _vars.token.string,
-    [_varNames.token.symbol]: _vars.token.symbol,
-    [_varNames.token.tag]: _vars.token.tag,
-    [_varNames.token.unit]: _vars.token.unit,
-    [_varNames.token.url]: _vars.token.url,
-    [_varNames.token.variable]: _vars.token.variable,
   })
 
   for (const variant of ['solid', 'tinted'] as const) {

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

@@ -5,7 +5,6 @@ import {BoxStyleProps} from '../box'
 
 export interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
   checkered?: boolean
-  selectable?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey | 'inherit'
 }

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

@@ -6,7 +6,7 @@ const primitive: StyleRules = {
     // '--color-border': 'var(--color-tinted-default-border-2)',
     // '--color-fg': 'var(--color-tinted-default-fg-3)',
 
-    'boxShadow': 'inset 0 0 0 0.5px var(--color-border)',
+    'boxShadow': 'inset 0 0 0 0.5px var(--color-tinted-default-border-3)',
     'background': 'var(--color-muted-bg)',
     'font': 'inherit',
     'verticalAlign': 'top',

package/src/css/primitives/popover/popover.ts

@@ -3,3 +3,7 @@ import {_comp} from '../../_comp'
 export function popover(): string | undefined {
   return _comp('popover')
 }
+
+export function popoverCard(): string | undefined {
+  return _comp('popover-card')
+}