@patternfly/patternfly 6.0.0-alpha.27 → 6.0.0-alpha.28

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 (10) hide show
  1. package/components/Banner/banner.css +86 -64
  2. package/components/Banner/banner.scss +90 -32
  3. package/docs/components/Banner/examples/Banner.md +48 -25
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +128 -79
  6. package/patternfly-theme-dark-unversioned.css +128 -79
  7. package/patternfly.css +128 -79
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/Banner/themes/dark/banner.scss +0 -14
package/components/Banner/banner.css CHANGED
@@ -1,56 +1,56 @@
1
- .pf-v5-c-banner.pf-m-gold, .pf-v5-c-banner.pf-m-blue {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-banner {
14
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
17
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
18
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
19
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
20
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
- }
24
- .pf-v5-c-banner .pf-v5-c-button {
25
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
- }
27
-
28
- .pf-v5-c-banner {
29
- --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
30
- --pf-v5-c-banner--PaddingRight: var(--pf-v5-global--spacer--md);
31
- --pf-v5-c-banner--md--PaddingRight: var(--pf-v5-global--spacer--lg);
32
- --pf-v5-c-banner--PaddingBottom: var(--pf-v5-global--spacer--xs);
33
- --pf-v5-c-banner--PaddingLeft: var(--pf-v5-global--spacer--md);
34
- --pf-v5-c-banner--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
35
- --pf-v5-c-banner--FontSize: var(--pf-v5-global--FontSize--sm);
36
- --pf-v5-c-banner--Color: var(--pf-v5-global--Color--100);
37
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
1
+ :root {
2
+ --pf-v5-c-banner--PaddingTop: var(--pf-t--global--spacer--xs);
3
+ --pf-v5-c-banner--PaddingRight: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-banner--md--PaddingRight: var(--pf-t--global--spacer--lg);
5
+ --pf-v5-c-banner--PaddingBottom: var(--pf-t--global--spacer--xs);
6
+ --pf-v5-c-banner--PaddingLeft: var(--pf-t--global--spacer--md);
7
+ --pf-v5-c-banner--md--PaddingLeft: var(--pf-t--global--spacer--lg);
8
+ --pf-v5-c-banner--FontSize: var(--pf-t--global--font--size--body);
9
+ --pf-v5-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
10
+ --pf-v5-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
38
11
  --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color);
39
12
  --pf-v5-c-banner--link--TextDecoration: underline;
40
13
  --pf-v5-c-banner--link--hover--Color: var(--pf-v5-c-banner--Color);
41
- --pf-v5-c-banner--link--hover--FontWeight: var(--pf-v5-global--FontWeight--bold);
14
+ --pf-v5-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
42
15
  --pf-v5-c-banner--link--disabled--Color: var(--pf-v5-c-banner--Color);
43
16
  --pf-v5-c-banner--link--disabled--TextDecoration: none;
44
- --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-v5-global--palette--blue-200);
45
- --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-v5-global--danger-color--100);
46
- --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-v5-global--success-color--100);
47
- --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-v5-global--warning-color--100);
48
17
  --pf-v5-c-banner--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--md);
49
- --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
50
- color: var(--pf-v5-global--Color--100);
51
- overflow: hidden;
52
- text-overflow: ellipsis;
53
- white-space: nowrap;
18
+ --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
19
+ --pf-v5-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
20
+ --pf-v5-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
21
+ --pf-v5-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
22
+ --pf-v5-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
23
+ --pf-v5-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
24
+ --pf-v5-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
25
+ --pf-v5-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
26
+ --pf-v5-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
27
+ --pf-v5-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
28
+ --pf-v5-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
29
+ --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
30
+ --pf-v5-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
31
+ --pf-v5-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
32
+ --pf-v5-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
33
+ --pf-v5-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
34
+ --pf-v5-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
35
+ --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
36
+ --pf-v5-c-banner--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
37
+ --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
38
+ --pf-v5-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
39
+ --pf-v5-c-banner--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
40
+ --pf-v5-c-banner--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
41
+ --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
42
+ --pf-v5-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
43
+ --pf-v5-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
44
+ --pf-v5-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
45
+ }
46
+ @media (min-width: 768px) {
47
+ :root {
48
+ --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
49
+ --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
50
+ }
51
+ }
52
+
53
+ .pf-v5-c-banner {
54
54
  flex-shrink: 0;
55
55
  padding-block-start: var(--pf-v5-c-banner--PaddingTop);
56
56
  padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
@@ -61,23 +61,53 @@
61
61
  white-space: nowrap;
62
62
  background-color: var(--pf-v5-c-banner--BackgroundColor);
63
63
  }
