twntyx-css 1.0.2 → 1.0.5

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 (70) hide show
  1. package/llm/components/ai-orb.json +0 -1
  2. package/llm/components/ai-perl.json +5 -13
  3. package/llm/components/all-components.json +13 -5
  4. package/llm/components/{banner-marketplace.json → banner-funding.json} +8 -8
  5. package/llm/components/breadcrumb.json +0 -1
  6. package/llm/components/button-container.json +1 -0
  7. package/llm/components/chat-ai.json +100 -6
  8. package/llm/components/chat-footer.json +24 -3
  9. package/llm/components/checkmark.json +0 -1
  10. package/llm/components/command-palette.json +0 -1
  11. package/llm/components/countdown.json +1 -1
  12. package/llm/components/divider.json +1 -1
  13. package/llm/components/kbd.json +1 -1
  14. package/llm/components/key-value.json +2 -10
  15. package/llm/components/{skeleton.json → loader-skeleton.json} +7 -5
  16. package/llm/components/{loader.json → loader-symbol.json} +8 -10
  17. package/llm/components/{empty-state.json → loader-text.json} +22 -20
  18. package/llm/components/progress-bullet.json +0 -1
  19. package/llm/components/state.json +2 -1
  20. package/llm/components/stepper.json +1 -1
  21. package/llm/components/steps.json +6 -95
  22. package/llm/components/surface.json +2 -0
  23. package/llm/components/tabs.json +1 -0
  24. package/llm/components/{input-group.json → template-navbar.json} +28 -43
  25. package/llm/components/text-input.json +8 -169
  26. package/llm/components/toast.json +0 -2
  27. package/llm/components/tooltip.json +1 -1
  28. package/llm/examples/ai-perl.html +1 -1
  29. package/llm/examples/banner-funding.html +1 -0
  30. package/llm/examples/chat-ai.html +1 -1
  31. package/llm/examples/chat-footer.html +1 -1
  32. package/llm/examples/key-value.html +1 -1
  33. package/llm/examples/loader-skeleton.html +1 -0
  34. package/llm/examples/loader-symbol.html +1 -0
  35. package/llm/examples/loader-text.html +1 -0
  36. package/llm/examples/steps.html +1 -1
  37. package/llm/examples/template-navbar.html +1 -0
  38. package/llm/index.json +73 -88
  39. package/llm/patterns.json +2 -2
  40. package/llm/tokens.json +657 -367
  41. package/package.json +1 -1
  42. package/styles/ai.css +3 -7
  43. package/styles/animation.css +228 -94
  44. package/styles/button.css +50 -39
  45. package/styles/card.css +3 -3
  46. package/styles/colors.css +525 -283
  47. package/styles/datepicker.css +8 -15
  48. package/styles/divider.css +1 -1
  49. package/styles/form.css +6 -8
  50. package/styles/globals.css +62 -64
  51. package/styles/key-value.css +4 -3
  52. package/styles/loader.css +25 -31
  53. package/styles/logotype.css +6 -6
  54. package/styles/scrollbar.css +2 -2
  55. package/styles/shared.css +17 -17
  56. package/styles/skeleton.css +2 -1
  57. package/styles/state.css +109 -97
  58. package/styles/steps.css +2 -2
  59. package/styles/surface.css +74 -90
  60. package/styles/table.css +3 -3
  61. package/styles/toast.css +3 -5
  62. package/llm/components/navbar.json +0 -158
  63. package/llm/examples/banner-marketplace.html +0 -1
  64. package/llm/examples/empty-state.html +0 -1
  65. package/llm/examples/input-group.html +0 -1
  66. package/llm/examples/loader.html +0 -1
  67. package/llm/examples/navbar.html +0 -1
  68. package/llm/examples/skeleton.html +0 -1
  69. package/styles/empty-state.css +0 -48
  70. package/styles/navbar.css +0 -48
package/styles/colors.css CHANGED
@@ -7,17 +7,17 @@
7
7
 
8
8
  /** Brand (Earth Gold) **/
9
9
  /* LIGHT */
10
- --raw-color-brand: rgb(225 150 65);
11
- --raw-color-brand-strong: rgb(165 90 20);
12
- --raw-color-brand-moderate: rgb(238 180 115);
13
- --raw-color-brand-soft: rgb(251 238 218);
14
- --raw-color-brand-light: rgb(255 250 243);
10
+ --raw-color-brand: var(--raw-color-core-gold-500);
11
+ --raw-color-brand-strong: var(--raw-color-core-gold-800);
12
+ --raw-color-brand-moderate: var(--raw-color-core-gold-300);
13
+ --raw-color-brand-soft: var(--raw-color-core-gold-100);
14
+ --raw-color-brand-light: var(--raw-color-core-gold-50);
15
15
  /* DARK */
16
- --raw-color-brand-dark: rgb(240 175 95);
17
- --raw-color-brand-strong-dark: rgb(255 225 180);
18
- --raw-color-brand-moderate-dark: rgb(200 130 55);
19
- --raw-color-brand-soft-dark: rgb(160 95 35);
20
- --raw-color-brand-light-dark: rgb(110 65 20);
16
+ --raw-color-brand-dark: var(--raw-color-core-gold-400);
17
+ --raw-color-brand-strong-dark: var(--raw-color-core-gold-200);
18
+ --raw-color-brand-moderate-dark: var(--raw-color-core-gold-600);
19
+ --raw-color-brand-soft-dark: var(--raw-color-core-gold-700);
20
+ --raw-color-brand-light-dark: var(--raw-color-core-gold-950);
21
21
 
22
22
  --raw-color-core-white: rgb(255 255 255);
23
23
  --raw-color-core-black: var(--raw-color-core-ui-800);
@@ -33,111 +33,124 @@
33
33
  --raw-color-core-ui-700: rgb(60 54 46);
34
34
  --raw-color-core-ui-800: rgb(48 43 36);
35
35
  --raw-color-core-ui-900: rgb(32 28 23);
36
- --raw-color-core-ui-950: rgb(14 12 9);
36
+ --raw-color-core-ui-950: rgb(25, 21, 16);
37
+
38
+ /** Base Gold (Brand) **/
39
+ --raw-color-core-gold-50: rgb(255 250 243);
40
+ --raw-color-core-gold-100: rgb(251 238 218);
41
+ --raw-color-core-gold-200: rgb(255 225 180);
42
+ --raw-color-core-gold-300: rgb(238 180 115);
43
+ --raw-color-core-gold-400: rgb(240 175 95);
44
+ --raw-color-core-gold-500: rgb(225 150 65);
45
+ --raw-color-core-gold-600: rgb(200 130 55);
46
+ --raw-color-core-gold-700: rgb(160 95 35);
47
+ --raw-color-core-gold-800: rgb(165 90 20);
48
+ --raw-color-core-gold-900: rgb(138 78 20);
49
+ --raw-color-core-gold-950: rgb(110 65 20);
37
50
 
38
51
  /** Base Yellow (Brand) **/
39
52
  /* LIGHT */
40
- --raw-color-core-yellow-50: rgb(255 252 235);
41
- --raw-color-core-yellow-100: rgb(255 247 214);
42
- --raw-color-core-yellow-200: rgb(255 237 179);
43
- --raw-color-core-yellow-300: rgb(255 227 143);
44
- --raw-color-core-yellow-400: rgb(255 212 107);
45
- --raw-color-core-yellow-500: rgb(255 202 54);
46
- --raw-color-core-yellow-600: rgb(255 192 0);
47
- --raw-color-core-yellow-700: rgb(230 173 0);
48
- --raw-color-core-yellow-800: rgb(204 154 0);
49
- --raw-color-core-yellow-900: rgb(179 135 0);
50
- --raw-color-core-yellow-950: rgb(128 97 0);
53
+ --raw-color-core-yellow-50: rgb(250 248 242);
54
+ --raw-color-core-yellow-100: rgb(246 242 230);
55
+ --raw-color-core-yellow-200: rgb(239 230 205);
56
+ --raw-color-core-yellow-300: rgb(231 214 169);
57
+ --raw-color-core-yellow-400: rgb(223 197 126);
58
+ --raw-color-core-yellow-500: rgb(216 180 79);
59
+ --raw-color-core-yellow-600: rgb(198 156 38);
60
+ --raw-color-core-yellow-700: rgb(164 127 27);
61
+ --raw-color-core-yellow-800: rgb(135 104 20);
62
+ --raw-color-core-yellow-900: rgb(104 80 14);
63
+ --raw-color-core-yellow-950: rgb(64 49 8);
51
64
  /* DARK */
