@usefidel/design-system 0.8.0 → 0.10.0

package/dist/admin.css

@@ -1,8 +1,8 @@
 /* GENERATED by @usefidel/design-system — do not edit. Surface: admin. */
 :root {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -20,6 +20,7 @@
   --color-primary-hover: #262626;
   --color-primary-text: #ffffff;
   --color-critical: #ef4444;
+  --color-destructive: #eb2d2d;
   --color-high: #f59e0b;
   --color-high-bg: #fffbeb;
   --color-high-text: #92400e;
@@ -55,6 +56,7 @@
   --radius-xl: 12px;
   --radius-2xl: 16px;
   --radius-3xl: 24px;
+  --radius-card: 14px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/extension.css

@@ -20,6 +20,7 @@
   --color-primary-hover: #1e293b;
   --color-primary-text: #ffffff;
   --color-critical: #ef4444;
+  --color-destructive: #eb2d2d;
   --color-high: #f59e0b;
   --color-high-bg: #fffbeb;
   --color-high-text: #92400e;
@@ -55,6 +56,7 @@
   --radius-xl: 12px;
   --radius-2xl: 16px;
   --radius-3xl: 24px;
+  --radius-card: 14px;
   --radius-pill: 20px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.8.0",
-  "resolvedSha": "1a2e0a8e9eade08e784d399b84e42bea85723137"
+  "packageVersion": "0.10.0",
+  "resolvedSha": "0d5b73828f4b82fe22b102a3e67c3d246963644a"
 }

package/dist/index.cjs

@@ -68,6 +68,7 @@ function MismatchCard({
   const [expanded, setExpanded] = (0, import_react.useState)(defaultExpanded);
   const canToggle = properties.length > collapsedCount;
   const visible = expanded || !canToggle ? properties : properties.slice(0, collapsedCount);
+  const hiddenCount = properties.length - collapsedCount;
   const classes = ["fds-mismatch-card", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: classes, ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "fds-mismatch-card__content", children: [
@@ -89,19 +90,22 @@ function MismatchCard({
         onClick: () => setExpanded((v) => !v),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Chevron, { direction: expanded ? "up" : "down" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : "Show more" })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : showMoreLabel(hiddenCount) })
         ]
       }
     )
   ] });
 }
