@nafisazizir/ziiz 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @nafisazizir/ziiz
+
+## 0.1.0
+
+First release, a beta preview. Expect breaking changes in 0.x minors.
+
+- `theme.css`: the design layer. The Geist-style ramp as `--ds-*` tokens and
+  Tailwind v4 utilities, the stock Tailwind palette disabled, the radius and
+  shadow scales, 31 named type roles, eight `material-*` utilities, the
+  `typeset` prose layer and the code block chrome. The prose `details`
+  marker is the Tabler chevron, matching the components.
+- `shadcn.css`: the optional slot bridge that maps shadcn/ui's names
+  (`bg-background`, `text-muted-foreground`, `--sidebar-*`, `--chart-*`) onto
+  the ramp.
+- `shiki`: `ziizShikiTheme` and `ziizShikiOptions`, a Shiki theme that
+  resolves to the ramp's CSS variables so highlighted code follows the page
+  theme.
+- `.` resolves to `theme.css`, so `@import "@nafisazizir/ziiz"` is the same as
+  `@import "@nafisazizir/ziiz/theme.css"`.
+- `cn`: `cn`, `twMerge`, `typeRoles` and `materials`, built on the `cn`
+  package (`createCn`/`createTwMerge` from `cn/config`). The merger treats
+  the 31 type roles as one font-size group and the eight materials as one
+  group, so a later `text-copy-16` replaces an earlier `text-label-14` the
+  way `text-lg` replaces `text-sm`. The stock `cn` keeps both.
+- Fonts: `theme.css` does not redeclare `--font-sans` or `--font-mono`. An
+  app that sets neither gets Tailwind's default stacks; an app that sets
+  them on `html` or `:root` wins.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nafis Azizi Riza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# @nafisazizir/ziiz
+
+The ziiz design layer as one import-free stylesheet: the Geist-style ramp,
+31 named type roles, eight materials and the `typeset` prose layer, all as
+Tailwind v4 utilities and CSS custom properties. Docs and the component
+registry live at [ziiz.vercel.app](https://ziiz.vercel.app).
+
+Beta preview: 0.x minors may break things, patches will not.
+
+```bash
+npm install @nafisazizir/ziiz
+```
+
+```css
+@import "tailwindcss";
+@import "@nafisazizir/ziiz";
+@import "@nafisazizir/ziiz/shadcn.css"; /* only if you run stock shadcn/ui components */
+```
+
+## Entry points
+
+| Import                         | What it is                                                                                         |
+| ------------------------------ | -------------------------------------------------------------------------------------------------- |
+| `@nafisazizir/ziiz`            | The design layer. Ramp tokens, type roles, materials, prose. Disables the stock Tailwind palette.  |
+| `@nafisazizir/ziiz/theme.css`  | The same file by its full path.                                                                    |
+| `@nafisazizir/ziiz/shadcn.css` | Maps shadcn's slot names (`bg-background`, `text-muted-foreground`) onto the ramp. Optional.       |
+| `@nafisazizir/ziiz/cn`         | `cn`, `twMerge`, `typeRoles`, `materials`: a class merger that knows the type roles and materials. |
+| `@nafisazizir/ziiz/shiki`      | `ziizShikiTheme` and `ziizShikiOptions`: a Shiki theme that resolves to the ramp's CSS variables.  |
+
+## Fonts
+
+Set `--font-sans` and `--font-mono` on `html` or `:root`, however the app
+loads fonts (next/font's `variable` option does this). ziiz uses Inter with
+`ss03` for sans and Geist Mono for mono. An app that sets neither gets
+Tailwind's default stacks.
+
+## cn
+
+Type roles are single utilities (`text-label-14`, `text-copy-16`), so the
+stock `cn` does not know they conflict: it keeps both, and stylesheet order
+decides which one paints. This `cn` is built on the `cn` package with the
+31 roles as one font-size group and the eight `material-*` utilities as
+another, so the last one in the class list wins. Re-export it from the
+app's `lib/utils.ts`; the registry's `utils` item does exactly that.
+
+```ts
+export { cn } from "@nafisazizir/ziiz/cn"
+```
+
+## Components
+
+Components are not in this package. They come from the ziiz registry as
+source files you own: `npx shadcn@latest add @ziiz/button`. See the
+[installation guide](https://ziiz.vercel.app/installation).
+
+## License
+
+MIT. See [CHANGELOG.md](./CHANGELOG.md) for releases.

package/dist/cn.d.ts

@@ -0,0 +1,20 @@
+/** tailwind-merge `twJoin`/`twMerge` argument shape (strings + nested arrays) */
+type ClassNameValue = ClassNameArray | string | null | undefined | 0 | 0n | false;
+type ClassNameArray = readonly ClassNameValue[];
+/** clsx argument shape (adds numbers and object syntax) */
+type ClassValue = ClassArray | ClassDictionary | string | number | bigint | null | boolean | undefined;
+type ClassArray = ClassValue[];
+interface ClassDictionary {
+  [id: string]: any;
+}
+/** the `cn` function shape: clsx arguments, merged output */
+type CnFunction = (...inputs: ClassValue[]) => string;
+
+declare const typeRoles: readonly ["heading-72", "heading-64", "heading-56", "heading-48", "heading-40", "heading-32", "heading-24", "heading-20", "heading-16", "heading-14", "button-16", "button-14", "button-12", "label-20", "label-18", "label-16", "label-16-mono", "label-14", "label-14-mono", "label-13", "label-13-mono", "label-12", "label-12-mono", "copy-24", "copy-20", "copy-18", "copy-16", "copy-14", "copy-14-mono", "copy-13", "copy-13-mono"];
+declare const materials: readonly ["base", "small", "medium", "large", "tooltip", "menu", "modal", "fullscreen"];
+type TypeRole = (typeof typeRoles)[number];
+type Material = (typeof materials)[number];
+declare const twMerge: (...inputs: ClassNameValue[]) => string;
+declare const cn: CnFunction;
+
+export { type Material, type TypeRole, cn, materials, twMerge, typeRoles };

package/dist/cn.js

@@ -0,0 +1,60 @@
+import { createTwMerge, createCn } from 'cn/config';
+
+// src/cn.ts
+var typeRoles = [
+  "heading-72",
+  "heading-64",
+  "heading-56",
+  "heading-48",
+  "heading-40",
+  "heading-32",
+  "heading-24",
+  "heading-20",
+  "heading-16",
+  "heading-14",
+  "button-16",
+  "button-14",
+  "button-12",
+  "label-20",
+  "label-18",
+  "label-16",
+  "label-16-mono",
+  "label-14",
+  "label-14-mono",
+  "label-13",
+  "label-13-mono",
+  "label-12",
+  "label-12-mono",
+  "copy-24",
+  "copy-20",
+  "copy-18",
+  "copy-16",
+  "copy-14",
+  "copy-14-mono",
+  "copy-13",
+  "copy-13-mono"
+];
+var materials = [
+  "base",
+  "small",
+  "medium",
+  "large",
+  "tooltip",
+  "menu",
+  "modal",
+  "fullscreen"
+];
+var config = {
+  extend: {
+    classGroups: {
+      "font-size": [{ text: [...typeRoles] }],
+      material: [{ material: [...materials] }]
+    }
+  }
+};
+var twMerge = createTwMerge(config);
+var cn = createCn(config);
+
+export { cn, materials, twMerge, typeRoles };
+//# sourceMappingURL=cn.js.map
+//# sourceMappingURL=cn.js.map

package/dist/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"names":[],"mappings":";;;AAKO,IAAM,SAAA,GAAY;AAAA,EACvB,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,UAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAGO,IAAM,SAAA,GAAY;AAAA,EACvB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAKA,IAAM,MAAA,GAAS;AAAA,EACb,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,WAAA,EAAa,CAAC,EAAE,IAAA,EAAM,CAAC,GAAG,SAAS,GAAG,CAAA;AAAA,MACtC,QAAA,EAAU,CAAC,EAAE,QAAA,EAAU,CAAC,GAAG,SAAS,GAAG;AAAA;AACzC;AAEJ,CAAA;AAEO,IAAM,OAAA,GAAU,cAAc,MAAM;AAEpC,IAAM,EAAA,GAAK,SAAS,MAAM","file":"cn.js","sourcesContent":["import { createCn, createTwMerge } from \"cn/config\"\n\n// The 31 type roles theme.css defines as `text-<role>` utilities. Listed here\n// so the merge treats them as one font-size group: the last role in a\n// class list wins, the same way `text-sm` and `text-lg` resolve.\nexport const typeRoles = [\n  \"heading-72\",\n  \"heading-64\",\n  \"heading-56\",\n  \"heading-48\",\n  \"heading-40\",\n  \"heading-32\",\n  \"heading-24\",\n  \"heading-20\",\n  \"heading-16\",\n  \"heading-14\",\n  \"button-16\",\n  \"button-14\",\n  \"button-12\",\n  \"label-20\",\n  \"label-18\",\n  \"label-16\",\n  \"label-16-mono\",\n  \"label-14\",\n  \"label-14-mono\",\n  \"label-13\",\n  \"label-13-mono\",\n  \"label-12\",\n  \"label-12-mono\",\n  \"copy-24\",\n  \"copy-20\",\n  \"copy-18\",\n  \"copy-16\",\n  \"copy-14\",\n  \"copy-14-mono\",\n  \"copy-13\",\n  \"copy-13-mono\",\n] as const\n\n// The eight `material-*` utilities, likewise one group.\nexport const materials = [\n  \"base\",\n  \"small\",\n  \"medium\",\n  \"large\",\n  \"tooltip\",\n  \"menu\",\n  \"modal\",\n  \"fullscreen\",\n] as const\n\nexport type TypeRole = (typeof typeRoles)[number]\nexport type Material = (typeof materials)[number]\n\nconst config = {\n  extend: {\n    classGroups: {\n      \"font-size\": [{ text: [...typeRoles] }],\n      material: [{ material: [...materials] }],\n    },\n  },\n}\n\nexport const twMerge = createTwMerge(config)\n\nexport const cn = createCn(config)\n"]}

package/dist/shiki.d.ts

@@ -0,0 +1,64 @@
+declare const ziizShikiTheme: {
+    name: string;
+    type: "dark";
+    colors: {
+        "editor.foreground": string;
+        "editor.background": string;
+    };
+    settings: ({
+        scope: string[];
+        settings: {
+            foreground: string;
+        };
+    } | {
+        scope: string;
+        settings: {
+            foreground: string;
+        };
+    })[];
+};
+declare const ziizShikiOptions: {
+    themes: {
+        light: {
+            name: string;
+            type: "dark";
+            colors: {
+                "editor.foreground": string;
+                "editor.background": string;
+            };
+            settings: ({
+                scope: string[];
+                settings: {
+                    foreground: string;
+                };
+            } | {
+                scope: string;
+                settings: {
+                    foreground: string;
+                };
+            })[];
+        };
+        dark: {
+            name: string;
+            type: "dark";
+            colors: {
+                "editor.foreground": string;
+                "editor.background": string;
+            };
+            settings: ({
+                scope: string[];
+                settings: {
+                    foreground: string;
+                };
+            } | {
+                scope: string;
+                settings: {
+                    foreground: string;
+                };
+            })[];
+        };
+    };
+    defaultColor: "light";
+};
+
+export { ziizShikiOptions, ziizShikiTheme };

package/dist/shiki.js

@@ -0,0 +1,115 @@
+// src/shiki.ts
+var ziizShikiTheme = {
+  name: "ziiz",
+  type: "dark",
+  colors: {
+    "editor.foreground": "var(--shiki-color-text, inherit)",
+    "editor.background": "var(--shiki-color-background, transparent)"
+  },
+  settings: [
+    {
+      scope: ["comment", "punctuation.definition.comment", "string.comment"],
+      settings: { foreground: "var(--shiki-token-comment)" }
+    },
+    {
+      scope: [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language",
+        "entity"
+      ],
+      settings: { foreground: "var(--shiki-token-constant)" }
+    },
+    {
+      scope: ["entity.name", "meta.export.default", "meta.definition.variable"],
+      settings: { foreground: "var(--shiki-token-function)" }
+    },
+    {
+      scope: [
+        "variable.parameter.function",
+        "meta.jsx.children",
+        "meta.block",
+        "meta.tag.attributes",
+        "entity.name.section",
+        "text",
+        "punctuation.definition.tag",
+        "punctuation.separator.inheritance.php",
+        "punctuation.definition.tag.html",
+        "punctuation.definition.tag.begin.html",
+        "punctuation.definition.tag.end.html",
+        "punctuation.section.embedded",
+        "variable.parameter"
+      ],
+      settings: { foreground: "var(--shiki-token-parameter)" }
+    },
+    {
+      scope: ["entity.name.tag", "support.class.component"],
+      settings: { foreground: "var(--shiki-token-function)" }
+    },
+    {
+      scope: "keyword",
+      settings: { foreground: "var(--shiki-token-keyword)" }
+    },
+    {
+      scope: ["storage", "storage.type", "storage.modifier"],
+      settings: { foreground: "var(--shiki-token-keyword)" }
+    },
+    {
+      scope: [
+        "string",
+        "string punctuation.section.embedded source",
+        "attribute.value"
+      ],
+      settings: { foreground: "var(--shiki-token-string)" }
+    },
+    {
+      scope: [
+        "punctuation",
+        "punctuation.definition.string",
+        "punctuation.definition.variable",
+        "punctuation.definition.string.begin",
+        "punctuation.definition.string.end",
+        "punctuation.section.embedded.begin",
+        "punctuation.section.embedded.end"
+      ],
+      settings: { foreground: "var(--shiki-token-punctuation)" }
+    },
+    {
+      scope: "string.regexp",
+      settings: { foreground: "var(--shiki-token-string-expression)" }
+    },
+    {
+      scope: [
+        "support.function",
+        "entity.name.function",
+        "meta.function-call.generic"
+      ],
+      settings: { foreground: "var(--shiki-token-function)" }
+    },
+    {
+      scope: "markup.underline.link",
+      settings: { foreground: "var(--shiki-token-link)" }
+    },
+    {
+      scope: [
+        "markup.list",
+        "string.other.link.title.markdown",
+        "string.other.link.description.markdown"
+      ],
+      settings: { foreground: "var(--shiki-token-parameter)" }
+    }
+  ]
+};
+var ziizShikiOptions = {
+  themes: {
+    light: ziizShikiTheme,
+    dark: ziizShikiTheme
+  },
+  defaultColor: "light"
+};
+
+export { ziizShikiOptions, ziizShikiTheme };
+//# sourceMappingURL=shiki.js.map
+//# sourceMappingURL=shiki.js.map

package/dist/shiki.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shiki.ts"],"names":[],"mappings":"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","file":"shiki.js","sourcesContent":["import type { ThemeRegistrationRaw } from \"shiki\"\n\nexport const ziizShikiTheme = {\n  name: \"ziiz\",\n  type: \"dark\" as const,\n  colors: {\n    \"editor.foreground\": \"var(--shiki-color-text, inherit)\",\n    \"editor.background\": \"var(--shiki-color-background, transparent)\",\n  },\n  settings: [\n    {\n      scope: [\"comment\", \"punctuation.definition.comment\", \"string.comment\"],\n      settings: { foreground: \"var(--shiki-token-comment)\" },\n    },\n    {\n      scope: [\n        \"constant\",\n        \"entity.name.constant\",\n        \"variable.other.constant\",\n        \"variable.other.enummember\",\n        \"variable.language\",\n        \"entity\",\n      ],\n      settings: { foreground: \"var(--shiki-token-constant)\" },\n    },\n    {\n      scope: [\"entity.name\", \"meta.export.default\", \"meta.definition.variable\"],\n      settings: { foreground: \"var(--shiki-token-function)\" },\n    },\n    {\n      scope: [\n        \"variable.parameter.function\",\n        \"meta.jsx.children\",\n        \"meta.block\",\n        \"meta.tag.attributes\",\n        \"entity.name.section\",\n        \"text\",\n        \"punctuation.definition.tag\",\n        \"punctuation.separator.inheritance.php\",\n        \"punctuation.definition.tag.html\",\n        \"punctuation.definition.tag.begin.html\",\n        \"punctuation.definition.tag.end.html\",\n        \"punctuation.section.embedded\",\n        \"variable.parameter\",\n      ],\n      settings: { foreground: \"var(--shiki-token-parameter)\" },\n    },\n    {\n      scope: [\"entity.name.tag\", \"support.class.component\"],\n      settings: { foreground: \"var(--shiki-token-function)\" },\n    },\n    {\n      scope: \"keyword\",\n      settings: { foreground: \"var(--shiki-token-keyword)\" },\n    },\n    {\n      scope: [\"storage\", \"storage.type\", \"storage.modifier\"],\n      settings: { foreground: \"var(--shiki-token-keyword)\" },\n    },\n    {\n      scope: [\n        \"string\",\n        \"string punctuation.section.embedded source\",\n        \"attribute.value\",\n      ],\n      settings: { foreground: \"var(--shiki-token-string)\" },\n    },\n    {\n      scope: [\n        \"punctuation\",\n        \"punctuation.definition.string\",\n        \"punctuation.definition.variable\",\n        \"punctuation.definition.string.begin\",\n        \"punctuation.definition.string.end\",\n        \"punctuation.section.embedded.begin\",\n        \"punctuation.section.embedded.end\",\n      ],\n      settings: { foreground: \"var(--shiki-token-punctuation)\" },\n    },\n    {\n      scope: \"string.regexp\",\n      settings: { foreground: \"var(--shiki-token-string-expression)\" },\n    },\n    {\n      scope: [\n        \"support.function\",\n        \"entity.name.function\",\n        \"meta.function-call.generic\",\n      ],\n      settings: { foreground: \"var(--shiki-token-function)\" },\n    },\n    {\n      scope: \"markup.underline.link\",\n      settings: { foreground: \"var(--shiki-token-link)\" },\n    },\n    {\n      scope: [\n        \"markup.list\",\n        \"string.other.link.title.markdown\",\n        \"string.other.link.description.markdown\",\n      ],\n      settings: { foreground: \"var(--shiki-token-parameter)\" },\n    },\n  ],\n} satisfies ThemeRegistrationRaw\n\nexport const ziizShikiOptions = {\n  themes: {\n    light: ziizShikiTheme,\n    dark: ziizShikiTheme,\n  },\n  defaultColor: \"light\" as const,\n}\n"]}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@nafisazizir/ziiz",
+  "version": "0.1.0",
+  "description": "ziiz design layer: ramp tokens, type roles, materials, prose, Shiki, and the shadcn slot bridge.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nafisazizir/ziiz.git",
+    "directory": "packages/theme"
+  },
+  "homepage": "https://ziiz.vercel.app",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./theme.css",
+    "./shadcn.css"
+  ],
+  "files": [
+    "dist",
+    "theme.css",
+    "shadcn.css",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "style": "./theme.css",
+      "default": "./theme.css"
+    },
+    "./theme.css": "./theme.css",
+    "./shadcn.css": "./shadcn.css",
+    "./cn": {
+      "types": "./dist/cn.d.ts",
+      "import": "./dist/cn.js",
+      "default": "./dist/cn.js"
+    },
+    "./shiki": {
+      "types": "./dist/shiki.d.ts",
+      "import": "./dist/shiki.js",
+      "default": "./dist/shiki.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "cn": "0.4.0"
+  },
+  "peerDependencies": {
+    "shiki": ">=3",
+    "tailwindcss": "^4"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "shiki": "4.4.3",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/shadcn.css

@@ -0,0 +1,73 @@
+/* shadcn slot bridge. Maps the stock shadcn/ui slot vocabulary (--background,
+   --muted-foreground, --sidebar-*, --chart-*) onto the ziiz ramp so components
+   written against shadcn's names pick up the ramp unchanged. Optional: a
+   consumer whose components speak ramp vocabulary directly does not need it.
+   Requires ./theme.css for the --ds-* tokens it points at. */
+
+@theme inline {
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+}
+
+:root {
+  --background: var(--ds-background-100);
+  --foreground: var(--ds-gray-1000);
+  --card: var(--ds-background-100);
+  --card-foreground: var(--ds-gray-1000);
+  --popover: var(--ds-background-100);
+  --popover-foreground: var(--ds-gray-1000);
+  --primary: var(--ds-gray-1000);
+  --primary-foreground: var(--ds-background-100);
+  --secondary: var(--ds-gray-100);
+  --secondary-foreground: var(--ds-gray-1000);
+  --muted: var(--ds-gray-100);
+  --muted-foreground: var(--ds-gray-900);
+  --accent: var(--ds-gray-100);
+  --accent-foreground: var(--ds-gray-1000);
+  --destructive: var(--ds-red-800);
+  --border: var(--ds-gray-alpha-400);
+  --input: var(--ds-gray-alpha-400);
+  --ring: var(--ds-gray-600);
+  --chart-1: var(--ds-blue-700);
+  --chart-2: var(--ds-amber-700);
+  --chart-3: var(--ds-green-700);
+  --chart-4: var(--ds-purple-700);
+  --chart-5: var(--ds-pink-700);
+  --sidebar: var(--ds-background-200);
+  --sidebar-foreground: var(--ds-gray-1000);
+  --sidebar-primary: var(--ds-gray-1000);
+  --sidebar-primary-foreground: var(--ds-background-200);
+  --sidebar-accent: var(--ds-gray-100);
+  --sidebar-accent-foreground: var(--ds-gray-1000);
+  --sidebar-border: var(--ds-gray-alpha-400);
+  --sidebar-ring: var(--ds-gray-600);
+}