genesys-spark 4.92.0 → 4.93.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 (23) hide show
  1. package/dist/css/flare/global.css.map +1 -1
  2. package/dist/css/flare/ui.css.map +1 -1
  3. package/dist/css/global-focusable.css +16 -16
  4. package/dist/css/global-focusable.css.map +1 -1
  5. package/dist/css/global-typography.css +150 -150
  6. package/dist/css/global-typography.css.map +1 -1
  7. package/dist/css/global.css +2026 -567
  8. package/dist/css/global.css.map +1 -1
  9. package/dist/css/legacy/global.css.map +1 -1
  10. package/dist/css/legacy/ui.css.map +1 -1
  11. package/dist/css/ui.css +2715 -1073
  12. package/dist/css/ui.css.map +1 -1
  13. package/dist/global.css +2026 -567
  14. package/dist/global.css.map +1 -1
  15. package/dist/index.js +3 -3
  16. package/dist/scss/_focus.scss +5 -22
  17. package/dist/scss/_mixins.scss +3 -7
  18. package/dist/scss/_typography.scss +85 -331
  19. package/dist/scss/global.scss +14 -2
  20. package/dist/scss/ui.scss +10 -9
  21. package/dist/ui.css +2715 -1073
  22. package/dist/ui.css.map +1 -1
  23. package/package.json +6 -6
package/dist/scss/_typography.scss CHANGED
@@ -6,169 +6,66 @@
6
6
 
7
7
  /* Headings */
8
8
  @mixin _heading-xl {
9
- font-family: var(
10
- --gse-core-typography-heading-xl-fontFamily,
11
- var(--gse-semantic-heading-xl-bold-fontFamily)
12
- ),
13
- var(
14
- --gse-core-fontFamily-heading,
15
- var(--gse-semantic-theme-fontFamily-headings)
16
- ),
17
- sans-serif;
18
- font-size: var(
19
- --gse-core-typography-heading-xl-fontSize,
20
- var(--gse-semantic-heading-xl-bold-fontSize)
21
- );
22
- line-height: var(
23
- --gse-core-typography-heading-xl-lineHeight,
24
- var(--gse-semantic-heading-xl-bold-lineHeight)
25
- );
9
+ font-family: var(--gse-semantic-heading-xl-bold-fontFamily),
10
+ var(--gse-semantic-theme-fontFamily-headings), sans-serif;
11
+ font-size: var(--gse-semantic-heading-xl-bold-fontSize);
12
+ line-height: var(--gse-semantic-heading-xl-bold-lineHeight);
26
13
  }
27
14
 
28
15
  @mixin _heading-lg {
29
- font-family: var(
30
- --gse-core-typography-heading-lg-fontFamily,
31
- var(--gse-semantic-heading-lg-bold-fontFamily)
32
- ),
33
- var(
34
- --gse-core-fontFamily-heading,
35
- var(--gse-semantic-theme-fontFamily-headings)
36
- ),
37
- sans-serif;
38
- font-size: var(
39
- --gse-core-typography-heading-lg-fontSize,
40
- var(--gse-semantic-heading-lg-bold-fontSize)
41
- );
42
- line-height: var(
43
- --gse-core-typography-heading-lg-lineHeight,
44
- var(--gse-semantic-heading-lg-bold-lineHeight)
45
- );
16
+ font-family: var(--gse-semantic-heading-lg-bold-fontFamily),
17
+ var(--gse-semantic-theme-fontFamily-headings), sans-serif;
18
+ font-size: var(--gse-semantic-heading-lg-bold-fontSize);
19
+ line-height: var(--gse-semantic-heading-lg-bold-lineHeight);
46
20
  }
47
21
 
