From e00edb444dd0c3ca9e543dccc3ff77ee30f9e075 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 14:10:35 -0500
Subject: [PATCH 01/15] Update ink and inverted colors

---
 app/assets/stylesheets/_global.css       | 17 ++++++++++-------
 app/assets/stylesheets/base.css          |  2 +-
 app/assets/stylesheets/buttons.css       | 14 +++++++-------
 app/assets/stylesheets/card-columns.css  |  2 +-
 app/assets/stylesheets/card-perma.css    |  6 +++---
 app/assets/stylesheets/cards.css         |  8 ++++----
 app/assets/stylesheets/events.css        |  6 +++---
 app/assets/stylesheets/expander.css      |  2 +-
 app/assets/stylesheets/flash.css         |  2 +-
 app/assets/stylesheets/house.css         |  6 +++---
 app/assets/stylesheets/inputs.css        |  4 ++--
 app/assets/stylesheets/lightbox.css      |  2 +-
 app/assets/stylesheets/notifications.css |  2 +-
 app/assets/stylesheets/panels.css        |  2 +-
 app/assets/stylesheets/pins.css          |  2 +-
 app/assets/stylesheets/syntax.css        |  2 +-
 app/assets/stylesheets/trays.css         |  2 +-
 app/assets/stylesheets/utilities.css     |  6 +++---
 app/assets/stylesheets/workflows.css     |  4 ++--
 app/views/events/_event.html.erb         |  2 +-
 public/406-unsupported-browser.html      | 22 +++++++++++-----------
 21 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 3dbe697a3..5252d7c47 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -34,8 +34,9 @@
   --btn-size: 2.65em;
 
   /* Color values */
-  --lch-black: 27.13% 0.1035 284.77;
-  --lch-white: 100% 0 0;
+  --lch-ink: 27.13% 0.1035 284.77;
+  --lch-ink-inverted: 100% 0 0;
+
   --lch-gray-light: 96% 0.005 96;
   --lch-gray: 92% 0.005 96;
   --lch-gray-dark: 75% 0.005 96;
@@ -53,12 +54,14 @@
   --lch-light-blue: 84.94% 0.048 216.62;
 
   /* Color abstractions */
+  --color-ink: oklch(var(--lch-ink));
+  --color-ink-inverted: oklch(var(--lch-ink-inverted));
+  --color-canvas: oklch(var(--lch-ink-inverted));
+
+
   --color-negative: oklch(var(--lch-red));
   --color-positive: oklch(var(--lch-green));
   --color-positive-light: oklch(var(--lch-green-light));
-  --color-bg: oklch(var(--lch-white));
-  --color-ink: oklch(var(--lch-black));
-  --color-ink-reversed: oklch(var(--lch-white));
   --color-link: oklch(var(--lch-blue));
   --color-subtle-light: oklch(var(--lch-gray-light));
   --color-subtle: oklch(var(--lch-gray));
@@ -73,8 +76,8 @@
   --color-golden: oklch(var(--lch-golden));
 
   @media (prefers-color-scheme: dark) {
-    --lch-black: 100% 0 0;
-    --lch-white: 0% 0 0;
+    --lch-ink: 100% 0 0;
+    --lch-ink-inverted: 0% 0 0;
     --lch-gray-light: 25.2% 0 0;
     --lch-gray: 30.12% 0 0;
     --lch-gray-dark: 44.95% 0 0;
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 9301bbc61..08368757e 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -18,7 +18,7 @@
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     -webkit-text-size-adjust: none;
-    background: var(--color-bg);
+    background: var(--color-canvas);
     color: var(--color-ink);
     font-family: var(--font-sans);
     interpolate-size: allow-keywords;
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index 210c81bd7..fea991bff 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -4,7 +4,7 @@
     --btn-border-radius: 2em;
 
     align-items: center;
-    background-color: var(--btn-background, var(--color-bg));
+    background-color: var(--btn-background, var(--color-canvas));
     border-radius: var(--btn-border-radius);
     border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark));
     color: var(--btn-color, var(--color-ink));
@@ -112,7 +112,7 @@
 
     &:has(input:checked)  {
       --btn-background: var(--color-ink);
-      --btn-color: var(--color-ink-reversed);
+      --btn-color: var(--color-ink-inverted);
       --outline-color: var(--color-ink);
 
       .checked {
@@ -137,13 +137,13 @@
   /* Variants */
   .btn--link {
     --btn-background: var(--color-link);
-    --btn-color: var(--color-ink-reversed);
+    --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-link);
   }
 
   .btn--negative {
     --btn-background: var(--color-negative);
-    --btn-color: var(--color-ink-reversed);
+    --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-negative);
   }
 
@@ -163,7 +163,7 @@
 
   .btn--positive {
     --btn-background: var(--color-positive);
-    --btn-color: var(--color-ink-reversed);
+    --btn-color: var(--color-ink-inverted);
     --outline-color: var(--color-positive);
   }
 
@@ -173,12 +173,12 @@
 
   .btn--reversed {
     --btn-background: var(--color-ink);
-    --btn-color: var(--color-bg);
+    --btn-color: var(--color-canvas);
     --outline-color: var(--color-ink);
   }
 
   :is(.btn--link, .btn--negative, .btn--positive, .btn--reversed) {
-    --btn-border-color: var(--color-bg);
+    --btn-border-color: var(--color-canvas);
   }
 
   .btn--success {
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 022201a26..268d82463 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -77,7 +77,7 @@
       --text-xx-large: 1.6em;
       --text-small: 1.1em;
 
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       box-shadow: 0 0 0 1px var(--color-subtle);
       line-height: 1.2;
 
diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index af825bb32..77be4096d 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -4,7 +4,7 @@
   .card-perma {
     --actions-block-inset: 1.5rem;
     --actions-inline-inset: 4rem;
-    --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-bg));
+    --color-container: color-mix(in srgb, var(--card-color) 33%, var(--color-canvas));
     --padding-inline: calc(var(--block-space-double) + var(--block-space));
     --padding-block: calc(var(--block-space-double) + var(--block-space-half));
 
@@ -87,7 +87,7 @@
 
       &:has(input:checked)  {
         --btn-background: var(--card-color);
-        --btn-color: var(--color-ink-reversed);
+        --btn-color: var(--color-ink-inverted);
       }
     }
   }
@@ -102,7 +102,7 @@
 
     .btn:not(.popup__item, .btn--plain) {
       --btn-background: var(--card-color);
-      --btn-color: var(--color-ink-reversed);
+      --btn-color: var(--color-ink-inverted);
     }
 
     .btn--plain {
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 6f869df5c..304ac51c2 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -7,7 +7,7 @@
     --border-size: 0;
 
     aspect-ratio: var(--card-aspect-ratio, auto);
-    background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
+    background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
     border-radius: 0.5em;
     box-shadow: var(--shadow);
     color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
@@ -29,9 +29,9 @@
   }
 
   .card--golden.card--doing {
-    --border-color: var(--color-bg) !important;
+    --border-color: var(--color-canvas) !important;
 
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
     box-shadow:
       0 0 0.5em 0.2em var(--color-golden),
@@ -203,7 +203,7 @@
   }
 
   .card__closed-title {
-    color: var(--color-ink-reversed);
+    color: var(--color-ink-inverted);
     font-size: var(--text-rel-large);
     font-weight: 900;
     text-shadow:
diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 0b19fe853..dd2e8dc80 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -17,7 +17,7 @@
   }
 
   .events__day-header {
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     block-size: var(--grid-lines);
     display: block;
     position: relative;
@@ -25,7 +25,7 @@
   }
 
   .events__day-header-content {
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     display: inline-flex;
     font-size: 0.8em;
     inset: calc(var(--grid-lines) - 1em) auto -1em;
@@ -55,7 +55,7 @@
 
   .events--none {
     background-color: var(--color-container);
-    border-block-start: var(--grid-lines) solid var(--color-bg);
+    border-block-start: var(--grid-lines) solid var(--color-canvas);
     padding-block: 3em;
     margin: auto var(--grid-lines) calc(var(--grid-lines) * -1) auto;
   }
diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css
index e7be6c769..a1f6da0dc 100644
--- a/app/assets/stylesheets/expander.css
+++ b/app/assets/stylesheets/expander.css
@@ -107,6 +107,6 @@
 
   &:hover,
   &:focus-visible {
-    background-color: oklch(var(--lch-white) / 15%);
+    background-color: oklch(var(--lch-ink-inverted) / 15%);
   }
 }
diff --git a/app/assets/stylesheets/flash.css b/app/assets/stylesheets/flash.css
index 8e5d08d67..8eaddb0aa 100644
--- a/app/assets/stylesheets/flash.css
+++ b/app/assets/stylesheets/flash.css
@@ -12,7 +12,7 @@
     animation: appear-then-fade 3s 300ms both;
     background-color: var(--flash-background, var(--color-ink));
     border-radius: 4em;
-    color: var(--flash-color, var(--color-ink-reversed));
+    color: var(--flash-color, var(--color-ink-inverted));
     display: inline-flex;
     font-size: var(--font-size-medium);
     margin: 0 auto;
diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css
index 30982ad76..429c0de0b 100644
--- a/app/assets/stylesheets/house.css
+++ b/app/assets/stylesheets/house.css
@@ -93,7 +93,7 @@
 
     &[status="failed"] {
       background-color: var(--color-negative);
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       font-weight: bold;
       padding: 0.5em;
     }
