@nexub/themes 0.0.2 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/themes",
-  "version": "0.0.2",
+  "version": "1.1.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",
@@ -29,12 +29,14 @@
     "./base": "./src/base.css",
     "./light": "./src/light.css",
     "./dark": "./src/dark.css",
+    "./glass": "./src/glass.css",
     "./leap": "./src/leap.css",
     "./bookub": "./src/bookub.css",
     "./payub": "./src/payub.css",
     "./founderub": "./src/founderub.css"
   },
   "dependencies": {
-    "@nexub/tokens": "0.0.2"
+    "@fontsource-variable/plus-jakarta-sans": "^5.3.0",
+    "@nexub/tokens": "1.1.0"
   }
 }

package/src/base.css

@@ -2,6 +2,11 @@
    Global resets, focus ring, body, scrollbar, reduced-motion.
    Import this once at the root of your app before light.css or dark.css. */
 
+/* Plus Jakarta Sans — the Nexub DS typeface. Self-hosted (OFL-1.1) via
+   Fontsource; variable weights 200–800, normal + italic. Subsets load on
+   demand via unicode-range, so only the glyphs a page uses are fetched. */
+@import '@fontsource-variable/plus-jakarta-sans/wght.css';
+@import '@fontsource-variable/plus-jakarta-sans/wght-italic.css';
 @import '@nexub/tokens/css';
 
 /* ─── Semantic shorthand aliases ───────────────────────────────────────────
@@ -36,14 +41,46 @@
   --color-info-bg:        var(--color-semantic-info-bg);
   --color-info-border:    var(--color-semantic-info-border);
 
+  /* Focus ring follows the theme's ring tokens (the tokens default is a fixed
+     white/blue pair, wrong in dark mode and brand themes). */
+  --shadow-focus: 0 0 0 2px var(--color-ring-offset), 0 0 0 4px var(--color-ring-default);
+
+  /* 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;
+
   /* placeholder text (PKG-B01) */
-  --color-text-placeholder: var(--color-text-subtle);
+  --color-text-placeholder: var(--color-text-muted);
 
   /* tone text aliases — used by Heading tone prop + HelperText (PKG-H01) */
-  --color-text-info:    var(--color-semantic-info-default);
-  --color-text-success: var(--color-semantic-success-default);
-  --color-text-warning: var(--color-semantic-warning-default);
-  --color-text-danger:  var(--color-semantic-error-default);
+  /* -strong passes WCAG AA as text in both light (dark shade) and dark (light shade). */
+  --color-text-info:    var(--color-semantic-info-strong);
+  --color-text-success: var(--color-semantic-success-strong);
+  --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);
+  --color-fill-accent:          var(--color-fill-primary);
+  --color-fill-accent-hover:    var(--color-fill-primary-hover);
 
   /* accent fallback — used without any brand theme applied (PKG-B03) */
   --color-accent-500: var(--color-brand-primary-500);
@@ -100,6 +137,13 @@ html {
   text-size-adjust: 100%;
 }
 
+/* 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. */
+button, input, select, textarea, optgroup {
+  font-family: inherit;
+}
+
 body {
   min-height: 100vh;
   margin: 0;

package/src/bookub.css

@@ -14,4 +14,6 @@
   --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-fill-accent: var(--color-fill-bookub);
+  --color-fill-accent-hover: var(--color-fill-bookub-hover);
 }

package/src/dark.css

@@ -3,8 +3,7 @@
    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'],
-:root:not([data-theme]) {
+[data-theme='dark'] {
   /* ── Background ─────────────────────────────────────────────────────── */
   --color-bg-default: #0b1220;
   --color-bg-subtle:  #0f172a;
@@ -26,6 +25,7 @@
   --color-border-subtle:  #162032;
   --color-border-strong:  #334155;
   --color-border-inverse: #cbd5e1;
+  --color-border-input:   #64748b;
 
   /* ── Ring ────────────────────────────────────────────────────────────── */
   --color-ring-default: #60a5fa;
@@ -86,6 +86,7 @@
     --color-border-subtle:  #162032;
     --color-border-strong:  #334155;
     --color-border-inverse: #cbd5e1;
+    --color-border-input:   #64748b;
 
     --color-ring-default: #60a5fa;
     --color-ring-offset:  #0b1220;

package/src/founderub.css

@@ -14,4 +14,6 @@
   --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-fill-accent: var(--color-fill-founderub);
+  --color-fill-accent-hover: var(--color-fill-founderub-hover);
 }

package/src/glass.css

@@ -0,0 +1,44 @@
+/* @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. */
+
+[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);
+  }
+}
+
+/* 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;
+  }
+}

package/src/leap.css

@@ -14,4 +14,6 @@
   --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-fill-accent: var(--color-fill-leap);
+  --color-fill-accent-hover: var(--color-fill-leap-hover);
 }

package/src/light.css

@@ -22,6 +22,7 @@
   --color-border-subtle:  #f1f5f9;
   --color-border-strong:  #94a3b8;
   --color-border-inverse: #334155;
+  --color-border-input:   #848e9f;
 
   --color-ring-default: #4099f1;
   --color-ring-offset:  #ffffff;

package/src/payub.css

@@ -14,4 +14,6 @@
   --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-fill-accent: var(--color-fill-payub);
+  --color-fill-accent-hover: var(--color-fill-payub-hover);
 }