@usefidel/design-system 0.10.0 → 0.11.1

package/dist/admin.css

@@ -7,6 +7,7 @@
   --color-text: #171717;
   --color-text-secondary: #525252;
   --color-text-muted: #a3a3a3;
+  --color-text-tertiary: #737373;
   --color-border: #e5e5e5;
   --color-border-light: #f5f5f5;
   --color-border-strong: #d4d4d4;
@@ -45,6 +46,8 @@
   --color-actual-text: #dc2626;
   --color-focus: #ea580c;
   --color-info: #1d4ed8;
+  --color-info-strong: #2563eb;
+  --color-info-surface: #eff6ff;
   --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;

package/dist/extension.css

@@ -7,6 +7,7 @@
   --color-text: #0f172a;
   --color-text-secondary: #475569;
   --color-text-muted: #a3a3a3;
+  --color-text-tertiary: #737373;
   --color-border: #e2e5ea;
   --color-border-light: #ebeff3;
   --color-border-strong: #d1d5db;
@@ -45,6 +46,8 @@
   --color-actual-text: #dc2626;
   --color-focus: #ea580c;
   --color-info: #1d4ed8;
+  --color-info-strong: #2563eb;
+  --color-info-surface: #eff6ff;
   --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;

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.10.0",
-  "resolvedSha": "0d5b73828f4b82fe22b102a3e67c3d246963644a"
+  "packageVersion": "0.11.1",
+  "resolvedSha": "7ee39a37df038135fa0e6a8271a6ce2ff0a91a95"
 }

package/dist/index.cjs

@@ -166,11 +166,13 @@ function DiffSection({
             onClick: () => setExpanded((v) => !v),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__head-left", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Chevron2, { open: expanded }),
                 number != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__number", children: number }),
                 name != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__name", children: name })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") })
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fds-diff-section__head-right", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HeaderChevron, { expanded })
+              ] })
             ]
           }
         ),
@@ -231,6 +233,7 @@ function ElementRow({
             children: lines
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__element-head", children: lines }),
+        element.sourceUrl != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewSource, { href: element.sourceUrl, label: element.sourceLabel ?? "View source" }),
         hasDetail && open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fds-diff-section__detail", children: element.detail })
       ]
     }
@@ -248,6 +251,47 @@ function DiffPropertyList({ properties, className, ...rest }) {
     line.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__trailing", children: line.trailing })
   ] }, `${line.property}-${li}`)) });
 }
