@patternfly/patternfly 6.0.0-alpha.40 → 6.0.0-alpha.42

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/Skeleton/skeleton.css +18 -20
  2. package/components/Skeleton/skeleton.scss +17 -21
  3. package/components/TabContent/tab-content.css +17 -11
  4. package/components/TabContent/tab-content.scss +18 -14
  5. package/docs/components/TabContent/examples/TabContent.md +10 -10
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +35 -36
  8. package/patternfly-theme-dark-unversioned.css +35 -36
  9. package/patternfly.css +35 -36
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
  12. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
package/components/Skeleton/skeleton.css CHANGED
@@ -1,31 +1,32 @@
1
1
  @charset "UTF-8";
2
+ :root,
2
3
  .pf-v5-c-skeleton {
3
- --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-150);
4
+ --pf-v5-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4
5
  --pf-v5-c-skeleton--Width: auto;
5
6
  --pf-v5-c-skeleton--Height: auto;
6
- --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
7
+ --pf-v5-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
7
8
  --pf-v5-c-skeleton--before--PaddingBottom: 0;
8
9
  --pf-v5-c-skeleton--before--Height: auto;
9
10
  --pf-v5-c-skeleton--before--Content: " ";
10
11
  --pf-v5-c-skeleton--after--LinearGradientAngle: 90deg;
11
- --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-150);
12
- --pf-v5-c-skeleton--after--LinearGradientColorStop2: #ededed;
13
- --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-150);
12
+ --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
13
+ --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
14
+ --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14
15
  --pf-v5-c-skeleton--after--TranslateX: -100%;
15
16
  --pf-v5-c-skeleton--after--AnimationName: pf-v5-c-skeleton-loading;
16
- --pf-v5-c-skeleton--after--AnimationDuration: 2s;
17
+ --pf-v5-c-skeleton--after--AnimationDuration: 3s;
17
18
  --pf-v5-c-skeleton--after--AnimationIterationCount: infinite;
18
19
  --pf-v5-c-skeleton--after--AnimationTimingFunction: linear;
19
20
  --pf-v5-c-skeleton--after--AnimationDelay: .5s;
20
- --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
21
+ --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
21
22
  --pf-v5-c-skeleton--m-circle--before--PaddingBottom: 100%;
22
- --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-v5-global--FontSize--4xl) * var(--pf-v5-global--LineHeight--sm));
23
- --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-v5-global--FontSize--3xl) * var(--pf-v5-global--LineHeight--sm));
24
- --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-v5-global--FontSize--2xl) * var(--pf-v5-global--LineHeight--sm));
25
- --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-v5-global--FontSize--xl) * var(--pf-v5-global--LineHeight--sm));
26
- --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-v5-global--FontSize--lg) * var(--pf-v5-global--LineHeight--md));
27
- --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
28
- --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--md));
23
+ --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
24
+ --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
25
+ --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
26
+ --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
27
+ --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
28
+ --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
29
+ --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
29
30
  --pf-v5-c-skeleton--m-width-sm--Width: 6.25rem;
30
31
  --pf-v5-c-skeleton--m-width-md--Width: 12.5rem;
31
32
  --pf-v5-c-skeleton--m-width-lg--Width: 18.75rem;
@@ -43,6 +44,9 @@
43
44
  --pf-v5-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
44
45
  --pf-v5-c-skeleton--m-height-75--Height: 75%;
45
46
  --pf-v5-c-skeleton--m-height-100--Height: 100%;
47
+ }
48
+
49
+ .pf-v5-c-skeleton {
46
50
  position: relative;
47
51
  width: var(--pf-v5-c-skeleton--Width);
48
52
  height: var(--pf-v5-c-skeleton--Height);
@@ -160,10 +164,4 @@
160
164
  100% {
161
165
  transform: translateX(100%);
162
166
  }
163
- }
164
- :where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
165
- --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
166
- --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
167
- --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);
168
- --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-600);
169
167
  }
package/components/Skeleton/skeleton.scss CHANGED
@@ -1,10 +1,11 @@
1
1
  // @debug $skeleton; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$skeleton} {
4
- --#{$skeleton}--BackgroundColor: var(--#{$pf-global}--palette--black-150);
5
+ --#{$skeleton}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
6
  --#{$skeleton}--Width: auto;
6
7
  --#{$skeleton}--Height: auto;
