@usefidel/design-system 0.19.0 → 0.20.0

package/dist/index.d.cts

@@ -14,9 +14,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     /** Size step. @default 'medium' */
     size?: ButtonSize;
-    /** Optional leading icon (rendered in a 20px slot). */
+    /** Optional leading icon (16px slot; 20px on `big`). */
     leftIcon?: ReactNode;
-    /** Optional trailing icon (rendered in a 20px slot). */
+    /** Optional trailing icon (16px slot; 20px on `big`). */
     rightIcon?: ReactNode;
 }
 /**
@@ -537,7 +537,7 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
     containerClassName?: string;
 }
 /**
- * Fidel design-system SearchInput: a 44px search field with a leading
+ * Fidel design-system SearchInput: a 36px search field with a leading
  * magnifier. Measured from Figma "✅Project" toolbar search (node 231:59687).
  */
 declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
@@ -767,7 +767,7 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     'aria-label': string;
     /** @default 'outlined' */
     variant?: IconButtonVariant;
-    /** 44px (`medium`, matches Button medium) or 28px (`small`). @default 'medium' */
+    /** 36px (`medium`, matches Button medium) or 28px (`small`). @default 'medium' */
     size?: IconButtonSize;
 }
 /**

package/dist/index.d.ts

@@ -14,9 +14,9 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     /** Size step. @default 'medium' */
     size?: ButtonSize;
-    /** Optional leading icon (rendered in a 20px slot). */
+    /** Optional leading icon (16px slot; 20px on `big`). */
     leftIcon?: ReactNode;
-    /** Optional trailing icon (rendered in a 20px slot). */
+    /** Optional trailing icon (16px slot; 20px on `big`). */
     rightIcon?: ReactNode;
 }
 /**
@@ -537,7 +537,7 @@ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, '
     containerClassName?: string;
 }
 /**
- * Fidel design-system SearchInput: a 44px search field with a leading
+ * Fidel design-system SearchInput: a 36px search field with a leading
  * magnifier. Measured from Figma "✅Project" toolbar search (node 231:59687).
  */
 declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
@@ -767,7 +767,7 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
     'aria-label': string;
     /** @default 'outlined' */
     variant?: IconButtonVariant;
-    /** 44px (`medium`, matches Button medium) or 28px (`small`). @default 'medium' */
+    /** 36px (`medium`, matches Button medium) or 28px (`small`). @default 'medium' */
     size?: IconButtonSize;
 }
 /**

package/dist/index.js

@@ -1178,7 +1178,7 @@ import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var SearchInput = forwardRef3(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
   const empty = value === void 0 || value === "";
   return /* @__PURE__ */ jsxs16("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs16("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs16("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx18("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
       /* @__PURE__ */ jsx18("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
     ] }),

package/dist/landing.css

@@ -48,9 +48,14 @@
   --color-info: #1d4ed8;
   --color-info-strong: #2563eb;
   --color-info-surface: #eff6ff;
+  --color-info-border: #bfdbfe;
   --color-text-on-neutral: #404040;
   --color-surface-subtle: #fafafa;
   --color-accent-pressed: #9a3412;
+  --color-primary-pressed: #000000;
+  --color-error-pressed: #7f1d1d;
+  --color-error-border-hover: #fca5a5;
+  --color-error-bg-pressed: #fee2e2;
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -75,6 +80,11 @@
   --spacing-10: 40px;
   --spacing-12: 48px;
   --spacing-16: 64px;
+  --size-control-xs: 28px;
+  --size-control-sm: 32px;
+  --size-control-md: 36px;
+  --size-control-lg: 44px;
+  --size-nav: 56px;
   --font-size-body: 14px;
   --font-size-display-2xl: 70px;
   --font-size-display-xl: 60px;
@@ -86,7 +96,9 @@
   --font-size-text-lg: 18px;
   --font-size-text-md: 16px;
   --font-size-text-sm: 14px;
+  --font-size-text-compact: 13px;
   --font-size-text-xs: 12px;
+  --font-size-text-2xs: 11px;
   --font-size-label-sm: 14px;
   --font-size-label-xs: 12px;
   --line-height-body: 1.6;
@@ -100,7 +112,9 @@
   --line-height-text-lg: 26px;
   --line-height-text-md: 24px;
   --line-height-text-sm: 22px;
+  --line-height-text-compact: 20px;
   --line-height-text-xs: 18px;
+  --line-height-text-2xs: 16px;
   --line-height-label-sm: 22px;
   --line-height-label-xs: 18px;
   --duration-instant: 80ms;

package/dist/theme.css

@@ -50,9 +50,14 @@
   --color-info: #1d4ed8;
   --color-info-strong: #2563eb;
   --color-info-surface: #eff6ff;
+  --color-info-border: #bfdbfe;
   --color-text-on-neutral: #404040;
   --color-surface-subtle: #fafafa;
   --color-accent-pressed: #9a3412;
+  --color-primary-pressed: #000000;
+  --color-error-pressed: #7f1d1d;
+  --color-error-border-hover: #fca5a5;
+  --color-error-bg-pressed: #fee2e2;
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -77,6 +82,11 @@
   --spacing-10: 40px;
   --spacing-12: 48px;
   --spacing-16: 64px;
