@siemens/element-theme 51.0.0-rc.7 → 51.0.0-rc.8

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 (44) hide show
  1. package/package.json +1 -1
  2. package/src/styles/_density.scss +144 -0
  3. package/src/styles/_utilities.scss +5 -0
  4. package/src/styles/_variables.scss +1 -0
  5. package/src/styles/bootstrap/_badges.scss +3 -3
  6. package/src/styles/bootstrap/_button-group.scss +3 -3
  7. package/src/styles/bootstrap/_buttons.scss +2 -3
  8. package/src/styles/bootstrap/_card.scss +18 -11
  9. package/src/styles/bootstrap/_dropdowns.scss +12 -12
  10. package/src/styles/bootstrap/_images.scss +2 -1
  11. package/src/styles/bootstrap/_modals.scss +8 -8
  12. package/src/styles/bootstrap/_pagination.scss +3 -3
  13. package/src/styles/bootstrap/_popovers.scss +1 -1
  14. package/src/styles/bootstrap/_reboot.scss +1 -1
  15. package/src/styles/bootstrap/_tables.scss +8 -6
  16. package/src/styles/bootstrap/_type.scss +65 -1
  17. package/src/styles/bootstrap/_utilities.scss +2 -7
  18. package/src/styles/bootstrap/_variables.scss +60 -54
  19. package/src/styles/bootstrap/forms/_form-check.scss +12 -12
  20. package/src/styles/bootstrap/forms/_form-control.scss +19 -13
  21. package/src/styles/bootstrap/forms/_form-file.scss +2 -2
  22. package/src/styles/bootstrap/forms/_form-label.scss +1 -1
  23. package/src/styles/bootstrap/forms/_form-layout.scss +2 -2
  24. package/src/styles/bootstrap/forms/_validation.scss +2 -2
  25. package/src/styles/bootstrap/mixins/_badge-text.scss +2 -2
  26. package/src/styles/bootstrap/mixins/_form-layout.scss +4 -4
  27. package/src/styles/bootstrap/mixins/_grid.scss +3 -3
  28. package/src/styles/bootstrap/mixins/_utilities.scss +14 -3
  29. package/src/styles/components/_application-header.scss +8 -8
  30. package/src/styles/components/_datatable.scss +20 -8
  31. package/src/styles/components/_layout.scss +12 -12
  32. package/src/styles/components/_list-item.scss +47 -17
  33. package/src/styles/components/_markdown.scss +8 -8
  34. package/src/styles/components/_pills.scss +3 -3
  35. package/src/styles/components/_search-bar.scss +67 -0
  36. package/src/styles/components/_switch.scss +4 -4
  37. package/src/styles/components/_widgets.scss +9 -7
  38. package/src/styles/mixins/_utilities.scss +259 -0
  39. package/src/styles/variables/_si-vars.scss +13 -7
  40. package/src/styles/variables/_sizing.scss +22 -0
  41. package/src/styles/variables/_spacers.scss +53 -25
  42. package/src/styles/variables/_typography.scss +86 -53
  43. package/src/styles/variables/_utilities.scss +56 -51
  44. package/src/theme.scss +3 -0
package/src/styles/variables/_utilities.scss CHANGED
@@ -3,33 +3,15 @@
3
3
  @use '../bootstrap/variables';
4
4
  @use 'spacers';
5
5
 
