From 67cc976775132adab55cd0cbd659fa3a86ec69fb Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Wed, 26 Mar 2025 10:25:16 -0500
Subject: [PATCH 1/3] unf*ck the layout

---
 .../lib/components/docs/site-footer.svelte    |  2 +-
 .../lib/components/docs/site-header.svelte    |  4 +-
 .../docs/src/routes/(app)/docs/+layout.svelte |  4 +-
 sites/docs/src/styles/globals.css             |  7 +-
 sites/docs/tailwind.config.js                 | 96 -------------------
 5 files changed, 8 insertions(+), 105 deletions(-)
 delete mode 100644 sites/docs/tailwind.config.js

diff --git a/sites/docs/src/lib/components/docs/site-footer.svelte b/sites/docs/src/lib/components/docs/site-footer.svelte
index ddbc43a895..b2ec4dd83e 100644
--- a/sites/docs/src/lib/components/docs/site-footer.svelte
+++ b/sites/docs/src/lib/components/docs/site-footer.svelte
@@ -2,7 +2,7 @@
 	import { siteConfig } from "$lib/config/site.js";
 </script>
 
-<footer class="py-6 md:px-8 md:py-0">
+<footer class="!py-6 md:px-8 md:!py-0 border-t border-dashed">
 	<div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
 		<div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
 			<p class="text-muted-foreground text-center text-sm leading-loose md:text-left">
diff --git a/sites/docs/src/lib/components/docs/site-header.svelte b/sites/docs/src/lib/components/docs/site-header.svelte
index 8587bb3ffa..2a90472579 100644
--- a/sites/docs/src/lib/components/docs/site-header.svelte
+++ b/sites/docs/src/lib/components/docs/site-header.svelte
@@ -10,9 +10,9 @@
 </script>
 
 <header
-	class="border-border/40 bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur"
+	class="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b border-dashed backdrop-blur"
 >
-	<div class="container flex h-14 max-w-screen-2xl items-center">
+	<div class="container !pb-0 flex h-14 max-w-screen-2xl items-center">
 		<MainNav />
 		<MobileNav />
 		<div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
diff --git a/sites/docs/src/routes/(app)/docs/+layout.svelte b/sites/docs/src/routes/(app)/docs/+layout.svelte
index 657b83e8b5..63e0665f7b 100644
--- a/sites/docs/src/routes/(app)/docs/+layout.svelte
+++ b/sites/docs/src/routes/(app)/docs/+layout.svelte
@@ -6,9 +6,9 @@
 	let { children } = $props();
 </script>
 
-<div class="border-b">
+<div>
 	<div
-		class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
+		class="container !pb-0 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
 	>
 		<aside
 			class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
diff --git a/sites/docs/src/styles/globals.css b/sites/docs/src/styles/globals.css
index c95aba08b7..f19308fbf9 100644
--- a/sites/docs/src/styles/globals.css
+++ b/sites/docs/src/styles/globals.css
@@ -125,12 +125,11 @@
 	}
 }
 
-/*
-@media (max-width: 640px) {
+@layer utilities {
 	.container {
-		padding: 0 var(--spacing);
+		@apply px-8 pb-8 2xl:border-x border-dashed mx-auto max-w-screen-2xl;
 	}
-} */
+}
 
 .markdown code {
 	background-color: var(--muted);
diff --git a/sites/docs/tailwind.config.js b/sites/docs/tailwind.config.js
deleted file mode 100644
index afdb809f38..0000000000
--- a/sites/docs/tailwind.config.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import tailwindcssAnimate from "tailwindcss-animate";
-import { fontFamily } from "tailwindcss/defaultTheme";
-
-/** @type {import('tailwindcss').Config} */
-const config = {
-	darkMode: ["class"],
-	content: ["./src/**/*.{html,js,svelte,ts}"],
-	safelist: ["dark"],
-	theme: {
-		container: {
-			center: true,
-			padding: "2rem",
-			screens: {
-				"2xl": "1400px",
-			},
-		},
-		extend: {
-			colors: {
-				border: "hsl(var(--border) / <alpha-value>)",
-				input: "hsl(var(--input) / <alpha-value>)",
-				ring: "hsl(var(--ring))",
-				background: "hsl(var(--background) / <alpha-value>)",
-				foreground: "hsl(var(--foreground) / <alpha-value>)",
-				primary: {
-					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-					foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
-				},
-				muted: {
-					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
-				},
-				accent: {
-					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-					foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
-				},
-				popover: {
-					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-					foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
-				},
-				card: {
-					DEFAULT: "hsl(var(--card) / <alpha-value>)",
-					foreground: "hsl(var(--card-foreground) / <alpha-value>)",
-				},
-				sidebar: {
-					DEFAULT: "hsl(var(--sidebar-background))",
-					foreground: "hsl(var(--sidebar-foreground))",
-					primary: "hsl(var(--sidebar-primary))",
-					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-					accent: "hsl(var(--sidebar-accent))",
-					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-					border: "hsl(var(--sidebar-border))",
-					ring: "hsl(var(--sidebar-ring))",
-				},
-			},
-			borderRadius: {
-				xl: "calc(var(--radius) + 4px)",
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)",
-			},
-			fontFamily: {
-				sans: ["geist-sans", ...fontFamily.sans],
-			},
-			keyframes: {
-				"accordion-down": {
-					from: { height: "0" },
-					to: { height: "var(--bits-accordion-content-height)" },
-				},
-				"accordion-up": {
-					from: { height: "var(--bits-accordion-content-height)" },
-					to: { height: "0" },
-				},
-				"caret-blink": {
-					"0%,70%,100%": { opacity: "1" },
-					"20%,50%": { opacity: "0" },
-				},
-			},
-			animation: {
-				"accordion-down": "accordion-down 0.2s ease-out",
-				"accordion-up": "accordion-up 0.2s ease-out",
-				"caret-blink": "caret-blink 1.25s ease-out infinite",
-			},
-		},
-	},
-	plugins: [tailwindcssAnimate],
-};
-
-export default config;

From 50be5c1b6862832b1e86bb96a5969c775475d088 Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Wed, 26 Mar 2025 10:30:45 -0500
Subject: [PATCH 2/3] format

---
 sites/docs/src/lib/components/docs/site-footer.svelte | 2 +-
 sites/docs/src/lib/components/docs/site-header.svelte | 2 +-
 sites/docs/src/routes/(app)/docs/+layout.svelte       | 2 +-
 sites/docs/src/styles/globals.css                     | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/sites/docs/src/lib/components/docs/site-footer.svelte b/sites/docs/src/lib/components/docs/site-footer.svelte
index b2ec4dd83e..b8bdca4e3d 100644
--- a/sites/docs/src/lib/components/docs/site-footer.svelte
+++ b/sites/docs/src/lib/components/docs/site-footer.svelte
@@ -2,7 +2,7 @@
 	import { siteConfig } from "$lib/config/site.js";
 </script>
 
-<footer class="!py-6 md:px-8 md:!py-0 border-t border-dashed">
+<footer class="border-t border-dashed !py-6 md:!py-0 md:px-8">
 	<div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
 		<div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
 			<p class="text-muted-foreground text-center text-sm leading-loose md:text-left">
diff --git a/sites/docs/src/lib/components/docs/site-header.svelte b/sites/docs/src/lib/components/docs/site-header.svelte
index 2a90472579..17cc7310f1 100644
--- a/sites/docs/src/lib/components/docs/site-header.svelte
+++ b/sites/docs/src/lib/components/docs/site-header.svelte
@@ -12,7 +12,7 @@
 <header
 	class="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 w-full border-b border-dashed backdrop-blur"
 >
-	<div class="container !pb-0 flex h-14 max-w-screen-2xl items-center">
+	<div class="container flex h-14 max-w-screen-2xl items-center !pb-0">
 		<MainNav />
 		<MobileNav />
 		<div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
diff --git a/sites/docs/src/routes/(app)/docs/+layout.svelte b/sites/docs/src/routes/(app)/docs/+layout.svelte
index 63e0665f7b..52c009b29e 100644
--- a/sites/docs/src/routes/(app)/docs/+layout.svelte
+++ b/sites/docs/src/routes/(app)/docs/+layout.svelte
@@ -8,7 +8,7 @@
 
 <div>
 	<div
-		class="container !pb-0 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
+		class="container flex-1 items-start !pb-0 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
 	>
 		<aside
 			class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block"
diff --git a/sites/docs/src/styles/globals.css b/sites/docs/src/styles/globals.css
index f19308fbf9..8a502c5125 100644
--- a/sites/docs/src/styles/globals.css
+++ b/sites/docs/src/styles/globals.css
@@ -127,7 +127,7 @@
 
 @layer utilities {
 	.container {
-		@apply px-8 pb-8 2xl:border-x border-dashed mx-auto max-w-screen-2xl;
+		@apply mx-auto max-w-screen-2xl border-dashed px-8 pb-8 2xl:border-x;
 	}
 }
 

From bf13c6766eaa97d65031ab6e6fa2e2c545d794ef Mon Sep 17 00:00:00 2001
From: Aidan Bleser <aidanbleser35@gmail.com>
Date: Wed, 26 Mar 2025 12:03:59 -0500
Subject: [PATCH 3/3] bring our colors up to date

---
 pnpm-lock.yaml                                |  13 +
 sites/docs/package.json                       |   1 +
 .../lib/components/colors/color-card.svelte   | 183 +++++--
 .../docs/src/lib/components/colors/colors.ts  |  87 +++
 sites/docs/src/lib/registry/colors.ts         | 510 +++++++++---------
 .../docs/src/routes/(app)/colors/+page.svelte |   6 +-
 6 files changed, 490 insertions(+), 310 deletions(-)
 create mode 100644 sites/docs/src/lib/components/colors/colors.ts

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2aa483601a..7a609d77d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -255,6 +255,9 @@ importers:
       rimraf:
         specifier: ^4.4.1
         version: 4.4.1
+      runed:
+        specifier: ^0.25.0
+        version: 0.25.0(svelte@5.16.1)
       shiki:
         specifier: ^1.2.1
         version: 1.2.1
@@ -4244,6 +4247,11 @@ packages:
     peerDependencies:
       svelte: ^5.7.0
 
+  runed@0.25.0:
+    resolution: {integrity: sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==}
+    peerDependencies:
+      svelte: ^5.7.0
+
   rw@1.3.3:
     resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
 
@@ -9398,6 +9406,11 @@ snapshots:
       esm-env: 1.2.2
       svelte: 5.16.1
 
+  runed@0.25.0(svelte@5.16.1):
+    dependencies:
+      esm-env: 1.2.2
+      svelte: 5.16.1
+
   rw@1.3.3: {}
 
   rxjs@7.8.1:
diff --git a/sites/docs/package.json b/sites/docs/package.json
index 1df47c5ef0..0ff292528c 100644
--- a/sites/docs/package.json
+++ b/sites/docs/package.json
@@ -68,6 +68,7 @@
 		"remark-code-import": "^1.2.0",
 		"remark-gfm": "^4.0.0",
 		"rimraf": "^4.4.1",
+		"runed": "^0.25.0",
 		"shiki": "^1.2.1",
 		"svelte": "^5.16.1",
 		"svelte-check": "^4.1.1",
diff --git a/sites/docs/src/lib/components/colors/color-card.svelte b/sites/docs/src/lib/components/colors/color-card.svelte
index 0766eec729..af6435c14d 100644
--- a/sites/docs/src/lib/components/colors/color-card.svelte
+++ b/sites/docs/src/lib/components/colors/color-card.svelte
@@ -1,69 +1,140 @@
 <script lang="ts">
 	import { toast } from "svelte-sonner";
-	import * as Card from "$lib/registry/ui/card/index.js";
-	import { colorData } from "$lib/components/colors/color-data.js";
-	import * as RadioGroup from "$lib/registry/ui/radio-group/index.js";
-	import { Label } from "$lib/registry/ui/label/index.js";
+	import { PersistedState } from "runed";
+	import * as Select from "$lib/registry/ui/select/index.js";
+	import { AspectRatio } from "$lib/registry/ui/aspect-ratio/index.js";
+	import { getColors, type ColorPalette } from "$lib/components/colors/colors.js";
+	import Clipboard from "@lucide/svelte/icons/clipboard";
+	import Check from "@lucide/svelte/icons/check";
+	import { scale } from "svelte/transition";
 
