@tangle-network/brand 1.16.0 → 1.17.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +2 -0
  3. package/bin/drift-baseline.json +130 -346
  4. package/bin/tangle-drift.mjs +1 -1
  5. package/dist/index.d.ts +172 -1
  6. package/dist/index.js +138 -1
  7. package/package.json +4 -3
  8. package/src/index.ts +1 -0
  9. package/src/palette.generated.ts +174 -0
  10. package/src/palette.test.ts +25 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.17.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 0325448: Lower the drift baseline for converged surfaces (website, creative, blueprint, browser, intelligence, sandbox, audits, GTM, builder), and scope the website surface to `src`.
8
+
9
+ ## 1.17.0
10
+
11
+ ### Minor Changes
12
+
13
+ - ffd18ec: `palettes` exports Brand's resolved colors (light, dark, websiteLight, websiteDark) for renderers that cannot read CSS variables, such as PDF, canvas, WebGL, email and the theme-color meta. `scripts/gen-palette.mjs` generates them from tokens.css and named-themes.css, and the build fails when they are stale.
14
+
3
15
  ## 1.16.0
4
16
 
5
17
  ### Minor Changes
package/README.md CHANGED
@@ -101,6 +101,8 @@ import { Logo, TangleKnot } from "@tangle-network/brand";
101
101
 
102
102
  ## Palette and typography
103
103
 
104
+ Renderers that cannot read CSS variables (PDF, canvas, WebGL, email, the `theme-color` meta) import `palettes` from `@tangle-network/brand`: resolved hex values for `light`, `dark`, `websiteLight` and `websiteDark`, generated from the stylesheets by `pnpm gen:palette`. Pages styled with CSS keep using the variables.
105
+
104
106
  The base surface ladder is the one GTM proved out: dark is indigo-lifted `#0a0a14` / `#191826` / `#221f33` / `#2c2942`; light is a cool `#eceef3` canvas, white paper cards and overlays, and `#f1f2f7` nested wells. The cast stays below 0.1 chroma and ink stays achromatic, so indigo still reads as the interaction accent, not the base field. Existing named products may supply deliberate surface overrides.
105
107
 
106
108
  Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Inter leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
package/bin/drift-baseline.json CHANGED
@@ -2,93 +2,46 @@
2
2
  "website": {
3
3
  "repo": "tangle-network/tangle-website",
4
4
  "roots": [
5
- ""
5
+ "src"
6
6
  ],
7
7
  "branch": "master",
8
- "head": "68e009e4579e",
9
- "tsx_files": 35,
10
- "css_files": 8,
8
+ "head": "7c991b524e52",
9
+ "tsx_files": 33,
10
+ "css_files": 5,
11
11
  "versions": {
12
12
  "brand": [
13
- "file:../brand/packages/brand"
13
+ "1.15.7"
14
14
  ],
15
15
  "ui": [
16
- "11.15.1"
16
+ "11.24.0"
17
17
  ]
18
18
  },
19
19
  "importing_files": {
20
20
  "brand": 0,
21
- "ui": 2,
21
+ "ui": 6,
22
22
  "sandbox-ui": 0,
23
23
  "agent-app": 0
24
24
  },
25
25
  "by_file": {
26
- "raw_palette": {
27
- "src/pages/releases.astro": 2,
28
- "src/pages/security.astro": 1,
29
- "src/pages/status.astro": 4
30
- },
26
+ "raw_palette": {},
31
27
  "hex": {
32
- ".evolve/multi-pursue/variants/linear_tier.astro": 32,
33
- ".evolve/multi-pursue/variants/overview_lifecycle.astro": 40,
34
- ".evolve/multi-pursue/variants/stripe_tier.astro": 87,
35
- "docs/delivery/2026-10-03/rejected-prototypes/style.css": 154,
36
- "docs/delivery/2026-10-03/rejected-prototypes/v2/fleet-stage.css": 30,
37
- "docs/delivery/2026-10-03/rejected-prototypes/v2/style.css": 217,
38
- "src/components/BenchmarkExplorer.astro": 1,
39
- "src/components/BlogCover.astro": 20,
40
- "src/components/Footer.astro": 24,
41
- "src/components/RunActions.astro": 28,
42
- "src/components/RunStory.astro": 24,
43
- "src/components/SandboxQuickstart.astro": 6,
44
- "src/components/quickstart-code.css": 33,
45
- "src/components/recorded-run-waterfall.css": 11,
46
28
  "src/layouts/BaseLayout.astro": 1,
47
- "src/layouts/BlogLayout.astro": 27,
48
- "src/pages/404.astro": 1,
49
- "src/pages/blog/index.astro": 7,
50
- "src/pages/blog/series/[series].astro": 9,
51
- "src/pages/brand-kit.astro": 38,
52
- "src/pages/index.astro": 59,
53
- "src/pages/what-is-tangle.astro": 24,
54
- "src/styles/global.css": 237
29
+ "src/pages/brand-kit.astro": 28
55
30
  },
56
31
  "arbitrary_color": {},
57
32
  "css_var_defs": {
58
- "src/components/quickstart-code.css": 27,
59
- "src/components/recorded-agent-timeline.css": 5,
60
- "src/components/recorded-run-waterfall.css": 9,
61
- "src/styles/global.css": 65
33
+ "src/components/quickstart-code.css": 4,
34
+ "src/components/recorded-agent-timeline.css": 4,
35
+ "src/components/recorded-run-waterfall.css": 9
62
36
  },
63
37
  "local_primitive_count": {}
64
38
  },
65
- "raw_palette": 7,
66
- "hex": 1110,
39
+ "raw_palette": 0,
40
+ "hex": 29,
67
41
  "arbitrary_color": 0,
68
- "css_var_defs": 106,
42
+ "css_var_defs": 17,
69
43
  "local_primitive_count": 0,
70
- "palette_top": [
71
- [
72
- "text-indigo-300",
73
- 3
74
- ],
75
- [
76
- "bg-indigo-300",
77
- 1
78
- ],
79
- [
80
- "text-emerald-300",
81
- 1
82
- ],
83
- [
84
- "text-indigo-200",
85
- 1
86
- ],
87
- [
88
- "text-red-300",
89
- 1
90
- ]
91
- ],
44
+ "palette_top": [],
92
45
  "local_primitives": {}
93
46
  },
94
47
  "sandbox": {
@@ -97,27 +50,27 @@
97
50
  "products/sandbox/web"
98
51
  ],
99
52
  "branch": "develop",
100
- "head": "014fd01e843e",
101
- "tsx_files": 129,
53
+ "head": "cd01e4f79f6a",
54
+ "tsx_files": 132,
102
55
  "css_files": 3,