7
- --#{$skeleton}--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
8
+ --#{$skeleton}--BorderRadius: var(--pf-t--global--spacer--sm);
8
9
 
9
10
  // Before
10
11
  --#{$skeleton}--before--PaddingBottom: 0;
@@ -13,28 +14,28 @@
13
14
 
14
15
  // After
15
16
  --#{$skeleton}--after--LinearGradientAngle: 90deg;
16
- --#{$skeleton}--after--LinearGradientColorStop1: var(--#{$pf-global}--palette--black-150);
17
- --#{$skeleton}--after--LinearGradientColorStop2: #ededed;
18
- --#{$skeleton}--after--LinearGradientColorStop3: var(--#{$pf-global}--palette--black-150);
17
+ --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
18
+ --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover); // TODO: replace with new token
19
+ --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
19
20
  --#{$skeleton}--after--TranslateX: -100%;
20
21
  --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
21
- --#{$skeleton}--after--AnimationDuration: 2s;
22
+ --#{$skeleton}--after--AnimationDuration: 3s;
22
23
  --#{$skeleton}--after--AnimationIterationCount: infinite;
23
24
  --#{$skeleton}--after--AnimationTimingFunction: linear;
24
25
  --#{$skeleton}--after--AnimationDelay: .5s;
25
26
 
26
27
  // Circle
27
- --#{$skeleton}--m-circle--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
28
+ --#{$skeleton}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
28
29
  --#{$skeleton}--m-circle--before--PaddingBottom: 100%;
29
30
 
30
31
  // Text modifiers
31
- --#{$skeleton}--m-text-4xl--Height: calc(var(--#{$pf-global}--FontSize--4xl) * var(--#{$pf-global}--LineHeight--sm));
32
- --#{$skeleton}--m-text-3xl--Height: calc(var(--#{$pf-global}--FontSize--3xl) * var(--#{$pf-global}--LineHeight--sm));
33
- --#{$skeleton}--m-text-2xl--Height: calc(var(--#{$pf-global}--FontSize--2xl) * var(--#{$pf-global}--LineHeight--sm));
34
- --#{$skeleton}--m-text-xl--Height: calc(var(--#{$pf-global}--FontSize--xl) * var(--#{$pf-global}--LineHeight--sm));
35
- --#{$skeleton}--m-text-lg--Height: calc(var(--#{$pf-global}--FontSize--lg) * var(--#{$pf-global}--LineHeight--md));
36
- --#{$skeleton}--m-text-md--Height: calc(var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md));
37
- --#{$skeleton}--m-text-sm--Height: calc(var(--#{$pf-global}--FontSize--sm) * var(--#{$pf-global}--LineHeight--md));
32
+ --#{$skeleton}--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
33
+ --#{$skeleton}--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
34
+ --#{$skeleton}--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
35
+ --#{$skeleton}--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
36
+ --#{$skeleton}--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
37
+ --#{$skeleton}--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
38
+ --#{$skeleton}--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
38
39
 
39
40
  // Width
40
41
  --#{$skeleton}--m-width-sm--Width: #{pf-size-prem(100px)};
@@ -56,7 +57,9 @@
56
57
  --#{$skeleton}--m-height-66--Height: calc(100% / 3 * 2);
57
58
  --#{$skeleton}--m-height-75--Height: 75%;
58
59
  --#{$skeleton}--m-height-100--Height: 100%;
60
+ }
59
61
 
62
+ .#{$skeleton} {
60
63
  position: relative;
61
64
  width: var(--#{$skeleton}--Width);
62
65
  height: var(--#{$skeleton}--Height);
@@ -207,10 +210,3 @@
207
210
  transform: translateX(100%);
208
211
  }
209
212
  }
210
-
211
- // stylelint-disable no-invalid-position-at-import-rule
212
- @import "themes/dark/skeleton";
213
-
214
- @include pf-v5-theme-dark {
215
- @include pf-v5-theme-dark-skeleton;
216
- }
package/components/TabContent/tab-content.css CHANGED
@@ -1,17 +1,23 @@
1
+ :root,
1
2
  .pf-v5-c-tab-content {
2
3
  --pf-v5-c-tab-content__body--PaddingTop: 0;
3
4
  --pf-v5-c-tab-content__body--PaddingRight: 0;
4
5
  --pf-v5-c-tab-content__body--PaddingBottom: 0;
5
6
  --pf-v5-c-tab-content__body--PaddingLeft: 0;
6
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
7
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
8
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
9
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
10
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
11
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
12
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
13
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
14
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
7
+ --pf-v5-c-tab-content--BackgroundColor: transparent;
8
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
9
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
10
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
11
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
12
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
13
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
14
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
15
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
16
+ --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
+ }
18
+
19
+ .pf-v5-c-tab-content {
20
+ background-color: var(--pf-v5-c-tab-content--BackgroundColor);
15
21
  }
