@patternfly/patternfly 5.0.0-alpha.33 → 5.0.0-alpha.35

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 (111) hide show
  1. package/RELEASE-NOTES.md +1 -1
  2. package/assets/pficon/pficon.scss +1 -2
  3. package/base/_fa-icons.scss +1 -2
  4. package/base/_fonts.scss +5 -10
  5. package/base/_globals.scss +91 -85
  6. package/base/_variables.scss +3 -3
  7. package/base/patternfly-fa-icons.css +1 -1
  8. package/base/patternfly-fonts.css +5 -5
  9. package/base/patternfly-globals.css +35 -41
  10. package/base/patternfly-icons.css +2 -2
  11. package/base/patternfly-pf-icons.css +1 -1
  12. package/base/patternfly-themes.css +0 -42
  13. package/base/patternfly-variables.css +3 -3
  14. package/components/AboutModalBox/about-modal-box.css +0 -38
  15. package/components/Alert/alert.css +14 -5
  16. package/components/Alert/alert.scss +18 -4
  17. package/components/Alert/themes/dark/alert.scss +1 -1
  18. package/components/Banner/banner.css +0 -38
  19. package/components/ContextSelector/context-selector.css +8 -5
  20. package/components/ContextSelector/context-selector.scss +8 -5
  21. package/components/Dropdown/dropdown.css +14 -15
  22. package/components/Dropdown/dropdown.scss +15 -18
  23. package/components/Icon/icon.css +3 -3
  24. package/components/Icon/icon.scss +3 -3
  25. package/components/Label/label.css +6 -6
  26. package/components/Label/label.scss +4 -4
  27. package/components/Label/themes/dark/label.scss +2 -2
  28. package/components/LogViewer/log-viewer.css +0 -38
  29. package/components/Login/login.css +0 -40
  30. package/components/Masthead/masthead.css +0 -38
  31. package/components/ModalBox/modal-box.css +3 -3
  32. package/components/ModalBox/modal-box.scss +3 -3
  33. package/components/NotificationDrawer/notification-drawer.css +5 -5
  34. package/components/NotificationDrawer/notification-drawer.scss +5 -5
  35. package/components/OptionsMenu/options-menu.css +8 -5
  36. package/components/OptionsMenu/options-menu.scss +9 -5
  37. package/components/Page/page.css +0 -42
  38. package/components/Popover/popover.css +6 -6
  39. package/components/Popover/popover.scss +5 -5
  40. package/components/Popover/themes/dark/popover.scss +1 -1
  41. package/components/Wizard/wizard.css +0 -38
  42. package/docs/components/Alert/examples/Alert.md +15 -15
  43. package/docs/components/AlertGroup/examples/AlertGroup.md +6 -6
  44. package/docs/components/AppLauncher/examples/application-launcher.md +1 -0
  45. package/docs/components/Check/examples/Check.md +1 -0
  46. package/docs/components/ContextSelector/examples/context-selector.md +1 -0
  47. package/docs/components/DatePicker/examples/DatePicker.md +1 -0
  48. package/docs/components/Dropdown/examples/Dropdown.md +1 -0
  49. package/docs/components/FileUpload/examples/FileUpload.md +2 -1
  50. package/docs/components/Form/examples/Form.md +1 -0
  51. package/docs/components/FormControl/examples/FormControl.md +1 -0
  52. package/docs/components/Icon/examples/Icon.md +2 -2
  53. package/docs/components/Menu/examples/Menu.md +1 -0
  54. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -0
  55. package/docs/components/ModalBox/examples/ModalBox.md +8 -8
  56. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -1
  57. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +22 -22
  58. package/docs/components/OptionsMenu/examples/options-menu.md +1 -0
  59. package/docs/components/Popover/examples/Popover.md +9 -9
  60. package/docs/components/Radio/examples/Radio.md +1 -0
  61. package/docs/components/Select/examples/Select.md +1 -0
  62. package/docs/demos/CardView/examples/CardView.md +1 -1
  63. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  64. package/docs/demos/Form/examples/BasicForms.md +1 -0
  65. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -30
  66. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  67. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +1 -1
  68. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1 -1
  69. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  70. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  71. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  72. package/docs/utilities/BoxShadow/examples/box-shadow.md +1 -1
  73. package/docs/utilities/Display/examples/Display.md +1 -1
  74. package/docs/utilities/Flex/examples/Flex.md +1 -1
  75. package/docs/utilities/Float/examples/Float.md +1 -1
  76. package/docs/utilities/Sizing/examples/Sizing.md +1 -1
  77. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  78. package/docs/utilities/Text/examples/Text.md +5 -5
  79. package/package.json +1 -1
  80. package/patternfly-addons.css +48 -48
  81. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +10 -31
  82. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  83. package/patternfly-base.css +45 -72
  84. package/{patternfly-no-reset.css → patternfly-no-globals.css} +81 -1261
  85. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  86. package/patternfly.css +112 -1298
  87. package/patternfly.min.css +1 -1
  88. package/patternfly.min.css.map +1 -1
  89. package/sass-utilities/placeholders.scss +0 -23
  90. package/sass-utilities/scss-variables.scss +4 -5
  91. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  92. package/utilities/Text/text.css +48 -48
  93. package/utilities/Text/text.scss +6 -6
  94. package/utilities/Text/themes/dark/text.scss +2 -2
  95. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  96. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  97. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  98. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  99. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  100. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  101. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  102. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  103. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  104. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  105. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  106. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  107. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  108. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  109. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  110. package/assets/pficon/pficon.woff +0 -0
  111. package/sass-utilities/bs-variables.scss +0 -709
