@neuravision/construct 1.1.4 → 1.1.6

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/components/_shared.css +16 -0
  2. package/components/accordion.css +16 -2
  3. package/components/avatar.css +46 -0
  4. package/components/chip.css +2 -0
  5. package/components/input.css +1 -1
  6. package/package.json +1 -1
  7. package/tokens/tokens.css +100 -0
  8. package/tokens/tokens.js +138 -0
  9. package/tokens/tokens.json +96 -0
  10. package/tokens/tokens.ts +138 -0
package/components/_shared.css CHANGED
@@ -38,6 +38,22 @@
38
38
  --ct-avatar-color: var(--color-text-secondary);
39
39
  --ct-avatar-status-size: 10px;
40
40
  --ct-avatar-group-overlap: -8px;
41
+ --ct-avatar-seed-1-bg: var(--color-avatar-seed-1-bg);
42
+ --ct-avatar-seed-1-fg: var(--color-avatar-seed-1-fg);
43
+ --ct-avatar-seed-2-bg: var(--color-avatar-seed-2-bg);
44
+ --ct-avatar-seed-2-fg: var(--color-avatar-seed-2-fg);
45
+ --ct-avatar-seed-3-bg: var(--color-avatar-seed-3-bg);
46
+ --ct-avatar-seed-3-fg: var(--color-avatar-seed-3-fg);
47
+ --ct-avatar-seed-4-bg: var(--color-avatar-seed-4-bg);
48
+ --ct-avatar-seed-4-fg: var(--color-avatar-seed-4-fg);
49
+ --ct-avatar-seed-5-bg: var(--color-avatar-seed-5-bg);
50
+ --ct-avatar-seed-5-fg: var(--color-avatar-seed-5-fg);
51
+ --ct-avatar-seed-6-bg: var(--color-avatar-seed-6-bg);
52
+ --ct-avatar-seed-6-fg: var(--color-avatar-seed-6-fg);
53
+ --ct-avatar-seed-7-bg: var(--color-avatar-seed-7-bg);
54
+ --ct-avatar-seed-7-fg: var(--color-avatar-seed-7-fg);
55
+ --ct-avatar-seed-8-bg: var(--color-avatar-seed-8-bg);
56
+ --ct-avatar-seed-8-fg: var(--color-avatar-seed-8-fg);
41
57
  }
42
58
 
43
59
  :where(.ct-input, .ct-select, .ct-textarea, .ct-control) {
package/components/accordion.css CHANGED
@@ -95,11 +95,11 @@
95
95
  .ct-accordion--bordered .ct-accordion__item {
96
96
  border: var(--border-thin) solid var(--ct-accordion-border);
97
97
  border-radius: var(--radius-md);
98
- margin-bottom: var(--space-2);
98
+ margin-block-end: var(--space-2);
99
99
  }
100
100
 
101
101
  .ct-accordion--bordered .ct-accordion__item:last-child {
102
- margin-bottom: 0;
102
+ margin-block-end: 0;
103
103
  border-bottom: var(--border-thin) solid var(--ct-accordion-border);
104
104
  }
105
105
 
@@ -122,3 +122,17 @@
122
122
  transition: none;
123
123
  }
124
124
  }
125
+
126
+ @media (forced-colors: active) {
127
+ .ct-accordion__trigger {
128
+ border: 1px solid transparent;
129
+ }
130
+
131
+ .ct-accordion__trigger:focus-visible {
132
+ outline: 2px solid LinkText;
133
+ }
134
+
135
+ .ct-accordion__icon {
136
+ forced-color-adjust: auto;
137
+ }
138
+ }
package/components/avatar.css CHANGED
@@ -36,6 +36,52 @@
36
36
  --ct-avatar-font-size: var(--font-size-xl);
37
37
  }
38
38
 
