@patternfly/patternfly 6.0.0-alpha.76 → 6.0.0-alpha.78

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 (49) hide show
  1. package/base/patternfly-variables.css +26 -23
  2. package/base/tokens/_tokens-charts.scss +159 -0
  3. package/base/tokens/_tokens-dark.scss +7 -5
  4. package/base/tokens/_tokens-default.scss +27 -17
  5. package/base/tokens/_tokens-palette.scss +4 -4
  6. package/components/Button/button.css +2 -2
  7. package/components/Button/button.scss +2 -2
  8. package/components/CodeBlock/code-block.css +4 -0
  9. package/components/CodeBlock/code-block.scss +4 -0
  10. package/components/CodeEditor/code-editor.css +91 -73
  11. package/components/CodeEditor/code-editor.scss +99 -82
  12. package/components/FormControl/form-control.css +3 -3
  13. package/components/FormControl/form-control.scss +3 -3
  14. package/components/Icon/icon.css +27 -27
  15. package/components/Icon/icon.scss +27 -27
  16. package/components/Label/label-group.css +1 -1
  17. package/components/Label/label-group.scss +1 -1
  18. package/components/Label/label.css +2 -2
  19. package/components/Label/label.scss +2 -2
  20. package/components/MenuToggle/menu-toggle.css +4 -4
  21. package/components/MenuToggle/menu-toggle.scss +4 -4
  22. package/components/ProgressStepper/progress-stepper.css +2 -2
  23. package/components/ProgressStepper/progress-stepper.scss +2 -2
  24. package/components/Table/table-grid.css +29 -45
  25. package/components/Table/table-grid.scss +40 -53
  26. package/components/Table/table-scrollable.css +6 -6
  27. package/components/Table/table-scrollable.scss +8 -8
  28. package/components/Table/table-tree-view.css +76 -74
  29. package/components/Table/table-tree-view.scss +44 -39
  30. package/components/Table/table.css +54 -74
  31. package/components/Table/table.scss +68 -86
  32. package/components/Tile/tile.css +1 -1
  33. package/components/Tile/tile.scss +1 -1
  34. package/components/TreeView/tree-view.css +76 -97
  35. package/components/TreeView/tree-view.scss +82 -113
  36. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  37. package/docs/components/TreeView/examples/TreeView.md +7 -57
  38. package/package.json +1 -1
  39. package/patternfly-base-no-globals-theme-dark-unversioned.css +26 -23
  40. package/patternfly-base-no-globals.css +26 -23
  41. package/patternfly-base-theme-dark-unversioned.css +26 -23
  42. package/patternfly-base.css +26 -23
  43. package/patternfly-no-globals.css +404 -442
  44. package/patternfly-theme-dark-unversioned.css +404 -442
  45. package/patternfly.css +404 -442
  46. package/patternfly.min.css +1 -1
  47. package/patternfly.min.css.map +1 -1
  48. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  49. package/components/TreeView/themes/dark/tree-view.scss +0 -8
package/base/patternfly-variables.css CHANGED
@@ -309,10 +309,6 @@ html .ws-preview {
309
309
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
310
310
  }
311
311
 
