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

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 (9) hide show
  1. package/components/Skeleton/skeleton.css +18 -20
  2. package/components/Skeleton/skeleton.scss +17 -21
  3. package/package.json +1 -1
  4. package/patternfly-no-globals.css +18 -25
  5. package/patternfly-theme-dark-unversioned.css +18 -25
  6. package/patternfly.css +18 -25
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
  9. 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/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.41",
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);
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);
package/patternfly.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-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 {
24999
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
25000
- }
25001
-
25002
- :where(.pf-v5-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);