@patternfly/patternfly 6.5.0-prerelease.11 → 6.5.0-prerelease.13

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 (19) hide show
  1. package/base/normalize.scss +7 -0
  2. package/base/patternfly-variables.css +5 -0
  3. package/base/tokens/tokens-local.scss +10 -0
  4. package/components/Button/button.css +16 -4
  5. package/components/Button/button.scss +18 -4
  6. package/components/Card/card.css +6 -0
  7. package/components/Card/card.scss +7 -1
  8. package/components/Drawer/drawer.css +35 -3
  9. package/components/Drawer/drawer.scss +39 -4
  10. package/components/_index.css +57 -7
  11. package/docs/components/Card/examples/Card.md +154 -0
  12. package/docs/components/Drawer/examples/Drawer.md +78 -13
  13. package/package.json +2 -2
  14. package/patternfly-base-no-globals.css +5 -0
  15. package/patternfly-base.css +12 -0
  16. package/patternfly-no-globals.css +62 -7
  17. package/patternfly.css +69 -7
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/components/_index.css CHANGED
@@ -1685,10 +1685,17 @@ button.pf-v6-c-breadcrumb__link {
1685
1685
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1686
1686
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1687
1687
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1688
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1688
1689
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1689
1690
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1691
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1692
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1690
1693
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1691
1694
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1695
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1696
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1697
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1698
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
1692
1699
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1693
1700
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
1694
1701
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -1698,10 +1705,8 @@ button.pf-v6-c-breadcrumb__link {
1698
1705
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1699
1706
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1700
1707
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1701
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
1702
1708
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1703
1709
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1704
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
1705
1710
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1706
1711
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1707
1712
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -2026,12 +2031,13 @@ button.pf-v6-c-breadcrumb__link {
2026
2031
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2027
2032
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2028
2033
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2034
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
2035
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
2036
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
2029
2037
  --pf-v6-c-button--BackgroundColor: transparent;
2030
2038
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2031
2039
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2032
2040
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
2033
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2034
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2035
2041
  --pf-v6-c-button--hover--BackgroundColor: transparent;
2036
2042
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2037
2043
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -2040,6 +2046,8 @@ button.pf-v6-c-breadcrumb__link {
2040
2046
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
2041
2047
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
2042
2048
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
2049
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2050
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2043
2051
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2044
2052
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2045
2053
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -2047,6 +2055,7 @@ button.pf-v6-c-breadcrumb__link {
2047
2055
  --pf-v6-c-button--hover--BorderWidth: 0;
2048
2056
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2049
2057
  text-align: start;
2058
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2050
2059
  white-space: normal;
2051
2060
  background: transparent;
2052
2061
  outline-offset: 0.125rem;
@@ -2057,6 +2066,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2057
2066
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2058
2067
  }
2059
2068
 
2069
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2070
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2071
+ }
2060
2072
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2061
2073
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2062
2074
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -2920,6 +2932,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2920
2932
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2921
2933
  }
2922
2934
 
2935
+ .pf-v6-c-card__subtitle {
2936
+ padding-block-start: var(--pf-t--global--spacer--sm);
2937
+ font-size: var(--pf-t--global--font--size--body--sm);
2938
+ color: var(--pf-t--global--text--color--subtle);
2939
+ }
2940
+
2923
2941
  .pf-v6-c-card__actions {
2924
2942
  display: flex;
2925
2943
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -5960,6 +5978,7 @@ ul) {
5960
5978
  }
5961
5979
 
5962
5980
  .pf-v6-c-drawer {
5981
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
5963
5982
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5964
5983
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5965
5984
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -5990,6 +6009,7 @@ ul) {
5990
6009
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5991
6010
  --pf-v6-c-drawer__panel--Opacity: 0;
5992
6011
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
6012
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
5993
6013
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5994
6014
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5995
6015
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -6005,6 +6025,13 @@ ul) {
6005
6025
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
6006
6026
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
6007
6027
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
6028
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
6029
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
6030
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
6031
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
6032
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6033
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6034
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6008
6035
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6009
6036
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6010
6037
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6121,6 +6148,8 @@ ul) {
6121
6148
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
6122
6149
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
6123
6150
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6151
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6152
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
6124
6153
  }
6125
6154
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6126
6155
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -6144,7 +6173,7 @@ ul) {
6144
6173
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
6145
6174
  }
6146
6175
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6147
- transform: translateX(-100%);
6176
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6148
6177
  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
6149
6178
  visibility: visible;
6150
6179
  }