103
56
  "versions": {
104
57
  "agent-app": [
105
58
  "0.53.4"
106
59
  ],
107
60
  "brand": [
108
- "1.10.1"
61
+ "1.10.3"
109
62
  ],
110
63
  "sandbox-ui": [
111
- "0.122.3"
64
+ "0.123.2"
112
65
  ],
113
66
  "ui": [
114
- "11.16.4"
67
+ "11.16.11"
115
68
  ]
116
69
  },
117
70
  "importing_files": {
118
71
  "brand": 0,
119
- "ui": 86,
120
- "sandbox-ui": 62,
72
+ "ui": 89,
73
+ "sandbox-ui": 63,
121
74
  "agent-app": 16
122
75
  },
123
76
  "by_file": {
@@ -125,32 +78,26 @@
125
78
  "hex": {
126
79
  "products/sandbox/web/src/components/landing/BuildUseCases.tsx": 4,
127
80
  "products/sandbox/web/src/components/landing/HeroTerminal.tsx": 7,
128
- "products/sandbox/web/src/globals.css": 62,
129
- "products/sandbox/web/src/pages/Landing.tsx": 1,
81
+ "products/sandbox/web/src/globals.css": 11,
130
82
  "products/sandbox/web/src/pages/dashboard/SandboxSession.tsx": 1,
131
83
  "products/sandbox/web/src/pages/dashboard/sandbox-session/TerminalTab.tsx": 9
132
84
  },
133
85
  "arbitrary_color": {
134
- "products/sandbox/web/src/components/landing/HeroTerminal.tsx": 1,
135
- "products/sandbox/web/src/pages/Landing.tsx": 1
86
+ "products/sandbox/web/src/components/landing/HeroTerminal.tsx": 1
136
87
  },
137
88
  "css_var_defs": {
138
- "products/sandbox/web/src/globals.css": 83,
89
+ "products/sandbox/web/src/globals.css": 61,
139
90
  "products/sandbox/web/src/pages/ApiReferencePage.css": 11
140
91
  },
141
- "local_primitive_count": {
142
- "products/sandbox/web/src/pages/dashboard/sandbox-session/session-chrome.tsx": 1
143
- }
92
+ "local_primitive_count": {}
144
93
  },
145
94
  "raw_palette": 0,
146
- "hex": 84,
147
- "arbitrary_color": 2,
148
- "css_var_defs": 94,
149
- "local_primitive_count": 1,
95
+ "hex": 32,
96
+ "arbitrary_color": 1,
97
+ "css_var_defs": 72,
98
+ "local_primitive_count": 0,
150
99
  "palette_top": [],
151
- "local_primitives": {
152
- "StatusBadge": 1
153
- }
100
+ "local_primitives": {}
154
101
  },
155
102
  "platform": {
156
103
  "repo": "tangle-network/agent-dev-container",
@@ -223,7 +170,7 @@
223
170
  "products/intelligence/web"
224
171
  ],
225
172
  "branch": "develop",
226
- "head": "014fd01e843e",
173
+ "head": "cd01e4f79f6a",
227
174
  "tsx_files": 83,
228
175
  "css_files": 1,
229
176
  "versions": {
@@ -242,61 +189,26 @@
242
189
  },
243
190
  "importing_files": {
244
191
  "brand": 0,
245
- "ui": 45,
246
- "sandbox-ui": 66,
192
+ "ui": 46,
193
+ "sandbox-ui": 65,
247
194
  "agent-app": 4
248
195
  },
249
196
  "by_file": {
250
- "raw_palette": {
251
- "products/intelligence/web/src/components/ConnectData.tsx": 5,
252
- "products/intelligence/web/src/components/DashboardLayout.tsx": 5,
253
- "products/intelligence/web/src/components/TraceTree.tsx": 4
254
- },
255
- "hex": {
256
- "products/intelligence/web/src/components/ConfidenceBar.tsx": 2,
257
- "products/intelligence/web/src/components/OptimizationLineage.tsx": 2,
258
- "products/intelligence/web/src/components/provider-identity.tsx": 96,
259
- "products/intelligence/web/src/components/ui.tsx": 1,
260
- "products/intelligence/web/src/globals.css": 15
261
- },
197
+ "raw_palette": {},
198
+ "hex": {},
262
199
  "arbitrary_color": {},
263
200
  "css_var_defs": {
264
- "products/intelligence/web/src/globals.css": 35
201
+ "products/intelligence/web/src/globals.css": 12
265
202
  },
266
- "local_primitive_count": {
267
- "products/intelligence/web/src/components/ui.tsx": 1
268
- }
203
+ "local_primitive_count": {}
269
204
  },
270
- "raw_palette": 14,
271
- "hex": 116,
205
+ "raw_palette": 0,
206
+ "hex": 0,
272
207
  "arbitrary_color": 0,
273
- "css_var_defs": 35,
274
- "local_primitive_count": 1,
275
- "palette_top": [
276
- [
277
- "bg-amber-500",
278
- 5
279
- ],
280
- [
281
- "border-amber-500",
282
- 3
283
- ],
284
- [
285
- "text-amber-400",
286
- 3
287
- ],
288
- [
289
- "text-amber-600",
290
- 2
291
- ],
292
- [
293
- "text-amber-700",
294
- 1
295
- ]
296
- ],
297
- "local_primitives": {
298
- "StatusBadge": 1
299
- }
208
+ "css_var_defs": 12,
209
+ "local_primitive_count": 0,
210
+ "palette_top": [],
211
+ "local_primitives": {}
300
212
  },
301
213
  "gtm": {
302
214
  "repo": "tangle-network/gtm-agent",
@@ -304,48 +216,42 @@
304
216
  ""
305
217
  ],
306
218
  "branch": "master",
307
- "head": "905258f9e5ea",
219
+ "head": "4d747cd68720",
308
220
  "tsx_files": 121,
309
221
  "css_files": 3,
310
222
  "versions": {
311
223
  "agent-app": [
312
- "0.53.12"
224
+ "0.57.0"
313
225
  ],
314
226
  "brand": [
315
- "1.11.0"
227
+ "1.17.0"
316
228
  ],
317
229
  "sandbox-ui": [
318
- "0.124.0"
230
+ "0.127.4"
319
231
  ],
320
232
  "ui": [
321
- "11.17.0"
233
+ "11.24.0"
322
234
  ]
323
235
  },
324
236
  "importing_files": {
325
- "brand": 0,
237
+ "brand": 3,
326
238
  "ui": 5,
327
239
  "sandbox-ui": 93,
328
- "agent-app": 176
240
+ "agent-app": 178
329
241
  },