48
22
  @mixin _heading-md {
49
- font-family: var(
50
- --gse-core-typography-heading-md-fontFamily,
51
- var(--gse-semantic-heading-md-bold-fontFamily)
52
- ),
53
- var(
54
- --gse-core-fontFamily-heading,
55
- var(--gse-semantic-theme-fontFamily-headings)
56
- ),
57
- sans-serif;
58
- font-size: var(
59
- --gse-core-typography-heading-md-fontSize,
60
- var(--gse-semantic-heading-md-bold-fontSize)
61
- );
62
- line-height: var(
63
- --gse-core-typography-heading-md-lineHeight,
64
- var(--gse-semantic-heading-md-bold-lineHeight)
65
- );
23
+ font-family: var(--gse-semantic-heading-md-bold-fontFamily),
24
+ var(--gse-semantic-theme-fontFamily-headings), sans-serif;
25
+ font-size: var(--gse-semantic-heading-md-bold-fontSize);
26
+ line-height: var(--gse-semantic-heading-md-bold-lineHeight);
66
27
  }
67
28
 
68
29
  @mixin _heading-sm {
69
- font-family: var(
70
- --gse-core-typography-heading-sm-fontFamily,
71
- var(--gse-semantic-heading-sm-bold-fontFamily)
72
- ),
73
- var(
74
- --gse-core-fontFamily-heading,
75
- var(--gse-semantic-theme-fontFamily-headings)
76
- ),
77
- sans-serif;
78
- font-size: var(
79
- --gse-core-typography-heading-sm-fontSize,
80
- var(--gse-semantic-heading-sm-bold-fontSize)
81
- );
82
- line-height: var(
83
- --gse-core-typography-heading-sm-lineHeight,
84
- var(--gse-semantic-heading-sm-bold-lineHeight)
85
- );
30
+ font-family: var(--gse-semantic-heading-sm-bold-fontFamily),
31
+ var(--gse-semantic-theme-fontFamily-headings), sans-serif;
32
+ font-size: var(--gse-semantic-heading-sm-bold-fontSize);
33
+ line-height: var(--gse-semantic-heading-sm-bold-lineHeight);
86
34
  }
87
35
 
88
36
  @mixin _heading-xs {
89
- font-family: var(
90
- --gse-core-typography-heading-xs-fontFamily,
91
- var(--gse-semantic-heading-xs-bold-fontFamily)
92
- ),
93
- var(
94
- --gse-core-fontFamily-heading,
95
- var(--gse-semantic-theme-fontFamily-headings)
96
- ),
97
- sans-serif;
98
- font-size: var(
99
- --gse-core-typography-heading-xs-fontSize,
100
- var(--gse-semantic-heading-xs-bold-fontSize)
101
- );
102
- line-height: var(
103
- --gse-core-typography-heading-xs-lineHeight,
104
- var(--gse-semantic-heading-xs-bold-lineHeight)
105
- );
37
+ font-family: var(--gse-semantic-heading-xs-bold-fontFamily),
38
+ var(--gse-semantic-theme-fontFamily-headings), sans-serif;
39
+ font-size: var(--gse-semantic-heading-xs-bold-fontSize);
40
+ line-height: var(--gse-semantic-heading-xs-bold-lineHeight);
106
41
  }
107
42
 
108
43
  @mixin _heading-subheading {
109
- font-family: var(
110
- --gse-core-typography-subheading-fontFamily,
111
- var(--gse-semantic-subheading-regular-fontFamily)
112
- ),
113
- var(
114
- --gse-core-fontFamily-heading,
115
- var(--gse-semantic-theme-fontFamily-headings)
116
- ),
117
- sans-serif;
118
- font-size: var(
119
- --gse-core-typography-subheading-fontSize,
120
- var(--gse-semantic-subheading-regular-fontSize)
121
- );
122
- line-height: var(
123
- --gse-core-typography-subheading-lineHeight,
124
- var(--gse-semantic-subheading-regular-lineHeight)
125
- );
44
+ font-family: var(--gse-semantic-subheading-regular-fontFamily),
45
+ var(--gse-semantic-theme-fontFamily-headings), sans-serif;
46
+ font-size: var(--gse-semantic-subheading-regular-fontSize);
47
+ line-height: var(--gse-semantic-subheading-regular-lineHeight);
126
48
  }
127
49
 
