@patternfly/patternfly 5.0.0-prerelease.3 → 5.0.0-prerelease.4

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 (22) hide show
  1. package/base/patternfly-themes.css +6 -0
  2. package/components/AboutModalBox/about-modal-box.css +6 -0
  3. package/components/Banner/banner.css +6 -0
  4. package/components/LogViewer/log-viewer.css +6 -0
  5. package/components/Login/login.css +7 -0
  6. package/components/Masthead/masthead.css +6 -0
  7. package/components/Page/page.css +8 -0
  8. package/components/Wizard/wizard.css +6 -0
  9. package/package.json +1 -1
  10. package/patternfly-base-no-globals-theme-dark-unversioned.css +3 -0
  11. package/patternfly-base-no-globals.css +3 -0
  12. package/patternfly-base-theme-dark-unversioned.css +3 -0
  13. package/patternfly-base.css +3 -0
  14. package/patternfly-no-globals.css +321 -0
  15. package/patternfly-theme-dark-unversioned.css +321 -0
  16. package/patternfly.css +321 -0
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
  19. package/sass-utilities/placeholders.scss +4 -0
  20. package/sass-utilities/themes/dark/placeholders.scss +4 -0
  21. package/RELEASE-NOTES.md +0 -1815
  22. package/UPGRADE-GUIDE.md +0 -1298
package/base/patternfly-themes.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-v5-t-dark .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  .pf-v5-t-light {
22
25
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
@@ -37,6 +40,9 @@
37
40
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
38
41
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
39
42
  }
43
+ .pf-v5-t-dark .pf-v5-c-button {
44
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
45
+ }
40
46
 
41
47
  .pf-v5-t-dark.pf-m-transparent {
42
48
  background-color: transparent;
package/components/AboutModalBox/about-modal-box.css CHANGED
@@ -7,6 +7,9 @@
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
9
  }
10
+ .pf-v5-c-about-modal-box .pf-v5-c-button {
11
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
12
+ }
10
13
 
11
14
  .pf-v5-c-about-modal-box {
12
15
  --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
@@ -213,6 +216,9 @@
213
216
  --pf-v5-global--link--Color--hover: #73bcf7;
214
217
  --pf-v5-global--BackgroundColor--100: #1b1d21;
215
218
  }
219
+ :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
220
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
221
+ }
216
222
 
217
223
  :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
218
224
  color: var(--pf-v5-global--Color--100);
package/components/Banner/banner.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-v5-c-banner .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  .pf-v5-c-banner {
22
25
  --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
@@ -112,6 +115,9 @@
112
115
  --pf-v5-global--link--Color--hover: #73bcf7;
113
116
  --pf-v5-global--BackgroundColor--100: #1b1d21;
114
117
  }
118
+ :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
119
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
120
+ }
115
121
 
116
122
  :where(.pf-v5-theme-dark) .pf-v5-c-banner {
117
123
  color: var(false);
package/components/LogViewer/log-viewer.css CHANGED
@@ -7,6 +7,9 @@
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
9
  }
10
+ .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
11
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
12
+ }
10
13
 
11
14
  .pf-v5-c-log-viewer {
12
15
  --pf-v5-c-log-viewer--Height: 100%;
@@ -192,6 +195,9 @@
192
195
  --pf-v5-global--link--Color--hover: #73bcf7;
193
196
  --pf-v5-global--BackgroundColor--100: #1b1d21;
194
197
  }
198
+ :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
199
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
200
+ }
195
201
 
196
202
  :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
197
203
  color: var(--pf-v5-global--Color--100);
package/components/Login/login.css CHANGED
@@ -7,6 +7,9 @@
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
9
  }
10
+ .pf-v5-c-login__footer .pf-v5-c-button, .pf-v5-c-login__header .pf-v5-c-button {
11
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
12
+ }
10
13
 
11
14
  .pf-v5-c-login {
12
15
  --pf-v5-c-login--PaddingTop: var(--pf-v5-global--spacer--lg);
@@ -282,6 +285,10 @@
282
285
  --pf-v5-global--link--Color--hover: #73bcf7;
283
286
  --pf-v5-global--BackgroundColor--100: #1b1d21;
284
287
  }
288
+ :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
289
+ :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button {
290
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
291
+ }
285
292
 
286
293
  :where(.pf-v5-theme-dark) .pf-v5-c-login {
287
294
  --pf-v5-c-login__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
package/components/Masthead/masthead.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  .pf-v5-c-masthead {
22
25
  --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
@@ -656,6 +659,9 @@
656
659
  --pf-v5-global--link--Color--hover: #73bcf7;
657
660
  --pf-v5-global--BackgroundColor--100: #1b1d21;
658
661
  }
662
+ :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
663
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
664
+ }
659
665
 
660
666
  :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
661
667
  --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
package/components/Page/page.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  .pf-v5-c-page__header-tools-item, .pf-v5-c-page__header-tools-group {
22
25
  --pf-v5-hidden-visible--hidden--Display: none;
@@ -963,6 +966,11 @@
963
966
  --pf-v5-global--link--Color--hover: #73bcf7;
964
967
  --pf-v5-global--BackgroundColor--100: #1b1d21;
965
968
  }
969
+ :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
970
+ :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
971
+ :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
972
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
973
+ }
966
974
 
967
975
  :where(.pf-v5-theme-dark):root {
968
976
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
package/components/Wizard/wizard.css CHANGED
@@ -7,6 +7,9 @@
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
9
9
  }
10
+ .pf-v5-c-wizard__header .pf-v5-c-button {
11
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
12
+ }
10
13
 
11
14
  .pf-v5-c-wizard {
12
15
  --pf-v5-c-wizard--Height: 100%;
@@ -506,6 +509,9 @@
506
509
  --pf-v5-global--link--Color--hover: #73bcf7;
507
510
  --pf-v5-global--BackgroundColor--100: #1b1d21;
508
511
  }
512
+ :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button {
513
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
514
+ }
509
515
 
510
516
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
511
517
  --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-prerelease.3",
4
+ "version": "5.0.0-prerelease.4",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-t-dark .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  :where(:root) {
22
25
  --pf-v5-global--palette--black-100: #fafafa;
package/patternfly-base-no-globals.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-v5-t-dark .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  :where(:root) {
22
25
  --pf-v5-global--palette--black-100: #fafafa;
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-t-dark .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  :where(:root) {
22
25
  --pf-v5-global--palette--black-100: #fafafa;
package/patternfly-base.css CHANGED
@@ -17,6 +17,9 @@
17
17
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
18
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
19
19
  }
20
+ .pf-v5-t-dark .pf-v5-c-button {
21
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
22
+ }
20
23
 
21
24
  :where(:root) {
22
25
  --pf-v5-global--palette--black-100: #fafafa;