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

package/src/css/components/skeleton/skeleton.style.ts

@@ -2,10 +2,14 @@ import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from
 
 import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleKeyframes, StyleRules} from '../../types'
+import {varNames} from '../../varNames'
 import {vars} from '../../vars'
 
+// TODO: should keyframes be prefixed?
+const KEYFRAMES_PULSE = 'skeleton-pulse'
+
 const keyframes: StyleKeyframes = {
-  'skeleton-pulse': {
+  [KEYFRAMES_PULSE]: {
     '0%': {
       backgroundPosition: '100%',
     },
@@ -17,8 +21,8 @@ const keyframes: StyleKeyframes = {
 
 const component: StyleRules = {
   '.skeleton': {
-    '--color-skeleton-from': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    '--color-skeleton-to': `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
+    [varNames.color.skeleton.from]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
+    [varNames.color.skeleton.to]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
 
     'backgroundColor': vars.color.skeleton.from,
     'backgroundPosition': '100%',
@@ -38,7 +42,7 @@ const component: StyleRules = {
           vars.color.skeleton.from,
           `)`,
         ].join(', '),
-        animationName: 'skeleton-pulse',
+        animationName: KEYFRAMES_PULSE,
         animationTimingFunction: 'ease-in-out',
         animationIterationCount: 'infinite',
         animationDuration: '2000ms',

package/src/css/constants.ts

@@ -1 +1,10 @@
+export const BREAKPOINTS = {
+  1: 360,
+  2: 600,
+  3: 900,
+  4: 1200,
+  5: 1800,
+  6: 2400,
+}
+
 export const PREFIX = 's-'

package/src/css/index.ts

@@ -9,6 +9,7 @@ export * from './components/skeleton'
 export * from './components/toast'
 export * from './components/tree'
 export * from './composeClassNames'
+export * from './constants'
 export * from './primitives/_arrow'
 export * from './primitives/_input'
 export * from './primitives/_selectable'

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

@@ -20,49 +20,47 @@ const primitive: StyleRules = {
       },
 
       // top
-
       '[data-placement^="top"] > &': {
         bottom: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="top"] > & svg': {
         transform: 'rotate(0deg)',
       },
 
       // right
-
       '[data-placement^="right"] > &': {
         left: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="right"] > & svg': {
         transform: 'rotate(90deg)',
       },
 
       // left
-
       '[data-placement^="left"] > &': {
         right: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="left"] > & svg': {
         transform: 'rotate(-90deg)',
       },
 
       // bottom
-
       '[data-placement^="bottom"] > &': {
         top: 'calc(0px - var(--arrow-size))',
       },
-
       '[data-placement^="bottom"] > & svg': {
         transform: 'rotate(180deg)',
       },
     },
   },
 
+  '.arrow-stroke-mask': {
+    // @ts-expect-error `y` is not a valid property in 'csstype'
+    y: vars.shadow.outline,
+  },
+
   '.arrow-stroke': {
     stroke: vars.color.shadow.outline,
+    strokeWidth: `calc(${vars.card.shadow.outline} * 2)`,
   },
 
   '.arrow-shape': {

package/src/css/primitives/_arrow/_arrow.ts

@@ -9,6 +9,10 @@ export function _arrowStroke(): string | undefined {
   return _comp('arrow-stroke')
 }
 
+export function _arrowStrokeMask(): string | undefined {
+  return _comp('arrow-stroke-mask')
+}
+
 export function _arrowShape(): string | undefined {
   return _comp('arrow-shape')
 }

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

@@ -10,9 +10,9 @@ const primitive: StyleRules = {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
 
-    '--color-bg': vars.color.tinted.bg[0],
-    '--color-border': vars.color.tinted.border[2],
-    '--color-fg': vars.color.tinted.fg[2],
+    [varNames.color.bg]: vars.color.tinted.bg[0],
+    [varNames.color.border]: vars.color.tinted.border[2],
+    [varNames.color.fg]: vars.color.tinted.fg[2],
 
     '@nest': {
       '&:is(button)': {
@@ -43,36 +43,36 @@ const primitive: StyleRules = {
           },
 
           '&:not([data-disabled]):hover': {
-            '--color-bg': vars.color.tinted.bg[1],
-            '--color-border': vars.color.tinted.border[3],
-            '--color-fg': vars.color.tinted.fg[1],
-            '--color-muted-bg': vars.color.tinted.bg[2],
-            '--color-muted-fg': vars.color.tinted.fg[4],
+            [varNames.color.bg]: vars.color.tinted.bg[1],
+            [varNames.color.border]: vars.color.tinted.border[3],
+            [varNames.color.fg]: vars.color.tinted.fg[1],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[2],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4],
           },
 
           '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
             {
-              '--color-bg': vars.color.tinted.bg[2],
-              '--color-border': vars.color.tinted.border[4],
-              '--color-fg': vars.color.tinted.fg[0],
-              '--color-muted-bg': vars.color.tinted.bg[3],
-              '--color-muted-fg': vars.color.tinted.fg[4],
+              [varNames.color.bg]: vars.color.tinted.bg[2],
+              [varNames.color.border]: vars.color.tinted.border[4],
+              [varNames.color.fg]: vars.color.tinted.fg[0],
+              [varNames.color.muted.bg]: vars.color.tinted.bg[3],
+              [varNames.color.muted.fg]: vars.color.tinted.fg[4],
             },
 
           '&: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],
+            [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],
           },
 
           '&[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],
+            [varNames.color.bg]: vars.color.tinted.bg[0],
+            [varNames.color.border]: vars.color.tinted.border[1],
+            [varNames.color.fg]: vars.color.tinted.border[4],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[1],
+            [varNames.color.muted.fg]: vars.color.tinted.border[4],
           },
         },
       },

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

@@ -96,11 +96,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       },
 
       '&[data-disabled]': {
-        [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],
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.border]: vars.color.tinted.default.border[1],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
       },
     },
   }
@@ -143,11 +154,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       },
 
       '&[data-disabled]': {
-        [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],
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
       },
     },
   }
@@ -188,11 +210,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
       },
 
       '&[data-disabled]': {
-        [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],
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3],
       },
     },
   }

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

@@ -96,7 +96,7 @@ const primitive: StyleRules = {
       //   '--color-muted-fg': vars.color.solid.fg[3],
       // },
 
-      'a&[data-disabled]), button&[data-disabled]': {
+      '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],

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

@@ -1,47 +1,48 @@
 import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.token': {
     '_prefix': false,
 
     '@nest': {
-      '&.atrule': {color: 'var(--color-token-atrule)'},
-      '&.attr-name': {color: 'var(--color-token-attr-name)'},
-      '&.attr-value': {color: 'var(--color-token-attr-value)'},
-      '&.attribute': {color: 'var(--color-token-attribute)'},
-      '&.boolean': {color: 'var(--color-token-boolean)'},
-      '&.builtin': {color: 'var(--color-token-builtin)'},
-      '&.cdata': {color: 'var(--color-token-cdata)'},
-      '&.char': {color: 'var(--color-token-char)'},
-      '&.class': {color: 'var(--color-token-class)'},
-      '&.class-name': {color: 'var(--color-token-class-name)'},
-      '&.comment': {color: 'var(--color-token-comment)'},
-      '&.constant': {color: 'var(--color-token-constant)'},
-      '&.deleted': {color: 'var(--color-token-deleted)'},
-      '&.doctype': {color: 'var(--color-token-doctype)'},
-      '&.entity': {color: 'var(--color-token-entity)'},
-      '&.function': {color: 'var(--color-token-function)'},
-      '&.hexcode': {color: 'var(--color-token-hexcode)'},
-      '&.id': {color: 'var(--color-token-id)'},
-      '&.important': {color: 'var(--color-token-important)'},
-      '&.inserted': {color: 'var(--color-token-inserted)'},
-      '&.keyword': {color: 'var(--color-token-keyword)'},
-      '&.number': {color: 'var(--color-token-number)'},
-      '&.operator': {color: 'var(--color-token-operator)'},
-      '&.prolog': {color: 'var(--color-token-prolog)'},
-      '&.property': {color: 'var(--color-token-property)'},
-      '&.pseudo-class': {color: 'var(--color-token-pseudo-class)'},
-      '&.pseudo-element': {color: 'var(--color-token-pseudo-element)'},
-      '&.punctuation': {color: 'var(--color-token-punctuation)'},
+      '&.atrule': {color: vars.color.code.token.atrule},
+      '&.attr-name': {color: vars.color.code.token.attrName},
+      '&.attr-value': {color: vars.color.code.token.attrValue},
+      '&.attribute': {color: vars.color.code.token.attribute},
+      '&.boolean': {color: vars.color.code.token.boolean},
+      '&.builtin': {color: vars.color.code.token.builtin},
+      '&.cdata': {color: vars.color.code.token.cdata},
+      '&.char': {color: vars.color.code.token.char},
+      '&.class': {color: vars.color.code.token.class},
+      '&.class-name': {color: vars.color.code.token.className},
+      '&.comment': {color: vars.color.code.token.comment},
+      '&.constant': {color: vars.color.code.token.constant},
+      '&.deleted': {color: vars.color.code.token.deleted},
+      '&.doctype': {color: vars.color.code.token.doctype},
+      '&.entity': {color: vars.color.code.token.entity},
+      '&.function': {color: vars.color.code.token.function},
+      '&.hexcode': {color: vars.color.code.token.hexcode},
+      '&.id': {color: vars.color.code.token.id},
+      '&.important': {color: vars.color.code.token.important},
+      '&.inserted': {color: vars.color.code.token.inserted},
+      '&.keyword': {color: vars.color.code.token.keyword},
+      '&.number': {color: vars.color.code.token.number},
+      '&.operator': {color: vars.color.code.token.operator},
+      '&.prolog': {color: vars.color.code.token.prolog},
+      '&.property': {color: vars.color.code.token.property},
+      '&.pseudo-class': {color: vars.color.code.token.pseudoClass},
+      '&.pseudo-element': {color: vars.color.code.token.pseudoElement},
+      '&.punctuation': {color: vars.color.code.token.punctuation},
       '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
-      '&.regex': {color: 'var(--color-token-regex)'},
-      '&.selector': {color: 'var(--color-token-selector)'},
-      '&.string': {color: 'var(--color-token-string)'},
-      '&.symbol': {color: 'var(--color-token-symbol)'},
-      '&.tag': {color: 'var(--color-token-tag)'},
-      '&.unit': {color: 'var(--color-token-unit)'},
-      '&.url': {color: 'var(--color-token-url)'},
-      '&.variable': {color: 'var(--color-token-variable)'},
+      '&.regex': {color: vars.color.code.token.regex},
+      '&.selector': {color: vars.color.code.token.selector},
+      '&.string': {color: vars.color.code.token.string},
+      '&.symbol': {color: vars.color.code.token.symbol},
+      '&.tag': {color: vars.color.code.token.tag},
+      '&.unit': {color: vars.color.code.token.unit},
+      '&.url': {color: vars.color.code.token.url},
+      '&.variable': {color: vars.color.code.token.variable},
     },
   },
 }

package/src/css/responsiveRules.ts

@@ -1,25 +1,18 @@
+import {BREAKPOINTS} from './constants'
 import {type Properties, type Rules} from './types'
 
 export function responsiveRules(className: string, props: Properties): Rules {
-  return {
+  const rules: Rules = {
     [className]: props,
-    [`_1:${className}`]: {
-      '@media': {'screen and (min-width: 360px)': props},
-    },
-    [`_2:${className}`]: {
-      '@media': {'screen and (min-width: 600px)': props},
-    },
-    [`_3:${className}`]: {
-      '@media': {'screen and (min-width: 900px)': props},
-    },
-    [`_4:${className}`]: {
-      '@media': {'screen and (min-width: 1200px)': props},
-    },
-    [`_5:${className}`]: {
-      '@media': {'screen and (min-width: 1800px)': props},
-    },
-    [`_6:${className}`]: {
-      '@media': {'screen and (min-width: 2400px)': props},
-    },
   }
+
+  for (const [index, width] of Object.entries(BREAKPOINTS)) {
+    rules[`_${index}:${className}`] = {
+      '@media': {
+        [`screen and (min-width: ${width}px)`]: props,
+      },
+    }
+  }
+
+  return rules
 }

package/src/css/types.ts

@@ -1,3 +1,4 @@
+import {ColorTintKey} from '@sanity/color'
 import {
   type AvatarSize,
   type ContainerWidth,
@@ -58,7 +59,7 @@ export type ThemeVarName =
   | `--card-border-width`
   | `--card-focus-ring-offset`
   | `--card-focus-ring-width`
-  | `--shadow-outline`
+  | `--card-shadow-outline`
   | `--container-${ContainerWidth}`
   | `--font-code-family`
   | `--font-code-feature-settings`
@@ -604,12 +605,27 @@ export interface FontSizeVarNames {
 
 export interface FontVarNames<Size extends number> {
   family: VarName
+  featureSettings: VarName
   sizes: Record<Size, FontSizeVarNames>
-  weight: Record<FontWeight, VarName>
+  weights: Record<FontWeight, VarName>
 }
 
 /** @public */
 export interface VarNames {
+  button: {
+    border: {
+      width: VarName
+    }
+    focusRing: {
+      offset: VarName
+      width: VarName
+    }
+  }
+  card: {
+    shadow: {
+      outline: VarName
+    }
+  }
   color: Record<Scheme, ColorSchemeVarNames> &
     ScopedColorVarNames &
     Record<CardTone, ColorCardVarNames>
@@ -630,17 +646,85 @@ export interface VarNames {
     text: FontVarNames<FontTextSize>
   }
   input: {
+    border: {
+      width: VarName
+    }
+
+    checkbox: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      size: VarName
+    }
+
+    radio: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      markSize: VarName
+      size: VarName
+    }
+
+    select: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+    }
+
+    switch: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+      height: VarName
+      padding: VarName
+
+      transitionDurationMs: VarName
+      transitionTimingFunction: VarName
+      width: VarName
+    }
+
+    text: {
+      focusRing: {
+        offset: VarName
+        width: VarName
+      }
+    }
+
     fontSize: VarName
     lineHeight: VarName
     letterSpacing: VarName
     ascenderHeight: VarName
     descenderHeight: VarName
-    // capHeight: CSSVarName
     gap: VarName
     padding: VarName
   }
   radius: Record<Radius, VarName>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: VarName
+      penumbra: VarName
+      ambient: VarName
+    }
+  >
   space: Record<Space, VarName>
+
+  // color
+  black: VarName
+  white: VarName
+  gray: Record<ColorTintKey, VarName>
+  blue: Record<ColorTintKey, VarName>
+  purple: Record<ColorTintKey, VarName>
+  magenta: Record<ColorTintKey, VarName>
+  red: Record<ColorTintKey, VarName>
+  orange: Record<ColorTintKey, VarName>
+  yellow: Record<ColorTintKey, VarName>
+  green: Record<ColorTintKey, VarName>
+  cyan: Record<ColorTintKey, VarName>
 }
 
 /** @public */
@@ -817,6 +901,11 @@ export interface Vars {
     size: CSSVar
     sizes: Record<AvatarSize, {distance: CSSVar; size: CSSVar}>
   }
+  card: {
+    shadow: {
+      outline: CSSVar
+    }
+  }
   color: {
     dark: ColorSchemeVars
     light: ColorSchemeVars
@@ -848,5 +937,19 @@ export interface Vars {
     }
   }
   radius: Record<Radius, CSSVar>
+  shadow: Record<Shadow, {umbra: CSSVar; penumbra: CSSVar; ambient: CSSVar}>
   space: Record<Space, CSSVar>
+
+  // color
+  black: CSSVar
+  white: CSSVar
+  gray: Record<ColorTintKey, CSSVar>
+  blue: Record<ColorTintKey, CSSVar>
+  purple: Record<ColorTintKey, CSSVar>
+  magenta: Record<ColorTintKey, CSSVar>
+  red: Record<ColorTintKey, CSSVar>
+  orange: Record<ColorTintKey, CSSVar>
+  yellow: Record<ColorTintKey, CSSVar>
+  green: Record<ColorTintKey, CSSVar>
+  cyan: Record<ColorTintKey, CSSVar>
 }