@things-factory/shell 10.1.258 → 10.1.259

package/client/themes/domain-theme-cherry-red.css

@@ -1,3 +1,4 @@
+/* Destructive colors inherit the shared light/dark semantic palette, independently of the brand. */
 .domain-theme-cherry-red {
   --md-sys-color-primary: rgb(211 47 47);
   --md-sys-color-surface-tint: rgb(211 47 47);
@@ -12,10 +13,6 @@
   --md-sys-color-on-tertiary: rgb(255 255 255);
   --md-sys-color-tertiary-container: rgb(252 228 236);
   --md-sys-color-on-tertiary-container: rgb(136 14 79);
-  --md-sys-color-error: #fe594e;
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 215);
-  --md-sys-color-on-error-container: #fe594e;
   --md-sys-color-background: rgb(255 250 250);
   --md-sys-color-on-background: rgb(35 25 25);
   --md-sys-color-surface: rgb(255 250 250);
@@ -64,10 +61,6 @@
   --md-sys-color-on-tertiary: rgb(136 14 79);
   --md-sys-color-tertiary-container: rgb(173 20 87);
   --md-sys-color-on-tertiary-container: rgb(252 228 236);
-  --md-sys-color-error: #fbafa9;
-  --md-sys-color-on-error: #fe594e;
-  --md-sys-color-error-container: #fe594e;
-  --md-sys-color-on-error-container: #fbafa9;
   --md-sys-color-background: rgb(25 17 17);
   --md-sys-color-on-background: rgb(238 226 226);
   --md-sys-color-surface: rgb(25 17 17);

package/client/themes/domain-theme-forest-green.css

@@ -1,3 +1,4 @@
+/* Destructive colors inherit the shared light/dark semantic palette, independently of the brand. */
 .domain-theme-forest-green {
   --md-sys-color-primary: rgb(56 142 60);
   --md-sys-color-surface-tint: rgb(56 142 60);
@@ -12,10 +13,6 @@
   --md-sys-color-on-tertiary: rgb(255 255 255);
   --md-sys-color-tertiary-container: rgb(178 223 219);
   --md-sys-color-on-tertiary-container: rgb(0 77 64);
-  --md-sys-color-error: #fe594e;
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 215);
-  --md-sys-color-on-error-container: #fe594e;
   --md-sys-color-background: rgb(250 253 250);
   --md-sys-color-on-background: rgb(25 32 25);
   --md-sys-color-surface: rgb(250 253 250);
@@ -64,10 +61,6 @@
   --md-sys-color-on-tertiary: rgb(0 77 64);
   --md-sys-color-tertiary-container: rgb(0 105 92);
   --md-sys-color-on-tertiary-container: rgb(178 223 219);
-  --md-sys-color-error: #fbafa9;
-  --md-sys-color-on-error: #fe594e;
-  --md-sys-color-error-container: #fe594e;
-  --md-sys-color-on-error-container: #fbafa9;
   --md-sys-color-background: rgb(17 22 17);
   --md-sys-color-on-background: rgb(226 235 226);
   --md-sys-color-surface: rgb(17 22 17);

package/client/themes/domain-theme-ocean-blue.css

@@ -1,3 +1,4 @@
+/* Destructive colors inherit the shared light/dark semantic palette, independently of the brand. */
 .domain-theme-ocean-blue {
   --md-sys-color-primary: rgb(30 136 229);
   --md-sys-color-surface-tint: rgb(30 136 229);
@@ -12,10 +13,6 @@
   --md-sys-color-on-tertiary: rgb(255 255 255);
   --md-sys-color-tertiary-container: rgb(178 235 242);
   --md-sys-color-on-tertiary-container: rgb(0 96 100);
-  --md-sys-color-error: #fe594e;
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 215);
-  --md-sys-color-on-error-container: #fe594e;
   --md-sys-color-background: rgb(250 252 255);
   --md-sys-color-on-background: rgb(23 29 35);
   --md-sys-color-surface: rgb(250 252 255);
@@ -64,10 +61,6 @@
   --md-sys-color-on-tertiary: rgb(0 96 100);
   --md-sys-color-tertiary-container: rgb(0 131 143);
   --md-sys-color-on-tertiary-container: rgb(178 235 242);
-  --md-sys-color-error: #fbafa9;
-  --md-sys-color-on-error: #fe594e;
-  --md-sys-color-error-container: #fe594e;
-  --md-sys-color-on-error-container: #fbafa9;
   --md-sys-color-background: rgb(16 22 28);
   --md-sys-color-on-background: rgb(226 234 242);
   --md-sys-color-surface: rgb(16 22 28);

package/client/themes/domain-theme-royal-purple.css

