@nexub/themes 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/themes",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "CSS theme files for Nexub Design System — light, dark, and brand themes (Leap, Bookub, Payub, Founderub) as importable CSS.",
   "license": "MIT",
   "homepage": "https://github.com/Nexub-AI/nexub-ds#readme",
@@ -36,9 +36,10 @@
     "./founderub": "./src/founderub.css"
   },
   "dependencies": {
-    "@nexub/tokens": "1.3.0"
+    "@nexub/tokens": "1.4.0"
   },
   "devDependencies": {
+    "@fontsource-variable/inter": "5.3.0",
     "@fontsource-variable/plus-jakarta-sans": "^5.3.0"
   },
   "scripts": {

package/src/base.css

@@ -9,6 +9,7 @@
    so `font-src 'self'` works (see scripts/build-fonts.mjs). */
 @import './fonts.css';
 @import '@nexub/tokens/css';
+@import '@nexub/tokens/css/roles';
 
 /* ─── Semantic shorthand aliases ───────────────────────────────────────────
    Components reference these shorter names. They proxy the full token names
@@ -48,7 +49,7 @@
 
   /* Form-control boundaries (WCAG 1.4.11 needs >= 3:1 against the page).
      Separate from --color-border-default, which cards/dividers keep light. */
-  --color-border-input: #848e9f;
+  --color-border-input: var(--color-outline);
 
   /* placeholder text (PKG-B01) */
   --color-text-placeholder: var(--color-text-muted);
@@ -60,26 +61,27 @@
   --color-text-warning: var(--color-semantic-warning-strong);
   --color-text-danger:  var(--color-semantic-error-strong);
 
-  /* Solid fills under white text. Fixed shades (they do NOT flip in dark mode)
-     chosen so white text is >= 4.5:1 (WCAG AA). Brand themes override accent. */
-  --color-fill-primary:         var(--color-brand-primary-600);
-  --color-fill-primary-hover:   var(--color-brand-primary-700);
-  --color-fill-info:            var(--color-brand-primary-600);
-  --color-fill-info-hover:      var(--color-brand-primary-700);
-  --color-fill-success:         #047857;
-  --color-fill-success-hover:   #065f46;
-  --color-fill-warning:         #b45309;
-  --color-fill-warning-hover:   #92400e;
-  --color-fill-danger:          #b91c1c;
-  --color-fill-danger-hover:    #991b1b;
-  --color-fill-leap:            var(--color-accent-leap-600);
-  --color-fill-leap-hover:      var(--color-accent-leap-700);
-  --color-fill-bookub:          var(--color-accent-bookub-700);
-  --color-fill-bookub-hover:    var(--color-accent-bookub-800);
-  --color-fill-payub:           var(--color-accent-payub-600);
-  --color-fill-payub-hover:     var(--color-accent-payub-700);
-  --color-fill-founderub:       var(--color-accent-founderub-700);
-  --color-fill-founderub-hover: var(--color-accent-founderub-800);
+  /* Solid fills under white text. Fixed palette tones (they do NOT flip in dark
+     mode): tone 40 vs white is >= 4.5:1 by HCT construction; hover = tone 30.
+     Brand themes override accent. Phase 2 moves components to on-* roles. */
+  --color-fill-primary:         var(--color-palette-primary-40);
+  --color-fill-primary-hover:   var(--color-palette-primary-30);
+  --color-fill-info:            var(--color-palette-info-40);
+  --color-fill-info-hover:      var(--color-palette-info-30);
+  --color-fill-success:         var(--color-palette-success-40);
+  --color-fill-success-hover:   var(--color-palette-success-30);
+  --color-fill-warning:         var(--color-palette-warning-40);
+  --color-fill-warning-hover:   var(--color-palette-warning-30);
+  --color-fill-danger:          var(--color-palette-error-40);
+  --color-fill-danger-hover:    var(--color-palette-error-30);
+  --color-fill-leap:            var(--color-palette-leap-40);
+  --color-fill-leap-hover:      var(--color-palette-leap-30);
+  --color-fill-bookub:          var(--color-palette-bookub-40);
+  --color-fill-bookub-hover:    var(--color-palette-bookub-30);
+  --color-fill-payub:           var(--color-palette-payub-40);
+  --color-fill-payub-hover:     var(--color-palette-payub-30);
+  --color-fill-founderub:       var(--color-palette-founderub-40);
+  --color-fill-founderub-hover: var(--color-palette-founderub-30);
   --color-fill-accent:          var(--color-fill-primary);
   --color-fill-accent-hover:    var(--color-fill-primary-hover);
 
@@ -139,11 +141,14 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-size-adjust: 100%;
+  /* never fake bold/italic; Inter's optical sizes follow font-size */
+  font-synthesis: none;
+  font-optical-sizing: auto;
 }
 
 /* Form controls don't inherit fonts by default — without this, apps that
    don't use Tailwind's preflight would render buttons/inputs in the system UI
-   font instead of Plus Jakarta Sans. */
+   font instead of Inter. */
 button, input, select, textarea, optgroup {
   font-family: inherit;
 }
