@sanity/ui 3.0.0-static.3 → 3.0.0-static.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.3",
+  "version": "3.0.0-static.5",
   "keywords": [
     "sanity",
     "ui",

package/src/cli/buildCommand.ts

@@ -1,10 +1,10 @@
 import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, defaultPalette, RootTheme} from '@sanity/ui/theme'
+import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
 import fs from 'fs/promises'
 import path from 'path'
 
 async function buildPalette(outDir: string) {
-  const css = compilePalette(defaultPalette)
+  const css = compilePalette()
 
   await fs.mkdir(outDir, {recursive: true})
 

package/src/css/_comp.ts

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

package/src/css/aspects/flex/flexJustify.style.ts

@@ -6,8 +6,8 @@ const util: StyleRules = {}
 _responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
 _responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
 _responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
-_responsiveRule(util, 'flex-justify-between', {justifyContent: 'space-between'})
-_responsiveRule(util, 'flex-justify-around', {justifyContent: 'space-around'})
-_responsiveRule(util, 'flex-justify-evenly', {justifyContent: 'space-evenly'})
+_responsiveRule(util, 'flex-justify-space-between', {justifyContent: 'space-between'})
+_responsiveRule(util, 'flex-justify-space-around', {justifyContent: 'space-around'})
+_responsiveRule(util, 'flex-justify-space-evenly', {justifyContent: 'space-evenly'})
 
 export const flexJustifyStyle: Style = {layers: {util}}

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

@@ -15,9 +15,9 @@ export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
  */
 export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */
 export interface GridStyleProps {

package/src/css/aspects/textOverflow/textOverflow.ts

@@ -1,6 +1,6 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 import {TextOverflowStyleProps} from './types'
 
 export function textOverflow(props: TextOverflowStyleProps): string | undefined {
-  return composeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`)
+  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`)
 }

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/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/index.ts

@@ -1,4 +1,4 @@
-export * from '../theme/versioning/v3_v2'
+export * from './aspects'
 export * from './compile/compilePalette'
 export * from './compile/compileSystem'
 export * from './compile/compileTheme'
@@ -27,13 +27,13 @@ export * from './primitives/popover'
 export * from './primitives/radio'
 export * from './primitives/select'
 export * from './primitives/spinner'
+export * from './primitives/stack'
 export * from './primitives/switch'
 export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
 export * from './primitives/tooltip'
 export * from './scopeClassName'
-export * from './aspects'
 export * from './types'
 export * from './util'
 export * from './utils/srOnly'

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

@@ -1,7 +1,7 @@
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'surface',
+  default: 'default',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

package/src/css/primitives/box/box.ts

@@ -23,6 +23,9 @@ import {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
+  // props.align
+  // props.autoCols
+
   return _comp(
     'box',
     props.muted && 'muted', // todo: consider this naming

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

@@ -1,7 +1,7 @@
 import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'surface',
+  default: 'default',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -24,6 +24,8 @@ const primitive: StyleRules = {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
     'boxShadow': 'var(--button-box-shadow)',
+    'alignItems': 'center',
+    // 'justifyContent': 'center',
 
     '@nest': {
       '&::-moz-focus-inner': {
@@ -100,38 +102,35 @@ for (const tone of THEME_COLOR_STATE_TONES) {
 
   // mode: ghost
   primitive[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
-    [varNames.color.bg]: tinted.bg[0],
-    [varNames.color.border]: tinted.border[1],
+    [varNames.color.bg]: tinted.bg[1],
+    [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
-    '--button-box-shadow': [
-      `inset 0 0 0 var(--button-border-width) var(--color-border)`,
-      `inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)`,
-    ].join(','),
+    '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
 
     '@nest': {
       '&:not([data-disabled]):hover': {
-        [varNames.color.bg]: tinted.bg[1],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[1],
         [varNames.color.fg]: tinted.fg[1],
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled]):active': {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.bg]: tinted.bg[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled])[data-selected]': {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.bg]: tinted.bg[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&[data-disabled]': {
-        [varNames.color.bg]: vars.color.default.tinted.bg[0],
+        [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],
       },

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

@@ -1,8 +1,8 @@
 import {ThemeColorCardToneKey} from '@sanity/ui/theme'
 
 export const toneMap: Record<ThemeColorCardToneKey | 'inherit', string | undefined> = {
-  transparent: 'canvas',
-  default: 'surface',
+  transparent: 'transparent',
+  default: 'default',
   neutral: 'neutral',
   suggest: 'suggest',
   primary: 'accent',

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

@@ -6,7 +6,7 @@ import {CardStyleProps} from './types'
 export function card(props: CardStyleProps): string | undefined {
   return _comp(
     props.scheme,
-    toneMap[props.tone ?? 'inherit'],
+    toneMap[props.tone ?? 'default'],
     'card',
     props.checkered && 'card-checkered',
     shadow(props),

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

@@ -0,0 +1 @@
+export * from './stack'

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

@@ -0,0 +1,9 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.stack': {
+    gridTemplateColumns: 'minmax(0, 1fr)',
+  },
+}
+
+export const stackStyle: Style = {layers: {primitive}}

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

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

package/src/css/system.style.ts

@@ -56,6 +56,7 @@ import {popoverStyle} from './primitives/popover/popover.style'
 import {radioStyle} from './primitives/radio/radio.style'
 import {selectStyle} from './primitives/select/select.style'
 import {spinnerStyle} from './primitives/spinner/spinner.style'
+import {stackStyle} from './primitives/stack/stack.style'
 import {switchStyle} from './primitives/switch/switch.style'
 import {textStyle} from './primitives/text/text.style'
 import {textAreaStyle} from './primitives/textArea/textArea.style'
@@ -136,6 +137,7 @@ export const systemStyle: Style = _mergeStyles([
   radioStyle,
   selectStyle,
   spinnerStyle,
+  stackStyle,
   switchStyle,
   textAreaStyle,
   textInputStyle,

package/src/theme/defaults/config.ts

@@ -1,6 +1,6 @@
 import {RootTheme_v2} from '../v2'
 
-const BORDER_WIDTH = 0.5
+const BORDER_WIDTH = 1
 const OUTLINE_WIDTH = 0.5
 
 export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
@@ -31,7 +31,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     popover: {zOffset: 400},
     tooltip: {zOffset: 200},
   },
-  radius: [0, 1, 5, 9, 13, 17, 25, 45, 77, 129],
+  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
   shadow: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},

package/src/theme/defaults/fonts.ts

@@ -57,10 +57,10 @@ export const defaultThemeFonts: ThemeFonts = {
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
     featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
     weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900,
     },
     sizes: [
       {

package/src/theme/palette/constants.ts

@@ -10,6 +10,4 @@ export const HUES = [
   'cyan',
 ] as const
 
-export const TINTS = [
-  50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
-] as const
+export const TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const

package/src/theme/palette/types.ts

@@ -2,15 +2,3 @@ import {type HUES, type TINTS} from './constants'
 
 export type Hue = (typeof HUES)[number]
 export type Tint = (typeof TINTS)[number]
-
-export type PaletteConfig = {
-  chroma: {
-    min: number
-    max: number
-  }
-  luminosity: {
-    min: number
-    max: number
-  }
-  hues: Record<Hue, {h: number; c: number}>
-}

package/src/theme/v3/buildTheme_v3.ts

@@ -1,7 +1,7 @@
 import {defaultThemeConfig} from '../defaults/config'
 import {defaultThemeFonts} from '../defaults/fonts'
 import {buildColor_v3} from './color/buildColor_v3'
-import {defaultPalette, defaultTokens} from './defaults'
+import {defaultTokens} from './defaults'
 import {resolveTokens} from './resolveTokens'
 import {Theme_v3, ThemeOptions} from './types'
 
@@ -12,7 +12,6 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
 
   return {
     _version: 3,
-    _palette: options?.palette ?? defaultPalette,
     _tokens: tokens,
     avatar: v2?.avatar ?? defaultThemeConfig.avatar,
     button: v2?.button ?? defaultThemeConfig.button,

package/src/theme/v3/defaults.ts

@@ -1,22 +1,5 @@
-import {PaletteConfig} from '../palette'
 import {PartialTokens, Tokens} from './tokens'
 
-export const defaultPalette: PaletteConfig = {
-  chroma: {min: 0.005, max: 0.2325},
-  luminosity: {min: 0.1875, max: 1},
-  hues: {
-    gray: {h: 277, c: 0.04},
-    blue: {h: 273, c: 0.185},
-    purple: {h: 295, c: 0.4},
-    magenta: {h: 12, c: 0.4},
-    red: {h: 30, c: 0.4},
-    orange: {h: 68, c: 0.4},
-    yellow: {h: 90, c: 0.4},
-    green: {h: 171, c: 0.4},
-    cyan: {h: 194, c: 0.4},
-  },
-}
-
 export const defaultTokens: PartialTokens<Tokens> = {
   color: {
     '*': {
@@ -73,12 +56,12 @@ export const defaultTokens: PartialTokens<Tokens> = {
         tinted: {
           '*': {
             bg: {
-              0: ['900', '50'],
-              4: ['800', '150'],
+              0: ['950', '50'],
+              4: ['800', '100'],
             },
             border: {
-              0: ['800', '150'],
-              4: ['600', '350'],
+              0: ['800', '100'],
+              4: ['600', '300'],
             },
             fg: {
               0: ['100', '900'],
@@ -150,15 +133,15 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['black', 'gray/50'],
-              4: ['900', '150'],
+              4: ['800', '300 50%'],
             },
             border: {
-              0: ['900', '150'],
-              4: ['700', '350'],
+              0: ['900', '300 40%'],
+              4: ['700', '300'],
             },
             fg: {
-              0: ['150', 'black'],
-              4: ['550', '600'],
+              0: ['100', 'black'],
+              4: ['500', '600'],
             },
           },
         },
@@ -170,11 +153,11 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['gray/950', 'white'],
-              4: ['850', '100'],
+              4: ['800', '200'],
             },
             border: {
-              0: ['850', '100'],
-              4: ['650', '300'],
+              0: ['800', '100'],
+              4: ['600', '300'],
             },
             fg: {
               0: ['white', 'black'],
@@ -201,5 +184,3 @@ export const defaultTokens: PartialTokens<Tokens> = {
     },
   },
 }
-
-// export const defaultTheme = buildTheme_v3()

package/src/theme/v3/types.ts

@@ -1,5 +1,4 @@
 import {ThemeConfig} from '../config'
-import {PaletteConfig} from '../palette'
 import {ThemeFocusRing, ThemeFonts, ThemeFontWeightKey, ThemeLayer, ThemeShadow} from '../v0'
 import {ThemeAvatar_v2, ThemeInput_v2} from '../v2'
 import {ThemeColor_v3} from './color'
@@ -11,7 +10,6 @@ export type ThemeEntry = [`--${string}`, string]
 /** @public */
 export interface ThemeOptions {
   v2?: ThemeConfig
-  palette?: PaletteConfig
   tokens?: PartialTokens<Tokens>
 }
 
@@ -22,7 +20,6 @@ export interface ThemeOptions {
  */
 export interface Theme_v3 {
   _version: 3
-  _palette: PaletteConfig
   _tokens: Tokens
   avatar: ThemeAvatar_v2
   button: {

package/src/ui/StyleTags.tsx

@@ -11,7 +11,7 @@ export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
   return (
     <>
       <style href="sanity-palette" precedence="palette">
-        {compilePalette(theme._palette)}
+        {compilePalette()}
       </style>
       <style href="sanity-theme" precedence="theme">
         {compileTheme({v3: theme} as RootTheme)}

package/src/ui/primitives/box/box.tsx

@@ -32,6 +32,9 @@ export const Box = forwardRef(function Box(
   const {
     align,
     as: As = 'div',
+    autoCols,
+    autoFlow,
+    autoRows,
     border,
     borderTop,
     borderRight,
@@ -93,6 +96,9 @@ export const Box = forwardRef(function Box(
         className,
         box({
           align,
+          autoCols,
+          autoFlow,
+          autoRows,
           border,
           borderTop,
           borderRight,

package/src/ui/primitives/button/button.tsx

@@ -14,7 +14,6 @@ import {FontTextSize, Space} from '@sanity/ui/theme'
 import {ElementType, ForwardedRef, forwardRef, isValidElement, ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-// import {useTheme_v2} from '../../_compat'
 import {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
@@ -84,7 +83,7 @@ export const Button = forwardRef(function Button(
     paddingBottom,
     paddingLeft,
     paddingRight,
-    radius = 3,
+    radius = 2,
     selected,
     space = props.gap ?? props.space ?? props.padding ?? 3, // eslint-disable-line @typescript-eslint/no-unused-vars
     text,
@@ -114,12 +113,12 @@ export const Button = forwardRef(function Button(
     >
       {Boolean(loading) && (
         <Box
-          align={align}
+          align="center"
           as="span"
           className={buttonLoadingBox()}
           display="flex"
           flex={1}
-          justify={justify}
+          justify="center"
           width="fill"
         >
           <Spinner size={fontSize} />
@@ -128,6 +127,7 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box
+          // align={align}
           as="span"
           direction={direction}
           display="flex"
@@ -143,8 +143,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
+          // width="fill"
+          // wrap={wrap}
         >
           {IconComponent && (
             <Text as="span" flex="none" muted size={fontSize}>
@@ -161,7 +161,6 @@ export const Button = forwardRef(function Button(
               muted={muted}
               size={fontSize}
               textOverflow={textOverflow}
-              // weight={textWeight ?? buttonTheme.textWeight}
               weight={textWeight}
             >
               {text}
@@ -179,13 +178,15 @@ export const Button = forwardRef(function Button(
 
       {children && (
         <Box
+          // align={align}
           as="span"
-          direction={direction}
-          display="flex"
+          // direction={direction}
+          // display="flex"
           flex={1}
           gap={gap}
           gapX={gapX}
           gapY={gapY}
+          // justify={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -193,8 +194,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
+          // width="fill"
+          // wrap={wrap}
         >
           {children}
         </Box>