@mcp-b/design-tokens 0.41.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/design-tokens",
-  "version": "0.41.0",
+  "version": "0.43.0",
   "description": "Shared design tokens for MCP-B React applications.",
   "homepage": "https://mcp-b-design-system-storybook.alexmnahas.workers.dev",
   "bugs": {
@@ -30,6 +30,8 @@
     "./elevation.css": "./src/elevation.css",
     "./focus": "./src/focus.css",
     "./focus.css": "./src/focus.css",
+    "./layout": "./src/layout.css",
+    "./layout.css": "./src/layout.css",
     "./motion": "./src/motion.css",
     "./motion.css": "./src/motion.css",
     "./palettes": "./src/palettes.css",

package/src/index.css

@@ -4,6 +4,7 @@
 @import "./borders.css";
 @import "./focus.css";
 @import "./spacing.css";
+@import "./layout.css";
 @import "./motion.css";
 @import "./layers.css";
 @import "./elevation.css";

package/src/layout.css

@@ -0,0 +1,53 @@
+/*
+ * Application layout.
+ *
+ * Spacing.css is the 4px grid. This file names the layout decisions every
+ * application plane must share, so switching routes does not change how far
+ * content sits from chrome, how wide a sidebar is, or where a page column
+ * stops. A length that is only used once is not a layout token; it stays in
+ * the component.
+ *
+ * Container queries cannot read custom properties. The compact breakpoint
+ * literal in @container rules is 56rem and must stay in lockstep with
+ * --sigvelo-layout-break-compact.
+ */
+
+:root {
+  /* Inset of an application plane from its host, and of page content from
+     that plane. Codex and Claude both settle on 12px in the side panel. */
+  --sigvelo-layout-gutter: var(--sigvelo-spacing-3);
+
+  /* Gap between sibling regions in a shell (conversation | workbench). */
+  --sigvelo-layout-gap: var(--sigvelo-layout-gutter);
+
+  /* Vertical rhythm between stacked page sections. */
+  --sigvelo-layout-stack: var(--sigvelo-spacing-4);
+
+  /* Gap inside a wrap cluster: toolbars, action groups, compact lists. */
+  --sigvelo-layout-cluster: var(--sigvelo-spacing-2);
+
+  /* Default rail. Hosts may override --responsive-sidebar-shell-sidebar-size;
+     this is the fallback before that hook is set, and the documented default. */
+  --sigvelo-layout-sidebar: 16rem;
+
+  /* Conversation column. Sizing this side, not the workbench, keeps one
+     readable transcript at any window width. 24.5rem is 392px. */
+  --sigvelo-layout-conversation: 24.5rem;
+
+  /* Compact shell: one track, no inset plane. Used as documentation and by
+     script; @container conditions must repeat the 56rem literal. */
+  --sigvelo-layout-break-compact: 56rem;
+
+  /* The flexible track in every 1fr column or row. minmax(0, 1fr) is what
+     stops a grid item from overflowing its track. */
+  --sigvelo-layout-track-fill: minmax(0, 1fr);
+
+  /* Capped reading/work column for full-page lists and dossiers. 50rem is
+     Ploy's 800px list cap; wider panes stretch a name away from its status. */
+  --sigvelo-layout-content: 50rem;
+
+  /* Application chrome row, before safe-area insets. */
+  --sigvelo-layout-chrome: calc(
+    var(--sigvelo-density-compact-control-height) + var(--sigvelo-spacing-2)
+  );
+}

package/src/semantic-colors.css

@@ -296,3 +296,47 @@
   --sigvelo-color-danger-border-light: var(--sigvelo-color-danger-500);
   --sigvelo-color-danger-border-dark: var(--sigvelo-color-danger-600);
 }
+
+/*
+ * Interaction fills. Derived from the activated aliases so they follow system
+ * preference, data-theme, and data-preset without another light/dark map.
+ * Mix toward the on-fill text: that lightens a dark control and darkens a
+ * light one, instead of always mixing toward black.
+ */
+:root {
+  --sigvelo-color-primary-bg-hover: color-mix(
+    in oklab,
+    var(--sigvelo-color-primary-bg),
+    var(--sigvelo-color-primary-text-on-bg) 10%
+  );
+  --sigvelo-color-primary-bg-press: color-mix(
+    in oklab,
+    var(--sigvelo-color-primary-bg),
+    var(--sigvelo-color-primary-text-on-bg) 16%
+  );
+  --sigvelo-color-neutral-bg-hover: color-mix(
+    in oklab,
+    var(--sigvelo-color-neutral-bg-subtle),
+    var(--sigvelo-color-neutral-text-on-subtle) 10%
+  );
+  --sigvelo-color-neutral-bg-press: color-mix(
+    in oklab,
+    var(--sigvelo-color-neutral-bg-subtle),
+    var(--sigvelo-color-neutral-text-on-subtle) 16%
+  );
+  --sigvelo-color-danger-bg-hover: color-mix(
+    in oklab,
+    var(--sigvelo-color-danger-bg),
+    var(--sigvelo-color-danger-text-on-bg) 10%
+  );
+  --sigvelo-color-danger-bg-press: color-mix(
+    in oklab,
+    var(--sigvelo-color-danger-bg),
+    var(--sigvelo-color-danger-text-on-bg) 16%
+  );
+  --sigvelo-color-neutral-bg-selected: color-mix(
+    in oklab,
+    var(--sigvelo-color-neutral-bg-subtle),
+    var(--sigvelo-color-neutral-text-on-subtle) 14%
+  );
+}

package/src/typography.css

@@ -108,6 +108,18 @@
   /* Code, tables, and diagrams read worse when wrapped than when wide. */
   --sigvelo-measure-wide-block: 100ch;
 
+  /*
+   * Reading roles. Body text is one size across chat, markdown, activity, and
+   * workspace. Activity stays that size and fades (Codex conversation-body);
+   * headings and metadata are the only size exceptions.
+   */
+  --sigvelo-text-prose: var(--sigvelo-text-sm);
+  --sigvelo-text-prose-leading: var(--sigvelo-text-sm-leading);
+  --sigvelo-text-code: var(--sigvelo-text-prose);
+  --sigvelo-text-code-leading: var(--sigvelo-text-prose-leading);
+  --sigvelo-text-meta: var(--sigvelo-text-xs);
+  --sigvelo-text-meta-leading: var(--sigvelo-text-xs-leading);
+
   /*
    * Reader text scale. Applied by .sigvelo-reader-text to prose only, never to
    * chrome: a reader who wants larger message text is not asking for taller