package/components/Alert/alert.css CHANGED
@@ -17,7 +17,7 @@
17
17
  ". description description"
18
18
  ". actiongroup actiongroup";
19
19
  --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
20
- --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
20
+ --pf-c-alert--BorderTopColor: var(--pf-global--BorderColor--100);
21
21
  --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
22
22
  --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
23
23
  --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
@@ -28,12 +28,12 @@
28
28
  --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
29
29
  --pf-c-alert__toggle-icon--Rotate: 0;
30
30
  --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
31
- --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
31
+ --pf-c-alert__icon--Color: var(--pf-global--Color--100);
32
32
  --pf-c-alert__icon--MarginTop: 0.0625rem;
33
33
  --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
34
34
  --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
35
35
  --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
36
- --pf-c-alert__title--Color: var(--pf-global--default-color--300);
36
+ --pf-c-alert__title--Color: var(--pf-global--Color--100);
37
37
  --pf-c-alert__title--max-lines: 1;
38
38
  --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
39
39
  --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -45,6 +45,9 @@
45
45
  --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md);
46
46
  --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
47
47
  --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
48
+ --pf-c-alert--m-custom--BorderTopColor: var(--pf-global--custom-color--200);
49
+ --pf-c-alert--m-custom__icon--Color: var(--pf-global--custom-color--200);
50
+ --pf-c-alert--m-custom__title--Color: var(--pf-global--custom-color--300);
48
51
  --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
49
52
  --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
50
53
  --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200);
@@ -58,7 +61,7 @@
58
61
  --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100);
59
62
  --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200);
60
63
  --pf-c-alert--m-inline--BoxShadow: none;
61
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
64
+ --pf-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-global--palette--cyan-50);
62
65
  --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
63
66
  --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50);
64
67
  --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50);
@@ -88,6 +91,12 @@
88
91
  border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
89
92
  box-shadow: var(--pf-c-alert--BoxShadow);
90
93
  }
94
+ .pf-c-alert.pf-m-custom {
95
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-custom--BorderTopColor);
96
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-custom__icon--Color);
97
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-custom__title--Color);
98
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-custom--BackgroundColor);
99
+ }
91
100
  .pf-c-alert.pf-m-success {
92
101
  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
93
102
  --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
@@ -201,7 +210,7 @@
201
210
 
202
211
  :where(.pf-theme-dark) .pf-c-alert {
203
212
  --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
204
- --pf-c-alert__title--Color: var(--pf-global--default-color--200);
213
+ --pf-c-alert__title--Color: var(--pf-global--custom-color--200);
205
214
  --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
206
215
  --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
207
216
  --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
package/components/Alert/alert.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  ". description description"
9
9
  ". actiongroup actiongroup";
10
10
  --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md);
11
- --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200);
11
+ --pf-c-alert--BorderTopColor: var(--pf-global--BorderColor--100);
12
12
  --pf-c-alert--PaddingTop: var(--pf-global--spacer--md);
