@webority/theme 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.4.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": {

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/_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);

package/scss/wui/_controls.scss

@@ -291,7 +291,7 @@ textarea.textarea:focus {
 .field-error {
     font-size: 12px;
     line-height: normal;
-    color: var(--color-danger);
+    color: var(--color-danger-text);
 }
 
 // Native select with a rounded squircle, custom chevron, off-surface fill.
@@ -431,7 +431,7 @@ textarea.textarea:focus {
     display: grid;
     place-items: center;
     pointer-events: none;
-    color: var(--color-danger);
+    color: var(--color-danger-text);
 }
 
 // Leading-icon input — icon turns brand on focus.
@@ -515,7 +515,7 @@ textarea.textarea:focus {
     color: var(--color-text-subtle);
 }
 .required {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
     // The gap is CSS, not a significant space in the markup. RequiredMark used to render
     // `{' '}*` while AppDatePicker and every Razor helper rendered a bare `*`, so the same
     // asterisk sat 4px further out in some fields than others — and no check could see it,
@@ -644,22 +644,22 @@ textarea.textarea:focus {
 }
 .badge-success {
     background: var(--color-success-soft);
-    color: var(--color-success-strong);
+    color: var(--color-success-text);
     border-color: transparent;
 }
 .badge-warn {
     background: var(--color-warning-soft);
-    color: var(--color-warning-strong);
+    color: var(--color-warning-text);
     border-color: transparent;
 }
 .badge-danger {
     background: var(--color-danger-soft);
-    color: var(--color-danger-strong);
+    color: var(--color-danger-text);
     border-color: transparent;
 }
 .badge-info {
     background: var(--color-info-soft);
-    color: var(--color-info-strong);
+    color: var(--color-info-text);
     border-color: transparent;
 }
 .badge-dot::before {
@@ -697,24 +697,24 @@ textarea.textarea:focus {
 .status-label.tone-ok,
 .status-label.tone-green {
     background: color-mix(in srgb, var(--color-success) 16%, transparent);
-    color: var(--color-success-strong);
+    color: var(--color-success-text);
 }
 .status-label.warning,
 .status-label.tone-warn,
 .status-label.tone-amber {
     background: color-mix(in srgb, var(--color-warning) 16%, transparent);
-    color: var(--color-warning-strong);
+    color: var(--color-warning-text);
 }
 .status-label.danger,
 .status-label.tone-bad,
 .status-label.tone-red {
     background: color-mix(in srgb, var(--color-danger) 16%, transparent);
-    color: var(--color-danger-strong);
+    color: var(--color-danger-text);
 }
 .status-label.info,
 .status-label.tone-blue {
     background: color-mix(in srgb, var(--color-info) 16%, transparent);
-    color: var(--color-info-strong);
+    color: var(--color-info-text);
 }
 .status-label.primary {
     background: var(--color-primary-soft);
@@ -726,7 +726,9 @@ textarea.textarea:focus {
 .status-label.neutral,
 .status-label.tone-grey {
     background: color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
-    color: var(--color-text-subtle);
+    // The tertiary tier is readable on a plain surface but not on its own 16% tint,
+    // so the neutral pill takes the secondary tier instead of a sixth `-text` token.
+    color: var(--color-text-muted);
 }
 
 // ── Choice chip ──

package/scss/wui/_data.scss

@@ -493,11 +493,11 @@
     cursor: not-allowed;
 }
 .u-action.danger {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
 }
 .u-action.danger:hover:not(:disabled) {
     background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-    color: var(--color-danger);
+    color: var(--color-danger-text);
 }
 .u-action.u-action-preview {
     background: var(--color-primary-soft);
@@ -505,11 +505,11 @@
 }
 .u-action.u-action-download {
     background: var(--color-success-soft);
-    color: var(--color-success-active);
+    color: var(--color-success-text);
 }
 .u-action.u-action-share {
     background: var(--color-warning-soft);
-    color: var(--color-warning-active);
+    color: var(--color-warning-text);
 }
 .u-action.u-action-preview:hover:not(:disabled) {
     background: var(--color-primary-soft);
@@ -517,14 +517,14 @@
 }
 .u-action.u-action-download:hover:not(:disabled) {
     background: var(--color-success-soft);
-    color: var(--color-success-active);
+    color: var(--color-success-text);
 }
 .u-action.u-action-share:hover:not(:disabled) {
     background: var(--color-warning-soft);
-    color: var(--color-warning-active);
+    color: var(--color-warning-text);
 }
 .u-action.u-action-danger:hover {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
     background: color-mix(in srgb, var(--color-danger) 10%, transparent);
 }
 

package/scss/wui/_display.scss

@@ -54,10 +54,10 @@
     color: var(--color-text-muted);
 }
 .kpi-delta.up {
-    color: var(--color-success-strong);
+    color: var(--color-success-text);
 }
 .kpi-delta.down {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
 }
 
 // Icon-left layout: the icon spans the label/value/delta stack instead of sitting above it.
@@ -312,19 +312,19 @@ a.info-row:hover .info-value {
     box-shadow: 0 0 0 3px var(--color-surface);
 }
 .timeline-item.success .timeline-dot {
-    color: var(--color-success-strong);
+    color: var(--color-success-text);
     background: color-mix(in srgb, var(--color-success-strong) 16%, var(--color-surface));
 }
 .timeline-item.warning .timeline-dot {
-    color: var(--color-warning-strong);
+    color: var(--color-warning-text);
     background: color-mix(in srgb, var(--color-warning-strong) 18%, var(--color-surface));
 }
 .timeline-item.danger .timeline-dot {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
     background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));
 }
 .timeline-item.info .timeline-dot {
-    color: var(--color-info-strong);
+    color: var(--color-info-text);
     background: color-mix(in srgb, var(--color-info-strong) 16%, var(--color-surface));
 }
 .timeline-body {
@@ -407,7 +407,7 @@ a.info-row:hover .info-value {
     font-weight: 500;
 }
 .compare-yes {
-    color: var(--color-success-strong);
+    color: var(--color-success-text);
 }
 .compare-no {
     color: var(--color-text-subtle);

package/scss/wui/_flow.scss

@@ -136,7 +136,7 @@ a.step:focus-visible .step-circle {
 }
 .stepper-journey .step.done .step-circle {
     background: var(--color-success-soft);
-    color: var(--color-success-strong);
+    color: var(--color-success-text);
 }
 .stepper-journey .step.active .step-circle {
     background: var(--color-primary);
@@ -161,7 +161,7 @@ a.step:focus-visible .step-circle {
     color: var(--color-text-subtle);
 }
 .stepper-journey .step.done .step-index {
-    color: var(--color-success-strong);
+    color: var(--color-success-text);
 }
 .stepper-journey .step.active .step-index {
     color: var(--color-primary);

package/scss/wui/_navigation.scss

@@ -171,18 +171,18 @@
 }
 // A destructive tab reads as destructive whether or not it is the active one.
 .app-tab.danger {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
 }
 .app-tab.danger:hover:not(:disabled):not(.active) {
-    color: var(--color-danger-active);
+    color: var(--color-danger-text);
 }
 .app-tab.danger.active {
-    color: var(--color-danger);
+    color: var(--color-danger-text);
     border-bottom-color: var(--color-danger);
 }
 .app-tab.danger .app-tab-count {
     background: var(--color-danger-soft);
-    color: var(--color-danger-strong);
+    color: var(--color-danger-text);
 }
 // Trailing count pill.
 .app-tab-count {

package/scss/wui/_overlays.scss

@@ -270,7 +270,7 @@
 }
 .lx-modal-close:hover {
     background: var(--color-danger-soft);
-    color: var(--color-danger);
+    color: var(--color-danger-text);
     corner-shape: round;
     transition:
         background 280ms cubic-bezier(0.16, 1, 0.3, 1),

package/scss/wui/_typography.scss

@@ -131,22 +131,22 @@
 .chip.success {
     border-color: transparent;
     background: var(--color-success-soft);
-    color: var(--color-success-active);
+    color: var(--color-success-text);
 }
 .chip.warning {
     border-color: transparent;
     background: var(--color-warning-soft);
-    color: var(--color-warning-active);
+    color: var(--color-warning-text);
 }
 .chip.danger {
     border-color: transparent;
     background: var(--color-danger-soft);
-    color: var(--color-danger-active);
+    color: var(--color-danger-text);
 }
 .chip.info {
     border-color: transparent;
     background: var(--color-info-soft);
-    color: var(--color-info-active);
+    color: var(--color-info-text);
 }
 .chip.primary .chip-ic,
 .chip.success .chip-ic,