FrontPastel/node_modules/@mui/material/styles/experimental_extendTheme.d.ts

450 lines
11 KiB
TypeScript
Raw Normal View History

2024-04-17 13:55:11 +00:00
/* eslint-disable @typescript-eslint/naming-convention */
import { OverridableStringUnion } from '@mui/types';
import { SxConfig, SxProps, CSSObject, ApplyStyles } from '@mui/system';
import { ThemeOptions, Theme } from './createTheme';
import { Palette, PaletteOptions } from './createPalette';
import { Shadows } from './shadows';
import { ZIndex } from './zIndex';
import { Components } from './components';
/**
* default MD color-schemes
*/
export type DefaultColorScheme = 'light' | 'dark';
/**
* The application can add more color-scheme by extending this interface via module augmentation
*
* Ex.
* declare module @mui/material/styles {
* interface ColorSchemeOverrides {
* foo: true;
* }
* }
*
* // SupportedColorScheme = 'light' | 'dark' | 'foo';
*/
export interface ColorSchemeOverrides {}
export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
/**
* All color-schemes that the application has
*/
export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
export interface Opacity {
inputPlaceholder: number;
inputUnderline: number;
switchTrackDisabled: number;
switchTrack: number;
}
export type Overlays = [
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
string | undefined,
];
export interface PaletteBackgroundChannel {
defaultChannel: string;
paperChannel: string;
}
export interface PaletteCommonChannel {
background: string;
backgroundChannel: string;
onBackground: string;
onBackgroundChannel: string;
}
export interface PaletteColorChannel {
mainChannel: string;
lightChannel: string;
darkChannel: string;
contrastTextChannel: string;
}
export interface PaletteActionChannel {
activeChannel: string;
selectedChannel: string;
}
export interface PaletteTextChannel {
primaryChannel: string;
secondaryChannel: string;
}
export interface PaletteAlert {
errorColor: string;
infoColor: string;
successColor: string;
warningColor: string;
errorFilledBg: string;
infoFilledBg: string;
successFilledBg: string;
warningFilledBg: string;
errorFilledColor: string;
infoFilledColor: string;
successFilledColor: string;
warningFilledColor: string;
errorStandardBg: string;
infoStandardBg: string;
successStandardBg: string;
warningStandardBg: string;
errorIconColor: string;
infoIconColor: string;
successIconColor: string;
warningIconColor: string;
}
export interface PaletteAppBar {
defaultBg: string;
darkBg: string;
darkColor: string;
}
export interface PaletteAvatar {
defaultBg: string;
}
export interface PaletteButton {
inheritContainedBg: string;
inheritContainedHoverBg: string;
}
export interface PaletteChip {
defaultBorder: string;
defaultAvatarColor: string;
defaultIconColor: string;
}
export interface PaletteFilledInput {
bg: string;
hoverBg: string;
disabledBg: string;
}
export interface PaletteLinearProgress {
primaryBg: string;
secondaryBg: string;
errorBg: string;
infoBg: string;
successBg: string;
warningBg: string;
}
export interface PaletteSkeleton {
bg: string;
}
export interface PaletteSlider {
primaryTrack: string;
secondaryTrack: string;
errorTrack: string;
infoTrack: string;
successTrack: string;
warningTrack: string;
}
export interface PaletteSnackbarContent {
bg: string;
color: string;
}
export interface PaletteSpeedDialAction {
fabHoverBg: string;
}
export interface PaletteStepConnector {
border: string;
}
export interface PaletteStepContent {
border: string;
}
export interface PaletteSwitch {
defaultColor: string;
defaultDisabledColor: string;
primaryDisabledColor: string;
secondaryDisabledColor: string;
errorDisabledColor: string;
infoDisabledColor: string;
successDisabledColor: string;
warningDisabledColor: string;
}
export interface PaletteTableCell {
border: string;
}
export interface PaletteTooltip {
bg: string;
}
// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
export interface ColorSystemOptions {
palette?: PaletteOptions & {
background?: Partial<PaletteBackgroundChannel>;
common?: Partial<PaletteCommonChannel>;
primary?: Partial<PaletteColorChannel>;
secondary?: Partial<PaletteColorChannel>;
error?: Partial<PaletteColorChannel>;
info?: Partial<PaletteColorChannel>;
success?: Partial<PaletteColorChannel>;
text?: Partial<PaletteTextChannel>;
dividerChannel?: Partial<string>;
action?: Partial<PaletteActionChannel>;
Alert?: Partial<PaletteAlert>;
AppBar?: Partial<PaletteAppBar>;
Avatar?: Partial<PaletteAvatar>;
Button?: Partial<PaletteButton>;
Chip?: Partial<PaletteChip>;
FilledInput?: Partial<PaletteFilledInput>;
LinearProgress?: Partial<PaletteLinearProgress>;
Skeleton?: Partial<PaletteSkeleton>;
Slider?: Partial<PaletteSlider>;
SnackbarContent?: Partial<PaletteSnackbarContent>;
SpeedDialAction?: Partial<PaletteSpeedDialAction>;
StepConnector?: Partial<PaletteStepConnector>;
StepContent?: Partial<PaletteStepContent>;
Switch?: Partial<PaletteSwitch>;
TableCell?: Partial<PaletteTableCell>;
Tooltip?: Partial<PaletteTooltip>;
};
opacity?: Partial<Opacity>;
overlays?: Overlays;
}
export interface CssVarsPalette {
colorScheme: SupportedColorScheme;
common: PaletteCommonChannel;
primary: PaletteColorChannel;
secondary: PaletteColorChannel;
error: PaletteColorChannel;
info: PaletteColorChannel;
success: PaletteColorChannel;
warning: PaletteColorChannel;
text: PaletteTextChannel;
background: PaletteBackgroundChannel;
dividerChannel: string;
action: PaletteActionChannel;
Alert: PaletteAlert;
AppBar: PaletteAppBar;
Avatar: PaletteAvatar;
Button: PaletteButton;
Chip: PaletteChip;
FilledInput: PaletteFilledInput;
LinearProgress: PaletteLinearProgress;
Skeleton: PaletteSkeleton;
Slider: PaletteSlider;
SnackbarContent: PaletteSnackbarContent;
SpeedDialAction: PaletteSpeedDialAction;
StepConnector: PaletteStepConnector;
StepContent: PaletteStepContent;
Switch: PaletteSwitch;
TableCell: PaletteTableCell;
Tooltip: PaletteTooltip;
}
export interface ColorSystem {
palette: Palette & CssVarsPalette;
opacity: Opacity;
overlays: Overlays;
}
export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
/**
* Prefix of the generated CSS variables
* @default 'mui'
*/
cssVarPrefix?: string;
/**
* Theme components
*/
components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
/**
* Color schemes configuration
*/
colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
/**
* A function to determine if the key, value should be attached as CSS Variable
* `keys` is an array that represents the object path keys.
* Ex, if the theme is { foo: { bar: 'var(--test)' } }
* then, keys = ['foo', 'bar']
* value = 'var(--test)'
*/
shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
}
// should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
export interface ThemeVars {
palette: Omit<
ColorSystem['palette'],
| 'colorScheme'
| 'mode'
| 'contrastThreshold'
| 'tonalOffset'
| 'getContrastText'
| 'augmentColor'
>;
opacity: Opacity;
overlays: Overlays;
shadows: Shadows;
shape: Theme['shape'];
zIndex: ZIndex;
}
type Split<T, K extends keyof T = keyof T> = K extends string | number
? { [k in K]: Exclude<T[K], undefined> }
: never;
type ConcatDeep<T> =
T extends Record<string | number, infer V>
? keyof T extends string | number
? V extends string | number
? keyof T
: keyof V extends string | number
? `${keyof T}-${ConcatDeep<Split<V>>}`
: never
: never
: never;
/**
* Does not work for these cases:
* - { borderRadius: string | number } // the value can't be a union
* - { shadows: [string, string, ..., string] } // the value can't be an array
*/
type NormalizeVars<T> = ConcatDeep<Split<T>>;
// shut off automatic exporting for the Generics above
export {};
export interface ThemeCssVarOverrides {}
export type ThemeCssVar = OverridableStringUnion<
| NormalizeVars<Omit<ThemeVars, 'overlays' | 'shadows' | 'shape'>>
| 'shape-borderRadius'
| 'shadows-0'
| 'shadows-1'
| 'shadows-2'
| 'shadows-3'
| 'shadows-4'
| 'shadows-5'
| 'shadows-6'
| 'shadows-7'
| 'shadows-8'
| 'shadows-9'
| 'shadows-10'
| 'shadows-11'
| 'shadows-12'
| 'shadows-13'
| 'shadows-14'
| 'shadows-15'
| 'shadows-16'
| 'shadows-17'
| 'shadows-18'
| 'shadows-19'
| 'shadows-20'
| 'shadows-21'
| 'shadows-22'
| 'shadows-23'
| 'shadows-24'
| 'overlays-0'
| 'overlays-1'
| 'overlays-2'
| 'overlays-3'
| 'overlays-4'
| 'overlays-5'
| 'overlays-6'
| 'overlays-7'
| 'overlays-8'
| 'overlays-9'
| 'overlays-10'
| 'overlays-11'
| 'overlays-12'
| 'overlays-13'
| 'overlays-14'
| 'overlays-15'
| 'overlays-16'
| 'overlays-17'
| 'overlays-18'
| 'overlays-19'
| 'overlays-20'
| 'overlays-21'
| 'overlays-22'
| 'overlays-23'
| 'overlays-24',
ThemeCssVarOverrides
>;
/**
* Theme properties generated by extendTheme and CssVarsProvider
*/
export interface CssVarsTheme extends ColorSystem {
colorSchemes: Record<SupportedColorScheme, ColorSystem>;
cssVarPrefix: string;
vars: ThemeVars;
getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
generateCssVars: (colorScheme?: SupportedColorScheme) => {
css: Record<string, string | number>;
vars: ThemeVars;
};
// Default theme tokens
spacing: Theme['spacing'];
breakpoints: Theme['breakpoints'];
shape: Theme['shape'];
typography: Theme['typography'];
transitions: Theme['transitions'];
shadows: Theme['shadows'];
mixins: Theme['mixins'];
zIndex: Theme['zIndex'];
direction: Theme['direction'];
/**
* A function to determine if the key, value should be attached as CSS Variable
* `keys` is an array that represents the object path keys.
* Ex, if the theme is { foo: { bar: 'var(--test)' } }
* then, keys = ['foo', 'bar']
* value = 'var(--test)'
*/
shouldSkipGeneratingVar: (keys: string[], value: string | number) => boolean;
unstable_sxConfig: SxConfig;
unstable_sx: (props: SxProps<CssVarsTheme>) => CSSObject;
applyStyles: ApplyStyles<SupportedColorScheme>;
}
/**
* Generate a theme base on the options received.
* @param options Takes an incomplete theme object and adds the missing parts.
* @param args Deep merge the arguments with the about to be returned theme.
* @returns A complete, ready-to-use theme object.
*/
export default function experimental_extendTheme(
options?: CssVarsThemeOptions,
...args: object[]
): Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;