export type ThemeLightDarkValue = [string, string]; export type SizingKey = 'size_0' | 'size_0_25' | 'size_0_5' | 'size_1' | 'size_1_5' | 'size_2' | 'size_3' | 'size_4' | 'size_5' | 'size_6' | 'size_7' | 'size_8' | 'size_9' | 'size_10'; export type ThemeSizingConfig = Partial> & Record; export type DensityType = 'default' | 'compact' | 'comfortable'; export type DensitySizeKey = 'cellVertical' | 'cellHorizontal' | 'barsHorizontal' | 'barsVertical' | 'gap' | 'buttonHorizontal' | 'buttonVertical' | 'dialogHorizontal' | 'dialogVertical' | 'inputHorizontal' | 'inputVertical' | 'menuVertical' | 'menuHorizontal' | 'menuItemVertical' | 'menuItemHorizontal'; export type DensitySizeValues = Partial> & Record; export type ThemeDensitySizes = { [K in DensityType]?: DensitySizeValues; } & { [key: string]: DensitySizeValues; }; export interface ThemeDensityConfig { type: DensityType; sizes: ThemeDensitySizes; } export type IconKey = 'arrowRight' | 'arrowRightWithBar' | 'arrowLeft' | 'arrowLeftWithBar' | 'arrowDown' | 'menu' | 'selectArrow' | 'arrowNarrowUp' | 'arrowNarrowDown' | 'check' | 'checkbox' | 'caretHiddenLeft' | 'caretHiddenRight' | 'caretHiddenUp' | 'caretHiddenDown' | 'collapseOff' | 'collapseOn' | 'radio'; export type ThemeIconsConfig = Partial> & Record; export interface ThemeColorsConfig { [key: string]: string | Record; } export type TokenKey = 'fontFamily' | 'fontSize' | 'fontSizeSmall' | 'lineHeight' | 'lineHeightSmall' | 'fontWeight' | 'letterSpacing' | 'gapSize' | 'iconSize' | 'iconButtonHitAreaSize' | 'tableTransition' | 'borderRadius' | 'borderColor' | 'accentColor' | 'foregroundColor' | 'foregroundSecondaryColor' | 'backgroundColor' | 'backgroundSecondaryColor' | 'placeholderColor' | 'readOnlyColor' | 'disabledColor' | 'shadowColor' | 'shadowX' | 'shadowY' | 'shadowBlur' | 'shadowOpacity' | 'barForegroundColor' | 'barBackgroundColor' | 'barHorizontalPadding' | 'barVerticalPadding' | 'cellHorizontalBorderColor' | 'cellVerticalBorderColor' | 'cellHorizontalPadding' | 'cellVerticalPadding' | 'rowHeaderOddBackgroundColor' | 'rowHeaderEvenBackgroundColor' | 'rowCellOddBackgroundColor' | 'rowCellEvenBackgroundColor' | 'cellEditorBorderWidth' | 'cellEditorBorderColor' | 'cellEditorForegroundColor' | 'cellEditorBackgroundColor' | 'cellEditorShadowBlurRadius' | 'cellEditorShadowColor' | 'cellSuccessBackgroundColor' | 'cellErrorBackgroundColor' | 'cellReadOnlyBackgroundColor' | 'cellSelectionBorderColor' | 'cellSelectionBackgroundColor' | 'cellAutofillSize' | 'cellAutofillHitAreaSize' | 'cellAutofillBorderWidth' | 'cellAutofillBorderRadius' | 'cellAutofillBorderColor' | 'cellAutofillBackgroundColor' | 'cellAutofillFillBorderColor' | 'cellMobileHandleSize' | 'cellMobileHandleBorderWidth' | 'cellMobileHandleBorderRadius' | 'cellMobileHandleBorderColor' | 'cellMobileHandleBackgroundColor' | 'cellMobileHandleBackgroundOpacity' | 'resizeIndicatorColor' | 'moveBacklightColor' | 'moveBacklightOpacity' | 'moveIndicatorColor' | 'hiddenIndicatorColor' | 'scrollbarBorderRadius' | 'scrollbarTrackColor' | 'scrollbarThumbColor' | 'headerFontWeight' | 'headerForegroundColor' | 'headerBackgroundColor' | 'headerHighlightedShadowSize' | 'headerHighlightedForegroundColor' | 'headerHighlightedBackgroundColor' | 'headerActiveBorderColor' | 'headerActiveForegroundColor' | 'headerActiveBackgroundColor' | 'headerFilterBackgroundColor' | 'headerRowForegroundColor' | 'headerRowBackgroundColor' | 'headerRowHighlightedForegroundColor' | 'headerRowHighlightedBackgroundColor' | 'headerRowActiveForegroundColor' | 'headerRowActiveBackgroundColor' | 'checkboxSize' | 'checkboxBorderRadius' | 'checkboxBorderColor' | 'checkboxBackgroundColor' | 'checkboxIconColor' | 'checkboxFocusBorderColor' | 'checkboxFocusBackgroundColor' | 'checkboxFocusIconColor' | 'checkboxFocusRingColor' | 'checkboxDisabledBorderColor' | 'checkboxDisabledBackgroundColor' | 'checkboxDisabledIconColor' | 'checkboxCheckedBorderColor' | 'checkboxCheckedBackgroundColor' | 'checkboxCheckedIconColor' | 'checkboxCheckedFocusBorderColor' | 'checkboxCheckedFocusBackgroundColor' | 'checkboxCheckedFocusIconColor' | 'checkboxCheckedDisabledBorderColor' | 'checkboxCheckedDisabledBackgroundColor' | 'checkboxCheckedDisabledIconColor' | 'checkboxIndeterminateBorderColor' | 'checkboxIndeterminateBackgroundColor' | 'checkboxIndeterminateIconColor' | 'checkboxIndeterminateFocusBorderColor' | 'checkboxIndeterminateFocusBackgroundColor' | 'checkboxIndeterminateFocusIconColor' | 'checkboxIndeterminateDisabledBorderColor' | 'checkboxIndeterminateDisabledBackgroundColor' | 'checkboxIndeterminateDisabledIconColor' | 'radioSize' | 'radioBorderColor' | 'radioBackgroundColor' | 'radioIconColor' | 'radioFocusBorderColor' | 'radioFocusBackgroundColor' | 'radioFocusIconColor' | 'radioFocusRingColor' | 'radioDisabledBorderColor' | 'radioDisabledBackgroundColor' | 'radioDisabledIconColor' | 'radioCheckedBorderColor' | 'radioCheckedBackgroundColor' | 'radioCheckedIconColor' | 'radioCheckedFocusBorderColor' | 'radioCheckedFocusBackgroundColor' | 'radioCheckedFocusIconColor' | 'radioCheckedDisabledBorderColor' | 'radioCheckedDisabledBackgroundColor' | 'radioCheckedDisabledIconColor' | 'iconButtonBorderRadius' | 'iconButtonLargeBorderRadius' | 'iconButtonLargePadding' | 'iconButtonBorderColor' | 'iconButtonBackgroundColor' | 'iconButtonIconColor' | 'iconButtonHoverBorderColor' | 'iconButtonHoverBackgroundColor' | 'iconButtonHoverIconColor' | 'iconButtonActiveBorderColor' | 'iconButtonActiveBackgroundColor' | 'iconButtonActiveIconColor' | 'iconButtonActiveHoverBorderColor' | 'iconButtonActiveHoverBackgroundColor' | 'iconButtonActiveHoverIconColor' | 'collapseButtonBorderRadius' | 'collapseButtonOpenBorderColor' | 'collapseButtonOpenBackgroundColor' | 'collapseButtonOpenIconColor' | 'collapseButtonOpenIconActiveColor' | 'collapseButtonOpenHoverBorderColor' | 'collapseButtonOpenHoverBackgroundColor' | 'collapseButtonOpenHoverIconColor' | 'collapseButtonOpenHoverIconActiveColor' | 'collapseButtonCloseBorderColor' | 'collapseButtonCloseBackgroundColor' | 'collapseButtonCloseIconColor' | 'collapseButtonCloseIconActiveColor' | 'collapseButtonCloseHoverBorderColor' | 'collapseButtonCloseHoverBackgroundColor' | 'collapseButtonCloseHoverIconColor' | 'collapseButtonCloseHoverIconActiveColor' | 'buttonBorderRadius' | 'buttonHorizontalPadding' | 'buttonVerticalPadding' | 'primaryButtonBorderColor' | 'primaryButtonForegroundColor' | 'primaryButtonBackgroundColor' | 'primaryButtonDisabledBorderColor' | 'primaryButtonDisabledForegroundColor' | 'primaryButtonDisabledBackgroundColor' | 'primaryButtonHoverBorderColor' | 'primaryButtonHoverForegroundColor' | 'primaryButtonHoverBackgroundColor' | 'primaryButtonFocusBorderColor' | 'primaryButtonFocusForegroundColor' | 'primaryButtonFocusBackgroundColor' | 'secondaryButtonBorderColor' | 'secondaryButtonForegroundColor' | 'secondaryButtonBackgroundColor' | 'secondaryButtonDisabledBorderColor' | 'secondaryButtonDisabledForegroundColor' | 'secondaryButtonDisabledBackgroundColor' | 'secondaryButtonHoverBorderColor' | 'secondaryButtonHoverForegroundColor' | 'secondaryButtonHoverBackgroundColor' | 'secondaryButtonFocusBorderColor' | 'secondaryButtonFocusForegroundColor' | 'secondaryButtonFocusBackgroundColor' | 'commentsTextareaHorizontalPadding' | 'commentsTextareaVerticalPadding' | 'commentsTextareaBorderWidth' | 'commentsTextareaBorderColor' | 'commentsTextareaForegroundColor' | 'commentsTextareaBackgroundColor' | 'commentsTextareaFocusBorderWidth' | 'commentsTextareaFocusBorderColor' | 'commentsTextareaFocusForegroundColor' | 'commentsTextareaFocusBackgroundColor' | 'commentsIndicatorSize' | 'commentsIndicatorColor' | 'licenseHorizontalPadding' | 'licenseVerticalPadding' | 'licenseForegroundColor' | 'licenseBackgroundColor' | 'linkColor' | 'linkHoverColor' | 'inputBorderWidth' | 'inputBorderRadius' | 'inputHorizontalPadding' | 'inputVerticalPadding' | 'inputBorderColor' | 'inputForegroundColor' | 'inputBackgroundColor' | 'inputHoverBorderColor' | 'inputHoverForegroundColor' | 'inputHoverBackgroundColor' | 'inputDisabledBorderColor' | 'inputDisabledForegroundColor' | 'inputDisabledBackgroundColor' | 'inputFocusBorderColor' | 'inputFocusForegroundColor' | 'inputFocusBackgroundColor' | 'menuBorderWidth' | 'menuBorderRadius' | 'menuHorizontalPadding' | 'menuVerticalPadding' | 'menuItemHorizontalPadding' | 'menuItemVerticalPadding' | 'menuBorderColor' | 'menuShadowX' | 'menuShadowY' | 'menuShadowBlur' | 'menuShadowColor' | 'menuShadowOpacity' | 'menuItemHoverColor' | 'menuItemHoverColorOpacity' | 'menuItemActiveColor' | 'menuItemActiveColorOpacity' | 'dialogSemiTransparentBackgroundColor' | 'dialogSemiTransparentBackgroundOpacity' | 'dialogSolidBackgroundColor' | 'dialogContentPaddingHorizontal' | 'dialogContentPaddingVertical' | 'dialogContentBorderRadius' | 'dialogContentBackgroundColor' | 'notificationForegroundColor' | 'notificationBackgroundColor' | 'notificationBorderColor' | 'notificationSuccessAccent' | 'notificationWarningAccent' | 'notificationErrorAccent' | 'paginationBarForegroundColor' | 'paginationBarBackgroundColor' | 'paginationBarHorizontalPadding' | 'paginationBarVerticalPadding' | 'paginationButtonBorderColor' | 'paginationButtonForegroundColor' | 'paginationButtonBackgroundColor' | 'paginationButtonHoverBorderColor' | 'paginationButtonHoverForegroundColor' | 'paginationButtonHoverBackgroundColor' | 'paginationButtonDisabledForegroundColor' | 'paginationButtonDisabledBackgroundColor' | 'paginationButtonDisabledBorderColor' | 'paginationButtonFocusBorderColor' | 'paginationButtonFocusForegroundColor' | 'paginationButtonFocusBackgroundColor' | 'chipBackground' | 'chipBorderRadius' | 'chipVerticalPadding' | 'chipHorizontalPadding' | 'chipGap'; export type ThemeTokenValue = string | ThemeLightDarkValue; export type ThemeTokensConfig = Partial>; export type ThemeColorScheme = 'light' | 'dark' | 'auto'; export interface ThemeConfig { name: string | undefined; sizing: ThemeSizingConfig; density: ThemeDensityConfig; icons: ThemeIconsConfig; colors: ThemeColorsConfig; tokens: ThemeTokensConfig; colorScheme: ThemeColorScheme; } export interface ThemeParams { name?: string; sizing?: Partial; density?: DensityType | Partial; icons?: Partial; colors?: Partial; tokens?: Partial; colorScheme?: ThemeColorScheme; } export type BaseTheme = ThemeParams;