@sanity/ui 3.0.0-static.16 → 3.0.0-static.17

package/src/css/{compileTheme_v3.ts → _compileTheme_v3.ts}

@@ -22,7 +22,7 @@ const THEME_COLOR_SCHEMES = ['dark', 'light'] as const
 const THEME_COLOR_VARIANTS = ['tinted', 'solid'] as const
 
 /** @internal */
-export function compileTheme_v3(theme: Theme_v3): string {
+export function _compileTheme_v3(theme: Theme_v3): string {
   return _compileStyle({
     layers: {
       theme: {
@@ -36,7 +36,10 @@ function compileThemeProperties(theme: Theme_v3): Properties {
   return {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
+
+    // card
     [varNames.card.shadow.outline]: px(theme.card.shadow.outline),
+
     ...buildColorThemeProperties(theme),
     ...buildContainerThemeProperties(theme),
     ...buildFontCodeThemeProperties(theme),
@@ -297,6 +300,7 @@ function buildColorThemeProperties(theme: Theme_v3): Properties {
           const t = theme._tokens.color[cardTone].variant[colorVariant][elementTone]
 
           const context: RenderColorContext = {
+            bgValue: 'transparent',
             bgVar: v.bg[0],
             hue: t._hue,
             scheme,
@@ -342,6 +346,7 @@ function buildColorAvatarThemeProperties(
 
   for (const hue of HUES) {
     const context: RenderColorContext = {
+      bgValue: 'transparent',
       bgVar: varNames.color.bg,
       hue: t.avatar[hue]._hue ?? hue,
       scheme,
@@ -366,6 +371,7 @@ function buildColorCardThemeProperties(
   const t = theme._tokens.color[cardTone]
 
   const context: RenderColorContext = {
+    bgValue: 'transparent',
     bgVar: varNames.color.bg,
     hue: t._hue,
     scheme,

package/src/css/_system.style.ts

@@ -75,6 +75,7 @@ export const _systemStyle: Style = _mergeStyles([
   {
     // define order of layers
     layers: {
+      palette: {},
       theme: {},
       base: {},
       util: {},

package/src/css/index.ts

@@ -1,7 +1,7 @@
+export * from './_compilePalette'
+export * from './_compileSystem'
+export * from './_compileTheme'
 export * from './aspects'
-export * from './compilePalette'
-export * from './compileSystem'
-export * from './compileTheme'
 export * from './components/breadcrumbs'
 export * from './components/dialog'
 export * from './components/menu'

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

@@ -3,7 +3,6 @@ import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
-import {toneMap, variantMap} from './_constants'
 
 const primitive: StyleRules = {
   '.button': {
@@ -62,9 +61,11 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   const tinted = vars.color.tinted[tone]
 
   // mode: default
-  primitive[`.button.${variantMap.default}.${toneMap[tone]}`] = {
+  primitive[`.button[data-mode="default"][data-tone="${tone}"]`] = {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
+    [varNames.color.code.bg]: solid.bg[1],
+    [varNames.color.code.fg]: solid.fg[4],
     [varNames.color.fg]: solid.fg[0],
     [varNames.color.muted.bg]: solid.bg[1],
     [varNames.color.muted.fg]: solid.fg[4],
@@ -74,6 +75,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       '&:not([data-disabled]):hover': {
         [varNames.color.bg]: solid.bg[1],
         [varNames.color.border]: solid.border[2],
+        [varNames.color.code.bg]: solid.bg[2],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[2],
         [varNames.color.muted.fg]: solid.fg[4],
@@ -82,6 +85,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       '&:not([data-disabled]):active': {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
+        [varNames.color.code.bg]: solid.bg[3],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4],
@@ -90,6 +95,8 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       '&:not([data-disabled])[data-selected]': {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
+        [varNames.color.code.bg]: solid.bg[3],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4],
@@ -117,10 +124,12 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   }
 
   // mode: ghost
-  primitive[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
+  primitive[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
     [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[0],
+    [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
+    [varNames.color.code.bg]: tinted.bg[2],
+    [varNames.color.code.fg]: tinted.fg[4],
     [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)`,
@@ -128,16 +137,19 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     '@nest': {
       '&:not([data-disabled]):hover': {
         [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[1],
+        [varNames.color.border]: tinted.border[2],
+        [varNames.color.code.bg]: tinted.bg[3],
+        [varNames.color.code.fg]: tinted.fg[3],
         [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.border]: tinted.border[3],
+        [varNames.color.code.bg]: tinted.bg[4],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[4],
         [varNames.color.muted.fg]: tinted.fg[3],
@@ -146,7 +158,9 @@ for (const tone of THEME_COLOR_STATE_TONES) {
 
       '&:not([data-disabled])[data-selected]': {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.code.bg]: tinted.bg[4],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[4],
         [varNames.color.muted.fg]: tinted.fg[3],
@@ -175,7 +189,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   }
 
   // mode: bleed
-  primitive[`.button.${variantMap.bleed}.${toneMap[tone]}`] = {
+  primitive[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
     'boxShadow': 'none',
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],

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

@@ -1,21 +1,10 @@
 import {_comp} from '../../_comp'
 import {display, flexItem, radius, width} from '../../aspects'
-import {toneMap, variantMap} from './_constants'
 import {ButtonStyleProps} from './types'
 
 /** @public */
 export function button(props: ButtonStyleProps): string | undefined {
-  const {mode, tone} = props
-
-  return _comp(
-    'button',
-    variantMap[mode ?? 'default'],
-    toneMap[tone ?? 'default'],
-    display(props),
-    flexItem(props),
-    radius(props),
-    width(props),
-  )
+  return _comp('button', display(props), flexItem(props), radius(props), width(props))
 }
 
 /** @public */

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

@@ -1,5 +1,3 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
 import {
   DisplayStyleProps,
   FlexItemStyleProps,
@@ -12,7 +10,4 @@ export interface ButtonStyleProps
   extends DisplayStyleProps,
     FlexItemStyleProps,
     RadiusStyleProps,
-    WidthStyleProps {
-  mode?: ThemeColorButtonModeKey
-  tone?: ThemeColorStateToneKey
-}
+    WidthStyleProps {}

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

@@ -45,6 +45,13 @@ const primitive: StyleRules = {
         whiteSpace: 'inherit',
       },
 
+      '&[data-checkered]': {
+        backgroundSize: `${vars.space[3]} ${vars.space[3]}` as string,
+        backgroundPosition: 'top left',
+        backgroundImage:
+          `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)` as string,
+      },
+
       '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],
@@ -87,29 +94,13 @@ const primitive: StyleRules = {
         [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],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[1],
+        [varNames.color.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[1],
       },
-
-      // '&[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],
-      // },
     },
   },
 }

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

@@ -1,13 +1,10 @@
 import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.kbd': {
-    // '--color-bg': 'var(--color-tinted-default-bg-1)',
-    // '--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-tinted-default-border-3)',
-    'background': 'var(--color-muted-bg)',
+    'boxShadow': `inset 0 0 0 0.5px ${vars.color.border}`,
+    'backgroundColor': vars.color.muted.bg,
     'font': 'inherit',
     'verticalAlign': 'top',
 

package/src/css/types.ts

@@ -611,6 +611,15 @@ export interface FontVarNames<Size extends number> {
 
 /** @public */
 export interface VarNames {
+  avatar: {
+    distance: VarName
+    focusRing: {
+      offset: VarName
+      width: VarName
+    }
+    size: VarName
+    sizes: Record<AvatarSize, {distance: VarName; size: VarName}>
+  }
   button: {
     border: {
       width: VarName
@@ -629,15 +638,6 @@ export interface VarNames {
     ScopedColorVarNames &
     Record<CardTone, ColorCardVarNames>
   container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
-  avatar: {
-    distance: VarName
-    focusRing: {
-      offset: VarName
-      width: VarName
-    }
-    size: VarName
-    sizes: Record<AvatarSize, {distance: VarName; size: VarName}>
-  }
   font: {
     code: FontVarNames<FontCodeSize>
     heading: FontVarNames<FontHeadingSize>

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

@@ -57,7 +57,22 @@ function buildColorCard_v3(
   },
 ): ThemeColorCard_v3 {
   const {cardTone, scheme} = options
-  const context: RenderColorContext = {bgVar: `--color-bg-1`, hue: tokens._hue, scheme}
+  const context: RenderColorContext = {
+    bgVar: `--color-bg`,
+    bgValue: 'transparent',
+    hue: tokens._hue,
+    scheme,
+  }
+
+  const tintedDefaultVariant = buildColorElement_v3(tokens.variant.tinted.default, {
+    bgValue: 'transparent',
+    cardTone,
+    debugId: 'tinted',
+    scheme,
+    tone: 'default',
+  })
+
+  const bgValue = tintedDefaultVariant.bg[0]
 
   return {
     _hue: tokens._hue ?? 'gray',
@@ -65,8 +80,18 @@ function buildColorCard_v3(
       const avatarTokens = tokens.avatar[hue]
 
       acc[hue] = {
-        bg: renderColor(avatarTokens.bg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
-        fg: renderColor(avatarTokens.fg, {bgVar: `--color-bg-1`, hue: avatarTokens._hue, scheme}),
+        bg: renderColor(avatarTokens.bg, {
+          bgValue,
+          bgVar: `--color-bg-1`,
+          hue: avatarTokens._hue,
+          scheme,
+        }),
+        fg: renderColor(avatarTokens.fg, {
+          bgValue,
+          bgVar: `--color-bg-1`,
+          hue: avatarTokens._hue,
+          scheme,
+        }),
       }
 
       return acc
@@ -128,32 +153,34 @@ function buildColorCard_v3(
 
     variant: {
       solid: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
-              cardTone,
-              debugId: `solid`,
-              scheme,
-              tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+          acc[tone] = buildColorElement_v3(tokens.variant.solid[tone], {
+            bgValue,
+            cardTone,
+            debugId: `solid`,
+            scheme,
+            tone,
+          })
+
+          return acc
+        }, {} as ThemeColorVariant),
       },
       tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce(
-          (acc, tone) => ({
-            ...acc,
-            [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
+          if (tone === 'default') {
+            acc[tone] = tintedDefaultVariant
+          } else {
+            acc[tone] = buildColorElement_v3(tokens.variant.tinted[tone], {
+              bgValue,
               cardTone,
               debugId: `tinted`,
               scheme,
               tone,
-            }),
-          }),
-          {} as ThemeColorVariant,
-        ),
+            })
+          }
+
+          return acc
+        }, {} as ThemeColorVariant),
       },
     },
   }
@@ -162,13 +189,14 @@ function buildColorCard_v3(
 function buildColorElement_v3(
   tokens: ElementColorTokens,
   options: {
+    bgValue: string
     cardTone: ThemeColorCardToneKey
     debugId?: string
     scheme: ThemeColorSchemeKey
     tone?: ThemeColorStateToneKey
   },
 ): ThemeColorElement {
-  const {cardTone, debugId, scheme, tone} = options
+  const {bgValue, cardTone, debugId, scheme, tone} = options
 
   const path = [scheme, cardTone, debugId, tone].filter(Boolean).join('/')
 
@@ -178,7 +206,7 @@ function buildColorElement_v3(
     nodeLen += 1
   }
 
-  const context: RenderColorContext = {bgVar: `--bg`, hue: tokens._hue, scheme}
+  const context: RenderColorContext = {bgValue, bgVar: `--color-bg`, hue: tokens._hue, scheme}
 
   return {
     _hue: tokens._hue ?? 'gray',

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

@@ -77,45 +77,3 @@ export interface CardColorTokens {
     tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
   }
 }
-
-// /**
-//  * @public
-//  */
-// export interface ThemeColorSyntax {
-//   atrule: string
-//   attrName: string
-//   attrValue: string
-//   attribute: string
-//   boolean: string
-//   builtin: string
-//   cdata: string
-//   char: string
-//   class: string
-//   className: string
-//   comment: string
-//   constant: string
-//   deleted: string
-//   doctype: string
-//   entity: string
-//   function: string
-//   hexcode: string
-//   id: string
-//   important: string
-//   inserted: string
-//   keyword: string
-//   number: string
-//   operator: string
-//   prolog: string
-//   property: string
-//   pseudoClass: string
-//   pseudoElement: string
-//   punctuation: string
-//   regex: string
-//   selector: string
-//   string: string
-//   symbol: string
-//   tag: string
-//   unit: string
-//   url: string
-//   variable: string
-// }

package/src/theme/v3/color/renderColor.test.ts

@@ -2,6 +2,7 @@ import {renderColor, RenderColorContext} from './renderColor'
 
 it('should render color', () => {
   const context: RenderColorContext = {
+    bgValue: 'transparent',
     bgVar: '--bg',
     hue: 'gray',
     scheme: 'light',

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

@@ -9,15 +9,22 @@ export type CSSVariableKey = `--${string}`
 /** @public */
 export interface RenderColorContext {
   bgVar: CSSVariableKey
+  bgValue: string
   hue: Hue
   scheme: ThemeColorSchemeKey
 }
 
 /** @public */
 export function renderColor(token: [ColorToken, ColorToken], context: RenderColorContext): string {
-  const {bgVar, hue, scheme} = context
+  const {bgValue, bgVar, hue, scheme} = context
 
-  const result = parseColor(token[scheme === 'dark' ? 0 : 1])
+  const t = token[scheme === 'dark' ? 0 : 1]
+
+  if (t === 'inherit') {
+    return bgValue
+  }
+
+  const result = parseColor(t)
 
   const colorVar =
     result.color.type === 'hue'

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

@@ -5,6 +5,7 @@ export type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
 
 /** @public */
 export type ColorToken =
+  | `inherit`
   | `black`
   | `black/${ColorTokenOpacityValue}`
   | `white`

package/src/theme/v3/defaultTokens.ts

@@ -74,18 +74,23 @@ export const defaultTokens: PartialTokens<Tokens> = {
           },
           'primary': {
             _hue: 'blue',
+            bg: {0: ['inherit', 'inherit']},
           },
           'suggest': {
             _hue: 'purple',
+            bg: {0: ['inherit', 'inherit']},
           },
           'positive': {
             _hue: 'green',
+            bg: {0: ['inherit', 'inherit']},
           },
           'caution': {
             _hue: 'yellow',
+            bg: {0: ['inherit', 'inherit']},
           },
           'critical': {
             _hue: 'red',
+            bg: {0: ['inherit', 'inherit']},
           },
         },
         solid: {
@@ -100,7 +105,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
             },
             fg: {
               0: ['black', 'white'],
-              4: ['600', '400'],
+              4: ['700', '200'],
             },
           },
           'default': {
@@ -161,7 +166,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
             },
             border: {
               0: ['800', '100'],
-              4: ['600', '300'],
+              4: ['600', '400'],
             },
             fg: {
               0: ['white', 'black'],