@widgetic/design-system 0.5.21 → 0.5.23

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.21",
+	"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": {