+function ViewSource({ href, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "a",
+    {
+      className: "fds-diff-section__source",
+      href,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fds-diff-section__source-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M7.5 12.5 12.5 7.5M8 7.5h4.5V12",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) })
+      ]
+    }
+  );
+}
+function HeaderChevron({ expanded }) {
+  const classes = [
+    "fds-diff-section__header-chevron",
+    expanded && "fds-diff-section__header-chevron--expanded"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "path",
+    {
+      d: "M5 11 9 7l4 4",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function Chevron2({ open, className }) {
   const classes = [
     "fds-diff-section__chevron",

package/dist/index.css

@@ -292,6 +292,20 @@
   line-height: 22px;
   color: var(--color-text);
 }
+.fds-diff-section__head-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+}
+.fds-diff-section__header-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  transition: transform var(--duration-quick, 150ms) ease;
+}
+.fds-diff-section__header-chevron--expanded {
+  transform: rotate(180deg);
+}
 .fds-diff-section__count {
   font-weight: var(--font-weight-regular);
   font-size: 14px;
@@ -305,12 +319,13 @@
   gap: var(--spacing-3);
 }
 .fds-diff-section__element {
+  position: relative;
   display: flex;
   flex-direction: column;
   transition: background var(--duration-quick, 150ms) ease;
 }
 .fds-diff-section__element[data-highlighted=true] {
-  background: var(--color-accent-subtle, var(--color-surface-hover));
+  background: var(--color-surface-hover);
   box-shadow: inset 2px 0 0 var(--color-accent);
 }
 .fds-diff-section__element-head {
@@ -332,6 +347,10 @@
 .fds-diff-section__element-head--button:hover {
   background: var(--color-surface-hover);
 }
+.fds-diff-section__element[data-highlighted=true] .fds-diff-section__element-head--button:hover {
+  background: var(--color-border);
+  box-shadow: inset 2px 0 0 var(--color-accent);
+}
 .fds-diff-section__element-head-inner {
   display: flex;
   align-items: center;
@@ -352,15 +371,21 @@
   border-top: 1px solid var(--color-border-light);
 }
 .fds-diff-section__element-name {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px var(--spacing-1);
+  background: var(--color-info-surface);
+  border-radius: var(--radius-xs);
   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);
   color: var(--color-text);
 }
 .fds-diff-section__element-count {
   font-weight: var(--font-weight-regular);
-  font-size: 12px;
-  line-height: 18px;
+  font-size: var(--font-size-text-xs);
+  line-height: var(--line-height-text-xs);
   color: var(--color-text-secondary);
 }
 .fds-diff-section__lines {
@@ -378,9 +403,9 @@
 .fds-diff-section__prop {
   font-family: var(--font-mono);
   font-weight: var(--font-weight-regular);
-  font-size: 14px;
-  line-height: 22px;
-  letter-spacing: -0.28px;
+  font-size: var(--font-size-label-xs);
+  line-height: var(--line-height-label-xs);
+  letter-spacing: -0.24px;
   color: var(--color-text-secondary);
   white-space: nowrap;
 }
@@ -391,9 +416,9 @@
   margin-left: auto;
   font-family: var(--font-mono);
   font-weight: var(--font-weight-medium);
-  font-size: 14px;
-  line-height: 22px;
-  letter-spacing: -0.28px;
+  font-size: var(--font-size-label-xs);
+  line-height: var(--line-height-label-xs);
+  letter-spacing: -0.24px;
   white-space: nowrap;
 }
 .fds-diff-section__trailing {
@@ -404,14 +429,53 @@
   flex-shrink: 0;
 }
 .fds-diff-section__live {
-  color: #ef4444;
+  color: var(--color-text-tertiary);
+  text-decoration: line-through;
+  text-decoration-skip-ink: none;
 }
 .fds-diff-section__arrow {
   flex-shrink: 0;
   color: var(--color-text-muted);
 }
 .fds-diff-section__design {
-  color: #1e8902;
+  color: var(--color-info-strong);
+}
+.fds-diff-section__source {
+  position: absolute;
+  top: var(--spacing-6);
+  left: var(--spacing-6);
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-lg);
+  background: var(--color-text);
+  color: var(--color-primary-text);
+  font-family: var(--font-body);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-text-xs);
+  line-height: var(--line-height-text-xs);
+  text-decoration: none;
+  white-space: nowrap;
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--duration-quick, 150ms) ease, visibility var(--duration-quick, 150ms) ease;
+}
+.fds-diff-section__element:hover .fds-diff-section__source,
+.fds-diff-section__source:focus-visible {
+  opacity: 1;
+  visibility: visible;
+}
+.fds-diff-section__source:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-diff-section__source {
+    transition: none;
+  }
 }
 
 /* src/components/Select/select.css */

package/dist/index.d.cts

@@ -124,6 +124,15 @@ interface DiffElement {
      * annotation) without threading a ref through the component.
      */
     anchorId?: string;
+    /**
+     * Where this element came from — a repo permalink, a Storybook story, a
+     * Figma node. When set, a "View source" affordance appears on hover (and on
+     * keyboard focus) next to the element name. Omit it and no affordance
+     * renders at all: the DS never invents a destination it cannot know.
+     */
+    sourceUrl?: string;
+    /** Accessible label for the source link. @default "View source" */
+    sourceLabel?: string;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */

package/dist/index.d.ts

@@ -124,6 +124,15 @@ interface DiffElement {
      * annotation) without threading a ref through the component.
      */
     anchorId?: string;
+    /**
+     * Where this element came from — a repo permalink, a Storybook story, a
+     * Figma node. When set, a "View source" affordance appears on hover (and on
+     * keyboard focus) next to the element name. Omit it and no affordance
+     * renders at all: the DS never invents a destination it cannot know.
+     */
+    sourceUrl?: string;
+    /** Accessible label for the source link. @default "View source" */
+    sourceLabel?: string;
 }
 interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
     /** Ordinal shown before the name, e.g. "01". Omitted in `headerless` mode. */

package/dist/index.js