@@ -154,19 +159,25 @@ body {
   background: var(--gradient-hero-ambient);
 }
 
-/* Focus ring */
+/* Focus ring: one ring for everything. The outline follows border-radius, so
+   it hugs capsules and fields. Contrast >= 3:1 on every surface (ring = primary). */
 :focus-visible {
-  outline: 2px solid var(--color-ring-default);
-  outline-offset: 3px;
-  box-shadow: var(--shadow-focus);
+  outline: 3px solid var(--color-ring-default);
+  outline-offset: 2px;
 }
 
-/* Headings */
+@media (forced-colors: active) {
+  :focus-visible { outline-color: Highlight; }
+}
+
+/* Headings: brand display face, balanced wrapping */
 h1, h2, h3, h4, h5, h6 {
   margin: 0;
+  font-family: var(--font-family-display);
   font-weight: var(--font-weight-bold);
   line-height: 1.2;
   color: var(--color-text-primary);
+  text-wrap: balance;
 }
 
 /* Paragraphs / lists */
@@ -174,11 +185,15 @@ p, ul, ol {
   margin: 0;
 }
 
+p {
+  text-wrap: pretty;
+}
+
 /* Links */
 a {
   color: var(--color-text-link);
   text-decoration: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: 0.3em;
 }
 
 a:hover {
@@ -199,7 +214,7 @@ code, kbd, pre, samp {
 
 /* Selection */
 ::selection {
-  background-color: color-mix(in srgb, var(--color-brand-primary-500) 20%, transparent);
+  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
   color: var(--color-text-primary);
 }
 
@@ -232,12 +247,54 @@ code, kbd, pre, samp {
   }
 }
 
+/* ─── State layer (Calm Depth §4.2) ──────────────────────────────────────────
+   An overlay of the element's own text color (its on-* role) at the
+   --state-* opacity, so hover/focus/press read correctly on any fill, theme,
+   brand or glass. The ::before paints above the background, below content. */
+.nx-state-layer { position: relative; isolation: isolate; }
+.nx-state-layer::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: currentColor;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing);
+}
+.nx-state-layer:hover::before { opacity: var(--state-hover); }
+.nx-state-layer:focus-visible::before { opacity: var(--state-focus); }
+.nx-state-layer:active::before { opacity: var(--state-pressed); }
+.nx-state-layer:is(:disabled, [aria-disabled='true'], [data-disabled])::before { opacity: 0; }
+
+/* Press feedback: a fast spatial spring, no ripple. */
+.nx-press {
+  transition: transform var(--motion-spring-spatial-fast-duration) var(--motion-spring-spatial-fast-easing);
+}
+.nx-press:active:not(:disabled, [aria-disabled='true'], [data-disabled]) { transform: scale(0.97); }
+
+/* ─── Density ────────────────────────────────────────────────────────────────
+   Compact shifts every control one step down the ladder (md 40 → 32). */
+[data-density='compact'] {
+  --size-control-xs: 20px;
+  --size-control-sm: 24px;
+  --size-control-md: 32px;
+  --size-control-lg: 40px;
+  --size-control-xl: 48px;
+}
+
 /* Logo-scroll marquee keyframe (used by LogoWall) */
 @keyframes logo-scroll {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
 }
 
