@julseb-lib/react 0.1.3 → 0.1.5

package/src/data/styles/colors.ts

@@ -0,0 +1,1985 @@
+export type Color = {
+	name: string
+	variable: string
+	css: string
+	hex: string
+	rgb: string
+	twClass: string
+}
+
+export const allColors: Array<Color> = [
+	{
+		name: "black",
+		variable: "COLORS.BLACK",
+		css: "var(--color-black)",
+		hex: "#000000",
+		rgb: "rgb(0, 0, 0)",
+		twClass: "bg-black",
+	},
+	{
+		name: "white",
+		variable: "COLORS.WHITE",
+		css: "var(--color-white)",
+		hex: "#FFFFFF",
+		rgb: "rgb(255, 255, 255)",
+		twClass: "bg-white",
+	},
+	// red
+	{
+		name: "red-50",
+		variable: "COLORS.RED_50",
+		css: "var(--color-red-50)",
+		hex: "#fef2f2",
+		rgb: "254, 242, 242",
+		twClass: "bg-red-50",
+	},
+	{
+		name: "red-100",
+		variable: "COLORS.RED_100",
+		css: "var(--color-red-100)",
+		hex: "#fee2e2",
+		rgb: "254, 226, 226",
+		twClass: "bg-red-100",
+	},
+	{
+		name: "red-200",
+		variable: "COLORS.RED_200",
+		css: "var(--color-red-200)",
+		hex: "#fecaca",
+		rgb: "254, 202, 202",
+		twClass: "bg-red-200",
+	},
+	{
+		name: "red-300",
+		variable: "COLORS.RED_300",
+		css: "var(--color-red-300)",
+		hex: "#fca5a5",
+		rgb: "252, 165, 165",
+		twClass: "bg-red-300",
+	},
+	{
+		name: "red-400",
+		variable: "COLORS.RED_400",
+		css: "var(--color-red-400)",
+		hex: "#f87171",
+		rgb: "248, 113, 113",
+		twClass: "bg-red-400",
+	},
+	{
+		name: "red-500",
+		variable: "COLORS.RED_500",
+		css: "var(--color-red-500)",
+		hex: "#ef4444",
+		rgb: "239, 68, 68",
+		twClass: "bg-red-500",
+	},
+	{
+		name: "red-600",
+		variable: "COLORS.RED_600",
+		css: "var(--color-red-600)",
+		hex: "#dc2626",
+		rgb: "220, 38, 38",
+		twClass: "bg-red-600",
+	},
+	{
+		name: "red-700",
+		variable: "COLORS.RED_700",
+		css: "var(--color-red-700)",
+		hex: "#b91c1c",
+		rgb: "185, 28, 28",
+		twClass: "bg-red-700",
+	},
+	{
+		name: "red-800",
+		variable: "COLORS.RED_800",
+		css: "var(--color-red-800)",
+		hex: "#991b1b",
+		rgb: "153, 27, 27",
+		twClass: "bg-red-800",
+	},
+	{
+		name: "red-900",
+		variable: "COLORS.RED_900",
+		css: "var(--color-red-900)",
+		hex: "#7f1d1d",
+		rgb: "127, 29, 29",
+		twClass: "bg-red-900",
+	},
+	{
+		name: "red-950",
+		variable: "COLORS.RED_950",
+		css: "var(--color-red-950)",
+		hex: "#450a0a",
+		rgb: "69, 10, 10",
+		twClass: "bg-red-950",
+	},
+	// orange
+	{
+		name: "orange-50",
+		variable: "COLORS.ORANGE_50",
+		css: "var(--color-orange-50)",
+		hex: "#fff7ed",
+		rgb: "255, 247, 237",
+		twClass: "bg-orange-50",
+	},
+	{
+		name: "orange-100",
+		variable: "COLORS.ORANGE_100",
+		css: "var(--color-orange-100)",
+		hex: "#ffedd5",
+		rgb: "255, 237, 213",
+		twClass: "bg-orange-100",
+	},
+	{
+		name: "orange-200",
+		variable: "COLORS.ORANGE_200",
+		css: "var(--color-orange-200)",
+		hex: "#fed7aa",
+		rgb: "254, 215, 170",
+		twClass: "bg-orange-200",
+	},
+	{
+		name: "orange-300",
+		variable: "COLORS.ORANGE_300",
+		css: "var(--color-orange-300)",
+		hex: "#fdba74",
+		rgb: "253, 186, 116",
+		twClass: "bg-orange-300",
+	},
+	{
+		name: "orange-400",
+		variable: "COLORS.ORANGE_400",
+		css: "var(--color-orange-400)",
+		hex: "#fb923c",
+		rgb: "251, 146, 60",
+		twClass: "bg-orange-400",
+	},
+	{
+		name: "orange-500",
+		variable: "COLORS.ORANGE_500",
+		css: "var(--color-orange-500)",
+		hex: "#f97316",
+		rgb: "249, 115, 22",
+		twClass: "bg-orange-500",
+	},
+	{
+		name: "orange-600",
+		variable: "COLORS.ORANGE_600",
+		css: "var(--color-orange-600)",
+		hex: "#ea580c",
+		rgb: "234, 88, 12",
+		twClass: "bg-orange-600",
+	},
+	{
+		name: "orange-700",
+		variable: "COLORS.ORANGE_700",
+		css: "var(--color-orange-700)",
+		hex: "#c2410c",
+		rgb: "194, 65, 12",
+		twClass: "bg-orange-700",
+	},
+	{
+		name: "orange-800",
+		variable: "COLORS.ORANGE_800",
+		css: "var(--color-orange-800)",
+		hex: "#9a3412",
+		rgb: "154, 52, 18",
+		twClass: "bg-orange-800",
+	},
+	{
+		name: "orange-900",
+		variable: "COLORS.ORANGE_900",
+		css: "var(--color-orange-900)",
+		hex: "#7c2d12",
+		rgb: "124, 45, 18",
+		twClass: "bg-orange-900",
+	},
+	{
+		name: "orange-950",
+		variable: "COLORS.ORANGE_950",
+		css: "var(--color-orange-950)",
+		hex: "#431407",
+		rgb: "67, 20, 7",
+		twClass: "bg-orange-950",
+	},
+	// amber
+	{
+		name: "amber-50",
+		variable: "COLORS.AMBER_50",
+		css: "var(--color-amber-50)",
+		hex: "#fffbeb",
+		rgb: "255, 251, 235",
+		twClass: "bg-amber-50",
+	},
+	{
+		name: "amber-100",
+		variable: "COLORS.AMBER_100",
+		css: "var(--color-amber-100)",
+		hex: "#fef3c7",
+		rgb: "254, 243, 199",
+		twClass: "bg-amber-100",
+	},
+	{
+		name: "amber-200",
+		variable: "COLORS.AMBER_200",
+		css: "var(--color-amber-200)",
+		hex: "#fde68a",
+		rgb: "253, 230, 138",
+		twClass: "bg-amber-200",
+	},
+	{
+		name: "amber-300",
+		variable: "COLORS.AMBER_300",
+		css: "var(--color-amber-300)",
+		hex: "#fcd34d",
+		rgb: "252, 211, 77",
+		twClass: "bg-amber-300",
+	},
+	{
+		name: "amber-400",
+		variable: "COLORS.AMBER_400",
+		css: "var(--color-amber-400)",
+		hex: "#fbbf24",
+		rgb: "251, 191, 36",
+		twClass: "bg-amber-400",
+	},
+	{
+		name: "amber-500",
+		variable: "COLORS.AMBER_500",
+		css: "var(--color-amber-500)",
+		hex: "#f59e42",
+		rgb: "245, 158, 66",
+		twClass: "bg-amber-500",
+	},
+	{
+		name: "amber-600",
+		variable: "COLORS.AMBER_600",
+		css: "var(--color-amber-600)",
+		hex: "#d97706",
+		rgb: "217, 119, 6",
+		twClass: "bg-amber-600",
+	},
+	{
+		name: "amber-700",
+		variable: "COLORS.AMBER_700",
+		css: "var(--color-amber-700)",
+		hex: "#b45309",
+		rgb: "180, 83, 9",
+		twClass: "bg-amber-700",
+	},
+	{
+		name: "amber-800",
+		variable: "COLORS.AMBER_800",
+		css: "var(--color-amber-800)",
+		hex: "#92400e",
+		rgb: "146, 64, 14",
+		twClass: "bg-amber-800",
+	},
+	{
+		name: "amber-900",
+		variable: "COLORS.AMBER_900",
+		css: "var(--color-amber-900)",
+		hex: "#78350f",
+		rgb: "120, 53, 15",
+		twClass: "bg-amber-900",
+	},
+	{
+		name: "amber-950",
+		variable: "COLORS.AMBER_950",
+		css: "var(--color-amber-950)",
+		hex: "#451a03",
+		rgb: "69, 26, 3",
+		twClass: "bg-amber-950",
+	},
+	// yellow
+	{
+		name: "yellow-50",
+		variable: "COLORS.YELLOW_50",
+		css: "var(--color-yellow-50)",
+		hex: "#fefce8",
+		rgb: "254, 252, 232",
+		twClass: "bg-yellow-50",
+	},
+	{
+		name: "yellow-100",
+		variable: "COLORS.YELLOW_100",
+		css: "var(--color-yellow-100)",
+		hex: "#fef9c3",
+		rgb: "254, 249, 195",
+		twClass: "bg-yellow-100",
+	},
+	{
+		name: "yellow-200",
+		variable: "COLORS.YELLOW_200",
+		css: "var(--color-yellow-200)",
+		hex: "#fef08a",
+		rgb: "254, 240, 138",
+		twClass: "bg-yellow-200",
+	},
+	{
+		name: "yellow-300",
+		variable: "COLORS.YELLOW_300",
+		css: "var(--color-yellow-300)",
+		hex: "#fde047",
+		rgb: "253, 224, 71",
+		twClass: "bg-yellow-300",
+	},
+	{
+		name: "yellow-400",
+		variable: "COLORS.YELLOW_400",
+		css: "var(--color-yellow-400)",
+		hex: "#facc15",
+		rgb: "250, 204, 21",
+		twClass: "bg-yellow-400",
+	},
+	{
+		name: "yellow-500",
+		variable: "COLORS.YELLOW_500",
+		css: "var(--color-yellow-500)",
+		hex: "#eab308",
+		rgb: "234, 179, 8",
+		twClass: "bg-yellow-500",
+	},
+	{
+		name: "yellow-600",
+		variable: "COLORS.YELLOW_600",
+		css: "var(--color-yellow-600)",
+		hex: "#ca8a04",
+		rgb: "202, 138, 4",
+		twClass: "bg-yellow-600",
+	},
+	{
+		name: "yellow-700",
+		variable: "COLORS.YELLOW_700",
+		css: "var(--color-yellow-700)",
+		hex: "#a16207",
+		rgb: "161, 98, 7",
+		twClass: "bg-yellow-700",
+	},
+	{
+		name: "yellow-800",
+		variable: "COLORS.YELLOW_800",
+		css: "var(--color-yellow-800)",
+		hex: "#854d0e",
+		rgb: "133, 77, 14",
+		twClass: "bg-yellow-800",
+	},
+	{
+		name: "yellow-900",
+		variable: "COLORS.YELLOW_900",
+		css: "var(--color-yellow-900)",
+		hex: "#713f12",
+		rgb: "113, 63, 18",
+		twClass: "bg-yellow-900",
+	},
+	{
+		name: "yellow-950",
+		variable: "COLORS.YELLOW_950",
+		css: "var(--color-yellow-950)",
+		hex: "#422006",
+		rgb: "66, 32, 6",
+		twClass: "bg-yellow-950",
+	},
+	// lime
+	{
+		name: "lime-50",
+		variable: "COLORS.LIME_50",
+		css: "var(--color-lime-50)",
+		hex: "#f7fee7",
+		rgb: "247, 254, 231",
+		twClass: "bg-lime-50",
+	},
+	{
+		name: "lime-100",
+		variable: "COLORS.LIME_100",
+		css: "var(--color-lime-100)",
+		hex: "#ecfccb",
+		rgb: "236, 252, 203",
+		twClass: "bg-lime-100",
+	},
+	{
+		name: "lime-200",
+		variable: "COLORS.LIME_200",
+		css: "var(--color-lime-200)",
+		hex: "#d9f99d",
+		rgb: "217, 249, 157",
+		twClass: "bg-lime-200",
+	},
+	{
+		name: "lime-300",
+		variable: "COLORS.LIME_300",
+		css: "var(--color-lime-300)",
+		hex: "#bef264",
+		rgb: "190, 242, 100",
+		twClass: "bg-lime-300",
+	},
+	{
+		name: "lime-400",
+		variable: "COLORS.LIME_400",
+		css: "var(--color-lime-400)",
+		hex: "#a3e635",
+		rgb: "163, 230, 53",
+		twClass: "bg-lime-400",
+	},
+	{
+		name: "lime-500",
+		variable: "COLORS.LIME_500",
+		css: "var(--color-lime-500)",
+		hex: "#84cc16",
+		rgb: "132, 204, 22",
+		twClass: "bg-lime-500",
+	},
+	{
+		name: "lime-600",
+		variable: "COLORS.LIME_600",
+		css: "var(--color-lime-600)",
+		hex: "#65a30d",
+		rgb: "101, 163, 13",
+		twClass: "bg-lime-600",
+	},
+	{
+		name: "lime-700",
+		variable: "COLORS.LIME_700",
+		css: "var(--color-lime-700)",
+		hex: "#4d7c0f",
+		rgb: "77, 124, 15",
+		twClass: "bg-lime-700",
+	},
+	{
+		name: "lime-800",
+		variable: "COLORS.LIME_800",
+		css: "var(--color-lime-800)",
+		hex: "#3f6212",
+		rgb: "63, 98, 18",
+		twClass: "bg-lime-800",
+	},
+	{
+		name: "lime-900",
+		variable: "COLORS.LIME_900",
+		css: "var(--color-lime-900)",
+		hex: "#365314",
+		rgb: "54, 83, 20",
+		twClass: "bg-lime-900",
+	},
+	{
+		name: "lime-950",
+		variable: "COLORS.LIME_950",
+		css: "var(--color-lime-950)",
+		hex: "#1a2e05",
+		rgb: "26, 46, 5",
+		twClass: "bg-lime-950",
+	},
+	// green
+	{
+		name: "green-50",
+		variable: "COLORS.GREEN_50",
+		css: "var(--color-green-50)",
+		hex: "#f0fdf4",
+		rgb: "240, 253, 244",
+		twClass: "bg-green-50",
+	},
+	{
+		name: "green-100",
+		variable: "COLORS.GREEN_100",
+		css: "var(--color-green-100)",
+		hex: "#dcfce7",
+		rgb: "220, 252, 231",
+		twClass: "bg-green-100",
+	},
+	{
+		name: "green-200",
+		variable: "COLORS.GREEN_200",
+		css: "var(--color-green-200)",
+		hex: "#bbf7d0",
+		rgb: "187, 247, 208",
+		twClass: "bg-green-200",
+	},
+	{
+		name: "green-300",
+		variable: "COLORS.GREEN_300",
+		css: "var(--color-green-300)",
+		hex: "#86efac",
+		rgb: "134, 239, 172",
+		twClass: "bg-green-300",
+	},
+	{
+		name: "green-400",
+		variable: "COLORS.GREEN_400",
+		css: "var(--color-green-400)",
+		hex: "#4ade80",
+		rgb: "74, 222, 128",
+		twClass: "bg-green-400",
+	},
+	{
+		name: "green-500",
+		variable: "COLORS.GREEN_500",
+		css: "var(--color-green-500)",
+		hex: "#22c55e",
+		rgb: "34, 197, 94",
+		twClass: "bg-green-500",
+	},
+	{
+		name: "green-600",
+		variable: "COLORS.GREEN_600",
+		css: "var(--color-green-600)",
+		hex: "#16a34a",
+		rgb: "22, 163, 74",
+		twClass: "bg-green-600",
+	},
+	{
+		name: "green-700",
+		variable: "COLORS.GREEN_700",
+		css: "var(--color-green-700)",
+		hex: "#15803d",
+		rgb: "21, 128, 61",
+		twClass: "bg-green-700",
+	},
+	{
+		name: "green-800",
+		variable: "COLORS.GREEN_800",
+		css: "var(--color-green-800)",
+		hex: "#166534",
+		rgb: "22, 101, 52",
+		twClass: "bg-green-800",
+	},
+	{
+		name: "green-900",
+		variable: "COLORS.GREEN_900",
+		css: "var(--color-green-900)",
+		hex: "#14532d",
+		rgb: "20, 83, 45",
+		twClass: "bg-green-900",
+	},
+	{
+		name: "green-950",
+		variable: "COLORS.GREEN_950",
+		css: "var(--color-green-950)",
+		hex: "#052e16",
+		rgb: "5, 46, 22",
+		twClass: "bg-green-950",
+	},
+	// emerald
+	{
+		name: "emerald-50",
+		variable: "COLORS.EMERALD_50",
+		css: "var(--color-emerald-50)",
+		hex: "#ecfdf5",
+		rgb: "236, 253, 245",
+		twClass: "bg-emerald-50",
+	},
+	{
+		name: "emerald-100",
+		variable: "COLORS.EMERALD_100",
+		css: "var(--color-emerald-100)",
+		hex: "#d1fae5",
+		rgb: "209, 250, 229",
+		twClass: "bg-emerald-100",
+	},
+	{
+		name: "emerald-200",
+		variable: "COLORS.EMERALD_200",
+		css: "var(--color-emerald-200)",
+		hex: "#a7f3d0",
+		rgb: "167, 243, 208",
+		twClass: "bg-emerald-200",
+	},
+	{
+		name: "emerald-300",
+		variable: "COLORS.EMERALD_300",
+		css: "var(--color-emerald-300)",
+		hex: "#6ee7b7",
+		rgb: "110, 231, 183",
+		twClass: "bg-emerald-300",
+	},
+	{
+		name: "emerald-400",
+		variable: "COLORS.EMERALD_400",
+		css: "var(--color-emerald-400)",
+		hex: "#34d399",
+		rgb: "52, 211, 153",
+		twClass: "bg-emerald-400",
+	},
+	{
+		name: "emerald-500",
+		variable: "COLORS.EMERALD_500",
+		css: "var(--color-emerald-500)",
+		hex: "#10b981",
+		rgb: "16, 185, 129",
+		twClass: "bg-emerald-500",
+	},
+	{
+		name: "emerald-600",
+		variable: "COLORS.EMERALD_600",
+		css: "var(--color-emerald-600)",
+		hex: "#059669",
+		rgb: "5, 150, 105",
+		twClass: "bg-emerald-600",
+	},
+	{
+		name: "emerald-700",
+		variable: "COLORS.EMERALD_700",
+		css: "var(--color-emerald-700)",
+		hex: "#047857",
+		rgb: "4, 120, 87",
+		twClass: "bg-emerald-700",
+	},
+	{
+		name: "emerald-800",
+		variable: "COLORS.EMERALD_800",
+		css: "var(--color-emerald-800)",
+		hex: "#065f46",
+		rgb: "6, 95, 70",
+		twClass: "bg-emerald-800",
+	},
+	{
+		name: "emerald-900",
+		variable: "COLORS.EMERALD_900",
+		css: "var(--color-emerald-900)",
+		hex: "#064e3b",
+		rgb: "6, 78, 59",
+		twClass: "bg-emerald-900",
+	},
+	{
+		name: "emerald-950",
+		variable: "COLORS.EMERALD_950",
+		css: "var(--color-emerald-950)",
+		hex: "#022c22",
+		rgb: "2, 44, 34",
+		twClass: "bg-emerald-950",
+	},
+	// teal
+	{
+		name: "teal-50",
+		variable: "COLORS.TEAL_50",
+		css: "var(--color-teal-50)",
+		hex: "#f0fdfa",
+		rgb: "240, 253, 250",
+		twClass: "bg-teal-50",
+	},
+	{
+		name: "teal-100",
+		variable: "COLORS.TEAL_100",
+		css: "var(--color-teal-100)",
+		hex: "#ccfbf1",
+		rgb: "204, 251, 241",
+		twClass: "bg-teal-100",
+	},
+	{
+		name: "teal-200",
+		variable: "COLORS.TEAL_200",
+		css: "var(--color-teal-200)",
+		hex: "#99f6e4",
+		rgb: "153, 246, 228",
+		twClass: "bg-teal-200",
+	},
+	{
+		name: "teal-300",
+		variable: "COLORS.TEAL_300",
+		css: "var(--color-teal-300)",
+		hex: "#5eead4",
+		rgb: "94, 234, 212",
+		twClass: "bg-teal-300",
+	},
+	{
+		name: "teal-400",
+		variable: "COLORS.TEAL_400",
+		css: "var(--color-teal-400)",
+		hex: "#2dd4bf",
+		rgb: "45, 212, 191",
+		twClass: "bg-teal-400",
+	},
+	{
+		name: "teal-500",
+		variable: "COLORS.TEAL_500",
+		css: "var(--color-teal-500)",
+		hex: "#14b8a6",
+		rgb: "20, 184, 166",
+		twClass: "bg-teal-500",
+	},
+	{
+		name: "teal-600",
+		variable: "COLORS.TEAL_600",
+		css: "var(--color-teal-600)",
+		hex: "#0d9488",
+		rgb: "13, 148, 136",
+		twClass: "bg-teal-600",
+	},
+	{
+		name: "teal-700",
+		variable: "COLORS.TEAL_700",
+		css: "var(--color-teal-700)",
+		hex: "#0f766e",
+		rgb: "15, 118, 110",
+		twClass: "bg-teal-700",
+	},
+	{
+		name: "teal-800",
+		variable: "COLORS.TEAL_800",
+		css: "var(--color-teal-800)",
+		hex: "#115e59",
+		rgb: "17, 94, 89",
+		twClass: "bg-teal-800",
+	},
+	{
+		name: "teal-900",
+		variable: "COLORS.TEAL_900",
+		css: "var(--color-teal-900)",
+		hex: "#134e4a",
+		rgb: "19, 78, 74",
+		twClass: "bg-teal-900",
+	},
+	{
+		name: "teal-950",
+		variable: "COLORS.TEAL_950",
+		css: "var(--color-teal-950)",
+		hex: "#042f2e",
+		rgb: "4, 47, 46",
+		twClass: "bg-teal-950",
+	},
+	// cyan
+	{
+		name: "cyan-50",
+		variable: "COLORS.CYAN_50",
+		css: "var(--color-cyan-50)",
+		hex: "#ecfeff",
+		rgb: "236, 254, 255",
+		twClass: "bg-cyan-50",
+	},
+	{
+		name: "cyan-100",
+		variable: "COLORS.CYAN_100",
+		css: "var(--color-cyan-100)",
+		hex: "#cffafe",
+		rgb: "207, 250, 254",
+		twClass: "bg-cyan-100",
+	},
+	{
+		name: "cyan-200",
+		variable: "COLORS.CYAN_200",
+		css: "var(--color-cyan-200)",
+		hex: "#a5f3fc",
+		rgb: "165, 243, 252",
+		twClass: "bg-cyan-200",
+	},
+	{
+		name: "cyan-300",
+		variable: "COLORS.CYAN_300",
+		css: "var(--color-cyan-300)",
+		hex: "#67e8f9",
+		rgb: "103, 232, 249",
+		twClass: "bg-cyan-300",
+	},
+	{
+		name: "cyan-400",
+		variable: "COLORS.CYAN_400",
+		css: "var(--color-cyan-400)",
+		hex: "#22d3ee",
+		rgb: "34, 211, 238",
+		twClass: "bg-cyan-400",
+	},
+	{
+		name: "cyan-500",
+		variable: "COLORS.CYAN_500",
+		css: "var(--color-cyan-500)",
+		hex: "#06b6d4",
+		rgb: "6, 182, 212",
+		twClass: "bg-cyan-500",
+	},
+	{
+		name: "cyan-600",
+		variable: "COLORS.CYAN_600",
+		css: "var(--color-cyan-600)",
+		hex: "#0891b2",
+		rgb: "8, 145, 178",
+		twClass: "bg-cyan-600",
+	},
+	{
+		name: "cyan-700",
+		variable: "COLORS.CYAN_700",
+		css: "var(--color-cyan-700)",
+		hex: "#0e7490",
+		rgb: "14, 116, 144",
+		twClass: "bg-cyan-700",
+	},
+	{
+		name: "cyan-800",
+		variable: "COLORS.CYAN_800",
+		css: "var(--color-cyan-800)",
+		hex: "#155e75",
+		rgb: "21, 94, 117",
+		twClass: "bg-cyan-800",
+	},
+	{
+		name: "cyan-900",
+		variable: "COLORS.CYAN_900",
+		css: "var(--color-cyan-900)",
+		hex: "#164e63",
+		rgb: "22, 78, 99",
+		twClass: "bg-cyan-900",
+	},
+	{
+		name: "cyan-950",
+		variable: "COLORS.CYAN_950",
+		css: "var(--color-cyan-950)",
+		hex: "#083344",
+		rgb: "8, 51, 68",
+		twClass: "bg-cyan-950",
+	},
+	// sky
+	{
+		name: "sky-50",
+		variable: "COLORS.SKY_50",
+		css: "var(--color-sky-50)",
+		hex: "#f0f9ff",
+		rgb: "240, 249, 255",
+		twClass: "bg-sky-50",
+	},
+	{
+		name: "sky-100",
+		variable: "COLORS.SKY_100",
+		css: "var(--color-sky-100)",
+		hex: "#e0f2fe",
+		rgb: "224, 242, 254",
+		twClass: "bg-sky-100",
+	},
+	{
+		name: "sky-200",
+		variable: "COLORS.SKY_200",
+		css: "var(--color-sky-200)",
+		hex: "#bae6fd",
+		rgb: "186, 230, 253",
+		twClass: "bg-sky-200",
+	},
+	{
+		name: "sky-300",
+		variable: "COLORS.SKY_300",
+		css: "var(--color-sky-300)",
+		hex: "#7dd3fc",
+		rgb: "125, 211, 252",
+		twClass: "bg-sky-300",
+	},
+	{
+		name: "sky-400",
+		variable: "COLORS.SKY_400",
+		css: "var(--color-sky-400)",
+		hex: "#38bdf8",
+		rgb: "56, 189, 248",
+		twClass: "bg-sky-400",
+	},
+	{
+		name: "sky-500",
+		variable: "COLORS.SKY_500",
+		css: "var(--color-sky-500)",
+		hex: "#0ea5e9",
+		rgb: "14, 165, 233",
+		twClass: "bg-sky-500",
+	},
+	{
+		name: "sky-600",
+		variable: "COLORS.SKY_600",
+		css: "var(--color-sky-600)",
+		hex: "#0284c7",
+		rgb: "2, 132, 199",
+		twClass: "bg-sky-600",
+	},
+	{
+		name: "sky-700",
+		variable: "COLORS.SKY_700",
+		css: "var(--color-sky-700)",
+		hex: "#0369a1",
+		rgb: "3, 105, 161",
+		twClass: "bg-sky-700",
+	},
+	{
+		name: "sky-800",
+		variable: "COLORS.SKY_800",
+		css: "var(--color-sky-800)",
+		hex: "#075985",
+		rgb: "7, 89, 133",
+		twClass: "bg-sky-800",
+	},
+	{
+		name: "sky-900",
+		variable: "COLORS.SKY_900",
+		css: "var(--color-sky-900)",
+		hex: "#0c4a6e",
+		rgb: "12, 74, 110",
+		twClass: "bg-sky-900",
+	},
+	{
+		name: "sky-950",
+		variable: "COLORS.SKY_950",
+		css: "var(--color-sky-950)",
+		hex: "#082f49",
+		rgb: "8, 47, 73",
+		twClass: "bg-sky-950",
+	},
+	// blue
+	{
+		name: "blue-50",
+		variable: "COLORS.BLUE_50",
+		css: "var(--color-blue-50)",
+		hex: "#eff6ff",
+		rgb: "239, 246, 255",
+		twClass: "bg-blue-50",
+	},
+	{
+		name: "blue-100",
+		variable: "COLORS.BLUE_100",
+		css: "var(--color-blue-100)",
+		hex: "#dbeafe",
+		rgb: "219, 234, 254",
+		twClass: "bg-blue-100",
+	},
+	{
+		name: "blue-200",
+		variable: "COLORS.BLUE_200",
+		css: "var(--color-blue-200)",
+		hex: "#bfdbfe",
+		rgb: "191, 219, 254",
+		twClass: "bg-blue-200",
+	},
+	{
+		name: "blue-300",
+		variable: "COLORS.BLUE_300",
+		css: "var(--color-blue-300)",
+		hex: "#93c5fd",
+		rgb: "147, 197, 253",
+		twClass: "bg-blue-300",
+	},
+	{
+		name: "blue-400",
+		variable: "COLORS.BLUE_400",
+		css: "var(--color-blue-400)",
+		hex: "#60a5fa",
+		rgb: "96, 165, 250",
+		twClass: "bg-blue-400",
+	},
+	{
+		name: "blue-500",
+		variable: "COLORS.BLUE_500",
+		css: "var(--color-blue-500)",
+		hex: "#3b82f6",
+		rgb: "59, 130, 246",
+		twClass: "bg-blue-500",
+	},
+	{
+		name: "blue-600",
+		variable: "COLORS.BLUE_600",
+		css: "var(--color-blue-600)",
+		hex: "#2563eb",
+		rgb: "37, 99, 235",
+		twClass: "bg-blue-600",
+	},
+	{
+		name: "blue-700",
+		variable: "COLORS.BLUE_700",
+		css: "var(--color-blue-700)",
+		hex: "#1d4ed8",
+		rgb: "29, 78, 216",
+		twClass: "bg-blue-700",
+	},
+	{
+		name: "blue-800",
+		variable: "COLORS.BLUE_800",
+		css: "var(--color-blue-800)",
+		hex: "#1e40af",
+		rgb: "30, 64, 175",
+		twClass: "bg-blue-800",
+	},
+	{
+		name: "blue-900",
+		variable: "COLORS.BLUE_900",
+		css: "var(--color-blue-900)",
+		hex: "#1e3a8a",
+		rgb: "30, 58, 138",
+		twClass: "bg-blue-900",
+	},
+	{
+		name: "blue-950",
+		variable: "COLORS.BLUE_950",
+		css: "var(--color-blue-950)",
+		hex: "#172554",
+		rgb: "23, 37, 84",
+		twClass: "bg-blue-950",
+	},
+	// indigo
+	{
+		name: "indigo-50",
+		variable: "COLORS.INDIGO_50",
+		css: "var(--color-indigo-50)",
+		hex: "#eef2ff",
+		rgb: "238, 242, 255",
+		twClass: "bg-indigo-50",
+	},
+	{
+		name: "indigo-100",
+		variable: "COLORS.INDIGO_100",
+		css: "var(--color-indigo-100)",
+		hex: "#e0e7ff",
+		rgb: "224, 231, 255",
+		twClass: "bg-indigo-100",
+	},
+	{
+		name: "indigo-200",
+		variable: "COLORS.INDIGO_200",
+		css: "var(--color-indigo-200)",
+		hex: "#c7d2fe",
+		rgb: "199, 210, 254",
+		twClass: "bg-indigo-200",
+	},
+	{
+		name: "indigo-300",
+		variable: "COLORS.INDIGO_300",
+		css: "var(--color-indigo-300)",
+		hex: "#a5b4fc",
+		rgb: "165, 180, 252",
+		twClass: "bg-indigo-300",
+	},
+	{
+		name: "indigo-400",
+		variable: "COLORS.INDIGO_400",
+		css: "var(--color-indigo-400)",
+		hex: "#818cf8",
+		rgb: "129, 140, 248",
+		twClass: "bg-indigo-400",
+	},
+	{
+		name: "indigo-500",
+		variable: "COLORS.INDIGO_500",
+		css: "var(--color-indigo-500)",
+		hex: "#6366f1",
+		rgb: "99, 102, 241",
+		twClass: "bg-indigo-500",
+	},
+	{
+		name: "indigo-600",
+		variable: "COLORS.INDIGO_600",
+		css: "var(--color-indigo-600)",
+		hex: "#4f46e5",
+		rgb: "79, 70, 229",
+		twClass: "bg-indigo-600",
+	},
+	{
+		name: "indigo-700",
+		variable: "COLORS.INDIGO_700",
+		css: "var(--color-indigo-700)",
+		hex: "#4338ca",
+		rgb: "67, 56, 202",
+		twClass: "bg-indigo-700",
+	},
+	{
+		name: "indigo-800",
+		variable: "COLORS.INDIGO_800",
+		css: "var(--color-indigo-800)",
+		hex: "#3730a3",
+		rgb: "55, 48, 163",
+		twClass: "bg-indigo-800",
+	},
+	{
+		name: "indigo-900",
+		variable: "COLORS.INDIGO_900",
+		css: "var(--color-indigo-900)",
+		hex: "#312e81",
+		rgb: "49, 46, 129",
+		twClass: "bg-indigo-900",
+	},
+	{
+		name: "indigo-950",
+		variable: "COLORS.INDIGO_950",
+		css: "var(--color-indigo-950)",
+		hex: "#1e1b4b",
+		rgb: "30, 27, 75",
+		twClass: "bg-indigo-950",
+	},
+	// violet
+	{
+		name: "violet-50",
+		variable: "COLORS.VIOLET_50",
+		css: "var(--color-violet-50)",
+		hex: "#f5f3ff",
+		rgb: "245, 243, 255",
+		twClass: "bg-violet-50",
+	},
+	{
+		name: "violet-100",
+		variable: "COLORS.VIOLET_100",
+		css: "var(--color-violet-100)",
+		hex: "#ede9fe",
+		rgb: "237, 233, 254",
+		twClass: "bg-violet-100",
+	},
+	{
+		name: "violet-200",
+		variable: "COLORS.VIOLET_200",
+		css: "var(--color-violet-200)",
+		hex: "#ddd6fe",
+		rgb: "221, 214, 254",
+		twClass: "bg-violet-200",
+	},
+	{
+		name: "violet-300",
+		variable: "COLORS.VIOLET_300",
+		css: "var(--color-violet-300)",
+		hex: "#c4b5fd",
+		rgb: "196, 181, 253",
+		twClass: "bg-violet-300",
+	},
+	{
+		name: "violet-400",
+		variable: "COLORS.VIOLET_400",
+		css: "var(--color-violet-400)",
+		hex: "#a78bfa",
+		rgb: "167, 139, 250",
+		twClass: "bg-violet-400",
+	},
+	{
+		name: "violet-500",
+		variable: "COLORS.VIOLET_500",
+		css: "var(--color-violet-500)",
+		hex: "#8b5cf6",
+		rgb: "139, 92, 246",
+		twClass: "bg-violet-500",
+	},
+	{
+		name: "violet-600",
+		variable: "COLORS.VIOLET_600",
+		css: "var(--color-violet-600)",
+		hex: "#7c3aed",
+		rgb: "124, 58, 237",
+		twClass: "bg-violet-600",
+	},
+	{
+		name: "violet-700",
+		variable: "COLORS.VIOLET_700",
+		css: "var(--color-violet-700)",
+		hex: "#6d28d9",
+		rgb: "109, 40, 217",
+		twClass: "bg-violet-700",
+	},
+	{
+		name: "violet-800",
+		variable: "COLORS.VIOLET_800",
+		css: "var(--color-violet-800)",
+		hex: "#5b21b6",
+		rgb: "91, 33, 182",
+		twClass: "bg-violet-800",
+	},
+	{
+		name: "violet-900",
+		variable: "COLORS.VIOLET_900",
+		css: "var(--color-violet-900)",
+		hex: "#4c1d95",
+		rgb: "76, 29, 149",
+		twClass: "bg-violet-900",
+	},
+	{
+		name: "violet-950",
+		variable: "COLORS.VIOLET_950",
+		css: "var(--color-violet-950)",
+		hex: "#2e1065",
+		rgb: "46, 16, 101",
+		twClass: "bg-violet-950",
+	},
+	// purple
+	{
+		name: "purple-50",
+		variable: "COLORS.PURPLE_50",
+		css: "var(--color-purple-50)",
+		hex: "#faf5ff",
+		rgb: "250, 245, 255",
+		twClass: "bg-purple-50",
+	},
+	{
+		name: "purple-100",
+		variable: "COLORS.PURPLE_100",
+		css: "var(--color-purple-100)",
+		hex: "#f3e8ff",
+		rgb: "243, 232, 255",
+		twClass: "bg-purple-100",
+	},
+	{
+		name: "purple-200",
+		variable: "COLORS.PURPLE_200",
+		css: "var(--color-purple-200)",
+		hex: "#e9d5ff",
+		rgb: "233, 213, 255",
+		twClass: "bg-purple-200",
+	},
+	{
+		name: "purple-300",
+		variable: "COLORS.PURPLE_300",
+		css: "var(--color-purple-300)",
+		hex: "#d8b4fe",
+		rgb: "216, 180, 254",
+		twClass: "bg-purple-300",
+	},
+	{
+		name: "purple-400",
+		variable: "COLORS.PURPLE_400",
+		css: "var(--color-purple-400)",
+		hex: "#c084fc",
+		rgb: "192, 132, 252",
+		twClass: "bg-purple-400",
+	},
+	{
+		name: "purple-500",
+		variable: "COLORS.PURPLE_500",
+		css: "var(--color-purple-500)",
+		hex: "#a855f7",
+		rgb: "168, 85, 247",
+		twClass: "bg-purple-500",
+	},
+	{
+		name: "purple-600",
+		variable: "COLORS.PURPLE_600",
+		css: "var(--color-purple-600)",
+		hex: "#9333ea",
+		rgb: "147, 51, 234",
+		twClass: "bg-purple-600",
+	},
+	{
+		name: "purple-700",
+		variable: "COLORS.PURPLE_700",
+		css: "var(--color-purple-700)",
+		hex: "#7e22ce",
+		rgb: "126, 34, 206",
+		twClass: "bg-purple-700",
+	},
+	{
+		name: "purple-800",
+		variable: "COLORS.PURPLE_800",
+		css: "var(--color-purple-800)",
+		hex: "#6d28d9",
+		rgb: "109, 40, 217",
+		twClass: "bg-purple-800",
+	},
+	{
+		name: "purple-900",
+		variable: "COLORS.PURPLE_900",
+		css: "var(--color-purple-900)",
+		hex: "#581c87",
+		rgb: "88, 28, 135",
+		twClass: "bg-purple-900",
+	},
+	{
+		name: "purple-950",
+		variable: "COLORS.PURPLE_950",
+		css: "var(--color-purple-950)",
+		hex: "#3b0764",
+		rgb: "59, 7, 100",
+		twClass: "bg-purple-950",
+	},
+	// fuchsia
+	{
+		name: "fuchsia-50",
+		variable: "COLORS.FUCHSIA_50",
+		css: "var(--color-fuchsia-50)",
+		hex: "#fdf4ff",
+		rgb: "253, 244, 255",
+		twClass: "bg-fuchsia-50",
+	},
+	{
+		name: "fuchsia-100",
+		variable: "COLORS.FUCHSIA_100",
+		css: "var(--color-fuchsia-100)",
+		hex: "#fae8ff",
+		rgb: "250, 232, 255",
+		twClass: "bg-fuchsia-100",
+	},
+	{
+		name: "fuchsia-200",
+		variable: "COLORS.FUCHSIA_200",
+		css: "var(--color-fuchsia-200)",
+		hex: "#f5d0fe",
+		rgb: "245, 208, 254",
+		twClass: "bg-fuchsia-200",
+	},
+	{
+		name: "fuchsia-300",
+		variable: "COLORS.FUCHSIA_300",
+		css: "var(--color-fuchsia-300)",
+		hex: "#f0abfc",
+		rgb: "240, 171, 252",
+		twClass: "bg-fuchsia-300",
+	},
+	{
+		name: "fuchsia-400",
+		variable: "COLORS.FUCHSIA_400",
+		css: "var(--color-fuchsia-400)",
+		hex: "#e879f9",
+		rgb: "232, 121, 249",
+		twClass: "bg-fuchsia-400",
+	},
+	{
+		name: "fuchsia-500",
+		variable: "COLORS.FUCHSIA_500",
+		css: "var(--color-fuchsia-500)",
+		hex: "#d946ef",
+		rgb: "217, 70, 239",
+		twClass: "bg-fuchsia-500",
+	},
+	{
+		name: "fuchsia-600",
+		variable: "COLORS.FUCHSIA_600",
+		css: "var(--color-fuchsia-600)",
+		hex: "#c026d3",
+		rgb: "192, 38, 211",
+		twClass: "bg-fuchsia-600",
+	},
+	{
+		name: "fuchsia-700",
+		variable: "COLORS.FUCHSIA_700",
+		css: "var(--color-fuchsia-700)",
+		hex: "#a21caf",
+		rgb: "162, 28, 175",
+		twClass: "bg-fuchsia-700",
+	},
+	{
+		name: "fuchsia-800",
+		variable: "COLORS.FUCHSIA_800",
+		css: "var(--color-fuchsia-800)",
+		hex: "#86198f",
+		rgb: "134, 25, 143",
+		twClass: "bg-fuchsia-800",
+	},
+	{
+		name: "fuchsia-900",
+		variable: "COLORS.FUCHSIA_900",
+		css: "var(--color-fuchsia-900)",
+		hex: "#701a75",
+		rgb: "112, 26, 117",
+		twClass: "bg-fuchsia-900",
+	},
+	{
+		name: "fuchsia-950",
+		variable: "COLORS.FUCHSIA_950",
+		css: "var(--color-fuchsia-950)",
+		hex: "#4a044e",
+		rgb: "74, 4, 78",
+		twClass: "bg-fuchsia-950",
+	},
+	// pink
+	{
+		name: "pink-50",
+		variable: "COLORS.PINK_50",
+		css: "var(--color-pink-50)",
+		hex: "#fdf2f8",
+		rgb: "253, 242, 248",
+		twClass: "bg-pink-50",
+	},
+	{
+		name: "pink-100",
+		variable: "COLORS.PINK_100",
+		css: "var(--color-pink-100)",
+		hex: "#fce7f3",
+		rgb: "252, 231, 243",
+		twClass: "bg-pink-100",
+	},
+	{
+		name: "pink-200",
+		variable: "COLORS.PINK_200",
+		css: "var(--color-pink-200)",
+		hex: "#fbcfe8",
+		rgb: "251, 207, 232",
+		twClass: "bg-pink-200",
+	},
+	{
+		name: "pink-300",
+		variable: "COLORS.PINK_300",
+		css: "var(--color-pink-300)",
+		hex: "#f9a8d4",
+		rgb: "249, 168, 212",
+		twClass: "bg-pink-300",
+	},
+	{
+		name: "pink-400",
+		variable: "COLORS.PINK_400",
+		css: "var(--color-pink-400)",
+		hex: "#f472b6",
+		rgb: "244, 114, 182",
+		twClass: "bg-pink-400",
+	},
+	{
+		name: "pink-500",
+		variable: "COLORS.PINK_500",
+		css: "var(--color-pink-500)",
+		hex: "#ec4899",
+		rgb: "236, 72, 153",
+		twClass: "bg-pink-500",
+	},
+	{
+		name: "pink-600",
+		variable: "COLORS.PINK_600",
+		css: "var(--color-pink-600)",
+		hex: "#db2777",
+		rgb: "219, 39, 119",
+		twClass: "bg-pink-600",
+	},
+	{
+		name: "pink-700",
+		variable: "COLORS.PINK_700",
+		css: "var(--color-pink-700)",
+		hex: "#be185d",
+		rgb: "190, 24, 93",
+		twClass: "bg-pink-700",
+	},
+	{
+		name: "pink-800",
+		variable: "COLORS.PINK_800",
+		css: "var(--color-pink-800)",
+		hex: "#9d174d",
+		rgb: "157, 23, 77",
+		twClass: "bg-pink-800",
+	},
+	{
+		name: "pink-900",
+		variable: "COLORS.PINK_900",
+		css: "var(--color-pink-900)",
+		hex: "#831843",
+		rgb: "131, 24, 67",
+		twClass: "bg-pink-900",
+	},
+	{
+		name: "pink-950",
+		variable: "COLORS.PINK_950",
+		css: "var(--color-pink-950)",
+		hex: "#500724",
+		rgb: "80, 7, 36",
+		twClass: "bg-pink-950",
+	},
+	// rose
+	{
+		name: "rose-50",
+		variable: "COLORS.ROSE_50",
+		css: "var(--color-rose-50)",
+		hex: "#fff1f2",
+		rgb: "255, 241, 242",
+		twClass: "bg-rose-50",
+	},
+	{
+		name: "rose-100",
+		variable: "COLORS.ROSE_100",
+		css: "var(--color-rose-100)",
+		hex: "#ffe4e6",
+		rgb: "255, 228, 230",
+		twClass: "bg-rose-100",
+	},
+	{
+		name: "rose-200",
+		variable: "COLORS.ROSE_200",
+		css: "var(--color-rose-200)",
+		hex: "#fecdd3",
+		rgb: "254, 205, 211",
+		twClass: "bg-rose-200",
+	},
+	{
+		name: "rose-300",
+		variable: "COLORS.ROSE_300",
+		css: "var(--color-rose-300)",
+		hex: "#fda4af",
+		rgb: "253, 164, 175",
+		twClass: "bg-rose-300",
+	},
+	{
+		name: "rose-400",
+		variable: "COLORS.ROSE_400",
+		css: "var(--color-rose-400)",
+		hex: "#fb7185",
+		rgb: "251, 113, 133",
+		twClass: "bg-rose-400",
+	},
+	{
+		name: "rose-500",
+		variable: "COLORS.ROSE_500",
+		css: "var(--color-rose-500)",
+		hex: "#f43f5e",
+		rgb: "244, 63, 94",
+		twClass: "bg-rose-500",
+	},
+	{
+		name: "rose-600",
+		variable: "COLORS.ROSE_600",
+		css: "var(--color-rose-600)",
+		hex: "#e11d48",
+		rgb: "225, 29, 72",
+		twClass: "bg-rose-600",
+	},
+	{
+		name: "rose-700",
+		variable: "COLORS.ROSE_700",
+		css: "var(--color-rose-700)",
+		hex: "#be123c",
+		rgb: "190, 18, 60",
+		twClass: "bg-rose-700",
+	},
+	{
+		name: "rose-800",
+		variable: "COLORS.ROSE_800",
+		css: "var(--color-rose-800)",
+		hex: "#9f1239",
+		rgb: "159, 18, 57",
+		twClass: "bg-rose-800",
+	},
+	{
+		name: "rose-900",
+		variable: "COLORS.ROSE_900",
+		css: "var(--color-rose-900)",
+		hex: "#881337",
+		rgb: "136, 19, 55",
+		twClass: "bg-rose-900",
+	},
+	{
+		name: "rose-950",
+		variable: "COLORS.ROSE_950",
+		css: "var(--color-rose-950)",
+		hex: "#4c0519",
+		rgb: "76, 5, 25",
+		twClass: "bg-rose-950",
+	},
+	// slate
+	{
+		name: "slate-50",
+		variable: "COLORS.SLATE_50",
+		css: "var(--color-slate-50)",
+		hex: "#f8fafc",
+		rgb: "248, 250, 252",
+		twClass: "bg-slate-50",
+	},
+	{
+		name: "slate-100",
+		variable: "COLORS.SLATE_100",
+		css: "var(--color-slate-100)",
+		hex: "#f1f5f9",
+		rgb: "241, 245, 249",
+		twClass: "bg-slate-100",
+	},
+	{
+		name: "slate-200",
+		variable: "COLORS.SLATE_200",
+		css: "var(--color-slate-200)",
+		hex: "#e2e8f0",
+		rgb: "226, 232, 240",
+		twClass: "bg-slate-200",
+	},
+	{
+		name: "slate-300",
+		variable: "COLORS.SLATE_300",
+		css: "var(--color-slate-300)",
+		hex: "#cbd5e1",
+		rgb: "203, 213, 225",
+		twClass: "bg-slate-300",
+	},
+	{
+		name: "slate-400",
+		variable: "COLORS.SLATE_400",
+		css: "var(--color-slate-400)",
+		hex: "#94a3b8",
+		rgb: "148, 163, 184",
+		twClass: "bg-slate-400",
+	},
+	{
+		name: "slate-500",
+		variable: "COLORS.SLATE_500",
+		css: "var(--color-slate-500)",
+		hex: "#64748b",
+		rgb: "100, 116, 139",
+		twClass: "bg-slate-500",
+	},
+	{
+		name: "slate-600",
+		variable: "COLORS.SLATE_600",
+		css: "var(--color-slate-600)",
+		hex: "#475569",
+		rgb: "71, 85, 105",
+		twClass: "bg-slate-600",
+	},
+	{
+		name: "slate-700",
+		variable: "COLORS.SLATE_700",
+		css: "var(--color-slate-700)",
+		hex: "#334155",
+		rgb: "51, 65, 85",
+		twClass: "bg-slate-700",
+	},
+	{
+		name: "slate-800",
+		variable: "COLORS.SLATE_800",
+		css: "var(--color-slate-800)",
+		hex: "#1e293b",
+		rgb: "30, 41, 59",
+		twClass: "bg-slate-800",
+	},
+	{
+		name: "slate-900",
+		variable: "COLORS.SLATE_900",
+		css: "var(--color-slate-900)",
+		hex: "#0f172a",
+		rgb: "15, 23, 42",
+		twClass: "bg-slate-900",
+	},
+	{
+		name: "slate-950",
+		variable: "COLORS.SLATE_950",
+		css: "var(--color-slate-950)",
+		hex: "#020617",
+		rgb: "2, 6, 23",
+		twClass: "bg-slate-950",
+	},
+	// gray
+	{
+		name: "gray-50",
+		variable: "COLORS.GRAY_50",
+		css: "var(--color-gray-50)",
+		hex: "#f9fafb",
+		rgb: "249, 250, 251",
+		twClass: "bg-gray-50",
+	},
+	{
+		name: "gray-100",
+		variable: "COLORS.GRAY_100",
+		css: "var(--color-gray-100)",
+		hex: "#f3f4f6",
+		rgb: "243, 244, 246",
+		twClass: "bg-gray-100",
+	},
+	{
+		name: "gray-200",
+		variable: "COLORS.GRAY_200",
+		css: "var(--color-gray-200)",
+		hex: "#e5e7eb",
+		rgb: "229, 231, 235",
+		twClass: "bg-gray-200",
+	},
+	{
+		name: "gray-300",
+		variable: "COLORS.GRAY_300",
+		css: "var(--color-gray-300)",
+		hex: "#d1d5db",
+		rgb: "209, 213, 219",
+		twClass: "bg-gray-300",
+	},
+	{
+		name: "gray-400",
+		variable: "COLORS.GRAY_400",
+		css: "var(--color-gray-400)",
+		hex: "#9ca3af",
+		rgb: "156, 163, 175",
+		twClass: "bg-gray-400",
+	},
+	{
+		name: "gray-500",
+		variable: "COLORS.GRAY_500",
+		css: "var(--color-gray-500)",
+		hex: "#6b7280",
+		rgb: "107, 114, 128",
+		twClass: "bg-gray-500",
+	},
+	{
+		name: "gray-600",
+		variable: "COLORS.GRAY_600",
+		css: "var(--color-gray-600)",
+		hex: "#4b5563",
+		rgb: "75, 85, 99",
+		twClass: "bg-gray-600",
+	},
+	{
+		name: "gray-700",
+		variable: "COLORS.GRAY_700",
+		css: "var(--color-gray-700)",
+		hex: "#374151",
+		rgb: "55, 65, 81",
+		twClass: "bg-gray-700",
+	},
+	{
+		name: "gray-800",
+		variable: "COLORS.GRAY_800",
+		css: "var(--color-gray-800)",
+		hex: "#1f2937",
+		rgb: "31, 41, 55",
+		twClass: "bg-gray-800",
+	},
+	{
+		name: "gray-900",
+		variable: "COLORS.GRAY_900",
+		css: "var(--color-gray-900)",
+		hex: "#111827",
+		rgb: "17, 24, 39",
+		twClass: "bg-gray-900",
+	},
+	{
+		name: "gray-950",
+		variable: "COLORS.GRAY_950",
+		css: "var(--color-gray-950)",
+		hex: "#030712",
+		rgb: "3, 7, 18",
+		twClass: "bg-gray-950",
+	},
+	// zinc
+	{
+		name: "zinc-50",
+		variable: "COLORS.ZINC_50",
+		css: "var(--color-zinc-50)",
+		hex: "#fafafa",
+		rgb: "250, 250, 250",
+		twClass: "bg-zinc-50",
+	},
+	{
+		name: "zinc-100",
+		variable: "COLORS.ZINC_100",
+		css: "var(--color-zinc-100)",
+		hex: "#f4f4f5",
+		rgb: "244, 244, 245",
+		twClass: "bg-zinc-100",
+	},
+	{
+		name: "zinc-200",
+		variable: "COLORS.ZINC_200",
+		css: "var(--color-zinc-200)",
+		hex: "#e4e4e7",
+		rgb: "228, 228, 231",
+		twClass: "bg-zinc-200",
+	},
+	{
+		name: "zinc-300",
+		variable: "COLORS.ZINC_300",
+		css: "var(--color-zinc-300)",
+		hex: "#d4d4d8",
+		rgb: "212, 212, 216",
+		twClass: "bg-zinc-300",
+	},
+	{
+		name: "zinc-400",
+		variable: "COLORS.ZINC_400",
+		css: "var(--color-zinc-400)",
+		hex: "#a1a1aa",
+		rgb: "161, 161, 170",
+		twClass: "bg-zinc-400",
+	},
+	{
+		name: "zinc-500",
+		variable: "COLORS.ZINC_500",
+		css: "var(--color-zinc-500)",
+		hex: "#71717a",
+		rgb: "113, 113, 122",
+		twClass: "bg-zinc-500",
+	},
+	{
+		name: "zinc-600",
+		variable: "COLORS.ZINC_600",
+		css: "var(--color-zinc-600)",
+		hex: "#52525b",
+		rgb: "82, 82, 91",
+		twClass: "bg-zinc-600",
+	},
+	{
+		name: "zinc-700",
+		variable: "COLORS.ZINC_700",
+		css: "var(--color-zinc-700)",
+		hex: "#3f3f46",
+		rgb: "63, 63, 70",
+		twClass: "bg-zinc-700",
+	},
+	{
+		name: "zinc-800",
+		variable: "COLORS.ZINC_800",
+		css: "var(--color-zinc-800)",
+		hex: "#27272a",
+		rgb: "39, 39, 42",
+		twClass: "bg-zinc-800",
+	},
+	{
+		name: "zinc-900",
+		variable: "COLORS.ZINC_900",
+		css: "var(--color-zinc-900)",
+		hex: "#18181b",
+		rgb: "24, 24, 27",
+		twClass: "bg-zinc-900",
+	},
+	{
+		name: "zinc-950",
+		variable: "COLORS.ZINC_950",
+		css: "var(--color-zinc-950)",
+		hex: "#09090b",
+		rgb: "9, 9, 11",
+		twClass: "bg-zinc-950",
+	},
+	// neutral
+	{
+		name: "neutral-50",
+		variable: "COLORS.NEUTRAL_50",
+		css: "var(--color-neutral-50)",
+		hex: "#fafafa",
+		rgb: "250, 250, 250",
+		twClass: "bg-neutral-50",
+	},
+	{
+		name: "neutral-100",
+		variable: "COLORS.NEUTRAL_100",
+		css: "var(--color-neutral-100)",
+		hex: "#f5f5f5",
+		rgb: "245, 245, 245",
+		twClass: "bg-neutral-100",
+	},
+	{
+		name: "neutral-200",
+		variable: "COLORS.NEUTRAL_200",
+		css: "var(--color-neutral-200)",
+		hex: "#e5e5e5",
+		rgb: "229, 229, 229",
+		twClass: "bg-neutral-200",
+	},
+	{
+		name: "neutral-300",
+		variable: "COLORS.NEUTRAL_300",
+		css: "var(--color-neutral-300)",
+		hex: "#d4d4d4",
+		rgb: "212, 212, 212",
+		twClass: "bg-neutral-300",
+	},
+	{
+		name: "neutral-400",
+		variable: "COLORS.NEUTRAL_400",
+		css: "var(--color-neutral-400)",
+		hex: "#a3a3a3",
+		rgb: "163, 163, 163",
+		twClass: "bg-neutral-400",
+	},
+	{
+		name: "neutral-500",
+		variable: "COLORS.NEUTRAL_500",
+		css: "var(--color-neutral-500)",
+		hex: "#737373",
+		rgb: "115, 115, 115",
+		twClass: "bg-neutral-500",
+	},
+	{
+		name: "neutral-600",
+		variable: "COLORS.NEUTRAL_600",
+		css: "var(--color-neutral-600)",
+		hex: "#525252",
+		rgb: "82, 82, 82",
+		twClass: "bg-neutral-600",
+	},
+	{
+		name: "neutral-700",
+		variable: "COLORS.NEUTRAL_700",
+		css: "var(--color-neutral-700)",
+		hex: "#404040",
+		rgb: "64, 64, 64",
+		twClass: "bg-neutral-700",
+	},
+	{
+		name: "neutral-800",
+		variable: "COLORS.NEUTRAL_800",
+		css: "var(--color-neutral-800)",
+		hex: "#262626",
+		rgb: "38, 38, 38",
+		twClass: "bg-neutral-800",
+	},
+	{
+		name: "neutral-900",
+		variable: "COLORS.NEUTRAL_900",
+		css: "var(--color-neutral-900)",
+		hex: "#171717",
+		rgb: "23, 23, 23",
+		twClass: "bg-neutral-900",
+	},
+	{
+		name: "neutral-950",
+		variable: "COLORS.NEUTRAL_950",
+		css: "var(--color-neutral-950)",
+		hex: "#0a0a0a",
+		rgb: "10, 10, 10",
+		twClass: "bg-neutral-950",
+	},
+	// stone
+	{
+		name: "stone-50",
+		variable: "COLORS.STONE_50",
+		css: "var(--color-stone-50)",
+		hex: "#fafaf9",
+		rgb: "250, 250, 249",
+		twClass: "bg-stone-50",
+	},
+	{
+		name: "stone-100",
+		variable: "COLORS.STONE_100",
+		css: "var(--color-stone-100)",
+		hex: "#f5f5f4",
+		rgb: "245, 245, 244",
+		twClass: "bg-stone-100",
+	},
+	{
+		name: "stone-200",
+		variable: "COLORS.STONE_200",
+		css: "var(--color-stone-200)",
+		hex: "#e7e5e4",
+		rgb: "231, 229, 228",
+		twClass: "bg-stone-200",
+	},
+	{
+		name: "stone-300",
+		variable: "COLORS.STONE_300",
+		css: "var(--color-stone-300)",
+		hex: "#d6d3d1",
+		rgb: "214, 211, 209",
+		twClass: "bg-stone-300",
+	},
+	{
+		name: "stone-400",
+		variable: "COLORS.STONE_400",
+		css: "var(--color-stone-400)",
+		hex: "#a8a29e",
+		rgb: "168, 162, 158",
+		twClass: "bg-stone-400",
+	},
+	{
+		name: "stone-500",
+		variable: "COLORS.STONE_500",
+		css: "var(--color-stone-500)",
+		hex: "#78716c",
+		rgb: "120, 113, 108",
+		twClass: "bg-stone-500",
+	},
+	{
+		name: "stone-600",
+		variable: "COLORS.STONE_600",
+		css: "var(--color-stone-600)",
+		hex: "#57534e",
+		rgb: "87, 83, 78",
+		twClass: "bg-stone-600",
+	},
+	{
+		name: "stone-700",
+		variable: "COLORS.STONE_700",
+		css: "var(--color-stone-700)",
+		hex: "#44403c",
+		rgb: "68, 64, 60",
+		twClass: "bg-stone-700",
+	},
+	{
+		name: "stone-800",
+		variable: "COLORS.STONE_800",
+		css: "var(--color-stone-800)",
+		hex: "#292524",
+		rgb: "41, 37, 36",
+		twClass: "bg-stone-800",
+	},
+	{
+		name: "stone-900",
+		variable: "COLORS.STONE_900",
+		css: "var(--color-stone-900)",
+		hex: "#1c1917",
+		rgb: "28, 25, 23",
+		twClass: "bg-stone-900",
+	},
+	{
+		name: "stone-950",
+		variable: "COLORS.STONE_950",
+		css: "var(--color-stone-950)",
+		hex: "#0c0a09",
+		rgb: "12, 10, 9",
+		twClass: "bg-stone-950",
+	},
+]