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

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.10",
+  "version": "3.0.0-static.12",
   "keywords": [
-    "sanity",
+    "react",
     "ui",
+    "kit",
+    "library",
     "primitives",
-    "react",
     "components",
-    "design-system"
+    "utils"
   ],
   "homepage": "https://www.sanity.io/",
   "bugs": {
@@ -108,8 +109,13 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
+    "cssnano": "^7.0.7",
     "csstype": "^3.1.3",
     "framer-motion": "^12.9.7",
+    "gzip-size": "^7.0.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "pretty-bytes": "^7.0.0",
     "react-compiler-runtime": "19.1.0-rc.1",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -181,7 +187,6 @@
     "magic-string": "^0.30.17",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",

package/src/cli/buildCommand.ts

@@ -1,48 +1,75 @@
+/* eslint-disable no-console */
+
 import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
 import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
+import cssnano from 'cssnano'
 import fs from 'fs/promises'
+import {gzipSizeSync} from 'gzip-size'
 import path from 'path'
+import postcss from 'postcss'
+import {format, resolveConfig} from 'prettier'
+import prettyBytes from 'pretty-bytes'
+
+async function minify(css: string) {
+  return postcss([cssnano()]).process(css, {from: undefined})
+}
+
+async function prettify(css: string) {
+  const options = await resolveConfig(__dirname)
+
+  if (!options) {
+    throw new Error('Prettier config not found')
+  }
+
+  return format(css, {...options, filepath: 'index.css', printWidth: 9999})
+}
+
+function prettySize(str: string) {
+  return `${prettyBytes(str.length)} / ${prettyBytes(gzipSizeSync(str))}`
+}
 
 async function buildPalette(outDir: string) {
   const css = compilePalette()
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'sanity-palette.min.css'), minified.css, 'utf-8')
 
