@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
@@ -16,29 +16,6 @@
16
16
  --pf-global--link--Color: var(--pf-global--link--Color--light);
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
-
20
- .pf-c-card {
21
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
22
- }
23
-
24
- .pf-c-button {
25
- --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
26
- --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
27
- --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
28
- --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
29
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
30
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
31
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
32
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
33
- --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
34
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
35
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
36
- --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
37
- --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
38
- --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
39
- --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
40
- --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
41
- }
42
19
  }
43
20
 
44
21
  // stylelint-disable
@@ -8,10 +8,9 @@
8
8
 
9
9
  // Quickly modify global styling by enabling or disabling optional features.
10
10
  $pf-global--enable-reset: true !default;
11
+ $pf-global--enable-normalize: true !default;
11
12
  $pf-global--enable-fontawesome-cdn: false !default;
12
13
  $pf-global--disable-fontawesome: false !default;
13
- $pf-global--load-pf-3: false !default;
14
- $pf-global--enable-shield: false !default;
15
14
 
16
15
  // Patternfly uses the default root size of the browser, it assumes a 16px base
17
16
  // since most browser root size is 16. This variables is just to make the
@@ -71,9 +70,9 @@ $pf-global--disabled-color--300: $pf-color-black-200 !default;
71
70
  $pf-global--primary-color--100: $pf-color-blue-400 !default;
72
71
  $pf-global--primary-color--200: $pf-color-blue-500 !default;
73
72
  $pf-global--secondary-color--100: $pf-color-black-600 !default;
74
- $pf-global--default-color--100: $pf-color-cyan-200 !default;
75
- $pf-global--default-color--200: $pf-color-cyan-300 !default;
76
- $pf-global--default-color--300: $pf-color-cyan-500 !default;
73
+ $pf-global--custom-color--100: $pf-color-cyan-200 !default;
74
+ $pf-global--custom-color--200: $pf-color-cyan-300 !default;
75
+ $pf-global--custom-color--300: $pf-color-cyan-500 !default;
77
76
  $pf-global--success-color--100: $pf-color-green-500 !default;
78
77
  $pf-global--success-color--200: $pf-color-green-600 !default;
79
78
  $pf-global--info-color--100: $pf-color-blue-300 !default;
@@ -7,26 +7,4 @@
7
7
  --pf-global--link--Color: #{$pf-global--link--Color};
8
8
  --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
9
9
  --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
10
-
11
- .pf-c-card {
12
- --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
13
- }
14
-
15
- .pf-c-button {
16
- // primary button
17
- --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
18
- --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
19
- --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
20
- --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
21
- --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
22
- --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
23
- --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
24
- --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
25
-
26
- // secondary button
27
- --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
28
- --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
29
- --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
30
- --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
31
- }
32
10
  }
@@ -315,16 +315,16 @@
315
315
  color: var(--pf-global--link--Color--visited) !important;
316
316
  }
317
317
 