52
- --raw-color-core-yellow-50-dark: rgb(38 31 0);
53
- --raw-color-core-yellow-100-dark: rgb(51 41 0);
54
- --raw-color-core-yellow-200-dark: rgb(77 62 0);
55
- --raw-color-core-yellow-300-dark: rgb(102 82 0);
56
- --raw-color-core-yellow-400-dark: rgb(128 103 0);
57
- --raw-color-core-yellow-500-dark: rgb(179 144 0);
58
- --raw-color-core-yellow-600-dark: var(--raw-color-background-brand);
59
- --raw-color-core-yellow-700-dark: rgb(255 204 51);
60
- --raw-color-core-yellow-800-dark: rgb(255 214 82);
61
- --raw-color-core-yellow-900-dark: rgb(255 224 112);
62
- --raw-color-core-yellow-950-dark: rgb(255 235 143);
65
+ --raw-color-core-yellow-50-dark: var(--raw-color-core-yellow-50);
66
+ --raw-color-core-yellow-100-dark: var(--raw-color-core-yellow-100);
67
+ --raw-color-core-yellow-200-dark: var(--raw-color-core-yellow-200);
68
+ --raw-color-core-yellow-300-dark: var(--raw-color-core-yellow-300);
69
+ --raw-color-core-yellow-400-dark: var(--raw-color-core-yellow-400);
70
+ --raw-color-core-yellow-500-dark: var(--raw-color-core-yellow-500);
71
+ --raw-color-core-yellow-600-dark: var(--raw-color-core-yellow-600);
72
+ --raw-color-core-yellow-700-dark: var(--raw-color-core-yellow-700);
73
+ --raw-color-core-yellow-800-dark: var(--raw-color-core-yellow-800);
74
+ --raw-color-core-yellow-900-dark: var(--raw-color-core-yellow-900);
75
+ --raw-color-core-yellow-950-dark: var(--raw-color-core-yellow-950);
63
76
 
64
77
  /** Base Blue **/
65
78
  /* LIGHT */
66
- --raw-color-core-blue-50: rgb(245 248 255);
67
- --raw-color-core-blue-100: rgb(235 241 255);
68
- --raw-color-core-blue-200: rgb(205 218 255);
69
- --raw-color-core-blue-300: rgb(176 195 255);
70
- --raw-color-core-blue-400: rgb(136 167 255);
71
- --raw-color-core-blue-500: rgb(88 134 255);
72
- --raw-color-core-blue-600: rgb(34 86 228);
73
- --raw-color-core-blue-700: rgb(14 57 176);
74
- --raw-color-core-blue-800: rgb(12 50 156);
75
- --raw-color-core-blue-900: rgb(8 38 125);
76
- --raw-color-core-blue-950: rgb(5 25 84);
79
+ --raw-color-core-blue-50: rgb(242 245 250);
80
+ --raw-color-core-blue-100: rgb(230 234 246);
81
+ --raw-color-core-blue-200: rgb(205 214 239);
82
+ --raw-color-core-blue-300: rgb(169 186 231);
83
+ --raw-color-core-blue-400: rgb(126 152 223);
84
+ --raw-color-core-blue-500: rgb(79 115 216);
85
+ --raw-color-core-blue-600: rgb(38 81 198);
86
+ --raw-color-core-blue-700: rgb(27 63 164);
87
+ --raw-color-core-blue-800: rgb(20 51 135);
88
+ --raw-color-core-blue-900: rgb(14 38 104);
89
+ --raw-color-core-blue-950: rgb(10, 28, 77);
77
90
  /* DARK */
78
- --raw-color-core-blue-50-dark: rgb(13 25 45);
79
- --raw-color-core-blue-100-dark: rgb(17 32 56);
80
- --raw-color-core-blue-200-dark: rgb(34 64 112);
81
- --raw-color-core-blue-300-dark: rgb(51 96 168);
82
- --raw-color-core-blue-400-dark: rgb(85 128 204);
83
- --raw-color-core-blue-500-dark: rgb(119 153 230);
84
- --raw-color-core-blue-600-dark: rgb(136 167 255);
85
- --raw-color-core-blue-700-dark: rgb(159 184 255);
86
- --raw-color-core-blue-800-dark: rgb(182 201 255);
87
- --raw-color-core-blue-900-dark: rgb(205 218 255);
88
- --raw-color-core-blue-950-dark: rgb(235 242 255);
91
+ --raw-color-core-blue-50-dark: var(--raw-color-core-blue-50);
92
+ --raw-color-core-blue-100-dark: var(--raw-color-core-blue-100);
93
+ --raw-color-core-blue-200-dark: var(--raw-color-core-blue-200);
94
+ --raw-color-core-blue-300-dark: var(--raw-color-core-blue-300);
95
+ --raw-color-core-blue-400-dark: var(--raw-color-core-blue-400);
96
+ --raw-color-core-blue-500-dark: var(--raw-color-core-blue-500);
97
+ --raw-color-core-blue-600-dark: var(--raw-color-core-blue-600);
98
+ --raw-color-core-blue-700-dark: var(--raw-color-core-blue-700);
99
+ --raw-color-core-blue-800-dark: var(--raw-color-core-blue-800);
100
+ --raw-color-core-blue-900-dark: var(--raw-color-core-blue-900);
101
+ --raw-color-core-blue-950-dark: var(--raw-color-core-blue-950);
89
102
 
90
103
  /** Base Green **/
91
104
  /* LIGHT */
92
- --raw-color-core-green-50: rgb(236 246 242);
93
- --raw-color-core-green-100: rgb(220 238 230);
94
- --raw-color-core-green-200: rgb(190 225 210);
95
- --raw-color-core-green-300: rgb(140 200 173);
96
- --raw-color-core-green-400: rgb(90 175 137);
97
- --raw-color-core-green-500: rgb(51 160 115);
98
- --raw-color-core-green-600: rgb(28 142 98);
99
- --raw-color-core-green-700: rgb(22 115 80);
100
- --raw-color-core-green-800: rgb(17 88 61);
101
- --raw-color-core-green-900: rgb(13 66 46);
102
- --raw-color-core-green-950: rgb(7 33 23);
105
+ --raw-color-core-green-50: rgb(242 250 247);
106
+ --raw-color-core-green-100: rgb(230 246 239);
107
+ --raw-color-core-green-200: rgb(205 239 225);
108
+ --raw-color-core-green-300: rgb(169 231 205);
109
+ --raw-color-core-green-400: rgb(126 223 182);
110
+ --raw-color-core-green-500: rgb(79 216 159);
111
+ --raw-color-core-green-600: rgb(38 198 131);
112
+ --raw-color-core-green-700: rgb(27 164 107);
113
+ --raw-color-core-green-800: rgb(20 135 87);
114
+ --raw-color-core-green-900: rgb(14 104 66);
115
+ --raw-color-core-green-950: rgb(8 64 40);
103
116
  /* DARK */
104
- --raw-color-core-green-50-dark: rgb(8 33 24);
105
- --raw-color-core-green-100-dark: rgb(17 67 49);
106
- --raw-color-core-green-200-dark: rgb(25 100 73);
107
- --raw-color-core-green-300-dark: rgb(34 134 97);
108
- --raw-color-core-green-400-dark: rgb(42 167 121);
109
- --raw-color-core-green-500-dark: rgb(72 178 137);
110
- --raw-color-core-green-600-dark: rgb(102 189 153);
111
- --raw-color-core-green-700-dark: rgb(153 211 186);
112
- --raw-color-core-green-800-dark: rgb(204 233 220);
113
- --raw-color-core-green-900-dark: rgb(230 244 238);
114
- --raw-color-core-green-950-dark: rgb(242 249 246);
117
+ --raw-color-core-green-50-dark: var(--raw-color-core-green-50);
118
+ --raw-color-core-green-100-dark: var(--raw-color-core-green-100);
119
+ --raw-color-core-green-200-dark: var(--raw-color-core-green-200);
120
+ --raw-color-core-green-300-dark: var(--raw-color-core-green-300);
121
+ --raw-color-core-green-400-dark: var(--raw-color-core-green-400);
122
+ --raw-color-core-green-500-dark: var(--raw-color-core-green-500);
123
+ --raw-color-core-green-600-dark: var(--raw-color-core-green-600);
124
+ --raw-color-core-green-700-dark: var(--raw-color-core-green-700);
125
+ --raw-color-core-green-800-dark: var(--raw-color-core-green-800);
126
+ --raw-color-core-green-900-dark: var(--raw-color-core-green-900);
127
+ --raw-color-core-green-950-dark: var(--raw-color-core-green-950);
115
128
 
