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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.3",
+  "version": "3.0.0-static.4",
   "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/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/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

@@ -100,38 +100,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.bg]: tinted.bg[1],
     [varNames.color.border]: tinted.border[1],
     [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.bg]: tinted.bg[2],
         [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]):active': {
-        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[3],
         [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.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[3],
         [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/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', '100'],
+              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/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,7 +113,6 @@ export const Button = forwardRef(function Button(
     >
       {Boolean(loading) && (
         <Box
-          align={align}
           as="span"
           className={buttonLoadingBox()}
           display="flex"
@@ -129,6 +127,7 @@ export const Button = forwardRef(function Button(
       {(IconComponent || text || IconRightComponent) && (
         <Box
           as="span"
+          align={align}
           direction={direction}
           display="flex"
           flex={1}
@@ -161,7 +160,6 @@ export const Button = forwardRef(function Button(
               muted={muted}
               size={fontSize}
               textOverflow={textOverflow}
-              // weight={textWeight ?? buttonTheme.textWeight}
               weight={textWeight}
             >
               {text}
@@ -179,6 +177,7 @@ export const Button = forwardRef(function Button(
 
       {children && (
         <Box
+          align={align}
           as="span"
           direction={direction}
           display="flex"
@@ -186,6 +185,7 @@ export const Button = forwardRef(function Button(
           gap={gap}
           gapX={gapX}
           gapY={gapY}
+          justify={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}

package/src/ui/primitives/card/card.tsx

@@ -50,7 +50,7 @@ export const Card = forwardRef(function Card(
     selected,
     shadow,
     style,
-    tone: toneProp = 'inherit',
+    tone: toneProp = 'default',
     ...restProps
   } = props
 
@@ -76,14 +76,17 @@ export const Card = forwardRef(function Card(
         card({
           scheme: scheme === context.scheme ? undefined : scheme,
           shadow,
-          tone: tone === context.tone ? undefined : tone,
+          tone,
         }),
         selectable && _selectable({radius}),
       )}
+      data-context-tone={context.tone}
+      data-context-scheme={context.scheme}
       data-checkered={checkered ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
       data-selected={selected ? '' : undefined}
+      data-tone={tone}
       radius={radius}
       ref={ref}
       style={style}

package/src/ui/primitives/heading/heading.tsx

@@ -31,7 +31,7 @@ export const Heading = forwardRef(function Heading(
     className,
     flex,
     muted = false,
-    size = 1,
+    size = 2,
     textOverflow: textOverflowProp,
     weight,
     ...restProps

package/src/ui/primitives/select/select.tsx

@@ -38,10 +38,10 @@ export const Select = forwardRef(function Select(
     children,
     customValidity,
     disabled,
-    fontSize = 1,
+    fontSize = 2,
     gap,
-    padding = 2,
-    radius = 2,
+    padding = 3,
+    radius = 1,
     readOnly,
     space = 2,
     ...restProps

package/src/ui/primitives/text/text.tsx

@@ -33,7 +33,7 @@ export const Text = forwardRef(function Text(
     className,
     flex,
     muted = false,
-    size = 1,
+    size = 2,
     textOverflow: textOverflowProp,
     weight,
     ...restProps