@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1,283 lines (1,281 loc) • 28.2 kB
TypeScript
import { config } from "./config.js";
import { CSSObject } from "../core/css/index.types.js";
import "../index.js";
//#region src/theme/index.d.ts
/**
* The default theme of Yamada UI.
*
* @see https://yamada-ui.com/docs/theming
*/
declare const theme: {
semanticTokens: {
colors: {
current: "currentColor";
transparent: "transparent";
bg: {
base: ["white", "black"];
contrast: ["black", "white"];
emphasized: ["black.200", "white.300"];
error: string[];
float: string[];
ghost: ["black.50", "white.50"];
info: string[];
muted: ["black.100", "white.200"];
overlay: string;
panel: string[];
subtle: ["black.50", "white.100"];
success: string[];
warning: string[];
};
border: {
base: ["black.100", "white.200/70"];
contrast: ["black", "white"];
emphasized: ["black.200", "white.300/70"];
error: string[];
info: string[];
muted: ["black.100", "white.200/70"];
subtle: ["black.50", "white.100/70"];
success: string[];
warning: string[];
};
fg: {
base: ["#171717", "#ededed"];
contrast: ["#fafafa", "#000000"];
emphasized: ["gray.600", "gray.300"];
error: string[];
info: string[];
muted: ["gray.500", "gray.400"];
subtle: ["gray.400", "gray.500"];
success: string[];
warning: string[];
};
black: {
base: "#0a0b0b";
bg: "#f8f8f8";
contrast: "white";
emphasized: "black.200";
fg: "black.800";
ghost: "black.100/50";
muted: "black.100";
outline: "black.900";
solid: "black";
subtle: "black.50";
};
white: {
base: "#ffffff";
bg: "#161616";
contrast: "black";
emphasized: "white.400/50";
fg: "white.900";
ghost: "white.200/50";
muted: "white.300/50";
outline: "white.800";
solid: "white";
subtle: "white.200/50";
};
gray: {
base: "gray.500";
bg: ["black.bg", "white.bg"];
contrast: ["white", "white"];
emphasized: ["black.200", "white.400/50"];
fg: ["black.800", "white.900"];
ghost: ["black.100/50", "white.200/50"];
muted: ["black.100", "white.300/50"];
outline: ["black.900", "white.800"];
solid: ["gray.500", "gray.800"];
subtle: ["black.50", "white.200/50"];
};
cyan: {
base: "cyan.500";
bg: ["cyan.50/40", "cyan.400/10"];
contrast: ["black", "black"];
emphasized: ["cyan.200", "cyan.700"];
fg: ["cyan.800", "cyan.100"];
ghost: ["cyan.50", "cyan.800/50"];
muted: ["cyan.100", "cyan.800"];
outline: ["cyan.600", "cyan.500"];
solid: ["cyan.400", "cyan.500"];
subtle: ["cyan.50", "cyan.800/50"];
};
emerald: {
base: "emerald.500";
bg: ["emerald.50/40", "emerald.400/10"];
contrast: ["white", "white"];
emphasized: ["emerald.200", "emerald.700"];
fg: ["emerald.700", "emerald.100"];
ghost: ["emerald.50", "emerald.800/50"];
muted: ["emerald.100", "emerald.800"];
outline: ["emerald.600", "emerald.500"];
solid: ["emerald.500", "emerald.600"];
subtle: ["emerald.50", "emerald.800/50"];
};
teal: {
base: "teal.500";
bg: ["teal.50/40", "teal.400/10"];
contrast: ["white", "white"];
emphasized: ["teal.200", "teal.700"];
fg: ["teal.700", "teal.100"];
ghost: ["teal.50", "teal.800/50"];
muted: ["teal.100", "teal.800"];
outline: ["teal.600", "teal.500"];
solid: ["teal.500", "teal.600"];
subtle: ["teal.50", "teal.800/50"];
};
green: {
base: "green.500";
bg: ["green.50/40", "green.400/10"];
contrast: ["white", "white"];
emphasized: ["green.200", "green.700"];
fg: ["green.700", "green.100"];
ghost: ["green.50", "green.900"];
muted: ["green.100", "green.800"];
outline: ["green.600", "green.500"];
solid: ["green.500", "green.600"];
subtle: ["green.50", "green.900"];
};
lime: {
base: "lime.500";
bg: ["lime.50/40", "lime.400/10"];
contrast: ["black", "black"];
emphasized: ["lime.200", "lime.700"];
fg: ["lime.800", "lime.100"];
ghost: ["lime.50", "lime.900"];
muted: ["lime.100", "lime.800"];
outline: ["lime.600", "lime.500"];
solid: ["lime.400", "lime.500"];
subtle: ["lime.50", "lime.900"];
};
sky: {
base: "sky.500";
bg: ["sky.50/40", "sky.400/10"];
contrast: ["white", "white"];
emphasized: ["sky.200", "sky.700"];
fg: ["sky.700", "sky.100"];
ghost: ["sky.50", "sky.900"];
muted: ["sky.100", "sky.800"];
outline: ["sky.600", "sky.500"];
solid: ["sky.500", "sky.600"];
subtle: ["sky.50", "sky.900"];
};
amber: {
base: "amber.500";
bg: ["amber.50/40", "amber.400/10"];
contrast: ["black", "black"];
emphasized: ["amber.200", "amber.700"];
fg: ["amber.800", "amber.100"];
ghost: ["amber.50", "amber.950/50"];
muted: ["amber.100", "amber.800"];
outline: ["amber.600", "amber.500"];
solid: ["amber.400", "amber.500"];
subtle: ["amber.50", "amber.950"];
};
blue: {
base: "blue.500";
bg: ["blue.50/40", "blue.400/10"];
contrast: ["white", "white"];
emphasized: ["blue.200", "blue.700"];
fg: ["blue.700", "blue.100"];
ghost: ["blue.50", "blue.950/50"];
muted: ["blue.100", "blue.800"];
outline: ["blue.600", "blue.500"];
solid: ["blue.500", "blue.600"];
subtle: ["blue.50", "blue.950"];
};
flashy: {
base: "flashy.500";
bg: ["flashy.50/40", "flashy.400/10"];
contrast: ["white", "white"];
emphasized: ["flashy.200", "flashy.700"];
fg: ["flashy.700", "flashy.100"];
ghost: ["flashy.50", "flashy.950/50"];
muted: ["flashy.100", "flashy.800"];
outline: ["flashy.600", "flashy.500"];
solid: ["flashy.500", "flashy.600"];
subtle: ["flashy.50", "flashy.950"];
};
fuchsia: {
base: "fuchsia.500";
bg: ["fuchsia.50/40", "fuchsia.400/10"];
contrast: ["white", "white"];
emphasized: ["fuchsia.200", "fuchsia.700"];
fg: ["fuchsia.700", "fuchsia.100"];
ghost: ["fuchsia.50", "fuchsia.950/50"];
muted: ["fuchsia.100", "fuchsia.800"];
outline: ["fuchsia.600", "fuchsia.500"];
solid: ["fuchsia.500", "fuchsia.600"];
subtle: ["fuchsia.50", "fuchsia.950"];
};
indigo: {
base: "indigo.500";
bg: ["indigo.50/40", "indigo.400/10"];
contrast: ["white", "white"];
emphasized: ["indigo.200", "indigo.700"];
fg: ["indigo.700", "indigo.100"];
ghost: ["indigo.50", "indigo.950/50"];
muted: ["indigo.100", "indigo.800"];
outline: ["indigo.600", "indigo.500"];
solid: ["indigo.500", "indigo.600"];
subtle: ["indigo.50", "indigo.950"];
};
orange: {
base: "orange.500";
bg: ["orange.50/40", "orange.400/10"];
contrast: ["white", "white"];
emphasized: ["orange.200", "orange.700"];
fg: ["orange.700", "orange.100"];
ghost: ["orange.50", "orange.950/50"];
muted: ["orange.100", "orange.800"];
outline: ["orange.600", "orange.500"];
solid: ["orange.500", "orange.600"];
subtle: ["orange.50", "orange.950"];
};
pink: {
base: "pink.500";
bg: ["pink.50/40", "pink.400/10"];
contrast: ["white", "white"];
emphasized: ["pink.200", "pink.700"];
fg: ["pink.700", "pink.100"];
ghost: ["pink.50", "pink.950/50"];
muted: ["pink.100", "pink.800"];
outline: ["pink.600", "pink.500"];
solid: ["pink.500", "pink.600"];
subtle: ["pink.50", "pink.950"];
};
purple: {
base: "purple.500";
bg: ["purple.50/40", "purple.400/10"];
contrast: ["white", "white"];
emphasized: ["purple.200", "purple.700"];
fg: ["purple.700", "purple.100"];
ghost: ["purple.50", "purple.950/50"];
muted: ["purple.100", "purple.800"];
outline: ["purple.600", "purple.500"];
solid: ["purple.500", "purple.600"];
subtle: ["purple.50", "purple.950"];
};
red: {
base: "red.500";
bg: ["red.50/40", "red.400/10"];
contrast: ["white", "white"];
emphasized: ["red.200", "red.700"];
fg: ["red.700", "red.100"];
ghost: ["red.50", "red.950/50"];
muted: ["red.100", "red.800"];
outline: ["red.600", "red.500"];
solid: ["red.500", "red.600"];
subtle: ["red.50", "red.950"];
};
rose: {
base: "rose.500";
bg: ["rose.50/40", "rose.400/10"];
contrast: ["white", "white"];
emphasized: ["rose.200", "rose.700"];
fg: ["rose.700", "rose.100"];
ghost: ["rose.50", "rose.950/50"];
muted: ["rose.100", "rose.800"];
outline: ["rose.600", "rose.500"];
solid: ["rose.500", "rose.600"];
subtle: ["rose.50", "rose.950"];
};
violet: {
base: "violet.500";
bg: ["violet.50/40", "violet.400/10"];
contrast: ["white", "white"];
emphasized: ["violet.200", "violet.700"];
fg: ["violet.700", "violet.100"];
ghost: ["violet.50", "violet.950/50"];
muted: ["violet.100", "violet.800"];
outline: ["violet.600", "violet.500"];
solid: ["violet.500", "violet.600"];
subtle: ["violet.50", "violet.950"];
};
yellow: {
base: "yellow.500";
bg: ["yellow.50/40", "yellow.400/10"];
contrast: ["black", "black"];
emphasized: ["yellow.200", "yellow.700"];
fg: ["yellow.800", "yellow.100"];
ghost: ["yellow.50", "yellow.950/50"];
muted: ["yellow.100", "yellow.800"];
outline: ["yellow.600", "yellow.500"];
solid: ["yellow.400", "yellow.500"];
subtle: ["yellow.50", "yellow.950"];
};
};
colorSchemes: {
danger: "red";
error: "red";
info: "blue";
link: "blue";
mono: ["black", "white"];
primary: ["black", "white"];
secondary: "gray";
success: "green";
warning: "orange";
};
radii: {
l1: string;
l2: string;
l3: string;
l4: string;
l5: string;
};
sizes: {
fit: string;
max: string;
min: string;
dvh: string;
dvw: string;
full: string;
lvh: string;
lvw: string;
svh: string;
svw: string;
vh: string;
vw: string;
"1/2": string;
"1/3": string;
"1/4": string;
"1/5": string;
"1/6": string;
"1/12": string;
"2/3": string;
"2/5": string;
"2/6": string;
"2/12": string;
"3/4": string;
"3/5": string;
"3/6": string;
"3/12": string;
"4/5": string;
"4/6": string;
"4/12": string;
"5/6": string;
"5/12": string;
"6/12": string;
"7/12": string;
"8/12": string;
"9/12": string;
"10/12": string;
"11/12": string;
"9xs": string;
"8xs": string;
"7xs": string;
"6xs": string;
"5xs": string;
"4xs": string;
"3xs": string;
"2xs": string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
"6xl": string;
"7xl": string;
"8xl": string;
"9xl": string;
};
spaces: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
};
};
animations: {};
aspectRatios: {
wide: string;
bronze: string;
golden: string;
landscape: string;
portrait: string;
silver: string;
square: string;
ultrawide: string;
};
blurs: {
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
};
borders: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
};
colors: {
black: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
blackAlpha: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
white: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
whiteAlpha: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
amber: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
blue: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
cyan: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
emerald: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
flashy: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
fuchsia: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
gray: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
green: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
indigo: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
lime: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
orange: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
pink: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
purple: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
red: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
rose: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
sky: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
teal: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
violet: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
yellow: {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
950: string;
};
};
durations: {
fastest: string;
faster: string;
fast: string;
moderate: string;
slow: string;
slower: string;
slowest: string;
};
easings: {
ease: string;
"ease-in": string;
"ease-in-out": string;
"ease-in-smooth": string;
"ease-out": string;
};
fonts: {
body: string;
heading: string;
mono: string;
};
fontSizes: {
"2xs": string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
"6xl": string;
"7xl": string;
"8xl": string;
"9xl": string;
};
fontWeights: {
hairline: number;
thin: number;
light: number;
normal: number;
medium: number;
semibold: number;
bold: number;
extrabold: number;
black: number;
};
gradients: {};
keyframes: {
bounce: {
"0%, 100%": {
animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)";
transform: "translateY(-25%)";
};
"50%": {
animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)";
transform: "none";
};
};
ping: {
"75%, 100%": {
opacity: "0";
transform: "scale({animation-scale, 2})";
};
};
pulse: {
"50%": {
opacity: "0.5";
};
};
spin: {
from: {
transform: "rotate(0deg)";
};
to: {
transform: "rotate(360deg)";
};
};
"bg-position": {
from: {
bgPosition: "{animation-from, 1rem} 0";
};
to: {
bgPosition: "{animation-to, 0} 0";
};
};
position: {
from: {
insetBlockStart: "{animation-from-y}";
insetInlineStart: "{animation-from-x}";
};
to: {
insetBlockStart: "{animation-to-y}";
insetInlineStart: "{animation-to-x}";
};
};
translate: {
from: {
translate: string;
};
to: {
translate: string;
};
};
"fade-in": {
from: {
opacity: "{animation-from-opacity, 0}";
};
to: {
opacity: "{animation-to-opacity, 1}";
};
};
"fade-out": {
from: {
opacity: "{animation-from-opacity, 1}";
};
to: {
opacity: "{animation-to-opacity, 0}";
};
};
"scale-in": {
from: {
scale: "{animation-from-scale, 0.95}";
};
to: {
scale: "{animation-to-scale, 1}";
};
};
"scale-out": {
from: {
scale: "{animation-from-scale, 1}";
};
to: {
scale: "{animation-to-scale, 0.95}";
};
};
"collapse-height": {
from: {
height: "{animation-height}";
};
to: {
height: "0";
};
};
"collapse-width": {
from: {
width: "{animation-width}";
};
to: {
width: "0";
};
};
"expand-height": {
from: {
height: "0";
};
to: {
height: "{animation-height}";
};
};
"expand-width": {
from: {
width: "0";
};
to: {
width: "{animation-width}";
};
};
"slide-from-bottom-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-from-left-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-from-right-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-from-top-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-bottom-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-left-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-right-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-top-full": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-from-bottom": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-from-left": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-from-right": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-from-top": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-bottom": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-left": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-right": {
from: {
translate: string;
};
to: {
translate: string;
};
};
"slide-to-top": {
from: {
translate: string;
};
to: {
translate: string;
};
};
};
letterSpacings: {
tighter: string;
tight: string;
wide: string;
wider: string;
widest: string;
};
lineHeights: {
shorter: number;
short: number;
moderate: number;
tall: number;
taller: number;
};
radii: {
"2xs": string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
full: string;
};
shadows: {
xs: [string, string];
sm: [string, string];
md: [string, string];
lg: [string, string];
xl: [string, string];
"2xl": [string, string];
inner: [string, string];
inset: [string, string];
};
sizes: {
0.5: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
4.5: string;
5: string;
5.5: string;
6: string;
6.5: string;
7: string;
7.5: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
68: string;
72: string;
76: string;
80: string;
84: string;
88: string;
92: string;
96: string;
px: string;
};
spaces: {
0.5: string;
1: string;
1.5: string;
2: string;
2.5: string;
3: string;
3.5: string;
4: string;
4.5: string;
5: string;
5.5: string;
6: string;
6.5: string;
7: string;
7.5: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
68: string;
72: string;
76: string;
80: string;
84: string;
88: string;
92: string;
96: string;
px: string;
};
zIndices: {
yamcha: number;
kurillin: number;
nappa: number;
guldo: number;
jeice: number;
burter: number;
recoome: number;
ginyu: number;
dodoria: number;
zarbon: number;
freeza: number;
vegeta: number;
sonGoku: number;
beerus: number;
};
styles: {
globalStyle: CSSObject;
layerStyles: {
active: {
opacity: number;
};
disabled: {
cursor: "not-allowed";
opacity: number;
_ripple: {
display: "none";
};
};
ghost: {
bg: "transparent";
border: "1px solid transparent";
color: "colorScheme.outline";
};
"ghost.hover": {
bg: "colorScheme.ghost";
};
hover: {
opacity: number;
};
outline: {
bg: "transparent";
border: "1px solid {colorScheme.muted}";
color: "colorScheme.outline";
};
"outline.hover": {
bg: "colorScheme.ghost";
};
panel: {
bg: "bg.panel";
borderColor: "border";
borderWidth: "1px";
};
readOnly: {
cursor: "default";
_ripple: {
display: "none";
};
};
solid: {
bg: "colorScheme.solid";
border: "1px solid transparent";
color: "colorScheme.contrast";
};
"solid.hover": {
bg: "colorScheme.solid/80";
};
subtle: {
bg: "colorScheme.subtle";
border: "1px solid transparent";
color: "colorScheme.fg";
};
"subtle.hover": {
bg: "colorScheme.muted";
};
surface: {
bg: "colorScheme.subtle";
border: "1px solid {colorScheme.muted}";
color: "colorScheme.fg";
};
"surface.hover": {
bg: "colorScheme.muted";
};
visuallyHidden: {
border: string;
clipPath: "rect(0px 0px 0px 0px)";
height: string;
margin: string;
overflow: "hidden";
padding: string;
position: "absolute";
whiteSpace: "nowrap";
width: string;
};
};
resetStyle: CSSObject;
textStyles: {
ghost: {
color: "colorScheme.outline";
};
mono: {
fontFamily: "mono";
fontWeight: "medium";
letterSpacing: "widest";
whiteSpace: "nowrap";
};
outline: {
color: "colorScheme.outline";
};
solid: {
color: "colorScheme.contrast";
};
subtle: {
color: "colorScheme.fg";
};
surface: {
color: "colorScheme.fg";
};
};
};
};
//#endregion
export { config, theme };
//# sourceMappingURL=index.d.ts.map