+/* ─── App header (@nexub/patterns AppHeader) ─────────────────────────────────
+   One height for the fixed top header everywhere. Offset layouts with
+   var(--app-header-height); AppHeader's own spacer already does in flow. */
+:root { --app-header-height: 64px; }
+
 /* ─── Scroll lock (Sheet scrollLock="class") ─────────────────────────────────
    A CSP-safe page scroll lock: @nexub/react toggles these classes on <html>
    instead of injecting a <style> tag. The gutter class keeps the scrollbar's
@@ -245,6 +302,60 @@ code, kbd, pre, samp {
 html.nexub-scroll-lock { overflow: hidden; }
 html.nexub-scroll-lock.nexub-scroll-gutter { scrollbar-gutter: stable; }
 
+/* ─── Nexub mark gradient stops (<NexubMark variant="color">, <Logo>) ───────
+   Classes instead of style= attributes, which a strict CSP blocks in
+   server-rendered HTML. */
+/* nexub-mark-stops:start — generated by packages/brand/scripts/build-assets.mjs */
+.nxm-s-1{stop-color:var(--color-brand-mark-1)}
+.nxm-s-2{stop-color:var(--color-brand-mark-2)}
+.nxm-s-3{stop-color:var(--color-brand-mark-3)}
+.nxm-s-4{stop-color:var(--color-brand-mark-4)}
+.nxm-s-5{stop-color:var(--color-brand-mark-5)}
+.nxm-s-6{stop-color:var(--color-brand-mark-6)}
+.nxm-s-7{stop-color:var(--color-brand-mark-7)}
+.nxm-s-8{stop-color:var(--color-brand-mark-8)}
+.nxm-s-9{stop-color:var(--color-brand-mark-9)}
+.nxm-s-10{stop-color:var(--color-brand-mark-10)}
+.nxm-s-11{stop-color:var(--color-brand-mark-11)}
+.nxm-s-12{stop-color:var(--color-brand-mark-12)}
+.nxm-s-13{stop-color:var(--color-brand-mark-13)}
+.nxm-s-14{stop-color:var(--color-brand-mark-14)}
+.nxm-s-15{stop-color:var(--color-brand-mark-15)}
+.nxm-s-16{stop-color:var(--color-brand-mark-16)}
+.nxm-s-17{stop-color:var(--color-brand-mark-17)}
+.nxm-s-18{stop-color:var(--color-brand-mark-18)}
+.nxm-s-19{stop-color:var(--color-brand-mark-19)}
+.nxm-s-20{stop-color:var(--color-brand-mark-20)}
+.nxm-s-21{stop-color:var(--color-brand-mark-21)}
+.nxm-s-22{stop-color:var(--color-brand-mark-22)}
+.nxm-s-23{stop-color:var(--color-brand-mark-23)}
+.nxm-s-24{stop-color:var(--color-brand-mark-24)}
+.nxm-s-25{stop-color:var(--color-brand-mark-25)}
+.nxm-s-26{stop-color:var(--color-brand-mark-26)}
+.nxm-s-27{stop-color:var(--color-brand-mark-27)}
+.nxm-s-28{stop-color:var(--color-brand-mark-28)}
+.nxm-s-29{stop-color:var(--color-brand-mark-29)}
+.nxm-s-30{stop-color:var(--color-brand-mark-30)}
+.nxm-s-31{stop-color:var(--color-brand-mark-31)}
+.nxm-s-32{stop-color:var(--color-brand-mark-32)}
+.nxm-s-33{stop-color:var(--color-brand-mark-33)}
+.nxm-s-34{stop-color:var(--color-brand-mark-34)}
+.nxm-s-35{stop-color:var(--color-brand-mark-35)}
+.nxm-s-36{stop-color:var(--color-brand-mark-36)}
+.nxm-s-37{stop-color:var(--color-brand-mark-37)}
+.nxm-s-38{stop-color:var(--color-brand-mark-38)}
+.nxm-s-39{stop-color:var(--color-brand-mark-39)}
+.nxm-s-40{stop-color:var(--color-brand-mark-40)}
+.nxm-s-41{stop-color:var(--color-brand-mark-41)}
+.nxm-s-42{stop-color:var(--color-brand-mark-42)}
+.nxm-s-43{stop-color:var(--color-brand-mark-43)}
+.nxm-s-44{stop-color:var(--color-brand-mark-44)}
+.nxm-s-45{stop-color:var(--color-brand-mark-45)}
+.nxm-s-46{stop-color:var(--color-brand-mark-46)}
+.nxm-s-47{stop-color:var(--color-brand-mark-47)}
+.nxm-o-0{stop-opacity:0}
+/* nexub-mark-stops:end */
+
 /* ─── Radix ScrollArea / Select viewports ────────────────────────────────────
    Radix renders these rules in a <style> tag, which a strict CSP blocks. The
    same rules here keep the native scrollbar hidden either way. */