16
22
  @media screen and (min-width: 1200px) {
17
23
  .pf-v5-c-tab-content {
@@ -21,8 +27,8 @@
21
27
  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
22
28
  }
23
29
  }
24
- .pf-v5-c-tab-content.pf-m-light-300 {
25
- background-color: var(--pf-v5-c-tab-content--m-light-300);
30
+ .pf-v5-c-tab-content.pf-m-secondary {
31
+ --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
26
32
  }
27
33
 
28
34
  .pf-v5-c-tab-content__body {
package/components/TabContent/tab-content.scss CHANGED
@@ -1,25 +1,30 @@
1
1
  // @debug $tab-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
-
2
+ :root,
3
3
  .#{$tab-content} {
4
4
  --#{$tab-content}__body--PaddingTop: 0;
5
5
  --#{$tab-content}__body--PaddingRight: 0;
6
6
  --#{$tab-content}__body--PaddingBottom: 0;
7
7
  --#{$tab-content}__body--PaddingLeft: 0;
8
+ --#{$tab-content}--BackgroundColor: transparent;
8
9
 
9
10
  // Padding
10
- --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$pf-global}--spacer--md);
11
- --#{$tab-content}__body--m-padding--PaddingRight: var(--#{$pf-global}--spacer--md);
12
- --#{$tab-content}__body--m-padding--PaddingBottom: var(--#{$pf-global}--spacer--md);
13
- --#{$tab-content}__body--m-padding--PaddingLeft: var(--#{$pf-global}--spacer--md);
11
+ --#{$tab-content}__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
12
+ --#{$tab-content}__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
13
+ --#{$tab-content}__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
14
+ --#{$tab-content}__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
14
15
 
15
16
  // Match page padding
16
- --#{$tab-content}__body--m-padding--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
17
- --#{$tab-content}__body--m-padding--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
18
- --#{$tab-content}__body--m-padding--xl--PaddingBottom: var(--#{$pf-global}--spacer--lg);
19
- --#{$tab-content}__body--m-padding--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
17
+ --#{$tab-content}__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
18
+ --#{$tab-content}__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
19
+ --#{$tab-content}__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
20
+ --#{$tab-content}__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
20
21
 
21
- // Light
22
- --#{$tab-content}--m-light-300: var(--#{$pf-global}--BackgroundColor--light-300);
22
+ // Secondary modifier
23
+ --#{$tab-content}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24
+ }
25
+
26
+ .#{$tab-content} {
27
+ background-color: var(--#{$tab-content}--BackgroundColor);
23
28
 
24
29
  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
25
30
  --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$tab-content}__body--m-padding--xl--PaddingTop);
@@ -28,9 +33,8 @@
28
33
  --#{$tab-content}__body--m-padding--PaddingLeft: var(--#{$tab-content}__body--m-padding--xl--PaddingLeft);
29
34
  }
30
35
 
