From 53154836a7ddde495a489729dc402a35da20cb23 Mon Sep 17 00:00:00 2001
From: hngngn <huyhoang.hngngn@gmail.com>
Date: Tue, 28 Jan 2025 14:29:58 +0700
Subject: [PATCH] feat: update schema

---
 docs/package.json           |   1 +
 docs/public/registry.json   | 167 ++++++++++++++
 docs/public/schema.json     | 144 ++++++------
 docs/scripts/index.ts       | 441 +++++++++++++++++++++++++++++++++++-
 docs/src/registry/colors.ts | 272 +++++++++++++++++++++-
 docs/src/registry/schema.ts |   5 +-
 pnpm-lock.yaml              |   9 +
 7 files changed, 963 insertions(+), 76 deletions(-)
 create mode 100644 docs/public/registry.json

diff --git a/docs/package.json b/docs/package.json
index cab1bdec..cce76830 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -44,6 +44,7 @@
   "devDependencies": {
     "@vinxi/plugin-mdx": "^3.7.2",
     "autoprefixer": "^10.4.20",
+    "eta": "^3.5.0",
     "postcss": "^8.4.49",
     "rehype-pretty-code": "^0.14.0",
     "rehype-slug": "^6.0.0",
diff --git a/docs/public/registry.json b/docs/public/registry.json
new file mode 100644
index 00000000..7ee19c55
--- /dev/null
+++ b/docs/public/registry.json
@@ -0,0 +1,167 @@
+{
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string"
+    },
+    "type": {
+      "type": "string",
+      "enum": [
+        "registry:libs",
+        "registry:example",
+        "registry:block",
+        "registry:component",
+        "registry:ui",
+        "registry:hook",
+        "registry:page"
+      ]
+    },
+    "description": {
+      "type": "string"
+    },
+    "title": {
+      "type": "string"
+    },
+    "author": {
+      "type": "string"
+    },
+    "dependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "devDependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "registryDependencies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "files": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "path": {
+            "type": "string"
+          },
+          "content": {
+            "type": "string"
+          },
+          "type": {
+            "type": "string",
+            "enum": [
+              "registry:libs",
+              "registry:example",
+              "registry:block",
+              "registry:component",
+              "registry:ui",
+              "registry:hook",
+              "registry:page"
+            ]
+          },
+          "target": {
+            "type": "string"
+          }
+        },
+        "if": {
+          "properties": {
+            "type": {
+              "enum": ["registry:page"]
+            }
+          }
+        },
+        "then": {
+          "required": ["path", "type", "target"]
+        },
+        "else": {
+          "required": ["path", "type"]
+        }
+      }
+    },
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "object",
+          "properties": {
+            "content": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "theme": {
+              "type": "object",
+              "additionalProperties": true
+            },
+            "plugins": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    },
+    "uno": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "object",
+          "properties": {
+            "content": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            },
+            "theme": {
+              "type": "object",
+              "additionalProperties": true
+            },
+            "plugins": {
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
+            }
+          }
+        }
+      }
+    },
+    "cssVars": {
+      "type": "object",
+      "properties": {
+        "light": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        },
+        "dark": {
+          "type": "object",
+          "additionalProperties": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "meta": {
+      "type": "object",
+      "additionalProperties": true
+    },
+    "docs": {
+      "type": "string"
+    }
+  },
+  "required": ["name", "type"]
+}
diff --git a/docs/public/schema.json b/docs/public/schema.json
index 8be2a608..1a0b6b55 100644
--- a/docs/public/schema.json
+++ b/docs/public/schema.json
@@ -1,74 +1,74 @@
 {
-	"$schema": "http://json-schema.org/draft-07/schema#",
-	"type": "object",
-	"properties": {
-		"tailwind": {
-			"type": "object",
-			"properties": {
-				"config": {
-					"type": "string"
-				},
-				"css": {
-					"type": "object",
-					"properties": {
-						"path": {
-							"type": "string"
-						},
-						"variable": {
-							"type": "boolean"
-						}
-					}
-				},
-				"color": {
-					"type": "string"
-				},
-				"prefix": {
-					"type": "string"
-				}
-			},
-			"required": ["config", "css", "color"]
-		},
-		"uno": {
-			"type": "object",
-			"properties": {
-				"config": {
-					"type": "string"
-				},
-				"css": {
-					"type": "object",
-					"properties": {
-						"path": {
-							"type": "string"
-						},
-						"variable": {
-							"type": "boolean"
-						}
-					}
-				},
-				"color": {
-					"type": "string"
-				},
-				"prefix": {
-					"type": "string"
-				}
-			},
-			"required": ["config", "css", "color"]
-		},
-		"alias": {
-			"type": "object",
-			"properties": {
-				"cn": {
-					"type": "string"
-				},
-				"component": {
-					"type": "string"
-				},
-				"ui": {
-					"type": "string"
-				}
-			},
-			"required": ["cn", "component"]
-		}
-	},
-	"required": ["alias"]
+  "$schema": "https://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "string"
+        },
+        "css": {
+          "type": "object",
+          "properties": {
+            "path": {
+              "type": "string"
+            },
+            "variable": {
+              "type": "boolean"
+            }
+          }
+        },
+        "color": {
+          "type": "string"
+        },
+        "prefix": {
+          "type": "string"
+        }
+      },
+      "required": ["config", "css", "color"]
+    },
+    "uno": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "string"
+        },
+        "css": {
+          "type": "object",
+          "properties": {
+            "path": {
+              "type": "string"
+            },
+            "variable": {
+              "type": "boolean"
+            }
+          }
+        },
+        "color": {
+          "type": "string"
+        },
+        "prefix": {
+          "type": "string"
+        }
+      },
+      "required": ["config", "css", "color"]
+    },
+    "alias": {
+      "type": "object",
+      "properties": {
+        "cn": {
+          "type": "string"
+        },
+        "component": {
+          "type": "string"
+        },
+        "ui": {
+          "type": "string"
+        }
+      },
+      "required": ["cn", "component"]
+    }
+  },
+  "required": ["alias"]
 }
diff --git a/docs/scripts/index.ts b/docs/scripts/index.ts
index 9173b983..25127822 100644
--- a/docs/scripts/index.ts
+++ b/docs/scripts/index.ts
@@ -2,12 +2,19 @@ import fs, { existsSync, mkdirSync } from "node:fs"
 import { tmpdir } from "node:os"
 import path from "node:path"
 import { registry } from "@/registry"
+import { Eta } from "eta"
 import { rimraf } from "rimraf"
 import { Project, ScriptKind } from "ts-morph"
 import * as v from "valibot"
 
+import { colorMapping, colors } from "@/registry/colors"
 import { frameworks } from "@/registry/frameworks"
-import { registrySchema, type Registry } from "@/registry/schema"
+import {
+  registryItemSchema,
+  registryItemTypeSchema,
+  registrySchema,
+  type Registry,
+} from "@/registry/schema"
 
 const REGISTRY_PATH = path.join(process.cwd(), "public/registry")
 
@@ -261,7 +268,437 @@ export const Index: Record<string, any> = {
   fs.writeFileSync(path.join(process.cwd(), "src/__registry__/index.ts"), index)
 }
 
