@wildmason/aegis 1.10.1 → 1.11.0

package/inputs.css

@@ -1129,15 +1129,25 @@ select.wm-input {
   color: var(--wm-text-primary);
 }
 
+/* Fill and edge come from separate tokens, and the split is the whole point.
+ *
+ * `--wm-color-danger` is tuned for danger as TEXT, so on dark themes it is a
+ * light red and white on it failed WCAG AA on 8 of 12 themes (worst 2.74:1).
+ * `--wm-color-danger-solid` is dark enough for the label on every theme;
+ * `--wm-color-danger-edge` supplies the 3:1 component boundary WCAG 1.4.11
+ * asks for, which a fill dark enough for white text cannot always provide by
+ * itself — on arctic-night the two constraints cross outright. See themes.css
+ * for the derivation and the APCA/WCAG divergence behind it. */
 .wm-btn--destructive {
-  background-color: var(--wm-color-danger);
-  border-color: var(--wm-color-danger);
+  background-color: var(--wm-color-danger-solid);
+  border-color: var(--wm-color-danger-edge);
   color: #ffffff;
 }
 
+/* Only the fill darkens on hover. Darkening the edge too would eat into the
+ * boundary contrast the edge exists to guarantee. */
 .wm-btn--destructive:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--wm-color-danger) 85%, black);
-  border-color: color-mix(in srgb, var(--wm-color-danger) 85%, black);
+  background-color: color-mix(in srgb, var(--wm-color-danger-solid) 85%, black);
 }
 
 .wm-btn--flat {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@wildmason/aegis",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Aegis design system \u00e2\u20ac\u201d CSS tokens and Angular component library",
   "scripts": {
     "check:offline-fonts": "node scripts/check-offline-fonts.mjs",
-    "build": "npm run check:offline-fonts && ng-packagr -p ng-package.json",
-    "prepublishOnly": "npm run build"
+    "build": "npm run check:offline-fonts && npm run check:destructive-contrast && ng-packagr -p ng-package.json",
+    "prepublishOnly": "npm run build",
+    "check:destructive-contrast": "node scripts/check-destructive-contrast.mjs"
   },
   "files": [
     "dist",

package/themes.css

@@ -40,6 +40,15 @@
      - Large text and UI components:        3.0:1 minimum
        (WCAG 1.4.11 Non-text Contrast — applies to --wm-border-input)
 
+   One pair needed a second token to hold that line: white on
+   --wm-color-danger, the destructive button's fill, failed AA on 8 of the 12
+   themes because --wm-color-danger is tuned for danger as TEXT and is a light
+   red on dark themes. The fill now comes from --wm-color-danger-solid and the
+   component boundary from --wm-color-danger-edge. Worth knowing if you are
+   auditing: APCA passed 11 of those 12 (Lc >= 60) — WCAG 2.x under-rates red
+   backgrounds — so the two models genuinely disagreed here and both bars are
+   now cleared rather than one being argued away.
+
    Placeholder text (--wm-text-placeholder) is intentionally lower contrast.
    WCAG 2.2 Understanding 1.4.3 explicitly exempts placeholder text from
    contrast requirements. Inputs MUST have a visible label; placeholder is
@@ -90,7 +99,7 @@
   --wm-transition-slow: 300ms ease;
 
   /* Typography */
-  --wm-font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --wm-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --wm-font-mono:
     'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;
 
@@ -131,6 +140,36 @@
 
   /* Derived tokens — computed at scope, valid for all themes */
   --wm-bg-active: color-mix(in srgb, var(--wm-color-accent) 10%, transparent);
+  /* Destructive-button fill and edge.
+   *
+   * `--wm-color-danger` is tuned for danger as TEXT on the theme's own
+   * background, so on dark themes it is a light red. White on it fails WCAG AA
+   * on 8 of the 12 themes — worst 2.74:1 on twilight-peach — even though APCA
+   * passes 11 of 12 (Lc >= 60). That divergence is real, not a rounding
+   * argument: WCAG 2.x's luminance formula under-rates red backgrounds. Both
+   * bars have to clear, so the fill gets its own token.
+   *
+   * Themes whose danger is already dark enough inherit it unchanged; the rest
+   * override below with a darkened value chosen so white clears 4.5:1 AND
+   * Lc 60, hover included.
+   */
+  --wm-color-danger-solid: var(--wm-color-danger);
+
+  /* The button's boundary, per WCAG 1.4.11's 3:1 for a component edge.
+   *
+   * Derived from the theme's own text colour rather than a fixed lightening:
+   * text-primary is by construction the highest-contrast colour against that
+   * theme's surfaces, so mixing toward it lightens on dark themes and darkens
+   * on light ones — one rule, correct in both directions, and a new theme gets
+   * a correct edge for free. 70/30 is the first ratio that clears 3:1 on all
+   * twelve themes against BOTH `--wm-bg-base` and `--wm-bg-float`; a dialog's
+   * raised surface is the harder case and is what 85/15 failed.
+   */
+  --wm-color-danger-edge: color-mix(
+    in srgb,
+    var(--wm-color-danger) 70%,
+    var(--wm-text-primary)
+  );
   --wm-color-danger-bg: color-mix(
     in srgb,
     var(--wm-color-danger) 8%,
@@ -347,6 +386,7 @@
   --wm-color-success: #b5cf9a;
   --wm-color-warning: #ebcb8b;
   --wm-color-danger: #bf616a;
+  --wm-color-danger-solid: #a34049;
 
   /* Item type colors */
   --wm-color-task: #88c0d0;
@@ -419,6 +459,7 @@
   --wm-color-success: #50fa7b;
   --wm-color-warning: #f1fa8c;
   --wm-color-danger: #ff5555;
+  --wm-color-danger-solid: #cf4545;
 
   /* Item type colors */
   --wm-color-task: #8be9fd;
@@ -491,6 +532,7 @@
   --wm-color-success: #5cbfa0;
   --wm-color-warning: #f0b464;
   --wm-color-danger: #f07878;
+  --wm-color-danger-solid: #b65b5b;
 
   /* Item type colors */
   --wm-color-task: #70a8f0;
@@ -563,6 +605,7 @@
   --wm-color-success: #7ac4a0;
   --wm-color-warning: #d4a85a;
   --wm-color-danger: #e07878;
+  --wm-color-danger-solid: #af5e5e;
 
   /* Item type colors */
   --wm-color-task: #80a8e0;
@@ -708,6 +751,7 @@
   --wm-color-success: #a6e22e;
   --wm-color-warning: #fd971f;
   --wm-color-danger: #f92672;
+  --wm-color-danger-solid: #e02267;
 
   /* Item type colors */
   --wm-color-task: #66d9ef;
@@ -780,6 +824,7 @@
   --wm-color-success: #4aba80;
   --wm-color-warning: #d4830a;
   --wm-color-danger: #e05c5c;
+  --wm-color-danger-solid: #c35050;
 
   /* Item type colors */
   --wm-color-task: #8ab4d8;
@@ -852,6 +897,7 @@
   --wm-color-success: #3fb950;
   --wm-color-warning: #d29922;
   --wm-color-danger: #f85149;
+  --wm-color-danger-solid: #d0443d;
 
   /* Item type colors */
   --wm-color-task: #58a6ff;
@@ -930,6 +976,7 @@
   --wm-color-success: #a0c5a0;
   --wm-color-warning: #ebcb8b;
   --wm-color-danger: #bf616a;
+  --wm-color-danger-solid: #b45b64;
 
   /* Item type colors — Wildmason selection */
   --wm-color-task: #82a682;