@patternfly/patternfly 6.0.0-alpha.144 → 6.0.0-alpha.146

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.
@@ -13,6 +13,9 @@
13
13
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
14
14
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
15
15
  --pf-v6-c-button--TextDecoration: none;
16
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
16
19
  --pf-v6-c-button--hover--BackgroundColor: transparent;
17
20
  --pf-v6-c-button--hover--BorderColor: transparent;
18
21
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -205,8 +208,6 @@
205
208
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
206
209
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
207
210
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
208
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
209
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
210
211
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
211
212
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
212
213
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -246,6 +247,9 @@
246
247
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
247
248
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
248
249
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
250
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
251
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
252
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
249
253
  }
250
254
  .pf-v6-c-button::after {
251
255
  position: absolute;
@@ -255,6 +259,7 @@
255
259
  border: var(--pf-v6-c-button--BorderWidth) solid;
256
260
  border-color: var(--pf-v6-c-button--BorderColor);
257
261
  border-radius: inherit;
262
+ transition: inherit;
258
263
  }
259
264
  .pf-v6-c-button.pf-m-primary {
260
265
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -518,7 +523,6 @@
518
523
  .pf-v6-c-button.pf-m-progress {
519
524
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
520
525
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
521
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
522
526
  }
523
527
  .pf-v6-c-button.pf-m-in-progress {
524
528
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
@@ -15,13 +15,16 @@
15
15
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
16
16
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
17
17
  --#{$button}--TextDecoration: none;
18
+ --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
19
+ --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
20
+ --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
18
21
 
19
22
  // Hover
20
23
  --#{$button}--hover--BackgroundColor: transparent;
21
24
  --#{$button}--hover--BorderColor: transparent;
22
25
  --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
23
26
  --#{$button}--hover--TextDecoration: none;
24
-
27
+
25
28
  // Clicked
26
29
  --#{$button}--m-clicked--BackgroundColor: transparent;
27
30
  --#{$button}--m-clicked--BorderColor: transparent;
@@ -251,8 +254,6 @@
251
254
  --#{$button}__progress--InsetBlockStart: 50%;
252
255
  --#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
253
256
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
254
- --#{$button}--m-progress--TransitionProperty: padding;
255
- --#{$button}--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
256
257
  --#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
257
258
  --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
258
259
  --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -294,6 +295,9 @@
294
295
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
295
296
  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
296
297
  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
298
+ transition-timing-function: var(--#{$button}--TransitionTimingFunction);
299
+ transition-duration: var(--#{$button}--TransitionDuration);
300
+ transition-property: var(--#{$button}--TransitionProperty);
297
301
 
298
302
  &::after {
299
303
  position: absolute;
@@ -303,6 +307,7 @@
303
307
  border: var(--#{$button}--BorderWidth) solid;
304
308
  border-color: var(--#{$button}--BorderColor);
305
309
  border-radius: inherit;
310
+ transition: inherit;
306
311
  }
307
312
 
308
313
  // Primary
@@ -618,8 +623,6 @@
618
623
  &.pf-m-progress {
619
624
  --#{$button}--PaddingInlineEnd: var(--#{$button}--m-progress--PaddingInlineEnd);
620
625
  --#{$button}--PaddingInlineStart: var(--#{$button}--m-progress--PaddingInlineStart);
621
-
622
- transition: var(--#{$button}--m-progress--TransitionProperty) var(--#{$button}--m-progress--TransitionDuration);
623
626
  }
624
627
 
625
628
  &.pf-m-in-progress {
@@ -1353,6 +1353,9 @@ button.pf-v6-c-breadcrumb__link {
1353
1353
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
1354
1354
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1355
1355
  --pf-v6-c-button--TextDecoration: none;
1356
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1357
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1358
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1356
1359
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1357
1360
  --pf-v6-c-button--hover--BorderColor: transparent;
1358
1361
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -1545,8 +1548,6 @@ button.pf-v6-c-breadcrumb__link {
1545
1548
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
1546
1549
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
1547
1550
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1548
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
1549
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
1550
1551
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1551
1552
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1552
1553
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -1586,6 +1587,9 @@ button.pf-v6-c-breadcrumb__link {
1586
1587
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1587
1588
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1588
1589
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1590
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1591
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
1592
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
1589
1593
  }
1590
1594
  .pf-v6-c-button::after {
1591
1595
  position: absolute;
@@ -1595,6 +1599,7 @@ button.pf-v6-c-breadcrumb__link {
1595
1599
  border: var(--pf-v6-c-button--BorderWidth) solid;
1596
1600
  border-color: var(--pf-v6-c-button--BorderColor);
1597
1601
  border-radius: inherit;
1602
+ transition: inherit;
1598
1603
  }
1599
1604
  .pf-v6-c-button.pf-m-primary {
1600
1605
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -1858,7 +1863,6 @@ button.pf-v6-c-breadcrumb__link {
1858
1863
  .pf-v6-c-button.pf-m-progress {
1859
1864
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1860
1865
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1861
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
1862
1866
  }
1863
1867
  .pf-v6-c-button.pf-m-in-progress {
1864
1868
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
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.144",
4
+ "version": "6.0.0-alpha.146",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -393,11 +393,11 @@
393
393
  --pf-v6-chart-global--FontSize--lg: var(--pf-t--chart--global--FontSize--lg);
394
394
  --pf-v6-chart-global--FontSize--2xl: var(--pf-t--chart--global--FontSize--2xl);
395
395
  --pf-v6-chart-global--FontFamily: var(--pf-t--global--font--family--body);
396
- --pf-v6-chart-global--letter-spacing: normal;
396
+ --pf-v6-chart-global--letter-spacing: var(--pf-t--chart--global--letter-spacing);
397
397
  --pf-v6-chart-global--label--Padding: var(--pf-t--chart--global--label--padding);
398
398
  --pf-v6-chart-global--label--Margin: var(--pf-t--chart--global--label--margin);
399
- --pf-v6-chart-global--label--stroke: transparent;
400
- --pf-v6-chart-global--label--text-anchor: middle;
399
+ --pf-v6-chart-global--label--stroke: var(--pf-t--chart--global--label--stroke);
400
+ --pf-v6-chart-global--label--text-anchor: var(--pf-t--chart--global--label--text-anchor);
401
401
  --pf-v6-chart-global--label--stroke--Width: var(--pf-t--chart--global--label--stroke--width);
402
402
  --pf-v6-chart-global--label--Fill: var(--pf-t--chart--global--label--fill);
403
403
  --pf-v6-chart-global--layout--Padding: var(--pf-t--chart--global--layout--padding);
@@ -408,8 +408,8 @@
408
408
  --pf-v6-chart-global--BorderWidth--xs: var(--pf-t--chart--global--BorderWidth--xs);
409
409
  --pf-v6-chart-global--BorderWidth--sm: var(--pf-t--chart--global--BorderWidth--sm);
410
410
  --pf-v6-chart-global--BorderWidth--lg: var(--pf-t--chart--global--BorderWidth--lg);
411
- --pf-v6-chart-global--stroke-line-cap: round;
412
- --pf-v6-chart-global--stroke-line-join: round;
411
+ --pf-v6-chart-global--stroke-line-cap: var(--pf-t--chart--global--stroke-line-cap);
412
+ --pf-v6-chart-global--stroke-line-join: var(--pf-t--chart--global--stroke-line-join);
413
413
  --pf-v6-chart-global--danger--Color--100: var(--pf-t--chart--global--danger--color--100);
414
414
  --pf-v6-chart-global--warning--Color--100: var(--pf-t--chart--global--warning--color--100);
415
415
  --pf-v6-chart-global--warning--Color--200: var(--pf-t--chart--global--warning--color--200);
@@ -95,13 +95,13 @@ $chart: #{$pf-prefix} + 'chart';
95
95
  --#{$chart}-global--FontSize--lg: var(--pf-t--chart--global--FontSize--lg);
96
96
  --#{$chart}-global--FontSize--2xl: var(--pf-t--chart--global--FontSize--2xl);
97
97
  --#{$chart}-global--FontFamily: var(--pf-t--global--font--family--body);
98
- --#{$chart}-global--letter-spacing: normal;
98
+ --#{$chart}-global--letter-spacing: var(--pf-t--chart--global--letter-spacing);
99
99
 
100
100
  // label
101
101
  --#{$chart}-global--label--Padding: var(--pf-t--chart--global--label--padding);
102
102
  --#{$chart}-global--label--Margin: var(--pf-t--chart--global--label--margin);
103
- --#{$chart}-global--label--stroke: transparent;
104
- --#{$chart}-global--label--text-anchor: middle;
103
+ --#{$chart}-global--label--stroke: var(--pf-t--chart--global--label--stroke);
104
+ --#{$chart}-global--label--text-anchor: var(--pf-t--chart--global--label--text-anchor);
105
105
  --#{$chart}-global--label--stroke--Width: var(--pf-t--chart--global--label--stroke--width);
106
106
  --#{$chart}-global--label--Fill: var(--pf-t--chart--global--label--fill);
107
107
 
@@ -118,8 +118,8 @@ $chart: #{$pf-prefix} + 'chart';
118
118
  --#{$chart}-global--BorderWidth--lg: var(--pf-t--chart--global--BorderWidth--lg);
119
119
 
120
120
  // Stroke
121
- --#{$chart}-global--stroke-line-cap: round;
122
- --#{$chart}-global--stroke-line-join: round;
121
+ --#{$chart}-global--stroke-line-cap: var(--pf-t--chart--global--stroke-line-cap);
122
+ --#{$chart}-global--stroke-line-join: var(--pf-t--chart--global--stroke-line-join);
123
123
 
124
124
  // Fills and Strokes
125
125
  --#{$chart}-global--danger--Color--100: var(--pf-t--chart--global--danger--color--100);
@@ -193,8 +193,8 @@ $chart: #{$pf-prefix} + 'chart';
193
193
  --#{$chart}-bullet--comparative-measure--warning--stroke--Color: var(--#{$chart}-global--warning--Color--100);
194
194
  --#{$chart}-bullet--comparative-measure--warning--stroke--Width: var(--pf-t--chart--global--stroke--width--sm);
195
195
  --#{$chart}-bullet--comparative-measure--warning--Width: 30;
196
- --#{$chart}-bullet--group-title--divider--Fill--Color: var(--pf-t--global--border--color--default); // TODO review
197
- --#{$chart}-bullet--group-title--divider--stroke--Color: var(--pf-t--global--border--color--default); // TODO review
196
+ --#{$chart}-bullet--group-title--divider--Fill--Color: var(--pf-t--global--border--color--default);
197
+ --#{$chart}-bullet--group-title--divider--stroke--Color: var(--pf-t--global--border--color--default);
198
198
  --#{$chart}-bullet--group-title--divider--stroke--Width: var(--pf-t--chart--global--stroke--width--sm);
199
199
  --#{$chart}-bullet--Height: 140;
200
200
  --#{$chart}-bullet--label--title--Fill: var(--#{$chart}-global--Fill--Color--900);
@@ -221,7 +221,7 @@ $chart: #{$pf-prefix} + 'chart';
221
221
  --#{$chart}-candelstick--candle--negative--Color: var(--#{$chart}-global--Fill--Color--900);
222
222
 
223
223
  // Container
224
- --#{$chart}-container--cursor--line--Fill: var(--pf-t--global--border--color--default); // TODO review
224
+ --#{$chart}-container--cursor--line--Fill: var(--pf-t--global--border--color--default);
225
225
 
226
226
  // Simple Donut Chart
227
227
  --#{$chart}-donut--label--title--Fill: var(--#{$chart}-global--Fill--Color--900);
@@ -7373,6 +7373,9 @@ button.pf-v6-c-breadcrumb__link {
7373
7373
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
7374
7374
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
7375
7375
  --pf-v6-c-button--TextDecoration: none;
7376
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
7377
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7378
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
7376
7379
  --pf-v6-c-button--hover--BackgroundColor: transparent;
7377
7380
  --pf-v6-c-button--hover--BorderColor: transparent;
7378
7381
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -7565,8 +7568,6 @@ button.pf-v6-c-breadcrumb__link {
7565
7568
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
7566
7569
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
7567
7570
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
7568
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
7569
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
7570
7571
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7571
7572
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7572
7573
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -7606,6 +7607,9 @@ button.pf-v6-c-breadcrumb__link {
7606
7607
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
7607
7608
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
7608
7609
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
7610
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
7611
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
7612
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
7609
7613
  }
7610
7614
  .pf-v6-c-button::after {
7611
7615
  position: absolute;
@@ -7615,6 +7619,7 @@ button.pf-v6-c-breadcrumb__link {
7615
7619
  border: var(--pf-v6-c-button--BorderWidth) solid;
7616
7620
  border-color: var(--pf-v6-c-button--BorderColor);
7617
7621
  border-radius: inherit;
7622
+ transition: inherit;
7618
7623
  }
7619
7624
  .pf-v6-c-button.pf-m-primary {
7620
7625
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -7878,7 +7883,6 @@ button.pf-v6-c-breadcrumb__link {
7878
7883
  .pf-v6-c-button.pf-m-progress {
7879
7884
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
7880
7885
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
7881
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
7882
7886
  }
7883
7887
  .pf-v6-c-button.pf-m-in-progress {
7884
7888
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
package/patternfly.css CHANGED
@@ -7490,6 +7490,9 @@ button.pf-v6-c-breadcrumb__link {
7490
7490
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
7491
7491
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
7492
7492
  --pf-v6-c-button--TextDecoration: none;
7493
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
7494
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7495
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
7493
7496
  --pf-v6-c-button--hover--BackgroundColor: transparent;
7494
7497
  --pf-v6-c-button--hover--BorderColor: transparent;
7495
7498
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -7682,8 +7685,6 @@ button.pf-v6-c-breadcrumb__link {
7682
7685
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
7683
7686
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
7684
7687
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
7685
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
7686
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
7687
7688
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7688
7689
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
7689
7690
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -7723,6 +7724,9 @@ button.pf-v6-c-breadcrumb__link {
7723
7724
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
7724
7725
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
7725
7726
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
7727
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
7728
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
7729
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
7726
7730
  }
7727
7731
  .pf-v6-c-button::after {
7728
7732
  position: absolute;
@@ -7732,6 +7736,7 @@ button.pf-v6-c-breadcrumb__link {
7732
7736
  border: var(--pf-v6-c-button--BorderWidth) solid;
7733
7737
  border-color: var(--pf-v6-c-button--BorderColor);
7734
7738
  border-radius: inherit;
7739
+ transition: inherit;
7735
7740
  }
7736
7741
  .pf-v6-c-button.pf-m-primary {
7737
7742
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -7995,7 +8000,6 @@ button.pf-v6-c-breadcrumb__link {
7995
8000
  .pf-v6-c-button.pf-m-progress {
7996
8001
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
7997
8002
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
7998
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
7999
8003
  }
8000
8004
  .pf-v6-c-button.pf-m-in-progress {
8001
8005
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);