package/src/bookub.css

@@ -13,7 +13,7 @@
   --color-accent-800: var(--color-accent-bookub-800);
   --color-accent-900: var(--color-accent-bookub-900);
   --color-accent-950: var(--color-accent-bookub-950);
-  --color-ring-default: var(--color-accent-bookub-500);
+  --color-ring-default: var(--color-tertiary); /* generated per brand in roles.css; >= 3:1 on every surface */
   --color-fill-accent: var(--color-fill-bookub);
   --color-fill-accent-hover: var(--color-fill-bookub-hover);
 }

package/src/dark.css

@@ -1,122 +1,6 @@
 /* @nexub/themes — dark.css
-   Dark-mode semantic token overrides.
-   Apply via [data-theme='dark'] on an ancestor (typically <html>),
-   or automatically via prefers-color-scheme when no explicit theme is set. */
-
-[data-theme='dark'] {
-  /* ── Background ─────────────────────────────────────────────────────── */
-  --color-bg-default: #0b1220;
-  --color-bg-subtle:  #0f172a;
-  --color-bg-muted:   #1e293b;
-  --color-bg-raised:  #162032;
-  --color-bg-inverse: #f8fafc;
-
-  /* ── Text ────────────────────────────────────────────────────────────── */
-  --color-text-primary:   #f8fafc;
-  --color-text-secondary: #cbd5e1;
-  --color-text-muted:     #94a3b8;
-  --color-text-subtle:    #64748b;
-  --color-text-inverse:   #0f172a;
-  --color-text-link:      #60a5fa;
-  --color-text-disabled:  #475569;
-
-  /* ── Border ──────────────────────────────────────────────────────────── */
-  --color-border-default: #1e293b;
-  --color-border-subtle:  #162032;
-  --color-border-strong:  #334155;
-  --color-border-inverse: #cbd5e1;
-  --color-border-input:   #64748b;
-
-  /* ── Ring ────────────────────────────────────────────────────────────── */
-  --color-ring-default: #60a5fa;
-  --color-ring-offset:  #0b1220;
-
-  /* ── Surface ─────────────────────────────────────────────────────────── */
-  --color-surface-warm:    #1c1a0a;
-  --color-surface-muted:   #0f172a;
-  --color-surface-raised:  #162032;
-  --color-surface-sunken:  #080d19;
-  --color-surface-inverse: #f8fafc;
-
-  /* ── Hero gradient ───────────────────────────────────────────────────── */
-  --gradient-hero-ambient: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(64,153,241,0.08) 0%, transparent 60%), #0b1220;
-
-  /* ── Semantic success (dark) ─────────────────────────────────────────── */
-  --color-semantic-success-default: #34d399;
-  --color-semantic-success-bg:      rgba(52, 211, 153, 0.10);
-  --color-semantic-success-border:  rgba(52, 211, 153, 0.25);
-  --color-semantic-success-strong:  #6ee7b7;
-
-  /* ── Semantic error / danger (dark) ─────────────────────────────────── */
-  --color-semantic-error-default: #f87171;
-  --color-semantic-error-bg:      rgba(248, 113, 113, 0.10);
-  --color-semantic-error-border:  rgba(248, 113, 113, 0.25);
-  --color-semantic-error-strong:  #fca5a5;
-
-  /* ── Semantic warning (dark) ─────────────────────────────────────────── */
-  --color-semantic-warning-default: #fbbf24;
-  --color-semantic-warning-bg:      rgba(251, 191, 36, 0.10);
-  --color-semantic-warning-border:  rgba(251, 191, 36, 0.25);
-  --color-semantic-warning-strong:  #fcd34d;
-
-  /* ── Semantic info (dark) ────────────────────────────────────────────── */
-  --color-semantic-info-default: #60a5fa;
-  --color-semantic-info-bg:      rgba(96, 165, 250, 0.10);
-  --color-semantic-info-border:  rgba(96, 165, 250, 0.25);
-  --color-semantic-info-strong:  #93c5fd;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --color-bg-default: #0b1220;
-    --color-bg-subtle:  #0f172a;
-    --color-bg-muted:   #1e293b;
-    --color-bg-raised:  #162032;
-    --color-bg-inverse: #f8fafc;
-
-    --color-text-primary:   #f8fafc;
-    --color-text-secondary: #cbd5e1;
-    --color-text-muted:     #94a3b8;
-    --color-text-subtle:    #64748b;
-    --color-text-inverse:   #0f172a;
-    --color-text-link:      #60a5fa;
-    --color-text-disabled:  #475569;
-
-    --color-border-default: #1e293b;
-    --color-border-subtle:  #162032;
-    --color-border-strong:  #334155;
-    --color-border-inverse: #cbd5e1;
-    --color-border-input:   #64748b;
-
-    --color-ring-default: #60a5fa;
-    --color-ring-offset:  #0b1220;
-
-    --color-surface-warm:    #1c1a0a;
-    --color-surface-muted:   #0f172a;
-    --color-surface-raised:  #162032;
-    --color-surface-sunken:  #080d19;
-    --color-surface-inverse: #f8fafc;
-
-    --gradient-hero-ambient: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(64,153,241,0.08) 0%, transparent 60%), #0b1220;
-
-    --color-semantic-success-default: #34d399;
-    --color-semantic-success-bg:      rgba(52, 211, 153, 0.10);
-    --color-semantic-success-border:  rgba(52, 211, 153, 0.25);
-    --color-semantic-success-strong:  #6ee7b7;
-
-    --color-semantic-error-default: #f87171;
-    --color-semantic-error-bg:      rgba(248, 113, 113, 0.10);
-    --color-semantic-error-border:  rgba(248, 113, 113, 0.25);
-    --color-semantic-error-strong:  #fca5a5;
-
-    --color-semantic-warning-default: #fbbf24;
-    --color-semantic-warning-bg:      rgba(251, 191, 36, 0.10);
-    --color-semantic-warning-border:  rgba(251, 191, 36, 0.25);
-    --color-semantic-warning-strong:  #fcd34d;
-
-    --color-semantic-info-default: #60a5fa;
-    --color-semantic-info-bg:      rgba(96, 165, 250, 0.10);
-    --color-semantic-info-border:  rgba(96, 165, 250, 0.25);
-    --color-semantic-info-strong:  #93c5fd;
-  }
-}
+   Dark mode needs no separate values any more: every color is a light-dark()
+   role (@nexub/tokens/css/roles), and roles.css sets color-scheme: dark for
+   [data-theme='dark'] (any ancestor) or, with no data-theme, for
+   prefers-color-scheme: dark. This file stays importable for existing setups;
+   it is intentionally empty. */