@@ -112,13 +112,13 @@
     cursor: pointer;
 
     house-md-upload[status="failed"] & {
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       display: inline-block;
     }
 
     &::before {
       content: '×';
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       font-size: 24px;
       font-weight: bold;
       position: absolute;
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 5e3ba772c..781649ce5 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -135,7 +135,7 @@
     &:has(:focus-visible) {
       .switch__btn {
         box-shadow:
-          0 0 0 var(--outline-size) var(--color-bg),
+          0 0 0 var(--outline-size) var(--color-canvas),
           0 0 0 calc(var(--outline-size) * 2) var(--color-ink);
       }
     }
@@ -156,7 +156,7 @@
     transition: 150ms ease;
 
     &::before {
-      background-color: var(--color-ink-reversed);
+      background-color: var(--color-ink-inverted);
       block-size: 1.35em;
       border-radius: 50%;
       content: "";
diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index 6dabfefc4..a9cef43ad 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -2,7 +2,7 @@
   .lightbox {
     --backdrop-speed: 150ms;
 
-    background-color: oklch(var(--lch-white) / 0.66);
+    background-color: oklch(var(--lch-ink-inverted) / 0.66);
     block-size: 100dvh;
     border: 0;
     inline-size: 100dvw;
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index d8779c2e6..bf8575ed4 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -62,7 +62,7 @@
 
   .notification__unread_indicator {
     --btn-background: var(--color-marker);
-    --btn-border-color: var(--color-bg);
+    --btn-border-color: var(--color-canvas);
     --btn-icon-size: 0.7em;
     --btn-padding: 0;
     --btn-size: 1.2em;
diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css
index 108d7c42a..8b3c23151 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -1,6 +1,6 @@
 @layer components {
   .panel {
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
     border-radius: var(--panel-border-radius, 1em);
     color: var(--color-ink);
diff --git a/app/assets/stylesheets/pins.css b/app/assets/stylesheets/pins.css
index e42f2d3e7..b8e44d7e2 100644
--- a/app/assets/stylesheets/pins.css
+++ b/app/assets/stylesheets/pins.css
@@ -30,7 +30,7 @@
       --block-space-half: 0.5em;
       --text-xx-large: 2em;
 
-      border: 1px solid var(--color-bg);
+      border: 1px solid var(--color-canvas);
     }
 
     .card__collection {
diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/syntax.css
index 0fb7e193b..0e518edff 100644
--- a/app/assets/stylesheets/syntax.css
+++ b/app/assets/stylesheets/syntax.css
@@ -83,7 +83,7 @@
     }
 
     .err {
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
       background-color: var(--markup-deleted);
     }
 
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index c37c6ae9c..806ea2d61 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -65,7 +65,7 @@
     --hover-size: 0;
 
     align-items: center;
-    color: var(--color-ink-reversed);
+    color: var(--color-ink-inverted);
     display: flex;
     gap: var(--inline-space-half);
     justify-content: space-between;
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 6ec13a630..3ddbfb2ee 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -14,7 +14,7 @@
   .txt-align-end { text-align: end; }
 
   .txt-ink { color: var(--color-ink); }
-  .txt-reversed { color: var(--color-ink-reversed); }
+  .txt-reversed { color: var(--color-ink-inverted); }
   .txt-negative { color: var(--color-negative); }
   .txt-subtle { color: var(--color-subtle-dark); }
   .txt-alert { color: var(--color-marker); }
@@ -146,9 +146,9 @@
   .position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); }
 
   /* Fills */
-  .fill { background-color: var(--color-bg); }
+  .fill { background-color: var(--color-canvas); }
   .fill-black { background-color: var(--color-ink); }
-  .fill-white { background-color: var(--color-ink-reversed); }
+  .fill-white { background-color: var(--color-ink-inverted); }
   .fill-shade { background-color: var(--color-subtle-light); }
   .fill-selected { background-color: var(--color-selected); }
   .fill-highlight { background-color: var(--color-highlight); }
diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index d69dbfe3b..ce36985de 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -20,7 +20,7 @@
   .workflow-stage--current {
     --btn-background: var(--card-color);
 
-    color: var(--color-ink-reversed);
+    color: var(--color-ink-inverted);
 
     @media (hover: hover) {
       &:hover {
@@ -33,7 +33,7 @@
 
       background: var(--card-color);
       border-radius: 0.2em;
-      color: var(--color-ink-reversed);
+      color: var(--color-ink-inverted);
     }
   }
 }
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
index 58f84eb8f..0f55d47be 100644
--- a/app/views/events/_event.html.erb
+++ b/app/views/events/_event.html.erb
@@ -3,7 +3,7 @@
 
 <%= link_to link,
       class: "event event--#{ event.action } panel center center-block flex-inline align-start justify-start gap position-relative",
-      style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-bg));
+      style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
   color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));",
       data: { related_element_target: "related",
               related_element_group_value: card.id,
diff --git a/public/406-unsupported-browser.html b/public/406-unsupported-browser.html
index 4af2887d3..93c900dad 100644
--- a/public/406-unsupported-browser.html
+++ b/public/406-unsupported-browser.html
@@ -12,17 +12,17 @@
     }
 
     body {
-      --lch-black: 0% 0 0;
+      --lch-ink: 0% 0 0;
       --lch-gray: 75% 0.005 96;
-      --lch-white: 100% 0 0;
+      --lch-ink-inverted: 100% 0 0;
 
       --color-border: oklch(var(--lch-gray));
-      --color-bg: oklch(var(--lch-white));
-      --color-text: oklch(var(--lch-black));
+      --color-canvas: oklch(var(--lch-ink-inverted));
+      --color-text: oklch(var(--lch-ink));
 
       --btn-size: 2.65em;
 
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       block-size: 100dvh;
       color: var(--color-text);
       display: grid;
@@ -32,9 +32,9 @@
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
       @media (prefers-color-scheme: dark) {
-        --lch-black: 100% 0 0;
-        --lch-gray: 44.95% 0 0;
-        --lch-white: 0% 0 0;
+        --lch-ink: 100% 0 0;
+        --lch-gray: 45% 0 0;
+        --lch-ink-inverted: 0% 0 0;
       }
     }
 
@@ -65,12 +65,12 @@
       inline-size: 30dvh;
 
       svg {
-        fill: var(--color-bg);
+        fill: var(--color-canvas);
         grid-area: 1/1;
         max-inline-size: 66%;
 
         @media (prefers-color-scheme: dark) {
-          fill: var(--color-bg);
+          fill: var(--color-canvas);
         }
       }
     }
@@ -91,7 +91,7 @@
     .btn {
       align-items: center;
       aspect-ratio: 1;
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       block-size: var(--btn-size);
       border-radius: 50%;
       border: 1px solid var(--color-border);

From b28f34dec6684857ed90f3101aeaacc96129def2 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 15:22:01 -0500
Subject: [PATCH 02/15] Convert LCH var names

---
 app/assets/stylesheets/_global.css   | 121 ++++++++++++++-------------
 app/assets/stylesheets/cards.css     |   2 +-
 app/assets/stylesheets/dialog.css    |   2 +-
 app/assets/stylesheets/terminals.css |   6 +-
 app/assets/stylesheets/trays.css     |   2 +-
 public/406-unsupported-browser.html  |   6 +-
 6 files changed, 74 insertions(+), 65 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 5252d7c47..6537bb8c3 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -23,78 +23,87 @@
   --border: 1px solid var(--color-subtle);
 
   /* Shadows */
-  --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.02),
-            0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
-            0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
-            0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
-            0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
-            0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
+  --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
+            0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.2),
+            0 .4em 2.4em -1em oklch(var(--lch-black) / 0.3),
+            0 .4em .8em -1.2em oklch(var(--lch-black) / 0.4),
+            0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.5),
+            0 1.2em 1.6em -2em oklch(var(--lch-black) / 0.6);
 
   /* Components */
   --btn-size: 2.65em;
 
   /* Color values */
-  --lch-ink: 27.13% 0.1035 284.77;
-  --lch-ink-inverted: 100% 0 0;
+  --lch-black: 0% 0 0;
+  --lch-white: 100% 0 0;
 
-  --lch-gray-light: 96% 0.005 96;
-  --lch-gray: 92% 0.005 96;
-  --lch-gray-dark: 75% 0.005 96;
-  --lch-blue: 54% 0.15 255;
-  --lch-blue-light: 95% 0.03 255;
-  --lch-blue-dark: 80% 0.08 255;
-  --lch-golden: 83% 0.1128 72.43;
-  --lch-orange: 70% 0.2 44;
-  --lch-red: 51% 0.2 31;
-  --lch-green: 65.59% 0.234 142.49;
-  --lch-green-light: 95% 0.03 142.49;
-  --lch-yellow: 92.62% 0.1 91.5;
-  --lch-always-black: 0% 0 0;
-  --lch-always-white: 100% 0 0;
-  --lch-light-blue: 84.94% 0.048 216.62;
+  --lch-ink: 27.13% 0.1035 284.77;
+  --lch-ink-lightest: 96% 0.005 96;
+  --lch-ink-lighter: 92% 0.005 96;
+  --lch-ink-medium: 75% 0.005 96;
+
+  --lch-ink-inverted: var(--lch-white);
+
+  --lch-red-dark: 51% 0.2 31;
+  --lch-red-medium: 70% 0.2 44;
+
+  --lch-yellow-light: 83% 0.1128 72.43;
+  --lch-yellow-lighter: 92.62% 0.1 91.5;
+
+  --lch-green-medium: 65.59% 0.234 142.49;
+  --lch-green-lightest: 95% 0.03 142.49;
+
+  --lch-aqua-light: 84.94% 0.048 216.62;
+
+  --lch-blue-dark: 54% 0.15 255;
+  --lch-blue-light: 80% 0.08 255;
+  --lch-blue-lighter: 95% 0.03 255;
 
   /* Color abstractions */
+  --color-black: oklch(var(--lch-black));
+  --color-white: oklch(var(--lch-white));
+
+  --color-canvas: oklch(var(--lch-white));
+
   --color-ink: oklch(var(--lch-ink));
+
   --color-ink-inverted: oklch(var(--lch-ink-inverted));
-  --color-canvas: oklch(var(--lch-ink-inverted));
 
+  --color-negative: oklch(var(--lch-red-dark));
+  --color-positive: oklch(var(--lch-green-medium));
+  --color-positive-light: oklch(var(--lch-green-lightest));
 
-  --color-negative: oklch(var(--lch-red));
-  --color-positive: oklch(var(--lch-green));
-  --color-positive-light: oklch(var(--lch-green-light));
-  --color-link: oklch(var(--lch-blue));
-  --color-subtle-light: oklch(var(--lch-gray-light));
-  --color-subtle: oklch(var(--lch-gray));
-  --color-subtle-dark: oklch(var(--lch-gray-dark));
-  --color-selected: oklch(var(--lch-blue-light));
-  --color-selected-dark: oklch(var(--lch-blue-dark));
-  --color-highlight: oklch(var(--lch-yellow));
-  --color-marker: oklch(var(--lch-orange));
-  --color-always-black: oklch(var(--lch-always-black));
-  --color-always-white: oklch(var(--lch-always-white));
-  --color-container: oklch(var(--lch-light-blue));
-  --color-golden: oklch(var(--lch-golden));
+  --color-link: oklch(var(--lch-blue-dark));
+  --color-subtle-light: oklch(var(--lch-ink-lightest));
+  --color-subtle: oklch(var(--lch-ink-lighter));
+  --color-subtle-dark: oklch(var(--lch-ink-medium));
+  --color-selected: oklch(var(--lch-blue-lighter));
+  --color-selected-dark: oklch(var(--lch-blue-light));
+  --color-highlight: oklch(var(--lch-yellow-lighter));
+  --color-marker: oklch(var(--lch-red-medium));
+  --color-container: oklch(var(--lch-aqua-light));
+  --color-golden: oklch(var(--lch-yellow-light));
 
   @media (prefers-color-scheme: dark) {
     --lch-ink: 100% 0 0;
     --lch-ink-inverted: 0% 0 0;
-    --lch-gray-light: 25.2% 0 0;
-    --lch-gray: 30.12% 0 0;
-    --lch-gray-dark: 44.95% 0 0;
-    --lch-blue: 72.25% 0.16 248;
-    --lch-blue-light: 28.11% 0.053 248;
-    --lch-blue-dark: 42.25% 0.07 248;
-    --lch-red: 73.8% 0.184 29.18;
-    --lch-green: 75% 0.21 141.89;
-    --lch-green-light: 28.11% 0.02 142.49;
-    --lch-yellow: 40.9% 0.06 88.9;
-    --lch-light-blue: 20.62% 0.048 216.62;
+    --lch-ink-lightest: 25.2% 0 0;
+    --lch-ink-lighter: 30.12% 0 0;
+    --lch-ink-medium: 44.95% 0 0;
+    --lch-blue-dark: 72.25% 0.16 248;
+    --lch-blue-lighter: 28.11% 0.053 248;
+    --lch-blue-light: 42.25% 0.07 248;
+    --lch-red-dark: 73.8% 0.184 29.18;
+    --lch-green-medium: 75% 0.21 141.89;
+    --lch-green-lightest: 28.11% 0.02 142.49;
+    --lch-yellow-lighter: 40.9% 0.06 88.9;
+    --lch-aqua-light: 20.62% 0.048 216.62;
 
-    --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42),
-              0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
-              0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
-              0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
-              0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
-              0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
+    --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
+              0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
+              0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
+              0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8),
+              0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
+              0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
   }
 }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 304ac51c2..a39b8b5ef 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -32,7 +32,7 @@
     --border-color: var(--color-canvas) !important;
 
     background-color: var(--color-canvas);
-    background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
+    background-image: linear-gradient(90deg, oklch(var(--lch-yellow-light) / 0.5) 0%, oklch(var(--lch-yellow-light) / 0.1) 50%, oklch(var(--lch-yellow-light) / 0.75) 100%);
     box-shadow:
       0 0 0.5em 0.2em var(--color-golden),
       0 0 1em 0.4em var(--color-golden) !important;
diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css
index ea7e10e15..93d40ee1d 100644
--- a/app/assets/stylesheets/dialog.css
+++ b/app/assets/stylesheets/dialog.css
@@ -15,7 +15,7 @@
         transform var(--speed);
 
     &::backdrop {
-      background-color: var(--color-always-black);
+      background-color: var(--color-black);
       opacity: 0;
       transform: scale(1);
       transition:
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index d431d3cfa..cf60ed210 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -12,7 +12,7 @@
     z-index: 1;
 
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-always-black);
+      background-color: var(--color-black);
       border-block-start: 1px solid var(--color-subtle-dark);
     }
 
