@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
3,119 lines • 145 kB
TypeScript
declare const themes: {
asagi: {
tokens: {
colors: {
sd: {
system: {
color: {
impression: {
primary: {
value: string;
};
onPrimary: {
value: string;
};
primaryContainer: {
value: string;
};
onPrimaryContainer: {
value: string;
};
secondary: {
value: string;
};
onSecondary: {
value: string;
};
secondaryContainer: {
value: string;
};
onSecondaryContainer: {
value: string;
};
tertiary: {
value: string;
};
onTertiary: {
value: string;
};
tertiaryContainer: {
value: string;
};
onTertiaryContainer: {
value: string;
};
notice: {
value: string;
};
onNotice: {
value: string;
};
noticeContainer: {
value: string;
};
onNoticeContainer: {
value: string;
};
noticeContainerVariant: {
value: string;
};
onNoticeContainerVariant: {
value: string;
};
negative: {
value: string;
};
onNegative: {
value: string;
};
negativeContainer: {
value: string;
};
onNegativeContainer: {
value: string;
};
negativeContainerVariant: {
value: string;
};
onNegativeContainerVariant: {
value: string;
};
positive: {
value: string;
};
onPositive: {
value: string;
};
positiveContainer: {
value: string;
};
onPositiveContainer: {
value: string;
};
positiveContainerVariant: {
value: string;
};
onPositiveContainerVariant: {
value: string;
};
};
component: {
surface: {
value: string;
};
onSurface: {
value: string;
};
onSurfaceVariant: {
value: string;
};
inverseSurface: {
value: string;
};
inverseOnSurface: {
value: string;
};
inversePrimary: {
value: string;
};
outlineBright: {
value: string;
};
outline: {
value: string;
};
outlineDim: {
value: string;
};
scrim: {
value: string;
};
surfaceDim: {
value: string;
};
surfaceBright: {
value: string;
};
surfaceContainerBright: {
value: string;
};
surfaceContainer: {
value: string;
};
surfaceContainerDim: {
value: string;
};
};
interaction: {
disabled: {
value: string;
};
disabledOnSurface: {
value: string;
};
selected: {
value: string;
};
selectedSurface: {
value: string;
};
hovered: {
value: string;
};
hoveredVariant: {
value: string;
};
hoveredOnPrimary: {
value: string;
};
};
chart: {
mark: {
primary: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
positive: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
negative: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
notice: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
multi: {
10: {
value: string;
};
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
"07": {
value: string;
};
"08": {
value: string;
};
"09": {
value: string;
};
};
};
component: {
onMarkLabel: {
value: string;
};
inverseOnMarkLabel: {
value: string;
};
scalemark: {
value: string;
};
threshold: {
value: string;
};
chartSurface: {
value: string;
};
onChartSurface: {
value: string;
};
};
};
};
};
};
};
};
};
"konjo-dark": {
tokens: {
colors: {
sd: {
system: {
color: {
impression: {
primary: {
value: string;
};
onPrimary: {
value: string;
};
primaryContainer: {
value: string;
};
onPrimaryContainer: {
value: string;
};
secondary: {
value: string;
};
onSecondary: {
value: string;
};
secondaryContainer: {
value: string;
};
onSecondaryContainer: {
value: string;
};
tertiary: {
value: string;
};
onTertiary: {
value: string;
};
tertiaryContainer: {
value: string;
};
onTertiaryContainer: {
value: string;
};
notice: {
value: string;
};
onNotice: {
value: string;
};
noticeContainer: {
value: string;
};
onNoticeContainer: {
value: string;
};
noticeContainerVariant: {
value: string;
};
onNoticeContainerVariant: {
value: string;
};
negative: {
value: string;
};
onNegative: {
value: string;
};
negativeContainer: {
value: string;
};
onNegativeContainer: {
value: string;
};
negativeContainerVariant: {
value: string;
};
onNegativeContainerVariant: {
value: string;
};
positive: {
value: string;
};
onPositive: {
value: string;
};
positiveContainer: {
value: string;
};
onPositiveContainer: {
value: string;
};
positiveContainerVariant: {
value: string;
};
onPositiveContainerVariant: {
value: string;
};
};
component: {
surface: {
value: string;
};
onSurface: {
value: string;
};
onSurfaceVariant: {
value: string;
};
inverseSurface: {
value: string;
};
inverseOnSurface: {
value: string;
};
inversePrimary: {
value: string;
};
outlineBright: {
value: string;
};
outline: {
value: string;
};
outlineDim: {
value: string;
};
scrim: {
value: string;
};
surfaceDim: {
value: string;
};
surfaceBright: {
value: string;
};
surfaceContainerBright: {
value: string;
};
surfaceContainer: {
value: string;
};
surfaceContainerDim: {
value: string;
};
};
interaction: {
disabled: {
value: string;
};
disabledOnSurface: {
value: string;
};
selected: {
value: string;
};
selectedSurface: {
value: string;
};
hovered: {
value: string;
};
hoveredVariant: {
value: string;
};
hoveredOnPrimary: {
value: string;
};
};
chart: {
mark: {
primary: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
positive: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
negative: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
notice: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
multi: {
10: {
value: string;
};
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
"07": {
value: string;
};
"08": {
value: string;
};
"09": {
value: string;
};
};
};
component: {
onMarkLabel: {
value: string;
};
inverseOnMarkLabel: {
value: string;
};
scalemark: {
value: string;
};
threshold: {
value: string;
};
chartSurface: {
value: string;
};
onChartSurface: {
value: string;
};
};
};
};
};
};
};
};
};
kurikawa: {
tokens: {
colors: {
sd: {
system: {
color: {
impression: {
primary: {
value: string;
};
onPrimary: {
value: string;
};
primaryContainer: {
value: string;
};
onPrimaryContainer: {
value: string;
};
secondary: {
value: string;
};
onSecondary: {
value: string;
};
secondaryContainer: {
value: string;
};
onSecondaryContainer: {
value: string;
};
tertiary: {
value: string;
};
onTertiary: {
value: string;
};
tertiaryContainer: {
value: string;
};
onTertiaryContainer: {
value: string;
};
notice: {
value: string;
};
onNotice: {
value: string;
};
noticeContainer: {
value: string;
};
onNoticeContainer: {
value: string;
};
noticeContainerVariant: {
value: string;
};
onNoticeContainerVariant: {
value: string;
};
negative: {
value: string;
};
onNegative: {
value: string;
};
negativeContainer: {
value: string;
};
onNegativeContainer: {
value: string;
};
negativeContainerVariant: {
value: string;
};
onNegativeContainerVariant: {
value: string;
};
positive: {
value: string;
};
onPositive: {
value: string;
};
positiveContainer: {
value: string;
};
onPositiveContainer: {
value: string;
};
positiveContainerVariant: {
value: string;
};
onPositiveContainerVariant: {
value: string;
};
};
component: {
surface: {
value: string;
};
onSurface: {
value: string;
};
onSurfaceVariant: {
value: string;
};
inverseSurface: {
value: string;
};
inverseOnSurface: {
value: string;
};
inversePrimary: {
value: string;
};
outlineBright: {
value: string;
};
outline: {
value: string;
};
outlineDim: {
value: string;
};
scrim: {
value: string;
};
surfaceDim: {
value: string;
};
surfaceBright: {
value: string;
};
surfaceContainerBright: {
value: string;
};
surfaceContainer: {
value: string;
};
surfaceContainerDim: {
value: string;
};
};
interaction: {
disabled: {
value: string;
};
disabledOnSurface: {
value: string;
};
selected: {
value: string;
};
selectedSurface: {
value: string;
};
hovered: {
value: string;
};
hoveredVariant: {
value: string;
};
hoveredOnPrimary: {
value: string;
};
};
chart: {
mark: {
primary: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
positive: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
negative: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
notice: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
multi: {
10: {
value: string;
};
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
"07": {
value: string;
};
"08": {
value: string;
};
"09": {
value: string;
};
};
};
component: {
onMarkLabel: {
value: string;
};
inverseOnMarkLabel: {
value: string;
};
scalemark: {
value: string;
};
threshold: {
value: string;
};
chartSurface: {
value: string;
};
onChartSurface: {
value: string;
};
};
};
};
};
};
};
};
};
sumire: {
tokens: {
colors: {
sd: {
system: {
color: {
impression: {
primary: {
value: string;
};
onPrimary: {
value: string;
};
primaryContainer: {
value: string;
};
onPrimaryContainer: {
value: string;
};
secondary: {
value: string;
};
onSecondary: {
value: string;
};
secondaryContainer: {
value: string;
};
onSecondaryContainer: {
value: string;
};
tertiary: {
value: string;
};
onTertiary: {
value: string;
};
tertiaryContainer: {
value: string;
};
onTertiaryContainer: {
value: string;
};
notice: {
value: string;
};
onNotice: {
value: string;
};
noticeContainer: {
value: string;
};
onNoticeContainer: {
value: string;
};
noticeContainerVariant: {
value: string;
};
onNoticeContainerVariant: {
value: string;
};
negative: {
value: string;
};
onNegative: {
value: string;
};
negativeContainer: {
value: string;
};
onNegativeContainer: {
value: string;
};
negativeContainerVariant: {
value: string;
};
onNegativeContainerVariant: {
value: string;
};
positive: {
value: string;
};
onPositive: {
value: string;
};
positiveContainer: {
value: string;
};
onPositiveContainer: {
value: string;
};
positiveContainerVariant: {
value: string;
};
onPositiveContainerVariant: {
value: string;
};
};
component: {
surface: {
value: string;
};
onSurface: {
value: string;
};
onSurfaceVariant: {
value: string;
};
inverseSurface: {
value: string;
};
inverseOnSurface: {
value: string;
};
inversePrimary: {
value: string;
};
outlineBright: {
value: string;
};
outline: {
value: string;
};
outlineDim: {
value: string;
};
scrim: {
value: string;
};
surfaceDim: {
value: string;
};
surfaceBright: {
value: string;
};
surfaceContainerBright: {
value: string;
};
surfaceContainer: {
value: string;
};
surfaceContainerDim: {
value: string;
};
};
interaction: {
disabled: {
value: string;
};
disabledOnSurface: {
value: string;
};
selected: {
value: string;
};
selectedSurface: {
value: string;
};
hovered: {
value: string;
};
hoveredVariant: {
value: string;
};
hoveredOnPrimary: {
value: string;
};
};
chart: {
mark: {
primary: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
positive: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
negative: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
notice: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
multi: {
10: {
value: string;
};
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
"07": {
value: string;
};
"08": {
value: string;
};
"09": {
value: string;
};
};
};
component: {
onMarkLabel: {
value: string;
};
inverseOnMarkLabel: {
value: string;
};
scalemark: {
value: string;
};
threshold: {
value: string;
};
chartSurface: {
value: string;
};
onChartSurface: {
value: string;
};
};
};
};
};
};
};
};
};
tsutsuji: {
tokens: {
colors: {
sd: {
system: {
color: {
impression: {
primary: {
value: string;
};
onPrimary: {
value: string;
};
primaryContainer: {
value: string;
};
onPrimaryContainer: {
value: string;
};
secondary: {
value: string;
};
onSecondary: {
value: string;
};
secondaryContainer: {
value: string;
};
onSecondaryContainer: {
value: string;
};
tertiary: {
value: string;
};
onTertiary: {
value: string;
};
tertiaryContainer: {
value: string;
};
onTertiaryContainer: {
value: string;
};
notice: {
value: string;
};
onNotice: {
value: string;
};
noticeContainer: {
value: string;
};
onNoticeContainer: {
value: string;
};
noticeContainerVariant: {
value: string;
};
onNoticeContainerVariant: {
value: string;
};
negative: {
value: string;
};
onNegative: {
value: string;
};
negativeContainer: {
value: string;
};
onNegativeContainer: {
value: string;
};
negativeContainerVariant: {
value: string;
};
onNegativeContainerVariant: {
value: string;
};
positive: {
value: string;
};
onPositive: {
value: string;
};
positiveContainer: {
value: string;
};
onPositiveContainer: {
value: string;
};
positiveContainerVariant: {
value: string;
};
onPositiveContainerVariant: {
value: string;
};
};
component: {
surface: {
value: string;
};
onSurface: {
value: string;
};
onSurfaceVariant: {
value: string;
};
inverseSurface: {
value: string;
};
inverseOnSurface: {
value: string;
};
inversePrimary: {
value: string;
};
outlineBright: {
value: string;
};
outline: {
value: string;
};
outlineDim: {
value: string;
};
scrim: {
value: string;
};
surfaceDim: {
value: string;
};
surfaceBright: {
value: string;
};
surfaceContainerBright: {
value: string;
};
surfaceContainer: {
value: string;
};
surfaceContainerDim: {
value: string;
};
};
interaction: {
disabled: {
value: string;
};
disabledOnSurface: {
value: string;
};
selected: {
value: string;
};
selectedSurface: {
value: string;
};
hovered: {
value: string;
};
hoveredVariant: {
value: string;
};
hoveredOnPrimary: {
value: string;
};
};
chart: {
mark: {
primary: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
positive: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
negative: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
notice: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
multi: {
10: {
value: string;
};
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
"07": {
value: string;
};
"08": {
value: string;
};
"09": {
value: string;
};
};
};
component: {
onMarkLabel: {
value: string;
};
inverseOnMarkLabel: {
value: string;
};
scalemark: {
value: string;
};
threshold: {
value: string;
};
chartSurface: {
value: string;
};
onChartSurface: {
value: string;
};
};
};
};
};
};
};
};
};
};
export { themes };
export declare const themeNames: string[];
export declare const SerendiePreset: {
name: string;
theme: {
extend: {
breakpoints: {
expanded: string;
};
tokens: {
sizes: {
sd: {
reference: {
dimension: {
breakpoint: {
small: {
value: string;
};
medium: {
value: string;
};
large: {
value: string;
};
extraLarge: {
value: string;
};
};
};
};
system: {
dimension: {
breakpoint: {
compact: {
value: string;
};
expanded: {
value: string;
};
};
};
};
};
} & {
sd: {
reference: {
dimension: {
scale: {
0: {
value: string;
};
1: {
value: string;
};
2: {
value: string;
};
3: {
value: string;
};
4: {
value: string;
};
5: {
value: string;
};
6: {
value: string;
};
7: {
value: string;
};
8: {
value: string;
};
9: {
value: string;
};
10: {
value: string;
};
11: {
value: string;
};
12: {
value: string;
};
13: {
value: string;
};
14: {
value: string;
};
15: {
value: string;
};
16: {
value: string;
};
17: {
value: string;
};
18: {
value: string;
};
};
};
};
system: {
dimension: {
spacing: {
none: {
value: string;
};
twoExtraSmall: {
value: string;
};
extraSmall: {
value: string;
};
small: {
value: string;
};
medium: {
value: string;
};
large: {
value: string;
};
extraLarge: {
value: string;
};
twoExtraLarge: {
value: string;
};
threeExtraLarge: {
value: string;
};
fourExtraLarge: {
value: string;
};
fiveExtraLarge: {
value: string;
};
sixExtraLarge: {
value: string;
};
};
};
};
};
};
colors: {
sd: {
reference: {
color: {
scale: {
white: {
1000: {
value: string;
};
};
black: {
1000: {
value: string;
};
};
transparency: {
bl2: {
value: string;
};
bl5: {
value: string;
};
bl20: {
value: string;
};
wh60: {
value: string;
};
wh2: {
value: string;
};
wh5: {
value: string;
};
wh20: {
value: string;
};
bl60: {
value: string;
};
};
gray: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
neutral: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
red: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
chestnut: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
beige: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
yellow: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
green: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
skyBlue: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
blue: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
purple: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
pink: {
100: {
value: string;
};
200: {
value: string;
};
300: {
value: string;
};
400: {
value: string;
};
500: {
value: string;
};
600: {
value: string;
};
700: {
value: string;
};
800: {
value: string;
};
900: {
value: string;
};
1000: {
value: string;
};
};
};
};
};
system: {
color: {
impression: {
primary: {
value: string;
};
onPrimary: {
value: string;
};
primaryContainer: {
value: string;
};
onPrimaryContainer: {
value: string;
};
secondary: {
value: string;
};
onSecondary: {
value: string;
};
secondaryContainer: {
value: string;
};
onSecondaryContainer: {
value: string;
};
tertiary: {
value: string;
};
onTertiary: {
value: string;
};
tertiaryContainer: {
value: string;
};
onTertiaryContainer: {
value: string;
};
notice: {
value: string;
};
onNotice: {
value: string;
};
noticeContainer: {
value: string;
};
onNoticeContainer: {
value: string;
};
noticeContainerVariant: {
value: string;
};
onNoticeContainerVariant: {
value: string;
};
negative: {
value: string;
};
onNegative: {
value: string;
};
negativeContainer: {
value: string;
};
onNegativeContainer: {
value: string;
};
negativeContainerVariant: {
value: string;
};
onNegativeContainerVariant: {
value: string;
};
positive: {
value: string;
};
onPositive: {
value: string;
};
positiveContainer: {
value: string;
};
onPositiveContainer: {
value: string;
};
positiveContainerVariant: {
value: string;
};
onPositiveContainerVariant: {
value: string;
};
};
component: {
surface: {
value: string;
};
onSurface: {
value: string;
};
onSurfaceVariant: {
value: string;
};
inverseSurface: {
value: string;
};
inverseOnSurface: {
value: string;
};
inversePrimary: {
value: string;
};
outlineBright: {
value: string;
};
outline: {
value: string;
};
outlineDim: {
value: string;
};
scrim: {
value: string;
};
surfaceDim: {
value: string;
};
surfaceBright: {
value: string;
};
surfaceContainerBright: {
value: string;
};
surfaceContainer: {
value: string;
};
surfaceContainerDim: {
value: string;
};
};
interaction: {
disabled: {
value: string;
};
disabledOnSurface: {
value: string;
};
selected: {
value: string;
};
selectedSurface: {
value: string;
};
hovered: {
value: string;
};
hoveredVariant: {
value: string;
};
hoveredOnPrimary: {
value: string;
};
};
chart: {
mark: {
primary: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
positive: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
negative: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
notice: {
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
};
multi: {
10: {
value: string;
};
"01": {
value: string;
};
"02": {
value: string;
};
"03": {
value: string;
};
"04": {
value: string;
};
"05": {
value: string;
};
"06": {
value: string;
};
"07": {
value: string;
};
"08": {
value: string;
};
"09": {
value: string;
};
};
};
component: {
onMarkLabel: {
value: string;
};
inverseOnMarkLabel: {
value: string;
};
scalemark: {
value: string;
};
threshold: {
value: string;
};
chartSurface: {
value: string;
};
onChartSurface: {
value: string;
};
};
};
};
};
};
};
spacing: {
sd: {
reference: {
dimension: {
scale: {
0: {
value: string;
};
1: {
value: string;
};
2: {
value: string;
};
3: {
value: string;
};
4: {
value: string;
};
5: {
value: string;
};
6: {
value: string;
};
7: {
value: string;
};
8: {
value: string;
};
9: {
value: string;
};
10: {
value: string;
};
11: {
value: string;
};
12: {
value: string;
};
13: {
value: string;
};
14: {
value: string;
};
15: {
value: string;
};
16: {
value: string;
};
17: {
value: string;
};
18: {
value: string;
};
};
};
};
system: {
dimension: {
spacing: {
none: {
value: string;
};
twoExtraSmall: {
value: string;
};
extraSmall: {
value: string;
};
small: {
value: string;
};
medium: {
value: string;
};
large: {
value: string;
};
extraLarge: {
value: string;
};
twoExtraLarge: {
value: string;
};
threeExtraLarge: {
value: string;
};
fourExtraLarge: {
value: string;
};
fiveExtraLarge: {
value: string;
};
sixExtraLarge: {
value: string;
};
};
};
};
};
};
opacity: {
sd: {
reference: {
elevation: {
opacity: {
scale: {
0: {
value: number;
};
1: {
value: number;
};
2: {
value: number;
};
3: {
value: number;
};
4: {
value: number;
};
5: {
value: number;
};
6: {
value: number;
};
7: {
value: number;
};
8: {
value: number;
};
9: {
value: number;
};
10: {
value: number;
};
};
};
};
};
};
};
fonts: {
sd: {
reference: {
typography: {
fontFamily: {
primary: {
value: string;
};
monospace: {
value: string;
};
};
};
};
};
};
fontWeights: {
sd: {
reference: {
typography: {
fontWeight: {
regular: {
value: number;
};
bold: {
value: number;
};
};
};
};
};
};
lineHeights: {
sd: {
reference: {
typography: {
lineHeight: {
none: {
value: number;
};
tight: {
value: number;
};
normal: {
value: number;
};
relaxed: {
value: number;
};
};
};
};
};
};
fontSizes: {
sd: {
reference: {
typography: {
scale: {
expanded: {
fourExtraSmall: {
value: string;
};
threeExtraSmall: {
value: string;
};
twoExtraSmall: {
value: string;
};
extraSmall: {
value: string;
};
small: {
value: string;
};
medium: {
value: string;
};
large: {
value: string;
};
extraLarge: {
value: string;
};
twoExtraLarge: {
value: string;
};
threeExtraLarge: {
value: string;
};
fourExtraLarge: {
value: string;
};
fiveExtraLarge: {
value: string;
};
};
compact: {
twoExtraSmall: {
value: string;
};
extraSmall: {
value: string;
};
small: {
value: string;
};
medium: {
value: string;
};
large: {
value: string;
};
extraLarge: {
value: string;
};
twoExtraLarge: {
value: string;
};
threeExtraLarge: {
value: string;
};
fourExtraLarge: {
value: string;
};
fiveExtraLarge: {
value: string;
};
};
};
};
};
};
};
borderWidths: {
sd: {
system: {
dimension: {
border: {
medium: {
value: string;
};
thick: {
value: string;
};
extraThick: {
value: string;
};
};
};
};
};
};
radii: {
sd: {
system: {
dimension: {
radius: {
extraSmall: {
value: string;
};
small: {
value: string;
};
medium: {
value: string;
};
large: {
value: string;
};
extraLarge: {
value: string;
};
full: {
value: string;
};
};
};
};
};
};
shadows: {
sd: {
system: {
elevation: {
shadow: {
level1: {
value: {
color: string;
offsetX: number;
offsetY: number;
blur: number;
spread: number;
};
};
level2: {
value: {
color: string;
offsetX: number;
offsetY: number;
blur: number;
spread: number;
};
};
level3: {
value: {
color: string;
offsetX: number;
offsetY: number;
blur: number;
spread: number;
};
};
level4: {
value: {
color: string;
offsetX: number;
offsetY: number;
blur: number;
spread: number;
};
};
level5: {
value: {
color: string;
offsetX: number;
offsetY: number;
blur: number;
spread: number;
};
};
};
};
};
};
};
zIndex: {
sd: {
system: {
elevation: {
zIndex: {
deepDive: {
value: number;
};
base: {
value: number;
};
docked: {
value: number;
};
dropdown: {
value: number;
};
modal: {
value: number;
};
toast: {
value: number;
};
};
};
};
};
};
};
textStyles: {
sd: {
system: {
typography: {
display: {
small_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
small_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
};
headline: {
small_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
small_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
};
title: {
small_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
small_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
};
body: {
extraSmall_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
small_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
extraSmall_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
small_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
};
label: {
small_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
extraLarge_compact: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
small_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
medium_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
large_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
extraLarge_expanded: {
value: {
fontSize: string;
fontWeight: number;
fontFamily: string;
lineHeight: number;
};
};
};
};
};
};
};
keyframes: {
spin: {
"0%": {
transform: string;
};
"100%": {
transform: string;
};
};
progressIndicatorSlide: {
from: {
transform: string;
};
to: {
transform: string;
};
};
};
};
};
};