@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/ui/sonner/sonner.svelte

@@ -1,18 +1,20 @@
+<!-- Figma: Toast (135:87) — flat popover surface, 1px border. -->
 <script lang="ts">
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 
-	const browser = typeof window !== 'undefined';
+	const browser = typeof window !== "undefined";
 
 	let restProps: SonnerProps = $props();
-	
-	// Determine theme based on browser preference, fallback to 'light'
-	// This removes the dependency on mode-watcher which requires ModeWatcher component to be mounted
-	function getTheme(): 'light' | 'dark' | 'system' {
-		if (!browser) return 'light';
-		if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
-			return 'dark';
+
+	function getTheme(): "light" | "dark" | "system" {
+		if (!browser) return "light";
+		if (
+			typeof window !== "undefined" &&
+			window.matchMedia?.("(prefers-color-scheme: dark)").matches
+		) {
+			return "dark";
 		}
-		return 'light';
+		return "light";
 	}
 </script>
 
@@ -21,10 +23,14 @@
 	class="toaster group"
 	toastOptions={{
 		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+			toast:
+				"group toast group-[.toaster]:rounded-xl group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground",
+			description: "group-[.toast]:text-muted-foreground group-[.toast]:text-body",
+			title: "group-[.toast]:text-body-medium",
+			actionButton:
+				"group-[.toast]:h-8 group-[.toast]:rounded-lg group-[.toast]:border group-[.toast]:border-input group-[.toast]:bg-background group-[.toast]:px-2 group-[.toast]:text-label",
+			cancelButton:
+				"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:text-label",
 		},
 	}}
 	{...restProps}

package/dist/components/ui/stepper-button/index.d.ts

@@ -0,0 +1,3 @@
+import Root from "./stepper-button.svelte";
+export { Root, Root as StepperButton };
+export type { StepperKind } from "./stepper-button.svelte";

package/dist/components/ui/stepper-button/index.js

@@ -0,0 +1,2 @@
+import Root from "./stepper-button.svelte";
+export { Root, Root as StepperButton };

package/dist/components/ui/stepper-button/stepper-button.svelte

@@ -0,0 +1,37 @@
+<!-- Figma: Stepper Button (Editor / Atoms 171:81). -->
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import IconMinus from "@tabler/icons-svelte/icons/minus";
+	import IconPlus from "@tabler/icons-svelte/icons/plus";
+	import { cn } from "../../../utils.js";
+
+	export type StepperKind = "plus" | "minus";
+
+	let {
+		class: className,
+		kind = "plus",
+		label,
+		disabled = false,
+		...restProps
+	}: HTMLButtonAttributes & {
+		kind?: StepperKind;
+		label: string;
+	} = $props();
+</script>
+
+<button
+	type="button"
+	aria-label={label}
+	{disabled}
+	class={cn(
+		"inline-flex size-6 shrink-0 items-center justify-center rounded-lg bg-transparent text-foreground transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 press-feedback",
+		className
+	)}
+	{...restProps}
+>
+	{#if kind === "minus"}
+		<IconMinus class="size-4 stroke-[1.333]" aria-hidden="true" />
+	{:else}
+		<IconPlus class="size-4 stroke-[1.333]" aria-hidden="true" />
+	{/if}
+</button>

package/dist/components/ui/stepper-button/stepper-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+export type StepperKind = "plus" | "minus";
+type $$ComponentProps = HTMLButtonAttributes & {
+    kind?: StepperKind;
+    label: string;
+};
+declare const StepperButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperButton = ReturnType<typeof StepperButton>;
+export default StepperButton;

package/dist/components/ui/switch/switch.svelte

@@ -1,10 +1,11 @@
+<!-- Figma: Switch (component set 103:21, node 103:2). -->
 <script lang="ts" module>
 	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	export type SwitchProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps>;
 </script>
 
 <script lang="ts">
-		import { cn } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,18 +15,22 @@
 	}: SwitchProps = $props();
 </script>
 
+<!--
+	The track is 36x20. `relative before:absolute before:inset-x-0 before:-inset-y-0.5` adds an invisible 2px above and below,
+	so the tap target is 36x24 (the minimum height of a target). Figma keeps the same 24px frame around the 20px track.
+-->
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	class={cn(
-		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input p-0.5 transition-colors duration-base ease-out before:absolute before:inset-x-0 before:-inset-y-0.5 hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary/90",
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			"bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-5"
+			"pointer-events-none block size-4 rounded-full bg-background shadow-none transition-transform duration-base ease-out data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary-foreground data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-4"
 		)}
 	/>
 </SwitchPrimitive.Root>

package/dist/components/ui/table/table-cell.svelte

@@ -18,7 +18,7 @@
 
 <td
 	bind:this={ref}