128
50
  @mixin _heading-overline {
129
- font-family: var(
130
- --gse-core-typography-heading-overline-fontFamily,
131
- var(--gse-semantic-heading-overline-fontFamily)
132
- ),
133
- var(
134
- --gse-core-fontFamily-heading,
135
- var(--gse-semantic-theme-fontFamily-headings)
136
- ),
137
- sans-serif;
138
- font-size: var(
139
- --gse-core-typography-heading-overline-fontSize,
140
- var(--gse-semantic-heading-overline-fontSize)
141
- );
142
- line-height: var(
143
- --gse-core-typography-heading-overline-lineHeight,
144
- var(--gse-semantic-heading-overline-lineHeight)
145
- );
146
- text-transform: var(
147
- --gse-core-typography-heading-overline-textCase,
148
- var(--gse-semantic-heading-overline-textCase)
149
- );
150
- letter-spacing: var(
151
- --gse-core-typography-heading-overline-letterSpacing,
152
- var(--gse-semantic-heading-overline-letterSpacing)
153
- );
51
+ font-family: var(--gse-semantic-heading-overline-fontFamily),
52
+ var(--gse-semantic-theme-fontFamily-headings), sans-serif;
53
+ font-size: var(--gse-semantic-heading-overline-fontSize);
54
+ line-height: var(--gse-semantic-heading-overline-lineHeight);
55
+ text-transform: var(--gse-semantic-heading-overline-textCase);
56
+ letter-spacing: var(--gse-semantic-heading-overline-letterSpacing);
154
57
  }
155
58
 
156
59
  @mixin heading-xl-bold {
157
60
  @include _heading-xl;
158
61
 
159
- font-weight: var(
160
- --gse-core-fontWeight-bold,
161
- var(--gse-semantic-heading-xl-bold-fontWeight)
162
- );
62
+ font-weight: var(--gse-semantic-heading-xl-bold-fontWeight);
163
63
  }
164
64
 
165
65
  @mixin heading-xl-semiBold {
166
66
  @include _heading-xl;
167
67
 
168
- font-weight: var(
169
- --gse-core-fontWeight-semiBold,
170
- var(--gse-semantic-heading-lg-semiBold-fontWeight)
171
- );
68
+ font-weight: var(--gse-semantic-heading-lg-semiBold-fontWeight);
172
69
  }
173
70
 
