@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.4

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 (17) hide show
  1. package/base/patternfly-variables.css +15 -0
  2. package/base/tokens/_tokens-font.scss +29 -0
  3. package/components/Table/table.css +90 -89
  4. package/components/Table/table.scss +92 -95
  5. package/components/Toolbar/toolbar.css +0 -1
  6. package/components/Toolbar/toolbar.scss +0 -1
  7. package/docs/demos/Page/examples/Penta.md +672 -0
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals-theme-dark-unversioned.css +15 -0
  10. package/patternfly-base-no-globals.css +15 -0
  11. package/patternfly-base-theme-dark-unversioned.css +15 -0
  12. package/patternfly-base.css +15 -0
  13. package/patternfly-no-globals.css +105 -90
  14. package/patternfly-theme-dark-unversioned.css +105 -90
  15. package/patternfly.css +105 -90
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -789,6 +789,21 @@
789
789
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
790
790
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
791
791
  --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
792
+ --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 16%);
793
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 16%);
794
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 16%);
795
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 16%);
796
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 16%);
797
+ --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 12%);
798
+ --pf-t--global--box-shadow--md--top: 0px -4px 8px 0px rgb(0 0 0 / 12%);
799
+ --pf-t--global--box-shadow--md--bottom: 0px 4px 8px 0px rgb(0 0 0 / 12%);
800
+ --pf-t--global--box-shadow--md--left: -4px 0px 8px 0px rgb(0 0 0 / 12%);
801
+ --pf-t--global--box-shadow--md--right: 4px 0px 8px 0px rgb(0 0 0 / 12%);
802
+ --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 12%);
803
+ --pf-t--global--box-shadow--lg--top: 0px -8px 24px 0px rgb(0 0 0 / 12%);
804
+ --pf-t--global--box-shadow--lg--bottom: 0px 8px 24px 0px rgb(0 0 0 / 12%);
805
+ --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
806
+ --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
792
807
  }
793
808
 
