@webority/theme 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {
@@ -32,6 +32,6 @@
     "sass": "~1.77.8"
   },
   "scripts": {
-    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps"
+    "build": "sass index.scss dist/webority-theme.css --load-path=node_modules --style=compressed --no-source-map --quiet-deps && node ../../scripts/sync-rcl-assets.mjs theme"
   }
 }

package/scss/_components.scss

@@ -697,3 +697,45 @@ html.is-scrolling *::-webkit-scrollbar-thumb {
         transition: none;
     }
 }
+
+
+// ---- Theme-flipped typography utilities ------------------------------------
+// Bootstrap builds `.text-body` as `rgba(var(--bs-body-color-rgb), …)` — an RGB
+// TRIPLET baked in at compile time (37, 47, 74). Bridging `--bs-body-color`
+// cannot reach it, so the utility keeps the light-mode colour under
+// [data-theme="dark"]. Redefined against the token, with !important to match
+// Bootstrap's own utility declaration.
+//
+// `.text-body-secondary`, `.text-muted` and `.text-body-emphasis` are NOT
+// redefined: they resolve --bs-secondary-color / --bs-emphasis-color, which the
+// alias layer already bridges, so they flip correctly on their own.
+.text-body {
+    color: var(--color-text) !important;
+}
+
+// Font-family utilities Bootstrap has no equivalent for. Products were declaring
+// these locally, which is how a font choice drifts between surfaces.
+.font-mono {
+    font-family: var(--bs-font-monospace);
+}
+.font-display {
+    font-family: var(--bs-body-font-family);
+    font-weight: 500;
+    letter-spacing: -0.02em;
+}
+
+// A hairline rule that follows the theme. `<hr>` carries Bootstrap's own opacity
+// maths, which does not read as a divider on a dark surface.
+.divider {
+    height: 1px;
+    border: 0;
+    margin: 0;
+    background: var(--color-border);
+}
+.divider-vertical {
+    width: 1px;
+    height: auto;
+    align-self: stretch;
+    border: 0;
+    background: var(--color-border);
+}

package/scss/_tokens.scss

@@ -23,7 +23,12 @@
     --wui-text-heading: #071437;
     --wui-text-1:       #252F4A;
     --wui-text-2:       #4B5675;
-    --wui-text-3:       #78829D;
+    // Tertiary text — hints, captions, labels, timestamps, placeholders. Was #78829D,
+    // which measured 3.5:1 on white and 3.1:1 on a tinted panel: below WCAG AA (4.5:1)
+    // everywhere it was used. A tier meant for readable-but-secondary copy has to BE
+    // readable, so it darkens to 4.55:1 on every neutral surface. It stays clearly
+    // lighter than --wui-text-2; --wui-text-4/5 remain for genuinely decorative use.
+    --wui-text-3:       #687088;
     --wui-text-4:       #99A1B7;
     --wui-text-5:       #C4CADA;
 
@@ -114,6 +119,7 @@
     // Canonical info/success/warning/danger scales: `active` (text/icon on
     // light), the base `100` (vivid fills/dots), then tints 50/30/20/10/5.
     // Shared by the portal (aliased to --color-*) and marketing alerts/badges.
+    --wui-info-text:      #1460ba;
     --wui-info-active:    #056EE9;
     --wui-info:           #1B84FF;
     --wui-info-50:        #8DC2FF;
@@ -122,6 +128,12 @@
     --wui-info-10:        #E9F3FF;
     --wui-info-5:         #F3F9FF;
 
+    // `-text` variants exist because the status colours are FILLS. #F8285A and #04B440
+    // are correct on a button or a badge, and both fail AA as text on a light surface
+    // (3.6:1 and 2.6:1) — which is how a validation error message, of all things, came
+    // to be unreadable. Darkening the base tokens would change every red button and
+    // green badge in the system, so text gets its own value and the fills keep theirs.
+    --wui-success-text:   #0e7531;
     --wui-success-active: #04B440;
     --wui-success:        #17C653;
     --wui-success-50:     #8BE3A9;
@@ -130,6 +142,7 @@
     --wui-success-10:     #E8FAEE;
     --wui-success-5:      #F3FCF6;
 
