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

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 (105) 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/Icon/icon.css +3 -3
  20. package/components/Icon/icon.scss +3 -3
  21. package/components/Label/label.css +6 -6
  22. package/components/Label/label.scss +4 -4
  23. package/components/Label/themes/dark/label.scss +2 -2
  24. package/components/LogViewer/log-viewer.css +0 -38
  25. package/components/Login/login.css +0 -40
  26. package/components/Masthead/masthead.css +0 -38
  27. package/components/ModalBox/modal-box.css +3 -3
  28. package/components/ModalBox/modal-box.scss +3 -3
  29. package/components/NotificationDrawer/notification-drawer.css +5 -5
  30. package/components/NotificationDrawer/notification-drawer.scss +5 -5
  31. package/components/Page/page.css +0 -42
  32. package/components/Popover/popover.css +6 -6
  33. package/components/Popover/popover.scss +5 -5
  34. package/components/Popover/themes/dark/popover.scss +1 -1
  35. package/components/Wizard/wizard.css +0 -38
  36. package/docs/components/Alert/examples/Alert.md +15 -15
  37. package/docs/components/AlertGroup/examples/AlertGroup.md +6 -6
  38. package/docs/components/AppLauncher/examples/application-launcher.md +1 -0
  39. package/docs/components/Check/examples/Check.md +1 -0
  40. package/docs/components/ContextSelector/examples/context-selector.md +1 -0
  41. package/docs/components/DatePicker/examples/DatePicker.md +1 -0
  42. package/docs/components/Dropdown/examples/Dropdown.md +1 -0
  43. package/docs/components/FileUpload/examples/FileUpload.md +2 -1
  44. package/docs/components/Form/examples/Form.md +1 -0
  45. package/docs/components/FormControl/examples/FormControl.md +1 -0
  46. package/docs/components/Icon/examples/Icon.md +2 -2
  47. package/docs/components/Menu/examples/Menu.md +1 -0
  48. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -0
  49. package/docs/components/ModalBox/examples/ModalBox.md +8 -8
  50. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -1
  51. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +22 -22
  52. package/docs/components/OptionsMenu/examples/options-menu.md +1 -0
  53. package/docs/components/Popover/examples/Popover.md +9 -9
  54. package/docs/components/Radio/examples/Radio.md +1 -0
  55. package/docs/components/Select/examples/Select.md +1 -0
  56. package/docs/demos/CardView/examples/CardView.md +1 -1
  57. package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
  58. package/docs/demos/Form/examples/BasicForms.md +1 -0
  59. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -30
  60. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  61. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +1 -1
  62. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1 -1
  63. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  64. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  65. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  66. package/docs/utilities/BoxShadow/examples/box-shadow.md +1 -1
  67. package/docs/utilities/Display/examples/Display.md +1 -1
  68. package/docs/utilities/Flex/examples/Flex.md +1 -1
  69. package/docs/utilities/Float/examples/Float.md +1 -1
  70. package/docs/utilities/Sizing/examples/Sizing.md +1 -1
  71. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  72. package/docs/utilities/Text/examples/Text.md +5 -5
  73. package/package.json +1 -1
  74. package/patternfly-addons.css +48 -48
  75. package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +10 -31
  76. package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
  77. package/patternfly-base.css +45 -72
  78. package/{patternfly-no-reset.css → patternfly-no-globals.css} +52 -1237
  79. package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
  80. package/patternfly.css +83 -1274
  81. package/patternfly.min.css +1 -1
  82. package/patternfly.min.css.map +1 -1
  83. package/sass-utilities/placeholders.scss +0 -23
  84. package/sass-utilities/scss-variables.scss +4 -5
  85. package/sass-utilities/themes/dark/placeholders.scss +0 -22
  86. package/utilities/Text/text.css +48 -48
  87. package/utilities/Text/text.scss +6 -6
  88. package/utilities/Text/themes/dark/text.scss +2 -2
  89. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
  90. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
  91. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
  92. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
  93. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
  94. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
  95. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
  96. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
  97. package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
  98. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
  99. package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
  100. package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
  101. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
  102. package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
  103. package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
  104. package/assets/pficon/pficon.woff +0 -0
  105. 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/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);
package/components/Login/login.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-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
11
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
12
- }
13
- .pf-c-login__footer .pf-c-button, .pf-c-login__header .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-login {
33
12
  --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
@@ -306,25 +285,6 @@
306
285
  --pf-global--link--Color--hover: #73bcf7;
307
286
  --pf-global--BackgroundColor--100: #1b1d21;
308
287
  }
309
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
310
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
311
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
312
- }
313
- :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
314
- :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
315
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
316
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
317
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
318
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
319
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
320
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
321
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
322
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
323
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
324
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
325
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
326
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
327
- }
328
288
 
329
289
  :where(.pf-theme-dark) .pf-c-login__header,
