The hardcoded stroke kept its light-theme grey in dark mode.

Assisted-by: Claude Opus 5.5 via Claude Code

diff --git a/README.md b/README.md
index 1961912..c1b757b 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ This is a small, personal project, so it is built as plainly as it can be:
   underneath it in a `<details>`, the exact same markup as literal text.
   There is no generator keeping the two in sync — there is only one copy.
 
-No component stylesheet contains a color literal or a duration — every one is a `var(--gl-*)`, with one flagged exception (Select's chevron — see `_sass/components/field.css`).
+No component stylesheet contains a color literal or a duration — every one is a `var(--gl-*)`.
 
 ## Requirements
 
diff --git a/_components/select.md b/_components/select.md
index 6a932f7..60511d0 100644
--- a/_components/select.md
+++ b/_components/select.md
@@ -41,10 +41,10 @@ summary: Native select, styled to match Input exactly.
 
 <div class="gl-callout">
   <p>
-    The chevron is the one place in this component set that cannot reach a
-    <code>var(--gl-*)</code> token — a data-URI <code>background-image</code>
-    cannot reference a custom property, so its stroke is a literal hex, kept
-    close to <code>--gl-color-text-secondary</code> and commented in the source.
+    The chevron is the <code>--gl-icon-chevron-down</code> token. A data-URI
+    can't reference a custom property, so tokens.css bakes
+    <code>--gl-color-text-secondary</code> into its stroke and redefines it
+    for the dark theme.
   </p>
 </div>
 
diff --git a/_sass/components/field.css b/_sass/components/field.css
index f0564d8..86b5e50 100644
--- a/_sass/components/field.css
+++ b/_sass/components/field.css
@@ -72,15 +72,10 @@ select:disabled {
   cursor: default;
 }
 
-/* The chevron is the one flagged color exception in this component set:
-   CSS cannot point a data-URI background-image at a custom property, so its
-   stroke is a literal hex rather than a var(--gl-*) reference. It is picked
-   to match --gl-color-text-secondary and commented here so it is not
-   mistaken for a stray color. */
 select {
   appearance: none;
   padding-inline-end: var(--gl-space-l);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235f5d59' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-image: var(--gl-icon-chevron-down);
   background-repeat: no-repeat;
   background-position: right var(--gl-space-xs) center;
 }
diff --git a/assets/css/tokens.css b/assets/css/tokens.css
index 31bc443..57f7bfb 100644
--- a/assets/css/tokens.css
+++ b/assets/css/tokens.css
@@ -43,6 +43,10 @@
   --gl-color-text-secondary: #5f5d59;
   --gl-color-text-tertiary: #888681;
 
+  /* Icons — a data URI can't read a custom property, so each stroke repeats
+     its color by hand and is redefined alongside it in the dark blocks. */
+  --gl-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235f5d59' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+
   /* Accent */
   --gl-color-accent: #3a6a63;
   --gl-color-accent-fg: #ffffff;
@@ -110,6 +114,7 @@
     --gl-color-text-primary: #e9e8e6;
     --gl-color-text-secondary: #a09e9a;
     --gl-color-text-tertiary: #7c7a76;
+    --gl-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a09e9a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   }
 }
 
@@ -124,6 +129,7 @@
   --gl-color-text-primary: #e9e8e6;
   --gl-color-text-secondary: #a09e9a;
   --gl-color-text-tertiary: #7c7a76;
+  --gl-icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a09e9a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/rationale.md b/rationale.md
index 0266df2..7c63049 100644
--- a/rationale.md
+++ b/rationale.md
@@ -95,9 +95,9 @@ reserved for dividers inside a surface and this contract does not invent a
   <p>
     A hex or a duration in a component stylesheet is a decision made in the
     dark, and it is the kind that breaks the moment somebody adds a theme. No
-    component stylesheet in this repository contains either; the one flagged
-    exception is Select's chevron, which CSS cannot point at a custom
-    property inside a data-URI, and it is commented as such.
+    component stylesheet in this repository contains either. Even Select's
+    chevron, a data-URI that can't read a custom property, lives in
+    tokens.css as <code>--gl-icon-chevron-down</code>, redefined per theme.
   </p>
 </div>