@@ -1,3 +1,4 @@
+/* Destructive colors inherit the shared light/dark semantic palette, independently of the brand. */
 .domain-theme-royal-purple {
   --md-sys-color-primary: rgb(123 31 162);
   --md-sys-color-surface-tint: rgb(123 31 162);
@@ -12,10 +13,6 @@
   --md-sys-color-on-tertiary: rgb(255 255 255);
   --md-sys-color-tertiary-container: rgb(209 196 233);
   --md-sys-color-on-tertiary-container: rgb(49 27 146);
-  --md-sys-color-error: #fe594e;
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 215);
-  --md-sys-color-on-error-container: #fe594e;
   --md-sys-color-background: rgb(253 250 255);
   --md-sys-color-on-background: rgb(30 25 35);
   --md-sys-color-surface: rgb(253 250 255);
@@ -64,10 +61,6 @@
   --md-sys-color-on-tertiary: rgb(49 27 146);
   --md-sys-color-tertiary-container: rgb(69 39 160);
   --md-sys-color-on-tertiary-container: rgb(209 196 233);
-  --md-sys-color-error: #fbafa9;
-  --md-sys-color-on-error: #fe594e;
-  --md-sys-color-error-container: #fe594e;
-  --md-sys-color-on-error-container: #fbafa9;
   --md-sys-color-background: rgb(20 16 25);
   --md-sys-color-on-background: rgb(230 226 236);
   --md-sys-color-surface: rgb(20 16 25);

package/client/themes/domain-theme-sunset-orange.css

@@ -1,3 +1,4 @@
+/* Destructive colors inherit the shared light/dark semantic palette, independently of the brand. */
 .domain-theme-sunset-orange {
   --md-sys-color-primary: rgb(245 124 0);
   --md-sys-color-surface-tint: rgb(245 124 0);
@@ -12,10 +13,6 @@
   --md-sys-color-on-tertiary: rgb(0 0 0);
   --md-sys-color-tertiary-container: rgb(255 249 196);
   --md-sys-color-on-tertiary-container: rgb(255 143 0);
-  --md-sys-color-error: #fe594e;
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 215);
-  --md-sys-color-on-error-container: #fe594e;
   --md-sys-color-background: rgb(255 252 248);
   --md-sys-color-on-background: rgb(35 30 24);
   --md-sys-color-surface: rgb(255 252 248);
@@ -64,10 +61,6 @@
   --md-sys-color-on-tertiary: rgb(255 143 0);
   --md-sys-color-tertiary-container: rgb(255 160 0);
   --md-sys-color-on-tertiary-container: rgb(255 249 196);
-  --md-sys-color-error: #fbafa9;
-  --md-sys-color-on-error: #fe594e;
-  --md-sys-color-error-container: #fe594e;
-  --md-sys-color-on-error-container: #fbafa9;
   --md-sys-color-background: rgb(24 20 14);
   --md-sys-color-on-background: rgb(234 228 220);
   --md-sys-color-surface: rgb(24 20 14);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "10.1.258",
+  "version": "10.1.259",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -142,5 +142,5 @@
     "pg": "^8.7.3",
     "sqlite3": "^5.0.8"
   },
-  "gitHead": "c7b7e3b4e9aa1b36a246ccee312a4124a50924dd"
+  "gitHead": "e7283779ee700b4b124226f0ad22d7c1e4063ae7"
 }

package/tests/destructive-theme-colors.test.mjs

@@ -0,0 +1,28 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync, readdirSync } from 'node:fs'
+
+const directory = new URL('../client/themes/', import.meta.url)
+const declarations = text => Object.fromEntries([...text.matchAll(/(--md-sys-color-(?:on-)?error(?:-container)?):\s*([^;]+);/g)].map(match => [match[1], match[2].trim()]))
+function luminance(color) {
+  const channels = color.startsWith('#')
+    ? color.slice(1).match(/../g).map(part => parseInt(part, 16))
+    : color.match(/[\d.]+/g).slice(0, 3).map(Number)
+  return channels.map(n => n / 255).map(n => n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4).reduce((sum, n, i) => sum + n * [.2126, .7152, .0722][i], 0)
+}
+for (const mode of ['light', 'dark']) {
+  test(`${mode}: both destructive foreground/background pairs retain readable contrast`, () => {
+    const colors = declarations(readFileSync(new URL(`${mode}.css`, directory), 'utf8'))
+    for (const suffix of ['', '-container']) {
+      const a = luminance(colors[`--md-sys-color-error${suffix}`])
+      const b = luminance(colors[`--md-sys-color-on-error${suffix}`])
+      const contrast = (Math.max(a, b) + .05) / (Math.min(a, b) + .05)
+      assert.ok(contrast >= 4.5, `${mode}${suffix}: ${contrast.toFixed(2)}`)
+    }
+  })
+}
+for (const file of readdirSync(directory).filter(name => /^domain-theme-.*\.css$/.test(name))) {
+  test(`${file}: branding inherits destructive colors from the shared light/dark palette`, () => {
+    assert.deepEqual(declarations(readFileSync(new URL(file, directory), 'utf8')), {})
+  })
+}