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

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 (8) hide show
  1. package/components/Spinner/spinner.css +13 -34
  2. package/components/Spinner/spinner.scss +16 -47
  3. package/package.json +1 -1
  4. package/patternfly-no-globals.css +13 -34
  5. package/patternfly-theme-dark-unversioned.css +13 -34
  6. package/patternfly.css +13 -34
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
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/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.44",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -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
  }
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -25254,14 +25254,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25254
25254
 
25255
25255
  :root,
25256
25256
  .pf-v5-c-spinner {
25257
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25257
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
25258
25258
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
25259
25259
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
25260
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
25261
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25262
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25263
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25264
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25260
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
25261
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
25262
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
25263
+ --pf-v5-c-spinner--StrokeWidth: 10;
25264
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
25265
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25266
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
25267
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
25268
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
25269
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
25265
25270
  --pf-v5-c-spinner--m-inline--diameter: 1em;
25266
25271
  }
25267
25272
 
@@ -25269,6 +25274,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25269
25274
  width: var(--pf-v5-c-spinner--Width);
25270
25275
  height: var(--pf-v5-c-spinner--Height);
25271
25276
  overflow: hidden;
25277
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25272
25278
  }
25273
25279
  .pf-v5-c-spinner.pf-m-inline {
25274
25280
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -25286,33 +25292,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25286
25292
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25287
25293
  }
25288
25294
 
25289
- svg.pf-v5-c-spinner {
25290
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25291
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
25292
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
25293
- --pf-v5-c-spinner--stroke-width: 10;
25294
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
25295
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
25296
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25297
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25298
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25299
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25300
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25301
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25302
- }
25303
- svg.pf-v5-c-spinner.pf-m-sm {
25304
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
25305
- }
25306
- svg.pf-v5-c-spinner.pf-m-md {
25307
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
25308
- }
25309
- svg.pf-v5-c-spinner.pf-m-lg {
25310
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
25311
- }
25312
- svg.pf-v5-c-spinner.pf-m-xl {
25313
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25314
- }
25315
-
25316
25295
  .pf-v5-c-spinner__path {
25317
25296
  width: 100%;
25318
25297
  height: 100%;
@@ -25320,7 +25299,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25320
25299
  stroke-dasharray: 283;
25321
25300
  stroke-dashoffset: 280;
25322
25301
  stroke-linecap: round;
25323
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
25302
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
25324
25303
  transform-origin: 50% 50%;
25325
25304
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
25326
25305
  }
package/patternfly.css CHANGED
@@ -25254,14 +25254,19 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25254
25254
 
25255
25255
  :root,
25256
25256
  .pf-v5-c-spinner {
25257
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25257
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
25258
25258
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
25259
25259
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
25260
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
25261
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25262
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25263
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25264
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25260
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
25261
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
25262
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
25263
+ --pf-v5-c-spinner--StrokeWidth: 10;
25264
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
25265
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25266
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
25267
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
25268
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
25269
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
25265
25270
  --pf-v5-c-spinner--m-inline--diameter: 1em;
25266
25271
  }
25267
25272
 
@@ -25269,6 +25274,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25269
25274
  width: var(--pf-v5-c-spinner--Width);
25270
25275
  height: var(--pf-v5-c-spinner--Height);
25271
25276
  overflow: hidden;
25277
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25272
25278
  }
25273
25279
  .pf-v5-c-spinner.pf-m-inline {
25274
25280
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -25286,33 +25292,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25286
25292
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25287
25293
  }
25288
25294
 
25289
- svg.pf-v5-c-spinner {
25290
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25291
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
25292
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
25293
- --pf-v5-c-spinner--stroke-width: 10;
25294
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
25295
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
25296
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25297
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25298
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25299
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25300
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25301
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25302
- }
25303
- svg.pf-v5-c-spinner.pf-m-sm {
25304
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
25305
- }
25306
- svg.pf-v5-c-spinner.pf-m-md {
25307
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
25308
- }
25309
- svg.pf-v5-c-spinner.pf-m-lg {
25310
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
25311
- }
25312
- svg.pf-v5-c-spinner.pf-m-xl {
25313
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25314
- }
25315
-
25316
25295
  .pf-v5-c-spinner__path {
25317
25296
  width: 100%;
25318
25297
  height: 100%;
@@ -25320,7 +25299,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25320
25299
  stroke-dasharray: 283;
25321
25300
  stroke-dashoffset: 280;
25322
25301
  stroke-linecap: round;
25323
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
25302
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
25324
25303
  transform-origin: 50% 50%;
25325
25304
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
25326
25305
  }