174
71
  @mixin heading-xl {
@@ -178,19 +75,13 @@
178
75
  @mixin heading-lg-bold {
179
76
  @include _heading-lg;
180
77
 
181
- font-weight: var(
182
- --gse-core-fontWeight-bold,
183
- var(--gse-semantic-heading-lg-bold-fontWeight)
184
- );
78
+ font-weight: var(--gse-semantic-heading-lg-bold-fontWeight);
185
79
  }
186
80
 
187
81
  @mixin heading-lg-semiBold {
188
82
  @include _heading-lg;
189
83
 
190
- font-weight: var(
191
- --gse-core-fontWeight-semiBold,
192
- var(--gse-semantic-heading-lg-semiBold-fontWeight)
193
- );
84
+ font-weight: var(--gse-semantic-heading-lg-semiBold-fontWeight);
194
85
  }
195
86
 
196
87
  @mixin heading-lg {
@@ -200,19 +91,13 @@
200
91
  @mixin heading-md-bold {
201
92
  @include _heading-md;
202
93
 
203
- font-weight: var(
204
- --gse-core-fontWeight-bold,
205
- var(--gse-semantic-heading-md-bold-fontWeight)
206
- );
94
+ font-weight: var(--gse-semantic-heading-md-bold-fontWeight);
207
95
  }
208
96
 
209
97
  @mixin heading-md-semiBold {
210
98
  @include _heading-md;
211
99
 
212
- font-weight: var(
213
- --gse-core-fontWeight-semiBold,
214
- var(--gse-semantic-heading-md-semiBold-fontWeight)
215
- );
100
+ font-weight: var(--gse-semantic-heading-md-semiBold-fontWeight);
216
101
  }
217
102
 
218
103
  @mixin heading-md {
@@ -222,19 +107,13 @@
222
107
  @mixin heading-sm-bold {
223
108
  @include _heading-sm;
224
109
 
225
- font-weight: var(
226
- --gse-core-fontWeight-bold,
227
- var(--gse-semantic-heading-sm-bold-fontWeight)
228
- );
110
+ font-weight: var(--gse-semantic-heading-sm-bold-fontWeight);
229
111
  }
230
112
 
231
113
  @mixin heading-sm-semiBold {
232
114
  @include _heading-sm;
233
115
 
234
- font-weight: var(
235
- --gse-core-fontWeight-semiBold,
236
- var(--gse-semantic-heading-sm-semiBold-fontWeight)
237
- );
116
+ font-weight: var(--gse-semantic-heading-sm-semiBold-fontWeight);
238
117
  }
239
118
 
240
119
  @mixin heading-sm {
@@ -244,19 +123,13 @@
244
123
  @mixin heading-xs-bold {
245
124
  @include _heading-xs;
246
125
 
247
- font-weight: var(
248
- --gse-core-fontWeight-bold,
249
- var(--gse-semantic-heading-xs-bold-fontWeight)
250
- );
126
+ font-weight: var(--gse-semantic-heading-xs-bold-fontWeight);
251
127
  }
252
128
 
253
129
  @mixin heading-xs-semiBold {
254
130
  @include _heading-xs;
255
131
 
256
- font-weight: var(
257
- --gse-core-fontWeight-semiBold,
258
- var(--gse-semantic-heading-xs-semiBold-fontWeight)
259
- );
132
+ font-weight: var(--gse-semantic-heading-xs-semiBold-fontWeight);
260
133
  }
261
134
 
262
135
  @mixin heading-xs {
@@ -266,28 +139,19 @@
266
139
  @mixin heading-subheading-bold {
267
140
  @include _heading-subheading;
268
141
 
269
- font-weight: var(
270
- --gse-core-fontWeight-bold,
271
- var(--gse-semantic-subheading-bold-fontWeight)
272
- );
142
+ font-weight: var(--gse-semantic-subheading-bold-fontWeight);
273
143
  }
274
144
 
275
145
  @mixin heading-subheading-semiBold {
276
146
  @include _heading-subheading;
277
147
 
278
- font-weight: var(
279
- --gse-core-fontWeight-semiBold,
280
- var(--gse-semantic-subheading-semiBold-fontWeight)
281
- );
148
+ font-weight: var(--gse-semantic-subheading-semiBold-fontWeight);
282
149
  }
283
150
 
284
151
  @mixin heading-subheading-regular {
285
152
  @include _heading-subheading;
286
153
 
287
- font-weight: var(
288
- --gse-core-fontWeight-regular,
289
- var(--gse-semantic-subheading-regular-fontWeight)
290
- );
154
+ font-weight: var(--gse-semantic-subheading-regular-fontWeight);
291
155
  }
292
156
 
293
157
  @mixin heading-subheading {
@@ -298,244 +162,134 @@
298
162
  @include _heading-overline;
299
163
 
300
164
  font-weight: var(
301
- --gse-core-fontWeight-regular,
302
- var(--gse-semantic-heading-overline-fontWeight)
165
+ --gse-semantic-heading-overline-fontWeight
303
166
  ); //TODO token for this is wrong
304
167
  }
305
168
 
306
169
  /* Body Copy */
307
170
  @mixin _body-lg {
308
- font-family: var(
309
- --gse-core-typography-body-lg-fontFamily,
310
- var(--gse-semantic-body-lg-regular-fontFamily)
311
- ),
312
- var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)),
313
- sans-serif;
314
- font-size: var(
315
- --gse-core-typography-body-lg-fontSize,
316
- var(--gse-semantic-body-lg-regular-fontSize)
317
- );
318
- line-height: var(
319
- --gse-core-typography-body-lg-lineHeight,
320
- var(--gse-semantic-body-lg-regular-lineHeight)
321
- );
171
+ font-family: var(--gse-semantic-body-lg-regular-fontFamily),
172
+ var(--gse-semantic-theme-fontFamily-body), sans-serif;
173
+ font-size: var(--gse-semantic-body-lg-regular-fontSize);
174
+ line-height: var(--gse-semantic-body-lg-regular-lineHeight);
322
175
  }
323
176
 
324
177
  @mixin _body-md {
325
- font-family: var(
326
- --gse-core-typography-body-md-fontFamily,
327
- var(--gse-semantic-body-md-regular-fontFamily)
328
- ),
329
- var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)),
330
- sans-serif;
331
- font-size: var(
332
- --gse-core-typography-body-md-fontSize,
333
- var(--gse-semantic-body-md-regular-fontSize)
334
- );
335
- line-height: var(
336
- --gse-core-typography-body-md-lineHeight,
337
- var(--gse-semantic-body-md-regular-lineHeight)
338
- );
178
+ font-family: var(--gse-semantic-body-md-regular-fontFamily),
179
+ var(--gse-semantic-theme-fontFamily-body), sans-serif;
180
+ font-size: var(--gse-semantic-body-md-regular-fontSize);
181
+ line-height: var(--gse-semantic-body-md-regular-lineHeight);
339
182
  }
340
183
 
341
184
  @mixin _body-sm {
342
- font-family: var(
343
- --gse-core-typography-body-sm-fontFamily,
344
- var(--gse-semantic-body-sm-regular-fontFamily)
345
- ),
346
- var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)),
347
- sans-serif;
348
- font-size: var(
349
- --gse-core-typography-body-sm-fontSize,
350
- var(--gse-semantic-body-sm-regular-fontSize)
351
- );
352
- line-height: var(
353
- --gse-core-typography-body-sm-lineHeight,
354
- var(--gse-semantic-body-sm-regular-lineHeight)
355
- );
185
+ font-family: var(--gse-semantic-body-sm-regular-fontFamily),
186
+ var(--gse-semantic-theme-fontFamily-body), sans-serif;
187
+ font-size: var(--gse-semantic-body-sm-regular-fontSize);
188
+ line-height: var(--gse-semantic-body-sm-regular-lineHeight);
356
189
  }