@@ -29,12 +29,12 @@
       font-family: inherit;
 
       &::placeholder {
-        color: var(--color-always-white);
+        color: var(--color-white);
         opacity: 0.5;
       }
 
       .terminal__link & {
-        color: var(--color-always-white);
+        color: var(--color-white);
         opacity: 0.5;
       }
     }
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 806ea2d61..ecd042d1c 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -61,7 +61,7 @@
 
   .tray__actions {
     --border-style: dashed;
-    --border-color: color-mix(in srgb, var(--color-always-white) 40%, var(--color-ink));
+    --border-color: color-mix(in srgb, var(--color-white) 40%, var(--color-ink));
     --hover-size: 0;
 
     align-items: center;
diff --git a/public/406-unsupported-browser.html b/public/406-unsupported-browser.html
index 93c900dad..f78ac9454 100644
--- a/public/406-unsupported-browser.html
+++ b/public/406-unsupported-browser.html
@@ -13,10 +13,10 @@
 
     body {
       --lch-ink: 0% 0 0;
-      --lch-gray: 75% 0.005 96;
+      --lch-ink-lighter: 75% 0.005 96;
       --lch-ink-inverted: 100% 0 0;
 
-      --color-border: oklch(var(--lch-gray));
+      --color-border: oklch(var(--lch-ink-lighter));
       --color-canvas: oklch(var(--lch-ink-inverted));
       --color-text: oklch(var(--lch-ink));
 
@@ -33,7 +33,7 @@
 
       @media (prefers-color-scheme: dark) {
         --lch-ink: 100% 0 0;
-        --lch-gray: 45% 0 0;
+        --lch-ink-lighter: 45% 0 0;
         --lch-ink-inverted: 0% 0 0;
       }
     }

From 82c2c4b5bd25f20f4ce131068c69bfa4f0aa5f60 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 15:33:35 -0500
Subject: [PATCH 03/15] Add new light mode lch values

---
 app/assets/stylesheets/_global.css | 101 ++++++++++++++++++++++++-----
 1 file changed, 86 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 6537bb8c3..3c3d90a37 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -37,27 +37,98 @@
   --lch-black: 0% 0 0;
   --lch-white: 100% 0 0;
 
-  --lch-ink: 27.13% 0.1035 284.77;
-  --lch-ink-lightest: 96% 0.005 96;
-  --lch-ink-lighter: 92% 0.005 96;
-  --lch-ink-medium: 75% 0.005 96;
-
   --lch-ink-inverted: var(--lch-white);
 
-  --lch-red-dark: 51% 0.2 31;
-  --lch-red-medium: 70% 0.2 44;
+  --lch-ink-darkest: 32% 0.008 260;
+  --lch-ink-darker: 42% 0.007 260;
+  --lch-ink-dark: 56.5% 0.006 260;
+  --lch-ink-medium: 70% 0.005 260;
+  --lch-ink-light: 84% 0.004 260;
+  --lch-ink-lighter: 92% 0.003 260;
+  --lch-ink-lightest: 96% 0.002 260;
 
-  --lch-yellow-light: 83% 0.1128 72.43;
-  --lch-yellow-lighter: 92.62% 0.1 91.5;
+  --lch-uncolor-darkest: 32% 0.018 40;
+  --lch-uncolor-darker: 42% 0.03 50;
+  --lch-uncolor-dark: 58% 0.04 60;
+  --lch-uncolor-medium: 70% 0.044 70;
+  --lch-uncolor-light: 84% 0.028 80;
+  --lch-uncolor-lighter: 92% 0.014 90;
+  --lch-uncolor-lightest: 96% 0.012 100;
+
+  --lch-red-darkest: 32% 0.105 34;
+  --lch-red-darker: 43.1% 0.166 36;
+  --lch-red-dark: 59% 0.19 38;
+  --lch-red-medium: 70.4% 0.19 40;
+  --lch-red-light: 84% 0.07 42;
+  --lch-red-lighter: 92% 0.03 44;
+  --lch-red-lightest: 96% 0.013 48;
+
+  --lch-yellow-darkest: 32% 0.0729 40;
+  --lch-yellow-darker: 42% 0.124 50;
+  --lch-yellow-dark: 58% 0.156 60;
+  --lch-yellow-medium: 76% 0.17 70;
+  --lch-yellow-light: 84% 0.12 80;
+  --lch-yellow-lighter: 92% 0.076 90;
+  --lch-yellow-lightest: 96% 0.034 100;
+
+  --lch-lime-darkest: 32% 0.066 109;
+  --lch-lime-darker: 42% 0.104 110;
+  --lch-lime-dark: 56.5% 0.142 111;
+  --lch-lime-medium: 71% 0.158 112;
+  --lch-lime-light: 84% 0.08 113;
+  --lch-lime-lighter: 92% 0.046 114;
+  --lch-lime-lightest: 96% 0.034 115;
+
+  --lch-green-darkest: 32% 0.0705 149;
+  --lch-green-darker: 42% 0.12 148;
+  --lch-green-dark: 55.5% 0.162 147;
+  --lch-green-medium: 70% 0.19 146;
+  --lch-green-light: 84% 0.07 145;
+  --lch-green-lighter: 92% 0.044 144;
+  --lch-green-lightest: 96% 0.022 143;
+
+  --lch-aqua-darkest: 32% 0.059 214;
+  --lch-aqua-darker: 42% 0.097 212;
+  --lch-aqua-dark: 55.5% 0.122 210;
+  --lch-aqua-medium: 70% 0.13 208;
+  --lch-aqua-light: 84% 0.04 206;
+  --lch-aqua-lighter: 92% 0.02 204;
+  --lch-aqua-lightest: 96% 0.012 202;
+
+  --lch-blue-darkest: 32% 0.106 264;
+  --lch-blue-darker: 42% 0.166 262;
+  --lch-blue-dark: 57% 0.19 260;
+  --lch-blue-medium: 70% 0.169 258;
+  --lch-blue-light: 84% 0.06 256;
+  --lch-blue-lighter: 92% 0.026 254;
+  --lch-blue-lightest: 96% 0.016 252;
+
+  --lch-violet-darkest: 32% 0.144 292;
+  --lch-violet-darker: 42% 0.2 290;
+  --lch-violet-dark: 58% 0.216 288;
+  --lch-violet-medium: 70% 0.178 286;
+  --lch-violet-light: 84% 0.07 284.3;
+  --lch-violet-lighter: 92% 0.03 282;
+  --lch-violet-lightest: 96% 0.015 280;
+
+  --lch-purple-darkest: 32% 0.127 314;
+  --lch-purple-darker: 42% 0.178 312;
+  --lch-purple-dark: 58% 0.21 310;
+  --lch-purple-medium: 70% 0.22 308;
+  --lch-purple-light: 84% 0.07 306;
+  --lch-purple-lighter: 92% 0.03 304;
+  --lch-purple-lightest: 96% 0.019 302;
+
+  --lch-pink-darkest: 32% 0.12 348;
+  --lch-pink-darker: 42% 0.16 346;
+  --lch-pink-dark: 59% 0.188 344;
+  --lch-pink-medium: 70% 0.198 342;
+  --lch-pink-light: 84% 0.07 340;
+  --lch-pink-lighter: 92% 0.03 338;
+  --lch-pink-lightest: 96% 0.02 336;
 
-  --lch-green-medium: 65.59% 0.234 142.49;
-  --lch-green-lightest: 95% 0.03 142.49;
 
-  --lch-aqua-light: 84.94% 0.048 216.62;
 
-  --lch-blue-dark: 54% 0.15 255;
-  --lch-blue-light: 80% 0.08 255;
-  --lch-blue-lighter: 95% 0.03 255;
 
   /* Color abstractions */
   --color-black: oklch(var(--lch-black));

From ec7161bde5834ba283205a9780004e274425836b Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 15:42:17 -0500
Subject: [PATCH 04/15] Clean up abstractions

---
 app/assets/stylesheets/_global.css            | 27 ++++++++++---------
 app/assets/stylesheets/base.css               |  2 +-
 app/assets/stylesheets/buttons.css            |  2 +-
 app/assets/stylesheets/card-columns.css       | 10 +++----
 app/assets/stylesheets/cards.css              |  2 +-
 app/assets/stylesheets/comment-content.css    |  8 +++---
 app/assets/stylesheets/comments.css           |  2 +-
 app/assets/stylesheets/expander.css           |  2 +-
 app/assets/stylesheets/filters.css            |  2 +-
 app/assets/stylesheets/house.css              |  8 +++---
 app/assets/stylesheets/inputs.css             |  6 ++---
 app/assets/stylesheets/layout.css             |  4 +--
 app/assets/stylesheets/lightbox.css           |  2 +-
 app/assets/stylesheets/notifications.css      |  8 +++---
 app/assets/stylesheets/panels.css             |  4 +--
 app/assets/stylesheets/popup.css              |  4 +--
 app/assets/stylesheets/reactions.css          |  6 ++---
 app/assets/stylesheets/syntax.css             |  2 +-
 app/assets/stylesheets/terminals.css          |  2 +-
 app/assets/stylesheets/utilities.css          | 12 ++++-----
 app/views/collections/_access_toggle.erb      |  2 +-
 app/views/collections/edit.html.erb           |  4 +--
 app/views/events/index.html.erb               |  4 +--
 app/views/filters/_dialog.html.erb            |  2 +-
 .../settings/_collection.html.erb             |  2 +-
 app/views/tags/index.html.erb                 |  2 +-
 app/views/users/_user.html.erb                |  2 +-
 app/views/workflows/_workflow.html.erb        |  2 +-
 28 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 3c3d90a37..03d309bac 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -20,7 +20,7 @@
   --text-xx-large: 2.5rem;
 
   /* Borders */
-  --border: 1px solid var(--color-subtle);
+  --border: 1px solid var(--color-ink-lighter);
 
   /* Shadows */
   --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.02),
@@ -127,27 +127,28 @@
   --lch-pink-lighter: 92% 0.03 338;
   --lch-pink-lightest: 96% 0.02 336;
 
-
-
-
-  /* Color abstractions */
+  /* Named colors */
   --color-black: oklch(var(--lch-black));
   --color-white: oklch(var(--lch-white));
 
-  --color-canvas: oklch(var(--lch-white));
-
-  --color-ink: oklch(var(--lch-ink));
+  --color-ink: oklch(var(--lch-ink-darkest));
+  --color-ink-darkest: oklch(var(--lch-ink-darkest));
+  --color-ink-darker: oklch(var(--lch-ink-darker));
+  --color-ink-dark: oklch(var(--lch-ink-dark));
+  --color-ink-medium: oklch(var(--lch-ink-medium));
+  --color-ink-light: oklch(var(--lch-ink-light));
+  --color-ink-lighter: oklch(var(--lch-ink-lighter));
+  --color-ink-lightest: oklch(var(--lch-ink-lightest));
 
   --color-ink-inverted: oklch(var(--lch-ink-inverted));
 
+  /* Color abstractions */
+  --color-canvas: oklch(var(--lch-white));
+
   --color-negative: oklch(var(--lch-red-dark));
-  --color-positive: oklch(var(--lch-green-medium));
-  --color-positive-light: oklch(var(--lch-green-lightest));
+  --color-positive: oklch(var(--lch-green-dark));
 
   --color-link: oklch(var(--lch-blue-dark));
-  --color-subtle-light: oklch(var(--lch-ink-lightest));
-  --color-subtle: oklch(var(--lch-ink-lighter));
-  --color-subtle-dark: oklch(var(--lch-ink-medium));
   --color-selected: oklch(var(--lch-blue-lighter));
   --color-selected-dark: oklch(var(--lch-blue-light));
   --color-highlight: oklch(var(--lch-yellow-lighter));
diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css
index 08368757e..6bebd44d5 100644
--- a/app/assets/stylesheets/base.css
+++ b/app/assets/stylesheets/base.css
@@ -11,7 +11,7 @@
     --font-sans: system-ui;
     --font-serif: ui-serif, serif;
     --font-mono: ui-monospace, monospace;
-    --hover-color: var(--color-subtle-dark);
+    --hover-color: var(--color-ink-medium);
     --hover-size: 0.15rem;
     --hover-filter: brightness(1);
 
diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index fea991bff..f96449aae 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -6,7 +6,7 @@
     align-items: center;
     background-color: var(--btn-background, var(--color-canvas));
     border-radius: var(--btn-border-radius);