64
- @media (min-width: 768px) {
65
- .pf-v5-c-banner {
66
- --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
67
- --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
68
- }
64
+ .pf-v5-c-banner.pf-m-danger {
65
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-danger--BackgroundColor);
66
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-danger--Color);
69
67
  }
70
- .pf-v5-c-banner.pf-m-blue {
71
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
68
+ .pf-v5-c-banner.pf-m-success {
69
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-success--BackgroundColor);
70
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-success--Color);
71
+ }
72
+ .pf-v5-c-banner.pf-m-warning {
73
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-warning--BackgroundColor);
74
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-warning--Color);
75
+ }
76
+ .pf-v5-c-banner.pf-m-info {
77
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor);
78
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-info--Color);
72
79
  }
73
80
  .pf-v5-c-banner.pf-m-red {
74
81
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
82
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-red--Color);
75
83
  }
76
- .pf-v5-c-banner.pf-m-green {
77
- --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
84
+ .pf-v5-c-banner.pf-m-orangered {
85
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-orangered--BackgroundColor);
86
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-orangered--Color);
87
+ }
88
+ .pf-v5-c-banner.pf-m-orange {
89
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-orange--BackgroundColor);
90
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-orange--Color);
78
91
  }
79
92
  .pf-v5-c-banner.pf-m-gold {
80
93
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-gold--BackgroundColor);
94
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-gold--Color);
95
+ }
96
+ .pf-v5-c-banner.pf-m-green {
97
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
98
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-green--Color);
99
+ }
100
+ .pf-v5-c-banner.pf-m-cyan {
101
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-cyan--BackgroundColor);
102
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-cyan--Color);
103
+ }
104
+ .pf-v5-c-banner.pf-m-blue {
105
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
106
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-blue--Color);
107
+ }
108
+ .pf-v5-c-banner.pf-m-purple {
109
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-purple--BackgroundColor);
110
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-purple--Color);
81
111
  }
82
112
  .pf-v5-c-banner.pf-m-sticky {
83
113
  position: sticky;
@@ -111,12 +141,4 @@
111
141
  .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:disabled, .pf-v5-c-banner .pf-v5-c-button.pf-m-inline.pf-m-disabled {
112
142
  --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
113
143
  cursor: not-allowed;
114
- }
115
-
116
- :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
117
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
118
- }
119
-
120
- :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
121
- --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
122
144
  }
