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

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

@@ -1,14 +1,14 @@
-import {_comp} from '../../_comp'
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input, _inputPresentation} from '../_input'
-import {SelectStyleProps} from './types'
+import type {SelectStyleProps} from './types'
 
 /** @public */
 export function select(props: SelectStyleProps): string | undefined {
-  return composeClassNames(_comp('select'), _input(props))
+  return _composeClassNames(_scopeClassNames('select'), _input(props))
 }
 
 /** @public */
 export function selectPresentation(): string | undefined {
-  return composeClassNames(_comp('select-presentation'), _inputPresentation())
+  return _composeClassNames(_scopeClassNames('select-presentation'), _inputPresentation())
 }

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

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

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

@@ -1,4 +1,4 @@
-import {Style, StyleKeyframes, StyleRules} from '../../types'
+import type {Style, StyleKeyframes, StyleRules} from '../../types'
 
 const keyframes: StyleKeyframes = {
   'spinner-rotate': {

package/src/css/primitives/spinner/spinner.ts

@@ -1,11 +1,11 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @public */
 export function spinner(): string | undefined {
-  return _comp('spinner')
+  return _scopeClassNames('spinner')
 }
 
 /** @public */
 export function animatedSpinnerIcon(): string | undefined {
-  return _comp('animated-spinner-icon')
+  return _scopeClassNames('animated-spinner-icon')
 }

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

@@ -1,4 +1,4 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.stack': {
@@ -6,4 +6,8 @@ const primitive: StyleRules = {
   },
 }
 
-export const stackStyle: Style = {layers: {primitive}}
+export const stackStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/stack/stack.ts

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

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

@@ -1,4 +1,5 @@
-import {Style, StyleRules} from '../../types'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.switch': {},
@@ -21,73 +22,80 @@ const primitive: StyleRules = {
   },
 
   '.switch-presentation': {
-    '--switch-bg-color': 'var(--color-tinted-default-border-2)',
-    '--switch-fg-color': 'var(--color-tinted-default-bg-0)',
-    '--switch-thumb-offset': '0',
-    '--switch-thumb-size': 'calc(var(--input-switch-height) - var(--input-switch-padding) * 2)',
-    'display': 'block',
-    'position': 'relative',
-    'width': 'var(--input-switch-width)',
-    'height': 'var(--input-switch-height)',
-    'borderRadius': 'calc(var(--input-switch-height) / 2)',
-    'outlineOffset': 'var(--input-switch-focus-ring-offset)',
+    vars: {
+      [varNames.color.input.switch.bg]: vars.color.tinted.default.border[2],
+      [varNames.color.input.switch.fg]: vars.color.tinted.default.bg[0],
+      [varNames.input.switch.thumb.offset]: '0',
+      [varNames.input.switch.thumb.size]:
+        `calc(${vars.input.switch.height} - ${vars.input.switch.padding} * 2)`,
+    },
+    display: 'block',
+    position: 'relative',
+    width: vars.input.switch.width,
+    height: vars.input.switch.height,
+    borderRadius: `calc(${vars.input.switch.height} / 2)`,
+    outlineOffset: vars.input.switch.focusRing.offset,
 
     // Make sure it’s not possible to interact with the presentation element
-    'pointerEvents': 'none',
+    pointerEvents: 'none',
 
-    '@nest': {
-      '.switch-element:focus + &': {
-        outline: 'var(--input-switch-focus-ring-width) solid var(--color-focus-ring)',
+    nest: {
+      'input:not(:checked):hover + &': {
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.tinted.default.border[4],
+        },
       },
 
-      'input:focus:not(:focus-visible) + &': {
-        outline: 'none',
+      'input:checked + &': {
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.solid.default.bg[0],
+          [varNames.color.input.switch.fg]: vars.color.solid.default.fg[0],
+          [varNames.input.switch.thumb.offset]:
+            `calc(${vars.input.switch.width} - (${vars.input.switch.padding} * 2) - ${vars.input.switch.thumb.size})`,
+        },
       },
 
-      'input:checked + &': {
-        '--switch-bg-color': 'var(--color-solid-default-bg-0)',
-        '--switch-fg-color': 'var(--color-solid-default-fg-0)',
+      '[data-indeterminate] > input + &': {
+        vars: {
+          [varNames.input.switch.thumb.offset]:
+            `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`,
+        },
       },
 
-      '.switch-element:checked + &': {
-        '--switch-thumb-offset':
-          'calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))',
+      'input:focus + &': {
+        outline: `${vars.input.switch.focusRing.width} solid ${vars.color.focusRing}`,
       },
 
-      '[data-indeterminate] > .switch-element + &': {
-        '--switch-thumb-offset':
-          'calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))',
+      'input:focus:not(:focus-visible) + &': {
+        outline: 'none',
       },
     },
   },
 
   '.switch-track': {
     display: 'block',
-    backgroundColor: 'var(--switch-bg-color)',
+    backgroundColor: vars.color.input.switch.bg,
     position: 'absolute',
     left: 0,
     top: 0,
     right: 0,
     bottom: 0,
     borderRadius: 'inherit',
-
-    transition:
-      'box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
+    transition: `box-shadow, background-color ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
   },
 
   '.switch-thumb': {
     display: 'block',
     position: 'absolute',
-    left: 'var(--input-switch-padding)',
-    top: 'var(--input-switch-padding)',
-    width: 'var(--switch-thumb-size)',
-    height: 'var(--switch-thumb-size)',
-    backgroundColor: 'var(--switch-fg-color)',
+    left: vars.input.switch.padding,
+    top: vars.input.switch.padding,
+    width: vars.input.switch.thumb.size,
+    height: vars.input.switch.thumb.size,
+    backgroundColor: vars.color.input.switch.fg,
     borderRadius: '9999px',
-    boxShadow: '0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)',
-    transform: 'translate3d(var(--switch-thumb-offset), 0, 0)',
-    transition:
-      'transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
+    boxShadow: `0 0 0 0.5px ${vars.color.shadow.umbra}, 0 0.5px 2px 0.5px ${vars.color.shadow.umbra}`,
+    transform: `translate3d(${vars.input.switch.thumb.offset}, 0, 0)`,
+    transition: `transform ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
   },
 }
 

package/src/css/primitives/switch/switch.ts

@@ -1,26 +1,26 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @public */
 export function _switch(): string | undefined {
-  return _comp('switch')
+  return _scopeClassNames('switch')
 }
 
 /** @public */
 export function _switchElement(): string | undefined {
-  return _comp('switch-element')
+  return _scopeClassNames('switch-element')
 }
 
 /** @public */
 export function _switchPresentation(): string | undefined {
-  return _comp('switch-presentation')
+  return _scopeClassNames('switch-presentation')
 }
 
 /** @public */
 export function _switchThumb(): string | undefined {
-  return _comp('switch-thumb')
+  return _scopeClassNames('switch-thumb')
 }
 
 /** @public */
 export function _switchTrack(): string | undefined {
-  return _comp('switch-track')
+  return _scopeClassNames('switch-track')
 }

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

@@ -1,58 +1,63 @@
 import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.text': {
-    '--font-weight-regular': `var(--font-text-weight-regular)`,
-    '--font-weight-medium': `var(--font-text-weight-medium)`,
-    '--font-weight-semibold': `var(--font-text-weight-semibold)`,
-    '--font-weight-bold': `var(--font-text-weight-bold)`,
+    vars: {
+      [varNames.font.family]: vars.font.text.family,
+      [varNames.font.featureSettings]: vars.font.text.featureSettings,
 
-    '--font-family': `var(--font-text-family)`,
-    '--font-feature-settings': `var(--font-text-feature-settings)`,
+      [varNames.font.weight.regular]: vars.font.text.weight.regular,
+      [varNames.font.weight.medium]: vars.font.text.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.text.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.text.weight.bold,
+    },
 
-    '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: 'var(--color-fg)',
+        color: vars.color.fg,
       },
 
       '& code': {
         fontFamily: vars.font.code.family,
-        color: 'var(--color-code-fg)',
-        backgroundColor: 'var(--color-muted-bg)',
+        color: vars.color.code.fg,
+        backgroundColor: vars.color.code.bg,
         borderRadius: vars.radius[2],
       },
 
       '& svg': {
-        color: 'var(--color-muted-fg)',
+        color: vars.color.muted.fg,
       },
     },
   },
 
   '.text-muted': {
-    color: 'var(--color-muted-fg)',
+    color: vars.color.muted.fg,
   },
 }
 
 for (const size of FONT_TEXT_SIZE) {
+  const v = vars.font.text.sizes[size]
+
   _responsiveRule(primitive, `text-${size}`, {
-    '--font-size': `var(--font-text-${size}-size)`,
-    '--font-line-height': `var(--font-text-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-text-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-text-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-text-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-text-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-text-${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/text/text.ts

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

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

@@ -1,5 +1,5 @@
-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 TextSize = number

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

@@ -1,4 +1,4 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.text-area': {
@@ -6,4 +6,8 @@ const primitive: StyleRules = {
   },
 }
 
-export const textAreaStyle: Style = {layers: {primitive}}
+export const textAreaStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/textArea/textArea.ts

@@ -1,9 +1,9 @@
-import {_comp} from '../../_comp'
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input} from '../_input'
-import {TextAreaStyleProps} from './types'
+import type {TextAreaStyleProps} from './types'
 
 /** @public */
 export function textArea(props: TextAreaStyleProps): string | undefined {
-  return composeClassNames(_comp('text-area'), _input(props))
+  return _composeClassNames(_scopeClassNames('text-area'), _input(props))
 }

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

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

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

@@ -1,11 +1,13 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.text-input': {
-    '--font-family': vars.font.text.family,
+    vars: {
+      [varNames.font.family]: vars.font.text.family,
+    },
 
-    '@nest': {
+    nest: {
       '& > span': {
         borderRadius: 'inherit',
       },
@@ -13,13 +15,13 @@ const primitive: StyleRules = {
   },
 
   '.text-input-prefix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderLeft': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopRightRadius': '0 !important',
-    'borderBottomRightRadius': '0 !important',
+    borderTop: `1px solid ${vars.color.border}`,
+    borderLeft: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
+    borderTopRightRadius: '0 !important',
+    borderBottomRightRadius: '0 !important',
 
-    '@nest': {
+    nest: {
       '& > span': {
         display: 'block',
         margin: '-1px',
@@ -28,13 +30,13 @@ const primitive: StyleRules = {
   },
 
   '.text-input-suffix': {
-    'borderTop': '1px solid var(--color-border)',
-    'borderRight': '1px solid var(--color-border)',
-    'borderBottom': '1px solid var(--color-border)',
-    'borderTopLeftRadius': '0 !important',
-    'borderBottomLeftRadius': '0 !important',
+    borderTop: `1px solid ${vars.color.border}`,
+    borderRight: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
+    borderTopLeftRadius: '0 !important',
+    borderBottomLeftRadius: '0 !important',
 
-    '@nest': {
+    nest: {
       '& > span': {
         display: 'block',
         margin: '-1px',
@@ -45,4 +47,8 @@ const primitive: StyleRules = {
   '.text-input-presentation': {},
 }
 
-export const textInputStyle: Style = {layers: {primitive}}
+export const textInputStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/textInput/textInput.ts

@@ -1,9 +1,9 @@
-import {_comp} from '../../_comp'
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input} from '../_input'
-import {TextInputStyleProps} from './types'
+import type {TextInputStyleProps} from './types'
 
 /** @public */
 export function textInput(props: TextInputStyleProps): string | undefined {
-  return composeClassNames(_input(props), _comp('text-input'))
+  return _composeClassNames(_scopeClassNames('text-input'), _input(props))
 }

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

@@ -1,11 +1,5 @@
-// import {FontTextSize, Space} from '@sanity/ui/theme'
-// import {ResponsiveProp} from '../../types'
-
-import {InputStyleProps} from '../_input'
+import type {InputStyleProps} from '../_input'
 
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TextInputStyleProps extends InputStyleProps {
-  // padding: ResponsiveProp<Space>
-  // fontSize: ResponsiveProp<FontTextSize>
-}
+export interface TextInputStyleProps extends InputStyleProps {}

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

@@ -1,11 +1,11 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.token': {
-    '_prefix': false,
+    _prefix: false,
 
-    '@nest': {
+    nest: {
       '&.atrule': {color: vars.color.code.token.atrule},
       '&.attr-name': {color: vars.color.code.token.attrName},
       '&.attr-value': {color: vars.color.code.token.attrValue},

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

@@ -1,4 +1,4 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.tooltip': {
@@ -6,12 +6,13 @@ const primitive: StyleRules = {
   },
 
   '.tooltip-card': {
-    'willChange': 'transform',
+    willChange: 'transform',
 
-    '@nest': {
+    nest: {
       '&[data-animate] > *': {
+        // TODO
         // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        opacity: `var(--motion-content-opacity, 1)`,
+        // opacity: `var(--motion-content-opacity, 1)`,
         willChange: 'opacity',
       },
     },

package/src/css/primitives/tooltip/tooltip.ts

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

package/src/css/renderColor.ts

@@ -0,0 +1,31 @@
+import type {ResolvedColorToken} from '@sanity/ui/theme'
+
+/** @public */
+export type CSSVariableKey = `--${string}`
+
+/** @public */
+export interface RenderColorContext {
+  bgVar: CSSVariableKey
+  bgValue: string
+  prefix: string
+}
+
+/** @public */
+export function renderColor(token: ResolvedColorToken, context: RenderColorContext): string {
+  const {bgValue, prefix} = context
+
+  const colorVar =
+    token.color.type === 'hue'
+      ? `--${prefix}${token.color.hue}-${token.color.tint}`
+      : `--${prefix}${token.color.type}`
+
+  if (token.mix < 1) {
+    return `color-mix(in srgb, ${bgValue}, var(${colorVar}) ${token.mix * 100}%)`
+  }
+
+  if (token.opacity < 1) {
+    return `color-mix(in srgb, transparent, var(${colorVar}) ${token.opacity * 100}%)`
+  }
+
+  return `var(${colorVar})`
+}

package/src/css/theme/index.ts

@@ -0,0 +1,14 @@
+import {buildTheme_v3} from '@sanity/ui/theme'
+
+import {resolveTheme} from './resolveTheme'
+
+const result = resolveTheme({theme: buildTheme_v3()})
+
+/** @public */
+export const vars = result.vars
+
+/** @public */
+export const varNames = result.varNames
+
+/** @public */
+export const properties = result.properties