312
- /**
313
- * Do not edit directly
314
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
315
- */
316
312
  :root {
317
313
  --pf-t--color--red--70: #5f0000;
318
314
  --pf-t--color--red--60: #a60000;
@@ -507,10 +503,10 @@ html .ws-preview {
507
503
  --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
508
504
  --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
509
505
  --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
510
- --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
506
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
511
507
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
512
508
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
513
- --pf-t--global--border--width--button--active: var(--pf-t--global--border--width--200);
509
+ --pf-t--global--border--width--button--clicked: var(--pf-t--global--border--width--200);
514
510
  --pf-t--global--border--width--button--hover: var(--pf-t--global--border--width--200);
515
511
  --pf-t--global--border--width--button--default: var(--pf-t--global--border--width--100);
516
512
  --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
@@ -521,7 +517,7 @@ html .ws-preview {
521
517
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
522
518
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
523
519
  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
524
- --pf-t--global--border--width--divider--active: var(--pf-t--global--border--width--100);
520
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
525
521
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
526
522
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
527
523
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
@@ -666,7 +662,6 @@ html .ws-preview {
666
662
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
667
663
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
668
664
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
669
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
670
665
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
671
666
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
672
667
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -678,6 +673,14 @@ html .ws-preview {
678
673
  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
679
674
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
680
675
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
676
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
677
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
678
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
679
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
680
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
681
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
682
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
683
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
681
684
  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
682
685
  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
683
686
  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
@@ -746,10 +749,12 @@ html .ws-preview {
746
749
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
747
750
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
748
751
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
749
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
752
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
750
753
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
751
754
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
752
755
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
756
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
757
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
753
758
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
754
759
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
755
760
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -834,22 +839,18 @@ html .ws-preview {
834
839
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
835
840
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
836
841
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
837
- --pf-t--global--icon--size--body--lg: var(--pf-t--global--font--size--body--lg);
838
- --pf-t--global--icon--size--body--default: var(--pf-t--global--font--size--body--default);
839
- --pf-t--global--icon--size--body--sm: var(--pf-t--global--font--size--body--sm);
840
- --pf-t--global--icon--size--heading--h6: var(--pf-t--global--font--size--heading--h6);
841
- --pf-t--global--icon--size--heading--h5: var(--pf-t--global--font--size--heading--h5);
842
- --pf-t--global--icon--size--heading--h4: var(--pf-t--global--font--size--heading--h4);
843
- --pf-t--global--icon--size--heading--h3: var(--pf-t--global--font--size--heading--h3);
844
- --pf-t--global--icon--size--heading--h2: var(--pf-t--global--font--size--heading--h2);
845
- --pf-t--global--icon--size--heading--h1: var(--pf-t--global--font--size--heading--h1);
842
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
843
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
844
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
845
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
846
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
847
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
848
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
849
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
850
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
846
851
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
847
852
  }
848
853
 
849
- /**
850
- * Do not edit directly
851
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
852
- */
853
854
  :root:where(.pf-v5-theme-dark) {
854
855
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
855
856
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
@@ -1100,6 +1101,8 @@ html .ws-preview {
1100
1101
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
1101
1102
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
1102
1103
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
1104
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
1105
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
1103
1106
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
1104
1107
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
1105
1108
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1192,7 +1195,7 @@ html .ws-preview {
1192
1195
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
1193
1196
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
1194
1197
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
1195
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
1198
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
1196
1199
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
1197
1200
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
1198
1201
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover);
package/base/tokens/_tokens-charts.scss ADDED
@@ -0,0 +1,159 @@
1
+ // /**
2
+ // * Do not edit directly
3
+ // * Generated on Tue, 06 Feb 2024 18:33:23 GMT
4
+ // */
5
+
6
+ :root {
7
+ --pf-t--chart--stroke--width--sm: 2px;
8
+ --pf-t--chart--stroke--width--xs: 1px;
9
+ --pf-t--chart--BorderWidth--lg: 8px;
10
+ --pf-t--chart--BorderWidth--sm: 2px;
11
+ --pf-t--chart--BorderWidth--xs: 1px;
12
+ --pf-t--chart--color--fills-and-strokes--fill--color--white: var(--pf-t--color--white);
13
+ --pf-t--chart--color--fills-and-strokes--fill--color--900: var(--pf-t--color--gray--90);
14
+ --pf-t--chart--color--fills-and-strokes--fill--color--700: var(--pf-t--color--gray--70);
15
+ --pf-t--chart--color--fills-and-strokes--fill--color--500: var(--pf-t--color--gray--50);
16
+ --pf-t--chart--color--fills-and-strokes--fill--color--400: var(--pf-t--color--gray--40);
17
+ --pf-t--chart--color--fills-and-strokes--fill--color--300: var(--pf-t--color--gray--30);
18
+ --pf-t--chart--color--fills-and-strokes--fill--color--200: var(--pf-t--color--gray--20);
19
+ --pf-t--chart--color--fills-and-strokes--fill--color--100: var(--pf-t--color--gray--10);
20
+ --pf-t--chart--color--fills-and-strokes--warning--color--200: var(--pf-t--color--yellow--40);
21
+ --pf-t--chart--color--fills-and-strokes--warning--color--100: var(--pf-t--color--orange--40);
22
+ --pf-t--chart--color--fills-and-strokes--success--color--100: var(--pf-t--color--blue--50);
23
+ --pf-t--chart--color--black--500: var(--pf-t--color--gray--50);
24
+ --pf-t--chart--color--black--400: var(--pf-t--color--gray--40);
25
+ --pf-t--chart--color--black--300: var(--pf-t--color--gray--30);
26
+ --pf-t--chart--color--black--200: var(--pf-t--color--gray--20);
27
+ --pf-t--chart--color--black--100: var(--pf-t--color--gray--10);
28
+ --pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--70);
29
+ --pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--60);
30
+ --pf-t--chart--color--red-orange--300: var(--pf-t--color--red-orange--50);
31
+ --pf-t--chart--color--red-orange--200: var(--pf-t--color--red-orange--40);
32
+ --pf-t--chart--color--red-orange--100: var(--pf-t--color--red-orange--30);
33
+ --pf-t--chart--color--orange--500: var(--pf-t--color--orange--70);
34
+ --pf-t--chart--color--orange--400: var(--pf-t--color--orange--60);
35
+ --pf-t--chart--color--orange--300: var(--pf-t--color--orange--50);
36
+ --pf-t--chart--color--orange--200: var(--pf-t--color--orange--40);
37
+ --pf-t--chart--color--orange--100: var(--pf-t--color--orange--30);
38
+ --pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--60);
39
+ --pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--50);
40
+ --pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--40);
41
+ --pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--30);
42
+ --pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--20);
43
+ --pf-t--chart--color--purple--500: var(--pf-t--color--purple--70);
44
+ --pf-t--chart--color--purple--400: var(--pf-t--color--purple--60);
45
+ --pf-t--chart--color--purple--300: var(--pf-t--color--purple--50);
46
+ --pf-t--chart--color--purple--200: var(--pf-t--color--purple--40);
47
+ --pf-t--chart--color--purple--100: var(--pf-t--color--purple--30);
48
+ --pf-t--chart--color--teal--500: var(--pf-t--color--teal--70);
49
+ --pf-t--chart--color--teal--400: var(--pf-t--color--teal--60);
50
+ --pf-t--chart--color--teal--300: var(--pf-t--color--teal--50);
51
+ --pf-t--chart--color--teal--200: var(--pf-t--color--teal--40);
52
+ --pf-t--chart--color--teal--100: var(--pf-t--color--teal--30);
53
+ --pf-t--chart--color--green--500: var(--pf-t--color--green--70);
54
+ --pf-t--chart--color--green--400: var(--pf-t--color--green--60);
55
+ --pf-t--chart--color--green--300: var(--pf-t--color--green--50);
56
+ --pf-t--chart--color--green--200: var(--pf-t--color--green--40);
57
+ --pf-t--chart--color--green--100: var(--pf-t--color--green--30);
58
+ --pf-t--chart--color--blue--500: var(--pf-t--color--blue--70);
59
+ --pf-t--chart--color--blue--400: var(--pf-t--color--blue--60);
60
+ --pf-t--chart--color--blue--300: var(--pf-t--color--blue--50);
61
+ --pf-t--chart--color--blue--200: var(--pf-t--color--blue--40);
62
+ --pf-t--chart--color--blue--100: var(--pf-t--color--blue--30);
63
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--3500: var(--pf-t--chart--color--black--400);
64
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--3400: var(--pf-t--chart--color--teal--200);
65
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--3300: var(--pf-t--chart--color--orange--400);
66
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--3200: var(--pf-t--chart--color--purple--200);
67
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--3100: var(--pf-t--chart--color--green--400);
68
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--3000: var(--pf-t--chart--color--yellow--200);
69
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2900: var(--pf-t--chart--color--blue--400);
70
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2800: var(--pf-t--chart--color--black--200);
71
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2700: var(--pf-t--chart--color--teal--400);
72
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2600: var(--pf-t--chart--color--orange--200);
73
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2500: var(--pf-t--chart--color--purple--400);
74
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2400: var(--pf-t--chart--color--green--200);
75
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2300: var(--pf-t--chart--color--yellow--400);
76
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2200: var(--pf-t--chart--color--blue--200);
77
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2100: var(--pf-t--chart--color--black--500);
78
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--2000: var(--pf-t--chart--color--teal--100);
79
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1900: var(--pf-t--chart--color--orange--500);
80
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1800: var(--pf-t--chart--color--purple--100);
81
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1700: var(--pf-t--chart--color--green--500);
82
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1600: var(--pf-t--chart--color--yellow--100);
83
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1500: var(--pf-t--chart--color--blue--500);
84
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1400: var(--pf-t--chart--color--black--100);
85
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
86
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1200: var(--pf-t--chart--color--orange--100);
87
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1100: var(--pf-t--chart--color--purple--500);
88
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--1000: var(--pf-t--chart--color--green--100);
89
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--500);
90
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--800: var(--pf-t--chart--color--blue--100);
91
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--700: var(--pf-t--chart--color--black--300);
92
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--600: var(--pf-t--chart--color--teal--300);
93
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--500: var(--pf-t--chart--color--orange--300);
94
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--400: var(--pf-t--chart--color--purple--300);
95
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--300);
96
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
97
+ --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--300);
98
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200);
99
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
100
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
101
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
102
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
103
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--400);
104
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200);
105
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
106
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
107
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
108
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100);
109
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500);
110
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
111
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
112
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
113
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--500);
114
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100);
115
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
116
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
117
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
118
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
119
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
120
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300);
121
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
122
+ --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300);
123
+ --pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
124
+ --pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
125
+ --pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
126
+ --pf-t--chart--theme--colorscales--orange--colorscale--200: var(--pf-t--chart--color--orange--100);
127
+ --pf-t--chart--theme--colorscales--orange--colorscale--100: var(--pf-t--chart--color--orange--300);
128
+ --pf-t--chart--theme--colorscales--purple--colorscale--500: var(--pf-t--chart--color--purple--400);
129
+ --pf-t--chart--theme--colorscales--purple--colorscale--400: var(--pf-t--chart--color--purple--200);
130
+ --pf-t--chart--theme--colorscales--purple--colorscale--300: var(--pf-t--chart--color--purple--500);
131
+ --pf-t--chart--theme--colorscales--purple--colorscale--200: var(--pf-t--chart--color--purple--100);
132
+ --pf-t--chart--theme--colorscales--purple--colorscale--100: var(--pf-t--chart--color--purple--300);
133
+ --pf-t--chart--theme--colorscales--green--colorscale--500: var(--pf-t--chart--color--green--400);
134
+ --pf-t--chart--theme--colorscales--green--colorscale--400: var(--pf-t--chart--color--green--200);
135
+ --pf-t--chart--theme--colorscales--green--colorscale--300: var(--pf-t--chart--color--green--500);
136
+ --pf-t--chart--theme--colorscales--green--colorscale--200: var(--pf-t--chart--color--green--100);
137
+ --pf-t--chart--theme--colorscales--green--colorscale--100: var(--pf-t--chart--color--green--300);
138
+ --pf-t--chart--theme--colorscales--gray--colorscale--500: var(--pf-t--chart--color--black--400);
139
+ --pf-t--chart--theme--colorscales--gray--colorscale--400: var(--pf-t--chart--color--black--200);
140
+ --pf-t--chart--theme--colorscales--gray--colorscale--300: var(--pf-t--chart--color--black--500);
141
+ --pf-t--chart--theme--colorscales--gray--colorscale--200: var(--pf-t--chart--color--black--100);
142
+ --pf-t--chart--theme--colorscales--gray--colorscale--100: var(--pf-t--chart--color--black--300);
143
+ --pf-t--chart--theme--colorscales--yellow--colorscale--500: var(--pf-t--chart--color--yellow--400);
144
+ --pf-t--chart--theme--colorscales--yellow--colorscale--400: var(--pf-t--chart--color--yellow--200);
145
+ --pf-t--chart--theme--colorscales--yellow--colorscale--300: var(--pf-t--chart--color--yellow--500);
146
+ --pf-t--chart--theme--colorscales--yellow--colorscale--200: var(--pf-t--chart--color--yellow--100);
147
+ --pf-t--chart--theme--colorscales--yellow--colorscale--100: var(--pf-t--chart--color--yellow--300);
148
+ --pf-t--chart--theme--colorscales--teal--colorscale--500: var(--pf-t--chart--color--teal--400);
149
+ --pf-t--chart--theme--colorscales--teal--colorscale--400: var(--pf-t--chart--color--teal--200);
150
+ --pf-t--chart--theme--colorscales--teal--colorscale--300: var(--pf-t--chart--color--teal--500);
151
+ --pf-t--chart--theme--colorscales--teal--colorscale--200: var(--pf-t--chart--color--teal--100);
152
+ --pf-t--chart--theme--colorscales--teal--colorscale--100: var(--pf-t--chart--color--teal--300);
153
+ --pf-t--chart--theme--colorscales--blue--colorscale--500: var(--pf-t--chart--color--blue--400);
154
+ --pf-t--chart--theme--colorscales--blue--colorscale--400: var(--pf-t--chart--color--blue--200);
155
+ --pf-t--chart--theme--colorscales--blue--colorscale--300: var(--pf-t--chart--color--blue--500);
156
+ --pf-t--chart--theme--colorscales--blue--colorscale--200: var(--pf-t--chart--color--blue--100);
157
+ --pf-t--chart--theme--colorscales--blue--colorscale--100: var(--pf-t--chart--color--blue--300);
158
+ --pf-t--chart--color--fills-and-strokes--danger--color--100: var(--pf-t--global--color--status--danger--100);
159
+ }
package/base/tokens/_tokens-dark.scss CHANGED
@@ -1,7 +1,7 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
4
- */
1
+ // /**
2
+ // * Do not edit directly
3
+ // * Generated on Tue, 06 Feb 2024 18:33:23 GMT
4
+ // */
5
5
 