package/src/fonts/LICENSE-inter

@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/fonts.css

@@ -1,9 +1,149 @@
 /* @nexub/themes — fonts.css. GENERATED by scripts/build-fonts.mjs, do not edit.
-   Plus Jakarta Sans (OFL-1.1, see fonts/LICENSE) from
-   @fontsource-variable/plus-jakarta-sans@5.3.0. Every file is over 8192 bytes so
+   Inter + Plus Jakarta Sans (OFL-1.1, see fonts/LICENSE-*) from
+   @fontsource-variable/inter@5.3.0, @fontsource-variable/plus-jakarta-sans@5.3.0. Every file is over 8192 bytes so
    bundlers emit it as a file instead of inlining a data: URL (strict-CSP safe).
    Left out: plus-jakarta-sans-cyrillic-ext-wght-normal.woff2, plus-jakarta-sans-cyrillic-ext-wght-italic.woff2. */
 
+/* inter-cyrillic-ext-opsz-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-cyrillic-ext-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-opsz-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-cyrillic-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* inter-greek-ext-opsz-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-greek-ext-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* inter-greek-opsz-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-greek-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-opsz-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-vietnamese-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* inter-latin-ext-opsz-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-latin-ext-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* inter-latin-opsz-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-latin-opsz-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* inter-cyrillic-ext-opsz-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-cyrillic-ext-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* inter-cyrillic-opsz-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-cyrillic-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* inter-greek-ext-opsz-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-greek-ext-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* inter-greek-opsz-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-greek-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* inter-vietnamese-opsz-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-vietnamese-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* inter-latin-ext-opsz-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-latin-ext-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* inter-latin-opsz-italic */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: italic;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(./fonts/inter-latin-opsz-italic.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
 /* plus-jakarta-sans-vietnamese-wght-normal */
 @font-face {
   font-family: 'Plus Jakarta Sans Variable';

package/src/founderub.css

@@ -13,7 +13,7 @@
   --color-accent-800: var(--color-accent-founderub-800);
   --color-accent-900: var(--color-accent-founderub-900);
   --color-accent-950: var(--color-accent-founderub-950);
-  --color-ring-default: var(--color-accent-founderub-500);
+  --color-ring-default: var(--color-tertiary); /* generated per brand in roles.css; >= 3:1 on every surface */
   --color-fill-accent: var(--color-fill-founderub);
   --color-fill-accent-hover: var(--color-fill-founderub-hover);
 }

package/src/glass.css

@@ -1,44 +1,107 @@
 /* @nexub/themes — glass.css
-   Liquid-glass MATERIAL layer. Orthogonal to light/dark: set data-material="glass"
-   on a surface (components do this via surface="glass") IN ADDITION to the normal
-   theme. Import once, after base/light/dark. Selectors mirror dark.css so the
-   dark palette resolves both for an explicit [data-theme='dark'] and for the
-   prefers-color-scheme auto case. */
+   Glass 2.0: a translucent MATERIAL for the floating control layer (bars,
+   toolbars, popovers, menus, sheets, dialogs). Orthogonal to light/dark: the
+   fill is the surface role (a light-dark() value), so dark glass needs no
+   separate rules. Components opt in with surface="glass", which sets
+   data-material="glass" and the glass utility classes (@nexub/react utils/glass).
 
+   Knobs, all optional, on the element or any ancestor:
+     data-glass="clear|balanced|tinted|off"  user intensity dial (ThemeProvider)
+     data-glass-thickness="thin|regular|thick"  size → blur + shadow (per component)
+     data-glass-variant="clear"   over media only: low fill, bright bold content
+     data-glass-tint="primary"    the one emphasised action
+     data-scroll-edge="soft|hard" sticky bars: fade content under the bar / opaque band
+   Import once, after base/light. */
+
+/* ── Intensity dial (user preference, like iOS 27's clear → tinted slider) ── */
+[data-glass='clear']    { --glass-dial: 0.35; }
+[data-glass='balanced'] { --glass-dial: 0.62; }
+[data-glass='tinted']   { --glass-dial: 0.85; }
+
+/* ── Recipe ─────────────────────────────────────────────────────────────────── */
 [data-material='glass'] {
-  --glass-bg:        rgba(255, 255, 255, 0.55);
-  --glass-border:    rgba(255, 255, 255, 0.35);
-  --glass-highlight: rgba(255, 255, 255, 0.65);
-  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.12);
-  --glass-blur:      16px;
-}
-
-/* glass-on-dark — explicit theme */
-[data-theme='dark'] [data-material='glass'],
-[data-theme='dark'][data-material='glass'] {
-  --glass-bg:        rgba(20, 20, 24, 0.55);
-  --glass-border:    rgba(255, 255, 255, 0.12);
-  --glass-highlight: rgba(255, 255, 255, 0.10);
-  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.45);
-}
-
-/* glass-on-dark — auto (no explicit theme + OS dark) */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) [data-material='glass'],
-  :root:not([data-theme])[data-material='glass'] {
-    --glass-bg:        rgba(20, 20, 24, 0.55);
-    --glass-border:    rgba(255, 255, 255, 0.12);
-    --glass-highlight: rgba(255, 255, 255, 0.10);
-    --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.45);
-  }
+  --glass-opacity: var(--glass-dial, 0.62);
+  --glass-tint: var(--color-surface);
+  --glass-blur: 16px;
+  --glass-saturate: 180%;
+  --glass-elevation: var(--elevation-2);
+
+  --glass-bg: color-mix(in oklch, var(--glass-tint) calc(var(--glass-opacity) * 100%), transparent);
+  /* Edge: a hairline plus a bright top specular and a faint bottom rim. */
+  --glass-border: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.12));
+  --glass-highlight: light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.14));
+  --glass-rim: light-dark(rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.04));
+  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  --glass-shadow: inset 0 1px 0 0 var(--glass-highlight), inset 0 -1px 0 0 var(--glass-rim), var(--glass-elevation);
+}
+
+/* Thickness scales with size, like Apple's material: more blur, deeper shadow. */
+[data-material='glass'][data-glass-thickness='thin'] {
+  --glass-blur: 8px;
+  --glass-saturate: 170%;
+  --glass-elevation: var(--elevation-1);
+}
+[data-material='glass'][data-glass-thickness='thick'] {
+  --glass-blur: 28px;
+  --glass-elevation: var(--elevation-3);
+}
+
+/* Tint: the single emphasised action. Kept near-opaque so on-primary text holds. */
+[data-material='glass'][data-glass-tint='primary'] {
+  --glass-tint: var(--color-primary);
+  --glass-opacity: max(var(--glass-dial, 0.62), 0.82);
+}
+
+/* Clear: over imagery/video only. A dim scrim instead of a surface fill. */
+[data-material='glass'][data-glass-variant='clear'] {
+  --glass-bg: rgb(0 0 0 / calc(var(--glass-dial, 0.62) * 0.4));
+  --glass-blur: 6px;
+  --glass-border: rgb(255 255 255 / 0.22);
+  --glass-highlight: rgb(255 255 255 / 0.3);
 }
 
