@3dsource/source-ui-native 2.0.3 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/fesm2022/3dsource-source-ui-native.mjs +131 -55
  2. package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
  3. package/index.d.ts +67 -31
  4. package/package.json +1 -1
  5. package/styles/elements/_src-icon-button.scss +96 -0
  6. package/styles/elements/_src-list.scss +17 -8
  7. package/styles/elements/_src-modal.scss +83 -13
  8. package/styles/mixins/button.scss +2 -0
  9. package/styles/source-ui-native.css +476 -239
  10. package/styles/source-ui-native.css.map +1 -1
  11. package/styles/source-ui-native.min.css +1 -1
  12. package/styles/variables/color/dark.scss +58 -17
  13. package/styles/variables/color/light.scss +59 -18
  14. package/styles/variables/index.scss +1 -3
  15. package/styles/variables/layout/_lg.scss +15 -14
  16. package/styles/variables/layout/_md.scss +14 -13
  17. package/styles/variables/layout/_sm.scss +16 -15
  18. package/styles/variables/layout/_xl.scss +15 -14
  19. package/styles/variables/primitives/primitives.scss +135 -109
  20. package/styles/variables/typeface/web.scss +4 -4
  21. package/styles/variables/ui/_lg.scss +8 -6
  22. package/styles/variables/ui/_md.scss +10 -7
  23. package/styles/variables/ui/_sm.scss +8 -6
  24. package/styles/variables/ui/_xl.scss +10 -8
package/styles/source-ui-native.css CHANGED
@@ -49,115 +49,141 @@
49
49
  --src-space-72: 288px;
50
50
  --src-space-80: 320px;
51
51
  --src-space-96: 384px;
