@proteos/ui 0.38.0 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -55,7 +55,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
-    "@proteos/sdk": "0.38.0"
+    "@proteos/sdk": "0.39.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",

package/src/styles.css

@@ -25,28 +25,31 @@
   /* Base — the page/chrome background the app shell paints. The majority
      surface: pages, panels, headers, toolbars, tables, ghost buttons.
      Split from --color-surface so themes can lift raised blocks off it;
-     in paper the two are identical. */
-  --color-bg: #f2f0ea;
+     in paper the two are identical.
+
+     These base values are the LIGHT theme — light is the default, i.e. the
+     absence of data-theme (see the theme-mode blocks below). */
+  --color-bg: #fbfbfc;
 
   /* Surfaces — raised blocks that sit ON the base: cards, popovers, modals,
      inputs. surface-2/-3 are the recessed tint steps (hovers, read-only
-     boxes, chips, table-header fill), stepped darker in paper. */
-  --color-surface: #f2f0ea;
-  --color-surface-2: #e7e4db;
-  --color-surface-3: #dcd8cc;
+     boxes, chips, table-header fill). */
+  --color-surface: #ffffff;
+  --color-surface-2: #f0f0f2;
+  --color-surface-3: #e5e5e9;
 
   /* Ink — indigo-tinted slate */
   --color-ink: #1a1d2b;
-  --color-ink-2: #353a4b;
-  --color-ink-3: #686c7a;
-  --color-ink-4: #9a9ca6;
+  --color-ink-2: #383d4e;
+  --color-ink-3: #63677a;
+  --color-ink-4: #7e818f;
 
   /* Hairlines. rule-strong marks interactive-control borders (inputs,
-     ghost buttons, segmented tracks) — equal to rule in paper, darker in
-     the light/dark themes so touchable chrome pops. */
-  --color-rule: #cfcbbd;
-  --color-rule-2: #dbd7c9;
-  --color-rule-strong: #cfcbbd;
+     ghost buttons, segmented tracks) — darker than rule in light/dark so
+     touchable chrome pops; equal to rule in paper. */
+  --color-rule: #d7d7dc;
+  --color-rule-2: #e6e6ea;
+  --color-rule-strong: #b0b1ba;
 
   /* Accent — deep indigo */
   --color-accent: #2f3a66;
@@ -90,17 +93,15 @@
   --radius-xl: 18px;
   --radius-pill: 999px;
 
-  /* Shadows — warm, low-key */
-  --shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
-    0 1px 2px rgba(26, 29, 43, 0.05);
-  --shadow-rest: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
-    0 4px 10px -4px rgba(26, 29, 43, 0.1), 0 1px 2px rgba(26, 29, 43, 0.05);
-  --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
-    0 14px 30px -14px rgba(26, 29, 43, 0.18),
-    0 2px 4px rgba(26, 29, 43, 0.05);
-  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
-    0 30px 60px -30px rgba(26, 29, 43, 0.28),
-    0 2px 6px rgba(26, 29, 43, 0.06);
+  /* Shadows — cool, crisp. No white top-inset highlight: it's invisible on
+     white surfaces (paper re-adds it in its override block). */
+  --shadow-inset: 0 1px 2px rgba(23, 25, 45, 0.05);
+  --shadow-rest: 0 1px 2px rgba(23, 25, 45, 0.05),
+    0 3px 10px -3px rgba(23, 25, 45, 0.07);
+  --shadow-raised: 0 2px 4px rgba(23, 25, 45, 0.05),
+    0 12px 28px -10px rgba(23, 25, 45, 0.14);
+  --shadow-float: 0 4px 10px rgba(23, 25, 45, 0.06),
+    0 28px 60px -20px rgba(23, 25, 45, 0.22);
   --shadow-focus: 0 0 0 4px color-mix(in oklab, var(--color-accent) 22%, transparent);
   --shadow-focus-danger: 0 0 0 4px
     color-mix(in oklab, var(--color-danger) 18%, transparent);
@@ -165,54 +166,67 @@
 
   /* Table zebra-stripe + row-hover strength — the % of ink mixed into the
      page bg per row (see Table). Per-theme so each mode tunes independently:
-     near-white bases show a given delta more, so light dials down. Paper 3%
-     matches the pre-theme stripe tone. */
-  --row-stripe: 3%;
-  --row-hover: 6%;
+     near-white bases show a given delta more, so light (the default here)
+     dials down; paper lifts back to 3%. */
+  --row-stripe: 2%;
+  --row-hover: 4%;
 
   color-scheme: light;
 }
 
 /* ==========================================================
-   Theme modes — paper (default, tokens above) · light · dark.
+   Theme modes — light (default, tokens above) · paper · dark.
    Switched via data-theme on <html> (see clients/web lib/theme.ts).
+   Light = the ABSENCE of the attribute, so anything rendering these
+   tokens without the pre-paint script (iframes, public pages, Storybook)
+   lands on light.
    Plain unlayered blocks: they beat Tailwind's @layer theme :root
    declarations, and [data-theme] beats :root on specificity. Tailwind
    utilities resolve var(--color-*) / var(--shadow-*) at use-time, so
    redefining the custom properties re-skins every component.
    ========================================================== */
 