39
+ /* ── Seeded colors ── */
40
+ /* Deterministic palette for initials avatars. The consumer hashes a stable
41
+ identifier (userUUID, email, …) into [0, palette-size - 1] and writes the
42
+ resulting index to data-seed-color. Without the attribute, .ct-avatar
43
+ keeps its default background — fully backwards compatible. */
44
+
45
+ .ct-avatar[data-seed-color='1'] {
46
+ background: var(--ct-avatar-seed-1-bg);
47
+ color: var(--ct-avatar-seed-1-fg);
48
+ }
49
+
50
+ .ct-avatar[data-seed-color='2'] {
51
+ background: var(--ct-avatar-seed-2-bg);
52
+ color: var(--ct-avatar-seed-2-fg);
53
+ }
54
+
55
+ .ct-avatar[data-seed-color='3'] {
56
+ background: var(--ct-avatar-seed-3-bg);
57
+ color: var(--ct-avatar-seed-3-fg);
58
+ }
59
+
60
+ .ct-avatar[data-seed-color='4'] {
61
+ background: var(--ct-avatar-seed-4-bg);
62
+ color: var(--ct-avatar-seed-4-fg);
63
+ }
64
+
65
+ .ct-avatar[data-seed-color='5'] {
66
+ background: var(--ct-avatar-seed-5-bg);
67
+ color: var(--ct-avatar-seed-5-fg);
68
+ }
69
+
70
+ .ct-avatar[data-seed-color='6'] {
71
+ background: var(--ct-avatar-seed-6-bg);
72
+ color: var(--ct-avatar-seed-6-fg);
73
+ }
74
+
75
+ .ct-avatar[data-seed-color='7'] {
76
+ background: var(--ct-avatar-seed-7-bg);
77
+ color: var(--ct-avatar-seed-7-fg);
78
+ }
79
+
80
+ .ct-avatar[data-seed-color='8'] {
81
+ background: var(--ct-avatar-seed-8-bg);
82
+ color: var(--ct-avatar-seed-8-fg);
83
+ }
84
+
39
85
  .ct-avatar__image {
40
86
  width: 100%;
41
87
  height: 100%;
package/components/chip.css CHANGED
@@ -36,6 +36,7 @@
36
36
  --ct-chip-font-size: var(--font-size-xs);
37
37
  --ct-chip-line-height: var(--line-height-xs);
38
38
  --ct-chip-remove-size: var(--icon-sm);
39
+ --ct-chip-gap: var(--space-1);
39
40
  }
40
41
 
41
42
  .ct-chip--lg {
@@ -44,6 +45,7 @@
44
45
  --ct-chip-font-size: var(--font-size-md);
45
46
  --ct-chip-line-height: var(--line-height-md);
46
47
  --ct-chip-remove-size: var(--icon-xl);
48
+ --ct-chip-gap: var(--space-3);
47
49
  }
48
50
 
49
51
  /* ── Interactive state ───────────────────────────────────────── */
package/components/input.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ct-input--with-icon {
2
- padding-left: calc(var(--space-8) + var(--space-4));
2
+ padding-inline-start: calc(var(--space-8) + var(--space-4));
3
3
  }
4
4
 