330
242
  "by_file": {
331
243
  "raw_palette": {},
332
- "hex": {
333
- "src/app.css": 92,
334
- "src/components/chat-transcript.tsx": 1,
335
- "src/components/integration-logo.tsx": 1,
336
- "src/root.tsx": 4,
337
- "src/routes/app.workspace.chat.$threadId.tsx": 1
338
- },
244
+ "hex": {},
339
245
  "arbitrary_color": {},
340
246
  "css_var_defs": {
341
- "src/app.css": 177
247
+ "src/app.css": 58
342
248
  },
343
249
  "local_primitive_count": {}
344
250
  },
345
251
  "raw_palette": 0,
346
- "hex": 99,
252
+ "hex": 0,
347
253
  "arbitrary_color": 0,
348
- "css_var_defs": 177,
254
+ "css_var_defs": 58,
349
255
  "local_primitive_count": 0,
350
256
  "palette_top": [],
351
257
  "local_primitives": {}
@@ -456,45 +362,40 @@
456
362
  ""
457
363
  ],
458
364
  "branch": "master",
459
- "head": "4e1768d988bd",
365
+ "head": "42eb8446e1e9",
460
366
  "tsx_files": 54,
461
367
  "css_files": 1,
462
368
  "versions": {
463
369
  "agent-app": [
464
- "0.53.12"
370
+ "0.56.2"
465
371
  ],
466
372
  "brand": [
467
- "1.11.0"
373
+ "1.15.7"
468
374
  ],
469
375
  "sandbox-ui": [
470
- "0.124.0"
376
+ "0.127.4"
471
377
  ],
472
378
  "ui": [
473
- "11.17.0"
379
+ "11.24.0"
474
380
  ]
475
381
  },
476
382
  "importing_files": {
477
383
  "brand": 1,
478
384
  "ui": 0,
479
385
  "sandbox-ui": 33,
480
- "agent-app": 116
386
+ "agent-app": 119
481
387
  },
482
388
  "by_file": {
483
389
  "raw_palette": {},
484
- "hex": {
485
- "src/app.css": 268,
486
- "src/root.tsx": 4
487
- },
390
+ "hex": {},
488
391
  "arbitrary_color": {},
489
- "css_var_defs": {
490
- "src/app.css": 337
491
- },
392
+ "css_var_defs": {},
492
393
  "local_primitive_count": {}
493
394
  },
494
395
  "raw_palette": 0,
495
- "hex": 272,
396
+ "hex": 0,
496
397
  "arbitrary_color": 0,
497
- "css_var_defs": 337,
398
+ "css_var_defs": 0,
498
399
  "local_primitive_count": 0,
499
400
  "palette_top": [],
500
401
  "local_primitives": {}
@@ -604,99 +505,39 @@
604
505
  "packages/website"
605
506
  ],
606
507
  "branch": "main",
607
- "head": "4c65033a1a89",
608
- "tsx_files": 29,
609
- "css_files": 2,
508
+ "head": "af6c5106a02e",
509
+ "tsx_files": 26,
510
+ "css_files": 1,
610
511
  "versions": {
512
+ "brand": [
513
+ "1.17.0"
514
+ ],
611
515
  "sandbox-ui": [
612
- "0.113.3"
516
+ "0.127.4"
517
+ ],
518
+ "ui": [
519
+ "11.25.0"
613
520
  ]
614
521
  },
615
522
  "importing_files": {
616
- "brand": 0,
523
+ "brand": 1,
617
524
  "ui": 0,
618
- "sandbox-ui": 15,
525
+ "sandbox-ui": 19,
619
526
  "agent-app": 0
620
527
  },
621
528
  "by_file": {
622
- "raw_palette": {
623
- "packages/website/src/components/AuditProgress.tsx": 50,
624
- "packages/website/src/components/AuditReportsList.tsx": 10,
625
- "packages/website/src/components/CodeEditor.tsx": 14,
626
- "packages/website/src/components/ui/AnimatedTerminal.tsx": 2,
627
- "packages/website/src/components/ui/SectionHeader.tsx": 1,
628
- "packages/website/src/components/ui/terminalDemos.ts": 11,
629
- "packages/website/src/pages/AuditReport.tsx": 18,
630
- "packages/website/src/pages/Dashboard.tsx": 3,
631
- "packages/website/src/pages/GitHubSetup.tsx": 2,
632
- "packages/website/src/pages/NewAudit.tsx": 1,
633
- "packages/website/src/pages/SampleAuditReport.tsx": 14
634
- },
635
- "hex": {
636
- "packages/website/src/WebsiteRoutes.tsx": 1,
637
- "packages/website/src/components/AuditPDF.tsx": 58,
638
- "packages/website/src/components/AuditProgress.tsx": 13,
639
- "packages/website/src/components/CodeEditor.tsx": 6,
640
- "packages/website/src/components/ui/AnimatedTerminal.tsx": 5,
641
- "packages/website/src/components/ui/SectionHeader.tsx": 1,
642
- "packages/website/src/components/ui/SpotlightCard.tsx": 2,
643
- "packages/website/src/index.css": 14,
644
- "packages/website/src/pages/SampleAuditReport.tsx": 11
645
- },
646
- "arbitrary_color": {
647
- "packages/website/src/WebsiteRoutes.tsx": 1,
648
- "packages/website/src/components/AuditProgress.tsx": 13,
649
- "packages/website/src/components/AuditReportsList.tsx": 4,
650
- "packages/website/src/components/CodeEditor.tsx": 6,
651
- "packages/website/src/components/RedteamDashboardLayout.tsx": 5,
652
- "packages/website/src/components/ui/AnimatedTerminal.tsx": 5,
653
- "packages/website/src/components/ui/SectionHeader.tsx": 1,
654
- "packages/website/src/components/ui/SpotlightCard.tsx": 2,
655
- "packages/website/src/components/ui/terminalDemos.ts": 15,
656
- "packages/website/src/pages/AuditReport.tsx": 10,
657
- "packages/website/src/pages/AuthCallback.tsx": 3,
658
- "packages/website/src/pages/Dashboard.tsx": 4,
659
- "packages/website/src/pages/GitHubSetup.tsx": 1,
660
- "packages/website/src/pages/NewAudit.tsx": 8,
661
- "packages/website/src/pages/SampleAuditReport.tsx": 10,
662
- "packages/website/src/pages/_Preview.tsx": 1
663
- },
664
- "css_var_defs": {
665
- "packages/website/src/index.css": 11
666
- },
529
+ "raw_palette": {},
530
+ "hex": {},
531
+ "arbitrary_color": {},
532
+ "css_var_defs": {},
667
533
  "local_primitive_count": {}
668
534
  },