-    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-subtle-dark));
+    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-medium));
     color: var(--btn-color, var(--color-ink));
     cursor: pointer;
     display: inline-flex;
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 268d82463..a1fc317b9 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -10,7 +10,7 @@
   }
 
   .card-columns {
-    border-block-start: 1px solid var(--color-subtle);
+    border-block-start: 1px solid var(--color-ink-lighter);
     display: grid;
     grid-template-columns: repeat(2, 50%);
     margin: auto;
@@ -78,11 +78,11 @@
       --text-small: 1.1em;
 
       background-color: var(--color-canvas);
-      box-shadow: 0 0 0 1px var(--color-subtle);
+      box-shadow: 0 0 0 1px var(--color-ink-lighter);
       line-height: 1.2;
 
       @media (prefers-color-scheme: dark) {
-        box-shadow: 0 0 0 1px var(--color-subtle-dark);
+        box-shadow: 0 0 0 1px var(--color-ink-medium);
       }
 
       .avatar {
@@ -92,7 +92,7 @@
     }
 
     .card--drafted {
-      --card-color: var(--color-subtle-dark) !important;
+      --card-color: var(--color-ink-medium) !important;
 
       border-color: var(--card-color) !important;
       border-style: dashed !important;
@@ -124,7 +124,7 @@
   /* -------------------------------------------------------------------------- */
 
   .cards--closed {
-    border-block-start: 1px solid var(--color-subtle);
+    border-block-start: 1px solid var(--color-ink-lighter);
     justify-content: center;
     flex-direction: row;
     flex-wrap: wrap;
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index a39b8b5ef..226ddc59d 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -24,7 +24,7 @@
     }
 
     @media (prefers-color-scheme: dark) {
-      --border-color: var(--color-subtle-dark);
+      --border-color: var(--color-ink-medium);
     }
   }
 
diff --git a/app/assets/stylesheets/comment-content.css b/app/assets/stylesheets/comment-content.css
index 9944ed45f..a11b8dbf8 100644
--- a/app/assets/stylesheets/comment-content.css
+++ b/app/assets/stylesheets/comment-content.css
@@ -27,7 +27,7 @@
     }
 
     :where(hr) {
-      border-color: var(--color-subtle-dark);
+      border-color: var(--color-ink-medium);
       border-style: var(--border-style, solid) none none;
       margin: 2lh auto;
     }
@@ -37,8 +37,8 @@
     }
 
     :is(pre, code, .pre, .code) {
-      background-color: var(--color-subtle-light);
-      border: 1px solid var(--color-subtle);
+      background-color: var(--color-ink-lightest);
+      border: 1px solid var(--color-ink-lighter);
       border-radius: 0.3em;
       font-family: var(--font-mono);
       font-size: 0.85em;
@@ -80,7 +80,7 @@
     }
 
     :where(table, th, td) {
-      border: 1px solid var(--color-subtle-dark);
+      border: 1px solid var(--color-ink-medium);
     }
 
     :where(table) {
diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 2db3016db..a22069fc9 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -63,7 +63,7 @@
   }
 
   .comment__content {
-    background-color: var(--color-subtle-light);
+    background-color: var(--color-ink-lightest);
     border-radius: 0.2em;
     padding:
       var(--comment-padding-block)
diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css
index a1f6da0dc..291851b34 100644
--- a/app/assets/stylesheets/expander.css
+++ b/app/assets/stylesheets/expander.css
@@ -107,6 +107,6 @@
 
   &:hover,
   &:focus-visible {
-    background-color: oklch(var(--lch-ink-inverted) / 15%);
+    background-color: oklch(var(--lch-canvas) / 15%);
   }
 }
diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css
index cf7c894f0..612a1b4a1 100644
--- a/app/assets/stylesheets/filters.css
+++ b/app/assets/stylesheets/filters.css
@@ -67,7 +67,7 @@
       block-size: 100%;
       border-block: 0;
       border-inline-end: 0;
-      border-inline-start: 1px solid var(--color-subtle);
+      border-inline-start: 1px solid var(--color-ink-lighter);
       content: "";
       display: inline-flex;
       inline-size: 0;
diff --git a/app/assets/stylesheets/house.css b/app/assets/stylesheets/house.css
index 429c0de0b..810fc7b17 100644
--- a/app/assets/stylesheets/house.css
+++ b/app/assets/stylesheets/house.css
@@ -13,7 +13,7 @@
   /* Toolbar */
   house-md-toolbar {
     background-color: inherit;
-    border-block-end: 1px solid var(--color-subtle-dark);
+    border-block-end: 1px solid var(--color-ink-medium);
     border-radius: 0;
     color: currentColor;
     display: inline-flex;
@@ -47,7 +47,7 @@
       }
 
       &:is(:focus, :hover) {
-        background-color: var(--color-subtle);
+        background-color: var(--color-ink-lighter);
       }
 
       &:is(:active) {
@@ -139,7 +139,7 @@
   .md-progress-bar {
     -webkit-appearance: none;
     appearance: none;
-    background-color: var(--color-subtle);
+    background-color: var(--color-ink-lighter);
     border-radius: 0.5em;
     block-size: 1ex;
     display: block;
@@ -154,7 +154,7 @@
 
     &::-webkit-progress-bar {
       border-radius: 0.5em;
-      background-color: var(--color-subtle);
+      background-color: var(--color-ink-lighter);
     }
 
     &::-webkit-progress-inner-element {
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index 781649ce5..341d9a059 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -4,7 +4,7 @@
     accent-color: var(--input-accent-color, var(--color-ink));
     background-color: var(--input-background, transparent);
     border-radius: var(--input-border-radius, 0.5em);
-    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-subtle-dark));
+    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
     color: var(--input-color, var(--color-ink));
     font-size: max(16px, 1em);
     inline-size: 100%;
@@ -148,7 +148,7 @@
   }
 
   .switch__btn {
-    background-color: var(--color-subtle-dark);
+    background-color: var(--color-ink-medium);
     border-radius: 2em;
     cursor: pointer;
     inset: 0;
@@ -168,7 +168,7 @@
     }
 
     .switch__input:disabled + & {
-      background-color: var(--color-subtle-dark) !important;
+      background-color: var(--color-ink-medium) !important;
       cursor: not-allowed;
     }
 
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index c38100393..adbccc90f 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -53,7 +53,7 @@
         }
 
         a:not([class]) {
-          background-color: var(--color-subtle-light);
+          background-color: var(--color-ink-lightest);
           border-radius: 2em;
           color: var(--color-ink);
           font-weight: 500;
@@ -62,7 +62,7 @@
 
           @media (hover: hover) {
             &:hover {
-              background-color: var(--color-subtle);
+              background-color: var(--color-ink-lighter);
               text-decoration: none;
             }
           }
diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index a9cef43ad..a8e41db2b 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -2,7 +2,7 @@
   .lightbox {
     --backdrop-speed: 150ms;
 
-    background-color: oklch(var(--lch-ink-inverted) / 0.66);
+    background-color: oklch(var(--lch-canvas) / 0.66);
     block-size: 100dvh;
     border: 0;
     inline-size: 100dvw;
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index bf8575ed4..a1bb0f911 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -46,11 +46,11 @@
     padding: var(--padding);
 
     @media (prefers-color-scheme: dark) {
-      --border-color: var(--color-subtle-dark);
+      --border-color: var(--color-ink-medium);
     }
 
     .notificiations-list--read & {
-      --border-color: var(--color-subtle);
+      --border-color: var(--color-ink-lighter);
 
       box-shadow: none !important;
     }
@@ -78,8 +78,8 @@
 
     @media (hover: hover) {
       &:hover {
-        --btn-background: var(--color-subtle-dark);
-        --btn-border-color: var(--color-subtle-dark);
+        --btn-background: var(--color-ink-medium);
+        --btn-border-color: var(--color-ink-medium);
 
         scale: 1;
 
diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css
index 8b3c23151..863445f5c 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -1,7 +1,7 @@
 @layer components {
   .panel {
     background-color: var(--color-canvas);
-    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-subtle));
+    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
     border-radius: var(--panel-border-radius, 1em);
     color: var(--color-ink);
     inline-size: var(--panel-size, 60ch);
@@ -9,7 +9,7 @@
     padding: var(--panel-padding, calc(var(--block-space) * 2));
 
     @media (prefers-color-scheme: dark) {
-      --panel-border-color: var(--color-subtle-dark);
+      --panel-border-color: var(--color-ink-medium);
     }
   }
 }
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 5c8ec1b95..a9bccdf4d 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -17,7 +17,7 @@
   }
 
   .popup__item {
-    --btn-background: var(--color-subtle-light);
+    --btn-background: var(--color-ink-lightest);
     --btn-border-radius: 0.3em;
     --btn-border-size: 0;
     --btn-font-weight: 500;
@@ -29,7 +29,7 @@
 
     &::after {
       border-radius: var(--btn-border-radius);
-      border: var(--btn-border-size) solid var(--btn-border-color, var(--color-subtle));
+      border: var(--btn-border-size) solid var(--btn-border-color, var(--color-ink-lighter));
       content: "";
       display: block;
       inline-size: calc(100% - var(--btn-padding) * 2);
diff --git a/app/assets/stylesheets/reactions.css b/app/assets/stylesheets/reactions.css
index 9c0a4e410..7414bbcd8 100644
--- a/app/assets/stylesheets/reactions.css
+++ b/app/assets/stylesheets/reactions.css
@@ -1,7 +1,7 @@
 @layer components {
   .reactions {
     --column-gap: 0.4ch;
-    --reaction-border-color: var(--color-subtle);
+    --reaction-border-color: var(--color-ink-lighter);
     --row-gap: 0;
 
     margin-block-start: calc(var(--block-space-half) / 2);
@@ -30,7 +30,7 @@
 
     @media (any-hover: hover) {
       &:where(:not(:active):hover) {
-        --reaction-border-color: var(--color-subtle-dark);
+        --reaction-border-color: var(--color-ink-medium);
 
         box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
       }
@@ -52,7 +52,7 @@
 
     @media (any-hover: hover) {
       &:where(:not(:active):hover) {
-        --reaction-border-color: var(--color-subtle-dark);
+        --reaction-border-color: var(--color-ink-medium);
       }
     }
   }
diff --git a/app/assets/stylesheets/syntax.css b/app/assets/stylesheets/syntax.css
index 0e518edff..7ddc2cf42 100644
--- a/app/assets/stylesheets/syntax.css
+++ b/app/assets/stylesheets/syntax.css
@@ -39,7 +39,7 @@
     }
 
     .gr {
-      color: var(--color-subtle-light);
+      color: var(--color-ink-lightest);
     }
 
     .gd {
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index cf60ed210..9bae337d7 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -13,7 +13,7 @@
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-black);
-      border-block-start: 1px solid var(--color-subtle-dark);
+      border-block-start: 1px solid var(--color-ink-medium);
     }
 
     .terminal__input {
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 3ddbfb2ee..94a2badd7 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -16,7 +16,7 @@
   .txt-ink { color: var(--color-ink); }
   .txt-reversed { color: var(--color-ink-inverted); }
   .txt-negative { color: var(--color-negative); }
-  .txt-subtle { color: var(--color-subtle-dark); }
+  .txt-subtle { color: var(--color-ink-medium); }
   .txt-alert { color: var(--color-marker); }
   .txt-undecorated { text-decoration: none; }
   .txt-tight-lines { line-height: 1.2; }
@@ -149,7 +149,7 @@
   .fill { background-color: var(--color-canvas); }
   .fill-black { background-color: var(--color-ink); }
   .fill-white { background-color: var(--color-ink-inverted); }
-  .fill-shade { background-color: var(--color-subtle-light); }
+  .fill-shade { background-color: var(--color-ink-lightest); }
   .fill-selected { background-color: var(--color-selected); }
   .fill-highlight { background-color: var(--color-highlight); }
   .fill-transparent { background-color: transparent; }
@@ -157,10 +157,10 @@
   .translucent { opacity: var(--opacity, 0.66); }
 
   /* Borders */
-  .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
-  .border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
-  .border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
-  .border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-subtle)); }
+  .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
+  .border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
+  .border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
+  .border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
   .borderless { border: 0; }
 
   /* Border radius */
diff --git a/app/views/collections/_access_toggle.erb b/app/views/collections/_access_toggle.erb
index aee7bb248..4e7171e07 100644
--- a/app/views/collections/_access_toggle.erb
+++ b/app/views/collections/_access_toggle.erb
@@ -9,7 +9,7 @@
     </div>
   </div>
 
-  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
+  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
 
   <%= icon_tag "check", class: "toggler__visible-when-on" %>
 
diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb
index a31b65d2b..970d1d3f9 100644
--- a/app/views/collections/edit.html.erb
+++ b/app/views/collections/edit.html.erb
@@ -35,7 +35,7 @@
             <div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
           </div>
 
-          <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true" />
+          <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
 
           <label for="collection_all_access" class="switch">
             <%= form.check_box :all_access, class: "switch__input", checked: @collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
@@ -44,7 +44,7 @@
           </label>
         </li>
 
-        <hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
+        <hr class="separator--horizontal full-width" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
 
         <% if User.active.count > 20 %>
           <input placeholder="Filter…" class="input input--transparent full-width" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-action="input->filter#filter">
diff --git a/app/views/events/index.html.erb b/app/views/events/index.html.erb
index 8bcd35e80..86ba20d61 100644
--- a/app/views/events/index.html.erb
+++ b/app/views/events/index.html.erb
@@ -19,7 +19,7 @@
 <div class="events__container align-start gap">
   <div class="txt-align-start">
     <h2 class="txt-normal txt-uppercase txt-nowrap">Custom views</h2>
-    <div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
+    <div style="border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: var(--block-space-half);">
       <% @filters.each do |filter| %>
         <h3 class="txt-small margin-block-end-half txt-tight-lines">
           <%= link_to filter.summary, cards_path(**filter.as_params) %>
@@ -43,7 +43,7 @@
       <% end %>
     </div>
 
-    <div style="border-block-start: 1px solid var(--color-subtle); padding-block-start: var(--block-space-half);">
+    <div style="border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: var(--block-space-half);">
       <% @collections.each do |collection| %>
         <h3 class="txt-small margin-block-end-half txt-tight-lines"><%= link_to collection.name, cards_path(collection_ids: [ collection ]) %></h3>
       <% end %>
diff --git a/app/views/filters/_dialog.html.erb b/app/views/filters/_dialog.html.erb
index e20219364..c81aaf436 100644
--- a/app/views/filters/_dialog.html.erb
+++ b/app/views/filters/_dialog.html.erb
@@ -31,7 +31,7 @@
       <% end %>
     </div>
 
-    <%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-subtle)" do %>
+    <%= form_with url: cards_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-ink-lighter)" do %>
       <% Array(params[:terms]).each do |term| %>
         <%= hidden_field_tag "terms[]", term, id: nil %>
       <% end %>
