@widgetic/design-system 0.5.22 → 0.5.23

package/dist/i18n/audit/designSystemWords.d.ts

@@ -1,6 +1,6 @@
 /**
  * Some components of the design system carry English of their own (the close button of a window, "Back" in the path above
- * the files, "Loading PDF..."). The design system lets a page replace each of those words with a prop, but a component that
+ * the files, "Loading PDF…"). The design system lets a page replace each of those words with a prop, but a component that
  * is used without the prop quietly shows English. This reads the syntax tree of each file of a package and reports a
  * component that shows words and is used without all of them.
  */

package/dist/i18n/audit/designSystemWords.js

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { lineOf, listSourceFiles, parseFile, walkTree } from "./syntaxTree.js";
 /**
  * Some components of the design system carry English of their own (the close button of a window, "Back" in the path above
- * the files, "Loading PDF..."). The design system lets a page replace each of those words with a prop, but a component that
+ * the files, "Loading PDF…"). The design system lets a page replace each of those words with a prop, but a component that
  * is used without the prop quietly shows English. This reads the syntax tree of each file of a package and reports a
  * component that shows words and is used without all of them.
  */

package/dist/styles/fonts.css

@@ -2,19 +2,15 @@
  * Paths are relative so Vite resolves them when consumers import fonts.css.
  * Site also mirrors these under static/fonts for /fonts/* URLs in app.html.
  *
- * ## OTS / Chromium validation (Sep 2026)
- * Several Inter / Cousine / JetBrains Mono WOFF2 files under src/lib/fonts fail
- * Chromium OpenType Sanitizer (console: "OTS parsing error", "Failed to convert
- * WOFF 2.0 font to SFNT") when served via Vite `@fs` in local monorepo links.
- * That does NOT mean CSS @font-face is wrong — the binary files themselves are
- * incomplete/corrupt for OTS. Google Fonts CDN faces (site app.html) still work
- * for the same family names, so UI typography stays correct even when local
- * @font-face errors appear in the console.
- *
- * Keep these @font-face rules for packaging / offline / consumers that ship
- * clean binaries. Prefer replacing the WOFF2 files with official releases
- * (rsms/inter, google/fonts) when cleaning the console is required — do not
- * delete @font-face solely to silence OTS.
+ * ## Font binaries (5 Nov 2026)
+ * The Inter files were corrupt (UTF-8 mangled: Chromium logged "OTS parsing
+ * error" and silently fell back to system-ui). They are now the official
+ * releases: Inter 4.1.1 (rsms/inter, `web/*.woff2` and `InterVariable*.woff2`
+ * from the npm package inter-ui) and JetBrains Mono Regular (latin subset,
+ * @fontsource/jetbrains-mono 5.3.0). The file names did not change.
+ * Check a file with: node -e "const b=require('fs').readFileSync(P);
+ * console.log(b.readUInt32BE(8)===b.length)" (the WOFF2 header stores the
+ * length of the file; a mismatch means the file was damaged).
  */
 
 /* Tailwind config */
@@ -111,7 +107,15 @@
     font-display: swap;
   }
 