13
13
  --pf-c-alert--PaddingRight: var(--pf-global--spacer--md);
14
14
  --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md);
@@ -25,14 +25,14 @@
25
25
  --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition);
26
26
 
27
27
  // Icon
28
- --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
28
+ --pf-c-alert__icon--Color: var(--pf-global--Color--100);
29
29
  --pf-c-alert__icon--MarginTop: #{pf-size-prem(1px)};
30
30
  --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);
31
31
  --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);
32
32
 
33
33
  // Title
34
34
  --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold);
35
- --pf-c-alert__title--Color: var(--pf-global--default-color--300);
35
+ --pf-c-alert__title--Color: var(--pf-global--Color--100);
36
36
  --pf-c-alert__title--max-lines: 1;
37
37
 
38
38
  // Action
@@ -51,6 +51,11 @@
51
51
  --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base);
52
52
  --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg);
53
53
 
54
+ // Custom
55
+ --pf-c-alert--m-custom--BorderTopColor: var(--pf-global--custom-color--200);
56
+ --pf-c-alert--m-custom__icon--Color: var(--pf-global--custom-color--200);
57
+ --pf-c-alert--m-custom__title--Color: var(--pf-global--custom-color--300);
58
+
54
59
  // Success
55
60
  --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100);
56
61
  --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100);
@@ -73,7 +78,9 @@
73
78
 
74
79
  // Inline
75
80
  --pf-c-alert--m-inline--BoxShadow: none;
76
- --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50);
81
+
82
+ // Inline custom
83
+ --pf-c-alert--m-inline--m-custom--BackgroundColor: var(--pf-global--palette--cyan-50);
77
84
 
78
85
  // Inline success
79
86
  --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50);
@@ -119,6 +126,13 @@
119
126
  border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
120
127
  box-shadow: var(--pf-c-alert--BoxShadow);
121
128
 
129
+ &.pf-m-custom {
130
+ --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-custom--BorderTopColor);
131
+ --pf-c-alert__icon--Color: var(--pf-c-alert--m-custom__icon--Color);
132
+ --pf-c-alert__title--Color: var(--pf-c-alert--m-custom__title--Color);
133
+ --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-custom--BackgroundColor);
134
+ }
135
+
122
136
  &.pf-m-success {
123
137
  --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
124
138
  --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color);
package/components/Alert/themes/dark/alert.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @mixin pf-theme-dark-alert() {
4
4
  .pf-c-alert {
5
5
  --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
6
- --pf-c-alert__title--Color: var(--pf-global--default-color--200);
6
+ --pf-c-alert__title--Color: var(--pf-global--custom-color--200);
7
7
  --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100);
8
8
  --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100);
9
9
  --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100);
package/components/Banner/banner.css CHANGED
@@ -17,27 +17,6 @@
17
17
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
18
18
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
19
19
  }
20
- .pf-c-banner .pf-c-card {
21
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
22
- }
23
- .pf-c-banner .pf-c-button {
24
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
25
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
26
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
27
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
28
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
29
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
30
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
31
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
32
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
33
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
34
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
35
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
36
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
37
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
38
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
39
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
40
- }
41
20
 
42
21
  .pf-c-banner {
43
22
  --pf-c-banner--PaddingTop: var(--pf-global--spacer--xs);
@@ -135,23 +114,6 @@
135
114
  --pf-global--link--Color--hover: #73bcf7;
136
115
  --pf-global--BackgroundColor--100: #1b1d21;
137
116
  }
138
- :where(.pf-theme-dark) .pf-c-banner .pf-c-card {
139
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
140
- }
141
- :where(.pf-theme-dark) .pf-c-banner .pf-c-button {
142
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
143
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
144
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
145
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
146
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
147
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
148
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
149
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
150
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
151
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
152
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
153
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
154
- }
155
117
 