@@ -135,11 +135,13 @@ function DiffSection({
             onClick: () => setExpanded((v) => !v),
             children: [
               /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__head-left", children: [
-                /* @__PURE__ */ jsx3(Chevron2, { open: expanded }),
                 number != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__number", children: number }),
                 name != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__name", children: name })
               ] }),
-              /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") })
+              /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__head-right", children: [
+                /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") }),
+                /* @__PURE__ */ jsx3(HeaderChevron, { expanded })
+              ] })
             ]
           }
         ),
@@ -200,6 +202,7 @@ function ElementRow({
             children: lines
           }
         ) : /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__element-head", children: lines }),
+        element.sourceUrl != null && /* @__PURE__ */ jsx3(ViewSource, { href: element.sourceUrl, label: element.sourceLabel ?? "View source" }),
         hasDetail && open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__detail", children: element.detail })
       ]
     }
@@ -217,6 +220,47 @@ function DiffPropertyList({ properties, className, ...rest }) {
     line.trailing != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__trailing", children: line.trailing })
   ] }, `${line.property}-${li}`)) });
 }
+function ViewSource({ href, label }) {
+  return /* @__PURE__ */ jsxs3(
+    "a",
+    {
+      className: "fds-diff-section__source",
+      href,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__source-label", children: label }),
+        /* @__PURE__ */ jsx3("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M7.5 12.5 12.5 7.5M8 7.5h4.5V12",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) })
+      ]
+    }
+  );
+}
+function HeaderChevron({ expanded }) {
+  const classes = [
+    "fds-diff-section__header-chevron",
+    expanded && "fds-diff-section__header-chevron--expanded"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx3(
+    "path",
+    {
+      d: "M5 11 9 7l4 4",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function Chevron2({ open, className }) {
   const classes = [
     "fds-diff-section__chevron",

package/dist/landing.css

@@ -7,6 +7,7 @@
   --color-text: #171717;
   --color-text-secondary: #525252;
   --color-text-muted: #a3a3a3;
+  --color-text-tertiary: #737373;
   --color-border: #e5e5e5;
   --color-border-light: #f5f5f5;
   --color-border-strong: #d4d4d4;
@@ -45,6 +46,8 @@
   --color-actual-text: #dc2626;
   --color-focus: #ea580c;
   --color-info: #1d4ed8;
+  --color-info-strong: #2563eb;
+  --color-info-surface: #eff6ff;
   --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;

package/dist/theme.css

@@ -9,6 +9,7 @@
   --color-text: #171717;
   --color-text-secondary: #525252;
   --color-text-muted: #a3a3a3;
+  --color-text-tertiary: #737373;
   --color-border: #e5e5e5;
   --color-border-light: #f5f5f5;
   --color-border-strong: #d4d4d4;
@@ -47,6 +48,8 @@
   --color-actual-text: #dc2626;
   --color-focus: #ea580c;
   --color-info: #1d4ed8;
+  --color-info-strong: #2563eb;
+  --color-info-surface: #eff6ff;
   --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;

package/dist/webapp.css

@@ -7,6 +7,7 @@
   --color-text: #171717;
   --color-text-secondary: #525252;
   --color-text-muted: #a3a3a3;
+  --color-text-tertiary: #737373;
   --color-border: #e5e5e5;
   --color-border-light: #f5f5f5;
   --color-border-strong: #d4d4d4;
@@ -45,6 +46,8 @@
   --color-actual-text: #dc2626;
   --color-focus: #ea580c;
   --color-info: #1d4ed8;
+  --color-info-strong: #2563eb;
+  --color-info-surface: #eff6ff;
   --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;

package/package.json

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

@@ -60,6 +60,10 @@
       "$value": "#a3a3a3",
       "$type": "color"
     },
+    "text-tertiary": {
+      "$value": "#737373",
+      "$type": "color"
+    },
     "border": {
       "$value": "#e5e5e5",
       "$type": "color",
@@ -251,6 +255,14 @@
     "info": {
       "$value": "#1d4ed8",
       "$type": "color"
+    },
+    "info-strong": {
+      "$value": "#2563eb",
+      "$type": "color"
+    },
+    "info-surface": {
+      "$value": "#eff6ff",
+      "$type": "color"
     }
   },
   "font": {