flexdesk 0.17.9 → 0.17.11
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 +42 -0
- package/css/base.css +83 -83
- package/css/flexdesk.css +123 -123
- package/css/overrides.css +19 -19
- package/css/tokens.css +16 -2
- package/dist/flexdesk.css +123 -123
- package/dist/tokens.css +16 -2
- package/docs/concepts/styling.md +134 -0
- package/package.json +1 -1
package/dist/tokens.css
CHANGED
|
@@ -90,6 +90,18 @@
|
|
|
90
90
|
--accent-hover: #1177bb;
|
|
91
91
|
--accent-bright: #007acc; /* --layout-accent value */
|
|
92
92
|
|
|
93
|
+
/* Every other accent colour is DERIVED from the three above, so a
|
|
94
|
+
consumer that sets them (on :root) rethemes the whole accent (BUG-0044).
|
|
95
|
+
The light accents mix --accent-bright toward white: a slider thumb, a
|
|
96
|
+
sortable list's drop line and add button, a focused filter input. */
|
|
97
|
+
--accent-light: color-mix(in srgb, var(--accent-bright) 70%, white); /* ≈ #4da2db, was #569cd6 */
|
|
98
|
+
--accent-lighter: color-mix(in srgb, var(--accent-bright) 55%, white); /* ≈ #73b6e3, was #6eb3e9 */
|
|
99
|
+
/* BUG-0045: the other accent shades. A primary button's hover, the window
|
|
100
|
+
bar's hovered item; a pressed accent control; the lightest accent text. */
|
|
101
|
+
--accent-bright-hover: color-mix(in srgb, var(--accent-bright) 90%, white); /* ≈ #1987d1, was #1486cf / #1683c4 */
|
|
102
|
+
--accent-pressed: color-mix(in srgb, var(--accent-hover) 90%, black); /* ≈ #0f6ba8, was #1a6aa5 / #0f6fa8 */
|
|
103
|
+
--accent-lightest: color-mix(in srgb, var(--accent-bright) 36%, white); /* ≈ #a3cfed, was #9ecfff / #9fd0f0 */
|
|
104
|
+
|
|
93
105
|
/* ── Semantic colors ───────────────────────────────────────── */
|
|
94
106
|
--color-success: #3fb950;
|
|
95
107
|
--color-warning: #ff9800;
|
|
@@ -100,7 +112,9 @@
|
|
|
100
112
|
/* ── Surface state overlays ────────────────────────────────── */
|
|
101
113
|
--state-hover: rgba(255, 255, 255, 0.05);
|
|
102
114
|
--state-active: rgba(255, 255, 255, 0.08);
|
|
103
|
-
--state-selected: rgba(0, 122, 204, 0.15)
|
|
115
|
+
--state-selected: color-mix(in srgb, var(--accent-bright) 15%, transparent); /* rgba(0, 122, 204, 0.15) */
|
|
116
|
+
/* A DataTable row or cell that has just arrived flashes from this to transparent. */
|
|
117
|
+
--twm-dt-new-bg: color-mix(in srgb, var(--accent-bright) 22%, transparent); /* rgba(0, 122, 204, 0.22) */
|
|
104
118
|
|
|
105
119
|
/* ── Overlay scrollbars (installOverlayScrollbar) ─────────── */
|
|
106
120
|
--scrollbar-size: 6px;
|
|
@@ -114,7 +128,7 @@
|
|
|
114
128
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
115
129
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
116
130
|
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
117
|
-
--shadow-glow: 0 0 2px rgba(0, 122, 204, 0.3)
|
|
131
|
+
--shadow-glow: 0 0 2px color-mix(in srgb, var(--accent-bright) 30%, transparent); /* rgba(0, 122, 204, 0.3) */
|
|
118
132
|
|
|
119
133
|
/* ── Z-index layers ───────────────────────────────────────── */
|
|
120
134
|
--z-base: 0;
|
package/docs/concepts/styling.md
CHANGED
|
@@ -45,3 +45,137 @@ 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 DataTable header
|
|
109
|
+
icons' type colours (`flow` is `#268bd2` beside `#6c71c4`, `#cb4b16`,
|
|
110
|
+
`#859900`), the notification border `#4fc1ff`, links (`#3794ff`, the about
|
|
111
|
+
dialog's link hover `#4da6ff`, and the breadcrumb and plot-series links), and the flow kit's categorical colours
|
|
112
|
+
(`--twm-flow-blue-*` beside `--twm-flow-indigo-*`, …). The (0.17.11) section
|
|
113
|
+
lists the rest.
|
|
114
|
+
|
|
115
|
+
0.17.10 left the accent blues in other shades as literals: the selected tile
|
|
116
|
+
(`#78b9ff`), the primary button's hover (`#1683c4`, `#1486cf`), the row
|
|
117
|
+
cursor and snap preview (`rgba(17, 119, 179, a)`), and some flow-lanes and
|
|
118
|
+
plot-window colours. 0.17.11 derives them too (next section).
|
|
119
|
+
|
|
120
|
+
## Retheming the accent shades (0.17.11)
|
|
121
|
+
|
|
122
|
+
The accent blues that 0.17.10 left as literals, in shades no mix of an
|
|
123
|
+
accent token gives exactly, are now derived from the accent tokens too, so
|
|
124
|
+
setting `--accent`, `--accent-hover` and `--accent-bright` on `:root`
|
|
125
|
+
rethemes the primary buttons' hover, the selected tile, the row cursor, the
|
|
126
|
+
window bar, the plot window, the spinner and the flow lanes as well.
|
|
127
|
+
`--accent` and `--accent-bright` stay two tokens.
|
|
128
|
+
|
|
129
|
+
Three tokens are new in `tokens.css`, each read by more than one rule:
|
|
130
|
+
|
|
131
|
+
- `--accent-bright-hover`: `color-mix(in srgb, var(--accent-bright) 90%, white)`,
|
|
132
|
+
about `#1987d1`. A primary button's hover (the modal's too) and the window
|
|
133
|
+
bar's hovered item.
|
|
134
|
+
- `--accent-pressed`: `color-mix(in srgb, var(--accent-hover) 90%, black)`,
|
|
135
|
+
about `#0f6ba8`. The window bar's pressed item and the flow lanes' pressed
|
|
136
|
+
show button.
|
|
137
|
+
- `--accent-lightest`: `color-mix(in srgb, var(--accent-bright) 36%, white)`,
|
|
138
|
+
about `#a3cfed`. The lightest accent text, after `--accent-light` and
|
|
139
|
+
`--accent-lighter`.
|
|
140
|
+
|
|
141
|
+
They are defined from the accent tokens in `tokens.css`. If you supply your
|
|
142
|
+
own token definitions instead of `tokens.css`, define these three as well:
|
|
143
|
+
the rules that read them have no fallback.
|
|
144
|
+
|
|
145
|
+
None of the old colours is an exact mix, so each moves to the nearest one,
|
|
146
|
+
by the ΔE (OKLab × 100) below. A tint's ΔE is measured over `--surface-0`
|
|
147
|
+
(`#1e1e1e`), where it is seen, and every colour is rounded to 8 bits per
|
|
148
|
+
channel first.
|
|
149
|
+
|
|
150
|
+
| Where | Was | Now reads | Default now | ΔE |
|
|
151
|
+
|---|---|---|---|---|
|
|
152
|
+
| `.twm-btn--primary:hover` | `#1486cf` | `--accent-bright-hover` | `#1987d1` | 0.4 |
|
|
153
|
+
| the modal's primary button hover | `#1683c4` | `--accent-bright-hover` | `#1987d1` | 2.2 |
|
|
154
|
+
| `.twm-bar-windows__item:hover` | `#268bd2` | `--accent-bright-hover` | `#1987d1` | 1.3 |
|
|
155
|
+
| `.twm-bar-windows__item:active` | `#1a6aa5` | `--accent-pressed` | `#0f6ba8` | 0.6 |
|
|
156
|
+
| the plot series and plot config checkboxes (`accent-color`), the plot config select's focus border | `#268bd2` | `color-mix(in srgb, var(--accent-bright) 87%, white)` | `#218bd3` | 0.3 |
|
|
157
|
+
| the plot window toolbar's active button, the computing spinner | `#4a90d9` | `color-mix(in srgb, var(--accent-bright) 80%, white)` | `#3395d6` | 2.1 |
|
|
158
|
+
| the active button's tint and hover tint, the plot table's hovered row | `rgba(74, 144, 217, 0.15 \| 0.25 \| 0.1)` | that 80% mix at the same alpha | | 0.6, 0.9, 0.5 |
|
|
159
|
+
| the selected tile's border and title, the tile header buttons' and tile menu's hover icons, the action dropdown's icons | `#78b9ff` | `--accent-lighter` | `#73b6e3` | 4.1 |
|
|
160
|
+
| the selected tile's ring and header tint | `rgba(120, 185, 255, 0.3 \| 0.1)` | `--accent-lighter` at the same alpha | | 1.6, 0.6 |
|
|
161
|
+
| the action dropdown's hovered or focused icon | `#9ecfff` | `--accent-lightest` | `#a3cfed` | 2.6 |
|
|
162
|
+
| the notebook autocomplete's focused border | `#79b8f8` | `--accent-lighter` | `#73b6e3` | 3.2 |
|
|
163
|
+
| `.twm-row-cursor`, the focused landing pane's head, `.twm-action-btn:hover` | `rgba(17, 119, 179, 0.12 \| 0.10 \| 0.08)` | `--accent-hover` at the same alpha | | 0.2, 0.2, 0.2 |
|
|
164
|
+
| `.twm-snap-preview` | `rgba(23, 119, 179, 0.18)` | `--accent-hover` at 18% | | 0.2 |
|
|
165
|
+
| the flow lanes' wire, `--twm-lanes-wire` | `#5b9bd5` | `--accent-light` | `#4da2db` | 2.0 |
|
|
166
|
+
| the flow lanes' ring, `--twm-lanes-ring` | `#1683c4` | `--accent-bright-hover` | `#1987d1` | 2.2 |
|
|
167
|
+
| the flow lanes' pressed show button | `#0f6fa8` | `--accent-pressed` | `#0f6ba8` | 1.2 |
|
|
168
|
+
| the selected card's glow, a new or changed cell and column | `rgba(22, 131, 196, 0.8 \| 0.07 \| 0.14)` | `--twm-lanes-ring` at the same alpha | | 1.7, 0.3, 0.4 |
|
|
169
|
+
| a new or changed column's type | `#9fd0f0` | `--accent-lightest` | `#a3cfed` | 0.6 |
|
|
170
|
+
|
|
171
|
+
The largest shift is the selected tile's light blue: `#78b9ff` is bluer
|
|
172
|
+
than any mix of `#007acc` with white, and `--accent-lighter` is the nearest.
|
|
173
|
+
`--twm-lanes-wire` and `--twm-lanes-ring` are set on `.twm-flow-lanes` and
|
|
174
|
+
read `--accent-light` and `--accent-bright-hover`, so they follow the accent
|
|
175
|
+
set on `:root` and can still be set per lanes view.
|
|
176
|
+
|
|
177
|
+
Still literals, because they are not the accent: the colours listed in the
|
|
178
|
+
(0.17.10) section above, the charts' series palette (`#268bd2` first in
|
|
179
|
+
`COLOR_PALETTE`, `#1f77b4` as the colour pickers' default), and the Monaco
|
|
180
|
+
editor theme's selection colours, which Monaco takes as hex values and not
|
|
181
|
+
as CSS.
|