@chakra-ui/react
Version:
Responsive and accessible React UI components built with React and Emotion
1,822 lines (1,821 loc) • 38.7 kB
TypeScript
import { breakpoints } from "./breakpoints";
import { globalCss } from "./global-css";
import { layerStyles } from "./layer-styles";
import { animationStyles } from "./motion-styles";
import { recipes } from "./recipes";
import { slotRecipes } from "./slot-recipes";
import { textStyles } from "./text-styles";
import { keyframes } from "./tokens/keyframes";
export declare const tokens: {
aspectRatios: {
square: {
value: string;
};
landscape: {
value: string;
};
portrait: {
value: string;
};
wide: {
value: string;
};
ultrawide: {
value: string;
};
golden: {
value: string;
};
};
animations: {
spin: {
value: string;
};
ping: {
value: string;
};
pulse: {
value: string;
};
bounce: {
value: string;
};
};
blurs: {
none: {
value: string;
};
sm: {
value: string;
};
md: {
value: string;
};
lg: {
value: string;
};
xl: {
value: string;
};
"2xl": {
value: string;
};
"3xl": {
value: string;
};
"4xl": {
value: string;
};
};
borders: {
xs: {
value: string;
};
sm: {
value: string;
};
md: {
value: string;
};
lg: {
value: string;
};
xl: {
value: string;
};
};
colors: {
transparent: {
value: string;
};
current: {
value: string;
};
black: {
value: string;
};
white: {
value: string;
};
whiteAlpha: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
blackAlpha: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
gray: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
red: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
orange: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
yellow: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
green: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
teal: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
blue: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
cyan: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
purple: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
pink: {
50: {
value: string;
};
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;
};
950: {
value: string;
};
};
};
durations: {
fastest: {
value: string;
};
faster: {
value: string;
};
fast: {
value: string;
};
moderate: {
value: string;
};
slow: {
value: string;
};
slower: {
value: string;
};
slowest: {
value: string;
};
};
easings: {
"ease-in": {
value: string;
};
"ease-out": {
value: string;
};
"ease-in-out": {
value: string;
};
"ease-in-smooth": {
value: string;
};
};
fonts: {
heading: {
value: string;
};
body: {
value: string;
};
mono: {
value: string;
};
};
fontSizes: {
"2xs": {
value: string;
};
xs: {
value: string;
};
sm: {
value: string;
};
md: {
value: string;
};
lg: {
value: string;
};
xl: {
value: string;
};
"2xl": {
value: string;
};
"3xl": {
value: string;
};
"4xl": {
value: string;
};
"5xl": {
value: string;
};
"6xl": {
value: string;
};
"7xl": {
value: string;
};
"8xl": {
value: string;
};
"9xl": {
value: string;
};
};
fontWeights: {
thin: {
value: string;
};
extralight: {
value: string;
};
light: {
value: string;
};
normal: {
value: string;
};
medium: {
value: string;
};
semibold: {
value: string;
};
bold: {
value: string;
};
extrabold: {
value: string;
};
black: {
value: string;
};
};
letterSpacings: {
tighter: {
value: string;
};
tight: {
value: string;
};
wide: {
value: string;
};
wider: {
value: string;
};
widest: {
value: string;
};
};
lineHeights: {
shorter: {
value: number;
};
short: {
value: number;
};
moderate: {
value: number;
};
tall: {
value: number;
};
taller: {
value: number;
};
};
radii: {
none: {
value: string;
};
"2xs": {
value: string;
};
xs: {
value: string;
};
sm: {
value: string;
};
md: {
value: string;
};
lg: {
value: string;
};
xl: {
value: string;
};
"2xl": {
value: string;
};
"3xl": {
value: string;
};
"4xl": {
value: string;
};
full: {
value: string;
};
};
spacing: {
0.5: {
value: string;
};
1: {
value: string;
};
1.5: {
value: string;
};
2: {
value: string;
};
2.5: {
value: string;
};
3: {
value: string;
};
3.5: {
value: string;
};
4: {
value: string;
};
4.5: {
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;
};
14: {
value: string;
};
16: {
value: string;
};
20: {
value: string;
};
24: {
value: string;
};
28: {
value: string;
};
32: {
value: string;
};
36: {
value: string;
};
40: {
value: string;
};
44: {
value: string;
};
48: {
value: string;
};
52: {
value: string;
};
56: {
value: string;
};
60: {
value: string;
};
64: {
value: string;
};
72: {
value: string;
};
80: {
value: string;
};
96: {
value: string;
};
};
sizes: {
max: {
value: string;
};
min: {
value: string;
};
fit: {
value: string;
};
prose: {
value: string;
};
full: {
value: string;
};
dvh: {
value: string;
};
svh: {
value: string;
};
lvh: {
value: string;
};
dvw: {
value: string;
};
svw: {
value: string;
};
lvw: {
value: string;
};
vw: {
value: string;
};
vh: {
value: string;
};
"1/2": {
value: string;
};
"1/3": {
value: string;
};
"2/3": {
value: string;
};
"1/4": {
value: string;
};
"3/4": {
value: string;
};
"1/5": {
value: string;
};
"2/5": {
value: string;
};
"3/5": {
value: string;
};
"4/5": {
value: string;
};
"1/6": {
value: string;
};
"2/6": {
value: string;
};
"3/6": {
value: string;
};
"4/6": {
value: string;
};
"5/6": {
value: string;
};
"1/12": {
value: string;
};
"2/12": {
value: string;
};
"3/12": {
value: string;
};
"4/12": {
value: string;
};
"5/12": {
value: string;
};
"6/12": {
value: string;
};
"7/12": {
value: string;
};
"8/12": {
value: string;
};
"9/12": {
value: string;
};
"10/12": {
value: string;
};
"11/12": {
value: string;
};
0.5: {
value: string;
};
1: {
value: string;
};
1.5: {
value: string;
};
2: {
value: string;
};
2.5: {
value: string;
};
3: {
value: string;
};
3.5: {
value: string;
};
4: {
value: string;
};
4.5: {
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;
};
14: {
value: string;
};
16: {
value: string;
};
20: {
value: string;
};
24: {
value: string;
};
28: {
value: string;
};
32: {
value: string;
};
36: {
value: string;
};
40: {
value: string;
};
44: {
value: string;
};
48: {
value: string;
};
52: {
value: string;
};
56: {
value: string;
};
60: {
value: string;
};
64: {
value: string;
};
72: {
value: string;
};
80: {
value: string;
};
96: {
value: string;
};
"3xs": {
value: string;
};
"2xs": {
value: string;
};
xs: {
value: string;
};
sm: {
value: string;
};
md: {
value: string;
};
lg: {
value: string;
};
xl: {
value: string;
};
"2xl": {
value: string;
};
"3xl": {
value: string;
};
"4xl": {
value: string;
};
"5xl": {
value: string;
};
"6xl": {
value: string;
};
"7xl": {
value: string;
};
"8xl": {
value: string;
};
};
zIndex: {
hide: {
value: number;
};
base: {
value: number;
};
docked: {
value: number;
};
dropdown: {
value: number;
};
sticky: {
value: number;
};
banner: {
value: number;
};
overlay: {
value: number;
};
modal: {
value: number;
};
popover: {
value: number;
};
skipNav: {
value: number;
};
toast: {
value: number;
};
tooltip: {
value: number;
};
max: {
value: number;
};
};
cursor: {
button: {
value: string;
};
checkbox: {
value: string;
};
disabled: {
value: string;
};
menuitem: {
value: string;
};
option: {
value: string;
};
radio: {
value: string;
};
slider: {
value: string;
};
switch: {
value: string;
};
};
};
export declare const semanticTokens: {
colors: {
bg: {
DEFAULT: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
inverted: {
value: {
_light: string;
_dark: string;
};
};
panel: {
value: {
_light: string;
_dark: string;
};
};
error: {
value: {
_light: string;
_dark: string;
};
};
warning: {
value: {
_light: string;
_dark: string;
};
};
success: {
value: {
_light: string;
_dark: string;
};
};
info: {
value: {
_light: string;
_dark: string;
};
};
};
fg: {
DEFAULT: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
inverted: {
value: {
_light: string;
_dark: string;
};
};
error: {
value: {
_light: string;
_dark: string;
};
};
warning: {
value: {
_light: string;
_dark: string;
};
};
success: {
value: {
_light: string;
_dark: string;
};
};
info: {
value: {
_light: string;
_dark: string;
};
};
};
border: {
DEFAULT: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
inverted: {
value: {
_light: string;
_dark: string;
};
};
error: {
value: {
_light: string;
_dark: string;
};
};
warning: {
value: {
_light: string;
_dark: string;
};
};
success: {
value: {
_light: string;
_dark: string;
};
};
info: {
value: {
_light: string;
_dark: string;
};
};
};
gray: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
red: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
orange: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
green: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
blue: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
yellow: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
teal: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
purple: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
pink: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
cyan: {
contrast: {
value: {
_light: string;
_dark: string;
};
};
fg: {
value: {
_light: string;
_dark: string;
};
};
subtle: {
value: {
_light: string;
_dark: string;
};
};
muted: {
value: {
_light: string;
_dark: string;
};
};
emphasized: {
value: {
_light: string;
_dark: string;
};
};
solid: {
value: {
_light: string;
_dark: string;
};
};
focusRing: {
value: {
_light: string;
_dark: string;
};
};
};
};
shadows: {
xs: {
value: {
_light: string;
_dark: string;
};
};
sm: {
value: {
_light: string;
_dark: string;
};
};
md: {
value: {
_light: string;
_dark: string;
};
};
lg: {
value: {
_light: string;
_dark: string;
};
};
xl: {
value: {
_light: string;
_dark: string;
};
};
"2xl": {
value: {
_light: string;
_dark: string;
};
};
inner: {
value: {
_light: string;
_dark: string;
};
};
inset: {
value: {
_light: string;
_dark: string;
};
};
};
radii: {
l1: {
value: string;
};
l2: {
value: string;
};
l3: {
value: string;
};
};
};
export declare const cssVarsPrefix = "chakra";
export declare const cssVarsRoot = ":where(html, .chakra-theme)";
export declare const defaultThemeConfig: import("..").SystemConfig;
export { recipes, slotRecipes, breakpoints, keyframes, textStyles, layerStyles, animationStyles, globalCss, };
export * from "./recipes.export";
export * from "./slot-recipes.export";