794
809
  /**
package/base/tokens/_tokens-font.scss CHANGED
@@ -62,4 +62,33 @@
62
62
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
63
63
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
64
64
  --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
65
+
66
+ // box-shadow
67
+ --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 16%);
68
+ --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 16%);
69
+ --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 16%);
70
+ --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 16%);
71
+ --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 16%);
72
+ --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 12%);
73
+ --pf-t--global--box-shadow--md--top: 0px -4px 8px 0px rgb(0 0 0 / 12%);
74
+ --pf-t--global--box-shadow--md--bottom: 0px 4px 8px 0px rgb(0 0 0 / 12%);
75
+ --pf-t--global--box-shadow--md--left: -4px 0px 8px 0px rgb(0 0 0 / 12%);
76
+ --pf-t--global--box-shadow--md--right: 4px 0px 8px 0px rgb(0 0 0 / 12%);
77
+ --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 12%);
78
+ --pf-t--global--box-shadow--lg--top: 0px -8px 24px 0px rgb(0 0 0 / 12%);
79
+ --pf-t--global--box-shadow--lg--bottom: 0px 8px 24px 0px rgb(0 0 0 / 12%);
80
+ --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
81
+ --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
82
+
83
+ // DARK shadows
84
+ // TODO: move into a dark token file
85
+ // shadows
86
+ // --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
87
+ // --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
88
+ // --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
89
+ // --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
90
+ // --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
91
+ // --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
92
+ // --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
93
+
65
94
  }
package/components/Table/table.css CHANGED
@@ -60,26 +60,26 @@
60
60
  }
61
61
 
62
62
  .pf-v5-c-table {
63
- --pf-v5-c-table--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
64
- --pf-v5-c-table--BorderColor: var(--pf-v5-global--BorderColor--100);
65
- --pf-v5-c-table--border-width--base: var(--pf-v5-global--BorderWidth--sm);
66
- --pf-v5-c-table__caption--FontSize: var(--pf-v5-global--FontSize--sm);
67
- --pf-v5-c-table__caption--Color: var(--pf-v5-global--Color--200);
63
+ --pf-v5-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
64
+ --pf-v5-c-table--BorderColor: var(--pf-t--global--border--color--default);
65
+ --pf-v5-c-table--border-width--base: var(--pf-t--global--border--width--divider--default);
66
+ --pf-v5-c-table__caption--FontSize: var(--pf-t--global--font--size--body);
67
+ --pf-v5-c-table__caption--Color: var(--pf-t--global--text--color--subtle);
68
68
  --pf-v5-c-table__caption--PaddingTop: var(--pf-v5-global--spacer--md);
69
69
  --pf-v5-c-table__caption--PaddingRight: var(--pf-v5-global--spacer--lg);
70
70
  --pf-v5-c-table__caption--PaddingBottom: var(--pf-v5-global--spacer--md);
71
71
  --pf-v5-c-table__caption--PaddingLeft: var(--pf-v5-global--spacer--lg);
72
72
  --pf-v5-c-table__caption--xl--PaddingRight: var(--pf-v5-global--spacer--md);
73
73
  --pf-v5-c-table__caption--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
74
- --pf-v5-c-table__thead--cell--FontSize: var(--pf-v5-global--FontSize--sm);
75
- --pf-v5-c-table__thead--cell--FontWeight: var(--pf-v5-global--FontWeight--bold);
76
- --pf-v5-c-table__tbody--cell--PaddingTop: var(--pf-v5-global--spacer--lg);
77
- --pf-v5-c-table__tbody--cell--PaddingBottom: var(--pf-v5-global--spacer--lg);
74
+ --pf-v5-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body);
75
+ --pf-v5-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
76
+ --pf-v5-c-table__tbody--cell--PaddingTop: var(--pf-t--global--spacer--md);
77
+ --pf-v5-c-table__tbody--cell--PaddingBottom: var(--pf-t--global--spacer--md);
78
78
  --pf-v5-c-table__tr--BoxShadow--top--base: 0 -0.1875rem 0.25rem -0.125rem rgba(3,3,3,.08);
79
79
  --pf-v5-c-table--cell--Padding--base: var(--pf-v5-global--spacer--md);
80
- --pf-v5-c-table--cell--FontSize: var(--pf-v5-global--FontSize--md);
81
- --pf-v5-c-table--cell--FontWeight: var(--pf-v5-global--FontWeight--normal);
82
- --pf-v5-c-table--cell--Color: var(--pf-v5-global--Color--100);
80
+ --pf-v5-c-table--cell--FontSize: var(--pf-t--global--font--size--body);
81
+ --pf-v5-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body);
82
+ --pf-v5-c-table--cell--Color: var(--pf-t--global--text--color--regular);
83
83
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--cell--Padding--base);
84
84
  --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table--cell--Padding--base);
85
85
  --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table--cell--Padding--base);
@@ -96,10 +96,10 @@
96
96
  --pf-v5-c-table--cell--TextOverflow: clip;
97
97
  --pf-v5-c-table--cell--WhiteSpace: normal;
98
98
  --pf-v5-c-table--cell--WordBreak: normal;
99
- --pf-v5-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
100
- --pf-v5-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-v5-global--BorderColor--100);
101
- --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
102
- --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
99
+ --pf-v5-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
100
+ --pf-v5-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-t--global--border--color--default);
101
+ --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
102
+ --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-t--global--border--color--default);
103
103
  --pf-v5-c-table--cell--m-help--MinWidth: 11ch;
104
104
  --pf-v5-c-table--m-truncate--cell--MaxWidth: 1px;
105
105
  --pf-v5-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v5-c-table--cell--PaddingRight) + var(--pf-v5-c-table--cell--PaddingLeft));
@@ -110,33 +110,33 @@
110
110
  --pf-v5-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
111
111
  --pf-v5-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
112
112
  --pf-v5-c-table__button--BackgroundColor: transparent;
113
- --pf-v5-c-table__button--Color: var(--pf-v5-global--Color--100);
114
- --pf-v5-c-table__button--hover--Color: var(--pf-v5-global--Color--100);
115
- --pf-v5-c-table__button--focus--Color: var(--pf-v5-global--Color--100);
116
- --pf-v5-c-table__button--active--Color: var(--pf-v5-global--Color--100);
113
+ --pf-v5-c-table__button--Color: var(--pf-t--global--text--color--regular);
114
+ --pf-v5-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
115
+ --pf-v5-c-table__button--focus--Color: var(--pf-t--global--text--color--regular);
116
+ --pf-v5-c-table__button--active--Color: var(--pf-t--global--text--color--regular);
117
117
  --pf-v5-c-table__button--OutlineOffset: calc(var(--pf-v5-global--BorderWidth--lg) * -1);
118
118
  --pf-v5-c-table--m-compact__toggle--PaddingTop: 0;
119
119
  --pf-v5-c-table--m-compact__toggle--PaddingBottom: 0;
120
120
  --pf-v5-c-table__check--input--MarginTop: 0.25rem;
121
- --pf-v5-c-table__check--input--FontSize: var(--pf-v5-global--FontSize--md);
122
- --pf-v5-c-table--cell--m-favorite--Color: var(--pf-v5-global--Color--light-300);
123
- --pf-v5-c-table__favorite--c-button--Color: var(--pf-v5-global--Color--light-300);
124
- --pf-v5-c-table__favorite--c-button--FontSize: var(--pf-v5-global--FontSize--sm);
121
+ --pf-v5-c-table__check--input--FontSize: var(--pf-t--global--font--size--body);
122
+ --pf-v5-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
123
+ --pf-v5-c-table__favorite--c-button--Color: var(--pf-t--global--text--color--subtle);
124
+ --pf-v5-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body);
125
125
  --pf-v5-c-table__favorite--c-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
126
126
  --pf-v5-c-table__favorite--c-button--MarginRight: calc(var(--pf-v5-global--spacer--md) * -1);
127
127
  --pf-v5-c-table__favorite--c-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
128
128
  --pf-v5-c-table__favorite--c-button--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
129
129
  --pf-v5-c-table__favorite--m-favorited--c-button--Color: var(--pf-v5-global--palette--gold-400);
130
- --pf-v5-c-table__sort--m-favorite__button__text--Color: var(--pf-v5-global--Color--200);
131
- --pf-v5-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-v5-global--Color--100);
132
- --pf-v5-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-v5-global--Color--100);
133
- --pf-v5-c-table__sort--m-favorite__button--active__text--Color: var(--pf-v5-global--Color--100);
130
+ --pf-v5-c-table__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
131
+ --pf-v5-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
132
+ --pf-v5-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-t--global--text--color--regular);
133
+ --pf-v5-c-table__sort--m-favorite__button--active__text--Color: var(--pf-t--global--text--color--regular);
134
134
  --pf-v5-c-table__draggable--c-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
135
135
  --pf-v5-c-table__draggable--c-button--MarginRight: calc(var(--pf-v5-global--spacer--md) * -1);
136
136
  --pf-v5-c-table__draggable--c-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
137
137
  --pf-v5-c-table__draggable--c-button--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
138
138
  --pf-v5-c-table__tr--m-ghost-row--Opacity: .4;
139
- --pf-v5-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
139
+ --pf-v5-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
140
140
  --pf-v5-c-table__action--PaddingTop: 0;
141
141
  --pf-v5-c-table__action--PaddingRight: 0;
142
142
  --pf-v5-c-table__action--PaddingBottom: 0;
@@ -154,7 +154,7 @@
154
154
  --pf-v5-c-table__expandable-row--after--Bottom: calc(var(--pf-v5-c-table--border-width--base) * -1);
155
155
  --pf-v5-c-table__expandable-row--after--border-width--base: var(--pf-v5-global--BorderWidth--lg);
156
156
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: 0;
157
- --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-global--active-color--100);
157
+ --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-t--global--border--color--active);
158
158
  --pf-v5-c-table__icon-inline--MarginRight: var(--pf-v5-global--spacer--sm);
159
159
  --pf-v5-c-table__sort--MinWidth: calc(6ch + var(--pf-v5-c-table--cell--PaddingRight) + var(--pf-v5-c-table--cell--PaddingLeft) + var(--pf-v5-c-table__sort-indicator--MarginLeft));
160
160
  --pf-v5-c-table__sort__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
@@ -164,19 +164,19 @@
164
164
  --pf-v5-c-table__sort__button--MarginTop: calc(var(--pf-v5-c-table__sort__button--PaddingTop) * -1);
165
165
  --pf-v5-c-table__sort__button--MarginBottom: calc(var(--pf-v5-c-table__sort__button--PaddingBottom) * -1);
166
166
  --pf-v5-c-table__sort__button--MarginLeft: calc(var(--pf-v5-c-table__sort__button--PaddingLeft) * -1);
167
- --pf-v5-c-table__sort__button--Color: var(--pf-v5-global--Color--100);
168
- --pf-v5-c-table__sort--m-selected__button--Color: var(--pf-v5-global--active-color--100);
167
+ --pf-v5-c-table__sort__button--Color: var(--pf-t--global--text--color--regular);
168
+ --pf-v5-c-table__sort--m-selected__button--Color: var(--pf-t--global--border--color--active);
169
169
  --pf-v5-c-table__sort--m-help--MinWidth: 15ch;
170
170
  --pf-v5-c-table__sort__button__text--Color: currentcolor;
171
171
  --pf-v5-c-table__sort__button--hover__text--Color: currentcolor;
172
172
  --pf-v5-c-table__sort__button--focus__text--Color: currentcolor;
173
173
  --pf-v5-c-table__sort__button--active__text--Color: currentcolor;
174
- --pf-v5-c-table__sort-indicator--Color: var(--pf-v5-global--disabled-color--200);
174
+ --pf-v5-c-table__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
175
175
  --pf-v5-c-table__sort-indicator--MarginLeft: var(--pf-v5-global--spacer--md);
176
- --pf-v5-c-table__sort--m-selected__sort-indicator--Color: var(--pf-v5-global--active-color--100);
177
- --pf-v5-c-table__sort__button--hover__sort-indicator--Color: var(--pf-v5-global--Color--100);
178
- --pf-v5-c-table__sort__button--active__sort-indicator--Color: var(--pf-v5-global--Color--100);
179
- --pf-v5-c-table__sort__button--focus__sort-indicator--Color: var(--pf-v5-global--Color--100);
176
+ --pf-v5-c-table__sort--m-selected__sort-indicator--Color: var(--pf-t--global--border--color--active);
177
+ --pf-v5-c-table__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular);
178
+ --pf-v5-c-table__sort__button--active__sort-indicator--Color: var(--pf-t--global--text--color--regular);
179
+ --pf-v5-c-table__sort__button--focus__sort-indicator--Color: var(--pf-t--global--text--color--regular);
180
180
  --pf-v5-c-table__th--m-help--MinWidth: 11ch;
181
181
  --pf-v5-c-table__column-help--MarginLeft: var(--pf-v5-global--spacer--xs);
182
182
  --pf-v5-c-table__column-help--TranslateY: 0.125rem;
@@ -184,18 +184,18 @@
184
184
  --pf-v5-c-table__column-help--c-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
185
185
  --pf-v5-c-table__column-help--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
186
186
  --pf-v5-c-table__column-help--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
187
- --pf-v5-c-table__compound-expansion-toggle__button--Color: var(--pf-v5-global--active-color--100);
188
- --pf-v5-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-v5-global--link--Color--hover);
189
- --pf-v5-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-v5-global--link--Color--hover);
190
- --pf-v5-c-table__compound-expansion-toggle__button--active--Color: var(--pf-v5-global--link--Color--hover);
191
- --pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-v5-global--BorderWidth--sm);
192
- --pf-v5-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
187
+ --pf-v5-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
188
+ --pf-v5-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
189
+ --pf-v5-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-t--global--icon--color--brand--hover);
190
+ --pf-v5-c-table__compound-expansion-toggle__button--active--Color: var(--pf-t--global--icon--color--brand--active);
191
+ --pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-t--global--border--width--button--default);
192
+ --pf-v5-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-t--global--border--color--default);
193
193
  --pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
194
194
  --pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
195
195
  --pf-v5-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
196
196
  --pf-v5-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
197
197
  --pf-v5-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-v5-global--BorderWidth--lg);
198
- --pf-v5-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-v5-global--primary-color--100);
198
+ --pf-v5-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--active);
199
199
  --pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
200
200
  --pf-v5-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
201
201
  --pf-v5-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
@@ -209,60 +209,61 @@
209
209
  --pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-v5-global--spacer--md);
210
210
  --pf-v5-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
211
211
  --pf-v5-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
212
- --pf-v5-c-table--m-compact--FontSize: var(--pf-v5-global--FontSize--sm);
212
+ --pf-v5-c-table--m-compact--FontSize: var(--pf-t--global--font--size--body);
213
213
  --pf-v5-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-v5-global--spacer--lg);
214
214
  --pf-v5-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-v5-global--spacer--lg);
215
215
  --pf-v5-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-v5-global--spacer--lg);
216
216
  --pf-v5-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-v5-global--spacer--lg);
217
217
  --pf-v5-c-table--nested--first-last-child--PaddingRight: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft);
218
218
  --pf-v5-c-table--nested--first-last-child--PaddingLeft: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingRight);
219
- --pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
219
+ --pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
220
220
  --pf-v5-c-table__tr--m-clickable--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
221
221
  --pf-v5-c-table__tr--m-clickable--BackgroundColor: transparent;
222
222
  --pf-v5-c-table__tr--m-clickable--BoxShadow: none;
223
+ --pf-v5-c-table__tr--m-clickable--BorderRadius: var(--pf-t--global--border--radius--small);
223
224
  --pf-v5-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
224
- --pf-v5-c-table__tr--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
225
- --pf-v5-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
226
- --pf-v5-c-table__tr--m-clickable--focus--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
227
- --pf-v5-c-table__tr--m-clickable--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
228
- --pf-v5-c-table__tr--m-clickable--active--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
229
- --pf-v5-c-table__tr--m-clickable--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
230
- --pf-v5-c-table__tr--m-clickable--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
225
+ --pf-v5-c-table__tr--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
226
+ --pf-v5-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
227
+ --pf-v5-c-table__tr--m-clickable--focus--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
228
+ --pf-v5-c-table__tr--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
229
+ --pf-v5-c-table__tr--m-clickable--active--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
230
+ --pf-v5-c-table__tr--m-clickable--active--BackgroundColor: var(--pf-t--global--background--color--primary--selected);
231
+ --pf-v5-c-table__tr--m-clickable--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
231
232
  --pf-v5-c-table__tr--m-selected--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
232
- --pf-v5-c-table__tr--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
233
- --pf-v5-c-table__tr--m-selected--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
234
- --pf-v5-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
233
+ --pf-v5-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
234
+ --pf-v5-c-table__tr--m-selected--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
235
+ --pf-v5-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
235
236
  --pf-v5-c-table__tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v5-c-table__expandable-row--after--border-width--base));
236
237
  --pf-v5-c-table__tr--m-selected--after--BorderLeftColor: var(--pf-v5-global--active-color--100);
237
- --pf-v5-c-table__tr--m-selected--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
238
- --pf-v5-c-table__tr--m-selected--hover__tr--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
239
- --pf-v5-c-table__tr--m-selected__tr--m-selected--hover--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
238
+ --pf-v5-c-table__tr--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
239
+ --pf-v5-c-table__tr--m-selected--hover__tr--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
240
+ --pf-v5-c-table__tr--m-selected__tr--m-selected--hover--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
240
241
  --pf-v5-c-table__tbody--m-clickable--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
241
242
  --pf-v5-c-table__tbody--m-clickable--BoxShadow: none;
242
243
  --pf-v5-c-table__tbody--m-clickable--BackgroundColor: transparent;
243
244
  --pf-v5-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
244
- --pf-v5-c-table__tbody--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
245
- --pf-v5-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
246
- --pf-v5-c-table__tbody--m-clickable--focus--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
247
- --pf-v5-c-table__tbody--m-clickable--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
248
- --pf-v5-c-table__tbody--m-clickable--active--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
249
- --pf-v5-c-table__tbody--m-clickable--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
250
- --pf-v5-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-v5-global--active-color--400);
251
- --pf-v5-c-table__tbody--m-clickable--m-selected--hover__tr--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
252
- --pf-v5-c-table__tbody--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
245
+ --pf-v5-c-table__tbody--m-clickable--hover--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
246
+ --pf-v5-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
247
+ --pf-v5-c-table__tbody--m-clickable--focus--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
248
+ --pf-v5-c-table__tbody--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
249
+ --pf-v5-c-table__tbody--m-clickable--active--BoxShadow: var(--pf-v5-c-table__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
250
+ --pf-v5-c-table__tbody--m-clickable--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
251
+ --pf-v5-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--active);
252
+ --pf-v5-c-table__tbody--m-clickable--m-selected--hover__tr--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
253
+ --pf-v5-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--default);
253
254
  --pf-v5-c-table__tbody--m-selected--BoxShadow--top: var(--pf-v5-c-table__tr--BoxShadow--top--base);
254
- --pf-v5-c-table__tbody--m-selected--BoxShadow: var(--pf-v5-c-table__tbody--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
255
+ --pf-v5-c-table__tbody--m-selected--BoxShadow: var(--pf-v5-c-table__tbody--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
255
256
  --pf-v5-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
256
257
  --pf-v5-c-table__tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-v5-c-table__expandable-row--after--border-width--base));
257
- --pf-v5-c-table__tbody--m-selected--after--BorderLeftColor: var(--pf-v5-global--active-color--100);
258
- --pf-v5-c-table__tbody--m-selected--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
259
- --pf-v5-c-table__tbody--m-selected--hover__tbody--m-selected--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom) inset, var(--pf-v5-global--BoxShadow--sm-bottom);
260
- --pf-v5-c-table__tbody--m-selected__tbody--m-selected--hover--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-v5-global--BoxShadow--sm-bottom);
258
+ --pf-v5-c-table__tbody--m-selected--after--BorderLeftColor: var(--pf-t--global--border--color--active);
259
+ --pf-v5-c-table__tbody--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
260
+ --pf-v5-c-table__tbody--m-selected--hover__tbody--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
261
+ --pf-v5-c-table__tbody--m-selected__tbody--m-selected--hover--BoxShadow: var(--pf-v5-c-table__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
261
262
  --pf-v5-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
262
263
  --pf-v5-c-table__thead--m-nested-column-header__tr--PaddingTop: var(--pf-v5-global--spacer--xs);
263
264
  --pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-v5-global--spacer--xs);
264
- --pf-v5-c-table__subhead--Color: var(--pf-v5-global--Color--200);
265
- --pf-v5-c-table--m-striped__tr--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
265
+ --pf-v5-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
266
+ --pf-v5-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--primary--default);
266
267
  --pf-v5-c-table--m-sticky-header--cell--ZIndex: var(--pf-v5-global--ZIndex--xs);
267
268
  color: var(--pf-v5-global--Color--100);
268
269
  width: 100%;
@@ -511,27 +512,27 @@
511
512
  .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__control-row > .pf-v5-c-table__compound-expansion-toggle:first-child > ::before {
512
513
  border-left-width: 0;
513
514
  }
515
+ .pf-v5-c-table tr.pf-m-clickable:last-child {
516
+ border-bottom-color: transparent;
517
+ }
518
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr) {
519
+ position: relative;
520
+ }
521
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr)::before {
522
+ position: absolute;
523
+ inset: 0;
524
+ content: "";
525
+ background-color: var(--pf-v5-c-table__tr--m-clickable--BackgroundColor);
526
+ border-radius: var(--pf-v5-c-table__tr--m-clickable--BorderRadius);
527
+ }
514
528
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable {
515
529
  cursor: pointer;
516
- background-color: var(--pf-v5-c-table__tr--m-clickable--BackgroundColor);
517
530
  outline-offset: var(--pf-v5-c-table__tr--m-clickable--OutlineOffset);
518
531
  box-shadow: var(--pf-v5-c-table__tr--m-clickable--BoxShadow);
519
532
  }
520
- .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:hover:not(.pf-m-selected) + tr:where(.pf-v5-c-table__tr).pf-m-selected, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:focus:not(.pf-m-selected) + tr:where(.pf-v5-c-table__tr).pf-m-selected, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:active:not(.pf-m-selected) + tr:where(.pf-v5-c-table__tr).pf-m-selected {
521
- box-shadow: var(--pf-v5-c-table__tr--m-clickable--m-selected--BoxShadow);
522
- }
523
- .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:hover {
524
- --pf-v5-c-table__tr--m-clickable--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--hover--BoxShadow);
533
+ .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:hover, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:focus, .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:active {
525
534
  --pf-v5-c-table__tr--m-clickable--BackgroundColor: var(--pf-v5-c-table__tr--m-clickable--hover--BackgroundColor);
526
535
  }
527
- .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:focus {
528
- --pf-v5-c-table__tr--m-clickable--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--focus--BoxShadow);
529
- --pf-v5-c-table__tr--m-clickable--BackgroundColor: var(--pf-v5-c-table__tr--m-clickable--focus--BackgroundColor);
530
- }
531
- .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable:active {
532
- --pf-v5-c-table__tr--m-clickable--BoxShadow: var(--pf-v5-c-table__tr--m-clickable--active--BoxShadow);
533
- --pf-v5-c-table__tr--m-clickable--BackgroundColor: var(--pf-v5-c-table__tr--m-clickable--active--BackgroundColor);
534
- }
535
536
  .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-selected {
536
537
  --pf-v5-c-table__expandable-row--after--BorderLeftWidth: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftWidth);
537
538
  --pf-v5-c-table__expandable-row--after--BorderColor: var(--pf-v5-c-table__tr--m-selected--after--BorderLeftColor);