@patternfly/patternfly 6.6.0-prerelease.31 → 6.6.0-prerelease.33

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,7 @@
13
13
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
14
14
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
15
15
  --pf-v6-c-button--BackgroundColor: transparent;
16
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
16
17
  --pf-v6-c-button--BorderColor: transparent;
17
18
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
18
19
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -391,7 +392,7 @@
391
392
  cursor: pointer;
392
393
  -webkit-user-select: none;
393
394
  user-select: none;
394
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
395
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
395
396
  border: 0;
396
397
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
397
398
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -845,7 +846,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
845
846
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
846
847
  color: var(--pf-v6-c-button--disabled--Color);
847
848
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
848
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
849
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
849
850
  }
850
851
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
851
852
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -15,6 +15,7 @@
15
15
  --#{$button}--FontWeight: var(--pf-t--global--font--weight--body--default);
16
16
  --#{$button}--FontSize: var(--pf-t--global--font--size--body--default);
17
17
  --#{$button}--BackgroundColor: transparent;
18
+ --#{$button}--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
18
19
  --#{$button}--BorderColor: transparent;
19
20
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--action--default);
20
21
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -457,7 +458,7 @@
457
458
  -webkit-user-select: none;
458
459
  user-select: none;
459
460
  // stylelint-enable property-no-vendor-prefix
460
- background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
461
+ background: var(--#{$button}--BackgroundColor) var(--#{$button}--Background--click);
461
462
  border: 0;
462
463
  border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
463
464
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
@@ -562,7 +563,7 @@
562
563
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
563
564
  --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-link--m-small--PaddingInlineEnd);
564
565
  --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-link--m-small--PaddingInlineStart);
