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

package/package.json

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

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/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,6 +17,8 @@ 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],
@@ -34,6 +36,7 @@ const primitive: StyleRules = {
       },
 
       'a&': {
+        // border: 'none',
         outline: 'none',
         textDecoration: 'none',
       },
@@ -144,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],
@@ -162,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
@@ -188,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,
@@ -196,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/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/text/text.style.ts

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