@patternfly/patternfly 6.2.0-prerelease.2 → 6.2.0-prerelease.20

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 (107) hide show
  1. package/assets/pficon/pficon.scss +1 -1
  2. package/base/normalize.scss +2 -2
  3. package/base/patternfly-pf-icons.css +1 -1
  4. package/components/Alert/alert-group.css +50 -7
  5. package/components/Alert/alert-group.scss +114 -28
  6. package/components/Banner/banner.css +2 -2
  7. package/components/Banner/banner.scss +2 -2
  8. package/components/Breadcrumb/breadcrumb.css +3 -2
  9. package/components/Breadcrumb/breadcrumb.scss +3 -2
  10. package/components/Button/button.css +63 -2
  11. package/components/Button/button.scss +74 -2
  12. package/components/Card/card.css +17 -0
  13. package/components/Card/card.scss +22 -0
  14. package/components/Content/content.css +2 -1
  15. package/components/Content/content.scss +2 -1
  16. package/components/DescriptionList/description-list.css +3 -2
  17. package/components/DescriptionList/description-list.scss +3 -2
  18. package/components/Drawer/drawer.css +3 -1
  19. package/components/Drawer/drawer.scss +3 -1
  20. package/components/Form/form.css +3 -6
  21. package/components/Form/form.scss +3 -7
  22. package/components/HelperText/helper-text.css +13 -0
  23. package/components/HelperText/helper-text.scss +16 -0
  24. package/components/JumpLinks/jump-links.css +1 -1
  25. package/components/JumpLinks/jump-links.scss +1 -1
  26. package/components/Label/label.css +3 -2
  27. package/components/Label/label.scss +3 -2
  28. package/components/Masthead/masthead.css +1 -1
  29. package/components/Masthead/masthead.scss +1 -1
  30. package/components/Menu/menu.css +15 -7
  31. package/components/Menu/menu.scss +14 -5
  32. package/components/MenuToggle/menu-toggle.css +41 -0
  33. package/components/MenuToggle/menu-toggle.scss +49 -0
  34. package/components/Nav/nav.css +46 -13
  35. package/components/Nav/nav.scss +57 -17
  36. package/components/Page/page.css +16 -1
  37. package/components/Page/page.scss +17 -3
  38. package/components/Popover/popover.css +2 -0
  39. package/components/Popover/popover.scss +2 -0
  40. package/components/Progress/progress.css +3 -0
  41. package/components/Progress/progress.scss +3 -0
  42. package/components/ProgressStepper/progress-stepper.css +2 -1
  43. package/components/ProgressStepper/progress-stepper.scss +2 -1
  44. package/components/SimpleList/simple-list.css +2 -2
  45. package/components/SimpleList/simple-list.scss +2 -2
  46. package/components/Switch/switch.css +3 -1
  47. package/components/Switch/switch.scss +4 -2
  48. package/components/Table/table.css +3 -3
  49. package/components/Table/table.scss +3 -2
  50. package/components/Tabs/tabs.css +1 -1
  51. package/components/Tabs/tabs.scss +1 -1
  52. package/components/Timestamp/timestamp.css +2 -1
  53. package/components/Timestamp/timestamp.scss +2 -1
  54. package/components/ToggleGroup/toggle-group.css +1 -1
  55. package/components/ToggleGroup/toggle-group.scss +1 -1
  56. package/components/Toolbar/toolbar.css +6 -1
  57. package/components/Toolbar/toolbar.scss +7 -1
  58. package/components/Wizard/wizard.css +1 -1
  59. package/components/Wizard/wizard.scss +1 -1
  60. package/components/_index.css +307 -60
  61. package/docs/components/Alert/examples/Alert.md +6 -0
  62. package/docs/components/Avatar/examples/Avatar.md +4 -4
  63. package/docs/components/Brand/examples/Brand.md +2 -2
  64. package/docs/components/Button/examples/Button.md +29 -0
  65. package/docs/components/Card/examples/Card.md +30 -0
  66. package/docs/components/DataList/examples/DataList.md +3 -3
  67. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  68. package/docs/components/Divider/examples/Divider.md +2 -2
  69. package/docs/components/Drawer/examples/Drawer.md +3 -3
  70. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  71. package/docs/components/Masthead/examples/masthead.md +1 -1
  72. package/docs/components/Menu/examples/Menu.md +8 -8
  73. package/docs/components/Nav/examples/Navigation.md +3 -0
  74. package/docs/components/Page/examples/Page.md +2 -2
  75. package/docs/components/Pagination/examples/Pagination.md +3 -3
  76. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  77. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  78. package/docs/components/Table/examples/Table.md +17 -29
  79. package/docs/components/Tabs/examples/Tabs.md +148 -6
  80. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  81. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  82. package/docs/components/Toolbar/examples/Toolbar.md +35 -7
  83. package/docs/demos/Card/examples/Card.md +32 -24
  84. package/docs/demos/CardView/examples/CardView.md +2 -0
  85. package/docs/demos/Nav/examples/Nav.md +2 -0
  86. package/docs/layouts/Flex/examples/Flex.md +1 -1
  87. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  88. package/docs/layouts/Grid/examples/Grid.md +4 -4
  89. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  90. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  91. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  92. package/docs/utilities/Display/examples/Display.md +1 -1
  93. package/docs/utilities/Flex/examples/Flex.md +1 -1
  94. package/docs/utilities/Float/examples/Float.md +1 -1
  95. package/docs/utilities/Sizing/examples/Sizing.md +6 -6
  96. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  97. package/docs/utilities/Text/examples/Text.md +1 -1
  98. package/package.json +2 -2
  99. package/patternfly-base-no-globals.css +1 -1
  100. package/patternfly-base.css +3 -3
  101. package/patternfly-charts.css +83 -0
  102. package/patternfly-charts.scss +126 -0
  103. package/patternfly-no-globals.css +308 -61
  104. package/patternfly.css +310 -63
  105. package/patternfly.min.css +1 -1
  106. package/patternfly.min.css.map +1 -1
  107. package/docs/components/TabContent/examples/TabContent.md +0 -153