31
-
32
- &.pf-m-light-300 {
33
- background-color: var(--#{$tab-content}--m-light-300);
36
+ &.pf-m-secondary {
37
+ --#{$tab-content}--BackgroundColor: var(--#{$tab-content}--m-secondary--BackgroundColor);
34
38
  }
35
39
  }
36
40
 
package/docs/components/TabContent/examples/TabContent.md CHANGED
@@ -86,20 +86,20 @@ cssPrefix: pf-v5-c-tab-content
86
86
 
87
87
  ```
88
88
 
89
- ### Light 300 background
89
+ ### Secondary
90
90
 
91
91
  ```html
92
92
  <section
93
- class="pf-v5-c-tab-content pf-m-light-300"
94
- id="light-300-tab1-panel"
93
+ class="pf-v5-c-tab-content pf-m-secondary"
94
+ id="secondary-tab1-panel"
95
95
  role="tabpanel"
96
96
  tabindex="0"
97
97
  >
98
98
  <div class="pf-v5-c-tab-content__body">Panel 1</div>
99
99
  </section>
100
100
  <section
101
- class="pf-v5-c-tab-content pf-m-light-300"
102
- id="light-300-tab2-panel"
101
+ class="pf-v5-c-tab-content pf-m-secondary"
102
+ id="secondary-tab2-panel"
103
103
  role="tabpanel"
104
104
  tabindex="0"
105
105
  hidden
@@ -107,8 +107,8 @@ cssPrefix: pf-v5-c-tab-content
107
107
  <div class="pf-v5-c-tab-content__body">Panel 2</div>
108
108
  </section>
109
109
  <section
110
- class="pf-v5-c-tab-content pf-m-light-300"
111
- id="light-300-tab3-panel"
110
+ class="pf-v5-c-tab-content pf-m-secondary"
111
+ id="secondary-tab3-panel"
112
112
  role="tabpanel"
113
113
  tabindex="0"
114
114
  hidden
@@ -116,8 +116,8 @@ cssPrefix: pf-v5-c-tab-content
116
116
  <div class="pf-v5-c-tab-content__body">Panel 3</div>
117
117
  </section>
118
118
  <section
119
- class="pf-v5-c-tab-content pf-m-light-300"
120
- id="light-300-tab4-panel"
119
+ class="pf-v5-c-tab-content pf-m-secondary"
120
+ id="secondary-tab4-panel"
121
121
  role="tabpanel"
122
122
  tabindex="0"
123
123
  hidden
@@ -150,4 +150,4 @@ Tab content should be used with the [tabs component](/components/tabs).
150
150
  | `.pf-v5-c-tab-content` | `<section>` | Initiates the tab content component. **Required** |
151
151
  | `.pf-v5-c-tab-content__body` | `<div>` | Initiates the tab content body component. |
152
152
  | `.pf-m-padding` | `.pf-v5-c-tab-content__body` | Modifies the tab content body component padding. |
153
- | `.pf-m-light-300` | `.pf-v5-c-tab-content` | Modifies the tab content component background color. |
153
+ | `.pf-m-secondary` | `.pf-v5-c-tab-content` | Modifies the tab content component 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.40",
4
+ "version": "6.0.0-alpha.42",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -24716,33 +24716,34 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24716
24716
  margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
24717
24717
  }
24718
24718
 
24719
+ :root,
24719
24720
  .pf-v5-c-skeleton {
24720
- --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-150);
24721
+ --pf-v5-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24721
24722
  --pf-v5-c-skeleton--Width: auto;
24722
24723
  --pf-v5-c-skeleton--Height: auto;
24723
- --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
24724
+ --pf-v5-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
24724
24725
  --pf-v5-c-skeleton--before--PaddingBottom: 0;
24725
24726
  --pf-v5-c-skeleton--before--Height: auto;
24726
24727
  --pf-v5-c-skeleton--before--Content: " ";
24727
24728
  --pf-v5-c-skeleton--after--LinearGradientAngle: 90deg;
24728
- --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-150);
24729
- --pf-v5-c-skeleton--after--LinearGradientColorStop2: #ededed;
24730
- --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-150);
24729
+ --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
24730
+ --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
24731
+ --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
24731
24732
  --pf-v5-c-skeleton--after--TranslateX: -100%;
24732
24733
  --pf-v5-c-skeleton--after--AnimationName: pf-v5-c-skeleton-loading;
24733
- --pf-v5-c-skeleton--after--AnimationDuration: 2s;
24734
+ --pf-v5-c-skeleton--after--AnimationDuration: 3s;
24734
24735
  --pf-v5-c-skeleton--after--AnimationIterationCount: infinite;
24735
24736
  --pf-v5-c-skeleton--after--AnimationTimingFunction: linear;
24736
24737
  --pf-v5-c-skeleton--after--AnimationDelay: .5s;
24737
- --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
24738
+ --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
24738
24739
  --pf-v5-c-skeleton--m-circle--before--PaddingBottom: 100%;
24739
- --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-v5-global--FontSize--4xl) * var(--pf-v5-global--LineHeight--sm));
24740
- --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-v5-global--FontSize--3xl) * var(--pf-v5-global--LineHeight--sm));
24741
- --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-v5-global--FontSize--2xl) * var(--pf-v5-global--LineHeight--sm));
24742
- --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-v5-global--FontSize--xl) * var(--pf-v5-global--LineHeight--sm));
24743
- --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-v5-global--FontSize--lg) * var(--pf-v5-global--LineHeight--md));
24744
- --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
24745
- --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--md));
24740
+ --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
24741
+ --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
24742
+ --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
24743
+ --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
24744
+ --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
24745
+ --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
24746
+ --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
24746
24747
  --pf-v5-c-skeleton--m-width-sm--Width: 6.25rem;
