import type * as CSS from 'csstype'; import type { DesignToken } from '../types'; import type { WebTokens } from '../tokens'; import type { Breakpoints } from '../breakpoints'; export type ColorTheme = 'info' | 'warning' | 'success' | 'error'; export type Size = 'small' | 'large'; export type Orientation = 'horizontal' | 'vertical'; export type FieldControlModifiers = Size | 'error' | 'quiet'; export type CSSProperties = { [Key in keyof CSS.Properties]: DesignToken | CSS.Properties[Key]; }; export type Selectors = { [key in CSS.HtmlAttributes | CSS.Pseudos]?: CSSProperties; }; export interface ComponentStyles extends CSSProperties, Selectors { _vars?: Record; } export type Modifiers = Required extends true ? { _modifiers: Record; } : { _modifiers?: Partial>; }; export type Elements; }>, Required extends boolean = false> = Required extends true ? { _element: Properties; } : { _element?: Properties; }; export interface BaseTheme extends ComponentStyles { _modifiers?: Record; _element?: Record; }>; } export type ComponentTheme = ThemeType | ((tokens: TokensType) => ThemeType); export type ComponentThemeOverride = { theme: ThemeType; colorMode?: 'light' | 'dark'; breakpoint?: keyof Breakpoints['values']; mediaQuery?: string; selector?: string; }; export type BaseComponentTheme = { name: NameType; theme: ComponentTheme; overrides?: Array>>; };