+    --wui-warning-text:   #876100;
     --wui-warning-active: #DFA000;
     --wui-warning:        #F6B100;
     --wui-warning-50:     #FBD880;
@@ -138,6 +151,7 @@
     --wui-warning-10:     #FFF8E6;
     --wui-warning-5:      #FEFBF2;
 
+    --wui-danger-text:    #b61d42;
     --wui-danger-active:  #E82646;
     --wui-danger:         #F8285A;
     --wui-danger-50:      #FC94AD;

package/scss/_variables.scss

@@ -200,3 +200,20 @@ $link-hover-decoration: underline;
 $focus-ring-width:    3px;
 $focus-ring-color:    rgba($primary, 0.30);   // tracks $primary automatically
 $focus-ring-blur:     0;
+
+
+// ---- Table ----------------------------------------------------------
+// Set HERE, not in the component layer, and the reason is specificity.
+// Bootstrap emits `.table > :not(caption) > * > * { padding: … }` at (0,1,1).
+// The base table rules are wrapped in `:where()` — deliberately, so variants like
+// `.table-ledger` (0,1,2) can override them — which makes them (0,0,3). A class
+// beats three type selectors, so a `padding` declared there loses to Bootstrap's
+// and never applies.
+//
+// Overriding the SCSS variable makes Bootstrap's own high-specificity rule emit our
+// value, so the base table is styled without the component layer having to outrank
+// Bootstrap. Variants that set their own padding are unaffected — theirs still wins.
+// (Cell colour and header background take the same approach one level down, through
+// `--bs-table-color` / `--bs-table-bg`; see the base `.table` rules.)
+$table-cell-padding-y:  0.75rem;   // 12px
+$table-cell-padding-x:  0.75rem;   // 12px

package/scss/_wui-aliases.scss

@@ -47,6 +47,8 @@
   --color-info-5:         var(--wui-info-5);
   --color-info-strong:    var(--color-info-active);
   --color-info-soft:      var(--color-info-10);
+  // Use this — never --color-info — when the colour IS the text.
+  --color-info-text:      var(--wui-info-text);
 
   --color-success-active: var(--wui-success-active);
   --color-success:        var(--wui-success);
@@ -57,6 +59,8 @@
   --color-success-5:      var(--wui-success-5);
   --color-success-strong: var(--color-success-active);
   --color-success-soft:   var(--color-success-10);
+  // Use this — never --color-success — when the colour IS the text.
+  --color-success-text:   var(--wui-success-text);
 
   --color-warning-active: var(--wui-warning-active);
   --color-warning:        var(--wui-warning);
@@ -67,6 +71,8 @@
   --color-warning-5:      var(--wui-warning-5);
   --color-warning-strong: var(--color-warning-active);
   --color-warning-soft:   var(--color-warning-10);
+  // Use this — never --color-warning — when the colour IS the text.
+  --color-warning-text:   var(--wui-warning-text);
 
   --color-danger-active:  var(--wui-danger-active);
   --color-danger:         var(--wui-danger);
@@ -77,6 +83,8 @@
   --color-danger-5:       var(--wui-danger-5);
   --color-danger-strong:  var(--color-danger-active);
   --color-danger-soft:    var(--color-danger-10);
+  // Use this — never --color-danger — when the colour IS the text.
+  --color-danger-text:    var(--wui-danger-text);
 
   // Accent → warning ramp
   --color-accent:        var(--color-warning);
@@ -117,6 +125,14 @@
   --color-primary-hover: var(--wui-dark-primary-hover);
   --color-primary-soft:  color-mix(in srgb, var(--wui-primary) 20%, transparent);
 
+  // On a dark surface the FILL colours are already the readable ones — the darkened
+  // `-text` values would sink into the background. So dark mode maps text back to the
+  // bright tokens rather than inheriting light mode's.
+  --color-success-text:  var(--wui-success);
+  --color-danger-text:   var(--wui-danger);
+  --color-warning-text:  var(--wui-warning);
+  --color-info-text:     var(--wui-info);
+
   --color-success-soft:  color-mix(in srgb, var(--wui-success) 18%, transparent);
   --color-warning-soft:  color-mix(in srgb, var(--wui-warning) 18%, transparent);
   --color-danger-soft:   color-mix(in srgb, var(--wui-danger) 18%, transparent);