@sanity/ui 3.0.0-static.26 → 3.0.0-static.28

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

@@ -1,4 +1,4 @@
-import type {RadiusStyleProps} from '../../props'
+import type {RadiusStyleProps} from '../../props/radius'
 
 /** @public */
 export interface KBDStyleProps extends RadiusStyleProps {

package/src/css/primitives/label/label.css.ts

@@ -19,6 +19,7 @@ export const root = _style(layers.primitives, {
   },
 
   color: vars.color.fg,
+  textTransform: 'uppercase',
 })
 
 globalStyle(`${root} a`, {

package/src/css/primitives/label/label.ts

@@ -1,6 +1,9 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {display, flex, font, textAlign} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {font} from '../../props/font'
+import {textAlign} from '../../props/textAlign'
 import {muted, root, sizes} from './label.css'
 import type {LabelStyleProps} from './types'
 

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

@@ -1,6 +1,8 @@
 import type {FontLabelSize} from '@sanity/ui/theme'
 
-import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
+import type {TextAlignStyleProps} from '../../props/textAlign'
 import type {ResponsiveProp} from '../../types'
 
 /**

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

@@ -55,7 +55,7 @@ export const presentation = _style(layers.primitives, {
       },
     },
 
-    [`${input}[data-indeterminate] &`]: {
+    [`${input}:indeterminate + &`]: {
       vars: {
         [vars.input.switch.thumb.offset]:
           `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`,

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

@@ -1,6 +1,10 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {display, flex, font, textAlign} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {font} from '../../props/font'
+import {maxWidth} from '../../props/maxWidth'
+import {textAlign} from '../../props/textAlign'
 import {muted, root, sizes} from './text.css'
 import type {TextStyleProps} from './types'
 
@@ -14,6 +18,7 @@ export function text(props: TextStyleProps): string | undefined {
     display({display: 'block'}),
     flex(props),
     font(props),
+    maxWidth(props),
     textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,11 +1,14 @@
-import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
+import type {MaxWidthStyleProps} from '../../props/maxWidth'
+import type {TextAlignStyleProps} from '../../props/textAlign'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type TextSize = number
 
 /** @public */
-export interface TextStyleProps extends FlexStyleProps, FontStyleProps {
+export interface TextStyleProps extends FlexStyleProps, FontStyleProps, MaxWidthStyleProps {
   /**
    * @deprecated Will be removed in next major version
    */

package/src/css/props/width/types.ts

@@ -3,7 +3,7 @@ import type {ContainerWidth} from '@sanity/ui/theme'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export type Width = ContainerWidth | 'auto' | 'fill' | 'stretch'
+export type Width = ContainerWidth | 'auto' | 'fill' | 'stretch' | 'min'
 
 /** @public */
 export interface WidthStyleProps {

package/src/css/props/width/width.css.ts

@@ -14,6 +14,9 @@ export const options: ResponsiveRuleOptions<Width> = {
   fill: _responsiveStyle(layers.props, {
     width: '100%',
   }),
+  min: _responsiveStyle(layers.props, {
+    width: 'min-content',
+  }),
   stretch: _responsiveStyle(layers.props, {
     width: 'stretch',
   }),

package/src/theme/v2/build/buildTheme.test.ts

@@ -59,31 +59,31 @@ test('build theme', () => {
       },
     },
   }).toEqual({
-    dark: {
-      bg: '#000000',
+    light: {
+      bg: 'rgba(255,255,255,0)',
+      fg: '#000000',
       default: {
         button: {
           ghost: {
             enabled: {
-              border: '#252837',
+              border: 'rgba(246,246,248,0)',
             },
           },
         },
       },
-      fg: '#ffffff',
     },
-    light: {
-      bg: '#ffffff',
+    dark: {
+      bg: 'rgba(0,0,0,0)',
+      fg: '#ffffff',
       default: {
         button: {
           ghost: {
             enabled: {
-              border: '#e3e4e8',
+              border: 'rgba(19,20,27,0)',
             },
           },
         },
       },
-      fg: '#000000',
     },
   })
 })

package/src/theme/v2/build/buildTheme.ts

@@ -1,12 +1,37 @@
-import {type RootTheme} from '../../types'
-import {buildTheme_v3} from '../../v3'
+import type {RootTheme} from '../../types'
 import {v2_v0} from '../../versioning/v2_v0'
-import {v3_v2} from '../../versioning/v3_v2'
-import {type ThemeConfig} from '../config'
+import type {ThemeConfig} from '../config'
+import {defaultThemeConfig} from '../defaults/config'
+import {defaultThemeFonts} from '../defaults/fonts'
+import type {RootTheme_v2} from '../theme'
+import {buildColorTheme} from './buildColorTheme'
+import {renderThemeColorSchemes} from './renderColorTheme'
 
 /** @internal */
-export function buildTheme(_config?: ThemeConfig): RootTheme {
-  const v3 = buildTheme_v3({v2: _config})
+export function buildTheme(config?: ThemeConfig): RootTheme {
+  const colorTheme = buildColorTheme(config)
 
-  return v2_v0(v3_v2(v3), v3)
+  const v2: RootTheme_v2 = {
+    _version: 2,
+    avatar: config?.avatar ?? defaultThemeConfig.avatar,
+    button: config?.button ?? defaultThemeConfig.button,
+    card: config?.card ?? defaultThemeConfig.card,
+    // How colors are generated:
+    // 1. Merge custom tokens with default tokens
+    // 2. Generate tree of color keys (gray/500, black, white, etc.)
+    // 3. Apply mixing and render to hex values
+    // render(build(mergeWithDefaults()))
+    color: renderThemeColorSchemes(colorTheme, config),
+    container: config?.container ?? defaultThemeConfig.container,
+    font: config?.font ?? defaultThemeFonts,
+    input: config?.input ?? defaultThemeConfig.input,
+    layer: config?.layer ?? defaultThemeConfig.layer,
+    media: config?.media ?? defaultThemeConfig.media,
+    radius: config?.radius ?? defaultThemeConfig.radius,
+    shadow: config?.shadow ?? defaultThemeConfig.shadow,
+    space: config?.space ?? defaultThemeConfig.space,
+    style: config?.style ?? defaultThemeConfig.style,
+  }
+
+  return v2_v0(v2)
 }

package/src/theme/v3/defaultFonts.ts

@@ -40,7 +40,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 7,
         descenderHeight: 7,
-        fontSize: 19,
+        fontSize: 18.75,
         iconSize: 29,
         lineHeight: 27,
         letterSpacing: 0,
@@ -49,7 +49,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 8,
         descenderHeight: 8,
-        fontSize: 22,
+        fontSize: 21.5,
         iconSize: 33,
         lineHeight: 31,
         letterSpacing: 0,
@@ -203,7 +203,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 4,
         descenderHeight: 4,
-        fontSize: 10,
+        fontSize: 9.75,
         iconSize: 17,
         lineHeight: 15,
         letterSpacing: 0,
@@ -212,7 +212,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 5,
         descenderHeight: 5,
-        fontSize: 13,
+        fontSize: 12.5,
         iconSize: 21,
         lineHeight: 19,
         letterSpacing: 0,
@@ -221,7 +221,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 6,
         descenderHeight: 6,
-        fontSize: 15,
+        fontSize: 15.25,
         iconSize: 25,
         lineHeight: 23,
         letterSpacing: 0,
@@ -239,7 +239,7 @@ export const defaultThemeFonts: ThemeFonts_v3 = {
       {
         ascenderHeight: 8,
         descenderHeight: 8,
-        fontSize: 21,
+        fontSize: 20.75,
         iconSize: 33,
         lineHeight: 31,
         letterSpacing: 0,

package/src/theme/v3/defaultTokens.ts

@@ -166,7 +166,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
           '*': {
             bg: {
               0: ['white', '950'],
-              4: ['200', '800'],
+              4: ['300 50%', '700'],
             },
             border: {
               0: ['200 50%', '800 50%'],

package/bin/sanity-ui.cjs

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-
-require('dotenv-flow').config()
-
-require('../dist/cli.cjs')