diff --git a/app/views/notifications/settings/_collection.html.erb b/app/views/notifications/settings/_collection.html.erb
index ad680363a..eb28e7ce8 100644
--- a/app/views/notifications/settings/_collection.html.erb
+++ b/app/views/notifications/settings/_collection.html.erb
@@ -4,7 +4,7 @@
       <%= collection.name %>
     </h2>
 
-    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
+    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
 
     <label class="switch flex-item-no-shrink">
       <%= access_involvement_advance_button(collection, user) %>
diff --git a/app/views/tags/index.html.erb b/app/views/tags/index.html.erb
index 0ca56680c..a89e94c86 100644
--- a/app/views/tags/index.html.erb
+++ b/app/views/tags/index.html.erb
@@ -2,7 +2,7 @@
   <h1>All tags</h1>
   <ul class="txt-align-start">
     <% @tags.each do |tag| %>
-      <li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-subtle)">
+      <li class="flex align-start justify-space-between gap pad" style="border-block-end: 1px solid var(--color-ink-lighter)">
         <span>
           <strong class="txt-nowrap"><%= tag.title %></strong>
         </span>
diff --git a/app/views/users/_user.html.erb b/app/views/users/_user.html.erb
index 950df8ccc..09374b344 100644
--- a/app/views/users/_user.html.erb
+++ b/app/views/users/_user.html.erb
@@ -5,7 +5,7 @@
     <%= link_to user.name, user, class: "txt-ink btn btn--plain" %>
   </strong>
 
-  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true">
+  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">
 
   <%= form_with model: user, url: user_role_path(user), data: { controller: "form" }, method: :patch do | form | %>
     <label class="btn txt-small flex-item-no-shrink" for="<%= dom_id(user, :role) %>" arial-label="Role: <%= user.admin? ? "Administrator" : "Member" %>">
diff --git a/app/views/workflows/_workflow.html.erb b/app/views/workflows/_workflow.html.erb
index 6ec1e289f..5cbf7d3e3 100644
--- a/app/views/workflows/_workflow.html.erb
+++ b/app/views/workflows/_workflow.html.erb
@@ -8,7 +8,7 @@
       <% end %>
     </div>
 
-    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark);" aria-hidden="true">
+    <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium);" aria-hidden="true">
 
     <div class="flex flex-column gap margin-block-start">
       <%= turbo_frame_tag dom_id(workflow, :stages) do %>

From 744b1b402ab5f526df5331928212d7491ab9399e Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 16:36:57 -0500
Subject: [PATCH 05/15] Add dark mode OKLCH values

---
 app/assets/stylesheets/_global.css | 137 +++++++++++++++++++++++------
 1 file changed, 108 insertions(+), 29 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 03d309bac..73d9f57b4 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -33,11 +33,12 @@
   /* Components */
   --btn-size: 2.65em;
 
-  /* Color values */
+  /* OKLCH colors: Fixed */
   --lch-black: 0% 0 0;
   --lch-white: 100% 0 0;
 
-  --lch-ink-inverted: var(--lch-white);
+  /* OKLCH colors: Light mode */
+  --lch-canvas: var(--lch-white);
 
   --lch-ink-darkest: 32% 0.008 260;
   --lch-ink-darker: 42% 0.007 260;
@@ -47,6 +48,8 @@
   --lch-ink-lighter: 92% 0.003 260;
   --lch-ink-lightest: 96% 0.002 260;
 
+  --lch-ink-inverted: var(--lch-white);
+
   --lch-uncolor-darkest: 32% 0.018 40;
   --lch-uncolor-darker: 42% 0.03 50;
   --lch-uncolor-dark: 58% 0.04 60;
@@ -127,7 +130,106 @@
   --lch-pink-lighter: 92% 0.03 338;
   --lch-pink-lightest: 96% 0.02 336;
 
-  /* Named colors */
+  @media (prefers-color-scheme: dark) {
+    --lch-canvas: 20% 0.0195 232.58;
+
+    --lch-ink-darkest: 96.02% 0.0034 260;
+    --lch-ink-darker: 86% 0.0061 260;
+    --lch-ink-dark: 73.97% 0.009 260;
+    --lch-ink-medium: 62% 0.0122 260;
+    --lch-ink-light: 40% 0.0148 260;
+    --lch-ink-lighter: 30% 0.0178 260;
+    --lch-ink-lightest: 25% 0.0204 260;
+
+    --lch-uncolor-darkest: 96.09% 0.0076 100;
+    --lch-uncolor-darker: 86% 0.021 90;
+    --lch-uncolor-dark: 73.93% 0.041 80;
+    --lch-uncolor-medium: 62% 0.0552 70;
+    --lch-uncolor-light: 40% 0.0387 60;
+    --lch-uncolor-lighter: 30% 0.012 50;
+    --lch-uncolor-lightest: 25% 0.0017 40;
+
+    --lch-red-darkest: 95.85% 0.0218 46;
+    --lch-red-darker: 86% 0.086 44;
+    --lch-red-dark: 73.95% 0.139 42;
+    --lch-red-medium: 62% 0.154 40;
+    --lch-red-light: 40% 0.088 38;
+    --lch-red-lighter: 30% 0.032 36;
+    --lch-red-lightest: 25% 0.011 34;
+
+    --lch-yellow-darkest: 96% 0.056 100;
+    --lch-yellow-darker: 86% 0.103 90;
+    --lch-yellow-dark: 74.06% 0.136 80;
+    --lch-yellow-medium: 62.1% 0.146 70;
+    --lch-yellow-light: 40% 0.0736 60;
+    --lch-yellow-lighter: 30% 0.026 50;
+    --lch-yellow-lightest: 25% 0.01 40;
+
+    --lch-lime-darkest: 96.04% 0.066 115;
+    --lch-lime-darker: 86% 0.098 114;
+    --lch-lime-dark: 73.97% 0.121 113;
+    --lch-lime-medium: 62% 0.128 112;
+    --lch-lime-light: 40% 0.0637 111;
+    --lch-lime-lighter: 30% 0.024 110;
+    --lch-lime-lightest: 25% 0.012 109;
+
+    --lch-green-darkest: 96.12% 0.035 143;
+    --lch-green-darker: 86% 0.082 144;
+    --lch-green-dark: 73.99% 0.117 145;
+    --lch-green-medium: 62% 0.1261 146;
+    --lch-green-light: 40% 0.065 147;
+    --lch-green-lighter: 30% 0.03 148;
+    --lch-green-lightest: 25% 0.018 149;
+
+    --lch-aqua-darkest: 96.15% 0.0244 202;
+    --lch-aqua-darker: 86% 0.06 204;
+    --lch-aqua-dark: 73.92% 0.095 206;
+    --lch-aqua-medium: 62% 0.106 208;
+    --lch-aqua-light: 40% 0.0594 210;
+    --lch-aqua-lighter: 30% 0.028 212;
+    --lch-aqua-lightest: 25% 0.017 214;
+
+    --lch-blue-darkest: 95.93% 0.0217 252;
+    --lch-blue-darker: 86% 0.068 254;
+    --lch-blue-dark: 74% 0.1293 256;
+    --lch-blue-medium: 62% 0.159 258;
+    --lch-blue-light: 40% 0.094 260;
+    --lch-blue-lighter: 30% 0.0452 262;
+    --lch-blue-lightest: 25% 0.0318 264;
+
+    --lch-violet-darkest: 95.97% 0.019 280;
+    --lch-violet-darker: 86% 0.068 282;
+    --lch-violet-dark: 74.08% 0.142 284;
+    --lch-violet-medium: 62% 0.184 286;
+    --lch-violet-light: 40% 0.108 288;
+    --lch-violet-lighter: 30% 0.048 290;
+    --lch-violet-lightest: 25% 0.025 292;
+
+    --lch-purple-darkest: 95.99% 0.0217 302;
+    --lch-purple-darker: 86% 0.068 304;
+    --lch-purple-dark: 73.98% 0.141 306;
+    --lch-purple-medium: 62% 0.177 308;
+    --lch-purple-light: 40% 0.099 310;
+    --lch-purple-lighter: 30% 0.04 312;
+    --lch-purple-lightest: 25% 0.017 314;
+
+    --lch-pink-darkest: 95.84% 0.0308 336;
+    --lch-pink-darker: 86% 0.074 338;
+    --lch-pink-dark: 74.04% 0.1294 340;
+    --lch-pink-medium: 62% 0.166 342;
+    --lch-pink-light: 40% 0.085 344;
+    --lch-pink-lighter: 30% 0.03 346;
+    --lch-pink-lightest: 25% 0.011 348;
+
+    --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
+              0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
+              0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
+              0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8),
+              0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
+              0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
+  }
+
+  /* Colors: Named */
   --color-black: oklch(var(--lch-black));
   --color-white: oklch(var(--lch-white));
 
@@ -142,8 +244,8 @@
 
   --color-ink-inverted: oklch(var(--lch-ink-inverted));
 
-  /* Color abstractions */
-  --color-canvas: oklch(var(--lch-white));
+  /* Colors: Abstractions */
+  --color-canvas: oklch(var(--lch-canvas));
 
   --color-negative: oklch(var(--lch-red-dark));
   --color-positive: oklch(var(--lch-green-dark));
@@ -153,29 +255,6 @@
   --color-selected-dark: oklch(var(--lch-blue-light));
   --color-highlight: oklch(var(--lch-yellow-lighter));
   --color-marker: oklch(var(--lch-red-medium));
-  --color-container: oklch(var(--lch-aqua-light));
+  --color-container: oklch(var(--lch-aqua-lighter));
   --color-golden: oklch(var(--lch-yellow-light));