5
5
  .ct-input-wrap {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neuravision/construct",
3
- "version": "1.1.4",
3
+ "version": "1.1.6",
4
4
  "description": "Construct Design System - Accessible, token-based design system for modern web applications",
5
5
  "license": "MIT",
6
6
  "repository": {
package/tokens/tokens.css CHANGED
@@ -63,6 +63,26 @@
63
63
  --color-green-700: #1B6145;
64
64
  --color-green-800: #134533;
65
65
  --color-green-900: #0C2E22;
66
+ --color-purple-50: #F4EFFA;
67
+ --color-purple-100: #E5D7F4;
68
+ --color-purple-200: #C9B0E6;
69
+ --color-purple-300: #A988D6;
70
+ --color-purple-400: #8961C2;
71
+ --color-purple-500: #6F45A8;
72
+ --color-purple-600: #5A3789;
73
+ --color-purple-700: #432868;
74
+ --color-purple-800: #2D1A48;
75
+ --color-purple-900: #1A0F2C;
76
+ --color-pink-50: #FBEEF3;
77
+ --color-pink-100: #F5CDDC;
78
+ --color-pink-200: #EA9CB7;
79
+ --color-pink-300: #DD6F92;
80
+ --color-pink-400: #CD4671;
81
+ --color-pink-500: #B22F58;
82
+ --color-pink-600: #8E2244;
83
+ --color-pink-700: #6A1932;
84
+ --color-pink-800: #461020;
85
+ --color-pink-900: #29080F;
66
86
  /* Typography */
67
87
  --font-family-brand: "Sora", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
68
88
  --font-family-text: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
@@ -256,6 +276,22 @@
256
276
  --color-state-danger-text: var(--color-red-700);
257
277
  --color-overlay-scrim: rgba(14, 23, 32, 0.6);
258
278
  --color-focus-ring: var(--color-teal-400);
279
+ --color-avatar-seed-1-bg: var(--color-ocean-100);
280
+ --color-avatar-seed-1-fg: var(--color-ocean-800);
281
+ --color-avatar-seed-2-bg: var(--color-teal-100);
282
+ --color-avatar-seed-2-fg: var(--color-teal-800);
283
+ --color-avatar-seed-3-bg: var(--color-amber-100);
284
+ --color-avatar-seed-3-fg: var(--color-amber-800);
285
+ --color-avatar-seed-4-bg: var(--color-red-100);
286
+ --color-avatar-seed-4-fg: var(--color-red-800);
287
+ --color-avatar-seed-5-bg: var(--color-green-100);
288
+ --color-avatar-seed-5-fg: var(--color-green-800);
289
+ --color-avatar-seed-6-bg: var(--color-purple-100);
290
+ --color-avatar-seed-6-fg: var(--color-purple-800);
291
+ --color-avatar-seed-7-bg: var(--color-pink-100);
292
+ --color-avatar-seed-7-fg: var(--color-pink-800);
293
+ --color-avatar-seed-8-bg: var(--color-slate-200);
294
+ --color-avatar-seed-8-fg: var(--color-slate-800);
259
295
  --theme-color-scheme: light;
260
296
  --font-family-heading: var(--font-family-brand);
261
297
  --font-family-body: var(--font-family-text);
@@ -306,6 +342,22 @@
306
342
  --color-state-danger-text: var(--color-red-200);
307
343
  --color-overlay-scrim: rgba(8, 14, 20, 0.7);
308
344
  --color-focus-ring: var(--color-teal-300);
345
+ --color-avatar-seed-1-bg: var(--color-ocean-800);
346
+ --color-avatar-seed-1-fg: var(--color-ocean-200);
347
+ --color-avatar-seed-2-bg: var(--color-teal-800);
348
+ --color-avatar-seed-2-fg: var(--color-teal-200);
349
+ --color-avatar-seed-3-bg: var(--color-amber-800);
350
+ --color-avatar-seed-3-fg: var(--color-amber-200);
351
+ --color-avatar-seed-4-bg: var(--color-red-800);
352
+ --color-avatar-seed-4-fg: var(--color-red-200);
353
+ --color-avatar-seed-5-bg: var(--color-green-800);
354
+ --color-avatar-seed-5-fg: var(--color-green-200);
355
+ --color-avatar-seed-6-bg: var(--color-purple-800);
356
+ --color-avatar-seed-6-fg: var(--color-purple-200);
357
+ --color-avatar-seed-7-bg: var(--color-pink-800);
358
+ --color-avatar-seed-7-fg: var(--color-pink-200);
359
+ --color-avatar-seed-8-bg: var(--color-slate-700);
360
+ --color-avatar-seed-8-fg: var(--color-slate-200);
309
361
  --theme-color-scheme: dark;
310
362
  }
311
363
 
@@ -346,6 +398,22 @@
346
398
  --color-state-danger-text: var(--color-red-800);
347
399
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
348
400
  --color-focus-ring: var(--color-amber-400);
401
+ --color-avatar-seed-1-bg: var(--color-ocean-50);
402
+ --color-avatar-seed-1-fg: var(--color-ocean-900);
403
+ --color-avatar-seed-2-bg: var(--color-teal-50);
404
+ --color-avatar-seed-2-fg: var(--color-teal-900);
405
+ --color-avatar-seed-3-bg: var(--color-amber-50);
406
+ --color-avatar-seed-3-fg: var(--color-amber-900);
407
+ --color-avatar-seed-4-bg: var(--color-red-50);
408
+ --color-avatar-seed-4-fg: var(--color-red-900);
409
+ --color-avatar-seed-5-bg: var(--color-green-50);
410
+ --color-avatar-seed-5-fg: var(--color-green-900);
411
+ --color-avatar-seed-6-bg: var(--color-purple-50);
412
+ --color-avatar-seed-6-fg: var(--color-purple-900);
413
+ --color-avatar-seed-7-bg: var(--color-pink-50);
414
+ --color-avatar-seed-7-fg: var(--color-pink-900);
415
+ --color-avatar-seed-8-bg: var(--color-slate-50);
416
+ --color-avatar-seed-8-fg: var(--color-slate-950);
349
417
  --theme-color-scheme: light;
350
418
  }
351
419
 
@@ -387,6 +455,22 @@
387
455
  --color-state-danger-text: var(--color-red-200);
388
456
  --color-overlay-scrim: rgba(8, 14, 20, 0.7);
389
457
  --color-focus-ring: var(--color-teal-300);
458
+ --color-avatar-seed-1-bg: var(--color-ocean-800);
459
+ --color-avatar-seed-1-fg: var(--color-ocean-200);
460
+ --color-avatar-seed-2-bg: var(--color-teal-800);
461
+ --color-avatar-seed-2-fg: var(--color-teal-200);
462
+ --color-avatar-seed-3-bg: var(--color-amber-800);
463
+ --color-avatar-seed-3-fg: var(--color-amber-200);
464
+ --color-avatar-seed-4-bg: var(--color-red-800);
465
+ --color-avatar-seed-4-fg: var(--color-red-200);
466
+ --color-avatar-seed-5-bg: var(--color-green-800);
467
+ --color-avatar-seed-5-fg: var(--color-green-200);
468
+ --color-avatar-seed-6-bg: var(--color-purple-800);
469
+ --color-avatar-seed-6-fg: var(--color-purple-200);
470
+ --color-avatar-seed-7-bg: var(--color-pink-800);
471
+ --color-avatar-seed-7-fg: var(--color-pink-200);
472
+ --color-avatar-seed-8-bg: var(--color-slate-700);
473
+ --color-avatar-seed-8-fg: var(--color-slate-200);
390
474
  --theme-color-scheme: dark;
