@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0-prerelease.9

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.
@@ -11,8 +11,8 @@
11
11
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
12
12
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
13
13
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14
- --pf-v6-c-skeleton--after--TranslateX: -100%;
15
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
14
+ --pf-v6-c-skeleton--after--TranslateX: 0;
15
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
16
16
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
17
17
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
18
18
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -44,6 +44,15 @@
44
44
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
45
45
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
46
46
  }
47
+ @media screen and (prefers-reduced-motion: no-preference) {
48
+ .pf-v6-c-skeleton {
49
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
50
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
51
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
52
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
53
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
54
+ }
55
+ }
47
56
 
48
57
  .pf-v6-c-skeleton {
49
58
  position: relative;
@@ -163,4 +172,15 @@
163
172
  100% {
164
173
  transform: translateX(100%);
165
174
  }
175
+ }
176
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
177
+ 0% {
178
+ opacity: 0.25;
179
+ }
180
+ 60% {
181
+ opacity: 1;
182
+ }
183
+ 100% {
184
+ opacity: 0.25;
185
+ }
166
186
  }
@@ -14,15 +14,23 @@
14
14
  // After
15
15
  --#{$skeleton}--after--LinearGradientAngle: 90deg;
16
16
  --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
17
- --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover); // TODO: replace with new token
17
+ --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
18
18
  --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
19
- --#{$skeleton}--after--TranslateX: -100%;
20
- --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
19
+ --#{$skeleton}--after--TranslateX: 0;
20
+ --#{$skeleton}--after--AnimationName: #{$skeleton}-loading-reduced-motion;
21
21
  --#{$skeleton}--after--AnimationDuration: 3s;
22
22
  --#{$skeleton}--after--AnimationIterationCount: infinite;
23
23
  --#{$skeleton}--after--AnimationTimingFunction: linear;
24
24
  --#{$skeleton}--after--AnimationDelay: .5s;
25
25
 
26
+ @media screen and (prefers-reduced-motion: no-preference) {
27
+ --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
28
+ --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
29
+ --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
30
+ --#{$skeleton}--after--TranslateX: -100%;
31
+ --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
32
+ }
33
+
26
34
  // Circle
27
35
  --#{$skeleton}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
28
36
  --#{$skeleton}--m-circle--before--PaddingBlockEnd: 100%;
@@ -209,3 +217,17 @@
209
217
  transform: translateX(100%);
210
218
  }
211
219
  }
220
+
221
+ @keyframes #{$skeleton}-loading-reduced-motion {
222
+ 0% {
223
+ opacity: 0.25;
224
+ }
225
+
226
+ 60% {
227
+ opacity: 1;
228
+ }
229
+
230
+ 100% {
231
+ opacity: 0.25;
232
+ }
233
+ }
@@ -14351,8 +14351,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14351
14351
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
14352
14352
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
14353
14353
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14354
- --pf-v6-c-skeleton--after--TranslateX: -100%;
14355
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
14354
+ --pf-v6-c-skeleton--after--TranslateX: 0;
14355
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
14356
14356
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
14357
14357
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
14358
14358
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -14384,6 +14384,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14384
14384
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
14385
14385
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
14386
14386
  }
14387
+ @media screen and (prefers-reduced-motion: no-preference) {
14388
+ .pf-v6-c-skeleton {
14389
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
14390
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
14391
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14392
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
14393
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
14394
+ }
14395
+ }
14387
14396
 
14388
14397
  .pf-v6-c-skeleton {
14389
14398
  position: relative;
@@ -14504,6 +14513,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14504
14513
  transform: translateX(100%);
14505
14514
  }
14506
14515
  }
14516
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
14517
+ 0% {
14518
+ opacity: 0.25;
14519
+ }
14520
+ 60% {
14521
+ opacity: 1;
14522
+ }
14523
+ 100% {
14524
+ opacity: 0.25;
14525
+ }
14526
+ }
14507
14527
  .pf-v6-c-skip-to-content {
14508
14528
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
14509
14529
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
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.3.0-prerelease.8",
4
+ "version": "6.3.0-prerelease.9",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.9.3",
50
+ "@patternfly/documentation-framework": "6.9.4",
51
51
  "@patternfly/patternfly-a11y": "5.1.0",
52
52
  "@patternfly/react-code-editor": "6.2.1",
53
53
  "@patternfly/react-core": "6.2.1",
@@ -21813,8 +21813,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21813
21813
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21814
21814
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21815
21815
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21816
- --pf-v6-c-skeleton--after--TranslateX: -100%;
21817
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21816
+ --pf-v6-c-skeleton--after--TranslateX: 0;
21817
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
21818
21818
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
21819
21819
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
21820
21820
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -21846,6 +21846,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21846
21846
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
21847
21847
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
21848
21848
  }
21849
+ @media screen and (prefers-reduced-motion: no-preference) {
21850
+ .pf-v6-c-skeleton {
21851
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21852
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21853
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21854
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
21855
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21856
+ }
21857
+ }
21849
21858
 
21850
21859
  .pf-v6-c-skeleton {
21851
21860
  position: relative;
@@ -21966,6 +21975,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21966
21975
  transform: translateX(100%);
21967
21976
  }
21968
21977
  }
21978
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
21979
+ 0% {
21980
+ opacity: 0.25;
21981
+ }
21982
+ 60% {
21983
+ opacity: 1;
21984
+ }
21985
+ 100% {
21986
+ opacity: 0.25;
21987
+ }
21988
+ }
21969
21989
  .pf-v6-c-skip-to-content {
21970
21990
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
21971
21991
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
package/patternfly.css CHANGED
@@ -21949,8 +21949,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21949
21949
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21950
21950
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21951
21951
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21952
- --pf-v6-c-skeleton--after--TranslateX: -100%;
21953
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21952
+ --pf-v6-c-skeleton--after--TranslateX: 0;
21953
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
21954
21954
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
21955
21955
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
21956
21956
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -21982,6 +21982,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21982
21982
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
21983
21983
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
21984
21984
  }
21985
+ @media screen and (prefers-reduced-motion: no-preference) {
21986
+ .pf-v6-c-skeleton {
21987
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
21988
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
21989
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
21990
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
21991
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
21992
+ }
21993
+ }
21985
21994
 
21986
21995
  .pf-v6-c-skeleton {
21987
21996
  position: relative;
@@ -22102,6 +22111,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22102
22111
  transform: translateX(100%);
22103
22112
  }
22104
22113
  }
22114
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
22115
+ 0% {
22116
+ opacity: 0.25;
22117
+ }
22118
+ 60% {
22119
+ opacity: 1;
22120
+ }
22121
+ 100% {
22122
+ opacity: 0.25;
22123
+ }
22124
+ }
22105
22125
  .pf-v6-c-skip-to-content {
22106
22126
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
22107
22127
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);