@veracity/vui
Version:
Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.
3,433 lines • 70.5 kB
TypeScript
import { TagContainerStyles } from "../tag/tag.types.js";
import { ContainerStyles } from "../button/button.types.js";
import "../index.js";
//#region src/theme/defaultTheme.d.ts
declare const defaultTheme: {
animations: {
none: string;
bounce: string;
fadeDown: string;
fadeIn: string;
fadeLeft: string;
fadeLeftLong: string;
fadeOut: string;
fadeRight: string;
fadeRightLong: string;
fadeUp: string;
pulse: string;
spin: string;
};
borders: {};
colors: {
buttonTypePrimaryDefaultBorderColorDark: string;
buttonTypePrimaryDefaultBackgroundColorDark: string;
buttonTypePrimaryDefaultTextColorDark: string;
buttonTypePrimaryHoverBackgroundColorDark: string;
buttonTypePrimaryHoverBorderColorDark: string;
buttonTypePrimaryHoverTextColorDark: string;
buttonTypePrimaryActiveBackgroundColorDark: string;
buttonTypePrimaryActiveBorderColorDark: string;
buttonTypePrimaryActiveTextColorDark: string;
buttonTypePrimaryDefaultBorderColorLight: string;
buttonTypePrimaryDefaultBackgroundColorLight: string;
buttonTypePrimaryDefaultTextColorLight: string;
buttonTypePrimaryFocusOutline: string;
buttonTypePrimaryHoverBackgroundColorLight: string;
buttonTypePrimaryHoverBorderColorLight: string;
buttonTypePrimaryHoverTextColorLight: string;
buttonTypePrimaryActiveBackgroundColorLight: string;
buttonTypePrimaryActiveBorderColorLight: string;
buttonTypePrimaryActiveTextColorLight: string;
buttonTypeSecondaryDefaultBorderColorDark: string;
buttonTypeSecondaryDefaultBackgroundColorDark: string;
buttonTypeSecondaryDefaultTextColorDark: string;
buttonTypeSecondaryFocusOutline: string;
buttonTypeSecondaryHoverBackgroundColorDark: string;
buttonTypeSecondaryHoverBorderColorDark: string;
buttonTypeSecondaryHoverTextColorDark: string;
buttonTypeSecondaryActiveBackgroundColorDark: string;
buttonTypeSecondaryActiveBorderColorDark: string;
buttonTypeSecondaryActiveTextColorDark: string;
buttonTypeSecondaryDefaultBorderColorLight: string;
buttonTypeSecondaryDefaultBackgroundColorLight: string;
buttonTypeSecondaryDefaultTextColorLight: string;
buttonTypeSecondaryHoverBackgroundColorLight: string;
buttonTypeSecondaryHoverBorderColorLight: string;
buttonTypeSecondaryHoverTextColorLight: string;
buttonTypeSecondaryActiveBackgroundColorLight: string;
buttonTypeSecondaryActiveBorderColorLight: string;
buttonTypeSecondaryActiveTextColorLight: string;
buttonTypeTertiaryDefaultBorderColorDark: string;
buttonTypeTertiaryDefaultBackgroundColorDark: string;
buttonTypeTertiaryDefaultTextColorDark: string;
buttonTypeTertiaryHoverBackgroundColorDark: string;
buttonTypeTertiaryHoverBorderColorDark: string;
buttonTypeTertiaryHoverTextColorDark: string;
buttonTypeTertiaryFocusOutline: string;
buttonTypeTertiaryActiveBackgroundColorDark: string;
buttonTypeTertiaryActiveBorderColorDark: string;
buttonTypeTertiaryActiveTextColorDark: string;
buttonTypeTertiaryDefaultBorderColorLight: string;
buttonTypeTertiaryDefaultBackgroundColorLight: string;
buttonTypeTertiaryDefaultTextColorLight: string;
buttonTypeTertiaryHoverBackgroundColorLight: string;
buttonTypeTertiaryHoverBorderColorLight: string;
buttonTypeTertiaryHoverTextColorLight: string;
buttonTypeTertiaryActiveBackgroundColorLight: string;
buttonTypeTertiaryActiveBorderColorLight: string;
buttonTypeTertiaryActiveTextColorLight: string;
buttonDisabledCursor: string;
buttonDisabledOpacity: string;
darkBlue: {
95: string;
90: string;
85: string;
80: string;
75: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
18: string;
15: string;
10: string;
5: string;
main: string;
};
digiGreen: {
95: string;
90: string;
85: string;
80: string;
78: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
earth: {
95: string;
89: string;
85: string;
80: string;
75: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
energyRed: {
95: string;
90: string;
85: string;
80: string;
75: string;
70: string;
65: string;
60: string;
54: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
focusColor: string;
landGreen: {
95: string;
90: string;
85: string;
80: string;
75: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
41: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
sandstone: {
97: string;
95: string;
90: string;
85: string;
79: string;
75: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
seaBlue: {
95: string;
90: string;
85: string;
80: string;
75: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
28: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
skyBlue: {
97: string;
95: string;
90: string;
85: string;
80: string;
77: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
active: string;
hover: string;
selected: string;
};
sunflower: {
95: string;
90: string;
85: string;
80: string;
73: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
terracotta: {
95: string;
90: string;
85: string;
80: string;
75: string;
70: string;
65: string;
60: string;
55: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
warmGrey: {
95: string;
90: string;
85: string;
80: string;
75: string;
70: string;
65: string;
60: string;
56: string;
50: string;
45: string;
40: string;
35: string;
30: string;
25: string;
20: string;
15: string;
10: string;
5: string;
main: string;
};
blue: {
10: string;
20: string;
30: string;
40: string;
50: string;
60: string;
70: string;
80: string;
90: string;
100: string;
};
green: {
10: string;
20: string;
30: string;
40: string;
50: string;
60: string;
70: string;
80: string;
90: string;
100: string;
};
grey: {
10: string;
20: string;
30: string;
40: string;
50: string;
60: string;
70: string;
80: string;
90: string;
100: string;
};
pink: {
10: string;
20: string;
30: string;
40: string;
50: string;
60: string;
70: string;
80: string;
90: string;
100: string;
};
prussian: {
10: string;
20: string;
30: string;
40: string;
50: string;
60: string;
70: string;
80: string;
90: string;
100: string;
};
red: {
10: string;
20: string;
30: string;
40: string;
50: string;
60: string;
70: string;
80: string;
90: string;
100: string;
};
yellow: {
10: string;
20: string;
30: string;
40: string;
50: string;
60: string;
70: string;
80: string;
90: string;
100: string;
};
disabled: {
bg: string;
border: string;
color: string;
};
};
durations: {
instant: string;
fast: string;
normal: string;
slow: string;
};
fonts: {
readonly dnvDisplay: `'DNV Display'`;
readonly gantari: `Gantari, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`;
readonly mono: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;`;
};
fontSizes: {
xs: number;
sm: number;
md: number;
lg: number;
};
fontWeights: {
regular: string;
medium: string;
demi: string;
};
gridTemplateColumns: {
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
};
gridTemplateRows: {
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
};
radii: {
none: number;
sm: number;
md: number;
lg: number;
xl: number;
round: number;
};
ringWidths: {};
screens: {
xs: number;
sm: number;
md: number;
lg: number;
xl: number;
xxl: number;
'2xl': number;
};
shadows: {
xs: string;
sm: string;
md: string;
lg: string;
inner: string;
none: string;
'0': string;
'1': string;
'2': string;
'3': string;
'4': string;
t1: string;
t2: string;
t3: string;
t4: string;
r1: string;
r2: string;
r3: string;
r4: string;
l1: string;
l2: string;
l3: string;
l4: string;
modal: string;
};
sizes: {};
spaces: {
0: number;
0.5: string;
0.75: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
14: string;
16: string;
20: string;
24: string;
};
transformers: {
border: (value: number | string, { props }: any) => string;
space: (value: string | number) => string;
};
transforms: {};
transitions: {};
timingFunctions: {};
zIndices: {
header: number;
tooltip: number;
drawer: number;
modal: number;
popover: number;
toast: number;
raised: number;
};
components: {
Accordion: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {
item: {
minH: string;
};
itemHorizontal: {
space: string;
};
};
md: {
item: {
minH: string;
};
itemHorizontal: {
space: string;
};
};
lg: {
item: {
minH: string;
};
itemHorizontal: {
space: string;
};
};
};
variants: {
light: {
container: {
bg: string;
borderColor: string;
};
item: {
borderColor: string;
itemTitleHoverBg: string;
expandedItemTitleHoverBg: string;
};
icon: {
color: string;
};
};
dark: {
container: {
bg: string;
borderColor: string;
color: string;
};
item: {
borderColor: string;
disabledBg: string;
itemTitleHoverBg: string;
expandedItemTitleHoverBg: string;
};
icon: {
color: string;
};
};
};
};
Avatar: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
sizes: {
sm: {
fontSize: string;
h: number;
iconSize: string;
};
md: {
fontSize: string;
h: number;
iconSize: string;
};
lg: {
fontSize: string;
h: number;
iconSize: string;
};
xl: {
fontSize: string;
h: number;
iconSize: string;
};
xxl: {
fontSize: string;
h: number;
iconSize: string;
};
};
variants: {
subtleGrey: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleBlue: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
subtleRed: {
bg: string;
borderColor: string;
hoverBg: string;
activeBg: string;
color: string;
};
subtleYellow: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
subtleGreen: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleLavender: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleEucalyptus: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleTerracotta: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
solidBlue: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidDarkBlue: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidRed: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidYellow: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidGreen: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidLavender: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
solidEucalyptus: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
solidTerracotta: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
primaryLight: {
bg: string;
borderColor: string;
color: string;
hoverBg: string;
hoverBorderColor: string;
hoverColor: string;
activeBg: string;
activeBorderColor: string;
activeColor: string;
};
};
};
Badge: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
color: string;
fontWeight: string;
};
variants: {};
};
Box: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Breadcrumbs: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
sizes: {
xs: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
sm: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
md: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
lg: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
};
variants: {
dark: {
item: {
color: string;
};
main: {
bg: string;
};
separator: {
pathFill: string;
};
};
white: {
item: {
color: string;
};
main: {
bg: string;
};
separator: {
pathFill: string;
};
};
light: {
item: {
color: string;
};
main: {
bg: string;
};
separator: {
pathFill: string;
};
};
};
};
Button: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
md: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
lg: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
xl: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
};
variants: Record<string, Record<string, ContainerStyles>>;
};
Calendar: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Card: {
baseStyle: {
bg: string;
borderRadius: number;
ring: number;
ringColor: string;
boxShadow: string;
};
defaultProps: {};
sizes: {};
variants: {};
};
Chat: {
baseStyle: {
chat: {
flexDirection: string;
w: string;
height: string;
};
messages: {
flexDirection: string;
overflowY: string;
position: string;
w: string;
};
suggestions: {
display: string;
textAlign: string;
width: string;
};
};
defaultProps: {};
sizes: {};
variants: {};
};
Checkbox: {
baseStyle: {
control: {
color: "sandstone.60";
hoverColor: "seaBlue.20";
};
container: {
alignItems: string;
};
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
md: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
lg: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
};
variants: {};
};
DatePicker: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Dialog: {
baseStyle: {
closeButton: {
'--vui-dismiss-fg': string;
};
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
md: {
container: {
maxW: number;
};
};
lg: {
container: {
maxW: number;
};
};
fullWidth: {};
};
variants: {};
};
Divider: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Display: {
baseStyle: {
fontFamily: string;
fontWeight: number;
fontSize: string;
lineHeight: string;
};
defaultProps: {
size: string;
};
sizes: {
sm: {
fontSize: string;
};
md: {
fontSize: string;
};
lg: {
fontSize: string;
};
xl: {
fontSize: string;
};
'2xl': {
fontSize: string;
};
};
variants: {};
};
DismissButton: {
defaultProps: {
size: string;
};
sizes: {
xs: {
h: number;
w: number;
p: string;
};
sm: {
h: number;
w: number;
p: string;
};
md: {
h: number;
w: number;
p: string;
};
lg: {
h: number;
w: number;
p: string;
};
};
};
DragAndDrop: {
baseStyle: {
borderWidth: number;
borderStyle: string;
borderColor: string;
bg: string;
color: string;
hoverBg: string;
};
defaultProps: {
variant: string;
};
sizes: {};
variants: {
default: {};
outlined: {
borderColor: string;
borderStyle: string;
};
};
};
Drawer: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Footer: {
baseStyle: {
link: {};
};
defaultProps: {
variant: string;
};
parts: string[];
sizes: {};
variants: {
default: {
container: {
bg: string;
color: string;
};
link: {
color: string;
};
};
developer: {
container: {
bg: string;
color: string;
};
link: {
color: string;
};
};
light: {
container: {
bg: string;
color: string;
};
row: {
color: string;
};
link: {
color: string;
};
heading: {
color: string;
};
};
};
};
Grid: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Header: {
baseStyle: {};
defaultProps: {
variant: string;
};
parts: string[];
sizes: {};
variants: {
default: {
container: {
borderColor: string;
};
createAccount: {
link: {
variant: string;
};
};
linkItem: {
container: {
hoverBg: string;
activeBg: string;
activeBorderColor: string;
};
link: {
size: string;
color: string;
borderColor: string;
hoverColor: string;
activeColor: string;
};
};
logo: {
svg: {
pathFill: string;
};
};
divider: {
color: string;
};
mobileToggle: {
color: string;
hoverColor: string;
activeColor: string;
};
notifications: {
container: {
color: string;
hoverColor: string;
};
};
services: {
button: {
color: string;
hoverColor: string;
activeColor: string;
};
list: {
variant: string;
};
};
signIn: {
background: string;
};
};
dark: {
container: {
bg: string;
borderBottom: number;
};
createAccount: {
link: {
variant: string;
};
text: {
color: string;
};
};
account: {
trigger: {
variant: string;
intent: string;
};
};
divider: {
borderColor: string;
};
linkItem: {
container: {
hoverBg: string;
activeBg: string;
activeBorderColor: string;
};
link: {
size: string;
color: string;
borderColor: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
activeColor: string;
};
};
logo: {
svg: {
pathFill: string;
};
};
mainLinks: {
color: {
md: string;
};
};
mobileContent: {
top: string;
};
mobileToggle: {
color: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
activeColor: string;
};
notifications: {
container: {
variant: string;
color: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
borderColor: string;
};
icon: {
color: string;
};
};
services: {
button: {
color: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
activeColor: string;
};
list: {
variant: string;
};
};
signIn: {
button: {
variant: string;
intent: string;
};
colorScheme: string;
};
};
};
};
Heading: {
baseStyle: {
color: string;
};
defaultProps: {
size: string;
};
sizes: {
title: {
as: string;
fontFamily: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h1: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
lead: {
as: string;
color: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h2: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h3: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
h4: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
h5: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h6: {
as: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
};
'2xl': {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
xl: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
lg: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
md: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
sm: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
xs: {
as: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
};
};
variants: {};
};
Icon: {
baseStyle: {};
defaultProps: {
size: string;
};
sizes: {
xxs: {
height: number;
width: number;
};
xs: {
height: number;
width: number;
};
sm: {
height: number;
width: number;
};
md: {
height: number;
width: number;
};
lg: {
height: number;
width: number;
};
xl: {
height: number;
width: number;
};
xxl: {
height: number;
width: number;
};
};
variants: {
static: {};
spinning: {
animation: string;
};
};
};
Image: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Input: {
baseStyle: {
container: {
focusWithinRing: number;
color: "sandstone.10";
fontSize: string;
lineHeight: string;
};
icon: {
color: "warmGrey.30";
};
input: {
placeholderTextColor: "sandstone.55";
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
md: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
lg: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
xl: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
};
variants: {
grey: {
container: {
borderColor: "sandstone.60";
focusWithinRingColor: "focusColor";
};
};
green: {
container: {
borderColor: "landGreen.35";
focusWithinRingColor: "landGreen.35";
};
};
red: {
container: {
borderColor: "energyRed.45";
focusWithinRingColor: "energyRed.45";
};
};
};
};
Label: {
baseStyle: {
helper: {
ml: string;
fontWeight: number;
lineHeight: number;
};
};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Link: {
baseStyle: {
container: {
display: string;
h: string;
};
icon: {
h: string;
position: string;
size: string;
top: string;
};
text: {
fontSize: string;
};
};
defaultProps: {
variant: string;
};
parts: string[];
sizes: {
xs: {
container: {
fontSize: string;
lineHeight: string;
};
icon: {
size: string;
};
};
sm: {
container: {
fontSize: string;
lineHeight: string;
};
};
md: {
container: {
fontSize: string;
lineHeight: string;
};
};
lg: {
container: {
fontSize: string;
lineHeight: string;
};
};
};
variants: {
dark: {
container: {
color: string;
};
};
light: {
container: {
color: string;
};
};
white: {
container: {
color: string;
};
};
plain: {
container: {
hoverTextDecoration: string;
};
};
};
};
List: {
baseStyle: {
item: {
color: string;
activeBg: string;
hoverBg: string;
selectedBg: string;
px: number;
};
heading: {
color: string;
};
};
defaultProps: {
size: string;
button: {
size: string;
};
variant: string;
};
parts: string[];
sizes: {
sm: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
md: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
lg: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
xl: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
xxl: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
};
variants: {
default: {};
ordered: {
container: {
as: string;
listStyleType: string;
pl: number;
};
item: {
display: string;
};
};
unordered: {
container: {
as: string;
listStyleType: string;
pl: number;
};
item: {
display: string;
};
};
blue: {
heading: {
color: string;
};
};
};
};
Markdown: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
MarkdownEditor: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Menu: {
baseStyle: {
fontWeight: number;
lineHeight: string;
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {
button: {
size: string;
};
list: {
size: string;
};
};
md: {
button: {
size: string;
};
list: {
size: string;
};
};
lg: {
button: {
size: string;
};
list: {
size: string;
};
};
};
variants: {};
};
Message: {
baseStyle: {
display: string;
};
defaultProps: {
variant: string;
size: string;
};
sizes: {
sm: {
iconSize: string;
fontSize: string;
};
md: {
iconSize: string;
fontSize: string;
};
};
variants: {
info: {
color: string;
};
warning: {
color: string;
};
danger: {
color: string;
};
success: {
color: string;
};
};
};
Modal: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Notification: {
baseStyle: {
container: {
borderRadius: string;
borderWidth: string;
bg: string;
borderColor: string;
color: string;
px: string;
py: string;
gap: string;
};
content: {
py: string;
};
button: {};
icon: {
py: string;
};
text: {
flex: string;
fontSize: string;
lineHeight: string;
fontWeight: number;
minW: number;
};
title: {
mb: string;
};
actionBox: {
mt: string;
};
};
parts: string[];
sizes: {};
variants: {
subtleBlue: object;
subtleRed: object;
subtleYellow: object;
subtleGreen: object;
bannerBlue: object;
bannerRed: object;
bannerYellow: object;
bannerGreen: object;
};
};
P: {
baseStyle: {};
defaultProps: {
size: string;
};
sizes: {
xs: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
sm: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
md: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
lg: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
};
variants: {
mono: {
fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;";
};
};
};
Pagination: {
baseStyle: {
button: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
minW: number;
};
ellipsis: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
};
goToPage: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
};
prevNext: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
};
results: {
color: string;
};
};
defaultProps: {};
parts: string[];
variants: {};
};
Panel: {
baseStyle: {
borderRadius: number;
};
defaultProps: {
variant: string;
};
sizes: {};
variants: {
elevated: {
boxShadow: string;
};
outlined: {
border: number;
borderColor: string;
};
};
};
Progress: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
md: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
lg: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
xl: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
};
variants: {
primary: {
bg: string;
color: string;
};
green: {
bg: string;
color: string;
};
red: {
bg: string;
color: string;
};
};
};
ProgressCircular: {
baseStyle: {
color: string;
};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
md: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
lg: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
xl: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
};
variants: {
primary: {
stroke: {
main: string;
progress: string;
};
};
green: {
stroke: {
main: string;
progress: string;
};
};
red: {
stroke: {
main: string;
progress: string;
};
};
};
};
Definition: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
lineHeight: string;
};
dt: {
fontSize: string;
spaceX: number;
};
dd: {
fontSize: string;
spaceX: number;
};
icon: {
size: string;
mx: number;
my: string;
};
};
md: {
container: {
fontSize: string;
lineHeight: string;
};
dt: {
fontSize: string;
spaceX: number;
};
dd: {
fontSize: string;
spaceX: number;
};
icon: {
size: string;
mx: number;
my: string;
};
};
};
variants: {
light: {
container: {
color: string;
};
};
dark: {
container: {
bg: string;
color: string;
};
};
};
};
Popover: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Radio: {
baseStyle: {
control: {
color: "sandstone.60";
hoverColor: "seaBlue.20";
};
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
md: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
lg: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
};
variants: {};
};
Range: {
baseStyle: {
container: {
w: number;
};
thumb: {
bg: string;
border: string;
borderRadius: string;
h: string;
lineHeight: string;
w: string;
textAlign: string;
transitionDuration: string;
};
thumbValue: {
position: string;
top: string;
w: string;
};
track: {
bg: "seaBlue.28";
borderRadius: string;
transitionDuration: string;
};
};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Rating: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
icon: {
size: string;
};
};
md: {
icon: {
size: string;
};
};
lg: {
icon: {
size: string;
};
};
};
variants: {
yellow: {
color: string;
};
blue: {
color: string;
};
};
};
Select: {
baseStyle: {
button: {
bg: string;
hoverBg: string;
activeBg: string;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
md: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
lg: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
xl: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
};
variants: {
outlined: {
button: {
borderColor: string;
hoverBorderColor: string;
};
};
text: {
button: {
borderColor: string;
hoverBorderColor: string;
};
};
};
};
Sidemenu: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
md: {
item: {
minH: string;
};
};
lg: {
item: {
minH: string;
};
};
};
variants: {
light: {
container: {
bg: string;
};
bottom: {
borderTop: string;
};
sidemenuTop: {
borderBottom: string;
};
item: {};
};
dark: {
container: {
bg: string;
color: string;
};
bottom: {
borderTop: string;
};
sidemenuTop: {
borderBottom: string;
};
item: {};
};
};
};
Skeleton: {
baseStyle: {
bg: string;
};
defaultProps: {
size: string;
variant: string;
};
sizes: {
xs: {
h: number;
};
sm: {
h: number;
};
md: {
h: number;
};
lg: {
h: number;
};
};
variants: {
circle: {
borderRadius: string;
};
rect: {
borderRadius: string;
w: string;
};
};
};
StepIndicator: {
baseStyle: {
button: {
borderColor: string;
};
};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {};
md: {};
};
variants: {
active: {
button: {
bg: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
completed: {
button: {
bg: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
optional: {
button: {
bg: string;
borderColor: string;
color: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
pending: {
button: {
bg: string;
color: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
error: {
button: {
bg: string;
color: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
};
};
StepperHorizontal: {
baseStyle: {};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {};
md: {};
};
variants: {};
};
StepperVertical: {
baseStyle: {};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {};
md: {};
};
variants: {};
};
Spinner: {
baseStyle: {
container: {
padding: number;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
xxs: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xs: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
sm: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
md: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
lg: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xxl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xxxl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xxxxl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
};
variants: {
light: {
circle: {
borderColor: string;
borderTopColor: string;
};
text: {
color: string;
};
};
dark: {
container: {
bg: string;
};
circle: {
borderColor: string;
borderTopColor: string;
};
text: {
color: string;
};
};
};
};
SidemenuV2: {
baseStyle: {
container: {
display: string;
flexDirection: string;
overflow: string;
transition: string;
};
content: {
flex: number;
overflowY: string;
overflowX: string;
};
bottom: {
flexShrink: number;
borderTop: string;
display: string;
alignItems: string;
};
item: {
display: string;
alignItems: string;
justifyContent: string;
flexDirection: string;
w: string;
border: string;
cursor: string;
transition: string;
textDecoration: string;
outline: string;
px: number;
borderLeft: string;
};
sidemenuTop: {
display: string;
alignItems: string;
justifyContent: string;
padding: string;
minHeight: string;
};
toggleButton: {
baseHeight: number;
basePadding: number;
expandedPaddingMultiplier: number;
collapsedWidth: string;
expandedWidth: string;
transition: string;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
toggleButton: {
baseHeight: number;
basePadding: number;
};
};
md: {
toggleButton: {
baseHeight: number;
basePadding: number;
};
};
lg: {
toggleButton: {
baseHeight: number;
basePadding: number;
};
};
};
variants: {
light: {
container: {
bg: string;
};
toggleButton: {
variant: string;
hoverBg: string;
};
item: {
color: string;
};
button: {
bg: string;
hoverBg: string;
activeBg: string;
disabledBg: string;
borderColor: string;
hoverBorderColor: string;
activeBorderColor: string;
color: string;
hoverColor: string;
activeColor: string;
disabledColor: string;
disabledBorderColor: string;
disabledOpacity: string;
};
};
dark: {
container: {
bg: string;
color: string;
boxShadow: string;
};
bottom: {
borderTopColor: string;
};
sidemenuTop: {
borderBottom: string;
bg: string;
};
toggleButton: {
variant: string;
};
item: {
color: string;
};
button: {
bg: string;
hoverBg: string;
activeBg: string;
disabledBg: string;
borderColor: string;
hoverBorderColor: string;
activeBorderColor: string;
color: string;
hoverColor: string;
activeColor: string;
disabledColor: string;
disabledBorderColor: string;
disabledOpacity: string;
};
};
};
};
Switch: {
baseStyle: {
button: {
thumb: {
bg: string;
};
track: {
ring: number;
};
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
md: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
lg: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
xl: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
};
variants: {
primary: {
button: {
track: {
bg: string;
};
};
};
green: {
button: {
track: {
bg: string;
};
};
};
red: {
button: {
track: {
bg: string;
};
};
};
};
};
T: {
baseStyle: {};
defaultProps: {
size: string;
lineHeight: string;
};
sizes: {
xs: {
fontSize: string;
};
sm: {
fontSize: string;
};
md: {
fontSize: string;
};
lg: {
fontSize: string;
};
xl: {
fontSize: string;
};
};
variants: {
label: {
fontWeight: string;
lineHeight: string;
};
input: {
fontWeight: string;
lineHeight: string;
};
caption: {
fontWeight: string;
lineHeight: string;
};
navigation: {
fontWeight: string;
lineHeight: string;
};
caps: {
textTransform: string;
fontWeight: string;
lineHeight: string;
};
button: {
fontWeight: string;
lineHeight: string;
};
mono: {
fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;";
};
};
};
Table: {
baseStyle: {
th: {
fontSize: number;
fontWeight: number;
color: string;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
lg: {
tr: {
h: number;
};
};
md: {
tr: {
h: number;
};
};
sm: {
tr: {
h: number;
};
};
};
variants: {
bordered: {
td: {
borderBottom: string;
};
};
striped: {};
basic: {
td: {
borderBottom: string;
};
};
};
};
Tabs: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {
sm: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: string;
py: string;
};
};
md: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: string;
py: string;
};
};
lg: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: number;
py: string;
};
};
xl: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: number;
py: string;
};
};
xxl: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: number;
py: string;
};
};
};
variants: {};
};
Tag: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
parts: string[];
sizes: {
xs: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
sm: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
md: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
lg: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
};
variants: Record<string, Record<string, TagContainerStyles>>;
};
TagToggle: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
parts: string[];
sizes: {
xs: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
size: string;
};
};
sm: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
size: string;
};
};
md: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
size: string;
};
};
};
variants: {
subtle: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
subtleSelected: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
solid: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
solidSelected: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
};
};
Textarea: {
baseStyle: {
textarea: {
focusWithinRing: number;
color: "sandstone.10";
};
input: {
color: {
placeholder: "sandstone.55";
};
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
md: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
lg: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
xl: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
};
variants: {
grey: {
textarea: {
borderColor: "sandstone.60";
focusWithinRingColor: "focusColor";
};
};
green: {
textarea: {
borderColor: "landGreen.35";
focusWithinRingColor: "landGreen.35";
};
};
red: {
textarea: {
borderColor: "energyRed.45";
focusWithinRingColor: "energyRed.45";
};
};
};
};
Tree: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
xl: {
item: {
fontSize: string;
height: number;
lineHeight: string;
py: string;
};
icon: {
height: number;
width: number;
};
};
};
variants: {
default: {
container: {
bg: string;
};
firstLevelItem: {
bg: string;
color: string;
activeColor: string;
activeBg: string;
hoverBg: string;
};
item: {
bg: string;
color: string;
activeColor: string;
activeBg: string;
hoverBg: string;
selectedBg: string;
px: number;
};
};
dark: {
container: {
bg: string;
color: string;
};
firstLevelItem: {
bg: string;
color: string;
activeBg: string;
activeColor: string;
hoverBg: string;
hoverColor: string;
};
item: {
bg: string;
color: string;
activeBg: string;
activeColor: string;
hoverBg: string;
hoverColor: string;
};
};
};
};
};
};
//#endregion
export { defaultTheme as default };
//# sourceMappingURL=defaultTheme.d.ts.map