package/assets/pficon/pficon.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  font-variant: normal;
15
15
  font-weight: normal;
16
16
  // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
17
- text-decoration: none;
17
+ text-decoration-line: none;
18
18
  text-transform: none;
19
19
  }
20
20
 
package/base/normalize.scss CHANGED
@@ -107,12 +107,12 @@
107
107
 
108
108
  :where(a) {
109
109
  color: var(--pf-t--global--text--color--link--default);
110
- text-decoration: var(--pf-t--global--text-decoration--link--line--default);
110
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
111
111
  }
112
112
 
113
113
  :where(a:hover, a:focus) {
114
114
  color: var(--pf-t--global--text--color--link--hover);
115
- text-decoration: var(--pf-t--global--text-decoration--link--line--hover);
115
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
116
116
  }
117
117
 
118
118
  :where(
package/base/patternfly-pf-icons.css CHANGED
@@ -9,7 +9,7 @@
9
9
  font-style: normal;
10
10
  font-variant: normal;
11
11
  font-weight: normal;
12
- text-decoration: none;
12
+ text-decoration-line: none;
13
13
  text-transform: none;
14
14
  }
15
15
 
package/components/Alert/alert-group.css CHANGED
@@ -4,6 +4,48 @@
4
4
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
5
5
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
6
6
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
7
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
8
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
9
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
10
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
11
+ 0s;
12
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
13
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
14
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
15
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
16
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
17
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
18
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
19
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
20
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
21
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
22
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
23
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
24
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
25
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
26
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
27
+ 0s;
28
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
29
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
30
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
31
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
32
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
33
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
34
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
35
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
36
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
37
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
38
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
39
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
40
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
41
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
42
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
43
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
44
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
45
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
46
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
47
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
48
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
7
49
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
8
50
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
9
51
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -52,15 +94,15 @@
52
94
  display: grid;
53
95
  grid-template-rows: 1fr;
54
96
  opacity: 1;
55
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
97
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
56
98
  transform: translateX(0) translateY(0);
57
99
  }
58
100
  @media screen and (prefers-reduced-motion: no-preference) {
59
101
  .pf-v6-c-alert-group__item {
60
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
102
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
61
103
  }
62
104
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
63
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
105
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
64
106
  }