116
129
  /** Base Red **/
117
130
  /* LIGHT */
118
- --raw-color-core-red-50: rgb(254 242 243);
119
- --raw-color-core-red-100: rgb(253 230 233);
120
- --raw-color-core-red-200: rgb(251 204 210);
121
- --raw-color-core-red-300: rgb(247 166 176);
122
- --raw-color-core-red-400: rgb(235 115 131);
123
- --raw-color-core-red-500: rgb(214 64 87);
124
- --raw-color-core-red-600: rgb(193 13 48);
125
- --raw-color-core-red-700: rgb(154 10 38);
126
- --raw-color-core-red-800: rgb(116 8 29);
127
- --raw-color-core-red-900: rgb(77 5 19);
128
- --raw-color-core-red-950: rgb(39 3 10);
131
+ --raw-color-core-red-50: rgb(250 242 244);
132
+ --raw-color-core-red-100: rgb(246 230 232);
133
+ --raw-color-core-red-200: rgb(239 205 210);
134
+ --raw-color-core-red-300: rgb(231 169 178);
135
+ --raw-color-core-red-400: rgb(223 126 141);
136
+ --raw-color-core-red-500: rgb(216 79 99);
137
+ --raw-color-core-red-600: rgb(198 38 62);
138
+ --raw-color-core-red-700: rgb(164 27 47);
139
+ --raw-color-core-red-800: rgb(135 20 37);
140
+ --raw-color-core-red-900: rgb(104 14 28);
141
+ --raw-color-core-red-950: rgb(77, 10, 20);
129
142
  /* DARK */
130
- --raw-color-core-red-50-dark: rgb(51 12 18);
131
- --raw-color-core-red-100-dark: rgb(82 18 29);
132
- --raw-color-core-red-200-dark: rgb(128 28 45);
133
- --raw-color-core-red-300-dark: rgb(173 38 62);
134
- --raw-color-core-red-400-dark: rgb(219 48 78);
135
- --raw-color-core-red-500-dark: rgb(242 95 116);
136
- --raw-color-core-red-600-dark: rgb(242 122 138);
137
- --raw-color-core-red-700-dark: rgb(245 158 170);
138
- --raw-color-core-red-800-dark: rgb(249 189 197);
139
- --raw-color-core-red-900-dark: rgb(252 219 224);
140
- --raw-color-core-red-950-dark: rgb(254 242 243);
143
+ --raw-color-core-red-50-dark: var(--raw-color-core-red-50);
144
+ --raw-color-core-red-100-dark: var(--raw-color-core-red-100);
145
+ --raw-color-core-red-200-dark: var(--raw-color-core-red-200);
146
+ --raw-color-core-red-300-dark: var(--raw-color-core-red-300);
147
+ --raw-color-core-red-400-dark: var(--raw-color-core-red-400);
148
+ --raw-color-core-red-500-dark: var(--raw-color-core-red-500);
149
+ --raw-color-core-red-600-dark: var(--raw-color-core-red-600);
150
+ --raw-color-core-red-700-dark: var(--raw-color-core-red-700);
151
+ --raw-color-core-red-800-dark: var(--raw-color-core-red-800);
152
+ --raw-color-core-red-900-dark: var(--raw-color-core-red-900);
153
+ --raw-color-core-red-950-dark: var(--raw-color-core-red-950);
141
154
 
142
155
  --raw-color-background: var(--raw-color-bg-elevation-default);
143
156
  --raw-color-background-dark: var(--raw-color-bg-elevation-default-dark);
@@ -146,30 +159,30 @@
146
159
 
147
160
  /** Base Orange **/
148
161
  /* LIGHT */
149
- --raw-color-core-orange-50: rgb(255 247 241);
150
- --raw-color-core-orange-100: rgb(255 237 224);
151
- --raw-color-core-orange-200: rgb(255 221 199);
152
- --raw-color-core-orange-300: rgb(255 197 163);
153
- --raw-color-core-orange-400: rgb(255 170 122);
154
- --raw-color-core-orange-500: rgb(255 139 77);
155
- --raw-color-core-orange-600: rgb(238 84 50);
156
- --raw-color-core-orange-700: rgb(190 67 40);
157
- --raw-color-core-orange-800: rgb(143 50 30);
158
- --raw-color-core-orange-900: rgb(95 34 20);
159
- --raw-color-core-orange-950: rgb(48 17 10);
162
+ --raw-color-core-orange-50: rgb(250 245 242);
163
+ --raw-color-core-orange-100: rgb(246 235 230);
164
+ --raw-color-core-orange-200: rgb(239 217 205);
165
+ --raw-color-core-orange-300: rgb(231 191 169);
166
+ --raw-color-core-orange-400: rgb(223 160 126);
167
+ --raw-color-core-orange-500: rgb(216 127 79);
168
+ --raw-color-core-orange-600: rgb(198 94 38);
169
+ --raw-color-core-orange-700: rgb(164 75 27);
170
+ --raw-color-core-orange-800: rgb(135 60 20);
171
+ --raw-color-core-orange-900: rgb(104 45 14);
172
+ --raw-color-core-orange-950: rgb(77, 32, 10);
160
173
 
161
174
  /* DARK */
162
- --raw-color-core-orange-50-dark: rgb(48 17 10);
163
- --raw-color-core-orange-100-dark: rgb(95 34 20);
164
- --raw-color-core-orange-200-dark: rgb(143 50 30);
165
- --raw-color-core-orange-300-dark: rgb(190 67 40);
166
- --raw-color-core-orange-400-dark: rgb(238 84 50);
167
- --raw-color-core-orange-500-dark: rgb(255 139 77);
168
- --raw-color-core-orange-600-dark: rgb(255 170 122);
169
- --raw-color-core-orange-700-dark: rgb(255 197 163);
170
- --raw-color-core-orange-800-dark: rgb(255 221 199);
171
- --raw-color-core-orange-900-dark: rgb(255 237 224);
172
- --raw-color-core-orange-950-dark: rgb(255 247 241);
175
+ --raw-color-core-orange-50-dark: var(--raw-color-core-orange-50);
176
+ --raw-color-core-orange-100-dark: var(--raw-color-core-orange-100);
177
+ --raw-color-core-orange-200-dark: var(--raw-color-core-orange-200);
178
+ --raw-color-core-orange-300-dark: var(--raw-color-core-orange-300);
179
+ --raw-color-core-orange-400-dark: var(--raw-color-core-orange-400);
180
+ --raw-color-core-orange-500-dark: var(--raw-color-core-orange-500);
181
+ --raw-color-core-orange-600-dark: var(--raw-color-core-orange-600);
182
+ --raw-color-core-orange-700-dark: var(--raw-color-core-orange-700);
183
+ --raw-color-core-orange-800-dark: var(--raw-color-core-orange-800);
184
+ --raw-color-core-orange-900-dark: var(--raw-color-core-orange-900);
185
+ --raw-color-core-orange-950-dark: var(--raw-color-core-orange-950);
173
186
  }
174
187
 
175
188
  :root {
@@ -185,21 +198,18 @@
185
198
  --raw-color-text-tertiary-dark: var(--raw-color-core-ui-400);
186
199
  --raw-color-text-disabled-dark: var(--raw-color-core-ui-500);
187
200
 
188
-
189
201
  /* Brand Texts - Light */
190
202
  --raw-color-text-brand: var(--raw-color-brand);
191
203
  --raw-color-text-brand-hover: var(--raw-color-brand-moderate);
192
204
  --raw-color-text-brand-active: var(--raw-color-brand-strong);
193
205
  --raw-color-text-brand-disabled: var(--raw-color-brand-light);
194
206
 
195
-
196
207
  /* Brand Texts - Dark */
197
208
  --raw-color-text-brand-dark: var(--raw-color-brand-dark);
198
209
  --raw-color-text-brand-hover-dark: var(--raw-color-brand-moderate-dark);
199
210
  --raw-color-text-brand-active-dark: var(--raw-color-brand-strong-dark);
200
211
  --raw-color-text-brand-disabled-dark: var(--raw-color-brand-light-dark);
201
212
 
202
-
203
213
  /* Interactive Text - Light */
204
214
  --raw-color-text-link: var(--raw-color-brand);
205
215
  --raw-color-text-link-hover: var(--raw-color-brand-moderate);
@@ -220,11 +230,11 @@
220
230
 
221
231
  /* Status Text - Dark */
222
232
  --raw-color-text-neutral-dark: var(--raw-color-core-ui-700-dark);
223
- --raw-color-text-success-dark: var(--raw-color-core-green-700-dark);
224
- --raw-color-text-error-dark: var(--raw-color-core-red-700-dark);
225
- --raw-color-text-warning-dark: var(--raw-color-core-orange-700-dark);
226
- --raw-color-text-attention-dark: var(--raw-color-core-yellow-700-dark);
227
- --raw-color-text-info-dark: var(--raw-color-core-blue-700-dark);
233
+ --raw-color-text-success-dark: var(--raw-color-core-green-400);
234
+ --raw-color-text-error-dark: var(--raw-color-core-red-500);
235
+ --raw-color-text-warning-dark: var(--raw-color-core-orange-300);
236
+ --raw-color-text-attention-dark: var(--raw-color-core-yellow-500);
237
+ --raw-color-text-info-dark: var(--raw-color-core-blue-300);
228
238
  }