-	class={cn("p-4 align-middle [&:has([role=checkbox])]:pe-0", className)}
+	class={cn("text-body p-4 align-middle [&:has([role=checkbox])]:pe-0", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/table/table-head.svelte

@@ -19,7 +19,7 @@
 <th
 	bind:this={ref}
 	class={cn(
-		"text-muted-foreground h-12 px-4 text-start align-middle font-medium [&:has([role=checkbox])]:pe-0",
+		"text-caption-medium text-muted-foreground h-9 px-4 text-start align-middle [&:has([role=checkbox])]:pe-0",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/table/table-row.svelte

@@ -19,7 +19,7 @@
 <tr
 	bind:this={ref}
 	class={cn(
-		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		"border-border hover:bg-accent data-[state=selected]:bg-brand-subtle border-b transition-colors duration-fast",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-list.svelte

@@ -16,7 +16,7 @@
 <TabsPrimitive.List
 	bind:ref
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		"bg-accent text-muted-foreground inline-flex h-9 items-center justify-center gap-0.5 rounded-xl p-1",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -16,7 +16,7 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-2xs",
+		"text-label focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground inline-flex h-7 items-center justify-center whitespace-nowrap rounded-lg px-3 transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:hover:bg-accent data-[state=inactive]:hover:text-foreground",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tag/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./tag.svelte";
+export { Root, Root as Tag };

package/dist/components/ui/tag/index.js

@@ -0,0 +1,2 @@
+import Root from "./tag.svelte";
+export { Root, Root as Tag };

package/dist/components/ui/tag/tag.svelte

@@ -0,0 +1,42 @@
+<!-- Figma: Tag (component set 170:116, node 170:116); radius/lg (8px). -->
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import IconX from "@tabler/icons-svelte/icons/x";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		label,
+		showRemove = false,
+		removeLabel = "Remove tag",
+		disabled = false,
+		onRemove = undefined,
+	}: HTMLAttributes<HTMLSpanElement> & {
+		label: string;
+		showRemove?: boolean;
+		removeLabel?: string;
+		disabled?: boolean;
+		onRemove?: () => void;
+	} = $props();
+</script>
+
+<span
+	class={cn(
+		"inline-flex h-6 max-w-full items-center gap-1 rounded-lg border border-border bg-background px-2 text-label-small text-foreground transition-colors duration-fast",
+		disabled ? "pointer-events-none opacity-50" : "hover:bg-accent",
+		className
+	)}
+>
+	<span class="truncate">{label}</span>
+	{#if showRemove && onRemove}
+		<button
+			type="button"
+			class="inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			aria-label={removeLabel}
+			{disabled}
+			onclick={onRemove}
+		>
+			<IconX class="size-4 stroke-[1.333]" aria-hidden="true" />
+		</button>
+	{/if}
+</span>

package/dist/components/ui/tag/tag.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    label: string;
+    showRemove?: boolean;
+    removeLabel?: string;
+    disabled?: boolean;
+    onRemove?: () => void;
+};
+declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/ui/textarea/textarea.svelte

@@ -1,11 +1,12 @@
+<!-- Figma: Textarea (component set 328:152, node 328:152). -->
 <script lang="ts" module>
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 
 	export type TextareaProps = WithoutChildren<WithElementRef<HTMLTextareaAttributes>>;
 </script>
 
 <script lang="ts">
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
-	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -19,7 +20,7 @@
 <textarea
 	bind:this={ref}
 	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex min-h-[5.5rem] w-full min-w-0 rounded-lg border border-input bg-background px-3 py-2 text-body text-foreground transition-colors duration-fast placeholder:text-muted-foreground hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive",
 		className
 	)}
 	bind:value

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -1,6 +1,6 @@
-export type TextareaProps = WithoutChildren<WithElementRef<HTMLTextareaAttributes>>;
-import type { WithElementRef, WithoutChildren } from "bits-ui";
 import type { HTMLTextareaAttributes } from "svelte/elements";
+import type { WithElementRef, WithoutChildren } from "bits-ui";
+export type TextareaProps = WithoutChildren<WithElementRef<HTMLTextareaAttributes>>;
 declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/components/ui/toggle/toggle.svelte

@@ -1,18 +1,18 @@
+<!-- Figma: Toolbar toggle pattern (brand-subtle when on). -->
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import type { VariantProps } from "tailwind-variants";
 
 	export const toggleVariants = tv({
-		base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "inline-flex items-center justify-center gap-2 rounded-lg text-label transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand-subtle data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] hover:bg-accent",
 		variants: {
 			variant: {
-				default: "bg-transparent",
-				outline:
-					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",
+				default: "bg-transparent text-foreground",
+				outline: "border border-input bg-background text-foreground hover:bg-accent",
 			},
 			size: {
-				default: "h-10 min-w-10 px-3",
-				sm: "h-9 min-w-9 px-2.5",
-				lg: "h-11 min-w-11 px-5",
+				default: "h-9 min-w-9 px-3",
+				sm: "h-8 min-w-8 px-2",
+				lg: "h-9 min-w-9 px-3",
 			},
 		},
 		defaultVariants: {
@@ -28,7 +28,7 @@
 
 <script lang="ts">
 	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, tv } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/toggle/toggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -9,15 +9,18 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
+}, undefined, "inline-flex items-center justify-center gap-2 rounded-lg text-label transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand-subtle data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] hover:bg-accent", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+        variant?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
     };
 }, {
     variant: {
@@ -29,16 +32,6 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}>, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -49,7 +42,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-2 rounded-lg text-label transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand-subtle data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] hover:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -24,7 +24,7 @@
 	{sideOffset}
 	dir={$textDirection}
 	class={cn(
-		"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		"bg-popover text-popover-foreground border-border text-caption animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-lg border px-3 py-1.5",
 		className
 	)}
 	{...restProps}

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) */
@@ -613,10 +609,11 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   /* Modal System */
+  /* The scrim of every overlay: the muted foreground token at 80%, set on the colour, with a 3px blur (Figma `Overlay/Scrim blur`) */
   .modal-overlay {
     @apply fixed inset-0 z-50;
-    backdrop-filter: blur(30px);
-    background-color: rgba(255, 255, 255, 0.5);
+    backdrop-filter: blur(3px);
+    background-color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
   }
 
   .modal-shadow {
@@ -990,11 +987,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;
-}