@@ -6156,7 +6185,7 @@ ul) {
6156
6185
  transform: translateX(0);
6157
6186
  }
6158
6187
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6159
- transform: translate(0, -100%);
6188
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6160
6189
  }
6161
6190
  .pf-v6-c-drawer.pf-m-resizing {
6162
6191
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -6165,6 +6194,21 @@ ul) {
6165
6194
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
6166
6195
  pointer-events: auto;
6167
6196
  }
6197
+ @media screen and (min-width: 48rem) {
6198
+ .pf-v6-c-drawer.pf-m-pill {
6199
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
6200
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
6201
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
6202
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6203
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6204
+ }
6205
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6206
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
6207
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
6208
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6209
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6210
+ }
6211
+ }
6168
6212
 
6169
6213
  .pf-v6-c-drawer__section {
6170
6214
  flex-grow: 0;
@@ -6180,6 +6224,7 @@ ul) {
6180
6224
  .pf-v6-c-drawer__main {
6181
6225
  display: flex;
6182
6226
  flex: 1;
6227
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
6183
6228
  overflow: hidden;
6184
6229
  }
6185
6230
 
@@ -6218,6 +6263,8 @@ ul) {
6218
6263
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
6219
6264
  order: 1;
6220
6265
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
6266
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
6267
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
6221
6268
  overflow: auto;
6222
6269
  visibility: hidden;
6223
6270
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -6226,6 +6273,7 @@ ul) {
6226
6273
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
6227
6274
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
6228
6275
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
6276
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
6229
6277
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
6230
6278
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
6231
6279
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -6413,7 +6461,7 @@ ul) {
6413
6461
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
6414
6462
  }
6415
6463
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6416
- transform: translateX(0);
6464
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
6417
6465
  }
6418
6466
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
6419
6467
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -6425,6 +6473,8 @@ ul) {
6425
6473
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
6426
6474
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
6427
6475
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
6476
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
6477
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
6428
6478
  min-width: auto;
6429
6479
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
6430
6480
  }
package/docs/components/Card/examples/Card.md CHANGED
@@ -175,6 +175,159 @@ cssPrefix: pf-v6-c-card
175
175
 