-/* Light — white surfaces lifted off a cool-gray base. */
+/* Light — same tokens as the base above. The attribute is never written for
+   light (setTheme removes it), but a stale stored value or a module bundle
+   may still set it, so it must resolve to the light ramp rather than dark. */
 :root[data-theme='light'] {
-  --color-bg: #fbfbfc;
-  --color-surface: #ffffff;
-  --color-surface-2: #f0f0f2;
-  --color-surface-3: #e5e5e9;
+  color-scheme: light;
+}
+
+/* Paper — warm sand surfaces, the original Proteos skin. Opt-in. */
+:root[data-theme='paper'] {
+  --color-bg: #f2f0ea;
+  --color-surface: #f2f0ea;
+  --color-surface-2: #e7e4db;
+  --color-surface-3: #dcd8cc;
 
   --color-ink: #1a1d2b;
-  --color-ink-2: #383d4e;
-  --color-ink-3: #63677a;
-  --color-ink-4: #7e818f;
+  --color-ink-2: #353a4b;
+  --color-ink-3: #686c7a;
+  --color-ink-4: #9a9ca6;
 
-  --color-rule: #d7d7dc;
-  --color-rule-2: #e6e6ea;
-  --color-rule-strong: #b0b1ba;
+  /* rule-strong equals rule here — the warm hairline already reads. */
+  --color-rule: #cfcbbd;
+  --color-rule-2: #dbd7c9;
+  --color-rule-strong: #cfcbbd;
 
-  /* Softer stripes — the near-white base makes any delta read stronger. */
-  --row-stripe: 2%;
-  --row-hover: 4%;
+  /* Stronger stripes — the sand base swallows a delta the white one shows. */
+  --row-stripe: 3%;
+  --row-hover: 6%;
 
-  /* Accent, semantics, indigo ramp, tiles — unchanged from paper. */
+  /* Accent, semantics, indigo ramp, tiles — unchanged from light. */
 
-  /* Cooler, crisper shadows; the white top-inset highlight from paper is
-     dropped — invisible on white surfaces. */
-  --shadow-inset: 0 1px 2px rgba(23, 25, 45, 0.05);
-  --shadow-rest: 0 1px 2px rgba(23, 25, 45, 0.05),
-    0 3px 10px -3px rgba(23, 25, 45, 0.07);
-  --shadow-raised: 0 2px 4px rgba(23, 25, 45, 0.05),
-    0 12px 28px -10px rgba(23, 25, 45, 0.14);
-  --shadow-float: 0 4px 10px rgba(23, 25, 45, 0.06),
-    0 28px 60px -20px rgba(23, 25, 45, 0.22);
+  /* Warm, low-key shadows with a white top-inset highlight. */
+  --shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
+    0 1px 2px rgba(26, 29, 43, 0.05);
+  --shadow-rest: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
+    0 4px 10px -4px rgba(26, 29, 43, 0.1), 0 1px 2px rgba(26, 29, 43, 0.05);
+  --shadow-raised: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
+    0 14px 30px -14px rgba(26, 29, 43, 0.18),
+    0 2px 4px rgba(26, 29, 43, 0.05);
+  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
+    0 30px 60px -30px rgba(26, 29, 43, 0.28),
+    0 2px 6px rgba(26, 29, 43, 0.06);
 }
 
 /* Dark — parallel ramp, not an inversion. Accent lifts to a lighter
@@ -276,9 +290,13 @@
     color-mix(in oklab, var(--color-danger) 28%, transparent);
 }
 
-/* Paper grain — faint dotted multiply overlay, identical to the design system spec.
-   Applied as a fixed decorative layer above content but below interactive chrome. */
-.proteos-grain::before {
+/* Paper grain — faint dotted multiply overlay, identical to the design system
+   spec. A fixed decorative layer above content but below interactive chrome.
+   Paper-mode signature ONLY: on white it reads as dirt, and the multiply dots
+   vanish or muddy on dark — so it is gated on the attribute (absent = light =
+   no grain). `.proteos-grain-dots` gates inline-styled dot overlays
+   (page-designer canvas) the same way. */
+:root[data-theme='paper'] .proteos-grain::before {
   content: "";
   position: fixed;
   inset: 0;
@@ -293,18 +311,14 @@
   background-position: 0 0, 1px 2px;
 }
 
-/* Grain is a paper-mode signature only. On white it reads as dirt; the
-   multiply dots vanish or muddy on dark. Absent attribute = paper.
-   `.proteos-grain-dots` gates inline-styled dot overlays (page-designer
-   canvas) the same way. */
-:root[data-theme='light'] .proteos-grain::before,
-:root[data-theme='dark'] .proteos-grain::before {
-  content: none;
+/* Hidden everywhere but paper (the canvas overlay is a plain <div>, so the
+   paper state is `block`). */
+.proteos-grain-dots {
+  display: none;
 }
 
-:root[data-theme='light'] .proteos-grain-dots,
-:root[data-theme='dark'] .proteos-grain-dots {
-  display: none;
+:root[data-theme='paper'] .proteos-grain-dots {
+  display: block;
 }
 
 /* DEPRECATED aliases for module components built before the surface rename