github-mirror/project-nomad
1
0
Fork 0
mirror of https://github.com/Crosstalk-Solutions/project-nomad.git synced 2026-10-17 05:14:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity Graph

fix(dashboard): show the color picker swatches solid

Browse Source 
The swatches reused the tile tint, which is 10% opacity. That reads well across
a 190px card and makes six 28px squares indistinguishable from one another, so
the picker looked like six empty outlines. Caught by looking at it.

Each color now carries a solid class alongside its tint: the picker shows the
color at full strength, the tile stays subtle. A test asserts the swatch class
is solid rather than an opacity variant, since reaching for the tint again is
the obvious mistake.

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 09:02:11 -07:00 committed by Jake Turner
parent ce7c82a72f
commit 34b4542da4
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
admin/constants/link_tile_colors.ts
View File

@ -9,6 +9,11 @@
* 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.
*
* `bg` is the tile tint and `swatch` is the same color at full strength. They
* differ on purpose: a 10% tint reads well across a 190px card but makes six
* 28px picker swatches indistinguishable from each other, so the picker shows
* the color solid while the tile stays subtle.
*
* Class names are written out in full and never interpolated. Tailwind scans
* source text for literal class strings, so a computed name like
* `bg-desert-${id}/10` would be silently dropped from the build.
@ -16,6 +21,7 @@
export const LINK_TILE_COLORS = [
{
id: 'green',
swatch: 'bg-desert-green',
label: 'Green',
border: 'border-desert-green/70',
bg: 'bg-desert-green/10',
@ -23,6 +29,7 @@ export const LINK_TILE_COLORS = [
},
{
id: 'olive',
swatch: 'bg-desert-olive',
label: 'Olive',
border: 'border-desert-olive/70',
bg: 'bg-desert-olive/10',
@ -30,6 +37,7 @@ export const LINK_TILE_COLORS = [
},
{
id: 'orange',
swatch: 'bg-desert-orange',
label: 'Orange',
border: 'border-desert-orange/70',
bg: 'bg-desert-orange/10',
@ -37,6 +45,7 @@ export const LINK_TILE_COLORS = [
},
{
id: 'red',
swatch: 'bg-desert-red',
label: 'Red',
border: 'border-desert-red/70',
bg: 'bg-desert-red/10',
@ -44,6 +53,7 @@ export const LINK_TILE_COLORS = [
},
{
id: 'sand',
swatch: 'bg-desert-sand',
label: 'Sand',
border: 'border-desert-sand/70',
bg: 'bg-desert-sand/20',
@ -51,6 +61,7 @@ export const LINK_TILE_COLORS = [
},
{
id: 'stone',
swatch: 'bg-desert-stone',
label: 'Stone',
border: 'border-desert-stone/70',
bg: 'bg-desert-stone/10',

6
admin/inertia/components/LinkTileModal.tsx
View File

@ -167,8 +167,10 @@ export default function LinkTileModal({
aria-label={option.label}
aria-pressed={color === option.id}
onClick={() => setColor(option.id)}
className={`h-7 w-7 rounded border-2 border-dashed transition-transform ${option.border} ${option.bg} ${
color === option.id ? 'scale-110 ring-2 ring-offset-1 ring-desert-green' : ''
className={`h-7 w-7 rounded transition-transform ${option.swatch} ${
color === option.id
? 'scale-110 ring-2 ring-offset-2 ring-text-primary'
: 'opacity-70 hover:opacity-100'
}`}
/>
))}

9
admin/tests/unit/link_tile.spec.ts
View File

@ -122,7 +122,14 @@ test('every link tile color ships complete, literal Tailwind classes', () => {
assert.ok(option.border.startsWith('border-desert-'), option.id)
assert.ok(option.bg.startsWith('bg-desert-'), option.id)
assert.ok(option.marker.startsWith('text-desert-'), option.id)
assert.ok(!`${option.border}${option.bg}${option.marker}`.includes('${'), option.id)
// The swatch is the same color solid; a tint that works on a card is
// indistinguishable at 28px.
assert.ok(option.swatch.startsWith('bg-desert-'), option.id)
assert.ok(!option.swatch.includes('/'), `${option.id} swatch must be solid`)
assert.ok(
!`${option.border}${option.bg}${option.marker}${option.swatch}`.includes('${'),
option.id
)
}
})