+  --size-control-xs: 28px;
+  --size-control-sm: 32px;
+  --size-control-md: 36px;
+  --size-control-lg: 44px;
+  --size-nav: 56px;
   --font-size-body: 14px;
   --font-size-display-2xl: 70px;
   --font-size-display-xl: 60px;
@@ -88,7 +98,9 @@
   --font-size-text-lg: 18px;
   --font-size-text-md: 16px;
   --font-size-text-sm: 14px;
+  --font-size-text-compact: 13px;
   --font-size-text-xs: 12px;
+  --font-size-text-2xs: 11px;
   --font-size-label-sm: 14px;
   --font-size-label-xs: 12px;
   --line-height-body: 1.6;
@@ -102,7 +114,9 @@
   --line-height-text-lg: 26px;
   --line-height-text-md: 24px;
   --line-height-text-sm: 22px;
+  --line-height-text-compact: 20px;
   --line-height-text-xs: 18px;
+  --line-height-text-2xs: 16px;
   --line-height-label-sm: 22px;
   --line-height-label-xs: 18px;
   --duration-instant: 80ms;

package/dist/webapp.css

@@ -48,9 +48,14 @@
   --color-info: #1d4ed8;
   --color-info-strong: #2563eb;
   --color-info-surface: #eff6ff;
+  --color-info-border: #bfdbfe;
   --color-text-on-neutral: #404040;
   --color-surface-subtle: #fafafa;
   --color-accent-pressed: #9a3412;
+  --color-primary-pressed: #000000;
+  --color-error-pressed: #7f1d1d;
+  --color-error-border-hover: #fca5a5;
+  --color-error-bg-pressed: #fee2e2;
   --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
   --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
@@ -75,6 +80,11 @@
   --spacing-10: 40px;
   --spacing-12: 48px;
   --spacing-16: 64px;
+  --size-control-xs: 28px;
+  --size-control-sm: 32px;
+  --size-control-md: 36px;
+  --size-control-lg: 44px;
+  --size-nav: 56px;
   --font-size-body: 14px;
   --font-size-display-2xl: 70px;
   --font-size-display-xl: 60px;
@@ -86,7 +96,9 @@
   --font-size-text-lg: 18px;
   --font-size-text-md: 16px;
   --font-size-text-sm: 14px;
+  --font-size-text-compact: 13px;
   --font-size-text-xs: 12px;
+  --font-size-text-2xs: 11px;
   --font-size-label-sm: 14px;
   --font-size-label-xs: 12px;
   --line-height-body: 1.6;
@@ -100,7 +112,9 @@
   --line-height-text-lg: 26px;
   --line-height-text-md: 24px;
   --line-height-text-sm: 22px;
+  --line-height-text-compact: 20px;
   --line-height-text-xs: 18px;
+  --line-height-text-2xs: 16px;
   --line-height-label-sm: 22px;
   --line-height-label-xs: 18px;
   --duration-instant: 80ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
   "type": "module",
   "main": "./dist/index.cjs",

package/tokens/tokens.json

@@ -264,6 +264,10 @@
       "$value": "#eff6ff",
       "$type": "color"
     },
+    "info-border": {
+      "$value": "#bfdbfe",
+      "$type": "color"
+    },
     "text-on-neutral": {
       "$value": "#404040",
       "$type": "color"
@@ -275,6 +279,22 @@
     "accent-pressed": {
       "$value": "#9a3412",
       "$type": "color"
+    },
+    "primary-pressed": {
+      "$value": "#000000",
+      "$type": "color"
+    },
+    "error-pressed": {
+      "$value": "#7f1d1d",
+      "$type": "color"
+    },
+    "error-border-hover": {
+      "$value": "#fca5a5",
+      "$type": "color"
+    },
+    "error-bg-pressed": {
+      "$value": "#fee2e2",
+      "$type": "color"
     }
   },
   "font": {
@@ -387,6 +407,28 @@
       "$type": "dimension"
     }
   },
+  "size": {
+    "control-xs": {
+      "$value": "28px",
+      "$type": "dimension"
+    },
+    "control-sm": {
+      "$value": "32px",
+      "$type": "dimension"
+    },
+    "control-md": {
+      "$value": "36px",
+      "$type": "dimension"
+    },
+    "control-lg": {
+      "$value": "44px",
+      "$type": "dimension"
+    },
+    "nav": {
+      "$value": "56px",
+      "$type": "dimension"
+    }
+  },
   "fontSize": {
     "body": {
       "$value": "14px",
@@ -440,10 +482,18 @@
       "$value": "14px",
       "$type": "dimension"
     },
+    "text-compact": {
+      "$value": "13px",
+      "$type": "dimension"
+    },
     "text-xs": {
       "$value": "12px",
       "$type": "dimension"
     },
+    "text-2xs": {
+      "$value": "11px",
+      "$type": "dimension"
+    },
     "label-sm": {
       "$value": "14px",
       "$type": "dimension"
@@ -506,10 +556,18 @@
       "$value": "22px",
       "$type": "dimension"
     },
+    "text-compact": {
+      "$value": "20px",
+      "$type": "dimension"
+    },
     "text-xs": {
       "$value": "18px",
       "$type": "dimension"
     },
+    "text-2xs": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
     "label-sm": {
       "$value": "22px",
       "$type": "dimension"