@tangle-network/brand 0.8.0 → 0.8.1
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 +8 -0
- package/package.json +1 -1
- package/src/styles/themes.css +58 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.8.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- d18fce7: Fix `[data-theme]` scopes not re-skinning components, and lift the aubergine palette off near-black so it reads as purple.
|
|
8
|
+
|
|
9
|
+
The named themes changed `--hsl-*` spine vars, but Tailwind utilities (`bg-card`, `bg-primary`, `border-border`, `bg-surface-container*`) read the `--color-*` layer, which is declared only at `:root` — so its computed neutral value was inherited by themed subtrees regardless of the spine override (a double-indirection custom-property inheritance trap). Each `[data-theme]` scope now redeclares the `--color-*` layer directly, forcing it to recompute from that element's own `--hsl-*`. Aubergine's base lightness is raised (~7%→12–20% L, higher saturation) so surfaces read aubergine-purple instead of black.
|
|
10
|
+
|
|
3
11
|
## 0.8.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
package/package.json
CHANGED
package/src/styles/themes.css
CHANGED
|
@@ -4,25 +4,66 @@
|
|
|
4
4
|
* data-theme="<name>" on a wrapper (or <html>). The default :root / .dark spine
|
|
5
5
|
* is the neutral "tangle" theme; "<name>-light" scopes are the light variants. */
|
|
6
6
|
|
|
7
|
+
/* Bridge — the actual re-skin mechanism. Tailwind utilities read the --color-*
|
|
8
|
+
* layer (theme.css @theme: `bg-card` → var(--color-card) = hsl(var(--card))).
|
|
9
|
+
* Both --color-* and its --card/--hsl-card source are declared only at :root, so
|
|
10
|
+
* a descendant [data-theme] that changes --hsl-card never re-substitutes the
|
|
11
|
+
* :root-computed --color-card the utility consumes — the value is frozen at the
|
|
12
|
+
* root color (double-indirection inheritance trap). Redeclaring the --color-*
|
|
13
|
+
* layer directly on any themed element forces each one to recompute from that
|
|
14
|
+
* element's own --hsl-*. Tokens a theme doesn't override fall back to the
|
|
15
|
+
* inherited neutral --hsl-* (all defined at :root), so this is always valid. */
|
|
16
|
+
[data-theme] {
|
|
17
|
+
--color-background: hsl(var(--hsl-background));
|
|
18
|
+
--color-foreground: hsl(var(--hsl-foreground));
|
|
19
|
+
--color-card: hsl(var(--hsl-card));
|
|
20
|
+
--color-card-foreground: hsl(var(--hsl-card-foreground));
|
|
21
|
+
--color-popover: hsl(var(--hsl-popover));
|
|
22
|
+
--color-popover-foreground: hsl(var(--hsl-popover-foreground));
|
|
23
|
+
--color-primary: hsl(var(--hsl-primary));
|
|
24
|
+
--color-primary-foreground: hsl(var(--hsl-primary-foreground));
|
|
25
|
+
--color-secondary: hsl(var(--hsl-secondary));
|
|
26
|
+
--color-secondary-foreground: hsl(var(--hsl-secondary-foreground));
|
|
27
|
+
--color-muted: hsl(var(--hsl-muted));
|
|
28
|
+
--color-muted-foreground: hsl(var(--hsl-muted-foreground));
|
|
29
|
+
--color-accent: hsl(var(--hsl-accent));
|
|
30
|
+
--color-accent-foreground: hsl(var(--hsl-accent-foreground));
|
|
31
|
+
--color-destructive: hsl(var(--hsl-destructive));
|
|
32
|
+
--color-destructive-foreground: hsl(var(--hsl-destructive-foreground));
|
|
33
|
+
--color-border: hsl(var(--hsl-border));
|
|
34
|
+
--color-input: hsl(var(--hsl-input));
|
|
35
|
+
--color-ring: hsl(var(--hsl-ring));
|
|
36
|
+
--color-surface-container-lowest: var(--md3-surface-container-lowest);
|
|
37
|
+
--color-surface-container-low: var(--md3-surface-container-low);
|
|
38
|
+
--color-surface-container: var(--md3-surface-container);
|
|
39
|
+
--color-surface-container-high: var(--md3-surface-container-high);
|
|
40
|
+
--color-surface-container-highest: var(--md3-surface-container-highest);
|
|
41
|
+
--color-fg: var(--text-primary);
|
|
42
|
+
--color-fg-muted: var(--text-muted);
|
|
43
|
+
--color-fg-dim: var(--text-dim);
|
|
44
|
+
}
|
|
45
|
+
|
|
7
46
|
/* ───────────────────────── Aubergine (bazaar) — dark purple ──────────────── */
|
|
8
47
|
[data-theme="aubergine"] {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
--hsl-
|
|
12
|
-
--hsl-
|
|
13
|
-
--hsl-
|
|
14
|
-
--hsl-
|
|
15
|
-
--hsl-
|
|
16
|
-
--hsl-
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--md3-surface-container-
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
48
|
+
/* Base lifted off near-black: at ~7% L the 258 hue read black; ~13-20% L with
|
|
49
|
+
* higher saturation makes the surfaces read unmistakably aubergine-purple. */
|
|
50
|
+
--hsl-background: 258 44% 12%; --hsl-foreground: 258 50% 97%;
|
|
51
|
+
--hsl-card: 258 40% 20%; --hsl-card-foreground: 258 50% 97%;
|
|
52
|
+
--hsl-popover: 258 40% 24%; --hsl-popover-foreground: 258 50% 97%;
|
|
53
|
+
--hsl-primary: 250 100% 76%; --hsl-primary-foreground: 258 45% 10%;
|
|
54
|
+
--hsl-secondary: 258 38% 17%; --hsl-muted: 258 38% 17%;
|
|
55
|
+
--hsl-muted-foreground: 258 26% 70%;
|
|
56
|
+
--hsl-accent: 258 40% 24%; --hsl-border: 258 32% 30%;
|
|
57
|
+
--hsl-input: 258 38% 17%; --hsl-ring: 250 100% 76%;
|
|
58
|
+
--depth-1: #1a1230; --depth-2: #241a42; --depth-3: #2f2253; --depth-4: #3d2d68;
|
|
59
|
+
--bg-root: #1a1230; --bg-card: var(--depth-3); --bg-input: var(--depth-2);
|
|
60
|
+
--md3-surface-container-lowest: #150e28; --md3-surface-container-low: #241a42;
|
|
61
|
+
--md3-surface-container: #2a1f4c; --md3-surface-container-high: #2f2253;
|
|
62
|
+
--md3-surface-container-highest: #3d2d68; --md3-outline-variant: #463571;
|
|
63
|
+
--border-subtle: rgba(183,157,255,0.12); --border-default: rgba(183,157,255,0.22);
|
|
64
|
+
--border-hover: rgba(183,157,255,0.40); --accent-text: #c4b0ff;
|
|
65
|
+
--brand-primary: #8f8bff; --brand-glow: #c4b0ff;
|
|
66
|
+
--text-primary: #f4f1fd; --text-secondary: #cec4e8; --text-muted: #a99fc8; --text-dim: #786d99;
|
|
26
67
|
}
|
|
27
68
|
[data-theme="aubergine-light"] {
|
|
28
69
|
--hsl-background: 258 60% 96%; --hsl-foreground: 258 45% 11%;
|