@nexub/themes 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/themes",
-  "version": "1.0.0",
+  "version": "1.2.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,6 +36,7 @@
     "./founderub": "./src/founderub.css"
   },
   "dependencies": {
-    "@nexub/tokens": "1.0.0"
+    "@fontsource-variable/plus-jakarta-sans": "^5.3.0",
+    "@nexub/tokens": "1.2.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,49 @@
   --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);
+
+  /* scrim behind modal surfaces (Dialog, AlertDialog, Sheet/Drawer, CommandPalette) */
+  --color-overlay: rgb(0 0 0 / 0.5);
 
   /* accent fallback — used without any brand theme applied (PKG-B03) */
   --color-accent-500: var(--color-brand-primary-500);
@@ -100,6 +140,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;
@@ -189,3 +236,14 @@ code, kbd, pre, samp {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
 }
+
+/* ─── Drawer / Sheet (vaul 1.1.2) ─────────────────────────────────────────────
+   vaul's own styles. vaul normally injects these in a <style> tag when
+   @nexub/react loads, which strict CSP pages block; @nexub/react strips that
+   and ships them here instead. Verbatim copy: the @nexub/react build fails if
+   it no longer matches vaul. One rule is left out: vaul's invalid
+   `[data-vaul-handle-hitarea]:{…}` media rule, which browsers ignore and strict
+   CSS parsers (lightningcss, Turbopack) reject. */
+[data-vaul-drawer]{touch-action:none;will-change:transform;transition:transform .5s cubic-bezier(.32, .72, 0, 1);animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=open]{animation-name:slideFromBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=closed]{animation-name:slideToBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=open]{animation-name:slideFromTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=closed]{animation-name:slideToTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=open]{animation-name:slideFromLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=closed]{animation-name:slideToLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=open]{animation-name:slideFromRight}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=closed]{animation-name:slideToRight}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--initial-transform,100%),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--initial-transform,100%),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-overlay][data-vaul-snap-points=false]{animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-overlay][data-vaul-snap-points=false][data-state=open]{animation-name:fadeIn}[data-vaul-overlay][data-state=closed]{animation-name:fadeOut}[data-vaul-animate=false]{animation:none!important}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:0;transition:opacity .5s cubic-bezier(.32, .72, 0, 1)}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:1}[data-vaul-drawer]:not([data-vaul-custom-container=true])::after{content:'';position:absolute;background:inherit;background-color:inherit}[data-vaul-drawer][data-vaul-drawer-direction=top]::after{top:initial;bottom:100%;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after{top:100%;bottom:initial;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=left]::after{left:initial;right:100%;top:0;bottom:0;width:200%}[data-vaul-drawer][data-vaul-drawer-direction=right]::after{left:100%;right:initial;top:0;bottom:0;width:200%}[data-vaul-overlay][data-vaul-snap-points=true]:not([data-vaul-snap-points-overlay=true]):not(
+[data-state=closed]
+){opacity:0}[data-vaul-overlay][data-vaul-snap-points-overlay=true]{opacity:1}[data-vaul-handle]{display:block;position:relative;opacity:.7;background:#e2e2e4;margin-left:auto;margin-right:auto;height:5px;width:32px;border-radius:1rem;touch-action:pan-y}[data-vaul-handle]:active,[data-vaul-handle]:hover{opacity:1}[data-vaul-handle-hitarea]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,2.75rem);height:max(100%,2.75rem);touch-action:inherit}@media (hover:hover) and (pointer:fine){[data-vaul-drawer]{user-select:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes slideFromBottom{from{transform:translate3d(0,var(--initial-transform,100%),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToBottom{to{transform:translate3d(0,var(--initial-transform,100%),0)}}@keyframes slideFromTop{from{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToTop{to{transform:translate3d(0,calc(var(--initial-transform,100%) * -1),0)}}@keyframes slideFromLeft{from{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToLeft{to{transform:translate3d(calc(var(--initial-transform,100%) * -1),0,0)}}@keyframes slideFromRight{from{transform:translate3d(var(--initial-transform,100%),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToRight{to{transform:translate3d(var(--initial-transform,100%),0,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/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);
 }