@sanity/ui 3.0.0-static.33 → 3.0.0-static.35

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

@@ -3,17 +3,7 @@ import type {ResponsiveProp} from '../../types'
 /** @public */
 export type GridRow = 'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-/**
- * @public
- * @deprecated Use `GridRow` instead
- */
-export type GridItemRow = 'auto' | 'full' | number
-
 /** @public */
 export interface GridRowStyleProps {
-  /**
-   * @deprecated Use `gridRow` instead
-   */
-  row?: ResponsiveProp<GridItemRow>
   gridRow?: ResponsiveProp<GridRow>
 }

package/src/css/props/gridRowEnd/gridRowEnd.ts

@@ -1,8 +1,8 @@
 import {_responsiveClassName} from '../../_responsiveClassName'
 import {options} from './gridRowEnd.css'
-import type {GridRowEnd, GridRowEndStyleProps} from './types'
+import type {GridRowEndStyleProps} from './types'
 
 /** @public */
-export function gridRowEnd(props: GridRowEndStyleProps) {
-  return _responsiveClassName(options, props.gridRowEnd ?? (props.rowEnd as GridRowEnd))
+export function gridRowEnd(props: GridRowEndStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridRowEnd)
 }

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

@@ -3,17 +3,7 @@ import type {ResponsiveProp} from '../../types'
 /** @public */
 export type GridRowEnd = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-/**
- * @public
- * @deprecated Use `GridRowEnd` instead
- */
-export type GridItemRowEnd = 'auto' | number
-
 /** @public */
 export interface GridRowEndStyleProps {
-  /**
-   * @deprecated Use `gridRowEnd` instead
-   */
-  rowEnd?: ResponsiveProp<GridItemRowEnd>
   gridRowEnd?: ResponsiveProp<GridRowEnd>
 }

package/src/css/props/gridRowStart/gridRowStart.ts

@@ -1,8 +1,8 @@
 import {_responsiveClassName} from '../../_responsiveClassName'
 import {options} from './gridRowStart.css'
-import type {GridRowStart, GridRowStartStyleProps} from './types'
+import type {GridRowStartStyleProps} from './types'
 
 /** @public */
-export function gridRowStart(props: GridRowStartStyleProps) {
-  return _responsiveClassName(options, props.gridRowStart ?? (props.rowStart as GridRowStart))
+export function gridRowStart(props: GridRowStartStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridRowStart)
 }

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

@@ -3,17 +3,7 @@ import type {ResponsiveProp} from '../../types'
 /** @public */
 export type GridRowStart = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-/**
- * @public
- * @deprecated Use `GridRowStart` instead
- */
-export type GridItemRowStart = 'auto' | number
-
 /** @public */
 export interface GridRowStartStyleProps {
-  /**
-   * @deprecated Use `gridRowStart` instead
-   */
-  rowStart?: ResponsiveProp<GridItemRowStart>
   gridRowStart?: ResponsiveProp<GridRowStart>
 }

package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts

@@ -3,6 +3,6 @@ import {options} from './gridTemplateColumns.css'
 import type {GridTemplateColumnsStyleProps} from './types'
 
 /** @public */
-export function gridTemplateColumns(props: GridTemplateColumnsStyleProps) {
-  return _responsiveClassName(options, props.gridTemplateColumns ?? props.columns)
+export function gridTemplateColumns(props: GridTemplateColumnsStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridTemplateColumns)
 }

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

@@ -3,17 +3,7 @@ import type {ResponsiveProp} from '../../types'
 /** @public */
 export type GridTemplateColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-/**
- * @public
- * @deprecated Use `GridTemplateColumns` instead
- */
-export type Columns = GridTemplateColumns
-
 /** @public */
 export interface GridTemplateColumnsStyleProps {
-  /**
-   * @deprecated Use `gridTemplateColumns` instead
-   */
-  columns?: ResponsiveProp<Columns>
   gridTemplateColumns?: ResponsiveProp<GridTemplateColumns>
 }

package/src/css/props/gridTemplateRows/gridTemplateRows.ts