65
107
  }
66
108
  .pf-v6-c-alert-group__item.pf-m-offstage-top {
@@ -81,21 +123,22 @@
81
123
  margin-block: 0;
82
124
  overflow: hidden;
83
125
  opacity: 0;
84
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
85
- transform: translateX(100%);
126
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
86
127
  }
87
128
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
88
129
  min-height: 0;
89
130
  padding-block-start: 0;
90
131
  padding-block-end: 0;
91
132
  border-width: 0;
133
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
92
134
  }
93
135
  @media screen and (prefers-reduced-motion: no-preference) {
94
136
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
95
- transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
137
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
138
+ transform: translateX(100%);
96
139
  }
97
140
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
98
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
141
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
99
142
  }
100
143
  }
101
144
  .pf-v6-c-alert-group__item:hover {
package/components/Alert/alert-group.scss CHANGED
@@ -11,6 +11,60 @@
11
11
  --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
12
12
  --#{$alert-group}--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
13
13
 
14
+ // Alert group item addition reduced motion
15
+ --#{$alert-group}--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
16
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
17
+ --#{$alert-group}--m-toast__item--Transition--opacity--default: var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity--default)
18
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity--default)
19
+ 0s;
20
+
21
+ // Alert group item addition
22
+ --#{$alert-group}--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
23
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
24
+ --#{$alert-group}--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
25
+ --#{$alert-group}--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
26
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
27
+ --#{$alert-group}--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
28
+ --#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
29
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
30
+ --#{$alert-group}--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
31
+ --#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
32
+
33
+ // Alert addition
34
+ --#{$alert-group}--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
35
+ --#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
36
+ --#{$alert-group}--m-toast__item--c-alert--Transition: all
37
+ var(--#{$alert-group}--m-toast__item--c-alert--TransitionDuration)
38
+ var(--#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction)
39
+ 0s;
40
+
41
+ // Alert group item removal reduced motion
42
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
43
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
44
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
45
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
46
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
47
+
48
+ // Alert group item removal
49
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
50
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
51
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
52
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
53
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
54
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
55
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
56
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
57
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
58
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
59
+
60
+ // Alert removal
61
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
62
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
63
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: all
64
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
65
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
66
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
67
+
14
68
  // Overflow button
15
69
  --#{$alert-group}__overflow-button--BorderWidth: 0;
16
70
  --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -71,7 +125,7 @@
71
125
  // Reduced motion by default
72
126
  // transparency change only
73
127
  transition:
74
- opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
128
+ opacity var(--#{$alert-group}--m-toast__item--Transition--opacity--default);
75
129
  transform: translateX(0) translateY(0);
76
130
 
77
131
  // This transition will happen when the item is added (.pf-m-offstage-top is removed)
@@ -79,14 +133,24 @@
79
133
  // These values are for regular motion
80
134
  @media screen and (prefers-reduced-motion: no-preference) {
81
135
  transition:
82
- opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default),
83
- transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default),
84
- grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s,
85
- margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
136
+ opacity
137
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--opacity)
138
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--opacity)
139
+ var(--#{$alert-group}--m-toast__item--TransitionDelay--opacity),
140
+ transform
141
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--transform)
142
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--transform)
143
+ var(--#{$alert-group}--m-toast__item--TransitionDelay--transform),
144
+ grid-template-rows
145
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--grid-template-rows)
146
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--grid-template-rows),
147
+ margin-block
148
+ var(--#{$alert-group}--m-toast__item--TransitionDuration--margin-block)
149
+ var(--#{$alert-group}--m-toast__item--TransitionTimingFunction--margin-block);
86
150
 
87
- & .pf-v6-c-alert {
88
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
89
- }
151
+ & .pf-v6-c-alert {
152
+ transition: var(--#{$alert-group}--m-toast__item--c-alert--Transition);
153
+ }
90
154
  }
91
155
 
92
156
  // This class is used BEFORE the alert item comes into the list
@@ -117,30 +181,52 @@
117
181
 
118
182
  // This transition will happen when the item is removed
119
183
  // Reduced motion by default
120
- // transparency change only
184
+ // transparency change only, the other properties are delayed until opacity reaches 0 then collapse instantly
121
185
  transition:
122
- opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
123
- transform: translateX(100%);
124
-
125
- & .pf-v6-c-alert {
126
- min-height: 0;
127
- padding-block-start: 0;
128
- padding-block-end: 0;
129
- border-width: 0;
130
- }
131
-
132
- // This transition will happen when the item is added (.pf-m-offstage-top is removed)
133
- // give it height, then slide it down into place
134
- // These values are for regular motion
135
- @media screen and (prefers-reduced-motion: no-preference) {
186
+ grid-template-rows
187
+ 0s
188
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default),
189
+ margin-block
190
+ 0s
191
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default),
192
+ opacity
193
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default)
194
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
195
+
196
+ & .pf-v6-c-alert {
197
+ min-height: 0;
198
+ padding-block-start: 0;
199
+ padding-block-end: 0;
200
+ border-width: 0;
201
+ transition:
202
+ all
203
+ 0s
204
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
205
+ }
206
+
207
+ // This transition will happen when the item is removed (.pf-m-offstage-right is added)
208
+ // Slide it down into place, then reduce height
209
+ // These values are for regular motion
210
+ @media screen and (prefers-reduced-motion: no-preference) {
136
211
  transition:
137
- transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
138
- opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s,
139
- margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short),
140
- grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
212
+ transform
213
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform)
214
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform),
215
+ opacity
216
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity)
217
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity),
218
+ margin-block
219
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block)
220
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block)
221
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block),
222
+ grid-template-rows
223
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows)
224
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows)
225
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
226
+ transform: translateX(100%);
141
227
 
