@openpkg-ts/ui 0.2.0 → 0.3.0

package/dist/docskit/index.js

@@ -795,7 +795,7 @@ function LanguageSelector({
       /* @__PURE__ */ jsxs9("button", {
         type: "button",
         onClick: () => setOpen(!open),
-        className: cn("flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium", "bg-muted/50 hover:bg-muted text-foreground transition-colors cursor-pointer"),
+        className: cn("flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium", "bg-[var(--openpkg-bg-secondary)] hover:bg-[var(--openpkg-bg-tertiary)] text-[var(--openpkg-text-primary)] transition-colors cursor-pointer"),
         children: [
           selectedLanguage?.label ?? value,
           /* @__PURE__ */ jsx19(ChevronDown, {
@@ -805,14 +805,14 @@ function LanguageSelector({
         ]
       }),
       open && /* @__PURE__ */ jsx19("div", {
-        className: cn("absolute top-full left-0 mt-1 z-50 min-w-[120px]", "bg-popover border border-border rounded-md shadow-lg overflow-hidden"),
+        className: cn("absolute top-full left-0 mt-1 z-50 min-w-[120px]", "bg-[var(--openpkg-bg-card)] border border-[var(--openpkg-border-subtle)] rounded-md shadow-lg overflow-hidden"),
         children: languages.map((lang) => /* @__PURE__ */ jsx19("button", {
           type: "button",
           onClick: () => {
             onChange(lang.id);
             setOpen(false);
           },
-          className: cn("w-full px-3 py-2 text-sm text-left transition-colors cursor-pointer", lang.id === value ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted"),
+          className: cn("w-full px-3 py-2 text-sm text-left transition-colors cursor-pointer", lang.id === value ? "bg-[color-mix(in_srgb,var(--openpkg-accent-primary)_10%,transparent)] text-[var(--openpkg-accent-primary)]" : "text-[var(--openpkg-text-primary)] hover:bg-[var(--openpkg-bg-secondary)]"),
           children: lang.label
         }, lang.id))
       })
@@ -932,14 +932,14 @@ function APIReferencePage({
     className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", className),
     children: [
       /* @__PURE__ */ jsxs11("header", {
-        className: "py-8 border-b border-border",
+        className: "py-8 border-b border-[var(--openpkg-border-subtle)]",
         children: [
           /* @__PURE__ */ jsx21("h1", {
-            className: "text-3xl font-bold text-foreground",
+            className: "text-3xl font-bold text-[var(--openpkg-text-primary)]",
             children: title
           }),
           description && /* @__PURE__ */ jsx21("div", {
-            className: "mt-4 text-lg text-muted-foreground prose prose-lg dark:prose-invert max-w-none",
+            className: "mt-4 text-lg text-[var(--openpkg-text-muted)] prose prose-lg dark:prose-invert max-w-none",
             children: description
           })
         ]
@@ -966,7 +966,7 @@ function APISection({
 }) {
   return /* @__PURE__ */ jsx22("section", {
     id,
-    className: cn("py-8 border-b border-border last:border-b-0", className),
+    className: cn("py-8 border-b border-[var(--openpkg-border-subtle)] last:border-b-0", className),
     children: /* @__PURE__ */ jsxs12("div", {
       className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12",
       children: [
@@ -976,11 +976,11 @@ function APISection({
             /* @__PURE__ */ jsxs12("div", {
               children: [
                 /* @__PURE__ */ jsx22("h2", {
-                  className: "text-2xl font-semibold text-foreground",
+                  className: "text-2xl font-semibold text-[var(--openpkg-text-primary)]",
                   children: title
                 }),
                 description && /* @__PURE__ */ jsx22("div", {
-                  className: "mt-3 text-muted-foreground prose prose-sm dark:prose-invert",
+                  className: "mt-3 text-[var(--openpkg-text-muted)] prose prose-sm dark:prose-invert",
                   children: description
                 })
               ]
@@ -1046,20 +1046,20 @@ var EndpointHeader = React4.forwardRef(({ className, method, path, copyable = tr
   };
   return /* @__PURE__ */ jsxs13("div", {
     ref,
-    className: cn("group flex items-center gap-3 py-2 px-3 rounded-lg bg-muted/50 border border-border", className),
+    className: cn("group flex items-center gap-3 py-2 px-3 rounded-lg bg-[var(--openpkg-bg-secondary)] border border-[var(--openpkg-border-subtle)]", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx24(EndpointBadge, {
         method
       }),
       /* @__PURE__ */ jsx24("code", {
-        className: "font-mono text-sm text-foreground flex-1",
+        className: "font-mono text-sm text-[var(--openpkg-text-primary)] flex-1",
         children: path
       }),
       copyable && /* @__PURE__ */ jsx24("button", {
         type: "button",
         onClick: handleCopy,
-        className: cn("p-1.5 rounded text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"),
+        className: cn("p-1.5 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)]", "opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"),
         "aria-label": "Copy path",
         children: copied ? /* @__PURE__ */ jsx24(Check2, {
           size: 14
@@ -1088,7 +1088,7 @@ function NestedProperty({
   const hasNested = schema.properties && Object.keys(schema.properties).length > 0;
   const _nestedCount = hasNested && schema.properties ? Object.keys(schema.properties).length : 0;
   return /* @__PURE__ */ jsxs14("div", {
-    className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
+    className: cn("border-t border-[var(--openpkg-border-subtle)] first:border-t-0", depth > 0 && "ml-4"),
     children: [
       /* @__PURE__ */ jsx25("div", {
         className: "group py-4",
@@ -1098,7 +1098,7 @@ function NestedProperty({
             hasNested ? /* @__PURE__ */ jsx25("button", {
               type: "button",
               onClick: () => setExpanded(!expanded),
-              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+              className: "mt-0.5 p-0.5 text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] transition-colors cursor-pointer",
               "aria-label": expanded ? "Collapse" : "Expand",
               children: /* @__PURE__ */ jsx25(ChevronRight, {
                 size: 14,
@@ -1114,29 +1114,29 @@ function NestedProperty({
                   className: "flex items-center gap-2 flex-wrap",
                   children: [
                     /* @__PURE__ */ jsxs14("span", {
-                      className: "font-mono text-sm font-medium text-foreground",
+                      className: "font-mono text-sm font-medium text-[var(--openpkg-text-primary)]",
                       children: [
                         name,
                         !required && /* @__PURE__ */ jsx25("span", {
-                          className: "text-muted-foreground",
+                          className: "text-[var(--openpkg-text-muted)]",
                           children: "?"
                         })
                       ]
                     }),
                     /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-xs text-muted-foreground",
+                      className: "font-mono text-xs text-[var(--openpkg-text-muted)]",
                       children: type
                     }),
                     hasNested && /* @__PURE__ */ jsx25("button", {
                       type: "button",
                       onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      className: "text-xs text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
                       children: "Show child parameters"
                     }),
                     /* @__PURE__ */ jsx25("button", {
                       type: "button",
                       onClick: () => copy(name),
-                      className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+                      className: "p-1 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
                       "aria-label": "Copy name",
                       children: copied ? /* @__PURE__ */ jsx25(Check3, {
                         size: 12
@@ -1147,7 +1147,7 @@ function NestedProperty({
                   ]
                 }),
                 schema.description && /* @__PURE__ */ jsx25("p", {
-                  className: "text-sm text-muted-foreground mt-1",
+                  className: "text-sm text-[var(--openpkg-text-muted)] mt-1",
                   children: schema.description
                 })
               ]
@@ -1156,7 +1156,7 @@ function NestedProperty({
         })
       }),
       hasNested && expanded && schema.properties && /* @__PURE__ */ jsx25("div", {
-        className: "border-l border-border ml-2 mb-3",
+        className: "border-l border-[var(--openpkg-border-subtle)] ml-2 mb-3",
         children: Object.entries(schema.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx25(NestedProperty, {
           name: propName,
           schema: propSchema,
@@ -1181,7 +1181,7 @@ function APIParameterItem({
   const hasNested = children?.properties && Object.keys(children.properties).length > 0;
   const _nestedCount = hasNested && children?.properties ? Object.keys(children.properties).length : 0;
   return /* @__PURE__ */ jsxs14("div", {
-    className: cn("border-b border-border last:border-b-0", className),
+    className: cn("border-b border-[var(--openpkg-border-subtle)] last:border-b-0", className),
     children: [
       /* @__PURE__ */ jsx25("div", {
         className: "group py-4",
@@ -1191,7 +1191,7 @@ function APIParameterItem({
             hasNested ? /* @__PURE__ */ jsx25("button", {
               type: "button",
               onClick: () => setExpanded(!expanded),
-              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+              className: "mt-0.5 p-0.5 text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] transition-colors cursor-pointer",
               "aria-label": expanded ? "Collapse" : "Expand",
               children: /* @__PURE__ */ jsx25(ChevronRight, {
                 size: 14,
@@ -1207,27 +1207,27 @@ function APIParameterItem({
                   className: "flex items-center gap-2 flex-wrap",
                   children: [
                     /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-sm font-medium text-foreground",
+                      className: "font-mono text-sm font-medium text-[var(--openpkg-text-primary)]",
                       children: name
                     }),
                     required && /* @__PURE__ */ jsx25("span", {
-                      className: "text-[10px] font-semibold px-1.5 py-0.5 rounded border border-border bg-muted text-muted-foreground uppercase tracking-wide",
+                      className: "text-[10px] font-semibold px-1.5 py-0.5 rounded border border-[var(--openpkg-border-subtle)] bg-[var(--openpkg-bg-badge)] text-[var(--openpkg-text-muted)] uppercase tracking-wide",
                       children: "Required"
                     }),
                     /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-xs text-muted-foreground",
+                      className: "font-mono text-xs text-[var(--openpkg-text-muted)]",
                       children: type
                     }),
                     hasNested && /* @__PURE__ */ jsx25("button", {
                       type: "button",
                       onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      className: "text-xs text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
                       children: "Show child parameters"
                     }),
                     /* @__PURE__ */ jsx25("button", {
                       type: "button",
                       onClick: () => copy(name),
-                      className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+                      className: "p-1 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
                       "aria-label": "Copy name",
                       children: copied ? /* @__PURE__ */ jsx25(Check3, {
                         size: 12
@@ -1238,7 +1238,7 @@ function APIParameterItem({
                   ]
                 }),
                 description && /* @__PURE__ */ jsx25("p", {
-                  className: "text-sm text-muted-foreground mt-1",
+                  className: "text-sm text-[var(--openpkg-text-muted)] mt-1",
                   children: description
                 })
               ]
@@ -1247,7 +1247,7 @@ function APIParameterItem({
         })
       }),
       hasNested && expanded && children?.properties && /* @__PURE__ */ jsx25("div", {
-        className: "border-l border-border ml-2 mb-3",
+        className: "border-l border-[var(--openpkg-border-subtle)] ml-2 mb-3",
         children: Object.entries(children.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx25(NestedProperty, {
           name: propName,
           schema: propSchema,
@@ -1279,17 +1279,17 @@ function ParameterList({
     className: cn("", className),
     children: [
       title && /* @__PURE__ */ jsx26("h3", {
-        className: "text-sm font-medium text-foreground mb-3 uppercase tracking-wide",
+        className: "text-sm font-medium text-[var(--openpkg-text-primary)] mb-3 uppercase tracking-wide",
         children: title
       }),
       /* @__PURE__ */ jsx26("div", {
-        className: "divide-y divide-border border-t border-b border-border",
+        className: "divide-y divide-[var(--openpkg-border-subtle)] border-t border-b border-[var(--openpkg-border-subtle)]",
         children: visibleChildren
       }),
       shouldCollapse && !expanded && /* @__PURE__ */ jsxs15("button", {
         type: "button",
         onClick: () => setExpanded(true),
-        className: "flex items-center gap-1 mt-3 text-sm text-primary hover:underline cursor-pointer",
+        className: "flex items-center gap-1 mt-3 text-sm text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
         children: [
           /* @__PURE__ */ jsx26(ChevronDown2, {
             size: 14
@@ -1315,19 +1315,19 @@ function ResponseBlock({ data, title, className }) {
     copy(jsonString);
   };
   return /* @__PURE__ */ jsxs16("div", {
-    className: cn("group rounded-lg border border-border overflow-hidden bg-muted/30", className),
+    className: cn("group rounded-lg border border-[var(--openpkg-border-subtle)] overflow-hidden bg-[var(--openpkg-bg-secondary)]", className),
     children: [
       title && /* @__PURE__ */ jsxs16("div", {
-        className: "flex items-center justify-between px-4 py-2 border-b border-border bg-muted/50",
+        className: "flex items-center justify-between px-4 py-2 border-b border-[var(--openpkg-border-subtle)] bg-[var(--openpkg-bg-tertiary)]",
         children: [
           /* @__PURE__ */ jsx27("span", {
-            className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+            className: "text-xs font-medium text-[var(--openpkg-text-muted)] uppercase tracking-wide",
             children: title
           }),
           /* @__PURE__ */ jsx27("button", {
             type: "button",
             onClick: handleCopy,
-            className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+            className: "p-1 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
             "aria-label": "Copy response",
             children: copied ? /* @__PURE__ */ jsx27(Check4, {
               size: 14
@@ -1351,7 +1351,7 @@ function ResponseBlock({ data, title, className }) {
           !title && /* @__PURE__ */ jsx27("button", {
             type: "button",
             onClick: handleCopy,
-            className: "absolute top-3 right-3 p-1.5 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+            className: "absolute top-3 right-3 p-1.5 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
             "aria-label": "Copy response",
             children: copied ? /* @__PURE__ */ jsx27(Check4, {
               size: 14
@@ -1369,25 +1369,25 @@ function JsonHighlight({ json, depth = 0 }) {
   const nextIndent = "  ".repeat(depth + 1);
   if (json === null) {
     return /* @__PURE__ */ jsx27("span", {
-      className: "text-orange-400",
+      className: "text-[var(--openpkg-syn-number)]",
       children: "null"
     });
   }
   if (typeof json === "boolean") {
     return /* @__PURE__ */ jsx27("span", {
-      className: "text-orange-400",
+      className: "text-[var(--openpkg-syn-boolean)]",
       children: json ? "true" : "false"
     });
   }
   if (typeof json === "number") {
     return /* @__PURE__ */ jsx27("span", {
-      className: "text-cyan-400",
+      className: "text-[var(--openpkg-syn-number)]",
       children: json
     });
   }
   if (typeof json === "string") {
     return /* @__PURE__ */ jsxs16("span", {
-      className: "text-emerald-400",
+      className: "text-[var(--openpkg-syn-string)]",
       children: [
         '"',
         json,
@@ -1398,14 +1398,14 @@ function JsonHighlight({ json, depth = 0 }) {
   if (Array.isArray(json)) {
     if (json.length === 0) {
       return /* @__PURE__ */ jsx27("span", {
-        className: "text-foreground",
+        className: "text-[var(--openpkg-syn-punctuation)]",
         children: "[]"
       });
     }
     return /* @__PURE__ */ jsxs16(Fragment4, {
       children: [
         /* @__PURE__ */ jsx27("span", {
-          className: "text-foreground",
+          className: "text-[var(--openpkg-syn-punctuation)]",
           children: "["
         }),
         `
@@ -1418,7 +1418,7 @@ function JsonHighlight({ json, depth = 0 }) {
               depth: depth + 1
             }),
             i < json.length - 1 && /* @__PURE__ */ jsx27("span", {
-              className: "text-foreground",
+              className: "text-[var(--openpkg-syn-punctuation)]",
               children: ","
             }),
             `
@@ -1427,7 +1427,7 @@ function JsonHighlight({ json, depth = 0 }) {
         }, i)),
         indent,
         /* @__PURE__ */ jsx27("span", {
-          className: "text-foreground",
+          className: "text-[var(--openpkg-syn-punctuation)]",
           children: "]"
         })
       ]
@@ -1437,14 +1437,14 @@ function JsonHighlight({ json, depth = 0 }) {
     const entries = Object.entries(json);
     if (entries.length === 0) {
       return /* @__PURE__ */ jsx27("span", {
-        className: "text-foreground",
+        className: "text-[var(--openpkg-syn-punctuation)]",
         children: "{}"
       });
     }
     return /* @__PURE__ */ jsxs16(Fragment4, {
       children: [
         /* @__PURE__ */ jsx27("span", {
-          className: "text-foreground",
+          className: "text-[var(--openpkg-syn-punctuation)]",
           children: "{"
         }),
         `
@@ -1453,7 +1453,7 @@ function JsonHighlight({ json, depth = 0 }) {
           children: [
             nextIndent,
             /* @__PURE__ */ jsxs16("span", {
-              className: "text-blue-400",
+              className: "text-[var(--openpkg-syn-property)]",
               children: [
                 '"',
                 key,
@@ -1461,7 +1461,7 @@ function JsonHighlight({ json, depth = 0 }) {
               ]
             }),
             /* @__PURE__ */ jsx27("span", {
-              className: "text-foreground",
+              className: "text-[var(--openpkg-syn-punctuation)]",
               children: ": "
             }),
             /* @__PURE__ */ jsx27(JsonHighlight, {
@@ -1469,7 +1469,7 @@ function JsonHighlight({ json, depth = 0 }) {
               depth: depth + 1
             }),
             i < entries.length - 1 && /* @__PURE__ */ jsx27("span", {
-              className: "text-foreground",
+              className: "text-[var(--openpkg-syn-punctuation)]",
               children: ","
             }),
             `
@@ -1478,14 +1478,14 @@ function JsonHighlight({ json, depth = 0 }) {
         }, key)),
         indent,
         /* @__PURE__ */ jsx27("span", {
-          className: "text-foreground",
+          className: "text-[var(--openpkg-syn-punctuation)]",
           children: "}"
         })
       ]
     });
   }
   return /* @__PURE__ */ jsx27("span", {
-    className: "text-foreground",
+    className: "text-[var(--openpkg-text-primary)]",
     children: String(json)
   });
 }
@@ -1701,7 +1701,7 @@ function TabsList({
 }) {
   return /* @__PURE__ */ jsx31(TabsPrimitive.List, {
     "data-slot": "tabs-list",
-    className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
+    className: cn("bg-[var(--openpkg-bg-secondary)] text-[var(--openpkg-text-muted)] inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
     ...props
   });
 }
@@ -1711,7 +1711,7 @@ function TabsTrigger({
 }) {
   return /* @__PURE__ */ jsx31(TabsPrimitive.Trigger, {
     "data-slot": "tabs-trigger",
-    className: cn("dark:data-[state=active]:text-foreground focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground inline-flex h-full flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-normal whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    className: cn("data-[state=active]:text-[var(--openpkg-text-primary)] focus-visible:ring-[var(--openpkg-accent-primary)] focus-visible:outline-[var(--openpkg-accent-primary)] text-[var(--openpkg-text-muted)] inline-flex h-full flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-normal whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
     ...props
   });
 }
@@ -2598,16 +2598,16 @@ function ImportSection({ importStatement, className }) {
     copy(importStatement);
   };
   return /* @__PURE__ */ jsxs24("div", {
-    className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-border bg-muted/30 px-4 py-3", className),
+    className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-[var(--openpkg-border-subtle)] bg-[var(--openpkg-bg-secondary)] px-4 py-3", className),
     children: [
       /* @__PURE__ */ jsx41("code", {
-        className: "font-mono text-sm text-foreground overflow-x-auto",
+        className: "font-mono text-sm text-[var(--openpkg-text-primary)] overflow-x-auto",
         children: importStatement
       }),
       /* @__PURE__ */ jsx41("button", {
         type: "button",
         onClick: handleCopy,
-        className: cn("shrink-0 p-1.5 rounded", "text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
+        className: cn("shrink-0 p-1.5 rounded", "text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)]", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
         "aria-label": "Copy import statement",
         children: copied ? /* @__PURE__ */ jsx41(Check7, {
           size: 16
@@ -2625,17 +2625,17 @@ import { jsx as jsx42 } from "react/jsx-runtime";
 var typeBadgeVariants = cva2("font-mono text-sm", {
   variants: {
     typeColor: {
-      string: "text-emerald-600 dark:text-emerald-400",
-      number: "text-blue-600 dark:text-blue-400",
-      boolean: "text-amber-600 dark:text-amber-400",
-      null: "text-gray-500 dark:text-gray-400",
-      undefined: "text-gray-500 dark:text-gray-400",
-      object: "text-purple-600 dark:text-purple-400",
-      array: "text-cyan-600 dark:text-cyan-400",
-      function: "text-fuchsia-600 dark:text-fuchsia-400",
-      union: "text-orange-600 dark:text-orange-400",
-      generic: "text-rose-600 dark:text-rose-400",
-      default: "text-muted-foreground"
+      string: "text-[var(--openpkg-accent-green)]",
+      number: "text-[var(--openpkg-accent-blue)]",
+      boolean: "text-[var(--openpkg-accent-amber)]",
+      null: "text-[var(--openpkg-text-muted)]",
+      undefined: "text-[var(--openpkg-text-muted)]",
+      object: "text-[var(--openpkg-accent-purple)]",
+      array: "text-[var(--openpkg-accent-cyan)]",
+      function: "text-[var(--openpkg-accent-fuchsia)]",
+      union: "text-[var(--openpkg-accent-orange)]",
+      generic: "text-[var(--openpkg-accent-rose)]",
+      default: "text-[var(--openpkg-text-muted)]"
     }
   },
   defaultVariants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpkg-ts/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "UI primitives and components for OpenPkg documentation",
   "homepage": "https://github.com/ryanwaits/openpkg-ts#readme",
   "repository": {

package/src/styles/tokens.css

@@ -39,7 +39,21 @@
   --openpkg-accent-green: #16a34a;
   --openpkg-accent-blue: #2563eb;
   --openpkg-accent-purple: #7c3aed;
+  --openpkg-accent-red: #dc2626;
+  --openpkg-accent-yellow: #ca8a04;
+  --openpkg-accent-amber: #d97706;
+  --openpkg-accent-cyan: #0891b2;
+  --openpkg-accent-rose: #e11d48;
+  --openpkg-accent-fuchsia: #c026d3;
+  --openpkg-accent-orange: #ea580c;
   --openpkg-accent-link: #2563eb;
+  --openpkg-accent-primary: #2563eb;
+  --openpkg-text-on-primary: #ffffff;
+
+  /* Card / surface colors */
+  --openpkg-bg-card: #ffffff;
+  --openpkg-bg-card-hover: #fafafa;
+  --openpkg-bg-input: #ffffff;
 
   /* Border colors */
   --openpkg-border-subtle: #e5e5e5;
@@ -82,7 +96,19 @@
   --openpkg-accent-green: #3ecf8e;
   --openpkg-accent-blue: #6cb6ff;
   --openpkg-accent-purple: #c4a7e7;
+  --openpkg-accent-red: #f87171;
+  --openpkg-accent-yellow: #facc15;
+  --openpkg-accent-amber: #fbbf24;
+  --openpkg-accent-cyan: #22d3ee;
+  --openpkg-accent-rose: #fb7185;
+  --openpkg-accent-fuchsia: #e879f9;
+  --openpkg-accent-orange: #fb923c;
   --openpkg-accent-link: #6cb6ff;
+  --openpkg-accent-primary: #6cb6ff;
+  --openpkg-text-on-primary: #ffffff;
+  --openpkg-bg-card: #141414;
+  --openpkg-bg-card-hover: #1a1a1a;
+  --openpkg-bg-input: #171717;
   --openpkg-border-subtle: #262626;
   --openpkg-border-medium: #333333;
   --openpkg-border-chip: #333333;
@@ -117,7 +143,19 @@
     --openpkg-accent-green: #3ecf8e;
     --openpkg-accent-blue: #6cb6ff;
     --openpkg-accent-purple: #c4a7e7;
+    --openpkg-accent-red: #f87171;
+    --openpkg-accent-yellow: #facc15;
+    --openpkg-accent-amber: #fbbf24;
+    --openpkg-accent-cyan: #22d3ee;
+    --openpkg-accent-rose: #fb7185;
+    --openpkg-accent-fuchsia: #e879f9;
+    --openpkg-accent-orange: #fb923c;
     --openpkg-accent-link: #6cb6ff;
+    --openpkg-accent-primary: #6cb6ff;
+    --openpkg-text-on-primary: #ffffff;
+    --openpkg-bg-card: #141414;
+    --openpkg-bg-card-hover: #1a1a1a;
+    --openpkg-bg-input: #171717;
     --openpkg-border-subtle: #262626;
     --openpkg-border-medium: #333333;
     --openpkg-border-chip: #333333;