test(a11y): enforce contrast checks

Author: altaywtf

system/preview/_components.css

@@ -62,16 +62,20 @@ button i { font-size: 14px; line-height: 1; display: inline-flex; }
    --*-foreground tokens in tokens.css; kept inline for performance. */
 .btn-primary  { background: var(--yellow-solid);  border-color: var(--yellow-solid);  color: #000; }
 .btn-primary:hover  { background: var(--yellow-solid-hover);  border-color: var(--yellow-solid-hover); }
-.btn-success  { background: var(--green-solid);   border-color: var(--green-solid);   color: #fff; }
-.btn-success:hover  { background: var(--green-solid-hover);   border-color: var(--green-solid-hover); }
-.btn-danger   { background: var(--red-solid);     border-color: var(--red-solid);     color: #fff; }
-.btn-danger:hover   { background: var(--red-solid-hover);     border-color: var(--red-solid-hover); }
+.btn-success  { background: var(--green-text-secondary); border-color: var(--green-text-secondary); color: #fff; }
+.btn-success:hover  { background: var(--green-text-secondary); border-color: var(--green-text-secondary); }
+.btn-danger   { background: var(--red-text-secondary); border-color: var(--red-text-secondary); color: #fff; }
+.btn-danger:hover   { background: var(--red-text-secondary); border-color: var(--red-text-secondary); }
 .btn-info     { background: var(--solid);         border-color: var(--solid);         color: #fff; }
 .btn-info:hover     { background: var(--solid-hover);         border-color: var(--solid-hover); }
 .btn-invert   { background: var(--text);          border-color: var(--border);        color: var(--app-bg); }
 .btn-invert:hover   { border-color: var(--border-hover); }
 .btn-default  { background: var(--component-bg);  border-color: var(--border);        color: var(--text); }
 .btn-default:hover  { background: var(--component-bg-hover);  border-color: var(--border-hover); }
+html.dark .btn-success { background: var(--green-border-hover); border-color: var(--green-border-hover); }
+html.dark .btn-success:hover { background: var(--green-border-hover); border-color: var(--green-border-hover); }
+html.dark .btn-danger { background: var(--red-border-hover); border-color: var(--red-border-hover); }
+html.dark .btn-danger:hover { background: var(--red-border-hover); border-color: var(--red-border-hover); }
 
 /* States */
 button:disabled { opacity: 0.3; cursor: not-allowed; }

system/preview/components-buttons.html

@@ -40,7 +40,7 @@
   .preview-shell { padding: 24px; display:flex; flex-direction:column; gap: 18px; }
   .btn-row { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
   .label { font-size: 12.5px; font-weight: 500; color: var(--text); }
-  .label small { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--text-secondary); opacity: 0.7; }
+  .label small { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
   .note { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; max-width: 760px; }
   .note code { font-family: var(--font-mono); color: var(--yellow-solid); font-size: 11.5px; }
   .note b { color: var(--text); font-weight: 500; }
@@ -164,12 +164,12 @@
     <button class="btn-primary" disabled>Disabled</button>
     <button class="btn-primary is-loading">Saving…</button>
     <button class="btn-danger" disabled>Delete forever</button>
-    <button class="btn-danger is-loading">Deleting…</button>
+    <button class="btn-danger is-loading" aria-label="Deleting"></button>
     <button class="btn-default">Tab to focus me</button>
   </div>
 
   <div class="tip">
-    <b>Accessibility floor.</b> White-on-green and white-on-red sit at 3.2–3.9 contrast — they only pass WCAG as <em>large text</em> (≥14px medium uppercase). <b>Never use <code>btn-sm</code> or <code>btn-xs</code> for <code>btn-success</code>, <code>btn-danger</code>, or <code>btn-info</code>.</b> For tight rows use <code>btn-primary</code> (yellow on black = 14:1 AAA at any size) or <code>btn-default</code>. See the <em>Accessibility audit</em> preview.
+    <b>Accessibility floor.</b> Filled status buttons use darker status roles than badges so white text passes WCAG AA at normal button sizes. <b>Never reuse badge fills for button backgrounds.</b> For tight rows use <code>btn-primary</code> (yellow on black = 14:1 AAA at any size) or <code>btn-default</code>. See the <em>Accessibility audit</em> preview.
   </div>
 </div>
 

system/preview/components-form-fields.html

@@ -198,7 +198,7 @@
     cursor: pointer;
   }
   .date-pop .day:hover { background: var(--component-bg-hover); }
-  .date-pop .day.muted { color: var(--text-secondary); opacity: 0.4; }
+  .date-pop .day.muted { color: var(--text-secondary); }
   .date-pop .day.in-range { background: var(--yellow-component-bg); border-radius: 0; }
   .date-pop .day.start { background: var(--yellow-solid); color: #000; font-weight: 500; border-top-right-radius: 0; border-bottom-right-radius: 0; }
   .date-pop .day.end { background: var(--yellow-solid); color: #000; font-weight: 500; border-top-left-radius: 0; border-bottom-left-radius: 0; }

system/preview/mobile-shell.html

@@ -478,7 +478,7 @@
     color: #fff; cursor: pointer;
   }
   .swipe-row .actions .share { background: var(--solid); }
-  .swipe-row .actions .del { background: var(--red-solid); }
+  .swipe-row .actions .del { background: var(--red-border-hover); }
 
   /* Toast */
   .m-toast {

tests/e2e/design-system.spec.ts

@@ -50,7 +50,7 @@ test.describe("design.put.io static guide", () => {
     test(`${pagePath} has no serious automated accessibility violations`, async ({ page }, testInfo) => {
       test.skip(testInfo.project.name !== "chromium-desktop", "Axe coverage runs once; render smoke covers TV framing.");
       await page.goto(pagePath, { waitUntil: "domcontentloaded" });
-      const builder = new AxeBuilder({ page }).disableRules(["color-contrast", "scrollable-region-focusable"]);
+      const builder = new AxeBuilder({ page });
       if (pagePath.startsWith("/design-system")) {
         builder.exclude("iframe");
       }