@tangle-network/brand 1.30.0 → 1.31.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 +14 -0
- package/README.md +4 -2
- package/bin/tangle-drift.mjs +4 -3
- package/dist/index.d.ts +111 -111
- package/dist/index.js +111 -111
- package/package.json +1 -1
- package/src/accent-scopes.stories.tsx +54 -0
- package/src/palette.generated.ts +111 -111
- package/src/styles/accent-on-tint.test.ts +4 -1
- package/src/styles/legacy-light.css +1228 -940
- package/src/styles/named-themes.css +431 -584
- package/src/styles/surface-ladder.test.ts +9 -24
- package/src/styles/system.css +52 -52
- package/src/styles/theme-scopes.ts +15 -16
- package/src/styles/tokens.css +450 -859
- package/src/styles/tokens.test.ts +74 -17
|
@@ -1,631 +1,478 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* components re-skin automatically because they reference the semantic tokens
|
|
3
|
-
* (bg-card / border-border / surface-container, mapped in theme.css). Apply with
|
|
4
|
-
* data-theme="<name>" on a wrapper (or <html>). The default :root / .dark spine
|
|
5
|
-
* is the neutral "tangle" theme — also selectable by name as "tangle-dark";
|
|
6
|
-
* "<name>-light" scopes are the light variants. */
|
|
7
|
-
|
|
8
|
-
/* Compatibility for consumers compiled to var(--color-*). Tailwind's inline
|
|
9
|
-
* theme mapping handles newly compiled utilities, but precompiled consumers
|
|
10
|
-
* must also re-resolve their aliases on every theme boundary, not only root. */
|
|
1
|
+
/* palette:begin — generated by scripts/gen-ladders.mjs; edit palette.mjs or palette-template.css. */
|
|
11
2
|
:root,
|
|
12
3
|
.dark,
|
|
13
4
|
.light,
|
|
14
5
|
[data-sandbox-ui],
|
|
15
6
|
[data-sandbox-theme],
|
|
16
7
|
[data-theme] {
|
|
17
|
-
--text-display: var(--font-size-display);
|
|
18
|
-
--text-
|
|
19
|
-
--text-
|
|
20
|
-
--text-
|
|
21
|
-
--text-
|
|
22
|
-
--
|
|
23
|
-
--
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--color-
|
|
32
|
-
--color-
|
|
33
|
-
--color-
|
|
34
|
-
--color-
|
|
35
|
-
--color-
|
|
36
|
-
--color-
|
|
37
|
-
--color-
|
|
38
|
-
--color-
|
|
39
|
-
--color-
|
|
40
|
-
--color-
|
|
41
|
-
--color-
|
|
42
|
-
--color-
|
|
43
|
-
--color-
|
|
44
|
-
--color-
|
|
45
|
-
--color-depth-3: var(--depth-3);
|
|
46
|
-
--color-depth-4: var(--depth-4);
|
|
47
|
-
--color-background: hsl(var(--background));
|
|
48
|
-
--color-foreground: hsl(var(--foreground));
|
|
49
|
-
--color-card: hsl(var(--card));
|
|
50
|
-
--color-card-foreground: hsl(var(--card-foreground));
|
|
51
|
-
--color-popover: hsl(var(--popover));
|
|
52
|
-
--color-popover-foreground: hsl(var(--popover-foreground));
|
|
53
|
-
--color-primary: hsl(var(--primary));
|
|
54
|
-
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
55
|
-
--color-secondary: hsl(var(--secondary));
|
|
56
|
-
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
57
|
-
--color-muted: hsl(var(--muted));
|
|
58
|
-
--color-muted-foreground: hsl(var(--muted-foreground));
|
|
59
|
-
--color-accent: hsl(var(--accent));
|
|
60
|
-
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
61
|
-
--color-destructive: hsl(var(--destructive));
|
|
62
|
-
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
63
|
-
--color-border: hsl(var(--border));
|
|
64
|
-
--color-input: hsl(var(--input));
|
|
65
|
-
--color-ring: hsl(var(--ring));
|
|
66
|
-
--color-surface-container-lowest: var(--md3-surface-container-lowest);
|
|
67
|
-
--color-surface-container-low: var(--md3-surface-container-low);
|
|
68
|
-
--color-surface-container: var(--md3-surface-container);
|
|
69
|
-
--color-surface-container-high: var(--md3-surface-container-high);
|
|
70
|
-
--color-surface-container-highest: var(--md3-surface-container-highest);
|
|
71
|
-
--color-fg: var(--text-primary);
|
|
72
|
-
--color-fg-muted: var(--text-muted);
|
|
8
|
+
--text-display: var(--font-size-display); --text-hero: var(--font-size-hero);
|
|
9
|
+
--text-page: var(--font-size-3xl); --text-section: var(--font-size-xl);
|
|
10
|
+
--text-eyebrow: var(--font-size-xs); --text-control-sm: var(--control-text-sm);
|
|
11
|
+
--text-control-md: var(--control-text-md); --text-control-lg: var(--control-text-lg);
|
|
12
|
+
--text-label: var(--font-size-label); --text-help: var(--font-size-help);
|
|
13
|
+
--spacing-control-sm: var(--control-height-sm); --spacing-control-md: var(--control-height);
|
|
14
|
+
--spacing-control-lg: var(--control-height-lg); --spacing-shell-header: var(--shell-header-height);
|
|
15
|
+
--color-brand: var(--brand-primary); --color-brand-dim: var(--btn-primary-bg);
|
|
16
|
+
--color-brand-cool: var(--brand-cool); --color-brand-glow: var(--brand-glow);
|
|
17
|
+
--color-brand-emerald: var(--brand-emerald); --color-status-running: var(--status-running);
|
|
18
|
+
--color-status-creating: var(--status-creating); --color-status-stopped: var(--status-stopped);
|
|
19
|
+
--color-status-error: var(--status-error); --color-scrim: var(--scrim);
|
|
20
|
+
--color-scrim-strong: var(--scrim-strong); --color-on-media: var(--on-media);
|
|
21
|
+
--color-depth-1: var(--depth-1); --color-depth-2: var(--depth-2);
|
|
22
|
+
--color-depth-3: var(--depth-3); --color-depth-4: var(--depth-4);
|
|
23
|
+
--color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground));
|
|
24
|
+
--color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground));
|
|
25
|
+
--color-popover: hsl(var(--popover)); --color-popover-foreground: hsl(var(--popover-foreground));
|
|
26
|
+
--color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground));
|
|
27
|
+
--color-secondary: hsl(var(--secondary)); --color-secondary-foreground: hsl(var(--secondary-foreground));
|
|
28
|
+
--color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground));
|
|
29
|
+
--color-accent: hsl(var(--accent)); --color-accent-foreground: hsl(var(--accent-foreground));
|
|
30
|
+
--color-destructive: hsl(var(--destructive)); --color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
31
|
+
--color-border: hsl(var(--border)); --color-input: hsl(var(--input));
|
|
32
|
+
--color-ring: hsl(var(--ring)); --color-surface-container-lowest: var(--md3-surface-container-lowest);
|
|
33
|
+
--color-surface-container-low: var(--md3-surface-container-low); --color-surface-container: var(--md3-surface-container);
|
|
34
|
+
--color-surface-container-high: var(--md3-surface-container-high); --color-surface-container-highest: var(--md3-surface-container-highest);
|
|
35
|
+
--color-fg: var(--text-primary); --color-fg-muted: var(--text-muted);
|
|
73
36
|
--color-fg-dim: var(--text-dim);
|
|
74
37
|
}
|
|
75
|
-
|
|
76
|
-
/* Named-specific light ink. All shared status and syntax colors now come
|
|
77
|
-
* from the complete canonical light baseline in tokens.css. */
|
|
78
38
|
[data-theme="aubergine-light"],
|
|
79
39
|
[data-theme="arena-light"],
|
|
80
40
|
[data-theme="super-light"],
|
|
81
41
|
[data-theme="tangle-light"],
|
|
82
42
|
[data-theme="agents-light"] {
|
|
83
|
-
--hsl-secondary-foreground:
|
|
84
|
-
--surface-neutral-text: #4b5563;
|
|
43
|
+
--hsl-secondary-foreground: var(--hsl-foreground); --surface-neutral-text: var(--text-muted);
|
|
85
44
|
}
|
|
86
|
-
|
|
87
|
-
/* ───────────────────────── Aubergine (bazaar) — dark purple ──────────────── */
|
|
88
45
|
[data-theme="aubergine"] {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
--hsl-
|
|
92
|
-
--hsl-
|
|
93
|
-
--
|
|
94
|
-
--
|
|
95
|
-
--
|
|
96
|
-
--
|
|
97
|
-
--hsl-
|
|
98
|
-
--
|
|
99
|
-
--
|
|
100
|
-
--
|
|
101
|
-
--
|
|
102
|
-
--
|
|
103
|
-
--md3-surface-container-highest: #3d2d68; --md3-outline-variant: #463571;
|
|
104
|
-
--border-subtle: rgba(183,157,255,0.12); --border-default: rgba(183,157,255,0.22);
|
|
105
|
-
--border-hover: rgba(183,157,255,0.40); --accent-text: #c4b0ff;
|
|
106
|
-
--brand-primary: #8f8bff; --brand-glow: #c4b0ff;
|
|
107
|
-
--text-primary: #f4f1fd; --text-secondary: #cec4e8; --text-muted: #b7afd1; --text-dim: #a59ebb;
|
|
108
|
-
--md3-surface: var(--bg-root); --md3-surface-dim: var(--md3-surface-container-lowest);
|
|
109
|
-
--md3-surface-bright: var(--md3-surface-container-highest); --md3-surface-variant: var(--md3-surface-container-high);
|
|
110
|
-
--md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
46
|
+
--hsl-background: 257.7778 44.2623% 11.9608%; /* #19112c */ --hsl-foreground: 0 0% 96.0784%; /* #f5f5f5 */ --hsl-card: 258.1395 37.3913% 22.549%; /* #31244f */ --hsl-card-foreground: var(--hsl-foreground);
|
|
47
|
+
--hsl-popover: 257.2881 34.104% 33.9216%; /* #4a3974 */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 257.76 54.1126% 54.7059%; /* #724dca */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
48
|
+
--hsl-secondary: 257.6471 35.6643% 28.0392%; /* #3d2e61 */ --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 76.8627%; /* #c4c4c4 */
|
|
49
|
+
--hsl-accent: var(--hsl-secondary); --hsl-border: 257.5385 34.0314% 37.451%; /* #523f80 */ --hsl-input: 257.6471 38.6364% 17.2549%; /* #251b3d */ --hsl-ring: 257.3684 92.6829% 83.9216%; /* #c6b0fc */
|
|
50
|
+
--depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background)); --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
|
|
51
|
+
--md3-surface-container-lowest: var(--md3-surface-dim); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
52
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-outline-variant: hsl(var(--hsl-border)); --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
|
|
53
|
+
--border-hover: rgb(245 245 245 / 0.28); --accent-text: hsl(257.3684 92.6829% 83.9216%); --brand-primary: hsl(258.5185 64.8% 75.4902%); --brand-glow: var(--accent-text);
|
|
54
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 84.3137%); --text-muted: hsl(0 0% 76.8627%); --text-dim: hsl(0 0% 69.4118%); --md3-surface: var(--bg-root); --md3-surface-dim: hsl(255.7895 51.3514% 7.2549%);
|
|
55
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
56
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
57
|
+
--well-page: #0e091c; --well-card: #0e091c;
|
|
58
|
+
--well-raised: #31244f; --well-raised-2: #31244f;
|
|
59
|
+
--sidebar-background: 257.6471 38.6364% 17.2549%; /* #251b3d */
|
|
111
60
|
}
|
|
112
61
|
[data-theme="aubergine-light"] {
|
|
113
|
-
--hsl-background:
|
|
114
|
-
--hsl-
|
|
115
|
-
--hsl-
|
|
116
|
-
--hsl-
|
|
117
|
-
--
|
|
118
|
-
--hsl-
|
|
119
|
-
--
|
|
120
|
-
--
|
|
121
|
-
--
|
|
122
|
-
--
|
|
123
|
-
--
|
|
124
|
-
--
|
|
125
|
-
--
|
|
126
|
-
--
|
|
127
|
-
--border-hover: rgba(60,32,110,0.30); --accent-text: #6423c8;
|
|
128
|
-
--brand-primary: #6d28d9; --brand-glow: #8b5cf6;
|
|
129
|
-
--text-primary: #160f22; --text-secondary: #3f3460; --text-muted: #585070; --text-dim: #655d82;
|
|
130
|
-
--md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
|
|
131
|
-
--md3-surface-bright: #ffffff; --md3-surface-variant: var(--md3-surface-container-high);
|
|
132
|
-
--md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
62
|
+
--hsl-background: 255 54.5455% 95.6863%; /* #f1eefa */ --hsl-foreground: 0 0% 24.7059%; /* #3f3f3f */ --hsl-card: 0 0% 100%; /* #ffffff */ --hsl-card-foreground: var(--hsl-foreground);
|
|
63
|
+
--hsl-popover: 0 0% 100%; /* #ffffff */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 257.76 54.1126% 54.7059%; /* #724dca */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
64
|
+
--hsl-secondary: 255 50% 95.2941%; /* #f0edf9 */ --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 36.4706%; /* #5d5d5d */
|
|
65
|
+
--hsl-accent: var(--hsl-secondary); --hsl-border: 255 14.2857% 83.5294%; /* #d2cfdb */ --hsl-input: 266.6667 100% 98.2353%; /* #faf6ff */ --hsl-ring: 257.76 54.1126% 54.7059%; /* #724dca */
|
|
66
|
+
--depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background)); --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
|
|
67
|
+
--md3-surface-container-lowest: hsl(var(--hsl-card)); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
68
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-outline-variant: hsl(var(--hsl-border)); --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
|
|
69
|
+
--border-hover: rgb(63 63 63 / 0.28); --accent-text: hsl(257.9724 92.3404% 53.9216%); --brand-primary: hsl(258.1295 65.2582% 58.2353%); --brand-glow: var(--accent-text);
|
|
70
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 31.7647%); --text-muted: hsl(0 0% 36.4706%); --text-dim: hsl(0 0% 41.9608%); --md3-surface: var(--bg-root); --md3-surface-dim: hsl(258.4615 23.6364% 89.2157%);
|
|
71
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
72
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
73
|
+
--well-page: #ffffff; --well-card: #f1eefa;
|
|
74
|
+
--well-raised: #ffffff; --well-raised-2: #f1eefa;
|
|
75
|
+
--sidebar-background: 266.6667 100% 98.2353%; /* #faf6ff */
|
|
133
76
|
}
|
|
134
|
-
|
|
135
|
-
/* ───────────────────────── Arena — emerald / green accent ────────────────── */
|
|
136
77
|
[data-theme="arena"] {
|
|
137
|
-
--hsl-background: 160
|
|
138
|
-
--hsl-
|
|
139
|
-
--hsl-
|
|
140
|
-
--hsl-
|
|
141
|
-
--
|
|
142
|
-
--hsl-
|
|
143
|
-
--
|
|
144
|
-
--
|
|
145
|
-
--
|
|
146
|
-
--
|
|
147
|
-
--
|
|
148
|
-
--
|
|
149
|
-
--
|
|
150
|
-
--
|
|
151
|
-
--border-hover: rgba(52,211,153,0.32); --accent-text: #34d399;
|
|
152
|
-
--brand-primary: #10b981; --brand-glow: #34d399;
|
|
153
|
-
--text-primary: #ecfdf5; --text-secondary: #c2e8d6; --text-muted: #8fb6a3; --text-dim: #7ba08e;
|
|
154
|
-
--md3-surface: var(--bg-root); --md3-surface-dim: var(--md3-surface-container-lowest);
|
|
155
|
-
--md3-surface-bright: var(--md3-surface-container-highest); --md3-surface-variant: var(--md3-surface-container-high);
|
|
156
|
-
--md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
78
|
+
--hsl-background: 160 20% 5.8824%; /* #0c1210 */ --hsl-foreground: 0 0% 92.549%; /* #ececec */ --hsl-card: 156 13.8889% 14.1176%; /* #1f2925 */ --hsl-card-foreground: var(--hsl-foreground);
|
|
79
|
+
--hsl-popover: 156.9231 11.1111% 22.9412%; /* #34413c */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 160.5 54.0541% 29.0196%; /* #227258 */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
80
|
+
--hsl-secondary: 160 12.766% 18.4314%; /* #293531 */ --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 73.7255%; /* #bcbcbc */
|
|
81
|
+
--hsl-accent: var(--hsl-secondary); --hsl-border: 156 11.4504% 25.6863%; /* #3a4943 */ --hsl-input: 157.5 16% 9.8039%; /* #151d1a */ --hsl-ring: 160 91.6667% 42.3529%; /* #09cf8d */
|
|
82
|
+
--depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background)); --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
|
|
83
|
+
--md3-surface-container-lowest: var(--md3-surface-dim); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
84
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-outline-variant: hsl(var(--hsl-border)); --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
|
|
85
|
+
--border-hover: rgb(236 236 236 / 0.28); --accent-text: hsl(160 91.6667% 42.3529%); --brand-primary: hsl(159.7183 65.1376% 42.7451%); --brand-glow: var(--accent-text);
|
|
86
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 81.1765%); --text-muted: hsl(0 0% 73.7255%); --text-dim: hsl(0 0% 66.6667%); --md3-surface: var(--bg-root); --md3-surface-dim: hsl(160 23.0769% 2.549%);
|
|
87
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
88
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
89
|
+
--well-page: #050807; --well-card: #050807;
|
|
90
|
+
--well-raised: #1f2925; --well-raised-2: #1f2925;
|
|
91
|
+
--sidebar-background: 157.5 16% 9.8039%; /* #151d1a */
|
|
157
92
|
}
|
|
158
93
|
[data-theme="arena-light"] {
|
|
159
|
-
--hsl-background: 150
|
|
160
|
-
--hsl-
|
|
161
|
-
--hsl-
|
|
162
|
-
--hsl-
|
|
163
|
-
--
|
|
164
|
-
--hsl-
|
|
165
|
-
--
|
|
166
|
-
--
|
|
167
|
-
--
|
|
168
|
-
--
|
|
169
|
-
--
|
|
170
|
-
--
|
|
171
|
-
--
|
|
172
|
-
--
|
|
173
|
-
--border-hover: rgba(6,95,70,0.30); --accent-text: #03674b;
|
|
174
|
-
--brand-primary: #059669; --brand-glow: #10b981;
|
|
175
|
-
--text-primary: #06231a; --text-secondary: #285048; --text-muted: #455f52; --text-dim: #4e6d62;
|
|
176
|
-
--md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
|
|
177
|
-
--md3-surface-bright: #ffffff; --md3-surface-variant: var(--md3-surface-container-high);
|
|
178
|
-
--md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
94
|
+
--hsl-background: 150 29.4118% 93.3333%; /* #e9f3ee */ --hsl-foreground: 0 0% 25.098%; /* #404040 */ --hsl-card: 0 0% 100%; /* #ffffff */ --hsl-card-foreground: var(--hsl-foreground);
|
|
95
|
+
--hsl-popover: 0 0% 100%; /* #ffffff */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 160.5 54.0541% 29.0196%; /* #227258 */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
96
|
+
--hsl-secondary: 150 27.7778% 92.9412%; /* #e8f2ed */ --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 36.8627%; /* #5e5e5e */
|
|
97
|
+
--hsl-accent: var(--hsl-secondary); --hsl-border: 150 10.4167% 81.1765%; /* #cad4cf */ --hsl-input: 150 55.5556% 96.4706%; /* #f1fbf6 */ --hsl-ring: 160.5 54.0541% 29.0196%; /* #227258 */
|
|
98
|
+
--depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background)); --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
|
|
99
|
+
--md3-surface-container-lowest: hsl(var(--hsl-card)); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
100
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-outline-variant: hsl(var(--hsl-border)); --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
|
|
101
|
+
--border-hover: rgb(64 64 64 / 0.28); --accent-text: hsl(160.4082 92.4528% 20.7843%); --brand-primary: hsl(160 64.8649% 29.0196%); --brand-glow: var(--accent-text);
|
|
102
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 31.7647%); --text-muted: hsl(0 0% 36.8627%); --text-dim: hsl(0 0% 42.3529%); --md3-surface: var(--bg-root); --md3-surface-dim: hsl(153.3333 13.4328% 86.8627%);
|
|
103
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
104
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
105
|
+
--well-page: #ffffff; --well-card: #e9f3ee;
|
|
106
|
+
--well-raised: #ffffff; --well-raised-2: #e9f3ee;
|
|
107
|
+
--sidebar-background: 150 55.5556% 96.4706%; /* #f1fbf6 */
|
|
179
108
|
}
|
|
180
|
-
|
|
181
|
-
/* ───────────────────────── Super — warm neutral / forest accent ─────────────
|
|
182
|
-
* SUPER, the local logistics app. Warm green-grey planes with a forest action
|
|
183
|
-
* colour. Light is the product's primary mode; dark keeps the same hue family.
|
|
184
|
-
* Status and category tones are inherited, never retinted. */
|
|
185
109
|
[data-theme="super"] {
|
|
186
|
-
--hsl-background: 120 12% 8%; --hsl-foreground:
|
|
187
|
-
--hsl-
|
|
188
|
-
--hsl-
|
|
189
|
-
--hsl-
|
|
190
|
-
--hsl-
|
|
191
|
-
--hsl-
|
|
192
|
-
--
|
|
193
|
-
--hsl-border:
|
|
194
|
-
--hsl-
|
|
195
|
-
--
|
|
196
|
-
--
|
|
197
|
-
--
|
|
198
|
-
--md3-surface-
|
|
199
|
-
--
|
|
200
|
-
--
|
|
201
|
-
--
|
|
202
|
-
--
|
|
203
|
-
--text-primary: #eef1ea; --text-secondary: #cbd3c5; --text-muted: #a9b3a2; --text-dim: #959f8f;
|
|
204
|
-
--md3-primary: #8fd0a4; --bg-hover: rgba(190,210,180,0.06); --bg-selection: rgba(125,187,145,0.28);
|
|
205
|
-
--accent-surface-soft: rgba(125,187,145,0.08); --accent-surface-strong: rgba(125,187,145,0.24);
|
|
206
|
-
--border-accent: rgba(125,187,145,0.38); --border-accent-hover: rgba(125,187,145,0.56);
|
|
207
|
-
--btn-primary-bg: #7dbb91; --btn-primary-hover: #8fcaa1; --btn-primary-text: #0e1d13;
|
|
208
|
-
--btn-cta-bg: #7dbb91; --btn-cta-text: #0e1d13;
|
|
209
|
-
--md3-surface: var(--bg-root); --md3-surface-dim: var(--md3-surface-container-lowest);
|
|
210
|
-
--md3-surface-bright: var(--md3-surface-container-highest); --md3-surface-variant: var(--md3-surface-container-high);
|
|
211
|
-
--md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
110
|
+
--hsl-background: 120 12.1951% 8.0392%; /* #121712 */ --hsl-foreground: 0 0% 96.4706%; /* #f6f6f6 */ --hsl-card: 120 9.5238% 16.4706%; /* #262e26 */ --hsl-card-foreground: var(--hsl-foreground);
|
|
111
|
+
--hsl-popover: 120 8.3969% 25.6863%; /* #3c473c */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 148.1481 54.3624% 29.2157%; /* #227348 */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
112
|
+
--hsl-secondary: 120 9.2593% 21.1765%; /* #313b31 */ --hsl-secondary-foreground: var(--hsl-foreground); --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 77.2549%; /* #c5c5c5 */
|
|
113
|
+
--hsl-accent: var(--hsl-secondary); --hsl-accent-foreground: var(--hsl-foreground); --hsl-border: 120 8.3333% 28.2353%; /* #424e42 */ --hsl-input: 120 9.6774% 12.1569%; /* #1c221c */
|
|
114
|
+
--hsl-ring: 147.9808 92.0354% 44.3137%; /* #09d96a */ --depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
|
|
115
|
+
--bg-root: hsl(var(--hsl-background)); --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input)); --md3-surface-container-lowest: var(--md3-surface-dim); --md3-surface-container-low: hsl(var(--sidebar-background));
|
|
116
|
+
--md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary)); --md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-outline-variant: hsl(var(--hsl-border));
|
|
117
|
+
--border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border)); --border-hover: rgb(246 246 246 / 0.28); --accent-text: hsl(147.9808 92.0354% 44.3137%);
|
|
118
|
+
--brand-primary: hsl(148 65.2174% 45.098%); --brand-glow: var(--accent-text); --text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 85.098%); --text-muted: hsl(0 0% 77.2549%); --text-dim: hsl(0 0% 69.8039%);
|
|
119
|
+
--md3-primary: var(--accent-text); --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent); --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent); --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent); --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
|
|
120
|
+
--border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent); --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent); --btn-primary-bg: hsl(var(--hsl-primary)); --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%); --btn-primary-text: hsl(0 0% 100%);
|
|
121
|
+
--btn-cta-bg: var(--btn-primary-bg); --btn-cta-text: var(--btn-primary-text); --md3-surface: var(--bg-root); --md3-surface-dim: hsl(120 14.2857% 4.1176%);
|
|
122
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
123
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
124
|
+
--well-page: #090c09; --well-card: #090c09;
|
|
125
|
+
--well-raised: #262e26; --well-raised-2: #262e26;
|
|
126
|
+
--sidebar-background: 120 9.6774% 12.1569%; /* #1c221c */
|
|
212
127
|
}
|
|
213
128
|
[data-theme="super-light"] {
|
|
214
|
-
--hsl-background:
|
|
215
|
-
--hsl-
|
|
216
|
-
--hsl-
|
|
217
|
-
--hsl-
|
|
218
|
-
--
|
|
219
|
-
--hsl-
|
|
220
|
-
--
|
|
221
|
-
--
|
|
222
|
-
--
|
|
223
|
-
--
|
|
224
|
-
--
|
|
225
|
-
--md3-surface-
|
|
226
|
-
--md3-surface-container-highest: #e6eae1; --md3-outline-variant: #dfe4d9;
|
|
227
|
-
--border-subtle: rgba(34,43,33,0.10); --border-default: rgba(34,43,33,0.16);
|
|
228
|
-
--border-hover: rgba(34,43,33,0.30); --accent-text: #275a3f;
|
|
229
|
-
--brand-primary: #275a3f; --brand-glow: #3b7050;
|
|
230
|
-
--text-primary: #222b21; --text-secondary: #46523f; --text-muted: #5d6857; --text-dim: #616c5a;
|
|
231
|
-
--md3-primary: #275a3f; --bg-hover: rgba(34,43,33,0.04); --bg-selection: rgba(39,90,63,0.16);
|
|
232
|
-
--accent-surface-soft: rgba(39,90,63,0.06); --accent-surface-strong: rgba(39,90,63,0.14);
|
|
233
|
-
--border-accent: rgba(39,90,63,0.30); --border-accent-hover: rgba(39,90,63,0.45);
|
|
234
|
-
--btn-primary-bg: #275a3f; --btn-primary-hover: #1e4832; --btn-primary-text: #ffffff;
|
|
235
|
-
--btn-cta-bg: #275a3f; --btn-cta-text: #ffffff;
|
|
236
|
-
--md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
|
|
237
|
-
--md3-surface-bright: #ffffff; --md3-surface-variant: var(--md3-surface-container-high);
|
|
129
|
+
--hsl-background: 80 17.6471% 93.3333%; /* #eff1eb */ --hsl-foreground: 0 0% 25.098%; /* #404040 */ --hsl-card: 0 0% 100%; /* #ffffff */ --hsl-card-foreground: var(--hsl-foreground);
|
|
130
|
+
--hsl-popover: 0 0% 100%; /* #ffffff */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 148.1481 54.3624% 29.2157%; /* #227348 */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
131
|
+
--hsl-secondary: 80 16.6667% 92.9412%; /* #eef0ea */ --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 36.4706%; /* #5d5d5d */
|
|
132
|
+
--hsl-accent: var(--hsl-secondary); --hsl-border: 80 6.25% 81.1765%; /* #d0d2cc */ --hsl-input: 80 33.3333% 96.4706%; /* #f7f9f3 */ --hsl-ring: 148.1481 54.3624% 29.2157%; /* #227348 */
|
|
133
|
+
--depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background)); --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
|
|
134
|
+
--md3-surface-container-lowest: hsl(var(--hsl-card)); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
135
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-outline-variant: hsl(var(--hsl-border)); --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
|
|
136
|
+
--border-hover: rgb(64 64 64 / 0.28); --accent-text: hsl(148.4848 92.5234% 20.9804%); --brand-primary: hsl(148.4536 65.1007% 29.2157%); --brand-glow: var(--accent-text);
|
|
137
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 31.7647%); --text-muted: hsl(0 0% 36.4706%); --text-dim: hsl(0 0% 41.9608%); --md3-primary: var(--accent-text); --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent); --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
|
|
138
|
+
--accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent); --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent); --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent); --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
|
|
139
|
+
--btn-primary-bg: hsl(var(--hsl-primary)); --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%); --btn-primary-text: hsl(0 0% 100%); --btn-cta-bg: var(--btn-primary-bg); --btn-cta-text: var(--btn-primary-text);
|
|
140
|
+
--md3-surface: var(--bg-root); --md3-surface-dim: hsl(85.7143 10.4478% 86.8627%); --md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high);
|
|
238
141
|
--md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
142
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
143
|
+
--well-page: #ffffff; --well-card: #eff1eb;
|
|
144
|
+
--well-raised: #ffffff; --well-raised-2: #eff1eb;
|
|
145
|
+
--sidebar-background: 80 33.3333% 96.4706%; /* #f7f9f3 */
|
|
239
146
|
}
|
|
240
|
-
|
|
241
|
-
/* ───────────────────────── Tangle — canonical dark spine ───────────────────
|
|
242
|
-
* tangle-dark names the default :root/.dark spine explicitly, for a dark island
|
|
243
|
-
* inside a light-named wrapper or a picker's explicit choice. It is the
|
|
244
|
-
* canonical spine by construction, never a copy of it.
|
|
245
|
-
*/
|
|
246
147
|
[data-theme="tangle-dark"] {
|
|
247
|
-
/* Nothing to declare: tokens.css seeds the complete dark spine on this
|
|
248
|
-
* selector, so a tangle-dark island carries every value itself and inherits
|
|
249
|
-
* nothing from a light wrapper. */
|
|
250
148
|
}
|
|
251
|
-
/* Its light mode. */
|
|
252
149
|
[data-theme="tangle-light"] {
|
|
253
|
-
--hsl-background: 240 33%
|
|
254
|
-
--hsl-
|
|
255
|
-
--hsl-
|
|
256
|
-
--hsl-
|
|
257
|
-
--
|
|
258
|
-
--hsl-
|
|
259
|
-
--
|
|
260
|
-
--
|
|
261
|
-
--
|
|
262
|
-
--
|
|
263
|
-
--
|
|
264
|
-
--
|
|
265
|
-
--
|
|
266
|
-
--border-subtle: rgba(20,20,40,0.08); --border-default: rgba(20,20,40,0.14);
|
|
267
|
-
--border-hover: rgba(20,20,40,0.26); --accent-text: #453be3;
|
|
268
|
-
--brand-primary: #6366f1; --brand-glow: #818cf8;
|
|
269
|
-
--text-primary: #15131f; --text-secondary: #3f3a52; --text-muted: #59556b; --text-dim: #67627b;
|
|
150
|
+
--hsl-background: 240 33.3333% 95.2941%; /* #efeff7 */ --hsl-foreground: 0 0% 24.7059%; /* #3f3f3f */ --hsl-card: 0 0% 100%; /* #ffffff */ --hsl-card-foreground: var(--hsl-foreground);
|
|
151
|
+
--hsl-popover: 0 0% 100%; /* #ffffff */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 245.9504 54.2601% 56.2745%; /* #5f53cc */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
152
|
+
--hsl-secondary: 240 30.7692% 94.902%; /* #eeeef6 */ --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 36.4706%; /* #5d5d5d */
|
|
153
|
+
--hsl-accent: var(--hsl-secondary); --hsl-border: 240 8.046% 82.9412%; /* #d0d0d7 */ --hsl-input: 240 100% 98.6275%; /* #f8f8ff */ --hsl-ring: 245.9504 54.2601% 56.2745%; /* #5f53cc */
|
|
154
|
+
--depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background)); --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
|
|
155
|
+
--md3-surface-container-lowest: hsl(var(--hsl-card)); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
156
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-outline-variant: hsl(var(--hsl-border)); --border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
|
|
157
|
+
--border-hover: rgb(63 63 63 / 0.28); --accent-text: hsl(246.0302 91.7051% 57.451%); --brand-primary: hsl(246.3636 64.7059% 60%); --brand-glow: var(--accent-text);
|
|
158
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 31.7647%); --text-muted: hsl(0 0% 36.4706%); --text-dim: hsl(0 0% 41.9608%);
|
|
159
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
160
|
+
--well-page: #ffffff; --well-card: #efeff7;
|
|
161
|
+
--well-raised: #ffffff; --well-raised-2: #efeff7;
|
|
162
|
+
--sidebar-background: 240 100% 98.6275%; /* #f8f8ff */
|
|
270
163
|
}
|
|
271
|
-
|
|
272
|
-
/* ───────────────────── Intelligence — violet surface ramp ────────────────────
|
|
273
|
-
* A violet retint of the surface ladder (hue ~260-265, saturation tapering as
|
|
274
|
-
* lightness rises). The brand indigo primary / ring / accent-text are
|
|
275
|
-
* deliberately NOT overridden: the accent stays Tangle, only the surfaces carry
|
|
276
|
-
* the product's identity.
|
|
277
|
-
*
|
|
278
|
-
* Apply `data-theme="intelligence"` on <html> alongside the `.dark` class.
|
|
279
|
-
* The selector REQUIRES `.dark` rather than trusting the consumer to swap the
|
|
280
|
-
* attribute on every mode change: a violet dark ramp left standing over a light
|
|
281
|
-
* page would repaint every surface. Dark-only is the contract, so the selector —
|
|
282
|
-
* not the caller — enforces it. There is deliberately no `-light` variant;
|
|
283
|
-
* light falls through to brand's canonical light spine. */
|
|
284
164
|
.dark[data-theme="intelligence"] {
|
|
285
|
-
--md3-surface:
|
|
286
|
-
--md3-surface-
|
|
287
|
-
--md3-surface-
|
|
288
|
-
--md3-surface-container-
|
|
289
|
-
--md3-surface-container-
|
|
290
|
-
--
|
|
291
|
-
--
|
|
292
|
-
--
|
|
293
|
-
--
|
|
294
|
-
--
|
|
295
|
-
|
|
296
|
-
--
|
|
297
|
-
--
|
|
298
|
-
--
|
|
299
|
-
--
|
|
300
|
-
--
|
|
301
|
-
--hsl-
|
|
302
|
-
--
|
|
303
|
-
--hsl-
|
|
304
|
-
--
|
|
305
|
-
|
|
306
|
-
/* seated a touch deeper than the canvas so the panel reads as a base plane */
|
|
307
|
-
--sidebar-background: 264 26% 4%;
|
|
308
|
-
--sidebar-accent: 262 16% 16%;
|
|
309
|
-
--sidebar-border: 262 12% 13%;
|
|
310
|
-
|
|
311
|
-
--depth-1: #0e0b13;
|
|
312
|
-
--depth-2: #16131c;
|
|
313
|
-
--depth-3: #201c28;
|
|
314
|
-
--depth-4: #2a2533;
|
|
315
|
-
--bg-elevated: hsl(262 17% 15%);
|
|
316
|
-
--bg-section: hsl(262 22% 7%);
|
|
317
|
-
--bg-root:
|
|
318
|
-
radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
|
|
319
|
-
radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
|
|
320
|
-
linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
|
|
321
|
-
|
|
322
|
-
--border-subtle: rgba(120, 108, 158, 0.1);
|
|
323
|
-
--border-default: rgba(120, 108, 158, 0.18);
|
|
324
|
-
--border-hover: rgba(120, 108, 158, 0.28);
|
|
165
|
+
--md3-surface: var(--bg-root); --md3-surface-dim: hsl(260 33.3333% 1.7647%);
|
|
166
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-container-lowest: var(--md3-surface-dim);
|
|
167
|
+
--md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card));
|
|
168
|
+
--md3-surface-container-high: hsl(var(--hsl-secondary)); --md3-surface-container-highest: hsl(var(--hsl-popover));
|
|
169
|
+
--md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface-variant: var(--text-muted);
|
|
170
|
+
--hsl-background: 260 23.0769% 5.098%; /* #0c0a10 */ --hsl-card: 260 16.6667% 14.1176%; /* #221e2a */
|
|
171
|
+
--hsl-popover: 260 14.7541% 23.9216%; /* #3a3446 */ --hsl-secondary: 264 15.7895% 18.6275%; /* #2e2837 */
|
|
172
|
+
--hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 70.1961%; /* #b3b3b3 */
|
|
173
|
+
--hsl-accent: var(--hsl-secondary); --hsl-border: 261 14.2857% 27.451%; /* #433c50 */
|
|
174
|
+
--hsl-input: 264 20.8333% 9.4118%; /* #17131d */
|
|
175
|
+
--sidebar-background: 264 20.8333% 9.4118%; /* #17131d */ --sidebar-accent: var(--hsl-secondary);
|
|
176
|
+
--sidebar-border: var(--hsl-border);
|
|
177
|
+
--depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container);
|
|
178
|
+
--depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
|
|
179
|
+
--bg-elevated: var(--depth-4); --bg-section: var(--depth-1);
|
|
180
|
+
--bg-root: hsl(var(--hsl-background));
|
|
181
|
+
--border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border));
|
|
182
|
+
--border-hover: rgb(224 224 224 / 0.28);
|
|
183
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
184
|
+
--well-page: #040306; --well-card: #040306;
|
|
185
|
+
--well-raised: #221e2a; --well-raised-2: #221e2a;
|
|
325
186
|
}
|
|
326
|
-
|
|
327
|
-
/* ───────────────────── Hospitality — sage paper, forest accent ─────────────────
|
|
328
|
-
* Hospitality's product identity: a sage-tinted surface ladder and a forest-green
|
|
329
|
-
* accent in place of iris. Green is reserved for interaction and status; the
|
|
330
|
-
* planes stay near-neutral (hue 108-150, low chroma).
|
|
331
|
-
*
|
|
332
|
-
* The ladder, in OKLCH L x100 (light / dark), each step at least 4.4 from its
|
|
333
|
-
* neighbour so a card, a card in a card and a field never sit flat on their
|
|
334
|
-
* parent:
|
|
335
|
-
* page 91.6 #dee6dc 16.9 #0d100e
|
|
336
|
-
* sidebar 96.9 #f2f6f1 21.6 #171b17
|
|
337
|
-
* card 100 #ffffff+shadow 31.1 #2d322e (1.46:1 on the page)
|
|
338
|
-
* raised 95.6 #edf2ec 37.9 #3e443f + 1px top highlight
|
|
339
|
-
* raised-2 100 #ffffff 43.9 #4e544f
|
|
340
|
-
* popover 100 #ffffff+shadow 42.0 #494f4a
|
|
341
|
-
* well (field fill) on page / in card / in raised / in raised-2:
|
|
342
|
-
* 100 / 94.9 / 100 / 94.9 12.4 / 12.4 / 22.1 / 22.1
|
|
343
|
-
* hairline 85.0 #c9d0c7 42.0 #494f4a
|
|
344
|
-
* field border 60.0 #798479 68.3 #939c94 (light 3.9:1 on the card; dark 4.6:1 on the card, 3.5:1 on raised)
|
|
345
|
-
* A well is always the opposite step from its parent in light and always
|
|
346
|
-
* deeper in dark; tokens.css carries the `--well` context that picks one.
|
|
347
|
-
*
|
|
348
|
-
* The dark inks that sit on those planes are lifted to keep 4.5:1: accent text
|
|
349
|
-
* and the destructive red (same hue, lighter; light keeps the canonical red).
|
|
350
|
-
*
|
|
351
|
-
* Status fills are retuned for these planes (ROOT-SPEC section c): light fills
|
|
352
|
-
* sit at L 91-93, at least 7 under the white card, dark fills at L 37-38, at
|
|
353
|
-
* least 6 over the card, so a status box never reads as a flat card. The
|
|
354
|
-
* MEANING is unchanged: success is green, warning is amber (pending only),
|
|
355
|
-
* danger is red, neutral is grey; info/running stay canonical.
|
|
356
|
-
*
|
|
357
|
-
* Apply `data-theme="hospitality"` on <html>. The mode comes from the `.dark`
|
|
358
|
-
* class the shared theme control already toggles: without `.dark` the scope is
|
|
359
|
-
* light, including before hydration, and tokens.css seeds it with the complete
|
|
360
|
-
* canonical light baseline exactly as it does `vault`; with `.dark` it takes the
|
|
361
|
-
* dark baseline and this file's dark ladder. A mode switch never needs a second
|
|
362
|
-
* attribute, and the two blocks declare the same properties. */
|
|
363
187
|
[data-theme="hospitality"]:where(:not(.dark)) {
|
|
364
|
-
--hsl-background: 108 16.
|
|
365
|
-
--hsl-
|
|
366
|
-
--hsl-
|
|
367
|
-
--hsl-
|
|
368
|
-
--hsl-
|
|
369
|
-
--hsl-
|
|
370
|
-
--hsl-
|
|
371
|
-
--hsl-border:
|
|
372
|
-
--hsl-
|
|
373
|
-
--
|
|
374
|
-
--
|
|
375
|
-
--
|
|
376
|
-
--
|
|
377
|
-
--
|
|
378
|
-
--
|
|
379
|
-
--
|
|
380
|
-
--
|
|
381
|
-
--
|
|
382
|
-
--
|
|
383
|
-
--
|
|
384
|
-
--
|
|
385
|
-
--
|
|
386
|
-
--
|
|
387
|
-
--depth-1: #dee6dc; --depth-2: #ffffff; --depth-3: #edf2ec; --depth-4: #ffffff;
|
|
388
|
-
--bg-root: #dee6dc; --bg-dark: #dee6dc; --bg-section: #dee6dc;
|
|
389
|
-
--bg-card: #ffffff; --bg-elevated: #ffffff; --bg-input: #ffffff;
|
|
390
|
-
--well-page: #ffffff; --well-card: #ebf0e9; --well-raised: #ffffff; --well-raised-2: #ebf0e9;
|
|
391
|
-
--bg-hover: rgba(40, 88, 66, 0.05); --bg-selection: rgba(40, 88, 66, 0.16);
|
|
392
|
-
--border-subtle: rgba(23, 38, 29, 0.11); --border-default: rgba(23, 38, 29, 0.16);
|
|
393
|
-
--border-hover: rgba(23, 38, 29, 0.28); --border-strong: #798479;
|
|
394
|
-
--field-border: #798479;
|
|
395
|
-
--border-accent: rgba(40, 88, 66, 0.20); --border-accent-hover: rgba(40, 88, 66, 0.36);
|
|
396
|
-
--shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1);
|
|
397
|
-
--shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
|
|
398
|
-
--shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);
|
|
399
|
-
--edge-highlight: 0 0 0 0 transparent;
|
|
400
|
-
--accent-text: #285842;
|
|
401
|
-
--accent-surface-soft: rgba(40, 88, 66, 0.05); --accent-surface-strong: rgba(40, 88, 66, 0.13);
|
|
402
|
-
--accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
|
|
403
|
-
--brand-primary: #3d7b5f; --brand-cool: #4f8c6c; --brand-glow: #6cac8a; --brand-vibrant: #3d7b5f;
|
|
404
|
-
--btn-primary-bg: #285842; --btn-primary-hover: #336c52; --btn-primary-text: #ffffff;
|
|
405
|
-
--text-primary: #17261d; --text-secondary: #36493e; --text-muted: #546158; --text-dim: #546158;
|
|
406
|
-
--surface-success-bg: #c5edce; --surface-success-text: #1e5b34; --surface-success-border: #91c79e;
|
|
407
|
-
--surface-warning-bg: #f4e3bf; --surface-warning-text: #804d0c; --surface-warning-border: #dcb87a;
|
|
408
|
-
--surface-danger-bg: #fadad8; --surface-danger-text: #a5292b; --surface-danger-border: #e8acaa;
|
|
409
|
-
--surface-neutral-bg: #e5e9e4; --surface-neutral-text: #576157; --surface-neutral-border: #c0c6bf;
|
|
188
|
+
--hsl-background: 108 16.6667% 88.2353%; /* #dee6dc */ --hsl-foreground: 0 0% 22.3529%; /* #393939 */ --hsl-card: 0 0% 100%; /* #ffffff */ --hsl-card-foreground: var(--hsl-foreground);
|
|
189
|
+
--hsl-popover: 0 0% 100%; /* #ffffff */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 153 54.0541% 29.0196%; /* #22724e */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
190
|
+
--hsl-secondary: 108 29.4118% 93.3333%; /* #ebf3e9 */ --hsl-secondary-foreground: var(--hsl-foreground); --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 34.1176%; /* #575757 */
|
|
191
|
+
--hsl-accent: var(--hsl-secondary); --hsl-accent-foreground: var(--hsl-foreground); --hsl-border: 113.3333 8.7379% 79.8039%; /* #c8d0c7 */ --hsl-input: 0 0% 100%; /* #ffffff */
|
|
192
|
+
--hsl-ring: 153 54.0541% 29.0196%; /* #22724e */ --hsl-destructive: 0 75.1244% 39.4118%; /* #b01919 */
|
|
193
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: 0 0% 100%; /* #ffffff */ --sidebar-background: 109.0909 44% 95.098%; /* #eff8ed */ --sidebar-foreground: var(--hsl-foreground);
|
|
194
|
+
--sidebar-primary: var(--hsl-primary); --sidebar-primary-foreground: var(--hsl-primary-foreground); --sidebar-accent: var(--hsl-secondary); --sidebar-accent-foreground: var(--hsl-foreground);
|
|
195
|
+
--sidebar-border: var(--hsl-border); --sidebar-ring: var(--hsl-ring); --md3-surface: var(--bg-root); --md3-surface-dim: hsl(108 11.9048% 83.5294%); --md3-surface-bright: hsl(var(--hsl-popover));
|
|
196
|
+
--md3-surface-container-lowest: hsl(var(--hsl-card)); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
197
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
198
|
+
--md3-outline: hsl(var(--hsl-muted-foreground)); --md3-outline-variant: hsl(var(--hsl-border)); --md3-primary: var(--accent-text); --md3-primary-dim: var(--btn-primary-bg); --md3-primary-container: var(--btn-primary-bg);
|
|
199
|
+
--md3-on-primary: hsl(0 0% 100%); --md3-surface-tint: var(--accent-text); --depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
|
|
200
|
+
--bg-root: hsl(var(--hsl-background)); --bg-dark: var(--depth-1); --bg-section: var(--depth-1); --bg-card: var(--depth-2); --bg-elevated: var(--depth-4); --bg-input: hsl(var(--hsl-input));
|
|
201
|
+
--well-page: #ffffff; --well-card: #e9f1e7; --well-raised: #ffffff; --well-raised-2: #e9f1e7; --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent); --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
|
|
202
|
+
--border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border)); --border-hover: rgb(57 57 57 / 0.28); --border-strong: #7b837a;
|
|
203
|
+
--field-border: #7b837a; --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent); --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
|
|
204
|
+
--shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1); --shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
|
|
205
|
+
--shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06); --edge-highlight: 0 0 0 0 transparent;
|
|
206
|
+
--accent-text: hsl(153.2609 92% 19.6078%); --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent); --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
|
|
207
|
+
--accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover)); --brand-primary: hsl(153.3333 65.2174% 27.0588%); --brand-cool: hsl(153.12 85.034% 28.8235%); --brand-glow: var(--accent-text); --brand-vibrant: var(--brand-primary);
|
|
208
|
+
--btn-primary-bg: hsl(var(--hsl-primary)); --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%); --btn-primary-text: hsl(0 0% 100%); --text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 29.0196%); --text-muted: hsl(0 0% 34.1176%); --text-dim: hsl(0 0% 34.1176%);
|
|
209
|
+
--surface-success-bg: #d1edd9; --surface-success-text: #1b6c4b; --surface-success-border: #9ac6ae; --surface-warning-bg: #f3e2c7; --surface-warning-text: #79581e; --surface-warning-border: #ceb994;
|
|
210
|
+
--surface-danger-bg: #fedbd7; --surface-danger-text: #ae2c2c; --surface-danger-border: #e6a6a4; --surface-neutral-bg: #e1e6e0; --surface-neutral-text: #59605c; --surface-neutral-border: #b8beb8;
|
|
410
211
|
}
|
|
411
212
|
.dark[data-theme="hospitality"] {
|
|
412
|
-
--hsl-background:
|
|
413
|
-
--hsl-
|
|
414
|
-
--hsl-
|
|
415
|
-
--hsl-
|
|
416
|
-
--hsl-
|
|
417
|
-
--hsl-
|
|
418
|
-
--hsl-
|
|
419
|
-
--hsl-border:
|
|
420
|
-
--hsl-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
--
|
|
424
|
-
--hsl-
|
|
425
|
-
--
|
|
426
|
-
--
|
|
427
|
-
--
|
|
428
|
-
--
|
|
429
|
-
--
|
|
430
|
-
--
|
|
431
|
-
--
|
|
432
|
-
--
|
|
433
|
-
--
|
|
434
|
-
--
|
|
435
|
-
--md3-primary: #99caad; --md3-primary-dim: #396a52; --md3-primary-container: #396a52;
|
|
436
|
-
--md3-on-primary: #11221a; --md3-surface-tint: #76b791;
|
|
437
|
-
--depth-1: #0d100e; --depth-2: #2d322e; --depth-3: #3e443f; --depth-4: #494f4a;
|
|
438
|
-
--bg-root: #0d100e; --bg-dark: #0d100e; --bg-section: #0d100e;
|
|
439
|
-
--bg-card: #2d322e; --bg-elevated: #494f4a; --bg-input: #050705;
|
|
440
|
-
--well-page: #050705; --well-card: #050705; --well-raised: #181c18; --well-raised-2: #181c18;
|
|
441
|
-
--bg-hover: rgba(118, 183, 145, 0.07); --bg-selection: rgba(118, 183, 145, 0.28);
|
|
442
|
-
--border-subtle: rgba(227, 233, 229, 0.10); --border-default: rgba(227, 233, 229, 0.16);
|
|
443
|
-
--border-hover: rgba(227, 233, 229, 0.28); --border-strong: #939c94;
|
|
444
|
-
--field-border: #939c94;
|
|
445
|
-
--border-accent: rgba(118, 183, 145, 0.35); --border-accent-hover: rgba(118, 183, 145, 0.50);
|
|
446
|
-
--shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6);
|
|
447
|
-
--shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
|
|
448
|
-
--shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5);
|
|
449
|
-
--edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
450
|
-
/* Lifted from #99caad so selected text on a primary tint still clears 4.5:1
|
|
451
|
-
* over the lighter raised plane (L 37.9). */
|
|
452
|
-
--accent-text: #b2dbc2;
|
|
453
|
-
--accent-surface-soft: rgba(118, 183, 145, 0.07); --accent-surface-strong: rgba(57, 106, 82, 0.40);
|
|
454
|
-
--accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
|
|
455
|
-
--brand-primary: #529873; --brand-cool: #76b791; --brand-glow: #94c7a9; --brand-vibrant: #529873;
|
|
456
|
-
--btn-primary-bg: #76b791; --btn-primary-hover: #8dc3a4; --btn-primary-text: #11221a;
|
|
457
|
-
--text-primary: #e3e9e5; --text-secondary: #c5cec9; --text-muted: #b9c0ba; --text-dim: #b9c0ba;
|
|
458
|
-
--surface-success-bg: #254930; --surface-success-text: #9ce9b1; --surface-success-border: #437652;
|
|
459
|
-
--surface-warning-bg: #513d21; --surface-warning-text: #fed081; --surface-warning-border: #8d6b39;
|
|
460
|
-
--surface-danger-bg: #5c3231; --surface-danger-text: #f7b3b0; --surface-danger-border: #a45857;
|
|
461
|
-
--surface-neutral-bg: #3e443f; --surface-neutral-text: #b9c0ba; --surface-neutral-border: #5f6560;
|
|
213
|
+
--hsl-background: 120 6.6667% 5.8824%; /* #0e100e */ --hsl-foreground: 0 0% 99.2157%; /* #fdfdfd */ --hsl-card: 132 5.2632% 18.6275%; /* #2d322e */ --hsl-card-foreground: var(--hsl-foreground);
|
|
214
|
+
--hsl-popover: 137.1429 4.6358% 29.6078%; /* #484f4a */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-primary: 153 54.0541% 29.0196%; /* #22724e */ --hsl-primary-foreground: 0 0% 100%; /* #ffffff */
|
|
215
|
+
--hsl-secondary: 130 4.6154% 25.4902%; /* #3e443f */ --hsl-secondary-foreground: var(--hsl-foreground); --hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 85.8824%; /* #dbdbdb */
|
|
216
|
+
--hsl-accent: var(--hsl-secondary); --hsl-accent-foreground: var(--hsl-foreground); --hsl-border: 137.1429 4.6358% 29.6078%; /* #484f4a */ --hsl-input: 120 9.0909% 2.1569%; /* #050605 */
|
|
217
|
+
--hsl-ring: 152.9464 91.8033% 47.8431%; /* #0aea85 */ --hsl-destructive: 0 74.4681% 90.7843%; /* #f9d6d6 */
|
|
218
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: 137.1429 4.3478% 31.5686%; /* #4d544f */ --sidebar-background: 120 5.8824% 10%; /* #181b18 */ --sidebar-foreground: var(--hsl-foreground);
|
|
219
|
+
--sidebar-primary: var(--hsl-primary); --sidebar-primary-foreground: var(--hsl-primary-foreground); --sidebar-accent: var(--hsl-secondary); --sidebar-accent-foreground: var(--hsl-foreground);
|
|
220
|
+
--sidebar-border: var(--hsl-border); --sidebar-ring: var(--hsl-ring); --md3-surface: var(--bg-root); --md3-surface-dim: hsl(120 9.0909% 2.1569%); --md3-surface-bright: hsl(var(--hsl-popover));
|
|
221
|
+
--md3-surface-container-lowest: var(--md3-surface-dim); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
222
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
223
|
+
--md3-outline: hsl(var(--hsl-muted-foreground)); --md3-outline-variant: hsl(var(--hsl-border)); --md3-primary: var(--accent-text); --md3-primary-dim: var(--btn-primary-bg); --md3-primary-container: var(--btn-primary-bg);
|
|
224
|
+
--md3-on-primary: hsl(0 0% 100%); --md3-surface-tint: var(--accent-text); --depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
|
|
225
|
+
--bg-root: hsl(var(--hsl-background)); --bg-dark: var(--depth-1); --bg-section: var(--depth-1); --bg-card: var(--depth-2); --bg-elevated: var(--depth-4); --bg-input: hsl(var(--hsl-input));
|
|
226
|
+
--well-page: #050605; --well-card: #050605; --well-raised: #191c19; --well-raised-2: #191c19; --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent); --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
|
|
227
|
+
--border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border)); --border-hover: rgb(253 253 253 / 0.28); --border-strong: #919d93;
|
|
228
|
+
--field-border: #919d93; --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent); --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
|
|
229
|
+
--shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6); --shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
|
|
230
|
+
--shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
|
231
|
+
--accent-text: hsl(152.9464 91.8033% 47.8431%); --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent); --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
|
|
232
|
+
--accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover)); --brand-primary: hsl(152.7273 65.2174% 50.3922%); --brand-cool: hsl(152.7869 85.1163% 42.1569%); --brand-glow: var(--accent-text); --brand-vibrant: var(--brand-primary);
|
|
233
|
+
--btn-primary-bg: hsl(var(--hsl-primary)); --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%); --btn-primary-text: hsl(0 0% 100%); --text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 94.5098%); --text-muted: hsl(0 0% 85.8824%); --text-dim: hsl(0 0% 85.8824%);
|
|
234
|
+
--surface-success-bg: #304838; --surface-success-text: #45d196; --surface-success-border: #367154; --surface-warning-bg: #4d3f29; --surface-warning-text: #dab26b; --surface-warning-border: #77623d;
|
|
235
|
+
--surface-danger-bg: #553937; --surface-danger-text: #e8a5a5; --surface-danger-border: #815958; --surface-neutral-bg: #3f433e; --surface-neutral-text: #b4bab6; --surface-neutral-border: #626762;
|
|
462
236
|
}
|
|
463
|
-
/* agents:begin — generated by scripts/gen-ladders.mjs from its MAP; edit there, not these lines.
|
|
464
|
-
* Agents (Agent Builder): white light pages, cards separated by shadow, and a
|
|
465
|
-
* mauve neutral ladder. Surfaces, text and borders only; the accent, status
|
|
466
|
-
* and category tokens stay canonical. Select data-theme="agents" for dark and
|
|
467
|
-
* data-theme="agents-light" for light. */
|
|
468
237
|
[data-theme="agents"] {
|
|
469
|
-
--bg-card: #
|
|
470
|
-
--hsl-
|
|
471
|
-
--hsl-foreground:
|
|
472
|
-
--hsl-
|
|
473
|
-
--hsl-
|
|
474
|
-
--hsl-
|
|
475
|
-
--hsl-
|
|
476
|
-
--hsl-
|
|
477
|
-
--
|
|
478
|
-
--
|
|
479
|
-
--
|
|
480
|
-
--
|
|
481
|
-
--
|
|
482
|
-
--
|
|
483
|
-
--
|
|
484
|
-
--
|
|
485
|
-
--
|
|
486
|
-
--
|
|
487
|
-
--
|
|
488
|
-
--
|
|
489
|
-
--
|
|
490
|
-
--
|
|
491
|
-
--
|
|
492
|
-
--
|
|
493
|
-
--
|
|
494
|
-
--
|
|
495
|
-
--md3-surface-container-high: #232225;
|
|
496
|
-
--md3-surface-container-highest: #2b292d;
|
|
497
|
-
--md3-surface-variant: #232225;
|
|
498
|
-
--md3-on-surface: #eeeef0;
|
|
499
|
-
--md3-on-surface-variant: #b5b2bc;
|
|
500
|
-
--md3-outline: #6f6d78;
|
|
501
|
-
--md3-outline-variant: #3c393f;
|
|
502
|
-
--depth-1: #121113;
|
|
503
|
-
--depth-2: #1a191b;
|
|
504
|
-
--depth-3: #232225;
|
|
505
|
-
--depth-4: #2b292d;
|
|
506
|
-
--bg-root: #121113;
|
|
507
|
-
--bg-dark: #121113;
|
|
508
|
-
--bg-elevated: #232225;
|
|
509
|
-
--bg-section: #121113;
|
|
510
|
-
--bg-input: #1a191b;
|
|
511
|
-
--bg-hover: #232225;
|
|
512
|
-
--text-primary: #eeeef0;
|
|
513
|
-
--text-secondary: #eeeef0;
|
|
514
|
-
--text-muted: #b5b2bc;
|
|
515
|
-
--text-dim: #b5b2bc;
|
|
516
|
-
--border-subtle: #3c393f;
|
|
517
|
-
--border-default: #49474e;
|
|
518
|
-
--border-hover: #625f69;
|
|
519
|
-
--shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
|
|
520
|
-
--shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
|
|
238
|
+
--bg-card: var(--depth-2); --hsl-background: 270 5.5556% 7.0588%; /* #121113 */
|
|
239
|
+
--hsl-foreground: 0 0% 92.9412%; /* #ededed */ --hsl-card: 260 3.7037% 15.8824%; /* #28272a */
|
|
240
|
+
--hsl-card-foreground: var(--hsl-foreground); --hsl-popover: 264 3.876% 25.2941%; /* #403e43 */
|
|
241
|
+
--hsl-popover-foreground: var(--hsl-foreground); --hsl-secondary: 270 3.8462% 20.3922%; /* #343236 */
|
|
242
|
+
--hsl-secondary-foreground: var(--hsl-foreground); --hsl-muted: var(--hsl-secondary);
|
|
243
|
+
--hsl-muted-foreground: 0 0% 74.1176%; /* #bdbdbd */ --hsl-accent: var(--hsl-secondary);
|
|
244
|
+
--hsl-accent-foreground: var(--hsl-foreground); --hsl-border: 276 3.4483% 28.4314%; /* #49464b */
|
|
245
|
+
--hsl-input: 270 3.4483% 11.3725%; /* #1d1c1e */ --sidebar-background: 270 3.4483% 11.3725%; /* #1d1c1e */
|
|
246
|
+
--sidebar-foreground: var(--hsl-foreground); --sidebar-accent: var(--hsl-secondary);
|
|
247
|
+
--sidebar-accent-foreground: var(--hsl-foreground); --sidebar-border: var(--hsl-border);
|
|
248
|
+
--md3-surface: var(--bg-root); --md3-surface-dim: hsl(240 5.8824% 3.3333%);
|
|
249
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-container-lowest: var(--md3-surface-dim);
|
|
250
|
+
--md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card));
|
|
251
|
+
--md3-surface-container-high: hsl(var(--hsl-secondary)); --md3-surface-container-highest: hsl(var(--hsl-popover));
|
|
252
|
+
--md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary);
|
|
253
|
+
--md3-on-surface-variant: var(--text-muted); --md3-outline: hsl(var(--hsl-muted-foreground));
|
|
254
|
+
--md3-outline-variant: hsl(var(--hsl-border)); --depth-1: var(--md3-surface);
|
|
255
|
+
--depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high);
|
|
256
|
+
--depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background));
|
|
257
|
+
--bg-dark: var(--depth-1); --bg-elevated: var(--depth-4);
|
|
258
|
+
--bg-section: var(--depth-1); --bg-input: hsl(var(--hsl-input));
|
|
259
|
+
--bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent); --text-primary: hsl(var(--hsl-foreground));
|
|
260
|
+
--text-secondary: hsl(0 0% 81.9608%); --text-muted: hsl(0 0% 74.1176%);
|
|
261
|
+
--text-dim: hsl(0 0% 67.0588%); --border-subtle: hsl(var(--hsl-border));
|
|
262
|
+
--border-default: hsl(var(--hsl-border)); --border-hover: rgb(237 237 237 / 0.28);
|
|
263
|
+
--shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06); --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
|
|
521
264
|
--shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px hsl(var(--shadow-color) / 0.6);
|
|
265
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
266
|
+
--well-page: #080809; --well-card: #080809;
|
|
267
|
+
--well-raised: #28272a; --well-raised-2: #28272a;
|
|
522
268
|
}
|
|
523
269
|
[data-theme="agents-light"] {
|
|
524
|
-
--bg-card: #ffffff
|
|
525
|
-
--hsl-
|
|
526
|
-
--hsl-foreground:
|
|
527
|
-
--hsl-
|
|
528
|
-
--hsl-
|
|
529
|
-
--hsl-
|
|
530
|
-
--hsl-
|
|
531
|
-
--hsl-
|
|
532
|
-
--
|
|
533
|
-
--
|
|
534
|
-
--
|
|
535
|
-
--
|
|
536
|
-
--
|
|
537
|
-
--
|
|
538
|
-
--
|
|
539
|
-
--
|
|
540
|
-
--
|
|
541
|
-
--
|
|
542
|
-
--
|
|
543
|
-
--
|
|
544
|
-
--
|
|
545
|
-
--
|
|
546
|
-
--
|
|
547
|
-
--
|
|
548
|
-
--
|
|
549
|
-
--
|
|
550
|
-
--md3-surface-container-high: #f2eff3;
|
|
551
|
-
--md3-surface-container-highest: #ffffff;
|
|
552
|
-
--md3-surface-variant: #f2eff3;
|
|
553
|
-
--md3-on-surface: #211f26;
|
|
554
|
-
--md3-on-surface-variant: #65636d;
|
|
555
|
-
--md3-outline: #8e8c99;
|
|
556
|
-
--md3-outline-variant: #dbd8e0;
|
|
557
|
-
--depth-1: #ffffff;
|
|
558
|
-
--depth-2: #ffffff;
|
|
559
|
-
--depth-3: #faf9fb;
|
|
560
|
-
--depth-4: #ffffff;
|
|
561
|
-
--bg-root: #ffffff;
|
|
562
|
-
--bg-dark: #faf9fb;
|
|
563
|
-
--bg-elevated: #ffffff;
|
|
564
|
-
--bg-section: #faf9fb;
|
|
565
|
-
--bg-input: #ffffff;
|
|
566
|
-
--bg-hover: #f2eff3;
|
|
567
|
-
--text-primary: #211f26;
|
|
568
|
-
--text-secondary: #211f26;
|
|
569
|
-
--text-muted: #65636d;
|
|
570
|
-
--text-dim: #65636d;
|
|
571
|
-
--border-subtle: #dbd8e0;
|
|
572
|
-
--border-default: #d0cdd7;
|
|
573
|
-
--border-hover: #bcbac7;
|
|
574
|
-
--shadow-card: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08);
|
|
575
|
-
--shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
|
|
270
|
+
--bg-card: var(--depth-2); --hsl-background: 0 0% 100%; /* #ffffff */
|
|
271
|
+
--hsl-foreground: 0 0% 25.098%; /* #404040 */ --hsl-card: 0 0% 100%; /* #ffffff */
|
|
272
|
+
--hsl-card-foreground: var(--hsl-foreground); --hsl-popover: 0 0% 100%; /* #ffffff */
|
|
273
|
+
--hsl-popover-foreground: var(--hsl-foreground); --hsl-secondary: 285 13.3333% 94.1176%; /* #f1eef2 */
|
|
274
|
+
--hsl-secondary-foreground: var(--hsl-foreground); --hsl-muted: var(--hsl-secondary);
|
|
275
|
+
--hsl-muted-foreground: 0 0% 36.4706%; /* #5d5d5d */ --hsl-accent: var(--hsl-secondary);
|
|
276
|
+
--hsl-accent-foreground: var(--hsl-foreground); --hsl-border: 300 3.2967% 82.1569%; /* #d3d0d3 */
|
|
277
|
+
--hsl-input: 285 33.3333% 97.6471%; /* #faf7fb */ --sidebar-background: 285 33.3333% 97.6471%; /* #faf7fb */
|
|
278
|
+
--sidebar-foreground: var(--hsl-foreground); --sidebar-accent: var(--hsl-secondary);
|
|
279
|
+
--sidebar-accent-foreground: var(--hsl-foreground); --sidebar-border: var(--hsl-border);
|
|
280
|
+
--md3-surface: var(--bg-root); --md3-surface-dim: hsl(285 6.4516% 87.8431%);
|
|
281
|
+
--md3-surface-bright: hsl(var(--hsl-popover)); --md3-surface-container-lowest: hsl(var(--hsl-card));
|
|
282
|
+
--md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card));
|
|
283
|
+
--md3-surface-container-high: hsl(var(--hsl-secondary)); --md3-surface-container-highest: hsl(var(--hsl-popover));
|
|
284
|
+
--md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary);
|
|
285
|
+
--md3-on-surface-variant: var(--text-muted); --md3-outline: hsl(var(--hsl-muted-foreground));
|
|
286
|
+
--md3-outline-variant: hsl(var(--hsl-border)); --depth-1: var(--md3-surface);
|
|
287
|
+
--depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high);
|
|
288
|
+
--depth-4: var(--md3-surface-container-highest); --bg-root: hsl(var(--hsl-background));
|
|
289
|
+
--bg-dark: var(--depth-1); --bg-elevated: var(--depth-4);
|
|
290
|
+
--bg-section: var(--depth-1); --bg-input: hsl(var(--hsl-input));
|
|
291
|
+
--bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent); --text-primary: hsl(var(--hsl-foreground));
|
|
292
|
+
--text-secondary: hsl(0 0% 31.7647%); --text-muted: hsl(0 0% 36.4706%);
|
|
293
|
+
--text-dim: hsl(0 0% 41.9608%); --border-subtle: hsl(var(--hsl-border));
|
|
294
|
+
--border-default: hsl(var(--hsl-border)); --border-hover: rgb(64 64 64 / 0.28);
|
|
295
|
+
--shadow-card: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08); --shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
|
|
576
296
|
--shadow-overlay: 0 8px 28px hsl(var(--shadow-color) / 0.28);
|
|
297
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
298
|
+
--well-page: #ffffff; --well-card: #ffffff;
|
|
299
|
+
--well-raised: #ffffff; --well-raised-2: #ffffff;
|
|
577
300
|
}
|
|
578
|
-
/* agents:end */
|
|
579
|
-
|
|
580
|
-
/* ───────────────────── Website — indigo night, indigo paper ───────────────────
|
|
581
|
-
* The public site's identity (tangle.tools): an indigo-tinted surface ladder in
|
|
582
|
-
* dark and cool indigo paper in light. Only the planes and ink change; the Tangle
|
|
583
|
-
* accent, status, category and syntax tones stay canonical.
|
|
584
|
-
*
|
|
585
|
-
* Apply `class="dark" data-theme="website"` on <html>. A section that reads as
|
|
586
|
-
* paper (long-form, editorial) sets `data-theme="website"` without `.dark` and
|
|
587
|
-
* becomes a complete light island; tokens.css seeds both modes with the
|
|
588
|
-
* canonical baselines, as it does Hospitality. The two blocks declare the same
|
|
589
|
-
* properties, so nothing from one mode survives into the other. */
|
|
590
301
|
[data-theme="website"]:where(:not(.dark)) {
|
|
591
|
-
--hsl-background: 240
|
|
592
|
-
--hsl-
|
|
593
|
-
--hsl-
|
|
594
|
-
--hsl-
|
|
595
|
-
--hsl-
|
|
596
|
-
--
|
|
597
|
-
--hsl-border:
|
|
598
|
-
--
|
|
599
|
-
--
|
|
600
|
-
--
|
|
601
|
-
--
|
|
602
|
-
--
|
|
603
|
-
--
|
|
604
|
-
--
|
|
605
|
-
--bg-root: #f5f5fb; --bg-dark: #f5f5fb; --bg-section: #ececf6;
|
|
606
|
-
--bg-card: #ffffff; --bg-elevated: #ffffff; --bg-input: #f5f5fb;
|
|
607
|
-
--border-subtle: rgba(25, 28, 36, 0.08); --border-default: rgba(25, 28, 36, 0.12);
|
|
608
|
-
--border-hover: rgba(25, 28, 36, 0.24);
|
|
609
|
-
--text-primary: #191c24; --text-secondary: #3a3a50; --text-muted: #5e5e7a; --text-dim: #5e5e7a;
|
|
302
|
+
--hsl-background: 240 39.1304% 95.4902%; /* #efeff8 */ --hsl-foreground: 0 0% 24.7059%; /* #3f3f3f */ --hsl-card: 0 0% 100%; /* #ffffff */ --hsl-card-foreground: var(--hsl-foreground);
|
|
303
|
+
--hsl-popover: 0 0% 100%; /* #ffffff */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-secondary: 240 36% 95.098%; /* #eeeef7 */ --hsl-secondary-foreground: var(--hsl-foreground);
|
|
304
|
+
--hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 36.4706%; /* #5d5d5d */ --hsl-accent: var(--hsl-secondary); --hsl-accent-foreground: var(--hsl-foreground);
|
|
305
|
+
--hsl-border: 240 10.5882% 83.3333%; /* #d0d0d9 */ --hsl-input: 240 100% 98.4314%; /* #f7f7ff */ --md3-surface: var(--bg-root); --md3-surface-dim: hsl(240 14.2857% 89.0196%); --md3-surface-bright: hsl(var(--hsl-popover));
|
|
306
|
+
--md3-surface-container-lowest: hsl(var(--hsl-card)); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
307
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
308
|
+
--md3-outline: hsl(var(--hsl-muted-foreground)); --md3-outline-variant: hsl(var(--hsl-border)); --depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
|
|
309
|
+
--bg-root: hsl(var(--hsl-background)); --bg-dark: var(--depth-1); --bg-section: var(--depth-1); --bg-card: var(--depth-2); --bg-elevated: var(--depth-4); --bg-input: hsl(var(--hsl-input));
|
|
310
|
+
--border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border)); --border-hover: rgb(63 63 63 / 0.28);
|
|
311
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 31.7647%); --text-muted: hsl(0 0% 36.4706%); --text-dim: hsl(0 0% 41.9608%);
|
|
312
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
313
|
+
--well-page: #ffffff; --well-card: #efeff8;
|
|
314
|
+
--well-raised: #ffffff; --well-raised-2: #efeff8;
|
|
315
|
+
--sidebar-background: 240 100% 98.4314%; /* #f7f7ff */
|
|
610
316
|
}
|
|
611
317
|
.dark[data-theme="website"] {
|
|
612
|
-
--hsl-background: 243 45% 7.
|
|
613
|
-
--hsl-
|
|
614
|
-
--hsl-
|
|
615
|
-
--hsl-
|
|
616
|
-
--
|
|
617
|
-
--
|
|
618
|
-
--
|
|
619
|
-
--
|
|
620
|
-
--
|
|
621
|
-
--
|
|
622
|
-
--
|
|
623
|
-
--
|
|
624
|
-
--
|
|
625
|
-
--
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
318
|
+
--hsl-background: 243.3333 45% 7.8431%; /* #0c0b1d */ --hsl-foreground: 0 0% 89.4118%; /* #e4e4e4 */ --hsl-card: 243.75 34.7826% 18.0392%; /* #201e3e */ --hsl-card-foreground: var(--hsl-foreground);
|
|
319
|
+
--hsl-popover: 242.6087 30.6667% 29.4118%; /* #363462 */ --hsl-popover-foreground: var(--hsl-foreground); --hsl-secondary: 243.1579 31.6667% 23.5294%; /* #2b294f */ --hsl-secondary-foreground: var(--hsl-foreground);
|
|
320
|
+
--hsl-muted: var(--hsl-secondary); --hsl-muted-foreground: 0 0% 71.3725%; /* #b6b6b6 */ --hsl-accent: var(--hsl-secondary); --hsl-accent-foreground: var(--hsl-foreground);
|
|
321
|
+
--hsl-border: 243.3962 30.2857% 34.3137%; /* #403d72 */ --hsl-input: 244.8 38.4615% 12.7451%; /* #16142d */ --md3-surface: var(--bg-root); --md3-surface-dim: hsl(240 55.5556% 3.5294%); --md3-surface-bright: hsl(var(--hsl-popover));
|
|
322
|
+
--md3-surface-container-lowest: var(--md3-surface-dim); --md3-surface-container-low: hsl(var(--sidebar-background)); --md3-surface-container: hsl(var(--hsl-card)); --md3-surface-container-high: hsl(var(--hsl-secondary));
|
|
323
|
+
--md3-surface-container-highest: hsl(var(--hsl-popover)); --md3-surface-variant: var(--md3-surface-container-high); --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
|
|
324
|
+
--md3-outline: hsl(var(--hsl-muted-foreground)); --md3-outline-variant: hsl(var(--hsl-border)); --depth-1: var(--md3-surface); --depth-2: var(--md3-surface-container); --depth-3: var(--md3-surface-container-high); --depth-4: var(--md3-surface-container-highest);
|
|
325
|
+
--bg-root: hsl(var(--hsl-background)); --bg-dark: var(--depth-1); --bg-section: var(--depth-1); --bg-card: var(--depth-2); --bg-elevated: var(--depth-4); --bg-input: hsl(var(--hsl-input));
|
|
326
|
+
--border-subtle: hsl(var(--hsl-border)); --border-default: hsl(var(--hsl-border)); --border-hover: rgb(228 228 228 / 0.28);
|
|
327
|
+
--text-primary: hsl(var(--hsl-foreground)); --text-secondary: hsl(0 0% 78.4314%); --text-muted: hsl(0 0% 71.3725%); --text-dim: hsl(0 0% 64.3137%);
|
|
328
|
+
--hsl-raised: var(--hsl-secondary); --hsl-raised-2: var(--hsl-popover);
|
|
329
|
+
--well-page: #04040e; --well-card: #04040e;
|
|
330
|
+
--well-raised: #201e3e; --well-raised-2: #201e3e;
|
|
331
|
+
--sidebar-background: 244.8 38.4615% 12.7451%; /* #16142d */
|
|
332
|
+
}
|
|
333
|
+
/* accent-scopes:begin — generated by scripts/gen-ladders.mjs from its CATEGORY map and the spine; edit there, not these lines.
|
|
334
|
+
* data-accent="<category>" on <html> or any theme boundary retints the
|
|
335
|
+
* interaction accent: the five roles take the hue's --tone-<hue>-* values and
|
|
336
|
+
* the shared rule re-declares what derives from them. Planes, body ink and
|
|
337
|
+
* status stay the theme's. Last in the stylesheet, so a scope wins over the
|
|
338
|
+
* named theme it sits on or in. */
|
|
339
|
+
[data-accent="violet"],
|
|
340
|
+
[data-accent="violet"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
341
|
+
[data-accent="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
342
|
+
--hsl-primary: var(--tone-violet-fill);
|
|
343
|
+
--hsl-ring: var(--tone-violet-ring);
|
|
344
|
+
--brand-primary: var(--tone-violet-mark);
|
|
345
|
+
--brand-cool: var(--tone-violet-line);
|
|
346
|
+
--accent-text: var(--tone-violet-ink);
|
|
347
|
+
}
|
|
348
|
+
[data-accent="orange"],
|
|
349
|
+
[data-accent="orange"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
350
|
+
[data-accent="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
351
|
+
--hsl-primary: var(--tone-orange-fill);
|
|
352
|
+
--hsl-ring: var(--tone-orange-ring);
|
|
353
|
+
--brand-primary: var(--tone-orange-mark);
|
|
354
|
+
--brand-cool: var(--tone-orange-line);
|
|
355
|
+
--accent-text: var(--tone-orange-ink);
|
|
356
|
+
}
|
|
357
|
+
[data-accent="teal"],
|
|
358
|
+
[data-accent="teal"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
359
|
+
[data-accent="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
360
|
+
--hsl-primary: var(--tone-teal-fill);
|
|
361
|
+
--hsl-ring: var(--tone-teal-ring);
|
|
362
|
+
--brand-primary: var(--tone-teal-mark);
|
|
363
|
+
--brand-cool: var(--tone-teal-line);
|
|
364
|
+
--accent-text: var(--tone-teal-ink);
|
|
365
|
+
}
|
|
366
|
+
[data-accent="blue"],
|
|
367
|
+
[data-accent="blue"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
368
|
+
[data-accent="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
369
|
+
--hsl-primary: var(--tone-blue-fill);
|
|
370
|
+
--hsl-ring: var(--tone-blue-ring);
|
|
371
|
+
--brand-primary: var(--tone-blue-mark);
|
|
372
|
+
--brand-cool: var(--tone-blue-line);
|
|
373
|
+
--accent-text: var(--tone-blue-ink);
|
|
374
|
+
}
|
|
375
|
+
[data-accent="pink"],
|
|
376
|
+
[data-accent="pink"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
377
|
+
[data-accent="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
378
|
+
--hsl-primary: var(--tone-pink-fill);
|
|
379
|
+
--hsl-ring: var(--tone-pink-ring);
|
|
380
|
+
--brand-primary: var(--tone-pink-mark);
|
|
381
|
+
--brand-cool: var(--tone-pink-line);
|
|
382
|
+
--accent-text: var(--tone-pink-ink);
|
|
383
|
+
}
|
|
384
|
+
[data-accent="brown"],
|
|
385
|
+
[data-accent="brown"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
386
|
+
[data-accent="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
387
|
+
--hsl-primary: var(--tone-brown-fill);
|
|
388
|
+
--hsl-ring: var(--tone-brown-ring);
|
|
389
|
+
--brand-primary: var(--tone-brown-mark);
|
|
390
|
+
--brand-cool: var(--tone-brown-line);
|
|
391
|
+
--accent-text: var(--tone-brown-ink);
|
|
392
|
+
}
|
|
393
|
+
[data-accent="cyan"],
|
|
394
|
+
[data-accent="cyan"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
395
|
+
[data-accent="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
396
|
+
--hsl-primary: var(--tone-cyan-fill);
|
|
397
|
+
--hsl-ring: var(--tone-cyan-ring);
|
|
398
|
+
--brand-primary: var(--tone-cyan-mark);
|
|
399
|
+
--brand-cool: var(--tone-cyan-line);
|
|
400
|
+
--accent-text: var(--tone-cyan-ink);
|
|
401
|
+
}
|
|
402
|
+
[data-accent="lime"],
|
|
403
|
+
[data-accent="lime"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
404
|
+
[data-accent="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
405
|
+
--hsl-primary: var(--tone-lime-fill);
|
|
406
|
+
--hsl-ring: var(--tone-lime-ring);
|
|
407
|
+
--brand-primary: var(--tone-lime-mark);
|
|
408
|
+
--brand-cool: var(--tone-lime-line);
|
|
409
|
+
--accent-text: var(--tone-lime-ink);
|
|
410
|
+
}
|
|
411
|
+
:is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]),
|
|
412
|
+
:is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]):is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]),
|
|
413
|
+
:is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]) :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
|
|
414
|
+
--btn-primary-hover: color-mix(in srgb, hsl(var(--hsl-primary)), white 10%);
|
|
415
|
+
--brand-purple: color-mix(in srgb, var(--accent-text), white 35%);
|
|
416
|
+
--brand-strong: color-mix(in srgb, hsl(var(--hsl-primary)), black 50%);
|
|
417
|
+
--md3-primary-fixed: light-dark(color-mix(in srgb, var(--accent-text) 12%, white), var(--accent-text));
|
|
418
|
+
--md3-inverse-primary: light-dark(color-mix(in srgb, var(--brand-primary), white 40%), var(--btn-primary-bg));
|
|
419
|
+
--hsl-primary-foreground: 0 0% 100%;
|
|
420
|
+
--btn-primary-text: #ffffff;
|
|
421
|
+
--md3-on-primary: #ffffff;
|
|
422
|
+
--brand-glow: var(--accent-text);
|
|
423
|
+
--brand-vibrant: var(--brand-primary);
|
|
424
|
+
--btn-primary-bg: hsl(var(--hsl-primary));
|
|
425
|
+
--btn-cta-bg: var(--btn-primary-bg);
|
|
426
|
+
--btn-cta-text: var(--btn-primary-text);
|
|
427
|
+
--sidebar-primary: var(--hsl-primary);
|
|
428
|
+
--sidebar-primary-foreground: var(--hsl-primary-foreground);
|
|
429
|
+
--sidebar-ring: var(--hsl-ring);
|
|
430
|
+
--md3-primary: var(--accent-text);
|
|
431
|
+
--md3-primary-dim: var(--btn-primary-bg);
|
|
432
|
+
--md3-primary-container: var(--btn-primary-bg);
|
|
433
|
+
--md3-on-primary-container: light-dark(hsl(0 0% 100%), var(--brand-purple));
|
|
434
|
+
--md3-primary-fixed-dim: light-dark(color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)), var(--brand-cool));
|
|
435
|
+
--md3-secondary: light-dark(var(--accent-text), var(--brand-purple));
|
|
436
|
+
--md3-secondary-dim: light-dark(var(--btn-primary-bg), var(--accent-text));
|
|
437
|
+
--md3-secondary-container: light-dark(var(--md3-primary-fixed), var(--brand-strong));
|
|
438
|
+
--md3-on-secondary: light-dark(hsl(0 0% 100%), var(--brand-purple));
|
|
439
|
+
--md3-on-secondary-container: light-dark(var(--accent-text), var(--brand-purple));
|
|
440
|
+
--md3-surface-tint: var(--accent-text);
|
|
441
|
+
--accent-surface-soft: light-dark(color-mix(in srgb, var(--accent-text) 5%, transparent), color-mix(in srgb, var(--accent-text) 7%, transparent));
|
|
442
|
+
--accent-surface-strong: light-dark(color-mix(in srgb, var(--btn-primary-bg) 13%, transparent), color-mix(in srgb, var(--btn-primary-bg) 30%, transparent));
|
|
443
|
+
--bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
|
|
444
|
+
--bg-selection: light-dark(color-mix(in srgb, var(--btn-primary-bg) 16%, transparent), color-mix(in srgb, var(--btn-primary-bg) 28%, transparent));
|
|
445
|
+
--border-accent: light-dark(color-mix(in srgb, var(--brand-cool) 20%, transparent), color-mix(in srgb, var(--brand-cool) 35%, transparent));
|
|
446
|
+
--border-accent-hover: light-dark(color-mix(in srgb, var(--brand-cool) 36%, transparent), color-mix(in srgb, var(--brand-cool) 50%, transparent));
|
|
447
|
+
--tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
|
|
448
|
+
--tangle-gradient-text: linear-gradient(135deg, light-dark(var(--btn-primary-bg), var(--brand-purple)), light-dark(var(--btn-primary-hover), var(--accent-text)));
|
|
449
|
+
--accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
|
|
450
|
+
--status-creating: var(--accent-text);
|
|
451
|
+
--primary: var(--hsl-primary);
|
|
452
|
+
--primary-foreground: var(--hsl-primary-foreground);
|
|
453
|
+
--ring: var(--hsl-ring);
|
|
454
|
+
--syntax-meta: var(--accent-text);
|
|
455
|
+
--display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
|
|
456
|
+
--display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
|
|
457
|
+
--focus-border: hsl(var(--hsl-ring) / 0.8);
|
|
458
|
+
--focus-halo: hsl(var(--hsl-ring) / 0.18);
|
|
459
|
+
--ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
|
|
460
|
+
--ix-hover-border: hsl(var(--hsl-ring) / 0.7);
|
|
461
|
+
--ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
|
|
462
|
+
--ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
|
|
463
|
+
--ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
|
|
464
|
+
--ix-sel-bg: light-dark(hsl(var(--hsl-ring) / 0.13), hsl(var(--hsl-ring) / 0.18));
|
|
465
|
+
--ix-hover-bg: light-dark(hsl(var(--hsl-ring) / 0.07), hsl(var(--hsl-ring) / 0.08));
|
|
466
|
+
--chart-shade: var(--bg-hover);
|
|
467
|
+
--chart-accent: light-dark(hsl(var(--hsl-primary)), var(--brand-cool));
|
|
468
|
+
--color-brand: var(--brand-primary);
|
|
469
|
+
--color-brand-dim: var(--btn-primary-bg);
|
|
470
|
+
--color-brand-cool: var(--brand-cool);
|
|
471
|
+
--color-brand-glow: var(--brand-glow);
|
|
472
|
+
--color-status-creating: var(--status-creating);
|
|
473
|
+
--color-primary: hsl(var(--primary));
|
|
474
|
+
--color-primary-foreground: hsl(var(--primary-foreground));
|
|
475
|
+
--color-ring: hsl(var(--ring));
|
|
631
476
|
}
|
|
477
|
+
/* accent-scopes:end */
|
|
478
|
+
/* palette:end */
|