357
190
 
358
191
  @mixin body-lg-regular {
359
192
  @include _body-lg;
360
193
 
361
- font-weight: var(
362
- --gse-core-fontWeight-regular,
363
- var(--gse-semantic-body-lg-regular-fontWeight)
364
- );
194
+ font-weight: var(--gse-semantic-body-lg-regular-fontWeight);
365
195
  }
366
196
 
367
197
  @mixin body-lg-semiBold {
368
198
  @include _body-lg;
369
199
 
370
- font-weight: var(
371
- --gse-core-fontWeight-semiBold,
372
- var(--gse-semantic-body-lg-semiBold-fontWeight)
373
- );
200
+ font-weight: var(--gse-semantic-body-lg-semiBold-fontWeight);
374
201
  }
375
202
 
376
203
  @mixin body-lg-bold {
377
204
  @include _body-lg;
378
205
 
379
- font-weight: var(
380
- --gse-core-fontWeight-bold,
381
- var(--gse-semantic-body-lg-bold-fontWeight)
382
- );
206
+ font-weight: var(--gse-semantic-body-lg-bold-fontWeight);
383
207
  }
384
208
 
385
209
  @mixin body-md-regular {
386
210
  @include _body-md;
387
211
 
388
- font-weight: var(
389
- --gse-core-fontWeight-regular,
390
- var(--gse-semantic-body-md-regular-fontWeight)
391
- );
212
+ font-weight: var(--gse-semantic-body-md-regular-fontWeight);
392
213
  }
393
214
 
394
215
  @mixin body-md-semiBold {
395
216
  @include _body-md;
396
217
 
397
- font-weight: var(
398
- --gse-core-fontWeight-semiBold,
399
- var(--gse-semantic-body-md-semiBold-fontWeight)
400
- );
218
+ font-weight: var(--gse-semantic-body-md-semiBold-fontWeight);
401
219
  }
402
220
 
403
221
  @mixin body-md-bold {
404
222
  @include _body-md;
405
223
 
406
- font-weight: var(
407
- --gse-core-fontWeight-bold,
408
- var(--gse-semantic-body-md-bold-fontWeight)
409
- );
224
+ font-weight: var(--gse-semantic-body-md-bold-fontWeight);
410
225
  }
411
226
 
412
227
  @mixin body-sm-regular {
413
228
  @include _body-sm;
414
229
 
415
- font-weight: var(
416
- --gse-core-fontWeight-regular,
417
- var(--gse-semantic-body-sm-regular-fontWeight)
418
- );
230
+ font-weight: var(--gse-semantic-body-sm-regular-fontWeight);
419
231
  }
