@tangle-network/brand 1.15.7 → 1.17.0

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.
Files changed (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +3 -1
  3. package/dist/index.d.ts +172 -1
  4. package/dist/index.js +138 -1
  5. package/package.json +4 -3
  6. package/src/index.ts +1 -0
  7. package/src/palette.generated.ts +174 -0
  8. package/src/palette.test.ts +25 -0
  9. package/src/styles/legacy-light.css +108 -108
  10. package/src/styles/named-themes.css +14 -14
  11. package/src/styles/tokens.css +92 -92
  12. package/src/styles/tokens.test.ts +50 -26
package/src/styles/legacy-light.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* GENERATED by scripts/gen-compat.mjs. Do not edit.
2
2
  * Source: tokens.css + named-themes.css
3
- * SHA-256: ba2f212c39d2e271aacad642df566bad7871b0a4addcb44a7744e9e7f58276c7
3
+ * SHA-256: 6376234ba229d9bd8fc0be766a9998b61146de56ee8dc9d5bb5a0ba2206951f0
4
4
  * Light-default compatibility; all explicit modes remain canonical.
5
5
  */
6
6
  :where(:root),
@@ -24,15 +24,15 @@
24
24
  .light,
25
25
  .dark {
26
26
  color-scheme: dark;
27
- --md3-surface: #161616;
28
- --md3-surface-dim: #101010;
29
- --md3-surface-bright: #3b3b3b;
30
- --md3-surface-container-lowest: #101010;
31
- --md3-surface-container-low: #242424;
32
- --md3-surface-container: #303030;
33
- --md3-surface-container-high: #353535;
34
- --md3-surface-container-highest: #3b3b3b;
35
- --md3-surface-variant: #353535;
27
+ --md3-surface: #0a0a14;
28
+ --md3-surface-dim: #060610;
29
+ --md3-surface-bright: #232238;
30
+ --md3-surface-container-lowest: #050509;
31
+ --md3-surface-container-low: #12111f;
32
+ --md3-surface-container: #191826;
33
+ --md3-surface-container-high: #221f33;
34
+ --md3-surface-container-highest: #2c2942;
35
+ --md3-surface-variant: #221f33;
36
36
  --md3-on-surface: #e6e6e6;
37
37
  --md3-on-surface-variant: #b5b5b5;
38
38
  --md3-primary: #A5B4FC;
@@ -50,7 +50,7 @@
50
50
  --md3-tertiary: #10B981;
51
51
  --md3-tertiary-container: var(--surface-success-bg);
52
52
  --md3-outline: #8e8e8e;
53
- --md3-outline-variant: #4c4c4c;
53
+ --md3-outline-variant: #2a293d;
54
54
  --md3-error: #ff5277;
55
55
  --md3-error-dim: #eb2855;
56
56
  --md3-error-container: #82042b;
@@ -60,24 +60,24 @@
60
60
  --md3-inverse-primary: #4C3FC5;
61
61
  --md3-inverse-on-surface: #000000;
62
62
  --md3-surface-tint: #A5B4FC;
63
- --hsl-background: 0 0% 8.6275%;
63
+ --hsl-background: 240 33% 6%;
64
64
  --hsl-foreground: 0 0% 90.1961%;
65
- --hsl-card: 0 0% 18.8235%;
65
+ --hsl-card: 244 23% 12%;
66
66
  --hsl-card-foreground: 0 0% 90.1961%;
67
- --hsl-popover: 0 0% 20.7843%;
67
+ --hsl-popover: 247 23% 21%;
68
68
  --hsl-popover-foreground: 0 0% 90.1961%;
69
69
  --hsl-primary: 246 54% 51%;
70
70
  --hsl-primary-foreground: 0 0% 100%;
71
- --hsl-secondary: 0 0% 20.7843%;
71
+ --hsl-secondary: 249 24% 16%;
72
72
  --hsl-secondary-foreground: 0 0% 90.1961%;
73
- --hsl-muted: 0 0% 20.7843%;
74
- --hsl-muted-foreground: 0 0% 70.9804%;
75
- --hsl-accent: 0 0% 20.7843%;
73
+ --hsl-muted: 249 24% 16%;
74
+ --hsl-muted-foreground: 240 5% 68%;
75
+ --hsl-accent: 249 24% 16%;
76
76
  --hsl-accent-foreground: 0 0% 90.1961%;
77
77
  --hsl-destructive: 348 74% 48%;
78
78
  --hsl-destructive-foreground: 0 0% 100%;
79
- --hsl-border: 0 0% 29.8039%;
80
- --hsl-input: 0 0% 12.1569%;
79
+ --hsl-border: 243 20% 20%;
80
+ --hsl-input: 244 29% 9%;
81
81
  --hsl-ring: 233 100% 87%;
82
82
  --hsl-success: 160 84% 39%;
83
83
  --hsl-warning: 40 94% 56%;
@@ -105,7 +105,7 @@
105
105
  --warning: var(--hsl-warning);
106
106
  --error: var(--hsl-destructive);
107
107
  --info: var(--hsl-info);
108
- --sidebar-background: 0 0% 6.2745%;
108
+ --sidebar-background: 244 29% 9%;
109
109
  --sidebar-foreground: 0 0% 90.1961%;
110
110
  --sidebar-primary: 246 54% 51%;
111
111
  --sidebar-primary-foreground: 0 0% 100%;
@@ -113,10 +113,10 @@
113
113
  --sidebar-accent-foreground: 0 0% 90.1961%;
114
114
  --sidebar-border: 0 0% 29.8039%;
115
115
  --sidebar-ring: 233 100% 87%;
116
- --depth-1: #161616;
117
- --depth-2: #303030;
118
- --depth-3: #353535;
119
- --depth-4: #3b3b3b;
116
+ --depth-1: #0a0a14;
117
+ --depth-2: #191826;
118
+ --depth-3: #221f33;
119
+ --depth-4: #2c2942;
120
120
  --status-running: #10B981;
121
121
  --status-creating: #A5B4FC;
122
122
  --status-stopped: #FFB800;
@@ -136,69 +136,69 @@
136
136
  --surface-info-bg: #2d4e67;
137
137
  --surface-info-border: #3d7292;
138
138
  --surface-info-text: #67cdff;
139
- --tone-violet-bg: #4e3a60;
140
- --tone-violet-bg-hover: #583d71;
141
- --tone-violet-bg-selected: #624080;
139
+ --tone-violet-bg: #392751;
140
+ --tone-violet-bg-hover: #432b60;
141
+ --tone-violet-bg-selected: #4c306c;
142
142
  --tone-violet-border: #8457aa;
143
143
  --tone-violet-border-selected: #d19dff;
144
144
  --tone-violet-text: #ecd9fa;
145
145
  --tone-violet-icon: #d19dff;
146
- --tone-orange-bg: #583c2b;
147
- --tone-orange-bg-hover: #664029;
148
- --tone-orange-bg-selected: #724327;
146
+ --tone-orange-bg: #432823;
147
+ --tone-orange-bg-hover: #512d22;
148
+ --tone-orange-bg-selected: #5e3221;
149
149
  --tone-orange-border: #a35829;
150
- --tone-orange-border-selected: #ff801f;
150
+ --tone-orange-border-selected: #f76b15;
151
151
  --tone-orange-text: #ffe0c2;
152
- --tone-orange-icon: #ff801f;
153
- --tone-teal-bg: #2a4744;
154
- --tone-teal-bg-hover: #28504b;
155
- --tone-teal-bg-selected: #265751;
152
+ --tone-orange-icon: #f76b15;
153
+ --tone-teal-bg: #18333b;
154
+ --tone-teal-bg-hover: #173b42;
155
+ --tone-teal-bg-selected: #174448;
156
156
  --tone-teal-border: #207e73;
157
- --tone-teal-border-selected: #0eb39e;
157
+ --tone-teal-border-selected: #12a594;
158
158
  --tone-teal-text: #adf0dd;
159
- --tone-teal-icon: #0eb39e;
160
- --tone-blue-bg: #25455e;
161
- --tone-blue-bg-hover: #224c6c;
162
- --tone-blue-bg-selected: #1f537b;
159
+ --tone-teal-icon: #12a594;
160
+ --tone-blue-bg: #143051;
161
+ --tone-blue-bg-hover: #123861;
162
+ --tone-blue-bg-selected: #113e6b;
163
163
  --tone-blue-border: #2870bd;
164
- --tone-blue-border-selected: #70b8ff;
164
+ --tone-blue-border-selected: #0090ff;
165
165
  --tone-blue-text: #c2e6ff;
166
- --tone-blue-icon: #70b8ff;
167
- --tone-pink-bg: #5e344f;
168
- --tone-pink-bg-hover: #6d3659;
169
- --tone-pink-bg-selected: #7b3762;
166
+ --tone-blue-icon: #0090ff;
167
+ --tone-pink-bg: #462243;
168
+ --tone-pink-bg-hover: #55254d;
169
+ --tone-pink-bg-selected: #612754;
170
170
  --tone-pink-border: #a84885;
171
- --tone-pink-border-selected: #ff8dcc;
171
+ --tone-pink-border-selected: #de51a8;
172
172
  --tone-pink-text: #fdd1ea;
173
- --tone-pink-icon: #ff8dcc;
174
- --tone-brown-bg: #494038;
175
- --tone-brown-bg-hover: #54473c;
176
- --tone-brown-bg-selected: #5c4c3e;
173
+ --tone-pink-icon: #de51a8;
174
+ --tone-brown-bg: #372d30;
175
+ --tone-brown-bg-hover: #413434;
176
+ --tone-brown-bg-selected: #4a3a37;
177
177
  --tone-brown-border: #7c5f46;
178
- --tone-brown-border-selected: #dbb594;
178
+ --tone-brown-border-selected: #ad7f58;
179
179
  --tone-brown-text: #f2e1ca;
180
- --tone-brown-icon: #dbb594;
181
- --tone-cyan-bg: #27464d;
182
- --tone-cyan-bg-hover: #234f59;
183
- --tone-cyan-bg-selected: #205662;
180
+ --tone-brown-icon: #ad7f58;
181
+ --tone-cyan-bg: #143245;
182
+ --tone-cyan-bg-hover: #133b4e;
183
+ --tone-cyan-bg-selected: #114358;
184
184
  --tone-cyan-border: #11809c;
185
- --tone-cyan-border-selected: #23afd0;
185
+ --tone-cyan-border-selected: #00a2c7;
186
186
  --tone-cyan-text: #b6ecf7;
187
- --tone-cyan-icon: #23afd0;
188
- --tone-lime-bg: #404536;
189
- --tone-lime-bg-hover: #444b37;
190
- --tone-lime-bg-selected: #495239;
187
+ --tone-cyan-icon: #00a2c7;
188
+ --tone-lime-bg: #2b302d;
189
+ --tone-lime-bg-hover: #32382f;
190
+ --tone-lime-bg-selected: #384132;
191
191
  --tone-lime-border: #577538;
192
192
  --tone-lime-border-selected: #bdee63;
193
193
  --tone-lime-text: #e3f7ba;
194
194
  --tone-lime-icon: #bdee63;
195
- --surface-violet-bg: #4e3a60;
195
+ --surface-violet-bg: #392751;
196
196
  --surface-violet-border: #8457aa;
197
197
  --surface-violet-text: #d19dff;
198
- --surface-orange-bg: #583c2b;
198
+ --surface-orange-bg: #432823;
199
199
  --surface-orange-border: #a35829;
200
200
  --surface-orange-text: #ffa057;
201
- --surface-teal-bg: #2a4744;
201
+ --surface-teal-bg: #18333b;
202
202
  --surface-teal-border: #207e73;
203
203
  --surface-teal-text: #0bd8b6;
204
204
  --run-mix-succeeded: #76edb9;
@@ -223,7 +223,7 @@
223
223
  --accent-surface-soft: rgba(165, 180, 252, 0.07);
224
224
  --accent-surface-strong: rgba(76, 63, 197, 0.30);
225
225
  --accent-text: #A5B4FC;
226
- --bg-root: #161616;
226
+ --bg-root: #0a0a14;
227
227
  --bg-dark: var(--depth-1);
228
228
  --bg-card: var(--depth-2);
229
229
  --bg-elevated: var(--depth-4);
@@ -372,24 +372,24 @@
372
372
  :where(:root) {
373
373
  color-scheme: light;
374
374
  --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
375
- --syntax-foreground: #24292f;
376
- --syntax-comment: #57606a;
377
- --syntax-keyword: #6d28d9;
375
+ --syntax-foreground: #24243a;
376
+ --syntax-comment: #6b7280;
377
+ --syntax-keyword: #7c3aed;
378
378
  --syntax-string: #047857;
379
- --syntax-function: #1d4ed8;
380
- --syntax-number: #92400e;
381
- --syntax-meta: #7c3aed;
382
- --syntax-variable: #24292f;
383
- --syntax-error: #b91c1c;
384
- --md3-surface: #eaeaea;
385
- --md3-surface-dim: #dadada;
379
+ --syntax-function: #2563eb;
380
+ --syntax-number: #b45309;
381
+ --syntax-meta: #6d28d9;
382
+ --syntax-variable: #334155;
383
+ --syntax-error: #dc2626;
384
+ --md3-surface: #eceef3;
385
+ --md3-surface-dim: #dcdee6;
386
386
  --md3-surface-bright: #ffffff;
387
387
  --md3-surface-container-lowest: #ffffff;
388
- --md3-surface-container-low: #f7f7f7;
388
+ --md3-surface-container-low: #f6f7fa;
389
389
  --md3-surface-container: #ffffff;
390
- --md3-surface-container-high: #f2f2f2;
390
+ --md3-surface-container-high: #f1f2f7;
391
391
  --md3-surface-container-highest: #ffffff;
392
- --md3-surface-variant: #f2f2f2;
392
+ --md3-surface-variant: #f1f2f7;
393
393
  --md3-on-surface: #2d2d2d;
394
394
  --md3-on-surface-variant: #4c4c4c;
395
395
  --md3-primary: #3E349E;
@@ -407,7 +407,7 @@
407
407
  --md3-tertiary: #065F46;
408
408
  --md3-tertiary-container: #D1FAE5;
409
409
  --md3-outline: #787878;
410
- --md3-outline-variant: #d0d0d0;
410
+ --md3-outline-variant: #c7c6d6;
411
411
  --md3-error: #ba1a1a;
412
412
  --md3-error-dim: #93000a;
413
413
  --md3-error-container: #ffdad6;
@@ -417,7 +417,7 @@
417
417
  --md3-inverse-primary: #A5AAFC;
418
418
  --md3-inverse-on-surface: #f0f1f4;
419
419
  --md3-surface-tint: #6366F1;
420
- --hsl-background: 0 0% 91.7647%;
420
+ --hsl-background: 223 23% 94%;
421
421
  --hsl-foreground: 0 0% 17.6471%;
422
422
  --hsl-card: 0 0% 100%;
423
423
  --hsl-card-foreground: 0 0% 17.6471%;
@@ -425,23 +425,23 @@
425
425
  --hsl-popover-foreground: 0 0% 17.6471%;
426
426
  --hsl-primary: 246 54% 51%;
427
427
  --hsl-primary-foreground: 0 0% 100%;
428
- --hsl-secondary: 0 0% 94.902%;
428
+ --hsl-secondary: 230 27% 96%;
429
429
  --hsl-secondary-foreground: 0 0% 17.6471%;
430
- --hsl-muted: 0 0% 94.902%;
430
+ --hsl-muted: 230 27% 96%;
431
431
  --hsl-muted-foreground: 0 0% 29.8039%;
432
- --hsl-accent: 0 0% 94.902%;
432
+ --hsl-accent: 230 27% 96%;
433
433
  --hsl-accent-foreground: 0 0% 17.6471%;
434
434
  --hsl-destructive: 0 72% 41%;
435
435
  --hsl-destructive-foreground: 0 0% 100%;
436
- --hsl-border: 0 0% 81.5686%;
437
- --hsl-input: 0 0% 96.0784%;
436
+ --hsl-border: 244 16% 81%;
437
+ --hsl-input: 225 29% 97%;
438
438
  --hsl-ring: 246 54% 51%;
439
439
  --hsl-success: 160 84% 30%;
440
440
  --hsl-warning: 41 96% 50%;
441
441
  --hsl-info: 212 80% 50%;
442
- --depth-1: #eaeaea;
442
+ --depth-1: #eceef3;
443
443
  --depth-2: #ffffff;
444
- --depth-3: #f2f2f2;
444
+ --depth-3: #f1f2f7;
445
445
  --depth-4: #ffffff;
446
446
  --status-running: #059669;
447
447
  --status-creating: #3E349E;
@@ -550,7 +550,7 @@
550
550
  --mesh-teal: transparent;
551
551
  --mesh-violet: transparent;
552
552
  --mesh-blue: transparent;
553
- --bg-root: #eaeaea;
553
+ --bg-root: #eceef3;
554
554
  --bg-dark: var(--depth-1);
555
555
  --bg-card: var(--depth-2);
556
556
  --bg-elevated: var(--depth-4);
@@ -1118,38 +1118,38 @@
1118
1118
  --md3-on-surface-variant: var(--text-muted);
1119
1119
  }
1120
1120
  [data-theme="tangle-dark"] {
1121
- --hsl-background: 0 0% 8.6275%;
1121
+ --hsl-background: 240 33% 6%;
1122
1122
  --hsl-foreground: 0 0% 90.1961%;
1123
- --hsl-card: 0 0% 18.8235%;
1123
+ --hsl-card: 244 23% 12%;
1124
1124
  --hsl-card-foreground: 0 0% 90.1961%;
1125
- --hsl-popover: 0 0% 20.7843%;
1125
+ --hsl-popover: 247 23% 21%;
1126
1126
  --hsl-popover-foreground: 0 0% 90.1961%;
1127
1127
  --hsl-primary: 246 54% 51%;
1128
1128
  --hsl-primary-foreground: 0 0% 100%;
1129
- --hsl-secondary: 0 0% 20.7843%;
1129
+ --hsl-secondary: 249 24% 16%;
1130
1130
  --hsl-secondary-foreground: 0 0% 90.1961%;
1131
- --hsl-muted: 0 0% 20.7843%;
1132
- --hsl-muted-foreground: 0 0% 70.9804%;
1133
- --hsl-accent: 0 0% 20.7843%;
1131
+ --hsl-muted: 249 24% 16%;
1132
+ --hsl-muted-foreground: 240 5% 68%;
1133
+ --hsl-accent: 249 24% 16%;
1134
1134
  --hsl-accent-foreground: 0 0% 90.1961%;
1135
1135
  --hsl-destructive: 348 74% 48%;
1136
1136
  --hsl-destructive-foreground: 0 0% 100%;
1137
- --hsl-border: 0 0% 29.8039%;
1138
- --hsl-input: 0 0% 12.1569%;
1137
+ --hsl-border: 243 20% 20%;
1138
+ --hsl-input: 244 29% 9%;
1139
1139
  --hsl-ring: 233 100% 87%;
1140
- --depth-1: #161616;
1141
- --depth-2: #303030;
1142
- --depth-3: #353535;
1143
- --depth-4: #3b3b3b;
1144
- --bg-root: #161616;
1140
+ --depth-1: #0a0a14;
1141
+ --depth-2: #191826;
1142
+ --depth-3: #221f33;
1143
+ --depth-4: #2c2942;
1144
+ --bg-root: #0a0a14;
1145
1145
  --bg-card: var(--depth-2);
1146
1146
  --bg-input: hsl(var(--hsl-input));
1147
- --md3-surface-container-lowest: #101010;
1148
- --md3-surface-container-low: #242424;
1149
- --md3-surface-container: #303030;
1150
- --md3-surface-container-high: #353535;
1151
- --md3-surface-container-highest: #3b3b3b;
1152
- --md3-outline-variant: #4c4c4c;
1147
+ --md3-surface-container-lowest: #050509;
1148
+ --md3-surface-container-low: #12111f;
1149
+ --md3-surface-container: #191826;
1150
+ --md3-surface-container-high: #221f33;
1151
+ --md3-surface-container-highest: #2c2942;
1152
+ --md3-outline-variant: #2a293d;
1153
1153
  --border-subtle: rgba(255, 255, 255, 0.10);
1154
1154
  --border-default: rgba(255, 255, 255, 0.16);
1155
1155
  --border-hover: rgba(255, 255, 255, 0.28);
package/src/styles/named-themes.css CHANGED
@@ -220,28 +220,28 @@
220
220
  --md3-on-surface: var(--text-primary); --md3-on-surface-variant: var(--text-muted);
221
221
  }
222
222
 
223
- /* ───────────────────────── Tangle — neutral dark spine ─────────────────────
223
+ /* ───────────────────────── Tangle — canonical dark spine ───────────────────
224
224
  * tangle-dark names the default :root/.dark spine explicitly. The named block
225
- * repeats its neutral surfaces and ink so a dark island remains self-sufficient
225
+ * repeats its surfaces and ink so a dark island remains self-sufficient
226
226
  * inside a light-named wrapper. Indigo stays in the accent; status tokens inherit
227
227
  * the dark-tuned root palette.
228
228
  */
229
229
  [data-theme="tangle-dark"] {
230
- --hsl-background: 0 0% 8.6275%; --hsl-foreground: 0 0% 90.1961%;
231
- --hsl-card: 0 0% 18.8235%; --hsl-card-foreground: 0 0% 90.1961%;
232
- --hsl-popover: 0 0% 20.7843%; --hsl-popover-foreground: 0 0% 90.1961%;
230
+ --hsl-background: 240 33% 6%; --hsl-foreground: 0 0% 90.1961%;
231
+ --hsl-card: 244 23% 12%; --hsl-card-foreground: 0 0% 90.1961%;
232
+ --hsl-popover: 247 23% 21%; --hsl-popover-foreground: 0 0% 90.1961%;
233
233
  --hsl-primary: 246 54% 51%; --hsl-primary-foreground: 0 0% 100%;
234
- --hsl-secondary: 0 0% 20.7843%; --hsl-secondary-foreground: 0 0% 90.1961%;
235
- --hsl-muted: 0 0% 20.7843%; --hsl-muted-foreground: 0 0% 70.9804%;
236
- --hsl-accent: 0 0% 20.7843%; --hsl-accent-foreground: 0 0% 90.1961%;
234
+ --hsl-secondary: 249 24% 16%; --hsl-secondary-foreground: 0 0% 90.1961%;
235
+ --hsl-muted: 249 24% 16%; --hsl-muted-foreground: 240 5% 68%;
236
+ --hsl-accent: 249 24% 16%; --hsl-accent-foreground: 0 0% 90.1961%;
237
237
  --hsl-destructive: 348 74% 48%; --hsl-destructive-foreground: 0 0% 100%;
238
- --hsl-border: 0 0% 29.8039%; --hsl-input: 0 0% 12.1569%;
238
+ --hsl-border: 243 20% 20%; --hsl-input: 244 29% 9%;
239
239
  --hsl-ring: 233 100% 87%;
240
- --depth-1: #161616; --depth-2: #303030; --depth-3: #353535; --depth-4: #3b3b3b;
241
- --bg-root: #161616; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
242
- --md3-surface-container-lowest: #101010; --md3-surface-container-low: #242424;
243
- --md3-surface-container: #303030; --md3-surface-container-high: #353535;
244
- --md3-surface-container-highest: #3b3b3b; --md3-outline-variant: #4c4c4c;
240
+ --depth-1: #0a0a14; --depth-2: #191826; --depth-3: #221f33; --depth-4: #2c2942;
241
+ --bg-root: #0a0a14; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
242
+ --md3-surface-container-lowest: #050509; --md3-surface-container-low: #12111f;
243
+ --md3-surface-container: #191826; --md3-surface-container-high: #221f33;
244
+ --md3-surface-container-highest: #2c2942; --md3-outline-variant: #2a293d;
245
245
  --border-subtle: rgba(255, 255, 255, 0.10); --border-default: rgba(255, 255, 255, 0.16);
246
246
  --border-hover: rgba(255, 255, 255, 0.28); --accent-text: #A5B4FC;
247
247
  --brand-primary: #7C6CF6; --brand-glow: #A5AAFC;