import merge from 'deepmerge' ; import { createTheme as veCreateTheme , createThemeContract , } from '@vanilla-extract/css' ; import { MapLeafNodes , CSSVarFunction } from '@vanilla-extract/private' ; import * as tokens from '@polaris/tokens' ; import { defaultVars } from './vars.css' ; /**
 * Specialized DeepPartial that enables extending the base theme.
 */ type DeepPartial < T > = { [ K in keyof T ] ? : T [ K ] extends { [ key ] : unknown ; } ? DeepPartial < T [ K ] > & { [ key ] : unknown ; } : T [ K ] ; } ; type DeepRequired < T > = { [ K in keyof T ] - ? : DeepRequired < T [ K ] > ; } ; type Theme = { breakpoints : typeof tokens . breakpoints ; color : { scheme : 'light' | 'dark' ; primary : string ; placeholder2 : string ; } ; spacing : typeof tokens . spacing ; fontFamily : string ; typography : typeof tokens . typography ; } ; type ThemeOptions = DeepPartial < Theme > ; export const defaultTheme = { breakpoints : tokens . breakpoints , color : { scheme : 'light' , primary : '#008060' , placeholder2 : '#BFCC94' , } , spacing : tokens . spacing , fontFamily : 'ShopifySans,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif' , typography : tokens . typography , } ; interface NullableTokens { [ key ] : string | NullableTokens | null ; } type ThemeVars < TThemeContract extends NullableTokens > = MapLeafNodes < TThemeContract , CSSVarFunction > ; param options returns export function createTheme < T extends ThemeOptions > ( options ? ) { const theme = merge ( defaultTheme , options || { } ) as Theme ; const customVars = createThemeContract ( options || { } ) ; const vars = merge ( customVars , defaultVars ) ; const themeClass = veCreateTheme ( vars , theme ) ; return [ themeClass , vars ] as [ string , ThemeVars < Theme & DeepRequired < T > > ] ; }