package/components/Banner/banner.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  // @debug $banner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$banner} {
4
- --#{$banner}--PaddingTop: var(--#{$pf-global}--spacer--xs);
5
- --#{$banner}--PaddingRight: var(--#{$pf-global}--spacer--md);
6
- --#{$banner}--md--PaddingRight: var(--#{$pf-global}--spacer--lg);
7
- --#{$banner}--PaddingBottom: var(--#{$pf-global}--spacer--xs);
8
- --#{$banner}--PaddingLeft: var(--#{$pf-global}--spacer--md);
9
- --#{$banner}--md--PaddingLeft: var(--#{$pf-global}--spacer--lg);
10
- --#{$banner}--FontSize: var(--#{$pf-global}--FontSize--sm);
11
- --#{$banner}--Color: var(--#{$pf-global}--Color--100);
12
- --#{$banner}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-400);
3
+ :root {
4
+ --#{$banner}--PaddingTop: var(--pf-t--global--spacer--xs);
5
+ --#{$banner}--PaddingRight: var(--pf-t--global--spacer--md);
6
+ --#{$banner}--md--PaddingRight: var(--pf-t--global--spacer--lg);
7
+ --#{$banner}--PaddingBottom: var(--pf-t--global--spacer--xs);
8
+ --#{$banner}--PaddingLeft: var(--pf-t--global--spacer--md);
9
+ --#{$banner}--md--PaddingLeft: var(--pf-t--global--spacer--lg);
10
+ --#{$banner}--FontSize: var(--pf-t--global--font--size--body);
11
+ --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
12
+ --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
13
13
 
14
14
  @media (min-width: $pf-v5-global--breakpoint--md) {
15
15
  --#{$banner}--PaddingRight: var(--#{$banner}--md--PaddingRight);
@@ -20,21 +20,46 @@
20
20
  --#{$banner}--link--Color: var(--#{$banner}--Color);
21
21
  --#{$banner}--link--TextDecoration: underline;
22
22
  --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
23
- --#{$banner}--link--hover--FontWeight: var(--#{$pf-global}--FontWeight--bold);
23
+ --#{$banner}--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
24
24
  --#{$banner}--link--disabled--Color: var(--#{$banner}--Color);
25
25
  --#{$banner}--link--disabled--TextDecoration: none;
26
26
 
27
27
  // modifier variables
28
- --#{$banner}--m-blue--BackgroundColor: var(--#{$pf-global}--palette--blue-200);
29
- --#{$banner}--m-red--BackgroundColor: var(--#{$pf-global}--danger-color--100);
30
- --#{$banner}--m-green--BackgroundColor: var(--#{$pf-global}--success-color--100);
31
- --#{$banner}--m-gold--BackgroundColor: var(--#{$pf-global}--warning-color--100);
32
28
  --#{$banner}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--md);
33
- --#{$banner}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--md-bottom);
34
-
35
- @include pf-v5-t-dark;
36
- @include pf-v5-text-overflow;
29
+ --#{$banner}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
30
+
31
+ // status modifier variables
32
+ --#{$banner}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
33
+ --#{$banner}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
34
+ --#{$banner}--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
35
+ --#{$banner}--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
36
+ --#{$banner}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
37
+ --#{$banner}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
38
+ --#{$banner}--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
39
+ --#{$banner}--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
40
+ --#{$banner}--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
41
+ --#{$banner}--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
42
+
43
+ // nonstatus modifier variables
44
+ --#{$banner}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
45
+ --#{$banner}--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
46
+ --#{$banner}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
47
+ --#{$banner}--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
48
+ --#{$banner}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
49
+ --#{$banner}--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
50
+ --#{$banner}--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
51
+ --#{$banner}--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
52
+ --#{$banner}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
53
+ --#{$banner}--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
54
+ --#{$banner}--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
55
+ --#{$banner}--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
56
+ --#{$banner}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
57
+ --#{$banner}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
58
+ --#{$banner}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
59
+ --#{$banner}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
60
+ }
37
61
 
62
+ .#{$banner} {
38
63
  flex-shrink: 0;
39
64
  padding-block-start: var(--#{$banner}--PaddingTop);
40
65
  padding-block-end: var(--#{$banner}--PaddingBottom);
@@ -45,24 +70,64 @@
45
70
  white-space: nowrap;
46
71
  background-color: var(--#{$banner}--BackgroundColor);
47
72
 
48
- &.pf-m-blue {
49
- @include pf-v5-t-light(false);
73
+ &.pf-m-danger {
74
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor);
75
+ --#{$banner}--Color: var(--#{$banner}--m-danger--Color);
76
+ }
50
77
 
51
- --#{$banner}--BackgroundColor: var(--#{$banner}--m-blue--BackgroundColor);
78
+ &.pf-m-success {
79
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-success--BackgroundColor);
80
+ --#{$banner}--Color: var(--#{$banner}--m-success--Color);
81
+ }
82
+
83
+ &.pf-m-warning {
84
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-warning--BackgroundColor);
85
+ --#{$banner}--Color: var(--#{$banner}--m-warning--Color);
86
+ }
87
+
88
+ &.pf-m-info {
89
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-info--BackgroundColor);
90
+ --#{$banner}--Color: var(--#{$banner}--m-info--Color);
52
91
  }
53
92
 
54
93
  &.pf-m-red {
55
94
  --#{$banner}--BackgroundColor: var(--#{$banner}--m-red--BackgroundColor);
95
+ --#{$banner}--Color: var(--#{$banner}--m-red--Color);
96
+ }
97
+
98
+ &.pf-m-orangered {
99
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-orangered--BackgroundColor);
100
+ --#{$banner}--Color: var(--#{$banner}--m-orangered--Color);
101
+ }
102
+
103
+ &.pf-m-orange {
104
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-orange--BackgroundColor);
105
+ --#{$banner}--Color: var(--#{$banner}--m-orange--Color);
106
+ }
107
+
108
+ &.pf-m-gold {
109
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-gold--BackgroundColor);
110
+ --#{$banner}--Color: var(--#{$banner}--m-gold--Color);
56
111
  }
57
112
 
58
113
  &.pf-m-green {
59
114
  --#{$banner}--BackgroundColor: var(--#{$banner}--m-green--BackgroundColor);
115
+ --#{$banner}--Color: var(--#{$banner}--m-green--Color);
60
116
  }
61
117
 