229
239
 
230
240
  :root {
@@ -233,7 +243,11 @@
233
243
  --raw-color-background-surface: var(--raw-color-core-white);
234
244
  --raw-color-background-surface-elevated: var(--raw-color-core-ui-50);
235
245
  --raw-color-background-surface-sunken: var(--raw-color-core-ui-200);
236
- --raw-color-background-overlay: color-mix(in srgb, var(--raw-color-core-ui-900) 95%, transparent);
246
+ --raw-color-background-overlay: color-mix(
247
+ in srgb,
248
+ var(--raw-color-core-ui-900) 95%,
249
+ transparent
250
+ );
237
251
  --raw-color-background-inverted: var(--raw-color-core-ui-900);
238
252
 
239
253
  /* Base Backgrounds - Dark */
@@ -241,7 +255,11 @@
241
255
  --raw-color-background-surface-dark: var(--raw-color-core-ui-800);
242
256
  --raw-color-background-surface-elevated-dark: var(--raw-color-core-ui-700);
243
257
  --raw-color-background-surface-sunken-dark: var(--raw-color-core-ui-900);
244
- --raw-color-background-overlay-dark: color-mix(in srgb, var(--raw-color-core-ui-900) 95%, transparent);
258
+ --raw-color-background-overlay-dark: color-mix(
259
+ in srgb,
260
+ var(--raw-color-core-ui-900) 95%,
261
+ transparent
262
+ );
245
263
  --raw-color-background-inverted-dark: var(--raw-color-core-ui-50);
246
264
 
247
265
  /* Brand Backgrounds - Light */
@@ -250,14 +268,12 @@
250
268
  --raw-color-background-brand-active: var(--raw-color-brand-soft);
251
269
  --raw-color-background-brand-disabled: var(--raw-color-brand-light);
252
270
 
253
-
254
271
  /* Brand Backgrounds - Dark */
255
272
  --raw-color-background-brand-dark: var(--raw-color-brand-dark);
256
273
  --raw-color-background-brand-hover-dark: var(--raw-color-brand-moderate-dark);
257
274
  --raw-color-background-brand-active-dark: var(--raw-color-brand-soft-dark);
258
275
  --raw-color-background-brand-disabled-dark: var(--raw-color-brand-light-dark);
259
276
 
260
-
261
277
  /* Status Backgrounds - Light */
262
278
  --raw-color-background-neutral: var(--raw-color-core-ui-200);
263
279
  --raw-color-background-neutral-hover: var(--raw-color-core-ui-300);
@@ -282,21 +298,23 @@
282
298
  --raw-color-background-neutral-dark: var(--raw-color-core-ui-600);
283
299
  --raw-color-background-neutral-hover-dark: var(--raw-color-core-ui-800);
284
300
  --raw-color-background-neutral-active-dark: var(--raw-color-core-ui-600);
285
- --raw-color-background-success-dark: var(--raw-color-core-green-100-dark);
286
- --raw-color-background-success-hover-dark: var(--raw-color-core-green-200-dark);
287
- --raw-color-background-success-active-dark: var(--raw-color-core-green-600-dark);
288
- --raw-color-background-error-dark: var(--raw-color-core-red-100-dark);
289
- --raw-color-background-error-hover-dark: var(--raw-color-core-red-200-dark);
290
- --raw-color-background-error-active-dark: var(--raw-color-core-red-600-dark);
291
- --raw-color-background-warning-dark: var(--raw-color-core-orange-100-dark);
292
- --raw-color-background-warning-hover-dark: var(--raw-color-core-orange-200-dark);
293
- --raw-color-background-warning-active-dark: var(--raw-color-core-orange-600-dark);
294
- --raw-color-background-attention-dark: var(--raw-color-core-yellow-100-dark);
295
- --raw-color-background-attention-hover-dark: var(--raw-color-core-yellow-200-dark);
296
- --raw-color-background-attention-active-dark: var(--raw-color-core-yellow-600-dark);
297
- --raw-color-background-info-dark: var(--raw-color-core-blue-100-dark);
298
- --raw-color-background-info-hover-dark: var(--raw-color-core-blue-200-dark);
299
- --raw-color-background-info-active-dark: var(--raw-color-core-blue-600-dark);
301
+ --raw-color-background-success-dark: var(--raw-color-core-green-900);
302
+ --raw-color-background-success-hover-dark: var(--raw-color-core-green-700);
303
+ --raw-color-background-success-active-dark: var(--raw-color-core-green-400);
304
+ --raw-color-background-error-dark: var(--raw-color-core-red-950);
305
+ --raw-color-background-error-hover-dark: var(--raw-color-core-red-800);
306
+ --raw-color-background-error-active-dark: var(--raw-color-core-red-400);
307
+ --raw-color-background-warning-dark: var(--raw-color-core-orange-900);
308
+ --raw-color-background-warning-hover-dark: var(--raw-color-core-orange-800);
309
+ --raw-color-background-warning-active-dark: var(--raw-color-core-orange-400);
310
+ --raw-color-background-attention-dark: var(--raw-color-core-yellow-950);
311
+ --raw-color-background-attention-hover-dark: var(--raw-color-core-yellow-900);
312
+ --raw-color-background-attention-active-dark: var(
313
+ --raw-color-core-yellow-500
314
+ );
315
+ --raw-color-background-info-dark: var(--raw-color-core-blue-950);
316
+ --raw-color-background-info-hover-dark: var(--raw-color-core-blue-900);
317
+ --raw-color-background-info-active-dark: var(--raw-color-core-blue-400);
300
318
  }
301
319
 
302
320
  :root {
@@ -304,13 +322,21 @@
304
322
  --raw-color-border-subtle: var(--raw-color-core-ui-200);
305
323
  --raw-color-border-default: var(--raw-color-core-ui-300);
306
324
  --raw-color-border-strong: var(--raw-color-core-ui-400);
307
- --raw-color-border-highlight: color-mix(in srgb, var(--raw-color-border-strong) 50%, transparent);
325
+ --raw-color-border-highlight: color-mix(
326
+ in srgb,
327
+ var(--raw-color-border-strong) 50%,
328
+ transparent
329
+ );
308
330
 
309
331
  /* Default Borders - Dark */
310
332
  --raw-color-border-subtle-dark: var(--raw-color-core-ui-800);
311
333
  --raw-color-border-default-dark: var(--raw-color-core-ui-700);
312
334
  --raw-color-border-strong-dark: var(--raw-color-core-ui-500);
313
- --raw-color-border-highlight-dark: color-mix(in srgb, var(--raw-color-border-strong-dark) 50%, transparent);
335
+ --raw-color-border-highlight-dark: color-mix(
336
+ in srgb,
337
+ var(--raw-color-border-strong-dark) 50%,
338
+ transparent
339
+ );
314
340
 
315
341
  /* Interactive Borders - Light */
316
342
  --raw-color-border-focus: var(--raw-color-core-ui-500);
@@ -328,14 +354,12 @@
328
354
  --raw-color-border-brand-active: var(--raw-color-brand-soft);
329
355
  --raw-color-border-brand-disabled: var(--raw-color-brand-light);
330
356
 
331
-
332
357
  /* Brand Borders - Dark */
333
358
  --raw-color-border-brand-dark: var(--raw-color-brand-dark);
334
359
  --raw-color-border-brand-hover-dark: var(--raw-color-brand-moderate-dark);
335
360
  --raw-color-border-brand-active-dark: var(--raw-color-brand-soft-dark);
336
361
  --raw-color-border-brand-disabled-dark: var(--raw-color-brand-light-dark);
337
362
 
338
-
339
363
  /* Status Borders - Light */
340
364
  --raw-color-border-neutral: var(--raw-color-core-ui-300);
341
365
  --raw-color-border-success: var(--raw-color-core-green-200);
@@ -346,94 +370,300 @@
346
370
 
347
371
  /* Status Borders - Dark */
348
372
  --raw-color-border-neutral-dark: var(--raw-color-core-ui-500);
349
- --raw-color-border-success-dark: var(--raw-color-core-green-200-dark);
350
- --raw-color-border-error-dark: var(--raw-color-core-red-200-dark);
351
- --raw-color-border-warning-dark: var(--raw-color-core-orange-200-dark);
352
- --raw-color-border-attention-dark: var(--raw-color-core-yellow-200-dark);
353
- --raw-color-border-info-dark: var(--raw-color-core-blue-300-dark);
373
+ --raw-color-border-success-dark: var(--raw-color-core-green-700);
374
+ --raw-color-border-error-dark: var(--raw-color-core-red-800);
375
+ --raw-color-border-warning-dark: var(--raw-color-core-orange-800);
376
+ --raw-color-border-attention-dark: var(--raw-color-core-yellow-950);
377
+ --raw-color-border-info-dark: var(--raw-color-core-blue-700);
354
378
  }