52
- --src-color-neutral-50: rgba(250, 250, 250, 1);
53
- --src-color-accent-50: rgba(241, 246, 255, 1);
54
- --src-color-accent-100: rgba(214, 233, 255, 1);
55
- --src-color-accent-200: rgba(173, 212, 255, 1);
56
- --src-color-accent-300: rgba(125, 187, 255, 1);
57
- --src-color-accent-400: rgba(78, 164, 255, 1);
58
- --src-color-accent-500: rgba(1, 123, 255, 1);
59
- --src-color-accent-600: rgba(1, 111, 230, 1);
60
- --src-color-accent-700: rgba(1, 98, 204, 1);
61
- --src-color-accent-800: rgba(1, 76, 163, 1);
62
- --src-color-accent-900: rgba(0, 58, 122, 1);
63
- --src-color-accent-950: rgba(0, 36, 77, 1);
64
- --src-color-neutral-100: rgba(245, 245, 245, 1);
65
- --src-color-neutral-200: rgba(229, 229, 229, 1);
66
- --src-color-neutral-300: rgba(212, 212, 212, 1);
67
- --src-color-neutral-400: rgba(163, 163, 163, 1);
68
- --src-color-neutral-500: rgba(115, 115, 115, 1);
69
- --src-color-neutral-600: rgba(82, 82, 82, 1);
70
- --src-color-neutral-700: rgba(64, 64, 64, 1);
71
- --src-color-neutral-800: rgba(38, 38, 38, 1);
72
- --src-color-neutral-900: rgba(23, 23, 23, 1);
73
- --src-color-neutral-950: rgba(10, 10, 10, 1);
74
- --src-color-grey-50: rgba(249, 250, 251, 1);
75
- --src-color-grey-100: rgba(243, 244, 246, 1);
76
- --src-color-grey-200: rgba(229, 231, 235, 1);
77
- --src-color-grey-300: rgba(209, 213, 219, 1);
78
- --src-color-grey-400: rgba(156, 163, 175, 1);
79
- --src-color-grey-500: rgba(107, 114, 128, 1);
80
- --src-color-grey-600: rgba(75, 85, 99, 1);
81
- --src-color-grey-700: rgba(55, 65, 81, 1);
82
- --src-color-grey-800: rgba(31, 41, 55, 1);
83
- --src-color-grey-900: rgba(17, 24, 39, 1);
84
- --src-color-grey-950: rgba(3, 7, 18, 1);
85
- --src-color-green-50: rgba(240, 253, 244, 1);
86
- --src-color-green-100: rgba(220, 252, 231, 1);
87
- --src-color-green-200: rgba(187, 247, 208, 1);
88
- --src-color-green-300: rgba(134, 239, 172, 1);
89
- --src-color-green-400: rgba(74, 222, 128, 1);
90
- --src-color-green-500: rgba(34, 197, 94, 1);
91
- --src-color-green-600: rgba(22, 163, 74, 1);
92
- --src-color-green-700: rgba(21, 128, 61, 1);
93
- --src-color-green-800: rgba(22, 101, 52, 1);
94
- --src-color-green-900: rgba(20, 83, 45, 1);
95
- --src-color-green-950: rgba(5, 46, 22, 1);
96
- --src-color-red-50: rgba(254, 243, 241, 1);
97
- --src-color-red-100: rgba(253, 226, 221, 1);
98
- --src-color-red-200: rgba(251, 197, 188, 1);
99
- --src-color-red-300: rgba(247, 148, 130, 1);
100
- --src-color-red-400: rgba(245, 107, 82, 1);
101
- --src-color-red-500: rgba(242, 65, 34, 1);
102
- --src-color-red-600: rgba(197, 40, 12, 1);
103
- --src-color-red-700: rgba(159, 32, 10, 1);
104
- --src-color-red-800: rgba(115, 24, 7, 1);
105
- --src-color-red-900: rgba(67, 14, 4, 1);
106
- --src-color-red-950: rgba(69, 10, 10, 1);
107
- --src-color-blue-50: rgba(240, 245, 253, 1);
108
- --src-color-blue-100: rgba(232, 240, 253, 1);
109
- --src-color-blue-200: rgba(187, 212, 247, 1);
110
- --src-color-blue-300: rgba(147, 186, 241, 1);
111
- --src-color-blue-400: rgba(102, 153, 225, 1);
112
- --src-color-blue-500: rgba(62, 125, 213, 1);
113
- --src-color-blue-600: rgba(36, 99, 188, 1);
114
- --src-color-blue-700: rgba(20, 73, 149, 1);
115
- --src-color-blue-800: rgba(14, 53, 108, 1);
116
- --src-color-blue-900: rgba(16, 41, 76, 1);
117
- --src-color-blue-950: rgba(5, 17, 35, 1);
118
- --src-color-orange-50: rgba(255, 248, 230, 1);
119
- --src-color-orange-100: rgba(254, 239, 197, 1);
120
- --src-color-orange-200: rgba(253, 216, 141, 1);
121
- --src-color-orange-300: rgba(252, 193, 93, 1);
122
- --src-color-orange-400: rgba(248, 170, 53, 1);
123
- --src-color-orange-500: rgba(245, 155, 24, 1);
124
- --src-color-orange-600: rgba(245, 168, 15, 1);
125
- --src-color-orange-700: rgba(217, 143, 12, 1);
126
- --src-color-orange-800: rgba(184, 117, 10, 1);
127
- --src-color-orange-900: rgba(114, 73, 9, 1);
128
- --src-color-orange-950: rgba(67, 41, 3, 1);
129
- --src-color-alpha-default-10: rgba(148, 163, 184, 0.08);
130
- --src-color-alpha-default-50: rgba(148, 163, 184, 0.16);
131
- --src-color-alpha-default-100: rgba(148, 163, 184, 0.24);
132
- --src-color-alpha-default-200: rgba(71, 85, 105, 0.24);
133
- --src-color-alpha-default-600: rgba(71, 85, 105, 0.64);
134
- --src-color-alpha-white-10: rgba(255, 255, 255, 0.04);
135
- --src-color-alpha-white-50: rgba(255, 255, 255, 0.12);
136
- --src-color-alpha-white-100: rgba(255, 255, 255, 0.16);
137
- --src-color-alpha-dark-10: rgba(0, 0, 0, 0.04);
138
- --src-color-alpha-dark-50: rgba(0, 0, 0, 0.08);
139
- --src-color-alpha-dark-100: rgba(0, 0, 0, 0.16);
140
- --src-color-alpha-dark-200: rgba(0, 0, 0, 0.24);
141
- --src-color-alpha-dark-600: rgba(0, 0, 0, 0.64);
142
- --src-color-alpha-test-10: rgba(148, 163, 184, 0.08);
143
- --src-color-alpha-test-50: rgba(148, 163, 184, 0.16);
144
- --src-color-alpha-test-100: rgba(148, 163, 184, 0.24);
145
- --src-color-alpha-test-200: rgba(71, 85, 105, 0.24);
146
- --src-color-alpha-test-600: rgba(71, 85, 105, 0.64);
147
- --src-color-alpha-accent-10: rgba(1, 123, 255, 0.08);
148
- --src-color-alpha-accent-50: rgba(1, 123, 255, 0.12);
149
- --src-color-alpha-accent-100: rgba(1, 123, 255, 0.16);
150
- --src-color-alpha-success-10: rgba(22, 163, 74, 0.08);
151
- --src-color-alpha-accent-200: rgba(1, 123, 255, 0.24);
152
- --src-color-alpha-accent-300: rgba(1, 123, 255, 0.32);
153
- --src-color-alpha-accent-400: rgba(1, 123, 255, 0.36);
154
- --src-color-alpha-destruct-10: rgba(239, 68, 68, 0.08);
155
- --src-color-alpha-success-50: rgba(22, 163, 74, 0.12);
156
- --src-color-alpha-success-100: rgba(22, 163, 74, 0.24);
157
- --src-color-alpha-success-200: rgba(22, 163, 74, 0.32);
158
- --src-color-alpha-destruct-50: rgba(239, 68, 68, 0.12);
159
- --src-color-alpha-destruct-100: rgba(239, 68, 68, 0.16);
160
- --src-color-alpha-destruct-200: rgba(239, 68, 68, 0.24);
52
+ --src-color-neutral-50: #fafafaff;
53
+ --src-color-accent-50: #f1f6ffff;
54
+ --src-color-accent-100: #d6e9ffff;
55
+ --src-color-accent-200: #add4ffff;
56
+ --src-color-accent-300: #7dbbffff;
57
+ --src-color-accent-400: #4ea4ffff;
58
+ --src-color-accent-500: #017bffff;
59
+ --src-color-accent-600: #016fe6ff;
60
+ --src-color-accent-700: #0162ccff;
61
+ --src-color-accent-800: #014ca3ff;
62
+ --src-color-accent-900: #003a7aff;
63
+ --src-color-accent-950: #00244dff;
64
+ --src-color-neutral-100: #f5f5f5ff;
65
+ --src-color-neutral-200: #e5e5e5ff;
66
+ --src-color-neutral-300: #d4d4d4ff;
67
+ --src-color-neutral-400: #a3a3a3ff;
68
+ --src-color-neutral-500: #737373ff;
69
+ --src-color-neutral-600: #525252ff;
70
+ --src-color-neutral-700: #404040ff;
71
+ --src-color-neutral-800: #262626ff;
72
+ --src-color-neutral-900: #171717ff;
73
+ --src-color-neutral-950: #0a0a0aff;
74
+ --src-color-grey-50: #f9fafbff;
75
+ --src-color-grey-100: #f3f4f6ff;
76
+ --src-color-grey-200: #e5e7ebff;
77
+ --src-color-grey-300: #d1d5dbff;
78
+ --src-color-grey-400: #9ca3afff;
79
+ --src-color-grey-500: #6b7280ff;
80
+ --src-color-grey-600: #4b5563ff;
81
+ --src-color-grey-700: #374151ff;
82
+ --src-color-grey-800: #1f2937ff;
83
+ --src-color-grey-900: #111827ff;
84
+ --src-color-grey-950: #030712ff;
85
+ --src-color-green-50: #f0fdf4ff;
86
+ --src-color-green-100: #dcfce7ff;
87
+ --src-color-green-200: #bbf7d0ff;
88
+ --src-color-green-300: #86efacff;
89
+ --src-color-green-400: #4ade80ff;
90
+ --src-color-green-500: #22c55eff;
91
+ --src-color-green-600: #16a34aff;
92
+ --src-color-green-700: #15803dff;
93
+ --src-color-green-800: #166534ff;
94
+ --src-color-green-900: #14532dff;
95
+ --src-color-green-950: #052e16ff;
96
+ --src-color-red-50: #fef3f1ff;
97
+ --src-color-red-100: #fde2ddff;
98
+ --src-color-red-200: #fbc5bcff;
99
+ --src-color-red-300: #f79482ff;
100
+ --src-color-red-400: #f56b52ff;
101
+ --src-color-red-500: #f24122ff;
102
+ --src-color-red-600: #c5280cff;
103
+ --src-color-red-700: #9f200aff;
104
+ --src-color-red-800: #731807ff;
105
+ --src-color-red-900: #430e04ff;
106
+ --src-color-red-950: #450a0aff;
107
+ --src-color-blue-50: #f0f5fdff;
108
+ --src-color-blue-100: #e8f0fdff;
109
+ --src-color-blue-200: #bbd4f7ff;
110
+ --src-color-blue-300: #93baf1ff;
111
+ --src-color-blue-400: #6699e1ff;
112
+ --src-color-blue-500: #3e7dd5ff;
113
+ --src-color-blue-600: #2463bcff;
114
+ --src-color-blue-700: #144995ff;
115
+ --src-color-blue-800: #0e356cff;
116
+ --src-color-blue-900: #10294cff;
117
+ --src-color-blue-950: #051123ff;
118
+ --src-color-orange-50: #fffbebff;
119
+ --src-color-orange-100: #fef3c7ff;
120
+ --src-color-orange-200: #fde68aff;
121
+ --src-color-orange-300: #fcd34dff;
122
+ --src-color-orange-400: #fbbf24ff;
123
+ --src-color-orange-500: #f59b18ff;
124
+ --src-color-orange-600: #d97706ff;
125
+ --src-color-orange-700: #b45309ff;
126
+ --src-color-orange-800: #92400eff;
127
+ --src-color-orange-900: #78350fff;
128
+ --src-color-orange-950: #451a03ff;
129
+ --src-color-yellow-50: #fefdf0ff;
130
+ --src-color-yellow-100: #fdfbe5ff;
131
+ --src-color-yellow-200: #fbf7caff;
132
+ --src-color-yellow-300: #f9f4b3ff;
133
+ --src-color-yellow-400: #f7f097ff;
134
+ --src-color-yellow-500: #f0e442ff;
135
+ --src-color-yellow-600: #d3c93aff;
136
+ --src-color-yellow-700: #bbb233ff;
137
+ --src-color-yellow-800: #9e962cff;
138
+ --src-color-yellow-900: #787221ff;
139
+ --src-color-yellow-950: #605b1aff;
140
+ --src-color-alpha-default-10: #94a3b814;
141
+ --src-color-alpha-default-50: #94a3b829;
142
+ --src-color-alpha-default-100: #94a3b83d;
143
+ --src-color-alpha-default-200: #4755693d;
144
+ --src-color-alpha-default-600: #475569a3;
145
+ --src-color-alpha-white-10: #ffffff0a;
146
+ --src-color-alpha-white-50: #ffffff1f;
147
+ --src-color-alpha-white-100: #ffffff29;
148
+ --src-color-alpha-white-600: #ffffff70;
149
+ --src-color-alpha-dark-10: #0000000a;
150
+ --src-color-alpha-dark-50: #00000014;
151
+ --src-color-alpha-dark-100: #00000029;
152
+ --src-color-alpha-dark-200: #0000003d;
153
+ --src-color-alpha-dark-600: #000000a3;
154
+ --src-color-alpha-test-10: #94a3b814;
155
+ --src-color-alpha-test-50: #94a3b829;
156
+ --src-color-alpha-test-100: #94a3b83d;
157
+ --src-color-alpha-test-200: #4755693d;
158
+ --src-color-alpha-test-600: #475569a3;
159
+ --src-color-alpha-accent-10: #017bff14;
160
+ --src-color-alpha-accent-50: #017bff1f;
161
+ --src-color-alpha-accent-100: #017bff29;
162
+ --src-color-alpha-warning-10: #f5a80f14;
163
+ --src-color-alpha-warning-50: #f5a80f1f;
164
+ --src-color-alpha-warning-100: #f5a80f29;
165
+ --src-color-alpha-warning-200: #f5a80f3d;
166
+ --src-color-alpha-warning-300: #f5a80f52;
167
+ --src-color-alpha-warning-400: #f5a80f5c;
168
+ --src-color-alpha-success-10: #16a34a14;
169
+ --src-color-alpha-accent-200: #017bff3d;
170
+ --src-color-alpha-accent-300: #017bff52;
171
+ --src-color-alpha-accent-400: #017bff5c;
172
+ --src-color-alpha-destruct-10: #ef444414;
173
+ --src-color-alpha-success-50: #16a34a1f;
174
+ --src-color-alpha-success-100: #16a34a29;
175
+ --src-color-alpha-success-200: #16a34a3d;
176
+ --src-color-alpha-success-300: #16a34a5c;
177
+ --src-color-alpha-success-400: #16a34a70;
178
+ --src-color-alpha-destruct-50: #ef44441f;
179
+ --src-color-alpha-destruct-100: #ef444429;
180
+ --src-color-alpha-destruct-200: #ef44443d;
181
+ --src-color-alpha-attention-10: #f0e44214;
182
+ --src-color-alpha-attention-50: #f0e4421f;
183
+ --src-color-alpha-attention-100: #f0e44229;
184
+ --src-color-alpha-attention-200: #f0e4423d;
185
+ --src-color-alpha-attention-300: #f0e44252;
186
+ --src-color-alpha-attention-400: #f0e4425c;
161
187
  }
