@x-plat/design-system 0.5.66 → 0.6.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 (80) hide show
  1. package/dist/components/Accordion/index.css +6 -6
  2. package/dist/components/AutoResizeTextArea/index.css +5 -5
  3. package/dist/components/Avatar/index.css +2 -2
  4. package/dist/components/Badge/index.css +1 -1
  5. package/dist/components/Box/index.css +5 -5
  6. package/dist/components/Breadcrumb/index.css +4 -4
  7. package/dist/components/Button/index.cjs +1 -2
  8. package/dist/components/Button/index.css +6 -6
  9. package/dist/components/Button/index.d.cts +1 -1
  10. package/dist/components/Button/index.d.ts +1 -1
  11. package/dist/components/Button/index.js +1 -2
  12. package/dist/components/Calendar/index.cjs +1 -1
  13. package/dist/components/Calendar/index.css +18 -18
  14. package/dist/components/Calendar/index.js +1 -1
  15. package/dist/components/CardTab/index.css +8 -8
  16. package/dist/components/Chart/index.css +11 -11
  17. package/dist/components/ChatInput/index.cjs +1 -2
  18. package/dist/components/ChatInput/index.css +16 -16
  19. package/dist/components/ChatInput/index.js +1 -2
  20. package/dist/components/CheckBox/index.css +2 -2
  21. package/dist/components/CheckBox/index.js +1 -1
  22. package/dist/components/Chip/index.css +5 -5
  23. package/dist/components/DatePicker/index.cjs +1 -2
  24. package/dist/components/DatePicker/index.css +36 -36
  25. package/dist/components/DatePicker/index.js +1 -2
  26. package/dist/components/Divider/index.css +2 -2
  27. package/dist/components/Drawer/index.css +5 -5
  28. package/dist/components/Dropdown/index.css +4 -4
  29. package/dist/components/Editor/index.css +36 -36
  30. package/dist/components/EmptyState/index.css +2 -2
  31. package/dist/components/FileUpload/index.css +4 -4
  32. package/dist/components/HtmlTypeWriter/index.css +1 -1
  33. package/dist/components/IconButton/index.cjs +1 -2
  34. package/dist/components/IconButton/index.css +5 -5
  35. package/dist/components/IconButton/index.d.cts +1 -1
  36. package/dist/components/IconButton/index.d.ts +1 -1
  37. package/dist/components/IconButton/index.js +1 -2
  38. package/dist/components/ImageSelector/index.css +7 -7
  39. package/dist/components/Input/index.css +7 -7
  40. package/dist/components/Modal/index.css +1 -1
  41. package/dist/components/Pagination/index.css +3 -3
  42. package/dist/components/PopOver/index.css +1 -1
  43. package/dist/components/Progress/index.css +1 -1
  44. package/dist/components/Radio/index.css +5 -5
  45. package/dist/components/Select/index.css +9 -9
  46. package/dist/components/Skeleton/index.cjs +6 -6
  47. package/dist/components/Skeleton/index.js +6 -6
  48. package/dist/components/Spinner/index.css +1 -1
  49. package/dist/components/Steps/index.css +3 -3
  50. package/dist/components/Swiper/index.css +3 -3
  51. package/dist/components/Switch/index.css +3 -3
  52. package/dist/components/Tab/index.css +4 -4
  53. package/dist/components/Table/index.css +10 -10
  54. package/dist/components/Tag/index.css +3 -3
  55. package/dist/components/TextArea/index.css +5 -5
  56. package/dist/components/Tooltip/index.css +4 -4
  57. package/dist/components/Video/index.css +2 -2
  58. package/dist/components/index.cjs +249 -251
  59. package/dist/components/index.css +667 -1059
  60. package/dist/components/index.d.cts +2 -2
  61. package/dist/components/index.d.ts +2 -2
  62. package/dist/components/index.js +224 -226
  63. package/dist/index.cjs +249 -253
  64. package/dist/index.css +670 -1062
  65. package/dist/index.d.cts +3 -3
  66. package/dist/index.d.ts +3 -3
  67. package/dist/index.js +224 -227
  68. package/dist/layout/Header/index.css +2 -2
  69. package/dist/layout/Layout/index.css +1 -1
  70. package/dist/layout/index.css +404 -796
  71. package/dist/tokens/index.cjs +0 -2
  72. package/dist/tokens/index.d.cts +9 -10
  73. package/dist/tokens/index.d.ts +9 -10
  74. package/dist/tokens/index.js +1 -2
  75. package/guidelines/AGENT_PROMPT.md +8 -9
  76. package/guidelines/Guidelines.md +1 -1
  77. package/guidelines/components/chart.md +1 -1
  78. package/guidelines/foundations/color.md +22 -23
  79. package/guidelines/foundations/typography.md +86 -36
  80. package/package.json +1 -1
package/dist/components/index.css CHANGED
@@ -2,307 +2,40 @@
2
2
 
3
3
  /* src/styles/style.css */
4
4
  :root {
5
- --primitive-base-white: #FFFFFF;
6
- --primitive-base-black: #000000;
7
- --primitive-base-transparent: transparent;
8
- --primitive-base-black-alpha-5: rgba(0, 0, 0, 0.05);
9
- --primitive-base-black-alpha-10: rgba(0, 0, 0, 0.10);
10
- --primitive-base-black-alpha-25: rgba(0, 0, 0, 0.25);
11
- --primitive-base-black-alpha-50: rgba(0, 0, 0, 0.50);
12
- --primitive-base-black-alpha-75: rgba(0, 0, 0, 0.75);
13
- --primitive-base-white-alpha-5: rgba(255, 255, 255, 0.05);
14
- --primitive-base-white-alpha-10: rgba(255, 255, 255, 0.10);
15
- --primitive-base-white-alpha-25: rgba(255, 255, 255, 0.25);
16
- --primitive-base-white-alpha-50: rgba(255, 255, 255, 0.50);
17
- --primitive-base-white-alpha-75: rgba(255, 255, 255, 0.75);
18
- --primitive-red-50: #FFF0F0;
19
- --primitive-red-100: #FFDDDE;
20
- --primitive-red-200: #FFC1C2;
21
- --primitive-red-300: #FF9698;
22
- --primitive-red-400: #FF5A5D;
23
- --primitive-red-500: #FF272B;
24
- --primitive-red-600: #F80409;
25
- --primitive-red-700: #D40105;
26
- --primitive-red-800: #AE0609;
27
- --primitive-red-900: #900C0F;
28
- --primitive-pink-50: #FFF4FE;
29
- --primitive-pink-100: #FFE7FD;
30
- --primitive-pink-200: #FFCFFA;
31
- --primitive-pink-300: #FEA9F1;
32
- --primitive-pink-400: #FD75E7;
33
- --primitive-pink-500: #F553DA;
34
- --primitive-pink-600: #D821B6;
35
- --primitive-pink-700: #B31892;
36
- --primitive-pink-800: #921676;
37
- --primitive-pink-900: #781761;
38
- --primitive-purple-50: #FBF6FE;
39
- --primitive-purple-100: #F5EAFD;
40
- --primitive-purple-200: #EDD8FC;
41
- --primitive-purple-300: #E0BAF8;
42
- --primitive-purple-400: #CD8DF3;
43
- --primitive-purple-500: #B961EB;
44
- --primitive-purple-600: #A541DC;
45
- --primitive-purple-700: #9230C5;
46
- --primitive-purple-800: #782B9E;
47
- --primitive-purple-900: #62247F;
48
- --primitive-deep-purple-50: #EDE7F6;
49
- --primitive-deep-purple-100: #D1C4E9;
50
- --primitive-deep-purple-200: #B39DDB;
51
- --primitive-deep-purple-300: #9575CD;
52
- --primitive-deep-purple-400: #7E57C2;
53
- --primitive-deep-purple-500: #673AB7;
54
- --primitive-deep-purple-600: #5E35B1;
55
- --primitive-deep-purple-700: #4621A0;
56
- --primitive-deep-purple-800: #290D7E;
57
- --primitive-deep-purple-900: #1A0B5C;
58
- --primitive-indigo-50: #E8EAF6;
59
- --primitive-indigo-100: #C5CAE9;
60
- --primitive-indigo-200: #9FA8DA;
61
- --primitive-indigo-300: #7986CB;
62
- --primitive-indigo-400: #5C6BC0;
63
- --primitive-indigo-500: #3F51B5;
64
- --primitive-indigo-600: #3949AB;
65
- --primitive-indigo-700: #303F9F;
66
- --primitive-indigo-800: #283593;
67
- --primitive-indigo-900: #1A237E;
68
- --primitive-blue-50: #F1F4FD;
69
- --primitive-blue-100: #DFE7FA;
70
- --primitive-blue-200: #C5D4F8;
71
- --primitive-blue-300: #9EB8F2;
72
- --primitive-blue-400: #7093EA;
73
- --primitive-blue-500: #4D6DE3;
74
- --primitive-blue-600: #3950D7;
75
- --primitive-blue-700: #303EC5;
76
- --primitive-blue-800: #2D35A0;
77
- --primitive-blue-900: #29317F;
78
- --primitive-light-blue-50: #EDF8FF;
79
- --primitive-light-blue-100: #D7EDFF;
80
- --primitive-light-blue-200: #B9E1FF;
81
- --primitive-light-blue-300: #88D0FF;
82
- --primitive-light-blue-400: #50B5FF;
83
- --primitive-light-blue-500: #2893FF;
84
- --primitive-light-blue-600: #1677FF;
85
- --primitive-light-blue-700: #0A5CEB;
86
- --primitive-light-blue-800: #0F4ABE;
87
- --primitive-light-blue-900: #134295;
88
- --primitive-cyan-50: #E0F7FA;
89
- --primitive-cyan-100: #B2EBF2;
90
- --primitive-cyan-200: #80DEEA;
91
- --primitive-cyan-300: #4DD0E1;
92
- --primitive-cyan-400: #26C6DA;
93
- --primitive-cyan-500: #00BCD4;
94
- --primitive-cyan-600: #00ACC1;
95
- --primitive-cyan-700: #0097A7;
96
- --primitive-cyan-800: #00838F;
97
- --primitive-cyan-900: #006064;
98
- --primitive-teal-50: #E0F2F1;
99
- --primitive-teal-100: #B2DFDB;
100
- --primitive-teal-200: #80CBC4;
101
- --primitive-teal-300: #4DB6AC;
102
- --primitive-teal-400: #26A69A;
103
- --primitive-teal-500: #009688;
104
- --primitive-teal-600: #00897B;
105
- --primitive-teal-700: #00796B;
106
- --primitive-teal-800: #00695C;
107
- --primitive-teal-900: #004D40;
108
- --primitive-green-50: #E5F6EA;
109
- --primitive-green-100: #C1E7CC;
110
- --primitive-green-200: #98D8AC;
111
- --primitive-green-300: #6CCA8B;
112
- --primitive-green-400: #47BE72;
113
- --primitive-green-500: #10B259;
114
- --primitive-green-600: #00A34F;
115
- --primitive-green-700: #009143;
116
- --primitive-green-800: #007F38;
117
- --primitive-green-900: #006024;
118
- --primitive-light-green-50: #F1F8E9;
119
- --primitive-light-green-100: #DCEDC8;
120
- --primitive-light-green-200: #C5E1A5;
121
- --primitive-light-green-300: #AED581;
122
- --primitive-light-green-400: #9CCC65;
123
- --primitive-light-green-500: #8BC34A;
124
- --primitive-light-green-600: #7CB342;
125
- --primitive-light-green-700: #689F38;
126
- --primitive-light-green-800: #558B2F;
127
- --primitive-light-green-900: #33691E;
128
- --primitive-lime-50: #F9FBE7;
129
- --primitive-lime-100: #F0F4C3;
130
- --primitive-lime-200: #E6EE9C;
131
- --primitive-lime-300: #DCE775;
132
- --primitive-lime-400: #D4E157;
133
- --primitive-lime-500: #CDDC39;
134
- --primitive-lime-600: #C0CA33;
135
- --primitive-lime-700: #AFB42B;
136
- --primitive-lime-800: #9E9D24;
137
- --primitive-lime-900: #827717;
138
- --primitive-yellow-50: #FFFDE7;
139
- --primitive-yellow-100: #FFF9C4;
140
- --primitive-yellow-200: #FFF6A9;
141
- --primitive-yellow-300: #FFF280;
142
- --primitive-yellow-400: #FFEE54;
143
- --primitive-yellow-500: #FFE60C;
144
- --primitive-yellow-600: #FDD835;
145
- --primitive-yellow-700: #FBC02D;
146
- --primitive-yellow-800: #F9A825;
147
- --primitive-yellow-900: #F57F17;
148
- --primitive-amber-50: #FFF8E1;
149
- --primitive-amber-100: #FFECB3;
150
- --primitive-amber-200: #FFE082;
151
- --primitive-amber-300: #FFD54F;
152
- --primitive-amber-400: #FFCA28;
153
- --primitive-amber-500: #FFC107;
154
- --primitive-amber-600: #FFB300;
155
- --primitive-amber-700: #FFA000;
156
- --primitive-amber-800: #FF8F00;
157
- --primitive-amber-900: #FF6F00;
158
- --primitive-orange-50: #FFF2DE;
159
- --primitive-orange-100: #FFE0B2;
160
- --primitive-orange-200: #FFCC80;
161
- --primitive-orange-300: #FFB74D;
162
- --primitive-orange-400: #FFA726;
163
- --primitive-orange-500: #FF9800;
164
- --primitive-orange-600: #FB8C00;
165
- --primitive-orange-700: #F57C00;
166
- --primitive-orange-800: #EF6C00;
167
- --primitive-orange-900: #E65100;
168
- --primitive-deep-orange-50: #FBE9E7;
169
- --primitive-deep-orange-100: #FFCCBC;
170
- --primitive-deep-orange-200: #FFAB91;
171
- --primitive-deep-orange-300: #FF8A65;
172
- --primitive-deep-orange-400: #FF7043;
173
- --primitive-deep-orange-500: #FF5722;
174
- --primitive-deep-orange-600: #F4511E;
175
- --primitive-deep-orange-700: #E64A19;
176
- --primitive-deep-orange-800: #D84315;
177
- --primitive-deep-orange-900: #BF360C;
178
- --primitive-brown-50: #F1EDEC;
179
- --primitive-brown-100: #D7CCC8;
180
- --primitive-brown-200: #BCAAA4;
181
- --primitive-brown-300: #A1887F;
182
- --primitive-brown-400: #8D6E63;
183
- --primitive-brown-500: #795548;
184
- --primitive-brown-600: #6D4C41;
185
- --primitive-brown-700: #5D4037;
186
- --primitive-brown-800: #4E342E;
187
- --primitive-brown-900: #3E2723;
188
- --primitive-neutral-50: #FAFAFA;
189
- --primitive-neutral-100: #F5F5F5;
190
- --primitive-neutral-200: #E5E5E5;
191
- --primitive-neutral-300: #D4D4D4;
192
- --primitive-neutral-400: #A1A1A1;
193
- --primitive-neutral-500: #737373;
194
- --primitive-neutral-600: #525252;
195
- --primitive-neutral-700: #404040;
196
- --primitive-neutral-800: #2F2F2F;
197
- --primitive-neutral-900: #212121;
198
- --primitive-blue-gray-50: #ECEFF1;
199
- --primitive-blue-gray-100: #CFD8DC;
200
- --primitive-blue-gray-200: #B0BEC5;
201
- --primitive-blue-gray-300: #90A4AE;
202
- --primitive-blue-gray-400: #78909C;
203
- --primitive-blue-gray-500: #607D8B;
204
- --primitive-blue-gray-600: #546E7A;
205
- --primitive-blue-gray-700: #455A64;
206
- --primitive-blue-gray-800: #37474F;
207
- --primitive-blue-gray-900: #263238;
208
- }
209
- :root {
210
- --spacing-size-0: 0;
211
- --spacing-size-1: 4px;
212
- --spacing-size-2: 8px;
213
- --spacing-size-3: 12px;
214
- --spacing-size-4: 16px;
215
- --spacing-size-5: 20px;
216
- --spacing-size-6: 24px;
217
- --spacing-size-7: 28px;
218
- --spacing-size-8: 32px;
219
- --spacing-size-9: 36px;
220
- --spacing-size-10: 40px;
221
- --spacing-size-11: 48px;
222
- --spacing-size-12: 64px;
223
- --spacing-size-13: 80px;
224
- --spacing-size-14: 96px;
225
- --spacing-size-15: 120px;
226
- --spacing-size-16: 160px;
227
- --spacing-stroke-0: 0;
228
- --spacing-stroke-1: 0.5px;
229
- --spacing-stroke-2: 1px;
230
- --spacing-stroke-3: 2px;
231
- --spacing-stroke-4: 4px;
232
- --spacing-stroke-5: 8px;
233
- --spacing-stroke-6: 12px;
234
- }
235
- :root {
236
- --spacing-brand-space-1: var(--spacing-size-1);
237
- --spacing-brand-space-2: var(--spacing-size-2);
238
- --spacing-brand-space-3: var(--spacing-size-3);
239
- --spacing-brand-space-4: var(--spacing-size-4);
240
- --spacing-brand-space-5: var(--spacing-size-5);
241
- --spacing-brand-space-6: var(--spacing-size-6);
242
- --spacing-brand-space-7: var(--spacing-size-7);
243
- --spacing-brand-space-8: var(--spacing-size-8);
244
- --spacing-brand-space-9: var(--spacing-size-9);
245
- --spacing-brand-space-10: var(--spacing-size-10);
246
- --spacing-brand-space-11: var(--spacing-size-11);
247
- --spacing-brand-space-12: var(--spacing-size-12);
248
- --spacing-brand-space-13: var(--spacing-size-13);
249
- --spacing-brand-space-14: var(--spacing-size-14);
250
- --spacing-brand-space-15: var(--spacing-size-15);
251
- --spacing-brand-space-16: var(--spacing-size-16);
252
- --spacing-brand-space-none: var(--spacing-size-0);
253
- --spacing-brand-control-height-xs: var(--spacing-size-6);
254
- --spacing-brand-control-height-sm: var(--spacing-size-8);
255
- --spacing-brand-control-height-md: var(--spacing-size-10);
256
- --spacing-brand-control-height-lg: var(--spacing-size-11);
257
- --spacing-brand-radius-none: var(--spacing-size-0);
258
- --spacing-brand-radius-sm: var(--spacing-size-1);
259
- --spacing-brand-radius-md: var(--spacing-size-2);
260
- --spacing-brand-radius-lg: var(--spacing-size-3);
261
- --spacing-brand-radius-xl: var(--spacing-size-4);
262
- --spacing-brand-radius-full: 9999px;
263
- --spacing-brand-stroke-none: var(--spacing-stroke-0);
264
- --spacing-brand-stroke-xs: var(--spacing-stroke-1);
265
- --spacing-brand-stroke-sm: var(--spacing-stroke-2);
266
- --spacing-brand-stroke-md: var(--spacing-stroke-3);
267
- --spacing-brand-stroke-lg: var(--spacing-stroke-4);
268
- --spacing-brand-stroke-xl: var(--spacing-stroke-5);
269
- --spacing-brand-stroke-2xl: var(--spacing-stroke-6);
270
- }
271
- :root {
272
- --spacing-space-1: var(--spacing-brand-space-1);
273
- --spacing-space-2: var(--spacing-brand-space-2);
274
- --spacing-space-3: var(--spacing-brand-space-3);
275
- --spacing-space-4: var(--spacing-brand-space-4);
276
- --spacing-space-5: var(--spacing-brand-space-5);
277
- --spacing-space-6: var(--spacing-brand-space-6);
278
- --spacing-space-7: var(--spacing-brand-space-7);
279
- --spacing-space-8: var(--spacing-brand-space-8);
280
- --spacing-space-9: var(--spacing-brand-space-9);
281
- --spacing-space-10: var(--spacing-brand-space-10);
282
- --spacing-space-11: var(--spacing-brand-space-11);
283
- --spacing-space-12: var(--spacing-brand-space-12);
284
- --spacing-space-13: var(--spacing-brand-space-13);
285
- --spacing-space-14: var(--spacing-brand-space-14);
286
- --spacing-space-15: var(--spacing-brand-space-15);
287
- --spacing-space-16: var(--spacing-brand-space-16);
288
- --spacing-space-none: var(--spacing-brand-space-none);
289
- --spacing-control-height-xs: var(--spacing-brand-control-height-xs);
290
- --spacing-control-height-sm: var(--spacing-brand-control-height-sm);
291
- --spacing-control-height-md: var(--spacing-brand-control-height-md);
292
- --spacing-control-height-lg: var(--spacing-brand-control-height-lg);
293
- --spacing-radius-none: var(--spacing-brand-radius-none);
294
- --spacing-radius-sm: var(--spacing-brand-radius-sm);
295
- --spacing-radius-md: var(--spacing-brand-radius-md);
296
- --spacing-radius-lg: var(--spacing-brand-radius-lg);
297
- --spacing-radius-xl: var(--spacing-brand-radius-xl);
298
- --spacing-radius-full: var(--spacing-brand-radius-full);
299
- --spacing-stroke-none: var(--spacing-brand-stroke-none);
300
- --spacing-stroke-xs: var(--spacing-brand-stroke-xs);
301
- --spacing-stroke-sm: var(--spacing-brand-stroke-sm);
302
- --spacing-stroke-md: var(--spacing-brand-stroke-md);
303
- --spacing-stroke-lg: var(--spacing-brand-stroke-lg);
304
- --spacing-stroke-xl: var(--spacing-brand-stroke-xl);
305
- --spacing-stroke-2xl: var(--spacing-brand-stroke-2xl);
5
+ --spacing-space-1: 4px;
6
+ --spacing-space-2: 8px;
7
+ --spacing-space-3: 12px;
8
+ --spacing-space-4: 16px;
9
+ --spacing-space-5: 20px;
10
+ --spacing-space-6: 24px;
11
+ --spacing-space-7: 28px;
12
+ --spacing-space-8: 32px;
13
+ --spacing-space-9: 36px;
14
+ --spacing-space-10: 40px;
15
+ --spacing-space-11: 48px;
16
+ --spacing-space-12: 64px;
17
+ --spacing-space-13: 80px;
18
+ --spacing-space-14: 96px;
19
+ --spacing-space-15: 120px;
20
+ --spacing-space-16: 160px;
21
+ --spacing-space-none: 0;
22
+ --spacing-control-height-xs: 24px;
23
+ --spacing-control-height-sm: 32px;
24
+ --spacing-control-height-md: 40px;
25
+ --spacing-control-height-lg: 48px;
26
+ --spacing-radius-none: 0;
27
+ --spacing-radius-sm: 4px;
28
+ --spacing-radius-md: 8px;
29
+ --spacing-radius-lg: 12px;
30
+ --spacing-radius-xl: 16px;
31
+ --spacing-radius-full: 9999px;
32
+ --spacing-stroke-none: 0;
33
+ --spacing-stroke-xs: 0.5px;
34
+ --spacing-stroke-sm: 1px;
35
+ --spacing-stroke-md: 2px;
36
+ --spacing-stroke-lg: 4px;
37
+ --spacing-stroke-xl: 8px;
38
+ --spacing-stroke-2xl: 12px;
306
39
  }