669
- "raw_palette": 126,
670
- "hex": 111,
671
- "arbitrary_color": 89,
672
- "css_var_defs": 11,
535
+ "raw_palette": 0,
536
+ "hex": 0,
537
+ "arbitrary_color": 0,
538
+ "css_var_defs": 0,
673
539
  "local_primitive_count": 0,
674
- "palette_top": [
675
- [
676
- "bg-red-500",
677
- 10
678
- ],
679
- [
680
- "text-neutral-400",
681
- 9
682
- ],
683
- [
684
- "text-neutral-500",
685
- 9
686
- ],
687
- [
688
- "bg-emerald-500",
689
- 8
690
- ],
691
- [
692
- "bg-neutral-800",
693
- 6
694
- ],
695
- [
696
- "border-red-500",
697
- 6
698
- ]
699
- ],
540
+ "palette_top": [],
700
541
  "local_primitives": {}
701
542
  },
702
543
  "browser": {
@@ -705,91 +546,44 @@
705
546
  ""
706
547
  ],
707
548
  "branch": "main",
708
- "head": "2ed27c21fdd1",
709
- "tsx_files": 63,
549
+ "head": "dd7f9dfefa53",
550
+ "tsx_files": 43,
710
551
  "css_files": 1,
711
552
  "versions": {
712
553
  "agent-app": [
713
- "^0.45.26"
554
+ "^0.55.5"
714
555
  ],
715
556
  "brand": [
716
- "^1.1.0"
557
+ "^1.15.6"
717
558
  ],
718
559
  "sandbox-ui": [
719
- "^0.85.1"
560
+ "^0.127.4"
720
561
  ],
721
562
  "ui": [
722
- "^11.0.0"
563
+ "^11.24.0"
723
564
  ]
724
565
  },
725
566
  "importing_files": {
726
567
  "brand": 0,
727
- "ui": 0,
728
- "sandbox-ui": 4,
568
+ "ui": 41,
569
+ "sandbox-ui": 0,
729
570
  "agent-app": 0
730
571
  },
731
572
  "by_file": {
732
- "raw_palette": {
733
- "src/components/terminal-snippet.tsx": 18,
734
- "src/components/ui/device-frame.tsx": 10,
735
- "src/pages/analytics.tsx": 15
736
- },
737
- "hex": {
738
- "src/index.css": 14,
739
- "src/pages/analytics.tsx": 26
740
- },
741
- "arbitrary_color": {
742
- "src/components/chat/chat-panel.tsx": 3,
743
- "src/components/runs/run-list.tsx": 1,
744
- "src/components/ui/badge.tsx": 7,
745
- "src/components/visual-diff-viewer.tsx": 4,
746
- "src/pages/billing.tsx": 3,
747
- "src/pages/ci-cd.tsx": 2,
748
- "src/pages/dashboard.tsx": 1,
749
- "src/pages/login.tsx": 1,
750
- "src/pages/run-detail.tsx": 1,
751
- "src/pages/settings.tsx": 3,
752
- "src/pages/test-suites.tsx": 3,
753
- "src/pages/walkthrough-new.tsx": 1,
754
- "src/pages/walkthroughs.tsx": 7,
755
- "src/pages/workflows.tsx": 6
756
- },
573
+ "raw_palette": {},
574
+ "hex": {},
575
+ "arbitrary_color": {},
757
576
  "css_var_defs": {
758
- "src/index.css": 45
577
+ "src/index.css": 1
759
578
  },
760
579
  "local_primitive_count": {}
761
580
  },
762
- "raw_palette": 43,
763
- "hex": 40,
764
- "arbitrary_color": 43,
765
- "css_var_defs": 45,
581
+ "raw_palette": 0,
582
+ "hex": 0,
583
+ "arbitrary_color": 0,
584
+ "css_var_defs": 1,
766
585
  "local_primitive_count": 0,
767
- "palette_top": [
768
- [
769
- "text-green-400",
770
- 7
771
- ],
772
- [
773
- "text-neutral-300",
774
- 3
775
- ],
776
- [
777
- "text-red-400",
778
- 3
779
- ],
780
- [
781
- "bg-zinc-600",
782
- 2
783
- ],
784
- [
785
- "border-zinc-500",
786
- 2
787
- ],
788
- [
789
- "border-zinc-700",
790
- 2
791
- ]
792
- ],
586
+ "palette_top": [],
793
587
  "local_primitives": {}
794
588
  },
795
589
  "builder": {
@@ -798,52 +592,50 @@
798
592
  ""
799
593
  ],
800
594
  "branch": "main",
801
- "head": "305f99a0b46e",
595
+ "head": "37adcfb5478f",
802
596
  "tsx_files": 97,
803
597
  "css_files": 2,
804
598
  "versions": {
805
599
  "agent-app": [
806
- "0.53.14"
600
+ "0.57.2"
807
601
  ],
808
602
  "brand": [
809
- "1.13.0"
603
+ "1.17.0"
810
604
  ],
811
605
  "override:agent-app": [
812
- "0.53.14"
606
+ "0.57.2"
813
607
  ],
814
608
  "override:brand": [
815
- "1.13.0"
609
+ "1.17.0"
816
610
  ],
817
611
  "override:sandbox-ui": [
818
- "0.125.3"
612
+ "0.127.4"
819
613
  ],
820
614
  "override:ui": [
821
- "11.19.0"
615
+ "11.24.0"
822
616
  ],
823
617
  "sandbox-ui": [
824
- "0.125.3"
618
+ "0.127.4"
825
619
  ],
826
620
  "ui": [
827
- "11.19.0"
621
+ "11.24.0"
828
622
  ]
829
623
  },
830
624
  "importing_files": {
831
- "brand": 1,
832
- "ui": 6,
833
- "sandbox-ui": 33,
625
+ "brand": 2,
626
+ "ui": 7,
627
+ "sandbox-ui": 51,
834
628
  "agent-app": 51
835
629
  },
836
630
  "by_file": {
837
631
  "raw_palette": {},
838
- "hex": {
839
- "src/root.tsx": 2
840
- },
632
+ "hex": {},
841
633
  "arbitrary_color": {},
842
634
  "css_var_defs": {},
843
635
  "local_primitive_count": {}
844
636
  },
845
637
  "raw_palette": 0,
846
- "hex": 2,
638
+ "hex": 0,
847
639
  "arbitrary_color": 0,
848
640
  "css_var_defs": 0,
849
641
  "local_primitive_count": 0,
@@ -856,48 +648,40 @@
856
648
  "apps/web"
857
649
  ],
858
650
  "branch": "develop",