330
290
  :where(.pf-theme-dark) .pf-c-login__footer {
package/components/Masthead/masthead.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-masthead .pf-c-button.pf-m-plain .pf-c-card, .pf-c-masthead .pf-c-card {
21
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
22
- }
23
- .pf-c-masthead .pf-c-button.pf-m-plain .pf-c-button, .pf-c-masthead .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-masthead {
43
22
  --pf-c-masthead--PaddingLeft: var(--pf-c-masthead--inset);
@@ -668,23 +647,6 @@
668
647
  --pf-global--link--Color--hover: #73bcf7;
669
648
  --pf-global--BackgroundColor--100: #1b1d21;
670
649
  }
671
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
672
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
673
- }
674
- :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
675
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
676
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
677
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
678
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
679
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
680
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
681
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
682
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
683
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
684
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
685
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
686
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
687
- }
688
650
 
689
651
  :where(.pf-theme-dark) .pf-c-masthead {
690
652
  --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
package/components/ModalBox/modal-box.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
18
18
  --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
19
19
  --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
20
- --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
20
+ --pf-c-modal-box--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
21
21
  --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
22
22
  --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
23
23
  --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
@@ -82,8 +82,8 @@
82
82
  .pf-c-modal-box.pf-m-success {
83
83
  --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
84
84
  }
85
- .pf-c-modal-box.pf-m-default {
86
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
85
+ .pf-c-modal-box.pf-m-custom {
86
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-custom__title-icon--Color);
87
87
  }
88
88
  .pf-c-modal-box.pf-m-info {
89
89
  --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
package/components/ModalBox/modal-box.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
20
20
  --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
21
21
  --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
22
- --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);
22
+ --pf-c-modal-box--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
23
23
 
24
24
  @media (min-width: $pf-global--breakpoint--xl) {
25
25
  --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
@@ -107,8 +107,8 @@
107
107
  --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
108
108
  }
109
109
 
110
- &.pf-m-default {
111
- --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
110
+ &.pf-m-custom {
111
+ --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-custom__title-icon--Color);
112
112
  }
113
113
 
114
114
  &.pf-m-info {
package/components/NotificationDrawer/notification-drawer.css CHANGED
@@ -30,8 +30,8 @@
30
30
  --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
31
31
  --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
32
32
  --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
33
- --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
34
- --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
33
+ --pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-global--custom-color--200);
34
+ --pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor: var(--pf-global--custom-color--200);
35
35
  --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
36
36
  --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
37
37
  --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
@@ -146,9 +146,9 @@
146
146
  --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
147
147
  --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
148
148
  }
149
- .pf-c-notification-drawer__list-item.pf-m-default {
150
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
151
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
149
+ .pf-c-notification-drawer__list-item.pf-m-custom {
150
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor);
151
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
152
152
  }
153
153
  .pf-c-notification-drawer__list-item.pf-m-read {
154
154
  --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -38,8 +38,8 @@
38
38
  --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
39
39
  --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
40
40
  --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
41
- --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
42
- --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
41
+ --pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-global--custom-color--200);
42
+ --pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor: var(--pf-global--custom-color--200);
43
43
  --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
44
44
  --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
45
45
  --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
@@ -183,9 +183,9 @@
183
183
  --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
184
184
  }
185
185
 
186
- &.pf-m-default {
187
- --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
188
- --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
186
+ &.pf-m-custom {
187
+ --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor);
188
+ --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
189
189
  }
190
190
 
191
191
  &.pf-m-read {
package/components/Page/page.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-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
21
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
22
- }
23
- .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .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-page__header-tools-item, .pf-c-page__header-tools-group {
43
22
  --pf-hidden-visible--hidden--Display: none;
@@ -963,27 +942,6 @@
963
942
  --pf-global--link--Color--hover: #73bcf7;
964
943
  --pf-global--BackgroundColor--100: #1b1d21;
965
944
  }
966
- :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card,
967
- :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card,
968
- :where(.pf-theme-dark) .pf-c-page__header .pf-c-card {
969
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
970
- }
971
- :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
972
- :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
973
- :where(.pf-theme-dark) .pf-c-page__header .pf-c-button {
974
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
975
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
976
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
977
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
978
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
979
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
980
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
981
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
982
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
983
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
984
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
985
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
986
- }
987
945
 
988
946
  :where(.pf-theme-dark) .pf-c-page {
989
947
  --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
package/components/Popover/popover.css CHANGED
@@ -7,12 +7,12 @@
7
7
  --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
8
8
  --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
9
9
  --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
10
- --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
10
+ --pf-c-popover--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
11
11
  --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
12
12
  --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
13
13
  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
14
14
  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
15
- --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
15
+ --pf-c-popover--m-custom__title-text--Color: var(--pf-global--custom-color--300);
16
16
  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
17
17
  --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
18
18
  --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -107,9 +107,9 @@
107
107
  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
108
108
  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
109
109
  }
110
- .pf-c-popover.pf-m-default {
111
- --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
112
- --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
110
+ .pf-c-popover.pf-m-custom {
111
+ --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-custom__title-icon--Color);
112
+ --pf-c-popover__title-text--Color: var(--pf-c-popover--m-custom__title-text--Color);
113
113
  }
114
114
  .pf-c-popover.pf-m-info {
115
115
  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
@@ -173,7 +173,7 @@
173
173
  :where(.pf-theme-dark) .pf-c-popover {
174
174
  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
175
175
  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
176
- --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
176
+ --pf-c-popover--m-default__title-text--Color: var(--pf-global--custom-color--200);
177
177
  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
178
178
  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
179
179
  }