flexdesk 0.17.9 → 0.17.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/css/base.css +57 -55
- package/css/flexdesk.css +90 -88
- package/css/overrides.css +12 -12
- package/css/tokens.css +11 -2
- package/dist/flexdesk.css +90 -88
- package/dist/tokens.css +11 -2
- package/docs/concepts/styling.md +68 -0
- package/package.json +1 -1
package/docs/concepts/styling.md
CHANGED
|
@@ -45,3 +45,71 @@ its plain elements (headings, code, tables, lists).
|
|
|
45
45
|
Icons are rendered by applying the `material-symbols-outlined` class. FlexDesk does
|
|
46
46
|
not ship the font — supply it from Google Fonts or self-host. Without it, icons fall
|
|
47
47
|
back to their text names and nothing breaks.
|
|
48
|
+
|
|
49
|
+
## Retheming the accent (0.17.10)
|
|
50
|
+
|
|
51
|
+
The accent colours in `flexdesk.css` that were the literal `#007acc`
|
|
52
|
+
(`rgb(0, 122, 204)`), its tints, and the light accent `#569cd6` /
|
|
53
|
+
`#6eb3e9` are now derived from an accent token. Setting the tokens on `:root`
|
|
54
|
+
rethemes all of them:
|
|
55
|
+
|
|
56
|
+
```css
|
|
57
|
+
:root {
|
|
58
|
+
--accent: #8a2be2;
|
|
59
|
+
--accent-hover: #9b4dea;
|
|
60
|
+
--accent-bright: #a64dff; /* selections, focus rings, tints, primary buttons, the slider thumb */
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
`--accent` and `--accent-hover` stay literals. `--accent-bright` is the one
|
|
65
|
+
the rest is derived from, in `tokens.css`:
|
|
66
|
+
|
|
67
|
+
- `--state-selected`: `color-mix(in srgb, var(--accent-bright) 15%, transparent)`.
|
|
68
|
+
It was `rgba(0, 122, 204, 0.15)`, the same colour.
|
|
69
|
+
- `--shadow-glow`: `0 0 2px color-mix(in srgb, var(--accent-bright) 30%, transparent)`.
|
|
70
|
+
It was `0 0 2px rgba(0, 122, 204, 0.3)`, the same colour.
|
|
71
|
+
- `--twm-dt-new-bg` (new): `color-mix(in srgb, var(--accent-bright) 22%, transparent)`,
|
|
72
|
+
the colour a DataTable row or cell that has just arrived flashes from.
|
|
73
|
+
The stylesheet read it before, with an `rgba(0, 122, 204, 0.22)`
|
|
74
|
+
fallback, but nothing defined it.
|
|
75
|
+
- `--accent-light` (new): `color-mix(in srgb, var(--accent-bright) 70%, white)`,
|
|
76
|
+
about `#4da2db`. It replaces `#569cd6`.
|
|
77
|
+
- `--accent-lighter` (new): `color-mix(in srgb, var(--accent-bright) 55%, white)`,
|
|
78
|
+
about `#73b6e3`. It replaces `#6eb3e9`.
|
|
79
|
+
|
|
80
|
+
You can still set `--state-selected`, `--shadow-glow` or `--twm-dt-new-bg`
|
|
81
|
+
yourself. Set the derived tokens on `:root`, as `tokens.css` does: a custom
|
|
82
|
+
property that reads `var(--accent-bright)` is resolved where it is declared,
|
|
83
|
+
so an `--accent-bright` set on a lower element does not reach the tokens
|
|
84
|
+
derived from it on `:root`.
|
|
85
|
+
|
|
86
|
+
What changed in the stylesheet:
|
|
87
|
+
|
|
88
|
+
- **Tints.** The `rgba(0, 122, 204, a)` tints are now
|
|
89
|
+
`color-mix(in srgb, var(--accent-bright) a%, transparent)`, with the same
|
|
90
|
+
colour by default. They are the DataTable's selected rows and cells, the
|
|
91
|
+
filter chip when on, the autocomplete's namespace pill and active item,
|
|
92
|
+
`.add-widget-btn`, `.tile.resizing`, `.tile-ghost`, the focused leaf's inset
|
|
93
|
+
shadow, the document outline's active link, the canvas marquee and the
|
|
94
|
+
flow graph's port dots.
|
|
95
|
+
- **The light accent.** The SliderField thumb, the SortableList drop line,
|
|
96
|
+
add button and input focus, the DataTable filter inputs' focus border and
|
|
97
|
+
the notebook autocomplete's border read `--accent-light`. The active thumb
|
|
98
|
+
reads `--accent-lighter`. `#569cd6` cannot be mixed exactly from `#007acc`,
|
|
99
|
+
so these move to the nearest mix of `--accent-bright` with white: the thumb
|
|
100
|
+
goes from `#569cd6` to about `#4da2db`, and the active thumb from `#6eb3e9`
|
|
101
|
+
to about `#73b6e3`, a difference of about 1.5 to 1.7 ΔE (OKLab × 100).
|
|
102
|
+
- **No fallbacks.** `var(--accent-bright, #007acc)`, `var(--state-selected, …)`,
|
|
103
|
+
`var(--ea-accent, …)` and `var(--accent, …)` no longer carry fallbacks.
|
|
104
|
+
`tokens.css` defines all of them, so no computed colour changes, but
|
|
105
|
+
`flexdesk.css` now needs `tokens.css` (or your own definitions of these tokens).
|
|
106
|
+
|
|
107
|
+
Not part of the accent, and still literals: the autocomplete's type colours
|
|
108
|
+
(`stock` is `#569cd6` beside `#4ec9b0`, `#ce9178`, …), the notification
|
|
109
|
+
border `#4fc1ff`, and links (`#3794ff`).
|
|
110
|
+
|
|
111
|
+
Some accent blues in other shades are still literals, because no mix of an
|
|
112
|
+
accent token gives their colour exactly. They include the selected tile
|
|
113
|
+
(`#78b9ff`), the primary button's hover (`#1683c4`, `#1486cf`), the row
|
|
114
|
+
cursor and snap preview (`rgba(17, 119, 179, a)`), and some flow-lanes and
|
|
115
|
+
plot-window colours. To retheme them, override their rules.
|