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

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

@@ -1,35 +1,30 @@
 import {FONT_CODE_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.code': {
-    '--font-weight-regular': `var(--font-code-weight-regular)`,
-    '--font-weight-medium': `var(--font-code-weight-medium)`,
-    '--font-weight-semibold': `var(--font-code-weight-semibold)`,
-    '--font-weight-bold': `var(--font-code-weight-bold)`,
-
-    '--font-family': `var(--font-code-family)`,
-    '--font-feature-settings': `var(--font-code-feature-settings)`,
+    vars: {
+      [varNames.font.weight.regular]: vars.font.code.weight.regular,
+      [varNames.font.weight.medium]: vars.font.code.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.code.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.code.weight.bold,
+
+      [varNames.font.family]: vars.font.code.family,
+      [varNames.font.featureSettings]: vars.font.code.featureSettings,
+    },
 
-    'color': 'var(--color-code-fg)',
+    color: vars.color.code.fg,
 
-    '@nest': {
+    nest: {
       '& > code': {
         fontFamily: 'inherit',
       },
 
-      // & code {
-      //   font-family: inherit;
-
-      //   &.refractor .token {
-      //     ${codeSyntaxHighlightingStyle}
-      //   }
-      // }
-
       '& a': {
-        color: 'var(--color-link-fg)',
+        color: vars.color.link.fg,
         textDecoration: 'none',
         borderRadius: '1px',
       },
@@ -48,14 +43,17 @@ const primitive: StyleRules = {
 }
 
 for (const size of FONT_CODE_SIZE) {
+  const v = vars.font.code.sizes[size]
+
   _responsiveRule(primitive, `code-${size}`, {
-    '--font-size': `var(--font-code-${size}-size)`,
-    '--font-line-height': `var(--font-code-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-code-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-code-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-code-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-code-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight,
+    },
   })
 }
 

package/src/css/primitives/code/code.ts

@@ -1,9 +1,13 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
 import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {font} from '../../aspects'
-import {CodeStyleProps} from './types'
+import type {CodeStyleProps} from './types'
 
 /** @public */
 export function code(props: CodeStyleProps): string | undefined {
-  return _comp('code', 'block', font(props), _resp(`code`, props.size))
+  return _composeClassNames(
+    _scopeClassNames('code', 'block', _resp(`code`, props.size)),
+    font(props),
+  )
 }

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

@@ -1,5 +1,5 @@
-import {FontStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
+import type {FontStyleProps} from '../../aspects'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type CodeSize = number

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

@@ -1,4 +1,4 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.container': {

package/src/css/primitives/container/container.ts

@@ -1,8 +1,9 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {maxWidth} from '../../aspects'
-import {ContainerStyleProps} from './types'
+import type {ContainerStyleProps} from './types'
 
 /** @public */
 export function container(props: ContainerStyleProps): string | undefined {
-  return _comp('container', maxWidth({maxWidth: props.width}))
+  return _composeClassNames(_scopeClassNames('container'), maxWidth({maxWidth: props.width}))
 }

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

@@ -1,6 +1,6 @@
-import {ContainerWidth} from '@sanity/ui/theme'
+import type {ContainerWidth} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface ContainerStyleProps {

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

@@ -1,46 +1,54 @@
 import {FONT_HEADING_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.heading': {
-    '--font-weight-regular': `var(--font-heading-weight-regular)`,
-    '--font-weight-medium': `var(--font-heading-weight-medium)`,
-    '--font-weight-semibold': `var(--font-heading-weight-semibold)`,
-    '--font-weight-bold': `var(--font-heading-weight-bold)`,
-
-    '--font-family': `var(--font-heading-family)`,
-    '--font-feature-settings': `var(--font-heading-feature-settings)`,
+    vars: {
+      [varNames.font.weight.regular]: vars.font.heading.weight.regular,
+      [varNames.font.weight.medium]: vars.font.heading.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.heading.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.heading.weight.bold,
+
+      [varNames.font.family]: vars.font.heading.family,
+      [varNames.font.featureSettings]: vars.font.heading.featureSettings,
+    },
 
-    'color': 'var(--color-fg)',
+    color: vars.color.fg,
 
-    '@nest': {
+    nest: {
       '& a': {
-        color: 'var(--color-link-fg)',
+        color: vars.color.link.fg,
         textDecoration: 'none',
       },
+
+      '& a:hover': {
+        color: 'inherit',
+      },
     },
   },
 
-  // '.heading-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
   '.heading-muted': {
-    '--color-fg': 'var(--color-tinted-default-fg-4)',
+    vars: {
+      [varNames.color.fg]: vars.color.muted.fg,
+    },
   },
 }
 
 for (const size of FONT_HEADING_SIZE) {
+  const v = vars.font.heading.sizes[size]
+
   _responsiveRule(primitive, `heading-${size}`, {
-    '--font-size': `var(--font-heading-${size}-size)`,
-    '--font-line-height': `var(--font-heading-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-heading-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-heading-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-heading-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-heading-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-heading-${size}-cap-height)`,
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight,
+    },
   })
 }
 

package/src/css/primitives/heading/heading.ts

@@ -1,17 +1,19 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
 import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {flexItem, font, textAlign} from '../../aspects'
-import {HeadingStyleProps} from './types'
+import type {HeadingStyleProps} from './types'
 
 /** @public */
 export function heading(props: HeadingStyleProps): string | undefined {
-  return _comp(
-    'block',
-    'heading',
+  return _composeClassNames(
+    _scopeClassNames(
+      'block',
+      'heading',
+      props.muted && 'heading-muted',
+      _resp(`heading`, props.size),
+    ),
     font(props),
-    props.accent && 'heading-accent',
-    props.muted && 'heading-muted',
-    _resp(`heading`, props.size),
     flexItem(props),
     textAlign({textAlign: props.align}),
   )

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

@@ -1,11 +1,12 @@
-import {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
+import type {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type HeadingSize = number
 
 /** @public */
 export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
+  /** @deprecated No longer in use */
   accent?: boolean
   align?: TextAlignStyleProps['textAlign']
   muted?: boolean

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

@@ -1,14 +1,14 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.kbd': {
-    'boxShadow': `inset 0 0 0 0.5px ${vars.color.border}`,
-    'backgroundColor': vars.color.muted.bg,
-    'font': 'inherit',
-    'verticalAlign': 'top',
+    boxShadow: `inset 0 0 0 0.5px ${vars.color.border}`,
+    backgroundColor: vars.color.muted.bg,
+    font: 'inherit',
+    verticalAlign: 'top',
 
-    '@nest': {
+    nest: {
       '&:not([hidden])': {
         display: 'inline-block',
       },

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

@@ -1,8 +1,9 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {radius} from '../../aspects'
-import {KBDStyleProps} from './types'
+import type {KBDStyleProps} from './types'
 
 /** @public */
 export function kbd(props: KBDStyleProps): string | undefined {
-  return _comp('kbd', radius(props))
+  return _composeClassNames(_scopeClassNames('kbd'), radius(props))
 }

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

@@ -1,4 +1,4 @@
-import {RadiusStyleProps} from '../../aspects'
+import type {RadiusStyleProps} from '../../aspects'
 
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

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

@@ -1,47 +1,50 @@
 import {FONT_LABEL_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.label': {
-    '--font-weight-regular': `var(--font-label-weight-regular)`,
-    '--font-weight-medium': `var(--font-label-weight-medium)`,
-    '--font-weight-semibold': `var(--font-label-weight-semibold)`,
-    '--font-weight-bold': `var(--font-label-weight-bold)`,
-
-    '--font-family': `var(--font-label-family)`,
-    '--font-feature-settings': `var(--font-label-feature-settings)`,
+    vars: {
+      [varNames.font.weight.regular]: vars.font.label.weight.regular,
+      [varNames.font.weight.medium]: vars.font.label.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.label.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.label.weight.bold,
+
+      [varNames.font.family]: vars.font.label.family,
+      [varNames.font.featureSettings]: vars.font.label.featureSettings,
+    },
 
-    'color': 'var(--color-fg)',
-    'textTransform': 'uppercase',
+    color: vars.color.fg,
+    textTransform: 'uppercase',
 
-    '@nest': {
+    nest: {
       '& a': {
-        color: 'var(--color-link-fg)',
+        color: vars.color.link.fg,
         textDecoration: 'none',
       },
     },
   },
 
-  '.label-accent': {
-    '--color-fg': 'var(--color-accent-fg)',
-  },
-
   '.label-muted': {
-    '--color-fg': 'var(--color-muted-fg)',
+    [varNames.color.fg]: vars.color.muted.fg,
   },
 }
 
 for (const size of FONT_LABEL_SIZE) {
+  const k = varNames.font
+  const v = vars.font.label.sizes[size]
+
   _responsiveRule(primitive, `label-${size}`, {
-    '--font-size': `var(--font-label-${size}-size)`,
-    '--font-line-height': `var(--font-label-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-label-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-label-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-label-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-label-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-label-${size}-cap-height)`,
+    vars: {
+      [k.fontSize]: v.fontSize,
+      [k.lineHeight]: v.lineHeight,
+      [k.letterSpacing]: v.letterSpacing,
+      [k.iconSize]: v.iconSize,
+      [k.ascenderHeight]: v.ascenderHeight,
+      [k.descenderHeight]: v.descenderHeight,
+    },
   })
 }
 

package/src/css/primitives/label/label.ts

@@ -1,17 +1,14 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
 import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {font, textAlign} from '../../aspects'
-import {LabelStyleProps} from './types'
+import type {LabelStyleProps} from './types'
 
 /** @public */
 export function label(props: LabelStyleProps): string | undefined {
-  return _comp(
-    'label',
-    'block',
+  return _composeClassNames(
+    _scopeClassNames('label', 'block', props.muted && 'label-muted', _resp(`label`, props.size)),
     font(props),
-    props.accent && 'label-accent',
-    props.muted && 'label-muted',
-    _resp(`label`, props.size),
     textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,7 +1,7 @@
-import {FontLabelSize} from '@sanity/ui/theme'
+import type {FontLabelSize} from '@sanity/ui/theme'
 
-import {FontStyleProps, TextAlignStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
+import type {FontStyleProps, TextAlignStyleProps} from '../../aspects'
+import type {ResponsiveProp} from '../../types'
 
 /**
  * @public
@@ -11,6 +11,7 @@ export type LabelSize = number
 
 /** @public */
 export interface LabelStyleProps extends FontStyleProps {
+  /** @deprecated No longer in use */
   accent?: boolean
   align?: TextAlignStyleProps['textAlign']
   muted?: boolean

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

@@ -1,5 +1,9 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {}
 
-export const popoverStyle: Style = {layers: {primitive}}
+export const popoverStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

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

@@ -1,11 +1,11 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @public */
 export function popover(): string | undefined {
-  return _comp('popover')
+  return _scopeClassNames('popover')
 }
 
 /** @public */
 export function popoverCard(): string | undefined {
-  return _comp('popover-card')
+  return _scopeClassNames('popover-card')
 }

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

@@ -1,10 +1,11 @@
-import {Style, StyleRules} from '../../types'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.radio': {
-    'position': 'relative',
+    position: 'relative',
 
-    '@nest': {
+    nest: {
       '&:not([hidden])': {
         display: 'inline-block',
       },
@@ -25,99 +26,59 @@ const primitive: StyleRules = {
         border: 'none',
       },
 
-      /* enabled */
+      // enabled
       '& > input + span': {
-        'display': 'block',
-        'position': 'relative',
-        'width': 'var(--input-radio-size)',
-        'height': 'var(--input-radio-size)',
-        'borderRadius': '9999px',
-        'backgroundColor': 'var(--color-input-bg)',
-        'boxShadow': 'inset 0 0 0 1px var(--color-input-border)',
-        // border-radius: ${rem(input.radio.size / 2)};
-        // background: ${color.input.default.enabled.bg};
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-
-        '--color-input-fg': 'var(--color-tinted-default-fg-0)',
-        '--color-input-bg': 'var(--color-tinted-default-bg-0)',
-        '--color-input-border': 'var(--color-tinted-default-border-1)',
+        display: 'block',
+        position: 'relative',
+        width: vars.input.radio.size,
+        height: vars.input.radio.size,
+        borderRadius: '9999px',
+        backgroundColor: vars.color.input.radio.bg,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.radio.border}`,
+
+        vars: {
+          [varNames.color.input.radio.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[1],
+        },
       },
 
       '& > input + span::after': {
         content: '""',
         position: 'absolute',
-        top: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
-        left: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
-        width: 'var(--input-radio-mark-size)',
-        height: 'var(--input-radio-mark-size)',
-        backgroundColor: 'var(--color-input-fg)',
+        top: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        left: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        width: vars.input.radio.markSize,
+        height: vars.input.radio.markSize,
+        backgroundColor: vars.color.input.radio.fg,
         borderRadius: '9999px',
         opacity: 0,
       },
 
-      /* hovered */
+      // hovered
       '& > input:not(:disabled):hover + span': {
-        '--color-input-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-input-border': 'var(--color-tinted-default-border-2)',
+        vars: {
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2],
+        },
       },
 
-      /* focused */
+      // focused
       '& > input:not(:disabled):focus + span': {
-        '--color-input-border': 'var(--color-tinted-default-border-2)',
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.default.enabled.border},
-        //   focusRing: input.radio.focusRing,
-        // })};
-      },
-
-      '& > input:not(:disabled):focus:not(:focus-visible) + span': {
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
+        vars: {
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2],
+        },
       },
 
       '& > input:checked + span::after': {
         opacity: 1,
       },
-
-      //   /* customValidity */
-      //   &[data-error] + span {
-      //     background-color: ${color.input.invalid.enabled.border};
-      //     box-shadow: ${focusRingBorderStyle({
-      //       width: input.border.width,
-      //       color: color.input.invalid.enabled.muted.bg,
-      //     })};
-      //     &::after {
-      //       background: ${color.input.invalid.enabled.muted.bg};
-      //     }
-      //   }
-
-      //   /* read only */
-      //   &[data-read-only] + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
-      //     background: ${color.input.default.readOnly.bg};
-
-      //     &::after {
-      //       background: ${color.input.default.readOnly.border};
-      //     }
-      //   }
-
-      //   /* disabled */
-      //   &:not([data-read-only]):disabled + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
-      //     background: ${color.input.default.disabled.bg};
-
-      //     &::after {
-      //       background: ${color.input.default.disabled.border};
-      //     }
-      //   }
-      // `
     },
   },
 }
 
-export const radioStyle: Style = {layers: {primitive}}
+export const radioStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/radio/radio.ts

@@ -1,6 +1,6 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @public */
 export function radio(): string | undefined {
-  return _comp('radio')
+  return _scopeClassNames('radio')
 }

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

@@ -1,8 +1,8 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.select': {
-    '@nest': {
+    nest: {
       '& > select:disabled': {
         opacity: 1,
       },
@@ -10,7 +10,7 @@ const primitive: StyleRules = {
   },
 
   '.select-presentation': {
-    '@nest': {
+    nest: {
       '& > span': {
         // place icon to the right
         position: 'absolute',