@snack-uikit/link 0.9.3 → 0.10.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 (16) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/README.md +2 -2
  3. package/dist/components/Link.d.ts +13 -7
  4. package/dist/components/Link.js +3 -3
  5. package/dist/components/constants.d.ts +4 -4
  6. package/dist/components/constants.js +4 -4
  7. package/dist/components/index.d.ts +0 -1
  8. package/dist/components/index.js +0 -1
  9. package/dist/components/styles.module.css +311 -1573
  10. package/dist/components/types.d.ts +3 -3
  11. package/package.json +4 -4
  12. package/src/components/Link.tsx +17 -11
  13. package/src/components/constants.ts +4 -4
  14. package/src/components/index.ts +0 -1
  15. package/src/components/styles.module.scss +70 -52
  16. package/src/components/types.ts +3 -3
package/dist/components/styles.module.css CHANGED
@@ -9,1739 +9,439 @@
9
9
  -webkit-text-decoration-skip-ink:none;
10
10
  text-decoration-skip-ink:none;
11
11
  }
12
- .link[data-on-surface=background][data-color=invert-neutral]{
13
- color:var(--sys-invert-neutral-accent-default, #d2d2d2);
14
- }
15
- .link[data-on-surface=background][data-color=invert-neutral]:hover{
16
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
17
- }
18
- .link[data-on-surface=background][data-color=invert-neutral]:focus-visible{
19
- outline-width:var(--border-state-focus-s-border-width, 2px);
20
- outline-style:var(--border-state-focus-s-border-style, solid);
21
- outline-color:var(--border-state-focus-s-border-color, );
22
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
23
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
24
- }
25
- .link[data-on-surface=background][data-color=invert-neutral][data-size=s]{
26
- font-family:var(--link-body-s-font-family, SB Sans Interface);
27
- font-weight:var(--link-body-s-font-weight, Regular);
28
- line-height:var(--link-body-s-line-height, 16px);
29
- font-size:var(--link-body-s-font-size, 12px);
30
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
31
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
32
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
33
- text-decoration:var(--link-body-s-text-decoration, underline);
34
- height:var(--size-link-s, 16px);
35
- gap:var(--dimension-theme-general-0px, 0px);
36
- }
37
- .link[data-on-surface=background][data-color=invert-neutral][data-size=s] svg{
38
- width:var(--dimension-2m, 16px) !important;
39
- height:var(--dimension-2m, 16px) !important;
40
- }
41
- .link[data-on-surface=background][data-color=invert-neutral][data-size=m]{
42
- font-family:var(--link-body-m-font-family, SB Sans Interface);
43
- font-weight:var(--link-body-m-font-weight, Regular);
44
- line-height:var(--link-body-m-line-height, 20px);
45
- font-size:var(--link-body-m-font-size, 14px);
46
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
47
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
48
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
49
- text-decoration:var(--link-body-m-text-decoration, underline);
50
- height:var(--size-link-m, 20px);
51
- gap:var(--dimension-theme-general-0px, 0px);
52
- }
53
- .link[data-on-surface=background][data-color=invert-neutral][data-size=m] svg{
54
- width:var(--dimension-3m, 24px) !important;
55
- height:var(--dimension-3m, 24px) !important;
56
- }
57
- .link[data-on-surface=background][data-color=invert-neutral][data-size=l]{
58
- font-family:var(--link-body-l-font-family, SB Sans Interface);
59
- font-weight:var(--link-body-l-font-weight, Regular);
60
- line-height:var(--link-body-l-line-height, 24px);
61
- font-size:var(--link-body-l-font-size, 16px);
62
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
63
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
64
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
65
- text-decoration:var(--link-body-l-text-decoration, underline);
66
- height:var(--size-link-l, 24px);
67
- gap:var(--dimension-theme-general-0px, 0px);
68
- }
69
- .link[data-on-surface=background][data-color=invert-neutral][data-size=l] svg{
70
- width:var(--dimension-3m, 24px) !important;
71
- height:var(--dimension-3m, 24px) !important;
72
- }
73
- .link[data-on-surface=background][data-color=neutral]{
74
- color:var(--sys-neutral-accent-default, #757575);
75
- }
76
- .link[data-on-surface=background][data-color=neutral]:hover{
77
- color:var(--sys-neutral-text-main, #333333);
78
- }
79
- .link[data-on-surface=background][data-color=neutral]:focus-visible{
80
- outline-width:var(--border-state-focus-s-border-width, 2px);
81
- outline-style:var(--border-state-focus-s-border-style, solid);
82
- outline-color:var(--border-state-focus-s-border-color, );
83
- color:var(--sys-neutral-text-main, #333333);
84
- outline-color:var(--sys-available-complementary, #131313);
85
- }
86
- .link[data-on-surface=background][data-color=neutral][data-size=s]{
87
- font-family:var(--link-body-s-font-family, SB Sans Interface);
88
- font-weight:var(--link-body-s-font-weight, Regular);
89
- line-height:var(--link-body-s-line-height, 16px);
90
- font-size:var(--link-body-s-font-size, 12px);
91
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
92
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
93
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
94
- text-decoration:var(--link-body-s-text-decoration, underline);
95
- height:var(--size-link-s, 16px);
96
- gap:var(--dimension-theme-general-0px, 0px);
97
- }
98
- .link[data-on-surface=background][data-color=neutral][data-size=s] svg{
99
- width:var(--dimension-2m, 16px) !important;
100
- height:var(--dimension-2m, 16px) !important;
101
- }
102
- .link[data-on-surface=background][data-color=neutral][data-size=m]{
103
- font-family:var(--link-body-m-font-family, SB Sans Interface);
104
- font-weight:var(--link-body-m-font-weight, Regular);
105
- line-height:var(--link-body-m-line-height, 20px);
106
- font-size:var(--link-body-m-font-size, 14px);
107
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
108
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
109
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
110
- text-decoration:var(--link-body-m-text-decoration, underline);
111
- height:var(--size-link-m, 20px);
112
- gap:var(--dimension-theme-general-0px, 0px);
113
- }
114
- .link[data-on-surface=background][data-color=neutral][data-size=m] svg{
115
- width:var(--dimension-3m, 24px) !important;
116
- height:var(--dimension-3m, 24px) !important;
117
- }
118
- .link[data-on-surface=background][data-color=neutral][data-size=l]{
119
- font-family:var(--link-body-l-font-family, SB Sans Interface);
120
- font-weight:var(--link-body-l-font-weight, Regular);
121
- line-height:var(--link-body-l-line-height, 24px);
122
- font-size:var(--link-body-l-font-size, 16px);
123
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
124
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
125
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
126
- text-decoration:var(--link-body-l-text-decoration, underline);
127
- height:var(--size-link-l, 24px);
128
- gap:var(--dimension-theme-general-0px, 0px);
129
- }
130
- .link[data-on-surface=background][data-color=neutral][data-size=l] svg{
131
- width:var(--dimension-3m, 24px) !important;
132
- height:var(--dimension-3m, 24px) !important;
133
- }
134
- .link[data-on-surface=background][data-color=primary]{
135
- color:var(--sys-primary-accent-default, #794ed3);
136
- }
137
- .link[data-on-surface=background][data-color=primary]:hover{
138
- color:var(--sys-primary-text-main, #382a62);
139
- }
140
- .link[data-on-surface=background][data-color=primary]:focus-visible{
141
- outline-width:var(--border-state-focus-s-border-width, 2px);
142
- outline-style:var(--border-state-focus-s-border-style, solid);
143
- outline-color:var(--border-state-focus-s-border-color, );
144
- color:var(--sys-primary-text-main, #382a62);
145
- outline-color:var(--sys-available-complementary, #131313);
146
- }
147
- .link[data-on-surface=background][data-color=primary][data-size=s]{
148
- font-family:var(--link-body-s-font-family, SB Sans Interface);
149
- font-weight:var(--link-body-s-font-weight, Regular);
150
- line-height:var(--link-body-s-line-height, 16px);
151
- font-size:var(--link-body-s-font-size, 12px);
152
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
153
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
154
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
155
- text-decoration:var(--link-body-s-text-decoration, underline);
156
- height:var(--size-link-s, 16px);
157
- gap:var(--dimension-theme-general-0px, 0px);
158
- }
159
- .link[data-on-surface=background][data-color=primary][data-size=s] svg{
160
- width:var(--dimension-2m, 16px) !important;
161
- height:var(--dimension-2m, 16px) !important;
162
- }
163
- .link[data-on-surface=background][data-color=primary][data-size=m]{
164
- font-family:var(--link-body-m-font-family, SB Sans Interface);
165
- font-weight:var(--link-body-m-font-weight, Regular);
166
- line-height:var(--link-body-m-line-height, 20px);
167
- font-size:var(--link-body-m-font-size, 14px);
168
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
169
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
170
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
171
- text-decoration:var(--link-body-m-text-decoration, underline);
172
- height:var(--size-link-m, 20px);
173
- gap:var(--dimension-theme-general-0px, 0px);
174
- }
175
- .link[data-on-surface=background][data-color=primary][data-size=m] svg{
176
- width:var(--dimension-3m, 24px) !important;
177
- height:var(--dimension-3m, 24px) !important;
178
- }
179
- .link[data-on-surface=background][data-color=primary][data-size=l]{
180
- font-family:var(--link-body-l-font-family, SB Sans Interface);
181
- font-weight:var(--link-body-l-font-weight, Regular);
182
- line-height:var(--link-body-l-line-height, 24px);
183
- font-size:var(--link-body-l-font-size, 16px);
184
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
185
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
186
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
187
- text-decoration:var(--link-body-l-text-decoration, underline);
188
- height:var(--size-link-l, 24px);
189
- gap:var(--dimension-theme-general-0px, 0px);
190
- }
191
- .link[data-on-surface=background][data-color=primary][data-size=l] svg{
192
- width:var(--dimension-3m, 24px) !important;
193
- height:var(--dimension-3m, 24px) !important;
194
- }
195
- .link[data-on-surface=background][data-color=red]{
196
- color:var(--sys-red-accent-default, #d93f2f);
197
- }
198
- .link[data-on-surface=background][data-color=red]:hover{
199
- color:var(--sys-red-text-main, #621c1e);
200
- }
201
- .link[data-on-surface=background][data-color=red]:focus-visible{
202
- outline-width:var(--border-state-focus-s-border-width, 2px);
203
- outline-style:var(--border-state-focus-s-border-style, solid);
204
- outline-color:var(--border-state-focus-s-border-color, );
205
- color:var(--sys-red-text-main, #621c1e);
206
- outline-color:var(--sys-available-complementary, #131313);
207
- }
208
- .link[data-on-surface=background][data-color=red][data-size=s]{
209
- font-family:var(--link-body-s-font-family, SB Sans Interface);
210
- font-weight:var(--link-body-s-font-weight, Regular);
211
- line-height:var(--link-body-s-line-height, 16px);
212
- font-size:var(--link-body-s-font-size, 12px);
213
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
214
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
215
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
216
- text-decoration:var(--link-body-s-text-decoration, underline);
217
- height:var(--size-link-s, 16px);
218
- gap:var(--dimension-theme-general-0px, 0px);
219
- }
220
- .link[data-on-surface=background][data-color=red][data-size=s] svg{
221
- width:var(--dimension-2m, 16px) !important;
222
- height:var(--dimension-2m, 16px) !important;
223
- }
224
- .link[data-on-surface=background][data-color=red][data-size=m]{
225
- font-family:var(--link-body-m-font-family, SB Sans Interface);
226
- font-weight:var(--link-body-m-font-weight, Regular);
227
- line-height:var(--link-body-m-line-height, 20px);
228
- font-size:var(--link-body-m-font-size, 14px);
229
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
230
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
231
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
232
- text-decoration:var(--link-body-m-text-decoration, underline);
233
- height:var(--size-link-m, 20px);
234
- gap:var(--dimension-theme-general-0px, 0px);
235
- }
236
- .link[data-on-surface=background][data-color=red][data-size=m] svg{
237
- width:var(--dimension-3m, 24px) !important;
238
- height:var(--dimension-3m, 24px) !important;
239
- }
240
- .link[data-on-surface=background][data-color=red][data-size=l]{
241
- font-family:var(--link-body-l-font-family, SB Sans Interface);
242
- font-weight:var(--link-body-l-font-weight, Regular);
243
- line-height:var(--link-body-l-line-height, 24px);
244
- font-size:var(--link-body-l-font-size, 16px);
245
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
246
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
247
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
248
- text-decoration:var(--link-body-l-text-decoration, underline);
249
- height:var(--size-link-l, 24px);
250
- gap:var(--dimension-theme-general-0px, 0px);
251
- }
252
- .link[data-on-surface=background][data-color=red][data-size=l] svg{
253
- width:var(--dimension-3m, 24px) !important;
254
- height:var(--dimension-3m, 24px) !important;
255
- }
256
- .link[data-on-surface=background][data-color=orange]{
257
- color:var(--sys-orange-accent-default, #fd8f1a);
258
- }
259
- .link[data-on-surface=background][data-color=orange]:hover{
260
- color:var(--sys-orange-text-main, #572212);
261
- }
262
- .link[data-on-surface=background][data-color=orange]:focus-visible{
263
- outline-width:var(--border-state-focus-s-border-width, 2px);
264
- outline-style:var(--border-state-focus-s-border-style, solid);
265
- outline-color:var(--border-state-focus-s-border-color, );
266
- color:var(--sys-orange-text-main, #572212);
267
- outline-color:var(--sys-available-complementary, #131313);
268
- }
269
- .link[data-on-surface=background][data-color=orange][data-size=s]{
270
- font-family:var(--link-body-s-font-family, SB Sans Interface);
271
- font-weight:var(--link-body-s-font-weight, Regular);
272
- line-height:var(--link-body-s-line-height, 16px);
273
- font-size:var(--link-body-s-font-size, 12px);
274
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
275
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
276
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
277
- text-decoration:var(--link-body-s-text-decoration, underline);
278
- height:var(--size-link-s, 16px);
279
- gap:var(--dimension-theme-general-0px, 0px);
280
- }
281
- .link[data-on-surface=background][data-color=orange][data-size=s] svg{
282
- width:var(--dimension-2m, 16px) !important;
283
- height:var(--dimension-2m, 16px) !important;
284
- }
285
- .link[data-on-surface=background][data-color=orange][data-size=m]{
286
- font-family:var(--link-body-m-font-family, SB Sans Interface);
287
- font-weight:var(--link-body-m-font-weight, Regular);
288
- line-height:var(--link-body-m-line-height, 20px);
289
- font-size:var(--link-body-m-font-size, 14px);
290
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
291
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
292
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
293
- text-decoration:var(--link-body-m-text-decoration, underline);
294
- height:var(--size-link-m, 20px);
295
- gap:var(--dimension-theme-general-0px, 0px);
296
- }
297
- .link[data-on-surface=background][data-color=orange][data-size=m] svg{
298
- width:var(--dimension-3m, 24px) !important;
299
- height:var(--dimension-3m, 24px) !important;
300
- }
301
- .link[data-on-surface=background][data-color=orange][data-size=l]{
302
- font-family:var(--link-body-l-font-family, SB Sans Interface);
303
- font-weight:var(--link-body-l-font-weight, Regular);
304
- line-height:var(--link-body-l-line-height, 24px);
305
- font-size:var(--link-body-l-font-size, 16px);
306
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
307
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
308
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
309
- text-decoration:var(--link-body-l-text-decoration, underline);
310
- height:var(--size-link-l, 24px);
311
- gap:var(--dimension-theme-general-0px, 0px);
312
- }
313
- .link[data-on-surface=background][data-color=orange][data-size=l] svg{
314
- width:var(--dimension-3m, 24px) !important;
315
- height:var(--dimension-3m, 24px) !important;
316
- }
317
- .link[data-on-surface=background][data-color=blue]{
318
- color:var(--sys-blue-accent-default, #3280e8);
319
- }
320
- .link[data-on-surface=background][data-color=blue]:hover{
321
- color:var(--sys-blue-text-main, #1f3361);
322
- }
323
- .link[data-on-surface=background][data-color=blue]:focus-visible{
324
- outline-width:var(--border-state-focus-s-border-width, 2px);
325
- outline-style:var(--border-state-focus-s-border-style, solid);
326
- outline-color:var(--border-state-focus-s-border-color, );
327
- color:var(--sys-blue-text-main, #1f3361);
328
- outline-color:var(--sys-available-complementary, #131313);
329
- }
330
- .link[data-on-surface=background][data-color=blue][data-size=s]{
331
- font-family:var(--link-body-s-font-family, SB Sans Interface);
332
- font-weight:var(--link-body-s-font-weight, Regular);
333
- line-height:var(--link-body-s-line-height, 16px);
334
- font-size:var(--link-body-s-font-size, 12px);
335
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
336
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
337
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
338
- text-decoration:var(--link-body-s-text-decoration, underline);
339
- height:var(--size-link-s, 16px);
340
- gap:var(--dimension-theme-general-0px, 0px);
341
- }
342
- .link[data-on-surface=background][data-color=blue][data-size=s] svg{
343
- width:var(--dimension-2m, 16px) !important;
344
- height:var(--dimension-2m, 16px) !important;
345
- }
346
- .link[data-on-surface=background][data-color=blue][data-size=m]{
347
- font-family:var(--link-body-m-font-family, SB Sans Interface);
348
- font-weight:var(--link-body-m-font-weight, Regular);
349
- line-height:var(--link-body-m-line-height, 20px);
350
- font-size:var(--link-body-m-font-size, 14px);
351
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
352
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
353
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
354
- text-decoration:var(--link-body-m-text-decoration, underline);
355
- height:var(--size-link-m, 20px);
356
- gap:var(--dimension-theme-general-0px, 0px);
357
- }
358
- .link[data-on-surface=background][data-color=blue][data-size=m] svg{
359
- width:var(--dimension-3m, 24px) !important;
360
- height:var(--dimension-3m, 24px) !important;
361
- }
362
- .link[data-on-surface=background][data-color=blue][data-size=l]{
363
- font-family:var(--link-body-l-font-family, SB Sans Interface);
364
- font-weight:var(--link-body-l-font-weight, Regular);
365
- line-height:var(--link-body-l-line-height, 24px);
366
- font-size:var(--link-body-l-font-size, 16px);
367
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
368
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
369
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
370
- text-decoration:var(--link-body-l-text-decoration, underline);
371
- height:var(--size-link-l, 24px);
372
- gap:var(--dimension-theme-general-0px, 0px);
373
- }
374
- .link[data-on-surface=background][data-color=blue][data-size=l] svg{
375
- width:var(--dimension-3m, 24px) !important;
376
- height:var(--dimension-3m, 24px) !important;
377
- }
378
- .link[data-on-surface=background][data-color=violet]{
379
- color:var(--sys-violet-accent-default, #bc52bf);
380
- }
381
- .link[data-on-surface=background][data-color=violet]:hover{
382
- color:var(--sys-violet-text-main, #51255f);
383
- }
384
- .link[data-on-surface=background][data-color=violet]:focus-visible{
385
- outline-width:var(--border-state-focus-s-border-width, 2px);
386
- outline-style:var(--border-state-focus-s-border-style, solid);
387
- outline-color:var(--border-state-focus-s-border-color, );
388
- color:var(--sys-violet-text-main, #51255f);
389
- outline-color:var(--sys-available-complementary, #131313);
390
- }
391
- .link[data-on-surface=background][data-color=violet][data-size=s]{
392
- font-family:var(--link-body-s-font-family, SB Sans Interface);
393
- font-weight:var(--link-body-s-font-weight, Regular);
394
- line-height:var(--link-body-s-line-height, 16px);
395
- font-size:var(--link-body-s-font-size, 12px);
396
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
397
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
398
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
399
- text-decoration:var(--link-body-s-text-decoration, underline);
400
- height:var(--size-link-s, 16px);
401
- gap:var(--dimension-theme-general-0px, 0px);
402
- }
403
- .link[data-on-surface=background][data-color=violet][data-size=s] svg{
404
- width:var(--dimension-2m, 16px) !important;
405
- height:var(--dimension-2m, 16px) !important;
406
- }
407
- .link[data-on-surface=background][data-color=violet][data-size=m]{
408
- font-family:var(--link-body-m-font-family, SB Sans Interface);
409
- font-weight:var(--link-body-m-font-weight, Regular);
410
- line-height:var(--link-body-m-line-height, 20px);
411
- font-size:var(--link-body-m-font-size, 14px);
412
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
413
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
414
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
415
- text-decoration:var(--link-body-m-text-decoration, underline);
416
- height:var(--size-link-m, 20px);
417
- gap:var(--dimension-theme-general-0px, 0px);
418
- }
419
- .link[data-on-surface=background][data-color=violet][data-size=m] svg{
420
- width:var(--dimension-3m, 24px) !important;
421
- height:var(--dimension-3m, 24px) !important;
422
- }
423
- .link[data-on-surface=background][data-color=violet][data-size=l]{
424
- font-family:var(--link-body-l-font-family, SB Sans Interface);
425
- font-weight:var(--link-body-l-font-weight, Regular);
426
- line-height:var(--link-body-l-line-height, 24px);
427
- font-size:var(--link-body-l-font-size, 16px);
428
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
429
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
430
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
431
- text-decoration:var(--link-body-l-text-decoration, underline);
432
- height:var(--size-link-l, 24px);
433
- gap:var(--dimension-theme-general-0px, 0px);
434
- }
435
- .link[data-on-surface=background][data-color=violet][data-size=l] svg{
436
- width:var(--dimension-3m, 24px) !important;
437
- height:var(--dimension-3m, 24px) !important;
438
- }
439
- .link[data-on-surface=background][data-color=pink]{
440
- color:var(--sys-pink-accent-default, #e14487);
441
- }
442
- .link[data-on-surface=background][data-color=pink]:hover{
443
- color:var(--sys-pink-text-main, #5e1937);
444
- }
445
- .link[data-on-surface=background][data-color=pink]:focus-visible{
446
- outline-width:var(--border-state-focus-s-border-width, 2px);
447
- outline-style:var(--border-state-focus-s-border-style, solid);
448
- outline-color:var(--border-state-focus-s-border-color, );
449
- color:var(--sys-pink-text-main, #5e1937);
450
- outline-color:var(--sys-available-complementary, #131313);
451
- }
452
- .link[data-on-surface=background][data-color=pink][data-size=s]{
453
- font-family:var(--link-body-s-font-family, SB Sans Interface);
454
- font-weight:var(--link-body-s-font-weight, Regular);
455
- line-height:var(--link-body-s-line-height, 16px);
456
- font-size:var(--link-body-s-font-size, 12px);
457
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
458
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
459
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
460
- text-decoration:var(--link-body-s-text-decoration, underline);
461
- height:var(--size-link-s, 16px);
462
- gap:var(--dimension-theme-general-0px, 0px);
463
- }
464
- .link[data-on-surface=background][data-color=pink][data-size=s] svg{
465
- width:var(--dimension-2m, 16px) !important;
466
- height:var(--dimension-2m, 16px) !important;
467
- }
468
- .link[data-on-surface=background][data-color=pink][data-size=m]{
469
- font-family:var(--link-body-m-font-family, SB Sans Interface);
470
- font-weight:var(--link-body-m-font-weight, Regular);
471
- line-height:var(--link-body-m-line-height, 20px);
472
- font-size:var(--link-body-m-font-size, 14px);
473
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
474
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
475
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
476
- text-decoration:var(--link-body-m-text-decoration, underline);
477
- height:var(--size-link-m, 20px);
478
- gap:var(--dimension-theme-general-0px, 0px);
479
- }
480
- .link[data-on-surface=background][data-color=pink][data-size=m] svg{
481
- width:var(--dimension-3m, 24px) !important;
482
- height:var(--dimension-3m, 24px) !important;
483
- }
484
- .link[data-on-surface=background][data-color=pink][data-size=l]{
485
- font-family:var(--link-body-l-font-family, SB Sans Interface);
486
- font-weight:var(--link-body-l-font-weight, Regular);
487
- line-height:var(--link-body-l-line-height, 24px);
488
- font-size:var(--link-body-l-font-size, 16px);
489
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
490
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
491
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
492
- text-decoration:var(--link-body-l-text-decoration, underline);
493
- height:var(--size-link-l, 24px);
494
- gap:var(--dimension-theme-general-0px, 0px);
495
- }
496
- .link[data-on-surface=background][data-color=pink][data-size=l] svg{
497
- width:var(--dimension-3m, 24px) !important;
498
- height:var(--dimension-3m, 24px) !important;
499
- }
500
- .link[data-on-surface=background][data-color=yellow]{
501
- color:var(--sys-yellow-accent-default, #feb528);
502
- }
503
- .link[data-on-surface=background][data-color=yellow]:hover{
504
- color:var(--sys-yellow-text-main, #54290f);
505
- }
506
- .link[data-on-surface=background][data-color=yellow]:focus-visible{
507
- outline-width:var(--border-state-focus-s-border-width, 2px);
508
- outline-style:var(--border-state-focus-s-border-style, solid);
509
- outline-color:var(--border-state-focus-s-border-color, );
510
- color:var(--sys-yellow-text-main, #54290f);
511
- outline-color:var(--sys-available-complementary, #131313);
512
- }
513
- .link[data-on-surface=background][data-color=yellow][data-size=s]{
514
- font-family:var(--link-body-s-font-family, SB Sans Interface);
515
- font-weight:var(--link-body-s-font-weight, Regular);
516
- line-height:var(--link-body-s-line-height, 16px);
517
- font-size:var(--link-body-s-font-size, 12px);
518
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
519
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
520
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
521
- text-decoration:var(--link-body-s-text-decoration, underline);
522
- height:var(--size-link-s, 16px);
523
- gap:var(--dimension-theme-general-0px, 0px);
524
- }
525
- .link[data-on-surface=background][data-color=yellow][data-size=s] svg{
526
- width:var(--dimension-2m, 16px) !important;
527
- height:var(--dimension-2m, 16px) !important;
528
- }
529
- .link[data-on-surface=background][data-color=yellow][data-size=m]{
530
- font-family:var(--link-body-m-font-family, SB Sans Interface);
531
- font-weight:var(--link-body-m-font-weight, Regular);
532
- line-height:var(--link-body-m-line-height, 20px);
533
- font-size:var(--link-body-m-font-size, 14px);
534
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
535
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
536
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
537
- text-decoration:var(--link-body-m-text-decoration, underline);
538
- height:var(--size-link-m, 20px);
539
- gap:var(--dimension-theme-general-0px, 0px);
540
- }
541
- .link[data-on-surface=background][data-color=yellow][data-size=m] svg{
542
- width:var(--dimension-3m, 24px) !important;
543
- height:var(--dimension-3m, 24px) !important;
544
- }
545
- .link[data-on-surface=background][data-color=yellow][data-size=l]{
546
- font-family:var(--link-body-l-font-family, SB Sans Interface);
547
- font-weight:var(--link-body-l-font-weight, Regular);
548
- line-height:var(--link-body-l-line-height, 24px);
549
- font-size:var(--link-body-l-font-size, 16px);
550
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
551
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
552
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
553
- text-decoration:var(--link-body-l-text-decoration, underline);
554
- height:var(--size-link-l, 24px);
555
- gap:var(--dimension-theme-general-0px, 0px);
556
- }
557
- .link[data-on-surface=background][data-color=yellow][data-size=l] svg{
558
- width:var(--dimension-3m, 24px) !important;
559
- height:var(--dimension-3m, 24px) !important;
560
- }
561
- .link[data-on-surface=background][data-color=green]{
562
- color:var(--sys-green-accent-default, #0bbe8f);
563
- }
564
- .link[data-on-surface=background][data-color=green]:hover{
565
- color:var(--sys-green-text-main, #1f392a);
566
- }
567
- .link[data-on-surface=background][data-color=green]:focus-visible{
568
- outline-width:var(--border-state-focus-s-border-width, 2px);
569
- outline-style:var(--border-state-focus-s-border-style, solid);
570
- outline-color:var(--border-state-focus-s-border-color, );
571
- color:var(--sys-green-text-main, #1f392a);
572
- outline-color:var(--sys-available-complementary, #131313);
573
- }
574
- .link[data-on-surface=background][data-color=green][data-size=s]{
575
- font-family:var(--link-body-s-font-family, SB Sans Interface);
576
- font-weight:var(--link-body-s-font-weight, Regular);
577
- line-height:var(--link-body-s-line-height, 16px);
578
- font-size:var(--link-body-s-font-size, 12px);
579
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
580
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
581
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
582
- text-decoration:var(--link-body-s-text-decoration, underline);
583
- height:var(--size-link-s, 16px);
584
- gap:var(--dimension-theme-general-0px, 0px);
585
- }
586
- .link[data-on-surface=background][data-color=green][data-size=s] svg{
587
- width:var(--dimension-2m, 16px) !important;
588
- height:var(--dimension-2m, 16px) !important;
589
- }
590
- .link[data-on-surface=background][data-color=green][data-size=m]{
591
- font-family:var(--link-body-m-font-family, SB Sans Interface);
592
- font-weight:var(--link-body-m-font-weight, Regular);
593
- line-height:var(--link-body-m-line-height, 20px);
594
- font-size:var(--link-body-m-font-size, 14px);
595
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
596
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
597
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
598
- text-decoration:var(--link-body-m-text-decoration, underline);
599
- height:var(--size-link-m, 20px);
600
- gap:var(--dimension-theme-general-0px, 0px);
601
- }
602
- .link[data-on-surface=background][data-color=green][data-size=m] svg{
603
- width:var(--dimension-3m, 24px) !important;
604
- height:var(--dimension-3m, 24px) !important;
605
- }
606
- .link[data-on-surface=background][data-color=green][data-size=l]{
607
- font-family:var(--link-body-l-font-family, SB Sans Interface);
608
- font-weight:var(--link-body-l-font-weight, Regular);
609
- line-height:var(--link-body-l-line-height, 24px);
610
- font-size:var(--link-body-l-font-size, 16px);
611
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
612
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
613
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
614
- text-decoration:var(--link-body-l-text-decoration, underline);
615
- height:var(--size-link-l, 24px);
616
- gap:var(--dimension-theme-general-0px, 0px);
617
- }
618
- .link[data-on-surface=background][data-color=green][data-size=l] svg{
619
- width:var(--dimension-3m, 24px) !important;
620
- height:var(--dimension-3m, 24px) !important;
621
- }
622
- .link[data-on-surface=decor][data-color=invert-neutral]{
623
- color:var(--sys-invert-neutral-accent-default, #d2d2d2);
624
- }
625
- .link[data-on-surface=decor][data-color=invert-neutral]:hover{
626
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
627
- }
628
- .link[data-on-surface=decor][data-color=invert-neutral]:focus-visible{
629
- outline-width:var(--border-state-focus-s-border-width, 2px);
630
- outline-style:var(--border-state-focus-s-border-style, solid);
631
- outline-color:var(--border-state-focus-s-border-color, );
632
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
633
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
634
- }
635
- .link[data-on-surface=decor][data-color=invert-neutral][data-size=s]{
636
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
637
- font-weight:var(--sans-body-s-font-weight, Regular);
638
- line-height:var(--sans-body-s-line-height, 16px);
639
- font-size:var(--sans-body-s-font-size, 12px);
640
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
641
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
642
- height:var(--size-link-s, 16px);
643
- gap:var(--dimension-theme-general-0px, 0px);
644
- }
645
- .link[data-on-surface=decor][data-color=invert-neutral][data-size=s] svg{
646
- width:var(--dimension-2m, 16px) !important;
647
- height:var(--dimension-2m, 16px) !important;
648
- }
649
- .link[data-on-surface=decor][data-color=invert-neutral][data-size=m]{
650
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
651
- font-weight:var(--sans-body-m-font-weight, Regular);
652
- line-height:var(--sans-body-m-line-height, 20px);
653
- font-size:var(--sans-body-m-font-size, 14px);
654
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
655
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
656
- height:var(--size-link-m, 20px);
657
- gap:var(--dimension-theme-general-0px, 0px);
658
- }
659
- .link[data-on-surface=decor][data-color=invert-neutral][data-size=m] svg{
660
- width:var(--dimension-3m, 24px) !important;
661
- height:var(--dimension-3m, 24px) !important;
662
- }
663
- .link[data-on-surface=decor][data-color=invert-neutral][data-size=l]{
664
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
665
- font-weight:var(--sans-body-l-font-weight, Regular);
666
- line-height:var(--sans-body-l-line-height, 24px);
667
- font-size:var(--sans-body-l-font-size, 16px);
668
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
669
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
670
- height:var(--size-link-l, 24px);
671
- gap:var(--dimension-theme-general-0px, 0px);
672
- }
673
- .link[data-on-surface=decor][data-color=invert-neutral][data-size=l] svg{
674
- width:var(--dimension-3m, 24px) !important;
675
- height:var(--dimension-3m, 24px) !important;
676
- }
677
- .link[data-on-surface=decor][data-color=neutral]{
678
- color:var(--sys-neutral-accent-default, #757575);
679
- }
680
- .link[data-on-surface=decor][data-color=neutral]:hover{
681
- color:var(--sys-neutral-text-main, #333333);
682
- }
683
- .link[data-on-surface=decor][data-color=neutral]:focus-visible{
684
- outline-width:var(--border-state-focus-s-border-width, 2px);
685
- outline-style:var(--border-state-focus-s-border-style, solid);
686
- outline-color:var(--border-state-focus-s-border-color, );
687
- color:var(--sys-neutral-text-main, #333333);
688
- outline-color:var(--sys-available-complementary, #131313);
689
- }
690
- .link[data-on-surface=decor][data-color=neutral][data-size=s]{
691
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
692
- font-weight:var(--sans-body-s-font-weight, Regular);
693
- line-height:var(--sans-body-s-line-height, 16px);
694
- font-size:var(--sans-body-s-font-size, 12px);
695
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
696
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
697
- height:var(--size-link-s, 16px);
698
- gap:var(--dimension-theme-general-0px, 0px);
699
- }
700
- .link[data-on-surface=decor][data-color=neutral][data-size=s] svg{
701
- width:var(--dimension-2m, 16px) !important;
702
- height:var(--dimension-2m, 16px) !important;
703
- }
704
- .link[data-on-surface=decor][data-color=neutral][data-size=m]{
705
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
706
- font-weight:var(--sans-body-m-font-weight, Regular);
707
- line-height:var(--sans-body-m-line-height, 20px);
708
- font-size:var(--sans-body-m-font-size, 14px);
709
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
710
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
711
- height:var(--size-link-m, 20px);
712
- gap:var(--dimension-theme-general-0px, 0px);
713
- }
714
- .link[data-on-surface=decor][data-color=neutral][data-size=m] svg{
715
- width:var(--dimension-3m, 24px) !important;
716
- height:var(--dimension-3m, 24px) !important;
717
- }
718
- .link[data-on-surface=decor][data-color=neutral][data-size=l]{
719
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
720
- font-weight:var(--sans-body-l-font-weight, Regular);
721
- line-height:var(--sans-body-l-line-height, 24px);
722
- font-size:var(--sans-body-l-font-size, 16px);
723
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
724
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
725
- height:var(--size-link-l, 24px);
726
- gap:var(--dimension-theme-general-0px, 0px);
727
- }
728
- .link[data-on-surface=decor][data-color=neutral][data-size=l] svg{
729
- width:var(--dimension-3m, 24px) !important;
730
- height:var(--dimension-3m, 24px) !important;
731
- }
732
- .link[data-on-surface=decor][data-color=primary]{
733
- color:var(--sys-primary-accent-default, #794ed3);
734
- }
735
- .link[data-on-surface=decor][data-color=primary]:hover{
736
- color:var(--sys-primary-text-main, #382a62);
737
- }
738
- .link[data-on-surface=decor][data-color=primary]:focus-visible{
739
- outline-width:var(--border-state-focus-s-border-width, 2px);
740
- outline-style:var(--border-state-focus-s-border-style, solid);
741
- outline-color:var(--border-state-focus-s-border-color, );
742
- color:var(--sys-primary-text-main, #382a62);
743
- outline-color:var(--sys-available-complementary, #131313);
744
- }
745
- .link[data-on-surface=decor][data-color=primary][data-size=s]{
746
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
747
- font-weight:var(--sans-body-s-font-weight, Regular);
748
- line-height:var(--sans-body-s-line-height, 16px);
749
- font-size:var(--sans-body-s-font-size, 12px);
750
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
751
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
752
- height:var(--size-link-s, 16px);
753
- gap:var(--dimension-theme-general-0px, 0px);
754
- }
755
- .link[data-on-surface=decor][data-color=primary][data-size=s] svg{
756
- width:var(--dimension-2m, 16px) !important;
757
- height:var(--dimension-2m, 16px) !important;
758
- }
759
- .link[data-on-surface=decor][data-color=primary][data-size=m]{
760
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
761
- font-weight:var(--sans-body-m-font-weight, Regular);
762
- line-height:var(--sans-body-m-line-height, 20px);
763
- font-size:var(--sans-body-m-font-size, 14px);
764
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
765
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
766
- height:var(--size-link-m, 20px);
767
- gap:var(--dimension-theme-general-0px, 0px);
768
- }
769
- .link[data-on-surface=decor][data-color=primary][data-size=m] svg{
770
- width:var(--dimension-3m, 24px) !important;
771
- height:var(--dimension-3m, 24px) !important;
772
- }
773
- .link[data-on-surface=decor][data-color=primary][data-size=l]{
774
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
775
- font-weight:var(--sans-body-l-font-weight, Regular);
776
- line-height:var(--sans-body-l-line-height, 24px);
777
- font-size:var(--sans-body-l-font-size, 16px);
778
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
779
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
780
- height:var(--size-link-l, 24px);
781
- gap:var(--dimension-theme-general-0px, 0px);
782
- }
783
- .link[data-on-surface=decor][data-color=primary][data-size=l] svg{
784
- width:var(--dimension-3m, 24px) !important;
785
- height:var(--dimension-3m, 24px) !important;
786
- }
787
- .link[data-on-surface=decor][data-color=red]{
788
- color:var(--sys-red-accent-default, #d93f2f);
789
- }
790
- .link[data-on-surface=decor][data-color=red]:hover{
791
- color:var(--sys-red-text-main, #621c1e);
792
- }
793
- .link[data-on-surface=decor][data-color=red]:focus-visible{
794
- outline-width:var(--border-state-focus-s-border-width, 2px);
795
- outline-style:var(--border-state-focus-s-border-style, solid);
796
- outline-color:var(--border-state-focus-s-border-color, );
797
- color:var(--sys-red-text-main, #621c1e);
798
- outline-color:var(--sys-available-complementary, #131313);
799
- }
800
- .link[data-on-surface=decor][data-color=red][data-size=s]{
801
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
802
- font-weight:var(--sans-body-s-font-weight, Regular);
803
- line-height:var(--sans-body-s-line-height, 16px);
804
- font-size:var(--sans-body-s-font-size, 12px);
805
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
806
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
807
- height:var(--size-link-s, 16px);
808
- gap:var(--dimension-theme-general-0px, 0px);
809
- }
810
- .link[data-on-surface=decor][data-color=red][data-size=s] svg{
811
- width:var(--dimension-2m, 16px) !important;
812
- height:var(--dimension-2m, 16px) !important;
813
- }
814
- .link[data-on-surface=decor][data-color=red][data-size=m]{
815
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
816
- font-weight:var(--sans-body-m-font-weight, Regular);
817
- line-height:var(--sans-body-m-line-height, 20px);
818
- font-size:var(--sans-body-m-font-size, 14px);
819
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
820
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
821
- height:var(--size-link-m, 20px);
822
- gap:var(--dimension-theme-general-0px, 0px);
823
- }
824
- .link[data-on-surface=decor][data-color=red][data-size=m] svg{
825
- width:var(--dimension-3m, 24px) !important;
826
- height:var(--dimension-3m, 24px) !important;
827
- }
828
- .link[data-on-surface=decor][data-color=red][data-size=l]{
829
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
830
- font-weight:var(--sans-body-l-font-weight, Regular);
831
- line-height:var(--sans-body-l-line-height, 24px);
832
- font-size:var(--sans-body-l-font-size, 16px);
833
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
834
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
835
- height:var(--size-link-l, 24px);
836
- gap:var(--dimension-theme-general-0px, 0px);
837
- }
838
- .link[data-on-surface=decor][data-color=red][data-size=l] svg{
839
- width:var(--dimension-3m, 24px) !important;
840
- height:var(--dimension-3m, 24px) !important;
841
- }
842
- .link[data-on-surface=decor][data-color=orange]{
843
- color:var(--sys-orange-accent-default, #fd8f1a);
844
- }
845
- .link[data-on-surface=decor][data-color=orange]:hover{
846
- color:var(--sys-orange-text-main, #572212);
847
- }
848
- .link[data-on-surface=decor][data-color=orange]:focus-visible{
849
- outline-width:var(--border-state-focus-s-border-width, 2px);
850
- outline-style:var(--border-state-focus-s-border-style, solid);
851
- outline-color:var(--border-state-focus-s-border-color, );
852
- color:var(--sys-orange-text-main, #572212);
853
- outline-color:var(--sys-available-complementary, #131313);
854
- }
855
- .link[data-on-surface=decor][data-color=orange][data-size=s]{
856
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
857
- font-weight:var(--sans-body-s-font-weight, Regular);
858
- line-height:var(--sans-body-s-line-height, 16px);
859
- font-size:var(--sans-body-s-font-size, 12px);
860
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
861
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
862
- height:var(--size-link-s, 16px);
863
- gap:var(--dimension-theme-general-0px, 0px);
864
- }
865
- .link[data-on-surface=decor][data-color=orange][data-size=s] svg{
866
- width:var(--dimension-2m, 16px) !important;
867
- height:var(--dimension-2m, 16px) !important;
868
- }
869
- .link[data-on-surface=decor][data-color=orange][data-size=m]{
870
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
871
- font-weight:var(--sans-body-m-font-weight, Regular);
872
- line-height:var(--sans-body-m-line-height, 20px);
873
- font-size:var(--sans-body-m-font-size, 14px);
874
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
875
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
876
- height:var(--size-link-m, 20px);
877
- gap:var(--dimension-theme-general-0px, 0px);
878
- }
879
- .link[data-on-surface=decor][data-color=orange][data-size=m] svg{
880
- width:var(--dimension-3m, 24px) !important;
881
- height:var(--dimension-3m, 24px) !important;
882
- }
883
- .link[data-on-surface=decor][data-color=orange][data-size=l]{
884
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
885
- font-weight:var(--sans-body-l-font-weight, Regular);
886
- line-height:var(--sans-body-l-line-height, 24px);
887
- font-size:var(--sans-body-l-font-size, 16px);
888
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
889
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
890
- height:var(--size-link-l, 24px);
891
- gap:var(--dimension-theme-general-0px, 0px);
892
- }
893
- .link[data-on-surface=decor][data-color=orange][data-size=l] svg{
894
- width:var(--dimension-3m, 24px) !important;
895
- height:var(--dimension-3m, 24px) !important;
896
- }
897
- .link[data-on-surface=decor][data-color=blue]{
898
- color:var(--sys-blue-accent-default, #3280e8);
899
- }
900
- .link[data-on-surface=decor][data-color=blue]:hover{
901
- color:var(--sys-blue-text-main, #1f3361);
902
- }
903
- .link[data-on-surface=decor][data-color=blue]:focus-visible{
904
- outline-width:var(--border-state-focus-s-border-width, 2px);
905
- outline-style:var(--border-state-focus-s-border-style, solid);
906
- outline-color:var(--border-state-focus-s-border-color, );
907
- color:var(--sys-blue-text-main, #1f3361);
908
- outline-color:var(--sys-available-complementary, #131313);
909
- }
910
- .link[data-on-surface=decor][data-color=blue][data-size=s]{
911
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
912
- font-weight:var(--sans-body-s-font-weight, Regular);
913
- line-height:var(--sans-body-s-line-height, 16px);
914
- font-size:var(--sans-body-s-font-size, 12px);
915
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
916
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
917
- height:var(--size-link-s, 16px);
918
- gap:var(--dimension-theme-general-0px, 0px);
919
- }
920
- .link[data-on-surface=decor][data-color=blue][data-size=s] svg{
921
- width:var(--dimension-2m, 16px) !important;
922
- height:var(--dimension-2m, 16px) !important;
923
- }
924
- .link[data-on-surface=decor][data-color=blue][data-size=m]{
925
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
926
- font-weight:var(--sans-body-m-font-weight, Regular);
927
- line-height:var(--sans-body-m-line-height, 20px);
928
- font-size:var(--sans-body-m-font-size, 14px);
929
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
930
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
931
- height:var(--size-link-m, 20px);
932
- gap:var(--dimension-theme-general-0px, 0px);
933
- }
934
- .link[data-on-surface=decor][data-color=blue][data-size=m] svg{
935
- width:var(--dimension-3m, 24px) !important;
936
- height:var(--dimension-3m, 24px) !important;
937
- }
938
- .link[data-on-surface=decor][data-color=blue][data-size=l]{
939
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
940
- font-weight:var(--sans-body-l-font-weight, Regular);
941
- line-height:var(--sans-body-l-line-height, 24px);
942
- font-size:var(--sans-body-l-font-size, 16px);
943
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
944
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
945
- height:var(--size-link-l, 24px);
946
- gap:var(--dimension-theme-general-0px, 0px);
947
- }
948
- .link[data-on-surface=decor][data-color=blue][data-size=l] svg{
949
- width:var(--dimension-3m, 24px) !important;
950
- height:var(--dimension-3m, 24px) !important;
951
- }
952
- .link[data-on-surface=decor][data-color=violet]{
953
- color:var(--sys-violet-accent-default, #bc52bf);
954
- }
955
- .link[data-on-surface=decor][data-color=violet]:hover{
956
- color:var(--sys-violet-text-main, #51255f);
957
- }
958
- .link[data-on-surface=decor][data-color=violet]:focus-visible{
959
- outline-width:var(--border-state-focus-s-border-width, 2px);
960
- outline-style:var(--border-state-focus-s-border-style, solid);
961
- outline-color:var(--border-state-focus-s-border-color, );
962
- color:var(--sys-violet-text-main, #51255f);
963
- outline-color:var(--sys-available-complementary, #131313);
964
- }
965
- .link[data-on-surface=decor][data-color=violet][data-size=s]{
966
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
967
- font-weight:var(--sans-body-s-font-weight, Regular);
968
- line-height:var(--sans-body-s-line-height, 16px);
969
- font-size:var(--sans-body-s-font-size, 12px);
970
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
971
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
972
- height:var(--size-link-s, 16px);
973
- gap:var(--dimension-theme-general-0px, 0px);
974
- }
975
- .link[data-on-surface=decor][data-color=violet][data-size=s] svg{
976
- width:var(--dimension-2m, 16px) !important;
977
- height:var(--dimension-2m, 16px) !important;
978
- }
979
- .link[data-on-surface=decor][data-color=violet][data-size=m]{
980
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
981
- font-weight:var(--sans-body-m-font-weight, Regular);
982
- line-height:var(--sans-body-m-line-height, 20px);
983
- font-size:var(--sans-body-m-font-size, 14px);
984
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
985
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
986
- height:var(--size-link-m, 20px);
987
- gap:var(--dimension-theme-general-0px, 0px);
988
- }
989
- .link[data-on-surface=decor][data-color=violet][data-size=m] svg{
990
- width:var(--dimension-3m, 24px) !important;
991
- height:var(--dimension-3m, 24px) !important;
992
- }
993
- .link[data-on-surface=decor][data-color=violet][data-size=l]{
994
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
995
- font-weight:var(--sans-body-l-font-weight, Regular);
996
- line-height:var(--sans-body-l-line-height, 24px);
997
- font-size:var(--sans-body-l-font-size, 16px);
998
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
999
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
1000
- height:var(--size-link-l, 24px);
1001
- gap:var(--dimension-theme-general-0px, 0px);
1002
- }
1003
- .link[data-on-surface=decor][data-color=violet][data-size=l] svg{
1004
- width:var(--dimension-3m, 24px) !important;
1005
- height:var(--dimension-3m, 24px) !important;
1006
- }
1007
- .link[data-on-surface=decor][data-color=pink]{
1008
- color:var(--sys-pink-accent-default, #e14487);
1009
- }
1010
- .link[data-on-surface=decor][data-color=pink]:hover{
1011
- color:var(--sys-pink-text-main, #5e1937);
1012
- }
1013
- .link[data-on-surface=decor][data-color=pink]:focus-visible{
1014
- outline-width:var(--border-state-focus-s-border-width, 2px);
1015
- outline-style:var(--border-state-focus-s-border-style, solid);
1016
- outline-color:var(--border-state-focus-s-border-color, );
1017
- color:var(--sys-pink-text-main, #5e1937);
1018
- outline-color:var(--sys-available-complementary, #131313);
1019
- }
1020
- .link[data-on-surface=decor][data-color=pink][data-size=s]{
1021
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
1022
- font-weight:var(--sans-body-s-font-weight, Regular);
1023
- line-height:var(--sans-body-s-line-height, 16px);
1024
- font-size:var(--sans-body-s-font-size, 12px);
1025
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
1026
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
1027
- height:var(--size-link-s, 16px);
1028
- gap:var(--dimension-theme-general-0px, 0px);
1029
- }
1030
- .link[data-on-surface=decor][data-color=pink][data-size=s] svg{
1031
- width:var(--dimension-2m, 16px) !important;
1032
- height:var(--dimension-2m, 16px) !important;
1033
- }
1034
- .link[data-on-surface=decor][data-color=pink][data-size=m]{
1035
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
1036
- font-weight:var(--sans-body-m-font-weight, Regular);
1037
- line-height:var(--sans-body-m-line-height, 20px);
1038
- font-size:var(--sans-body-m-font-size, 14px);
1039
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
1040
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
1041
- height:var(--size-link-m, 20px);
1042
- gap:var(--dimension-theme-general-0px, 0px);
1043
- }
1044
- .link[data-on-surface=decor][data-color=pink][data-size=m] svg{
1045
- width:var(--dimension-3m, 24px) !important;
1046
- height:var(--dimension-3m, 24px) !important;
12
+ .link[data-appearance=invert-neutral][data-text-mode=default]{
13
+ color:var(--sys-invert-neutral-text-support, #b8b8b8);
1047
14
  }
1048
- .link[data-on-surface=decor][data-color=pink][data-size=l]{
1049
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
1050
- font-weight:var(--sans-body-l-font-weight, Regular);
1051
- line-height:var(--sans-body-l-line-height, 24px);
1052
- font-size:var(--sans-body-l-font-size, 16px);
1053
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
1054
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
1055
- height:var(--size-link-l, 24px);
1056
- gap:var(--dimension-theme-general-0px, 0px);
1057
- }
1058
- .link[data-on-surface=decor][data-color=pink][data-size=l] svg{
1059
- width:var(--dimension-3m, 24px) !important;
1060
- height:var(--dimension-3m, 24px) !important;
1061
- }
1062
- .link[data-on-surface=decor][data-color=yellow]{
1063
- color:var(--sys-yellow-accent-default, #feb528);
1064
- }
1065
- .link[data-on-surface=decor][data-color=yellow]:hover{
1066
- color:var(--sys-yellow-text-main, #54290f);
15
+ .link[data-appearance=invert-neutral][data-text-mode=default]:hover{
16
+ color:var(--sys-invert-neutral-text-main, #e7e7e7);
1067
17
  }
1068
- .link[data-on-surface=decor][data-color=yellow]:focus-visible{
18
+ .link[data-appearance=invert-neutral][data-text-mode=default]:focus-visible{
1069
19
  outline-width:var(--border-state-focus-s-border-width, 2px);
1070
20
  outline-style:var(--border-state-focus-s-border-style, solid);
1071
21
  outline-color:var(--border-state-focus-s-border-color, );
1072
- color:var(--sys-yellow-text-main, #54290f);
22
+ color:var(--sys-invert-neutral-text-main, #e7e7e7);
1073
23
  outline-color:var(--sys-available-complementary, #131313);
1074
24
  }
1075
- .link[data-on-surface=decor][data-color=yellow][data-size=s]{
1076
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
1077
- font-weight:var(--sans-body-s-font-weight, Regular);
1078
- line-height:var(--sans-body-s-line-height, 16px);
1079
- font-size:var(--sans-body-s-font-size, 12px);
1080
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
1081
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
1082
- height:var(--size-link-s, 16px);
1083
- gap:var(--dimension-theme-general-0px, 0px);
1084
- }
1085
- .link[data-on-surface=decor][data-color=yellow][data-size=s] svg{
1086
- width:var(--dimension-2m, 16px) !important;
1087
- height:var(--dimension-2m, 16px) !important;
1088
- }
1089
- .link[data-on-surface=decor][data-color=yellow][data-size=m]{
1090
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
1091
- font-weight:var(--sans-body-m-font-weight, Regular);
1092
- line-height:var(--sans-body-m-line-height, 20px);
1093
- font-size:var(--sans-body-m-font-size, 14px);
1094
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
1095
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
1096
- height:var(--size-link-m, 20px);
1097
- gap:var(--dimension-theme-general-0px, 0px);
1098
- }
1099
- .link[data-on-surface=decor][data-color=yellow][data-size=m] svg{
1100
- width:var(--dimension-3m, 24px) !important;
1101
- height:var(--dimension-3m, 24px) !important;
1102
- }
1103
- .link[data-on-surface=decor][data-color=yellow][data-size=l]{
1104
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
1105
- font-weight:var(--sans-body-l-font-weight, Regular);
1106
- line-height:var(--sans-body-l-line-height, 24px);
1107
- font-size:var(--sans-body-l-font-size, 16px);
1108
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
1109
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
1110
- height:var(--size-link-l, 24px);
1111
- gap:var(--dimension-theme-general-0px, 0px);
1112
- }
1113
- .link[data-on-surface=decor][data-color=yellow][data-size=l] svg{
1114
- width:var(--dimension-3m, 24px) !important;
1115
- height:var(--dimension-3m, 24px) !important;
1116
- }
1117
- .link[data-on-surface=decor][data-color=green]{
1118
- color:var(--sys-green-accent-default, #0bbe8f);
25
+ .link[data-appearance=invert-neutral][data-text-mode=accent]{
26
+ color:var(--sys-invert-neutral-accent-default, #d2d2d2);
1119
27
  }
1120
- .link[data-on-surface=decor][data-color=green]:hover{
1121
- color:var(--sys-green-text-main, #1f392a);
28
+ .link[data-appearance=invert-neutral][data-text-mode=accent]:hover{
29
+ color:var(--sys-invert-neutral-text-main, #e7e7e7);
1122
30
  }
1123
- .link[data-on-surface=decor][data-color=green]:focus-visible{
31
+ .link[data-appearance=invert-neutral][data-text-mode=accent]:focus-visible{
1124
32
  outline-width:var(--border-state-focus-s-border-width, 2px);
1125
33
  outline-style:var(--border-state-focus-s-border-style, solid);
1126
34
  outline-color:var(--border-state-focus-s-border-color, );
1127
- color:var(--sys-green-text-main, #1f392a);
1128
- outline-color:var(--sys-available-complementary, #131313);
1129
- }
1130
- .link[data-on-surface=decor][data-color=green][data-size=s]{
1131
- font-family:var(--sans-body-s-font-family, SB Sans Interface);
1132
- font-weight:var(--sans-body-s-font-weight, Regular);
1133
- line-height:var(--sans-body-s-line-height, 16px);
1134
- font-size:var(--sans-body-s-font-size, 12px);
1135
- letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
1136
- paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
1137
- height:var(--size-link-s, 16px);
1138
- gap:var(--dimension-theme-general-0px, 0px);
1139
- }
1140
- .link[data-on-surface=decor][data-color=green][data-size=s] svg{
1141
- width:var(--dimension-2m, 16px) !important;
1142
- height:var(--dimension-2m, 16px) !important;
1143
- }
1144
- .link[data-on-surface=decor][data-color=green][data-size=m]{
1145
- font-family:var(--sans-body-m-font-family, SB Sans Interface);
1146
- font-weight:var(--sans-body-m-font-weight, Regular);
1147
- line-height:var(--sans-body-m-line-height, 20px);
1148
- font-size:var(--sans-body-m-font-size, 14px);
1149
- letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
1150
- paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
1151
- height:var(--size-link-m, 20px);
1152
- gap:var(--dimension-theme-general-0px, 0px);
1153
- }
1154
- .link[data-on-surface=decor][data-color=green][data-size=m] svg{
1155
- width:var(--dimension-3m, 24px) !important;
1156
- height:var(--dimension-3m, 24px) !important;
1157
- }
1158
- .link[data-on-surface=decor][data-color=green][data-size=l]{
1159
- font-family:var(--sans-body-l-font-family, SB Sans Interface);
1160
- font-weight:var(--sans-body-l-font-weight, Regular);
1161
- line-height:var(--sans-body-l-line-height, 24px);
1162
- font-size:var(--sans-body-l-font-size, 16px);
1163
- letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
1164
- paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
1165
- height:var(--size-link-l, 24px);
1166
- gap:var(--dimension-theme-general-0px, 0px);
1167
- }
1168
- .link[data-on-surface=decor][data-color=green][data-size=l] svg{
1169
- width:var(--dimension-3m, 24px) !important;
1170
- height:var(--dimension-3m, 24px) !important;
35
+ color:var(--sys-invert-neutral-text-main, #e7e7e7);
36
+ outline-color:var(--sys-available-on-complementary, #fdfdfd);
1171
37
  }
1172
- .link[data-on-surface=accent][data-color=invert-neutral]{
38
+ .link[data-appearance=invert-neutral][data-text-mode=on-accent]{
1173
39
  color:var(--sys-invert-neutral-on-accent, #282828);
1174
40
  }
1175
- .link[data-on-surface=accent][data-color=invert-neutral]:hover{
41
+ .link[data-appearance=invert-neutral][data-text-mode=on-accent]:hover{
1176
42
  color:var(--sys-invert-neutral-on-accent, #282828);
1177
43
  opacity:var(--opacity-a080, 0.8);
1178
44
  }
1179
- .link[data-on-surface=accent][data-color=invert-neutral]:focus-visible{
45
+ .link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus-visible{
1180
46
  outline-width:var(--border-state-focus-s-border-width, 2px);
1181
47
  outline-style:var(--border-state-focus-s-border-style, solid);
1182
48
  outline-color:var(--border-state-focus-s-border-color, );
1183
- opacity:var(--opacity-a080, 0.8);
1184
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
1185
- }
1186
- .link[data-on-surface=accent][data-color=invert-neutral][data-size=s]{
1187
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1188
- font-weight:var(--link-body-s-font-weight, Regular);
1189
- line-height:var(--link-body-s-line-height, 16px);
1190
- font-size:var(--link-body-s-font-size, 12px);
1191
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1192
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1193
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1194
- text-decoration:var(--link-body-s-text-decoration, underline);
1195
- height:var(--size-link-s, 16px);
1196
- gap:var(--dimension-theme-general-0px, 0px);
49
+ color:var(--sys-invert-neutral-on-accent, #282828);
50
+ opacity:var(--opacity-a080, 0.8);
51
+ outline-color:var(--sys-available-on-complementary, #fdfdfd);
1197
52
  }
1198
- .link[data-on-surface=accent][data-color=invert-neutral][data-size=s] svg{
1199
- width:var(--dimension-2m, 16px) !important;
1200
- height:var(--dimension-2m, 16px) !important;
53
+ .link[data-appearance=neutral][data-text-mode=default]{
54
+ color:var(--sys-neutral-text-support, #565656);
1201
55
  }
1202
- .link[data-on-surface=accent][data-color=invert-neutral][data-size=m]{
1203
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1204
- font-weight:var(--link-body-m-font-weight, Regular);
1205
- line-height:var(--link-body-m-line-height, 20px);
1206
- font-size:var(--link-body-m-font-size, 14px);
1207
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1208
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1209
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1210
- text-decoration:var(--link-body-m-text-decoration, underline);
1211
- height:var(--size-link-m, 20px);
1212
- gap:var(--dimension-theme-general-0px, 0px);
56
+ .link[data-appearance=neutral][data-text-mode=default]:hover{
57
+ color:var(--sys-neutral-text-main, #333333);
1213
58
  }
1214
- .link[data-on-surface=accent][data-color=invert-neutral][data-size=m] svg{
1215
- width:var(--dimension-3m, 24px) !important;
1216
- height:var(--dimension-3m, 24px) !important;
59
+ .link[data-appearance=neutral][data-text-mode=default]:focus-visible{
60
+ outline-width:var(--border-state-focus-s-border-width, 2px);
61
+ outline-style:var(--border-state-focus-s-border-style, solid);
62
+ outline-color:var(--border-state-focus-s-border-color, );
63
+ color:var(--sys-neutral-text-main, #333333);
64
+ outline-color:var(--sys-available-complementary, #131313);
1217
65
  }
1218
- .link[data-on-surface=accent][data-color=invert-neutral][data-size=l]{
1219
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1220
- font-weight:var(--link-body-l-font-weight, Regular);
1221
- line-height:var(--link-body-l-line-height, 24px);
1222
- font-size:var(--link-body-l-font-size, 16px);
1223
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1224
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1225
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1226
- text-decoration:var(--link-body-l-text-decoration, underline);
1227
- height:var(--size-link-l, 24px);
1228
- gap:var(--dimension-theme-general-0px, 0px);
66
+ .link[data-appearance=neutral][data-text-mode=accent]{
67
+ color:var(--sys-neutral-accent-default, #757575);
1229
68
  }
1230
- .link[data-on-surface=accent][data-color=invert-neutral][data-size=l] svg{
1231
- width:var(--dimension-3m, 24px) !important;
1232
- height:var(--dimension-3m, 24px) !important;
69
+ .link[data-appearance=neutral][data-text-mode=accent]:hover{
70
+ color:var(--sys-neutral-text-main, #333333);
71
+ }
72
+ .link[data-appearance=neutral][data-text-mode=accent]:focus-visible{
73
+ outline-width:var(--border-state-focus-s-border-width, 2px);
74
+ outline-style:var(--border-state-focus-s-border-style, solid);
75
+ outline-color:var(--border-state-focus-s-border-color, );
76
+ color:var(--sys-neutral-text-main, #333333);
77
+ outline-color:var(--sys-available-complementary, #131313);
1233
78
  }
1234
- .link[data-on-surface=accent][data-color=neutral]{
79
+ .link[data-appearance=neutral][data-text-mode=on-accent]{
1235
80
  color:var(--sys-neutral-on-accent, #fdfdfd);
1236
81
  }
1237
- .link[data-on-surface=accent][data-color=neutral]:hover{
82
+ .link[data-appearance=neutral][data-text-mode=on-accent]:hover{
1238
83
  color:var(--sys-neutral-on-accent, #fdfdfd);
1239
84
  opacity:var(--opacity-a080, 0.8);
1240
85
  }
1241
- .link[data-on-surface=accent][data-color=neutral]:focus-visible{
86
+ .link[data-appearance=neutral][data-text-mode=on-accent]:focus-visible{
1242
87
  outline-width:var(--border-state-focus-s-border-width, 2px);
1243
88
  outline-style:var(--border-state-focus-s-border-style, solid);
1244
89
  outline-color:var(--border-state-focus-s-border-color, );
90
+ color:var(--sys-neutral-on-accent, #fdfdfd);
1245
91
  opacity:var(--opacity-a080, 0.8);
1246
92
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1247
93
  }
1248
- .link[data-on-surface=accent][data-color=neutral][data-size=s]{
1249
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1250
- font-weight:var(--link-body-s-font-weight, Regular);
1251
- line-height:var(--link-body-s-line-height, 16px);
1252
- font-size:var(--link-body-s-font-size, 12px);
1253
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1254
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1255
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1256
- text-decoration:var(--link-body-s-text-decoration, underline);
1257
- height:var(--size-link-s, 16px);
1258
- gap:var(--dimension-theme-general-0px, 0px);
94
+ .link[data-appearance=primary][data-text-mode=default]{
95
+ color:var(--sys-primary-text-support, #5b4796);
1259
96
  }
1260
- .link[data-on-surface=accent][data-color=neutral][data-size=s] svg{
1261
- width:var(--dimension-2m, 16px) !important;
1262
- height:var(--dimension-2m, 16px) !important;
97
+ .link[data-appearance=primary][data-text-mode=default]:hover{
98
+ color:var(--sys-primary-text-main, #382a62);
1263
99
  }
1264
- .link[data-on-surface=accent][data-color=neutral][data-size=m]{
1265
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1266
- font-weight:var(--link-body-m-font-weight, Regular);
1267
- line-height:var(--link-body-m-line-height, 20px);
1268
- font-size:var(--link-body-m-font-size, 14px);
1269
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1270
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1271
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1272
- text-decoration:var(--link-body-m-text-decoration, underline);
1273
- height:var(--size-link-m, 20px);
1274
- gap:var(--dimension-theme-general-0px, 0px);
100
+ .link[data-appearance=primary][data-text-mode=default]:focus-visible{
101
+ outline-width:var(--border-state-focus-s-border-width, 2px);
102
+ outline-style:var(--border-state-focus-s-border-style, solid);
103
+ outline-color:var(--border-state-focus-s-border-color, );
104
+ color:var(--sys-primary-text-main, #382a62);
105
+ outline-color:var(--sys-available-complementary, #131313);
1275
106
  }
1276
- .link[data-on-surface=accent][data-color=neutral][data-size=m] svg{
1277
- width:var(--dimension-3m, 24px) !important;
1278
- height:var(--dimension-3m, 24px) !important;
107
+ .link[data-appearance=primary][data-text-mode=accent]{
108
+ color:var(--sys-primary-accent-default, #794ed3);
1279
109
  }
1280
- .link[data-on-surface=accent][data-color=neutral][data-size=l]{
1281
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1282
- font-weight:var(--link-body-l-font-weight, Regular);
1283
- line-height:var(--link-body-l-line-height, 24px);
1284
- font-size:var(--link-body-l-font-size, 16px);
1285
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1286
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1287
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1288
- text-decoration:var(--link-body-l-text-decoration, underline);
1289
- height:var(--size-link-l, 24px);
1290
- gap:var(--dimension-theme-general-0px, 0px);
110
+ .link[data-appearance=primary][data-text-mode=accent]:hover{
111
+ color:var(--sys-primary-text-main, #382a62);
1291
112
  }
1292
- .link[data-on-surface=accent][data-color=neutral][data-size=l] svg{
1293
- width:var(--dimension-3m, 24px) !important;
1294
- height:var(--dimension-3m, 24px) !important;
113
+ .link[data-appearance=primary][data-text-mode=accent]:focus-visible{
114
+ outline-width:var(--border-state-focus-s-border-width, 2px);
115
+ outline-style:var(--border-state-focus-s-border-style, solid);
116
+ outline-color:var(--border-state-focus-s-border-color, );
117
+ color:var(--sys-primary-text-main, #382a62);
118
+ outline-color:var(--sys-available-complementary, #131313);
1295
119
  }
1296
- .link[data-on-surface=accent][data-color=primary]{
120
+ .link[data-appearance=primary][data-text-mode=on-accent]{
1297
121
  color:var(--sys-primary-on-accent, #fdfbff);
1298
122
  }
1299
- .link[data-on-surface=accent][data-color=primary]:hover{
123
+ .link[data-appearance=primary][data-text-mode=on-accent]:hover{
1300
124
  color:var(--sys-primary-on-accent, #fdfbff);
1301
125
  opacity:var(--opacity-a080, 0.8);
1302
126
  }
1303
- .link[data-on-surface=accent][data-color=primary]:focus-visible{
127
+ .link[data-appearance=primary][data-text-mode=on-accent]:focus-visible{
1304
128
  outline-width:var(--border-state-focus-s-border-width, 2px);
1305
129
  outline-style:var(--border-state-focus-s-border-style, solid);
1306
130
  outline-color:var(--border-state-focus-s-border-color, );
131
+ color:var(--sys-primary-on-accent, #fdfbff);
1307
132
  opacity:var(--opacity-a080, 0.8);
1308
133
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1309
134
  }
1310
- .link[data-on-surface=accent][data-color=primary][data-size=s]{
1311
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1312
- font-weight:var(--link-body-s-font-weight, Regular);
1313
- line-height:var(--link-body-s-line-height, 16px);
1314
- font-size:var(--link-body-s-font-size, 12px);
1315
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1316
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1317
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1318
- text-decoration:var(--link-body-s-text-decoration, underline);
1319
- height:var(--size-link-s, 16px);
1320
- gap:var(--dimension-theme-general-0px, 0px);
135
+ .link[data-appearance=red][data-text-mode=default]{
136
+ color:var(--sys-red-text-support, #a93936);
1321
137
  }
1322
- .link[data-on-surface=accent][data-color=primary][data-size=s] svg{
1323
- width:var(--dimension-2m, 16px) !important;
1324
- height:var(--dimension-2m, 16px) !important;
138
+ .link[data-appearance=red][data-text-mode=default]:hover{
139
+ color:var(--sys-red-text-main, #621c1e);
1325
140
  }
1326
- .link[data-on-surface=accent][data-color=primary][data-size=m]{
1327
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1328
- font-weight:var(--link-body-m-font-weight, Regular);
1329
- line-height:var(--link-body-m-line-height, 20px);
1330
- font-size:var(--link-body-m-font-size, 14px);
1331
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1332
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1333
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1334
- text-decoration:var(--link-body-m-text-decoration, underline);
1335
- height:var(--size-link-m, 20px);
1336
- gap:var(--dimension-theme-general-0px, 0px);
141
+ .link[data-appearance=red][data-text-mode=default]:focus-visible{
142
+ outline-width:var(--border-state-focus-s-border-width, 2px);
143
+ outline-style:var(--border-state-focus-s-border-style, solid);
144
+ outline-color:var(--border-state-focus-s-border-color, );
145
+ color:var(--sys-red-text-main, #621c1e);
146
+ outline-color:var(--sys-available-complementary, #131313);
1337
147
  }
1338
- .link[data-on-surface=accent][data-color=primary][data-size=m] svg{
1339
- width:var(--dimension-3m, 24px) !important;
1340
- height:var(--dimension-3m, 24px) !important;
148
+ .link[data-appearance=red][data-text-mode=accent]{
149
+ color:var(--sys-red-accent-default, #d93f2f);
1341
150
  }
1342
- .link[data-on-surface=accent][data-color=primary][data-size=l]{
1343
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1344
- font-weight:var(--link-body-l-font-weight, Regular);
1345
- line-height:var(--link-body-l-line-height, 24px);
1346
- font-size:var(--link-body-l-font-size, 16px);
1347
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1348
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1349
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1350
- text-decoration:var(--link-body-l-text-decoration, underline);
1351
- height:var(--size-link-l, 24px);
1352
- gap:var(--dimension-theme-general-0px, 0px);
151
+ .link[data-appearance=red][data-text-mode=accent]:hover{
152
+ color:var(--sys-red-text-main, #621c1e);
1353
153
  }
1354
- .link[data-on-surface=accent][data-color=primary][data-size=l] svg{
1355
- width:var(--dimension-3m, 24px) !important;
1356
- height:var(--dimension-3m, 24px) !important;
154
+ .link[data-appearance=red][data-text-mode=accent]:focus-visible{
155
+ outline-width:var(--border-state-focus-s-border-width, 2px);
156
+ outline-style:var(--border-state-focus-s-border-style, solid);
157
+ outline-color:var(--border-state-focus-s-border-color, );
158
+ color:var(--sys-red-text-main, #621c1e);
159
+ outline-color:var(--sys-available-complementary, #131313);
1357
160
  }
1358
- .link[data-on-surface=accent][data-color=red]{
161
+ .link[data-appearance=red][data-text-mode=on-accent]{
1359
162
  color:var(--sys-red-on-accent, #fffbfa);
1360
163
  }
1361
- .link[data-on-surface=accent][data-color=red]:hover{
164
+ .link[data-appearance=red][data-text-mode=on-accent]:hover{
1362
165
  color:var(--sys-red-on-accent, #fffbfa);
1363
166
  opacity:var(--opacity-a080, 0.8);
1364
167
  }
1365
- .link[data-on-surface=accent][data-color=red]:focus-visible{
168
+ .link[data-appearance=red][data-text-mode=on-accent]:focus-visible{
1366
169
  outline-width:var(--border-state-focus-s-border-width, 2px);
1367
170
  outline-style:var(--border-state-focus-s-border-style, solid);
1368
171
  outline-color:var(--border-state-focus-s-border-color, );
172
+ color:var(--sys-red-on-accent, #fffbfa);
1369
173
  opacity:var(--opacity-a080, 0.8);
1370
174
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1371
175
  }
1372
- .link[data-on-surface=accent][data-color=red][data-size=s]{
1373
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1374
- font-weight:var(--link-body-s-font-weight, Regular);
1375
- line-height:var(--link-body-s-line-height, 16px);
1376
- font-size:var(--link-body-s-font-size, 12px);
1377
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1378
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1379
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1380
- text-decoration:var(--link-body-s-text-decoration, underline);
1381
- height:var(--size-link-s, 16px);
1382
- gap:var(--dimension-theme-general-0px, 0px);
176
+ .link[data-appearance=orange][data-text-mode=default]{
177
+ color:var(--sys-orange-text-support, #a2532f);
1383
178
  }
1384
- .link[data-on-surface=accent][data-color=red][data-size=s] svg{
1385
- width:var(--dimension-2m, 16px) !important;
1386
- height:var(--dimension-2m, 16px) !important;
179
+ .link[data-appearance=orange][data-text-mode=default]:hover{
180
+ color:var(--sys-orange-text-main, #572212);
1387
181
  }
1388
- .link[data-on-surface=accent][data-color=red][data-size=m]{
1389
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1390
- font-weight:var(--link-body-m-font-weight, Regular);
1391
- line-height:var(--link-body-m-line-height, 20px);
1392
- font-size:var(--link-body-m-font-size, 14px);
1393
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1394
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1395
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1396
- text-decoration:var(--link-body-m-text-decoration, underline);
1397
- height:var(--size-link-m, 20px);
1398
- gap:var(--dimension-theme-general-0px, 0px);
182
+ .link[data-appearance=orange][data-text-mode=default]:focus-visible{
183
+ outline-width:var(--border-state-focus-s-border-width, 2px);
184
+ outline-style:var(--border-state-focus-s-border-style, solid);
185
+ outline-color:var(--border-state-focus-s-border-color, );
186
+ color:var(--sys-orange-text-main, #572212);
187
+ outline-color:var(--sys-available-complementary, #131313);
1399
188
  }
1400
- .link[data-on-surface=accent][data-color=red][data-size=m] svg{
1401
- width:var(--dimension-3m, 24px) !important;
1402
- height:var(--dimension-3m, 24px) !important;
189
+ .link[data-appearance=orange][data-text-mode=accent]{
190
+ color:var(--sys-orange-accent-default, #fd8f1a);
1403
191
  }
1404
- .link[data-on-surface=accent][data-color=red][data-size=l]{
1405
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1406
- font-weight:var(--link-body-l-font-weight, Regular);
1407
- line-height:var(--link-body-l-line-height, 24px);
1408
- font-size:var(--link-body-l-font-size, 16px);
1409
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1410
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1411
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1412
- text-decoration:var(--link-body-l-text-decoration, underline);
1413
- height:var(--size-link-l, 24px);
1414
- gap:var(--dimension-theme-general-0px, 0px);
192
+ .link[data-appearance=orange][data-text-mode=accent]:hover{
193
+ color:var(--sys-orange-text-main, #572212);
1415
194
  }
1416
- .link[data-on-surface=accent][data-color=red][data-size=l] svg{
1417
- width:var(--dimension-3m, 24px) !important;
1418
- height:var(--dimension-3m, 24px) !important;
195
+ .link[data-appearance=orange][data-text-mode=accent]:focus-visible{
196
+ outline-width:var(--border-state-focus-s-border-width, 2px);
197
+ outline-style:var(--border-state-focus-s-border-style, solid);
198
+ outline-color:var(--border-state-focus-s-border-color, );
199
+ color:var(--sys-orange-text-main, #572212);
200
+ outline-color:var(--sys-available-complementary, #131313);
1419
201
  }
1420
- .link[data-on-surface=accent][data-color=orange]{
202
+ .link[data-appearance=orange][data-text-mode=on-accent]{
1421
203
  color:var(--sys-orange-on-accent, #572212);
1422
204
  }
1423
- .link[data-on-surface=accent][data-color=orange]:hover{
205
+ .link[data-appearance=orange][data-text-mode=on-accent]:hover{
1424
206
  color:var(--sys-orange-on-accent, #572212);
1425
207
  opacity:var(--opacity-a080, 0.8);
1426
208
  }
1427
- .link[data-on-surface=accent][data-color=orange]:focus-visible{
209
+ .link[data-appearance=orange][data-text-mode=on-accent]:focus-visible{
1428
210
  outline-width:var(--border-state-focus-s-border-width, 2px);
1429
211
  outline-style:var(--border-state-focus-s-border-style, solid);
1430
212
  outline-color:var(--border-state-focus-s-border-color, );
213
+ color:var(--sys-orange-on-accent, #572212);
1431
214
  opacity:var(--opacity-a080, 0.8);
1432
215
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1433
216
  }
1434
- .link[data-on-surface=accent][data-color=orange][data-size=s]{
1435
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1436
- font-weight:var(--link-body-s-font-weight, Regular);
1437
- line-height:var(--link-body-s-line-height, 16px);
1438
- font-size:var(--link-body-s-font-size, 12px);
1439
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1440
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1441
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1442
- text-decoration:var(--link-body-s-text-decoration, underline);
1443
- height:var(--size-link-s, 16px);
1444
- gap:var(--dimension-theme-general-0px, 0px);
217
+ .link[data-appearance=blue][data-text-mode=default]{
218
+ color:var(--sys-blue-text-support, #4265ab);
1445
219
  }
1446
- .link[data-on-surface=accent][data-color=orange][data-size=s] svg{
1447
- width:var(--dimension-2m, 16px) !important;
1448
- height:var(--dimension-2m, 16px) !important;
220
+ .link[data-appearance=blue][data-text-mode=default]:hover{
221
+ color:var(--sys-blue-text-main, #1f3361);
1449
222
  }
1450
- .link[data-on-surface=accent][data-color=orange][data-size=m]{
1451
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1452
- font-weight:var(--link-body-m-font-weight, Regular);
1453
- line-height:var(--link-body-m-line-height, 20px);
1454
- font-size:var(--link-body-m-font-size, 14px);
1455
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1456
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1457
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1458
- text-decoration:var(--link-body-m-text-decoration, underline);
1459
- height:var(--size-link-m, 20px);
1460
- gap:var(--dimension-theme-general-0px, 0px);
223
+ .link[data-appearance=blue][data-text-mode=default]:focus-visible{
224
+ outline-width:var(--border-state-focus-s-border-width, 2px);
225
+ outline-style:var(--border-state-focus-s-border-style, solid);
226
+ outline-color:var(--border-state-focus-s-border-color, );
227
+ color:var(--sys-blue-text-main, #1f3361);
228
+ outline-color:var(--sys-available-complementary, #131313);
1461
229
  }
1462
- .link[data-on-surface=accent][data-color=orange][data-size=m] svg{
1463
- width:var(--dimension-3m, 24px) !important;
1464
- height:var(--dimension-3m, 24px) !important;
230
+ .link[data-appearance=blue][data-text-mode=accent]{
231
+ color:var(--sys-blue-accent-default, #3280e8);
1465
232
  }
1466
- .link[data-on-surface=accent][data-color=orange][data-size=l]{
1467
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1468
- font-weight:var(--link-body-l-font-weight, Regular);
1469
- line-height:var(--link-body-l-line-height, 24px);
1470
- font-size:var(--link-body-l-font-size, 16px);
1471
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1472
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1473
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1474
- text-decoration:var(--link-body-l-text-decoration, underline);
1475
- height:var(--size-link-l, 24px);
1476
- gap:var(--dimension-theme-general-0px, 0px);
233
+ .link[data-appearance=blue][data-text-mode=accent]:hover{
234
+ color:var(--sys-blue-text-main, #1f3361);
1477
235
  }
1478
- .link[data-on-surface=accent][data-color=orange][data-size=l] svg{
1479
- width:var(--dimension-3m, 24px) !important;
1480
- height:var(--dimension-3m, 24px) !important;
236
+ .link[data-appearance=blue][data-text-mode=accent]:focus-visible{
237
+ outline-width:var(--border-state-focus-s-border-width, 2px);
238
+ outline-style:var(--border-state-focus-s-border-style, solid);
239
+ outline-color:var(--border-state-focus-s-border-color, );
240
+ color:var(--sys-blue-text-main, #1f3361);
241
+ outline-color:var(--sys-available-complementary, #131313);
1481
242
  }
1482
- .link[data-on-surface=accent][data-color=blue]{
243
+ .link[data-appearance=blue][data-text-mode=on-accent]{
1483
244
  color:var(--sys-blue-on-accent, #fcfeff);
1484
245
  }
1485
- .link[data-on-surface=accent][data-color=blue]:hover{
246
+ .link[data-appearance=blue][data-text-mode=on-accent]:hover{
1486
247
  color:var(--sys-blue-on-accent, #fcfeff);
1487
248
  opacity:var(--opacity-a080, 0.8);
1488
249
  }
1489
- .link[data-on-surface=accent][data-color=blue]:focus-visible{
250
+ .link[data-appearance=blue][data-text-mode=on-accent]:focus-visible{
1490
251
  outline-width:var(--border-state-focus-s-border-width, 2px);
1491
252
  outline-style:var(--border-state-focus-s-border-style, solid);
1492
253
  outline-color:var(--border-state-focus-s-border-color, );
1493
- opacity:var(--opacity-a080, 0.8);
1494
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
1495
- }
1496
- .link[data-on-surface=accent][data-color=blue][data-size=s]{
1497
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1498
- font-weight:var(--link-body-s-font-weight, Regular);
1499
- line-height:var(--link-body-s-line-height, 16px);
1500
- font-size:var(--link-body-s-font-size, 12px);
1501
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1502
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1503
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1504
- text-decoration:var(--link-body-s-text-decoration, underline);
1505
- height:var(--size-link-s, 16px);
1506
- gap:var(--dimension-theme-general-0px, 0px);
254
+ color:var(--sys-blue-on-accent, #fcfeff);
255
+ opacity:var(--opacity-a080, 0.8);
256
+ outline-color:var(--sys-available-on-complementary, #fdfdfd);
1507
257
  }
1508
- .link[data-on-surface=accent][data-color=blue][data-size=s] svg{
1509
- width:var(--dimension-2m, 16px) !important;
1510
- height:var(--dimension-2m, 16px) !important;
258
+ .link[data-appearance=violet][data-text-mode=default]{
259
+ color:var(--sys-violet-text-support, #864b8e);
1511
260
  }
1512
- .link[data-on-surface=accent][data-color=blue][data-size=m]{
1513
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1514
- font-weight:var(--link-body-m-font-weight, Regular);
1515
- line-height:var(--link-body-m-line-height, 20px);
1516
- font-size:var(--link-body-m-font-size, 14px);
1517
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1518
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1519
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1520
- text-decoration:var(--link-body-m-text-decoration, underline);
1521
- height:var(--size-link-m, 20px);
1522
- gap:var(--dimension-theme-general-0px, 0px);
261
+ .link[data-appearance=violet][data-text-mode=default]:hover{
262
+ color:var(--sys-violet-text-main, #51255f);
1523
263
  }
1524
- .link[data-on-surface=accent][data-color=blue][data-size=m] svg{
1525
- width:var(--dimension-3m, 24px) !important;
1526
- height:var(--dimension-3m, 24px) !important;
264
+ .link[data-appearance=violet][data-text-mode=default]:focus-visible{
265
+ outline-width:var(--border-state-focus-s-border-width, 2px);
266
+ outline-style:var(--border-state-focus-s-border-style, solid);
267
+ outline-color:var(--border-state-focus-s-border-color, );
268
+ color:var(--sys-violet-text-main, #51255f);
269
+ outline-color:var(--sys-available-complementary, #131313);
1527
270
  }
1528
- .link[data-on-surface=accent][data-color=blue][data-size=l]{
1529
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1530
- font-weight:var(--link-body-l-font-weight, Regular);
1531
- line-height:var(--link-body-l-line-height, 24px);
1532
- font-size:var(--link-body-l-font-size, 16px);
1533
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1534
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1535
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1536
- text-decoration:var(--link-body-l-text-decoration, underline);
1537
- height:var(--size-link-l, 24px);
1538
- gap:var(--dimension-theme-general-0px, 0px);
271
+ .link[data-appearance=violet][data-text-mode=accent]{
272
+ color:var(--sys-violet-accent-default, #bc52bf);
1539
273
  }
1540
- .link[data-on-surface=accent][data-color=blue][data-size=l] svg{
1541
- width:var(--dimension-3m, 24px) !important;
1542
- height:var(--dimension-3m, 24px) !important;
274
+ .link[data-appearance=violet][data-text-mode=accent]:hover{
275
+ color:var(--sys-violet-text-main, #51255f);
276
+ }
277
+ .link[data-appearance=violet][data-text-mode=accent]:focus-visible{
278
+ outline-width:var(--border-state-focus-s-border-width, 2px);
279
+ outline-style:var(--border-state-focus-s-border-style, solid);
280
+ outline-color:var(--border-state-focus-s-border-color, );
281
+ color:var(--sys-violet-text-main, #51255f);
282
+ outline-color:var(--sys-available-complementary, #131313);
1543
283
  }
1544
- .link[data-on-surface=accent][data-color=violet]{
284
+ .link[data-appearance=violet][data-text-mode=on-accent]{
1545
285
  color:var(--sys-violet-on-accent, #fdfdfd);
1546
286
  }
1547
- .link[data-on-surface=accent][data-color=violet]:hover{
287
+ .link[data-appearance=violet][data-text-mode=on-accent]:hover{
1548
288
  color:var(--sys-violet-on-accent, #fdfdfd);
1549
289
  opacity:var(--opacity-a080, 0.8);
1550
290
  }
1551
- .link[data-on-surface=accent][data-color=violet]:focus-visible{
291
+ .link[data-appearance=violet][data-text-mode=on-accent]:focus-visible{
1552
292
  outline-width:var(--border-state-focus-s-border-width, 2px);
1553
293
  outline-style:var(--border-state-focus-s-border-style, solid);
1554
294
  outline-color:var(--border-state-focus-s-border-color, );
295
+ color:var(--sys-violet-on-accent, #fdfdfd);
1555
296
  opacity:var(--opacity-a080, 0.8);
1556
297
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1557
298
  }
1558
- .link[data-on-surface=accent][data-color=violet][data-size=s]{
1559
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1560
- font-weight:var(--link-body-s-font-weight, Regular);
1561
- line-height:var(--link-body-s-line-height, 16px);
1562
- font-size:var(--link-body-s-font-size, 12px);
1563
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1564
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1565
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1566
- text-decoration:var(--link-body-s-text-decoration, underline);
1567
- height:var(--size-link-s, 16px);
1568
- gap:var(--dimension-theme-general-0px, 0px);
299
+ .link[data-appearance=pink][data-text-mode=default]{
300
+ color:var(--sys-pink-text-support, #a23f69);
1569
301
  }
1570
- .link[data-on-surface=accent][data-color=violet][data-size=s] svg{
1571
- width:var(--dimension-2m, 16px) !important;
1572
- height:var(--dimension-2m, 16px) !important;
302
+ .link[data-appearance=pink][data-text-mode=default]:hover{
303
+ color:var(--sys-pink-text-main, #5e1937);
1573
304
  }
1574
- .link[data-on-surface=accent][data-color=violet][data-size=m]{
1575
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1576
- font-weight:var(--link-body-m-font-weight, Regular);
1577
- line-height:var(--link-body-m-line-height, 20px);
1578
- font-size:var(--link-body-m-font-size, 14px);
1579
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1580
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1581
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1582
- text-decoration:var(--link-body-m-text-decoration, underline);
1583
- height:var(--size-link-m, 20px);
1584
- gap:var(--dimension-theme-general-0px, 0px);
305
+ .link[data-appearance=pink][data-text-mode=default]:focus-visible{
306
+ outline-width:var(--border-state-focus-s-border-width, 2px);
307
+ outline-style:var(--border-state-focus-s-border-style, solid);
308
+ outline-color:var(--border-state-focus-s-border-color, );
309
+ color:var(--sys-pink-text-main, #5e1937);
310
+ outline-color:var(--sys-available-complementary, #131313);
1585
311
  }
1586
- .link[data-on-surface=accent][data-color=violet][data-size=m] svg{
1587
- width:var(--dimension-3m, 24px) !important;
1588
- height:var(--dimension-3m, 24px) !important;
312
+ .link[data-appearance=pink][data-text-mode=accent]{
313
+ color:var(--sys-pink-accent-default, #e14487);
1589
314
  }
1590
- .link[data-on-surface=accent][data-color=violet][data-size=l]{
1591
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1592
- font-weight:var(--link-body-l-font-weight, Regular);
1593
- line-height:var(--link-body-l-line-height, 24px);
1594
- font-size:var(--link-body-l-font-size, 16px);
1595
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1596
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1597
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1598
- text-decoration:var(--link-body-l-text-decoration, underline);
1599
- height:var(--size-link-l, 24px);
1600
- gap:var(--dimension-theme-general-0px, 0px);
315
+ .link[data-appearance=pink][data-text-mode=accent]:hover{
316
+ color:var(--sys-pink-text-main, #5e1937);
1601
317
  }
1602
- .link[data-on-surface=accent][data-color=violet][data-size=l] svg{
1603
- width:var(--dimension-3m, 24px) !important;
1604
- height:var(--dimension-3m, 24px) !important;
318
+ .link[data-appearance=pink][data-text-mode=accent]:focus-visible{
319
+ outline-width:var(--border-state-focus-s-border-width, 2px);
320
+ outline-style:var(--border-state-focus-s-border-style, solid);
321
+ outline-color:var(--border-state-focus-s-border-color, );
322
+ color:var(--sys-pink-text-main, #5e1937);
323
+ outline-color:var(--sys-available-complementary, #131313);
1605
324
  }
1606
- .link[data-on-surface=accent][data-color=pink]{
325
+ .link[data-appearance=pink][data-text-mode=on-accent]{
1607
326
  color:var(--sys-pink-on-accent, #fcfdfd);
1608
327
  }
1609
- .link[data-on-surface=accent][data-color=pink]:hover{
328
+ .link[data-appearance=pink][data-text-mode=on-accent]:hover{
1610
329
  color:var(--sys-pink-on-accent, #fcfdfd);
1611
330
  opacity:var(--opacity-a080, 0.8);
1612
331
  }
1613
- .link[data-on-surface=accent][data-color=pink]:focus-visible{
332
+ .link[data-appearance=pink][data-text-mode=on-accent]:focus-visible{
1614
333
  outline-width:var(--border-state-focus-s-border-width, 2px);
1615
334
  outline-style:var(--border-state-focus-s-border-style, solid);
1616
335
  outline-color:var(--border-state-focus-s-border-color, );
336
+ color:var(--sys-pink-on-accent, #fcfdfd);
1617
337
  opacity:var(--opacity-a080, 0.8);
1618
338
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1619
339
  }
1620
- .link[data-on-surface=accent][data-color=pink][data-size=s]{
1621
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1622
- font-weight:var(--link-body-s-font-weight, Regular);
1623
- line-height:var(--link-body-s-line-height, 16px);
1624
- font-size:var(--link-body-s-font-size, 12px);
1625
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1626
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1627
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1628
- text-decoration:var(--link-body-s-text-decoration, underline);
1629
- height:var(--size-link-s, 16px);
1630
- gap:var(--dimension-theme-general-0px, 0px);
340
+ .link[data-appearance=yellow][data-text-mode=default]{
341
+ color:var(--sys-yellow-text-support, #80461b);
1631
342
  }
1632
- .link[data-on-surface=accent][data-color=pink][data-size=s] svg{
1633
- width:var(--dimension-2m, 16px) !important;
1634
- height:var(--dimension-2m, 16px) !important;
343
+ .link[data-appearance=yellow][data-text-mode=default]:hover{
344
+ color:var(--sys-yellow-text-main, #54290f);
1635
345
  }
1636
- .link[data-on-surface=accent][data-color=pink][data-size=m]{
1637
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1638
- font-weight:var(--link-body-m-font-weight, Regular);
1639
- line-height:var(--link-body-m-line-height, 20px);
1640
- font-size:var(--link-body-m-font-size, 14px);
1641
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1642
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1643
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1644
- text-decoration:var(--link-body-m-text-decoration, underline);
1645
- height:var(--size-link-m, 20px);
1646
- gap:var(--dimension-theme-general-0px, 0px);
346
+ .link[data-appearance=yellow][data-text-mode=default]:focus-visible{
347
+ outline-width:var(--border-state-focus-s-border-width, 2px);
348
+ outline-style:var(--border-state-focus-s-border-style, solid);
349
+ outline-color:var(--border-state-focus-s-border-color, );
350
+ color:var(--sys-yellow-text-main, #54290f);
351
+ outline-color:var(--sys-available-complementary, #131313);
1647
352
  }
1648
- .link[data-on-surface=accent][data-color=pink][data-size=m] svg{
1649
- width:var(--dimension-3m, 24px) !important;
1650
- height:var(--dimension-3m, 24px) !important;
353
+ .link[data-appearance=yellow][data-text-mode=accent]{
354
+ color:var(--sys-yellow-accent-default, #feb528);
1651
355
  }
1652
- .link[data-on-surface=accent][data-color=pink][data-size=l]{
1653
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1654
- font-weight:var(--link-body-l-font-weight, Regular);
1655
- line-height:var(--link-body-l-line-height, 24px);
1656
- font-size:var(--link-body-l-font-size, 16px);
1657
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1658
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1659
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1660
- text-decoration:var(--link-body-l-text-decoration, underline);
1661
- height:var(--size-link-l, 24px);
1662
- gap:var(--dimension-theme-general-0px, 0px);
356
+ .link[data-appearance=yellow][data-text-mode=accent]:hover{
357
+ color:var(--sys-yellow-text-main, #54290f);
1663
358
  }
1664
- .link[data-on-surface=accent][data-color=pink][data-size=l] svg{
1665
- width:var(--dimension-3m, 24px) !important;
1666
- height:var(--dimension-3m, 24px) !important;
359
+ .link[data-appearance=yellow][data-text-mode=accent]:focus-visible{
360
+ outline-width:var(--border-state-focus-s-border-width, 2px);
361
+ outline-style:var(--border-state-focus-s-border-style, solid);
362
+ outline-color:var(--border-state-focus-s-border-color, );
363
+ color:var(--sys-yellow-text-main, #54290f);
364
+ outline-color:var(--sys-available-complementary, #131313);
1667
365
  }
1668
- .link[data-on-surface=accent][data-color=yellow]{
366
+ .link[data-appearance=yellow][data-text-mode=on-accent]{
1669
367
  color:var(--sys-yellow-on-accent, #54290f);
1670
368
  }
1671
- .link[data-on-surface=accent][data-color=yellow]:hover{
369
+ .link[data-appearance=yellow][data-text-mode=on-accent]:hover{
1672
370
  color:var(--sys-yellow-on-accent, #54290f);
1673
371
  opacity:var(--opacity-a080, 0.8);
1674
372
  }
1675
- .link[data-on-surface=accent][data-color=yellow]:focus-visible{
373
+ .link[data-appearance=yellow][data-text-mode=on-accent]:focus-visible{
1676
374
  outline-width:var(--border-state-focus-s-border-width, 2px);
1677
375
  outline-style:var(--border-state-focus-s-border-style, solid);
1678
376
  outline-color:var(--border-state-focus-s-border-color, );
377
+ color:var(--sys-yellow-on-accent, #54290f);
1679
378
  opacity:var(--opacity-a080, 0.8);
1680
379
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1681
380
  }
1682
- .link[data-on-surface=accent][data-color=yellow][data-size=s]{
1683
- font-family:var(--link-body-s-font-family, SB Sans Interface);
1684
- font-weight:var(--link-body-s-font-weight, Regular);
1685
- line-height:var(--link-body-s-line-height, 16px);
1686
- font-size:var(--link-body-s-font-size, 12px);
1687
- letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
1688
- paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1689
- -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1690
- text-decoration:var(--link-body-s-text-decoration, underline);
1691
- height:var(--size-link-s, 16px);
1692
- gap:var(--dimension-theme-general-0px, 0px);
381
+ .link[data-appearance=green][data-text-mode=default]{
382
+ color:var(--sys-green-text-support, #335747);
1693
383
  }
1694
- .link[data-on-surface=accent][data-color=yellow][data-size=s] svg{
1695
- width:var(--dimension-2m, 16px) !important;
1696
- height:var(--dimension-2m, 16px) !important;
384
+ .link[data-appearance=green][data-text-mode=default]:hover{
385
+ color:var(--sys-green-text-main, #1f392a);
1697
386
  }
1698
- .link[data-on-surface=accent][data-color=yellow][data-size=m]{
1699
- font-family:var(--link-body-m-font-family, SB Sans Interface);
1700
- font-weight:var(--link-body-m-font-weight, Regular);
1701
- line-height:var(--link-body-m-line-height, 20px);
1702
- font-size:var(--link-body-m-font-size, 14px);
1703
- letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
1704
- paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1705
- -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1706
- text-decoration:var(--link-body-m-text-decoration, underline);
1707
- height:var(--size-link-m, 20px);
1708
- gap:var(--dimension-theme-general-0px, 0px);
387
+ .link[data-appearance=green][data-text-mode=default]:focus-visible{
388
+ outline-width:var(--border-state-focus-s-border-width, 2px);
389
+ outline-style:var(--border-state-focus-s-border-style, solid);
390
+ outline-color:var(--border-state-focus-s-border-color, );
391
+ color:var(--sys-green-text-main, #1f392a);
392
+ outline-color:var(--sys-available-complementary, #131313);
1709
393
  }
1710
- .link[data-on-surface=accent][data-color=yellow][data-size=m] svg{
1711
- width:var(--dimension-3m, 24px) !important;
1712
- height:var(--dimension-3m, 24px) !important;
394
+ .link[data-appearance=green][data-text-mode=accent]{
395
+ color:var(--sys-green-accent-default, #0bbe8f);
1713
396
  }
1714
- .link[data-on-surface=accent][data-color=yellow][data-size=l]{
1715
- font-family:var(--link-body-l-font-family, SB Sans Interface);
1716
- font-weight:var(--link-body-l-font-weight, Regular);
1717
- line-height:var(--link-body-l-line-height, 24px);
1718
- font-size:var(--link-body-l-font-size, 16px);
1719
- letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
1720
- paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1721
- -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1722
- text-decoration:var(--link-body-l-text-decoration, underline);
1723
- height:var(--size-link-l, 24px);
1724
- gap:var(--dimension-theme-general-0px, 0px);
397
+ .link[data-appearance=green][data-text-mode=accent]:hover{
398
+ color:var(--sys-green-text-main, #1f392a);
1725
399
  }
1726
- .link[data-on-surface=accent][data-color=yellow][data-size=l] svg{
1727
- width:var(--dimension-3m, 24px) !important;
1728
- height:var(--dimension-3m, 24px) !important;
400
+ .link[data-appearance=green][data-text-mode=accent]:focus-visible{
401
+ outline-width:var(--border-state-focus-s-border-width, 2px);
402
+ outline-style:var(--border-state-focus-s-border-style, solid);
403
+ outline-color:var(--border-state-focus-s-border-color, );
404
+ color:var(--sys-green-text-main, #1f392a);
405
+ outline-color:var(--sys-available-complementary, #131313);
1729
406
  }
1730
- .link[data-on-surface=accent][data-color=green]{
407
+ .link[data-appearance=green][data-text-mode=on-accent]{
1731
408
  color:var(--sys-green-on-accent, #1f392a);
1732
409
  }
1733
- .link[data-on-surface=accent][data-color=green]:hover{
410
+ .link[data-appearance=green][data-text-mode=on-accent]:hover{
1734
411
  color:var(--sys-green-on-accent, #1f392a);
1735
412
  opacity:var(--opacity-a080, 0.8);
1736
413
  }
1737
- .link[data-on-surface=accent][data-color=green]:focus-visible{
414
+ .link[data-appearance=green][data-text-mode=on-accent]:focus-visible{
1738
415
  outline-width:var(--border-state-focus-s-border-width, 2px);
1739
416
  outline-style:var(--border-state-focus-s-border-style, solid);
1740
417
  outline-color:var(--border-state-focus-s-border-color, );
418
+ color:var(--sys-green-on-accent, #1f392a);
1741
419
  opacity:var(--opacity-a080, 0.8);
1742
420
  outline-color:var(--sys-available-on-complementary, #fdfdfd);
1743
421
  }
1744
- .link[data-on-surface=accent][data-color=green][data-size=s]{
422
+ .link[data-size=s]{
423
+ height:var(--size-link-s, 16px);
424
+ gap:var(--dimension-theme-general-0px, 0px);
425
+ }
426
+ .link[data-size=s][data-text-mode=default]{
427
+ font-family:var(--sans-body-s-font-family, SB Sans Interface);
428
+ font-weight:var(--sans-body-s-font-weight, Regular);
429
+ line-height:var(--sans-body-s-line-height, 16px);
430
+ font-size:var(--sans-body-s-font-size, 12px);
431
+ letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
432
+ paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
433
+ }
434
+ .link[data-size=s][data-text-mode=accent]{
435
+ font-family:var(--link-body-s-font-family, SB Sans Interface);
436
+ font-weight:var(--link-body-s-font-weight, Regular);
437
+ line-height:var(--link-body-s-line-height, 16px);
438
+ font-size:var(--link-body-s-font-size, 12px);
439
+ letter-spacing:var(--link-body-s-letter-spacing, 0.1px);
440
+ paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
441
+ -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
442
+ text-decoration:var(--link-body-s-text-decoration, underline);
443
+ }
444
+ .link[data-size=s][data-text-mode=on-accent]{
1745
445
  font-family:var(--link-body-s-font-family, SB Sans Interface);
1746
446
  font-weight:var(--link-body-s-font-weight, Regular);
1747
447
  line-height:var(--link-body-s-line-height, 16px);
@@ -1750,14 +450,34 @@
1750
450
  paragraph-spacing:var(--link-body-s-paragraph-spacing, 6.6px);
1751
451
  -webkit-text-decoration:var(--link-body-s-text-decoration, underline);
1752
452
  text-decoration:var(--link-body-s-text-decoration, underline);
1753
- height:var(--size-link-s, 16px);
1754
- gap:var(--dimension-theme-general-0px, 0px);
1755
453
  }
1756
- .link[data-on-surface=accent][data-color=green][data-size=s] svg{
454
+ .link[data-size=s] svg{
1757
455
  width:var(--dimension-2m, 16px) !important;
1758
456
  height:var(--dimension-2m, 16px) !important;
1759
457
  }
1760
- .link[data-on-surface=accent][data-color=green][data-size=m]{
458
+ .link[data-size=m]{
459
+ height:var(--size-link-m, 20px);
460
+ gap:var(--dimension-theme-general-0px, 0px);
461
+ }
462
+ .link[data-size=m][data-text-mode=default]{
463
+ font-family:var(--sans-body-m-font-family, SB Sans Interface);
464
+ font-weight:var(--sans-body-m-font-weight, Regular);
465
+ line-height:var(--sans-body-m-line-height, 20px);
466
+ font-size:var(--sans-body-m-font-size, 14px);
467
+ letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
468
+ paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
469
+ }
470
+ .link[data-size=m][data-text-mode=accent]{
471
+ font-family:var(--link-body-m-font-family, SB Sans Interface);
472
+ font-weight:var(--link-body-m-font-weight, Regular);
473
+ line-height:var(--link-body-m-line-height, 20px);
474
+ font-size:var(--link-body-m-font-size, 14px);
475
+ letter-spacing:var(--link-body-m-letter-spacing, 0.1px);
476
+ paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
477
+ -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
478
+ text-decoration:var(--link-body-m-text-decoration, underline);
479
+ }
480
+ .link[data-size=m][data-text-mode=on-accent]{
1761
481
  font-family:var(--link-body-m-font-family, SB Sans Interface);
1762
482
  font-weight:var(--link-body-m-font-weight, Regular);
1763
483
  line-height:var(--link-body-m-line-height, 20px);
@@ -1766,14 +486,34 @@
1766
486
  paragraph-spacing:var(--link-body-m-paragraph-spacing, 7.7px);
1767
487
  -webkit-text-decoration:var(--link-body-m-text-decoration, underline);
1768
488
  text-decoration:var(--link-body-m-text-decoration, underline);
1769
- height:var(--size-link-m, 20px);
1770
- gap:var(--dimension-theme-general-0px, 0px);
1771
489
  }
1772
- .link[data-on-surface=accent][data-color=green][data-size=m] svg{
490
+ .link[data-size=m] svg{
1773
491
  width:var(--dimension-3m, 24px) !important;
1774
492
  height:var(--dimension-3m, 24px) !important;
1775
493
  }
1776
- .link[data-on-surface=accent][data-color=green][data-size=l]{
494
+ .link[data-size=l]{
495
+ height:var(--size-link-l, 24px);
496
+ gap:var(--dimension-theme-general-0px, 0px);
497
+ }
498
+ .link[data-size=l][data-text-mode=default]{
499
+ font-family:var(--sans-body-l-font-family, SB Sans Interface);
500
+ font-weight:var(--sans-body-l-font-weight, Regular);
501
+ line-height:var(--sans-body-l-line-height, 24px);
502
+ font-size:var(--sans-body-l-font-size, 16px);
503
+ letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
504
+ paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
505
+ }
506
+ .link[data-size=l][data-text-mode=accent]{
507
+ font-family:var(--link-body-l-font-family, SB Sans Interface);
508
+ font-weight:var(--link-body-l-font-weight, Regular);
509
+ line-height:var(--link-body-l-line-height, 24px);
510
+ font-size:var(--link-body-l-font-size, 16px);
511
+ letter-spacing:var(--link-body-l-letter-spacing, 0.1px);
512
+ paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
513
+ -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
514
+ text-decoration:var(--link-body-l-text-decoration, underline);
515
+ }
516
+ .link[data-size=l][data-text-mode=on-accent]{
1777
517
  font-family:var(--link-body-l-font-family, SB Sans Interface);
1778
518
  font-weight:var(--link-body-l-font-weight, Regular);
1779
519
  line-height:var(--link-body-l-line-height, 24px);
@@ -1782,10 +522,8 @@
1782
522
  paragraph-spacing:var(--link-body-l-paragraph-spacing, 8.8px);
1783
523
  -webkit-text-decoration:var(--link-body-l-text-decoration, underline);
1784
524
  text-decoration:var(--link-body-l-text-decoration, underline);
1785
- height:var(--size-link-l, 24px);
1786
- gap:var(--dimension-theme-general-0px, 0px);
1787
525
  }
1788
- .link[data-on-surface=accent][data-color=green][data-size=l] svg{
526
+ .link[data-size=l] svg{
1789
527
  width:var(--dimension-3m, 24px) !important;
1790
528
  height:var(--dimension-3m, 24px) !important;
1791
529
  }