307
40
  :root {
308
41
  --effects-opacity-0: 0;
@@ -340,140 +73,144 @@
340
73
  --semantic-shadow-overlay: var(--effects-brand-shadow-overlay);
341
74
  }
342
75
  :root {
343
- --brand-primary-50: var(--primitive-blue-50);
344
- --brand-primary-100: var(--primitive-blue-100);
345
- --brand-primary-200: var(--primitive-blue-200);
346
- --brand-primary-300: var(--primitive-blue-300);
347
- --brand-primary-400: var(--primitive-blue-400);
348
- --brand-primary-500: var(--primitive-blue-500);
349
- --brand-primary-600: var(--primitive-blue-600);
350
- --brand-primary-700: var(--primitive-blue-700);
351
- --brand-primary-800: var(--primitive-blue-800);
352
- --brand-primary-900: var(--primitive-blue-900);
353
- --brand-secondary-50: var(--primitive-light-blue-50);
354
- --brand-secondary-100: var(--primitive-light-blue-100);
355
- --brand-secondary-200: var(--primitive-light-blue-200);
356
- --brand-secondary-300: var(--primitive-light-blue-300);
357
- --brand-secondary-400: var(--primitive-light-blue-400);
358
- --brand-secondary-500: var(--primitive-light-blue-500);
359
- --brand-secondary-600: var(--primitive-light-blue-600);
360
- --brand-secondary-700: var(--primitive-light-blue-700);
361
- --brand-secondary-800: var(--primitive-light-blue-800);
362
- --brand-secondary-900: var(--primitive-light-blue-900);
363
- --brand-neutral-50: var(--primitive-neutral-50);
364
- --brand-neutral-100: var(--primitive-neutral-100);
365
- --brand-neutral-200: var(--primitive-neutral-200);
366
- --brand-neutral-300: var(--primitive-neutral-300);
367
- --brand-neutral-400: var(--primitive-neutral-400);
368
- --brand-neutral-500: var(--primitive-neutral-500);
369
- --brand-neutral-600: var(--primitive-neutral-600);
370
- --brand-neutral-700: var(--primitive-neutral-700);
371
- --brand-neutral-800: var(--primitive-neutral-800);
372
- --brand-neutral-900: var(--primitive-neutral-900);
373
- --brand-base-white: var(--primitive-base-white);
374
- --brand-base-black-alpha-10: var(--primitive-base-black-alpha-10);
375
- --brand-base-black-alpha-25: var(--primitive-base-black-alpha-25);
376
- --brand-categorical-1-100: var(--primitive-red-100);
377
- --brand-categorical-1-200: var(--primitive-red-200);
378
- --brand-categorical-1-300: var(--primitive-red-300);
379
- --brand-categorical-1-400: var(--primitive-red-400);
380
- --brand-categorical-1-500: var(--primitive-red-500);
381
- --brand-categorical-1-600: var(--primitive-red-600);
382
- --brand-categorical-2-100: var(--primitive-green-100);
383
- --brand-categorical-2-200: var(--primitive-green-200);
384
- --brand-categorical-2-300: var(--primitive-green-300);
385
- --brand-categorical-2-400: var(--primitive-green-400);
386
- --brand-categorical-2-500: var(--primitive-green-500);
387
- --brand-categorical-2-600: var(--primitive-green-600);
388
- --brand-categorical-3-100: var(--primitive-blue-100);
389
- --brand-categorical-3-200: var(--primitive-blue-200);
390
- --brand-categorical-3-300: var(--primitive-blue-300);
391
- --brand-categorical-3-400: var(--primitive-blue-400);
392
- --brand-categorical-3-500: var(--primitive-blue-500);
393
- --brand-categorical-3-600: var(--primitive-blue-600);
394
- --brand-categorical-4-100: var(--primitive-purple-100);
395
- --brand-categorical-4-200: var(--primitive-purple-200);
396
- --brand-categorical-4-300: var(--primitive-purple-300);
397
- --brand-categorical-4-400: var(--primitive-purple-400);
398
- --brand-categorical-4-500: var(--primitive-purple-500);
399
- --brand-categorical-4-600: var(--primitive-purple-600);
400
- --brand-categorical-5-100: var(--primitive-orange-100);
401
- --brand-categorical-5-200: var(--primitive-orange-200);
402
- --brand-categorical-5-300: var(--primitive-orange-300);
403
- --brand-categorical-5-400: var(--primitive-orange-400);
404
- --brand-categorical-5-500: var(--primitive-orange-500);
405
- --brand-categorical-5-600: var(--primitive-orange-600);
406
- --brand-categorical-6-100: var(--primitive-teal-100);
407
- --brand-categorical-6-200: var(--primitive-teal-200);
408
- --brand-categorical-6-300: var(--primitive-teal-300);
409
- --brand-categorical-6-400: var(--primitive-teal-400);
410
- --brand-categorical-6-500: var(--primitive-teal-500);
411
- --brand-categorical-6-600: var(--primitive-teal-600);
412
- --brand-categorical-7-100: var(--primitive-yellow-100);
413
- --brand-categorical-7-200: var(--primitive-yellow-200);
414
- --brand-categorical-7-300: var(--primitive-yellow-300);
415
- --brand-categorical-7-400: var(--primitive-yellow-400);
416
- --brand-categorical-7-500: var(--primitive-yellow-500);
417
- --brand-categorical-7-600: var(--primitive-yellow-600);
418
- --brand-categorical-8-100: var(--primitive-pink-100);
419
- --brand-categorical-8-200: var(--primitive-pink-200);
420
- --brand-categorical-8-300: var(--primitive-pink-300);
421
- --brand-categorical-8-400: var(--primitive-pink-400);
422
- --brand-categorical-8-500: var(--primitive-pink-500);
423
- --brand-categorical-8-600: var(--primitive-pink-600);
76
+ --brand-primary-50: #F1F4FD;
77
+ --brand-primary-100: #DFE7FA;
78
+ --brand-primary-200: #C5D4F8;
79
+ --brand-primary-300: #9EB8F2;
80
+ --brand-primary-400: #7093EA;
81
+ --brand-primary-500: #4D6DE3;
82
+ --brand-primary-600: #3950D7;
83
+ --brand-primary-700: #303EC5;
84
+ --brand-primary-800: #2D35A0;
85
+ --brand-primary-900: #29317F;
86
+ --brand-secondary-50: #EDF8FF;
87
+ --brand-secondary-100: #D7EDFF;
88
+ --brand-secondary-200: #B9E1FF;
89
+ --brand-secondary-300: #88D0FF;
90
+ --brand-secondary-400: #50B5FF;
91
+ --brand-secondary-500: #2893FF;
92
+ --brand-secondary-600: #1677FF;
93
+ --brand-secondary-700: #0A5CEB;
94
+ --brand-secondary-800: #0F4ABE;
95
+ --brand-secondary-900: #134295;
96
+ --brand-neutral-50: #FAFAFA;
97
+ --brand-neutral-100: #F5F5F5;
98
+ --brand-neutral-200: #E5E5E5;
99
+ --brand-neutral-300: #D4D4D4;
100
+ --brand-neutral-400: #A1A1A1;
101
+ --brand-neutral-500: #737373;
102
+ --brand-neutral-600: #525252;
103
+ --brand-neutral-700: #404040;
104
+ --brand-neutral-800: #2F2F2F;
105
+ --brand-neutral-900: #212121;
106
+ --brand-base-white: #FFFFFF;
107
+ --brand-base-overlay-5: rgba(0, 0, 0, 0.05);
108
+ --brand-base-overlay-10: rgba(0, 0, 0, 0.10);
109
+ --brand-base-overlay-25: rgba(0, 0, 0, 0.25);
110
+ --brand-base-overlay-50: rgba(0, 0, 0, 0.50);
111
+ --brand-base-overlay-75: rgba(0, 0, 0, 0.75);
112
+ --brand-base-overlay-85: rgba(0, 0, 0, 0.85);
113
+ --brand-categorical-1-100: #FFDDDE;
114
+ --brand-categorical-1-200: #FFC1C2;
115
+ --brand-categorical-1-300: #FF9698;
116
+ --brand-categorical-1-400: #FF5A5D;
117
+ --brand-categorical-1-500: #FF272B;
118
+ --brand-categorical-1-600: #F80409;
119
+ --brand-categorical-2-100: #C1E7CC;
120
+ --brand-categorical-2-200: #98D8AC;
121
+ --brand-categorical-2-300: #6CCA8B;
122
+ --brand-categorical-2-400: #47BE72;
123
+ --brand-categorical-2-500: #10B259;
124
+ --brand-categorical-2-600: #00A34F;
125
+ --brand-categorical-3-100: #DFE7FA;
126
+ --brand-categorical-3-200: #C5D4F8;
127
+ --brand-categorical-3-300: #9EB8F2;
128
+ --brand-categorical-3-400: #7093EA;
129
+ --brand-categorical-3-500: #4D6DE3;
130
+ --brand-categorical-3-600: #3950D7;
131
+ --brand-categorical-4-100: #F5EAFD;
132
+ --brand-categorical-4-200: #EDD8FC;
133
+ --brand-categorical-4-300: #E0BAF8;
134
+ --brand-categorical-4-400: #CD8DF3;
135
+ --brand-categorical-4-500: #B961EB;
136
+ --brand-categorical-4-600: #A541DC;
137
+ --brand-categorical-5-100: #FFE0B2;
138
+ --brand-categorical-5-200: #FFCC80;
139
+ --brand-categorical-5-300: #FFB74D;
140
+ --brand-categorical-5-400: #FFA726;
141
+ --brand-categorical-5-500: #FF9800;
142
+ --brand-categorical-5-600: #FB8C00;
143
+ --brand-categorical-6-100: #B2DFDB;
144
+ --brand-categorical-6-200: #80CBC4;
145
+ --brand-categorical-6-300: #4DB6AC;
146
+ --brand-categorical-6-400: #26A69A;
147
+ --brand-categorical-6-500: #009688;
148
+ --brand-categorical-6-600: #00897B;
149
+ --brand-categorical-7-100: #FFF9C4;
150
+ --brand-categorical-7-200: #FFF6A9;
151
+ --brand-categorical-7-300: #FFF280;
152
+ --brand-categorical-7-400: #FFEE54;
153
+ --brand-categorical-7-500: #FFE60C;
154
+ --brand-categorical-7-600: #FDD835;
155
+ --brand-categorical-8-100: #FFE7FD;
156
+ --brand-categorical-8-200: #FFCFFA;
157
+ --brand-categorical-8-300: #FEA9F1;
158
+ --brand-categorical-8-400: #FD75E7;
159
+ --brand-categorical-8-500: #F553DA;
160
+ --brand-categorical-8-600: #D821B6;
424
161
  }
425
162
  :root {
426
- --system-success-50: var(--primitive-green-50);
427
- --system-success-100: var(--primitive-green-100);
428
- --system-success-200: var(--primitive-green-200);
429
- --system-success-300: var(--primitive-green-300);
430
- --system-success-400: var(--primitive-green-400);
431
- --system-success-500: var(--primitive-green-500);
432
- --system-success-600: var(--primitive-green-600);
433
- --system-success-700: var(--primitive-green-700);
434
- --system-success-800: var(--primitive-green-800);
435
- --system-success-900: var(--primitive-green-900);
436
- --system-error-50: var(--primitive-red-50);
437
- --system-error-100: var(--primitive-red-100);
438
- --system-error-200: var(--primitive-red-200);
439
- --system-error-300: var(--primitive-red-300);
440
- --system-error-400: var(--primitive-red-400);
441
- --system-error-500: var(--primitive-red-500);
442
- --system-error-600: var(--primitive-red-600);
443
- --system-error-700: var(--primitive-red-700);
444
- --system-error-800: var(--primitive-red-800);
445
- --system-error-900: var(--primitive-red-900);
446
- --system-warning-50: var(--primitive-yellow-50);
447
- --system-warning-100: var(--primitive-yellow-100);
448
- --system-warning-200: var(--primitive-yellow-200);
449
- --system-warning-300: var(--primitive-yellow-300);
450
- --system-warning-400: var(--primitive-yellow-400);
451
- --system-warning-500: var(--primitive-yellow-500);
452
- --system-warning-600: var(--primitive-yellow-600);
453
- --system-warning-700: var(--primitive-yellow-700);
454
- --system-warning-800: var(--primitive-yellow-800);
455
- --system-warning-900: var(--primitive-yellow-900);
456
- --system-info-50: var(--primitive-blue-50);
457
- --system-info-100: var(--primitive-blue-100);
458
- --system-info-200: var(--primitive-blue-200);
459
- --system-info-300: var(--primitive-blue-300);
460
- --system-info-400: var(--primitive-blue-400);
461
- --system-info-500: var(--primitive-blue-500);
462
- --system-info-600: var(--primitive-blue-600);
463
- --system-info-700: var(--primitive-blue-700);
464
- --system-info-800: var(--primitive-blue-800);
465
- --system-info-900: var(--primitive-blue-900);
466
- --system-link-400: var(--primitive-deep-purple-400);
467
- --system-link-500: var(--primitive-deep-purple-500);
468
- --system-link-600: var(--primitive-deep-purple-600);
469
- --system-link-700: var(--primitive-deep-purple-700);
163
+ --system-success-50: #E5F6EA;
164
+ --system-success-100: #C1E7CC;
165
+ --system-success-200: #98D8AC;
166
+ --system-success-300: #6CCA8B;
167
+ --system-success-400: #47BE72;
168
+ --system-success-500: #10B259;
169
+ --system-success-600: #00A34F;
170
+ --system-success-700: #009143;
171
+ --system-success-800: #007F38;
172
+ --system-success-900: #006024;
173
+ --system-error-50: #FFF0F0;
174
+ --system-error-100: #FFDDDE;
175
+ --system-error-200: #FFC1C2;
176
+ --system-error-300: #FF9698;
177
+ --system-error-400: #FF5A5D;
178
+ --system-error-500: #FF272B;
179
+ --system-error-600: #F80409;
180
+ --system-error-700: #D40105;
181
+ --system-error-800: #AE0609;
182
+ --system-error-900: #900C0F;
183
+ --system-warning-50: #FFFDE7;
184
+ --system-warning-100: #FFF9C4;
185
+ --system-warning-200: #FFF6A9;
186
+ --system-warning-300: #FFF280;
187
+ --system-warning-400: #FFEE54;
188
+ --system-warning-500: #FFE60C;
189
+ --system-warning-600: #FDD835;
190
+ --system-warning-700: #FBC02D;
191
+ --system-warning-800: #F9A825;
192
+ --system-warning-900: #F57F17;
193
+ --system-info-50: #F1F4FD;
194
+ --system-info-100: #DFE7FA;
195
+ --system-info-200: #C5D4F8;
196
+ --system-info-300: #9EB8F2;
197
+ --system-info-400: #7093EA;
198
+ --system-info-500: #4D6DE3;
199
+ --system-info-600: #3950D7;
200
+ --system-info-700: #303EC5;
201
+ --system-info-800: #2D35A0;
202
+ --system-info-900: #29317F;
203
+ --system-link-400: #7E57C2;
204
+ --system-link-500: #673AB7;
205
+ --system-link-600: #5E35B1;
206
+ --system-link-700: #4621A0;
470
207
  }
