WCAG 2.2 AA compliance + marimo dashboard tiles

## WCAG colour contrast fixes (4.5:1 minimum) - --ds-steel: #5a7090 → #7a90b0 (3.59 → 5.56) - --ds-blue: #3366cc → #4488dd (3.38 → 5.02) - --ds-red: #cc2244 → #ee5577 (3.35 → 5.35) ## WCAG accessibility additions - :focus-visible outlines, prefers-reduced-motion, 24px targets ## Marimo dashboard tiles (#53) - Hide resources section, card grid layout, hover states fix #52, fix #53
2026-03-21 14:35:34 -04:00
parent c3218a41d1
commit 05183164c1
9 changed files with 226 additions and 26 deletions
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -1,7 +1,7 @@
 /* LOCH — deep-navy design system — matches styles/inject.css */

 :root {
-  --ifm-color-primary: #3366cc;
+  --ifm-color-primary: #4488dd;
  --ifm-color-primary-dark: #2d5bb8;
  --ifm-color-primary-darker: #2a56ad;
  --ifm-color-primary-darkest: #23478f;
@@ -18,7 +18,7 @@
 [data-theme="dark"] {
  --ifm-background-color: #0a1628;
  --ifm-background-surface-color: #0d1e36;
-  --ifm-color-primary: #3366cc;
+  --ifm-color-primary: #4488dd;
  --ifm-color-primary-dark: #2d5bb8;
  --ifm-color-primary-darker: #2a56ad;
  --ifm-color-primary-darkest: #23478f;
@@ -45,15 +45,15 @@
 }

 .footer--dark {
-  border-top: 3px solid #cc2244;
+  border-top: 3px solid #ee5577;
 }

 /* Red accent bar on hero */
 .hero {
-  border-bottom: 3px solid #cc2244;
+  border-bottom: 3px solid #ee5577;
 }

 /* Sidebar active link */
 .menu__link--active:not(.menu__link--sublist) {
-  border-left: 3px solid #cc2244;
+  border-left: 3px solid #ee5577;
 }
--- a/docs/src/pages/library.tsx
+++ b/docs/src/pages/library.tsx
@@ -140,7 +140,7 @@ export default function Library(): JSX.Element {
                style={{
                  background: "none",
                  border: "none",
-                  color: !selectedCollection ? "#3366cc" : "#a0b0c8",
+                  color: !selectedCollection ? "#4488dd" : "#a0b0c8",
                  cursor: "pointer",
                  padding: "2px 0",
                  fontFamily: "inherit",
@@ -161,7 +161,7 @@ export default function Library(): JSX.Element {
                    background: "none",
                    border: "none",
                    color:
-                      selectedCollection === c.key ? "#3366cc" : "#a0b0c8",
+                      selectedCollection === c.key ? "#4488dd" : "#a0b0c8",
                    cursor: "pointer",
                    padding: "2px 0",
                    fontFamily: "inherit",
@@ -191,7 +191,7 @@ export default function Library(): JSX.Element {
                      borderRadius: 3,
                      border: "1px solid #1a2a44",
                      background: selectedTags.has(t.name)
-                        ? "#3366cc"
+                        ? "#4488dd"
                        : "#0d1e36",
                      color: selectedTags.has(t.name) ? "#fff" : "#a0b0c8",
                      cursor: "pointer",
--- a/notebooks/.marimo-config/loch.css
+++ b/notebooks/.marimo-config/loch.css
@@ -27,7 +27,7 @@
  --ds-blue-light: #6699ee;
  --ds-blue-bright: #99bbff;

-  --ds-red: #cc2244;
+  --ds-red: #ee5577;
  --ds-red-light: #ee6688;

  --ds-green: #44aa44;
@@ -552,3 +552,67 @@ button:active,
  transform: translate(1px, 1px) !important;
  box-shadow: none !important;
 }
+
+/* ── Dashboard tiles — file browser as card grid ─────────── */
+
+/* Hide marimo resources / external links section */
+.home-page a[href*="docs.marimo.io"],
+.home-page a[href*="discord"],
+.home-page a[href*="github.com/marimo-team"],
+.home-page [class*="resource"],
+.home-page [class*="Resource"],
+section:has(a[href*="docs.marimo.io"]) {
+  display: none !important;
+}
+
+/* File browser → tile grid */
+.home-page [class*="file-list"],
+.home-page [class*="FileList"],
+.home-page .divide-y {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
+  gap: 12px !important;
+  border: none !important;
+}
+
+/* Individual notebook tiles */
+.home-page [class*="file-list"] > *,
+.home-page [class*="FileList"] > *,
+.home-page .divide-y > * {
+  border: 1px solid #2a3f5f !important;
+  border-radius: 6px !important;
+  padding: 16px !important;
+  background: #162040 !important;
+  transition: border-color 0.15s, background 0.15s !important;
+}
+
+.home-page [class*="file-list"] > *:hover,
+.home-page [class*="FileList"] > *:hover,
+.home-page .divide-y > *:hover {
+  border-color: #4488dd !important;
+  background: #1e2d50 !important;
+}
+
+/* Tile headings */
+.home-page [class*="file-list"] a,
+.home-page [class*="FileList"] a,
+.home-page .divide-y a {
+  color: #f0f0f0 !important;
+  font-weight: 600 !important;
+  text-decoration: none !important;
+}
+
+/* Section headers */
+.home-page h2,
+.home-page [class*="section-header"],
+.home-page .text-xl {
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  letter-spacing: 1px !important;
+  text-transform: uppercase !important;
+  color: #7a90b0 !important;
+  border-bottom: 1px solid #2a3f5f !important;
+  padding-bottom: 8px !important;
+  margin-bottom: 16px !important;
+}
--- a/styles/dashboard.css
+++ b/styles/dashboard.css
@@ -7,12 +7,12 @@
    --ds-navy-light: #162040;
    --ds-navy-mid: #1e2d50;
    --ds-slate: #2a3f5f;
-    --ds-steel: #5a7090;
+    --ds-steel: #7a90b0;
    --ds-white: #f0f0f0;
-    --ds-blue: #3366cc;
+    --ds-blue: #4488dd;
    --ds-blue-light: #5588dd;
    --ds-blue-bright: #88aaee;
-    --ds-red: #cc2244;
+    --ds-red: #ee5577;
    --ds-red-light: #dd4466;
    --ds-green: #44aa44;
 }
--- a/styles/gitea.css
+++ b/styles/gitea.css
@@ -15,14 +15,14 @@ gitea-theme-meta-info {
  --ds-navy-light: #162040;
  --ds-navy-mid: #1e2d50;
  --ds-slate: #2a3f5f;
-  --ds-steel: #5a7090;
+  --ds-steel: #7a90b0;
  --ds-white: #f0f0f0;

-  --ds-blue: #3366cc;
+  --ds-blue: #4488dd;
  --ds-blue-light: #5588dd;
  --ds-blue-bright: #88aaee;

-  --ds-red: #cc2244;
+  --ds-red: #ee5577;
  --ds-red-light: #dd4466;

  --ds-green: #44aa44;
--- a/styles/inject.css
+++ b/styles/inject.css
@@ -14,14 +14,14 @@
  --ds-navy-light: #162040;
  --ds-navy-mid: #1e2d50;
  --ds-slate: #2a3f5f;
-  --ds-steel: #5a7090;
+  --ds-steel: #7a90b0;
  --ds-white: #f0f0f0;

-  --ds-blue: #3366cc;
+  --ds-blue: #4488dd;
  --ds-blue-light: #5588dd;
  --ds-blue-bright: #88aaee;

-  --ds-red: #cc2244;
+  --ds-red: #ee5577;
  --ds-red-light: #dd4466;

  --ds-green: #44aa44;
@@ -949,3 +949,27 @@ progress::-webkit-progress-bar {
 progress::-webkit-progress-value {
  background: var(--ds-blue) !important;
 }
+
+/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */
+
+/* Focus indicators (2.4.7, 2.4.11) */
+:focus-visible {
+  outline: 2px solid #4488dd !important;
+  outline-offset: 2px !important;
+}
+
+/* Reduced motion (2.3.3) */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Minimum target size (2.5.8) */
+button, [role="button"], a, input, select, textarea {
+  min-height: 24px;
+  min-width: 24px;
+}
--- a/styles/loch.css
+++ b/styles/loch.css
@@ -10,17 +10,41 @@
  --ds-navy-light: #162040;
  --ds-navy-mid: #1e2d50;
  --ds-slate: #2a3f5f;
-  --ds-steel: #5a7090;
+  --ds-steel: #7a90b0;
  --ds-white: #f0f0f0;

-  --ds-blue: #3366cc;
+  --ds-blue: #4488dd;
  --ds-blue-light: #5588dd;
  --ds-blue-bright: #88aaee;

-  --ds-red: #cc2244;
+  --ds-red: #ee5577;
  --ds-red-light: #dd4466;

  --ds-green: #44aa44;
  --ds-green-light: #66cc66;
  --ds-yellow: #ddaa33;
 }
+
+/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */
+
+/* Focus indicators (2.4.7, 2.4.11) */
+:focus-visible {
+  outline: 2px solid #4488dd !important;
+  outline-offset: 2px !important;
+}
+
+/* Reduced motion (2.3.3) */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Minimum target size (2.5.8) */
+button, [role="button"], a, input, select, textarea {
+  min-height: 24px;
+  min-width: 24px;
+}
--- a/styles/marimo.css
+++ b/styles/marimo.css
@@ -19,7 +19,7 @@
  --ds-blue-light: #6699ee;
  --ds-blue-bright: #99bbff;

-  --ds-red: #cc2244;
+  --ds-red: #ee5577;
  --ds-red-light: #ee6688;
  --ds-red-bright: #ffaabc;

@@ -181,7 +181,7 @@
  --red-5: #661a34;
  --red-6: #802040;
  --red-7: #aa3050;
-  --red-8: #cc2244;
+  --red-8: #ee5577;
  --red-9: #dd4466;
  --red-10: #ee6688;
  --red-11: #ff99aa;
@@ -790,3 +790,91 @@ button:active,
 .text-muted-foreground {
  color: var(--ds-steel) !important;
 }
+
+/* ── Dashboard tiles — file browser as card grid ─────────── */
+
+/* Hide marimo resources / external links section */
+.home-page a[href*="docs.marimo.io"],
+.home-page a[href*="discord"],
+.home-page a[href*="github.com/marimo-team"],
+.home-page [class*="resource"],
+.home-page [class*="Resource"],
+section:has(a[href*="docs.marimo.io"]) {
+  display: none !important;
+}
+
+/* File browser → tile grid */
+.home-page [class*="file-list"],
+.home-page [class*="FileList"],
+.home-page .divide-y {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
+  gap: 12px !important;
+  border: none !important;
+}
+
+/* Individual notebook tiles */
+.home-page [class*="file-list"] > *,
+.home-page [class*="FileList"] > *,
+.home-page .divide-y > * {
+  border: 1px solid #2a3f5f !important;
+  border-radius: 6px !important;
+  padding: 16px !important;
+  background: #162040 !important;
+  transition: border-color 0.15s, background 0.15s !important;
+}
+
+.home-page [class*="file-list"] > *:hover,
+.home-page [class*="FileList"] > *:hover,
+.home-page .divide-y > *:hover {
+  border-color: #4488dd !important;
+  background: #1e2d50 !important;
+}
+
+/* Tile headings */
+.home-page [class*="file-list"] a,
+.home-page [class*="FileList"] a,
+.home-page .divide-y a {
+  color: #f0f0f0 !important;
+  font-weight: 600 !important;
+  text-decoration: none !important;
+}
+
+/* Section headers */
+.home-page h2,
+.home-page [class*="section-header"],
+.home-page .text-xl {
+  font-family: 'IBM Plex Mono', monospace !important;
+  font-weight: 600 !important;
+  font-size: 14px !important;
+  letter-spacing: 1px !important;
+  text-transform: uppercase !important;
+  color: #7a90b0 !important;
+  border-bottom: 1px solid #2a3f5f !important;
+  padding-bottom: 8px !important;
+  margin-bottom: 16px !important;
+}
+
+/* ── WCAG 2.2 AA — Accessibility ──────────────────────────── */
+
+/* Focus indicators (2.4.7, 2.4.11) */
+:focus-visible {
+  outline: 2px solid #4488dd !important;
+  outline-offset: 2px !important;
+}
+
+/* Reduced motion (2.3.3) */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Minimum target size (2.5.8) */
+button, [role="button"], a, input, select, textarea {
+  min-height: 24px;
+  min-width: 24px;
+}
--- a/styles/woodpecker.css
+++ b/styles/woodpecker.css
@@ -8,14 +8,14 @@
  --ds-navy-light: #162040;
  --ds-navy-mid: #1e2d50;
  --ds-slate: #2a3f5f;
-  --ds-steel: #5a7090;
+  --ds-steel: #7a90b0;
  --ds-white: #f0f0f0;

-  --ds-blue: #3366cc;
+  --ds-blue: #4488dd;
  --ds-blue-light: #5588dd;
  --ds-blue-bright: #88aaee;

-  --ds-red: #cc2244;
+  --ds-red: #ee5577;
  --ds-red-light: #dd4466;

  --ds-green: #44aa44;