156
118
  :where(.pf-theme-dark) .pf-c-banner {
157
119
  color: var(--pf-global--Color--100);
package/components/ContextSelector/context-selector.css CHANGED
@@ -14,6 +14,7 @@
14
14
  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
15
15
  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
16
16
  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
17
+ --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
17
18
  --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
18
19
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
19
20
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -37,8 +38,8 @@
37
38
  --pf-c-context-selector__toggle-text--FontSize: var(--pf-global--FontSize--md);
38
39
  --pf-c-context-selector__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
39
40
  --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
40
- --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
41
- --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
41
+ --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
42
+ --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
42
43
  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
43
44
  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
44
45
  --pf-c-context-selector__menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -170,8 +171,8 @@
170
171
  .pf-c-context-selector__toggle {
171
172
  position: relative;
172
173
  display: flex;
174
+ column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
173
175
  align-items: center;
174
- justify-content: space-between;
175
176
  width: 100%;
176
177
  padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
177
178
  color: var(--pf-c-context-selector__toggle--Color);
@@ -230,14 +231,16 @@
230
231
  overflow: hidden;
231
232
  text-overflow: ellipsis;
232
233
  white-space: nowrap;
234
+ flex: 1 1 auto;
233
235
  font-size: var(--pf-c-context-selector__toggle-text--FontSize);
234
236
  font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
235
237
  line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
238
+ text-align: left;
236
239
  }
237
240
 
238
241
  .pf-c-context-selector__toggle-icon {
239
- margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
240
- margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
242
+ padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
243
+ padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
241
244
  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
242
245
  }
243
246
 
package/components/ContextSelector/context-selector.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --pf-c-context-selector__toggle--PaddingRight: var(--pf-global--spacer--sm);
8
8
  --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
9
9
  --pf-c-context-selector__toggle--PaddingLeft: var(--pf-global--spacer--sm);
10
+ --pf-c-context-selector__toggle--ColumnGap: var(--pf-global--spacer--sm);
10
11
  --pf-c-context-selector__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
11
12
  --pf-c-context-selector__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
12
13
  --pf-c-context-selector__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -34,8 +35,8 @@
34
35
  --pf-c-context-selector__toggle-text--LineHeight: var(--pf-global--LineHeight--md);
35
36
 
36
37
  // Toggle icon arrow
37
- --pf-c-context-selector__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
38
- --pf-c-context-selector__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
38
+ --pf-c-context-selector__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
39
+ --pf-c-context-selector__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
39
40
  --pf-c-context-selector--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
40
41
  --pf-c-context-selector--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
41
42
 
@@ -194,8 +195,8 @@
194
195
  .pf-c-context-selector__toggle {
195
196
  position: relative;
196
197
  display: flex;
198
+ column-gap: var(--pf-c-context-selector__toggle--ColumnGap);
197
199
  align-items: center;
198
- justify-content: space-between;
199
200
  width: 100%;
200
201
  padding: var(--pf-c-context-selector__toggle--PaddingTop) var(--pf-c-context-selector__toggle--PaddingRight) var(--pf-c-context-selector__toggle--PaddingBottom) var(--pf-c-context-selector__toggle--PaddingLeft);
201
202
  color: var(--pf-c-context-selector__toggle--Color);
@@ -279,15 +280,17 @@
279
280
  .pf-c-context-selector__toggle-text {
280
281
  @include pf-text-overflow;
281
282
 
283
+ flex: 1 1 auto;
282
284
  font-size: var(--pf-c-context-selector__toggle-text--FontSize);
283
285
  font-weight: var(--pf-c-context-selector__toggle-text--FontWeight);
284
286
  line-height: var(--pf-c-context-selector__toggle-text--LineHeight);
287
+ text-align: left;
285
288
  }
286
289
  }
287
290
 
288
291
  .pf-c-context-selector__toggle-icon {
289
- margin-right: var(--pf-c-context-selector__toggle-icon--MarginRight);
290
- margin-left: var(--pf-c-context-selector__toggle-icon--MarginLeft);
292
+ padding-right: var(--pf-c-context-selector__toggle-icon--PaddingRight);
293
+ padding-left: var(--pf-c-context-selector__toggle-icon--PaddingLeft);
291
294
  color: var(--pf-c-context-selector__toggle-icon--Color, inherit);
292
295
  }
293
296
 
package/components/Dropdown/dropdown.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
4
4
  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
5
5
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
6
+ --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
6
7
  --pf-c-dropdown__toggle--MinWidth: 0;
7
8
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
8
9
  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
@@ -87,8 +88,9 @@
87
88
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth: var(--pf-global--BorderWidth--md);
88
89
  --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth: var(--pf-global--BorderWidth--md);
89
90
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
90
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
91
- --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
91
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
92
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
93
+ --pf-c-dropdown__toggle-icon--MarginLeft: 0;
92
94
  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
93
95
  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
94
96
  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -127,11 +129,10 @@
127
129
  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
128
130
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
129
131
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
130
- --pf-c-dropdown__toggle-image--MarginTop: 0;
131
- --pf-c-dropdown__toggle-image--MarginBottom: 0;
132
- --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
133
132
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
134
133
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
134
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
135
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
135
136
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
136
137
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
137
138
  --pf-c-dropdown--c-menu--Top: calc(100% + var(--pf-global--spacer--xs));
@@ -188,8 +189,8 @@
188
189
  .pf-c-dropdown__toggle {
189
190
  position: relative;
190
191
  display: flex;
192
+ column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
191
193
  align-items: center;
192
- justify-content: space-between;
193
194
  min-width: var(--pf-c-dropdown__toggle--MinWidth);
194
195
  max-width: 100%;
195
196
  padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
@@ -222,6 +223,7 @@
222
223
  border: 0;
223
224
  }
224
225
  .pf-c-dropdown__toggle.pf-m-split-button {
226
+ --pf-c-dropdown__toggle--ColumnGap: 0;
225
227
  padding: 0;
226
228
  }
227
229
  .pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
@@ -432,8 +434,9 @@
432
434
  border: 0;
433
435
  }