6
6
  :root:where(.pf-v5-theme-dark) {
7
7
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -253,6 +253,8 @@
253
253
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
254
254
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
255
255
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
256
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
257
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
256
258
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
257
259
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
258
260
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -345,7 +347,7 @@
345
347
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
346
348
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
347
349
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
348
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
350
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
349
351
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
350
352
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
351
353
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover);
package/base/tokens/_tokens-default.scss CHANGED
@@ -1,6 +1,7 @@
1
- // Do not edit directly
2
- // Generated on Tue, 05 Dec 2023 16:11:05 GMT
3
-
1
+ // /**
2
+ // * Do not edit directly
3
+ // * Generated on Tue, 06 Feb 2024 18:33:23 GMT
4
+ // */
4
5
 
5
6
  :root {
6
7
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
@@ -125,10 +126,10 @@
125
126
  --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
126
127
  --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
127
128
  --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
128
- --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
129
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
129
130
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
130
131
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
131
- --pf-t--global--border--width--button--active: var(--pf-t--global--border--width--200);
132
+ --pf-t--global--border--width--button--clicked: var(--pf-t--global--border--width--200);
132
133
  --pf-t--global--border--width--button--hover: var(--pf-t--global--border--width--200);
133
134
  --pf-t--global--border--width--button--default: var(--pf-t--global--border--width--100);
134
135
  --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
@@ -139,7 +140,7 @@
139
140
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
140
141
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
141
142
  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
142
- --pf-t--global--border--width--divider--active: var(--pf-t--global--border--width--100);
143
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
143
144
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
144
145
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
145
146
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
@@ -284,7 +285,6 @@
284
285
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
285
286
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
286
287
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
287
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
288
288
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
289
289
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
290
290
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -296,6 +296,14 @@
296
296
  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
297
297
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
298
298
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
299
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
300
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
301
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
302
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
303
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
304
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
305
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
306
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
299
307
  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
300
308
  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
301
309
  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
@@ -364,10 +372,12 @@
364
372
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
365
373
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
366
374
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
367
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
375
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
368
376
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
369
377
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
370
378
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
379
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
380
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
371
381
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
372
382
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
373
383
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -452,14 +462,14 @@
452
462
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
453
463
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
454
464
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
455
- --pf-t--global--icon--size--body--lg: var(--pf-t--global--font--size--body--lg);
456
- --pf-t--global--icon--size--body--default: var(--pf-t--global--font--size--body--default);
457
- --pf-t--global--icon--size--body--sm: var(--pf-t--global--font--size--body--sm);
458
- --pf-t--global--icon--size--heading--h6: var(--pf-t--global--font--size--heading--h6);
459
- --pf-t--global--icon--size--heading--h5: var(--pf-t--global--font--size--heading--h5);
460
- --pf-t--global--icon--size--heading--h4: var(--pf-t--global--font--size--heading--h4);
461
- --pf-t--global--icon--size--heading--h3: var(--pf-t--global--font--size--heading--h3);
462
- --pf-t--global--icon--size--heading--h2: var(--pf-t--global--font--size--heading--h2);
463
- --pf-t--global--icon--size--heading--h1: var(--pf-t--global--font--size--heading--h1);
465
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
466
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
467
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
468
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
469
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
470
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
471
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
472
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
473
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
464
474
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
465
475
  }
