@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
388 lines • 11.4 kB
TypeScript
//#region src/theme/semantic-tokens/index.d.ts
declare const 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;
};
};
//#endregion
export { semanticTokens };
//# sourceMappingURL=index.d.ts.map