391
475
  }
392
476
  }
@@ -429,6 +513,22 @@
429
513
  --color-state-danger-text: var(--color-red-800);
430
514
  --color-overlay-scrim: rgba(14, 23, 32, 0.7);
431
515
  --color-focus-ring: var(--color-amber-400);
516
+ --color-avatar-seed-1-bg: var(--color-ocean-50);
517
+ --color-avatar-seed-1-fg: var(--color-ocean-900);
518
+ --color-avatar-seed-2-bg: var(--color-teal-50);
519
+ --color-avatar-seed-2-fg: var(--color-teal-900);
520
+ --color-avatar-seed-3-bg: var(--color-amber-50);
521
+ --color-avatar-seed-3-fg: var(--color-amber-900);
522
+ --color-avatar-seed-4-bg: var(--color-red-50);
523
+ --color-avatar-seed-4-fg: var(--color-red-900);
524
+ --color-avatar-seed-5-bg: var(--color-green-50);
525
+ --color-avatar-seed-5-fg: var(--color-green-900);
526
+ --color-avatar-seed-6-bg: var(--color-purple-50);
527
+ --color-avatar-seed-6-fg: var(--color-purple-900);
528
+ --color-avatar-seed-7-bg: var(--color-pink-50);
529
+ --color-avatar-seed-7-fg: var(--color-pink-900);
530
+ --color-avatar-seed-8-bg: var(--color-slate-50);
531
+ --color-avatar-seed-8-fg: var(--color-slate-950);
432
532
  --theme-color-scheme: light;
433
533
  }
434
534
  }
package/tokens/tokens.js CHANGED
@@ -75,6 +75,30 @@ export const primitives = {
75
75
  "700": "#1B6145",
76
76
  "800": "#134533",
77
77
  "900": "#0C2E22"
78
+ },
79
+ "purple": {
80
+ "50": "#F4EFFA",
81
+ "100": "#E5D7F4",
82
+ "200": "#C9B0E6",
83
+ "300": "#A988D6",
84
+ "400": "#8961C2",
85
+ "500": "#6F45A8",
86
+ "600": "#5A3789",
87
+ "700": "#432868",
88
+ "800": "#2D1A48",
89
+ "900": "#1A0F2C"
90
+ },
91
+ "pink": {
92
+ "50": "#FBEEF3",
93
+ "100": "#F5CDDC",
94
+ "200": "#EA9CB7",
95
+ "300": "#DD6F92",
96
+ "400": "#CD4671",
97
+ "500": "#B22F58",
98
+ "600": "#8E2244",
99
+ "700": "#6A1932",
100
+ "800": "#461020",
101
+ "900": "#29080F"
78
102
  }
79
103
  },
80
104
  "font": {
@@ -283,6 +307,24 @@ export const semantic = {
283
307
  },
284
308
  "focus": {
285
309
  "ring": "#35B2AA"
310
+ },
311
+ "avatarSeed": {
312
+ "1Bg": "#CFE5EC",
313
+ "1Fg": "#103745",
314
+ "2Bg": "#C5ECEA",
315
+ "2Fg": "#0D4744",
316
+ "3Bg": "#FFE8BF",
317
+ "3Fg": "#5E3500",
318
+ "4Bg": "#F8CACA",
319
+ "4Fg": "#561717",
320
+ "5Bg": "#C7EAD9",
321
+ "5Fg": "#134533",
322
+ "6Bg": "#E5D7F4",
323
+ "6Fg": "#2D1A48",
324
+ "7Bg": "#F5CDDC",
325
+ "7Fg": "#461020",
326
+ "8Bg": "#D3DDE7",
327
+ "8Fg": "#263747"
286
328
  }
287
329
  },