62
- &.pf-m-gold {
63
- @include pf-v5-t-light(false);
118
+ &.pf-m-cyan {
119
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-cyan--BackgroundColor);
120
+ --#{$banner}--Color: var(--#{$banner}--m-cyan--Color);
121
+ }
64
122
 
65
- --#{$banner}--BackgroundColor: var(--#{$banner}--m-gold--BackgroundColor);
123
+ &.pf-m-blue {
124
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-blue--BackgroundColor);
125
+ --#{$banner}--Color: var(--#{$banner}--m-blue--Color);
126
+ }
127
+
128
+ &.pf-m-purple {
129
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-purple--BackgroundColor);
130
+ --#{$banner}--Color: var(--#{$banner}--m-purple--Color);
66
131
  }
67
132
 
68
133
  &.pf-m-sticky {
@@ -113,10 +178,3 @@
113
178
  }
114
179
  }
115
180
  }
116
-
117
- // stylelint-disable no-invalid-position-at-import-rule
118
- @import "themes/dark/banner";
119
-
120
- @include pf-v5-theme-dark {
121
- @include pf-v5-theme-dark-banner;
122
- }
package/docs/components/Banner/examples/Banner.md CHANGED
@@ -6,27 +6,43 @@ cssPrefix: pf-v5-c-banner
6
6
 
7
7
  ### Basic
8
8
 
9
- Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
9
+ Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
10
10
 
11
11
  ```html
12
12
  <div class="pf-v5-c-banner">Default banner</div>
13
13
 
14
14
  <br />
15
15
 
16
- <div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
16
+ <div class="pf-v5-c-banner pf-m-red">Red banner</div>
17
17
 
18
18
  <br />
19
19
 
20
- <div class="pf-v5-c-banner pf-m-red">Red banner</div>
20
+ <div class="pf-v5-c-banner pf-m-orangered">Orangered banner</div>
21
21
 
22
22
  <br />
23
23
 
24
- <div class="pf-v5-c-banner pf-m-green">Green banner</div>
24
+ <div class="pf-v5-c-banner pf-m-orange">Orange banner</div>
25
25
 
26
26
  <br />
27
27
 
28
28
  <div class="pf-v5-c-banner pf-m-gold">Gold banner</div>
29
29
 
30
+ <br />
31
+
32
+ <div class="pf-v5-c-banner pf-m-green">Green banner</div>
33
+
34
+ <br />
35
+
36
+ <div class="pf-v5-c-banner pf-m-cyan">Cyan banner</div>
37
+
38
+ <br />
39
+
40
+ <div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
41
+
42
+ <br />
43
+
44
+ <div class="pf-v5-c-banner pf-m-purple">Purple banner</div>
45
+
30
46
  ```
31
47
 
32
48
  ### Banner with links
@@ -80,33 +96,33 @@ Banners can be styled with one of 5 different colors. A basic banner should only
80
96
  When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
81
97
 
