@sanity/ui 3.0.0-static.36 → 3.0.0-static.38

package/src/css/theme/{buildCSSThemeTokens.ts → buildCSSTheme.ts}

@@ -10,6 +10,7 @@ import {
   type CardTone,
   COLOR_VARIANTS,
   type ColorScheme,
+  type ColorTokens,
   type ColorValue,
   type ColorVariant,
   CONTAINER_SCALE,
@@ -21,16 +22,17 @@ import {
   FONT_TEXT_SIZE,
   type Hue,
   HUES,
+  type PartialTokens,
   RADIUS,
   SHADOW,
   SPACE,
   type Theme,
-  type ThemeOptions,
   TINTS,
 } from '@sanity/ui/theme'
 
 import {_fromEntries} from '../_fromEntries'
 import type {
+  ColorPaletteTokens,
   CSSCardColorTokens,
   ElementColorTokens,
   SchemeColorTokens,
@@ -40,7 +42,10 @@ import type {
 import {paletteVars} from '../vars.css'
 
 /** @public */
-export function buildCSSThemeTokens(options?: ThemeOptions): ThemeTokens {
+export type CSSThemeOptions = {color?: PartialTokens<ColorTokens>; palette?: ColorPaletteTokens}
+
+/** @public */
+export function buildCSSTheme(options?: CSSThemeOptions): ThemeTokens {
   const theme = buildTheme(options)
 
   return {
@@ -79,14 +84,13 @@ export function buildCSSThemeTokens(options?: ThemeOptions): ThemeTokens {
       ..._fromEntries(CONTAINER_SCALE.map((s) => [s, rem(theme.container[s])])),
     },
     color: {
-      palette: {
+      palette: options?.palette ?? {
         black: black.hex,
         white: white.hex,
         ..._fromEntries(
           HUES.map((h) => [h, {..._fromEntries(TINTS.map((t) => [t, hues[h][t].hex]))}]),
         ),
       },
-
       light: renderColorScheme({theme, scheme: 'light'}),
       dark: renderColorScheme({theme, scheme: 'dark'}),
     },

package/src/css/theme/defaultTheme.css.ts

@@ -2,7 +2,7 @@ import {createTheme, globalFontFace} from '@vanilla-extract/css'
 
 import {layers} from '../layers.css'
 import {themeVars} from '../vars.css'
-import {buildCSSThemeTokens} from './buildCSSThemeTokens'
+import {buildCSSTheme} from './buildCSSTheme'
 
 const fontDisplay: FontDisplay = 'swap'
 
@@ -60,5 +60,5 @@ globalFontFace('Inter', [
 /** @public */
 export const themeClassName: string = createTheme(themeVars, {
   '@layer': layers.theme,
-  ...buildCSSThemeTokens(),
+  ...buildCSSTheme(),
 })

package/src/theme/buildTheme.ts

@@ -9,8 +9,7 @@ import type {Theme, ThemeOptions} from './types'
 /** @public */
 export function buildTheme(options?: ThemeOptions): Theme {
   const tokens = resolveTokens({
-    ...options?.tokens,
-    color: options?.tokens?.color ?? defaultColor,
+    color: options?.color ?? defaultColor,
   })
 
   return {

package/src/theme/types.ts

@@ -302,9 +302,7 @@ export type FontTextSize = (typeof FONT_TEXT_SIZE)[number]
 export type Shadow = (typeof SHADOW)[number]
 
 /** @public */
-export interface ThemeOptions {
-  tokens?: PartialTokens<Tokens>
-}
+export type ThemeOptions = PartialTokens<Tokens>
 
 /** @public */
 export interface Palette {