-  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-palette.css')
+  console.log(`- built sanity-palette.css (${prettySize(prettified)})`)
+  console.log(`- built sanity-palette.min.css (${prettySize(minified.css)})`)
 }
 
 async function buildTheme(outDir: string) {
-  const css = compileTheme({v3: buildTheme_v3()} as RootTheme)
+  const css = await prettify(compileTheme({v3: buildTheme_v3()} as RootTheme))
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'sanity-theme.min.css'), minified.css, 'utf-8')
 
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-theme.css')
+  console.log(`- built sanity-theme.css (${prettySize(prettified)})`)
+  console.log(`- built sanity-theme.min.css (${prettySize(minified.css)})`)
 }
 
 async function buildSystem(outDir: string) {
-  const css = compileSystem()
+  const css = await prettify(compileSystem())
+  const minified = await minify(css)
+  const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(path.resolve(outDir, 'system.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'system.min.css'), minified.css, 'utf-8')
 
-  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- system.css')
+  console.log(`- built system.css (${prettySize(prettified)})`)
+  console.log(`- built system.min.css (${prettySize(minified.css)})`)
 }
 
 export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
   const cwd = options.cwd ?? process.cwd()
   const outDir = options.outDir ?? path.resolve(cwd, 'dist')
 
-  await buildPalette(outDir)
-
-  await buildTheme(outDir)
-
-  await buildSystem(outDir)
+  await Promise.all([buildPalette(outDir), buildTheme(outDir), buildSystem(outDir)])
 }

package/src/css/_comp.ts

@@ -1,9 +1,9 @@
-import {getClassNames} from './composeClassNames'
+import {_getClassNames} from './composeClassNames'
 import {scopeClassName} from './scopeClassName'
 
 export function _comp(...classNames: Array<string | false | undefined>): string | undefined {
   return (
-    getClassNames(...classNames)
+    _getClassNames(...classNames)
       .filter(Boolean)
       .map(scopeClassName)
       .join(' ') || undefined

package/src/css/{compile/compileStyle.ts → _compileStyle.ts}

@@ -1,9 +1,9 @@
-import {PREFIX} from '../constants'
-import {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from '../types'
-import {isArray} from '../util'
+import {PREFIX} from './constants'
+import {Properties, PropertiesWithVarsAndNested, Style, StyleRules} from './types'
+import {isArray} from './util'
 
-/** @public */
-export function compileStyle(style: Style): string {
+/** @internal */
+export function _compileStyle(style: Style): string {
   let css = ''
 
   if (style.rules) {
@@ -20,7 +20,7 @@ export function compileStyle(style: Style): string {
         keyframesCss += `}\n`
       }
 
-      keyframesCss += `\n}\n`
+      keyframesCss += `\n}\n\n`
 
       css += keyframesCss
     }
@@ -39,7 +39,7 @@ export function compileStyle(style: Style): string {
   return css
 }
 
-function compileStyleRules(rules: StyleRules) {
+export function compileStyleRules(rules: StyleRules) {
   let css = ''
 
   const mediaMap = new Map<

package/src/css/_resp.ts

@@ -1,4 +1,3 @@
-// import {scopeClassName as _} from './scopeClassName'
 import {ResponsiveProp} from './types'
 
 function _(className: string) {

package/src/css/{system.style.ts → _system.style.ts}

@@ -67,8 +67,9 @@ import {tooltipStyle} from './primitives/tooltip/tooltip.style'
 import {type Style} from './types'
 import {srOnlyStyle} from './utils/srOnly/srOnly.style'
 
-export const systemStyle: Style = _mergeStyles([
-  // NOTE: order matters in CSS
+/** @internal */
+export const _systemStyle: Style = _mergeStyles([
+  // NOTE: Order matters in CSS!
 
   {
     // define order of layers

package/src/css/aspects/display/display.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {DisplayStyleProps} from './types'
 
+/** @internal */
 export function display(props: DisplayStyleProps): string | undefined {
   return composeClassNames(_resp(undefined, props.display))
 }

package/src/css/aspects/display/types.ts

@@ -1,8 +1,6 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type Display =
   | 'block'
   | 'inline-block'
@@ -12,6 +10,7 @@ export type Display =
   | 'inline-grid'
   | 'none'
 
+/** @public */
 export interface DisplayStyleProps {
   display?: ResponsiveProp<Display>
 }

package/src/css/aspects/flex/types.ts

@@ -1,18 +1,12 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
 
-/**
- * @public
- */
+/** @public */
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
-/**
- * @public
- */
+/** @public */
 export type FlexJustify =
   | 'flex-start'
   | 'flex-end'
@@ -21,9 +15,7 @@ export type FlexJustify =
   | 'space-around'
   | 'space-evenly'
 
-/**
- * @public
- */
+/** @public */
 export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
 /** @public */

package/src/css/aspects/flexItem/types.ts

@@ -1,8 +1,6 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type FlexValue =
   | 'none'
   | 'auto'

package/src/css/aspects/font/font.style.ts

@@ -1,10 +1,8 @@
-// import {responsiveRules} from '../../responsiveRules'
 import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
 
-export const rules: StyleRules = {
+export const primitive: StyleRules = {
   '.font': {
-    // 'position': 'relative',
     'fontFamily': 'var(--font-family)',
     'fontFeatureSettings': 'var(--font-feature-settings)',
     'fontSize': 'var(--font-size)',
@@ -71,81 +69,24 @@ export const rules: StyleRules = {
   },
 }
 
-// align
-
-_responsiveRule(rules, `text-align-initial`, {
+_responsiveRule(primitive, `text-align-initial`, {
   textAlign: 'initial',
 })
 
-_responsiveRule(rules, `text-align-left`, {
+_responsiveRule(primitive, `text-align-left`, {
   textAlign: 'left',
 })
 
-_responsiveRule(rules, `text-align-center`, {
+_responsiveRule(primitive, `text-align-center`, {
   textAlign: 'center',
 })
 
-_responsiveRule(rules, `text-align-right`, {
+_responsiveRule(primitive, `text-align-right`, {
   textAlign: 'right',
 })
 
-_responsiveRule(rules, `text-align-justify`, {
+_responsiveRule(primitive, `text-align-justify`, {
   textAlign: 'justify',
 })
 
-export const fontStyle: Style = {layers: {primitive: rules}}
-
-// .font {
-//   position: relative;
-//   font-family: var(--font-family);
-//   font-size: var(--font-size);
-//   line-height: var(--font-line-height);
-//   letter-spacing: var(--font-letter-spacing);
-//   font-weight: var(--font-weight);
-//   transform: translateY(var(--font-descender-height));
-//   padding: 1px 0;
-//   margin: 0;
-
-//   --font-negative-height: calc(var(--font-ascender-height) + var(--font-descender-height));
-//   --font-cap-height: calc(var(--font-line-height) - var(--font-negative-height));
-//   --font-icon-offset: calc((var(--font-cap-height) - var(--font-icon-size)) / 2);
-//   --font-custom-icon-size: calc((var(--font-size) * 1.125) / 2) * 2 + 1;
-//   --font-custom-icon-offset: calc((var(--font-cap-height) - var(--font-custom-icon-size)) / 2);
-
-//   &:before {
-//     content: '';
-//     display: block;
-//     height: 0;
-//     margin-top: calc(0px - var(--font-negative-height) - 1px);
-//   }
-
-//   &:after {
-//     content: '';
-//     display: block;
-//     height: 0;
-//     margin-bottom: -1px;
-//   }
-
-//   & > code,
-//   & > span {
-//     display: block;
-//   }
-
-//   &:not([hidden]) {
-//     display: block;
-//   }
-
-//   & svg:not([data-sanity-icon]) {
-//     /* todo */
-//     font-size: var(--font-custom-icon-size);
-//     /* font-size: calc(var(--font-custom-icon-size) / 16 * 1rem); */
-//     margin: var(--font-custom-icon-offset);
-//   }
-
-//   & [data-sanity-icon] {
-//     /* todo */
-//     font-size: var(--font-icon-size);
-//     /* font-size: calc(var(--font-icon-size) / 16 * 1rem); */
-//     margin: var(--font-icon-offset);
-//   }
-// }
+export const fontStyle: Style = {layers: {primitive}}

package/src/css/aspects/font/types.ts

@@ -1,8 +1,6 @@
 import {FontWeight} from '@sanity/ui/theme'
 
-/**
- * @public
- */
+/** @public */
 export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
 /** @public */

package/src/css/aspects/grid/grid.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {GridStyleProps} from './types'
 
+/** @internal */
 export function grid(props: GridStyleProps): string | undefined {
   return composeClassNames(
     _resp('auto-cols', props.autoCols),

package/src/css/aspects/grid/types.ts

@@ -1,22 +1,18 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
-/**
- * @public
- */
+/** @public */
 export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
 
-/**
- * @public
- */
+/** @public */
 export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
+/** @public */
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
+/** @public */
 export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */

package/src/css/aspects/gridItem/gridItem.ts

@@ -2,7 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {GridItemStyleProps} from './types'
 
-/** @public */
+/** @internal */
 export function gridItem(props: GridItemStyleProps): string | undefined {
   return composeClassNames(
     _resp(`col`, props.column),

package/src/css/aspects/gridItem/types.ts

@@ -1,35 +1,24 @@
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type GridItemColumn = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemColumnStart = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemColumnEnd = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemRow = 'auto' | 'full' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemRowStart = 'auto' | number
 
-/**
- * @public
- */
+/** @public */
 export type GridItemRowEnd = 'auto' | number
 
+/** @public */
 export interface GridItemStyleProps {
   column?: ResponsiveProp<GridItemColumn>
   columnStart?: ResponsiveProp<GridItemColumnStart>

package/src/css/aspects/height/height.ts

@@ -2,16 +2,15 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {ResponsiveProp} from '../../types'
 
-/**
- * @public
- */
+/** @public */
 export type BoxHeight = 'stretch' | 'fill'
 
+/** @public */
 export interface HeightStyleProps {
   height?: ResponsiveProp<BoxHeight>
 }
 
-/** @public */
+/** @internal */
 export function height(props: HeightStyleProps): string | undefined {
   return composeClassNames(_resp(`h`, props.height))
 }

package/src/css/aspects/inset/inset.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {InsetStyleProps} from './types'
 
+/** @internal */
 export function inset(props: InsetStyleProps): string | undefined {
   return composeClassNames(
     _resp('inset', props.inset),

package/src/css/aspects/margin/margin.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {MarginStyleProps} from './types'
 
+/** @internal */
 export function margin(props: MarginStyleProps): string | undefined {
   return composeClassNames(
     _resp('m', props.margin),

package/src/css/aspects/margin/types.ts

@@ -1,5 +1,6 @@
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface MarginStyleProps {
   margin?: ResponsiveProp<number>
   marginTop?: ResponsiveProp<number>

package/src/css/aspects/maxWidth/maxWidth.ts

@@ -1,6 +1,7 @@
 import {_resp} from '../../_resp'
 import {MaxWidthStyleProps} from './types'
 
+/** @internal */
 export function maxWidth(props: MaxWidthStyleProps): string {
   return _resp('max-w', props.maxWidth) ?? ''
 }

package/src/css/aspects/maxWidth/types.ts

@@ -2,6 +2,7 @@ import {ContainerWidth} from '@sanity/ui/theme'
 
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface MaxWidthStyleProps {
   maxWidth?: ResponsiveProp<ContainerWidth | 'auto' | 'fill'>
 }

package/src/css/aspects/minWidth/minWidth.ts

@@ -1,6 +1,7 @@
 import {_resp} from '../../_resp'
 import {MinWidthStyleProps} from './types'
 
+/** @internal */
 export function minWidth(props: MinWidthStyleProps): string {
   return _resp('min-w', props.minWidth) ?? ''
 }

package/src/css/aspects/minWidth/types.ts

@@ -1,7 +1,9 @@
 import {ResponsiveProp} from '../../types'
 
+/** @public */
 export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
 
+/** @public */
 export interface MinWidthStyleProps {
   minWidth?: ResponsiveProp<MinWidth>
 }

package/src/css/aspects/overflow/overflow.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {OverflowStyleProps} from './types'
 
+/** @internal */
 export function overflow(props: OverflowStyleProps): string | undefined {
   return composeClassNames(
     _resp(`overflow`, props.overflow),

package/src/css/aspects/padding/padding.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {PaddingStyleProps} from './types'
 
+/** @internal */
 export function padding(props: PaddingStyleProps): string | undefined {
   return composeClassNames(
     _resp('p', props.padding),

package/src/css/aspects/pointerEvents/pointerEvents.ts

@@ -1,6 +1,7 @@
 import {composeClassNames} from '../../composeClassNames'
 import {PointerEventsStyleProps} from './types'
 
+/** @internal */
 export function pointerEvents(props: PointerEventsStyleProps): string | undefined {
   return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
 }

package/src/css/aspects/position/position.ts

@@ -2,6 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {PositionStyleProps} from './types'
 
+/** @internal */
 export function position(props: PositionStyleProps): string | undefined {
   return composeClassNames(_resp('position', props.position))
 }

package/src/css/aspects/shadow/shadow.style.ts

@@ -1,49 +1,24 @@
+import {SHADOW} from '@sanity/ui/theme'
+
 import {_responsiveRule} from '../../_responsiveRule'
 import type {Style, StyleRules} from '../../types'
 import {vars} from '../../vars'
 
 const util: StyleRules = {}
 
-_responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
-_responsiveRule(util, 'shadow-1', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-2', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-3', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-4', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-5', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
+for (const shadow of SHADOW) {
+  if (shadow === 0) {
+    _responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
+  } else {
+    _responsiveRule(util, `shadow-${shadow}`, {
+      boxShadow: [
+        `0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`,
+        `${vars.shadow[shadow].umbra} ${vars.color.shadow.umbra}`,
+        `${vars.shadow[shadow].penumbra} ${vars.color.shadow.penumbra}`,
+        `${vars.shadow[shadow].ambient} ${vars.color.shadow.ambient}`,
+      ].join(', '),
+    })
+  }
+}
 
 export const shadowStyle: Style = {layers: {util}}