@patternfly/patternfly 6.0.0-alpha.43 → 6.0.0-alpha.45

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 (12) hide show
  1. package/components/Panel/panel.css +27 -23
  2. package/components/Panel/panel.scss +29 -26
  3. package/components/Spinner/spinner.css +13 -34
  4. package/components/Spinner/spinner.scss +16 -47
  5. package/docs/components/Panel/examples/Panel.md +12 -0
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +40 -61
  8. package/patternfly-theme-dark-unversioned.css +40 -61
  9. package/patternfly.css +40 -61
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Panel/themes/dark/panel.scss +0 -7
package/components/Panel/panel.css CHANGED
@@ -1,34 +1,39 @@
1
+ :root,
1
2
  .pf-v5-c-panel {
2
3
  --pf-v5-c-panel--Width: auto;
3
4
  --pf-v5-c-panel--MinWidth: auto;
4
5
  --pf-v5-c-panel--MaxWidth: none;
5
6
  --pf-v5-c-panel--ZIndex: auto;
6
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
8
  --pf-v5-c-panel--BoxShadow: none;
8
9
  --pf-v5-c-panel--before--BorderWidth: 0;
9
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
10
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
12
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
13
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
14
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
15
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
16
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
17
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
10
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
11
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
13
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
14
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
15
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
16
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
18
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
19
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
18
20
  --pf-v5-c-panel__main--MaxHeight: none;
19
21
  --pf-v5-c-panel__main--Overflow: visible;
20
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
21
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
23
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
24
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
25
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
26
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
27
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
23
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
24
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
25
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
26
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
27
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
28
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
29
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
28
30
  --pf-v5-c-panel__footer--BoxShadow: none;
29
31
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
30
32
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
31
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
33
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
34
+ }
35
+
36
+ .pf-v5-c-panel {
32
37
  position: relative;
33
38
  z-index: var(--pf-v5-c-panel--ZIndex);
34
39
  width: var(--pf-v5-c-panel--Width);
@@ -47,6 +52,9 @@
47
52
  .pf-v5-c-panel.pf-m-bordered {
48
53
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
49
54
  }
55
+ .pf-v5-c-panel.pf-m-secondary {
56
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
57
+ }
50
58
  .pf-v5-c-panel.pf-m-raised {
51
59
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
52
60
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -83,8 +91,4 @@
83
91
  padding-inline-start: var(--pf-v5-c-panel__footer--PaddingLeft);
84
92
  padding-inline-end: var(--pf-v5-c-panel__footer--PaddingRight);
85
93
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
86
- }
87
-
88
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
89
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
90
94
  }
package/components/Panel/panel.scss CHANGED
@@ -1,53 +1,59 @@
1
1
  // @debug $panel; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$panel} {
4
5
  --#{$panel}--Width: auto;
5
6
  --#{$panel}--MinWidth: auto;
6
7
  --#{$panel}--MaxWidth: none;
7
8
  --#{$panel}--ZIndex: auto;
8
- --#{$panel}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
9
+ --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9
10
  --#{$panel}--BoxShadow: none;
10
11
 
11
12
  // border
12
13
  --#{$panel}--before--BorderWidth: 0;
13
- --#{$panel}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
14
+ --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--default);
15
+
16
+ // secondary modifier
17
+ --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14
18
 
15
19
  // bordered
16
- --#{$panel}--m-bordered--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
20
+ --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
17
21
 
18
22
  // raised
19
- --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
20
- --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm);
21
- --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
23
+ --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
24
+ --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
25
+ --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22
26
 
23
27
  // header
24
- --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
25
- --#{$panel}__header--PaddingRight: var(--#{$pf-global}--spacer--md);
26
- --#{$panel}__header--PaddingBottom: var(--#{$pf-global}--spacer--md);
27
- --#{$panel}__header--PaddingLeft: var(--#{$pf-global}--spacer--md);
28
+ --#{$panel}__header--PaddingTop: var(--pf-t--global--spacer--md);
29
+ --#{$panel}__header--PaddingRight: var(--pf-t--global--spacer--md);
30
+ --#{$panel}__header--PaddingBottom: var(--pf-t--global--spacer--md);
31
+ --#{$panel}__header--PaddingLeft: var(--pf-t--global--spacer--md);
28
32
 