-/* a11y: drop translucency + blur when the user opts out — fall back to the
-   solid surface tokens Card/Dialog/etc. already use. Load-bearing, not polish. */
-@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
-  [data-material='glass'] {
-    --glass-bg:     var(--color-bg-default);
-    --glass-border: var(--color-border-default);
-    --glass-blur:   0px;
+/* Scroll edge (sticky bars): soft = content dissolves under the bar; hard = opaque band. */
+[data-scroll-edge='soft'] {
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
+  border-bottom-color: transparent;
+}
+[data-material='glass'][data-scroll-edge='hard'] {
+  --glass-opacity: max(var(--glass-dial, 0.62), 0.9);
+}
+
+/* ── Solid fallbacks: load-bearing, not polish ──────────────────────────────── */
+/* Each fallback sets the fill itself (solid tint) and doubles the attribute so
+   it outranks the two-attribute variant rules above (clear, tint, hard edge). */
+[data-glass='off'] [data-material='glass'],
+[data-glass='off'][data-material='glass'] {
+  --glass-bg: var(--glass-tint);
+  --glass-filter: none;
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  [data-material='glass'][data-material='glass'] { --glass-opacity: 0.94; }
+}
+@media (prefers-reduced-transparency: reduce) {
+  [data-material='glass'][data-material='glass'] {
+    --glass-bg: var(--glass-tint);
+    --glass-filter: none;
+  }
+}
+@media (prefers-contrast: more) {
+  [data-material='glass'][data-material='glass'] {
+    --glass-bg: var(--glass-tint);
+    --glass-filter: none;
+    --glass-border: var(--color-outline);
+    outline: 2px solid var(--color-outline);
+    outline-offset: -2px;
+  }
+}
+@media (forced-colors: active) {
+  /* Through the vars: the component's utility classes outrank a plain
+     backdrop-filter declaration here. */
+  [data-material='glass'][data-material='glass'] {
+    --glass-bg: Canvas;
+    --glass-filter: none;
+    --glass-border: CanvasText;
   }
 }

package/src/leap.css

@@ -13,7 +13,7 @@
   --color-accent-800: var(--color-accent-leap-800);
   --color-accent-900: var(--color-accent-leap-900);
   --color-accent-950: var(--color-accent-leap-950);
-  --color-ring-default: var(--color-accent-leap-500);
+  --color-ring-default: var(--color-tertiary); /* generated per brand in roles.css; >= 3:1 on every surface */
   --color-fill-accent: var(--color-fill-leap);
   --color-fill-accent-hover: var(--color-fill-leap-hover);
 }