471
208
  :root {
472
- --semantic-text-strong: var(--brand-neutral-900);
473
- --semantic-text-subtle: var(--brand-neutral-700);
474
- --semantic-text-muted: var(--brand-neutral-500);
475
- --semantic-text-brand: var(--brand-primary-700);
476
- --semantic-text-brand-secondary: var(--brand-secondary-700);
209
+ --semantic-text-primary: var(--brand-neutral-900);
210
+ --semantic-text-secondary: var(--brand-neutral-700);
211
+ --semantic-text-tertiary: var(--brand-neutral-400);
212
+ --semantic-text-brand-primary: var(--brand-primary-600);
213
+ --semantic-text-brand-secondary: var(--brand-secondary-600);
477
214
  --semantic-text-disabled: var(--brand-neutral-400);
478
215
  --semantic-text-inverse: var(--brand-base-white);
479
216
  --semantic-text-success: var(--system-success-700);
@@ -481,12 +218,12 @@
481
218
  --semantic-text-warning: var(--system-warning-700);
482
219
  --semantic-text-info: var(--system-info-700);
483
220
  --semantic-text-link: var(--system-link-700);
484
- --semantic-text-sunday: var(--system-error-500);
485
- --semantic-text-saturday: var(--system-info-500);
486
- --semantic-surface-neutral-default: var(--brand-base-white);
487
- --semantic-surface-neutral-subtle: var(--brand-neutral-50);
488
- --semantic-surface-neutral-strong: var(--brand-neutral-300);
489
- --semantic-surface-neutral-overlay: var(--brand-base-black-alpha-25);
221
+ --semantic-text-accent-red: var(--system-error-500);
222
+ --semantic-text-accent-blue: var(--system-info-500);
223
+ --semantic-surface-neutral-primary: var(--brand-base-white);
224
+ --semantic-surface-neutral-secondary: var(--brand-neutral-50);
225
+ --semantic-surface-neutral-tertiary: var(--brand-neutral-300);
226
+ --semantic-surface-neutral-inverse: var(--brand-neutral-900);
490
227
  --semantic-surface-neutral-disabled: var(--brand-neutral-200);
491
228
  --semantic-surface-brand-subtle: var(--brand-primary-50);
492
229
  --semantic-surface-brand-default: var(--brand-primary-600);
@@ -506,18 +243,18 @@
506
243
  --semantic-surface-info-subtle: var(--system-info-50);
507
244
  --semantic-surface-info-default: var(--system-info-600);
508
245
  --semantic-surface-info-strong: var(--system-info-700);
509
- --semantic-border-default: var(--brand-neutral-200);
510
- --semantic-border-subtle: var(--brand-neutral-100);
511
- --semantic-border-strong: var(--brand-neutral-400);
246
+ --semantic-border-primary: var(--brand-neutral-200);
247
+ --semantic-border-secondary: var(--brand-neutral-100);
248
+ --semantic-border-tertiary: var(--brand-neutral-400);
512
249
  --semantic-border-disabled: var(--brand-neutral-300);
513
- --semantic-border-brand: var(--brand-primary-600);
250
+ --semantic-border-brand-primary: var(--brand-primary-400);
514
251
  --semantic-border-brand-secondary: var(--brand-secondary-600);
515
252
  --semantic-border-success: var(--system-success-300);
516
253
  --semantic-border-error: var(--system-error-300);
517
254
  --semantic-border-warning: var(--system-warning-300);
518
255
  --semantic-border-info: var(--system-info-300);
519
- --semantic-icon-strong: var(--brand-neutral-700);
520
- --semantic-icon-subtle: var(--brand-neutral-500);
256
+ --semantic-icon-primary: var(--brand-neutral-700);
257
+ --semantic-icon-secondary: var(--brand-neutral-500);
521
258
  --semantic-icon-inverse: var(--brand-base-white);
522
259
  --semantic-icon-brand: var(--brand-primary-600);
523
260
  --semantic-icon-brand-secondary: var(--brand-secondary-600);
@@ -526,14 +263,11 @@
526
263
  --semantic-icon-warning: var(--system-warning-600);
527
264
  --semantic-icon-info: var(--system-info-600);
528
265
  --semantic-icon-disabled: var(--brand-neutral-300);
529
- --semantic-emphasis-brand: var(--brand-primary-800);
530
- --semantic-emphasis-brand-secondary: var(--brand-secondary-800);
531
- --semantic-emphasis-success: var(--system-success-800);
532
- --semantic-emphasis-error: var(--system-error-800);
533
- --semantic-emphasis-warning: var(--system-warning-800);
534
- --semantic-emphasis-info: var(--system-info-800);
535
- --semantic-interaction-overlay-10: var(--brand-base-black-alpha-10);
536
- --semantic-interaction-overlay-25: var(--brand-base-black-alpha-25);
266
+ --semantic-interaction-overlay-5: var(--brand-base-overlay-5);
267
+ --semantic-interaction-overlay-10: var(--brand-base-overlay-10);
268
+ --semantic-interaction-overlay-25: var(--brand-base-overlay-25);
269
+ --semantic-interaction-overlay-50: var(--brand-base-overlay-50);
270
+ --semantic-interaction-overlay-75: var(--brand-base-overlay-75);
537
271
  --semantic-interaction-focus-ring: var(--brand-primary-700);
538
272
  }
539
273
  :root {
@@ -571,16 +305,12 @@
571
305
  --semantic-categorical-8-text: var(--brand-categorical-8-600);
572
306
  }
573
307
  :root {
574
- --typo-font-family-sans:
308
+ --typo-font-family-default:
575
309
  Pretendard,
576
310
  -apple-system,
577
311
  sans-serif;
578
- --typo-font-family-serif:
579
- Noto Serif KR,
580
- Georgia,
581
- serif;
582
- --typo-font-family-suit:
583
- SUIT,
312
+ --typo-font-family-brand:
313
+ Pretendard,
584
314
  -apple-system,
585
315
  sans-serif;
586
316
  --typo-weight-regular: 400;
@@ -593,96 +323,27 @@
593
323
  --typo-size-title-2: 24px;
594
324
  --typo-size-heading-1: 20px;
595
325
  --typo-size-heading-2: 18px;
596
- --typo-size-compact-body-1: 17px;
597
- --typo-size-compact-body-2: 15px;
598
- --typo-size-compact-label-1: 14px;
599
- --typo-size-compact-label-2: 12px;
600
- --typo-size-compact-caption-1: 11px;
601
- --typo-size-compact-caption-2: 11px;
602
- --typo-size-default-body-1: 18px;
603
- --typo-size-default-body-2: 17px;
604
- --typo-size-default-label-1: 16px;
605
- --typo-size-default-label-2: 14px;
606
- --typo-size-default-caption-1: 13px;
607
- --typo-size-default-caption-2: 12px;
608
- --typo-size-airy-body-1: 20px;
609
- --typo-size-airy-body-2: 19px;
610
- --typo-size-airy-label-1: 18px;
611
- --typo-size-airy-label-2: 16px;
612
- --typo-size-airy-caption-1: 14px;
613
- --typo-size-airy-caption-2: 13px;
326
+ --typo-size-body-1: 18px;
327
+ --typo-size-body-2: 17px;
328
+ --typo-size-label-1: 16px;
329
+ --typo-size-label-2: 14px;
330
+ --typo-size-caption-1: 13px;
331
+ --typo-size-caption-2: 12px;
614
332
  --typo-lh-display-1: 62px;
615
333
  --typo-lh-display-2: 48px;
616
334
  --typo-lh-title-1: 38px;
617
335
  --typo-lh-title-2: 34px;
618
- --typo-lh-compact-heading-1: 26px;
619
- --typo-lh-compact-heading-2: 24px;
620
- --typo-lh-compact-body-1: 24px;
621
- --typo-lh-compact-body-2: 22px;
622
- --typo-lh-compact-label-1: 20px;
623
- --typo-lh-compact-label-2: 18px;
624
- --typo-lh-compact-caption-1: 16px;
625
- --typo-lh-compact-caption-2: 16px;
626
- --typo-lh-default-heading-1: 30px;
627
- --typo-lh-default-heading-2: 28px;
628
- --typo-lh-default-body-1: 26px;
629
- --typo-lh-default-body-2: 24px;
630
- --typo-lh-default-label-1: 24px;
631
- --typo-lh-default-label-2: 22px;
632
- --typo-lh-default-caption-1: 18px;
633
- --typo-lh-default-caption-2: 18px;
634
- --typo-lh-airy-heading-1: 34px;
635
- --typo-lh-airy-heading-2: 32px;
636
- --typo-lh-airy-body-1: 30px;
637
- --typo-lh-airy-body-2: 28px;
638
- --typo-lh-airy-label-1: 28px;
639
- --typo-lh-airy-label-2: 26px;
640
- --typo-lh-airy-caption-1: 22px;
641
- --typo-lh-airy-caption-2: 20px;
336
+ --typo-lh-heading-1: 30px;
337
+ --typo-lh-heading-2: 28px;
338
+ --typo-lh-body-1: 26px;
339
+ --typo-lh-body-2: 24px;
340
+ --typo-lh-label-1: 24px;
341
+ --typo-lh-label-2: 22px;
342
+ --typo-lh-caption-1: 18px;
343
+ --typo-lh-caption-2: 18px;
642
344
  --typo-ls-tight: -0.02em;
643
345
  --typo-ls-normal: 0;
644
346
  --typo-ls-wide: 0.02em;
645
- --typo-brand-font-family-font: var(--typo-font-family-sans);
646
- --typo-brand-size-display-1: var(--typo-size-display-1);
647
- --typo-brand-size-display-2: var(--typo-size-display-2);
648
- --typo-brand-size-title-1: var(--typo-size-title-1);
649
- --typo-brand-size-title-2: var(--typo-size-title-2);
650
- --typo-brand-size-heading-1: var(--typo-size-heading-1);
651
- --typo-brand-size-heading-2: var(--typo-size-heading-2);
652
- --typo-brand-size-body-1: var(--typo-size-default-body-1);
653
- --typo-brand-size-body-2: var(--typo-size-default-body-2);
654
- --typo-brand-size-label-1: var(--typo-size-default-label-1);
655
- --typo-brand-size-label-2: var(--typo-size-default-label-2);
656
- --typo-brand-size-caption-1: var(--typo-size-default-caption-1);
657
- --typo-brand-size-caption-2: var(--typo-size-default-caption-2);
658
- --typo-brand-line-height-display-1: var(--typo-lh-display-1);
659
- --typo-brand-line-height-display-2: var(--typo-lh-display-2);
660
- --typo-brand-line-height-title-1: var(--typo-lh-title-1);
661
- --typo-brand-line-height-title-2: var(--typo-lh-title-2);
662
- --typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
663
- --typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
664
- --typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
665
- --typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
666
- --typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
667
- --typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
668
- --typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
669
- --typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
670
- --typo-brand-weight-regular: var(--typo-weight-regular);
671
- --typo-brand-weight-medium: var(--typo-weight-medium);
672
- --typo-brand-weight-semibold: var(--typo-weight-semibold);
673
- --typo-brand-weight-bold: var(--typo-weight-bold);
674
- --typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
675
- --typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
676
- --typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
677
- --typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
678
- --typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
679
- --typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
680
- --typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
681
- --typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
682
- --typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
683
- --typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
684
- --typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
685
- --typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
686
347
  }
687
348
  @media (min-width: 768px) and (max-width: 1024px) {
688
349
  :root {
@@ -692,52 +353,24 @@
692
353
  --typo-size-title-2: 22px;
693
354
  --typo-size-heading-1: 19px;
694
355
  --typo-size-heading-2: 17px;
695
- --typo-size-compact-body-1: 16px;
696
- --typo-size-compact-body-2: 15px;
697
- --typo-size-compact-label-1: 14px;
698
- --typo-size-compact-label-2: 12px;
699
- --typo-size-compact-caption-1: 11px;
700
- --typo-size-compact-caption-2: 11px;
701
- --typo-size-default-body-1: 17px;
702
- --typo-size-default-body-2: 16px;
703
- --typo-size-default-label-1: 16px;
704
- --typo-size-default-label-2: 14px;
705
- --typo-size-default-caption-1: 13px;
706
- --typo-size-default-caption-2: 12px;
707
- --typo-size-airy-body-1: 19px;
708
- --typo-size-airy-body-2: 17px;
709
- --typo-size-airy-label-1: 17px;
710
- --typo-size-airy-label-2: 15px;
711
- --typo-size-airy-caption-1: 14px;
712
- --typo-size-airy-caption-2: 13px;
356
+ --typo-size-body-1: 17px;
357
+ --typo-size-body-2: 16px;
358
+ --typo-size-label-1: 15px;
359
+ --typo-size-label-2: 14px;
360
+ --typo-size-caption-1: 13px;
361
+ --typo-size-caption-2: 12px;
713
362
  --typo-lh-display-1: 52px;
714
363
  --typo-lh-display-2: 42px;
715
364
  --typo-lh-title-1: 36px;
716
365
  --typo-lh-title-2: 32px;
717
- --typo-lh-compact-heading-1: 24px;
718
- --typo-lh-compact-heading-2: 22px;
719
- --typo-lh-compact-body-1: 24px;
720
- --typo-lh-compact-body-2: 22px;
721
- --typo-lh-compact-label-1: 20px;
722
- --typo-lh-compact-label-2: 18px;
723
- --typo-lh-compact-caption-1: 16px;
724
- --typo-lh-compact-caption-2: 16px;
725
- --typo-lh-default-heading-1: 28px;
726
- --typo-lh-default-heading-2: 26px;
727
- --typo-lh-default-body-1: 26px;
728
- --typo-lh-default-body-2: 24px;
729
- --typo-lh-default-label-1: 24px;
730
- --typo-lh-default-label-2: 22px;
731
- --typo-lh-default-caption-1: 18px;
732
- --typo-lh-default-caption-2: 18px;
733
- --typo-lh-airy-heading-1: 32px;
734
- --typo-lh-airy-heading-2: 28px;
735
- --typo-lh-airy-body-1: 30px;
736
- --typo-lh-airy-body-2: 28px;
737
- --typo-lh-airy-label-1: 28px;
738
- --typo-lh-airy-label-2: 26px;
739
- --typo-lh-airy-caption-1: 22px;
740
- --typo-lh-airy-caption-2: 20px;
366
+ --typo-lh-heading-1: 28px;
367
+ --typo-lh-heading-2: 26px;
368
+ --typo-lh-body-1: 26px;
369
+ --typo-lh-body-2: 24px;
370
+ --typo-lh-label-1: 24px;
371
+ --typo-lh-label-2: 22px;
372
+ --typo-lh-caption-1: 18px;
373
+ --typo-lh-caption-2: 18px;
741
374
  --typo-ls-tight: -0.02em;
742
375
  --typo-ls-normal: 0;
743
376
  --typo-ls-wide: 0.02em;
@@ -751,173 +384,145 @@
751
384
  --typo-size-title-2: 20px;
752
385
  --typo-size-heading-1: 18px;
753
386
  --typo-size-heading-2: 17px;
754
- --typo-size-compact-body-1: 16px;
755
- --typo-size-compact-body-2: 13px;
756
- --typo-size-compact-label-1: 14px;
757
- --typo-size-compact-label-2: 12px;
758
- --typo-size-compact-caption-1: 11px;
759
- --typo-size-compact-caption-2: 11px;
760
- --typo-size-default-body-1: 17px;
761
- --typo-size-default-body-2: 14px;
762
- --typo-size-default-label-1: 16px;
763
- --typo-size-default-label-2: 14px;
764
- --typo-size-default-caption-1: 13px;
765
- --typo-size-default-caption-2: 12px;
766
- --typo-size-airy-body-1: 19px;
767
- --typo-size-airy-body-2: 16px;
768
- --typo-size-airy-label-1: 16px;
769
- --typo-size-airy-label-2: 14px;
770
- --typo-size-airy-caption-1: 14px;
771
- --typo-size-airy-caption-2: 13px;
387
+ --typo-size-body-1: 17px;
388
+ --typo-size-body-2: 16px;
389
+ --typo-size-label-1: 15px;
390
+ --typo-size-label-2: 14px;
391
+ --typo-size-caption-1: 13px;
392
+ --typo-size-caption-2: 12px;
772
393
  --typo-lh-display-1: 42px;
773
394
  --typo-lh-display-2: 38px;
774
395
  --typo-lh-title-1: 34px;
775
396
  --typo-lh-title-2: 30px;
776
- --typo-lh-compact-heading-1: 24px;
777
- --typo-lh-compact-heading-2: 22px;
778
- --typo-lh-compact-body-1: 24px;
779
- --typo-lh-compact-body-2: 22px;
780
- --typo-lh-compact-label-1: 20px;
781
- --typo-lh-compact-label-2: 18px;
782
- --typo-lh-compact-caption-1: 16px;
783
- --typo-lh-compact-caption-2: 16px;
784
- --typo-lh-default-heading-1: 28px;
785
- --typo-lh-default-heading-2: 26px;
786
- --typo-lh-default-body-1: 26px;
787
- --typo-lh-default-body-2: 24px;
788
- --typo-lh-default-label-1: 24px;
789
- --typo-lh-default-label-2: 22px;
790
- --typo-lh-default-caption-1: 18px;
791
- --typo-lh-default-caption-2: 18px;
792
- --typo-lh-airy-heading-1: 32px;
793
- --typo-lh-airy-heading-2: 28px;
794
- --typo-lh-airy-body-1: 30px;
795
- --typo-lh-airy-body-2: 28px;
796
- --typo-lh-airy-label-1: 28px;
797
- --typo-lh-airy-label-2: 26px;
798
- --typo-lh-airy-caption-1: 22px;
799
- --typo-lh-airy-caption-2: 20px;
397
+ --typo-lh-heading-1: 28px;
398
+ --typo-lh-heading-2: 26px;
399
+ --typo-lh-body-1: 26px;
400
+ --typo-lh-body-2: 24px;
401
+ --typo-lh-label-1: 24px;
402
+ --typo-lh-label-2: 22px;
403
+ --typo-lh-caption-1: 18px;
404
+ --typo-lh-caption-2: 18px;
800
405
  --typo-ls-tight: -0.01em;
801
406
  --typo-ls-normal: 0;
802
407
  --typo-ls-wide: 0.02em;
803
408
  }
804
409
  }
