@sanity/ui 3.0.0-static.2 → 3.0.0-static.4

package/src/css/compile/compilePalette.ts

@@ -1,58 +1,25 @@
-import {HUES, PaletteConfig, TINTS} from '@sanity/ui/theme'
+import {color} from '@sanity/color'
+import {HUES, TINTS} from '@sanity/ui/theme'
 
 import {compileRule} from './compileRule'
 
-export function compilePalette(config: PaletteConfig): string {
+export function compilePalette(): string {
   const props: Record<string, string> = {
-    '--l-min': `${config.luminosity.min * 100}%`,
-    '--l-max': `${config.luminosity.max * 100}%`,
-    '--l-range': `calc(var(--l-max) - var(--l-min))`,
+    ...compileHues(),
 
-    '--c-min': `${config.chroma.min}`,
-    '--c-max': `${config.chroma.max}`,
-    '--c-range': `calc(var(--c-max) - var(--c-min))`,
-
-    ...compileHues(config.hues),
-
-    '--black': `oklch(
-      calc(var(--l-min) + 0.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`,
-
-    '--white': `oklch(
-      calc(var(--l-min) + 1.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`,
+    '--black': color.black.hex,
+    '--white': color.white.hex,
   }
 
   return compileRule(':root', props, {keyframes: {}, media: {}})
 }
 
-function compileHues(hues: PaletteConfig['hues']) {
+function compileHues() {
   const rules: Record<string, string> = {}
 
   for (const hue of HUES) {
-    const {c, h} = hues[hue]
-
-    rules[`--${hue}-h`] = `${h}`
-    rules[`--${hue}-c`] = `${c}`
-    rules[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`
-    rules[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`
-
     for (const tint of TINTS) {
-      const l_offset = parseFloat((1 - tint / 1000).toFixed(2))
-      const c_offset_tmp = tint / 500
-      const c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1))
-
-      rules[`--${hue}-${tint}`] = [
-        `oklch(`,
-        `calc(var(--l-min) + ${l_offset} * var(--l-range)) `,
-        `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `,
-        `var(--${hue}-h)`,
-        `)`,
-      ].join('')
+      rules[`--${hue}-${tint}`] = color[hue][tint].hex
     }
   }
 

package/src/css/compile/compileRule.ts

@@ -1,3 +1,4 @@
+import {PREFIX} from '../constants'
 import {type Properties} from '../types'
 import {CompileRulesContext} from './types'
 
@@ -12,8 +13,11 @@ export function compileRule(
     css += compileNestedRules(selector, props['@nest'], context)
   }
 
+  // @ts-expect-error - TODO: fix this
   if (props['@keyframes']) {
+    // @ts-expect-error - TODO: fix this
     for (const name in props['@keyframes']) {
+      // @ts-expect-error - TODO: fix this
       context.keyframes[name] = props['@keyframes'][name]
     }
   }
@@ -63,7 +67,9 @@ function compileNestedRules(
   let css = ''
 
   for (const [_selector, _props] of Object.entries(props)) {
-    css += '\n' + compileRule(_selector.replace(/&/g, selector), _props, context)
+    css +=
+      '\n' +
+      compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context)
   }
 
   return css

package/src/css/compile/compileRules.test.ts

@@ -7,6 +7,7 @@ it('should compile deeply nested rules', () => {
     card: {
       '@nest': {
         '&:is(a)': {
+          // @ts-expect-error - TODO: fix this
           '@media': {
             '(hover: hover)': {
               background: 'red',

package/src/css/compile/compileRules.ts

@@ -1,3 +1,4 @@
+import {scopeClassName} from '../scopeClassName'
 import {type Rules} from '../types'
 import {compileMediaQueryRule, compileRule} from './compileRule'
 import {CompileRulesContext} from './types'
@@ -12,13 +13,15 @@ export function compileRules(rules: Rules): string {
   }
 
   for (const [className, props] of Object.entries(rules)) {
-    const ruleCss = compileRule(`.${className}`.replace(/:/g, '\\:'), props, context)
+    const ruleCss = compileRule(
+      `.${scopeClassName(className)}`.replace(/:/g, '\\:'),
+      props,
+      context,
+    )
 
     css += ruleCss ? `${ruleCss}\n` : ''
   }
 
-  // console.log('context', context)
-
   for (const [name, value] of Object.entries(context.keyframes)) {
     let keyframesCss = `@keyframes ${name} {\n`
 

package/src/css/compile/compileStyle.ts

@@ -0,0 +1,148 @@
+import {PREFIX} from '../constants'
+import {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from '../types'
+import {isArray} from '../util'
+
+/** @public */
+export function compileStyle(style: Style): string {
+  let css = ''
+
+  if (style.rules) {
+    css += compileStyleRules(style.rules)
+  }
+
+  if (style.keyframes && Object.keys(style.keyframes).length > 0) {
+    for (const [name, value] of Object.entries(style.keyframes)) {
+      let keyframesCss = `@keyframes ${name} {\n`
+
+      for (const [key, props] of Object.entries(value)) {
+        keyframesCss += `  ${key} {\n`
+        keyframesCss += compileProperties(props)
+        keyframesCss += `}\n`
+      }
+
+      keyframesCss += `\n}\n`
+
+      css += keyframesCss
+    }
+  }
+
+  if (style.layers && Object.keys(style.layers).length > 0) {
+    for (const [layerName, layerRules] of Object.entries(style.layers)) {
+      if (Object.keys(layerRules).length > 0) {
+        css += `@layer ${PREFIX}${layerName} {\n`
+        css += compileStyleRules(layerRules)
+        css += '}\n\n'
+      }
+    }
+  }
+
+  return css
+}
+
+function compileStyleRules(rules: StyleRules) {
+  let css = ''
+
+  const mediaMap = new Map<
+    string,
+    {
+      selector: string
+      props: PropertiesWithVarsAndNested
+    }[]
+  >()
+
+  for (const [selector, properties] of Object.entries(rules)) {
+    if (!properties) {
+      continue
+    }
+
+    if (properties['@media']) {
+      for (const [mediaQuery, mediaProps] of Object.entries(properties['@media'])) {
+        const arr = mediaMap.get(mediaQuery) ?? []
+
+        arr.push({
+          selector,
+          props: mediaProps,
+        })
+
+        mediaMap.set(mediaQuery, arr)
+      }
+    }
+
+    css += compileStyleRule(selector, properties)
+  }
+
+  for (const [mediaQuery, mediaRules] of mediaMap) {
+    css += `@media ${mediaQuery} {\n`
+
+    for (const rule of mediaRules) {
+      css += compileStyleRule(rule.selector, rule.props)
+    }
+
+    css += `}\n\n`
+  }
+
+  return css
+}
+
+function compileStyleRule(_selector: string, properties: Properties): string {
+  let css = ''
+
+  const {
+    _prefix = true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    '@media': _mediaProps,
+    '@nest': nestedProps,
+    ...restProperties
+  } = properties
+
+  const selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector
+
+  const propEntries = Object.entries(restProperties)
+
+  if (propEntries.length) {
+    css += `${selector} {\n`
+    css += compileProperties(restProperties)
+    css += '}\n\n'
+  }
+
+  if (nestedProps) {
+    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
+      const nestedPrefix = _prefix && (nestedProperties._prefix ?? true)
+      const nestedSelector = nestedPrefix
+        ? _nestedSelector.replace(/\./g, `.${PREFIX}`)
+        : _nestedSelector
+
+      css += `${nestedSelector.replace('&', selector)} {\n`
+      css += compileProperties(nestedProperties)
+      css += '}\n\n'
+    }
+  }
+
+  return css
+}
+
+function compileProperties(props: Properties) {
+  let css = ''
+
+  const propEntries = Object.entries(props)
+
+  for (const [key, value] of propEntries) {
+    if (key.startsWith('@')) {
+      continue
+    }
+
+    if (isArray(value)) {
+      for (const item of value) {
+        css += `  ${toSnakeCase(key)}: ${item};\n`
+      }
+    } else {
+      css += `  ${toSnakeCase(key)}: ${value};\n`
+    }
+  }
+
+  return css
+}
+
+function toSnakeCase(str: string): string {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
+}

package/src/css/compile/compileSystem.ts

@@ -1,7 +1,10 @@
-import {rules} from '../rules'
-import {compileRules} from './compileRules'
+// import {rules} from '../rules'
+import {systemStyle} from '../system.style'
+import {compileStyle} from './compileStyle'
+// import {compileRules} from './compileRules'
 
 /** @public */
 export function compileSystem(): string {
-  return compileRules(rules)
+  // return compileRules(rules)
+  return compileStyle(systemStyle)
 }

package/src/css/compile/compileTheme_v3.ts

@@ -22,8 +22,6 @@ export function compileTheme_v3(theme: Theme_v3): string {
 }
 
 function compileThemeProperties(theme: Theme_v3): Properties {
-  // const palette = defaultPalette
-
   return {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
@@ -36,26 +34,10 @@ function compileThemeProperties(theme: Theme_v3): Properties {
     ...buildRadiusThemeProperties(theme),
     ...buildShadowThemeProperties(theme),
     ...buildSpaceThemeProperties(theme),
-    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme),
   }
 }
 
-// function buildColorPaletteProperties(palette: Color): Properties {
-//   const props: Properties = {
-//     '--black': palette.black.hex,
-//     '--white': palette.white.hex,
-//   }
-
-//   for (const hue of COLOR_HUES) {
-//     for (const tint of COLOR_TINTS) {
-//       props[`--${hue}-${tint}`] = palette[hue][tint].hex
-//     }
-//   }
-
-//   return props
-// }
-
 function buildAvatarThemeProperties(theme: Theme_v3): Properties {
   return {
     [`--avatar-focus-ring-offset`]: px(theme.avatar.focusRing.offset),

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

@@ -0,0 +1,9 @@
+import {Style, StyleRules} from '../../types'
+
+const component: StyleRules = {
+  '.breadcrumbs': {
+    lineHeight: 0,
+  },
+}
+
+export const breadcrumbsStyle: Style = {layers: {component}}

package/src/css/components/breadcrumbs/breadcrumbs.ts

@@ -1,5 +1,5 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
 export function breadcrumbs(): string | undefined {
-  return composeClassNames('breadcrumbs')
+  return _comp('breadcrumbs')
 }

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

@@ -0,0 +1,79 @@
+import {Style, StyleKeyframes, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const keyframes: StyleKeyframes = {
+  'dialog-zoom-in': {
+    from: {
+      opacity: 0,
+      transform: 'scale(0.95)',
+    },
+    to: {
+      opacity: 1,
+      transform: 'scale(1)',
+    },
+  },
+  'dialog-fade-in': {
+    from: {
+      opacity: 0,
+    },
+    to: {
+      opacity: 1,
+    },
+  },
+}
+
+const component: StyleRules = {
+  '.dialog': {
+    // 'top': 0,
+    // 'left': 0,
+    // 'right': 0,
+    // 'bottom': 0,
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'outline': 'none',
+
+    'background': vars.color.backdrop,
+
+    '@nest': {
+      '&[data-animate]': {
+        animation: 'dialog-fade-in 200ms ease-out',
+      },
+
+      // Animates the dialog card.
+      '&[data-animate] > [data-ui="DialogCard"]': {
+        animation: 'dialog-zoom-in 200ms ease-out',
+      },
+    },
+  },
+
+  '.dialog-container': {
+    width: '100%',
+    height: '100%',
+  },
+
+  '.dialog-card-root': {
+    width: '100%',
+    maxHeight: '100%',
+    // @ts-expect-error - TODO: fix this
+    overflow: ['hidden', 'clip'],
+  },
+
+  '.dialog-layout': {
+    width: '100%',
+  },
+
+  '.dialog-header': {
+    zIndex: 2,
+  },
+
+  '.dialog-content': {
+    zIndex: 1,
+    outline: 'none',
+  },
+
+  '.dialog-footer': {
+    zIndex: 3,
+  },
+}
+
+export const dialogStyle: Style = {keyframes, layers: {component}}

package/src/css/components/dialog/dialog.ts

@@ -1,29 +1,30 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
+import {inset} from '../../aspects'
 
 export function dialog(): string | undefined {
-  return composeClassNames('dialog')
+  return _comp('dialog', inset({inset: 0}))
 }
 
 export function dialogContainer(): string | undefined {
-  return composeClassNames('dialog-container')
+  return _comp('dialog-container')
 }
 
 export function dialogCardRoot(): string | undefined {
-  return composeClassNames('dialog-card-root')
+  return _comp('dialog-card-root')
 }
 
 export function dialogLayout(): string | undefined {
-  return composeClassNames('dialog-layout')
+  return _comp('dialog-layout')
 }
 
 export function dialogHeader(): string | undefined {
-  return composeClassNames('dialog-header')
+  return _comp('dialog-header')
 }
 
 export function dialogContent(): string | undefined {
-  return composeClassNames('dialog-content')
+  return _comp('dialog-content')
 }
 
 export function dialogFooter(): string | undefined {
-  return composeClassNames('dialog-footer')
+  return _comp('dialog-footer')
 }

package/src/css/components/dialog/rules.ts

@@ -13,6 +13,7 @@ export const dialogRules: Rules = {
 
     'background': vars.color.backdrop,
 
+    // @ts-expect-error - TODO: fix this
     '@keyframes': {
       'dialog-zoom-in': {
         from: {
@@ -54,6 +55,7 @@ export const dialogRules: Rules = {
   'dialog-card-root': {
     width: '100%',
     maxHeight: '100%',
+    // @ts-expect-error - TODO: fix this
     overflow: ['hidden', 'clip'],
   },
 

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

@@ -0,0 +1,17 @@
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const component: StyleRules = {
+  '.menu': {
+    outline: 'none',
+  },
+
+  '.menu-divider': {
+    height: `1px`,
+    border: 0,
+    backgroundColor: vars.color.border,
+    margin: 0,
+  },
+}
+
+export const menuStyle: Style = {layers: {component}}

package/src/css/components/menu/menu.ts

@@ -1,9 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
 export function menu(): string | undefined {
-  return composeClassNames('menu')
+  return _comp('menu')
 }
 
 export function menuDivider(): string | undefined {
-  return composeClassNames('menu-divider')
+  return _comp('menu-divider')
 }

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

@@ -16,6 +16,7 @@ export const skeletonRules: Rules = {
     'opacity': 0,
     'transition': 'opacity 200ms ease-in',
 
+    // @ts-expect-error - TODO: fix this
     '@keyframes': {
       'skeleton-pulse': {
         '0%': {

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

@@ -0,0 +1,96 @@
+import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleKeyframes, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const keyframes: StyleKeyframes = {
+  'skeleton-pulse': {
+    '0%': {
+      backgroundPosition: '100%',
+    },
+    '100%': {
+      backgroundPosition: '-100%',
+    },
+  },
+}
+
+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%)`,
+
+    'backgroundColor': vars.color.skeleton.from,
+    'backgroundPosition': '100%',
+    'backgroundSize': '200% 100%',
+    'backgroundAttachment': 'fixed',
+    'opacity': 0,
+    'transition': 'opacity 200ms ease-in',
+
+    '@nest': {
+      '&[data-animated]': {
+        backgroundImage: [
+          `linear-gradient(to right`,
+          vars.color.skeleton.from,
+          vars.color.skeleton.to,
+          vars.color.skeleton.from,
+          vars.color.skeleton.from,
+          vars.color.skeleton.from,
+          `)`,
+        ].join(', '),
+        animationName: 'skeleton-pulse',
+        animationTimingFunction: 'ease-in-out',
+        animationIterationCount: 'infinite',
+        animationDuration: '2000ms',
+      },
+
+      '&[data-visible]': {
+        opacity: 1,
+      },
+    },
+
+    '@media': {
+      'screen and (prefers-reduced-motion: no-preference)': {
+        backgroundColor: vars.color.skeleton.from,
+      },
+    },
+  },
+
+  '.font-skeleton': {
+    height: `calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
+  },
+}
+
+for (const size of FONT_CODE_SIZE) {
+  _responsiveRule(component, `code-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.code.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.code.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.code.sizes[size].descenderHeight,
+  })
+}
+
+for (const size of FONT_HEADING_SIZE) {
+  _responsiveRule(component, `heading-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.heading.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.heading.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.heading.sizes[size].descenderHeight,
+  })
+}
+
+for (const size of FONT_LABEL_SIZE) {
+  _responsiveRule(component, `label-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.label.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.label.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.label.sizes[size].descenderHeight,
+  })
+}
+
+for (const size of FONT_TEXT_SIZE) {
+  _responsiveRule(component, `text-skeleton-${size}`, {
+    '--font-skeleton-line-height': vars.font.text.sizes[size].lineHeight,
+    '--font-skeleton-ascender-height': vars.font.text.sizes[size].ascenderHeight,
+    '--font-skeleton-descender-height': vars.font.text.sizes[size].descenderHeight,
+  })
+}
+
+export const skeletonStyle: Style = {keyframes, layers: {component}}

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

@@ -1,6 +1,6 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles/radius'
+import {radius} from '../../aspects/radius'
 import {
   CodeSkeletonStyleProps,
   HeadingSkeletonStyleProps,
@@ -11,21 +11,21 @@ import {
 
 /** @beta */
 export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return composeClassNames('skeleton', radius(props))
+  return _comp('skeleton', radius(props))
 }
 
 export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
-  return composeClassNames('font-skeleton', _resp('code-skeleton', props.size))
+  return _comp('font-skeleton', _resp('code-skeleton', props.size))
 }
 
 export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
-  return composeClassNames('font-skeleton', _resp('heading-skeleton', props.size))
+  return _comp('font-skeleton', _resp('heading-skeleton', props.size))
 }
 
 export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
-  return composeClassNames('font-skeleton', _resp('label-skeleton', props.size))
+  return _comp('font-skeleton', _resp('label-skeleton', props.size))
 }
 
 export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
-  return composeClassNames('font-skeleton', _resp('text-skeleton', props.size))
+  return _comp('font-skeleton', _resp('text-skeleton', props.size))
 }

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

@@ -1,6 +1,6 @@
 import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../styles/radius'
+import {RadiusStyleProps} from '../../aspects/radius'
 import {ResponsiveProp} from '../../types'
 
 /** @beta */

package/src/css/components/toast/rules.ts

@@ -12,6 +12,7 @@ export const toastRules: Rules = {
 
   'toast': {
     pointerEvents: 'all',
+    // @ts-expect-error - TODO: fix this
     overflow: ['hidden', 'clip'],
   },
 }