29
33
  // main
30
34
  --#{$panel}__main--MaxHeight: none;
31
35
  --#{$panel}__main--Overflow: visible;
32
36
 
33
37
  // body
34
- --#{$panel}__main-body--PaddingTop: var(--#{$pf-global}--spacer--md);
35
- --#{$panel}__main-body--PaddingRight: var(--#{$pf-global}--spacer--md);
36
- --#{$panel}__main-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
37
- --#{$panel}__main-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
38
+ --#{$panel}__main-body--PaddingTop: var(--pf-t--global--spacer--md);
39
+ --#{$panel}__main-body--PaddingRight: var(--pf-t--global--spacer--md);
40
+ --#{$panel}__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
41
+ --#{$panel}__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
38
42
 
39
43
  // footer
40
- --#{$panel}__footer--PaddingTop: var(--#{$pf-global}--spacer--md);
41
- --#{$panel}__footer--PaddingRight: var(--#{$pf-global}--spacer--md);
42
- --#{$panel}__footer--PaddingBottom: var(--#{$pf-global}--spacer--md);
43
- --#{$panel}__footer--PaddingLeft: var(--#{$pf-global}--spacer--md);
44
+ --#{$panel}__footer--PaddingTop: var(--pf-t--global--spacer--md);
45
+ --#{$panel}__footer--PaddingRight: var(--pf-t--global--spacer--md);
46
+ --#{$panel}__footer--PaddingBottom: var(--pf-t--global--spacer--md);
47
+ --#{$panel}__footer--PaddingLeft: var(--pf-t--global--spacer--md);
44
48
  --#{$panel}__footer--BoxShadow: none;
45
49
 
46
50
  // scrollable
47
51
  --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
48
52
  --#{$panel}--m-scrollable__main--Overflow: auto;
49
- --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-v5-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides
53
+ --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
54
+ }
50
55
 
56
+ .#{$panel} {
51
57
  position: relative;