288
330
  "theme": {
@@ -430,6 +472,24 @@ export const semanticThemes = {
430
472
  },
431
473
  "focus": {
432
474
  "ring": "#35B2AA"
475
+ },
476
+ "avatarSeed": {
477
+ "1Bg": "#CFE5EC",
478
+ "1Fg": "#103745",
479
+ "2Bg": "#C5ECEA",
480
+ "2Fg": "#0D4744",
481
+ "3Bg": "#FFE8BF",
482
+ "3Fg": "#5E3500",
483
+ "4Bg": "#F8CACA",
484
+ "4Fg": "#561717",
485
+ "5Bg": "#C7EAD9",
486
+ "5Fg": "#134533",
487
+ "6Bg": "#E5D7F4",
488
+ "6Fg": "#2D1A48",
489
+ "7Bg": "#F5CDDC",
490
+ "7Fg": "#461020",
491
+ "8Bg": "#D3DDE7",
492
+ "8Fg": "#263747"
433
493
  }
434
494
  },
435
495
  "theme": {
@@ -575,6 +635,24 @@ export const semanticThemes = {
575
635
  },
576
636
  "focus": {
577
637
  "ring": "#63C7C1"
638
+ },
639
+ "avatarSeed": {
640
+ "1Bg": "#103745",
641
+ "1Fg": "#A5CBD8",
642
+ "2Bg": "#0D4744",
643
+ "2Fg": "#93DAD6",
644
+ "3Bg": "#5E3500",
645
+ "3Fg": "#FFD180",
646
+ "4Bg": "#561717",
647
+ "4Fg": "#F3A3A3",
648
+ "5Bg": "#134533",
649
+ "5Fg": "#9EDCC0",
650
+ "6Bg": "#2D1A48",
651
+ "6Fg": "#C9B0E6",
652
+ "7Bg": "#461020",
653
+ "7Fg": "#EA9CB7",
654
+ "8Bg": "#364C5F",
655
+ "8Fg": "#D3DDE7"
578
656
  }
579
657
  },
580
658
  "theme": {
@@ -720,6 +798,24 @@ export const semanticThemes = {
720
798
  },
721
799
  "focus": {
722
800
  "ring": "#FF9E1A"
801
+ },
802
+ "avatarSeed": {
803
+ "1Bg": "#E9F4F7",
804
+ "1Fg": "#0B2631",
805
+ "2Bg": "#E7F7F6",
806
+ "2Fg": "#0A3533",
807
+ "3Bg": "#FFF6E5",
808
+ "3Fg": "#3D2300",
809
+ "4Bg": "#FDECEC",
810
+ "4Fg": "#361010",
811
+ "5Bg": "#E8F6EF",
812
+ "5Fg": "#0C2E22",
813
+ "6Bg": "#F4EFFA",
814
+ "6Fg": "#1A0F2C",
815
+ "7Bg": "#FBEEF3",
816
+ "7Fg": "#29080F",
817
+ "8Bg": "#F5F7FA",
818
+ "8Fg": "#0E1720"
723
819
  }
724
820
  },
725
821
  "theme": {
@@ -887,6 +983,30 @@ export const cssVars = {
887
983
  "700": "var(--color-green-700)",
888
984
  "800": "var(--color-green-800)",
889
985
  "900": "var(--color-green-900)"
986
+ },
987
+ "purple": {
988
+ "50": "var(--color-purple-50)",
989
+ "100": "var(--color-purple-100)",
990
+ "200": "var(--color-purple-200)",
991
+ "300": "var(--color-purple-300)",
992
+ "400": "var(--color-purple-400)",
993
+ "500": "var(--color-purple-500)",
994
+ "600": "var(--color-purple-600)",
995
+ "700": "var(--color-purple-700)",
996
+ "800": "var(--color-purple-800)",
997
+ "900": "var(--color-purple-900)"
998
+ },
999
+ "pink": {
1000
+ "50": "var(--color-pink-50)",
1001
+ "100": "var(--color-pink-100)",
1002
+ "200": "var(--color-pink-200)",
1003
+ "300": "var(--color-pink-300)",
1004
+ "400": "var(--color-pink-400)",
1005
+ "500": "var(--color-pink-500)",
1006
+ "600": "var(--color-pink-600)",
1007
+ "700": "var(--color-pink-700)",
1008
+ "800": "var(--color-pink-800)",
1009
+ "900": "var(--color-pink-900)"
890
1010
  }
891
1011
  },