-	let selectedFormat = "hsl"; // Default color format
+	type Format = {
+		format: string;
+		hint: string;
+	};
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	function handleColorClick(colorName: string, shade: string, colorEntry: any) {
-		const colorValue = colorEntry[selectedFormat];
-		toast.success(`Copied "${colorValue}" to clipboard`);
+	const formats: Format[] = [
+		{
+			format: "className",
+			hint: "bg-slate-100",
+		},
+		{
+			format: "hex",
+			hint: "#f8fafc",
+		},
+		{
+			format: "rgb",
+			hint: "248 250 252",
+		},
+		{
+			format: "hsl",
+			hint: "210 40% 98%",
+		},
+		{
+			format: "oklch",
+			hint: "0.98 0.00 248",
+		},
+	] as const;
 
-		navigator.clipboard.writeText(colorValue).catch((err) => {
-			toast.error(`Failed to copy ${colorName} ${shade} (${colorValue})`);
-			console.error("Error copying to clipboard:", err);
-		});
+	const selectedFormat = new PersistedState("color-format-preference", formats[0].format);
+
+	const colors = getColors();
+
+	let copied = $state<string>();
+
+	async function copy(shade: ColorPalette["colors"][number]) {
+		copied = shade.className;
+
+		const text = shade[selectedFormat.current as never] as string;
+
+		await navigator.clipboard.writeText(text);
+
+		toast.success(`Copied ${text} to clipboard!`);
+
+		setTimeout(() => {
+			copied = undefined;
+		}, 1000);
 	}
 </script>
 
-<div class="mb-5 flex flex-col gap-2">
-	<div class="font-bold">Choose color format to copy:</div>
-	<RadioGroup.Root bind:value={selectedFormat} class="flex flex-row gap-5">
-		<div class="flex cursor-pointer items-center space-x-2">
-			<RadioGroup.Item value="hsl" id="hsl-option" />
-			<Label for="hsl-option">HSL</Label>
-		</div>
-		<div class="flex cursor-pointer items-center space-x-2">
-			<RadioGroup.Item value="rgb" id="rgb-option" />
-			<Label for="rgb-option">RGB</Label>
-		</div>
-		<div class="flex cursor-pointer items-center space-x-2">
-			<RadioGroup.Item value="hex" id="hex-option" />
-			<Label for="hex-option">Hex</Label>
-		</div>
-		<div class="flex cursor-pointer items-center space-x-2">
-			<RadioGroup.Item value="className" id="class-name-option" />
-			<Label for="class-name-option">Class Name</Label>
-		</div>
-	</RadioGroup.Root>
-</div>
-
-<Card.Root>
-	<div class="flex flex-col px-2 pt-5 md:px-5">
-		{#each Object.entries(colorData) as [colorName, shades] (colorName)}
-			<div class="">
-				<h2 class="my-2 capitalize md:text-xl">{colorName}</h2>
+<div class="flex w-full flex-col gap-8">
+	{#each colors as color (color.name)}
+		<div class="flex w-full flex-col gap-2 rounded-lg border p-2">
+			<div class="flex place-items-center justify-between">
+				<h2>{`${color.name[0].toUpperCase()}${color.name.slice(1)}`}</h2>
+				<Select.Root type="single" bind:value={selectedFormat.current}>
+					<Select.Trigger class="h-7 w-fit cursor-pointer text-xs">
+						<span class="mr-2">
+							<span class="font-bold">Format:</span>
+							<span class="text-muted-foreground font-mono"
+								>{selectedFormat.current}</span
+							>
+						</span>
+					</Select.Trigger>
+					<Select.Content align="end">
+						{#each formats as format (format.format)}
+							<Select.Item value={format.format}>
+								<span>
+									<span>{format.format}</span>
+									<span class="text-muted-foreground font-mono"
+										>{format.hint}</span
+									>
+								</span>
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
+			<div class="flex flex-col place-items-end md:flex-row md:gap-2">
+				{#each color.colors as shade (shade.className)}
+					<button
+						type="button"
+						onclick={() => copy(shade)}
+						class="group w-full flex-1 shrink-0 cursor-pointer md:h-full md:w-auto"
+					>
+						<div class="relative">
+							<div class="hidden md:block">
+								<AspectRatio ratio={12 / 16}>
+									<div
+										class="size-full rounded-lg"
+										style="background-color: {shade.hex};"
+									></div>
+								</AspectRatio>
+							</div>
+							<div
+								class="block h-36 w-full rounded-lg md:hidden"
+								style="background-color: {shade.hex};"
+							></div>
 
-				<div class="overflox-x-auto mb-5 flex gap-1 md:gap-2">
-					{#each Object.entries(shades) as [shade, colorEntry] (shade)}
-						<button
-							on:click={() => handleColorClick(colorName, shade, colorEntry)}
-							class="group h-12 w-12 rounded-lg border transition-transform duration-200 sm:h-14 sm:w-14 md:h-20 md:w-20 md:hover:scale-[1.02] lg:h-32 lg:w-32"
-							style="background-color: {colorEntry.hex};"
-						>
-							<div class="h-full w-full" title="{colorName} {shade}"></div>
 							<div
-								class="md:group-hover:text-foreground text-foreground/[70%] text-xs sm:text-sm md:text-base"
+								class="absolute right-2 top-2 opacity-0 transition-all group-hover:opacity-100"
+								style="color: {shade.foreground};"
 							>
-								{shade}
+								{#if copied === shade.className}
+									<div in:scale>
+										<Check class="size-4" />
+									</div>
+								{:else}
+									<div in:scale>
+										<Clipboard class="size-4" />
+									</div>
+								{/if}
 							</div>
-						</button>
-					{/each}
-				</div>
+						</div>
+
+						<span
+							class="text-muted-foreground hidden text-nowrap py-1 font-mono text-sm xl:block"
+						>
+							{shade.className}
+						</span>
+						<span
+							class="text-muted-foreground block text-nowrap py-1 font-mono text-sm xl:hidden"
+						>
+							{shade.className.split("-")[1]}
+						</span>
+					</button>
+				{/each}
 			</div>
-		{/each}
-	</div>
-</Card.Root>
+		</div>
+	{/each}
+</div>
diff --git a/sites/docs/src/lib/components/colors/colors.ts b/sites/docs/src/lib/components/colors/colors.ts
new file mode 100644
index 0000000000..bf47da82b6
--- /dev/null
+++ b/sites/docs/src/lib/components/colors/colors.ts
@@ -0,0 +1,87 @@
+import { z } from "zod";
+
+import { colors } from "$lib/registry/colors.js";
+
+const colorSchema = z.object({
+	name: z.string(),
+	id: z.string(),
+	scale: z.number(),
+	className: z.string(),
+	hex: z.string(),
+	rgb: z.string(),
+	hsl: z.string(),
+	foreground: z.string(),
+	oklch: z.string(),
+});
+
+const colorPaletteSchema = z.object({
+	name: z.string(),
+	colors: z.array(colorSchema),
+});
+
+export type ColorPalette = z.infer<typeof colorPaletteSchema>;
+
+export function getColorFormat(color: Color) {
+	return {
+		className: `bg-${color.name}-100`,
+		hex: color.hex,
+		rgb: color.rgb,
+		hsl: color.hsl,
+		oklch: color.oklch,
+	};
+}
+
+export type ColorFormat = keyof ReturnType<typeof getColorFormat>;
+
+export function getColors() {
+	const tailwindColors = colorPaletteSchema.array().parse(
+		Object.entries(colors)
+			.map(([name, color]) => {
+				if (!Array.isArray(color)) {
+					return null;
+				}
+
+				return {
+					name,
+					colors: color.map((color) => {
+						const rgb = color.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3");
+
+						return {
+							...color,
+							name,
+							id: `${name}-${color.scale}`,
+							className: `${name}-${color.scale}`,
+							rgb,
+							hsl: color.hsl.replace(
+								/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+								"$1 $2 $3"
+							),
+							oklch: color.oklch.replace(
+								/^oklch\(([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)$/,
+								"$1 $2 $3"
+							),
+							foreground: getForegroundFromBackground(rgb),
+						};
+					}),
+				};
+			})
+			.filter(Boolean)
+	);
+
+	return tailwindColors;
+}
+
+export type Color = ReturnType<typeof getColors>[number]["colors"][number];
+
+function getForegroundFromBackground(rgb: string) {
+	const [r, g, b] = rgb.split(" ").map(Number);
+
+	function toLinear(number: number): number {
+		const base = number / 255;
+		return base <= 0.04045 ? base / 12.92 : Math.pow((base + 0.055) / 1.055, 2.4);
+	}
+
+	const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+
+	return luminance > 0.179 ? "#000" : "#fff";
+}
diff --git a/sites/docs/src/lib/registry/colors.ts b/sites/docs/src/lib/registry/colors.ts
index 94b7b4e626..de16160f9f 100644
--- a/sites/docs/src/lib/registry/colors.ts
+++ b/sites/docs/src/lib/registry/colors.ts
@@ -1,17 +1,17 @@
-interface CompleteColorFormat {
+export type CompleteColorFormat = {
 	hex: string;
 	rgb: string;
 	hsl: string;
 	oklch: string;
-}
+};
 
-interface ColorScale {
+type ColorScale = {
 	scale: number;
 	hex: string;
 	rgb: string;
 	hsl: string;
-	oklch: string; // Required for all color scales
-}
+	oklch: string;
+};
 
 type Colors = {
 	inherit: string;
@@ -51,13 +51,13 @@ export const colors: Colors = {
 		hex: "#000000",
 		rgb: "rgb(0,0,0)",
 		hsl: "hsl(0,0%,0%)",
-		oklch: "oklch(0% 0 0)",
+		oklch: "oklch(0.00,0.00,0)",
 	},
 	white: {
 		hex: "#ffffff",
 		rgb: "rgb(255,255,255)",
 		hsl: "hsl(0,0%,100%)",
-		oklch: "oklch(100% 0 0)",
+		oklch: "oklch(1.00,0.00,0)",
 	},
 	slate: [
 		{
@@ -65,77 +65,77 @@ export const colors: Colors = {
 			hex: "#f8fafc",
 			rgb: "rgb(248,250,252)",
 			hsl: "hsl(210,40%,98%)",
-			oklch: "oklch(98.4% 0.003 248)",
+			oklch: "oklch(0.98,0.00,248)",
 		},
 		{
 			scale: 100,
 			hex: "#f1f5f9",
 			rgb: "rgb(241,245,249)",
 			hsl: "hsl(210,40%,96.1%)",
-			oklch: "oklch(96.8% 0.007 248)",
+			oklch: "oklch(0.97,0.01,248)",
 		},
 		{
 			scale: 200,
 			hex: "#e2e8f0",
 			rgb: "rgb(226,232,240)",
 			hsl: "hsl(214.3,31.8%,91.4%)",
-			oklch: "oklch(92.9% 0.013 256)",
+			oklch: "oklch(0.93,0.01,256)",
 		},
 		{
 			scale: 300,
 			hex: "#cbd5e1",
 			rgb: "rgb(203,213,225)",
 			hsl: "hsl(212.7,26.8%,83.9%)",
-			oklch: "oklch(86.9% 0.02 253)",
+			oklch: "oklch(0.87,0.02,253)",
 		},
 		{
 			scale: 400,
 			hex: "#94a3b8",
 			rgb: "rgb(148,163,184)",
 			hsl: "hsl(215,20.2%,65.1%)",
-			oklch: "oklch(71.1% 0.035 257)",
+			oklch: "oklch(0.71,0.04,257)",
 		},
 		{
 			scale: 500,
 			hex: "#64748b",
 			rgb: "rgb(100,116,139)",
 			hsl: "hsl(215.4,16.3%,46.9%)",
-			oklch: "oklch(55.4% 0.041 257)",
+			oklch: "oklch(0.55,0.04,257)",
 		},
 		{
 			scale: 600,
 			hex: "#475569",
 			rgb: "rgb(71,85,105)",
 			hsl: "hsl(215.3,19.3%,34.5%)",
-			oklch: "oklch(44.6% 0.037 257)",
+			oklch: "oklch(0.45,0.04,257)",
 		},
 		{
 			scale: 700,
 			hex: "#334155",
 			rgb: "rgb(51,65,85)",
 			hsl: "hsl(215.3,25%,26.7%)",
-			oklch: "oklch(37.2% 0.039 257)",
+			oklch: "oklch(0.37,0.04,257)",
 		},
 		{
 			scale: 800,
 			hex: "#1e293b",
 			rgb: "rgb(30,41,59)",
 			hsl: "hsl(217.2,32.6%,17.5%)",
-			oklch: "oklch(27.9% 0.037 260)",
+			oklch: "oklch(0.28,0.04,260)",
 		},
 		{
 			scale: 900,
 			hex: "#0f172a",
 			rgb: "rgb(15,23,42)",
 			hsl: "hsl(222.2,47.4%,11.2%)",
-			oklch: "oklch(20.8% 0.04 266)",
+			oklch: "oklch(0.21,0.04,266)",
 		},
 		{
 			scale: 950,
 			hex: "#020617",
 			rgb: "rgb(2,6,23)",
 			hsl: "hsl(222.2,84%,4.9%)",
-			oklch: "oklch(12.9% 0.041 265)",
+			oklch: "oklch(0.13,0.04,265)",
 		},
 	],
 	gray: [
@@ -144,77 +144,77 @@ export const colors: Colors = {
 			hex: "#f9fafb",
 			rgb: "rgb(249,250,251)",
 			hsl: "hsl(210,20%,98%)",
-			oklch: "oklch(98.5% 0.002 248)",
+			oklch: "oklch(0.98,0.00,248)",
 		},
 		{
 			scale: 100,
 			hex: "#f3f4f6",
 			rgb: "rgb(243,244,246)",
 			hsl: "hsl(220,14.3%,95.9%)",
-			oklch: "oklch(96.7% 0.003 265)",
+			oklch: "oklch(0.97,0.00,265)",
 		},
 		{
 			scale: 200,
 			hex: "#e5e7eb",
 			rgb: "rgb(229,231,235)",
 			hsl: "hsl(220,13%,91%)",
-			oklch: "oklch(92.8% 0.006 265)",
+			oklch: "oklch(0.93,0.01,265)",
 		},
 		{
 			scale: 300,
 			hex: "#d1d5db",
 			rgb: "rgb(209,213,219)",
 			hsl: "hsl(216,12.2%,83.9%)",
-			oklch: "oklch(87.2% 0.009 258)",
+			oklch: "oklch(0.87,0.01,258)",
 		},
 		{
 			scale: 400,
 			hex: "#9ca3af",
 			rgb: "rgb(156,163,175)",
 			hsl: "hsl(217.9,10.6%,64.9%)",
-			oklch: "oklch(71.4% 0.019 261)",
+			oklch: "oklch(0.71,0.02,261)",
 		},
 		{
 			scale: 500,
 			hex: "#6b7280",
 			rgb: "rgb(107,114,128)",
 			hsl: "hsl(220,8.9%,46.1%)",
-			oklch: "oklch(55.1% 0.023 264)",
+			oklch: "oklch(0.55,0.02,264)",
 		},
 		{
 			scale: 600,
 			hex: "#4b5563",
 			rgb: "rgb(75,85,99)",
 			hsl: "hsl(215,13.8%,34.1%)",
-			oklch: "oklch(44.6% 0.026 257)",
+			oklch: "oklch(0.45,0.03,257)",
 		},
 		{
 			scale: 700,
 			hex: "#374151",
 			rgb: "rgb(55,65,81)",
 			hsl: "hsl(216.9,19.1%,26.7%)",
-			oklch: "oklch(37.3% 0.031 260)",
+			oklch: "oklch(0.37,0.03,260)",
 		},
 		{
 			scale: 800,
 			hex: "#1f2937",
 			rgb: "rgb(31,41,55)",
 			hsl: "hsl(215,27.9%,16.9%)",
-			oklch: "oklch(27.8% 0.03 257)",
+			oklch: "oklch(0.28,0.03,257)",
 		},
 		{
 			scale: 900,
 			hex: "#111827",
 			rgb: "rgb(17,24,39)",
 			hsl: "hsl(220.9,39.3%,11%)",
-			oklch: "oklch(21% 0.032 265)",
+			oklch: "oklch(0.21,0.03,265)",
 		},
 		{
 			scale: 950,
 			hex: "#030712",
 			rgb: "rgb(3,7,18)",
 			hsl: "hsl(224,71.4%,4.1%)",
-			oklch: "oklch(13% 0.027 262)",
+			oklch: "oklch(0.13,0.03,262)",
 		},
 	],
 	zinc: [
@@ -223,77 +223,77 @@ export const colors: Colors = {
 			hex: "#fafafa",
 			rgb: "rgb(250,250,250)",
 			hsl: "hsl(0,0%,98%)",
-			oklch: "oklch(98.5% 0 none)",
+			oklch: "oklch(0.99,0.00,0)",
 		},
 		{
 			scale: 100,
 			hex: "#f4f4f5",
 			rgb: "rgb(244,244,245)",
 			hsl: "hsl(240,4.8%,95.9%)",
-			oklch: "oklch(96.7% 0.001 286)",
+			oklch: "oklch(0.97,0.00,286)",
 		},
 		{
 			scale: 200,
 			hex: "#e4e4e7",
 			rgb: "rgb(228,228,231)",
 			hsl: "hsl(240,5.9%,90%)",
-			oklch: "oklch(92% 0.004 286)",
+			oklch: "oklch(0.92,0.00,286)",
 		},
 		{
 			scale: 300,
 			hex: "#d4d4d8",
 			rgb: "rgb(212,212,216)",
 			hsl: "hsl(240,4.9%,83.9%)",
-			oklch: "oklch(87.1% 0.005 286)",
+			oklch: "oklch(0.87,0.01,286)",
 		},
 		{
 			scale: 400,
 			hex: "#a1a1aa",
 			rgb: "rgb(161,161,170)",
 			hsl: "hsl(240,5%,64.9%)",
-			oklch: "oklch(71.2% 0.013 286)",
+			oklch: "oklch(0.71,0.01,286)",
 		},
 		{
 			scale: 500,
 			hex: "#71717a",
 			rgb: "rgb(113,113,122)",
 			hsl: "hsl(240,3.8%,46.1%)",
-			oklch: "oklch(55.2% 0.014 286)",
+			oklch: "oklch(0.55,0.01,286)",
 		},
 		{
 			scale: 600,
 			hex: "#52525b",
 			rgb: "rgb(82,82,91)",
 			hsl: "hsl(240,5.2%,33.9%)",
-			oklch: "oklch(44.2% 0.015 286)",
+			oklch: "oklch(0.44,0.01,286)",
 		},
 		{
 			scale: 700,
 			hex: "#3f3f46",
 			rgb: "rgb(63,63,70)",
 			hsl: "hsl(240,5.3%,26.1%)",
-			oklch: "oklch(37% 0.012 286)",
+			oklch: "oklch(0.37,0.01,286)",
 		},
 		{
 			scale: 800,
 			hex: "#27272a",
 			rgb: "rgb(39,39,42)",
 			hsl: "hsl(240,3.7%,15.9%)",
-			oklch: "oklch(27.4% 0.005 286)",
+			oklch: "oklch(0.27,0.01,286)",
 		},
 		{
 			scale: 900,
 			hex: "#18181b",
 			rgb: "rgb(24,24,27)",
 			hsl: "hsl(240,5.9%,10%)",
-			oklch: "oklch(21% 0.006 286)",
+			oklch: "oklch(0.21,0.01,286)",
 		},
 		{
 			scale: 950,
 			hex: "#09090b",
 			rgb: "rgb(9,9,11)",
 			hsl: "hsl(240,10%,3.9%)",
-			oklch: "oklch(14.1% 0.004 286)",
+			oklch: "oklch(0.14,0.00,286)",
 		},
 	],
 	neutral: [
@@ -302,77 +302,77 @@ export const colors: Colors = {
 			hex: "#fafafa",
 			rgb: "rgb(250,250,250)",
 			hsl: "hsl(0,0%,98%)",
-			oklch: "oklch(98.5% 0 none)",
+			oklch: "oklch(0.99,0.00,0)",
 		},
 		{
 			scale: 100,
 			hex: "#f5f5f5",
 			rgb: "rgb(245,245,245)",
 			hsl: "hsl(0,0%,96.1%)",
-			oklch: "oklch(97% 0 none)",
+			oklch: "oklch(0.97,0.00,0)",
 		},
 		{
 			scale: 200,
 			hex: "#e5e5e5",
 			rgb: "rgb(229,229,229)",
 			hsl: "hsl(0,0%,89.8%)",
-			oklch: "oklch(92.2% 0 none)",
+			oklch: "oklch(0.92,0.00,0)",
 		},
 		{
 			scale: 300,
 			hex: "#d4d4d4",
 			rgb: "rgb(212,212,212)",
 			hsl: "hsl(0,0%,83.1%)",
-			oklch: "oklch(87% 0 none)",
+			oklch: "oklch(0.87,0.00,0)",
 		},
 		{
 			scale: 400,
 			hex: "#a3a3a3",
 			rgb: "rgb(163,163,163)",
 			hsl: "hsl(0,0%,63.9%)",
-			oklch: "oklch(71.5% 0 none)",
+			oklch: "oklch(0.72,0.00,0)",
 		},
 		{
 			scale: 500,
 			hex: "#737373",
 			rgb: "rgb(115,115,115)",
 			hsl: "hsl(0,0%,45.1%)",
-			oklch: "oklch(55.6% 0 none)",
+			oklch: "oklch(0.56,0.00,0)",
 		},
 		{
 			scale: 600,
 			hex: "#525252",
 			rgb: "rgb(82,82,82)",
 			hsl: "hsl(0,0%,32.2%)",
-			oklch: "oklch(43.9% 0 none)",
+			oklch: "oklch(0.44,0.00,0)",
 		},
 		{
 			scale: 700,
 			hex: "#404040",
 			rgb: "rgb(64,64,64)",
 			hsl: "hsl(0,0%,25.1%)",
-			oklch: "oklch(37.1% 0 none)",
+			oklch: "oklch(0.37,0.00,0)",
 		},
 		{
 			scale: 800,
 			hex: "#262626",
 			rgb: "rgb(38,38,38)",
 			hsl: "hsl(0,0%,14.9%)",
-			oklch: "oklch(26.9% 0 none)",
+			oklch: "oklch(0.27,0.00,0)",
 		},
 		{
 			scale: 900,
 			hex: "#171717",
 			rgb: "rgb(23,23,23)",
 			hsl: "hsl(0,0%,9%)",
-			oklch: "oklch(20.5% 0 none)",
+			oklch: "oklch(0.20,0.00,0)",
 		},
 		{
 			scale: 950,
 			hex: "#0a0a0a",
 			rgb: "rgb(10,10,10)",
 			hsl: "hsl(0,0%,3.9%)",
-			oklch: "oklch(14.5% 0 none)",
+			oklch: "oklch(0.14,0.00,0)",
 		},
 	],
 	stone: [
@@ -381,77 +381,77 @@ export const colors: Colors = {
 			hex: "#fafaf9",
 			rgb: "rgb(250,250,249)",
 			hsl: "hsl(60,9.1%,97.8%)",
-			oklch: "oklch(98.5% 0.001 106)",
+			oklch: "oklch(0.98,0.00,106)",
 		},
 		{
 			scale: 100,
 			hex: "#f5f5f4",
 			rgb: "rgb(245,245,244)",
 			hsl: "hsl(60,4.8%,95.9%)",
-			oklch: "oklch(97% 0.001 106)",
+			oklch: "oklch(0.97,0.00,106)",
 		},
 		{
 			scale: 200,
 			hex: "#e7e5e4",
 			rgb: "rgb(231,229,228)",
 			hsl: "hsl(20,5.9%,90%)",
-			oklch: "oklch(92.3% 0.003 48.7)",
+			oklch: "oklch(0.92,0.00,49)",
 		},
 		{
 			scale: 300,
 			hex: "#d6d3d1",
 			rgb: "rgb(214,211,209)",
 			hsl: "hsl(24,5.7%,82.9%)",
-			oklch: "oklch(86.9% 0.004 56.4)",
+			oklch: "oklch(0.87,0.00,56)",
 		},
 		{
 			scale: 400,
 			hex: "#a8a29e",
 			rgb: "rgb(168,162,158)",
 			hsl: "hsl(24,5.4%,63.9%)",
-			oklch: "oklch(71.6% 0.009 56.3)",
+			oklch: "oklch(0.72,0.01,56)",
 		},
 		{
 			scale: 500,
 			hex: "#78716c",
 			rgb: "rgb(120,113,108)",
 			hsl: "hsl(25,5.3%,44.7%)",
-			oklch: "oklch(55.3% 0.012 58.1)",
+			oklch: "oklch(0.55,0.01,58)",
 		},
 		{
 			scale: 600,
 			hex: "#57534e",
 			rgb: "rgb(87,83,78)",
 			hsl: "hsl(33.3,5.5%,32.4%)",
-			oklch: "oklch(44.4% 0.01 73.6)",
+			oklch: "oklch(0.44,0.01,74)",
 		},
 		{
 			scale: 700,
 			hex: "#44403c",
 			rgb: "rgb(68,64,60)",
 			hsl: "hsl(30,6.3%,25.1%)",
-			oklch: "oklch(37.4% 0.009 67.6)",
+			oklch: "oklch(0.37,0.01,68)",
 		},
 		{
 			scale: 800,
 			hex: "#292524",
 			rgb: "rgb(41,37,36)",
 			hsl: "hsl(12,6.5%,15.1%)",
-			oklch: "oklch(26.8% 0.006 34.3)",
+			oklch: "oklch(0.27,0.01,34)",
 		},
 		{
 			scale: 900,
 			hex: "#1c1917",
 			rgb: "rgb(28,25,23)",
 			hsl: "hsl(24,9.8%,10%)",
-			oklch: "oklch(21.6% 0.006 56)",
+			oklch: "oklch(0.22,0.01,56)",
 		},
 		{
 			scale: 950,
 			hex: "#0c0a09",
 			rgb: "rgb(12,10,9)",
 			hsl: "hsl(20,14.3%,4.1%)",
-			oklch: "oklch(14.7% 0.004 49.2)",
+			oklch: "oklch(0.15,0.00,49)",
 		},
 	],
 	red: [
@@ -460,77 +460,77 @@ export const colors: Colors = {
 			hex: "#fef2f2",
 			rgb: "rgb(254,242,242)",
 			hsl: "hsl(0,85.7%,97.3%)",
-			oklch: "oklch(97.1% 0.013 17.4)",
+			oklch: "oklch(0.97,0.01,17)",
 		},
 		{
 			scale: 100,
 			hex: "#fee2e2",
 			rgb: "rgb(254,226,226)",
 			hsl: "hsl(0,93.3%,94.1%)",
-			oklch: "oklch(93.6% 0.031 17.7)",
+			oklch: "oklch(0.94,0.03,18)",
 		},
 		{
 			scale: 200,
 			hex: "#fecaca",
 			rgb: "rgb(254,202,202)",
 			hsl: "hsl(0,96.3%,89.4%)",
-			oklch: "oklch(88.5% 0.059 18.3)",
+			oklch: "oklch(0.88,0.06,18)",
 		},
 		{
 			scale: 300,
 			hex: "#fca5a5",
 			rgb: "rgb(252,165,165)",
 			hsl: "hsl(0,93.5%,81.8%)",
-			oklch: "oklch(80.8% 0.103 19.6)",
+			oklch: "oklch(0.81,0.10,20)",
 		},
 		{
 			scale: 400,
 			hex: "#f87171",
 			rgb: "rgb(248,113,113)",
 			hsl: "hsl(0,90.6%,70.8%)",
-			oklch: "oklch(71.1% 0.166 22.2)",
+			oklch: "oklch(0.71,0.17,22)",
 		},
 		{
 			scale: 500,
 			hex: "#ef4444",
 			rgb: "rgb(239,68,68)",
 			hsl: "hsl(0,84.2%,60.2%)",
-			oklch: "oklch(63.7% 0.208 25.3)",
+			oklch: "oklch(0.64,0.21,25)",
 		},
 		{
 			scale: 600,
 			hex: "#dc2626",
 			rgb: "rgb(220,38,38)",
 			hsl: "hsl(0,72.2%,50.6%)",
-			oklch: "oklch(57.7% 0.215 27.3)",
+			oklch: "oklch(0.58,0.22,27)",
 		},
 		{
 			scale: 700,
 			hex: "#b91c1c",
 			rgb: "rgb(185,28,28)",
 			hsl: "hsl(0,73.7%,41.8%)",
-			oklch: "oklch(50.5% 0.19 27.5)",
+			oklch: "oklch(0.51,0.19,28)",
 		},
 		{
 			scale: 800,
 			hex: "#991b1b",
 			rgb: "rgb(153,27,27)",
 			hsl: "hsl(0,70%,35.3%)",
-			oklch: "oklch(44.4% 0.161 26.9)",
+			oklch: "oklch(0.44,0.16,27)",
 		},
 		{
 			scale: 900,
 			hex: "#7f1d1d",
 			rgb: "rgb(127,29,29)",
 			hsl: "hsl(0,62.8%,30.6%)",
-			oklch: "oklch(39.6% 0.133 25.7)",
+			oklch: "oklch(0.40,0.13,26)",
 		},
 		{
 			scale: 950,
 			hex: "#450a0a",
 			rgb: "rgb(69,10,10)",
 			hsl: "hsl(0,74.7%,15.5%)",
-			oklch: "oklch(25.8% 0.089 26)",
+			oklch: "oklch(0.26,0.09,26)",
 		},
 	],
 	orange: [
@@ -539,77 +539,77 @@ export const colors: Colors = {
 			hex: "#fff7ed",
 			rgb: "rgb(255,247,237)",
 			hsl: "hsl(33.3,100%,96.5%)",
-			oklch: "oklch(98% 0.016 73.7)",
+			oklch: "oklch(0.98,0.02,74)",
 		},
 		{
 			scale: 100,
 			hex: "#ffedd5",
 			rgb: "rgb(255,237,213)",
 			hsl: "hsl(34.3,100%,91.8%)",
-			oklch: "oklch(95.4% 0.037 75.2)",
+			oklch: "oklch(0.95,0.04,75)",
 		},
 		{
 			scale: 200,
 			hex: "#fed7aa",
 			rgb: "rgb(254,215,170)",
 			hsl: "hsl(32.1,97.7%,83.1%)",
-			oklch: "oklch(90.1% 0.073 70.7)",
+			oklch: "oklch(0.90,0.07,71)",
 		},
 		{
 			scale: 300,
 			hex: "#fdba74",
 			rgb: "rgb(253,186,116)",
 			hsl: "hsl(30.7,97.2%,72.4%)",
-			oklch: "oklch(83.7% 0.117 66.3)",
+			oklch: "oklch(0.84,0.12,66)",
 		},
 		{
 			scale: 400,
 			hex: "#fb923c",
 			rgb: "rgb(251,146,60)",
 			hsl: "hsl(27,96%,61%)",
-			oklch: "oklch(75.8% 0.159 55.9)",
+			oklch: "oklch(0.76,0.16,56)",
 		},
 		{
 			scale: 500,
 			hex: "#f97316",
 			rgb: "rgb(249,115,22)",
 			hsl: "hsl(24.6,95%,53.1%)",
-			oklch: "oklch(70.5% 0.187 47.6)",
+			oklch: "oklch(0.70,0.19,48)",
 		},
 		{
 			scale: 600,
 			hex: "#ea580c",
 			rgb: "rgb(234,88,12)",
 			hsl: "hsl(20.5,90.2%,48.2%)",
-			oklch: "oklch(64.6% 0.194 41.1)",
+			oklch: "oklch(0.65,0.19,41)",
 		},
 		{
 			scale: 700,
 			hex: "#c2410c",
 			rgb: "rgb(194,65,12)",
 			hsl: "hsl(17.5,88.3%,40.4%)",
-			oklch: "oklch(55.3% 0.174 38.4)",
+			oklch: "oklch(0.55,0.17,38)",
 		},
 		{
 			scale: 800,
 			hex: "#9a3412",
 			rgb: "rgb(154,52,18)",
 			hsl: "hsl(15,79.1%,33.7%)",
-			oklch: "oklch(47% 0.143 37.3)",
+			oklch: "oklch(0.47,0.14,37)",
 		},
 		{
 			scale: 900,
 			hex: "#7c2d12",
 			rgb: "rgb(124,45,18)",
 			hsl: "hsl(15.3,74.6%,27.8%)",
-			oklch: "oklch(40.8% 0.116 38.2)",
+			oklch: "oklch(0.41,0.12,38)",
 		},
 		{
 			scale: 950,
 			hex: "#431407",
 			rgb: "rgb(67,20,7)",
 			hsl: "hsl(13,81.1%,14.5%)",
-			oklch: "oklch(26.6% 0.076 36.3)",
+			oklch: "oklch(0.27,0.08,36)",
 		},
 	],
 	amber: [
@@ -618,77 +618,77 @@ export const colors: Colors = {
 			hex: "#fffbeb",
 			rgb: "rgb(255,251,235)",
 			hsl: "hsl(48,100%,96.1%)",
-			oklch: "oklch(98.7% 0.021 95.3)",
+			oklch: "oklch(0.99,0.02,95)",
 		},
 		{
 			scale: 100,
 			hex: "#fef3c7",
 			rgb: "rgb(254,243,199)",
 			hsl: "hsl(48,96.5%,88.8%)",
-			oklch: "oklch(96.2% 0.058 95.6)",
+			oklch: "oklch(0.96,0.06,96)",
 		},
 		{
 			scale: 200,
 			hex: "#fde68a",
 			rgb: "rgb(253,230,138)",
 			hsl: "hsl(48,96.6%,76.7%)",
-			oklch: "oklch(92.4% 0.115 95.7)",
+			oklch: "oklch(0.92,0.12,96)",
 		},
 		{
 			scale: 300,
 			hex: "#fcd34d",
 			rgb: "rgb(252,211,77)",
 			hsl: "hsl(45.9,96.7%,64.5%)",
-			oklch: "oklch(87.9% 0.153 91.6)",
+			oklch: "oklch(0.88,0.15,92)",
 		},
 		{
 			scale: 400,
 			hex: "#fbbf24",
 			rgb: "rgb(251,191,36)",
 			hsl: "hsl(43.3,96.4%,56.3%)",
-			oklch: "oklch(83.7% 0.164 84.4)",
+			oklch: "oklch(0.84,0.16,84)",
 		},
 		{
 			scale: 500,
 			hex: "#f59e0b",
 			rgb: "rgb(245,158,11)",
 			hsl: "hsl(37.7,92.1%,50.2%)",
-			oklch: "oklch(76.9% 0.165 70.1)",
+			oklch: "oklch(0.77,0.16,70)",
 		},
 		{
 			scale: 600,
 			hex: "#d97706",
 			rgb: "rgb(217,119,6)",
 			hsl: "hsl(32.1,94.6%,43.7%)",
-			oklch: "oklch(66.6% 0.157 58.3)",
+			oklch: "oklch(0.67,0.16,58)",
 		},
 		{
 			scale: 700,
 			hex: "#b45309",
 			rgb: "rgb(180,83,9)",
 			hsl: "hsl(26,90.5%,37.1%)",
-			oklch: "oklch(55.5% 0.146 49)",
+			oklch: "oklch(0.56,0.15,49)",
 		},
 		{
 			scale: 800,
 			hex: "#92400e",
 			rgb: "rgb(146,64,14)",
 			hsl: "hsl(22.7,82.5%,31.4%)",
-			oklch: "oklch(47.3% 0.125 46.2)",
+			oklch: "oklch(0.47,0.12,46)",
 		},
 		{
 			scale: 900,
 			hex: "#78350f",
 			rgb: "rgb(120,53,15)",
 			hsl: "hsl(21.7,77.8%,26.5%)",
-			oklch: "oklch(41.4% 0.105 45.9)",
+			oklch: "oklch(0.41,0.11,46)",
 		},
 		{
 			scale: 950,
 			hex: "#451a03",
 			rgb: "rgb(69,26,3)",
 			hsl: "hsl(20.9,91.7%,14.1%)",
-			oklch: "oklch(27.9% 0.074 45.6)",
+			oklch: "oklch(0.28,0.07,46)",
 		},
 	],
 	yellow: [
@@ -697,77 +697,77 @@ export const colors: Colors = {
 			hex: "#fefce8",
 			rgb: "rgb(254,252,232)",
 			hsl: "hsl(54.5,91.7%,95.3%)",
-			oklch: "oklch(98.7% 0.026 102)",
+			oklch: "oklch(0.99,0.03,102)",
 		},
 		{
 			scale: 100,
 			hex: "#fef9c3",
 			rgb: "rgb(254,249,195)",
 			hsl: "hsl(54.9,96.7%,88%)",
-			oklch: "oklch(97.3% 0.069 103)",
+			oklch: "oklch(0.97,0.07,103)",
 		},
 		{
 			scale: 200,
 			hex: "#fef08a",
 			rgb: "rgb(254,240,138)",
 			hsl: "hsl(52.8,98.3%,76.9%)",
-			oklch: "oklch(94.5% 0.124 102)",
+			oklch: "oklch(0.95,0.12,102)",
 		},
 		{
 			scale: 300,
 			hex: "#fde047",
 			rgb: "rgb(253,224,71)",
 			hsl: "hsl(50.4,97.8%,63.5%)",
-			oklch: "oklch(90.5% 0.166 98.1)",
+			oklch: "oklch(0.91,0.17,98)",
 		},
 		{
 			scale: 400,
 			hex: "#facc15",
 			rgb: "rgb(250,204,21)",
 			hsl: "hsl(47.9,95.8%,53.1%)",
-			oklch: "oklch(86.1% 0.173 91.9)",
+			oklch: "oklch(0.86,0.17,92)",
 		},
 		{
 			scale: 500,
 			hex: "#eab308",
 			rgb: "rgb(234,179,8)",
 			hsl: "hsl(45.4,93.4%,47.5%)",
-			oklch: "oklch(79.5% 0.162 86)",
+			oklch: "oklch(0.80,0.16,86)",
 		},
 		{
 			scale: 600,
 			hex: "#ca8a04",
 			rgb: "rgb(202,138,4)",
 			hsl: "hsl(40.6,96.1%,40.4%)",
-			oklch: "oklch(68.1% 0.142 75.8)",
+			oklch: "oklch(0.68,0.14,76)",
 		},
 		{
 			scale: 700,
 			hex: "#a16207",
 			rgb: "rgb(161,98,7)",
 			hsl: "hsl(35.5,91.7%,32.9%)",
-			oklch: "oklch(55.4% 0.121 66.4)",
+			oklch: "oklch(0.55,0.12,66)",
 		},
 		{
 			scale: 800,
 			hex: "#854d0e",
 			rgb: "rgb(133,77,14)",
 			hsl: "hsl(31.8,81%,28.8%)",
-			oklch: "oklch(47.6% 0.103 61.9)",
+			oklch: "oklch(0.48,0.10,62)",
 		},
 		{
 			scale: 900,
 			hex: "#713f12",
 			rgb: "rgb(113,63,18)",
 			hsl: "hsl(28.4,72.5%,25.7%)",
-			oklch: "oklch(42.1% 0.09 57.7)",
+			oklch: "oklch(0.42,0.09,58)",
 		},
 		{
 			scale: 950,
 			hex: "#422006",
 			rgb: "rgb(66,32,6)",
 			hsl: "hsl(26,83.3%,14.1%)",
-			oklch: "oklch(28.6% 0.064 53.8)",
+			oklch: "oklch(0.29,0.06,54)",
 		},
 	],
 	lime: [
@@ -776,77 +776,77 @@ export const colors: Colors = {
 			hex: "#f7fee7",
 			rgb: "rgb(247,254,231)",
 			hsl: "hsl(78.3,92%,95.1%)",
-			oklch: "oklch(98.6% 0.031 121)",
+			oklch: "oklch(0.99,0.03,121)",
 		},
 		{
 			scale: 100,
 			hex: "#ecfccb",
 			rgb: "rgb(236,252,203)",
 			hsl: "hsl(79.6,89.1%,89.2%)",
-			oklch: "oklch(96.7% 0.066 122)",
+			oklch: "oklch(0.97,0.07,122)",
 		},
 		{
 			scale: 200,
 			hex: "#d9f99d",
 			rgb: "rgb(217,249,157)",
 			hsl: "hsl(80.9,88.5%,79.6%)",
-			oklch: "oklch(93.8% 0.122 124)",
+			oklch: "oklch(0.94,0.12,124)",
 		},
 		{
 			scale: 300,
 			hex: "#bef264",
 			rgb: "rgb(190,242,100)",
 			hsl: "hsl(82,84.5%,67.1%)",
-			oklch: "oklch(89.7% 0.179 127)",
+			oklch: "oklch(0.90,0.18,127)",
 		},
 		{
 			scale: 400,
 			hex: "#a3e635",
 			rgb: "rgb(163,230,53)",
 			hsl: "hsl(82.7,78%,55.5%)",
-			oklch: "oklch(84.9% 0.207 129)",
+			oklch: "oklch(0.85,0.21,129)",
 		},
 		{
 			scale: 500,
 			hex: "#84cc16",
 			rgb: "rgb(132,204,22)",
 			hsl: "hsl(83.7,80.5%,44.3%)",
-			oklch: "oklch(76.8% 0.204 131)",
+			oklch: "oklch(0.77,0.20,131)",
 		},
 		{
 			scale: 600,
 			hex: "#65a30d",
 			rgb: "rgb(101,163,13)",
 			hsl: "hsl(84.8,85.2%,34.5%)",
-			oklch: "oklch(64.8% 0.175 132)",
+			oklch: "oklch(0.65,0.18,132)",
 		},
 		{
 			scale: 700,
 			hex: "#4d7c0f",
 			rgb: "rgb(77,124,15)",
 			hsl: "hsl(85.9,78.4%,27.3%)",
-			oklch: "oklch(53.2% 0.141 132)",
+			oklch: "oklch(0.53,0.14,132)",
 		},
 		{
 			scale: 800,
 			hex: "#3f6212",
 			rgb: "rgb(63,98,18)",
 			hsl: "hsl(86.3,69%,22.7%)",
-			oklch: "oklch(45.3% 0.113 131)",
+			oklch: "oklch(0.45,0.11,131)",
 		},
 		{
 			scale: 900,
 			hex: "#365314",
 			rgb: "rgb(54,83,20)",
 			hsl: "hsl(87.6,61.2%,20.2%)",
-			oklch: "oklch(40.5% 0.096 131)",
+			oklch: "oklch(0.41,0.10,131)",
 		},
 		{
 			scale: 950,
 			hex: "#1a2e05",
 			rgb: "rgb(26,46,5)",
 			hsl: "hsl(89.3,80.4%,10%)",
-			oklch: "oklch(27.4% 0.069 132)",
+			oklch: "oklch(0.27,0.07,132)",
 		},
 	],
 	green: [
@@ -855,77 +855,77 @@ export const colors: Colors = {
 			hex: "#f0fdf4",
 			rgb: "rgb(240,253,244)",
 			hsl: "hsl(138.5,76.5%,96.7%)",
-			oklch: "oklch(98.2% 0.018 156)",
+			oklch: "oklch(0.98,0.02,156)",
 		},
 		{
 			scale: 100,
 			hex: "#dcfce7",
 			rgb: "rgb(220,252,231)",
 			hsl: "hsl(140.6,84.2%,92.5%)",
-			oklch: "oklch(96.2% 0.043 157)",
+			oklch: "oklch(0.96,0.04,157)",
 		},
 		{
 			scale: 200,
 			hex: "#bbf7d0",
 			rgb: "rgb(187,247,208)",
 			hsl: "hsl(141,78.9%,85.1%)",
-			oklch: "oklch(92.5% 0.081 156)",
+			oklch: "oklch(0.93,0.08,156)",
 		},
 		{
 			scale: 300,
 			hex: "#86efac",
 			rgb: "rgb(134,239,172)",
 			hsl: "hsl(141.7,76.6%,73.1%)",
-			oklch: "oklch(87.1% 0.136 154)",
+			oklch: "oklch(0.87,0.14,154)",
 		},
 		{
 			scale: 400,
 			hex: "#4ade80",
 			rgb: "rgb(74,222,128)",
 			hsl: "hsl(141.9,69.2%,58%)",
-			oklch: "oklch(80% 0.182 152)",
+			oklch: "oklch(0.80,0.18,152)",
 		},
 		{
 			scale: 500,
 			hex: "#22c55e",
 			rgb: "rgb(34,197,94)",
 			hsl: "hsl(142.1,70.6%,45.3%)",
-			oklch: "oklch(72.3% 0.192 150)",
+			oklch: "oklch(0.72,0.19,150)",
 		},
 		{
 			scale: 600,
 			hex: "#16a34a",
 			rgb: "rgb(22,163,74)",
 			hsl: "hsl(142.1,76.2%,36.3%)",
-			oklch: "oklch(62.7% 0.17 149)",
+			oklch: "oklch(0.63,0.17,149)",
 		},
 		{
 			scale: 700,
 			hex: "#15803d",
 			rgb: "rgb(21,128,61)",
 			hsl: "hsl(142.4,71.8%,29.2%)",
-			oklch: "oklch(52.7% 0.137 150)",
+			oklch: "oklch(0.53,0.14,150)",
 		},
 		{
 			scale: 800,
 			hex: "#166534",
 			rgb: "rgb(22,101,52)",
 			hsl: "hsl(142.8,64.2%,24.1%)",
-			oklch: "oklch(44.8% 0.108 151)",
+			oklch: "oklch(0.45,0.11,151)",
 		},
 		{
 			scale: 900,
 			hex: "#14532d",
 			rgb: "rgb(20,83,45)",
 			hsl: "hsl(143.8,61.2%,20.2%)",
-			oklch: "oklch(39.3% 0.09 153)",
+			oklch: "oklch(0.39,0.09,153)",
 		},
 		{
 			scale: 950,
 			hex: "#052e16",
 			rgb: "rgb(5,46,22)",
 			hsl: "hsl(144.9,80.4%,10%)",
-			oklch: "oklch(26.6% 0.063 153)",
+			oklch: "oklch(0.27,0.06,153)",
 		},
 	],
 	emerald: [
@@ -934,77 +934,77 @@ export const colors: Colors = {
 			hex: "#ecfdf5",
 			rgb: "rgb(236,253,245)",
 			hsl: "hsl(151.8,81%,95.9%)",
-			oklch: "oklch(97.9% 0.021 166)",
+			oklch: "oklch(0.98,0.02,166)",
 		},
 		{
 			scale: 100,
 			hex: "#d1fae5",
 			rgb: "rgb(209,250,229)",
 			hsl: "hsl(149.3,80.4%,90%)",
-			oklch: "oklch(95% 0.051 163)",
+			oklch: "oklch(0.95,0.05,163)",
 		},
 		{
 			scale: 200,
 			hex: "#a7f3d0",
 			rgb: "rgb(167,243,208)",
 			hsl: "hsl(152.4,76%,80.4%)",
-			oklch: "oklch(90.5% 0.089 164)",
+			oklch: "oklch(0.90,0.09,164)",
 		},
 		{
 			scale: 300,
 			hex: "#6ee7b7",
 			rgb: "rgb(110,231,183)",
 			hsl: "hsl(156.2,71.6%,66.9%)",
-			oklch: "oklch(84.5% 0.13 165)",
+			oklch: "oklch(0.85,0.13,165)",
 		},
 		{
 			scale: 400,
 			hex: "#34d399",
 			rgb: "rgb(52,211,153)",
 			hsl: "hsl(158.1,64.4%,51.6%)",
-			oklch: "oklch(77.3% 0.153 163)",
+			oklch: "oklch(0.77,0.15,163)",
 		},
 		{
 			scale: 500,
 			hex: "#10b981",
 			rgb: "rgb(16,185,129)",
 			hsl: "hsl(160.1,84.1%,39.4%)",
-			oklch: "oklch(69.6% 0.149 162)",
+			oklch: "oklch(0.70,0.15,162)",
 		},
 		{
 			scale: 600,
 			hex: "#059669",
 			rgb: "rgb(5,150,105)",
 			hsl: "hsl(161.4,93.5%,30.4%)",
-			oklch: "oklch(59.6% 0.127 163)",
+			oklch: "oklch(0.60,0.13,163)",
 		},
 		{
 			scale: 700,
 			hex: "#047857",
 			rgb: "rgb(4,120,87)",
 			hsl: "hsl(162.9,93.5%,24.3%)",
-			oklch: "oklch(50.8% 0.105 166)",
+			oklch: "oklch(0.51,0.10,166)",
 		},
 		{
 			scale: 800,
 			hex: "#065f46",
 			rgb: "rgb(6,95,70)",
 			hsl: "hsl(163.1,88.1%,19.8%)",
-			oklch: "oklch(43.2% 0.086 167)",
+			oklch: "oklch(0.43,0.09,167)",
 		},
 		{
 			scale: 900,
 			hex: "#064e3b",
 			rgb: "rgb(6,78,59)",
 			hsl: "hsl(164.2,85.7%,16.5%)",
-			oklch: "oklch(37.8% 0.073 169)",
+			oklch: "oklch(0.38,0.07,169)",
 		},
 		{
 			scale: 950,
 			hex: "#022c22",
 			rgb: "rgb(2,44,34)",
 			hsl: "hsl(165.7,91.3%,9%)",
-			oklch: "oklch(26.2% 0.049 173)",
+			oklch: "oklch(0.26,0.05,173)",
 		},
 	],
 	teal: [
@@ -1013,77 +1013,77 @@ export const colors: Colors = {
 			hex: "#f0fdfa",
 			rgb: "rgb(240,253,250)",
 			hsl: "hsl(166.2,76.5%,96.7%)",
-			oklch: "oklch(98.4% 0.014 181)",
+			oklch: "oklch(0.98,0.01,181)",
 		},
 		{
 			scale: 100,
 			hex: "#ccfbf1",
 			rgb: "rgb(204,251,241)",
 			hsl: "hsl(167.2,85.5%,89.2%)",
-			oklch: "oklch(95.3% 0.05 181)",
+			oklch: "oklch(0.95,0.05,181)",
 		},
 		{
 			scale: 200,
 			hex: "#99f6e4",
 			rgb: "rgb(153,246,228)",
 			hsl: "hsl(168.4,83.8%,78.2%)",
-			oklch: "oklch(91% 0.093 180)",
+			oklch: "oklch(0.91,0.09,180)",
 		},
 		{
 			scale: 300,
 			hex: "#5eead4",
 			rgb: "rgb(94,234,212)",
 			hsl: "hsl(170.6,76.9%,64.3%)",
-			oklch: "oklch(85.5% 0.125 181)",
+			oklch: "oklch(0.85,0.13,181)",
 		},
 		{
 			scale: 400,
 			hex: "#2dd4bf",
 			rgb: "rgb(45,212,191)",
 			hsl: "hsl(172.5,66%,50.4%)",
-			oklch: "oklch(78.5% 0.133 182)",
+			oklch: "oklch(0.78,0.13,182)",
 		},
 		{
 			scale: 500,
 			hex: "#14b8a6",
 			rgb: "rgb(20,184,166)",
 			hsl: "hsl(173.4,80.4%,40%)",
-			oklch: "oklch(70.4% 0.123 183)",
+			oklch: "oklch(0.70,0.12,183)",
 		},
 		{
 			scale: 600,
 			hex: "#0d9488",
 			rgb: "rgb(13,148,136)",
 			hsl: "hsl(174.7,83.9%,31.6%)",
-			oklch: "oklch(60% 0.104 185)",
+			oklch: "oklch(0.60,0.10,185)",
 		},
 		{
 			scale: 700,
 			hex: "#0f766e",
 			rgb: "rgb(15,118,110)",
 			hsl: "hsl(175.3,77.4%,26.1%)",
-			oklch: "oklch(51.1% 0.086 186)",
+			oklch: "oklch(0.51,0.09,186)",
 		},
 		{
 			scale: 800,
 			hex: "#115e59",
 			rgb: "rgb(17,94,89)",
 			hsl: "hsl(176.1,69.4%,21.8%)",
-			oklch: "oklch(43.7% 0.071 188)",
+			oklch: "oklch(0.44,0.07,188)",
 		},
 		{
 			scale: 900,
 			hex: "#134e4a",
 			rgb: "rgb(19,78,74)",
 			hsl: "hsl(175.9,60.8%,19%)",
-			oklch: "oklch(38.6% 0.059 188)",
+			oklch: "oklch(0.39,0.06,188)",
 		},
 		{
 			scale: 950,
 			hex: "#042f2e",
 			rgb: "rgb(4,47,46)",
 			hsl: "hsl(178.6,84.3%,10%)",
-			oklch: "oklch(27.7% 0.045 193)",
+			oklch: "oklch(0.28,0.04,193)",
 		},
 	],
 	cyan: [
@@ -1092,77 +1092,77 @@ export const colors: Colors = {
 			hex: "#ecfeff",
 			rgb: "rgb(236,254,255)",
 			hsl: "hsl(183.2,100%,96.3%)",
-			oklch: "oklch(98.4% 0.019 201)",
+			oklch: "oklch(0.98,0.02,201)",
 		},
 		{
 			scale: 100,
 			hex: "#cffafe",
 			rgb: "rgb(207,250,254)",
 			hsl: "hsl(185.1,95.9%,90.4%)",
-			oklch: "oklch(95.6% 0.044 203)",
+			oklch: "oklch(0.96,0.04,203)",
 		},
 		{
 			scale: 200,
 			hex: "#a5f3fc",
 			rgb: "rgb(165,243,252)",
 			hsl: "hsl(186.2,93.5%,81.8%)",
-			oklch: "oklch(91.7% 0.077 205)",
+			oklch: "oklch(0.92,0.08,205)",
 		},
 		{
 			scale: 300,
 			hex: "#67e8f9",
 			rgb: "rgb(103,232,249)",
 			hsl: "hsl(187,92.4%,69%)",
-			oklch: "oklch(86.5% 0.115 207)",
+			oklch: "oklch(0.87,0.12,207)",
 		},
 		{
 			scale: 400,
 			hex: "#22d3ee",
 			rgb: "rgb(34,211,238)",
 			hsl: "hsl(187.9,85.7%,53.3%)",
-			oklch: "oklch(79.7% 0.134 212)",
+			oklch: "oklch(0.80,0.13,212)",
 		},
 		{
 			scale: 500,
 			hex: "#06b6d4",
 			rgb: "rgb(6,182,212)",
 			hsl: "hsl(188.7,94.5%,42.7%)",
-			oklch: "oklch(71.5% 0.126 215)",
+			oklch: "oklch(0.71,0.13,215)",
 		},
 		{
 			scale: 600,
 			hex: "#0891b2",
 			rgb: "rgb(8,145,178)",
 			hsl: "hsl(191.6,91.4%,36.5%)",
-			oklch: "oklch(60.9% 0.111 222)",
+			oklch: "oklch(0.61,0.11,222)",
 		},
 		{
 			scale: 700,
 			hex: "#0e7490",
 			rgb: "rgb(14,116,144)",
 			hsl: "hsl(192.9,82.3%,31%)",
-			oklch: "oklch(52% 0.094 223)",
+			oklch: "oklch(0.52,0.09,223)",
 		},
 		{
 			scale: 800,
 			hex: "#155e75",
 			rgb: "rgb(21,94,117)",
 			hsl: "hsl(194.4,69.6%,27.1%)",
-			oklch: "oklch(45% 0.077 224)",
+			oklch: "oklch(0.45,0.08,224)",
 		},
 		{
 			scale: 900,
 			hex: "#164e63",
 			rgb: "rgb(22,78,99)",
 			hsl: "hsl(196.4,63.6%,23.7%)",
-			oklch: "oklch(39.8% 0.066 227)",
+			oklch: "oklch(0.40,0.07,227)",
 		},
 		{
 			scale: 950,
 			hex: "#083344",
 			rgb: "rgb(8,51,68)",
 			hsl: "hsl(197,78.9%,14.9%)",
-			oklch: "oklch(30.2% 0.054 230)",
+			oklch: "oklch(0.30,0.05,230)",
 		},
 	],
 	sky: [
@@ -1171,77 +1171,77 @@ export const colors: Colors = {
 			hex: "#f0f9ff",
 			rgb: "rgb(240,249,255)",
 			hsl: "hsl(204,100%,97.1%)",
-			oklch: "oklch(97.7% 0.012 237)",
+			oklch: "oklch(0.98,0.01,237)",
 		},
 		{
 			scale: 100,
 			hex: "#e0f2fe",
 			rgb: "rgb(224,242,254)",
 			hsl: "hsl(204,93.8%,93.7%)",
-			oklch: "oklch(95.1% 0.025 237)",
+			oklch: "oklch(0.95,0.03,237)",
 		},
 		{
 			scale: 200,
 			hex: "#bae6fd",
 			rgb: "rgb(186,230,253)",
 			hsl: "hsl(200.6,94.4%,86.1%)",
-			oklch: "oklch(90.1% 0.055 231)",
+			oklch: "oklch(0.90,0.06,231)",
 		},
 		{
 			scale: 300,
 			hex: "#7dd3fc",
 			rgb: "rgb(125,211,252)",
 			hsl: "hsl(199.4,95.5%,73.9%)",
-			oklch: "oklch(82.8% 0.101 230)",
+			oklch: "oklch(0.83,0.10,230)",
 		},
 		{
 			scale: 400,
 			hex: "#38bdf8",
 			rgb: "rgb(56,189,248)",
 			hsl: "hsl(198.4,93.2%,59.6%)",
-			oklch: "oklch(75.4% 0.139 233)",
+			oklch: "oklch(0.75,0.14,233)",
 		},
 		{
 			scale: 500,
 			hex: "#0ea5e9",
 			rgb: "rgb(14,165,233)",
 			hsl: "hsl(198.6,88.7%,48.4%)",
-			oklch: "oklch(68.5% 0.148 237)",
+			oklch: "oklch(0.68,0.15,237)",
 		},
 		{
 			scale: 600,
 			hex: "#0284c7",
 			rgb: "rgb(2,132,199)",
 			hsl: "hsl(200.4,98%,39.4%)",
-			oklch: "oklch(58.8% 0.139 242)",
+			oklch: "oklch(0.59,0.14,242)",
 		},
 		{
 			scale: 700,
 			hex: "#0369a1",
 			rgb: "rgb(3,105,161)",
 			hsl: "hsl(201.3,96.3%,32.2%)",
-			oklch: "oklch(50% 0.119 243)",
+			oklch: "oklch(0.50,0.12,243)",
 		},
 		{
 			scale: 800,
 			hex: "#075985",
 			rgb: "rgb(7,89,133)",
 			hsl: "hsl(201,90%,27.5%)",
-			oklch: "oklch(44.3% 0.1 241)",
+			oklch: "oklch(0.44,0.10,241)",
 		},
 		{
 			scale: 900,
 			hex: "#0c4a6e",
 			rgb: "rgb(12,74,110)",
 			hsl: "hsl(202,80.3%,23.9%)",
-			oklch: "oklch(39.1% 0.085 241)",
+			oklch: "oklch(0.39,0.08,241)",
 		},
 		{
 			scale: 950,
 			hex: "#082f49",
 			rgb: "rgb(8,47,73)",
 			hsl: "hsl(204,80.2%,15.9%)",
-			oklch: "oklch(29.3% 0.063 243)",
+			oklch: "oklch(0.29,0.06,243)",
 		},
 	],
 	blue: [
@@ -1250,77 +1250,77 @@ export const colors: Colors = {
 			hex: "#eff6ff",
 			rgb: "rgb(239,246,255)",
 			hsl: "hsl(213.8,100%,96.9%)",
-			oklch: "oklch(97% 0.014 255)",
+			oklch: "oklch(0.97,0.01,255)",
 		},
 		{
 			scale: 100,
 			hex: "#dbeafe",
 			rgb: "rgb(219,234,254)",
 			hsl: "hsl(214.3,94.6%,92.7%)",
-			oklch: "oklch(93.2% 0.032 256)",
+			oklch: "oklch(0.93,0.03,256)",
 		},
 		{
 			scale: 200,
 			hex: "#bfdbfe",
 			rgb: "rgb(191,219,254)",
 			hsl: "hsl(213.3,96.9%,87.3%)",
-			oklch: "oklch(88.2% 0.057 254)",
+			oklch: "oklch(0.88,0.06,254)",
 		},
 		{
 			scale: 300,
 			hex: "#93c5fd",
 			rgb: "rgb(147,197,253)",
 			hsl: "hsl(211.7,96.4%,78.4%)",
-			oklch: "oklch(80.9% 0.096 252)",
+			oklch: "oklch(0.81,0.10,252)",
 		},
 		{
 			scale: 400,
 			hex: "#60a5fa",
 			rgb: "rgb(96,165,250)",
 			hsl: "hsl(213.1,93.9%,67.8%)",
-			oklch: "oklch(71.4% 0.143 255)",
+			oklch: "oklch(0.71,0.14,255)",
 		},
 		{
 			scale: 500,
 			hex: "#3b82f6",
 			rgb: "rgb(59,130,246)",
 			hsl: "hsl(217.2,91.2%,59.8%)",
-			oklch: "oklch(62.3% 0.188 260)",
+			oklch: "oklch(0.62,0.19,260)",
 		},
 		{
 			scale: 600,
 			hex: "#2563eb",
 			rgb: "rgb(37,99,235)",
 			hsl: "hsl(221.2,83.2%,53.3%)",
-			oklch: "oklch(54.6% 0.215 263)",
+			oklch: "oklch(0.55,0.22,263)",
 		},
 		{
 			scale: 700,
 			hex: "#1d4ed8",
 			rgb: "rgb(29,78,216)",
 			hsl: "hsl(224.3,76.3%,48%)",
-			oklch: "oklch(48.8% 0.217 264)",
+			oklch: "oklch(0.49,0.22,264)",
 		},
 		{
 			scale: 800,
 			hex: "#1e40af",
 			rgb: "rgb(30,64,175)",
 			hsl: "hsl(225.9,70.7%,40.2%)",
-			oklch: "oklch(42.4% 0.181 266)",
+			oklch: "oklch(0.42,0.18,266)",
 		},
 		{
 			scale: 900,
 			hex: "#1e3a8a",
 			rgb: "rgb(30,58,138)",
 			hsl: "hsl(224.4,64.3%,32.9%)",
-			oklch: "oklch(37.9% 0.138 266)",
+			oklch: "oklch(0.38,0.14,266)",
 		},
 		{
 			scale: 950,
 			hex: "#172554",
 			rgb: "rgb(23,37,84)",
 			hsl: "hsl(226.2,57%,21%)",
-			oklch: "oklch(28.2% 0.087 268)",
+			oklch: "oklch(0.28,0.09,268)",
 		},
 	],
 	indigo: [
@@ -1329,77 +1329,77 @@ export const colors: Colors = {
 			hex: "#eef2ff",
 			rgb: "rgb(238,242,255)",
 			hsl: "hsl(225.9,100%,96.7%)",
-			oklch: "oklch(96.2% 0.018 272)",
+			oklch: "oklch(0.96,0.02,272)",
 		},
 		{
 			scale: 100,
 			hex: "#e0e7ff",
 			rgb: "rgb(224,231,255)",
 			hsl: "hsl(226.5,100%,93.9%)",
-			oklch: "oklch(93% 0.033 273)",
+			oklch: "oklch(0.93,0.03,273)",
 		},
 		{
 			scale: 200,
 			hex: "#c7d2fe",
 			rgb: "rgb(199,210,254)",
 			hsl: "hsl(228,96.5%,88.8%)",
-			oklch: "oklch(87% 0.062 274)",
+			oklch: "oklch(0.87,0.06,274)",
 		},
 		{
 			scale: 300,
 			hex: "#a5b4fc",
 			rgb: "rgb(165,180,252)",
 			hsl: "hsl(229.7,93.5%,81.8%)",
-			oklch: "oklch(78.5% 0.104 275)",
+			oklch: "oklch(0.79,0.10,275)",
 		},
 		{
 			scale: 400,
 			hex: "#818cf8",
 			rgb: "rgb(129,140,248)",
 			hsl: "hsl(234.5,89.5%,73.9%)",
-			oklch: "oklch(68% 0.158 277)",
+			oklch: "oklch(0.68,0.16,277)",
 		},
 		{
 			scale: 500,
 			hex: "#6366f1",
 			rgb: "rgb(99,102,241)",
 			hsl: "hsl(238.7,83.5%,66.7%)",
-			oklch: "oklch(58.5% 0.204 277)",
+			oklch: "oklch(0.59,0.20,277)",
 		},
 		{
 			scale: 600,
 			hex: "#4f46e5",
 			rgb: "rgb(79,70,229)",
 			hsl: "hsl(243.4,75.4%,58.6%)",
-			oklch: "oklch(51.1% 0.23 277)",
+			oklch: "oklch(0.51,0.23,277)",
 		},
 		{
 			scale: 700,
 			hex: "#4338ca",
 			rgb: "rgb(67,56,202)",
 			hsl: "hsl(244.5,57.9%,50.6%)",
-			oklch: "oklch(45.7% 0.215 277)",
+			oklch: "oklch(0.46,0.21,277)",
 		},
 		{
 			scale: 800,
 			hex: "#3730a3",
 			rgb: "rgb(55,48,163)",
 			hsl: "hsl(243.7,54.5%,41.4%)",
-			oklch: "oklch(39.8% 0.177 277)",
+			oklch: "oklch(0.40,0.18,277)",
 		},
 		{
 			scale: 900,
 			hex: "#312e81",
 			rgb: "rgb(49,46,129)",
 			hsl: "hsl(242.2,47.4%,34.3%)",
-			oklch: "oklch(35.9% 0.135 279)",
+			oklch: "oklch(0.36,0.14,279)",
 		},
 		{
 			scale: 950,
 			hex: "#1e1b4b",
 			rgb: "rgb(30,27,75)",
 			hsl: "hsl(243.8,47.1%,20%)",
-			oklch: "oklch(25.7% 0.086 281)",
+			oklch: "oklch(0.26,0.09,281)",
 		},
 	],
 	violet: [
@@ -1408,77 +1408,77 @@ export const colors: Colors = {
 			hex: "#f5f3ff",
 			rgb: "rgb(245,243,255)",
 			hsl: "hsl(250,100%,97.6%)",
-			oklch: "oklch(96.9% 0.016 294)",
+			oklch: "oklch(0.97,0.02,294)",
 		},
 		{
 			scale: 100,
 			hex: "#ede9fe",
 			rgb: "rgb(237,233,254)",
 			hsl: "hsl(251.4,91.3%,95.5%)",
-			oklch: "oklch(94.3% 0.028 295)",
+			oklch: "oklch(0.94,0.03,295)",
 		},
 		{
 			scale: 200,
 			hex: "#ddd6fe",
 			rgb: "rgb(221,214,254)",
 			hsl: "hsl(250.5,95.2%,91.8%)",
-			oklch: "oklch(89.4% 0.055 293)",
+			oklch: "oklch(0.89,0.05,293)",
 		},
 		{
 			scale: 300,
 			hex: "#c4b5fd",
 			rgb: "rgb(196,181,253)",
 			hsl: "hsl(252.5,94.7%,85.1%)",
-			oklch: "oklch(81.1% 0.101 294)",
+			oklch: "oklch(0.81,0.10,294)",
 		},
 		{
 			scale: 400,
 			hex: "#a78bfa",
 			rgb: "rgb(167,139,250)",
 			hsl: "hsl(255.1,91.7%,76.3%)",
-			oklch: "oklch(70.9% 0.159 294)",
+			oklch: "oklch(0.71,0.16,294)",
 		},
 		{
 			scale: 500,
 			hex: "#8b5cf6",
 			rgb: "rgb(139,92,246)",
 			hsl: "hsl(258.3,89.5%,66.3%)",
-			oklch: "oklch(60.6% 0.219 293)",
+			oklch: "oklch(0.61,0.22,293)",
 		},
 		{
 			scale: 600,
 			hex: "#7c3aed",
 			rgb: "rgb(124,58,237)",
 			hsl: "hsl(262.1,83.3%,57.8%)",
-			oklch: "oklch(54.1% 0.247 293)",
+			oklch: "oklch(0.54,0.25,293)",
 		},
 		{
 			scale: 700,
 			hex: "#6d28d9",
 			rgb: "rgb(109,40,217)",
 			hsl: "hsl(263.4,70%,50.4%)",
-			oklch: "oklch(49.1% 0.241 293)",
+			oklch: "oklch(0.49,0.24,293)",
 		},
 		{
 			scale: 800,
 			hex: "#5b21b6",
 			rgb: "rgb(91,33,182)",
 			hsl: "hsl(263.4,69.3%,42.2%)",
-			oklch: "oklch(43.2% 0.211 293)",
+			oklch: "oklch(0.43,0.21,293)",
 		},
 		{
 			scale: 900,
 			hex: "#4c1d95",
 			rgb: "rgb(76,29,149)",
 			hsl: "hsl(263.5,67.4%,34.9%)",
-			oklch: "oklch(38% 0.178 294)",
+			oklch: "oklch(0.38,0.18,294)",
 		},
 		{
 			scale: 950,
 			hex: "#1e1b4b",
 			rgb: "rgb(46,16,101)",
 			hsl: "hsl(261.2,72.6%,22.9%)",
-			oklch: "oklch(25.7% 0.086 281)",
+			oklch: "oklch(0.28,0.14,291)",
 		},
 	],
 	purple: [
@@ -1487,77 +1487,77 @@ export const colors: Colors = {
 			hex: "#faf5ff",
 			rgb: "rgb(250,245,255)",
 			hsl: "hsl(270,100%,98%)",
-			oklch: "oklch(97.7% 0.014 308)",
+			oklch: "oklch(0.98,0.01,308)",
 		},
 		{
 			scale: 100,
 			hex: "#f3e8ff",
 			rgb: "rgb(243,232,255)",
 			hsl: "hsl(268.7,100%,95.5%)",
-			oklch: "oklch(94.6% 0.033 307)",
+			oklch: "oklch(0.95,0.03,307)",
 		},
 		{
 			scale: 200,
 			hex: "#e9d5ff",
 			rgb: "rgb(233,213,255)",
 			hsl: "hsl(268.6,100%,91.8%)",
-			oklch: "oklch(90.2% 0.06 307)",
+			oklch: "oklch(0.90,0.06,307)",
 		},
 		{
 			scale: 300,
 			hex: "#d8b4fe",
 			rgb: "rgb(216,180,254)",
 			hsl: "hsl(269.2,97.4%,85.1%)",
-			oklch: "oklch(82.7% 0.108 306)",
+			oklch: "oklch(0.83,0.11,306)",
 		},
 		{
 			scale: 400,
 			hex: "#c084fc",
 			rgb: "rgb(192,132,252)",
 			hsl: "hsl(270,95.2%,75.3%)",
-			oklch: "oklch(72.2% 0.177 306)",
+			oklch: "oklch(0.72,0.18,306)",
 		},
 		{
 			scale: 500,
 			hex: "#a855f7",
 			rgb: "rgb(168,85,247)",
 			hsl: "hsl(270.7,91%,65.1%)",
-			oklch: "oklch(62.7% 0.233 304)",
+			oklch: "oklch(0.63,0.23,304)",
 		},
 		{
 			scale: 600,
 			hex: "#9333ea",
 			rgb: "rgb(147,51,234)",
 			hsl: "hsl(271.5,81.3%,55.9%)",
-			oklch: "oklch(55.8% 0.252 302)",
+			oklch: "oklch(0.56,0.25,302)",
 		},
 		{
 			scale: 700,
 			hex: "#7e22ce",
 			rgb: "rgb(126,34,206)",
 			hsl: "hsl(272.1,71.7%,47.1%)",
-			oklch: "oklch(49.6% 0.237 302)",
+			oklch: "oklch(0.50,0.24,302)",
 		},
 		{
 			scale: 800,
 			hex: "#6b21a8",
 			rgb: "rgb(107,33,168)",
 			hsl: "hsl(272.9,67.2%,39.4%)",
-			oklch: "oklch(43.8% 0.198 304)",
+			oklch: "oklch(0.44,0.20,304)",
 		},
 		{
 			scale: 900,
 			hex: "#581c87",
 			rgb: "rgb(88,28,135)",
 			hsl: "hsl(273.6,65.6%,32%)",
-			oklch: "oklch(38.1% 0.166 305)",
+			oklch: "oklch(0.38,0.17,305)",
 		},
 		{
 			scale: 950,
 			hex: "#3b0764",
 			rgb: "rgb(59,7,100)",
 			hsl: "hsl(273.5,86.9%,21%)",
-			oklch: "oklch(29.1% 0.143 303)",
+			oklch: "oklch(0.29,0.14,303)",
 		},
 	],
 	fuchsia: [
@@ -1566,77 +1566,77 @@ export const colors: Colors = {
 			hex: "#fdf4ff",
 			rgb: "rgb(253,244,255)",
 			hsl: "hsl(289.1,100%,97.8%)",
-			oklch: "oklch(97.7% 0.017 320)",
+			oklch: "oklch(0.98,0.02,320)",
 		},
 		{
 			scale: 100,
 			hex: "#fae8ff",
 			rgb: "rgb(250,232,255)",
 			hsl: "hsl(287,100%,95.5%)",
-			oklch: "oklch(95.2% 0.036 319)",
+			oklch: "oklch(0.95,0.04,319)",
 		},
 		{
 			scale: 200,
 			hex: "#f5d0fe",
 			rgb: "rgb(245,208,254)",
 			hsl: "hsl(288.3,95.8%,90.6%)",
-			oklch: "oklch(90.3% 0.073 320)",
+			oklch: "oklch(0.90,0.07,320)",
 		},
 		{
 			scale: 300,
 			hex: "#f0abfc",
 			rgb: "rgb(240,171,252)",
 			hsl: "hsl(291.1,93.1%,82.9%)",
-			oklch: "oklch(83.3% 0.132 321)",
+			oklch: "oklch(0.83,0.13,321)",
 		},
 		{
 			scale: 400,
 			hex: "#e879f9",
 			rgb: "rgb(232,121,249)",
 			hsl: "hsl(292,91.4%,72.5%)",
-			oklch: "oklch(74.8% 0.207 322)",
+			oklch: "oklch(0.75,0.21,322)",
 		},
 		{
 			scale: 500,
 			hex: "#d946ef",
 			rgb: "rgb(217,70,239)",
 			hsl: "hsl(292.2,84.1%,60.6%)",
-			oklch: "oklch(66.7% 0.259 322)",
+			oklch: "oklch(0.67,0.26,322)",
 		},
 		{
 			scale: 600,
 			hex: "#c026d3",
 			rgb: "rgb(192,38,211)",
 			hsl: "hsl(293.4,69.5%,48.8%)",
-			oklch: "oklch(59.1% 0.257 323)",
+			oklch: "oklch(0.59,0.26,323)",
 		},
 		{
 			scale: 700,
 			hex: "#a21caf",
 			rgb: "rgb(162,28,175)",
 			hsl: "hsl(294.7,72.4%,39.8%)",
-			oklch: "oklch(51.8% 0.226 324)",
+			oklch: "oklch(0.52,0.23,324)",
 		},
 		{
 			scale: 800,
 			hex: "#86198f",
 			rgb: "rgb(134,25,143)",
 			hsl: "hsl(295.4,70.2%,32.9%)",
-			oklch: "oklch(45.2% 0.192 325)",
+			oklch: "oklch(0.45,0.19,325)",
 		},
 		{
 			scale: 900,
 			hex: "#701a75",
 			rgb: "rgb(112,26,117)",
 			hsl: "hsl(296.7,63.6%,28%)",
-			oklch: "oklch(40.1% 0.16 326)",
+			oklch: "oklch(0.40,0.16,326)",
 		},
 		{
 			scale: 950,
 			hex: "#4a044e",
 			rgb: "rgb(74,4,78)",
 			hsl: "hsl(296.8,90.2%,16.1%)",
-			oklch: "oklch(29.3% 0.131 326)",
+			oklch: "oklch(0.29,0.13,326)",
 		},
 	],
 	pink: [
@@ -1645,77 +1645,77 @@ export const colors: Colors = {
 			hex: "#fdf2f8",
 			rgb: "rgb(253,242,248)",
 			hsl: "hsl(327.3,73.3%,97.1%)",
-			oklch: "oklch(97.1% 0.014 343)",
+			oklch: "oklch(0.97,0.01,343)",
 		},
 		{
 			scale: 100,
 			hex: "#fce7f3",
 			rgb: "rgb(252,231,243)",
 			hsl: "hsl(325.7,77.8%,94.7%)",
-			oklch: "oklch(94.8% 0.028 342)",
+			oklch: "oklch(0.95,0.03,342)",
 		},
 		{
 			scale: 200,
 			hex: "#fbcfe8",
 			rgb: "rgb(251,207,232)",
 			hsl: "hsl(325.9,84.6%,89.8%)",
-			oklch: "oklch(89.9% 0.059 343)",
+			oklch: "oklch(0.90,0.06,343)",
 		},
 		{
 			scale: 300,
 			hex: "#f9a8d4",
 			rgb: "rgb(249,168,212)",
 			hsl: "hsl(327.4,87.1%,81.8%)",
-			oklch: "oklch(82.3% 0.11 346)",
+			oklch: "oklch(0.82,0.11,346)",
 		},
 		{
 			scale: 400,
 			hex: "#f472b6",
 			rgb: "rgb(244,114,182)",
 			hsl: "hsl(328.6,85.5%,70.2%)",
-			oklch: "oklch(72.5% 0.175 350)",
+			oklch: "oklch(0.73,0.18,350)",
 		},
 		{
 			scale: 500,
 			hex: "#ec4899",
 			rgb: "rgb(236,72,153)",
 			hsl: "hsl(330.4,81.2%,60.4%)",
-			oklch: "oklch(65.6% 0.212 354)",
+			oklch: "oklch(0.66,0.21,354)",
 		},
 		{
 			scale: 600,
 			hex: "#db2777",
 			rgb: "rgb(219,39,119)",
 			hsl: "hsl(333.3,71.4%,50.6%)",
-			oklch: "oklch(59.2% 0.218 0.584)",
+			oklch: "oklch(0.59,0.22,1)",
 		},
 		{
 			scale: 700,
 			hex: "#be185d",
 			rgb: "rgb(190,24,93)",
 			hsl: "hsl(335.1,77.6%,42%)",
-			oklch: "oklch(52.5% 0.199 3.96)",
+			oklch: "oklch(0.52,0.20,4)",
 		},
 		{
 			scale: 800,
 			hex: "#9d174d",
 			rgb: "rgb(157,23,77)",
 			hsl: "hsl(335.8,74.4%,35.3%)",
-			oklch: "oklch(45.9% 0.17 3.82)",
+			oklch: "oklch(0.46,0.17,4)",
 		},
 		{
 			scale: 900,
 			hex: "#831843",
 			rgb: "rgb(131,24,67)",
 			hsl: "hsl(335.9,69%,30.4%)",
-			oklch: "oklch(40.8% 0.144 2.43)",
+			oklch: "oklch(0.41,0.14,2)",
 		},
 		{
 			scale: 950,
 			hex: "#500724",
 			rgb: "rgb(80,7,36)",
 			hsl: "hsl(336.2,83.9%,17.1%)",
-			oklch: "oklch(28.4% 0.105 3.91)",
+			oklch: "oklch(0.28,0.10,4)",
 		},
 	],
 	rose: [
@@ -1724,77 +1724,77 @@ export const colors: Colors = {
 			hex: "#fff1f2",
 			rgb: "rgb(255,241,242)",
 			hsl: "hsl(355.7,100%,97.3%)",
-			oklch: "oklch(96.9% 0.015 12.4)",
+			oklch: "oklch(0.97,0.02,12)",
 		},
 		{
 			scale: 100,
 			hex: "#ffe4e6",
 			rgb: "rgb(255,228,230)",
 			hsl: "hsl(355.6,100%,94.7%)",
-			oklch: "oklch(94.1% 0.03 12.6)",
+			oklch: "oklch(0.94,0.03,13)",
 		},
 		{
 			scale: 200,
 			hex: "#fecdd3",
 			rgb: "rgb(254,205,211)",
 			hsl: "hsl(352.7,96.1%,90%)",
-			oklch: "oklch(89.2% 0.056 10)",
+			oklch: "oklch(0.89,0.06,10)",
 		},
 		{
 			scale: 300,
 			hex: "#fda4af",
 			rgb: "rgb(253,164,175)",
 			hsl: "hsl(352.6,95.7%,81.8%)",
-			oklch: "oklch(81% 0.106 11.6)",
+			oklch: "oklch(0.81,0.11,12)",
 		},
 		{
 			scale: 400,
 			hex: "#fb7185",
 			rgb: "rgb(251,113,133)",
 			hsl: "hsl(351.3,94.5%,71.4%)",
-			oklch: "oklch(71.9% 0.169 13.4)",
+			oklch: "oklch(0.72,0.17,13)",
 		},
 		{
 			scale: 500,
 			hex: "#f43f5e",
 			rgb: "rgb(244,63,94)",
 			hsl: "hsl(349.7,89.2%,60.2%)",
-			oklch: "oklch(64.5% 0.215 16.4)",
+			oklch: "oklch(0.65,0.22,16)",
 		},
 		{
 			scale: 600,
 			hex: "#e11d48",
 			rgb: "rgb(225,29,72)",
 			hsl: "hsl(346.8,77.2%,49.8%)",
-			oklch: "oklch(58.6% 0.222 17.6)",
+			oklch: "oklch(0.59,0.22,18)",
 		},
 		{
 			scale: 700,
 			hex: "#be123c",
 			rgb: "rgb(190,18,60)",
 			hsl: "hsl(345.3,82.7%,40.8%)",
-			oklch: "oklch(51.4% 0.198 16.9)",
+			oklch: "oklch(0.51,0.20,17)",
 		},
 		{
 			scale: 800,
 			hex: "#9f1239",
 			rgb: "rgb(159,18,57)",
 			hsl: "hsl(343.4,79.7%,34.7%)",
-			oklch: "oklch(45.5% 0.171 13.7)",
+			oklch: "oklch(0.45,0.17,14)",
 		},
 		{
 			scale: 900,
 			hex: "#881337",
 			rgb: "rgb(136,19,55)",
 			hsl: "hsl(341.5,75.5%,30.4%)",
-			oklch: "oklch(41% 0.15 10.3)",
+			oklch: "oklch(0.41,0.15,10)",
 		},
 		{
 			scale: 950,
 			hex: "#4c0519",
 			rgb: "rgb(76,5,25)",
 			hsl: "hsl(343.1,87.7%,15.9%)",
-			oklch: "oklch(27.1% 0.101 12.1)",
+			oklch: "oklch(0.27,0.10,12)",
 		},
 	],
 };
@@ -1815,11 +1815,16 @@ export const colorMapping = {
 		"muted-foreground": "{{base}}-500",
 		accent: "{{base}}-100",
 		"accent-foreground": "{{base}}-900",
-		destructive: "red-600",
+		destructive: "red-500",
 		"destructive-foreground": "{{base}}-50",
 		border: "{{base}}-200",
 		input: "{{base}}-200",
 		ring: "{{base}}-950",
+		"chart-1": "12 76% 61%",
+		"chart-2": "173 58% 39%",
+		"chart-3": "197 37% 24%",
+		"chart-4": "43 74% 66%",
+		"chart-5": "27 87% 67%",
 	},
 	dark: {
 		background: "{{base}}-950",
@@ -1841,5 +1846,10 @@ export const colorMapping = {
 		border: "{{base}}-800",
 		input: "{{base}}-800",
 		ring: "{{base}}-300",
+		"chart-1": "220 70% 50%",
+		"chart-2": "160 60% 45%",
+		"chart-3": "30 80% 55%",
+		"chart-4": "280 65% 60%",
+		"chart-5": "340 75% 55%",
 	},
 } as const;
diff --git a/sites/docs/src/routes/(app)/colors/+page.svelte b/sites/docs/src/routes/(app)/colors/+page.svelte
index 226b01db80..29c39d6b23 100644
--- a/sites/docs/src/routes/(app)/colors/+page.svelte
+++ b/sites/docs/src/routes/(app)/colors/+page.svelte
@@ -28,12 +28,10 @@
 			<PageHeader.Heading class="hidden md:block">Tailwind Colors</PageHeader.Heading>
 			<PageHeader.Heading class="md:hidden">Tailwind Colors</PageHeader.Heading>
 			<PageHeader.Description>
-				Tailwind CSS colors in HSL, RGB, and HEX formats.
+				Tailwind CSS colors in HSL, RGB, HEX, and OKLCH formats.
 			</PageHeader.Description>
 		</PageHeader.Root>
 	</ThemeWrapper>
 
-	<div class="flex flex-col gap-2">
-		<ColorCard />
-	</div>
+	<ColorCard />
 </div>