859
- "head": "92ab705d1313",
860
- "tsx_files": 357,
861
- "css_files": 2,
651
+ "head": "0c8c52fcfb7f",
652
+ "tsx_files": 356,
653
+ "css_files": 9,
862
654
  "versions": {
863
655
  "agent-app": [
864
- "0.53.17"
656
+ "0.56.2"
865
657
  ],
866
658
  "brand": [
867
- "^1.15.2"
659
+ "^1.15.7"
868
660
  ],
869
661
  "sandbox-ui": [
870
- "0.125.3"
662
+ "0.127.4"
871
663
  ],
872
664
  "ui": [
873
- "^11.21.0"
665
+ "^11.24.0"
874
666
  ]
875
667
  },
876
668
  "importing_files": {
877
669
  "brand": 0,
878
670
  "ui": 184,
879
671
  "sandbox-ui": 3,
880
- "agent-app": 3
672
+ "agent-app": 4
881
673
  },
882
674
  "by_file": {
883
675
  "raw_palette": {},
884
676
  "hex": {},
885
- "arbitrary_color": {
886
- "apps/web/src/config/partners/data-balancer.ts": 8,
887
- "apps/web/src/config/partners/data-coinbase.ts": 8,
888
- "apps/web/src/config/partners/data-dspy.ts": 9,
889
- "apps/web/src/config/partners/data-injective.ts": 9,
890
- "apps/web/src/config/partners/data-starknet.ts": 11
891
- },
892
- "css_var_defs": {
893
- "apps/web/src/components/blur-fade/fade.module.css": 2
894
- },
677
+ "arbitrary_color": {},
678
+ "css_var_defs": {},
895
679
  "local_primitive_count": {}
896
680
  },
897
681
  "raw_palette": 0,
898
682
  "hex": 0,
899
- "arbitrary_color": 45,
900
- "css_var_defs": 2,
683
+ "arbitrary_color": 0,
684
+ "css_var_defs": 0,
901
685
  "local_primitive_count": 0,
902
686
  "palette_top": [],
903
687
  "local_primitives": {}
package/bin/tangle-drift.mjs CHANGED
@@ -25,7 +25,7 @@ export const DEFAULT_BASELINE = fileURLToPath(new URL("./drift-baseline.json", i
25
25
 
26
26
  /** surface → GitHub repository and web roots. The default branch is resolved from the remote. */
27
27
  export const SURFACES = {
28
- website: { repo: "tangle-network/tangle-website", roots: [""] },
28
+ website: { repo: "tangle-network/tangle-website", roots: ["src"] },
29
29
  sandbox: { repo: "tangle-network/agent-dev-container", roots: ["products/sandbox/web"] },
30
30
  platform: { repo: "tangle-network/agent-dev-container", roots: ["products/platform/web"] },
31
31
  intelligence: { repo: "tangle-network/agent-dev-container", roots: ["products/intelligence/web"] },
package/dist/index.d.ts CHANGED
@@ -12,4 +12,175 @@ export declare function TangleKnot({ size, className }: {
12
12
  }): React.JSX.Element;
13
13
  export declare function Logo({ size, variant, suffix, className }: LogoProps): React.JSX.Element;
14
14
  //#endregion
15
- export type { LogoProps };
15
+ //#region src/palette.generated.d.ts
16
+ /** A theme's resolved roles: hex strings, or rgba() where the token is translucent. */
17
+ interface BrandPalette {
18
+ canvas: string;
19
+ card: string;
20
+ well: string;
21
+ nested: string;
22
+ overlay: string;
23
+ deepest: string;
24
+ hairline: string;
25
+ ink: string;
26
+ inkSecondary: string;
27
+ inkMuted: string;
28
+ accent: string;
29
+ accentHover: string;
30
+ onAccent: string;
31
+ accentText: string;
32
+ danger: string;
33
+ successBg: string;
34
+ successBorder: string;
35
+ successText: string;
36
+ warningBg: string;
37
+ warningBorder: string;
38
+ warningText: string;
39
+ dangerBg: string;
40
+ dangerBorder: string;
41
+ dangerText: string;
42
+ infoBg: string;
43
+ infoBorder: string;
44
+ infoText: string;
45
+ brandVibrant: string;
46
+ brandCool: string;
47
+ brandGlow: string;
48
+ brandPurple: string;
49
+ }
50
+ /** Resolved palettes for the canonical light and dark themes and the website named theme. */
51
+ export declare const palettes: {
52
+ readonly light: {
53
+ readonly canvas: "#eceef3";
54
+ readonly card: "#ffffff";
55
+ readonly well: "#f6f7fa";
56
+ readonly nested: "#f1f2f7";
57
+ readonly overlay: "#ffffff";
58
+ readonly deepest: "#ffffff";
59
+ readonly hairline: "#c7c6d6";
60
+ readonly ink: "#2d2d2d";
61
+ readonly inkSecondary: "#3f3f3f";
62
+ readonly inkMuted: "#4c4c4c";
63
+ readonly accent: "#4c3fc5";
64
+ readonly accentHover: "#5a50d6";
65
+ readonly onAccent: "#ffffff";
66
+ readonly accentText: "#3c32e9";
67
+ readonly danger: "#b41d1d";
68
+ readonly successBg: "#ecfdf5";
69
+ readonly successBorder: "#a7f3d0";
70
+ readonly successText: "#047857";
71
+ readonly warningBg: "#fffbeb";
72
+ readonly warningBorder: "#fde68a";
73
+ readonly warningText: "#ab4f09";
74
+ readonly dangerBg: "#fff1f2";
75
+ readonly dangerBorder: "#fecdd3";
76
+ readonly dangerText: "#b91c1c";
77
+ readonly infoBg: "#f0f9ff";
78
+ readonly infoBorder: "#bae6fd";
79
+ readonly infoText: "#0369a1";
80
+ readonly brandVibrant: "#6366f1";
81
+ readonly brandCool: "#818cf8";
82
+ readonly brandGlow: "#a5aafc";
83
+ readonly brandPurple: "#6366f1";
84
+ };
85
+ readonly dark: {
86
+ readonly canvas: "#0a0a14";
87
+ readonly card: "#191826";
88
+ readonly well: "#12111f";
89
+ readonly nested: "#221f33";
90
+ readonly overlay: "#2c2942";
91
+ readonly deepest: "#050509";
92
+ readonly hairline: "#2a293d";
93
+ readonly ink: "#e6e6e6";
94
+ readonly inkSecondary: "#c7c7c7";
95
+ readonly inkMuted: "#b5b5b5";
96
+ readonly accent: "#4c3fc5";
97
+ readonly accentHover: "#5a50d6";
98
+ readonly onAccent: "#ffffff";
99
+ readonly accentText: "#a5b4fc";
100
+ readonly danger: "#d52044";
101
+ readonly successBg: "#2f5146";
102
+ readonly successBorder: "#3c7760";
103
+ readonly successText: "#5ed7a4";
104
+ readonly warningBg: "#4b4232";
105
+ readonly warningBorder: "#7a6236";
106
+ readonly warningText: "#f4c14f";
107
+ readonly dangerBg: "#5a3b40";
108
+ readonly dangerBorder: "#7d4d53";
109
+ readonly dangerText: "#ffada9";
110
+ readonly infoBg: "#2d4e67";
111
+ readonly infoBorder: "#3d7292";
112
+ readonly infoText: "#67cdff";
113
+ readonly brandVibrant: "#6366f1";
114
+ readonly brandCool: "#818cf8";
115
+ readonly brandGlow: "#a5aafc";
116
+ readonly brandPurple: "#c7d2fe";
117
+ };
118
+ readonly websiteLight: {
119
+ readonly canvas: "#f5f5fb";
120
+ readonly card: "#ffffff";
121
+ readonly well: "#fafafd";
122
+ readonly nested: "#ececf6";
123
+ readonly overlay: "#ffffff";
124
+ readonly deepest: "#ffffff";
125
+ readonly hairline: "#dbdbea";
126
+ readonly ink: "#191c24";
127
+ readonly inkSecondary: "#3a3a50";
128
+ readonly inkMuted: "#5e5e7a";
129
+ readonly accent: "#4c3fc5";
130
+ readonly accentHover: "#5a50d6";
131
+ readonly onAccent: "#ffffff";
132
+ readonly accentText: "#3c32e9";
133
+ readonly danger: "#b41d1d";
134
+ readonly successBg: "#ecfdf5";
135
+ readonly successBorder: "#a7f3d0";
136
+ readonly successText: "#047857";
137
+ readonly warningBg: "#fffbeb";
138
+ readonly warningBorder: "#fde68a";
139
+ readonly warningText: "#ab4f09";
140
+ readonly dangerBg: "#fff1f2";
141
+ readonly dangerBorder: "#fecdd3";
142
+ readonly dangerText: "#b91c1c";
143
+ readonly infoBg: "#f0f9ff";
144
+ readonly infoBorder: "#bae6fd";
145
+ readonly infoText: "#0369a1";
146
+ readonly brandVibrant: "#6366f1";
147
+ readonly brandCool: "#818cf8";
148
+ readonly brandGlow: "#a5aafc";
149
+ readonly brandPurple: "#6366f1";
150
+ };
151
+ readonly websiteDark: {
152
+ readonly canvas: "#0c0b1d";
153
+ readonly card: "#1d1b38";
154
+ readonly well: "#141328";
155
+ readonly nested: "#222041";
156
+ readonly overlay: "#262448";
157
+ readonly deepest: "#080814";
158
+ readonly hairline: "#33315f";
159
+ readonly ink: "#fdfdfd";
160
+ readonly inkSecondary: "#aaa8b8";
161
+ readonly inkMuted: "#9496bc";
162
+ readonly accent: "#4c3fc5";
163
+ readonly accentHover: "#5a50d6";
164
+ readonly onAccent: "#ffffff";
165
+ readonly accentText: "#a5b4fc";
166
+ readonly danger: "#d52044";
167
+ readonly successBg: "#2f5146";
168
+ readonly successBorder: "#3c7760";
169
+ readonly successText: "#5ed7a4";
170
+ readonly warningBg: "#4b4232";
171
+ readonly warningBorder: "#7a6236";
172
+ readonly warningText: "#f4c14f";
173
+ readonly dangerBg: "#5a3b40";
174
+ readonly dangerBorder: "#7d4d53";
175
+ readonly dangerText: "#ffada9";
176
+ readonly infoBg: "#2d4e67";
177
+ readonly infoBorder: "#3d7292";
178
+ readonly infoText: "#67cdff";
179
+ readonly brandVibrant: "#6366f1";
180
+ readonly brandCool: "#818cf8";
181
+ readonly brandGlow: "#a5aafc";
182
+ readonly brandPurple: "#c7d2fe";
183
+ };
184
+ };
185
+ //#endregion
186
+ export type { BrandPalette, LogoProps };
package/dist/index.js CHANGED
@@ -105,4 +105,141 @@ function Logo({ size = "md", variant = "full", suffix = null, className }) {
105
105
  });
106
106
  }
107
107
  //#endregion
108
- export { Logo, TangleKnot };
108
+ //#region src/palette.generated.ts
109
+ /** Resolved palettes for the canonical light and dark themes and the website named theme. */
110
+ const palettes = {
111
+ light: {
112
+ canvas: "#eceef3",
113
+ card: "#ffffff",
114
+ well: "#f6f7fa",
115
+ nested: "#f1f2f7",
116
+ overlay: "#ffffff",
117
+ deepest: "#ffffff",
118
+ hairline: "#c7c6d6",
119
+ ink: "#2d2d2d",
120
+ inkSecondary: "#3f3f3f",
121
+ inkMuted: "#4c4c4c",
122
+ accent: "#4c3fc5",
123
+ accentHover: "#5a50d6",
124
+ onAccent: "#ffffff",
125
+ accentText: "#3c32e9",
126
+ danger: "#b41d1d",
127
+ successBg: "#ecfdf5",
128
+ successBorder: "#a7f3d0",
129
+ successText: "#047857",
130
+ warningBg: "#fffbeb",
131
+ warningBorder: "#fde68a",
132
+ warningText: "#ab4f09",
133
+ dangerBg: "#fff1f2",
134
+ dangerBorder: "#fecdd3",
135
+ dangerText: "#b91c1c",
136
+ infoBg: "#f0f9ff",
137
+ infoBorder: "#bae6fd",
138
+ infoText: "#0369a1",
139
+ brandVibrant: "#6366f1",
140
+ brandCool: "#818cf8",
141
+ brandGlow: "#a5aafc",
142
+ brandPurple: "#6366f1"
143
+ },
144
+ dark: {
145
+ canvas: "#0a0a14",
146
+ card: "#191826",
147
+ well: "#12111f",
148
+ nested: "#221f33",
149
+ overlay: "#2c2942",
150
+ deepest: "#050509",
151
+ hairline: "#2a293d",
152
+ ink: "#e6e6e6",
153
+ inkSecondary: "#c7c7c7",
154
+ inkMuted: "#b5b5b5",
155
+ accent: "#4c3fc5",
156
+ accentHover: "#5a50d6",
157
+ onAccent: "#ffffff",
158
+ accentText: "#a5b4fc",
159
+ danger: "#d52044",
160
+ successBg: "#2f5146",
161
+ successBorder: "#3c7760",
162
+ successText: "#5ed7a4",
163
+ warningBg: "#4b4232",
164
+ warningBorder: "#7a6236",
165
+ warningText: "#f4c14f",
166
+ dangerBg: "#5a3b40",
167
+ dangerBorder: "#7d4d53",
168
+ dangerText: "#ffada9",
169
+ infoBg: "#2d4e67",
170
+ infoBorder: "#3d7292",
171
+ infoText: "#67cdff",
172
+ brandVibrant: "#6366f1",
173
+ brandCool: "#818cf8",
174
+ brandGlow: "#a5aafc",
175
+ brandPurple: "#c7d2fe"
176
+ },
177
+ websiteLight: {
178
+ canvas: "#f5f5fb",
179
+ card: "#ffffff",
180
+ well: "#fafafd",
181
+ nested: "#ececf6",
182
+ overlay: "#ffffff",
183
+ deepest: "#ffffff",
184
+ hairline: "#dbdbea",
185
+ ink: "#191c24",
186
+ inkSecondary: "#3a3a50",
187
+ inkMuted: "#5e5e7a",
188
+ accent: "#4c3fc5",
189
+ accentHover: "#5a50d6",
190
+ onAccent: "#ffffff",
191
+ accentText: "#3c32e9",
192
+ danger: "#b41d1d",
193
+ successBg: "#ecfdf5",
194
+ successBorder: "#a7f3d0",
195
+ successText: "#047857",
196
+ warningBg: "#fffbeb",
197
+ warningBorder: "#fde68a",
198
+ warningText: "#ab4f09",
199
+ dangerBg: "#fff1f2",
200
+ dangerBorder: "#fecdd3",
201
+ dangerText: "#b91c1c",
202
+ infoBg: "#f0f9ff",
203
+ infoBorder: "#bae6fd",
204
+ infoText: "#0369a1",
205
+ brandVibrant: "#6366f1",
206
+ brandCool: "#818cf8",
207
+ brandGlow: "#a5aafc",
208
+ brandPurple: "#6366f1"
209
+ },
210
+ websiteDark: {
211
+ canvas: "#0c0b1d",
212
+ card: "#1d1b38",
213
+ well: "#141328",
214
+ nested: "#222041",
215
+ overlay: "#262448",
216
+ deepest: "#080814",
217
+ hairline: "#33315f",
218
+ ink: "#fdfdfd",
219
+ inkSecondary: "#aaa8b8",
220
+ inkMuted: "#9496bc",
221
+ accent: "#4c3fc5",
222
+ accentHover: "#5a50d6",
223
+ onAccent: "#ffffff",
224
+ accentText: "#a5b4fc",
225
+ danger: "#d52044",
226
+ successBg: "#2f5146",
227
+ successBorder: "#3c7760",
228
+ successText: "#5ed7a4",
229
+ warningBg: "#4b4232",
230
+ warningBorder: "#7a6236",
231
+ warningText: "#f4c14f",
232
+ dangerBg: "#5a3b40",
233
+ dangerBorder: "#7d4d53",
234
+ dangerText: "#ffada9",
235
+ infoBg: "#2d4e67",
236
+ infoBorder: "#3d7292",
237
+ infoText: "#67cdff",
238
+ brandVibrant: "#6366f1",
239
+ brandCool: "#818cf8",
240
+ brandGlow: "#a5aafc",
241
+ brandPurple: "#c7d2fe"
242
+ }
243
+ };
244
+ //#endregion
245
+ export { Logo, TangleKnot, palettes };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/brand",
3
- "version": "1.16.0",
3
+ "version": "1.17.1",
4
4
  "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -69,11 +69,12 @@
69
69
  "tailwind"
70
70
  ],