892
1012
  "font": {
@@ -1094,6 +1214,24 @@ export const cssVars = {
1094
1214
  },
1095
1215
  "focus": {
1096
1216
  "ring": "var(--color-focus-ring)"
1217
+ },
1218
+ "avatarSeed": {
1219
+ "1Bg": "var(--color-avatar-seed-1-bg)",
1220
+ "1Fg": "var(--color-avatar-seed-1-fg)",
1221
+ "2Bg": "var(--color-avatar-seed-2-bg)",
1222
+ "2Fg": "var(--color-avatar-seed-2-fg)",
1223
+ "3Bg": "var(--color-avatar-seed-3-bg)",
1224
+ "3Fg": "var(--color-avatar-seed-3-fg)",
1225
+ "4Bg": "var(--color-avatar-seed-4-bg)",
1226
+ "4Fg": "var(--color-avatar-seed-4-fg)",
1227
+ "5Bg": "var(--color-avatar-seed-5-bg)",
1228
+ "5Fg": "var(--color-avatar-seed-5-fg)",
1229
+ "6Bg": "var(--color-avatar-seed-6-bg)",
1230
+ "6Fg": "var(--color-avatar-seed-6-fg)",
1231
+ "7Bg": "var(--color-avatar-seed-7-bg)",
1232
+ "7Fg": "var(--color-avatar-seed-7-fg)",
1233
+ "8Bg": "var(--color-avatar-seed-8-bg)",
1234
+ "8Fg": "var(--color-avatar-seed-8-fg)"
1097
1235
  }
1098
1236
  },
1099
1237
  "theme": {
package/tokens/tokens.json CHANGED
@@ -74,6 +74,30 @@
74
74
  "700": "#1B6145",
75
75
  "800": "#134533",
76
76
  "900": "#0C2E22"
77
+ },
78
+ "purple": {
79
+ "50": "#F4EFFA",
80
+ "100": "#E5D7F4",
81
+ "200": "#C9B0E6",
82
+ "300": "#A988D6",
83
+ "400": "#8961C2",
84
+ "500": "#6F45A8",
85
+ "600": "#5A3789",
86
+ "700": "#432868",
87
+ "800": "#2D1A48",
88
+ "900": "#1A0F2C"
89
+ },
90
+ "pink": {
91
+ "50": "#FBEEF3",
92
+ "100": "#F5CDDC",
93
+ "200": "#EA9CB7",
94
+ "300": "#DD6F92",
95
+ "400": "#CD4671",
96
+ "500": "#B22F58",
97
+ "600": "#8E2244",
98
+ "700": "#6A1932",
99
+ "800": "#461020",
100
+ "900": "#29080F"
77
101
  }
78
102
  },
79
103
  "font": {
@@ -281,6 +305,24 @@
281
305
  },
282
306
  "focus": {
283
307
  "ring": "#35B2AA"
308
+ },
309
+ "avatarSeed": {
310
+ "1Bg": "#CFE5EC",
311
+ "1Fg": "#103745",
312
+ "2Bg": "#C5ECEA",
313
+ "2Fg": "#0D4744",
314
+ "3Bg": "#FFE8BF",
315
+ "3Fg": "#5E3500",
316
+ "4Bg": "#F8CACA",
317
+ "4Fg": "#561717",
318
+ "5Bg": "#C7EAD9",
319
+ "5Fg": "#134533",
320
+ "6Bg": "#E5D7F4",
321
+ "6Fg": "#2D1A48",
322
+ "7Bg": "#F5CDDC",
323
+ "7Fg": "#461020",
324
+ "8Bg": "#D3DDE7",
325
+ "8Fg": "#263747"
284
326
  }
285
327
  },
286
328
  "theme": {
@@ -427,6 +469,24 @@
427
469
  },
428
470
  "focus": {
429
471
  "ring": "#35B2AA"
472
+ },
473
+ "avatarSeed": {
474
+ "1Bg": "#CFE5EC",
475
+ "1Fg": "#103745",
476
+ "2Bg": "#C5ECEA",
477
+ "2Fg": "#0D4744",
478
+ "3Bg": "#FFE8BF",
479
+ "3Fg": "#5E3500",
480
+ "4Bg": "#F8CACA",
481
+ "4Fg": "#561717",
482
+ "5Bg": "#C7EAD9",
483
+ "5Fg": "#134533",
484
+ "6Bg": "#E5D7F4",
485
+ "6Fg": "#2D1A48",
486
+ "7Bg": "#F5CDDC",
487
+ "7Fg": "#461020",
488
+ "8Bg": "#D3DDE7",
489
+ "8Fg": "#263747"
430
490
  }
431
491
  },
432
492
  "theme": {
@@ -572,6 +632,24 @@
572
632
  },
573
633
  "focus": {
574
634
  "ring": "#63C7C1"
635
+ },
636
+ "avatarSeed": {
637
+ "1Bg": "#103745",
638
+ "1Fg": "#A5CBD8",
639
+ "2Bg": "#0D4744",
640
+ "2Fg": "#93DAD6",
641
+ "3Bg": "#5E3500",
642
+ "3Fg": "#FFD180",
643
+ "4Bg": "#561717",
644
+ "4Fg": "#F3A3A3",
645
+ "5Bg": "#134533",
646
+ "5Fg": "#9EDCC0",
647
+ "6Bg": "#2D1A48",
648
+ "6Fg": "#C9B0E6",
649
+ "7Bg": "#461020",
650
+ "7Fg": "#EA9CB7",
651
+ "8Bg": "#364C5F",
652
+ "8Fg": "#D3DDE7"
575
653
  }