176
176
  ```
177
177
 
178
+ ### With subtitle
179
+
180
+ ```html isBeta
181
+ <div class="pf-v6-c-card" id="card-subtitle">
182
+ <div class="pf-v6-c-card__header">
183
+ <div class="pf-v6-c-card__actions">
184
+ <button
185
+ class="pf-v6-c-menu-toggle pf-m-plain"
186
+ type="button"
187
+ aria-expanded="false"
188
+ aria-label="Card menu toggle"
189
+ id="card-subtitle-menu-toggle-kebab"
190
+ >
191
+ <span class="pf-v6-c-menu-toggle__icon">
192
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
193
+ </span>
194
+ </button>
195
+ <div class="pf-v6-c-check pf-m-standalone">
196
+ <input
197
+ class="pf-v6-c-check__input"
198
+ type="checkbox"
199
+ aria-label="Standalone check"
200
+ id="card-subtitle-check"
201
+ name="card-subtitle-check"
202
+ aria-labelledby="card-subtitle"
203
+ />
204
+ </div>
205
+ </div>
206
+ <div class="pf-v6-c-card__header-main">
207
+ <div class="pf-v6-c-card__title">
208
+ <h2
209
+ class="pf-v6-c-card__title-text"
210
+ id="card-subtitle-check-label"
211
+ >This is a really really really really really really really really really really long title</h2>
212
+ <div class="pf-v6-c-card__subtitle">This is a card subtitle.</div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ <div class="pf-v6-c-card__body">Body</div>
217
+ <div class="pf-v6-c-card__footer">Footer</div>
218
+ </div>
219
+ <br />
220
+ <div class="pf-v6-c-card" id="card-image-action-subtitle">
221
+ <div class="pf-v6-c-card__header">
222
+ <div class="pf-v6-c-card__header-main">
223
+ <svg height="70px" viewBox="0 0 679 158">
224
+ <title>PF-HorizontalLogo-Color</title>
225
+ <defs>
226
+ <linearGradient
227
+ x1="68%"
228
+ y1="2.25860997e-13%"
229
+ x2="32%"
230
+ y2="100%"
231
+ id="linearGradient-card-image-action-subtitle"
232
+ >
233
+ <stop stop-color="#2B9AF3" offset="0%" />
234
+ <stop
235
+ stop-color="#73BCF7"
236
+ stop-opacity="0.502212631"
237
+ offset="100%"
238
+ />
239
+ </linearGradient>
240
+ </defs>
241
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
242
+ <g
243
+ transform="translate(206.000000, 45.750000)"
244
+ fill="var(--pf-t--global--text--color--regular)"
245
+ fill-rule="nonzero"
246
+ >
247
+ <path
248
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
249
+ />
250
+ <path
251
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
252
+ />
253
+ <path
254
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
255
+ />
256
+ <path
257
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
258
+ />
259
+ <path
260
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
261
+ />
262
+ <path
263
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
264
+ />
265
+ <path
266
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
267
+ />
268
+ <polygon
269
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
270
+ />
271
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
272
+ <path
273
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
274
+ />
275
+ </g>
276
+ <g transform="translate(0.000000, 0.000000)">
277
+ <path
278
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
279
+ fill="#0066CC"
280
+ />
281
+ <path
282
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
283
+ fill="url(#linearGradient-card-image-action-subtitle)"
284
+ />
285
+ <path
286
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
287
+ fill="url(#linearGradient-card-image-action-subtitle)"
288
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
289
+ />
290
+ </g>
291
+ </g>
292
+ </svg>
293
+ </div>
294
+ <div class="pf-v6-c-card__actions">
295
+ <button
296
+ class="pf-v6-c-menu-toggle pf-m-plain"
297
+ type="button"
298
+ aria-expanded="false"
299
+ aria-label="Card menu toggle"
300
+ id="card-image-action-subtitle-menu-toggle-kebab"
301
+ >
302
+ <span class="pf-v6-c-menu-toggle__icon">
303
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
304
+ </span>
305
+ </button>
306
+ <div class="pf-v6-c-check pf-m-standalone">
307
+ <input
308
+ class="pf-v6-c-check__input"
309
+ type="checkbox"
310
+ aria-label="Standalone check"
311
+ id="card-image-action-subtitle-check"
312
+ name="card-image-action-subtitle-check"
313
+ aria-labelledby="card-image-action-subtitle"
314
+ />
315
+ </div>
316
+ </div>
317
+ </div>
318
+ <div class="pf-v6-c-card__title">
319
+ <h2
320
+ class="pf-v6-c-card__title-text"
321
+ id="card-image-action-subtitle-check-label"
322
+ >Title</h2>
323
+ <div class="pf-v6-c-card__subtitle">Subtitle</div>
324
+ </div>
325
+ <div class="pf-v6-c-card__body">Body</div>
326
+ <div class="pf-v6-c-card__footer">Footer</div>
327
+ </div>
328
+
329
+ ```
330
+
178
331
  ### With only actions in head (no title/footer)
179
332
 
180
333
  ```html
@@ -1709,6 +1862,7 @@ A card is a generic rectangular container that can be used to build other compon
1709
1862
  | `.pf-v6-c-card` | `<div>` | Creates a card component. **Required** |
1710
1863
  | `.pf-v6-c-card__title` | `<div>` | Creates a card title container. |