82
98
  ```html
83
- <div class="pf-v5-c-banner">
99
+ <div class="pf-v5-c-banner pf-m-success">
84
100
  <div class="pf-v5-l-flex pf-m-space-items-sm">
85
101
  <div class="pf-v5-l-flex__item">
86
- <span class="pf-v5-screen-reader">Default banner:</span>
102
+ <span class="pf-v5-screen-reader">Success banner:</span>
87
103
 
88
- <i class="fas fa-bell" aria-hidden="true"></i>
104
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
89
105
  </div>
90
- <div class="pf-v5-l-flex__item">Default banner</div>
106
+ <div class="pf-v5-l-flex__item">Success banner</div>
91
107
  </div>
92
108
  </div>
93
109
 
94
110
  <br />
95
111
 
96
- <div class="pf-v5-c-banner pf-m-blue">
112
+ <div class="pf-v5-c-banner pf-m-warning">
97
113
  <div class="pf-v5-l-flex pf-m-space-items-sm">
98
114
  <div class="pf-v5-l-flex__item">
99
- <span class="pf-v5-screen-reader">Info banner:</span>
115
+ <span class="pf-v5-screen-reader">Warning banner:</span>
100
116
 
101
- <i class="fas fa-info-circle" aria-hidden="true"></i>
117
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
102
118
  </div>
103
- <div class="pf-v5-l-flex__item">Info banner</div>
119
+ <div class="pf-v5-l-flex__item">Warning banner</div>
104
120
  </div>
105
121
  </div>
106
122
 
107
123
  <br />
108
124
 
109
- <div class="pf-v5-c-banner pf-m-red">
125
+ <div class="pf-v5-c-banner pf-m-danger">
110
126
  <div class="pf-v5-l-flex pf-m-space-items-sm">
111
127
  <div class="pf-v5-l-flex__item">
112
128
  <span class="pf-v5-screen-reader">Danger banner:</span>
@@ -119,27 +135,27 @@ When a banner is used to convey status, it is advised to add an icon that also c
119
135
 
120
136
  <br />
121
137
 
122
- <div class="pf-v5-c-banner pf-m-green">
138
+ <div class="pf-v5-c-banner pf-m-info">
123
139
  <div class="pf-v5-l-flex pf-m-space-items-sm">
124
140
  <div class="pf-v5-l-flex__item">
125
- <span class="pf-v5-screen-reader">Success banner:</span>
141
+ <span class="pf-v5-screen-reader">Custom status banner:</span>
126
142
 
127
- <i class="fas fa-check-circle" aria-hidden="true"></i>
143
+ <i class="fas fa-info-circle" aria-hidden="true"></i>
128
144
  </div>
129
- <div class="pf-v5-l-flex__item">Success banner</div>
145
+ <div class="pf-v5-l-flex__item">Info banner</div>
130
146
  </div>
131
147
  </div>
132
148
 
133
149
  <br />
134
150
 
135
- <div class="pf-v5-c-banner pf-m-gold">
151
+ <div class="pf-v5-c-banner pf-m-custom">
136
152
  <div class="pf-v5-l-flex pf-m-space-items-sm">
137
153
  <div class="pf-v5-l-flex__item">
138
- <span class="pf-v5-screen-reader">Warning banner:</span>
154
+ <span class="pf-v5-screen-reader">Custom status banner:</span>
139
155
 
140
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
156
+ <i class="fas fa-bell" aria-hidden="true"></i>
141
157
  </div>
142
- <div class="pf-v5-l-flex__item">Warning banner</div>
158
+ <div class="pf-v5-l-flex__item">Custom banner</div>
143
159
  </div>
144
160
  </div>
145
161
 
@@ -147,15 +163,22 @@ When a banner is used to convey status, it is advised to add an icon that also c
147
163
 
148
164
  ## Documentation
149
165
 
150
- Add a modifier class to the default banner to change the presentation: `.pf-m-blue`, `.pf-m-red`, `.pf-m-green`, or `.pf-m-gold`.
151
-
152
166
  ### Usage
153
167
 
154
168
  | Class | Applied to | Outcome |
155
169
  | -- | -- | -- |
156
170
  | `.pf-v5-c-banner` | `<div>` | Initiates a banner. **Required** |
157
- | `.pf-m-blue` | `.pf-v5-c-banner` | Modifies banner for blue styling. |
158
171
  | `.pf-m-red` | `.pf-v5-c-banner` | Modifies banner for red styling. |
159
- | `.pf-m-green` | `.pf-v5-c-banner` | Modifies banner for green styling. |
172
+ | `.pf-m-orangered` | `.pf-v5-c-banner` | Modifies banner for orangered styling. |
173
+ | `.pf-m-orange` | `.pf-v5-c-banner` | Modifies banner for orange styling. |
160
174
  | `.pf-m-gold` | `.pf-v5-c-banner` | Modifies banner for gold styling. |
175
+ | `.pf-m-green` | `.pf-v5-c-banner` | Modifies banner for green styling. |
176
+ | `.pf-m-cyan` | `.pf-v5-c-banner` | Modifies banner for cyan styling. |
177
+ | `.pf-m-blue` | `.pf-v5-c-banner` | Modifies banner for blue styling. |
178
+ | `.pf-m-purple` | `.pf-v5-c-banner` | Modifies banner for purple styling. |
179
+ | `.pf-m-success` | `.pf-v5-c-banner` | Modifies banner for success status styling. |
180
+ | `.pf-m-warning` | `.pf-v5-c-banner` | Modifies banner for warning status styling. |
181
+ | `.pf-m-danger` | `.pf-v5-c-banner` | Modifies banner for danger status styling. |
182
+ | `.pf-m-info` | `.pf-v5-c-banner` | Modifies banner for info status styling. |
183
+ | `.pf-m-custom` | `.pf-v5-c-banner` | Modifies banner for custom status styling. |
161
184
  | `.pf-m-sticky` | `.pf-v5-c-banner` | Modifies banner to be sticky to the top of its container. |
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": "6.0.0-alpha.27",
4
+ "version": "6.0.0-alpha.28",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {