Merge pull request 'P11: WCAG 2.2 AA compliance + marimo dashboard tiles' (#57) from feature/wcag-marimo-tiles into main

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;
 }

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",

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;
+}

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;
 }

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;

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;
+}

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;
+}

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;
+}

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;