chore(dashboard): reword the link tile color helper, and use US spelling

"still tellable apart from" read badly; it is now "distinguishable from".

Also switches the spelling I had introduced to American, matching the rest of
the product and the existing schema and constants (custom_color, PIN_COLORS).
Limited to the files this branch adds; the two pre-existing benchmark
components that use the British form are left alone rather than churned.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01F8Mgg1vd2eKSs8StZiuyMV
This commit is contained in:
Chris Sherwood 2026-08-31 08:45:29 -07:00 committed by Jake Turner
parent 400d64ab55
commit c33af6a605
4 changed files with 9 additions and 9 deletions

View File

@ -1,11 +1,11 @@
/**
* The colours a user can give a dashboard link tile.
* The colors a user can give a dashboard link tile.
*
* Drawn from the brand palette rather than arbitrary hex, so a tile always sits
* on-theme next to the managed app cards. The default white-on-green contrast
* read as jarring on the dashboard, which is why this exists.
*
* Tiles stay visually distinct from managed apps regardless of colour: the
* Tiles stay visually distinct from managed apps regardless of color: the
* dashed border and the external-link marker are what carry that, not the hue.
* The tint is deliberately light so the distinction survives every option.
*

View File

@ -157,7 +157,7 @@ export default function LinkTileModal({
</div>
<div>
<p className="mb-1.5 font-medium text-text-primary">Colour</p>
<p className="mb-1.5 font-medium text-text-primary">Color</p>
<div className="flex items-center gap-2">
{LINK_TILE_COLORS.map((option) => (
<button
@ -174,8 +174,8 @@ export default function LinkTileModal({
))}
</div>
<p className="mt-1.5 text-xs text-text-muted">
Links stay outlined rather than filled whichever colour you pick, so they
are still tellable apart from apps NOMAD manages.
Links stay outlined rather than filled whichever color you pick, so they
are distinguishable from apps NOMAD manages.
</p>
</div>
</div>

View File

@ -272,7 +272,7 @@ export default function Home(props: {
const shouldHighlight = isEasySetup && shouldHighlightEasySetup
const isLinkTile = Boolean(item.linkTile)
// A flat surface colour read as a stark white card next to the filled
// A flat surface color read as a stark white card next to the filled
// app tiles. Tint from the brand palette instead, user-chosen.
const tileColor = linkTileColor(item.linkTile?.link_color)

View File

@ -108,14 +108,14 @@ test('the default icon is part of the offered set', () => {
assert.ok((LINK_TILE_ICONS as readonly string[]).includes(DEFAULT_LINK_TILE_ICON))
})
test('link tile colours resolve from the brand palette', () => {
test('link tile colors resolve from the brand palette', () => {
// Unknown, null and empty all fall back rather than rendering an untinted card.
assert.equal(linkTileColor('orange').id, 'orange')
assert.equal(linkTileColor(null).id, DEFAULT_LINK_TILE_COLOR)
assert.equal(linkTileColor('chartreuse').id, DEFAULT_LINK_TILE_COLOR)
})
test('every link tile colour ships complete, literal Tailwind classes', () => {
test('every link tile color ships complete, literal Tailwind classes', () => {
// Tailwind scans for literal class strings, so an interpolated name would be
// dropped from the build and the tile would render untinted.
for (const option of LINK_TILE_COLORS) {
@ -126,6 +126,6 @@ test('every link tile colour ships complete, literal Tailwind classes', () => {
}
})
test('the default colour is one of the offered options', () => {
test('the default color is one of the offered options', () => {
assert.ok(LINK_TILE_COLOR_IDS.includes(DEFAULT_LINK_TILE_COLOR))
})