420
232
 
421
233
  @mixin body-sm-semiBold {
422
234
  @include _body-sm;
423
235
 
424
- font-weight: var(
425
- --gse-core-fontWeight-semiBold,
426
- var(--gse-semantic-body-sm-semiBold-fontWeight)
427
- );
236
+ font-weight: var(--gse-semantic-body-sm-semiBold-fontWeight);
428
237
  }
429
238
 
430
239
  @mixin body-sm-bold {
431
240
  @include _body-sm;
432
241
 
433
- font-weight: var(
434
- --gse-core-fontWeight-bold,
435
- var(--gse-semantic-body-sm-bold-fontWeight)
436
- );
242
+ font-weight: var(--gse-semantic-body-sm-bold-fontWeight);
437
243
  }
438
244
 
439
245
  @mixin ui-button {
440
- font-family: var(
441
- --gse-core-typography-body-md-fontFamily,
442
- var(--gse-semantic-body-md-regular-fontFamily)
443
- ),
444
- var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)),
445
- sans-serif;
446
- font-size: var(
447
- --gse-core-typography-body-md-fontSize,
448
- var(--gse-semantic-body-md-regular-fontSize)
449
- );
246
+ font-family: var(--gse-semantic-body-md-regular-fontFamily),
247
+ var(--gse-semantic-theme-fontFamily-body), sans-serif;
248
+ font-size: var(--gse-semantic-body-md-regular-fontSize);
450
249
  font-weight: var(--gse-core-fontWeight-semiBold);
451
- line-height: var(
452
- --gse-core-typography-body-md-lineHeight,
453
- var(--gse-semantic-body-md-regular-lineHeight)
454
- );
250
+ line-height: var(--gse-semantic-body-md-regular-lineHeight);
455
251
  }
456
252
 
457
253
  @mixin ui-link {
458
- font-family: var(
459
- --gse-core-typography-body-md-fontFamily,
460
- var(--gse-semantic-body-md-regular-fontFamily)
461
- ),
462
- var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)),
463
- sans-serif;
464
- font-size: var(
465
- --gse-core-typography-body-md-fontSize,
466
- var(--gse-semantic-body-md-regular-fontSize)
467
- );
254
+ font-family: var(--gse-semantic-body-md-regular-fontFamily),
255
+ var(--gse-semantic-theme-fontFamily-body), sans-serif;
256
+ font-size: var(--gse-semantic-body-md-regular-fontSize);
468
257
  font-weight: var(--gse-core-fontWeight-regular);
469
- line-height: var(
470
- --gse-core-typography-body-md-lineHeight,
471
- var(--gse-semantic-body-md-regular-lineHeight)
472
- );
258
+ line-height: var(--gse-semantic-body-md-regular-lineHeight);
473
259
  }
474
260
 
475
261
  @mixin ui-label {
476
- font-family: var(
477
- --gse-core-typography-body-sm-fontFamily,
478
- var(--gse-semantic-body-sm-regular-fontFamily)
479
- ),
480
- var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)),
481
- sans-serif;
482
- font-size: var(
483
- --gse-core-typography-body-sm-fontSize,
484
- var(--gse-semantic-body-sm-regular-fontSize)
485
- );
262
+ font-family: var(--gse-semantic-body-sm-regular-fontFamily),
263
+ var(--gse-semantic-theme-fontFamily-body), sans-serif;
264
+ font-size: var(--gse-semantic-body-sm-regular-fontSize);
486
265
  font-weight: var(--gse-core-fontWeight-bold);
487
- line-height: var(
488
- --gse-core-typography-body-sm-lineHeight,
489
- var(--gse-semantic-body-sm-regular-lineHeight)
490
- );
266
+ line-height: var(--gse-semantic-body-sm-regular-lineHeight);
491
267
  }
492
268
 