71
71
  "scripts": {
72
- "build": "node scripts/gen-ladders.mjs --check && node scripts/gen-compat.mjs --check && tsdown",
72
+ "build": "node scripts/gen-ladders.mjs --check && node scripts/gen-compat.mjs --check && node scripts/gen-palette.mjs --check && tsdown",
73
73
  "gen:ladders": "node scripts/gen-ladders.mjs",
74
74
  "gen:compat": "node scripts/gen-compat.mjs",
75
75
  "check:compat": "node scripts/gen-ladders.mjs --check && node scripts/gen-compat.mjs --check && node --test scripts/gen-compat.test.mjs",
76
76
  "check:drift": "node --test scripts/tangle-drift.test.mjs",
77
- "dev": "tsdown --watch"
77
+ "dev": "tsdown --watch",
78
+ "gen:palette": "node scripts/gen-palette.mjs"
78
79
  }
79
80
  }
package/src/index.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { Logo, TangleKnot, type LogoProps } from "./logo.js";
2
+ export { palettes, type BrandPalette } from "./palette.generated.js";
package/src/palette.generated.ts ADDED
@@ -0,0 +1,174 @@
1
+ // GENERATED by scripts/gen-palette.mjs from tokens.css and named-themes.css; do not edit.
2
+ // Brand's resolved colors for renderers that cannot read CSS variables: PDF, canvas,
3
+ // WebGL, email and the theme-color meta. Pages styled with CSS use the variables.
4
+
5
+ /** A theme's resolved roles: hex strings, or rgba() where the token is translucent. */
6
+ export interface BrandPalette {
7
+ canvas: string;
8
+ card: string;
9
+ well: string;
10
+ nested: string;
11
+ overlay: string;
12
+ deepest: string;
13
+ hairline: string;
14
+ ink: string;
15
+ inkSecondary: string;
16
+ inkMuted: string;
17
+ accent: string;
18
+ accentHover: string;
19
+ onAccent: string;
20
+ accentText: string;
21
+ danger: string;
22
+ successBg: string;
23
+ successBorder: string;
24
+ successText: string;
25
+ warningBg: string;
26
+ warningBorder: string;
27
+ warningText: string;
28
+ dangerBg: string;
29
+ dangerBorder: string;
30
+ dangerText: string;
31
+ infoBg: string;
32
+ infoBorder: string;
33
+ infoText: string;
34
+ brandVibrant: string;
35
+ brandCool: string;
36
+ brandGlow: string;
37
+ brandPurple: string;
38
+ }
39
+
40
+ /** Resolved palettes for the canonical light and dark themes and the website named theme. */
41
+ export const palettes = {
42
+ light: {
43
+ canvas: "#eceef3",
44
+ card: "#ffffff",
45
+ well: "#f6f7fa",
46
+ nested: "#f1f2f7",
47
+ overlay: "#ffffff",
48
+ deepest: "#ffffff",
49
+ hairline: "#c7c6d6",
50
+ ink: "#2d2d2d",
51
+ inkSecondary: "#3f3f3f",
52
+ inkMuted: "#4c4c4c",
53
+ accent: "#4c3fc5",
54
+ accentHover: "#5a50d6",
55
+ onAccent: "#ffffff",
56
+ accentText: "#3c32e9",
57
+ danger: "#b41d1d",
58
+ successBg: "#ecfdf5",
59
+ successBorder: "#a7f3d0",
60
+ successText: "#047857",
61
+ warningBg: "#fffbeb",
62
+ warningBorder: "#fde68a",
63
+ warningText: "#ab4f09",
64
+ dangerBg: "#fff1f2",
65
+ dangerBorder: "#fecdd3",
66
+ dangerText: "#b91c1c",
67
+ infoBg: "#f0f9ff",
68
+ infoBorder: "#bae6fd",
69
+ infoText: "#0369a1",
70
+ brandVibrant: "#6366f1",
71
+ brandCool: "#818cf8",
72
+ brandGlow: "#a5aafc",
73
+ brandPurple: "#6366f1",
74
+ },
75
+ dark: {
76
+ canvas: "#0a0a14",
77
+ card: "#191826",
78
+ well: "#12111f",
79
+ nested: "#221f33",
80
+ overlay: "#2c2942",
81
+ deepest: "#050509",
82
+ hairline: "#2a293d",
83
+ ink: "#e6e6e6",
84
+ inkSecondary: "#c7c7c7",
85
+ inkMuted: "#b5b5b5",
86
+ accent: "#4c3fc5",
87
+ accentHover: "#5a50d6",
88
+ onAccent: "#ffffff",
89
+ accentText: "#a5b4fc",
90
+ danger: "#d52044",
91
+ successBg: "#2f5146",
92
+ successBorder: "#3c7760",
93
+ successText: "#5ed7a4",
94
+ warningBg: "#4b4232",
95
+ warningBorder: "#7a6236",
96
+ warningText: "#f4c14f",
97
+ dangerBg: "#5a3b40",
98
+ dangerBorder: "#7d4d53",
99
+ dangerText: "#ffada9",
100
+ infoBg: "#2d4e67",
101
+ infoBorder: "#3d7292",
102
+ infoText: "#67cdff",
103
+ brandVibrant: "#6366f1",
104
+ brandCool: "#818cf8",
105
+ brandGlow: "#a5aafc",
106
+ brandPurple: "#c7d2fe",
107
+ },
108
+ websiteLight: {
109
+ canvas: "#f5f5fb",
110
+ card: "#ffffff",
111
+ well: "#fafafd",
112
+ nested: "#ececf6",
113
+ overlay: "#ffffff",
114
+ deepest: "#ffffff",
115
+ hairline: "#dbdbea",
116
+ ink: "#191c24",
117
+ inkSecondary: "#3a3a50",
118
+ inkMuted: "#5e5e7a",
119
+ accent: "#4c3fc5",
120
+ accentHover: "#5a50d6",
121
+ onAccent: "#ffffff",
122
+ accentText: "#3c32e9",
123
+ danger: "#b41d1d",
124
+ successBg: "#ecfdf5",
125
+ successBorder: "#a7f3d0",
126
+ successText: "#047857",
127
+ warningBg: "#fffbeb",
128
+ warningBorder: "#fde68a",
129
+ warningText: "#ab4f09",
130
+ dangerBg: "#fff1f2",
131
+ dangerBorder: "#fecdd3",
132
+ dangerText: "#b91c1c",
133
+ infoBg: "#f0f9ff",
134
+ infoBorder: "#bae6fd",
135
+ infoText: "#0369a1",
136
+ brandVibrant: "#6366f1",
137
+ brandCool: "#818cf8",
138
+ brandGlow: "#a5aafc",
139
+ brandPurple: "#6366f1",
140
+ },
141
+ websiteDark: {
142
+ canvas: "#0c0b1d",
143
+ card: "#1d1b38",
144
+ well: "#141328",
145
+ nested: "#222041",
146
+ overlay: "#262448",
147
+ deepest: "#080814",
148
+ hairline: "#33315f",
149
+ ink: "#fdfdfd",
150
+ inkSecondary: "#aaa8b8",
151
+ inkMuted: "#9496bc",
152
+ accent: "#4c3fc5",
153
+ accentHover: "#5a50d6",
154
+ onAccent: "#ffffff",
155
+ accentText: "#a5b4fc",
156
+ danger: "#d52044",
157
+ successBg: "#2f5146",
158
+ successBorder: "#3c7760",
159
+ successText: "#5ed7a4",
160
+ warningBg: "#4b4232",
161
+ warningBorder: "#7a6236",
162
+ warningText: "#f4c14f",
163
+ dangerBg: "#5a3b40",
164
+ dangerBorder: "#7d4d53",
165
+ dangerText: "#ffada9",
166
+ infoBg: "#2d4e67",
167
+ infoBorder: "#3d7292",
168
+ infoText: "#67cdff",
169
+ brandVibrant: "#6366f1",
170
+ brandCool: "#818cf8",
171
+ brandGlow: "#a5aafc",
172
+ brandPurple: "#c7d2fe",
173
+ },
174
+ } as const satisfies Record<string, BrandPalette>;
package/src/palette.test.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { execFileSync } from "node:child_process";
2
+ import path from "node:path";
3
+ import { describe, expect, it } from "vitest";
4
+ import { palettes } from "./palette.generated";
5
+
6
+ describe("resolved palettes", () => {
7
+ it("are fresh against tokens.css and named-themes.css", () => {
8
+ const script = path.resolve(import.meta.dirname, "..", "scripts", "gen-palette.mjs");
9
+ expect(() => execFileSync(process.execPath, [script, "--check"], { stdio: "pipe" })).not.toThrow();
10
+ });
11
+
12
+ it("hold only concrete colors", () => {
13
+ for (const [theme, roles] of Object.entries(palettes)) {
14
+ for (const [role, value] of Object.entries(roles)) {
15
+ expect(value, `${theme}.${role}`).toMatch(/^(#[0-9a-f]{6}|rgba?\([^)]+\))$/);
16
+ }
17
+ }
18
+ });
19
+
20
+ it("keep the canonical planes", () => {
21
+ expect(palettes.light.card).toBe("#ffffff");
22
+ expect(palettes.light.canvas).not.toBe(palettes.light.card);
23
+ expect(palettes.dark.canvas).not.toBe(palettes.dark.card);
24
+ });
25
+ });