-  /* JETBRAINS MONO: Monospace Display (Developer API) */
+  /* JETBRAINS MONO: code / text-code (Figma style Code/Default is Regular) */
+  @font-face {
+    font-family: 'JetBrains Mono';
+    src: url('../fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+
   @font-face {
     font-family: 'JetBrains Mono';
     src: url('../fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');

package/dist/styles/global.css

@@ -4,6 +4,7 @@
 /* Import fonts css */
 /* @import './fonts.css' layer(utilities); */
 @import './fonts.css';
+@import './tokens.css';
 
 /* Tailwind config load *after* main imports - needed for tailwind 4 
 go 3 levels up in development mode, 2 levels up in production mode*/
@@ -13,14 +14,10 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 @theme {
   --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 
-  --color-dark: hsl(var(--dark));
-  --color-deep-forest-green: hsl(var(--deep-forest-green));
-  --color-sage-green: hsl(var(--sage-green));
+  /* Brand primitives: hex values live in tokens.css (@theme); legacy HSL triplets below for hsl(var(--*)) consumers */
   --color-sunny-yellow: hsl(var(--sunny-yellow));
-  --color-light-green: hsl(var(--light-green));
   --color-forest-green: hsl(var(--forest-green));
   --color-forest-green-dark: hsl(var(--forest-green-dark));
-  --color-error: hsl(var(--error));
   --color-error-dark: hsl(var(--error-dark));
   --color-light-error: hsl(var(--light-error));
   --color-grey1: hsl(var(--grey1));
@@ -149,10 +146,10 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     --deep-forest-green: 116.3 25.4% 24.7%; /* #314F2F */
     --sage-green: 101.6 25.8% 52.9%; /* #7BA668 */
     --sunny-yellow: 45 89% 65.7%;
-    --light-green: 88.2 20% 83.3%; /* #D5DDCC */
-    --forest-green: 88.2 20% 83.3%; /* #D5DDCC */
+    --light-green: 95.3 38.9% 90.2%; /* #E3F0DB */
+    --forest-green: 95.3 38.9% 90.2%; /* legacy alias of light-green tint */
     --forest-green-dark: 116.3 25.4% 24.7%; /* #314F2F */
-    --error: 0 88.6% 65.7%; /* #F55A5A */
+    --error: 357.5 100% 43.1%; /* #DC0009 */
     --error-dark: 0 89% 55%;
     --light-error: 0 45.5% 93.7%;
     /* Greys */
@@ -195,7 +192,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   /*** GLOBAL STYLE CLASSES ***/
   * {
-    border-color: hsl(var(--border));
+    border-color: var(--border);
   }
 
   button,
@@ -210,8 +207,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     overflow: hidden; /* prevent scroll */
     margin: 0;
     font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
+    @apply bg-background text-foreground;
   }
 
   /* This is the root container of the website(app.html) */
@@ -990,11 +986,3 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   background-color: color-mix(in srgb, hsl(var(--deep-forest-green)) 90%, black) !important;
   color: white !important;
 }
-
-.accordion-trigger {
-  height: 52px;
-}
-
-[data-radix-collapsible-trigger] {
-  min-height: 52px !important;
-}

package/dist/styles/tokens.css

@@ -0,0 +1,332 @@
+/**
+ * Widgetic design tokens (Figma Dashboard file GCC2aXrh3PEHlMWFaAOisR).
+ * Primitives + semantic Color, Spacing, Radius, Layout, Motion, typography utilities.
+ */
+
+@theme {
+	--color-white: #ffffff;
+	--color-neutral-100: #f5f5f5;
+	--color-neutral-200: #e5e5e5;
+	--color-neutral-550: #676767;
+	--color-dark: #0f2010;
+	--color-deep-forest-green: #314f2f;
+	/* One red, 5.2:1 on white and 4.8:1 on a hover row (it was #e7000b, 4.4:1 on a hover row). */
+	--color-error: #dc0009;
+	/* Figma status/warning. Named by its hue because --color-warning is the Tailwind key of the semantic token below. */
+	--color-amber: #b45309;
+	--color-sage-green: #7ba668;
+	--color-light-green: #e3f0db;
+
+	--color-alpha-dark-04: color-mix(in oklab, var(--color-dark) 4%, transparent);
+	--color-alpha-dark-08: color-mix(in oklab, var(--color-dark) 8%, transparent);
+	--color-alpha-dark-30: color-mix(in oklab, var(--color-dark) 30%, transparent);
+	--color-alpha-light-10: color-mix(in oklab, var(--color-white) 10%, transparent);
+}
+
+:root {
+	/* Semantic colors (light mode). Add `.dark { ... }` when dark theme ships. */
+	--background: var(--color-white);
+	--foreground: var(--color-dark);
+	--card: var(--color-white);
+	--card-foreground: var(--color-dark);
+	--popover: var(--color-white);
+	--popover-foreground: var(--color-dark);
+	--primary: var(--color-deep-forest-green);
+	--primary-foreground: var(--color-white);
+	--secondary: var(--color-neutral-100);
+	--secondary-foreground: var(--color-dark);
+	--muted: var(--color-neutral-100);
+	--muted-foreground: var(--color-neutral-550);
+	--accent: var(--color-alpha-dark-04);
+	--accent-foreground: var(--color-dark);
+	/* Hover of a surface that is already accent (soft controls, the search field, the rows of the editor).
+	   The Figma Hover variants stack a second accent fill on the first (4% over 4%); the nearest alpha primitive is 8%.
+	   Derived from the primitives, not a Figma variable. */
+	--accent-hover: var(--color-alpha-dark-08);
+	--destructive: var(--color-error);
+	--destructive-foreground: var(--color-white);
+	/* Warning icon and text, 5.0:1 on white. For the Warning tone of a toast or a note, never a button or a surface. */
+	--warning: var(--color-amber);
+	--brand: var(--color-sage-green);
+	--brand-foreground: var(--color-dark);
+	--brand-subtle: var(--color-light-green);
+	--border: var(--color-neutral-200);
+	--border-strong: var(--color-alpha-dark-30);
+	--input: var(--color-neutral-200);
+	--ring: var(--color-deep-forest-green);
+	--sidebar: var(--color-neutral-100);
+	--sidebar-foreground: var(--color-dark);
+	--sidebar-primary: var(--color-deep-forest-green);
+	--sidebar-primary-foreground: var(--color-white);
+	--sidebar-accent: var(--color-alpha-dark-04);
+	--sidebar-accent-foreground: var(--color-dark);
+	--sidebar-border: var(--color-neutral-200);
+	--sidebar-ring: var(--color-deep-forest-green);
+	--shadow-soft: var(--color-alpha-dark-08);
+	--inverse: var(--color-dark);
+	--inverse-foreground: var(--color-white);
+	--inverse-muted: var(--color-alpha-light-10);
+
+	/* Spacing (Figma space/* → Tailwind spacing scale via --spacing = 0.25rem) */
+	--space-0-5: calc(var(--spacing) * 0.5);
+	--space-1: calc(var(--spacing) * 1);
+	--space-1-5: calc(var(--spacing) * 1.5);
+	--space-2: calc(var(--spacing) * 2);
+	--space-3: calc(var(--spacing) * 3);
+	--space-4: calc(var(--spacing) * 4);
+	--space-6: calc(var(--spacing) * 6);
+	--space-8: calc(var(--spacing) * 8);
+	--space-12: calc(var(--spacing) * 12);
+
+	/* Radius */
+	--radius-sm: 4px;
+	--radius-lg: 8px;
+	--radius-xl: 12px;
+	--radius-card: 18px;
+	--radius-panel: 24px;
+	--radius-full: 9999px;
+
+	/* Layout widths / heights */
+	--layout-sidebar-width: 280px;
+	--layout-chat-panel-width: 440px;
+	--layout-content-max-width: 728px;
+	--layout-settings-modal-width: 1024px;
+	--layout-settings-modal-height: 700px;
+	--layout-editor-panel-width: 450px;
+	--layout-editor-control-width: 185px;
+	--layout-picker-width: 374px;
+	--layout-auth-form-width: 360px;
+	--layout-auth-panel-width: 600px;
+	--layout-email-width: 440px;
+	--layout-dialog-width: 400px;
+	--layout-file-picker-width: 520px;
+	--layout-file-dialog-width: 566px;
+
+	/* Motion */
+	--duration-fast: 120ms;
+	--duration-base: 160ms;
+	--duration-slow: 250ms;
+	--duration-enter: 500ms;
+	--stagger-item: 50ms;
+	--ease-standard: ease;
+	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+	--scale-press: 0.97;
+	--scale-enter: 0.95;
+
+	/* Shadow */
+	--shadow-floating: 0 4px 12px 0 var(--shadow-soft);
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent-hover: var(--accent-hover);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-warning: var(--warning);
+	--color-brand: var(--brand);
+	--color-brand-foreground: var(--brand-foreground);
+	--color-brand-subtle: var(--brand-subtle);
+	--color-border: var(--border);
+	--color-border-strong: var(--border-strong);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-inverse: var(--inverse);
+	--color-inverse-foreground: var(--inverse-foreground);
+	--color-inverse-muted: var(--inverse-muted);
+	--color-shadow-soft: var(--shadow-soft);
+
+	--radius-sm: var(--radius-sm);
+	--radius-lg: var(--radius-lg);
+	--radius-xl: var(--radius-xl);
+	--radius-card: var(--radius-card);
+	--radius-panel: var(--radius-panel);
+	--radius-full: var(--radius-full);
+
+	--shadow-floating: 0 4px 12px 0 var(--shadow-soft);
+}
+
+/* Layout utilities */
+@utility w-sidebar {
+	width: var(--layout-sidebar-width);
+}
+@utility w-chat-panel {
+	width: var(--layout-chat-panel-width);
+}
+@utility max-w-content {
+	max-width: var(--layout-content-max-width);
+}
+@utility w-editor-panel {
+	width: var(--layout-editor-panel-width);
+}
+@utility w-editor-control {
+	width: var(--layout-editor-control-width);
+}
+@utility w-picker {
+	width: var(--layout-picker-width);
+}
+@utility w-auth-form {
+	width: var(--layout-auth-form-width);
+}
+@utility w-auth-panel {
+	width: var(--layout-auth-panel-width);
+}
+@utility w-email {
+	width: var(--layout-email-width);
+}
+@utility w-dialog {
+	width: var(--layout-dialog-width);
+}
+@utility w-file-picker {
+	width: var(--layout-file-picker-width);
+}
+@utility w-file-dialog {
+	width: var(--layout-file-dialog-width);
+}
+@utility w-settings-modal {
+	width: var(--layout-settings-modal-width);
+}
+@utility h-settings-modal {
+	height: var(--layout-settings-modal-height);
+}
+
+/* Motion utilities */
+@utility duration-fast {
+	transition-duration: var(--duration-fast);
+}
+@utility duration-base {
+	transition-duration: var(--duration-base);
+}
+@utility duration-slow {
+	transition-duration: var(--duration-slow);
+}
+@utility duration-enter {
+	transition-duration: var(--duration-enter);
+}
+@utility ease-standard {
+	transition-timing-function: var(--ease-standard);
+}
+@utility ease-out {
+	transition-timing-function: var(--ease-out);
+}
+@utility ease-in-out {
+	transition-timing-function: var(--ease-in-out);
+}
+@utility ease-drawer {
+	transition-timing-function: var(--ease-drawer);
+}
+
+@utility press-feedback {
+	transition: transform var(--duration-base) var(--ease-out);
+
+	&:active:not(:disabled):not([aria-disabled='true']) {
+		transform: scale(var(--scale-press));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		&:active:not(:disabled):not([aria-disabled='true']) {
+			transform: none;
+		}
+	}
+}
+
+/* Figma text styles (prefixed with text- to avoid legacy typography utilities in fonts.css) */
+@utility text-display-hero {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 40px;
+	line-height: 1.3;
+	font-weight: 400;
+	letter-spacing: -0.02em;
+}
+@utility text-heading-page {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 24px;
+	line-height: 32px;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+}
+@utility text-heading-section {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 600;
+	letter-spacing: 0;
+}
+@utility text-body {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 400;
+	letter-spacing: 0;
+}
+@utility text-body-medium {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+@utility text-body-large {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 20px;
+	line-height: 30px;
+	font-weight: 400;
+	letter-spacing: 0;
+}
+@utility text-caption {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 400;
+	letter-spacing: 0;
+}
+@utility text-caption-medium {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+@utility text-label {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+@utility text-label-small {
+	font-family: 'Inter', system-ui, sans-serif;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 500;
+	letter-spacing: 0;
+}
+@utility text-code {
+	font-family: 'JetBrains Mono', ui-monospace, monospace;
+	font-size: 12px;
+	line-height: 16px;
+	font-weight: 400;
+	letter-spacing: 0;
+}

package/dist/utils.d.ts

@@ -1,2 +1,29 @@
 import { type ClassValue } from "clsx";
+/**
+ * The typography utilities of the design system (`@utility text-*` in `styles/tokens.css`).
+ * Each one sets the size, line height, weight and letter spacing together, like a Figma text style.
+ * Keep this list in step with tokens.css (the design check fails when a utility is missing here).
+ */
+export declare const typographyUtilityNames: readonly ["display-hero", "heading-page", "heading-section", "body", "body-medium", "body-large", "caption", "caption-medium", "label", "label-small", "code"];
+/**
+ * Why this exists: tailwind-merge reads every `text-*` class it does not know as a text COLOR, so
+ * `cn('text-body', 'text-muted-foreground')` kept only the color and the typography was lost.
+ * Declared here as font sizes, a typography utility only replaces another font size, never a color.
+ */
+export declare const typographyClassGroups: {
+    "font-size": {
+        text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+    }[];
+};
+/** Joins class names and resolves conflicts (the last Tailwind utility of a group wins). Use this, never `twMerge` alone. */
 export declare function cn(...inputs: ClassValue[]): string;
+/** `tv` with the same merge rules as `cn`: components that use tailwind-variants import this, not `tailwind-variants`. */
+export declare const tv: import("tailwind-variants").CreateTV<{
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
+    };
+}>;

package/dist/utils.js

@@ -1,5 +1,36 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+import { createTV } from "tailwind-variants";
+/**
+ * The typography utilities of the design system (`@utility text-*` in `styles/tokens.css`).
+ * Each one sets the size, line height, weight and letter spacing together, like a Figma text style.
+ * Keep this list in step with tokens.css (the design check fails when a utility is missing here).
+ */
+export const typographyUtilityNames = [
+    "display-hero",
+    "heading-page",
+    "heading-section",
+    "body",
+    "body-medium",
+    "body-large",
+    "caption",
+    "caption-medium",
+    "label",
+    "label-small",
+    "code"
+];
+/**
+ * Why this exists: tailwind-merge reads every `text-*` class it does not know as a text COLOR, so
+ * `cn('text-body', 'text-muted-foreground')` kept only the color and the typography was lost.
+ * Declared here as font sizes, a typography utility only replaces another font size, never a color.
+ */
+export const typographyClassGroups = {
+    "font-size": [{ text: [...typographyUtilityNames] }]
+};
+const mergeClasses = extendTailwindMerge({ extend: { classGroups: typographyClassGroups } });
+/** Joins class names and resolves conflicts (the last Tailwind utility of a group wins). Use this, never `twMerge` alone. */
 export function cn(...inputs) {
-    return twMerge(clsx(inputs));
+    return mergeClasses(clsx(inputs));
 }
+/** `tv` with the same merge rules as `cn`: components that use tailwind-variants import this, not `tailwind-variants`. */
+export const tv = createTV({ twMergeConfig: { classGroups: typographyClassGroups } });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.22",
+	"version": "0.5.23",
 	"license": "SEE LICENSE IN LICENSE",
 	"type": "module",
 	"svelte": "./dist/index.js",
@@ -41,6 +41,7 @@
 		"check:strict": "tsc --noEmit && npm run check",
 		"check:deps": "check-runtime-deps",
 		"test": "node --test \"tests/**/*.test.ts\"",
+		"check:design": "node scripts/check-design-rules.mjs",
 		"test:deps": "check-runtime-deps-fixtures",
 		"pnpm-link": "zsh -c 'mkdir -p ~/.pnpm-global/bin && export PATH=\"$PATH:$HOME/.pnpm-global/bin\" && pnpm install -g pnpm && pnpm config set global-bin-dir ~/.pnpm-global/bin && echo \"export PATH=\\\"$PATH:$HOME/.pnpm-global/bin\\\"\" >> ~/.zshrc && source ~/.zshrc && pnpm link --global'",
 		"link-packs": "zsh -c 'mkdir -p ~/.pnpm-global/bin && export PATH=\"$PATH:$HOME/.pnpm-global/bin\" && pnpm install -g pnpm && pnpm config set global-bin-dir ~/.pnpm-global/bin && echo \"export PATH=\\\"$PATH:$HOME/.pnpm-global/bin\\\"\" >> ~/.zshrc && source ~/.zshrc && pnpm link --global @widgetic/api-sdk @widgetic/design-system'",

package/tailwind.config.ts

@@ -15,50 +15,7 @@ const config: Config = {
 		},
 		extend: {
 			colors: {
-				border: "hsl(var(--border) / <alpha-value>)",
-				input: "hsl(var(--input) / <alpha-value>)",
-				ring: "hsl(var(--ring) / <alpha-value>)",
-				background: "hsl(var(--background) / <alpha-value>)",
-				foreground: "hsl(var(--foreground) / <alpha-value>)",
-				primary: {
-					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
-				},
-				muted: {
-					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
-				},
-				accent: {
-					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
-				},
-				popover: {
-					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
-				},
-				card: {
-					DEFAULT: "hsl(var(--card) / <alpha-value>)",
-					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-				},
-				sidebar: {
-					DEFAULT: "hsl(var(--sidebar-background))",
-					foreground: "hsl(var(--sidebar-foreground))",
-					primary: "hsl(var(--sidebar-primary))",
-					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-					accent: "hsl(var(--sidebar-accent))",
-					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-					border: "hsl(var(--sidebar-border))",
-					ring: "hsl(var(--sidebar-ring))",
-        		},
-				// Widgetic DS palette (CSS vars defined in global.css)
+				// Widgetic DS palette (CSS vars defined in global.css / tokens.css)
 				dark: "hsl(var(--dark) / <alpha-value>)",
 				"deep-forest-green": "hsl(var(--deep-forest-green) / <alpha-value>)",
 				"sage-green": "hsl(var(--sage-green) / <alpha-value>)",
@@ -94,10 +51,13 @@ const config: Config = {
 				cousine: ["Cousine", "monospace"],
 			},
 			borderRadius: {
-				xl: "calc(var(--radius) + 4px)",
-				lg: "var(--radius)",
+				sm: "var(--radius-sm)",
+				lg: "var(--radius-lg)",
+				xl: "var(--radius-xl)",
+				card: "var(--radius-card)",
+				panel: "var(--radius-panel)",
+				full: "var(--radius-full)",
 				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
 			},
 			keyframes: {
 				"accordion-down": {