@mirror-physics/fractal-ui 0.2.0-next.74 → 0.2.0-next.76

package/dist/tokens.css

@@ -139,7 +139,7 @@
 
   /* Navigation */
   --nav-surface: var(--grey-50);
-  --nav-border: var(--grey-200);
+  --nav-border: var(--border-on-surface-1);
   --nav-hover: var(--grey-100);
   --nav-selected: var(--grey-100);
 
@@ -153,8 +153,13 @@
   --fg-inverse-secondary: var(--grey-300);
 
   /* ---- Borders ---- */
-  --border-subtle: var(--grey-200);
-  --border-default: var(--grey-300);
+  /* Matched Oklab lightness step; calibrated to grey-200 on light canvas. */
+  --border-on-canvas: #E6E6E7;
+  --border-on-surface-1: #E2E2E2;
+  --border-on-surface-2: #CFCFD0;
+  --border-on-surface-3: #7D7D7F;
+  --border-subtle: var(--border-on-canvas);
+  --border-default: var(--border-subtle);
   --border-strong: var(--grey-400);
   --border-focus: var(--blue-500);
   --border-inverse: rgba(255, 255, 255, 0.12);
@@ -330,7 +335,7 @@
 
     /* Navigation */
     --nav-surface: var(--grey-700);
-    --nav-border: var(--grey-600);
+    --nav-border: var(--border-on-surface-1);
     --nav-hover: var(--grey-600);
     --nav-selected: var(--grey-500);
 
@@ -344,8 +349,13 @@
     --fg-inverse-secondary: var(--grey-600);
 
     /* ---- Borders ---- */
-    --border-subtle: var(--grey-700);
-    --border-default: var(--grey-600);
+    /* Matched Oklab lightness step; calibrated to grey-200 on light canvas. */
+    --border-on-canvas: #2D2D2F;
+    --border-on-surface-1: #3F3F41;
+    --border-on-surface-2: #535355;
+    --border-on-surface-3: #6A6A6D;
+    --border-subtle: var(--border-on-canvas);
+    --border-default: var(--border-subtle);
     --border-strong: var(--grey-500);
     --border-focus: var(--blue-400);
     --border-inverse: rgba(0, 0, 0, 0.12);
@@ -432,6 +442,29 @@
   }
 }
 
+/* Select the reference surface for a neutral boundary. This does not set a
+   background. Reset the scope at nested boundaries with a different pair. */
+[data-fractal-border-surface="canvas"] {
+  --border-subtle: var(--border-on-canvas);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+[data-fractal-border-surface="surface-1"] {
+  --border-subtle: var(--border-on-surface-1);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+[data-fractal-border-surface="surface-2"] {
+  --border-subtle: var(--border-on-surface-2);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+[data-fractal-border-surface="surface-3"] {
+  --border-subtle: var(--border-on-surface-3);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+
 /* =========================================
    Typography - Font Declarations & Tokens
    ========================================= */
@@ -625,6 +658,38 @@ body {
     --panel-width: 256px;
   }
 
+/* Shared single-line control geometry. See layout-guide.md. */
+:root {
+  --control-border-width: 1px;
+  --control-label-gap: var(--space-2);
+  --control-icon-gap: var(--space-2);
+  --control-xs-font-size: .75rem;
+  --control-xs-line-height: 1rem;
+  --control-xs-padding-block: var(--space-1);
+  --control-xs-padding-inline: var(--space-2);
+  --control-xs-icon-size: 1rem;
+  --control-sm-font-size: .75rem;
+  --control-sm-line-height: 1.25rem;
+  --control-sm-padding-block: var(--space-1);
+  --control-sm-padding-inline: var(--space-3);
+  --control-sm-icon-size: 1rem;
+  --control-md-font-size: .875rem;
+  --control-md-line-height: 1.25rem;
+  --control-md-padding-block: var(--space-2);
+  --control-md-padding-inline: var(--space-3);
+  --control-md-icon-size: 1.25rem;
+  --control-lg-font-size: .875rem;
+  --control-lg-line-height: 1.25rem;
+  --control-lg-padding-block: var(--space-3);
+  --control-lg-padding-inline: var(--space-4);
+  --control-lg-icon-size: 1.25rem;
+  --control-xl-font-size: .875rem;
+  --control-xl-line-height: 1.25rem;
+  --control-xl-padding-block: var(--space-4);
+  --control-xl-padding-inline: var(--space-5);
+  --control-xl-icon-size: 1.25rem;
+}
+
 /* =========================================
    Design System Motion Tokens
    =========================================

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mirror-physics/fractal-ui",
-  "version": "0.2.0-next.74",
-  "description": "Fractal UI — React components and CSS tokens for Mirror Physics products",
+  "version": "0.2.0-next.76",
+  "description": "Fractal UI \u2014 React components and CSS tokens for Mirror Physics products",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/language": "^6.12.4",
     "@codemirror/view": "^6.43.7",
     "@lezer/highlight": "^1.2.3",
-    "@mirror-physics/fractal-icons": "^0.4.0",
+    "@mirror-physics/fractal-icons": "^0.4.2",
     "@uiw/react-codemirror": "^4.25.11",
     "clsx": "^2.1.1"
   },