@patternfly/patternfly 6.0.0-alpha.26 → 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 (15) hide show
  1. package/components/Accordion/accordion.css +81 -182
  2. package/components/Accordion/accordion.scss +89 -200
  3. package/components/Banner/banner.css +86 -64
  4. package/components/Banner/banner.scss +90 -32
  5. package/docs/components/Accordion/examples/Accordion.md +596 -493
  6. package/docs/components/Banner/examples/Banner.md +48 -25
  7. package/docs/demos/Card/examples/Card.md +2 -2
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +206 -250
  10. package/patternfly-theme-dark-unversioned.css +206 -250
  11. package/patternfly.css +206 -250
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
  14. package/components/Accordion/themes/dark/accordion.scss +0 -9
  15. package/components/Banner/themes/dark/banner.scss +0 -14
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
- }