434
436
  .pf-c-dropdown__toggle > .pf-c-badge {
437
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
438
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
435
439
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
436
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
437
440
  }
438
441
  .pf-c-dropdown__toggle .pf-c-dropdown__toggle-text {
439
442
  overflow: hidden;
@@ -442,11 +445,13 @@
442
445
  }
443
446
 
444
447
  .pf-c-dropdown__toggle-text {
445
- flex: 0 1 auto;
448
+ flex: 1 1 auto;
449
+ text-align: left;
446
450
  }
447
451
 
448
452
  .pf-c-dropdown__toggle-icon {
449
- margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
453
+ padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
454
+ padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
450
455
  margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
451
456
  line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
452
457
  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
@@ -459,14 +464,8 @@
459
464
  display: inline-flex;
460
465
  flex-shrink: 0;
461
466
  align-self: center;
462
- margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
463
- margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
464
- margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
465
467
  line-height: 1;
466
468
  }
467
- .pf-c-dropdown__toggle-image:last-child {
468
- --pf-c-dropdown__toggle-image--MarginRight: 0;
469
- }
470
469
 
471
470
  .pf-c-dropdown__toggle-progress {
472
471
  position: absolute;
package/components/Dropdown/dropdown.scss CHANGED
@@ -6,6 +6,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
6
6
  --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
7
7
  --pf-c-dropdown__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
8
8
  --pf-c-dropdown__toggle--PaddingLeft: var(--pf-global--spacer--sm);
9
+ --pf-c-dropdown__toggle--ColumnGap: var(--pf-global--spacer--sm);
9
10
  --pf-c-dropdown__toggle--MinWidth: 0;
10
11
  --pf-c-dropdown__toggle--FontSize: var(--pf-global--FontSize--md);
11
12
  --pf-c-dropdown__toggle--FontWeight: var(--pf-global--FontWeight--normal);
@@ -110,8 +111,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
110
111
 
111
112
  // Toggle Arrow
112
113
  --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
113
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
114
- --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
114
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
115
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
116
+ --pf-c-dropdown__toggle-icon--MarginLeft: 0;
115
117
  --pf-c-dropdown--m-top--m-expanded__toggle-icon--Rotate: 180deg;
116
118
  --pf-c-dropdown--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
117
119
  --pf-c-dropdown--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -161,16 +163,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
161
163
  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
162
164
  --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
163
165
 
164
- // Image
165
- --pf-c-dropdown__toggle-image--MarginTop: 0; // remove at breaking change
166
- --pf-c-dropdown__toggle-image--MarginBottom: 0; // remove at breaking change
167
- --pf-c-dropdown__toggle-image--MarginRight: var(--pf-global--spacer--sm);
168
-
169
166
  // Divider
170
167
  --pf-c-dropdown--c-divider--MarginTop: var(--pf-global--spacer--sm);
171
168
  --pf-c-dropdown--c-divider--MarginBottom: var(--pf-global--spacer--sm);
172
169
 
173
170
  // badge toggle icon
171
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight: 0;
172
+ --pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft: 0;
174
173
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft: var(--pf-global--spacer--xs);
175
174
  --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight: 0;
176
175
 
@@ -245,8 +244,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
245
244
  .pf-c-dropdown__toggle {
246
245
  position: relative;
247
246
  display: flex;
247
+ column-gap: var(--pf-c-dropdown__toggle--ColumnGap);
248
248
  align-items: center;
249
- justify-content: space-between;
250
249
  min-width: var(--pf-c-dropdown__toggle--MinWidth);
251
250
  max-width: 100%;
252
251
  padding: var(--pf-c-dropdown__toggle--PaddingTop) var(--pf-c-dropdown__toggle--PaddingRight) var(--pf-c-dropdown__toggle--PaddingBottom) var(--pf-c-dropdown__toggle--PaddingLeft);
@@ -287,6 +286,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
287
286
  }
288
287
 
289
288
  &.pf-m-split-button {
289
+ --pf-c-dropdown__toggle--ColumnGap: 0;
290
+
290
291
  padding: 0;
291
292
 
292
293
  &:not(.pf-m-disabled) {
@@ -596,8 +597,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
596
597
  }
597
598
 
598
599
  > .pf-c-badge {
600
+ --pf-c-dropdown__toggle-icon--PaddingRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight);
601
+ --pf-c-dropdown__toggle-icon--PaddingLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft);
599
602
  --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
600
- --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);
601
603
  }