24747
24748
  --pf-v5-c-skeleton--m-width-md--Width: 12.5rem;
24748
24749
  --pf-v5-c-skeleton--m-width-lg--Width: 18.75rem;
@@ -24760,6 +24761,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24760
24761
  --pf-v5-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
24761
24762
  --pf-v5-c-skeleton--m-height-75--Height: 75%;
24762
24763
  --pf-v5-c-skeleton--m-height-100--Height: 100%;
24764
+ }
24765
+
24766
+ .pf-v5-c-skeleton {
24763
24767
  position: relative;
24764
24768
  width: var(--pf-v5-c-skeleton--Width);
24765
24769
  height: var(--pf-v5-c-skeleton--Height);
@@ -24878,17 +24882,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24878
24882
  transform: translateX(100%);
24879
24883
  }
24880
24884
  }
24881
- :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 {
24882
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
24883
- }
24884
-
24885
- :where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
24886
- --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
24887
- --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
24888
- --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);
24889
- --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-600);
24890
- }
24891
-
24892
24885
  :root {
24893
24886
  --pf-v5-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
24894
24887
  --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
@@ -25372,20 +25365,26 @@ svg.pf-v5-c-spinner.pf-m-xl {
25372
25365
  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25373
25366
  }
25374
25367
 
25368
+ :root,
25375
25369
  .pf-v5-c-tab-content {
25376
25370
  --pf-v5-c-tab-content__body--PaddingTop: 0;
25377
25371
  --pf-v5-c-tab-content__body--PaddingRight: 0;
25378
25372
  --pf-v5-c-tab-content__body--PaddingBottom: 0;
25379
25373
  --pf-v5-c-tab-content__body--PaddingLeft: 0;
25380
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
25381
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
25382
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
25383
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
25384
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
25385
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
25386
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
25387
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
25388
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
25374
+ --pf-v5-c-tab-content--BackgroundColor: transparent;
25375
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
25376
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
25377
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
25378
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
25379
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
25380
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
25381
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
25382
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
25383
+ --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25384
+ }
25385
+
25386
+ .pf-v5-c-tab-content {
25387
+ background-color: var(--pf-v5-c-tab-content--BackgroundColor);
25389
25388
  }
25390
25389
  @media screen and (min-width: 1200px) {
25391
25390
  .pf-v5-c-tab-content {
@@ -25395,8 +25394,8 @@ svg.pf-v5-c-spinner.pf-m-xl {
25395
25394
  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
25396
25395
  }
25397
25396
  }
25398
- .pf-v5-c-tab-content.pf-m-light-300 {
25399
- background-color: var(--pf-v5-c-tab-content--m-light-300);
25397
+ .pf-v5-c-tab-content.pf-m-secondary {
25398
+ --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
25400
25399
  }
25401
25400
 
25402
25401
  .pf-v5-c-tab-content__body {
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -24833,33 +24833,34 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24833
24833
  margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
24834
24834
  }
24835
24835
 
24836
+ :root,
24836
24837
  .pf-v5-c-skeleton {
24837
- --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-150);
24838
+ --pf-v5-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24838
24839
  --pf-v5-c-skeleton--Width: auto;
24839
24840
  --pf-v5-c-skeleton--Height: auto;
24840
- --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
24841
+ --pf-v5-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
24841
24842
  --pf-v5-c-skeleton--before--PaddingBottom: 0;
24842
24843
  --pf-v5-c-skeleton--before--Height: auto;
24843
24844
  --pf-v5-c-skeleton--before--Content: " ";
24844
24845
  --pf-v5-c-skeleton--after--LinearGradientAngle: 90deg;
24845
- --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-150);
24846
- --pf-v5-c-skeleton--after--LinearGradientColorStop2: #ededed;
24847
- --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-150);
24846
+ --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
24847
+ --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
24848
+ --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
24848
24849
  --pf-v5-c-skeleton--after--TranslateX: -100%;
24849
24850
  --pf-v5-c-skeleton--after--AnimationName: pf-v5-c-skeleton-loading;
24850
- --pf-v5-c-skeleton--after--AnimationDuration: 2s;
24851
+ --pf-v5-c-skeleton--after--AnimationDuration: 3s;
24851
24852
  --pf-v5-c-skeleton--after--AnimationIterationCount: infinite;
24852
24853
  --pf-v5-c-skeleton--after--AnimationTimingFunction: linear;
24853
24854
  --pf-v5-c-skeleton--after--AnimationDelay: .5s;
24854
- --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
24855
+ --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
24855
24856
  --pf-v5-c-skeleton--m-circle--before--PaddingBottom: 100%;
24856
- --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-v5-global--FontSize--4xl) * var(--pf-v5-global--LineHeight--sm));
24857
- --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-v5-global--FontSize--3xl) * var(--pf-v5-global--LineHeight--sm));
24858
- --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-v5-global--FontSize--2xl) * var(--pf-v5-global--LineHeight--sm));
24859
- --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-v5-global--FontSize--xl) * var(--pf-v5-global--LineHeight--sm));
24860
- --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-v5-global--FontSize--lg) * var(--pf-v5-global--LineHeight--md));
24861
- --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
24862
- --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--md));
24857
+ --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
24858
+ --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
24859
+ --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
24860
+ --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
24861
+ --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
24862
+ --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
24863
+ --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
24863
24864
  --pf-v5-c-skeleton--m-width-sm--Width: 6.25rem;