142
228
  & .pf-v6-c-alert {
143
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
229
+ transition: var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition);
144
230
  }
145
231
  }
146
232
  }
package/components/Banner/banner.css CHANGED
@@ -119,7 +119,7 @@
119
119
  }
120
120
  .pf-v6-c-banner a {
121
121
  color: var(--pf-v6-c-banner--link--Color);
122
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
122
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
123
123
  }
124
124
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
125
125
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -132,7 +132,7 @@
132
132
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
133
133
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
134
134
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
135
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
135
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
136
136
  }
137
137
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
138
138
  cursor: not-allowed;
package/components/Banner/banner.scss CHANGED
@@ -142,7 +142,7 @@
142
142
 
143
143
  a {
144
144
  color: var(--#{$banner}--link--Color);
145
- text-decoration: var(--#{$banner}--link--TextDecoration);
145
+ text-decoration-line: var(--#{$banner}--link--TextDecoration);
146
146
 
147
147
  &:hover:not(.pf-m-disabled) {
148
148
  --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
@@ -162,7 +162,7 @@
162
162
  --#{$button}--m-link--hover--Color: var(--#{$banner}--link--hover--Color);
163
163
  --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
164
164
 
165
- text-decoration: var(--#{$banner}--link--TextDecoration);
165
+ text-decoration-line: var(--#{$banner}--link--TextDecoration);
166
166
 
167
167
  &:disabled,
168
168
  &.pf-m-disabled {
package/components/Breadcrumb/breadcrumb.css CHANGED
@@ -65,7 +65,8 @@
65
65
  font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
66
66
  line-height: inherit;
67
67
  color: var(--pf-v6-c-breadcrumb__link--Color);
68
- text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
68
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
69
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
69
70
  word-break: break-word;
70
71
  background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
71
72
  }
@@ -79,7 +80,7 @@
79
80
  }
80
81
  .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
81
82
  color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
82
- text-decoration: none;
83
+ text-decoration-line: none;
83
84
  }
84
85
  button.pf-v6-c-breadcrumb__link {
85
86
  border: none;
package/components/Breadcrumb/breadcrumb.scss CHANGED
@@ -81,7 +81,8 @@
81
81
  font-weight: var(--#{$breadcrumb}__link--FontWeight);
82
82
  line-height: inherit;
83
83
  color: var(--#{$breadcrumb}__link--Color);
84
- text-decoration: var(--#{$breadcrumb}__link--TextDecorationLine) var(--#{$breadcrumb}__link--TextDecorationStyle);
84
+ text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
85
+ text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
85
86
  word-break: break-word;
86
87
  background-color: var(--#{$breadcrumb}__link--BackgroundColor);
87
88
 
@@ -99,7 +100,7 @@
99
100
  &,
100
101
  &:is(:hover, :focus) {
101
102
  color: var(--#{$breadcrumb}__link--m-current--Color);
102
- text-decoration: none;
103
+ text-decoration-line: none;
103
104
  }
104
105
  }
105
106
 
package/components/Button/button.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
19
19
  --pf-v6-c-button--TextDecorationLine: none;
20
20
  --pf-v6-c-button--TextDecorationStyle: none;
21
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
21
22
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
22
23
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
24
  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -26,6 +27,7 @@
26
27
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
27
28
  --pf-v6-c-button--hover--TextDecorationLine: none;
28
29
  --pf-v6-c-button--hover--TextDecorationStyle: none;
30
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
29
31
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
30
32
  --pf-v6-c-button--m-clicked--BorderColor: transparent;
31
33
  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -110,6 +112,12 @@
110
112
  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
111
113
  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
112
114
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
115
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
116
+ --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
117
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
118
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
119
+ --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
120
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
113
121
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
114
122
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
115
123
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -217,6 +225,7 @@
217
225
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
218
226
  --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
219
227
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
228
+ --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
220
229
  --pf-v6-c-button--disabled--BorderColor: transparent;
221
230
  --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
222
231
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -226,6 +235,14 @@
226
235
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
227
236
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
228
237
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
238
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
239
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
240
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
241
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
242
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
243
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
244
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
245
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
229
246
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
230
247
  --pf-v6-c-button__progress--Opacity: 0;
231
248
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -261,7 +278,9 @@
261
278
  line-height: var(--pf-v6-c-button--LineHeight, inherit);
262
279
  color: var(--pf-v6-c-button--Color);
263
280
  text-align: center;
264
- text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle);
281
+ text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
282
+ text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
283
+ text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
265
284
  white-space: nowrap;
266
285
  cursor: pointer;
267
286
  user-select: none;
@@ -374,6 +393,12 @@
374
393
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
375
394
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
376
395
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
396
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
397
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
398
+ --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
399
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
400
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
401
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
377
402
  text-align: start;
378
403
  white-space: normal;
379
404
  outline-offset: 0.125rem;
@@ -527,6 +552,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
527
552
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
528
553
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
529
554
  }
555
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
556
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
557
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
558
+ transition-property: color;
559
+ }
560
+ .pf-v6-c-button.pf-m-favorited {
561
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
562
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
563
+ }
564
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
565
+ animation-name: pf-v6-c-button-icon-favorited;
566
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
567
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
568
+ }
530
569
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
531
570
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
532
571
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -534,7 +573,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
534
573
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
535
574
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
536
575
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
537
- text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
576
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
577
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
578
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
538
579
  }
539
580
  .pf-v6-c-button.pf-m-clicked {
540
581
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -548,6 +589,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
548
589
  }
549
590
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
550
591
  color: var(--pf-v6-c-button--disabled--Color);
592
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
551
593
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
552
594
  }
553
595
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
@@ -579,6 +621,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
579
621
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
580
622
  opacity: 0;
581
623
  }
624
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
625
+ animation-name: pf-v6-c-button-icon-notify;
626
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
627
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
628
+ }
582
629
 
583
630
  .pf-v6-c-button__icon {
584
631
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -607,4 +654,18 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
607
654
  .pf-v6-c-button__count {
608
655
  display: inline-flex;
609
656
  align-items: center;
657
+ }
658
+
659
+ @keyframes pf-v6-c-button-icon-notify {
660
+ 33% {
661
+ transform: rotate(30deg);
662
+ }
663
+ 66% {
664
+ transform: rotate(-60deg);
665
+ }
666
+ }
667
+ @keyframes pf-v6-c-button-icon-favorited {
668
+ 50% {
669
+ transform: scale(1.5);
670
+ }
610
671
  }