602
604
 
603
605
  .pf-c-dropdown__toggle-text {
@@ -606,11 +608,13 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
606
608
  }
607
609
 
608
610
  .pf-c-dropdown__toggle-text {
609
- flex: 0 1 auto;
611
+ flex: 1 1 auto;
612
+ text-align: left;
610
613
  }
611
614
 
612
615
  .pf-c-dropdown__toggle-icon {
613
- margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
616
+ padding-right: var(--pf-c-dropdown__toggle-icon--PaddingRight);
617
+ padding-left: var(--pf-c-dropdown__toggle-icon--PaddingLeft);
614
618
  margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
615
619
  line-height: var(--pf-c-dropdown__toggle-icon--LineHeight);
616
620
  color: var(--pf-c-dropdown__toggle-icon--Color, inherit);
@@ -626,14 +630,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
626
630
  display: inline-flex;
627
631
  flex-shrink: 0;
628
632
  align-self: center;
629
- margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
630
- margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
631
- margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
632
633
  line-height: 1;
633
-
634
- &:last-child {
635
- --pf-c-dropdown__toggle-image--MarginRight: 0;
636
- }
637
634
  }
638
635
 
639
636
  // Loading spinner
package/components/Icon/icon.css CHANGED
@@ -16,7 +16,7 @@
16
16
  --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
17
17
  --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
18
18
  --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
19
- --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
19
+ --pf-c-icon__content--m-custom--Color: var(--pf-global--custom-color--100);
20
20
  --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
21
21
  --pf-c-icon--m-inline__content--FontSize: 1em;
