feat(sidebar): colours you can choose, and projects indented under their group
`projects.color` has been in the schema since the first migration, has defaulted to 'graphite' on every row ever written, and nothing has ever read it. There was no palette, no name-to-colour mapping, and the dot in the sidebar was hardcoded to a border grey. So this is not "add a picker"; it is implementing colour for the first time. Names, not hex values. A hex in ten thousand rows is a decision nobody can revisit; a name is resolved when the interface paints and can be retuned for a new theme or a new display. It is also the difference between a database that stores a fact and one that stores a rendering. The set is closed and refused at the edge — an unknown name would be stored happily and painted as the default, which looks like a colour that did not save. One palette across all five themes, and this is the one place in app.css that is not redefined per theme. Everything else there is text, a ground or a border and has to be measured against what sits behind it. These are small solid marks beside a label that already carries the meaning: what they owe is to be told apart, and to be visible on both a near-black and a white ground, which is why all ten sit in the mid-tone band. It also keeps them out of the trap the themes are in — a colour added to four blocks and forgotten in the fifth looks finished and falls back silently. There is no fifth block to forget. The list is written down three times: Go for validation, colors.js for the picker, app.css for the tokens that paint. So a test reads the other two — the same small-scanner approach openapi_test.go takes to the spec — and fails if the server accepts a colour nothing can draw, or the picker offers one the server refuses. Groups get a colour of their own (migration 0006) and projects inside a group are indented. The indent is to the group's *name*, not to its dot: the eye follows the text, and lining the projects up under the dot leaves them looking a step short of where the heading starts. The drop line is indented with them, so a drop inside a group reads as landing in the group. The group's dot is the control as well as the preview — you press the thing you are about to change, as on the project page. That was not the first design: a third text action, "Farve", sat beside Omdøb and Slet, and those carry `opacity: 0` rather than `display: none`, so they take their width whether or not you can see them. A group called "Arbejde" rendered as "ARBEJD". Moving the control onto the dot gave the name its room back. The smoke test measures the indent at the content edge rather than the element's, because the indent is padding and the box does not move — which is how the first version of that assertion passed 12 against 12. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
e8ebd0fa78
commit
550f420c59
@@ -45,6 +45,34 @@
|
||||
--danger: #cf6b6b;
|
||||
--danger-sunken: #33201f;
|
||||
|
||||
/* Marks for projects, groups, labels and filters.
|
||||
*
|
||||
* The one set of colours in this file that is *not* redefined per theme, and
|
||||
* on purpose. Everything else here is text, a ground or a border, and has to
|
||||
* be measured against whatever sits behind it. These are none of those: they
|
||||
* are small solid dots beside a label that carries the meaning, so what they
|
||||
* owe is to be told apart from one another and to be visible on both a
|
||||
* near-black and a white ground. All of them sit in the mid-tone band where
|
||||
* that is true, which is why none is very dark or very pale.
|
||||
*
|
||||
* It also keeps them out of the trap the themes are in: a colour added to four
|
||||
* blocks and forgotten in the fifth looks finished and falls back silently.
|
||||
* There is no fifth block to forget.
|
||||
*
|
||||
* The ids are what the database stores. web/src/lib/colors.js lists them for
|
||||
* the picker, and a Go test reads that file to check the server's list of
|
||||
* accepted names has not drifted from it. */
|
||||
--color-graphite: #8a8f98;
|
||||
--color-tomato: #d9614f;
|
||||
--color-amber: #d9a04f;
|
||||
--color-lime: #a3b74d;
|
||||
--color-green: #4fae7a;
|
||||
--color-teal: #45b0ab;
|
||||
--color-blue: #5b9bd9;
|
||||
--color-indigo: #7f83d6;
|
||||
--color-violet: #a86fd0;
|
||||
--color-magenta: #d46aa8;
|
||||
|
||||
/* Type. System stack: it renders instantly, matches the platform, and has
|
||||
proper Danish glyphs on every device — a webfont would cost a round trip
|
||||
and a flash of unstyled text on the one screen people open fifty times a day. */
|
||||
|
||||
Reference in New Issue
Block a user