`.hex` leaves the stylesheet: the settings colour value draws from base utilities #5272
Merged
masoncrew
opened this
Check · Review · Land · Live done
— Landed and live in production.
Merged
mason/forge:mason/5252-hex-leaves-the-stylesheet-the-settings-c → main
·
1 commit
·fork
-
Merged.
mason/5252-hex-leaves-the-stylesheet-the-settings-c was merged into
main as e44f3c0.
Review
Sign in to review this change.
6 files
changed +19
−4
docs/DESIGN.md
−1
|
|
@@ -435,7 +435,6 @@ the same line (#4888). |
| 435 | 435 |
- `.error-note` |
| 436 | 436 |
- `.field-row` |
| 437 | 437 |
- `.form-actions` |
| 438 | |
- `.hex` |
| 439 | 438 |
- `.ico` |
| 440 | 439 |
- `.ico-loader` |
| 441 | 440 |
- `.list` |
src/web/client.ts
+1
−1
|
|
@@ -1871,7 +1871,7 @@ export const shellJs = /* js */ ` |
| 1871 | 1871 |
|
| 1872 | 1872 |
// ---- colour pickers show the hex they are about to submit ---- |
| 1873 | 1873 |
doc.querySelectorAll('.color-field input[type="color"]').forEach(function (i) { |
| 1874 | |
var out = i.parentNode.querySelector('.hex'); |
| 1874 |
var out = i.parentNode.querySelector('[data-hex]'); |
| 1875 | 1875 |
if (!out) return; |
| 1876 | 1876 |
i.addEventListener('input', function () { out.textContent = i.value; }); |
| 1877 | 1877 |
}); |
src/web/pages/settings.ts
+1
−1
|
|
@@ -1737,7 +1737,7 @@ function colorField(value: string, label: string): Html { |
| 1737 | 1737 |
name="color" |
| 1738 | 1738 |
value="#${value}" |
| 1739 | 1739 |
aria-label="${label}" |
| 1740 | |
/><span class="hex">#${value}</span></span |
| 1740 |
/><span class="mono muted" data-hex>#${value}</span></span |
| 1741 | 1741 |
>`; |
| 1742 | 1742 |
} |
| 1743 | 1743 |
|
src/web/style/components.ts
−1
|
|
@@ -477,7 +477,6 @@ details[open] > summary.row > .row-lead { transform: rotate(90deg); } |
| 477 | 477 |
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } |
| 478 | 478 |
.color-field input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-strong); border-radius: 999px; } |
| 479 | 479 |
.color-field input[type="color"]::-moz-color-swatch { border: 1px solid var(--border-strong); border-radius: 999px; } |
| 480 | |
.color-field .hex { font-family: var(--mono); font-size: 12.5px; color: var(--muted-fg); } |
| 481 | 480 |
@media (pointer: coarse) { .color-field { min-height: 44px; } } |
| 482 | 481 |
@media (max-width: 719px) { |
| 483 | 482 |
.edit-row { align-items: stretch; } |
test/hex-retired.test.ts
added
+14
|
|
@@ -0,0 +1,14 @@ |
| 1 |
import { expect, test } from "bun:test"; |
| 2 |
import { css } from "../src/web/style"; |
| 3 |
import { shellJs } from "../src/web/client"; |
| 4 |
|
| 5 |
test(".hex leaves the stylesheet: the colour readout draws from base's .mono and .muted", () => { |
| 6 |
expect(css).not.toMatch(/\.hex\b/); |
| 7 |
expect(css).toMatch(/(^|[\s,])\.mono\s*\{[^}]*font-family: var\(--mono\)[^}]*font-size: 12\.5px/); |
| 8 |
expect(css).toContain(".muted { color: var(--muted-fg); }"); |
| 9 |
}); |
| 10 |
|
| 11 |
test("the picker script finds the readout by data-hex, not by a style class", () => { |
| 12 |
expect(shellJs).toContain("querySelector('[data-hex]')"); |
| 13 |
expect(shellJs).not.toContain("'.hex'"); |
| 14 |
}); |
test/settings.test.ts
+3
|
|
@@ -119,6 +119,9 @@ describe("repo settings", () => { |
| 119 | 119 |
).text(); |
| 120 | 120 |
expect(pageHtml).toContain("lc-d73a4a"); |
| 121 | 121 |
expect(pageHtml).toContain(".lc-d73a4a{--label:#d73a4a}"); |
| 122 |
|
| 123 |
expect(pageHtml).toContain('<span class="mono muted" data-hex>#'); |
| 124 |
expect(pageHtml).not.toContain('class="hex"'); |
| 122 | 125 |
|
| 123 | 126 |
await fetch(`${base}/olive/proj/settings/labels/${labelId}/delete`, { |
| 124 | 127 |
method: "POST", |