318
- .pf-u-default-color-100 {
319
- color: var(--pf-global--default-color--100) !important;
318
+ .pf-u-custom-color-100 {
319
+ color: var(--pf-global--custom-color--100) !important;
320
320
  }
321
321
 
322
- .pf-u-default-color-200 {
323
- color: var(--pf-global--default-color--200) !important;
322
+ .pf-u-custom-color-200 {
323
+ color: var(--pf-global--custom-color--200) !important;
324
324
  }
325
325
 
326
- .pf-u-default-color-300 {
327
- color: var(--pf-global--default-color--300) !important;
326
+ .pf-u-custom-color-300 {
327
+ color: var(--pf-global--custom-color--300) !important;
328
328
  }
329
329
 
330
330
  .pf-u-success-color-100 {
@@ -428,14 +428,14 @@
428
428
  .pf-u-link-color-visited-on-sm {
429
429
  color: var(--pf-global--link--Color--visited) !important;
430
430
  }
431
- .pf-u-default-color-100-on-sm {
432
- color: var(--pf-global--default-color--100) !important;
431
+ .pf-u-custom-color-100-on-sm {
432
+ color: var(--pf-global--custom-color--100) !important;
433
433
  }
434
- .pf-u-default-color-200-on-sm {
435
- color: var(--pf-global--default-color--200) !important;
434
+ .pf-u-custom-color-200-on-sm {
435
+ color: var(--pf-global--custom-color--200) !important;
436
436
  }
437
- .pf-u-default-color-300-on-sm {
438
- color: var(--pf-global--default-color--300) !important;
437
+ .pf-u-custom-color-300-on-sm {
438
+ color: var(--pf-global--custom-color--300) !important;
439
439
  }
440
440
  .pf-u-success-color-100-on-sm {
441
441
  color: var(--pf-global--success-color--100) !important;
@@ -526,14 +526,14 @@
526
526
  .pf-u-link-color-visited-on-md {
527
527
  color: var(--pf-global--link--Color--visited) !important;
528
528
  }
529
- .pf-u-default-color-100-on-md {
530
- color: var(--pf-global--default-color--100) !important;
529
+ .pf-u-custom-color-100-on-md {
530
+ color: var(--pf-global--custom-color--100) !important;
531
531
  }
532
- .pf-u-default-color-200-on-md {
533
- color: var(--pf-global--default-color--200) !important;
532
+ .pf-u-custom-color-200-on-md {
533
+ color: var(--pf-global--custom-color--200) !important;
534
534
  }
535
- .pf-u-default-color-300-on-md {
536
- color: var(--pf-global--default-color--300) !important;
535
+ .pf-u-custom-color-300-on-md {
536
+ color: var(--pf-global--custom-color--300) !important;
537
537
  }
538
538
  .pf-u-success-color-100-on-md {
539
539
  color: var(--pf-global--success-color--100) !important;
@@ -624,14 +624,14 @@
624
624
  .pf-u-link-color-visited-on-lg {
625
625
  color: var(--pf-global--link--Color--visited) !important;
626
626
  }
627
- .pf-u-default-color-100-on-lg {
628
- color: var(--pf-global--default-color--100) !important;
627
+ .pf-u-custom-color-100-on-lg {
628
+ color: var(--pf-global--custom-color--100) !important;
629
629
  }
630
- .pf-u-default-color-200-on-lg {
631
- color: var(--pf-global--default-color--200) !important;
630
+ .pf-u-custom-color-200-on-lg {
631
+ color: var(--pf-global--custom-color--200) !important;
632
632
  }
633
- .pf-u-default-color-300-on-lg {
634
- color: var(--pf-global--default-color--300) !important;
633
+ .pf-u-custom-color-300-on-lg {
634
+ color: var(--pf-global--custom-color--300) !important;
635
635
  }
636
636
  .pf-u-success-color-100-on-lg {
637
637
  color: var(--pf-global--success-color--100) !important;
@@ -722,14 +722,14 @@
722
722
  .pf-u-link-color-visited-on-xl {
723
723
  color: var(--pf-global--link--Color--visited) !important;
724
724
  }
725
- .pf-u-default-color-100-on-xl {
726
- color: var(--pf-global--default-color--100) !important;
725
+ .pf-u-custom-color-100-on-xl {
726
+ color: var(--pf-global--custom-color--100) !important;
727
727
  }
728
- .pf-u-default-color-200-on-xl {
729
- color: var(--pf-global--default-color--200) !important;
728
+ .pf-u-custom-color-200-on-xl {
729
+ color: var(--pf-global--custom-color--200) !important;
730
730
  }
731
- .pf-u-default-color-300-on-xl {
732
- color: var(--pf-global--default-color--300) !important;
731
+ .pf-u-custom-color-300-on-xl {
732
+ color: var(--pf-global--custom-color--300) !important;
733
733
  }
734
734
  .pf-u-success-color-100-on-xl {
735
735
  color: var(--pf-global--success-color--100) !important;
@@ -820,14 +820,14 @@
820
820
  .pf-u-link-color-visited-on-2xl {
821
821
  color: var(--pf-global--link--Color--visited) !important;
822
822
  }
823
- .pf-u-default-color-100-on-2xl {
824
- color: var(--pf-global--default-color--100) !important;
823
+ .pf-u-custom-color-100-on-2xl {
824
+ color: var(--pf-global--custom-color--100) !important;
825
825
  }
826
- .pf-u-default-color-200-on-2xl {
827
- color: var(--pf-global--default-color--200) !important;
826
+ .pf-u-custom-color-200-on-2xl {
827
+ color: var(--pf-global--custom-color--200) !important;
828
828
  }
829
- .pf-u-default-color-300-on-2xl {
830
- color: var(--pf-global--default-color--300) !important;
829
+ .pf-u-custom-color-300-on-2xl {
830
+ color: var(--pf-global--custom-color--300) !important;
831
831
  }
832
832
  .pf-u-success-color-100-on-2xl {
833
833
  color: var(--pf-global--success-color--100) !important;
@@ -953,8 +953,8 @@
953
953
  :where(.pf-theme-dark) .pf-u-color-light-200 {
954
954
  color: var(--pf-global--Color-200) !important;
955
955
  }
956
- :where(.pf-theme-dark) .pf-u-default-color-300 {
957
- color: var(--pf-global--default-color--100) !important;
956
+ :where(.pf-theme-dark) .pf-u-custom-color-300 {
957
+ color: var(--pf-global--custom-color--100) !important;
958
958
  }
959
959
  :where(.pf-theme-dark) .pf-u-success-color-200 {
960
960
  color: var(--pf-global--success-color--100) !important;
@@ -978,8 +978,8 @@
978
978
  :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
979
979
  color: var(--pf-global--Color-200) !important;
980
980
  }
981
- :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
982
- color: var(--pf-global--default-color--100) !important;
981
+ :where(.pf-theme-dark) .pf-u-custom-color-300-on-sm {
982
+ color: var(--pf-global--custom-color--100) !important;
983
983
  }
984
984
  :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
985
985
  color: var(--pf-global--success-color--100) !important;
@@ -1004,8 +1004,8 @@
1004
1004
  :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
1005
1005
  color: var(--pf-global--Color-200) !important;
1006
1006
  }
1007
- :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
1008
- color: var(--pf-global--default-color--100) !important;
1007
+ :where(.pf-theme-dark) .pf-u-custom-color-300-on-md {
1008
+ color: var(--pf-global--custom-color--100) !important;
1009
1009
  }
1010
1010
  :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
1011
1011
  color: var(--pf-global--success-color--100) !important;
@@ -1030,8 +1030,8 @@
1030
1030
  :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
1031
1031
  color: var(--pf-global--Color-200) !important;
1032
1032
  }
1033
- :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
1034
- color: var(--pf-global--default-color--100) !important;
1033
+ :where(.pf-theme-dark) .pf-u-custom-color-300-on-lg {
1034
+ color: var(--pf-global--custom-color--100) !important;
1035
1035
  }
1036
1036
  :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
1037
1037
  color: var(--pf-global--success-color--100) !important;
@@ -1056,8 +1056,8 @@
1056
1056
  :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
1057
1057
  color: var(--pf-global--Color-200) !important;
1058
1058
  }
1059
- :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
1060
- color: var(--pf-global--default-color--100) !important;
1059
+ :where(.pf-theme-dark) .pf-u-custom-color-300-on-xl {
1060
+ color: var(--pf-global--custom-color--100) !important;
1061
1061
  }
1062
1062
  :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
1063
1063
  color: var(--pf-global--success-color--100) !important;
@@ -1082,8 +1082,8 @@
1082
1082
  :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
1083
1083
  color: var(--pf-global--Color-200) !important;
1084
1084
  }
1085
- :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
1086
- color: var(--pf-global--default-color--100) !important;
1085
+ :where(.pf-theme-dark) .pf-u-custom-color-300-on-2xl {
1086
+ color: var(--pf-global--custom-color--100) !important;
1087
1087
  }
1088
1088
  :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
1089
1089
  color: var(--pf-global--success-color--100) !important;
@@ -119,14 +119,14 @@ $pf-u-font-color-options: (
119
119
  link-color-visited: (
120
120
  color var(--pf-global--link--Color--visited)
121
121
  ),
122
- default-color-100: (
123
- color var(--pf-global--default-color--100)
122
+ custom-color-100: (
123
+ color var(--pf-global--custom-color--100)
124
124
  ),
125
- default-color-200: (
126
- color var(--pf-global--default-color--200)
125
+ custom-color-200: (
126
+ color var(--pf-global--custom-color--200)
127
127
  ),
128
- default-color-300: (
129
- color var(--pf-global--default-color--300)
128
+ custom-color-300: (
129
+ color var(--pf-global--custom-color--300)
130
130
  ),
131
131
  success-color-100: (
132
132
  color var(--pf-global--success-color--100)
@@ -12,8 +12,8 @@
12
12
  color-light-200: (
13
13
  color var(--pf-global--Color-200)
14
14
  ),
15
- default-color-300: (
16
- color var(--pf-global--default-color--100)
15
+ custom-color-300: (
16
+ color var(--pf-global--custom-color--100)
17
17
  ),
18
18
  success-color-200: (
19
19
  color var(--pf-global--success-color--100)
Binary file