565
-
566
+
566
567
  &.pf-m-inline {
567
568
  @at-root span#{&} {
568
569
  --#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
@@ -966,7 +967,7 @@
966
967
  &.pf-m-aria-disabled {
967
968
  color: var(--#{$button}--disabled--Color);
968
969
  text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
969
- background: var(--#{$button}--disabled--BackgroundColor);
970
+ background: var(--#{$button}--disabled--BackgroundColor) var(--#{$button}--Background--click);
970
971
 
971
972
  &::after {
972
973
  border-color: var(--#{$button}--disabled--BorderColor);
@@ -141,6 +141,8 @@
141
141
  --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
142
142
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
143
143
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
144
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
145
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
144
146
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
145
147
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
146
148
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -924,6 +926,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
924
926
  .pf-v6-c-table.pf-m-compact {
925
927
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
926
928
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
929
+ --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart);
930
+ --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd);
927
931
  }
928
932
  .pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
929
933
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
@@ -216,6 +216,10 @@
216
216
  --#{$table}--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
217
217
  --#{$table}--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
218
218
 
219
+ // * Table compact expandable row content
220
+ --#{$table}--m-compact__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
221
+ --#{$table}--m-compact__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
222
+
219
223
  // * Table expandable row expanded
220
224
  --#{$table}__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
221
225
 
@@ -1250,6 +1254,8 @@
1250
1254
  .#{$table}.pf-m-compact {
1251
1255
  --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact--cell--PaddingBlockStart);
1252
1256
  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact--cell--PaddingBlockEnd);
1257
+ --#{$table}__expandable-row-content--PaddingBlockStart: var(--#{$table}--m-compact__expandable-row-content--PaddingBlockStart);
1258
+ --#{$table}__expandable-row-content--PaddingBlockEnd: var(--#{$table}--m-compact__expandable-row-content--PaddingBlockEnd);
1253
1259
 
1254
1260
  // - Table compact table tr
1255
1261
  tr:where(.#{$table}__tr) {
@@ -1788,6 +1788,7 @@ button.pf-v6-c-breadcrumb__link {
1788
1788
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1789
1789
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1790
1790
  --pf-v6-c-button--BackgroundColor: transparent;
1791
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
1791
1792
  --pf-v6-c-button--BorderColor: transparent;
1792
1793
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1793
1794
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -2166,7 +2167,7 @@ button.pf-v6-c-breadcrumb__link {
2166
2167
  cursor: pointer;
2167
2168
  -webkit-user-select: none;
2168
2169
  user-select: none;
2169
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
2170
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
2170
2171
  border: 0;
2171
2172
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
2172
2173
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -2620,7 +2621,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2620
2621
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2621
2622
  color: var(--pf-v6-c-button--disabled--Color);
2622
2623
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2623
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
2624
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
2624
2625
  }
2625
2626
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2626
2627
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -19659,6 +19660,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19659
19660
  --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19660
19661
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19661
19662
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19663
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19664
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
19662
19665
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
19663
19666
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
19664
19667
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -20442,6 +20445,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20442
20445
  .pf-v6-c-table.pf-m-compact {
20443
20446
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
20444
20447
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
20448
+ --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart);
20449
+ --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd);
20445
20450
  }
20446
20451
  .pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
20447
20452
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
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
- "version": "6.6.0-prerelease.31",
4
+ "version": "6.6.0-prerelease.33",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -11044,6 +11044,7 @@ button.pf-v6-c-breadcrumb__link {
11044
11044
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
11045
11045
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
11046
11046
  --pf-v6-c-button--BackgroundColor: transparent;
11047
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11047
11048
  --pf-v6-c-button--BorderColor: transparent;
11048
11049
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
11049
11050
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -11422,7 +11423,7 @@ button.pf-v6-c-breadcrumb__link {
11422
11423
  cursor: pointer;
11423
11424
  -webkit-user-select: none;
11424
11425
  user-select: none;
11425
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11426
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
11426
11427
  border: 0;
11427
11428
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
11428
11429
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -11876,7 +11877,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11876
11877
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
11877
11878
  color: var(--pf-v6-c-button--disabled--Color);
11878
11879
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
11879
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
11880
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
11880
11881
  }
11881
11882
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
11882
11883
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -28915,6 +28916,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28915
28916
  --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
28916
28917
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
28917
28918
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
28919
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
28920
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28918
28921
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
28919
28922
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
28920
28923
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -29698,6 +29701,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29698
29701
  .pf-v6-c-table.pf-m-compact {
29699
29702
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
29700
29703
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
29704
+ --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart);
29705
+ --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd);
29701
29706
  }
29702
29707
  .pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
29703
29708
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
package/patternfly.css CHANGED
@@ -11199,6 +11199,7 @@ button.pf-v6-c-breadcrumb__link {
11199
11199
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
11200
11200
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
11201
11201
  --pf-v6-c-button--BackgroundColor: transparent;
11202
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11202
11203
  --pf-v6-c-button--BorderColor: transparent;
11203
11204
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
11204
11205
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -11577,7 +11578,7 @@ button.pf-v6-c-breadcrumb__link {
11577
11578
  cursor: pointer;
11578
11579
  -webkit-user-select: none;
11579
11580
  user-select: none;
11580
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
11581
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
11581
11582
  border: 0;
11582
11583
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
11583
11584
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -12031,7 +12032,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
12031
12032
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
12032
12033
  color: var(--pf-v6-c-button--disabled--Color);
12033
12034
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
12034
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
12035
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
12035
12036
  }
12036
12037
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
12037
12038
  border-color: var(--pf-v6-c-button--disabled--BorderColor);
@@ -29070,6 +29071,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
29070
29071
  --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
29071
29072
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
29072
29073
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
29074
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
29075
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
29073
29076
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
29074
29077
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
29075
29078
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -29853,6 +29856,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29853
29856
  .pf-v6-c-table.pf-m-compact {
29854
29857
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
29855
29858
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
29859
+ --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart);
29860
+ --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd);
29856
29861
  }
29857
29862
  .pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
29858
29863
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);