package/src/light.css

@@ -1,37 +1,63 @@
 /* @nexub/themes — light.css
-   Explicit light-mode semantic token assignments.
+   Legacy semantic names → Calm Depth color roles (@nexub/tokens/css/roles).
+   Roles are light-dark() values, so these aliases resolve per color-scheme:
+   light by default, dark under [data-theme='dark'] (or the OS when no
+   data-theme is set), at any depth. New code should use the role names
+   (--color-surface, --color-on-surface, …) directly.
    Import after base.css. */
 
-:root,
-[data-theme='light'] {
-  --color-bg-default: #ffffff;
-  --color-bg-subtle:  #f8fafc;
-  --color-bg-muted:   #f1f5f9;
-  --color-bg-raised:  #ffffff;
-  --color-bg-inverse: #0f172a;
-
-  --color-text-primary:   #0f172a;
-  --color-text-secondary: #334155;
-  --color-text-muted:     #64748b;
-  --color-text-subtle:    #94a3b8;
-  --color-text-inverse:   #f8fafc;
-  --color-text-link:      #2563eb;
-  --color-text-disabled:  #94a3b8;
-
-  --color-border-default: #e2e8f0;
-  --color-border-subtle:  #f1f5f9;
-  --color-border-strong:  #94a3b8;
-  --color-border-inverse: #334155;
-  --color-border-input:   #848e9f;
-
-  --color-ring-default: #4099f1;
-  --color-ring-offset:  #ffffff;
-
-  --color-surface-warm:    #fefce8;
-  --color-surface-muted:   #f8fafc;
-  --color-surface-raised:  #ffffff;
-  --color-surface-sunken:  #f1f5f9;
-  --color-surface-inverse: #0f172a;
-
-  --gradient-hero-ambient: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(64,153,241,0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(28,206,102,0.06) 0%, transparent 50%), #ffffff;
+:root {
+  --color-bg-default: var(--color-surface);
+  --color-bg-subtle:  var(--color-surface-container-low);
+  --color-bg-muted:   var(--color-surface-container-high);
+  --color-bg-raised:  var(--color-surface-elevated);
+  --color-bg-inverse: var(--color-inverse-surface);
+
+  --color-text-primary:   var(--color-on-surface);
+  --color-text-secondary: var(--color-on-surface-variant);
+  --color-text-muted:     var(--color-on-surface-muted);
+  --color-text-subtle:    var(--color-outline);
+  --color-text-inverse:   var(--color-inverse-on-surface);
+  --color-text-link:      var(--color-primary);
+  --color-text-disabled:  color-mix(in srgb, var(--color-on-surface) 38%, transparent);
+
+  --color-border-default: var(--color-outline-variant);
+  --color-border-subtle:  var(--color-surface-container-high);
+  --color-border-strong:  var(--color-outline);
+  --color-border-inverse: var(--color-inverse-on-surface);
+  /* Form-control boundaries: outline clears 3:1 (WCAG 1.4.11) on every surface. */
+  --color-border-input:   var(--color-outline);
+
+  --color-ring-default: var(--color-primary);
+  --color-ring-offset:  var(--color-surface);
+
+  --color-surface-warm:    light-dark(#fefce8, #1c1a0a);
+  --color-surface-muted:   var(--color-surface-container-low);
+  --color-surface-raised:  var(--color-surface-elevated);
+  --color-surface-sunken:  var(--color-surface-container-high);
+  --color-surface-inverse: var(--color-inverse-surface);
+
+  /* Semantic tones: default = the role, strong = text-safe on page and container,
+     bg = container, border = the role at 35%. */
+  --color-semantic-success-default: var(--color-success);
+  --color-semantic-success-strong:  var(--color-on-success-container);
+  --color-semantic-success-bg:      var(--color-success-container);
+  --color-semantic-success-border:  color-mix(in srgb, var(--color-success) 35%, transparent);
+
+  --color-semantic-error-default: var(--color-error);
+  --color-semantic-error-strong:  var(--color-on-error-container);
+  --color-semantic-error-bg:      var(--color-error-container);
+  --color-semantic-error-border:  color-mix(in srgb, var(--color-error) 35%, transparent);
+
+  --color-semantic-warning-default: var(--color-warning);
+  --color-semantic-warning-strong:  var(--color-on-warning-container);
+  --color-semantic-warning-bg:      var(--color-warning-container);
+  --color-semantic-warning-border:  color-mix(in srgb, var(--color-warning) 35%, transparent);
+
+  --color-semantic-info-default: var(--color-info);
+  --color-semantic-info-strong:  var(--color-on-info-container);
+  --color-semantic-info-bg:      var(--color-info-container);
+  --color-semantic-info-border:  color-mix(in srgb, var(--color-info) 35%, transparent);
+
+  --gradient-hero-ambient: radial-gradient(ellipse 80% 50% at 50% -20%, light-dark(rgb(64 153 241 / 0.12), rgb(64 153 241 / 0.08)) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, light-dark(rgb(28 206 102 / 0.06), transparent) 0%, transparent 50%), var(--color-surface);
 }

package/src/payub.css

@@ -13,7 +13,7 @@
   --color-accent-800: var(--color-accent-payub-800);
   --color-accent-900: var(--color-accent-payub-900);
   --color-accent-950: var(--color-accent-payub-950);
-  --color-ring-default: var(--color-accent-payub-500);
+  --color-ring-default: var(--color-tertiary); /* generated per brand in roles.css; >= 3:1 on every surface */
   --color-fill-accent: var(--color-fill-payub);
   --color-fill-accent-hover: var(--color-fill-payub-hover);
 }