+const REGISTRY_INDEX_WHITELIST: v.InferInput<typeof registryItemTypeSchema>[] =
+  [
+    "registry:ui",
+    "registry:libs",
+    "registry:hook",
+    "registry:block",
+    "registry:example",
+  ]
+
+// ----------------------------------------------------------------------------
+// Build registry/frameworks/[framework]/[name].json.
+// ----------------------------------------------------------------------------
+async function buildStyles(registry: Registry) {
+  for (const framework of frameworks) {
+    const targetPath = path.join(REGISTRY_PATH, "frameworks", framework.name)
+
+    // Create directory if it doesn't exist.
+    if (!existsSync(targetPath)) {
+      fs.mkdirSync(targetPath, { recursive: true })
+    }
+
+    for (const item of registry) {
+      if (!REGISTRY_INDEX_WHITELIST.includes(item.type)) {
+        continue
+      }
+
+      let files
+      if (item.files) {
+        files = await Promise.all(
+          item.files.map((_file) => {
+            const file =
+              typeof _file === "string"
+                ? {
+                    path: _file,
+                    type: item.type,
+                    content: "",
+                    target: "",
+                  }
+                : _file
+
+            let content: string
+            try {
+              if (framework.name === "unocss") {
+                content = fs.readFileSync(
+                  path.join(
+                    process.cwd(),
+                    "../packages",
+                    framework.name,
+                    file.path
+                  ),
+                  "utf8"
+                )
+              } else {
+                content = fs.readFileSync(
+                  path.join(
+                    process.cwd(),
+                    "src/registry",
+                    framework.name,
+                    file.path
+                  ),
+                  "utf8"
+                )
+              }
+            } catch (error) {
+              return
+            }
+
+            const tempFile = createTempSourceFile(file.path)
+            const sourceFile = project.createSourceFile(tempFile, content, {
+              scriptKind: ScriptKind.TSX,
+            })
+
+            const target = file.target ?? ""
+
+            return {
+              path: file.path,
+              type: file.type,
+              content: sourceFile.getText(),
+              target,
+            }
+          })
+        )
+      }
+
+      const payload = v.safeParse(registryItemSchema, {
+        $schema: "https://shadcn-solid.com/registry.json",
+        author: "hngngn (https://shadcn-solid.com)",
+        ...item,
+        files,
+      })
+
+      if (payload.success) {
+        fs.writeFileSync(
+          path.join(targetPath, `${item.name}.json`),
+          JSON.stringify(payload.output, null, 2),
+          "utf8"
+        )
+      }
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Build registry/frameworks/index.json.
+// ----------------------------------------------------------------------------
+const stylesJson = JSON.stringify(frameworks, null, 2)
+if (!existsSync(path.join(REGISTRY_PATH, "frameworks")))
+  fs.mkdirSync(path.join(REGISTRY_PATH, "frameworks"), {
+    recursive: true,
+  })
+else
+  fs.writeFileSync(
+    path.join(REGISTRY_PATH, "frameworks/index.json"),
+    stylesJson,
+    "utf8"
+  )
+
+// ----------------------------------------------------------------------------
+// Build registry/colors/index.json.
+// ----------------------------------------------------------------------------
+function buildThemes() {
+  const colorsTargetPath = path.join(REGISTRY_PATH, "colors")
+  rimraf.sync(colorsTargetPath)
+  if (!existsSync(colorsTargetPath)) {
+    fs.mkdirSync(colorsTargetPath, { recursive: true })
+  }
+
+  const colorsData: Record<string, any> = {}
+  for (const [color, value] of Object.entries(colors)) {
+    if (typeof value === "string") {
+      colorsData[color] = value
+      continue
+    }
+
+    if (Array.isArray(value)) {
+      colorsData[color] = value.map((item) => ({
+        ...item,
+        rgbChannel: item.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3"),
+        hslChannel: item.hsl.replace(
+          /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+          "$1 $2 $3"
+        ),
+      }))
+      continue
+    }
+
+    if (typeof value === "object") {
+      colorsData[color] = {
+        ...value,
+        rgbChannel: value.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3"),
+        hslChannel: value.hsl.replace(
+          /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/,
+          "$1 $2 $3"
+        ),
+      }
+    }
+  }
+
+  fs.writeFileSync(
+    path.join(colorsTargetPath, "index.json"),
+    JSON.stringify(colorsData, null, 2),
+    "utf8"
+  )
+
+  // ----------------------------------------------------------------------------
+  // Build registry/colors/[base].json.
+  // ----------------------------------------------------------------------------
+  const TAILWIND_BASE_STYLES = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+  `
+
+  const TAILWIND_BASE_STYLES_WITH_VARIABLES = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: <%= it.colors.light["background"] %>;
+    --foreground: <%= it.colors.light["foreground"] %>;
+    --card: <%= it.colors.light["card"] %>;
+    --card-foreground: <%= it.colors.light["card-foreground"] %>;
+    --popover: <%= it.colors.light["popover"] %>;
+    --popover-foreground: <%= it.colors.light["popover-foreground"] %>;
+    --primary: <%= it.colors.light["primary"] %>;
+    --primary-foreground: <%= it.colors.light["primary-foreground"] %>;
+    --secondary: <%= it.colors.light["secondary"] %>;
+    --secondary-foreground: <%= it.colors.light["secondary-foreground"] %>;
+    --muted: <%= it.colors.light["muted"] %>;
+    --muted-foreground: <%= it.colors.light["muted-foreground"] %>;
+    --accent: <%= it.colors.light["accent"] %>;
+    --accent-foreground: <%= it.colors.light["accent-foreground"] %>;
+    --destructive: <%= it.colors.light["destructive"] %>;
+    --destructive-foreground: <%= it.colors.light["destructive-foreground"] %>;
+    --border: <%= it.colors.light["border"] %>;
+    --input: <%= it.colors.light["input"] %>;
+    --ring: <%= it.colors.light["ring"] %>;
+    --radius: 0.5rem;
+    --sidebar-background: <%= it.colors.light["sidebar-background"] %>;
+    --sidebar-foreground: <%= it.colors.light["sidebar-foreground"] %>;
+    --sidebar-primary: <%= it.colors.light["sidebar-primary"] %>;
+    --sidebar-primary-foreground: <%= it.colors.light["sidebar-primary-foreground"] %>;
+    --sidebar-accent: <%= it.colors.light["sidebar-accent"] %>;
+    --sidebar-accent-foreground: <%= it.colors.light["sidebar-accent-foreground"] %>;
+    --sidebar-border: <%= it.colors.light["sidebar-border"] %>;
+    --sidebar-ring: <%= it.colors.light["sidebar-ring"] %>;
+    --vis-tooltip-padding: 0.375rem 0.625rem !important;
+    --vis-tooltip-box-shadow: var(--un-shadow-inset) 0 20px 25px -5px
+      rgb(0 0 0 / 0.1) !important;
+    --vis-tooltip-background-color: theme("colors.background") !important;
+    --vis-tooltip-border-color: theme("colors.border") !important;
+    --vis-tooltip-border-radius: theme("borderRadius.lg") !important;
+    --vis-tooltip-text-color: theme("colors.foreground") !important;
+    --vis-font-family: theme("fontFamily.sans") !important;
+    --vis-legend-label-color: var(--vis-tooltip-text-color) !important;
+    --chart-1: <%= it.colors.light["chart-1"] %>;
+    --chart-2: <%= it.colors.light["chart-2"] %>;
+    --chart-3: <%= it.colors.light["chart-3"] %>;
+    --chart-4: <%= it.colors.light["chart-4"] %>;
+    --chart-5: <%= it.colors.light["chart-5"] %>;
+  }
+
+  .dark {
+    --background: <%= it.colors.dark["background"] %>;
+    --foreground: <%= it.colors.dark["foreground"] %>;
+    --card: <%= it.colors.dark["card"] %>;
+    --card-foreground: <%= it.colors.dark["card-foreground"] %>;
+    --popover: <%= it.colors.dark["popover"] %>;
+    --popover-foreground: <%= it.colors.dark["popover-foreground"] %>;
+    --primary: <%= it.colors.dark["primary"] %>;
+    --primary-foreground: <%= it.colors.dark["primary-foreground"] %>;
+    --secondary: <%= it.colors.dark["secondary"] %>;
+    --secondary-foreground: <%= it.colors.dark["secondary-foreground"] %>;
+    --muted: <%= it.colors.dark["muted"] %>;
+    --muted-foreground: <%= it.colors.dark["muted-foreground"] %>;
+    --accent: <%= it.colors.dark["accent"] %>;
+    --accent-foreground: <%= it.colors.dark["accent-foreground"] %>;
+    --destructive: <%= it.colors.dark["destructive"] %>;
+    --destructive-foreground: <%= it.colors.dark["destructive-foreground"] %>;
+    --border: <%= it.colors.dark["border"] %>;
+    --input: <%= it.colors.dark["input"] %>;
+    --ring: <%= it.colors.dark["ring"] %>;
+    --sidebar-background: <%= it.colors.dark["sidebar-background"] %>;
+    --sidebar-foreground: <%= it.colors.dark["sidebar-foreground"] %>;
+    --sidebar-primary: <%= it.colors.dark["sidebar-primary"] %>;
+    --sidebar-primary-foreground: <%= it.colors.dark["sidebar-primary-foreground"] %>;
+    --sidebar-accent: <%= it.colors.dark["sidebar-accent"] %>;
+    --sidebar-accent-foreground: <%= it.colors.dark["sidebar-accent-foreground"] %>;
+    --sidebar-border: <%= it.colors.dark["sidebar-border"] %>;
+    --sidebar-ring: <%= it.colors.dark["sidebar-ring"] %>;
+    --chart-1: <%= it.colors.dark["chart-1"] %>;
+    --chart-2: <%= it.colors.dark["chart-2"] %>;
+    --chart-3: <%= it.colors.dark["chart-3"] %>;
+    --chart-4: <%= it.colors.dark["chart-4"] %>;
+    --chart-5: <%= it.colors.dark["chart-5"] %>;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`
+
+  const UNO_BASE_STYLES_WITH_VARIABLES = `:root {
+  --background: <%= it.colors.light["background"] %>;
+  --foreground: <%= it.colors.light["foreground"] %>;
+  --card: <%= it.colors.light["card"] %>;
+  --card-foreground: <%= it.colors.light["card-foreground"] %>;
+  --popover: <%= it.colors.light["popover"] %>;
+  --popover-foreground: <%= it.colors.light["popover-foreground"] %>;
+  --primary: <%= it.colors.light["primary"] %>;
+  --primary-foreground: <%= it.colors.light["primary-foreground"] %>;
+  --secondary: <%= it.colors.light["secondary"] %>;
+  --secondary-foreground: <%= it.colors.light["secondary-foreground"] %>;
+  --muted: <%= it.colors.light["muted"] %>;
+  --muted-foreground: <%= it.colors.light["muted-foreground"] %>;
+  --accent: <%= it.colors.light["accent"] %>;
+  --accent-foreground: <%= it.colors.light["accent-foreground"] %>;
+  --destructive: <%= it.colors.light["destructive"] %>;
+  --destructive-foreground: <%= it.colors.light["destructive-foreground"] %>;
+  --border: <%= it.colors.light["border"] %>;
+  --input: <%= it.colors.light["input"] %>;
+  --ring: <%= it.colors.light["ring"] %>;
+  --radius: 0.5rem;
+  --sidebar-background: <%= it.colors.light["sidebar-background"] %>;
+  --sidebar-foreground: <%= it.colors.light["sidebar-foreground"] %>;
+  --sidebar-primary: <%= it.colors.light["sidebar-primary"] %>;
+  --sidebar-primary-foreground: <%= it.colors.light["sidebar-primary-foreground"] %>;
+  --sidebar-accent: <%= it.colors.light["sidebar-accent"] %>;
+  --sidebar-accent-foreground: <%= it.colors.light["sidebar-accent-foreground"] %>;
+  --sidebar-border: <%= it.colors.light["sidebar-border"] %>;
+  --sidebar-ring: <%= it.colors.light["sidebar-ring"] %>;
+  --vis-tooltip-padding: 0.375rem 0.625rem !important;
+  --vis-tooltip-box-shadow: var(--un-shadow-inset) 0 20px 25px -5px
+    rgb(0 0 0 / 0.1) !important;
+  --vis-tooltip-background-color: theme("colors.background") !important;
+  --vis-tooltip-border-color: theme("colors.border") !important;
+  --vis-tooltip-border-radius: theme("borderRadius.lg") !important;
+  --vis-tooltip-text-color: theme("colors.foreground") !important;
+  --vis-font-family: theme("fontFamily.sans") !important;
+  --vis-legend-label-color: var(--vis-tooltip-text-color) !important;
+  --chart-1: <%= it.colors.light["chart-1"] %>;
+  --chart-2: <%= it.colors.light["chart-2"] %>;
+  --chart-3: <%= it.colors.light["chart-3"] %>;
+  --chart-4: <%= it.colors.light["chart-4"] %>;
+  --chart-5: <%= it.colors.light["chart-5"] %>;
+}
+
+[data-kb-theme="dark"] {
+  --background: <%= it.colors.dark["background"] %>;
+  --foreground: <%= it.colors.dark["foreground"] %>;
+  --card: <%= it.colors.dark["card"] %>;
+  --card-foreground: <%= it.colors.dark["card-foreground"] %>;
+  --popover: <%= it.colors.dark["popover"] %>;
+  --popover-foreground: <%= it.colors.dark["popover-foreground"] %>;
+  --primary: <%= it.colors.dark["primary"] %>;
+  --primary-foreground: <%= it.colors.dark["primary-foreground"] %>;
+  --secondary: <%= it.colors.dark["secondary"] %>;
+  --secondary-foreground: <%= it.colors.dark["secondary-foreground"] %>;
+  --muted: <%= it.colors.dark["muted"] %>;
+  --muted-foreground: <%= it.colors.dark["muted-foreground"] %>;
+  --accent: <%= it.colors.dark["accent"] %>;
+  --accent-foreground: <%= it.colors.dark["accent-foreground"] %>;
+  --destructive: <%= it.colors.dark["destructive"] %>;
+  --destructive-foreground: <%= it.colors.dark["destructive-foreground"] %>;
+  --border: <%= it.colors.dark["border"] %>;
+  --input: <%= it.colors.dark["input"] %>;
+  --ring: <%= it.colors.dark["ring"] %>;
+  --sidebar-background: <%= it.colors.dark["sidebar-background"] %>;
+  --sidebar-foreground: <%= it.colors.dark["sidebar-foreground"] %>;
+  --sidebar-primary: <%= it.colors.dark["sidebar-primary"] %>;
+  --sidebar-primary-foreground: <%= it.colors.dark["sidebar-primary-foreground"] %>;
+  --sidebar-accent: <%= it.colors.dark["sidebar-accent"] %>;
+  --sidebar-accent-foreground: <%= it.colors.dark["sidebar-accent-foreground"] %>;
+  --sidebar-border: <%= it.colors.dark["sidebar-border"] %>;
+  --sidebar-ring: <%= it.colors.dark["sidebar-ring"] %>;
+  --chart-1: <%= it.colors.dark["chart-1"] %>;
+  --chart-2: <%= it.colors.dark["chart-2"] %>;
+  --chart-3: <%= it.colors.dark["chart-3"] %>;
+  --chart-4: <%= it.colors.dark["chart-4"] %>;
+  --chart-5: <%= it.colors.dark["chart-5"] %>;
+}
+
+* {
+  --un-default-border-color: theme("colors.border");
+}
+
+body {
+  @apply bg-background text-foreground;
+}
+
+button {
+  @apply bg-transparent;
+}`
+
+  for (const baseColor of ["slate", "gray", "zinc", "neutral", "stone"]) {
+    const base: Record<string, any> = {
+      inlineColors: {},
+      cssVars: {},
+    }
+    for (const [mode, values] of Object.entries(colorMapping)) {
+      base.inlineColors[mode] = {}
+      base.cssVars[mode] = {}
+      for (const [key, value] of Object.entries(values)) {
+        if (typeof value === "string") {
+          // Chart and Sidebar colors do not have a 1-to-1 mapping with tailwind colors.
+          if (key.startsWith("chart-") || key.startsWith("sidebar-")) {
+            base.cssVars[mode][key] = value
+            continue
+          }
+
+          const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`)
+          base.inlineColors[mode][key] = resolvedColor
+
+          const [resolvedBase, scale] = resolvedColor.split("-")
+          const color = scale
+            ? colorsData[resolvedBase].find(
+                (item: any) => item.scale === parseInt(scale)
+              )
+            : colorsData[resolvedBase]
+          if (color) {
+            base.cssVars[mode][key] = color.hslChannel
+          }
+        }
+      }
+    }
+
+    const eta = new Eta()
+    for (const framework of frameworks) {
+      const frameworkColorPath = path.join(
+        REGISTRY_PATH,
+        "colors",
+        framework.name
+      )
+      if (!existsSync(frameworkColorPath)) {
+        mkdirSync(frameworkColorPath, { recursive: true })
+      }
+      // Build css vars.
+      if (framework.name === "unocss") {
+        base.inlineColorsTemplate = undefined
+        base.cssVarsTemplate = eta.renderString(
+          UNO_BASE_STYLES_WITH_VARIABLES,
+          {
+            colors: base.cssVars,
+          }
+        )
+      } else {
+        base.inlineColorsTemplate = eta.renderString(TAILWIND_BASE_STYLES, {})
+        base.cssVarsTemplate = eta.renderString(
+          TAILWIND_BASE_STYLES_WITH_VARIABLES,
+          {
+            colors: base.cssVars,
+          }
+        )
+      }
+
+      fs.writeFileSync(
+        path.join(REGISTRY_PATH, `colors/${framework.name}/${baseColor}.json`),
+        JSON.stringify(base, null, 2),
+        "utf8"
+      )
+    }
+  }
+}
+
 try {
+  console.log("💽 Building registry...")
   const result = v.safeParse(registrySchema, registry)
 
   if (!result.success) {
@@ -270,6 +707,8 @@ try {
   }
 
   buildRegistry(result.output)
+  await buildStyles(result.output)
+  buildThemes()
 
   console.log("✅ Done!")
 } catch (error) {
diff --git a/docs/src/registry/colors.ts b/docs/src/registry/colors.ts
index 259b67ca..21fcd30c 100644
--- a/docs/src/registry/colors.ts
+++ b/docs/src/registry/colors.ts
@@ -6,11 +6,13 @@ export const colors = {
     hex: "#000000",
     rgb: "rgb(0,0,0)",
     hsl: "hsl(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(1.00,0.00,0)",
   },
   slate: [
     {
@@ -18,66 +20,77 @@ export const colors = {
       hex: "#f8fafc",
       rgb: "rgb(248,250,252)",
       hsl: "hsl(210,40%,98%)",
+      oklch: "oklch(0.98,0.00,248)",
     },
     {
       scale: 100,
       hex: "#f1f5f9",
       rgb: "rgb(241,245,249)",
       hsl: "hsl(210,40%,96.1%)",
+      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(0.93,0.01,256)",
     },
     {
       scale: 300,
       hex: "#cbd5e1",
       rgb: "rgb(203,213,225)",
       hsl: "hsl(212.7,26.8%,83.9%)",
+      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(0.71,0.04,257)",
     },
     {
       scale: 500,
       hex: "#64748b",
       rgb: "rgb(100,116,139)",
       hsl: "hsl(215.4,16.3%,46.9%)",
+      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(0.45,0.04,257)",
     },
     {
       scale: 700,
       hex: "#334155",
       rgb: "rgb(51,65,85)",
       hsl: "hsl(215.3,25%,26.7%)",
+      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(0.28,0.04,260)",
     },
     {
       scale: 900,
       hex: "#0f172a",
       rgb: "rgb(15,23,42)",
       hsl: "hsl(222.2,47.4%,11.2%)",
+      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(0.13,0.04,265)",
     },
   ],
   gray: [
@@ -86,66 +99,77 @@ export const colors = {
       hex: "#f9fafb",
       rgb: "rgb(249,250,251)",
       hsl: "hsl(210,20%,98%)",
+      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(0.97,0.00,265)",
     },
     {
       scale: 200,
       hex: "#e5e7eb",
       rgb: "rgb(229,231,235)",
       hsl: "hsl(220,13%,91%)",
+      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(0.87,0.01,258)",
     },
     {
       scale: 400,
       hex: "#9ca3af",
       rgb: "rgb(156,163,175)",
       hsl: "hsl(217.9,10.6%,64.9%)",
+      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(0.55,0.02,264)",
     },
     {
       scale: 600,
       hex: "#4b5563",
       rgb: "rgb(75,85,99)",
       hsl: "hsl(215,13.8%,34.1%)",
+      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(0.37,0.03,260)",
     },
     {
       scale: 800,
       hex: "#1f2937",
       rgb: "rgb(31,41,55)",
       hsl: "hsl(215,27.9%,16.9%)",
+      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(0.21,0.03,265)",
     },
     {
       scale: 950,
       hex: "#030712",
       rgb: "rgb(3,7,18)",
       hsl: "hsl(224,71.4%,4.1%)",
+      oklch: "oklch(0.13,0.03,262)",
     },
   ],
   zinc: [
@@ -154,66 +178,77 @@ export const colors = {
       hex: "#fafafa",
       rgb: "rgb(250,250,250)",
       hsl: "hsl(0,0%,98%)",
+      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(0.97,0.00,286)",
     },
     {
       scale: 200,
       hex: "#e4e4e7",
       rgb: "rgb(228,228,231)",
       hsl: "hsl(240,5.9%,90%)",
+      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(0.87,0.01,286)",
     },
     {
       scale: 400,
       hex: "#a1a1aa",
       rgb: "rgb(161,161,170)",
       hsl: "hsl(240,5%,64.9%)",
+      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(0.55,0.01,286)",
     },
     {
       scale: 600,
       hex: "#52525b",
       rgb: "rgb(82,82,91)",
       hsl: "hsl(240,5.2%,33.9%)",
+      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(0.37,0.01,286)",
     },
     {
       scale: 800,
       hex: "#27272a",
       rgb: "rgb(39,39,42)",
       hsl: "hsl(240,3.7%,15.9%)",
+      oklch: "oklch(0.27,0.01,286)",
     },
     {
       scale: 900,
       hex: "#18181b",
       rgb: "rgb(24,24,27)",
       hsl: "hsl(240,5.9%,10%)",
+      oklch: "oklch(0.21,0.01,286)",
     },
     {
       scale: 950,
       hex: "#09090b",
       rgb: "rgb(9,9,11)",
       hsl: "hsl(240,10%,3.9%)",
+      oklch: "oklch(0.14,0.00,286)",
     },
   ],
   neutral: [
@@ -222,66 +257,77 @@ export const colors = {
       hex: "#fafafa",
       rgb: "rgb(250,250,250)",
       hsl: "hsl(0,0%,98%)",
+      oklch: "oklch(0.99,0.00,0)",
     },
     {
       scale: 100,
       hex: "#f5f5f5",
       rgb: "rgb(245,245,245)",
       hsl: "hsl(0,0%,96.1%)",
+      oklch: "oklch(0.97,0.00,0)",
     },
     {
       scale: 200,
       hex: "#e5e5e5",
       rgb: "rgb(229,229,229)",
       hsl: "hsl(0,0%,89.8%)",
+      oklch: "oklch(0.92,0.00,0)",
     },
     {
       scale: 300,
       hex: "#d4d4d4",
       rgb: "rgb(212,212,212)",
       hsl: "hsl(0,0%,83.1%)",
+      oklch: "oklch(0.87,0.00,0)",
     },
     {
       scale: 400,
       hex: "#a3a3a3",
       rgb: "rgb(163,163,163)",
       hsl: "hsl(0,0%,63.9%)",
+      oklch: "oklch(0.72,0.00,0)",
     },
     {
       scale: 500,
       hex: "#737373",
       rgb: "rgb(115,115,115)",
       hsl: "hsl(0,0%,45.1%)",
+      oklch: "oklch(0.56,0.00,0)",
     },
     {
       scale: 600,
       hex: "#525252",
       rgb: "rgb(82,82,82)",
       hsl: "hsl(0,0%,32.2%)",
+      oklch: "oklch(0.44,0.00,0)",
     },
     {
       scale: 700,
       hex: "#404040",
       rgb: "rgb(64,64,64)",
       hsl: "hsl(0,0%,25.1%)",
+      oklch: "oklch(0.37,0.00,0)",
     },
     {
       scale: 800,
       hex: "#262626",
       rgb: "rgb(38,38,38)",
       hsl: "hsl(0,0%,14.9%)",
+      oklch: "oklch(0.27,0.00,0)",
     },
     {
       scale: 900,
       hex: "#171717",
       rgb: "rgb(23,23,23)",
       hsl: "hsl(0,0%,9%)",
+      oklch: "oklch(0.20,0.00,0)",
     },
     {
       scale: 950,
       hex: "#0a0a0a",
       rgb: "rgb(10,10,10)",
       hsl: "hsl(0,0%,3.9%)",
+      oklch: "oklch(0.14,0.00,0)",
     },
   ],
   stone: [
@@ -290,66 +336,77 @@ export const colors = {
       hex: "#fafaf9",
       rgb: "rgb(250,250,249)",
       hsl: "hsl(60,9.1%,97.8%)",
+      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(0.97,0.00,106)",
     },
     {
       scale: 200,
       hex: "#e7e5e4",
       rgb: "rgb(231,229,228)",
       hsl: "hsl(20,5.9%,90%)",
+      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(0.87,0.00,56)",
     },
     {
       scale: 400,
       hex: "#a8a29e",
       rgb: "rgb(168,162,158)",
       hsl: "hsl(24,5.4%,63.9%)",
+      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(0.55,0.01,58)",
     },
     {
       scale: 600,
       hex: "#57534e",
       rgb: "rgb(87,83,78)",
       hsl: "hsl(33.3,5.5%,32.4%)",
+      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(0.37,0.01,68)",
     },
     {
       scale: 800,
       hex: "#292524",
       rgb: "rgb(41,37,36)",
       hsl: "hsl(12,6.5%,15.1%)",
+      oklch: "oklch(0.27,0.01,34)",
     },
     {
       scale: 900,
       hex: "#1c1917",
       rgb: "rgb(28,25,23)",
       hsl: "hsl(24,9.8%,10%)",
+      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(0.15,0.00,49)",
     },
   ],
   red: [
@@ -358,66 +415,77 @@ export const colors = {
       hex: "#fef2f2",
       rgb: "rgb(254,242,242)",
       hsl: "hsl(0,85.7%,97.3%)",
+      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(0.94,0.03,18)",
     },
     {
       scale: 200,
       hex: "#fecaca",
       rgb: "rgb(254,202,202)",
       hsl: "hsl(0,96.3%,89.4%)",
+      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(0.81,0.10,20)",
     },
     {
       scale: 400,
       hex: "#f87171",
       rgb: "rgb(248,113,113)",
       hsl: "hsl(0,90.6%,70.8%)",
+      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(0.64,0.21,25)",
     },
     {
       scale: 600,
       hex: "#dc2626",
       rgb: "rgb(220,38,38)",
       hsl: "hsl(0,72.2%,50.6%)",
+      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(0.51,0.19,28)",
     },
     {
       scale: 800,
       hex: "#991b1b",
       rgb: "rgb(153,27,27)",
       hsl: "hsl(0,70%,35.3%)",
+      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(0.40,0.13,26)",
     },
     {
       scale: 950,
       hex: "#450a0a",
       rgb: "rgb(69,10,10)",
       hsl: "hsl(0,74.7%,15.5%)",
+      oklch: "oklch(0.26,0.09,26)",
     },
   ],
   orange: [
@@ -426,66 +494,77 @@ export const colors = {
       hex: "#fff7ed",
       rgb: "rgb(255,247,237)",
       hsl: "hsl(33.3,100%,96.5%)",
+      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(0.95,0.04,75)",
     },
     {
       scale: 200,
       hex: "#fed7aa",
       rgb: "rgb(254,215,170)",
       hsl: "hsl(32.1,97.7%,83.1%)",
+      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(0.84,0.12,66)",
     },
     {
       scale: 400,
       hex: "#fb923c",
       rgb: "rgb(251,146,60)",
       hsl: "hsl(27,96%,61%)",
+      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(0.70,0.19,48)",
     },
     {
       scale: 600,
       hex: "#ea580c",
       rgb: "rgb(234,88,12)",
       hsl: "hsl(20.5,90.2%,48.2%)",
+      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(0.55,0.17,38)",
     },
     {
       scale: 800,
       hex: "#9a3412",
       rgb: "rgb(154,52,18)",
       hsl: "hsl(15,79.1%,33.7%)",
+      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(0.41,0.12,38)",
     },
     {
       scale: 950,
       hex: "#431407",
       rgb: "rgb(67,20,7)",
       hsl: "hsl(13,81.1%,14.5%)",
+      oklch: "oklch(0.27,0.08,36)",
     },
   ],
   amber: [
@@ -494,66 +573,77 @@ export const colors = {
       hex: "#fffbeb",
       rgb: "rgb(255,251,235)",
       hsl: "hsl(48,100%,96.1%)",
+      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(0.96,0.06,96)",
     },
     {
       scale: 200,
       hex: "#fde68a",
       rgb: "rgb(253,230,138)",
       hsl: "hsl(48,96.6%,76.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(0.88,0.15,92)",
     },
     {
       scale: 400,
       hex: "#fbbf24",
       rgb: "rgb(251,191,36)",
       hsl: "hsl(43.3,96.4%,56.3%)",
+      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(0.77,0.16,70)",
     },
     {
       scale: 600,
       hex: "#d97706",
       rgb: "rgb(217,119,6)",
       hsl: "hsl(32.1,94.6%,43.7%)",
+      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(0.56,0.15,49)",
     },
     {
       scale: 800,
       hex: "#92400e",
       rgb: "rgb(146,64,14)",
       hsl: "hsl(22.7,82.5%,31.4%)",
+      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(0.41,0.11,46)",
     },
     {
       scale: 950,
       hex: "#451a03",
       rgb: "rgb(69,26,3)",
       hsl: "hsl(20.9,91.7%,14.1%)",
+      oklch: "oklch(0.28,0.07,46)",
     },
   ],
   yellow: [
@@ -562,66 +652,77 @@ export const colors = {
       hex: "#fefce8",
       rgb: "rgb(254,252,232)",
       hsl: "hsl(54.5,91.7%,95.3%)",
+      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(0.97,0.07,103)",
     },
     {
       scale: 200,
       hex: "#fef08a",
       rgb: "rgb(254,240,138)",
       hsl: "hsl(52.8,98.3%,76.9%)",
+      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(0.91,0.17,98)",
     },
     {
       scale: 400,
       hex: "#facc15",
       rgb: "rgb(250,204,21)",
       hsl: "hsl(47.9,95.8%,53.1%)",
+      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(0.80,0.16,86)",
     },
     {
       scale: 600,
       hex: "#ca8a04",
       rgb: "rgb(202,138,4)",
       hsl: "hsl(40.6,96.1%,40.4%)",
+      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(0.55,0.12,66)",
     },
     {
       scale: 800,
       hex: "#854d0e",
       rgb: "rgb(133,77,14)",
       hsl: "hsl(31.8,81%,28.8%)",
+      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(0.42,0.09,58)",
     },
     {
       scale: 950,
       hex: "#422006",
       rgb: "rgb(66,32,6)",
       hsl: "hsl(26,83.3%,14.1%)",
+      oklch: "oklch(0.29,0.06,54)",
     },
   ],
   lime: [
@@ -630,66 +731,77 @@ export const colors = {
       hex: "#f7fee7",
       rgb: "rgb(247,254,231)",
       hsl: "hsl(78.3,92%,95.1%)",
+      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(0.97,0.07,122)",
     },
     {
       scale: 200,
       hex: "#d9f99d",
       rgb: "rgb(217,249,157)",
       hsl: "hsl(80.9,88.5%,79.6%)",
+      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(0.90,0.18,127)",
     },
     {
       scale: 400,
       hex: "#a3e635",
       rgb: "rgb(163,230,53)",
       hsl: "hsl(82.7,78%,55.5%)",
+      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(0.77,0.20,131)",
     },
     {
       scale: 600,
       hex: "#65a30d",
       rgb: "rgb(101,163,13)",
       hsl: "hsl(84.8,85.2%,34.5%)",
+      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(0.53,0.14,132)",
     },
     {
       scale: 800,
       hex: "#3f6212",
       rgb: "rgb(63,98,18)",
       hsl: "hsl(86.3,69%,22.7%)",
+      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(0.41,0.10,131)",
     },
     {
       scale: 950,
       hex: "#1a2e05",
       rgb: "rgb(26,46,5)",
       hsl: "hsl(89.3,80.4%,10%)",
+      oklch: "oklch(0.27,0.07,132)",
     },
   ],
   green: [
@@ -698,66 +810,77 @@ export const colors = {
       hex: "#f0fdf4",
       rgb: "rgb(240,253,244)",
       hsl: "hsl(138.5,76.5%,96.7%)",
+      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(0.96,0.04,157)",
     },
     {
       scale: 200,
       hex: "#bbf7d0",
       rgb: "rgb(187,247,208)",
       hsl: "hsl(141,78.9%,85.1%)",
+      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(0.87,0.14,154)",
     },
     {
       scale: 400,
       hex: "#4ade80",
       rgb: "rgb(74,222,128)",
       hsl: "hsl(141.9,69.2%,58%)",
+      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(0.72,0.19,150)",
     },
     {
       scale: 600,
       hex: "#16a34a",
       rgb: "rgb(22,163,74)",
       hsl: "hsl(142.1,76.2%,36.3%)",
+      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(0.53,0.14,150)",
     },
     {
       scale: 800,
       hex: "#166534",
       rgb: "rgb(22,101,52)",
       hsl: "hsl(142.8,64.2%,24.1%)",
+      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(0.39,0.09,153)",
     },
     {
       scale: 950,
       hex: "#052e16",
       rgb: "rgb(5,46,22)",
       hsl: "hsl(144.9,80.4%,10%)",
+      oklch: "oklch(0.27,0.06,153)",
     },
   ],
   emerald: [
@@ -766,66 +889,77 @@ export const colors = {
       hex: "#ecfdf5",
       rgb: "rgb(236,253,245)",
       hsl: "hsl(151.8,81%,95.9%)",
+      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(0.95,0.05,163)",
     },
     {
       scale: 200,
       hex: "#a7f3d0",
       rgb: "rgb(167,243,208)",
       hsl: "hsl(152.4,76%,80.4%)",
+      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(0.85,0.13,165)",
     },
     {
       scale: 400,
       hex: "#34d399",
       rgb: "rgb(52,211,153)",
       hsl: "hsl(158.1,64.4%,51.6%)",
+      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(0.70,0.15,162)",
     },
     {
       scale: 600,
       hex: "#059669",
       rgb: "rgb(5,150,105)",
       hsl: "hsl(161.4,93.5%,30.4%)",
+      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(0.51,0.10,166)",
     },
     {
       scale: 800,
       hex: "#065f46",
       rgb: "rgb(6,95,70)",
       hsl: "hsl(163.1,88.1%,19.8%)",
+      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(0.38,0.07,169)",
     },
     {
       scale: 950,
       hex: "#022c22",
       rgb: "rgb(2,44,34)",
       hsl: "hsl(165.7,91.3%,9%)",
+      oklch: "oklch(0.26,0.05,173)",
     },
   ],
   teal: [
@@ -834,66 +968,77 @@ export const colors = {
       hex: "#f0fdfa",
       rgb: "rgb(240,253,250)",
       hsl: "hsl(166.2,76.5%,96.7%)",
+      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(0.95,0.05,181)",
     },
     {
       scale: 200,
       hex: "#99f6e4",
       rgb: "rgb(153,246,228)",
       hsl: "hsl(168.4,83.8%,78.2%)",
+      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(0.85,0.13,181)",
     },
     {
       scale: 400,
       hex: "#2dd4bf",
       rgb: "rgb(45,212,191)",
       hsl: "hsl(172.5,66%,50.4%)",
+      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(0.70,0.12,183)",
     },
     {
       scale: 600,
       hex: "#0d9488",
       rgb: "rgb(13,148,136)",
       hsl: "hsl(174.7,83.9%,31.6%)",
+      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(0.51,0.09,186)",
     },
     {
       scale: 800,
       hex: "#115e59",
       rgb: "rgb(17,94,89)",
       hsl: "hsl(176.1,69.4%,21.8%)",
+      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(0.39,0.06,188)",
     },
     {
       scale: 950,
       hex: "#042f2e",
       rgb: "rgb(4,47,46)",
       hsl: "hsl(178.6,84.3%,10%)",
+      oklch: "oklch(0.28,0.04,193)",
     },
   ],
   cyan: [
@@ -902,66 +1047,77 @@ export const colors = {
       hex: "#ecfeff",
       rgb: "rgb(236,254,255)",
       hsl: "hsl(183.2,100%,96.3%)",
+      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(0.96,0.04,203)",
     },
     {
       scale: 200,
       hex: "#a5f3fc",
       rgb: "rgb(165,243,252)",
       hsl: "hsl(186.2,93.5%,81.8%)",
+      oklch: "oklch(0.92,0.08,205)",
     },
     {
       scale: 300,
       hex: "#67e8f9",
       rgb: "rgb(103,232,249)",
       hsl: "hsl(187,92.4%,69%)",
+      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(0.80,0.13,212)",
     },
     {
       scale: 500,
       hex: "#06b6d4",
       rgb: "rgb(6,182,212)",
       hsl: "hsl(188.7,94.5%,42.7%)",
+      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(0.61,0.11,222)",
     },
     {
       scale: 700,
       hex: "#0e7490",
       rgb: "rgb(14,116,144)",
       hsl: "hsl(192.9,82.3%,31%)",
+      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(0.45,0.08,224)",
     },
     {
       scale: 900,
       hex: "#164e63",
       rgb: "rgb(22,78,99)",
       hsl: "hsl(196.4,63.6%,23.7%)",
+      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(0.30,0.05,230)",
     },
   ],
   sky: [
@@ -970,66 +1126,77 @@ export const colors = {
       hex: "#f0f9ff",
       rgb: "rgb(240,249,255)",
       hsl: "hsl(204,100%,97.1%)",
+      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(0.95,0.03,237)",
     },
     {
       scale: 200,
       hex: "#bae6fd",
       rgb: "rgb(186,230,253)",
       hsl: "hsl(200.6,94.4%,86.1%)",
+      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(0.83,0.10,230)",
     },
     {
       scale: 400,
       hex: "#38bdf8",
       rgb: "rgb(56,189,248)",
       hsl: "hsl(198.4,93.2%,59.6%)",
+      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(0.68,0.15,237)",
     },
     {
       scale: 600,
       hex: "#0284c7",
       rgb: "rgb(2,132,199)",
       hsl: "hsl(200.4,98%,39.4%)",
+      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(0.50,0.12,243)",
     },
     {
       scale: 800,
       hex: "#075985",
       rgb: "rgb(7,89,133)",
       hsl: "hsl(201,90%,27.5%)",
+      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(0.39,0.08,241)",
     },
     {
       scale: 950,
       hex: "#082f49",
       rgb: "rgb(8,47,73)",
       hsl: "hsl(204,80.2%,15.9%)",
+      oklch: "oklch(0.29,0.06,243)",
     },
   ],
   blue: [
@@ -1038,66 +1205,77 @@ export const colors = {
       hex: "#eff6ff",
       rgb: "rgb(239,246,255)",
       hsl: "hsl(213.8,100%,96.9%)",
+      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(0.93,0.03,256)",
     },
     {
       scale: 200,
       hex: "#bfdbfe",
       rgb: "rgb(191,219,254)",
       hsl: "hsl(213.3,96.9%,87.3%)",
+      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(0.81,0.10,252)",
     },
     {
       scale: 400,
       hex: "#60a5fa",
       rgb: "rgb(96,165,250)",
       hsl: "hsl(213.1,93.9%,67.8%)",
+      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(0.62,0.19,260)",
     },
     {
       scale: 600,
       hex: "#2563eb",
       rgb: "rgb(37,99,235)",
       hsl: "hsl(221.2,83.2%,53.3%)",
+      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(0.49,0.22,264)",
     },
     {
       scale: 800,
       hex: "#1e40af",
       rgb: "rgb(30,64,175)",
       hsl: "hsl(225.9,70.7%,40.2%)",
+      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(0.38,0.14,266)",
     },
     {
       scale: 950,
       hex: "#172554",
       rgb: "rgb(23,37,84)",
       hsl: "hsl(226.2,57%,21%)",
+      oklch: "oklch(0.28,0.09,268)",
     },
   ],
   indigo: [
@@ -1106,66 +1284,77 @@ export const colors = {
       hex: "#eef2ff",
       rgb: "rgb(238,242,255)",
       hsl: "hsl(225.9,100%,96.7%)",
+      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(0.93,0.03,273)",
     },
     {
       scale: 200,
       hex: "#c7d2fe",
       rgb: "rgb(199,210,254)",
       hsl: "hsl(228,96.5%,88.8%)",
+      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(0.79,0.10,275)",
     },
     {
       scale: 400,
       hex: "#818cf8",
       rgb: "rgb(129,140,248)",
       hsl: "hsl(234.5,89.5%,73.9%)",
+      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(0.59,0.20,277)",
     },
     {
       scale: 600,
       hex: "#4f46e5",
       rgb: "rgb(79,70,229)",
       hsl: "hsl(243.4,75.4%,58.6%)",
+      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(0.46,0.21,277)",
     },
     {
       scale: 800,
       hex: "#3730a3",
       rgb: "rgb(55,48,163)",
       hsl: "hsl(243.7,54.5%,41.4%)",
+      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(0.36,0.14,279)",
     },
     {
       scale: 950,
       hex: "#1e1b4b",
       rgb: "rgb(30,27,75)",
       hsl: "hsl(243.8,47.1%,20%)",
+      oklch: "oklch(0.26,0.09,281)",
     },
   ],
   violet: [
@@ -1174,66 +1363,77 @@ export const colors = {
       hex: "#f5f3ff",
       rgb: "rgb(245,243,255)",
       hsl: "hsl(250,100%,97.6%)",
+      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(0.94,0.03,295)",
     },
     {
       scale: 200,
       hex: "#ddd6fe",
       rgb: "rgb(221,214,254)",
       hsl: "hsl(250.5,95.2%,91.8%)",
+      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(0.81,0.10,294)",
     },
     {
       scale: 400,
       hex: "#a78bfa",
       rgb: "rgb(167,139,250)",
       hsl: "hsl(255.1,91.7%,76.3%)",
+      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(0.61,0.22,293)",
     },
     {
       scale: 600,
       hex: "#7c3aed",
       rgb: "rgb(124,58,237)",
       hsl: "hsl(262.1,83.3%,57.8%)",
+      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(0.49,0.24,293)",
     },
     {
       scale: 800,
       hex: "#5b21b6",
       rgb: "rgb(91,33,182)",
       hsl: "hsl(263.4,69.3%,42.2%)",
+      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(0.38,0.18,294)",
     },
     {
       scale: 950,
       hex: "#1e1b4b",
       rgb: "rgb(46,16,101)",
       hsl: "hsl(261.2,72.6%,22.9%)",
+      oklch: "oklch(0.28,0.14,291)",
     },
   ],
   purple: [
@@ -1242,66 +1442,77 @@ export const colors = {
       hex: "#faf5ff",
       rgb: "rgb(250,245,255)",
       hsl: "hsl(270,100%,98%)",
+      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(0.95,0.03,307)",
     },
     {
       scale: 200,
       hex: "#e9d5ff",
       rgb: "rgb(233,213,255)",
       hsl: "hsl(268.6,100%,91.8%)",
+      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(0.83,0.11,306)",
     },
     {
       scale: 400,
       hex: "#c084fc",
       rgb: "rgb(192,132,252)",
       hsl: "hsl(270,95.2%,75.3%)",
+      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(0.63,0.23,304)",
     },
     {
       scale: 600,
       hex: "#9333ea",
       rgb: "rgb(147,51,234)",
       hsl: "hsl(271.5,81.3%,55.9%)",
+      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(0.50,0.24,302)",
     },
     {
       scale: 800,
       hex: "#6b21a8",
       rgb: "rgb(107,33,168)",
       hsl: "hsl(272.9,67.2%,39.4%)",
+      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(0.38,0.17,305)",
     },
     {
       scale: 950,
       hex: "#3b0764",
       rgb: "rgb(59,7,100)",
       hsl: "hsl(273.5,86.9%,21%)",
+      oklch: "oklch(0.29,0.14,303)",
     },
   ],
   fuchsia: [
@@ -1310,66 +1521,77 @@ export const colors = {
       hex: "#fdf4ff",
       rgb: "rgb(253,244,255)",
       hsl: "hsl(289.1,100%,97.8%)",
+      oklch: "oklch(0.98,0.02,320)",
     },
     {
       scale: 100,
       hex: "#fae8ff",
       rgb: "rgb(250,232,255)",
       hsl: "hsl(287,100%,95.5%)",
+      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(0.90,0.07,320)",
     },
     {
       scale: 300,
       hex: "#f0abfc",
       rgb: "rgb(240,171,252)",
       hsl: "hsl(291.1,93.1%,82.9%)",
+      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(0.75,0.21,322)",
     },
     {
       scale: 500,
       hex: "#d946ef",
       rgb: "rgb(217,70,239)",
       hsl: "hsl(292.2,84.1%,60.6%)",
+      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(0.59,0.26,323)",
     },
     {
       scale: 700,
       hex: "#a21caf",
       rgb: "rgb(162,28,175)",
       hsl: "hsl(294.7,72.4%,39.8%)",
+      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(0.45,0.19,325)",
     },
     {
       scale: 900,
       hex: "#701a75",
       rgb: "rgb(112,26,117)",
       hsl: "hsl(296.7,63.6%,28%)",
+      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(0.29,0.13,326)",
     },
   ],
   pink: [
@@ -1378,66 +1600,77 @@ export const colors = {
       hex: "#fdf2f8",
       rgb: "rgb(253,242,248)",
       hsl: "hsl(327.3,73.3%,97.1%)",
+      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(0.95,0.03,342)",
     },
     {
       scale: 200,
       hex: "#fbcfe8",
       rgb: "rgb(251,207,232)",
       hsl: "hsl(325.9,84.6%,89.8%)",
+      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(0.82,0.11,346)",
     },
     {
       scale: 400,
       hex: "#f472b6",
       rgb: "rgb(244,114,182)",
       hsl: "hsl(328.6,85.5%,70.2%)",
+      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(0.66,0.21,354)",
     },
     {
       scale: 600,
       hex: "#db2777",
       rgb: "rgb(219,39,119)",
       hsl: "hsl(333.3,71.4%,50.6%)",
+      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(0.52,0.20,4)",
     },
     {
       scale: 800,
       hex: "#9d174d",
       rgb: "rgb(157,23,77)",
       hsl: "hsl(335.8,74.4%,35.3%)",
+      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(0.41,0.14,2)",
     },
     {
       scale: 950,
       hex: "#500724",
       rgb: "rgb(80,7,36)",
       hsl: "hsl(336.2,83.9%,17.1%)",
+      oklch: "oklch(0.28,0.10,4)",
     },
   ],
   rose: [
@@ -1446,66 +1679,77 @@ export const colors = {
       hex: "#fff1f2",
       rgb: "rgb(255,241,242)",
       hsl: "hsl(355.7,100%,97.3%)",
+      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(0.94,0.03,13)",
     },
     {
       scale: 200,
       hex: "#fecdd3",
       rgb: "rgb(254,205,211)",
       hsl: "hsl(352.7,96.1%,90%)",
+      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(0.81,0.11,12)",
     },
     {
       scale: 400,
       hex: "#fb7185",
       rgb: "rgb(251,113,133)",
       hsl: "hsl(351.3,94.5%,71.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(0.65,0.22,16)",
     },
     {
       scale: 600,
       hex: "#e11d48",
       rgb: "rgb(225,29,72)",
       hsl: "hsl(346.8,77.2%,49.8%)",
+      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(0.51,0.20,17)",
     },
     {
       scale: 800,
       hex: "#9f1239",
       rgb: "rgb(159,18,57)",
       hsl: "hsl(343.4,79.7%,34.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(0.41,0.15,10)",
     },
     {
       scale: 950,
       hex: "#4c0519",
       rgb: "rgb(76,5,25)",
       hsl: "hsl(343.1,87.7%,15.9%)",
+      oklch: "oklch(0.27,0.10,12)",
     },
   ],
 }
@@ -1531,6 +1775,19 @@ export const colorMapping = {
     border: "{{base}}-200",
     input: "{{base}}-200",
     ring: "{{base}}-950",
+    "sidebar-background": "0 0% 98%",
+    "sidebar-foreground": "240 5.3% 26.1%",
+    "sidebar-primary": "240 5.9% 10%",
+    "sidebar-primary-foreground": "0 0% 98%",
+    "sidebar-accent": "240 4.8% 95.9%",
+    "sidebar-accent-foreground": "240 5.9% 10%",
+    "sidebar-border": "220 13% 91%",
+    "sidebar-ring": "240 5% 64.9%",
+    "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",
@@ -1552,5 +1809,18 @@ export const colorMapping = {
     border: "{{base}}-800",
     input: "{{base}}-800",
     ring: "{{base}}-300",
+    "sidebar-background": "240 5.9% 10%",
+    "sidebar-foreground": "240 4.8% 95.9%",
+    "sidebar-primary": "224.3 76.3% 48%",
+    "sidebar-primary-foreground": "0 0% 100%",
+    "sidebar-accent": "240 3.7% 15.9%",
+    "sidebar-accent-foreground": "240 4.8% 95.9%",
+    "sidebar-border": "240 3.7% 15.9%",
+    "sidebar-ring": "240 4.9% 83.9%",
+    "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/docs/src/registry/schema.ts b/docs/src/registry/schema.ts
index 7dbe2227..4896f14a 100644
--- a/docs/src/registry/schema.ts
+++ b/docs/src/registry/schema.ts
@@ -14,14 +14,12 @@ export const blockChunkSchema = v.object({
 })
 
 export const TypeSchema = [
-  "registry:style",
   "registry:libs",
   "registry:example",
   "registry:block",
   "registry:component",
   "registry:ui",
   "registry:hook",
-  "registry:theme",
   "registry:page",
 ] as const
 
@@ -48,8 +46,11 @@ export const registryItemCssVarsSchema = v.object({
 })
 
 export const registryItemSchema = v.object({
+  $schema: v.optional(v.string()),
   name: v.string(),
   type: registryItemTypeSchema,
+  title: v.optional(v.string()),
+  author: v.optional(v.pipe(v.string(), v.minLength(2))),
   description: v.optional(v.string()),
   dependencies: v.optional(v.array(v.string())),
   devDependencies: v.optional(v.array(v.string())),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d6b2b3d..84d11c8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,6 +135,9 @@ importers:
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.4.49)
+      eta:
+        specifier: ^3.5.0
+        version: 3.5.0
       postcss:
         specifier: ^8.4.49
         version: 8.4.49
@@ -3535,6 +3538,10 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  eta@3.5.0:
+    resolution: {integrity: sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==}
+    engines: {node: '>=6.0.0'}
+
   etag@1.8.1:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
@@ -10034,6 +10041,8 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  eta@3.5.0: {}
+
   etag@1.8.1: {}
 
   event-target-shim@5.0.1: {}