576
654
  },
577
655
  "theme": {
@@ -717,6 +795,24 @@
717
795
  },
718
796
  "focus": {
719
797
  "ring": "#FF9E1A"
798
+ },
799
+ "avatarSeed": {
800
+ "1Bg": "#E9F4F7",
801
+ "1Fg": "#0B2631",
802
+ "2Bg": "#E7F7F6",
803
+ "2Fg": "#0A3533",
804
+ "3Bg": "#FFF6E5",
805
+ "3Fg": "#3D2300",
806
+ "4Bg": "#FDECEC",
807
+ "4Fg": "#361010",
808
+ "5Bg": "#E8F6EF",
809
+ "5Fg": "#0C2E22",
810
+ "6Bg": "#F4EFFA",
811
+ "6Fg": "#1A0F2C",
812
+ "7Bg": "#FBEEF3",
813
+ "7Fg": "#29080F",
814
+ "8Bg": "#F5F7FA",
815
+ "8Fg": "#0E1720"
720
816
  }
721
817
  },
722
818
  "theme": {
package/tokens/tokens.ts CHANGED
@@ -75,6 +75,30 @@ export const primitives = {
75
75
  "700": "#1B6145",
76
76
  "800": "#134533",
77
77
  "900": "#0C2E22"
78
+ },
79
+ "purple": {
80
+ "50": "#F4EFFA",
81
+ "100": "#E5D7F4",
82
+ "200": "#C9B0E6",
83
+ "300": "#A988D6",
84
+ "400": "#8961C2",
85
+ "500": "#6F45A8",
86
+ "600": "#5A3789",
87
+ "700": "#432868",
88
+ "800": "#2D1A48",
89
+ "900": "#1A0F2C"
90
+ },
91
+ "pink": {
92
+ "50": "#FBEEF3",
93
+ "100": "#F5CDDC",
94
+ "200": "#EA9CB7",
95
+ "300": "#DD6F92",
96
+ "400": "#CD4671",
97
+ "500": "#B22F58",
98
+ "600": "#8E2244",
99
+ "700": "#6A1932",
100
+ "800": "#461020",
101
+ "900": "#29080F"
78
102
  }
79
103
  },
80
104
  "font": {
@@ -283,6 +307,24 @@ export const semantic = {
283
307
  },
284
308
  "focus": {
285
309
  "ring": "#35B2AA"
310
+ },
311
+ "avatarSeed": {
312
+ "1Bg": "#CFE5EC",
313
+ "1Fg": "#103745",
314
+ "2Bg": "#C5ECEA",
315
+ "2Fg": "#0D4744",
316
+ "3Bg": "#FFE8BF",
317
+ "3Fg": "#5E3500",
318
+ "4Bg": "#F8CACA",
319
+ "4Fg": "#561717",
320
+ "5Bg": "#C7EAD9",
321
+ "5Fg": "#134533",
322
+ "6Bg": "#E5D7F4",
323
+ "6Fg": "#2D1A48",
324
+ "7Bg": "#F5CDDC",
325
+ "7Fg": "#461020",
326
+ "8Bg": "#D3DDE7",
327
+ "8Fg": "#263747"
286
328
  }
287
329
  },
288
330
  "theme": {
@@ -430,6 +472,24 @@ export const semanticThemes = {
430
472
  },
431
473
  "focus": {
432
474
  "ring": "#35B2AA"
475
+ },
476
+ "avatarSeed": {
477
+ "1Bg": "#CFE5EC",
478
+ "1Fg": "#103745",
479
+ "2Bg": "#C5ECEA",
480
+ "2Fg": "#0D4744",
481
+ "3Bg": "#FFE8BF",
482
+ "3Fg": "#5E3500",
483
+ "4Bg": "#F8CACA",
484
+ "4Fg": "#561717",
485
+ "5Bg": "#C7EAD9",
486
+ "5Fg": "#134533",
487
+ "6Bg": "#E5D7F4",
488
+ "6Fg": "#2D1A48",
489
+ "7Bg": "#F5CDDC",
490
+ "7Fg": "#461020",
491
+ "8Bg": "#D3DDE7",
492
+ "8Fg": "#263747"
433
493
  }
434
494
  },
