@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
308 lines (306 loc) • 5.47 kB
JavaScript
import { defineTokens } from "../../core/system/config.js";
//#region src/theme/tokens/colors.ts
const colors = defineTokens.colors({
black: {
50: "tint(#000, 5)",
100: "tint(#000, 10)",
200: "tint(#000, 20)",
300: "tint(#000, 30)",
400: "tint(#000, 40)",
500: "tint(#000, 50)",
600: "tint(#000, 60)",
700: "tint(#000, 70)",
800: "tint(#000, 80)",
900: "tint(#000, 90)",
950: "tint(#000, 95)"
},
blackAlpha: {
50: "rgb(0, 0, 0/ .05)",
100: "rgb(0, 0, 0/ .1)",
200: "rgb(0, 0, 0/ .2)",
300: "rgb(0, 0, 0/ .3)",
400: "rgb(0, 0, 0/ .4)",
500: "rgb(0, 0, 0/ .5)",
600: "rgb(0, 0, 0/ .6)",
700: "rgb(0, 0, 0/ .7)",
800: "rgb(0, 0, 0/ .8)",
900: "rgb(0, 0, 0/ .9)",
950: "rgb(0, 0, 0/ .95)"
},
white: {
50: "shade(#fff, 5)",
100: "shade(#fff, 10)",
200: "shade(#fff, 20)",
300: "shade(#fff, 30)",
400: "shade(#fff, 40)",
500: "shade(#fff, 50)",
600: "shade(#fff, 60)",
700: "shade(#fff, 70)",
800: "shade(#fff, 80)",
900: "shade(#fff, 90)",
950: "shade(#fff, 95)"
},
whiteAlpha: {
50: "rgb(255, 255, 255/ .05)",
100: "rgb(255, 255, 255/ .1)",
200: "rgb(255, 255, 255/ .2)",
300: "rgb(255, 255, 255/ .3)",
400: "rgb(255, 255, 255/ .4)",
500: "rgb(255, 255, 255/ .5)",
600: "rgb(255, 255, 255/ .6)",
700: "rgb(255, 255, 255/ .7)",
800: "rgb(255, 255, 255/ .8)",
900: "rgb(255, 255, 255/ .9)",
950: "rgb(255, 255, 255/ .95)"
},
amber: {
50: "#fdf0d8",
100: "#fde8c4",
200: "#fbd593",
300: "#f9c367",
400: "#f7b23b",
500: "#f59f0a",
600: "#ce8509",
700: "#a26907",
800: "#764c05",
900: "#4e3303",
950: "#362302"
},
blue: {
50: "#e2edfd",
100: "#cfe0fc",
200: "#adcbfa",
300: "#8bb5f8",
400: "#659cf6",
500: "#4387f4",
600: "#186bf2",
700: "#0c59d4",
800: "#0a47a9",
900: "#07357d",
950: "#062c6a"
},
cyan: {
50: "#cef6fd",
100: "#b0f1fd",
200: "#7ee8fb",
300: "#4de0f9",
400: "#16d6f8",
500: "#07b6d5",
600: "#0590a8",
700: "#046e81",
800: "#034854",
900: "#012228",
950: "#011114"
},
emerald: {
50: "#d0fbed",
100: "#b4f8e2",
200: "#80f4cd",
300: "#4defb9",
400: "#19eba5",
500: "#10b77f",
600: "#0d9165",
700: "#096748",
800: "#06422e",
900: "#021710",
950: "#000503"
},
flashy: {
50: "#fdedf5",
100: "#fbdaeb",
200: "#f7b5d6",
300: "#f390c2",
400: "#ef6bad",
500: "#ec4699",
600: "#e82185",
700: "#c6156e",
800: "#a21159",
900: "#780d42",
950: "#660b38"
},
fuchsia: {
50: "#f9e3fd",
100: "#f5d0fb",
200: "#eeaff8",
300: "#e78af5",
400: "#e069f2",
500: "#d948ef",
600: "#d01eeb",
700: "#b112ca",
800: "#900ea4",
900: "#6b0b7a",
950: "#5b0967"
},
gray: {
50: "#dedede",
100: "#d4d4d4",
200: "#bababa",
300: "#a3a3a3",
400: "#8a8a8a",
500: "#737373",
600: "#5c5c5c",
700: "#474747",
800: "#303030",
900: "#1c1c1c",
950: "#0f0f0f"
},
green: {
50: "#cff7de",
100: "#b5f2cb",
200: "#85eaaa",
300: "#51e186",
400: "#23d163",
500: "#1ba14c",
600: "#16833e",
700: "#126932",
800: "#0d4e25",
900: "#083017",
950: "#062311"
},
indigo: {
50: "#e8e8fd",
100: "#d9dafc",
200: "#bdbef9",
300: "#9c9ef6",
400: "#8082f4",
500: "#6467f2",
600: "#3a3dee",
700: "#1417e6",
800: "#1114c0",
900: "#0d0f96",
950: "#0b0d83"
},
lime: {
50: "#e7facc",
100: "#ddf7b5",
200: "#c7f287",
300: "#b2ee59",
400: "#9de92b",
500: "#82cb15",
600: "#6ba611",
700: "#507d0d",
800: "#385809",
900: "#1e2e05",
950: "#121c03"
},
orange: {
50: "#fef0e6",
100: "#fee4d2",
200: "#fdc7a1",
300: "#fbac74",
400: "#fa9247",
500: "#f97415",
600: "#e06106",
700: "#b34d05",
800: "#863a03",
900: "#5e2902",
950: "#461e02"
},
pink: {
50: "#fde8ed",
100: "#fcd9e3",
200: "#f9b9ca",
300: "#f693ad",
400: "#f37295",
500: "#f0517c",
600: "#ec275c",
700: "#d81347",
800: "#ae0f39",
900: "#880c2d",
950: "#710a25"
},
purple: {
50: "#f0e2fe",
100: "#e9d3fd",
200: "#d7b1fb",
300: "#c994fa",
400: "#b772f8",
500: "#a855f7",
600: "#9229f5",
700: "#7e0bea",
800: "#6609be",
900: "#510797",
950: "#44067f"
},
red: {
50: "#fdeae8",
100: "#fbd9d5",
200: "#f6b2ac",
300: "#f28c82",
400: "#ee6a5d",
500: "#ea4334",
600: "#de2817",
700: "#b42013",
800: "#8a190f",
900: "#66120b",
950: "#530f09"
},
rose: {
50: "#feecef",
100: "#fdd8de",
200: "#fbb2be",
300: "#f88b9d",
400: "#f6657d",
500: "#f43e5c",
600: "#f2183c",
700: "#cf0c2d",
800: "#a40a23",
900: "#7d071b",
950: "#650616"
},
sky: {
50: "#ddf3fd",
100: "#c5eafc",
200: "#95d9f9",
300: "#65c8f6",
400: "#35b7f3",
500: "#0da2e7",
600: "#0b87c1",
700: "#096995",
800: "#064e6f",
900: "#042f43",
950: "#032230"
},
teal: {
50: "#cdf9f4",
100: "#b1f6ee",
200: "#7ef1e3",
300: "#51ecda",
400: "#1ee6cf",
500: "#14b8a5",
600: "#108e80",
700: "#0c6a5f",
800: "#07403a",
900: "#031c19",
950: "#010504"
},
violet: {
50: "#eee7fe",
100: "#e3d8fd",
200: "#cbb6fb",
300: "#b699fa",
400: "#a17cf8",
500: "#895af6",
600: "#6d34f4",
700: "#500ced",
800: "#410ac2",
900: "#34089b",
950: "#2e0788"
},
yellow: {
50: "#fef4d7",
100: "#feefc3",
200: "#fde290",
300: "#fdd663",
400: "#fcc931",
500: "#fbbd04",
600: "#ce9b03",
700: "#a67d03",
800: "#795b02",
900: "#503d01",
950: "#372a01"
}
});
//#endregion
export { colors };
//# sourceMappingURL=colors.js.map