805
410
  :root {
806
- --semantic-typo-display-1-b-font: var(--typo-brand-font-family-font);
807
- --semantic-typo-display-1-b-size: var(--typo-brand-size-display-1);
808
- --semantic-typo-display-1-b-lh: var(--typo-brand-line-height-display-1);
809
- --semantic-typo-display-1-b-weight: var(--typo-brand-weight-bold);
810
- --semantic-typo-display-1-b-ls: var(--typo-brand-letter-spacing-display-1);
811
- --semantic-typo-display-1-sb-font: var(--typo-brand-font-family-font);
812
- --semantic-typo-display-1-sb-size: var(--typo-brand-size-display-1);
813
- --semantic-typo-display-1-sb-lh: var(--typo-brand-line-height-display-1);
814
- --semantic-typo-display-1-sb-weight: var(--typo-brand-weight-semibold);
815
- --semantic-typo-display-1-sb-ls: var(--typo-brand-letter-spacing-display-1);
816
- --semantic-typo-display-2-b-font: var(--typo-brand-font-family-font);
817
- --semantic-typo-display-2-b-size: var(--typo-brand-size-display-2);
818
- --semantic-typo-display-2-b-lh: var(--typo-brand-line-height-display-2);
819
- --semantic-typo-display-2-b-weight: var(--typo-brand-weight-bold);
820
- --semantic-typo-display-2-b-ls: var(--typo-brand-letter-spacing-display-2);
821
- --semantic-typo-display-2-sb-font: var(--typo-brand-font-family-font);
822
- --semantic-typo-display-2-sb-size: var(--typo-brand-size-display-2);
823
- --semantic-typo-display-2-sb-lh: var(--typo-brand-line-height-display-2);
824
- --semantic-typo-display-2-sb-weight: var(--typo-brand-weight-semibold);
825
- --semantic-typo-display-2-sb-ls: var(--typo-brand-letter-spacing-display-2);
826
- --semantic-typo-title-1-sb-font: var(--typo-brand-font-family-font);
827
- --semantic-typo-title-1-sb-size: var(--typo-brand-size-title-1);
828
- --semantic-typo-title-1-sb-lh: var(--typo-brand-line-height-title-1);
829
- --semantic-typo-title-1-sb-weight: var(--typo-brand-weight-semibold);
830
- --semantic-typo-title-1-sb-ls: var(--typo-brand-letter-spacing-title-1);
831
- --semantic-typo-title-1-m-font: var(--typo-brand-font-family-font);
832
- --semantic-typo-title-1-m-size: var(--typo-brand-size-title-1);
833
- --semantic-typo-title-1-m-lh: var(--typo-brand-line-height-title-1);
834
- --semantic-typo-title-1-m-weight: var(--typo-brand-weight-medium);
835
- --semantic-typo-title-1-m-ls: var(--typo-brand-letter-spacing-title-1);
836
- --semantic-typo-title-2-sb-font: var(--typo-brand-font-family-font);
837
- --semantic-typo-title-2-sb-size: var(--typo-brand-size-title-2);
838
- --semantic-typo-title-2-sb-lh: var(--typo-brand-line-height-title-2);
839
- --semantic-typo-title-2-sb-weight: var(--typo-brand-weight-semibold);
840
- --semantic-typo-title-2-sb-ls: var(--typo-brand-letter-spacing-title-2);
841
- --semantic-typo-title-2-m-font: var(--typo-brand-font-family-font);
842
- --semantic-typo-title-2-m-size: var(--typo-brand-size-title-2);
843
- --semantic-typo-title-2-m-lh: var(--typo-brand-line-height-title-2);
844
- --semantic-typo-title-2-m-weight: var(--typo-brand-weight-medium);
845
- --semantic-typo-title-2-m-ls: var(--typo-brand-letter-spacing-title-2);
846
- --semantic-typo-heading-1-sb-font: var(--typo-brand-font-family-font);
847
- --semantic-typo-heading-1-sb-size: var(--typo-brand-size-heading-1);
848
- --semantic-typo-heading-1-sb-lh: var(--typo-brand-line-height-heading-1);
849
- --semantic-typo-heading-1-sb-weight: var(--typo-brand-weight-semibold);
850
- --semantic-typo-heading-1-sb-ls: var(--typo-brand-letter-spacing-heading-1);
851
- --semantic-typo-heading-1-m-font: var(--typo-brand-font-family-font);
852
- --semantic-typo-heading-1-m-size: var(--typo-brand-size-heading-1);
853
- --semantic-typo-heading-1-m-lh: var(--typo-brand-line-height-heading-1);
854
- --semantic-typo-heading-1-m-weight: var(--typo-brand-weight-medium);
855
- --semantic-typo-heading-1-m-ls: var(--typo-brand-letter-spacing-heading-1);
856
- --semantic-typo-heading-2-m-font: var(--typo-brand-font-family-font);
857
- --semantic-typo-heading-2-m-size: var(--typo-brand-size-heading-2);
858
- --semantic-typo-heading-2-m-lh: var(--typo-brand-line-height-heading-2);
859
- --semantic-typo-heading-2-m-weight: var(--typo-brand-weight-medium);
860
- --semantic-typo-heading-2-m-ls: var(--typo-brand-letter-spacing-heading-2);
861
- --semantic-typo-body-1-sb-font: var(--typo-brand-font-family-font);
862
- --semantic-typo-body-1-sb-size: var(--typo-brand-size-body-1);
863
- --semantic-typo-body-1-sb-lh: var(--typo-brand-line-height-body-1);
864
- --semantic-typo-body-1-sb-weight: var(--typo-brand-weight-semibold);
865
- --semantic-typo-body-1-sb-ls: var(--typo-brand-letter-spacing-body-1);
866
- --semantic-typo-body-1-m-font: var(--typo-brand-font-family-font);
867
- --semantic-typo-body-1-m-size: var(--typo-brand-size-body-1);
868
- --semantic-typo-body-1-m-lh: var(--typo-brand-line-height-body-1);
869
- --semantic-typo-body-1-m-weight: var(--typo-brand-weight-medium);
870
- --semantic-typo-body-1-m-ls: var(--typo-brand-letter-spacing-body-1);
871
- --semantic-typo-body-1-r-font: var(--typo-brand-font-family-font);
872
- --semantic-typo-body-1-r-size: var(--typo-brand-size-body-1);
873
- --semantic-typo-body-1-r-lh: var(--typo-brand-line-height-body-1);
874
- --semantic-typo-body-1-r-weight: var(--typo-brand-weight-regular);
875
- --semantic-typo-body-1-r-ls: var(--typo-brand-letter-spacing-body-1);
876
- --semantic-typo-body-2-m-font: var(--typo-brand-font-family-font);
877
- --semantic-typo-body-2-m-size: var(--typo-brand-size-body-2);
878
- --semantic-typo-body-2-m-lh: var(--typo-brand-line-height-body-2);
879
- --semantic-typo-body-2-m-weight: var(--typo-brand-weight-medium);
880
- --semantic-typo-body-2-m-ls: var(--typo-brand-letter-spacing-body-2);
881
- --semantic-typo-body-2-r-font: var(--typo-brand-font-family-font);
882
- --semantic-typo-body-2-r-size: var(--typo-brand-size-body-2);
883
- --semantic-typo-body-2-r-lh: var(--typo-brand-line-height-body-2);
884
- --semantic-typo-body-2-r-weight: var(--typo-brand-weight-regular);
885
- --semantic-typo-body-2-r-ls: var(--typo-brand-letter-spacing-body-2);
886
- --semantic-typo-label-1-sb-font: var(--typo-brand-font-family-font);
887
- --semantic-typo-label-1-sb-size: var(--typo-brand-size-label-1);
888
- --semantic-typo-label-1-sb-lh: var(--typo-brand-line-height-label-1);
889
- --semantic-typo-label-1-sb-weight: var(--typo-brand-weight-semibold);
890
- --semantic-typo-label-1-sb-ls: var(--typo-brand-letter-spacing-label-1);
891
- --semantic-typo-label-1-m-font: var(--typo-brand-font-family-font);
892
- --semantic-typo-label-1-m-size: var(--typo-brand-size-label-1);
893
- --semantic-typo-label-1-m-lh: var(--typo-brand-line-height-label-1);
894
- --semantic-typo-label-1-m-weight: var(--typo-brand-weight-medium);
895
- --semantic-typo-label-1-m-ls: var(--typo-brand-letter-spacing-label-1);
896
- --semantic-typo-label-2-sb-font: var(--typo-brand-font-family-font);
897
- --semantic-typo-label-2-sb-size: var(--typo-brand-size-label-2);
898
- --semantic-typo-label-2-sb-lh: var(--typo-brand-line-height-label-2);
899
- --semantic-typo-label-2-sb-weight: var(--typo-brand-weight-semibold);
900
- --semantic-typo-label-2-sb-ls: var(--typo-brand-letter-spacing-label-2);
901
- --semantic-typo-label-2-m-font: var(--typo-brand-font-family-font);
902
- --semantic-typo-label-2-m-size: var(--typo-brand-size-label-2);
903
- --semantic-typo-label-2-m-lh: var(--typo-brand-line-height-label-2);
904
- --semantic-typo-label-2-m-weight: var(--typo-brand-weight-medium);
905
- --semantic-typo-label-2-m-ls: var(--typo-brand-letter-spacing-label-2);
906
- --semantic-typo-caption-1-sb-font: var(--typo-brand-font-family-font);
907
- --semantic-typo-caption-1-sb-size: var(--typo-brand-size-caption-1);
908
- --semantic-typo-caption-1-sb-lh: var(--typo-brand-line-height-caption-1);
909
- --semantic-typo-caption-1-sb-weight: var(--typo-brand-weight-semibold);
910
- --semantic-typo-caption-1-sb-ls: var(--typo-brand-letter-spacing-caption-1);
911
- --semantic-typo-caption-1-r-font: var(--typo-brand-font-family-font);
912
- --semantic-typo-caption-1-r-size: var(--typo-brand-size-caption-1);
913
- --semantic-typo-caption-1-r-lh: var(--typo-brand-line-height-caption-1);
914
- --semantic-typo-caption-1-r-weight: var(--typo-brand-weight-regular);
915
- --semantic-typo-caption-1-r-ls: var(--typo-brand-letter-spacing-caption-1);
916
- --semantic-typo-caption-2-r-font: var(--typo-brand-font-family-font);
917
- --semantic-typo-caption-2-r-size: var(--typo-brand-size-caption-2);
918
- --semantic-typo-caption-2-r-lh: var(--typo-brand-line-height-caption-2);
919
- --semantic-typo-caption-2-r-weight: var(--typo-brand-weight-regular);
920
- --semantic-typo-caption-2-r-ls: var(--typo-brand-letter-spacing-caption-2);
411
+ --semantic-typo-display-1-b-font: var(--typo-font-family-brand);
412
+ --semantic-typo-display-1-b-size: var(--typo-size-display-1);
413
+ --semantic-typo-display-1-b-lh: var(--typo-lh-display-1);
414
+ --semantic-typo-display-1-b-weight: var(--typo-weight-bold);
415
+ --semantic-typo-display-1-b-ls: var(--typo-ls-tight);
416
+ --semantic-typo-display-1-sb-font: var(--typo-font-family-brand);
417
+ --semantic-typo-display-1-sb-size: var(--typo-size-display-1);
418
+ --semantic-typo-display-1-sb-lh: var(--typo-lh-display-1);
419
+ --semantic-typo-display-1-sb-weight: var(--typo-weight-semibold);
420
+ --semantic-typo-display-1-sb-ls: var(--typo-ls-tight);
421
+ --semantic-typo-display-2-b-font: var(--typo-font-family-brand);
422
+ --semantic-typo-display-2-b-size: var(--typo-size-display-2);
423
+ --semantic-typo-display-2-b-lh: var(--typo-lh-display-2);
424
+ --semantic-typo-display-2-b-weight: var(--typo-weight-bold);
425
+ --semantic-typo-display-2-b-ls: var(--typo-ls-tight);
426
+ --semantic-typo-display-2-sb-font: var(--typo-font-family-brand);
427
+ --semantic-typo-display-2-sb-size: var(--typo-size-display-2);
428
+ --semantic-typo-display-2-sb-lh: var(--typo-lh-display-2);
429
+ --semantic-typo-display-2-sb-weight: var(--typo-weight-semibold);
430
+ --semantic-typo-display-2-sb-ls: var(--typo-ls-tight);
431
+ --semantic-typo-title-1-sb-font: var(--typo-font-family-brand);
432
+ --semantic-typo-title-1-sb-size: var(--typo-size-title-1);
433
+ --semantic-typo-title-1-sb-lh: var(--typo-lh-title-1);
434
+ --semantic-typo-title-1-sb-weight: var(--typo-weight-semibold);
435
+ --semantic-typo-title-1-sb-ls: var(--typo-ls-tight);
436
+ --semantic-typo-title-1-m-font: var(--typo-font-family-brand);
437
+ --semantic-typo-title-1-m-size: var(--typo-size-title-1);
438
+ --semantic-typo-title-1-m-lh: var(--typo-lh-title-1);
439
+ --semantic-typo-title-1-m-weight: var(--typo-weight-medium);
440
+ --semantic-typo-title-1-m-ls: var(--typo-ls-tight);
441
+ --semantic-typo-title-2-sb-font: var(--typo-font-family-brand);
442
+ --semantic-typo-title-2-sb-size: var(--typo-size-title-2);
443
+ --semantic-typo-title-2-sb-lh: var(--typo-lh-title-2);
444
+ --semantic-typo-title-2-sb-weight: var(--typo-weight-semibold);
445
+ --semantic-typo-title-2-sb-ls: var(--typo-ls-tight);
446
+ --semantic-typo-title-2-m-font: var(--typo-font-family-brand);
447
+ --semantic-typo-title-2-m-size: var(--typo-size-title-2);
448
+ --semantic-typo-title-2-m-lh: var(--typo-lh-title-2);
449
+ --semantic-typo-title-2-m-weight: var(--typo-weight-medium);
450
+ --semantic-typo-title-2-m-ls: var(--typo-ls-tight);
451
+ --semantic-typo-heading-1-sb-font: var(--typo-font-family-default);
452
+ --semantic-typo-heading-1-sb-size: var(--typo-size-heading-1);
453
+ --semantic-typo-heading-1-sb-lh: var(--typo-lh-heading-1);
454
+ --semantic-typo-heading-1-sb-weight: var(--typo-weight-semibold);
455
+ --semantic-typo-heading-1-sb-ls: var(--typo-ls-tight);
456
+ --semantic-typo-heading-1-m-font: var(--typo-font-family-default);
457
+ --semantic-typo-heading-1-m-size: var(--typo-size-heading-1);
458
+ --semantic-typo-heading-1-m-lh: var(--typo-lh-heading-1);
459
+ --semantic-typo-heading-1-m-weight: var(--typo-weight-medium);
460
+ --semantic-typo-heading-1-m-ls: var(--typo-ls-tight);
461
+ --semantic-typo-heading-2-m-font: var(--typo-font-family-default);
462
+ --semantic-typo-heading-2-m-size: var(--typo-size-heading-2);
463
+ --semantic-typo-heading-2-m-lh: var(--typo-lh-heading-2);
464
+ --semantic-typo-heading-2-m-weight: var(--typo-weight-medium);
465
+ --semantic-typo-heading-2-m-ls: var(--typo-ls-tight);
466
+ --semantic-typo-body-1-sb-font: var(--typo-font-family-default);
467
+ --semantic-typo-body-1-sb-size: var(--typo-size-body-1);
468
+ --semantic-typo-body-1-sb-lh: var(--typo-lh-body-1);
469
+ --semantic-typo-body-1-sb-weight: var(--typo-weight-semibold);
470
+ --semantic-typo-body-1-sb-ls: var(--typo-ls-normal);
471
+ --semantic-typo-body-1-m-font: var(--typo-font-family-default);
472
+ --semantic-typo-body-1-m-size: var(--typo-size-body-1);
473
+ --semantic-typo-body-1-m-lh: var(--typo-lh-body-1);
474
+ --semantic-typo-body-1-m-weight: var(--typo-weight-medium);
475
+ --semantic-typo-body-1-m-ls: var(--typo-ls-normal);
476
+ --semantic-typo-body-1-r-font: var(--typo-font-family-default);
477
+ --semantic-typo-body-1-r-size: var(--typo-size-body-1);
478
+ --semantic-typo-body-1-r-lh: var(--typo-lh-body-1);
479
+ --semantic-typo-body-1-r-weight: var(--typo-weight-regular);
480
+ --semantic-typo-body-1-r-ls: var(--typo-ls-normal);
481
+ --semantic-typo-body-2-m-font: var(--typo-font-family-default);
482
+ --semantic-typo-body-2-m-size: var(--typo-size-body-2);
483
+ --semantic-typo-body-2-m-lh: var(--typo-lh-body-2);
484
+ --semantic-typo-body-2-m-weight: var(--typo-weight-medium);
485
+ --semantic-typo-body-2-m-ls: var(--typo-ls-normal);
486
+ --semantic-typo-body-2-r-font: var(--typo-font-family-default);
487
+ --semantic-typo-body-2-r-size: var(--typo-size-body-2);
488
+ --semantic-typo-body-2-r-lh: var(--typo-lh-body-2);
489
+ --semantic-typo-body-2-r-weight: var(--typo-weight-regular);
490
+ --semantic-typo-body-2-r-ls: var(--typo-ls-normal);
491
+ --semantic-typo-label-1-sb-font: var(--typo-font-family-default);
492
+ --semantic-typo-label-1-sb-size: var(--typo-size-label-1);
493
+ --semantic-typo-label-1-sb-lh: var(--typo-lh-label-1);
494
+ --semantic-typo-label-1-sb-weight: var(--typo-weight-semibold);
495
+ --semantic-typo-label-1-sb-ls: var(--typo-ls-normal);
496
+ --semantic-typo-label-1-m-font: var(--typo-font-family-default);
497
+ --semantic-typo-label-1-m-size: var(--typo-size-label-1);
498
+ --semantic-typo-label-1-m-lh: var(--typo-lh-label-1);
499
+ --semantic-typo-label-1-m-weight: var(--typo-weight-medium);
500
+ --semantic-typo-label-1-m-ls: var(--typo-ls-normal);
501
+ --semantic-typo-label-2-sb-font: var(--typo-font-family-default);
502
+ --semantic-typo-label-2-sb-size: var(--typo-size-label-2);
503
+ --semantic-typo-label-2-sb-lh: var(--typo-lh-label-2);
504
+ --semantic-typo-label-2-sb-weight: var(--typo-weight-semibold);
505
+ --semantic-typo-label-2-sb-ls: var(--typo-ls-wide);
506
+ --semantic-typo-label-2-m-font: var(--typo-font-family-default);
507
+ --semantic-typo-label-2-m-size: var(--typo-size-label-2);
508
+ --semantic-typo-label-2-m-lh: var(--typo-lh-label-2);
509
+ --semantic-typo-label-2-m-weight: var(--typo-weight-medium);
510
+ --semantic-typo-label-2-m-ls: var(--typo-ls-wide);
511
+ --semantic-typo-caption-1-sb-font: var(--typo-font-family-default);
512
+ --semantic-typo-caption-1-sb-size: var(--typo-size-caption-1);
513
+ --semantic-typo-caption-1-sb-lh: var(--typo-lh-caption-1);
514
+ --semantic-typo-caption-1-sb-weight: var(--typo-weight-semibold);
515
+ --semantic-typo-caption-1-sb-ls: var(--typo-ls-wide);
516
+ --semantic-typo-caption-1-r-font: var(--typo-font-family-default);
517
+ --semantic-typo-caption-1-r-size: var(--typo-size-caption-1);
518
+ --semantic-typo-caption-1-r-lh: var(--typo-lh-caption-1);
519
+ --semantic-typo-caption-1-r-weight: var(--typo-weight-regular);
520
+ --semantic-typo-caption-1-r-ls: var(--typo-ls-wide);
521
+ --semantic-typo-caption-2-r-font: var(--typo-font-family-default);
522
+ --semantic-typo-caption-2-r-size: var(--typo-size-caption-2);
523
+ --semantic-typo-caption-2-r-lh: var(--typo-lh-caption-2);
524
+ --semantic-typo-caption-2-r-weight: var(--typo-weight-regular);
525
+ --semantic-typo-caption-2-r-ls: var(--typo-ls-wide);
921
526
  }
922
527
  .typo-display-1-b {
923
528
  font-family: var(--semantic-typo-display-1-b-font);
@@ -1080,17 +685,17 @@
1080
685
  font-weight: var(--semantic-typo-caption-2-r-weight);
1081
686
  letter-spacing: var(--semantic-typo-caption-2-r-ls);
1082
687
  }