+function showMoreLabel(hiddenCount) {
+  return `Show ${hiddenCount} more ${hiddenCount === 1 ? "mismatch" : "mismatches"}`;
+}
 function Chevron({ direction }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "svg",
     {
       className: `fds-mismatch-card__chevron fds-mismatch-card__chevron--${direction}`,
-      width: "20",
-      height: "20",
+      width: "18",
+      height: "18",
       viewBox: "0 0 20 20",
       fill: "none",
       "aria-hidden": "true",

package/dist/index.css

@@ -129,19 +129,16 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 14px;
+  align-items: flex-start;
+  gap: 10px;
   width: max-content;
-  max-width: 368px;
-  padding: var(--spacing-6);
-  background: rgba(255, 255, 255, 0.4);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 2px solid var(--color-accent);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 15px 35px 0 rgba(151, 151, 151, 0.2);
+  max-width: 300px;
+  padding: var(--spacing-4);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  box-shadow: 0 15px 35px 0 rgba(151, 151, 151, 0.12);
   font-family: var(--font-body);
-  overflow: clip;
 }
 .fds-mismatch-card *,
 .fds-mismatch-card *::before,
@@ -152,27 +149,24 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--spacing-5);
-  width: 320px;
+  gap: 10px;
+  width: 100%;
 }
 .fds-mismatch-card__title {
   margin: 0;
   width: 100%;
   font-family: var(--font-display);
   font-weight: var(--font-weight-semibold);
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: -0.0288px;
+  font-size: var(--font-size-text-sm);
+  line-height: 20px;
   color: var(--color-text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: break-word;
 }
 .fds-mismatch-card__rows {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--spacing-3);
+  gap: var(--spacing-2);
   width: 100%;
 }
 .fds-mismatch-card__row {
@@ -181,45 +175,48 @@
   align-items: flex-start;
   gap: var(--spacing-2);
   width: 100%;
-  border-bottom: 1px solid var(--color-border-strong);
+  padding-bottom: var(--spacing-1);
+  border-bottom: 1px solid #fafafa;
 }
 .fds-mismatch-card__label {
   width: 100%;
+  font-family: var(--font-mono);
   font-weight: var(--font-weight-medium);
-  font-size: 14px;
-  line-height: 22px;
+  font-size: var(--font-size-label-xs);
+  line-height: var(--line-height-label-xs);
+  letter-spacing: -0.24px;
   color: var(--color-text-secondary);
 }
 .fds-mismatch-card__values {
   display: flex;
-  justify-content: space-between;
+  gap: var(--spacing-8);
   width: 100%;
-  padding: var(--spacing-1) 0;
   font-weight: var(--font-weight-medium);
-  font-size: 14px;
-  line-height: 22px;
+  font-size: var(--font-size-text-xs);
+  line-height: var(--line-height-text-xs);
   white-space: nowrap;
 }
 .fds-mismatch-card__live {
-  color: var(--color-actual-text);
+  color: var(--color-destructive);
 }
 .fds-mismatch-card__design {
-  color: #262626;
+  color: var(--color-text);
 }
 .fds-mismatch-card__toggle {
   display: flex;
   align-items: center;
   gap: 2px;
-  width: 320px;
-  padding: var(--spacing-2) 0;
+  width: 100%;
+  padding: var(--spacing-1) 0;
   border: 0;
   background: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg);
   cursor: pointer;
   font-family: var(--font-display);
   font-weight: var(--font-weight-semibold);
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--font-size-text-xs);
+  line-height: var(--line-height-text-xs);
+  text-align: left;
   color: var(--color-text-secondary);
 }
 .fds-mismatch-card__chevron {

package/dist/index.d.cts

@@ -48,16 +48,23 @@ interface MismatchCardProps extends HTMLAttributes<HTMLDivElement> {
     defaultExpanded?: boolean;
 }
 /**
- * Fidel design-system MismatchCard — the card shown when hovering a
- * highlighted mismatch region on a validation screenshot.
+ * Fidel design-system MismatchCard — the mismatch inspector card shown when
+ * hovering a highlighted region on a validation screenshot.
+ *
+ * Built 1:1 from Figma node 3704:13475 (Fidel Library → Mismatch Inspector
+ * Card): a solid white card, 1px subtle border, monospace property labels, and
+ * a counted expand toggle.
  *
  * Presentational only: it knows nothing about the diff taxonomy. Callers map
  * their own data (e.g. a ValidationDiff) onto `title` + `properties`.
  *
+ * The numbered marker badge and pointer drawn alongside the card in Figma are
+ * deliberately NOT rendered here — they are positioned relative to the
+ * highlighted region on the screenshot, which only the caller knows about.
+ *
  * Framing is Live → Design (founder decision 2026-04-24): the left value is
  * what shipped (live), the right value is the design target. When there are
- * more than `collapsedCount` properties, a Show more / Show less toggle
- * reveals the rest.
+ * more than `collapsedCount` properties, a counted toggle reveals the rest.
  */
 declare function MismatchCard({ title, properties, collapsedCount, defaultExpanded, className, ...rest }: MismatchCardProps): react.JSX.Element;
 

package/dist/index.d.ts

@@ -48,16 +48,23 @@ interface MismatchCardProps extends HTMLAttributes<HTMLDivElement> {
     defaultExpanded?: boolean;
 }
 /**
- * Fidel design-system MismatchCard — the card shown when hovering a
- * highlighted mismatch region on a validation screenshot.
+ * Fidel design-system MismatchCard — the mismatch inspector card shown when
+ * hovering a highlighted region on a validation screenshot.
+ *
+ * Built 1:1 from Figma node 3704:13475 (Fidel Library → Mismatch Inspector
+ * Card): a solid white card, 1px subtle border, monospace property labels, and
+ * a counted expand toggle.
  *
  * Presentational only: it knows nothing about the diff taxonomy. Callers map
  * their own data (e.g. a ValidationDiff) onto `title` + `properties`.
  *
+ * The numbered marker badge and pointer drawn alongside the card in Figma are
+ * deliberately NOT rendered here — they are positioned relative to the
+ * highlighted region on the screenshot, which only the caller knows about.
+ *
  * Framing is Live → Design (founder decision 2026-04-24): the left value is
  * what shipped (live), the right value is the design target. When there are
- * more than `collapsedCount` properties, a Show more / Show less toggle
- * reveals the rest.
+ * more than `collapsedCount` properties, a counted toggle reveals the rest.
  */
 declare function MismatchCard({ title, properties, collapsedCount, defaultExpanded, className, ...rest }: MismatchCardProps): react.JSX.Element;
 

package/dist/index.js

@@ -37,6 +37,7 @@ function MismatchCard({
   const [expanded, setExpanded] = useState(defaultExpanded);
   const canToggle = properties.length > collapsedCount;
   const visible = expanded || !canToggle ? properties : properties.slice(0, collapsedCount);
+  const hiddenCount = properties.length - collapsedCount;
   const classes = ["fds-mismatch-card", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs2("div", { className: classes, ...rest, children: [
     /* @__PURE__ */ jsxs2("div", { className: "fds-mismatch-card__content", children: [
@@ -58,19 +59,22 @@ function MismatchCard({
         onClick: () => setExpanded((v) => !v),
         children: [
           /* @__PURE__ */ jsx2(Chevron, { direction: expanded ? "up" : "down" }),
-          /* @__PURE__ */ jsx2("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : "Show more" })
+          /* @__PURE__ */ jsx2("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : showMoreLabel(hiddenCount) })
         ]
       }
     )
   ] });
 }
+function showMoreLabel(hiddenCount) {
+  return `Show ${hiddenCount} more ${hiddenCount === 1 ? "mismatch" : "mismatches"}`;
+}
 function Chevron({ direction }) {
   return /* @__PURE__ */ jsx2(
     "svg",
     {
       className: `fds-mismatch-card__chevron fds-mismatch-card__chevron--${direction}`,
-      width: "20",
-      height: "20",
+      width: "18",
+      height: "18",
       viewBox: "0 0 20 20",
       fill: "none",
       "aria-hidden": "true",

package/dist/landing.css

@@ -1,8 +1,8 @@
 /* GENERATED by @usefidel/design-system — do not edit. Surface: landing. */
 :root {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -20,6 +20,7 @@
   --color-primary-hover: #262626;
   --color-primary-text: #ffffff;
   --color-critical: #ef4444;
+  --color-destructive: #eb2d2d;
   --color-high: #f59e0b;
   --color-high-bg: #fffbeb;
   --color-high-text: #92400e;
@@ -55,6 +56,7 @@
   --radius-xl: 12px;
   --radius-2xl: 16px;
   --radius-3xl: 24px;
+  --radius-card: 14px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/theme.css

@@ -3,8 +3,8 @@
    NOT a source of truth. Do not edit — regenerate from tokens/tokens.json. */
 @theme {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -22,6 +22,7 @@
   --color-primary-hover: #262626;
   --color-primary-text: #ffffff;
   --color-critical: #ef4444;
+  --color-destructive: #eb2d2d;
   --color-high: #f59e0b;
   --color-high-bg: #fffbeb;
   --color-high-text: #92400e;
@@ -57,6 +58,7 @@
   --radius-xl: 12px;
   --radius-2xl: 16px;
   --radius-3xl: 24px;
+  --radius-card: 14px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/dist/webapp.css

@@ -1,8 +1,8 @@
 /* GENERATED by @usefidel/design-system — do not edit. Surface: webapp. */
 :root {
   --color-bg: #ffffff;
-  --color-surface: #fff7ed;
-  --color-surface-hover: #ffedd5;
+  --color-surface: #f5f5f5;
+  --color-surface-hover: #ececec;
   --color-surface-raised: #ffffff;
   --color-text: #171717;
   --color-text-secondary: #525252;
@@ -20,6 +20,7 @@
   --color-primary-hover: #262626;
   --color-primary-text: #ffffff;
   --color-critical: #ef4444;
+  --color-destructive: #eb2d2d;
   --color-high: #f59e0b;
   --color-high-bg: #fffbeb;
   --color-high-text: #92400e;
@@ -55,6 +56,7 @@
   --radius-xl: 12px;
   --radius-2xl: 16px;
   --radius-3xl: 24px;
+  --radius-card: 14px;
   --radius-pill: 9999px;
   --radius-full: 9999px;
   --spacing-1: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.8.0",
+  "version": "0.10.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

@@ -5,7 +5,7 @@
       "$type": "color"
     },
     "surface": {
-      "$value": "#fff7ed",
+      "$value": "#f5f5f5",
       "$type": "color",
       "$extensions": {
         "fidel": {
@@ -17,7 +17,7 @@
       }
     },
     "surface-hover": {
-      "$value": "#ffedd5",
+      "$value": "#ececec",
       "$type": "color",
       "$extensions": {
         "fidel": {
@@ -152,6 +152,10 @@
       "$value": "#ef4444",
       "$type": "color"
     },
+    "destructive": {
+      "$value": "#eb2d2d",
+      "$type": "color"
+    },
     "high": {
       "$value": "#f59e0b",
       "$type": "color"
@@ -296,6 +300,10 @@
       "$value": "24px",
       "$type": "dimension"
     },
+    "card": {
+      "$value": "14px",
+      "$type": "dimension"
+    },
     "pill": {
       "$value": "9999px",
       "$type": "dimension",