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