1083
- .semantic-text-strong {
1084
- --ds-color: var(--semantic-text-strong);
688
+ .semantic-text-primary {
689
+ --ds-color: var(--semantic-text-primary);
1085
690
  }
1086
- .semantic-text-subtle {
1087
- --ds-color: var(--semantic-text-subtle);
691
+ .semantic-text-secondary {
692
+ --ds-color: var(--semantic-text-secondary);
1088
693
  }
1089
- .semantic-text-muted {
1090
- --ds-color: var(--semantic-text-muted);
694
+ .semantic-text-tertiary {
695
+ --ds-color: var(--semantic-text-tertiary);
1091
696
  }
1092
- .semantic-text-brand {
1093
- --ds-color: var(--semantic-text-brand);
697
+ .semantic-text-brand-primary {
698
+ --ds-color: var(--semantic-text-brand-primary);
1094
699
  }
1095
700
  .semantic-text-brand-secondary {
1096
701
  --ds-color: var(--semantic-text-brand-secondary);
@@ -1116,23 +721,23 @@
1116
721
  .semantic-text-link {
1117
722
  --ds-color: var(--semantic-text-link);
1118
723
  }
1119
- .semantic-text-sunday {
1120
- --ds-color: var(--semantic-text-sunday);
724
+ .semantic-text-accent-red {
725
+ --ds-color: var(--semantic-text-accent-red);
1121
726
  }
1122
- .semantic-text-saturday {
1123
- --ds-color: var(--semantic-text-saturday);
727
+ .semantic-text-accent-blue {
728
+ --ds-color: var(--semantic-text-accent-blue);
1124
729
  }
1125
- .semantic-surface-neutral-default {
1126
- --ds-color: var(--semantic-surface-neutral-default);
730
+ .semantic-surface-neutral-primary {
731
+ --ds-color: var(--semantic-surface-neutral-primary);
1127
732
  }
1128
- .semantic-surface-neutral-subtle {
1129
- --ds-color: var(--semantic-surface-neutral-subtle);
733
+ .semantic-surface-neutral-secondary {
734
+ --ds-color: var(--semantic-surface-neutral-secondary);
1130
735
  }
1131
- .semantic-surface-neutral-strong {
1132
- --ds-color: var(--semantic-surface-neutral-strong);
736
+ .semantic-surface-neutral-tertiary {
737
+ --ds-color: var(--semantic-surface-neutral-tertiary);
1133
738
  }
1134
- .semantic-surface-neutral-overlay {
1135
- --ds-color: var(--semantic-surface-neutral-overlay);
739
+ .semantic-surface-neutral-inverse {
740
+ --ds-color: var(--semantic-surface-neutral-inverse);
1136
741
  }
1137
742
  .semantic-surface-neutral-disabled {
1138
743
  --ds-color: var(--semantic-surface-neutral-disabled);
@@ -1191,20 +796,20 @@
1191
796
  .semantic-surface-info-strong {
1192
797
  --ds-color: var(--semantic-surface-info-strong);
1193
798
  }
1194
- .semantic-border-default {
1195
- --ds-color: var(--semantic-border-default);
799
+ .semantic-border-primary {
800
+ --ds-color: var(--semantic-border-primary);
1196
801
  }
1197
- .semantic-border-subtle {
1198
- --ds-color: var(--semantic-border-subtle);
802
+ .semantic-border-secondary {
803
+ --ds-color: var(--semantic-border-secondary);
1199
804
  }
1200
- .semantic-border-strong {
1201
- --ds-color: var(--semantic-border-strong);
805
+ .semantic-border-tertiary {
806
+ --ds-color: var(--semantic-border-tertiary);
1202
807
  }
1203
808
  .semantic-border-disabled {
1204
809
  --ds-color: var(--semantic-border-disabled);
1205
810
  }
1206
- .semantic-border-brand {
1207
- --ds-color: var(--semantic-border-brand);
811
+ .semantic-border-brand-primary {
812
+ --ds-color: var(--semantic-border-brand-primary);
1208
813
  }
1209
814
  .semantic-border-brand-secondary {
1210
815
  --ds-color: var(--semantic-border-brand-secondary);
@@ -1221,11 +826,11 @@
1221
826
  .semantic-border-info {
1222
827
  --ds-color: var(--semantic-border-info);
1223
828
  }
1224
- .semantic-icon-strong {
1225
- --ds-color: var(--semantic-icon-strong);
829
+ .semantic-icon-primary {
830
+ --ds-color: var(--semantic-icon-primary);
1226
831
  }
1227
- .semantic-icon-subtle {
1228
- --ds-color: var(--semantic-icon-subtle);
832
+ .semantic-icon-secondary {
833
+ --ds-color: var(--semantic-icon-secondary);
1229
834
  }
1230
835
  .semantic-icon-inverse {
1231
836
  --ds-color: var(--semantic-icon-inverse);
@@ -1251,23 +856,8 @@
1251
856
  .semantic-icon-disabled {
1252
857
  --ds-color: var(--semantic-icon-disabled);
1253
858
  }
1254
- .semantic-emphasis-brand {
1255
- --ds-color: var(--semantic-emphasis-brand);
1256
- }
1257
- .semantic-emphasis-brand-secondary {
1258
- --ds-color: var(--semantic-emphasis-brand-secondary);
1259
- }
1260
- .semantic-emphasis-success {
1261
- --ds-color: var(--semantic-emphasis-success);
1262
- }
1263
- .semantic-emphasis-error {
1264
- --ds-color: var(--semantic-emphasis-error);
1265
- }
1266
- .semantic-emphasis-warning {
1267
- --ds-color: var(--semantic-emphasis-warning);
1268
- }
1269
- .semantic-emphasis-info {
1270
- --ds-color: var(--semantic-emphasis-info);
859
+ .semantic-interaction-overlay-5 {
860
+ --ds-color: var(--semantic-interaction-overlay-5);
1271
861
  }
1272
862
  .semantic-interaction-overlay-10 {
1273
863
  --ds-color: var(--semantic-interaction-overlay-10);
@@ -1275,6 +865,12 @@
1275
865
  .semantic-interaction-overlay-25 {
1276
866
  --ds-color: var(--semantic-interaction-overlay-25);
1277
867
  }
868
+ .semantic-interaction-overlay-50 {
869
+ --ds-color: var(--semantic-interaction-overlay-50);
870
+ }
871
+ .semantic-interaction-overlay-75 {
872
+ --ds-color: var(--semantic-interaction-overlay-75);
873
+ }
1278
874
  .semantic-interaction-focus-ring {
1279
875
  --ds-color: var(--semantic-interaction-focus-ring);
1280
876
  }
@@ -1371,11 +967,23 @@
1371
967
  .brand-base-white {
1372
968
  --ds-color: var(--brand-base-white);
1373
969
  }
1374
- .brand-base-black-alpha-10 {
1375
- --ds-color: var(--brand-base-black-alpha-10);
970
+ .brand-base-overlay-5 {
971
+ --ds-color: var(--brand-base-overlay-5);
972
+ }
973
+ .brand-base-overlay-10 {
974
+ --ds-color: var(--brand-base-overlay-10);
975
+ }
976
+ .brand-base-overlay-25 {
977
+ --ds-color: var(--brand-base-overlay-25);
978
+ }
979
+ .brand-base-overlay-50 {
980
+ --ds-color: var(--brand-base-overlay-50);
1376
981
  }
1377
- .brand-base-black-alpha-25 {
1378
- --ds-color: var(--brand-base-black-alpha-25);
982
+ .brand-base-overlay-75 {
983
+ --ds-color: var(--brand-base-overlay-75);
984
+ }
985
+ .brand-base-overlay-85 {
986
+ --ds-color: var(--brand-base-overlay-85);
1379
987
  }
1380
988
  .brand-categorical-1-100 {
1381
989
  --ds-color: var(--brand-categorical-1-100);
@@ -1658,12 +1266,12 @@
1658
1266
  .lib-xplat-accordion {
1659
1267
  contain: content;
1660
1268
  width: 100%;
1661
- border: 1px solid var(--semantic-border-default);
1269
+ border: 1px solid var(--semantic-border-primary);
1662
1270
  border-radius: var(--spacing-radius-md);
1663
1271
  overflow: hidden;
1664
1272
  }
1665
1273
  .lib-xplat-accordion .accordion-item {
1666
- border-bottom: 1px solid var(--semantic-border-default);
1274
+ border-bottom: 1px solid var(--semantic-border-primary);
1667
1275
  }
1668
1276
  .lib-xplat-accordion .accordion-item:last-child {
1669
1277
  border-bottom: none;
@@ -1679,12 +1287,12 @@
1679
1287
  cursor: pointer;
1680
1288
  font-size: var(--semantic-typo-caption-1-r-size);
1681
1289
  font-weight: 500;
1682
- color: var(--semantic-text-strong);
1290
+ color: var(--semantic-text-primary);
1683
1291
  text-align: left;
1684
1292
  transition: background-color 0.2s;
1685
1293
  }
1686
1294
  .lib-xplat-accordion .accordion-header:hover {
1687
- background-color: var(--semantic-surface-neutral-subtle);
1295
+ background-color: var(--semantic-surface-neutral-secondary);
1688
1296
  }
1689
1297
  .lib-xplat-accordion .accordion-header .chevron {
1690
1298
  width: var(--spacing-space-5);
@@ -1694,7 +1302,7 @@
1694
1302
  align-items: center;
1695
1303
  justify-content: center;
1696
1304
  transition: transform 0.25s ease;
1697
- color: var(--semantic-text-muted);
1305
+ color: var(--semantic-text-tertiary);
1698
1306
  }
1699
1307
  .lib-xplat-accordion .accordion-body {
1700
1308
  overflow: hidden;
@@ -1704,7 +1312,7 @@
1704
1312
  .lib-xplat-accordion .accordion-content {
1705
1313
  padding: 0 var(--spacing-space-4) 14px;
1706
1314
  font-size: var(--semantic-typo-caption-1-r-size);
1707
- color: var(--semantic-text-subtle);
1315
+ color: var(--semantic-text-secondary);
1708
1316
  line-height: 1.6;
1709
1317
  }
1710
1318
  .lib-xplat-accordion .accordion-item.open .chevron {
@@ -1773,6 +1381,53 @@
1773
1381
  color: var(--semantic-text-error);
1774
1382
  }
1775
1383
 
1384
+ /* src/components/AutoResizeTextArea/autoResizeTextArea.scss */
1385
+ .lib-xplat-auto-resize-textarea-wrapper {
1386
+ display: flex;
1387
+ flex-direction: column;
1388
+ gap: var(--spacing-space-2);
1389
+ }
1390
+ .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea {
1391
+ display: flex;
1392
+ align-items: center;
1393
+ border: 1px solid var(--semantic-border-primary);
1394
+ border-radius: var(--spacing-radius-md);
1395
+ min-height: var(--spacing-control-height-md);
1396
+ overflow: hidden;
1397
+ background-color: var(--semantic-surface-neutral-primary);
1398
+ width: 100%;
1399
+ transition: border-color 0.15s, box-shadow 0.15s;
1400
+ }
1401
+ .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
1402
+ border-color: var(--semantic-border-tertiary);
1403
+ }
1404
+ .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
1405
+ border-color: var(--semantic-interaction-focus-ring);
1406
+ box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
1407
+ }
1408
+ .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
1409
+ border-color: var(--semantic-border-tertiary);
1410
+ }
1411
+ .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
1412
+ background-color: var(--semantic-surface-neutral-disabled);
1413
+ cursor: not-allowed;
1414
+ }
1415
+ .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea {
1416
+ border: none;
1417
+ outline: none;
1418
+ flex: 1;
1419
+ padding: var(--spacing-space-2) var(--spacing-space-4);
1420
+ width: 100%;
1421
+ color: var(--semantic-text-secondary);
1422
+ resize: none;
1423
+ font-size: var(--semantic-typo-label-2-m-size);
1424
+ line-height: var(--semantic-typo-label-2-m-lh);
1425
+ font-family: inherit;
1426
+ }
1427
+ .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea:disabled {
1428
+ cursor: not-allowed;
1429
+ }
1430
+
1776
1431
  /* src/components/Avatar/avatar.scss */
1777
1432
  .lib-xplat-avatar {
1778
1433
  display: inline-flex;
@@ -1810,8 +1465,8 @@
1810
1465
  align-items: center;
1811
1466
  justify-content: center;
1812
1467
  font-weight: 600;
1813
- background-color: var(--semantic-surface-neutral-subtle);
1814
- color: var(--semantic-text-muted);
1468
+ background-color: var(--semantic-surface-neutral-secondary);
1469
+ color: var(--semantic-text-tertiary);
1815
1470
  }
1816
1471
  .lib-xplat-avatar .fallback.cat-1 {
1817
1472
  background-color: var(--semantic-categorical-1-bg);
@@ -1906,7 +1561,7 @@
1906
1561
  }
1907
1562
  .lib-xplat-badge .badge-indicator.warning {
1908
1563
  background-color: var(--semantic-surface-warning-default);
1909
- color: var(--semantic-text-strong);
1564
+ color: var(--semantic-text-primary);
1910
1565
  }
1911
1566
  .lib-xplat-badge .badge-indicator.info {
1912
1567
  background-color: var(--semantic-surface-info-default);
@@ -1925,11 +1580,11 @@
1925
1580
  flex: 1;
1926
1581
  min-width: 0;
1927
1582
  border-radius: var(--spacing-radius-xl);
1928
- background-color: var(--semantic-surface-neutral-default);
1583
+ background-color: var(--semantic-surface-neutral-primary);
1929
1584
  overflow: hidden;
1930
1585
  }
1931
1586
  .lib-xplat-box.outlined {
1932
- border: 1px solid var(--semantic-border-default);
1587
+ border: 1px solid var(--semantic-border-primary);
1933
1588
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
1934
1589
  }
1935
1590
  .lib-xplat-box.elevated {
@@ -1938,15 +1593,15 @@
1938
1593
  }
1939
1594
  .lib-xplat-box.flat {
1940
1595
  border: none;
1941
- background-color: var(--semantic-surface-neutral-subtle);
1596
+ background-color: var(--semantic-surface-neutral-secondary);
1942
1597
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
1943
1598
  }
1944
1599
  .lib-xplat-box > .box-title {
1945
1600
  font-weight: 600;
1946
1601
  font-size: var(--semantic-typo-caption-1-r-size);
1947
- color: var(--semantic-text-strong);
1602
+ color: var(--semantic-text-primary);
1948
1603
  padding: var(--spacing-space-3) var(--spacing-space-4);
1949
- border-bottom: 1px solid var(--semantic-border-subtle);
1604
+ border-bottom: 1px solid var(--semantic-border-secondary);
1950
1605
  min-width: 0;
1951
1606
  overflow: hidden;
1952
1607
  text-overflow: ellipsis;
@@ -1991,7 +1646,7 @@
1991
1646
  font-size: var(--semantic-typo-caption-1-r-size);
1992
1647
  }
1993
1648
  .lib-xplat-breadcrumb .link {
1994
- color: var(--semantic-text-muted);
1649
+ color: var(--semantic-text-tertiary);
1995
1650
  text-decoration: none;
1996
1651
  background: none;
1997
1652
  border: none;
@@ -2001,14 +1656,14 @@
2001
1656
  transition: color 0.2s;
2002
1657
  }
2003
1658
  .lib-xplat-breadcrumb .link:hover {
2004
- color: var(--semantic-text-strong);
1659
+ color: var(--semantic-text-primary);
2005
1660
  }
2006
1661
  .lib-xplat-breadcrumb .current {
2007
- color: var(--semantic-text-strong);
1662
+ color: var(--semantic-text-primary);
2008
1663
  font-weight: 500;
2009
1664
  }
2010
1665
  .lib-xplat-breadcrumb .separator {
2011
- color: var(--semantic-icon-subtle);
1666
+ color: var(--semantic-icon-secondary);
2012
1667
  user-select: none;
2013
1668
  }
2014
1669
 
@@ -2066,14 +1721,14 @@
2066
1721
  }
2067
1722
  .lib-xplat-button.secondary {
2068
1723
  color: var(--semantic-surface-brand-default);
2069
- background-color: var(--semantic-surface-neutral-default);
2070
- border-color: var(--semantic-border-default);
1724
+ background-color: var(--semantic-surface-neutral-primary);
1725
+ border-color: var(--semantic-border-primary);
2071
1726
  }
2072
1727
  .lib-xplat-button.secondary:hover:not(:disabled) {
2073
- background-color: var(--semantic-surface-neutral-subtle);
1728
+ background-color: var(--semantic-surface-neutral-secondary);
2074
1729
  }
2075
1730
  .lib-xplat-button.secondary:active:not(:disabled) {
2076
- background-color: var(--semantic-surface-neutral-strong);
1731
+ background-color: var(--semantic-surface-neutral-tertiary);
2077
1732
  }
2078
1733
  .lib-xplat-button.secondary:focus-visible {
2079
1734
  outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -2094,12 +1749,12 @@
2094
1749
  outline-offset: 2px;
2095
1750
  }
2096
1751
  .lib-xplat-button.ghost {
2097
- color: var(--semantic-text-subtle);
1752
+ color: var(--semantic-text-secondary);
2098
1753
  background-color: transparent;
2099
1754
  border-color: transparent;
2100
1755
  }
2101
1756
  .lib-xplat-button.ghost:hover:not(:disabled) {
2102
- background-color: var(--semantic-surface-neutral-subtle);
1757
+ background-color: var(--semantic-surface-neutral-secondary);
2103
1758
  }
2104
1759
  .lib-xplat-button.ghost:active:not(:disabled) {
2105
1760
  background-color: var(--semantic-surface-neutral-disabled);
@@ -2127,7 +1782,7 @@
2127
1782
  .lib-xplat-calendar .calendar-title {
2128
1783
  font-size: clamp(14px, 3cqi, 20px);
2129
1784
  font-weight: 600;
2130
- color: var(--semantic-text-strong);
1785
+ color: var(--semantic-text-primary);
2131
1786
  min-width: 120px;
2132
1787
  text-align: center;
2133
1788
  background: none;
@@ -2150,7 +1805,7 @@
2150
1805
  border-radius: var(--spacing-radius-md);
2151
1806
  background: none;
2152
1807
  cursor: pointer;
2153
- color: var(--semantic-text-subtle);
1808
+ color: var(--semantic-text-secondary);
2154
1809
  transition: background-color 0.15s;
2155
1810
  }
2156
1811
  .lib-xplat-calendar .calendar-nav:hover {
@@ -2162,11 +1817,11 @@
2162
1817
  .lib-xplat-calendar .calendar-today-btn {
2163
1818
  margin-left: auto;
2164
1819
  padding: var(--spacing-space-1) var(--spacing-space-3);
2165
- border: 1px solid var(--semantic-border-default);
1820
+ border: 1px solid var(--semantic-border-primary);
2166
1821
  border-radius: var(--spacing-radius-md);
2167
1822
  background: none;
2168
1823
  font-size: clamp(12px, 2cqi, 14px);
2169
- color: var(--semantic-text-subtle);
1824
+ color: var(--semantic-text-secondary);
2170
1825
  cursor: pointer;
2171
1826
  transition: background-color 0.15s;
2172
1827
  }
@@ -2183,13 +1838,13 @@
2183
1838
  font-size: clamp(11px, 2cqi, 14px);
2184
1839
  font-weight: 500;
2185
1840
  padding: var(--spacing-space-2) 0;
2186
- color: var(--semantic-text-muted);
1841
+ color: var(--semantic-text-tertiary);
2187
1842
  }
2188
1843
  .lib-xplat-calendar .calendar-weekday.sunday {
2189
- color: var(--semantic-text-sunday);
1844
+ color: var(--semantic-text-accent-red);
2190
1845
  }
2191
1846
  .lib-xplat-calendar .calendar-weekday.saturday {
2192
- color: var(--semantic-text-saturday);
1847
+ color: var(--semantic-text-accent-blue);
2193
1848
  }
2194
1849
  .lib-xplat-calendar .calendar-grid {
2195
1850
  display: grid;
@@ -2206,7 +1861,7 @@
2206
1861
  transition: background-color 0.15s;
2207
1862
  }
2208
1863
  .lib-xplat-calendar .calendar-day:hover:not(.disabled):not(.outside):not(.selected) {
2209
- background-color: var(--semantic-surface-neutral-subtle);
1864
+ background-color: var(--semantic-surface-neutral-secondary);
2210
1865
  }
2211
1866
  .lib-xplat-calendar .calendar-day.outside {
2212
1867
  cursor: default;
@@ -2215,10 +1870,10 @@
2215
1870
  color: var(--semantic-text-disabled);
2216
1871
  }
2217
1872
  .lib-xplat-calendar .calendar-day.outside.sunday .calendar-day-number {
2218
- color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
1873
+ color: color-mix(in srgb, var(--semantic-text-accent-red) 35%, transparent);
2219
1874
  }
2220
1875
  .lib-xplat-calendar .calendar-day.outside.saturday .calendar-day-number {
2221
- color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
1876
+ color: color-mix(in srgb, var(--semantic-text-accent-blue) 35%, transparent);
2222
1877
  }
2223
1878
  .lib-xplat-calendar .calendar-day.disabled {
2224
1879
  cursor: not-allowed;
@@ -2231,24 +1886,24 @@
2231
1886
  color: var(--semantic-surface-brand-default);
2232
1887
  }
2233
1888
  .lib-xplat-calendar .calendar-day.selected {
2234
- box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--semantic-text-muted));
1889
+ box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--semantic-text-tertiary));
2235
1890
  }
2236
1891
  .lib-xplat-calendar .calendar-day.selected .calendar-day-number {
2237
1892
  font-weight: 700;
2238
1893
  }
2239
1894
  .lib-xplat-calendar .calendar-day.selected:hover {
2240
- background-color: color-mix(in srgb, var(--calendar-selected-color, var(--semantic-text-muted)) 10%, transparent);
1895
+ background-color: color-mix(in srgb, var(--calendar-selected-color, var(--semantic-text-tertiary)) 10%, transparent);
2241
1896
  }
2242
1897
  .lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
2243
- color: var(--semantic-text-sunday);
1898
+ color: var(--semantic-text-accent-red);
2244
1899
  }
2245
1900
  .lib-xplat-calendar .calendar-day.saturday:not(.outside) .calendar-day-number {
2246
- color: var(--semantic-text-saturday);
1901
+ color: var(--semantic-text-accent-blue);
2247
1902
  }
2248
1903
  .lib-xplat-calendar .calendar-day-number {
2249
1904
  font-size: clamp(12px, 2.5cqi, 16px);
2250
1905
  line-height: 1;
2251
- color: var(--semantic-text-strong);
1906
+ color: var(--semantic-text-primary);
2252
1907
  }
2253
1908
  .lib-xplat-calendar .calendar-day-events {
2254
1909
  display: flex;
@@ -2265,7 +1920,7 @@
2265
1920
  }
2266
1921
  .lib-xplat-calendar .calendar-event-more {
2267
1922
  font-size: var(--semantic-typo-caption-2-r-size);
2268
- color: var(--semantic-text-muted);
1923
+ color: var(--semantic-text-tertiary);
2269
1924
  line-height: 1;
2270
1925
  }
2271
1926
  .lib-xplat-calendar .calendar-picker-grid {
@@ -2283,7 +1938,7 @@
2283
1938
  border-radius: var(--spacing-radius-md);
2284
1939
  background: none;
2285
1940
  font-size: clamp(12px, 2.5cqi, 15px);
2286
- color: var(--semantic-text-subtle);
1941
+ color: var(--semantic-text-secondary);
2287
1942
  cursor: pointer;
2288
1943
  transition: background-color 0.15s;
2289
1944
  }
@@ -2291,7 +1946,7 @@
2291
1946
  background-color: var(--semantic-surface-neutral-disabled);
2292
1947
  }
2293
1948
  .lib-xplat-calendar .calendar-picker-cell.active {
2294
- background-color: var(--semantic-surface-neutral-strong);
1949
+ background-color: var(--semantic-surface-neutral-tertiary);
2295
1950
  color: var(--semantic-text-inverse);
2296
1951
  font-weight: 600;
2297
1952
  }
@@ -2310,30 +1965,30 @@
2310
1965
  .lib-xplat-card-tab .card-tab-trigger {
2311
1966
  position: relative;
2312
1967
  cursor: pointer;
2313
- border: 1px solid var(--semantic-border-default);
1968
+ border: 1px solid var(--semantic-border-primary);
2314
1969
  border-bottom: none;
2315
1970
  border-radius: var(--spacing-radius-md) var(--spacing-radius-md) 0 0;
2316
1971
  background-color: var(--semantic-surface-neutral-disabled);
2317
- color: var(--semantic-text-muted);
1972
+ color: var(--semantic-text-tertiary);
2318
1973
  font-weight: 500;
2319
1974
  transition: background-color 0.2s, color 0.2s;
2320
1975
  }
2321
1976
  .lib-xplat-card-tab .card-tab-trigger:hover:not(.active) {
2322
- background-color: var(--semantic-surface-neutral-subtle);
2323
- color: var(--semantic-text-subtle);
1977
+ background-color: var(--semantic-surface-neutral-secondary);
1978
+ color: var(--semantic-text-secondary);
2324
1979
  }
2325
1980
  .lib-xplat-card-tab .card-tab-trigger.active {
2326
- background-color: var(--semantic-surface-neutral-default);
2327
- color: var(--semantic-text-strong);
1981
+ background-color: var(--semantic-surface-neutral-primary);
1982
+ color: var(--semantic-text-primary);
2328
1983
  font-weight: 600;
2329
1984
  z-index: 1;
2330
1985
  margin-bottom: -1px;
2331
1986
  padding-bottom: calc(var(--tab-py) + 1px);
2332
1987
  }
2333
1988
  .lib-xplat-card-tab .card-tab-body {
2334
- border: 1px solid var(--semantic-border-default);
1989
+ border: 1px solid var(--semantic-border-primary);
2335
1990
  border-radius: 0 var(--spacing-radius-md) var(--spacing-radius-md) var(--spacing-radius-md);
2336
- background-color: var(--semantic-surface-neutral-default);
1991
+ background-color: var(--semantic-surface-neutral-primary);
2337
1992
  padding: var(--spacing-space-5);
2338
1993
  }
2339
1994
  .lib-xplat-card-tab .card-tab-panel {
@@ -2398,20 +2053,20 @@
2398
2053
  font-weight: 400;
2399
2054
  }
2400
2055
  .lib-xplat-tooltip.dark {
2401
- background-color: var(--semantic-surface-neutral-strong);
2056
+ background-color: var(--semantic-surface-neutral-tertiary);
2402
2057
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2403
2058
  }
2404
2059
  .lib-xplat-tooltip.dark .tooltip-title,
2405
2060
  .lib-xplat-tooltip.dark .tooltip-desc {
2406
- color: var(--semantic-text-subtle);
2061
+ color: var(--semantic-text-secondary);
2407
2062
  }
2408
2063
  .lib-xplat-tooltip.light {
2409
- background-color: var(--semantic-surface-neutral-default);
2064
+ background-color: var(--semantic-surface-neutral-primary);
2410
2065
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
2411
2066
  }
2412
2067
  .lib-xplat-tooltip.light .tooltip-title,
2413
2068
  .lib-xplat-tooltip.light .tooltip-desc {
2414
- color: var(--semantic-text-subtle);
2069
+ color: var(--semantic-text-secondary);
2415
2070
  }
2416
2071
  @keyframes tooltip-show {
2417
2072
  from {
@@ -2440,12 +2095,12 @@
2440
2095
  contain: layout style paint;
2441
2096
  }
2442
2097
  .lib-xplat-chart .chart-grid {
2443
- stroke: var(--semantic-border-subtle);
2098
+ stroke: var(--semantic-border-secondary);
2444
2099
  stroke-width: 1;
2445
2100
  }
2446
2101
  .lib-xplat-chart .chart-axis-label {
2447
2102
  font-size: var(--semantic-typo-caption-2-r-size);
2448
- fill: var(--semantic-text-muted);
2103
+ fill: var(--semantic-text-tertiary);
2449
2104
  }
2450
2105
  .lib-xplat-chart .chart-pie-label {
2451
2106
  font-size: var(--semantic-typo-caption-2-r-size);
@@ -2482,7 +2137,7 @@
2482
2137
  }
2483
2138
  .lib-xplat-chart .chart-slice {
2484
2139
  cursor: pointer;
2485
- stroke: var(--semantic-surface-neutral-default);
2140
+ stroke: var(--semantic-surface-neutral-primary);
2486
2141
  stroke-width: 2;
2487
2142
  transition:
2488
2143
  opacity 0.15s ease-out,
@@ -2502,7 +2157,7 @@
2502
2157
  opacity: 1;
2503
2158
  }
2504
2159
  .lib-xplat-chart .chart-crosshair {
2505
- stroke: var(--semantic-border-strong);
2160
+ stroke: var(--semantic-border-tertiary);
2506
2161
  stroke-width: 1;
2507
2162
  stroke-dasharray: 4 3;
2508
2163
  pointer-events: none;
@@ -2514,7 +2169,7 @@
2514
2169
  .lib-xplat-chart .chart-crosshair-label {
2515
2170
  font-size: var(--semantic-typo-caption-2-r-size);
2516
2171
  font-weight: 500;
2517
- color: var(--semantic-text-strong);
2172
+ color: var(--semantic-text-primary);
2518
2173
  text-align: center;
2519
2174
  white-space: nowrap;
2520
2175
  overflow: visible;
@@ -2559,12 +2214,12 @@
2559
2214
  }
2560
2215
  .lib-xplat-chart .chart-legend-label {
2561
2216
  font-size: var(--semantic-typo-caption-2-r-size);
2562
- color: var(--semantic-text-muted);
2217
+ color: var(--semantic-text-tertiary);
2563
2218
  }
2564
2219
  .lib-xplat-chart .chart-legend-value {
2565
2220
  font-size: var(--semantic-typo-caption-1-r-size);
2566
2221
  font-weight: 600;
2567
- color: var(--semantic-text-strong);
2222
+ color: var(--semantic-text-primary);
2568
2223
  }
2569
2224
  @keyframes chart-bar-grow {
2570
2225
  from {
@@ -2592,53 +2247,6 @@
2592
2247
  }
2593
2248
  }
2594
2249
 
2595
- /* src/components/AutoResizeTextArea/autoResizeTextArea.scss */
2596
- .lib-xplat-auto-resize-textarea-wrapper {
2597
- display: flex;
2598
- flex-direction: column;
2599
- gap: var(--spacing-space-2);
2600
- }
2601
- .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea {
2602
- display: flex;
2603
- align-items: center;
2604
- border: 1px solid var(--semantic-border-default);
2605
- border-radius: var(--spacing-radius-md);
2606
- min-height: var(--spacing-control-height-md);
2607
- overflow: hidden;
2608
- background-color: var(--semantic-surface-neutral-default);
2609
- width: 100%;
2610
- transition: border-color 0.15s, box-shadow 0.15s;
2611
- }
2612
- .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
2613
- border-color: var(--semantic-border-strong);
2614
- }
2615
- .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
2616
- border-color: var(--semantic-interaction-focus-ring);
2617
- box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
2618
- }
2619
- .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
2620
- border-color: var(--semantic-border-strong);
2621
- }
2622
- .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
2623
- background-color: var(--semantic-surface-neutral-disabled);
2624
- cursor: not-allowed;
2625
- }
2626
- .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea {
2627
- border: none;
2628
- outline: none;
2629
- flex: 1;
2630
- padding: var(--spacing-space-2) var(--spacing-space-4);
2631
- width: 100%;
2632
- color: var(--semantic-text-subtle);
2633
- resize: none;
2634
- font-size: var(--semantic-typo-label-2-m-size);
2635
- line-height: var(--semantic-typo-label-2-m-lh);
2636
- font-family: inherit;
2637
- }
2638
- .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea:disabled {
2639
- cursor: not-allowed;
2640
- }
2641
-
2642
2250
  /* src/components/IconButton/iconButton.scss */
2643
2251
  .lib-xplat-icon-button {
2644
2252
  display: inline-flex;
@@ -2684,11 +2292,11 @@
2684
2292
  }
2685
2293
  .lib-xplat-icon-button.secondary {
2686
2294
  color: var(--semantic-surface-brand-default);
2687
- background-color: var(--semantic-surface-neutral-default);
2688
- border-color: var(--semantic-border-default);
2295
+ background-color: var(--semantic-surface-neutral-primary);
2296
+ border-color: var(--semantic-border-primary);
2689
2297
  }
2690
2298
  .lib-xplat-icon-button.secondary:hover:not(:disabled) {
2691
- background-color: var(--semantic-surface-neutral-subtle);
2299
+ background-color: var(--semantic-surface-neutral-secondary);
2692
2300
  }
2693
2301
  .lib-xplat-icon-button.secondary:focus-visible {
2694
2302
  outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -2706,11 +2314,11 @@
2706
2314
  outline-offset: 2px;
2707
2315
  }
2708
2316
  .lib-xplat-icon-button.ghost {
2709
- color: var(--semantic-text-subtle);
2317
+ color: var(--semantic-text-secondary);
2710
2318
  background-color: transparent;
2711
2319
  }
2712
2320
  .lib-xplat-icon-button.ghost:hover:not(:disabled) {
2713
- background-color: var(--semantic-surface-neutral-subtle);
2321
+ background-color: var(--semantic-surface-neutral-secondary);
2714
2322
  }
2715
2323
  .lib-xplat-icon-button.ghost:focus-visible {
2716
2324
  outline: 2px solid var(--semantic-interaction-focus-ring);
@@ -2724,21 +2332,21 @@
2724
2332
  width: 100%;
2725
2333
  gap: var(--spacing-space-2);
2726
2334
  padding: var(--spacing-space-3);
2727
- border: 1px solid var(--semantic-border-default);
2335
+ border: 1px solid var(--semantic-border-primary);
2728
2336
  border-radius: var(--spacing-radius-lg);
2729
- background-color: var(--semantic-surface-neutral-default);
2337
+ background-color: var(--semantic-surface-neutral-primary);
2730
2338
  transition: border-color 0.15s, box-shadow 0.15s;
2731
2339
  }
2732
2340
  .lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
2733
- border-color: var(--semantic-border-strong);
2341
+ border-color: var(--semantic-border-tertiary);
2734
2342
  }
2735
2343
  .lib-xplat-chat-input:focus-within {
2736
2344
  border-color: var(--semantic-interaction-focus-ring);
2737
2345
  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
2738
2346
  }
2739
2347
  .lib-xplat-chat-input.disabled {
2740
- background-color: var(--semantic-surface-neutral-subtle);
2741
- border-color: var(--semantic-border-default);
2348
+ background-color: var(--semantic-surface-neutral-secondary);
2349
+ border-color: var(--semantic-border-primary);
2742
2350
  cursor: not-allowed;
2743
2351
  }
2744
2352
  .lib-xplat-chat-input .chat-input-textarea {
@@ -2752,7 +2360,7 @@
2752
2360
  padding: 4px 0;
2753
2361
  font-size: var(--semantic-typo-label-2-m-size);
2754
2362
  line-height: var(--semantic-typo-label-2-m-lh);
2755
- color: var(--semantic-text-strong);
2363
+ color: var(--semantic-text-primary);
2756
2364
  background: transparent;
2757
2365
  }
2758
2366
  .lib-xplat-chat-input .chat-input-textarea::placeholder {
@@ -2823,7 +2431,7 @@
2823
2431
  transform: scale(1);
2824
2432
  }
2825
2433
  .lib-xplat-checkbox > .checkbox.unchecked {
2826
- border: 1px solid var(--semantic-border-strong);
2434
+ border: 1px solid var(--semantic-border-tertiary);
2827
2435
  }
2828
2436
  .lib-xplat-checkbox:hover > .checkbox.unchecked {
2829
2437
  background-color: var(--semantic-surface-neutral-disabled);
@@ -2864,7 +2472,7 @@
2864
2472
  border-color: var(--semantic-surface-neutral-disabled) !important;
2865
2473
  }
2866
2474
  .lib-xplat-checkbox > .label {
2867
- color: var(--semantic-text-strong);
2475
+ color: var(--semantic-text-primary);
2868
2476
  font-weight: 400;
2869
2477
  }
2870
2478
 
@@ -2895,13 +2503,13 @@
2895
2503
  }
2896
2504
  .lib-xplat-chip.secondary {
2897
2505
  color: var(--semantic-surface-brand-default);
2898
- background-color: var(--semantic-surface-neutral-default);
2899
- border: 1px solid var(--semantic-border-default);
2506
+ background-color: var(--semantic-surface-neutral-primary);
2507
+ border: 1px solid var(--semantic-border-primary);
2900
2508
  }
2901
2509
  .lib-xplat-chip.neutral {
2902
- color: var(--semantic-text-subtle);
2903
- background-color: var(--semantic-surface-neutral-subtle);
2904
- border: 1px solid var(--semantic-border-default);
2510
+ color: var(--semantic-text-secondary);
2511
+ background-color: var(--semantic-surface-neutral-secondary);
2512
+ border: 1px solid var(--semantic-border-primary);
2905
2513
  }
2906
2514
  .lib-xplat-chip.success {
2907
2515
  color: var(--semantic-text-success);
@@ -2929,23 +2537,23 @@
2929
2537
  .lib-xplat-input-wrap .lib-xplat-input {
2930
2538
  display: flex;
2931
2539
  align-items: center;
2932
- border: 1px solid var(--semantic-border-default);
2540
+ border: 1px solid var(--semantic-border-primary);
2933
2541
  border-radius: var(--spacing-radius-md);
2934
2542
  overflow: hidden;
2935
- background-color: var(--semantic-surface-neutral-default);
2543
+ background-color: var(--semantic-surface-neutral-primary);
2936
2544
  padding-right: var(--spacing-space-2);
2937
2545
  width: 100%;
2938
2546
  transition: border-color 0.15s, box-shadow 0.15s;
2939
2547
  }
2940
2548
  .lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
2941
- border-color: var(--semantic-border-strong);
2549
+ border-color: var(--semantic-border-tertiary);
2942
2550
  }
2943
2551
  .lib-xplat-input-wrap .lib-xplat-input:focus-within {
2944
2552
  border-color: var(--semantic-interaction-focus-ring);
2945
2553
  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
2946
2554
  }
2947
2555
  .lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
2948
- border-color: var(--semantic-border-strong);
2556
+ border-color: var(--semantic-border-tertiary);
2949
2557
  }
2950
2558
  .lib-xplat-input-wrap .lib-xplat-input.sm {
2951
2559
  height: var(--spacing-control-height-sm);
@@ -2973,7 +2581,7 @@
2973
2581
  padding-left: var(--spacing-space-4);
2974
2582
  padding-right: var(--spacing-space-2);
2975
2583
  width: 100%;
2976
- color: var(--semantic-text-subtle);
2584
+ color: var(--semantic-text-secondary);
2977
2585
  font-size: inherit;
2978
2586
  font-family: inherit;
2979
2587
  }
@@ -2985,7 +2593,7 @@
2985
2593
  align-items: center;
2986
2594
  justify-content: center;
2987
2595
  height: 100%;
2988
- color: var(--semantic-icon-subtle);
2596
+ color: var(--semantic-icon-secondary);
2989
2597
  padding-right: var(--spacing-space-2);
2990
2598
  }
2991
2599
  .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper {
@@ -3008,7 +2616,7 @@
3008
2616
  user-select: none;
3009
2617
  }
3010
2618
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
3011
- color: var(--semantic-icon-subtle);
2619
+ color: var(--semantic-icon-secondary);
3012
2620
  }
3013
2621
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
3014
2622
  color: var(--semantic-text-success);
@@ -3029,7 +2637,7 @@
3029
2637
  }
3030
2638
  .lib-xplat-modal.modal-box {
3031
2639
  border-radius: var(--spacing-radius-lg);
3032
- background-color: var(--semantic-surface-neutral-default);
2640
+ background-color: var(--semantic-surface-neutral-primary);
3033
2641
  padding: var(--spacing-space-6);
3034
2642
  min-width: min-content;
3035
2643
  max-width: calc(100vw - 32px);
@@ -3086,7 +2694,7 @@
3086
2694
  transition: background-color 0.15s;
3087
2695
  font-size: clamp(13px, 3cqi, 18px);
3088
2696
  font-weight: 600;
3089
- color: var(--semantic-text-strong);
2697
+ color: var(--semantic-text-primary);
3090
2698
  min-width: 110px;
3091
2699
  text-align: center;
3092
2700
  }
@@ -3114,7 +2722,7 @@
3114
2722
  border-radius: var(--spacing-radius-md);
3115
2723
  background: none;
3116
2724
  font-size: clamp(11px, 2cqi, 13px);
3117
- color: var(--semantic-text-subtle);
2725
+ color: var(--semantic-text-secondary);
3118
2726
  cursor: pointer;
3119
2727
  transition: background-color 0.15s;
3120
2728
  }
@@ -3136,7 +2744,7 @@
3136
2744
  border-radius: var(--spacing-radius-md);
3137
2745
  background: none;
3138
2746
  cursor: pointer;
3139
- color: var(--semantic-text-muted);
2747
+ color: var(--semantic-text-tertiary);
3140
2748
  transition: background-color 0.15s;
3141
2749
  }
3142
2750
  .lib-xplat-datepicker .datepicker-nav:hover {
@@ -3155,13 +2763,13 @@
3155
2763
  font-size: clamp(11px, 2cqi, 14px);
3156
2764
  font-weight: 500;
3157
2765
  padding: var(--spacing-space-1) 0;
3158
- color: var(--semantic-text-muted);
2766
+ color: var(--semantic-text-tertiary);
3159
2767
  }
3160
2768
  .lib-xplat-datepicker .datepicker-weekday.sunday {
3161
- color: var(--semantic-text-sunday);
2769
+ color: var(--semantic-text-accent-red);
3162
2770
  }
3163
2771
  .lib-xplat-datepicker .datepicker-weekday.saturday {
3164
- color: var(--semantic-text-saturday);
2772
+ color: var(--semantic-text-accent-blue);
3165
2773
  }
3166
2774
  .lib-xplat-datepicker .datepicker-grid {
3167
2775
  display: grid;
@@ -3179,7 +2787,7 @@
3179
2787
  border-radius: var(--spacing-radius-md);
3180
2788
  background: none;
3181
2789
  cursor: pointer;
3182
- color: var(--semantic-text-strong);
2790
+ color: var(--semantic-text-primary);
3183
2791
  transition: background-color 0.15s, color 0.15s;
3184
2792
  }
3185
2793
  .lib-xplat-datepicker .datepicker-day:hover:not(:disabled):not(.outside):not(.selected) {
@@ -3190,10 +2798,10 @@
3190
2798
  cursor: default;
3191
2799
  }
3192
2800
  .lib-xplat-datepicker .datepicker-day.outside.sunday {
3193
- color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
2801
+ color: color-mix(in srgb, var(--semantic-text-accent-red) 35%, transparent);
3194
2802
  }
3195
2803
  .lib-xplat-datepicker .datepicker-day.outside.saturday {
3196
- color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
2804
+ color: color-mix(in srgb, var(--semantic-text-accent-blue) 35%, transparent);
3197
2805
  }
3198
2806
  .lib-xplat-datepicker .datepicker-day.disabled {
3199
2807
  color: var(--semantic-text-disabled);
@@ -3219,18 +2827,18 @@
3219
2827
  border-radius: 0;
3220
2828
  }
3221
2829
  .lib-xplat-datepicker .datepicker-day.sunday:not(.selected):not(.outside):not(.disabled) {
3222
- color: var(--semantic-text-sunday);
2830
+ color: var(--semantic-text-accent-red);
3223
2831
  }
3224
2832
  .lib-xplat-datepicker .datepicker-day.saturday:not(.selected):not(.outside):not(.disabled) {
3225
- color: var(--semantic-text-saturday);
2833
+ color: var(--semantic-text-accent-blue);
3226
2834
  }
3227
2835
  .lib-xplat-datepicker .datepicker-day.outside.sunday,
3228
2836
  .lib-xplat-datepicker .datepicker-day.disabled.sunday {
3229
- color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
2837
+ color: color-mix(in srgb, var(--semantic-text-accent-red) 35%, transparent);
3230
2838
  }
3231
2839
  .lib-xplat-datepicker .datepicker-day.outside.saturday,
3232
2840
  .lib-xplat-datepicker .datepicker-day.disabled.saturday {
3233
- color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
2841
+ color: color-mix(in srgb, var(--semantic-text-accent-blue) 35%, transparent);
3234
2842
  }
3235
2843
  .lib-xplat-datepicker.range {
3236
2844
  display: flex;
@@ -3257,7 +2865,7 @@
3257
2865
  text-align: center;
3258
2866
  font-size: var(--semantic-typo-caption-2-r-size);
3259
2867
  font-weight: 500;
3260
- color: var(--semantic-text-muted);
2868
+ color: var(--semantic-text-tertiary);
3261
2869
  margin-bottom: var(--spacing-space-2);
3262
2870
  }
3263
2871
  @container (max-width: 600px) {
@@ -3296,13 +2904,13 @@
3296
2904
  z-index: 10;
3297
2905
  margin-top: var(--spacing-space-1);
3298
2906
  padding: var(--spacing-space-4);
3299
- background-color: var(--semantic-surface-neutral-default);
3300
- border: 1px solid var(--semantic-border-default);
2907
+ background-color: var(--semantic-surface-neutral-primary);
2908
+ border: 1px solid var(--semantic-border-primary);
3301
2909
  border-radius: var(--spacing-radius-md);
3302
2910
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
3303
2911
  }
3304
2912
  .lib-xplat-popup-datepicker-card {
3305
- background-color: var(--semantic-surface-neutral-default);
2913
+ background-color: var(--semantic-surface-neutral-primary);
3306
2914
  border-radius: var(--spacing-radius-xl);
3307
2915
  min-width: 320px;
3308
2916
  }
@@ -3317,7 +2925,7 @@
3317
2925
  justify-content: flex-end;
3318
2926
  gap: var(--spacing-space-3);
3319
2927
  padding-top: var(--spacing-space-4);
3320
- border-top: 1px solid var(--semantic-border-subtle);
2928
+ border-top: 1px solid var(--semantic-border-secondary);
3321
2929
  }
3322
2930
 
3323
2931
  /* src/components/Tab/tab.scss */
@@ -3348,7 +2956,7 @@
3348
2956
  }
3349
2957
  .lib-xplat-tab.type-default {
3350
2958
  width: 100%;
3351
- background-color: var(--semantic-surface-neutral-strong);
2959
+ background-color: var(--semantic-surface-neutral-tertiary);
3352
2960
  border-radius: var(--spacing-radius-md);
3353
2961
  }
3354
2962
  .lib-xplat-tab.type-default > .tab-item {
@@ -3360,7 +2968,7 @@
3360
2968
  justify-content: center;
3361
2969
  cursor: pointer;
3362
2970
  white-space: nowrap;
3363
- border-right: 1px solid var(--semantic-border-strong);
2971
+ border-right: 1px solid var(--semantic-border-tertiary);
3364
2972
  color: var(--semantic-text-inverse);
3365
2973
  }
3366
2974
  .lib-xplat-tab.type-default > .tab-item:last-child {
@@ -3371,7 +2979,7 @@
3371
2979
  }
3372
2980
  .lib-xplat-tab.type-toggle {
3373
2981
  width: 100%;
3374
- border-bottom: 1px solid var(--semantic-border-default);
2982
+ border-bottom: 1px solid var(--semantic-border-primary);
3375
2983
  gap: var(--spacing-space-6);
3376
2984
  }
3377
2985
  .lib-xplat-tab.type-toggle > .tab-item {
@@ -3389,7 +2997,7 @@
3389
2997
  border: none;
3390
2998
  cursor: pointer;
3391
2999
  transition: color 0.2s;
3392
- color: var(--semantic-text-muted);
3000
+ color: var(--semantic-text-tertiary);
3393
3001
  }
3394
3002
  .lib-xplat-tab.type-toggle > .tab-item.active {
3395
3003
  color: var(--semantic-surface-brand-default);
@@ -3413,12 +3021,12 @@
3413
3021
  .lib-xplat-divider.horizontal {
3414
3022
  width: 100%;
3415
3023
  height: 1px;
3416
- background-color: var(--semantic-border-default);
3024
+ background-color: var(--semantic-border-primary);
3417
3025
  }
3418
3026
  .lib-xplat-divider.vertical {
3419
3027
  width: 1px;
3420
3028
  align-self: stretch;
3421
- background-color: var(--semantic-border-default);
3029
+ background-color: var(--semantic-border-primary);
3422
3030
  }
3423
3031
 
3424
3032
  /* src/components/Drawer/drawer.scss */
@@ -3439,7 +3047,7 @@
3439
3047
  position: fixed;
3440
3048
  top: 0;
3441
3049
  height: 100%;
3442
- background: var(--semantic-surface-neutral-default);
3050
+ background: var(--semantic-surface-neutral-primary);
3443
3051
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
3444
3052
  display: flex;
3445
3053
  flex-direction: column;
@@ -3478,12 +3086,12 @@
3478
3086
  align-items: center;
3479
3087
  justify-content: space-between;
3480
3088
  padding: var(--spacing-space-4) var(--spacing-space-5);
3481
- border-bottom: 1px solid var(--semantic-border-default);
3089
+ border-bottom: 1px solid var(--semantic-border-primary);
3482
3090
  }
3483
3091
  .lib-xplat-drawer .drawer-title {
3484
3092
  font-size: var(--semantic-typo-label-2-m-size);
3485
3093
  font-weight: 600;
3486
- color: var(--semantic-text-strong);
3094
+ color: var(--semantic-text-primary);
3487
3095
  }
3488
3096
  .lib-xplat-drawer .close-btn {
3489
3097
  background: none;
@@ -3491,12 +3099,12 @@
3491
3099
  cursor: pointer;
3492
3100
  font-size: var(--semantic-typo-heading-1-m-size);
3493
3101
  line-height: 1;
3494
- color: var(--semantic-icon-strong);
3102
+ color: var(--semantic-icon-primary);
3495
3103
  padding: 0;
3496
3104
  transition: color 0.2s;
3497
3105
  }
3498
3106
  .lib-xplat-drawer .close-btn:hover {
3499
- color: var(--semantic-text-strong);
3107
+ color: var(--semantic-text-primary);
3500
3108
  }
3501
3109
  .lib-xplat-drawer .drawer-body {
3502
3110
  flex: 1;
@@ -3517,8 +3125,8 @@
3517
3125
  position: fixed;
3518
3126
  z-index: 1000;
3519
3127
  min-width: 160px;
3520
- background: var(--semantic-surface-neutral-default);
3521
- border: 1px solid var(--semantic-border-default);
3128
+ background: var(--semantic-surface-neutral-primary);
3129
+ border: 1px solid var(--semantic-border-primary);
3522
3130
  border-radius: var(--spacing-radius-md);
3523
3131
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
3524
3132
  padding: var(--spacing-space-1) 0;
@@ -3541,13 +3149,13 @@
3541
3149
  border: none;
3542
3150
  background: none;
3543
3151
  font-size: var(--semantic-typo-caption-1-r-size);
3544
- color: var(--semantic-text-strong);
3152
+ color: var(--semantic-text-primary);
3545
3153
  cursor: pointer;
3546
3154
  text-align: left;
3547
3155
  transition: background-color 0.15s;
3548
3156
  }
3549
3157
  .lib-xplat-dropdown-menu .dropdown-item:hover:not(:disabled) {
3550
- background-color: var(--semantic-surface-neutral-subtle);
3158
+ background-color: var(--semantic-surface-neutral-secondary);
3551
3159
  }
3552
3160
  .lib-xplat-dropdown-menu .dropdown-item.danger {
3553
3161
  color: var(--semantic-text-error);
@@ -3565,25 +3173,25 @@
3565
3173
  display: flex;
3566
3174
  flex-direction: column;
3567
3175
  width: 100%;
3568
- border: 1px solid var(--semantic-border-default);
3176
+ border: 1px solid var(--semantic-border-primary);
3569
3177
  border-radius: var(--spacing-radius-md);
3570
- background: var(--semantic-surface-neutral-default);
3178
+ background: var(--semantic-surface-neutral-primary);
3571
3179
  overflow: hidden;
3572
3180
  transition: border-color 150ms ease;
3573
3181
  }
3574
3182
  .lib-xplat-editor.focused {
3575
- border-color: var(--semantic-border-brand);
3183
+ border-color: var(--semantic-border-brand-primary);
3576
3184
  }
3577
3185
  .lib-xplat-editor.readonly {
3578
- background: var(--semantic-surface-neutral-subtle);
3186
+ background: var(--semantic-surface-neutral-secondary);
3579
3187
  }
3580
3188
  .lib-xplat-editor__toolbar {
3581
3189
  display: flex;
3582
3190
  flex-wrap: wrap;
3583
3191
  gap: var(--spacing-space-1);
3584
3192
  padding: var(--spacing-space-2);
3585
- border-bottom: 1px solid var(--semantic-border-subtle);
3586
- background: var(--semantic-surface-neutral-subtle);
3193
+ border-bottom: 1px solid var(--semantic-border-secondary);
3194
+ background: var(--semantic-surface-neutral-secondary);
3587
3195
  }
3588
3196
  .lib-xplat-editor__toolbar-btn {
3589
3197
  display: inline-flex;
@@ -3595,19 +3203,19 @@
3595
3203
  border: 1px solid transparent;
3596
3204
  border-radius: var(--spacing-radius-sm);
3597
3205
  background: transparent;
3598
- color: var(--semantic-text-strong);
3206
+ color: var(--semantic-text-primary);
3599
3207
  font-family: inherit;
3600
3208
  font-weight: 600;
3601
3209
  cursor: pointer;
3602
3210
  transition: background 100ms ease, border-color 100ms ease;
3603
3211
  }
3604
3212
  .lib-xplat-editor__toolbar-btn:hover {
3605
- background: var(--semantic-surface-neutral-strong);
3213
+ background: var(--semantic-surface-neutral-tertiary);
3606
3214
  }
3607
3215
  .lib-xplat-editor__toolbar-btn.active {
3608
3216
  background: var(--semantic-surface-brand-subtle);
3609
- color: var(--semantic-text-brand);
3610
- border-color: var(--semantic-border-brand);
3217
+ color: var(--semantic-text-brand-primary);
3218
+ border-color: var(--semantic-border-brand-primary);
3611
3219
  }
3612
3220
  .lib-xplat-editor__content {
3613
3221
  position: relative;
@@ -3617,13 +3225,13 @@
3617
3225
  position: absolute;
3618
3226
  top: var(--spacing-space-4);
3619
3227
  left: var(--spacing-space-4);
3620
- color: var(--semantic-text-muted);
3228
+ color: var(--semantic-text-tertiary);
3621
3229
  pointer-events: none;
3622
3230
  user-select: none;
3623
3231
  }
3624
3232
  .lib-xplat-editor__editable {
3625
3233
  outline: none;
3626
- color: var(--semantic-text-strong);
3234
+ color: var(--semantic-text-primary);
3627
3235
  min-height: inherit;
3628
3236
  }
3629
3237
  .lib-xplat-editor__editable h1,
@@ -3675,17 +3283,17 @@
3675
3283
  .lib-xplat-editor__editable blockquote {
3676
3284
  margin: var(--spacing-space-3) 0;
3677
3285
  padding: var(--spacing-space-2) var(--spacing-space-4);
3678
- border-left: 3px solid var(--semantic-border-brand);
3679
- color: var(--semantic-text-subtle);
3680
- background: var(--semantic-surface-neutral-subtle);
3286
+ border-left: 3px solid var(--semantic-border-brand-primary);
3287
+ color: var(--semantic-text-secondary);
3288
+ background: var(--semantic-surface-neutral-secondary);
3681
3289
  border-radius: var(--spacing-radius-sm);
3682
3290
  }
3683
3291
  .lib-xplat-editor__editable pre {
3684
3292
  margin: var(--spacing-space-3) 0;
3685
3293
  padding: var(--spacing-space-3) var(--spacing-space-4);
3686
3294
  border-radius: var(--spacing-radius-md);
3687
- background: var(--semantic-surface-neutral-subtle);
3688
- color: var(--semantic-text-strong);
3295
+ background: var(--semantic-surface-neutral-secondary);
3296
+ color: var(--semantic-text-primary);
3689
3297
  font-family:
3690
3298
  ui-monospace,
3691
3299
  "SF Mono",
@@ -3699,17 +3307,17 @@
3699
3307
  .lib-xplat-editor__editable code {
3700
3308
  padding: 2px 6px;
3701
3309
  border-radius: var(--spacing-radius-sm);
3702
- background: var(--semantic-surface-neutral-subtle);
3310
+ background: var(--semantic-surface-neutral-secondary);
3703
3311
  font-family:
3704
3312
  ui-monospace,
3705
3313
  "SF Mono",
3706
3314
  Menlo,
3707
3315
  monospace;
3708
3316
  font-size: var(--semantic-typo-caption-1-r-size);
3709
- color: var(--semantic-text-strong);
3317
+ color: var(--semantic-text-primary);
3710
3318
  }
3711
3319
  .lib-xplat-editor__editable a {
3712
- color: var(--semantic-text-link, var(--semantic-text-brand));
3320
+ color: var(--semantic-text-link, var(--semantic-text-brand-primary));
3713
3321
  text-decoration: underline;
3714
3322
  }
3715
3323
  .lib-xplat-editor__editable img {
@@ -3721,7 +3329,7 @@
3721
3329
  .lib-xplat-editor__editable hr {
3722
3330
  margin: var(--spacing-space-4) 0;
3723
3331
  border: 0;
3724
- border-top: 1px solid var(--semantic-border-default);
3332
+ border-top: 1px solid var(--semantic-border-primary);
3725
3333
  }
3726
3334
  .lib-xplat-editor__slash-menu {
3727
3335
  position: absolute;
@@ -3730,9 +3338,9 @@
3730
3338
  max-height: 280px;
3731
3339
  overflow-y: auto;
3732
3340
  padding: var(--spacing-space-1);
3733
- border: 1px solid var(--semantic-border-default);
3341
+ border: 1px solid var(--semantic-border-primary);
3734
3342
  border-radius: var(--spacing-radius-md);
3735
- background: var(--semantic-surface-neutral-default);
3343
+ background: var(--semantic-surface-neutral-primary);
3736
3344
  box-shadow: 0 4px 16px var(--semantic-interaction-overlay-10);
3737
3345
  }
3738
3346
  .lib-xplat-editor__slash-item {
@@ -3745,7 +3353,7 @@
3745
3353
  border: 0;
3746
3354
  border-radius: var(--spacing-radius-sm);
3747
3355
  background: transparent;
3748
- color: var(--semantic-text-strong);
3356
+ color: var(--semantic-text-primary);
3749
3357
  font-family: inherit;
3750
3358
  font-size: var(--semantic-typo-caption-1-r-size);
3751
3359
  text-align: left;
@@ -3754,13 +3362,13 @@
3754
3362
  .lib-xplat-editor__slash-item:hover,
3755
3363
  .lib-xplat-editor__slash-item.active {
3756
3364
  background: var(--semantic-surface-brand-subtle);
3757
- color: var(--semantic-text-brand);
3365
+ color: var(--semantic-text-brand-primary);
3758
3366
  }
3759
3367
  .lib-xplat-editor__slash-item .label {
3760
3368
  flex: 1;
3761
3369
  }
3762
3370
  .lib-xplat-editor__slash-item .hint {
3763
- color: var(--semantic-text-muted);
3371
+ color: var(--semantic-text-tertiary);
3764
3372
  font-size: var(--semantic-typo-caption-2-r-size);
3765
3373
  }
3766
3374
  .lib-xplat-editor__link-popover {
@@ -3770,37 +3378,37 @@
3770
3378
  align-items: center;
3771
3379
  gap: var(--spacing-space-2);
3772
3380
  padding: var(--spacing-space-2);
3773
- border: 1px solid var(--semantic-border-default);
3381
+ border: 1px solid var(--semantic-border-primary);
3774
3382
  border-radius: var(--spacing-radius-md);
3775
- background: var(--semantic-surface-neutral-default);
3383
+ background: var(--semantic-surface-neutral-primary);
3776
3384
  box-shadow: 0 4px 16px var(--semantic-interaction-overlay-10);
3777
3385
  }
3778
3386
  .lib-xplat-editor__link-popover input {
3779
3387
  width: 240px;
3780
3388
  padding: var(--spacing-space-1) var(--spacing-space-2);
3781
- border: 1px solid var(--semantic-border-default);
3389
+ border: 1px solid var(--semantic-border-primary);
3782
3390
  border-radius: var(--spacing-radius-sm);
3783
- background: var(--semantic-surface-neutral-default);
3784
- color: var(--semantic-text-strong);
3391
+ background: var(--semantic-surface-neutral-primary);
3392
+ color: var(--semantic-text-primary);
3785
3393
  font-family: inherit;
3786
3394
  font-size: var(--semantic-typo-caption-1-r-size);
3787
3395
  outline: none;
3788
3396
  }
3789
3397
  .lib-xplat-editor__link-popover input:focus {
3790
- border-color: var(--semantic-border-brand);
3398
+ border-color: var(--semantic-border-brand-primary);
3791
3399
  }
3792
3400
  .lib-xplat-editor__link-popover button {
3793
3401
  padding: var(--spacing-space-1) var(--spacing-space-3);
3794
- border: 1px solid var(--semantic-border-default);
3402
+ border: 1px solid var(--semantic-border-primary);
3795
3403
  border-radius: var(--spacing-radius-sm);
3796
- background: var(--semantic-surface-neutral-default);
3797
- color: var(--semantic-text-strong);
3404
+ background: var(--semantic-surface-neutral-primary);
3405
+ color: var(--semantic-text-primary);
3798
3406
  font-family: inherit;
3799
3407
  font-size: var(--semantic-typo-caption-2-r-size);
3800
3408
  cursor: pointer;
3801
3409
  }
3802
3410
  .lib-xplat-editor__link-popover button:hover {
3803
- background: var(--semantic-surface-neutral-strong);
3411
+ background: var(--semantic-surface-neutral-tertiary);
3804
3412
  }
3805
3413
  .lib-xplat-editor__link-popover button:first-of-type {
3806
3414
  background: var(--semantic-surface-brand-default);
@@ -3829,12 +3437,12 @@
3829
3437
  .lib-xplat-empty-state .empty-title {
3830
3438
  font-size: var(--semantic-typo-caption-1-r-size);
3831
3439
  font-weight: 500;
3832
- color: var(--semantic-text-subtle);
3440
+ color: var(--semantic-text-secondary);
3833
3441
  margin: 0;
3834
3442
  }
3835
3443
  .lib-xplat-empty-state .empty-description {
3836
3444
  font-size: var(--semantic-typo-caption-1-r-size);
3837
- color: var(--semantic-text-muted);
3445
+ color: var(--semantic-text-tertiary);
3838
3446
  margin: var(--spacing-space-2) 0 0;
3839
3447
  max-width: 320px;
3840
3448
  }
@@ -3852,7 +3460,7 @@
3852
3460
  align-items: center;
3853
3461
  justify-content: center;
3854
3462
  padding: var(--spacing-space-8) var(--spacing-space-6);
3855
- border: 2px dashed var(--semantic-border-default);
3463
+ border: 2px dashed var(--semantic-border-primary);
3856
3464
  border-radius: var(--spacing-radius-md);
3857
3465
  cursor: pointer;
3858
3466
  transition: border-color 0.2s, background-color 0.2s;
@@ -3869,7 +3477,7 @@
3869
3477
  display: none;
3870
3478
  }
3871
3479
  .lib-xplat-file-upload .upload-icon {
3872
- color: var(--semantic-icon-subtle);
3480
+ color: var(--semantic-icon-secondary);
3873
3481
  margin-bottom: var(--spacing-space-3);
3874
3482
  }
3875
3483
  .lib-xplat-file-upload .upload-icon svg {
@@ -3878,12 +3486,12 @@
3878
3486
  .lib-xplat-file-upload .upload-label {
3879
3487
  font-size: var(--semantic-typo-caption-1-r-size);
3880
3488
  font-weight: 500;
3881
- color: var(--semantic-text-subtle);
3489
+ color: var(--semantic-text-secondary);
3882
3490
  margin: 0;
3883
3491
  }
3884
3492
  .lib-xplat-file-upload .upload-description {
3885
3493
  font-size: var(--semantic-typo-caption-2-r-size);
3886
- color: var(--semantic-text-muted);
3494
+ color: var(--semantic-text-tertiary);
3887
3495
  margin: var(--spacing-space-1) 0 0;
3888
3496
  }
3889
3497
 
@@ -3907,7 +3515,7 @@
3907
3515
  font-size: var(--semantic-typo-heading-1-m-size);
3908
3516
  }
3909
3517
  .lib-xplat-htmlTypewriter hr {
3910
- color: var(--semantic-border-default);
3518
+ color: var(--semantic-border-primary);
3911
3519
  margin-top: var(--spacing-space-4);
3912
3520
  margin-bottom: var(--spacing-space-4);
3913
3521
  }
@@ -3920,7 +3528,7 @@
3920
3528
  height: 100%;
3921
3529
  flex-direction: column;
3922
3530
  position: relative;
3923
- background-color: var(--semantic-surface-neutral-default);
3531
+ background-color: var(--semantic-surface-neutral-primary);
3924
3532
  border-radius: var(--spacing-radius-sm);
3925
3533
  overflow: hidden;
3926
3534
  padding: var(--spacing-space-3);
@@ -3929,7 +3537,7 @@
3929
3537
  display: none;
3930
3538
  }
3931
3539
  .lib-xplat-imageselector.none-value {
3932
- border: 1px dashed var(--semantic-border-strong);
3540
+ border: 1px dashed var(--semantic-border-tertiary);
3933
3541
  }
3934
3542
  .lib-xplat-imageselector:hover {
3935
3543
  background-color: var(--semantic-surface-neutral-disabled);
@@ -3961,18 +3569,18 @@
3961
3569
  cursor: pointer;
3962
3570
  }
3963
3571
  .lib-xplat-imageselector > .content .skeleton > .icon-wrapper {
3964
- color: var(--semantic-icon-subtle);
3572
+ color: var(--semantic-icon-secondary);
3965
3573
  }
3966
3574
  .lib-xplat-imageselector > .content .skeleton > .label {
3967
3575
  margin-top: var(--spacing-space-1);
3968
3576
  font-size: var(--semantic-typo-caption-1-r-size);
3969
- color: var(--semantic-text-muted);
3577
+ color: var(--semantic-text-tertiary);
3970
3578
  }
3971
3579
  .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
3972
- color: var(--semantic-icon-strong);
3580
+ color: var(--semantic-icon-primary);
3973
3581
  }
3974
3582
  .lib-xplat-imageselector > .content .skeleton:hover > .label {
3975
- color: var(--semantic-text-subtle);
3583
+ color: var(--semantic-text-secondary);
3976
3584
  }
3977
3585
  .lib-xplat-imageselector > .action-bar {
3978
3586
  position: absolute;
@@ -3982,7 +3590,7 @@
3982
3590
  display: flex;
3983
3591
  gap: 0.5em;
3984
3592
  font-size: var(--semantic-typo-title-2-m-size);
3985
- background-color: var(--semantic-surface-neutral-strong);
3593
+ background-color: var(--semantic-surface-neutral-tertiary);
3986
3594
  padding: var(--spacing-space-1) var(--spacing-space-3);
3987
3595
  align-items: center;
3988
3596
  opacity: 0;
@@ -4038,7 +3646,7 @@
4038
3646
  width: var(--spacing-control-height-sm);
4039
3647
  height: var(--spacing-control-height-sm);
4040
3648
  font-size: var(--semantic-typo-caption-1-r-size);
4041
- color: var(--semantic-text-muted);
3649
+ color: var(--semantic-text-tertiary);
4042
3650
  user-select: none;
4043
3651
  }
4044
3652
  .lib-xplat-pagination .page-btn {
@@ -4053,11 +3661,11 @@
4053
3661
  background: none;
4054
3662
  font-size: var(--semantic-typo-caption-1-r-size);
4055
3663
  cursor: pointer;
4056
- color: var(--semantic-text-subtle);
3664
+ color: var(--semantic-text-secondary);
4057
3665
  transition: background-color 0.2s, color 0.2s;
4058
3666
  }
4059
3667
  .lib-xplat-pagination .page-btn:hover:not(:disabled):not(.active) {
4060
- background-color: var(--semantic-surface-neutral-subtle);
3668
+ background-color: var(--semantic-surface-neutral-secondary);
4061
3669
  }
4062
3670
  .lib-xplat-pagination .page-btn:disabled {
4063
3671
  cursor: not-allowed;
@@ -4099,7 +3707,7 @@
4099
3707
  z-index: 1000;
4100
3708
  cursor: default;
4101
3709
  transition: transform 0.2s ease, opacity 0.2s ease;
4102
- background: var(--semantic-surface-neutral-default);
3710
+ background: var(--semantic-surface-neutral-primary);
4103
3711
  border-radius: var(--spacing-radius-md);
4104
3712
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
4105
3713
  opacity: 0;
@@ -4161,7 +3769,7 @@
4161
3769
  .lib-xplat-progress .label {
4162
3770
  font-size: var(--semantic-typo-caption-2-r-size);
4163
3771
  font-weight: 500;
4164
- color: var(--semantic-text-subtle);
3772
+ color: var(--semantic-text-secondary);
4165
3773
  min-width: 36px;
4166
3774
  text-align: right;
4167
3775
  }
@@ -4213,25 +3821,25 @@
4213
3821
  line-height: var(--semantic-typo-label-1-m-lh);
4214
3822
  }
4215
3823
  .lib-xplat-radio > .circle {
4216
- border: 2px solid var(--semantic-border-strong);
3824
+ border: 2px solid var(--semantic-border-tertiary);
4217
3825
  border-radius: 50%;
4218
3826
  display: flex;
4219
3827
  flex-shrink: 0;
4220
3828
  align-items: center;
4221
3829
  justify-content: center;
4222
3830
  cursor: pointer;
4223
- background-color: var(--semantic-surface-neutral-default);
3831
+ background-color: var(--semantic-surface-neutral-primary);
4224
3832
  transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
4225
3833
  }
4226
3834
  .lib-xplat-radio > .circle > .inner-circle {
4227
3835
  width: var(--spacing-space-3);
4228
3836
  height: var(--spacing-space-3);
4229
- background-color: var(--semantic-surface-neutral-default);
3837
+ background-color: var(--semantic-surface-neutral-primary);
4230
3838
  border-radius: 50%;
4231
3839
  }
4232
3840
  .lib-xplat-radio:hover > .circle:not(.checked) {
4233
- border-color: var(--semantic-icon-strong);
4234
- background-color: var(--semantic-surface-neutral-subtle);
3841
+ border-color: var(--semantic-icon-primary);
3842
+ background-color: var(--semantic-surface-neutral-secondary);
4235
3843
  }
4236
3844
  .lib-xplat-radio.brand > .circle.checked {
4237
3845
  background-color: var(--semantic-surface-brand-default);
@@ -4309,14 +3917,14 @@
4309
3917
  align-items: center;
4310
3918
  justify-content: space-between;
4311
3919
  gap: var(--spacing-space-2);
4312
- border: 1px solid var(--semantic-border-default);
3920
+ border: 1px solid var(--semantic-border-primary);
4313
3921
  border-radius: var(--spacing-radius-md);
4314
- background-color: var(--semantic-surface-neutral-default);
4315
- color: var(--semantic-text-strong);
3922
+ background-color: var(--semantic-surface-neutral-primary);
3923
+ color: var(--semantic-text-primary);
4316
3924
  transition: border-color 0.15s;
4317
3925
  }
4318
3926
  .lib-xplat-select .select-trigger:hover:not(.disabled) {
4319
- border-color: var(--semantic-border-strong);
3927
+ border-color: var(--semantic-border-tertiary);
4320
3928
  }
4321
3929
  .lib-xplat-select .select-trigger:active:not(.disabled) {
4322
3930
  border-color: var(--semantic-interaction-focus-ring);
@@ -4329,7 +3937,7 @@
4329
3937
  cursor: not-allowed;
4330
3938
  pointer-events: none;
4331
3939
  background-color: var(--semantic-surface-neutral-disabled);
4332
- border-color: var(--semantic-border-default);
3940
+ border-color: var(--semantic-border-primary);
4333
3941
  color: var(--semantic-text-disabled);
4334
3942
  }
4335
3943
  .lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
@@ -4360,7 +3968,7 @@
4360
3968
  display: flex;
4361
3969
  align-items: center;
4362
3970
  justify-content: center;
4363
- color: var(--semantic-icon-subtle);
3971
+ color: var(--semantic-icon-secondary);
4364
3972
  transition: transform 0.2s ease;
4365
3973
  }
4366
3974
  .lib-xplat-select .select-trigger .select-trigger-icon.open {
@@ -4374,7 +3982,7 @@
4374
3982
  z-index: 1000;
4375
3983
  padding: var(--spacing-space-1) 0;
4376
3984
  border-radius: var(--spacing-radius-md);
4377
- background-color: var(--semantic-surface-neutral-default);
3985
+ background-color: var(--semantic-surface-neutral-primary);
4378
3986
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
4379
3987
  cursor: default;
4380
3988
  max-height: 220px;
@@ -4427,10 +4035,10 @@
4427
4035
  font-weight: var(--semantic-typo-label-1-sb-weight);
4428
4036
  }
4429
4037
  .lib-xplat-select-content .select-item:hover:not(.disabled) {
4430
- background-color: var(--semantic-surface-neutral-subtle);
4038
+ background-color: var(--semantic-surface-neutral-secondary);
4431
4039
  }
4432
4040
  .lib-xplat-select-content .select-item:focus-visible:not(.disabled) {
4433
- background-color: var(--semantic-surface-neutral-subtle);
4041
+ background-color: var(--semantic-surface-neutral-secondary);
4434
4042
  }
4435
4043
  .lib-xplat-select-content .select-item.disabled {
4436
4044
  cursor: not-allowed;
@@ -4494,7 +4102,7 @@
4494
4102
  backface-visibility: hidden;
4495
4103
  }
4496
4104
  .lib-xplat-spinner .track {
4497
- stroke: var(--semantic-border-default);
4105
+ stroke: var(--semantic-border-primary);
4498
4106
  }
4499
4107
  .lib-xplat-spinner .indicator {
4500
4108
  stroke-dasharray: 42;
@@ -4572,11 +4180,11 @@
4572
4180
  .lib-xplat-steps .step-title {
4573
4181
  font-size: var(--semantic-typo-caption-1-r-size);
4574
4182
  font-weight: 500;
4575
- color: var(--semantic-text-strong);
4183
+ color: var(--semantic-text-primary);
4576
4184
  }
4577
4185
  .lib-xplat-steps .step-description {
4578
4186
  font-size: var(--semantic-typo-caption-2-r-size);
4579
- color: var(--semantic-text-muted);
4187
+ color: var(--semantic-text-tertiary);
4580
4188
  margin-top: 2px;
4581
4189
  }
4582
4190
  .lib-xplat-steps.brand .step-item.completed .step-circle {
@@ -4636,7 +4244,7 @@
4636
4244
  }
4637
4245
  .lib-xplat-steps .step-item.pending .step-circle {
4638
4246
  background-color: var(--semantic-surface-neutral-disabled);
4639
- color: var(--semantic-text-muted);
4247
+ color: var(--semantic-text-tertiary);
4640
4248
  }
4641
4249
  .lib-xplat-steps .step-item.pending .step-title {
4642
4250
  color: var(--semantic-text-disabled);
@@ -4694,7 +4302,7 @@
4694
4302
  top: 0;
4695
4303
  left: 0;
4696
4304
  height: 100%;
4697
- background-color: var(--semantic-text-muted);
4305
+ background-color: var(--semantic-text-tertiary);
4698
4306
  border-radius: 1px;
4699
4307
  transition-property: width;
4700
4308
  transition-timing-function: ease;
@@ -4712,11 +4320,11 @@
4712
4320
  border: none;
4713
4321
  padding: 0;
4714
4322
  cursor: pointer;
4715
- background-color: var(--semantic-border-default);
4323
+ background-color: var(--semantic-border-primary);
4716
4324
  transition: background-color 0.2s;
4717
4325
  }
4718
4326
  .lib-xplat-swiper__dot.active {
4719
- background-color: var(--semantic-text-subtle);
4327
+ background-color: var(--semantic-text-secondary);
4720
4328
  }
4721
4329
  .lib-xplat-swiper__dot:hover:not(.active) {
4722
4330
  background-color: var(--semantic-text-disabled);
@@ -4730,8 +4338,8 @@
4730
4338
  box-sizing: border-box;
4731
4339
  transition: background-color 0.2s, border-color 0.2s;
4732
4340
  border: 1px solid transparent;
4733
- background-color: var(--semantic-border-default);
4734
- border-color: var(--semantic-border-default);
4341
+ background-color: var(--semantic-border-primary);
4342
+ border-color: var(--semantic-border-primary);
4735
4343
  }
4736
4344
  .lib-xplat-switch.sm {
4737
4345
  width: 34px;
@@ -4820,7 +4428,7 @@
4820
4428
  top: 50%;
4821
4429
  left: 2px;
4822
4430
  transform: translateY(-50%);
4823
- background-color: var(--semantic-surface-neutral-default);
4431
+ background-color: var(--semantic-surface-neutral-primary);
4824
4432
  border-radius: var(--spacing-radius-full);
4825
4433
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
4826
4434
  transition: left 0.25s;
@@ -4874,7 +4482,7 @@
4874
4482
  }
4875
4483
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
4876
4484
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
4877
- border-bottom: 1px solid var(--semantic-border-default);
4485
+ border-bottom: 1px solid var(--semantic-border-primary);
4878
4486
  }
4879
4487
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary,
4880
4488
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary {
@@ -4902,26 +4510,26 @@
4902
4510
  }
4903
4511
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary,
4904
4512
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary {
4905
- background-color: var(--semantic-surface-neutral-default);
4513
+ background-color: var(--semantic-surface-neutral-primary);
4906
4514
  }
4907
4515
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td,
4908
4516
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th,
4909
4517
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td,
4910
4518
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th {
4911
- background-color: var(--semantic-surface-neutral-default);
4912
- color: var(--semantic-text-strong);
4519
+ background-color: var(--semantic-surface-neutral-primary);
4520
+ color: var(--semantic-text-primary);
4913
4521
  }
4914
4522
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td.cell-hover:hover,
4915
4523
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th.cell-hover:hover,
4916
4524
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td.cell-hover:hover,
4917
4525
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th.cell-hover:hover {
4918
- background-color: var(--semantic-surface-neutral-subtle);
4526
+ background-color: var(--semantic-surface-neutral-secondary);
4919
4527
  }
4920
4528
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > td,
4921
4529
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > th,
4922
4530
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > td,
4923
4531
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
4924
- background-color: var(--semantic-surface-neutral-subtle);
4532
+ background-color: var(--semantic-surface-neutral-secondary);
4925
4533
  }
4926
4534
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.success,
4927
4535
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.success {
@@ -4979,7 +4587,7 @@
4979
4587
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > th,
4980
4588
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > td,
4981
4589
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning > th {
4982
- color: var(--semantic-text-strong);
4590
+ color: var(--semantic-text-primary);
4983
4591
  background-color: var(--semantic-surface-warning-default);
4984
4592
  }
4985
4593
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning > td.cell-hover:hover,
@@ -4992,7 +4600,7 @@
4992
4600
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.warning.hover:hover > th,
4993
4601
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > td,
4994
4602
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.warning.hover:hover > th {
4995
- color: var(--semantic-text-strong);
4603
+ color: var(--semantic-text-primary);
4996
4604
  background-color: var(--semantic-surface-warning-strong);
4997
4605
  }
4998
4606
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.info,
@@ -5038,14 +4646,14 @@
5038
4646
  }
5039
4647
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral,
5040
4648
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral {
5041
- background-color: var(--semantic-surface-neutral-strong);
4649
+ background-color: var(--semantic-surface-neutral-tertiary);
5042
4650
  }
5043
4651
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > td,
5044
4652
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral > th,
5045
4653
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > td,
5046
4654
  .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.categorical.cat-neutral > th {
5047
4655
  color: var(--semantic-text-inverse);
5048
- background-color: var(--semantic-surface-neutral-strong);
4656
+ background-color: var(--semantic-surface-neutral-tertiary);
5049
4657
  }
5050
4658
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > td,
5051
4659
  .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.categorical.cat-neutral.hover:hover > th,
@@ -5141,9 +4749,9 @@
5141
4749
  font-size: var(--semantic-typo-caption-1-r-size);
5142
4750
  }
5143
4751
  .lib-xplat-tag.neutral {
5144
- color: var(--semantic-text-muted);
5145
- border-color: var(--semantic-border-default);
5146
- background-color: var(--semantic-surface-neutral-subtle);
4752
+ color: var(--semantic-text-tertiary);
4753
+ border-color: var(--semantic-border-primary);
4754
+ background-color: var(--semantic-surface-neutral-secondary);
5147
4755
  }
5148
4756
  .lib-xplat-tag.categorical.cat-1 {
5149
4757
  color: var(--semantic-categorical-1-text);
@@ -5225,10 +4833,10 @@
5225
4833
  }
5226
4834
  .lib-xplat-textarea-wrap .lib-xplat-textarea {
5227
4835
  width: 100%;
5228
- border: 1px solid var(--semantic-border-default);
4836
+ border: 1px solid var(--semantic-border-primary);
5229
4837
  border-radius: var(--spacing-radius-md);
5230
- background-color: var(--semantic-surface-neutral-default);
5231
- color: var(--semantic-text-subtle);
4838
+ background-color: var(--semantic-surface-neutral-primary);
4839
+ color: var(--semantic-text-secondary);
5232
4840
  font-family: inherit;
5233
4841
  outline: none;
5234
4842
  transition: border-color 0.15s, box-shadow 0.15s;
@@ -5249,14 +4857,14 @@
5249
4857
  line-height: var(--semantic-typo-label-1-m-lh);
5250
4858
  }
5251
4859
  .lib-xplat-textarea-wrap .lib-xplat-textarea:hover:not(.disabled):not(:focus) {
5252
- border-color: var(--semantic-border-strong);
4860
+ border-color: var(--semantic-border-tertiary);
5253
4861
  }
5254
4862
  .lib-xplat-textarea-wrap .lib-xplat-textarea:focus {
5255
4863
  border-color: var(--semantic-interaction-focus-ring);
5256
4864
  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
5257
4865
  }
5258
4866
  .lib-xplat-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
5259
- border-color: var(--semantic-border-strong);
4867
+ border-color: var(--semantic-border-tertiary);
5260
4868
  }
5261
4869
  .lib-xplat-textarea-wrap .lib-xplat-textarea.disabled {
5262
4870
  background-color: var(--semantic-surface-neutral-disabled);
@@ -5383,7 +4991,7 @@
5383
4991
  height: 100%;
5384
4992
  border-radius: var(--spacing-radius-sm);
5385
4993
  overflow: hidden;
5386
- background-color: var(--semantic-surface-neutral-strong);
4994
+ background-color: var(--semantic-surface-neutral-tertiary);
5387
4995
  }
5388
4996
  .lib-xplat-video > video {
5389
4997
  display: block;
@@ -5520,7 +5128,7 @@
5520
5128
  color: inherit;
5521
5129
  text-align: left;
5522
5130
  cursor: pointer;
5523
- border-radius: var(--spacing-radius-xs);
5131
+ border-radius: var(--spacing-radius-sm);
5524
5132
  font-size: var(--semantic-typo-caption-2-r-size);
5525
5133
  font-variant-numeric: tabular-nums;
5526
5134
  }