package/base/tokens/_tokens-palette.scss CHANGED
@@ -1,7 +1,7 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
4
- */
1
+ // /**
2
+ // * Do not edit directly
3
+ // * Generated on Tue, 06 Feb 2024 18:33:23 GMT
4
+ // */
5
5
 
6
6
  :root {
7
7
  --pf-t--color--red--70: #5f0000;
package/components/Button/button.css CHANGED
@@ -21,7 +21,7 @@
21
21
  --pf-v5-c-button--hover--TextDecoration: none;
22
22
  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
23
23
  --pf-v5-c-button--m-clicked--BorderColor: transparent;
24
- --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--active);
24
+ --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
25
25
  --pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
26
26
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
27
27
  --pf-v5-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
@@ -142,7 +142,7 @@
142
142
  --pf-v5-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
143
143
  --pf-v5-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
144
144
  --pf-v5-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
145
- --pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--active);
145
+ --pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
146
146
  --pf-v5-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
147
147
  --pf-v5-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
148
148
  --pf-v5-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
package/components/Button/button.scss CHANGED
@@ -25,7 +25,7 @@
25
25
  // Clicked
26
26
  --#{$button}--m-clicked--BackgroundColor: transparent;
27
27
  --#{$button}--m-clicked--BorderColor: transparent;
