@tabula/ui-theme
Version:
Theme provider for the UI kit
359 lines (358 loc) • 9.06 kB
TypeScript
export type Font = {
font: string;
fontFamily: string;
fontSize: string;
fontWeight: string;
letterSpacing: string;
lineHeight: string;
textTransform: string;
};
export declare const layers: readonly ["reset", "components"];
export declare const tokens: {
colors: {
accent: {
100: string;
30: string;
10: string;
};
accentAlpha: {
70: string;
60: string;
40: string;
15: string;
10: string;
};
accentSecondaryGrey: {
800: string;
600: string;
400: string;
};
accentShades: {
secondary1: string;
secondary2: string;
secondary3: string;
secondary4: string;
};
background: {
canvas: string;
controlsDetails: string;
data: string;
dropdown: string;
panels: string;
primaryContent: string;
table: string;
};
status: {
error: string;
idle: string;
running: string;
success: string;
warning: string;
};
borderControl: {
canvasFlowPath: string;
dangerFocus: string;
default: string;
error: string;
errorFocus: string;
focus2: string;
focus: string;
hover: string;
selection: string;
warning: string;
warningFocus: string;
};
brand: {
postgres: string;
salesforce: string;
snowflake: string;
tabulaDrive: string;
tomatDrive: string;
};
chart: {
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;
19: string;
20: string;
21: string;
22: string;
23: string;
24: string;
25: string;
26: string;
};
code: {
backgroundIconData: string;
backgroundIconFunction: string;
backgroundRegexHelpLetters: string;
columnBackground: string;
function: string;
functionOutside: string;
numbers: string;
numbersOutside: string;
regex: string;
sql: string;
stringLight: string;
stringLightOutsideFocus: string;
};
codeColumns: {
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
};
columnMenu: {
press: string;
hover: string;
};
content: {
primary: string;
secondary: string;
tertiary: string;
disabled: string;
disabledLight: string;
contrast: string;
contrastSecondary: string;
contrastTertiary: string;
contrastDisabled: string;
accentActive: string;
accentActiveHover: string;
counting: string;
placeholder: string;
success: string;
warning: string;
warningLarge: string;
error: string;
};
fillControl: {
accentSecondary: string;
ai: {
from: string;
to: string;
};
aiPrimaryHover: {
from: string;
to: string;
};
aiSecondaryHover: {
from: string;
to: string;
};
aiPrimaryPressed: {
from: string;
to: string;
};
aiSecondaryPressed: {
from: string;
to: string;
};
btnDanger: string;
btnDangerHover: string;
btnDangerPressed: string;
btnDisabled: string;
btnPrimary: string;
btnPrimaryHover: string;
btnPrimaryPressed: string;
checkbox: string;
};
icons: {
ai: {
primary: {
from: string;
to: string;
};
secondary: {
from: string;
to: string;
};
};
clean: {
primary: string;
secondary: string;
};
disabled: {
primary: string;
secondary: string;
};
enrich: {
primary: string;
secondary: string;
tertiary: string;
};
group: {
clean: string;
transformation: string;
};
misc: {
folder: string;
};
output: {
primary: string;
secondary: string;
};
source: {
primary: string;
secondary: string;
};
tomat: {
primary: string;
secondary: string;
};
transformation: {
primary: string;
secondary: string;
tertiary: string;
};
};
indexed: {
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;
};
neutral: {
1000: string;
800: string;
600: string;
500: string;
300: string;
200: string;
150: string;
100: string;
50: string;
30: string;
0: string;
};
neutralAlpha: {
40: string;
20: string;
15: string;
10: string;
7: string;
5: string;
3: string;
};
table: {
labelPreview: string;
backgroundHeader: string;
backgroundHeaderHover: string;
borderHeader: string;
borderCells: string;
backgroundCells: string;
labelNew: string;
borderNew: string;
backgroundNew: string;
labelRemove: string;
borderRemove: string;
backgroundRemove: string;
selectionLabel: string;
borderSelection: string;
backgroundSelection: string;
sourceLabel: string;
borderSource: string;
backgroundSource: string;
};
whiteAlpha: {
80: string;
70: string;
50: string;
30: string;
20: string;
15: string;
10: string;
};
shadow: {
16: string;
12: string;
8: string;
6: string;
4: string;
};
};
duration: {
fast: {
1: string;
2: string;
};
moderate: {
1: string;
2: string;
};
slow: {
1: string;
2: string;
};
};
easing: {
standard: {
productive: string;
expressive: string;
};
entrance: {
productive: string;
expressive: string;
};
exit: {
productive: string;
expressive: string;
};
};
fonts: {
sansSerif: {
bold12: Font;
bold10: Font;
semiBold18: Font;
semiBold14: Font;
semiBold12: Font;
semiBold10: Font;
medium32: Font;
medium24: Font;
medium18: Font;
medium14: Font;
medium12: Font;
medium10: Font;
regular24: Font;
regular18: Font;
regular14: Font;
regular12: Font;
};
monospace: {
bold12: Font;
bold10: Font;
semiBold14: Font;
semiBold12: Font;
regular12: Font;
regular10: Font;
};
};
};