boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

feat(plan): render category colors from DB via --cat-color

Browse Source 
Replace 14 hardcoded per-category CSS rules with a single --cat-color
custom property set inline on each filled cell button, driven by the DB
categories list threaded from PlanWork → PlanGrid → PlanRangeChips.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-06 00:47:53 +02:00
parent 4b1c42b17f
commit 8b77a0a905
4 changed files with 54 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/admin/plan.css
View File

@@ -418,41 +418,13 @@
bottom: 8px;
width: 3px;
border-radius: 2px;
background: var(--plan-paper-rule);
background: var(--cat-color, var(--plan-paper-rule));
transition:
background var(--motion-fast) ease,
box-shadow var(--motion-fast) ease,
transform var(--motion-fast) ease;
}
/* When the cell has a chip, paint the tape to match the category. We use
the chip's class — but since the tape lives on the *button* and the
category class lives on the inner chip span, we paint it from a custom
property set on the button via JS-free attribute mapping. As a simpler
approach, color the tape by reading the .plan-chip--* class of the
*first descendant* with a CSS selector — modern browsers support :has(). */
.plan-cell:has(.plan-chip--work)::before {
background: var(--plan-tape-work);
}
.plan-cell:has(.plan-chip--preparation)::before {
background: var(--plan-tape-preparation);
}
.plan-cell:has(.plan-chip--travel)::before {
background: var(--plan-tape-travel);
}
.plan-cell:has(.plan-chip--leave)::before {
background: var(--plan-tape-leave);
}
.plan-cell:has(.plan-chip--sick)::before {
background: var(--plan-tape-sick);
}
.plan-cell:has(.plan-chip--training)::before {
background: var(--plan-tape-training);
}
.plan-cell:has(.plan-chip--other)::before {
background: var(--plan-tape-other);
}
.plan-cell:hover {
background: var(--plan-cell-bg-hover);
}
@@ -677,67 +649,27 @@
font-family: var(--plan-font-body);
/* Category chip is small, monoline. The heavy color lives on the tape
on the cell edge — the chip is the *text* version of the same color. */
color: var(--plan-ink);
background: color-mix(in srgb, var(--plan-paper) 60%, var(--plan-paper-soft));
border: 1px solid var(--plan-paper-rule);
color: var(--cat-color, var(--plan-ink));
background: color-mix(
in srgb,
var(--cat-color, var(--plan-paper-soft)) 10%,
var(--plan-paper)
);
border: 1px solid
color-mix(
in srgb,
var(--cat-color, var(--plan-paper-rule)) 35%,
transparent
);
white-space: nowrap;
}
/* Category chips inherit the cell's tape color via :has() */
.plan-cell:has(.plan-chip--work) .plan-chip--work {
color: var(--plan-tape-work);
border-color: color-mix(in srgb, var(--plan-tape-work) 35%, transparent);
background: color-mix(in srgb, var(--plan-tape-work) 10%, var(--plan-paper));
}
.plan-cell:has(.plan-chip--preparation) .plan-chip--preparation {
color: var(--plan-tape-preparation);
border-color: color-mix(
in srgb,
var(--plan-tape-preparation) 35%,
transparent
);
background: color-mix(
in srgb,
var(--plan-tape-preparation) 10%,
var(--plan-paper)
);
}
.plan-cell:has(.plan-chip--travel) .plan-chip--travel {
color: var(--plan-tape-travel);
border-color: color-mix(in srgb, var(--plan-tape-travel) 35%, transparent);
background: color-mix(
in srgb,
var(--plan-tape-travel) 10%,
var(--plan-paper)
);
}
.plan-cell:has(.plan-chip--leave) .plan-chip--leave {
color: var(--plan-tape-leave);
border-color: color-mix(in srgb, var(--plan-tape-leave) 35%, transparent);
background: color-mix(in srgb, var(--plan-tape-leave) 10%, var(--plan-paper));
}
.plan-cell:has(.plan-chip--sick) .plan-chip--sick {
color: var(--plan-tape-sick);
border-color: color-mix(in srgb, var(--plan-tape-sick) 35%, transparent);
background: color-mix(in srgb, var(--plan-tape-sick) 10%, var(--plan-paper));
}
.plan-cell:has(.plan-chip--training) .plan-chip--training {
color: var(--plan-tape-training);
border-color: color-mix(in srgb, var(--plan-tape-training) 35%, transparent);
background: color-mix(
in srgb,
var(--plan-tape-training) 10%,
var(--plan-paper)
);
}
.plan-cell:has(.plan-chip--other) .plan-chip--other {
color: var(--plan-tape-other);
border-color: color-mix(in srgb, var(--plan-tape-other) 35%, transparent);
background: color-mix(in srgb, var(--plan-tape-other) 10%, var(--plan-paper));
}
[data-theme="dark"] .plan-chip {
background: color-mix(in srgb, var(--plan-cell-bg) 90%, var(--plan-paper));
background: color-mix(
in srgb,
var(--cat-color, var(--plan-cell-bg)) 16%,
var(--plan-paper)
);
}
.plan-chip-project {