435
495
  "theme": {
@@ -575,6 +635,24 @@ export const semanticThemes = {
575
635
  },
576
636
  "focus": {
577
637
  "ring": "#63C7C1"
638
+ },
639
+ "avatarSeed": {
640
+ "1Bg": "#103745",
641
+ "1Fg": "#A5CBD8",
642
+ "2Bg": "#0D4744",
643
+ "2Fg": "#93DAD6",
644
+ "3Bg": "#5E3500",
645
+ "3Fg": "#FFD180",
646
+ "4Bg": "#561717",
647
+ "4Fg": "#F3A3A3",
648
+ "5Bg": "#134533",
649
+ "5Fg": "#9EDCC0",
650
+ "6Bg": "#2D1A48",
651
+ "6Fg": "#C9B0E6",
652
+ "7Bg": "#461020",
653
+ "7Fg": "#EA9CB7",
654
+ "8Bg": "#364C5F",
655
+ "8Fg": "#D3DDE7"
578
656
  }
579
657
  },
580
658
  "theme": {
@@ -720,6 +798,24 @@ export const semanticThemes = {
720
798
  },
721
799
  "focus": {
722
800
  "ring": "#FF9E1A"
801
+ },
802
+ "avatarSeed": {
803
+ "1Bg": "#E9F4F7",
804
+ "1Fg": "#0B2631",
805
+ "2Bg": "#E7F7F6",
806
+ "2Fg": "#0A3533",
807
+ "3Bg": "#FFF6E5",
808
+ "3Fg": "#3D2300",
809
+ "4Bg": "#FDECEC",
810
+ "4Fg": "#361010",
811
+ "5Bg": "#E8F6EF",
812
+ "5Fg": "#0C2E22",
813
+ "6Bg": "#F4EFFA",
814
+ "6Fg": "#1A0F2C",
815
+ "7Bg": "#FBEEF3",
816
+ "7Fg": "#29080F",
817
+ "8Bg": "#F5F7FA",
818
+ "8Fg": "#0E1720"
723
819
  }
724
820
  },
725
821
  "theme": {
@@ -887,6 +983,30 @@ export const cssVars = {
887
983
  "700": "var(--color-green-700)",
888
984
  "800": "var(--color-green-800)",
889
985
  "900": "var(--color-green-900)"
986
+ },
987
+ "purple": {
988
+ "50": "var(--color-purple-50)",
989
+ "100": "var(--color-purple-100)",
990
+ "200": "var(--color-purple-200)",
991
+ "300": "var(--color-purple-300)",
992
+ "400": "var(--color-purple-400)",
993
+ "500": "var(--color-purple-500)",
994
+ "600": "var(--color-purple-600)",
995
+ "700": "var(--color-purple-700)",
996
+ "800": "var(--color-purple-800)",
997
+ "900": "var(--color-purple-900)"
998
+ },
999
+ "pink": {
1000
+ "50": "var(--color-pink-50)",
1001
+ "100": "var(--color-pink-100)",
1002
+ "200": "var(--color-pink-200)",
1003
+ "300": "var(--color-pink-300)",
1004
+ "400": "var(--color-pink-400)",
1005
+ "500": "var(--color-pink-500)",
1006
+ "600": "var(--color-pink-600)",
1007
+ "700": "var(--color-pink-700)",
1008
+ "800": "var(--color-pink-800)",
1009
+ "900": "var(--color-pink-900)"
890
1010
  }
891
1011
  },
892
1012
  "font": {
@@ -1094,6 +1214,24 @@ export const cssVars = {
1094
1214
  },
1095
1215
  "focus": {
1096
1216
  "ring": "var(--color-focus-ring)"
1217
+ },
1218
+ "avatarSeed": {
1219
+ "1Bg": "var(--color-avatar-seed-1-bg)",
1220
+ "1Fg": "var(--color-avatar-seed-1-fg)",
1221
+ "2Bg": "var(--color-avatar-seed-2-bg)",
1222
+ "2Fg": "var(--color-avatar-seed-2-fg)",
1223
+ "3Bg": "var(--color-avatar-seed-3-bg)",
1224
+ "3Fg": "var(--color-avatar-seed-3-fg)",
1225
+ "4Bg": "var(--color-avatar-seed-4-bg)",
1226
+ "4Fg": "var(--color-avatar-seed-4-fg)",
1227
+ "5Bg": "var(--color-avatar-seed-5-bg)",
1228
+ "5Fg": "var(--color-avatar-seed-5-fg)",
1229
+ "6Bg": "var(--color-avatar-seed-6-bg)",
1230
+ "6Fg": "var(--color-avatar-seed-6-fg)",
1231
+ "7Bg": "var(--color-avatar-seed-7-bg)",
1232
+ "7Fg": "var(--color-avatar-seed-7-fg)",
1233
+ "8Bg": "var(--color-avatar-seed-8-bg)",
1234
+ "8Fg": "var(--color-avatar-seed-8-fg)"
1097
1235
  }
1098
1236
  },
1099
1237
  "theme": {