162
188
 
163
189
  /* color - light */
@@ -165,15 +191,15 @@
165
191
  --src-surface-background: var(--src-color-grey-50);
166
192
  --src-ui-accent-default: var(--src-color-accent-500);
167
193
  --src-ui-accent-default-hover: var(--src-color-accent-600);
168
- --src-ui-accent-disabled: var(--src-color-alpha-test-100);
194
+ --src-ui-accent-disabled: var(--src-color-alpha-test-200);
169
195
  --src-ui-accent-success: var(--src-color-green-500);
170
196
  --src-ui-accent-success-hover: var(--src-color-green-600);
171
197
  --src-ui-accent-error: var(--src-color-red-500);
172
198
  --src-ui-accent-error-hover: var(--src-color-red-600);
173
199
  --src-ui-accent-active: var(--src-color-grey-700);
174
200
  --src-ui-accent-active-hover: var(--src-color-grey-900);
175
- --src-ui-secondary-default: var(--src-color-alpha-default-50);
176
- --src-ui-secondary-default-hover: var(--src-color-alpha-default-10);
201
+ --src-ui-secondary-default: var(--src-color-alpha-default-10);
202
+ --src-ui-secondary-default-hover: var(--src-color-alpha-default-50);
177
203
  --src-ui-secondary-disabled: var(--src-color-alpha-white-10);
178
204
  --src-ui-secondary-active: var(--src-color-alpha-accent-50);
179
205
  --src-ui-secondary-info: var(--src-color-alpha-accent-10);
@@ -182,7 +208,7 @@
182
208
  --src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
183
209
  --src-ui-secondary-error: var(--src-color-alpha-destruct-10);
184
210
  --src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
185
- --src-ui-secondary-progress: var(--color-alpha-progress-10);
211
+ --src-ui-secondary-progress: var(--src-color-alpha-progress-10);
186
212
  --src-ui-input-default: var(--src-color-alpha-white-10);
187
213
  --src-ui-input-secondary: var(--src-color-alpha-default-10);
188
214
  --src-ui-input-hover: var(--src-color-alpha-accent-10);
@@ -192,7 +218,11 @@
192
218
  --src-ui-input-error: var(--src-color-alpha-white-10);
193
219
  --src-ui-input-error-hover: var(--src-color-alpha-destruct-10);
194
220
  --src-surface-curtain: var(--src-color-alpha-default-600);
221
+ --src-surface-fade: var(--src-color-alpha-white-600);
195
222
  --src-surface-bg: var(--src-color-alpha-default-200);
223
+ --src-ui-light: var(--src-light);
224
+ --src-border-control-default: var(--src-color-neutral-300);
225
+ --src-border-control-hover: var(--src-color-neutral-500);
196
226
  --src-border-button-basic: var(--src-color-grey-200);
197
227
  --src-border-button-basic-hover: var(--src-color-grey-400);
198
228
  --src-border-button-info: var(--src-color-accent-300);
@@ -236,20 +266,22 @@
236
266
  --src-icon-success-hover: var(--src-color-green-700);
237
267
  --src-icon-error: var(--src-color-red-500);
238
268
  --src-icon-error-hover: var(--src-color-red-600);
239
- --src-icon-progress: var(--src-color-orange-700);
269
+ --src-icon-warning: var(--src-color-orange-600);
270
+ --src-icon-warning-hover: var(--src-color-orange-700);
271
+ --src-icon-attention: var(--src-color-yellow-800);
272
+ --src-icon-attention-hover: var(--src-color-yellow-900);
240
273
  --src-graphics-positive: var(--src-color-green-500);
241
274
  --src-graphics-negative: var(--src-color-red-500);
242
275
  --src-graphics-accent: var(--src-color-accent-500);
243
276
  --src-graphics-dark-grey: var(--src-color-grey-500);
244
- --src-graphics-orange: rgba(245, 168, 15, 1);
245
- --src-graphics-yellow: rgba(240, 228, 66, 1);
246
- --src-graphics-turquoise: rgba(0, 206, 209, 1);
247
- --src-graphics-brown: rgba(139, 69, 19, 1);
277
+ --src-graphics-orange: #f5a80fff;
278
+ --src-graphics-yellow: #f0e442ff;
279
+ --src-graphics-turquoise: #00ced1ff;
280
+ --src-graphics-brown: #8b4513ff;
248
281
  --src-graphics-black: var(--src-color-grey-700);
249
282
  --src-text-body-accent: var(--src-color-accent-600);
250
283
  --src-text-body-success: var(--src-color-green-600);
251
284
  --src-text-body-destruct: var(--src-color-red-600);
252
- --src-text-body-progress: var(--src-color-orange-700);
253
285
  --src-text-ui-primary-main: var(--src-light);
254
286
  --src-text-ui-primary-secondary: var(--src-color-grey-200);
255
287
  --src-text-ui-primary-disabled: var(--src-color-grey-400);
@@ -273,8 +305,8 @@
273
305
  --src-text-ui-accent-hover: var(--src-color-accent-700);
274
306
  --src-text-ui-success-main: var(--src-color-green-600);
275
307
  --src-text-ui-success-hover: var(--src-color-green-700);
276
- --src-text-ui-distruct-main: var(--src-color-red-600);
277
- --src-text-ui-distruct-hover: var(--src-color-red-700);
308
+ --src-text-ui-distruct-main: var(--src-color-red-500);
309
+ --src-text-ui-distruct-hover: var(--src-color-red-600);
278
310
  --src-surface-container-main: var(--src-light);
279
311
  --src-surface-container-on-top: var(--src-color-alpha-default-10);