493
269
  @mixin ui-placeholder {
494
- font-family: var(
495
- --gse-core-typography-body-sm-fontFamily,
496
- var(--gse-semantic-body-sm-regular-fontFamily)
497
- ),
498
- var(--gse-core-fontFamily-body, var(--gse-semantic-theme-fontFamily-body)),
499
- sans-serif;
500
- font-size: var(
501
- --gse-core-typography-body-sm-fontSize,
502
- var(--gse-semantic-body-sm-regular-fontSize)
503
- );
270
+ font-family: var(--gse-semantic-body-sm-regular-fontFamily),
271
+ var(--gse-semantic-theme-fontFamily-body), sans-serif;
272
+ font-size: var(--gse-semantic-body-sm-regular-fontSize);
504
273
  font-weight: var(--gse-core-fontWeight-regular);
505
- line-height: var(
506
- --gse-core-typography-body-sm-lineHeight,
507
- var(--gse-semantic-body-sm-regular-lineHeight)
508
- );
274
+ line-height: var(--gse-semantic-body-sm-regular-lineHeight);
509
275
  }
510
276
 
511
277
  /* Anchor */
512
278
  @mixin ui-anchor {
513
- color: var(
514
- --gse-ui-link-default-foregroundColor,
515
- var(--gse-ui-links-default-foregroundColor)
516
- );
279
+ color: var(--gse-ui-links-default-foregroundColor);
517
280
  text-decoration: underline;
518
281
  border-radius: var(--gse-ui-links-borderRadius);
519
282
 
520
283
  &:hover {
521
- color: var(
522
- --gse-ui-link-hover-foregroundColor,
523
- var(--gse-ui-links-hover-foregroundColor)
524
- );
284
+ color: var(--gse-ui-links-hover-foregroundColor);
525
285
  }
526
286
 
527
287
  &:active {
528
- color: var(
529
- --gse-ui-link-active-foregroundColor,
530
- var(--gse-ui-links-active-foregroundColor)
531
- );
288
+ color: var(--gse-ui-links-active-foregroundColor);
532
289
  }
533
290
 
534
291
  &:visited {
535
- color: var(
536
- --gse-ui-link-visited-foregroundColor,
537
- var(--gse-ui-links-visited-foregroundColor)
538
- );
292
+ color: var(--gse-ui-links-visited-foregroundColor);
539
293
  }
540
294
 
541
295
  &:focus-visible {
package/dist/scss/global.scss CHANGED
@@ -1,4 +1,16 @@
1
- @use '../../../genesys-spark-tokens/dist/css/gse-core.css';
2
- @use '../../../genesys-spark-tokens/dist/css/gse-semantic.css';
1
+ @use '../../../genesys-spark-tokens/dist/scss/gse-flare-dark-core';
2
+ @use '../../../genesys-spark-tokens/dist/scss/gse-flare-dark-semantic';
3
+ @use '../../../genesys-spark-tokens/dist/scss/gse-flare-light-core';
4
+ @use '../../../genesys-spark-tokens/dist/scss/gse-flare-light-semantic';
3
5
  @use 'global-focusable.scss';
4
6
  @use 'global-typography.scss';
7
+
8
+ :root {
9
+ @include gse-flare-light-core.tokens;
10
+ @include gse-flare-light-semantic.tokens;
11
+ }
12
+
13
+ [flare-mode='dark'] {
14
+ @include gse-flare-dark-core.tokens;
15
+ @include gse-flare-dark-semantic.tokens;
16
+ }
package/dist/scss/ui.scss CHANGED
@@ -1,9 +1,10 @@
1
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-actions.css';
2
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-dataDisplay.css';
3
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-feedback.css';
4
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-formControl.css';
5
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-formsAndInputs.css';
6
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-layoutContainer.css';
7
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-navigation.css';
8
- @use '../../../genesys-spark-tokens/dist/css/gse-ui-searchAndFilter.css';
9
- @use '../../../genesys-spark-tokens/dist/css/gse-ui.css';
1
+ @use '../../../genesys-spark-tokens/dist/scss/gse-flare-dark-ui';
2
+ @use '../../../genesys-spark-tokens/dist/scss/gse-flare-light-ui';
3
+
4
+ :root {
5
+ @include gse-flare-light-ui.tokens;
6
+ }
7
+
8
+ [flare-mode='dark'] {
9
+ @include gse-flare-dark-ui.tokens;
10
+ }