6
- $negative-spacers: (
7
- // -2px
8
- n1: spacers.$spacer * -0.125,
9
- // -4px
10
- n2: spacers.$spacer * -0.25,
11
- // -6px
12
- n3: spacers.$spacer * -0.375,
13
- // -8px
14
- n4: spacers.$spacer * -0.5,
15
- // -12px
16
- n5: spacers.$spacer * -0.75,
17
- // -16px
18
- n6: spacers.$spacer * -1,
19
- // -20px
20
- n7: spacers.$spacer * -1.25,
21
- // -24px
22
- n8: spacers.$spacer * -1.5,
23
- // -32px
24
- n9: spacers.$spacer * -2,
25
- // -64px
26
- n10: spacers.$spacer * -4,
27
- // -96px
28
- n11: spacers.$spacer * -6
6
+ $_margins-inline: map.merge(
7
+ spacers.$spacers-inline,
8
+ (
9
+ auto: auto
10
+ )
29
11
  );
30
12
 
31
- $_margins: map.merge(
32
- spacers.$spacers,
13
+ $_margins-block: map.merge(
14
+ spacers.$spacers-block,
33
15
  (
34
16
  auto: auto
35
17
  )
@@ -259,9 +241,13 @@ $utilities: (
259
241
  ),
260
242
  'gap': (
261
243
  responsive: true,
262
- property: gap,
244
+ property: row-gap column-gap,
263
245
  class: gap,
264
- values: spacers.$spacers
246
+ values: spacers.$spacers-block,
247
+ property-values: (
248
+ row-gap: spacers.$spacers-block,
249
+ column-gap: spacers.$spacers-inline
250
+ )
265
251
  ),
266
252
  'justify-content': (
267
253
  responsive: true,
@@ -327,131 +313,150 @@ $utilities: (
327
313
  // Margin utilities
328
314
  'margin': (
329
315
  responsive: true,
330
- property: margin,
316
+ property: margin-block margin-inline,
331
317
  class: m,
332
- values: $_margins
318
+ values: $_margins-block,
319
+ property-values: (
320
+ margin-block: $_margins-block,
321
+ margin-inline: $_margins-inline
322
+ )
333
323
  ),
334
324
  'margin-x': (
335
325
  responsive: true,
336
326
  property: margin-inline,
337
327
  class: mx,
338
- values: $_margins
328
+ values: $_margins-inline
339
329
  ),
340
330
  'margin-y': (
341
331
  responsive: true,
342
332
  property: margin-block,
343
333
  class: my,
344
- values: $_margins
334
+ values: $_margins-block
345
335
  ),
346
336
  'margin-top': (
347
337
  responsive: true,
348
338
  property: margin-block-start,
349
339
  class: mt,
350
- values: $_margins
340
+ values: $_margins-block
351
341
  ),
352
342
  'margin-end': (
353
343
  responsive: true,
354
344
  property: margin-inline-end,
355
345
  class: me,
356
- values: $_margins
346
+ values: $_margins-inline
357
347
  ),
358
348
  'margin-bottom': (
359
349
  responsive: true,
360
350
  property: margin-block-end,
361
351
  class: mb,
362
- values: $_margins
352
+ values: $_margins-block
363
353
  ),
364
354
  'margin-start': (
365
355
  responsive: true,
366
356
  property: margin-inline-start,
367
357
  class: ms,
368
- values: $_margins
358
+ values: $_margins-inline
369
359
  ),
370
360
  // Negative margin utilities
371
361
  'negative-margin': (
372
362
  responsive: true,
373
- property: margin,
363
+ negative: true,
364
+ property: margin-block margin-inline,
374
365
  class: m,
375
- values: $negative-spacers
366
+ values: spacers.$negative-spacers-block,
367
+ property-values: (
368
+ margin-block: spacers.$negative-spacers-block,
369
+ margin-inline: spacers.$negative-spacers-inline
370
+ )
376
371
  ),
377
372
  'negative-margin-x': (
378
373
  responsive: true,
374
+ negative: true,
379
375
  property: margin-inline,
380
376
  class: mx,
381
- values: $negative-spacers
377
+ values: spacers.$negative-spacers-inline
382
378
  ),
383
379
  'negative-margin-y': (
384
380
  responsive: true,
381
+ negative: true,
385
382
  property: margin-block,
386
383
  class: my,
387
- values: $negative-spacers
384
+ values: spacers.$negative-spacers-block
388
385
  ),
389
386
  'negative-margin-top': (
390
387
  responsive: true,
388
+ negative: true,
391
389
  property: margin-block-start,
392
390
  class: mt,
393
- values: $negative-spacers
391
+ values: spacers.$negative-spacers-block
394
392
  ),
395
393
  'negative-margin-end': (
396
394
  responsive: true,
395
+ negative: true,
397
396
  property: margin-inline-end,
398
397
  class: me,
399
- values: $negative-spacers
398
+ values: spacers.$negative-spacers-inline
400
399
  ),
401
400
  'negative-margin-start': (
402
401
  responsive: true,
402
+ negative: true,
403
403
  property: margin-inline-start,
404
404
  class: ms,
405
- values: $negative-spacers
405
+ values: spacers.$negative-spacers-inline
406
406
  ),
407
407
  'negative-margin-bottom': (
408
408
  responsive: true,
409
+ negative: true,
409
410
  property: margin-block-end,
410
411
  class: mb,
411
- values: $negative-spacers
412
+ values: spacers.$negative-spacers-block
412
413
  ),
413
414
  // Padding utilities
414
415
  'padding': (
415
416
  responsive: true,
416
- property: padding,
417
+ property: padding-block padding-inline,
417
418
  class: p,
418
- values: spacers.$spacers
419
+ values: spacers.$spacers-block,
420
+ property-values: (
421
+ padding-block: spacers.$spacers-block,
422
+ padding-inline: spacers.$spacers-inline
423
+ )
419
424
  ),
420
425
  'padding-x': (
421
426
  responsive: true,
422
427
  property: padding-inline,
423
428
  class: px,
424
- values: spacers.$spacers
429
+ values: spacers.$spacers-inline
425
430
  ),
426
431
  'padding-y': (
427
432
  responsive: true,
428
433
  property: padding-block,
429
434
  class: py,
430
- values: spacers.$spacers
435
+ values: spacers.$spacers-block
431
436
  ),
432
437
  'padding-top': (
433
438
  responsive: true,
434
439
  property: padding-block-start,
435
440
  class: pt,
436
- values: spacers.$spacers
441
+ values: spacers.$spacers-block
437
442
  ),
438
443
  'padding-end': (
439
444
  responsive: true,
440
445
  property: padding-inline-end,
441
446
  class: pe,
442
- values: spacers.$spacers
447
+ values: spacers.$spacers-inline
443
448
  ),
444
449
  'padding-bottom': (
445
450
  responsive: true,
446
451
  property: padding-block-end,
447
452
  class: pb,
448
- values: spacers.$spacers
453
+ values: spacers.$spacers-block
449
454
  ),
450
455
  'padding-start': (
451
456
  responsive: true,
452
457
  property: padding-inline-start,
453
458
  class: ps,
454
- values: spacers.$spacers
459
+ values: spacers.$spacers-inline
455
460
  ),
456
461
  // Text
457
462
  'font-family': (
package/src/theme.scss CHANGED
@@ -21,6 +21,7 @@ $_themes: () !default;
21
21
 
22
22
  // Load Bootstrap
23
23
  @use 'styles/bootstrap';
24
+ @use 'styles/utilities';
24
25
 
25
26
  // Component extensions
26
27
  @use 'styles/components/application-header';
@@ -35,6 +36,7 @@ $_themes: () !default;
35
36
  @use 'styles/components/list-item';
36
37
  @use 'styles/components/pills';
37
38
  @use 'styles/components/scrollbar';
39
+ @use 'styles/components/search-bar';
38
40
  @use 'styles/components/skeleton';
39
41
  @use 'styles/components/switch';
40
42
  @use 'styles/components/system-banner';
@@ -48,6 +50,7 @@ $_themes: () !default;
48
50
  // theming
49
51
  @use 'styles/themes';
50
52
  @use 'theme/theme-element';
53
+ @use 'styles/density';
51
54
 
52
55
  @include themes.configure($element-theme-default, $element-themes, $element-theme-root-selector);
53
56
  @include themes.make-theme(theme-element.$theme-element-light, 'element');