24864
24865
  --pf-v5-c-skeleton--m-width-md--Width: 12.5rem;
24865
24866
  --pf-v5-c-skeleton--m-width-lg--Width: 18.75rem;
@@ -24877,6 +24878,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24877
24878
  --pf-v5-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
24878
24879
  --pf-v5-c-skeleton--m-height-75--Height: 75%;
24879
24880
  --pf-v5-c-skeleton--m-height-100--Height: 100%;
24881
+ }
24882
+
24883
+ .pf-v5-c-skeleton {
24880
24884
  position: relative;
24881
24885
  width: var(--pf-v5-c-skeleton--Width);
24882
24886
  height: var(--pf-v5-c-skeleton--Height);
@@ -24995,17 +24999,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
24995
24999
  transform: translateX(100%);
24996
25000
  }
24997
25001
  }
24998
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
24999
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
25000
- }
25001
-
25002
- :where(.pf-theme-dark) .pf-v5-c-skeleton {
25003
- --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
25004
- --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
25005
- --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);
25006
- --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-600);
25007
- }
25008
-
25009
25002
  :root {
25010
25003
  --pf-v5-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
25011
25004
  --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
@@ -25489,20 +25482,26 @@ svg.pf-v5-c-spinner.pf-m-xl {
25489
25482
  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
25490
25483
  }
25491
25484
 
25485
+ :root,
25492
25486
  .pf-v5-c-tab-content {
25493
25487
  --pf-v5-c-tab-content__body--PaddingTop: 0;
25494
25488
  --pf-v5-c-tab-content__body--PaddingRight: 0;
25495
25489
  --pf-v5-c-tab-content__body--PaddingBottom: 0;
25496
25490
  --pf-v5-c-tab-content__body--PaddingLeft: 0;
25497
- --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
25498
- --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
25499
- --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
25500
- --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
25501
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
25502
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
25503
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
25504
- --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
25505
- --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
25491
+ --pf-v5-c-tab-content--BackgroundColor: transparent;
25492
+ --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
25493
+ --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
25494
+ --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
25495
+ --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
25496
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
25497
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
25498
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
25499
+ --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
25500
+ --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25501
+ }
25502
+
25503
+ .pf-v5-c-tab-content {
25504
+ background-color: var(--pf-v5-c-tab-content--BackgroundColor);
25506
25505
  }
25507
25506
  @media screen and (min-width: 1200px) {
25508
25507
  .pf-v5-c-tab-content {
@@ -25512,8 +25511,8 @@ svg.pf-v5-c-spinner.pf-m-xl {
25512
25511
  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
25513
25512
  }
25514
25513
  }
25515
- .pf-v5-c-tab-content.pf-m-light-300 {
25516
- background-color: var(--pf-v5-c-tab-content--m-light-300);
25514
+ .pf-v5-c-tab-content.pf-m-secondary {
25515
+ --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
25517
25516
  }
25518
25517
 
25519
25518
  .pf-v5-c-tab-content__body {