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