-
-  @media (prefers-color-scheme: dark) {
-    --lch-ink: 100% 0 0;
-    --lch-ink-inverted: 0% 0 0;
-    --lch-ink-lightest: 25.2% 0 0;
-    --lch-ink-lighter: 30.12% 0 0;
-    --lch-ink-medium: 44.95% 0 0;
-    --lch-blue-dark: 72.25% 0.16 248;
-    --lch-blue-lighter: 28.11% 0.053 248;
-    --lch-blue-light: 42.25% 0.07 248;
-    --lch-red-dark: 73.8% 0.184 29.18;
-    --lch-green-medium: 75% 0.21 141.89;
-    --lch-green-lightest: 28.11% 0.02 142.49;
-    --lch-yellow-lighter: 40.9% 0.06 88.9;
-    --lch-aqua-light: 20.62% 0.048 216.62;
-
-    --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
-              0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
-              0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
-              0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8),
-              0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
-              0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
-  }
 }

From 8a6ffda4cf9be5c0e65b0e8f1b7dd8ed26344c83 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 16:40:05 -0500
Subject: [PATCH 06/15] Subtler borders for cards in dark mode

---
 app/assets/stylesheets/card-columns.css | 4 ----
 app/assets/stylesheets/cards.css        | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index a1fc317b9..ad64cda2d 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -81,10 +81,6 @@
       box-shadow: 0 0 0 1px var(--color-ink-lighter);
       line-height: 1.2;
 
-      @media (prefers-color-scheme: dark) {
-        box-shadow: 0 0 0 1px var(--color-ink-medium);
-      }
-
       .avatar {
         block-size: 2.75em;
         inline-size: 2.75em;
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 226ddc59d..794733da3 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -22,10 +22,6 @@
     .avatar {
       --avatar-size: 2.75em;
     }
-
-    @media (prefers-color-scheme: dark) {
-      --border-color: var(--color-ink-medium);
-    }
   }
 
   .card--golden.card--doing {

From 58b8fee20194acb6bc7a6c82b3e492bc6b249e71 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 16:49:28 -0500
Subject: [PATCH 07/15] FIx terminal colors

---
 app/assets/stylesheets/_global.css   | 65 ++++++++++++++--------------
 app/assets/stylesheets/terminals.css | 12 ++---
 2 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 73d9f57b4..7ab0bc913 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -39,91 +39,90 @@
 
   /* OKLCH colors: Light mode */
   --lch-canvas: var(--lch-white);
-
-  --lch-ink-darkest: 32% 0.008 260;
-  --lch-ink-darker: 42% 0.007 260;
-  --lch-ink-dark: 56.5% 0.006 260;
-  --lch-ink-medium: 70% 0.005 260;
-  --lch-ink-light: 84% 0.004 260;
-  --lch-ink-lighter: 92% 0.003 260;
-  --lch-ink-lightest: 96% 0.002 260;
-
   --lch-ink-inverted: var(--lch-white);
 
-  --lch-uncolor-darkest: 32% 0.018 40;
-  --lch-uncolor-darker: 42% 0.03 50;
+  --lch-ink-darkest: 28% 0.008 264;
+  --lch-ink-darker: 40% 0.007 262;
+  --lch-ink-dark: 56.5% 0.006 260;
+  --lch-ink-medium: 70% 0.005 258;
+  --lch-ink-light: 84% 0.004 256;
+  --lch-ink-lighter: 92% 0.003 254;
+  --lch-ink-lightest: 96% 0.002 252;
+
+  --lch-uncolor-darkest: 28% 0.018 40;
+  --lch-uncolor-darker: 40% 0.03 50;
   --lch-uncolor-dark: 58% 0.04 60;
   --lch-uncolor-medium: 70% 0.044 70;
   --lch-uncolor-light: 84% 0.028 80;
   --lch-uncolor-lighter: 92% 0.014 90;
   --lch-uncolor-lightest: 96% 0.012 100;
 
-  --lch-red-darkest: 32% 0.105 34;
-  --lch-red-darker: 43.1% 0.166 36;
+  --lch-red-darkest: 28% 0.105 34;
+  --lch-red-darker: 40% 0.154 36;
   --lch-red-dark: 59% 0.19 38;
   --lch-red-medium: 70.4% 0.19 40;
   --lch-red-light: 84% 0.07 42;
   --lch-red-lighter: 92% 0.03 44;
-  --lch-red-lightest: 96% 0.013 48;
+  --lch-red-lightest: 96% 0.013 46;
 
-  --lch-yellow-darkest: 32% 0.0729 40;
-  --lch-yellow-darker: 42% 0.124 50;
+  --lch-yellow-darkest: 28% 0.0729 40;
+  --lch-yellow-darker: 40% 0.12 50;
   --lch-yellow-dark: 58% 0.156 60;
   --lch-yellow-medium: 76% 0.17 70;
   --lch-yellow-light: 84% 0.12 80;
   --lch-yellow-lighter: 92% 0.076 90;
   --lch-yellow-lightest: 96% 0.034 100;
 
-  --lch-lime-darkest: 32% 0.066 109;
-  --lch-lime-darker: 42% 0.104 110;
+  --lch-lime-darkest: 28% 0.066 109;
+  --lch-lime-darker: 40% 0.101 110;
   --lch-lime-dark: 56.5% 0.142 111;
   --lch-lime-medium: 71% 0.158 112;
   --lch-lime-light: 84% 0.08 113;
   --lch-lime-lighter: 92% 0.046 114;
   --lch-lime-lightest: 96% 0.034 115;
 
-  --lch-green-darkest: 32% 0.0705 149;
-  --lch-green-darker: 42% 0.12 148;
+  --lch-green-darkest: 28% 0.071 149;
+  --lch-green-darker: 40% 0.12 148;
   --lch-green-dark: 55.5% 0.162 147;
   --lch-green-medium: 70% 0.19 146;
   --lch-green-light: 84% 0.07 145;
   --lch-green-lighter: 92% 0.044 144;
   --lch-green-lightest: 96% 0.022 143;
 
-  --lch-aqua-darkest: 32% 0.059 214;
-  --lch-aqua-darker: 42% 0.097 212;
+  --lch-aqua-darkest: 28% 0.059 214;
+  --lch-aqua-darker: 40% 0.093 212;
   --lch-aqua-dark: 55.5% 0.122 210;
   --lch-aqua-medium: 70% 0.13 208;
   --lch-aqua-light: 84% 0.04 206;
   --lch-aqua-lighter: 92% 0.02 204;
   --lch-aqua-lightest: 96% 0.012 202;
 
-  --lch-blue-darkest: 32% 0.106 264;
-  --lch-blue-darker: 42% 0.166 262;
+  --lch-blue-darkest: 28% 0.126 264;
+  --lch-blue-darker: 40% 0.166 262;
   --lch-blue-dark: 57% 0.19 260;
   --lch-blue-medium: 70% 0.169 258;
   --lch-blue-light: 84% 0.06 256;
   --lch-blue-lighter: 92% 0.026 254;
   --lch-blue-lightest: 96% 0.016 252;
 
-  --lch-violet-darkest: 32% 0.144 292;
-  --lch-violet-darker: 42% 0.2 290;
+  --lch-violet-darkest: 28% 0.148 292;
+  --lch-violet-darker: 40% 0.2 290;
   --lch-violet-dark: 58% 0.216 288;
   --lch-violet-medium: 70% 0.178 286;
-  --lch-violet-light: 84% 0.07 284.3;
+  --lch-violet-light: 84% 0.07 284;
   --lch-violet-lighter: 92% 0.03 282;
   --lch-violet-lightest: 96% 0.015 280;
 
-  --lch-purple-darkest: 32% 0.127 314;
-  --lch-purple-darker: 42% 0.178 312;
+  --lch-purple-darkest: 28% 0.131 314;
+  --lch-purple-darker: 40% 0.178 312;
   --lch-purple-dark: 58% 0.21 310;
   --lch-purple-medium: 70% 0.22 308;
   --lch-purple-light: 84% 0.07 306;
   --lch-purple-lighter: 92% 0.03 304;
   --lch-purple-lightest: 96% 0.019 302;
 
-  --lch-pink-darkest: 32% 0.12 348;
-  --lch-pink-darker: 42% 0.16 346;
+  --lch-pink-darkest: 28% 0.12 348;
+  --lch-pink-darker: 40% 0.16 346;
   --lch-pink-dark: 59% 0.188 344;
   --lch-pink-medium: 70% 0.198 342;
   --lch-pink-light: 84% 0.07 340;
@@ -246,10 +245,8 @@
 
   /* Colors: Abstractions */
   --color-canvas: oklch(var(--lch-canvas));
-
   --color-negative: oklch(var(--lch-red-dark));
   --color-positive: oklch(var(--lch-green-dark));
-
   --color-link: oklch(var(--lch-blue-dark));
   --color-selected: oklch(var(--lch-blue-lighter));
   --color-selected-dark: oklch(var(--lch-blue-light));
@@ -257,4 +254,6 @@
   --color-marker: oklch(var(--lch-red-medium));
   --color-container: oklch(var(--lch-aqua-lighter));
   --color-golden: oklch(var(--lch-yellow-light));
+  --color-terminal-bg: oklch(var(--lch-blue-darkest));
+  --color-terminal-text: oklch(var(--lch-green-medium));
 }
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index 9bae337d7..a8f4636bb 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -2,8 +2,8 @@
   .terminal {
     --row-gap: 0.2lh;
 
-    background-color: var(--color-ink);
-    color: var(--color-positive);
+    background-color: var(--color-terminal-bg);
+    color: var(--color-terminal-text);
     font-family: var(--font-mono);
     font-size: var(--text-normal);
     inset: auto 0 0 0;
@@ -20,12 +20,12 @@
       --input-border-color: transparent;
       --input-border-radius: 0.3em;
       --hover-color: transparent;
-      --input-color: var(--color-positive);
+      --input-color: var(--color-terminal-text);
       --outline-size: 0;
       --outline-color: transparent;
 
-      accent-color: var(--color-positive);
-      caret-color: var(--color-positive);
+      accent-color: var(--color-terminal-text);
+      caret-color: var(--color-terminal-text);
       font-family: inherit;
 
       &::placeholder {
@@ -43,7 +43,7 @@
   .terminal__link {
     --hover-size: 0;
 
-    color: var(--color-positive);
+    color: var(--color-terminal-text);
   }
 
   .terminal__menu {

From ffa0e2b5d0e7e7489f00d7a298fa9d6efc3cd948 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 16:59:01 -0500
Subject: [PATCH 08/15] Balance colors

---
 app/assets/stylesheets/_global.css | 36 +++++++++++++++---------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 7ab0bc913..a385c0afd 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -41,23 +41,23 @@
   --lch-canvas: var(--lch-white);
   --lch-ink-inverted: var(--lch-white);
 
-  --lch-ink-darkest: 28% 0.008 264;
-  --lch-ink-darker: 40% 0.007 262;
-  --lch-ink-dark: 56.5% 0.006 260;
-  --lch-ink-medium: 70% 0.005 258;
-  --lch-ink-light: 84% 0.004 256;
+  --lch-ink-darkest: 26% 0.05 264;
+  --lch-ink-darker: 40% 0.026 262;
+  --lch-ink-dark: 57% 0.014 260;
+  --lch-ink-medium: 70% 0.008 258;
+  --lch-ink-light: 84% 0.005 256;
   --lch-ink-lighter: 92% 0.003 254;
   --lch-ink-lightest: 96% 0.002 252;
 
-  --lch-uncolor-darkest: 28% 0.018 40;
+  --lch-uncolor-darkest: 26% 0.018 40;
   --lch-uncolor-darker: 40% 0.03 50;
-  --lch-uncolor-dark: 58% 0.04 60;
+  --lch-uncolor-dark: 57% 0.04 60;
   --lch-uncolor-medium: 70% 0.044 70;
   --lch-uncolor-light: 84% 0.028 80;
   --lch-uncolor-lighter: 92% 0.014 90;
   --lch-uncolor-lightest: 96% 0.012 100;
 
-  --lch-red-darkest: 28% 0.105 34;
+  --lch-red-darkest: 26% 0.105 34;
   --lch-red-darker: 40% 0.154 36;
   --lch-red-dark: 59% 0.19 38;
   --lch-red-medium: 70.4% 0.19 40;
@@ -65,7 +65,7 @@
   --lch-red-lighter: 92% 0.03 44;
   --lch-red-lightest: 96% 0.013 46;
 
-  --lch-yellow-darkest: 28% 0.0729 40;
+  --lch-yellow-darkest: 26% 0.0729 40;
   --lch-yellow-darker: 40% 0.12 50;
   --lch-yellow-dark: 58% 0.156 60;
   --lch-yellow-medium: 76% 0.17 70;
@@ -73,7 +73,7 @@
   --lch-yellow-lighter: 92% 0.076 90;
   --lch-yellow-lightest: 96% 0.034 100;
 
-  --lch-lime-darkest: 28% 0.066 109;
+  --lch-lime-darkest: 26% 0.064 109;
   --lch-lime-darker: 40% 0.101 110;
   --lch-lime-dark: 56.5% 0.142 111;
   --lch-lime-medium: 71% 0.158 112;
@@ -81,15 +81,15 @@
   --lch-lime-lighter: 92% 0.046 114;
   --lch-lime-lightest: 96% 0.034 115;
 
-  --lch-green-darkest: 28% 0.071 149;
+  --lch-green-darkest: 26% 0.071 149;
   --lch-green-darker: 40% 0.12 148;
-  --lch-green-dark: 55.5% 0.162 147;
+  --lch-green-dark: 55% 0.162 147;
   --lch-green-medium: 70% 0.19 146;
   --lch-green-light: 84% 0.07 145;
   --lch-green-lighter: 92% 0.044 144;
   --lch-green-lightest: 96% 0.022 143;
 
-  --lch-aqua-darkest: 28% 0.059 214;
+  --lch-aqua-darkest: 26% 0.059 214;
   --lch-aqua-darker: 40% 0.093 212;
   --lch-aqua-dark: 55.5% 0.122 210;
   --lch-aqua-medium: 70% 0.13 208;
@@ -97,7 +97,7 @@
   --lch-aqua-lighter: 92% 0.02 204;
   --lch-aqua-lightest: 96% 0.012 202;
 
-  --lch-blue-darkest: 28% 0.126 264;
+  --lch-blue-darkest: 26% 0.126 264;
   --lch-blue-darker: 40% 0.166 262;
   --lch-blue-dark: 57% 0.19 260;
   --lch-blue-medium: 70% 0.169 258;
@@ -105,7 +105,7 @@
   --lch-blue-lighter: 92% 0.026 254;
   --lch-blue-lightest: 96% 0.016 252;
 
-  --lch-violet-darkest: 28% 0.148 292;
+  --lch-violet-darkest: 26% 0.148 292;
   --lch-violet-darker: 40% 0.2 290;
   --lch-violet-dark: 58% 0.216 288;
   --lch-violet-medium: 70% 0.178 286;
@@ -113,7 +113,7 @@
   --lch-violet-lighter: 92% 0.03 282;
   --lch-violet-lightest: 96% 0.015 280;
 
-  --lch-purple-darkest: 28% 0.131 314;
+  --lch-purple-darkest: 26% 0.131 314;
   --lch-purple-darker: 40% 0.178 312;
   --lch-purple-dark: 58% 0.21 310;
   --lch-purple-medium: 70% 0.22 308;
@@ -121,7 +121,7 @@
   --lch-purple-lighter: 92% 0.03 304;
   --lch-purple-lightest: 96% 0.019 302;
 
-  --lch-pink-darkest: 28% 0.12 348;
+  --lch-pink-darkest: 26% 0.12 348;
   --lch-pink-darker: 40% 0.16 346;
   --lch-pink-dark: 59% 0.188 344;
   --lch-pink-medium: 70% 0.198 342;
@@ -252,7 +252,7 @@
   --color-selected-dark: oklch(var(--lch-blue-light));
   --color-highlight: oklch(var(--lch-yellow-lighter));
   --color-marker: oklch(var(--lch-red-medium));
-  --color-container: oklch(var(--lch-aqua-lighter));
+  --color-container: oklch(var(--lch-aqua-light));
   --color-golden: oklch(var(--lch-yellow-light));
   --color-terminal-bg: oklch(var(--lch-blue-darkest));
   --color-terminal-text: oklch(var(--lch-green-medium));

From 03592223722b2fbd0e994be114a14df2f7927cb5 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 17:01:55 -0500
Subject: [PATCH 09/15] Subtler panel borders

---
 app/assets/stylesheets/panels.css    | 4 ----
 app/assets/stylesheets/terminals.css | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/panels.css b/app/assets/stylesheets/panels.css
index 863445f5c..6ce5e10b6 100644
--- a/app/assets/stylesheets/panels.css
+++ b/app/assets/stylesheets/panels.css
@@ -7,9 +7,5 @@
     inline-size: var(--panel-size, 60ch);
     max-inline-size: 100%;
     padding: var(--panel-padding, calc(var(--block-space) * 2));
-
-    @media (prefers-color-scheme: dark) {
-      --panel-border-color: var(--color-ink-medium);
-    }
   }
 }
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index a8f4636bb..cd310c2c1 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -13,7 +13,7 @@
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-black);
-      border-block-start: 1px solid var(--color-ink-medium);
+      border-block-start: 1px solid var(--color-ink-lighter);
     }
 
     .terminal__input {

From eb539fce97b396c8538c825a481b48e44a72e102 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 17 Apr 2025 17:03:00 -0500
Subject: [PATCH 10/15] Subtler button borders in dark mode

---
 app/assets/stylesheets/buttons.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css
index f96449aae..6ec87c99a 100644
--- a/app/assets/stylesheets/buttons.css
+++ b/app/assets/stylesheets/buttons.css
@@ -6,7 +6,7 @@
     align-items: center;
     background-color: var(--btn-background, var(--color-canvas));
     border-radius: var(--btn-border-radius);
-    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-medium));
+    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-light));
     color: var(--btn-color, var(--color-ink));
     cursor: pointer;
     display: inline-flex;