52
58
  z-index: var(--#{$panel}--ZIndex);
53
59
  width: var(--#{$panel}--Width);
@@ -68,6 +74,10 @@
68
74
  --#{$panel}--before--BorderWidth: var(--#{$panel}--m-bordered--before--BorderWidth);
69
75
  }
70
76
 
77
+ &.pf-m-secondary {
78
+ --#{$panel}--BackgroundColor: var(--#{$panel}--m-secondary--BackgroundColor);
79
+ }
80
+
71
81
  &.pf-m-raised {
72
82
  --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
73
83
  --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
@@ -107,10 +117,3 @@
107
117
  padding-inline-end: var(--#{$panel}__footer--PaddingRight);
108
118
  box-shadow: var(--#{$panel}__footer--BoxShadow);
109
119
  }
110
-
111
- // stylelint-disable no-invalid-position-at-import-rule
112
- @import "themes/dark/panel";
113
-
114
- @include pf-v5-theme-dark {
115
- @include pf-v5-theme-dark-panel;
116
- }
package/components/Spinner/spinner.css CHANGED
@@ -1,13 +1,18 @@
1
1
  :root,
2
2
  .pf-v5-c-spinner {
3
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
3
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
4
4
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
5
5
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
6
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
7
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
8
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
9
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
10
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
6
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
7
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
8
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
9
+ --pf-v5-c-spinner--StrokeWidth: 10;
10
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
11
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
12
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
13
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
14
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
15
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
11
16
  --pf-v5-c-spinner--m-inline--diameter: 1em;
12
17
  }
13
18
 
@@ -15,6 +20,7 @@
15
20
  width: var(--pf-v5-c-spinner--Width);
16
21
  height: var(--pf-v5-c-spinner--Height);
17
22
  overflow: hidden;
23
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
18
24
  }
19
25
  .pf-v5-c-spinner.pf-m-inline {
20
26
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -32,33 +38,6 @@
32
38
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
33
39
  }
34
40
 
35
- svg.pf-v5-c-spinner {
36
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
37
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
38
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
39
- --pf-v5-c-spinner--stroke-width: 10;
40
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
41
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
42
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
43
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
44
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
45
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
46
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
47
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
48
- }
49
- svg.pf-v5-c-spinner.pf-m-sm {
50
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
51
- }
52
- svg.pf-v5-c-spinner.pf-m-md {
53
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
54
- }
55
- svg.pf-v5-c-spinner.pf-m-lg {
56
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
57
- }
58
- svg.pf-v5-c-spinner.pf-m-xl {
59
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
60
- }
61
-
62
41
  .pf-v5-c-spinner__path {
63
42
  width: 100%;
64
43
  height: 100%;
@@ -66,7 +45,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
66
45
  stroke-dasharray: 283;
67
46
  stroke-dashoffset: 280;
68
47
  stroke-linecap: round;
69
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
48
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
70
49
  transform-origin: 50% 50%;
71
50
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
72
51
  }
package/components/Spinner/spinner.scss CHANGED
@@ -2,17 +2,24 @@
2
2
 
3
3
  :root,
4
4
  .#{$spinner} {
5
- --#{$spinner}--diameter: var(--#{$pf-global}--icon--FontSize--xl);
5
+ --#{$spinner}--diameter: var(--pf-t--global--icon--size--2xl);
6
6
  --#{$spinner}--Width: var(--#{$spinner}--diameter);
7
7
  --#{$spinner}--Height: var(--#{$spinner}--diameter);
8
- --#{$spinner}--Color: var(--#{$pf-global}--primary-color--100);
8
+ --#{$spinner}--Color: var(--pf-t--global--icon--color--brand--default);
9
+ --#{$spinner}--AnimationDuration: 1.4s;
10
+ --#{$spinner}--AnimationTimingFunction: linear;
11
+ --#{$spinner}--StrokeWidth: 10;
9
12
 
13
+ // path
14
+ --#{$spinner}__path--StrokeWidth: var(--#{$spinner}--StrokeWidth);
15
+ --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
16
+
10
17
  // sizes
11
- --#{$spinner}--m-sm--diameter: var(--#{$pf-global}--icon--FontSize--sm);
12
- --#{$spinner}--m-md--diameter: var(--#{$pf-global}--icon--FontSize--md);
13
- --#{$spinner}--m-lg--diameter: var(--#{$pf-global}--icon--FontSize--lg);
14
- --#{$spinner}--m-xl--diameter: var(--#{$pf-global}--icon--FontSize--xl);
15
-
18
+ --#{$spinner}--m-sm--diameter: var(--pf-t--global--icon--size--md);
19
+ --#{$spinner}--m-md--diameter: var(--pf-t--global--icon--size--lg);
20
+ --#{$spinner}--m-lg--diameter: var(--pf-t--global--icon--size--xl);
21
+ --#{$spinner}--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
22
+
16
23
  // inline
17
24
  --#{$spinner}--m-inline--diameter: 1em;
18
25
  }
@@ -21,6 +28,7 @@
21
28
  width: var(--#{$spinner}--Width);
22
29
  height: var(--#{$spinner}--Height);
23
30
  overflow: hidden;
31
+ animation: #{$spinner}-animation-rotate calc(var(--#{$spinner}--AnimationDuration) * 2) var(--#{$spinner}--AnimationTimingFunction) infinite;
24
32
 
25
33
  // Modifiers change the variables for size variations
26
34
  &.pf-m-inline {
@@ -44,45 +52,6 @@
44
52
  }
45
53
  }
46
54
 
47
- // stylelint-disable selector-no-qualifying-type
48
- svg.#{$spinner} {
49
- --#{$spinner}--diameter: var(--#{$pf-global}--icon--FontSize--xl);
50
- --#{$spinner}--AnimationDuration: 1.4s;
51
- --#{$spinner}--AnimationTimingFunction: linear;
52
- --#{$spinner}--stroke-width: 10;
53
-
54
- // path
55
- --#{$spinner}__path--Stroke: var(--#{$spinner}--Color);
56
- --#{$spinner}__path--StrokeWidth: var(--#{$spinner}--stroke-width);
57
- --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
58
-
59
- // size modifiers
60
- --#{$spinner}--m-sm--diameter: var(--#{$pf-global}--icon--FontSize--sm);
61
- --#{$spinner}--m-md--diameter: var(--#{$pf-global}--icon--FontSize--md);
62
- --#{$spinner}--m-lg--diameter: var(--#{$pf-global}--icon--FontSize--lg);
63
- --#{$spinner}--m-xl--diameter: var(--#{$pf-global}--icon--FontSize--xl);
64
-
65
- animation: #{$spinner}-animation-rotate calc(var(--#{$spinner}--AnimationDuration) * 2) var(--#{$spinner}--AnimationTimingFunction) infinite;
66
-
67
- // Modifiers change the variables for size variations
68
- &.pf-m-sm {
69
- --#{$spinner}--diameter: var(--#{$spinner}--m-sm--diameter);
70
- }
71
-
72
- &.pf-m-md {
73
- --#{$spinner}--diameter: var(--#{$spinner}--m-md--diameter);
74
- }
75
-
76
- &.pf-m-lg {
77
- --#{$spinner}--diameter: var(--#{$spinner}--m-lg--diameter);
78
- }
79
-
80
- &.pf-m-xl {
81
- --#{$spinner}--diameter: var(--#{$spinner}--m-xl--diameter);
82
- }
83
- }
84
- // stylelint-enable
85
-
86
55
  .#{$spinner}__path {
87
56
  width: 100%;
88
57
  height: 100%;
@@ -90,7 +59,7 @@ svg.#{$spinner} {
90
59
  stroke-dasharray: 283;
91
60
  stroke-dashoffset: 280;
92
61
  stroke-linecap: round;
93
- stroke-width: var(--#{$spinner}--stroke-width);
62
+ stroke-width: var(--#{$spinner}--StrokeWidth);
94
63
  transform-origin: 50% 50%;
95
64
  animation: #{$spinner}-animation-dash var(--#{$spinner}--AnimationDuration) var(--#{$spinner}__path--AnimationTimingFunction) infinite;
96
65
  }
package/docs/components/Panel/examples/Panel.md CHANGED
@@ -15,6 +15,17 @@ cssPrefix: pf-v5-c-panel
15
15
 
16
16
  ```
17
17
 
18
+ ### Secondary
19
+
20
+ ```html
21
+ <div class="pf-v5-c-panel pf-m-secondary">
22
+ <div class="pf-v5-c-panel__main">
23
+ <div class="pf-v5-c-panel__main-body">Main content with secondary styling</div>
24
+ </div>
25
+ </div>
26
+
27
+ ```
28
+
18
29
  ### Header
19
30
 
20
31
  ```html
@@ -160,3 +171,4 @@ cssPrefix: pf-v5-c-panel
160
171
  | `.pf-m-bordered` | `.pf-v5-c-panel` | Modifies the panel for bordered styles. |
161
172
  | `.pf-m-raised` | `.pf-v5-c-panel` | Modifies the panel for raised styles. |
162
173
  | `.pf-m-scrollable` | `.pf-v5-c-panel` | Modifies the panel for scrollable styles. |
174
+ | `.pf-m-secondary` | `.pf-v5-c-panel` | Modifies the panel for secondary styles. |
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.43",
4
+ "version": "6.0.0-alpha.45",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -22582,37 +22582,42 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22582
22582
  }
22583
22583
  }