280
312
  --src-surface-container-secondary: var(--src-color-grey-50);
@@ -294,14 +326,49 @@
294
326
  --src-gradient-light-end: var(--src-color-alpha-default-10);
295
327
  --src-gradient-accent-light: var(--src-color-alpha-accent-10);
296
328
  --src-gradient-accent-hard: var(--src-color-alpha-accent-50);
297
- --src-gradient-success: var(--color-alpha-success-50);
298
- --src-gradient-success-hover: var(--color-alpha-success-200);
299
- --src-gradient-error: var(--color-alpha-destruct-100);
300
- --src-gradient-error-hover: var(--color-alpha-destruct-200);
329
+ --src-gradient-success: var(--src-color-alpha-success-50);
330
+ --src-gradient-success-hover: var(--src-color-alpha-success-200);
331
+ --src-gradient-error: var(--src-color-alpha-destruct-100);
332
+ --src-gradient-error-hover: var(--src-color-alpha-destruct-200);
301
333
  --src-tech-sticker: var(--src-color-orange-100);
334
+ --wireframe-main: var(--src-color-neutral-600);
335
+ --wireframe-secondary: var(--src-color-neutral-500);
336
+ --wireframe-light: var(--src-color-neutral-300);
337
+ --wireframe-surface-primary: var(--src-light);
338
+ --wireframe-surface-secondary: var(--src-color-alpha-default-50);
339
+ --wireframe-border: var(--src-color-alpha-default-200);
340
+ --wireframe-invert: var(--src-light);
302
341
  --src-tech-description: var(--src-color-orange-900);
303
- --src-light: rgba(255, 255, 255, 1);
304
- --src-dark: rgba(0, 0, 0, 1);
342
+ --src-light: #ffffffff;
343
+ --src-dark: #000000ff;
344
+ --src-ui-status-basic-neutral: var(--src-color-grey-500);
345
+ --src-ui-status-basic-neutral-hover: var(--src-color-grey-600);
346
+ --src-ui-status-basic-critical: var(--src-color-red-500);
347
+ --src-ui-status-basic-critical-hover: var(--src-color-red-600);
348
+ --src-ui-status-basic-info: var(--src-color-accent-500);
349
+ --src-ui-status-basic-info-hover: var(--src-color-accent-600);
350
+ --src-ui-status-basic-success: var(--src-color-green-500);
351
+ --src-ui-status-basic-success-hover: var(--src-color-green-500);
352
+ --src-ui-status-basic-warning: var(--src-color-orange-500);
353
+ --src-ui-status-basic-warning-hover: var(--src-color-orange-600);
354
+ --src-ui-status-basic-attention: var(--src-color-yellow-500);
355
+ --src-ui-status-basic-attention-hover: var(--src-color-yellow-600);
356
+ --src-ui-status-light-neutral: var(--src-color-alpha-default-100);
357
+ --src-ui-status-light-neutral-hover: var(--src-color-alpha-default-200);
358
+ --src-ui-status-light-critical: var(--src-color-alpha-destruct-100);
359
+ --src-ui-status-light-critical-hover: var(--src-color-alpha-destruct-200);
360
+ --src-ui-status-light-info: var(--src-color-alpha-accent-200);
361
+ --src-ui-status-light-info-hover: var(--src-color-alpha-accent-300);
362
+ --src-ui-status-light-success: var(--src-color-alpha-success-100);
363
+ --src-ui-status-light-success-hover: var(--src-color-alpha-success-200);
364
+ --src-ui-status-light-warning: var(--src-color-alpha-warning-200);
365
+ --src-ui-status-light-warning-hover: var(--src-color-alpha-warning-300);
366
+ --src-ui-status-light-attention: var(--src-color-alpha-attention-200);
367
+ --src-ui-status-light-attention-hover: var(--src-color-alpha-attention-300);
368
+ --src-text-ui-warning-main: var(--src-color-orange-600);
369
+ --src-text-ui-warning-hover: var(--src-color-orange-700);
370
+ --src-text-ui-attention-main: var(--src-color-yellow-800);
371
+ --src-text-ui-attention-hover: var(--src-color-yellow-900);
305
372
  }
306
373
 
307
374
  /* typeface - web */
@@ -322,17 +389,17 @@
322
389
  --src-font-size-xl: 28px;
323
390
  --src-font-size-2xl: 32px;
324
391
  --src-font-size-3xl: 40px;
325
- --src-font-size-4xl: 48px;
326
392
  --src-font-line-tech: 12px;
393
+ --src-font-size-4xl: 48px;
327
394
  --src-font-line-xs: 16px;
328
395
  --src-font-line-sm: 20px;
329
396
  --src-font-line-base: 24px;
330
397
  --src-font-line-md: 28px;
331
398
  --src-font-line-lg: 32px;
332
399
  --src-font-line-xl: 36px;
333
- --src-font-line-2xl: 40px;
334
- --src-font-line-3xl: 48px;
335
- --src-font-line-4xl: 52px;
400
+ --src-font-line-2xl: 44px;
401
+ --src-font-line-3xl: 52px;
402
+ --src-font-line-4xl: 56px;
336
403
  --src-font-spacing-tech: 1.2000000476837158px;
337
404
  --src-font-spacing-xl: -0.20000000298023224px;
338
405
  --src-font-spacing-2xl: -0.30000001192092896px;
@@ -347,6 +414,7 @@
347
414
  --src-padding-sm: var(--src-space-2);
348
415
  --src-padding-md: var(--src-space-3);
349
416
  --src-padding-lg: var(--src-space-4);
417
+ --src-padding-xl: var(--src-space-6);
350
418
  --src-height-xs: var(--src-space-3);
351
419
  --src-icon-size: var(--src-space-4);
352
420
  --src-icon-line-width: 1.2400000095367432px;
@@ -358,16 +426,17 @@
358
426
  --src-border-rounded-xs: var(--src-space-0-5);
359
427
  --src-border-rounded: var(--src-space-1);
360
428
  --src-border-rounded-parent: var(--src-space-2);
429
+ --src-border-rounded-lg: var(--src-space-3);
361
430
  --src-border-rounded-full: 9999px;
362
- --src-gap-lg: var(--src-space-2);
363
- --src-text-lineHeight: var(--src-font-line-xs);
364
- --src-text-fontSize: var(--src-font-size-xs);
365
- --src-text-weight-base: var(--src-font-weight-medium);
366
431
  --src-gap-none: 0px;
367
- --src-gap-xl: var(--src-space-3);
368
432
  --src-gap-md: var(--src-space-1);
433
+ --src-gap-lg: var(--src-space-2);
434
+ --src-text-weight-base: var(--src-font-weight-medium);
435
+ --src-text-lineHeight: var(--src-font-line-xs);
369
436
  --src-gap-sm: var(--src-space-0-5);
370
- --src-text-weight-bold: var(--src-font-weight-bold);
437
+ --src-gap-xl: var(--src-space-3);
438
+ --src-text-fontSize: var(--src-font-size-xs);
439
+ --src-text-weight-bold: var(--src-font-weight-Bold);
371
440
  --src-text-weight-medium: var(--src-font-weight-semiBold);
372
441
  --src-shadow-focused: var(--src-space-1);
373
442
  --src-shadow-ambient-inner: -1px;
@@ -376,13 +445,14 @@
376
445
  --src-shadow-blur: 1px;
377
446
  }
378
447
 
379
- [class*="--size-md"] {
448
+ :root {
380
449
  --src-media-thumbnail: 48px;
381
450
  --src-media-preview: 1024px;
382
451
  --src-padding-xs: var(--src-space-2);
383
452
  --src-padding-sm: var(--src-space-3);
384
453
  --src-padding-md: var(--src-space-4);
385
454
  --src-padding-lg: var(--src-space-5);
455
+ --src-padding-xl: var(--src-space-7);
386
456
  --src-height-xs: var(--src-space-4);
387
457
  --src-icon-size: var(--src-space-5);
388
458
  --src-icon-line-width: 1.440000057220459px;
@@ -394,16 +464,17 @@
394
464
  --src-border-rounded-xs: var(--src-space-1);
395
465
  --src-border-rounded: var(--src-space-1-5);
396
466
  --src-border-rounded-parent: var(--src-space-2-5);
467
+ --src-border-rounded-lg: var(--src-space-4);
397
468
  --src-border-rounded-full: 9999px;
398
- --src-gap-lg: var(--src-space-3);
399
- --src-text-lineHeight: var(--src-font-line-sm);
400
- --src-text-fontSize: var(--src-font-size-sm);
401
- --src-text-weight-base: var(--src-font-weight-medium);
402
469
  --src-gap-none: 0px;
403
- --src-gap-xl: var(--src-space-4);
404
470
  --src-gap-md: var(--src-space-1-5);
471
+ --src-gap-lg: var(--src-space-2-5);
472
+ --src-text-weight-base: var(--src-font-weight-Medium);
473
+ --src-text-lineHeight: var(--src-font-line-sm);
405
474
  --src-gap-sm: var(--src-space-1);
406
- --src-text-weight-bold: var(--src-font-weight-bold);
475
+ --src-gap-xl: var(--src-space-3-5);
476
+ --src-text-fontSize: var(--src-font-size-sm);
477
+ --src-text-weight-bold: var(--src-font-weight-Bold);
407
478
  --src-text-weight-medium: var(--src-font-weight-semiBold);
408
479
  --src-shadow-focused: var(--src-space-1);
409
480
  --src-shadow-ambient-inner: -1px;
@@ -419,6 +490,7 @@
419
490
  --src-padding-sm: var(--src-space-4);
420
491
  --src-padding-md: var(--src-space-5);
421
492
  --src-padding-lg: var(--src-space-6);
493
+ --src-padding-xl: var(--src-space-8);
422
494
  --src-height-xs: var(--src-space-5);
423
495
  --src-icon-size: var(--src-space-6);
424
496
  --src-icon-line-width: 1.6399999856948853px;
@@ -430,16 +502,17 @@
430
502
  --src-border-rounded-xs: var(--src-space-1-5);
431
503
  --src-border-rounded: var(--src-space-2);
432
504
  --src-border-rounded-parent: var(--src-space-3);
505
+ --src-border-rounded-lg: var(--src-space-5);
433
506
  --src-border-rounded-full: 9999px;
434
- --src-gap-lg: var(--src-space-4);
435
- --src-text-lineHeight: var(--src-font-line-base);
436
- --src-text-fontSize: var(--src-font-size-base);
437
- --src-text-weight-base: var(--src-font-weight-medium);
438
507
  --src-gap-none: 0px;
439
- --src-gap-xl: var(--src-space-5);
440
508
  --src-gap-md: var(--src-space-2);
509
+ --src-gap-lg: var(--src-space-3-5);
510
+ --src-text-weight-base: var(--src-font-weight-Medium);
511
+ --src-text-lineHeight: var(--src-font-line-base);
441
512
  --src-gap-sm: var(--src-space-1-5);
442
- --src-text-weight-bold: var(--src-font-weight-bold);
513
+ --src-gap-xl: var(--src-space-4);
514
+ --src-text-fontSize: var(--src-font-size-base);
515
+ --src-text-weight-bold: var(--src-font-weight-Bold);
443
516
  --src-text-weight-medium: var(--src-font-weight-semiBold);
444
517
  --src-shadow-focused: var(--src-space-1-5);
445
518
  --src-shadow-ambient-inner: -2px;
@@ -455,6 +528,7 @@
455
528
  --src-padding-sm: var(--src-space-5);
456
529
  --src-padding-md: var(--src-space-6);
457
530
  --src-padding-lg: var(--src-space-7);
531
+ --src-padding-xl: var(--src-space-9);
458
532
  --src-height-xs: var(--src-space-6);
459
533
  --src-icon-size: var(--src-space-7);
460
534
  --src-icon-line-width: 1.840000033378601px;
@@ -463,19 +537,20 @@
463
537
  --src-height-base: var(--src-space-14);
464
538
  --src-border-rounded-none: 0px;
465
539
  --src-height-lg: 76px;
466
- --src-border-rounded-xs: var(--src-space-2);
540
+ --src-border-rounded-xs: var(--src-space-1-5);
467
541
  --src-border-rounded: var(--src-space-2-5);
468
542
  --src-border-rounded-parent: var(--src-space-4);
543
+ --src-border-rounded-lg: var(--src-space-6);
469
544
  --src-border-rounded-full: 9999px;
470
- --src-gap-lg: var(--src-space-5);
471
- --src-text-lineHeight: var(--src-font-line-md);
472
- --src-text-fontSize: var(--src-font-size-md);
473
- --src-text-weight-base: var(--src-font-weight-medium);
474
545
  --src-gap-none: 0px;
475
- --src-gap-xl: var(--src-space-6);
476
- --src-gap-md: var(--src-space-2-5);
546
+ --src-gap-md: var(--src-space-2);
547
+ --src-gap-lg: var(--src-space-3-5);
548
+ --src-text-weight-base: var(--src-font-weight-Medium);
549
+ --src-text-lineHeight: var(--src-font-line-md);
477
550
  --src-gap-sm: var(--src-space-2);
478
- --src-text-weight-bold: var(--src-font-weight-bold);
551
+ --src-gap-xl: var(--src-space-4);
552
+ --src-text-fontSize: var(--src-font-size-md);
553
+ --src-text-weight-bold: var(--src-font-weight-Bold);
479
554
  --src-text-weight-medium: var(--src-font-weight-semiBold);
480
555
  --src-shadow-focused: var(--src-space-1-5);
481
556
  --src-shadow-ambient-inner: -3px;
@@ -514,7 +589,7 @@
514
589
  --src-layout-gap-var-xl: var(--src-space-6);
515
590
  --src-layout-height-const-sm: var(--src-space-7);
516
591
  --src-layout-height-const-md: var(--src-space-8);
517
- --src-layout-height-const-lg: var(--src-space-9);
592
+ --src-layout-height-const-lg: var(--space-9);
518
593
  --src-layout-height-const-h-xl: var(--src-space-10);
519
594
  --src-layout-height-const-h-2xl: var(--src-space-16);
520
595
  --src-layout-height-var-xs: var(--src-space-6);
@@ -543,27 +618,28 @@
543
618
  --src-graphs-height-s: var(--src-space-7);
544
619
  --screen-width: 640px;
545
620
  --card-width: 216px;
546
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-xs);
621
+ --preview-width: 216px;
622
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xs);
623
+ --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
547
624
  --src-typography-var-p-sm-fontSize: var(--src-font-size-xs);
548
- --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
549
625
  --src-typography-var-p-md-fontSize: var(--src-font-size-sm);
550
- --src-typography-var-p-md-weight: var(--src-font-weight-regular);
551
- --src-typography-var-p-md-lineHeight: var(--src-font-line-sm);
626
+ --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
627
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-height-sm);
552
628
  --src-typography-var-h-sm-fontSize: var(--src-font-size-base);
553
- --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
554
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-base);
629
+ --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
630
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-base);
555
631
  --src-typography-var-h-md-fontSize: var(--src-font-size-md);
556
- --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
557
- --src-typography-var-h-md-lineHeight: var(--src-font-line-md);
632
+ --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
633
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-height-md);
558
634
  --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
559
- --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
560
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-lg);
635
+ --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
636
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-lg);
561
637
  --src-typography-var-h-xl-fontSize: var(--src-font-size-3xl);
562
- --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
563
- --src-typography-var-h-xl-lineHeight: var(--src-font-line-3xl);
638
+ --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
639
+ --src-typography-var-h-xl-lineHeight: var(--src-font-line-height-3xl);
564
640
  --src-typography-var-p-lg-fontSize: var(--src-font-size-md);
565
- --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
566
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-md);
641
+ --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
642
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-md);
567
643
  --src-layout-table-height-2: var(--src-space-11);
568
644
  }
569
645
  }
@@ -627,33 +703,34 @@
627
703
  --src-graphs-height-s: var(--src-space-8);
628
704
  --screen-width: 768px;
629
705
  --card-width: 320px;
630
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
706
+ --preview-width: 216px;
707
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
708
+ --src-typography-var-p-sm-weight: var(--src-font-weight-Regular);
631
709
  --src-typography-var-p-sm-fontSize: var(--src-font-size-sm);
632
- --src-typography-var-p-sm-weight: var(--src-font-weight-regular);
633
710
  --src-typography-var-p-md-fontSize: var(--src-font-size-base);
634
- --src-typography-var-p-md-weight: var(--src-font-weight-regular);
635
- --src-typography-var-p-md-lineHeight: var(--src-font-line-base);
711
+ --src-typography-var-p-md-weight: var(--src-font-weight-Regular);
712
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-height-base);
636
713
  --src-typography-var-h-sm-fontSize: var(--src-font-size-md);
637
- --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
638
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-md);
714
+ --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
715
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-md);
639
716
  --src-typography-var-h-md-fontSize: var(--src-font-size-lg);
640
- --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
641
- --src-typography-var-h-md-lineHeight: var(--src-font-line-lg);
717
+ --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
718
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-height-lg);
642
719
  --src-typography-var-h-lg-fontSize: var(--src-font-size-xl);
643
- --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
644
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-xl);
720
+ --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
721
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-xl);
645
722
  --src-typography-var-h-xl-fontSize: var(--src-font-size-4xl);
646
- --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
723
+ --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
647
724
  --src-typography-var-h-xl-lineHeight: 48px;
648
725
  --src-typography-var-p-lg-fontSize: var(--src-font-size-lg);
649
- --src-typography-var-p-lg-weight: var(--src-font-weight-regular);
650
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-lg);
726
+ --src-typography-var-p-lg-weight: var(--src-font-weight-Regular);
727
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-lg);
651
728
  --src-layout-table-height-2: var(--src-space-14);
652
729
  }
653
730
  }
654
731
 
655
732
  /* layout - lg */
656
- @media (min-width: 1024px) {
733
+ @media (min-width: 1440px) {
657
734
  :root {
658
735
  --src-layout-padding-const-xs: var(--src-space-1);
659
736
  --src-layout-padding-const-sm: var(--src-space-2);
@@ -711,33 +788,34 @@
711
788
  --src-graphs-height-s: var(--src-space-9);
712
789
  --screen-width: 1024px;
713
790
  --card-width: 420px;
714
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
791
+ --preview-width: 216px;
792
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-base);
793
+ --src-typography-var-p-sm-weight: var(--src-font-weight-Medium);
715
794
  --src-typography-var-p-sm-fontSize: var(--src-font-size-base);
716
- --src-typography-var-p-sm-weight: var(--src-font-weight-medium);
717
795
  --src-typography-var-p-md-fontSize: var(--src-font-size-lg);
718
- --src-typography-var-p-md-weight: var(--src-font-weight-medium);
719
- --src-typography-var-p-md-lineHeight: var(--src-font-line-lg);
796
+ --src-typography-var-p-md-weight: var(--src-font-weight-Medium);
797
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-height-lg);
720
798
  --src-typography-var-h-sm-fontSize: var(--src-font-size-xl);
721
- --src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
722
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-xl);
799
+ --src-typography-var-h-sm-weight: var(--src-font-weight-Semi-Bold);
800
+ --src-typography-var-h-sm-lineHeight: var(--font-line-height-xl);
723
801
  --src-typography-var-h-md-fontSize: var(--src-font-size-2xl);
724
- --src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
725
- --src-typography-var-h-md-lineHeight: var(--src-font-line-2xl);
802
+ --src-typography-var-h-md-weight: var(--src-font-weight-Semi-Bold);
803
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-height-2xl);
726
804
  --src-typography-var-h-lg-fontSize: var(--src-font-size-3xl);
727
- --src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
728
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
805
+ --src-typography-var-h-lg-weight: var(--src-font-weight-Semi-Bold);
806
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
729
807
  --src-typography-var-h-xl-fontSize: 56px;
730
- --src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
808
+ --src-typography-var-h-xl-weight: var(--src-font-weight-Semi-Bold);
731
809
  --src-typography-var-h-xl-lineHeight: 56px;
732
810
  --src-typography-var-p-lg-fontSize: var(--src-font-size-2xl);
733
- --src-typography-var-p-lg-weight: var(--src-font-weight-medium);
734
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-2xl);
811
+ --src-typography-var-p-lg-weight: var(--src-font-weight-Medium);
812
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-2xl);
735
813
  --src-layout-table-height-2: var(--src-space-20);
736
814
  }
737
815
  }
738
816
 
739
817
  /* layout - xl */
740
- @media (min-width: 1280px) {
818
+ @media (min-width: 1920px) {
741
819
  :root {
742
820
  --src-layout-padding-const-xs: var(--src-space-1);
743
821
  --src-layout-padding-const-sm: var(--src-space-2);
@@ -795,35 +873,32 @@
795
873
  --src-graphs-height-s: var(--src-space-10);
796
874
  --screen-width: 1280px;
797
875
  --card-width: 480px;
798
- --src-typography-var-p-sm-lineHeight: var(--src-font-line-xl);
876
+ --preview-width: 216px;
877
+ --src-typography-var-p-sm-lineHeight: var(--src-font-line-height-xl);
878
+ --src-typography-var-p-sm-weight: var(--src-font-weight-Semi-Bold);
799
879
  --src-typography-var-p-sm-fontSize: var(--src-font-size-lg);
800
- --src-typography-var-p-sm-weight: var(--src-font-weight-semiBold);
801
880
  --src-typography-var-p-md-fontSize: var(--src-font-size-xl);
802
- --src-typography-var-p-md-weight: var(--src-font-weight-semiBold);
803
- --src-typography-var-p-md-lineHeight: var(--src-font-line-xl);
881
+ --src-typography-var-p-md-weight: var(--src-font-weight-Semi-Bold);
882
+ --src-typography-var-p-md-lineHeight: var(--src-font-line-height-xl);
804
883
  --src-typography-var-h-sm-fontSize: var(--src-font-size-2xl);
805
- --src-typography-var-h-sm-weight: var(--src-font-weight-bold);
806
- --src-typography-var-h-sm-lineHeight: var(--src-font-line-2xl);
884
+ --src-typography-var-h-sm-weight: var(--src-font-weight-Bold);
885
+ --src-typography-var-h-sm-lineHeight: var(--src-font-line-height-2xl);
807
886
  --src-typography-var-h-md-fontSize: var(--src-font-size-3xl);
808
- --src-typography-var-h-md-weight: var(--src-font-weight-bold);
809
- --src-typography-var-h-md-lineHeight: var(--src-font-line-3xl);
887
+ --src-typography-var-h-md-weight: var(--src-font-weight-Bold);
888
+ --src-typography-var-h-md-lineHeight: var(--src-font-line-height-3xl);
810
889
  --src-typography-var-h-lg-fontSize: var(--src-font-size-4xl);
811
- --src-typography-var-h-lg-weight: var(--src-font-weight-bold);
812
- --src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
890
+ --src-typography-var-h-lg-weight: var(--src-font-weight-Bold);
891
+ --src-typography-var-h-lg-lineHeight: var(--src-font-line-height-3xl);
813
892
  --src-typography-var-h-xl-fontSize: 64px;
814
- --src-typography-var-h-xl-weight: var(--src-font-weight-bold);
893
+ --src-typography-var-h-xl-weight: var(--src-font-weight-Bold);
815
894
  --src-typography-var-h-xl-lineHeight: 64px;
816
895
  --src-typography-var-p-lg-fontSize: var(--src-font-size-3xl);
817
- --src-typography-var-p-lg-weight: var(--src-font-weight-semiBold);
818
- --src-typography-var-p-lg-lineHeight: var(--src-font-line-3xl);
896
+ --src-typography-var-p-lg-weight: var(--src-font-weight-Semi-Bold);
897
+ --src-typography-var-p-lg-lineHeight: var(--src-font-line-height-3xl);
819
898
  --src-layout-table-height-2: var(--src-space-24);
820
899
  }
821
900
  }
822
901
 
823
- :root {
824
- --src-icon-size: var(--src-space-5);
825
- }
826
-
827
902
  :root {
828
903
  --src-color-brand-700: #0162cc;
829
904
  --src-color-brand-500: #017bff;
@@ -1205,15 +1280,19 @@
1205
1280
  }
1206
1281
 
1207
1282
  .src-list__item {
1208
- --srcListItemBgColor: var(--src-color-bg-default);
1209
- --srcListItemBgHoverColor: var(--src-color-bg-default-hover);
1283
+ --srcListItemBgColor: transparent;
1284
+ --srcListItemBgHoverColor: var(
1285
+ --src-ui-secondary-default-hover,
1286
+ rgba(148, 163, 184, 0.16)
1287
+ );
1210
1288
  --srcListItemBorderRadius: var(--src-border-rounded, 4px);
1211
1289
  --srcListItemBoxShadow: none;
1212
- --srcListItemFontColor: var(--src-color-text-default);
1213
- --srcListItemFontSize: var(--src-font-size-sm, 14px);
1214
- --srcListItemFontWeight: var(--src-font-weight-regular, 400);
1215
- --srcListItemLineHeight: var(--src-font-line-sm, 20px);
1216
- --srcListItemPaddings: 8px;
1290
+ --srcListItemFontColor: var(--src-text-body-secondary, #4b5563);
1291
+ --srcListItemFontSize: var(--src-text-fontSize, 12px);
1292
+ --srcListItemFontWeight: 500;
1293
+ --srcListItemLineHeight: var(--src-text-lineHeight, 16px);
1294
+ --srcListItemPaddings: var(--src-padding-xs, 8px) var(--src-padding-xs, 8px)
1295
+ var(--src-padding-xs, 8px) var(--src-padding-sm, 8px);
1217
1296
  --srcListItemTextTransform: default;
1218
1297
  --srcListItemDisplay: block;
1219
1298
  position: relative;
@@ -1236,13 +1315,16 @@
1236
1315
  .src-list__item--flex {
1237
1316
  --srcListItemDisplay: inline-flex;
1238
1317
  align-items: flex-start;
1239
- gap: 8px;
1318
+ gap: var(--src-gap-md, 6px);
1240
1319
  }
1241
1320
  @media (hover: hover) and (pointer: fine) {
1242
1321
  .src-list__item:hover, .src-list__item:focus-visible {
1243
1322
  background-color: var(--srcListItemBgHoverColor);
1244
1323
  }
1245
1324
  }
1325
+ .src-list__item:active {
1326
+ background-color: var(--src-ui-secondary-active, rgba(1, 123, 255, 0.12));
1327
+ }
1246
1328
  .src-list__item:disabled, .src-list__item[disabled], .src-list__item.disabled, .src-list__item.src-list__item--disabled {
1247
1329
  cursor: default;
1248
1330
  pointer-events: none;
@@ -1947,6 +2029,23 @@
1947
2029
  }
1948
2030
  }
1949
2031
 
2032
+ .src-icon-button--state-warning {
2033
+ --srcButtonBoxShadow:
2034
+ 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
2035
+ 0 var(--src-shadow-ambient-outer, 1px) 0 0
2036
+ var(--src-shadow-light, rgba(148, 163, 184, 0.16));
2037
+ --srcButtonIconColor: var(--src-icon-warning);
2038
+ }
2039
+ .src-icon-button--state-warning:focus-visible {
2040
+ --srcButtonIconColor: var(--src-icon-warning);
2041
+ --srcButtonBorderColor: var(--src-border-button-error, #f79482);
2042
+ }
2043
+ @media (pointer: fine) {
2044
+ .src-icon-button--state-warning:hover {
2045
+ --srcButtonIconColor: var(--src-icon-warning-hover);
2046
+ }
2047
+ }
2048
+
1950
2049
  .src-icon-button--state-error {
1951
2050
  --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-error, rgba(239, 68, 68, 0.16));
1952
2051
  --srcButtonBoxShadow:
@@ -2131,6 +2230,86 @@
2131
2230
  }
2132
2231
  }
2133
2232
 
2233
+ .src-icon-button--inline {
2234
+ --srcButtonBoxShadow: none;
2235
+ --srcButtonBorder: none;
2236
+ --srcButtonBorderColor: transparent;
2237
+ --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
2238
+ --srcButtonBgColor: transparent;
2239
+ --srcButtonIconColor: var(--src-icon-default, #374151);
2240
+ --srcButtonBorderRadius: var(--src-border-rounded, 4px);
2241
+ --srcButtonPaddings: 0;
2242
+ text-decoration: underline;
2243
+ height: auto;
2244
+ }
2245
+ @media (pointer: fine) {
2246
+ .src-icon-button--inline:hover {
2247
+ --srcButtonBgColor: transparent;
2248
+ --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
2249
+ }
2250
+ }
2251
+ .src-icon-button--inline:active, .src-icon-button--inline.src-icon-button--pressed {
2252
+ --srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) var(--src-shadow-light, rgba(148, 163, 184, 0.16));
2253
+ --srcButtonBoxShadow: none;
2254
+ --srcButtonBorder: none;
2255
+ --srcButtonBorderColor: transparent;
2256
+ --srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
2257
+ --srcButtonIconColor: var(--src-icon-info, #017bff);
2258
+ --srcButtonBgColor: var(
2259
+ --src-ui-secondary-default,
2260
+ rgba(148, 163, 184, 0.16)
2261
+ );
2262
+ }
2263
+ @media (pointer: fine) {
2264
+ .src-icon-button--inline:active:hover, .src-icon-button--inline.src-icon-button--pressed:hover {
2265
+ --srcButtonBgColor: var(
2266
+ --src-ui-secondary-default-hover,
2267
+ rgba(148, 163, 184, 0.08)
2268
+ );
2269
+ --srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
2270
+ --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
2271
+ }
2272
+ }
2273
+ .src-icon-button--inline:active:hover, .src-icon-button--inline.src-icon-button--pressed:hover {
2274
+ --srcButtonBgColor: transparent;
2275
+ }
2276
+ .src-icon-button--inline.src-icon-button--state-info {
2277
+ --srcButtonBgColor: transparent;
2278
+ --srcButtonIconColor: var(--src-icon-info, #017bff);
2279
+ }
2280
+ .src-icon-button--inline.src-icon-button--state-info:hover {
2281
+ --srcButtonBgColor: transparent;
2282
+ --srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
2283
+ }
2284
+ .src-icon-button--inline.src-icon-button--state-success {
2285
+ --srcButtonBgColor: transparent;
2286
+ --srcButtonIconColor: var(--src-icon-success, #16a34a);
2287
+ }
2288
+ .src-icon-button--inline.src-icon-button--state-success:hover {
2289
+ --srcButtonBgColor: transparent;
2290
+ --srcButtonIconColor: var(--src-icon-success-hover, #15803d);
2291
+ }
2292
+ .src-icon-button--inline.src-icon-button--state-error, .src-icon-button--inline.src-icon-button--state-destructive {
2293
+ --srcButtonBgColor: transparent;
2294
+ --srcButtonIconColor: var(--src-icon-error, #f24122);
2295
+ }
2296
+ .src-icon-button--inline.src-icon-button--state-error:hover, .src-icon-button--inline.src-icon-button--state-destructive:hover {
2297
+ --srcButtonBgColor: transparent;
2298
+ --srcButtonIconColor: var(--src-icon-error-hover, #c5280c);
2299
+ }
2300
+ .src-icon-button--inline.src-icon-button--state-warning {
2301
+ --srcButtonBgColor: transparent;
2302
+ --srcButtonIconColor: var(--src-icon-warning, #d97706);
2303
+ }
2304
+ .src-icon-button--inline.src-icon-button--state-warning:hover {
2305
+ --srcButtonBgColor: transparent;
2306
+ --srcButtonIconColor: var(--src-icon-warning-hover, #b45309);
2307
+ }
2308
+ .src-icon-button--inline:disabled, .src-icon-button--inline[disabled], .src-icon-button--inline.disabled {
2309
+ --srcButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);
2310
+ --srcButtonBgColor: transparent;
2311
+ }
2312
+
2134
2313
  .src-icon-button--plain {
2135
2314
  --srcButtonBoxShadow: none;
2136
2315
  --srcButtonBorder: none;
@@ -3012,18 +3191,24 @@
3012
3191
  }
3013
3192
 
3014
3193
  .src-modal {
3015
- --srcModalWidth: 620px;
3194
+ --srcModalWidth: 422px;
3016
3195
  --srcModalMaxWidth: calc(100% - 16px);
3017
3196
  --srcModalMaxHeight: 80vh;
3018
- --srcModalBg: var(--src-color-bg-default);
3019
- --srcModalBoxShadow: var(--src-shadow-large);
3020
- --srcModalBorderRadius: var(--src-border-rounded-parent);
3021
- --srcModalTitleSize: var(--src-font-size-base);
3022
- --srcModalTitleLineHeight: var(--src-font-line-base);
3023
- --srcModalTitleColor: var(--src-color-text-default);
3024
- --srcModalBodyPadding: 20px;
3025
- --srcModalTitleBorder: 1px solid var(--src-color-border-default, #e5e7eb);
3026
- --srcModalFooterBorder: 1px solid var(--src-color-border-default, #e5e7eb);
3197
+ --srcModalBg: var(--src-surface-container-main, #fff);
3198
+ --srcModalBoxShadow:
3199
+ 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, 0.24)),
3200
+ 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, 0.16));
3201
+ --srcModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);
3202
+ --srcModalTitleSize: var(--src-font-size-base, 16px);
3203
+ --srcModalTitleLineHeight: var(--src-font-line-base, 24px);
3204
+ --srcModalTitleColor: var(--src-text-body-main, #111827);
3205
+ --srcModalBodyPadding: var(--src-layout-padding-const-lg, 16px)
3206
+ var(--src-layout-padding-const-xl, 24px)
3207
+ var(--src-layout-padding-const-2xl, 32px)
3208
+ var(--src-layout-padding-const-xl, 24px);
3209
+ --srcModalTitleBorder: none;
3210
+ --srcModalFooterBorder: 1px solid
3211
+ var(--src-border-container-light, rgba(148, 163, 184, 0.16));
3027
3212
  display: grid;
3028
3213
  grid-template-columns: minmax(0, 1fr);
3029
3214
  grid-template-rows: auto minmax(0, 1fr) auto;
@@ -3034,22 +3219,50 @@
3034
3219
  background-color: var(--srcModalBg);
3035
3220
  border-radius: var(--srcModalBorderRadius);
3036
3221
  box-shadow: var(--srcModalBoxShadow);
3222
+ color: var(--src-text-body-secondary, #4b5563);
3223
+ font-family: var(--src-font-family-header, Inter);
3224
+ font-size: var(--src-font-size-sm, 14px);
3225
+ font-style: normal;
3226
+ font-weight: 400;
3227
+ line-height: var(--src-font-line-sm, 20px);
3037
3228
  }
3038
3229
  .src-modal--small {
3039
3230
  --srcModalWidth: 380px;
3040
3231
  }
3041
3232
  .src-modal .src-modal__header {
3233
+ position: relative;
3042
3234
  display: flex;
3043
- padding: 14px 16px 14px 20px;
3235
+ padding: 0;
3044
3236
  width: 100%;
3045
3237
  border-bottom: var(--srcModalTitleBorder);
3046
3238
  }
3047
3239
  .src-modal .src-modal__body {
3240
+ display: grid;
3241
+ grid-template-columns: minmax(0, 1fr);
3242
+ grid-template-rows: auto minmax(0, 1fr);
3243
+ gap: var(--src-layout-gap-const-md, 12px);
3048
3244
  padding: var(--srcModalBodyPadding);
3049
3245
  overflow: auto;
3050
3246
  scrollbar-width: thin;
3051
3247
  scrollbar-color: var(--src-color-border-default) transparent;
3052
3248
  }
3249
+ .src-modal .src-modal__body .src-modal__title,
3250
+ .src-modal .src-modal__body .src-modal__scroll-box {
3251
+ grid-column: 1/-1;
3252
+ }
3253
+ .src-modal .src-modal__body--icon {
3254
+ grid-template-columns: 24px minmax(0, 1fr);
3255
+ }
3256
+ .src-modal .src-modal__body--icon .src-modal__icon {
3257
+ grid-column: 1/2;
3258
+ grid-row: 1/-1;
3259
+ }
3260
+ .src-modal .src-modal__body--icon .src-modal__title {
3261
+ grid-column: 2/-1;
3262
+ }
3263
+ .src-modal .src-modal__body--icon .src-modal__scroll-box {
3264
+ grid-column: 2/-1;
3265
+ }
3053
3266
  .src-modal .src-modal__body::-webkit-scrollbar {
3054
3267
  width: 4px;
3055
3268
  }
@@ -3064,14 +3277,35 @@
3064
3277
  display: flex;
3065
3278
  justify-content: flex-end;
3066
3279
  align-items: center;
3067
- padding: 16px;
3280
+ padding: var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);
3068
3281
  width: 100%;
3069
3282
  border-top: var(--srcModalFooterBorder);
3283
+ gap: 8px;
3284
+ }
3285
+ @media (max-width: 767px) {
3286
+ .src-modal .src-modal__footer {
3287
+ flex-direction: column-reverse;
3288
+ }
3289
+ .src-modal .src-modal__footer .src-modal__footer-group {
3290
+ width: 100%;
3291
+ }
3292
+ .src-modal .src-modal__footer .src-modal__footer-group src-button {
3293
+ flex-grow: 1;
3294
+ }
3295
+ .src-modal .src-modal__footer .src-modal__footer-group src-button .src-button {
3296
+ --srcButtonWidth: 100%;
3297
+ }
3298
+ }
3299
+ .src-modal .src-modal__footer:has(.src-modal__footer-group:nth-child(2)) {
3300
+ justify-content: space-between;
3301
+ }
3302
+ .src-modal .src-modal__footer-group {
3303
+ display: flex;
3070
3304
  gap: 10px;
3071
3305
  }
3072
3306
  .src-modal .src-modal__title {
3073
3307
  font-size: var(--srcModalTitleSize);
3074
- font-weight: var(--src-font-weight-semiBold, 600);
3308
+ font-weight: 600;
3075
3309
  line-height: var(--srcModalTitleLineHeight);
3076
3310
  color: var(--srcModalTitleColor);
3077
3311
  word-break: break-word;
@@ -3080,6 +3314,9 @@
3080
3314
  margin-right: 8px;
3081
3315
  }
3082
3316
  .src-modal .src-modal__close {
3317
+ position: absolute;
3318
+ top: 4px;
3319
+ right: 4px;
3083
3320
  margin-left: auto;
3084
3321
  }
3085
3322