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

package/dist/css/index.d.cts

@@ -1,9 +1,9 @@
 import type {AvatarColor} from '@sanity/ui/theme'
 import type {AvatarSize} from '@sanity/ui/theme'
-import type {BoxShadow} from '@sanity/ui/theme'
 import type {ButtonMode} from '@sanity/ui/theme'
 import type {CardTone} from '@sanity/ui/theme'
 import type {ColorScheme} from '@sanity/ui/theme'
+import {ColorTokens as ColorTokens_2} from '@sanity/ui/theme'
 import type {ColorVariant} from '@sanity/ui/theme'
 import type {ContainerScale} from '@sanity/ui/theme'
 import type {ContainerWidth} from '@sanity/ui/theme'
@@ -186,6 +186,9 @@ export declare const BREAKPOINTS: {
   6: number
 }
 
+/** @public */
+export declare function buildCSSTheme(options?: CSSThemeOptions): ThemeTokens
+
 /** @public */
 export declare function button(props: ButtonStyleProps): string | undefined
 
@@ -261,6 +264,98 @@ export declare interface ContainerStyleProps {
   width?: ResponsiveProp<ContainerWidth>
 }
 
+/** @public */
+export declare type CoreThemeTokens = {
+  avatar: {
+    focusRing: {
+      offset: string
+      width: string
+    }
+    scale: Record<
+      AvatarSize,
+      {
+        distance: string
+        size: string
+      }
+    >
+  }
+  button: {
+    border: {
+      width: string
+    }
+    focusRing: {
+      offset: string
+      width: string
+    }
+  }
+  card: {
+    shadow: {
+      outline: string
+    }
+  }
+  color: ColorTokens
+  container: Record<ContainerScale, string>
+  font: {
+    code: FontTokens<FontCodeSize>
+    heading: FontTokens<FontHeadingSize>
+    label: FontTokens<FontLabelSize>
+    text: FontTokens<FontTextSize>
+  }
+  input: {
+    border: {
+      width: string
+    }
+    checkbox: {
+      size: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    radio: {
+      size: string
+      markSize: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    select: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    switch: {
+      focusRing: {
+        width: string
+        offset: string
+      }
+      height: string
+      width: string
+      padding: string
+      transitionDurationMs: string
+      transitionTimingFunction: string
+    }
+    text: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+  }
+  radius: Record<Radius, string>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+  >
+  space: Record<Space, string>
+}
+
 /** @public */
 export declare type CSSCardColorTokens = {
   avatar: Record<
@@ -332,6 +427,12 @@ export declare type CSSCardColorTokens = {
 /** @public */
 export declare type CSSLayer = 'theme' | 'props' | 'primitives' | 'components'
 
+/** @public */
+export declare type CSSThemeOptions = {
+  color?: ColorTokens_2
+  palette?: ColorPaletteTokens
+}
+
 /** @public */
 export declare type CSSVarFunction = `var(--${string})`
 
@@ -822,7 +923,7 @@ export declare interface PaddingStyleProps {
   paddingY?: ResponsiveProp<Padding>
 }
 
-/** @public */
+/** @internal */
 export declare const paletteVars: ColorPaletteVars
 
 /** @public */
@@ -853,9 +954,6 @@ export declare interface PositionStyleProps {
   position?: ResponsiveProp<Position>
 }
 
-/** @internal */
-export declare function px(value: number): string
-
 /** @public */
 export declare function radio(props: {className?: string}): string | undefined
 
@@ -873,9 +971,6 @@ export declare interface RadiusStyleProps {
   radius?: ResponsiveProp<Radius | 'full'>
 }
 
-/** @internal */
-export declare function rem(value: number): string
-
 /** @public */
 export declare type ResponsiveProp<T> = T | Partial<Record<Breakpoint, T>>
 
@@ -895,13 +990,6 @@ export declare interface RootStyleProps extends HeightStyleProps {
   tone?: CardTone
 }
 
-/** @public */
-export declare type RootThemeTokens = ThemeTokens & {
-  color: {
-    palette: ColorPaletteTokens
-  }
-}
-
 /** @public */
 export declare type SchemeColorTokens = Record<CardTone, CSSCardColorTokens>
 
@@ -1207,105 +1295,20 @@ export declare type ThemeContract<T extends NullableTokens> = ReturnType<
 >
 
 /** @public */
-export declare type ThemeTokens = {
-  avatar: {
-    focusRing: {
-      offset: string
-      width: string
-    }
-    scale: Record<
-      AvatarSize,
-      {
-        distance: string
-        size: string
-      }
-    >
-  }
-  button: {
-    border: {
-      width: string
-    }
-    focusRing: {
-      offset: string
-      width: string
-    }
-  }
-  card: {
-    shadow: {
-      outline: string
-    }
-  }
-  color: ColorTokens
-  container: Record<ContainerScale, string>
-  font: {
-    code: FontTokens<FontCodeSize>
-    heading: FontTokens<FontHeadingSize>
-    label: FontTokens<FontLabelSize>
-    text: FontTokens<FontTextSize>
-  }
-  input: {
-    border: {
-      width: string
-    }
-    checkbox: {
-      size: string
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
-    radio: {
-      size: string
-      markSize: string
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
-    select: {
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
-    switch: {
-      focusRing: {
-        width: string
-        offset: string
-      }
-      height: string
-      width: string
-      padding: string
-      transitionDurationMs: string
-      transitionTimingFunction: string
-    }
-    text: {
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
+export declare type ThemeTokens = CoreThemeTokens & {
+  color: {
+    palette: ColorPaletteTokens
   }
-  radius: Record<Radius, string>
-  shadow: Record<
-    Shadow,
-    {
-      umbra: string
-      penumbra: string
-      ambient: string
-    }
-  >
-  space: Record<Space, string>
 }
 
 /** @public */
-export declare type ThemeVars = ThemeContract<RootThemeTokens & ScopedTokens>
+export declare type ThemeVars = ThemeContract<ThemeTokens & ScopedTokens>
 
 /**
  * Variables to be defined in a theme.
  *
- * @public */
-export declare const themeVars: ThemeContract<RootThemeTokens>
+ * @internal */
+export declare const themeVars: ThemeContract<ThemeTokens>
 
 /** @public */
 export declare function toast(): string
@@ -1313,9 +1316,6 @@ export declare function toast(): string
 /** @public */
 export declare function toastLayer(): string
 
-/** @internal */
-export declare function toBoxShadow(value: BoxShadow | undefined): string
-
 /** @public */
 export declare function tooltip(props: TooltipStyleProps): string | undefined
 

package/dist/css/index.d.ts

@@ -1,9 +1,9 @@
 import type {AvatarColor} from '@sanity/ui/theme'
 import type {AvatarSize} from '@sanity/ui/theme'
-import type {BoxShadow} from '@sanity/ui/theme'
 import type {ButtonMode} from '@sanity/ui/theme'
 import type {CardTone} from '@sanity/ui/theme'
 import type {ColorScheme} from '@sanity/ui/theme'
+import {ColorTokens as ColorTokens_2} from '@sanity/ui/theme'
 import type {ColorVariant} from '@sanity/ui/theme'
 import type {ContainerScale} from '@sanity/ui/theme'
 import type {ContainerWidth} from '@sanity/ui/theme'
@@ -186,6 +186,9 @@ export declare const BREAKPOINTS: {
   6: number
 }
 
+/** @public */
+export declare function buildCSSTheme(options?: CSSThemeOptions): ThemeTokens
+
 /** @public */
 export declare function button(props: ButtonStyleProps): string | undefined
 
@@ -261,6 +264,98 @@ export declare interface ContainerStyleProps {
   width?: ResponsiveProp<ContainerWidth>
 }
 
+/** @public */
+export declare type CoreThemeTokens = {
+  avatar: {
+    focusRing: {
+      offset: string
+      width: string
+    }
+    scale: Record<
+      AvatarSize,
+      {
+        distance: string
+        size: string
+      }
+    >
+  }
+  button: {
+    border: {
+      width: string
+    }
+    focusRing: {
+      offset: string
+      width: string
+    }
+  }
+  card: {
+    shadow: {
+      outline: string
+    }
+  }
+  color: ColorTokens
+  container: Record<ContainerScale, string>
+  font: {
+    code: FontTokens<FontCodeSize>
+    heading: FontTokens<FontHeadingSize>
+    label: FontTokens<FontLabelSize>
+    text: FontTokens<FontTextSize>
+  }
+  input: {
+    border: {
+      width: string
+    }
+    checkbox: {
+      size: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    radio: {
+      size: string
+      markSize: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    select: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    switch: {
+      focusRing: {
+        width: string
+        offset: string
+      }
+      height: string
+      width: string
+      padding: string
+      transitionDurationMs: string
+      transitionTimingFunction: string
+    }
+    text: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+  }
+  radius: Record<Radius, string>
+  shadow: Record<
+    Shadow,
+    {
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+  >
+  space: Record<Space, string>
+}
+
 /** @public */
 export declare type CSSCardColorTokens = {
   avatar: Record<
@@ -332,6 +427,12 @@ export declare type CSSCardColorTokens = {
 /** @public */
 export declare type CSSLayer = 'theme' | 'props' | 'primitives' | 'components'
 
+/** @public */
+export declare type CSSThemeOptions = {
+  color?: ColorTokens_2
+  palette?: ColorPaletteTokens
+}
+
 /** @public */
 export declare type CSSVarFunction = `var(--${string})`
 
@@ -822,7 +923,7 @@ export declare interface PaddingStyleProps {
   paddingY?: ResponsiveProp<Padding>
 }
 
-/** @public */
+/** @internal */
 export declare const paletteVars: ColorPaletteVars
 
 /** @public */
@@ -853,9 +954,6 @@ export declare interface PositionStyleProps {
   position?: ResponsiveProp<Position>
 }
 
-/** @internal */
-export declare function px(value: number): string
-
 /** @public */
 export declare function radio(props: {className?: string}): string | undefined
 
@@ -873,9 +971,6 @@ export declare interface RadiusStyleProps {
   radius?: ResponsiveProp<Radius | 'full'>
 }
 
-/** @internal */
-export declare function rem(value: number): string
-
 /** @public */
 export declare type ResponsiveProp<T> = T | Partial<Record<Breakpoint, T>>
 
@@ -895,13 +990,6 @@ export declare interface RootStyleProps extends HeightStyleProps {
   tone?: CardTone
 }
 
-/** @public */
-export declare type RootThemeTokens = ThemeTokens & {
-  color: {
-    palette: ColorPaletteTokens
-  }
-}
-
 /** @public */
 export declare type SchemeColorTokens = Record<CardTone, CSSCardColorTokens>
 
@@ -1207,105 +1295,20 @@ export declare type ThemeContract<T extends NullableTokens> = ReturnType<
 >
 
 /** @public */
-export declare type ThemeTokens = {
-  avatar: {
-    focusRing: {
-      offset: string
-      width: string
-    }
-    scale: Record<
-      AvatarSize,
-      {
-        distance: string
-        size: string
-      }
-    >
-  }
-  button: {
-    border: {
-      width: string
-    }
-    focusRing: {
-      offset: string
-      width: string
-    }
-  }
-  card: {
-    shadow: {
-      outline: string
-    }
-  }
-  color: ColorTokens
-  container: Record<ContainerScale, string>
-  font: {
-    code: FontTokens<FontCodeSize>
-    heading: FontTokens<FontHeadingSize>
-    label: FontTokens<FontLabelSize>
-    text: FontTokens<FontTextSize>
-  }
-  input: {
-    border: {
-      width: string
-    }
-    checkbox: {
-      size: string
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
-    radio: {
-      size: string
-      markSize: string
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
-    select: {
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
-    switch: {
-      focusRing: {
-        width: string
-        offset: string
-      }
-      height: string
-      width: string
-      padding: string
-      transitionDurationMs: string
-      transitionTimingFunction: string
-    }
-    text: {
-      focusRing: {
-        offset: string
-        width: string
-      }
-    }
+export declare type ThemeTokens = CoreThemeTokens & {
+  color: {
+    palette: ColorPaletteTokens
   }
-  radius: Record<Radius, string>
-  shadow: Record<
-    Shadow,
-    {
-      umbra: string
-      penumbra: string
-      ambient: string
-    }
-  >
-  space: Record<Space, string>
 }
 
 /** @public */
-export declare type ThemeVars = ThemeContract<RootThemeTokens & ScopedTokens>
+export declare type ThemeVars = ThemeContract<ThemeTokens & ScopedTokens>
 
 /**
  * Variables to be defined in a theme.
  *
- * @public */
-export declare const themeVars: ThemeContract<RootThemeTokens>
+ * @internal */
+export declare const themeVars: ThemeContract<ThemeTokens>
 
 /** @public */
 export declare function toast(): string
@@ -1313,9 +1316,6 @@ export declare function toast(): string
 /** @public */
 export declare function toastLayer(): string
 
-/** @internal */
-export declare function toBoxShadow(value: BoxShadow | undefined): string
-
 /** @public */
 export declare function tooltip(props: TooltipStyleProps): string | undefined