1711
1864
  | `.pf-v6-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
1865
+ | `.pf-v6-c-card__subtitle` | Creates a card subtitle element. |
1712
1866
  | `.pf-v6-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v6-c-card__body` elements. |
1713
1867
  | `.pf-v6-c-card__footer` | `<div>` | Creates the footer of a card. |
1714
1868
  | `.pf-v6-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
package/docs/components/Drawer/examples/Drawer.md CHANGED
@@ -767,22 +767,79 @@ cssPrefix: pf-v6-c-drawer
767
767
 
768
768
  ```
769
769
 
770
- ### Accessibility
770
+ ### Pill
771
771
 
772
- | Class | Applied to | Outcome |
773
- | -- | -- | -- |
774
- | `role="separator"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
775
- | `tabindex="0"` | `.pf-v6-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
776
- | `aria-orientation="horizontal"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
777
- | `aria-orientation="vertical"` | `.pf-v6-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
772
+ ```html
773
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-pill">
774
+ <div class="pf-v6-c-drawer__main">
775
+ <div class="pf-v6-c-drawer__content">
776
+ <div
777
+ class="pf-v6-c-drawer__body"
778
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
779
+ </div>
780
+ <div class="pf-v6-c-drawer__panel">
781
+ <div class="pf-v6-c-drawer__head">
782
+ <span>Drawer panel header content</span>
783
+ <div class="pf-v6-c-drawer__actions">
784
+ <div class="pf-v6-c-drawer__close">
785
+ <button
786
+ class="pf-v6-c-button pf-m-plain"
787
+ type="button"
788
+ aria-label="Close drawer panel"
789
+ >
790
+ <span class="pf-v6-c-button__icon">
791
+ <i class="fas fa-times" aria-hidden="true"></i>
792
+ </span>
793
+ </button>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ <div
798
+ class="pf-v6-c-drawer__description"
799
+ >This is a helpful description of the drawer panel.</div>
800
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
801
+ </div>
802
+ </div>
803
+ </div>
778
804
 
779
- ### Usage
805
+ ```
780
806
 
781
- | Class | Applied to | Outcome |
782
- | -- | -- | -- |
783
- | `.pf-v6-c-drawer__splitter` | `<div>` | Initiates the splitter. |
784
- | `.pf-v6-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
785
- | `.pf-m-vertical` | `.pf-v6-c-drawer__splitter` | Modifies the splitter to be vertical. |
807
+ ### Pill inline
808
+
809
+ ```html
810
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline pf-m-pill">
811
+ <div class="pf-v6-c-drawer__main">
812
+ <div class="pf-v6-c-drawer__content">
813
+ <div
814
+ class="pf-v6-c-drawer__body"
815
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
816
+ </div>
817
+ <div class="pf-v6-c-drawer__panel">
818
+ <div class="pf-v6-c-drawer__head">
819
+ <span>Drawer panel header content</span>
820
+ <div class="pf-v6-c-drawer__actions">
821
+ <div class="pf-v6-c-drawer__close">
822
+ <button
823
+ class="pf-v6-c-button pf-m-plain"
824
+ type="button"
825
+ aria-label="Close drawer panel"
826
+ >
827
+ <span class="pf-v6-c-button__icon">
828
+ <i class="fas fa-times" aria-hidden="true"></i>
829
+ </span>
830
+ </button>
831
+ </div>
832
+ </div>
833
+ </div>
834
+ <div
835
+ class="pf-v6-c-drawer__description"
836
+ >This is a helpful description of the drawer panel.</div>
837
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
838
+ </div>
839
+ </div>
840
+ </div>
841
+
842
+ ```
786
843
 
787
844
  ## Documentation
788
845
 
@@ -793,6 +850,10 @@ cssPrefix: pf-v6-c-drawer
793
850
  | `aria-expanded="true"` | `action that opens drawer` | Indicates that the expandable content is visible. **Required** |