From f3767f25849750d6ed1607c6f4db6e2fdc5f8b27 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 18 Apr 2025 11:26:13 -0500
Subject: [PATCH 11/15] Use variables for card colors

---
 app/assets/stylesheets/_global.css | 71 ++++++++++++++++++------------
 app/assets/stylesheets/cards.css   | 13 ++++--
 app/models/colorable.rb            | 17 ++++++-
 3 files changed, 66 insertions(+), 35 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index a385c0afd..5497c7aa5 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -129,8 +129,48 @@
   --lch-pink-lighter: 92% 0.03 338;
   --lch-pink-lightest: 96% 0.02 336;
 
+  /* Colors: Named */
+  --color-black: oklch(var(--lch-black));
+  --color-white: oklch(var(--lch-white));
+
+  --color-ink: oklch(var(--lch-ink-darkest));
+  --color-ink-darkest: oklch(var(--lch-ink-darkest));
+  --color-ink-darker: oklch(var(--lch-ink-darker));
+  --color-ink-dark: oklch(var(--lch-ink-dark));
+  --color-ink-medium: oklch(var(--lch-ink-medium));
+  --color-ink-light: oklch(var(--lch-ink-light));
+  --color-ink-lighter: oklch(var(--lch-ink-lighter));
+  --color-ink-lightest: oklch(var(--lch-ink-lightest));
+
+  --color-ink-inverted: oklch(var(--lch-ink-inverted));
+
+  /* Colors: Abstractions */
+  --color-canvas: oklch(var(--lch-canvas));
+  --color-negative: oklch(var(--lch-red-dark));
+  --color-positive: oklch(var(--lch-green-dark));
+  --color-link: oklch(var(--lch-blue-dark));
+  --color-selected: oklch(var(--lch-blue-lighter));
+  --color-selected-dark: oklch(var(--lch-blue-light));
+  --color-highlight: oklch(var(--lch-yellow-lighter));
+  --color-marker: oklch(var(--lch-red-medium));
+  --color-container: oklch(var(--lch-aqua-light));
+  --color-terminal-bg: oklch(var(--lch-blue-darkest));
+  --color-terminal-text: oklch(var(--lch-green-medium));
+
+  /* Colors: Cards */
+  --color-card-1: oklch(var(--lch-ink-dark));
+  --color-card-2: oklch(var(--lch-uncolor-dark));
+  --color-card-3: oklch(var(--lch-yellow-dark));
+  --color-card-4: oklch(var(--lch-lime-dark));
+  --color-card-5: oklch(var(--lch-aqua-dark));
+  --color-card-6: oklch(var(--lch-blue-dark));
+  --color-card-7: oklch(var(--lch-violet-dark));
+  --color-card-8: oklch(var(--lch-purple-dark));
+  --color-card-9: oklch(var(--lch-pink-dark));
+
   @media (prefers-color-scheme: dark) {
     --lch-canvas: 20% 0.0195 232.58;
+    --lch-ink-inverted: var(--lch-black);
 
     --lch-ink-darkest: 96.02% 0.0034 260;
     --lch-ink-darker: 86% 0.0061 260;
@@ -220,6 +260,8 @@
     --lch-pink-lighter: 30% 0.03 346;
     --lch-pink-lightest: 25% 0.011 348;
 
+    --color-container: oklch(var(--lch-aqua-lighter));
+
     --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
               0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
               0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
@@ -227,33 +269,4 @@
               0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
               0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
   }
-
-  /* Colors: Named */
-  --color-black: oklch(var(--lch-black));
-  --color-white: oklch(var(--lch-white));
-
-  --color-ink: oklch(var(--lch-ink-darkest));
-  --color-ink-darkest: oklch(var(--lch-ink-darkest));
-  --color-ink-darker: oklch(var(--lch-ink-darker));
-  --color-ink-dark: oklch(var(--lch-ink-dark));
-  --color-ink-medium: oklch(var(--lch-ink-medium));
-  --color-ink-light: oklch(var(--lch-ink-light));
-  --color-ink-lighter: oklch(var(--lch-ink-lighter));
-  --color-ink-lightest: oklch(var(--lch-ink-lightest));
-
-  --color-ink-inverted: oklch(var(--lch-ink-inverted));
-
-  /* Colors: Abstractions */
-  --color-canvas: oklch(var(--lch-canvas));
-  --color-negative: oklch(var(--lch-red-dark));
-  --color-positive: oklch(var(--lch-green-dark));
-  --color-link: oklch(var(--lch-blue-dark));
-  --color-selected: oklch(var(--lch-blue-lighter));
-  --color-selected-dark: oklch(var(--lch-blue-light));
-  --color-highlight: oklch(var(--lch-yellow-lighter));
-  --color-marker: oklch(var(--lch-red-medium));
-  --color-container: oklch(var(--lch-aqua-light));
-  --color-golden: oklch(var(--lch-yellow-light));
-  --color-terminal-bg: oklch(var(--lch-blue-darkest));
-  --color-terminal-text: oklch(var(--lch-green-medium));
 }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 794733da3..6a0f13225 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -28,11 +28,16 @@
     --border-color: var(--color-canvas) !important;
 
     background-color: var(--color-canvas);
-    background-image: linear-gradient(90deg, oklch(var(--lch-yellow-light) / 0.5) 0%, oklch(var(--lch-yellow-light) / 0.1) 50%, oklch(var(--lch-yellow-light) / 0.75) 100%);
+    background-image: linear-gradient(75deg,
+      oklch(var(--lch-yellow-lighter) / 0.5) 0%,
+      oklch(var(--lch-yellow-lighter) / 0.1) 40%,
+      oklch(var(--lch-yellow-lighter) / 0.1) 60%,
+      oklch(var(--lch-yellow-lighter) / 0.75) 100%
+    );
     box-shadow:
