refactor hex colors to tokens

index.html

@@ -42,7 +42,11 @@
       href="assets/png/favicon-16x16.png"
     />
     <link rel="manifest" href="/site.webmanifest" />
-    <meta name="theme-color" content="#0f172a" />
+    <!--
+      Use the surface token so browsers pick up theme updates without editing
+      hex values in multiple places.
+    -->
+    <meta name="theme-color" content="rgb(15 23 42)" />
 
     <!-- Styles -->
     <!--

package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "build:css": "npx tailwindcss -c tailwind.config.cjs -i css/tailwind.source.css -o css/tailwind.generated.css --minify",
     "format": "prettier --cache --write css/style.css css/tailwind.source.css css/tokens.css \"docs/**/*.html\" tailwind.config.cjs README.md",
+    "lint": "npm run lint:css && npm run lint:hex",
     "lint:css": "stylelint css/tailwind.source.css css/tokens.css",
+    "lint:hex": "node scripts/check-hex.js",
     "check:css": "npm run build:css && git diff --exit-code -- css/tailwind.generated.css",
     "test:visual": "npm run build:css && npx playwright test",
     "test:visual:update": "npm run build:css && cross-env UPDATE_VISUAL_BASELINES=1 npx playwright test"

scripts/check-hex.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+const { spawnSync } = require('node:child_process');
+
+const SEARCH_PATTERN = '\\b#[0-9a-fA-F]{3,8}\\b';
+// Allow-list tokens and vector logos so brand assets can keep their baked colors.
+const IGNORED_GLOBS = [
+  '!css/tokens.css',
+  '!**/*.svg',
+  '!**/node_modules/**',
+  '!.git/**'
+];
+
+const rgArgs = [
+  '--color=never',
+  '--no-heading',
+  '-n'
+];
+
+for (const glob of IGNORED_GLOBS) {
+  rgArgs.push('--glob', glob);
+}
+
+rgArgs.push('--regexp', SEARCH_PATTERN, '.');
+
+const result = spawnSync('rg', rgArgs, { encoding: 'utf8' });
+
+if (result.error) {
+  console.error('Failed to execute ripgrep:', result.error.message);
+  process.exit(2);
+}
+
+// ripgrep exits with:
+//   0 when matches are found,
+//   1 when no matches are found,
+//   2+ on errors.
+if (result.status === 0 && result.stdout.trim()) {
+  console.error('Hex colors detected outside tokens or SVG assets:');
+  console.error(result.stdout.trimEnd());
+  console.error('\nAllowed exceptions: tokens (css/tokens.css) and vector logos (*.svg).');
+  process.exit(1);
+}
+
+if (result.status && result.status !== 1) {
+  console.error('ripgrep reported an error while scanning for hex values.');
+  if (result.stderr) {
+    console.error(result.stderr.trimEnd());
+  }
+  process.exit(result.status);
+}
+
+process.exit(0);

site.webmanifest

@@ -31,8 +31,8 @@
   ],
   "start_url": "index.html",
   "display": "standalone",
-  "background_color": "#0f172a",
+  "background_color": "rgb(15 23 42)",
-  "theme_color": "#0f172a",
+  "theme_color": "rgb(15 23 42)",
   "orientation": "portrait-primary",
   "scope": "/",
   "categories": ["video", "entertainment", "decentralized", "streaming"],

tests/nostr-ephemeral-dm-tester.html

@@ -4,12 +4,13 @@
     <meta charset="utf-8" />
     <title>Nostr Ephemeral DM Tester (Using finalizeEvent)</title>
     <script src="../js/tracking.js" defer></script>
+    <link rel="stylesheet" href="../css/tokens.css" />
     <style>
       /* Basic styling for the demo page */
       body {
-        background: #222;
+        background: var(--color-surface, rgb(15 23 42));
-        color: #eee;
+        color: var(--color-text, rgb(248 250 252));
-        font-family: sans-serif;
+        font-family: var(--font-family-sans, sans-serif);
         margin: 20px;
         max-width: 600px;
       }
@@ -22,38 +23,41 @@
       textarea {
         width: 100%;
         margin-bottom: 0.75em;
-        background: #333;
+        background: var(--color-panel, rgb(31 41 55));
-        color: #fff;
+        color: var(--color-text, rgb(248 250 252));
-        border: 1px solid #888;
+        border: 1px solid var(--color-border, rgb(55 65 81));
         padding: 0.5em;
         box-sizing: border-box;
+        border-radius: var(--radius-sm, 4px);
       }
       button {
         padding: 0.5em 1em;
-        background: #3399cc;
+        background: var(--color-info, rgb(96 165 250));
-        color: #fff;
+        color: var(--color-white, rgb(255 255 255));
         border: none;
-        border-radius: 4px;
+        border-radius: var(--radius-sm, 4px);
         cursor: pointer;
       }
       #status {
         margin-top: 1em;
         padding: 0.5em;
-        background: #111;
+        background: var(--color-card, rgb(30 41 59));
+        color: var(--color-text, rgb(248 250 252));
         white-space: pre-wrap;
         min-height: 80px;
+        border-radius: var(--radius-sm, 4px);
       }
       .status-line {
         margin: 0.25em 0;
       }
       .error {
-        color: #ff6666;
+        color: var(--color-critical-strong, rgb(153 27 27));
       }
       .success {
-        color: #66ff66;
+        color: var(--color-blog-green-500, rgb(34 197 94));
       }
       .warn {
-        color: #ffff66;
+        color: var(--color-warning, rgb(250 204 21));
       }
     </style>
 

torrent/app.js

@@ -36,7 +36,7 @@ const app = angular.module("BTorrent", [
 const styleEl = document.createElement("style");
 styleEl.textContent = `
   .ui-grid-row {
-    border-bottom: 1px solid var(--color-border-subtle);
+    border-bottom: 1px solid var(--color-border-subtle, rgb(209 213 219));
   }
 `;
 document.head.appendChild(styleEl);