22
22
  --pf-c-icon__content--svg--VerticalAlign: -.125em;
@@ -107,8 +107,8 @@
107
107
  .pf-c-icon__content.pf-m-info {
108
108
  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
109
109
  }
110
- .pf-c-icon__content.pf-m-default {
111
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
110
+ .pf-c-icon__content.pf-m-custom {
111
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-custom--Color);
112
112
  }
113
113
 
114
114
  .pf-c-icon__progress {
package/components/Icon/icon.scss CHANGED
@@ -25,7 +25,7 @@
25
25
  --pf-c-icon__content--m-warning--Color: var(--pf-global--warning-color--100);
26
26
  --pf-c-icon__content--m-success--Color: var(--pf-global--success-color--100);
27
27
  --pf-c-icon__content--m-info--Color: var(--pf-global--info-color--100);
28
- --pf-c-icon__content--m-default--Color: var(--pf-global--default-color--100);
28
+ --pf-c-icon__content--m-custom--Color: var(--pf-global--custom-color--100);
29
29
  --pf-c-icon__content--FontSize: var(--pf-global--icon--FontSize--md);
30
30
  --pf-c-icon--m-inline__content--FontSize: 1em;
31
31
  --pf-c-icon__content--svg--VerticalAlign: -.125em;
@@ -135,8 +135,8 @@
135
135
  --pf-c-icon__content--Color: var(--pf-c-icon__content--m-info--Color);
136
136
  }
137
137
 
138
- &.pf-m-default {
139
- --pf-c-icon__content--Color: var(--pf-c-icon__content--m-default--Color);
138
+ &.pf-m-custom {
139
+ --pf-c-icon__content--Color: var(--pf-c-icon__content--m-custom--Color);
140
140
  }
141
141
  }
142
142
 
package/components/Label/label.css CHANGED
@@ -72,11 +72,11 @@
72
72
  --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
73
73
  --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
74
74
  --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
75
- --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
76
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
75
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--custom-color--200);
76
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--300);
77
77
  --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
78
- --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
79
- --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
78
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--custom-color--200);
79
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--custom-color--200);
80
80
  --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
81
81
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
82
82
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
@@ -442,8 +442,8 @@ button.pf-c-label__content:focus {
442
442
  --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
443
443
  --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
444
444
  --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
445
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
446
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
445
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--200);
446
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--custom-color--200);
447
447
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
448
448
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
449
449
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
package/components/Label/label.scss CHANGED
@@ -93,11 +93,11 @@
93
93
 
94
94
  // Cyan
95
95
  --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
96
- --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
97
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
96
+ --pf-c-label--m-cyan__icon--Color: var(--pf-global--custom-color--200);
97
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--300);
98
98
  --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
99
- --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
100
- --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
99
+ --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--custom-color--200);
100
+ --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--custom-color--200);
101
101
  --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
102
102
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
103
103
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
package/components/Label/themes/dark/label.scss CHANGED
@@ -38,8 +38,8 @@
38
38
  --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
39
39
  --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
40
40
  --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
41
- --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
42
- --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
41
+ --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--200);
42
+ --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--custom-color--200);
43
43
  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
44
44
  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
45
45
  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
package/components/LogViewer/log-viewer.css CHANGED
@@ -7,27 +7,6 @@
7
7
  --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
8
8
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
9
9
  }
10
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
11
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
12
- }
13
- .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
14
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
15
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
16
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
17
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
18
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
19
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
20
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
21
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
22
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
23
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
24
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
25
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
26
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
27
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
28
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
29
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
30
- }
31
10
 
32
11
  .pf-c-log-viewer {
33
12
  --pf-c-log-viewer--Height: 100%;
@@ -216,23 +195,6 @@
216
195
  --pf-global--link--Color--hover: #73bcf7;
217
196
  --pf-global--BackgroundColor--100: #1b1d21;
218
197
  }
219
- :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
220
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
221
- }
222
- :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
223
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
224
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
225
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
226
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
227
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
228
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
229
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
230
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
231
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
232
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
233
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
234
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
235
- }
236
198
 
237
199
  :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
238
200
  color: var(--pf-global--Color--100);