@@ -3,6 +3,6 @@ import {options} from './gridTemplateRows.css'
 import type {GridTemplateRowsStyleProps} from './types'
 
 /** @public */
-export function gridTemplateRows(props: GridTemplateRowsStyleProps) {
-  return _responsiveClassName(options, props.gridTemplateRows ?? props.rows)
+export function gridTemplateRows(props: GridTemplateRowsStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridTemplateRows)
 }

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

@@ -3,17 +3,7 @@ import type {ResponsiveProp} from '../../types'
 /** @public */
 export type GridTemplateRows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-/**
- * @public
- * @deprecated Use `GridTemplateRows` instead
- */
-export type Rows = GridTemplateRows
-
 /** @public */
 export interface GridTemplateRowsStyleProps {
-  /**
-   * @deprecated Use `gridTemplateRows` instead
-   */
-  rows?: ResponsiveProp<Rows>
   gridTemplateRows?: ResponsiveProp<GridTemplateRows>
 }

package/src/css/props/height/height.ts

@@ -3,6 +3,6 @@ import {options} from './height.css'
 import type {HeightStyleProps} from './types'
 
 /** @public */
-export function height(props: HeightStyleProps) {
+export function height(props: HeightStyleProps): string | undefined {
   return _responsiveClassName(options, props.height)
 }

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

@@ -1,11 +1,5 @@
 import type {ResponsiveProp} from '../../types'
 
-/**
- * @public
- * @deprecated Use `Height` instead
- */
-export type BoxHeight = 'stretch' | 'fill'
-
 /** @public */
 export type Height = 'fill' | 'auto' | 'min' | 'max' | 'fit' | 'stretch'
 

package/src/css/props/inset/inset.ts

@@ -10,7 +10,7 @@ import {
 import type {InsetStyleProps} from './types'
 
 /** @public */
-export function inset(props: InsetStyleProps) {
+export function inset(props: InsetStyleProps): string | undefined {
   return _composeClassNames(
     _responsiveClassName(insetOptions, props.inset),
     _responsiveClassName(insetTopOptions, props.insetTop),

package/src/css/props/justifyContent/justifyContent.ts

@@ -3,6 +3,6 @@ import {options} from './justifyContent.css'
 import type {JustifyContentStyleProps} from './types'
 
 /** @public */
-export function justifyContent(props: JustifyContentStyleProps) {
+export function justifyContent(props: JustifyContentStyleProps): string | undefined {
   return _responsiveClassName(options, props.justifyContent)
 }

package/src/css/props/margin/margin.ts

@@ -12,7 +12,7 @@ import {
 import type {MarginStyleProps} from './types'
 
 /** @public */
-export function margin(props: MarginStyleProps) {
+export function margin(props: MarginStyleProps): string | undefined {
   return _composeClassNames(
     _responsiveClassName(marginOptions, props.margin),
     _responsiveClassName(marginXOptions, props.marginX),

package/src/css/props/maxWidth/maxWidth.ts

@@ -3,6 +3,6 @@ import {options} from './maxWidth.css'
 import type {MaxWidthStyleProps} from './types'
 
 /** @public */
-export function maxWidth(props: MaxWidthStyleProps) {
+export function maxWidth(props: MaxWidthStyleProps): string | undefined {
   return _responsiveClassName(options, props.maxWidth)
 }

package/src/css/props/minHeight/minHeight.ts

@@ -3,6 +3,6 @@ import {options} from './minHeight.css'
 import type {MinHeightStyleProps} from './types'
 
 /** @public */
-export function minHeight(props: MinHeightStyleProps) {
+export function minHeight(props: MinHeightStyleProps): string | undefined {
   return _responsiveClassName(options, props.minHeight)
 }

package/src/css/props/minWidth/minWidth.ts

@@ -3,6 +3,6 @@ import {options} from './minWidth.css'
 import type {MinWidthStyleProps} from './types'
 
 /** @public */
-export function minWidth(props: MinWidthStyleProps) {
+export function minWidth(props: MinWidthStyleProps): string | undefined {
   return _responsiveClassName(options, props.minWidth)
 }

package/src/css/props/outline/outline.ts

@@ -3,6 +3,6 @@ import {options} from './outline.css'
 import type {OutlineStyleProps} from './types'
 
 /** @public */
-export function outline(props: OutlineStyleProps) {
+export function outline(props: OutlineStyleProps): string | undefined {
   return _responsiveClassName(options, props.outline)
 }

package/src/css/props/overflow/overflow.ts

@@ -3,6 +3,6 @@ import {options} from './overflow.css'
 import type {OverflowStyleProps} from './types'
 
 /** @public */
-export function overflow(props: OverflowStyleProps) {
+export function overflow(props: OverflowStyleProps): string | undefined {
   return _responsiveClassName(options, props.overflow)
 }

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

@@ -3,12 +3,6 @@ import type {ResponsiveProp} from '../../types'
 /** @public */
 export type Overflow = 'visible' | 'hidden' | 'auto'
 
-/**
- * @public
- * @deprecated Use `Overflow` instead.
- */
-export type BoxOverflow = 'visible' | 'hidden' | 'auto'
-
 /** @public */
 export interface OverflowStyleProps {
   overflow?: ResponsiveProp<Overflow>

package/src/css/props/padding/padding.ts

@@ -12,7 +12,7 @@ import {
 import type {PaddingStyleProps} from './types'
 
 /** @public */
-export function padding(props: PaddingStyleProps) {
+export function padding(props: PaddingStyleProps): string | undefined {
   return _composeClassNames(
     _responsiveClassName(paddingOptions, props.padding),
     _responsiveClassName(paddingXOptions, props.paddingX),

package/src/css/props/pointerEvents/pointerEvents.ts

@@ -3,6 +3,6 @@ import {options} from './pointerEvents.css'
 import type {PointerEventsStyleProps} from './types'
 
 /** @public */
-export function pointerEvents(props: PointerEventsStyleProps) {
+export function pointerEvents(props: PointerEventsStyleProps): string | undefined {
   return _responsiveClassName(options, props.pointerEvents)
 }

package/src/css/props/position/position.ts

@@ -3,6 +3,6 @@ import {options} from './position.css'
 import type {PositionStyleProps} from './types'
 
 /** @public */
-export function position(props: PositionStyleProps) {
+export function position(props: PositionStyleProps): string | undefined {
   return _responsiveClassName(options, props.position)
 }

package/src/css/props/radius/radius.ts

@@ -3,6 +3,6 @@ import {options} from './radius.css'
 import type {RadiusStyleProps} from './types'
 
 /** @public */
-export function radius(props: RadiusStyleProps) {
+export function radius(props: RadiusStyleProps): string | undefined {
   return _responsiveClassName(options, props.radius)
 }

package/src/css/props/shadow/shadow.ts

@@ -3,6 +3,6 @@ import {options} from './shadow.css'
 import type {ShadowStyleProps} from './types'
 
 /** @public */
-export function shadow(props: ShadowStyleProps) {
+export function shadow(props: ShadowStyleProps): string | undefined {
   return _responsiveClassName(options, props.shadow)
 }

package/src/css/props/textAlign/textAlign.ts

@@ -3,6 +3,6 @@ import {options} from './textAlign.css'
 import type {TextAlignStyleProps} from './types'
 
 /** @public */
-export function textAlign(props: TextAlignStyleProps) {
+export function textAlign(props: TextAlignStyleProps): string | undefined {
   return _responsiveClassName(options, props.textAlign)
 }

package/src/css/props/textOverflow/textOverflow.ts

@@ -3,6 +3,6 @@ import {options} from './textOverflow.css'
 import type {TextOverflowStyleProps} from './types'
 
 /** @public */
-export function textOverflow(props: TextOverflowStyleProps) {
+export function textOverflow(props: TextOverflowStyleProps): string | undefined {
   return _responsiveClassName(options, props.textOverflow)
 }

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

@@ -3,6 +3,6 @@ import type {WidthStyleProps} from './types'
 import {options} from './width.css'
 
 /** @public */
-export function width(props: WidthStyleProps) {
+export function width(props: WidthStyleProps): string | undefined {
   return _responsiveClassName(options, props.width)
 }

package/src/css/types.ts

@@ -1,7 +1,11 @@
 import type {
   AvatarColor,
   AvatarSize,
+  CardTone,
+  ColorScheme,
+  ColorVariant,
   ContainerScale,
+  ElementTone,
   FontCodeSize,
   FontHeadingSize,
   FontLabelSize,
@@ -10,12 +14,9 @@ import type {
   Radius,
   Shadow,
   Space,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-  ThemeColorStateToneKey,
-  ThemeColorVariantKey,
   Tint,
 } from '@sanity/ui/theme'
+import type {createThemeContract} from '@vanilla-extract/css'
 
 import type {BREAKPOINTS} from './constants'
 
@@ -32,13 +33,29 @@ export type ResponsiveRules = Record<Breakpoint, string>
 export type ResponsiveRuleOptions<K extends string | number> = Record<K, ResponsiveRules>
 
 /** @public */
-export type CSSThemeColorPalette = {
-  black: string
-  white: string
-} & Record<Hue, Record<Tint, string>>
+export type CSSVarFunction = `var(--${string})`
+
+/** @public */
+export type ElementColorTokens = {
+  bg: {
+    0: string
+    4: string
+  }
+  border: {
+    0: string
+    4: string
+  }
+  fg: {
+    0: string
+    4: string
+  }
+}
 
 /** @public */
-export type CSSThemeColorCard = {
+export type VariantColorTokens = Record<ElementTone, ElementColorTokens>
+
+/** @public */
+export type CSSCardColorTokens = {
   avatar: Record<AvatarColor, {bg: string; fg: string}>
   backdrop: string
   code: {
@@ -97,37 +114,22 @@ export type CSSThemeColorCard = {
     from: string
     to: string
   }
-} & Record<
-  ThemeColorVariantKey,
-  Record<
-    ThemeColorStateToneKey,
-    {
-      bg: {
-        0: string
-        4: string
-      }
-      border: {
-        0: string
-        4: string
-      }
-      fg: {
-        0: string
-        4: string
-      }
-    }
-  >
->
+} & Record<ColorVariant, VariantColorTokens>
+
+/** @public */
+export type SchemeColorTokens = Record<CardTone, CSSCardColorTokens>
 
 /** @public */
-export type CSSThemeColorScheme = Record<ThemeColorCardToneKey, CSSThemeColorCard>
+export type ColorPaletteTokens = {
+  black: string
+  white: string
+} & Record<Hue, Record<Tint, string>>
 
 /** @public */
-export type CSSThemeColor = {
-  palette: CSSThemeColorPalette
-} & Record<ThemeColorSchemeKey, CSSThemeColorScheme>
+export type ColorTokens = Record<ColorScheme, SchemeColorTokens>
 
 /** @public */
-export type CSSThemeFont<FontScaleIndex extends number> = {
+export type FontTokens<FontScaleIndex extends number> = {
   family: string
   featureSettings: string
   weight: {
@@ -151,9 +153,8 @@ export type CSSThemeFont<FontScaleIndex extends number> = {
 }
 
 /** @public */
-export type CSSTheme = {
-  '@layer'?: string
-  'avatar': {
+export type ThemeTokens = {
+  avatar: {
     focusRing: {
       offset: string
       width: string
@@ -166,7 +167,7 @@ export type CSSTheme = {
       }
     >
   }
-  'button': {
+  button: {
     border: {
       width: string
     }
@@ -175,20 +176,20 @@ export type CSSTheme = {
       width: string
     }
   }
-  'card': {
+  card: {
     shadow: {
       outline: string
     }
   }
-  'color': CSSThemeColor
-  'container': Record<ContainerScale, string>
-  'font': {
-    code: CSSThemeFont<FontCodeSize>
-    heading: CSSThemeFont<FontHeadingSize>
-    label: CSSThemeFont<FontLabelSize>
-    text: CSSThemeFont<FontTextSize>
+  color: ColorTokens
+  container: Record<ContainerScale, string>
+  font: {
+    code: FontTokens<FontCodeSize>
+    heading: FontTokens<FontHeadingSize>
+    label: FontTokens<FontLabelSize>
+    text: FontTokens<FontTextSize>
   }
-  'input': {
+  input: {
     border: {
       width: string
     }
@@ -231,8 +232,8 @@ export type CSSTheme = {
       }
     }
   }
-  'radius': Record<Radius, string>
-  'shadow': Record<
+  radius: Record<Radius, string>
+  shadow: Record<
     Shadow,
     {
       umbra: string
@@ -240,10 +241,181 @@ export type CSSTheme = {
       ambient: string
     }
   >
-  'space': Record<Space, string>
+  space: Record<Space, string>
+}
+
+/** @public */
+export type RootThemeTokens = ThemeTokens & {
+  color: {palette: ColorPaletteTokens}
+}
+
+/** @public */
+export type ScopedTokens = {
+  arrow: {
+    size: string
+  }
+  avatar: {
+    distance: string
+    size: string
+  }
+  button: {
+    boxShadow: string
+  }
+  card: {
+    test: string
+  }
+  color: {
+    avatar: {
+      bg: string
+      fg: string
+    }
+    bg: string
+    border: string
+    fg: string
+    muted: {
+      bg: string
+      border: string
+      fg: string
+    }
+    input: {
+      checkbox: {
+        bg: string
+        border: string
+        fg: string
+      }
+      text: {
+        bg: string
+        border: string
+        fg: string
+        placeholder: string
+      }
+      radio: {
+        bg: string
+        border: string
+        fg: string
+      }
+      switch: {
+        bg: string
+        fg: string
+      }
+    }
+  } & CSSCardColorTokens &
+    Record<
+      ColorVariant,
+      Record<
+        ElementTone,
+        {
+          bg: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+          border: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+          fg: {
+            0: string
+            1: string
+            2: string
+            3: string
+            4: string
+          }
+        }
+      >
+    > &
+    Record<
+      CardTone,
+      CSSCardColorTokens &
+        Record<
+          ColorVariant,
+          Record<
+            ElementTone,
+            {
+              bg: {
+                0: string
+                4: string
+              }
+              border: {
+                0: string
+                4: string
+              }
+              fg: {
+                0: string
+                4: string
+              }
+            }
+          >
+        >
+    >
+
+  font: {
+    family: string
+    featureSettings: string
+    fontSize: string
+    lineHeight: string
+    letterSpacing: string
+    fontWeight: string
+
+    ascenderHeight: string
+    descenderHeight: string
+    iconSize: string
+    customIconSize: string
+    capHeight: string
+    iconOffset: string
+    customIconOffset: string
+
+    skeleton: {
+      ascenderHeight: string
+      descenderHeight: string
+      lineHeight: string
+    }
+
+    weight: {
+      regular: string
+      medium: string
+      semibold: string
+      bold: string
+    }
+  }
+
+  input: {
+    switch: {
+      thumb: {
+        offset: string
+        size: string
+      }
+    }
+    text: {
+      fontSize: string
+      lineHeight: string
+      letterSpacing: string
+      ascenderHeight: string
+      descenderHeight: string
+      padding: string
+      gap: string
+    }
+  }
 }
 
-/** @internal */
-export type _CSSThemeWithoutPalette = Omit<CSSTheme, '@layer' | 'color'> & {
-  color: Omit<CSSThemeColor, 'palette'>
+/** @public */
+export type NullableTokens = {
+  [key: string]: string | NullableTokens
 }
+
+/** @public */
+export type ThemeContract<T extends NullableTokens> = ReturnType<typeof createThemeContract<T>>
+
+/** @public */
+export type ColorPaletteVars = ThemeContract<ColorPaletteTokens>
+
+/** @public */
+export type ScopedVars = ThemeContract<ScopedTokens>
+
+/** @public */
+export type ThemeVars = ThemeContract<RootThemeTokens & ScopedTokens> // _CSSThemeWithoutPaletteTokens & ScopedVars