-      0 0 0.5em 0.2em var(--color-golden),
-      0 0 1em 0.4em var(--color-golden) !important;
-    outline: 1px solid var(--color-golden);
+      0 0 0.5em 0.2em oklch(var(--lch-yellow-light) / 0.5),
+      0 0 1em 0.4em oklch(var(--lch-yellow-light) / 0.5) !important;
+    outline: 1px solid oklch(var(--lch-yellow-light) / 0.5);
   }
 
   .card__background {
diff --git a/app/models/colorable.rb b/app/models/colorable.rb
index 4fba4556d..fed768a27 100644
--- a/app/models/colorable.rb
+++ b/app/models/colorable.rb
@@ -1,8 +1,21 @@
 module Colorable
   extend ActiveSupport::Concern
 
-  COLORS = %w[ #3b3633 #67695e #eb7a32 #bf7c2b #c09c6f #746b1e #2c6da8 #5d618f #663251 #ff63a8 ]
-  DEFAULT_COLOR = "#2c6da8"
+  # COLORS = %w[ #3b3633 #67695e #eb7a32 #bf7c2b #c09c6f #746b1e #2c6da8 #5d618f #663251 #ff63a8 ]
+  # DEFAULT_COLOR = "#2c6da8"
+
+  COLORS = [
+    "var(--color-card-1)",
+    "var(--color-card-2)",
+    "var(--color-card-3)",
+    "var(--color-card-4)",
+    "var(--color-card-5)",
+    "var(--color-card-6)",
+    "var(--color-card-7)",
+    "var(--color-card-8)",
+    "var(--color-card-9)",
+  ]
+  DEFAULT_COLOR = "var(--color-card-6)"
 
   included do
     attribute :color, default: DEFAULT_COLOR

From 46374adcf60095b56f552b05b04a7a502e61a1c4 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 18 Apr 2025 11:43:27 -0500
Subject: [PATCH 12/15] Tweak golden card color

---
 app/assets/stylesheets/cards.css | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 6a0f13225..f61b37ed0 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -26,18 +26,23 @@
 
   .card--golden.card--doing {
     --border-color: var(--color-canvas) !important;
+    --lch-golden: var(--lch-yellow-light);
 
     background-color: var(--color-canvas);
-    background-image: linear-gradient(75deg,
-      oklch(var(--lch-yellow-lighter) / 0.5) 0%,
-      oklch(var(--lch-yellow-lighter) / 0.1) 40%,
-      oklch(var(--lch-yellow-lighter) / 0.1) 60%,
-      oklch(var(--lch-yellow-lighter) / 0.75) 100%
+    background-image: linear-gradient(60deg,
+      oklch(var(--lch-golden) / 0.35) 0%,
+      oklch(var(--lch-golden) / 0.15) 20%,
+      oklch(var(--lch-golden) / 0) 60%,
+      oklch(var(--lch-golden) / 0.5) 100%
     );
     box-shadow:
-      0 0 0.5em 0.2em oklch(var(--lch-yellow-light) / 0.5),
-      0 0 1em 0.4em oklch(var(--lch-yellow-light) / 0.5) !important;
-    outline: 1px solid oklch(var(--lch-yellow-light) / 0.5);
+      0 0 0.5em 0.2em oklch(var(--lch-golden) / 0.35),
+      0 0 1em 0.4em oklch(var(--lch-golden) / 0.35) !important;
+    outline: 1px solid oklch(var(--lch-golden) / 0.35);
+
+    @media (prefers-color-scheme: dark) {
+      --lch-golden: var(--lch-blue-medium);
+    }
   }
 
   .card__background {

From 7b86c4f607524c88d2e5fc705405d85a39143325 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 18 Apr 2025 15:00:46 -0500
Subject: [PATCH 13/15] Align color picker

---
 app/assets/stylesheets/color-picker.css    |  3 ++-
 app/views/workflows/stages/_color.html.erb | 14 +++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/color-picker.css
index 7b6ff640f..a874e0b70 100644
--- a/app/assets/stylesheets/color-picker.css
+++ b/app/assets/stylesheets/color-picker.css
@@ -6,9 +6,10 @@
   --panel-size: auto;
 
   inline-size: auto !important;
-  inset: 0 auto auto 0;
+  inset: 50% auto auto calc(-1 * var(--block-space));
   max-inline-size: var(--panel-size) !important;
   position: absolute;
+  translate: 0 -50%;
   z-index: 2;
 
   &[open] {
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index 04a9e12a3..8b4eed76c 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -5,6 +5,13 @@
   </button>
 
   <dialog class="color-picker panel fill-white shadow gap-half" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+    <form method="dialog">
+      <button class="btn txt-small" title="Close (esc)">
+        <%= icon_tag "remove" %>
+        <span class="for-screen-reader">Close</span>
+      </button>
+    </form>
+
     <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
       <% Colorable::COLORS.each do |color| %>
         <span class="color-picker__color">
@@ -16,12 +23,5 @@
         </span>
       <% end %>
     <% end %>
-
-    <form method="dialog">
-      <button class="btn txt-small" title="Close (esc)">
-        <%= icon_tag "remove" %>
-        <span class="for-screen-reader">Close</span>
-      </button>
-    </form>
   </dialog>
 </div>

From f82dd39305ef6b9d5c222a560bbb99b84402f55a Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 18 Apr 2025 15:10:43 -0500
Subject: [PATCH 14/15] Same sizes for swatches

---
 app/assets/stylesheets/color-picker.css    | 22 ++--------------------
 app/views/workflows/_workflow.html.erb     |  2 +-
 app/views/workflows/stages/_color.html.erb |  4 ++--
 3 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/color-picker.css b/app/assets/stylesheets/color-picker.css
index a874e0b70..a0dd8e2af 100644
--- a/app/assets/stylesheets/color-picker.css
+++ b/app/assets/stylesheets/color-picker.css
@@ -2,11 +2,11 @@
   --panel-border-color: var(--card-color);
   --panel-border-radius: 2em;
   --panel-border-size: 2px;
-  --panel-padding: 0.5em 0.7em;
+  --panel-padding: 0.5em;
   --panel-size: auto;
 
   inline-size: auto !important;
-  inset: 50% auto auto calc(-1 * var(--block-space));
+  inset: 50% auto auto calc(-1 * var(--panel-padding));
   max-inline-size: var(--panel-size) !important;
   position: absolute;
   translate: 0 -50%;
@@ -15,22 +15,4 @@
   &[open] {
     display: flex;
   }
-
-  .color-picker__color {
-    --btn-size: 2em;
-  }
-}
-
-.color-picker__button {
-  font-size: 0.75em;
-
-  .cards & {
-    display: none;
-  }
-
-  + .panel {
-    --panel-size: auto;
-
-    inset: 0 0 auto auto;
-  }
 }
diff --git a/app/views/workflows/_workflow.html.erb b/app/views/workflows/_workflow.html.erb
index 5cbf7d3e3..f6972731d 100644
--- a/app/views/workflows/_workflow.html.erb
+++ b/app/views/workflows/_workflow.html.erb
@@ -10,7 +10,7 @@
 
     <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium);" aria-hidden="true">
 
-    <div class="flex flex-column gap margin-block-start">
+    <div class="flex flex-column gap-half margin-block-start">
       <%= turbo_frame_tag dom_id(workflow, :stages) do %>
         <%= render partial: "workflows/stages/stage", collection: workflow.stages %>
 
diff --git a/app/views/workflows/stages/_color.html.erb b/app/views/workflows/stages/_color.html.erb
index 8b4eed76c..a5e1657b5 100644
--- a/app/views/workflows/stages/_color.html.erb
+++ b/app/views/workflows/stages/_color.html.erb
@@ -1,5 +1,5 @@
 <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
-  <button class="btn btn--reversed txt-x-small" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
+  <button class="btn btn--reversed txt-small borderless" data-action="dialog#open:stop" style="--btn-background: <%= stage_color(stage) %>">
     <%= icon_tag "art" %>
     <span class="for-screen-reader">Change color</span>
   </button>
@@ -15,7 +15,7 @@
     <%= form_with model: stage, url: workflow_stage_path(stage.workflow, stage), class: "flex gap-half", data: { controller: "form", action: "change->form#submit" } do |form| %>
       <% Colorable::COLORS.each do |color| %>
         <span class="color-picker__color">
-          <label class="btn btn--circle" style="--btn-background: <%= color %>" title="<%= color %>">
+          <label class="btn btn--circle txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
             <%= form.radio_button :color, color %>
             <%= icon_tag "check", class: "checked" %>
             <span class="for-screen-reader"><%= color %></span>

From 0fa0622b06d2c802c0bee5fa811eee9087462cab Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 25 Apr 2025 16:18:46 -0500
Subject: [PATCH 15/15] Post-merge misc

---
 app/assets/stylesheets/card-perma.css      | 2 +-
 app/assets/stylesheets/cards.css           | 4 ++--
 app/assets/stylesheets/inputs.css          | 2 +-
 app/assets/stylesheets/popup.css           | 2 +-
 app/views/cards/_messages.html.erb         | 2 +-
 app/views/collections/edit/_users.html.erb | 4 ++--
 app/views/events/event/_layout.html.erb    | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index cd4973c7f..28dd20768 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -121,7 +121,7 @@
     }
 
     .btn--reversed {
-      --btn-background: var(--color-bg);
+      --btn-background: var(--color-canvas);
       --btn-color: var(--card-color);
     }
   }
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index fb8465e31..e47603142 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -171,7 +171,7 @@
     --btn-icon-size: 1em;
     --card-padding-block: calc(var(--block-space) * 1.25);
 
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-bg));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-link) 20%, var(--color-canvas));
     color: var(--btn-color);
     font-weight: 700;
     
@@ -231,7 +231,7 @@
   .card__closed {
     align-items: center;
     aspect-ratio: 8/5;
-    background-color: var(--color-bg);
+    background-color: var(--color-canvas);
     border: var(--block-space-half) solid var(--card-color);
     border-radius: 0.2em;
     color: var(--card-color);
diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css
index e8d396a59..6b412707b 100644
--- a/app/assets/stylesheets/inputs.css
+++ b/app/assets/stylesheets/inputs.css
@@ -96,7 +96,7 @@
     }
 
     option {
-      background-color: var(--color-bg);
+      background-color: var(--color-canvas);
       color: var(--color-ink);
     }
   }
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 3013ac534..99615c0e7 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -24,7 +24,7 @@
   }
 
   .popup__group {
-    background: var(--color-subtle-light);
+    background: var(--color-ink-lightest);
     max-inline-size: 100%;
     padding-inline: var(--inline-space);
 
diff --git a/app/views/cards/_messages.html.erb b/app/views/cards/_messages.html.erb
index 35f0cd586..fa554e2fb 100644
--- a/app/views/cards/_messages.html.erb
+++ b/app/views/cards/_messages.html.erb
@@ -16,7 +16,7 @@
     </div>
 
     <div class="txt-align-center full-width flex flex-column margin-block-start-double">
-      <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-subtle)">
+      <hr class="separator--horizontal full-width margin-block" style="--border-color: var(--color-ink-lighter)">
       <%= button_to_delete_card(@card) %>
     </div>
   </div>
diff --git a/app/views/collections/edit/_users.html.erb b/app/views/collections/edit/_users.html.erb
index bc3530419..dd03f506d 100644
--- a/app/views/collections/edit/_users.html.erb
+++ b/app/views/collections/edit/_users.html.erb
@@ -10,7 +10,7 @@
         <div class="overflow-ellipsis fill-shade"><strong>Everyone</strong></div>
       </div>
 
-      <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-subtle-dark); --border-style: dashed" aria-hidden="true" />
+      <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true" />
 
       <label for="collection_all_access" class="switch">
         <%= form.check_box :all_access, class: "switch__input", checked: collection.all_access?, data: { action: "change->toggle-class#toggle" } %>
@@ -19,7 +19,7 @@
       </label>
     </li>
 
-    <hr class="separator--horizontal margin-inline" style="--border-color: var(--color-subtle-dark);" aria-hidden="true" />
+    <hr class="separator--horizontal margin-inline" style="--border-color: var(--color-ink-medium);" aria-hidden="true" />
 
     <% if User.active.count > 20 %>
       <div class="pad-inline">
diff --git a/app/views/events/event/_layout.html.erb b/app/views/events/event/_layout.html.erb
index acfbf7494..44e9e526a 100644
--- a/app/views/events/event/_layout.html.erb
+++ b/app/views/events/event/_layout.html.erb
@@ -1,6 +1,6 @@
 <%= link_to event.notifiable_target,
       class: "event event--#{ event.action } panel center center-block flex-inline align-start justify-start gap position-relative",
-      style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-bg));
+      style: "--card-color: #{ card.color }; background-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
   color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));",
       data: { related_element_target: "related",
             related_element_group_value: card.id,