794
851
  | `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required** |
795
852
  | `hidden` | `.pf-v6-c-drawer__panel` | Hides the drawer panel from assistive technologies. **Required** |
853
+ | `role="separator"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
854
+ | `tabindex="0"` | `.pf-v6-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
855
+ | `aria-orientation="horizontal"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
856
+ | `aria-orientation="vertical"` | `.pf-v6-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
796
857
 
797
858
  ### Usage
798
859
 
@@ -809,11 +870,14 @@ cssPrefix: pf-v6-c-drawer
809
870
  | `.pf-v6-c-drawer__actions` | `<div>` | Initiates an actions container within `.pf-v6--drawer__head`. |
810
871
  | `.pf-v6-c-drawer__close` | `<div>` | Identifies the drawer close button within `.pf-v6-c-drawer__actions`. |
811
872
  | `.pf-v6-c-drawer__description` | `<div>` | Initiates a drawer panel description. |
873
+ | `.pf-v6-c-drawer__splitter` | `<div>` | Initiates the splitter. |
874
+ | `.pf-v6-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
812
875
  | `.pf-m-panel-left` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the left. |
813
876
  | `.pf-m-panel-bottom` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
814
877
  | `.pf-m-expanded` | `.pf-v6-c-drawer` | Modifies the drawer panel for the expanded state. |
815
878
  | `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/tokens/all-patternfly-tokens). |
816
879
  | `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
880
+ | `.pf-m-pill` | `.pf-v6-c-drawer` | Modifies the drawer for pill styles. |
817
881
  | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
818
882
  | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
819
883
  | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
@@ -822,6 +886,7 @@ cssPrefix: pf-v6-c-drawer
822
886
  | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
823
887
  | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/tokens/all-patternfly-tokens). |
824
888
  | `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |
889
+ | `.pf-m-vertical` | `.pf-v6-c-drawer__splitter` | Modifies the splitter to be vertical. |
825
890
  | `--pf-v6-c-drawer__panel--md--FlexBasis--min` | `.pf-v6-c-drawer__panel` | Defines the drawer panel minimum size. |
826
891
  | `--pf-v6-c-drawer__panel--md--FlexBasis` | `.pf-v6-c-drawer__panel` | Defines the drawer panel size. |
827
892
  | `--pf-v6-c-drawer__panel--md--FlexBasis--max` | `.pf-v6-c-drawer__panel` | Defines the drawer panel maximum size. |
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.5.0-prerelease.11",
4
+ "version": "6.5.0-prerelease.13",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -48,7 +48,7 @@
48
48
  "@commitlint/config-conventional": "^19.1.0",
49
49
  "@fortawesome/fontawesome": "^1.1.8",
50
50
  "@octokit/rest": "^20.1.0",
51
- "@patternfly/documentation-framework": "6.28.9",
51
+ "@patternfly/documentation-framework": "6.28.10",
52
52
  "@patternfly/patternfly-a11y": "5.1.0",
53
53
  "@patternfly/react-code-editor": "6.4.0",
54
54
  "@patternfly/react-core": "6.4.0",
package/patternfly-base-no-globals.css CHANGED
@@ -7114,6 +7114,11 @@
7114
7114
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7115
7115
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7116
7116
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7117
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7118
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7119
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7120
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7121
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7117
7122
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7118
7123
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7119
7124
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
package/patternfly-base.css CHANGED
@@ -118,11 +118,18 @@ pre) {
118
118
  :where(a) {
119
119
  color: var(--pf-t--global--text--color--link--default);
120
120
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
121
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
122
+ text-decoration-color: var(--pf-t--global--text-decoration--color--default);
123
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
124
+ transition: ease text-underline-offset 0.3s;
121
125
  }
122
126
 
123
127
  :where(a:hover, a:focus) {
124
128
  color: var(--pf-t--global--text--color--link--hover);
125
129
  text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
130
+ text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
131
+ text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
132
+ text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
126
133
  }
127
134
 
128
135
  :where(a,
@@ -7254,6 +7261,11 @@ button) {
7254
7261
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7255
7262
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7256
7263
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7264
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
7265
+ --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
7266
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7267
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7268
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7257
7269
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7258
7270
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7259
7271
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);