28
- --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--active);
28
+ --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
29
29
 
30
30
  // Primary
31
31
  --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -164,7 +164,7 @@
164
164
  --#{$button}--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
165
165
  --#{$button}--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
166
166
  --#{$button}--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
167
- --#{$button}--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--active);
167
+ --#{$button}--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
168
168
  --#{$button}--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
169
169
 
170
170
  // Stateful
package/components/CodeBlock/code-block.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
4
4
  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
5
5
  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
6
+ --pf-v5-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
7
+ --pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
6
8
  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
7
9
  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
8
10
  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -20,6 +22,8 @@
20
22
 
21
23
  .pf-v5-c-code-block__header {
22
24
  display: flex;
25
+ padding-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
26
+ padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
23
27
  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
24
28
  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
25
29
  border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
package/components/CodeBlock/code-block.scss CHANGED
@@ -5,6 +5,8 @@
5
5
  --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
6
6
  --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
7
7
  --#{$code-block}__header--BorderBottomColor: var(--pf-t--global--border--color--default);
8
+ --#{$code-block}__header--PaddingTop: var(--pf-t--global--spacer--xs);
9
+ --#{$code-block}__header--PaddingBottom: var(--pf-t--global--spacer--xs);
8
10
  --#{$code-block}__header--PaddingRight: var(--pf-t--global--spacer--sm);
9
11
  --#{$code-block}__header--PaddingLeft: var(--pf-t--global--spacer--sm);
10
12
  --#{$code-block}__content--PaddingTop: var(--pf-t--global--spacer--md);
@@ -22,6 +24,8 @@
22
24
 
23
25
  .#{$code-block}__header {
24
26
  display: flex;
27
+ padding-block-start: var(--#{$code-block}__header--PaddingTop);
28
+ padding-block-end: var(--#{$code-block}__header--PaddingBottom);
25
29
  padding-inline-start: var(--#{$code-block}__header--PaddingLeft);
26
30
  padding-inline-end: var(--#{$code-block}__header--PaddingRight);
27
31
  border-block-end: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);