355
379
 
356
-
357
380
  @theme {
358
381
  /* Colors - Semantic colors using light-dark() */
359
382
  /* Foreground */
360
- --color-foreground: light-dark(var(--raw-color-foreground), var(--raw-color-foreground-dark));
383
+ --color-foreground: light-dark(
384
+ var(--raw-color-foreground),
385
+ var(--raw-color-foreground-dark)
386
+ );
361
387
 
362
388
  /* Text Colors */
363
- --color-text-default: light-dark(var(--raw-color-text-default), var(--raw-color-text-default-dark));
364
- --color-text-secondary: light-dark(var(--raw-color-text-secondary), var(--raw-color-text-secondary-dark));
365
- --color-text-tertiary: light-dark(var(--raw-color-text-tertiary), var(--raw-color-text-tertiary-dark));
366
- --color-text-disabled: light-dark(var(--raw-color-text-disabled), var(--raw-color-text-disabled-dark));
367
- --color-text-inverted: light-dark(var(--raw-color-text-default-dark), var(--raw-color-text-default));
368
- --color-text-link: light-dark(var(--raw-color-text-link), var(--raw-color-text-link-dark));
369
- --color-text-link-hover: light-dark(var(--raw-color-text-link-hover), var(--raw-color-text-link-hover-dark));
370
- --color-text-link-active: light-dark(var(--raw-color-text-link-active), var(--raw-color-text-link-active-dark));
371
- --color-text-brand: light-dark(var(--raw-color-text-brand), var(--raw-color-text-brand-dark));
372
- --color-text-brand-hover: light-dark(var(--raw-color-text-brand-hover), var(--raw-color-text-brand-hover-dark));
373
- --color-text-brand-active: light-dark(var(--raw-color-text-brand-active), var(--raw-color-text-brand-active-dark));
374
- --color-text-brand-disabled: light-dark(var(--raw-color-text-brand-disabled), var(--raw-color-text-brand-disabled-dark));
375
- --color-text-neutral: light-dark(var(--raw-color-text-neutral), var(--raw-color-text-neutral-dark));
376
- --color-text-success: light-dark(var(--raw-color-text-success), var(--raw-color-text-success-dark));
377
- --color-text-error: light-dark(var(--raw-color-text-error), var(--raw-color-text-error-dark));
378
- --color-text-warning: light-dark(var(--raw-color-text-warning), var(--raw-color-text-warning-dark));
379
- --color-text-attention: light-dark(var(--raw-color-text-attention), var(--raw-color-text-attention-dark));
380
- --color-text-info: light-dark(var(--raw-color-text-info), var(--raw-color-text-info-dark));
389
+ --color-text-default: light-dark(
390
+ var(--raw-color-text-default),
391
+ var(--raw-color-text-default-dark)
392
+ );
393
+ --color-text-secondary: light-dark(
394
+ var(--raw-color-text-secondary),
395
+ var(--raw-color-text-secondary-dark)
396
+ );
397
+ --color-text-tertiary: light-dark(
398
+ var(--raw-color-text-tertiary),
399
+ var(--raw-color-text-tertiary-dark)
400
+ );
401
+ --color-text-disabled: light-dark(
402
+ var(--raw-color-text-disabled),
403
+ var(--raw-color-text-disabled-dark)
404
+ );
405
+ --color-text-inverted: light-dark(
406
+ var(--raw-color-text-default-dark),
407
+ var(--raw-color-text-default)
408
+ );
409
+ --color-text-link: light-dark(
410
+ var(--raw-color-text-link),
411
+ var(--raw-color-text-link-dark)
412
+ );
413
+ --color-text-link-hover: light-dark(
414
+ var(--raw-color-text-link-hover),
415
+ var(--raw-color-text-link-hover-dark)
416
+ );
417
+ --color-text-link-active: light-dark(
418
+ var(--raw-color-text-link-active),
419
+ var(--raw-color-text-link-active-dark)
420
+ );
421
+ --color-text-brand: light-dark(
422
+ var(--raw-color-text-brand),
423
+ var(--raw-color-text-brand-dark)
424
+ );
425
+ --color-text-brand-hover: light-dark(
426
+ var(--raw-color-text-brand-hover),
427
+ var(--raw-color-text-brand-hover-dark)
428
+ );
429
+ --color-text-brand-active: light-dark(
430
+ var(--raw-color-text-brand-active),
431
+ var(--raw-color-text-brand-active-dark)
432
+ );
433
+ --color-text-brand-disabled: light-dark(
434
+ var(--raw-color-text-brand-disabled),
435
+ var(--raw-color-text-brand-disabled-dark)
436
+ );
437
+ --color-text-neutral: light-dark(
438
+ var(--raw-color-text-neutral),
439
+ var(--raw-color-text-neutral-dark)
440
+ );
441
+ --color-text-success: light-dark(
442
+ var(--raw-color-text-success),
443
+ var(--raw-color-text-success-dark)
444
+ );
445
+ --color-text-error: light-dark(
446
+ var(--raw-color-text-error),
447
+ var(--raw-color-text-error-dark)
448
+ );
449
+ --color-text-warning: light-dark(
450
+ var(--raw-color-text-warning),
451
+ var(--raw-color-text-warning-dark)
452
+ );
453
+ --color-text-attention: light-dark(
454
+ var(--raw-color-text-attention),
455
+ var(--raw-color-text-attention-dark)
456
+ );
457
+ --color-text-info: light-dark(
458
+ var(--raw-color-text-info),
459
+ var(--raw-color-text-info-dark)
460
+ );
381
461
 
382
462
  /* Background Colors */
383
- --color-background-page: light-dark(var(--raw-color-background-page), var(--raw-color-background-page-dark));
384
- --color-background-surface: light-dark(var(--raw-color-background-surface), var(--raw-color-background-surface-dark));
385
- --color-background-surface-elevated: light-dark(var(--raw-color-background-surface-elevated), var(--raw-color-background-surface-elevated-dark));
386
- --color-background-surface-sunken: light-dark(var(--raw-color-background-surface-sunken), var(--raw-color-background-surface-sunken-dark));
387
- --color-background-overlay: light-dark(var(--raw-color-background-overlay), var(--raw-color-background-overlay-dark));
388
- --color-background-inverted: light-dark(var(--raw-color-background-inverted), var(--raw-color-background-inverted-dark));
389
- --color-background-brand: light-dark(var(--raw-color-background-brand), var(--raw-color-background-brand-dark));
390
- --color-background-brand-hover: light-dark(var(--raw-color-background-brand-hover), var(--raw-color-background-brand-hover-dark));
391
- --color-background-brand-active: light-dark(var(--raw-color-background-brand-active), var(--raw-color-background-brand-active-dark));
392
- --color-background-brand-disabled: light-dark(var(--raw-color-background-brand-disabled), var(--raw-color-background-brand-disabled-dark));
393
- --color-background-neutral: light-dark(var(--raw-color-background-neutral), var(--raw-color-background-neutral-dark));
394
- --color-background-neutral-hover: light-dark(var(--raw-color-background-neutral-hover), var(--raw-color-background-neutral-hover-dark));
395
- --color-background-neutral-active: light-dark(var(--raw-color-background-neutral-active), var(--raw-color-background-neutral-active-dark));
396
- --color-background-success: light-dark(var(--raw-color-background-success), var(--raw-color-background-success-dark));
397
- --color-background-success-hover: light-dark(var(--raw-color-background-success-hover), var(--raw-color-background-success-hover-dark));
398
- --color-background-success-active: light-dark(var(--raw-color-background-success-active), var(--raw-color-background-success-active-dark));
399
- --color-background-error: light-dark(var(--raw-color-background-error), var(--raw-color-background-error-dark));
400
- --color-background-error-hover: light-dark(var(--raw-color-background-error-hover), var(--raw-color-background-error-hover-dark));
401
- --color-background-error-active: light-dark(var(--raw-color-background-error-active), var(--raw-color-background-error-active-dark));
402
- --color-background-warning: light-dark(var(--raw-color-background-warning), var(--raw-color-background-warning-dark));
403
- --color-background-warning-hover: light-dark(var(--raw-color-background-warning-hover), var(--raw-color-background-warning-hover-dark));
404
- --color-background-warning-active: light-dark(var(--raw-color-background-warning-active), var(--raw-color-background-warning-active-dark));
405
- --color-background-attention: light-dark(var(--raw-color-background-attention), var(--raw-color-background-attention-dark));
406
- --color-background-attention-hover: light-dark(var(--raw-color-background-attention-hover), var(--raw-color-background-attention-hover-dark));
407
- --color-background-attention-active: light-dark(var(--raw-color-background-attention-active), var(--raw-color-background-attention-active-dark));
408
- --color-background-info: light-dark(var(--raw-color-background-info), var(--raw-color-background-info-dark));
409
- --color-background-info-hover: light-dark(var(--raw-color-background-info-hover), var(--raw-color-background-info-hover-dark));
410
- --color-background-info-active: light-dark(var(--raw-color-background-info-active), var(--raw-color-background-info-active-dark));
463
+ --color-background-page: light-dark(
464
+ var(--raw-color-background-page),
465
+ var(--raw-color-background-page-dark)
466
+ );
467
+ --color-background-surface: light-dark(
468
+ var(--raw-color-background-surface),
469
+ var(--raw-color-background-surface-dark)
470
+ );
471
+ --color-background-surface-elevated: light-dark(
472
+ var(--raw-color-background-surface-elevated),
473
+ var(--raw-color-background-surface-elevated-dark)
474
+ );
475
+ --color-background-surface-sunken: light-dark(
476
+ var(--raw-color-background-surface-sunken),
477
+ var(--raw-color-background-surface-sunken-dark)
478
+ );
479
+ --color-background-overlay: light-dark(
480
+ var(--raw-color-background-overlay),
481
+ var(--raw-color-background-overlay-dark)
482
+ );
483
+ --color-background-inverted: light-dark(
484
+ var(--raw-color-background-inverted),
485
+ var(--raw-color-background-inverted-dark)
486
+ );
487
+ --color-background-brand: light-dark(
488
+ var(--raw-color-background-brand),
489
+ var(--raw-color-background-brand-dark)
490
+ );
491
+ --color-background-brand-hover: light-dark(
492
+ var(--raw-color-background-brand-hover),
493
+ var(--raw-color-background-brand-hover-dark)
494
+ );
495
+ --color-background-brand-active: light-dark(
496
+ var(--raw-color-background-brand-active),
497
+ var(--raw-color-background-brand-active-dark)
498
+ );
499
+ --color-background-brand-disabled: light-dark(
500
+ var(--raw-color-background-brand-disabled),
501
+ var(--raw-color-background-brand-disabled-dark)
502
+ );
503
+ --color-background-neutral: light-dark(
504
+ var(--raw-color-background-neutral),
505
+ var(--raw-color-background-neutral-dark)
506
+ );
507
+ --color-background-neutral-hover: light-dark(
508
+ var(--raw-color-background-neutral-hover),
509
+ var(--raw-color-background-neutral-hover-dark)
510
+ );
511
+ --color-background-neutral-active: light-dark(
512
+ var(--raw-color-background-neutral-active),
513
+ var(--raw-color-background-neutral-active-dark)
514
+ );
515
+ --color-background-success: light-dark(
516
+ var(--raw-color-background-success),
517
+ var(--raw-color-background-success-dark)
518
+ );
519
+ --color-background-success-hover: light-dark(
520
+ var(--raw-color-background-success-hover),
521
+ var(--raw-color-background-success-hover-dark)
522
+ );
523
+ --color-background-success-active: light-dark(
524
+ var(--raw-color-background-success-active),
525
+ var(--raw-color-background-success-active-dark)
526
+ );
527
+ --color-background-error: light-dark(
528
+ var(--raw-color-background-error),
529
+ var(--raw-color-background-error-dark)
530
+ );
531
+ --color-background-error-hover: light-dark(
532
+ var(--raw-color-background-error-hover),
533
+ var(--raw-color-background-error-hover-dark)
534
+ );
535
+ --color-background-error-active: light-dark(
536
+ var(--raw-color-background-error-active),
537
+ var(--raw-color-background-error-active-dark)
538
+ );
539
+ --color-background-warning: light-dark(
540
+ var(--raw-color-background-warning),
541
+ var(--raw-color-background-warning-dark)
542
+ );
543
+ --color-background-warning-hover: light-dark(
544
+ var(--raw-color-background-warning-hover),
545
+ var(--raw-color-background-warning-hover-dark)
546
+ );
547
+ --color-background-warning-active: light-dark(
548
+ var(--raw-color-background-warning-active),
549
+ var(--raw-color-background-warning-active-dark)
550
+ );
551
+ --color-background-attention: light-dark(
552
+ var(--raw-color-background-attention),
553
+ var(--raw-color-background-attention-dark)
554
+ );
555
+ --color-background-attention-hover: light-dark(
556
+ var(--raw-color-background-attention-hover),
557
+ var(--raw-color-background-attention-hover-dark)
558
+ );
559
+ --color-background-attention-active: light-dark(
560
+ var(--raw-color-background-attention-active),
561
+ var(--raw-color-background-attention-active-dark)
562
+ );
563
+ --color-background-info: light-dark(
564
+ var(--raw-color-background-info),
565
+ var(--raw-color-background-info-dark)
566
+ );
567
+ --color-background-info-hover: light-dark(
568
+ var(--raw-color-background-info-hover),
569
+ var(--raw-color-background-info-hover-dark)
570
+ );
571
+ --color-background-info-active: light-dark(
572
+ var(--raw-color-background-info-active),
573
+ var(--raw-color-background-info-active-dark)
574
+ );
411
575
 
412
576
  /* Line/Border Colors */
413
- --color-line-default: light-dark(var(--raw-color-border-default), var(--raw-color-border-default-dark));
414
- --color-line-subtle: light-dark(var(--raw-color-border-subtle), var(--raw-color-border-subtle-dark));
415
- --color-line-strong: light-dark(var(--raw-color-border-strong), var(--raw-color-border-strong-dark));
416
- --color-line-highlight: light-dark(var(--raw-color-border-highlight), var(--raw-color-border-highlight-dark));
417
- --color-line-focus: light-dark(var(--raw-color-border-focus), var(--raw-color-border-focus-dark));
418
- --color-line-focus-visible: light-dark(var(--raw-color-border-focus-visible), var(--raw-color-border-focus-visible-dark));
419
- --color-line-hover: light-dark(var(--raw-color-border-hover), var(--raw-color-border-hover-dark));
420
- --color-line-brand: light-dark(var(--raw-color-brand), var(--raw-color-brand-dark));
421
- --color-line-brand-hover: light-dark(var(--raw-color-brand), var(--raw-color-brand-dark));
422
- --color-line-brand-active: light-dark(var(--raw-color-brand-light), var(--raw-color-brand-light-dark));
423
- --color-line-brand-disabled: light-dark(var(--raw-color-brand-light), var(--raw-color-brand-light-dark));
424
- --color-line-neutral: light-dark(var(--raw-color-border-neutral), var(--raw-color-border-neutral-dark));
425
- --color-line-success: light-dark(var(--raw-color-border-success), var(--raw-color-border-success-dark));
426
- --color-line-error: light-dark(var(--raw-color-border-error), var(--raw-color-border-error-dark));
427
- --color-line-warning: light-dark(var(--raw-color-border-warning), var(--raw-color-border-warning-dark));
428
- --color-line-attention: light-dark(var(--raw-color-border-attention), var(--raw-color-border-attention-dark));
429
- --color-line-info: light-dark(var(--raw-color-border-info), var(--raw-color-border-info-dark));
577
+ --color-line-default: light-dark(
578
+ var(--raw-color-border-default),
579
+ var(--raw-color-border-default-dark)
580
+ );
581
+ --color-line-subtle: light-dark(
582
+ var(--raw-color-border-subtle),
583
+ var(--raw-color-border-subtle-dark)
584
+ );
585
+ --color-line-strong: light-dark(
586
+ var(--raw-color-border-strong),
587
+ var(--raw-color-border-strong-dark)
588
+ );
589
+ --color-line-highlight: light-dark(
590
+ var(--raw-color-border-highlight),
591
+ var(--raw-color-border-highlight-dark)
592
+ );
593
+ --color-line-focus: light-dark(
594
+ var(--raw-color-border-focus),
595
+ var(--raw-color-border-focus-dark)
596
+ );
597
+ --color-line-focus-visible: light-dark(
598
+ var(--raw-color-border-focus-visible),
599
+ var(--raw-color-border-focus-visible-dark)
600
+ );
601
+ --color-line-hover: light-dark(
602
+ var(--raw-color-border-hover),
603
+ var(--raw-color-border-hover-dark)
604
+ );
605
+ --color-line-brand: light-dark(
606
+ var(--raw-color-brand),
607
+ var(--raw-color-brand-dark)
608
+ );
609
+ --color-line-brand-hover: light-dark(
610
+ var(--raw-color-brand),
611
+ var(--raw-color-brand-dark)
612
+ );
613
+ --color-line-brand-active: light-dark(
614
+ var(--raw-color-brand-light),
615
+ var(--raw-color-brand-light-dark)
616
+ );
617
+ --color-line-brand-disabled: light-dark(
618
+ var(--raw-color-brand-light),
619
+ var(--raw-color-brand-light-dark)
620
+ );
621
+ --color-line-neutral: light-dark(
622
+ var(--raw-color-border-neutral),
623
+ var(--raw-color-border-neutral-dark)
624
+ );
625
+ --color-line-success: light-dark(
626
+ var(--raw-color-border-success),
627
+ var(--raw-color-border-success-dark)
628
+ );
629
+ --color-line-error: light-dark(
630
+ var(--raw-color-border-error),
631
+ var(--raw-color-border-error-dark)
632
+ );
633
+ --color-line-warning: light-dark(
634
+ var(--raw-color-border-warning),
635
+ var(--raw-color-border-warning-dark)
636
+ );
637
+ --color-line-attention: light-dark(
638
+ var(--raw-color-border-attention),
639
+ var(--raw-color-border-attention-dark)
640
+ );
641
+ --color-line-info: light-dark(
642
+ var(--raw-color-border-info),
643
+ var(--raw-color-border-info-dark)
644
+ );
430
645
 
431
646
  /* Brand Colors */
432
- --color-brand-default: light-dark(var(--raw-color-brand), var(--raw-color-brand-dark));
433
- --color-brand-strong: light-dark(var(--raw-color-brand-strong), var(--raw-color-brand-strong-dark));
434
- --color-brand-moderate: light-dark(var(--raw-color-brand-moderate), var(--raw-color-brand-moderate-dark));
435
- --color-brand-soft: light-dark(var(--raw-color-brand-soft), var(--raw-color-brand-soft-dark));
436
- --color-brand-light: light-dark(var(--raw-color-brand-light), var(--raw-color-brand-light-dark));
647
+ --color-brand-default: light-dark(
648
+ var(--raw-color-brand),
649
+ var(--raw-color-brand-dark)
650
+ );
651
+ --color-brand-strong: light-dark(
652
+ var(--raw-color-brand-strong),
653
+ var(--raw-color-brand-strong-dark)
654
+ );
655
+ --color-brand-moderate: light-dark(
656
+ var(--raw-color-brand-moderate),
657
+ var(--raw-color-brand-moderate-dark)
658
+ );
659
+ --color-brand-soft: light-dark(
660
+ var(--raw-color-brand-soft),
661
+ var(--raw-color-brand-soft-dark)
662
+ );
663
+ --color-brand-light: light-dark(
664
+ var(--raw-color-brand-light),
665
+ var(--raw-color-brand-light-dark)
666
+ );
437
667
 
438
668
  /* Core Colors */
439
669
  --color-core-white: var(--raw-color-core-white);
@@ -450,71 +680,83 @@
450
680
  --color-core-ui-900: var(--raw-color-core-ui-900);
451
681
  --color-core-ui-950: var(--raw-color-core-ui-950);
452
682
 
683
+ /* Core Gold */
684
+ --color-core-gold-50: var(--raw-color-core-gold-50);
685
+ --color-core-gold-100: var(--raw-color-core-gold-100);
686
+ --color-core-gold-200: var(--raw-color-core-gold-200);
687
+ --color-core-gold-300: var(--raw-color-core-gold-300);
688
+ --color-core-gold-400: var(--raw-color-core-gold-400);
689
+ --color-core-gold-500: var(--raw-color-core-gold-500);
690
+ --color-core-gold-600: var(--raw-color-core-gold-600);
691
+ --color-core-gold-700: var(--raw-color-core-gold-700);
692
+ --color-core-gold-800: var(--raw-color-core-gold-800);
693
+ --color-core-gold-900: var(--raw-color-core-gold-900);
694
+ --color-core-gold-950: var(--raw-color-core-gold-950);
695
+
453
696
  /* Core Yellow */
454
- --color-core-yellow-50: light-dark(var(--raw-color-core-yellow-50), var(--raw-color-core-yellow-50-dark));
455
- --color-core-yellow-100: light-dark(var(--raw-color-core-yellow-100), var(--raw-color-core-yellow-100-dark));
456
- --color-core-yellow-200: light-dark(var(--raw-color-core-yellow-200), var(--raw-color-core-yellow-200-dark));
457
- --color-core-yellow-300: light-dark(var(--raw-color-core-yellow-300), var(--raw-color-core-yellow-300-dark));
458
- --color-core-yellow-400: light-dark(var(--raw-color-core-yellow-400), var(--raw-color-core-yellow-400-dark));
459
- --color-core-yellow-500: light-dark(var(--raw-color-core-yellow-500), var(--raw-color-core-yellow-500-dark));
460
- --color-core-yellow-600: light-dark(var(--raw-color-core-yellow-600), var(--raw-color-core-yellow-600-dark));
461
- --color-core-yellow-700: light-dark(var(--raw-color-core-yellow-700), var(--raw-color-core-yellow-700-dark));
462
- --color-core-yellow-800: light-dark(var(--raw-color-core-yellow-800), var(--raw-color-core-yellow-800-dark));
463
- --color-core-yellow-900: light-dark(var(--raw-color-core-yellow-900), var(--raw-color-core-yellow-900-dark));
464
- --color-core-yellow-950: light-dark(var(--raw-color-core-yellow-950), var(--raw-color-core-yellow-950-dark));
697
+ --color-core-yellow-50: var(--raw-color-core-yellow-50);
698
+ --color-core-yellow-100: var(--raw-color-core-yellow-100);
699
+ --color-core-yellow-200: var(--raw-color-core-yellow-200);
700
+ --color-core-yellow-300: var(--raw-color-core-yellow-300);
701
+ --color-core-yellow-400: var(--raw-color-core-yellow-400);
702
+ --color-core-yellow-500: var(--raw-color-core-yellow-500);
703
+ --color-core-yellow-600: var(--raw-color-core-yellow-600);
704
+ --color-core-yellow-700: var(--raw-color-core-yellow-700);
705
+ --color-core-yellow-800: var(--raw-color-core-yellow-800);
706
+ --color-core-yellow-900: var(--raw-color-core-yellow-900);
707
+ --color-core-yellow-950: var(--raw-color-core-yellow-950);
465
708
 
466
709
  /* Core Blue */
467
- --color-core-blue-50: light-dark(var(--raw-color-core-blue-50), var(--raw-color-core-blue-50-dark));
468
- --color-core-blue-100: light-dark(var(--raw-color-core-blue-100), var(--raw-color-core-blue-100-dark));
469
- --color-core-blue-200: light-dark(var(--raw-color-core-blue-200), var(--raw-color-core-blue-200-dark));
470
- --color-core-blue-300: light-dark(var(--raw-color-core-blue-300), var(--raw-color-core-blue-300-dark));
471
- --color-core-blue-400: light-dark(var(--raw-color-core-blue-400), var(--raw-color-core-blue-400-dark));
472
- --color-core-blue-500: light-dark(var(--raw-color-core-blue-500), var(--raw-color-core-blue-500-dark));
473
- --color-core-blue-600: light-dark(var(--raw-color-core-blue-600), var(--raw-color-core-blue-600-dark));
474
- --color-core-blue-700: light-dark(var(--raw-color-core-blue-700), var(--raw-color-core-blue-700-dark));
475
- --color-core-blue-800: light-dark(var(--raw-color-core-blue-800), var(--raw-color-core-blue-800-dark));
476
- --color-core-blue-900: light-dark(var(--raw-color-core-blue-900), var(--raw-color-core-blue-900-dark));
477
- --color-core-blue-950: light-dark(var(--raw-color-core-blue-950), var(--raw-color-core-blue-950-dark));
710
+ --color-core-blue-50: var(--raw-color-core-blue-50);
711
+ --color-core-blue-100: var(--raw-color-core-blue-100);
712
+ --color-core-blue-200: var(--raw-color-core-blue-200);
713
+ --color-core-blue-300: var(--raw-color-core-blue-300);
714
+ --color-core-blue-400: var(--raw-color-core-blue-400);
715
+ --color-core-blue-500: var(--raw-color-core-blue-500);
716
+ --color-core-blue-600: var(--raw-color-core-blue-600);
717
+ --color-core-blue-700: var(--raw-color-core-blue-700);
718
+ --color-core-blue-800: var(--raw-color-core-blue-800);
719
+ --color-core-blue-900: var(--raw-color-core-blue-900);
720
+ --color-core-blue-950: var(--raw-color-core-blue-950);
478
721
 
479
722
  /* Core Green */
480
- --color-core-green-50: light-dark(var(--raw-color-core-green-50), var(--raw-color-core-green-50-dark));
481
- --color-core-green-100: light-dark(var(--raw-color-core-green-100), var(--raw-color-core-green-100-dark));
482
- --color-core-green-200: light-dark(var(--raw-color-core-green-200), var(--raw-color-core-green-200-dark));
483
- --color-core-green-300: light-dark(var(--raw-color-core-green-300), var(--raw-color-core-green-300-dark));
484
- --color-core-green-400: light-dark(var(--raw-color-core-green-400), var(--raw-color-core-green-400-dark));
485
- --color-core-green-500: light-dark(var(--raw-color-core-green-500), var(--raw-color-core-green-500-dark));
486
- --color-core-green-600: light-dark(var(--raw-color-core-green-600), var(--raw-color-core-green-600-dark));
487
- --color-core-green-700: light-dark(var(--raw-color-core-green-700), var(--raw-color-core-green-700-dark));
488
- --color-core-green-800: light-dark(var(--raw-color-core-green-800), var(--raw-color-core-green-800-dark));
489
- --color-core-green-900: light-dark(var(--raw-color-core-green-900), var(--raw-color-core-green-900-dark));
490
- --color-core-green-950: light-dark(var(--raw-color-core-green-950), var(--raw-color-core-green-950-dark));
723
+ --color-core-green-50: var(--raw-color-core-green-50);
724
+ --color-core-green-100: var(--raw-color-core-green-100);
725
+ --color-core-green-200: var(--raw-color-core-green-200);
726
+ --color-core-green-300: var(--raw-color-core-green-300);
727
+ --color-core-green-400: var(--raw-color-core-green-400);
728
+ --color-core-green-500: var(--raw-color-core-green-500);
729
+ --color-core-green-600: var(--raw-color-core-green-600);
730
+ --color-core-green-700: var(--raw-color-core-green-700);
731
+ --color-core-green-800: var(--raw-color-core-green-800);
732
+ --color-core-green-900: var(--raw-color-core-green-900);
733
+ --color-core-green-950: var(--raw-color-core-green-950);
491
734
 
492
735
  /* Core Red */
493
- --color-core-red-50: light-dark(var(--raw-color-core-red-50), var(--raw-color-core-red-50-dark));
494
- --color-core-red-100: light-dark(var(--raw-color-core-red-100), var(--raw-color-core-red-100-dark));
495
- --color-core-red-200: light-dark(var(--raw-color-core-red-200), var(--raw-color-core-red-200-dark));
496
- --color-core-red-300: light-dark(var(--raw-color-core-red-300), var(--raw-color-core-red-300-dark));
497
- --color-core-red-400: light-dark(var(--raw-color-core-red-400), var(--raw-color-core-red-400-dark));
498
- --color-core-red-500: light-dark(var(--raw-color-core-red-500), var(--raw-color-core-red-500-dark));
499
- --color-core-red-600: light-dark(var(--raw-color-core-red-600), var(--raw-color-core-red-600-dark));
500
- --color-core-red-700: light-dark(var(--raw-color-core-red-700), var(--raw-color-core-red-700-dark));
501
- --color-core-red-800: light-dark(var(--raw-color-core-red-800), var(--raw-color-core-red-800-dark));
502
- --color-core-red-900: light-dark(var(--raw-color-core-red-900), var(--raw-color-core-red-900-dark));
503
- --color-core-red-950: light-dark(var(--raw-color-core-red-950), var(--raw-color-core-red-950-dark));
736
+ --color-core-red-50: var(--raw-color-core-red-50);
737
+ --color-core-red-100: var(--raw-color-core-red-100);
738
+ --color-core-red-200: var(--raw-color-core-red-200);
739
+ --color-core-red-300: var(--raw-color-core-red-300);
740
+ --color-core-red-400: var(--raw-color-core-red-400);
741
+ --color-core-red-500: var(--raw-color-core-red-500);
742
+ --color-core-red-600: var(--raw-color-core-red-600);
743
+ --color-core-red-700: var(--raw-color-core-red-700);
744
+ --color-core-red-800: var(--raw-color-core-red-800);
745
+ --color-core-red-900: var(--raw-color-core-red-900);
746
+ --color-core-red-950: var(--raw-color-core-red-950);
504
747
 
505
748
  /* Core Orange */
506
- --color-core-orange-50: light-dark(var(--raw-color-core-orange-50), var(--raw-color-core-orange-50-dark));
507
- --color-core-orange-100: light-dark(var(--raw-color-core-orange-100), var(--raw-color-core-orange-100-dark));
508
- --color-core-orange-200: light-dark(var(--raw-color-core-orange-200), var(--raw-color-core-orange-200-dark));
509
- --color-core-orange-300: light-dark(var(--raw-color-core-orange-300), var(--raw-color-core-orange-300-dark));
510
- --color-core-orange-400: light-dark(var(--raw-color-core-orange-400), var(--raw-color-core-orange-400-dark));
511
- --color-core-orange-500: light-dark(var(--raw-color-core-orange-500), var(--raw-color-core-orange-500-dark));
512
- --color-core-orange-600: light-dark(var(--raw-color-core-orange-600), var(--raw-color-core-orange-600-dark));
513
- --color-core-orange-700: light-dark(var(--raw-color-core-orange-700), var(--raw-color-core-orange-700-dark));
514
- --color-core-orange-800: light-dark(var(--raw-color-core-orange-800), var(--raw-color-core-orange-800-dark));
515
- --color-core-orange-900: light-dark(var(--raw-color-core-orange-900), var(--raw-color-core-orange-900-dark));
516
- --color-core-orange-950: light-dark(var(--raw-color-core-orange-950), var(--raw-color-core-orange-950-dark));
517
-
749
+ --color-core-orange-50: var(--raw-color-core-orange-50);
750
+ --color-core-orange-100: var(--raw-color-core-orange-100);
751
+ --color-core-orange-200: var(--raw-color-core-orange-200);
752
+ --color-core-orange-300: var(--raw-color-core-orange-300);
753
+ --color-core-orange-400: var(--raw-color-core-orange-400);
754
+ --color-core-orange-500: var(--raw-color-core-orange-500);
755
+ --color-core-orange-600: var(--raw-color-core-orange-600);
756
+ --color-core-orange-700: var(--raw-color-core-orange-700);
757
+ --color-core-orange-800: var(--raw-color-core-orange-800);
758
+ --color-core-orange-900: var(--raw-color-core-orange-900);
759
+ --color-core-orange-950: var(--raw-color-core-orange-950);
518
760
  }
519
761
 
520
762
  body {