22584
22584
 
22585
+ :root,
22585
22586
  .pf-v5-c-panel {
22586
22587
  --pf-v5-c-panel--Width: auto;
22587
22588
  --pf-v5-c-panel--MinWidth: auto;
22588
22589
  --pf-v5-c-panel--MaxWidth: none;
22589
22590
  --pf-v5-c-panel--ZIndex: auto;
22590
- --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22591
+ --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
22591
22592
  --pf-v5-c-panel--BoxShadow: none;
22592
22593
  --pf-v5-c-panel--before--BorderWidth: 0;
22593
- --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
22594
- --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
22595
- --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
22596
- --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
22597
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
22598
- --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
22599
- --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
22600
- --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
22601
- --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
22594
+ --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
22595
+ --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
22596
+ --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
22597
+ --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
22598
+ --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
22599
+ --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22600
+ --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
22601
+ --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
22602
+ --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
22603
+ --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
22602
22604
  --pf-v5-c-panel__main--MaxHeight: none;
22603
22605
  --pf-v5-c-panel__main--Overflow: visible;
22604
- --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
22605
- --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
22606
- --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
22607
- --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
22608
- --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
22609
- --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
22610
- --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
22611
- --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
22606
+ --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
22607
+ --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
22608
+ --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
22609
+ --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
22610
+ --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
22611
+ --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
22612
+ --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
22613
+ --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
22612
22614
  --pf-v5-c-panel__footer--BoxShadow: none;
22613
22615
  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
22614
22616
  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
22615
- --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
22617
+ --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
22618
+ }
22619
+
22620
+ .pf-v5-c-panel {
22616
22621
  position: relative;
22617
22622
  z-index: var(--pf-v5-c-panel--ZIndex);
22618
22623
  width: var(--pf-v5-c-panel--Width);
@@ -22631,6 +22636,9 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22631
22636
  .pf-v5-c-panel.pf-m-bordered {
22632
22637
  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
22633
22638
  }
22639
+ .pf-v5-c-panel.pf-m-secondary {
22640
+ --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
22641
+ }
22634
22642
  .pf-v5-c-panel.pf-m-raised {
22635
22643
  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
22636
22644
  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -22669,14 +22677,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
22669
22677
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
22670
22678
  }
22671
22679
 
22672
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
22673
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
22674
- }
22675
-
22676
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
22677
- --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
22678
- }
22679
-
22680
22680
  .pf-v5-c-popover {
22681
22681
  --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
22682
22682
  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
@@ -25137,14 +25137,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25137
25137
 
25138
25138
  :root,
25139
25139
  .pf-v5-c-spinner {
25140
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25140
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
25141
25141
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
25142
25142
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
25143
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
25144
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25145
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25146
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25147
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25143
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
25144
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
25145
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
25146
+ --pf-v5-c-spinner--StrokeWidth: 10;
25147
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
25148
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25149
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
25150
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
25151
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
25152
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
25148
25153
  --pf-v5-c-spinner--m-inline--diameter: 1em;
25149
25154
  }
25150
25155
 
@@ -25152,6 +25157,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25152
25157
  width: var(--pf-v5-c-spinner--Width);
25153
25158
  height: var(--pf-v5-c-spinner--Height);
25154
25159
  overflow: hidden;
25160
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25155
25161
  }
25156
25162
  .pf-v5-c-spinner.pf-m-inline {
25157
25163
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -25169,33 +25175,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25169
25175
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25170
25176
  }
25171
25177
 
25172
- svg.pf-v5-c-spinner {
25173
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25174
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
25175
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
25176
- --pf-v5-c-spinner--stroke-width: 10;
25177
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
25178
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
25179
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25180
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25181
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25182
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25183
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25184
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25185
- }
25186
- svg.pf-v5-c-spinner.pf-m-sm {
25187
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
25188
- }
25189
- svg.pf-v5-c-spinner.pf-m-md {
25190
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
25191
- }
25192
- svg.pf-v5-c-spinner.pf-m-lg {
25193
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
25194
- }
25195
- svg.pf-v5-c-spinner.pf-m-xl {
25196
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25197
- }
25198
-
25199
25178
  .pf-v5-c-spinner__path {
25200
25179
  width: 100%;
25201
25180
  height: 100%;
@@ -25203,7 +25182,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25203
25182
  stroke-dasharray: 283;
25204
25183
  stroke-dashoffset: 280;
25205
25184
  stroke-linecap: round;
25206
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
25185
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
25207
25186
  transform-origin: 50% 50%;
25208
25187
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
25209
25188
  }