@patternfly/patternfly 6.0.0-alpha.76 → 6.0.0-alpha.78

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 (49) hide show
  1. package/base/patternfly-variables.css +26 -23
  2. package/base/tokens/_tokens-charts.scss +159 -0
  3. package/base/tokens/_tokens-dark.scss +7 -5
  4. package/base/tokens/_tokens-default.scss +27 -17
  5. package/base/tokens/_tokens-palette.scss +4 -4
  6. package/components/Button/button.css +2 -2
  7. package/components/Button/button.scss +2 -2
  8. package/components/CodeBlock/code-block.css +4 -0
  9. package/components/CodeBlock/code-block.scss +4 -0
  10. package/components/CodeEditor/code-editor.css +91 -73
  11. package/components/CodeEditor/code-editor.scss +99 -82
  12. package/components/FormControl/form-control.css +3 -3
  13. package/components/FormControl/form-control.scss +3 -3
  14. package/components/Icon/icon.css +27 -27
  15. package/components/Icon/icon.scss +27 -27
  16. package/components/Label/label-group.css +1 -1
  17. package/components/Label/label-group.scss +1 -1
  18. package/components/Label/label.css +2 -2
  19. package/components/Label/label.scss +2 -2
  20. package/components/MenuToggle/menu-toggle.css +4 -4
  21. package/components/MenuToggle/menu-toggle.scss +4 -4
  22. package/components/ProgressStepper/progress-stepper.css +2 -2
  23. package/components/ProgressStepper/progress-stepper.scss +2 -2
  24. package/components/Table/table-grid.css +29 -45
  25. package/components/Table/table-grid.scss +40 -53
  26. package/components/Table/table-scrollable.css +6 -6
  27. package/components/Table/table-scrollable.scss +8 -8
  28. package/components/Table/table-tree-view.css +76 -74
  29. package/components/Table/table-tree-view.scss +44 -39
  30. package/components/Table/table.css +54 -74
  31. package/components/Table/table.scss +68 -86
  32. package/components/Tile/tile.css +1 -1
  33. package/components/Tile/tile.scss +1 -1
  34. package/components/TreeView/tree-view.css +76 -97
  35. package/components/TreeView/tree-view.scss +82 -113
  36. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  37. package/docs/components/TreeView/examples/TreeView.md +7 -57
  38. package/package.json +1 -1
  39. package/patternfly-base-no-globals-theme-dark-unversioned.css +26 -23
  40. package/patternfly-base-no-globals.css +26 -23
  41. package/patternfly-base-theme-dark-unversioned.css +26 -23
  42. package/patternfly-base.css +26 -23
  43. package/patternfly-no-globals.css +404 -442
  44. package/patternfly-theme-dark-unversioned.css +404 -442
  45. package/patternfly.css +404 -442
  46. package/patternfly.min.css +1 -1
  47. package/patternfly.min.css.map +1 -1
  48. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  49. package/components/TreeView/themes/dark/tree-view.scss +0 -8
package/components/Icon/icon.scss CHANGED
@@ -21,26 +21,26 @@
21
21
  --#{$icon}--m-3xl--Height: var(--pf-t--global--icon--size--3xl);
22
22
 
23
23
  // Body sizes
24
- --#{$icon}--m-body-sm--Width: var(--pf-t--global--icon--size--body--sm);
25
- --#{$icon}--m-body-sm--Height: var(--pf-t--global--icon--size--body--sm);
26
- --#{$icon}--m-body-default--Width: var(--pf-t--global--icon--size--body--default);
27
- --#{$icon}--m-body-default--Height: var(--pf-t--global--icon--size--body--default);
28
- --#{$icon}--m-body-lg--Width: var(--pf-t--global--icon--size--body--lg);
29
- --#{$icon}--m-body-lg--Height: var(--pf-t--global--icon--size--body--lg);
24
+ --#{$icon}--m-body-sm--Width: var(--pf-t--global--icon--size--font--body--sm);
25
+ --#{$icon}--m-body-sm--Height: var(--pf-t--global--icon--size--font--body--sm);
26
+ --#{$icon}--m-body-default--Width: var(--pf-t--global--icon--size--font--body--default);
27
+ --#{$icon}--m-body-default--Height: var(--pf-t--global--icon--size--font--body--default);
28
+ --#{$icon}--m-body-lg--Width: var(--pf-t--global--icon--size--font--body--lg);
29
+ --#{$icon}--m-body-lg--Height: var(--pf-t--global--icon--size--font--body--lg);
30
30
 
31
31
  // Heading sizes
32
- --#{$icon}--m-heading-sm--Width: var(--pf-t--global--icon--size--heading--h6);
33
- --#{$icon}--m-heading-sm--Height: var(--pf-t--global--icon--size--heading--h6);
34
- --#{$icon}--m-heading-md--Width: var(--pf-t--global--icon--size--heading--h5);
35
- --#{$icon}--m-heading-md--Height: var(--pf-t--global--icon--size--heading--h5);
36
- --#{$icon}--m-heading-lg--Width: var(--pf-t--global--icon--size--heading--h4);
37
- --#{$icon}--m-heading-lg--Height: var(--pf-t--global--icon--size--heading--h4);
38
- --#{$icon}--m-heading-xl--Width: var(--pf-t--global--icon--size--heading--h3);
39
- --#{$icon}--m-heading-xl--Height: var(--pf-t--global--icon--size--heading--h3);
40
- --#{$icon}--m-heading-2xl--Width: var(--pf-t--global--icon--size--heading--h2);
41
- --#{$icon}--m-heading-2xl--Height: var(--pf-t--global--icon--size--heading--h2);
42
- --#{$icon}--m-heading-3xl--Width: var(--pf-t--global--icon--size--heading--h1);
43
- --#{$icon}--m-heading-3xl--Height: var(--pf-t--global--icon--size--heading--h1);
32
+ --#{$icon}--m-heading-sm--Width: var(--pf-t--global--icon--size--font--heading--h6);
33
+ --#{$icon}--m-heading-sm--Height: var(--pf-t--global--icon--size--font--heading--h6);
34
+ --#{$icon}--m-heading-md--Width: var(--pf-t--global--icon--size--font--heading--h5);
35
+ --#{$icon}--m-heading-md--Height: var(--pf-t--global--icon--size--font--heading--h5);
36
+ --#{$icon}--m-heading-lg--Width: var(--pf-t--global--icon--size--font--heading--h4);
37
+ --#{$icon}--m-heading-lg--Height: var(--pf-t--global--icon--size--font--heading--h4);
38
+ --#{$icon}--m-heading-xl--Width: var(--pf-t--global--icon--size--font--heading--h3);
39
+ --#{$icon}--m-heading-xl--Height: var(--pf-t--global--icon--size--font--heading--h3);
40
+ --#{$icon}--m-heading-2xl--Width: var(--pf-t--global--icon--size--font--heading--h2);
41
+ --#{$icon}--m-heading-2xl--Height: var(--pf-t--global--icon--size--font--heading--h2);
42
+ --#{$icon}--m-heading-3xl--Width: var(--pf-t--global--icon--size--font--heading--h1);
43
+ --#{$icon}--m-heading-3xl--Height: var(--pf-t--global--icon--size--font--heading--h1);
44
44
 
45
45
  // Inline sizes
46
46
  --#{$icon}--m-inline--Width: 1em;
@@ -70,17 +70,17 @@
70
70
  --#{$icon}--m-3xl__content--FontSize: var(--pf-t--global--icon--size--3xl);
71
71
 
72
72
  // Body content sizes
73
- --#{$icon}--m-body-sm__content--FontSize: var(--pf-t--global--icon--size--body--sm);
74
- --#{$icon}--m-body-default__content--FontSize: var(--pf-t--global--icon--size--body--default);
75
- --#{$icon}--m-body-lg__content--FontSize: var(--pf-t--global--icon--size--body--lg);
73
+ --#{$icon}--m-body-sm__content--FontSize: var(--pf-t--global--icon--size--font--body--sm);
74
+ --#{$icon}--m-body-default__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
75
+ --#{$icon}--m-body-lg__content--FontSize: var(--pf-t--global--icon--size--font--body--lg);
76
76
 
77
77
  // Heading content sizes
78
- --#{$icon}--m-heading-sm__content--FontSize: var(--pf-t--global--icon--size--heading--h6);
79
- --#{$icon}--m-heading-md__content--FontSize: var(--pf-t--global--icon--size--heading--h5);
80
- --#{$icon}--m-heading-lg__content--FontSize: var(--pf-t--global--icon--size--heading--h4);
81
- --#{$icon}--m-heading-xl__content--FontSize: var(--pf-t--global--icon--size--heading--h3);
82
- --#{$icon}--m-heading-2xl__content--FontSize: var(--pf-t--global--icon--size--heading--h2);
83
- --#{$icon}--m-heading-3xl__content--FontSize: var(--pf-t--global--icon--size--heading--h1);
78
+ --#{$icon}--m-heading-sm__content--FontSize: var(--pf-t--global--icon--size--font--heading--h6);
79
+ --#{$icon}--m-heading-md__content--FontSize: var(--pf-t--global--icon--size--font--heading--h5);
80
+ --#{$icon}--m-heading-lg__content--FontSize: var(--pf-t--global--icon--size--font--heading--h4);
81
+ --#{$icon}--m-heading-xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h3);
82
+ --#{$icon}--m-heading-2xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h2);
83
+ --#{$icon}--m-heading-3xl__content--FontSize: var(--pf-t--global--icon--size--font--heading--h1);
84
84
 
85
85
  // Inline sizes
86
86
  --#{$icon}--m-inline__content--FontSize: 1em;
package/components/Label/label-group.css CHANGED
@@ -21,7 +21,7 @@
21
21
  --pf-v5-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
22
22
  --pf-v5-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-t--global--spacer--sm);
23
23
  --pf-v5-c-label-group__label--MaxWidth: 18ch;
24
- --pf-v5-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
24
+ --pf-v5-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
25
25
  --pf-v5-c-label-group__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
26
26
  --pf-v5-c-label-group__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
27
27
  --pf-v5-c-label-group__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
package/components/Label/label-group.scss CHANGED
@@ -34,7 +34,7 @@
34
34
  --#{$label-group}__label--MaxWidth: 18ch;
35
35
 
36
36
  // Close
37
- --#{$label-group}__close--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
37
+ --#{$label-group}__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
38
38
  --#{$label-group}__close--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
39
39
  --#{$label-group}__close--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
40
40
  --#{$label-group}__close--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
package/components/Label/label.css CHANGED
@@ -165,10 +165,10 @@
165
165
  --pf-v5-c-label__content--MaxWidth: 100%;
166
166
  --pf-v5-c-label__content--Gap: var(--pf-t--global--spacer--xs);
167
167
  --pf-v5-c-label__content--Cursor: initial;
168
- --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
168
+ --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
169
169
  --pf-v5-c-label__text--MaxWidth: 100%;
170
170
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
171
- --pf-v5-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
171
+ --pf-v5-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
172
172
  --pf-v5-c-label__actions--c-button--OutlineOffset: -0.1875rem;
173
173
  --pf-v5-c-label__actions--c-button--MarginTop: calc(var(--pf-v5-c-label__actions--c-button--PaddingTop) * -1);
174
174
  --pf-v5-c-label__actions--c-button--MarginBottom: calc(var(--pf-v5-c-label__actions--c-button--PaddingBottom) * -1);
package/components/Label/label.scss CHANGED
@@ -212,7 +212,7 @@
212
212
  --#{$label}__content--Cursor: initial;
213
213
 
214
214
  // Icon
215
- --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
215
+ --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
216
216
 
217
217
  // Text
218
218
  --#{$label}__text--MaxWidth: 100%;
@@ -221,7 +221,7 @@
221
221
  --#{$label}__actions--MarginRight: calc(var(--#{$label}__actions--c-button--PaddingRight) * -1);
222
222
 
223
223
  // Actions button (close)
224
- --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--body--sm);
224
+ --#{$label}__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
225
225
  --#{$label}__actions--c-button--OutlineOffset: #{pf-size-prem(-3px)};
226
226
  --#{$label}__actions--c-button--MarginTop: calc(var(--#{$label}__actions--c-button--PaddingTop) * -1);
227
227
  --#{$label}__actions--c-button--MarginBottom: calc(var(--#{$label}__actions--c-button--PaddingBottom) * -1);
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --pf-v5-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
13
13
  --pf-v5-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
14
14
  --pf-v5-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
15
- --pf-v5-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--control--active);
15
+ --pf-v5-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--control--clicked);
16
16
  --pf-v5-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--active);
17
17
  --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-t--global--border--width--control--default);
18
18
  --pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-t--global--border--width--control--default);
@@ -26,14 +26,14 @@
26
26
  --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
27
27
  --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-t--global--border--color--hover);
28
28
  --pf-v5-c-menu-toggle--focus--BackgroundColor: transparent;
29
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
29
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--clicked);
30
30
  --pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-t--global--border--color--active);
31
31
  --pf-v5-c-menu-toggle--active--BackgroundColor: transparent;
32
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
32
+ --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--clicked);
33
33
  --pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-t--global--border--color--active);
34
34
  --pf-v5-c-menu-toggle--m-expanded--Color: var(--pf-v5-global--Color--100);
35
35
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: transparent;
36
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
36
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--clicked);
37
37
  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-t--global--border--color--active);
38
38
  --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--100);
39
39
  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default);
15
15
  --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
16
16
  --#{$menu-toggle}--hover--BorderColor: var(--pf-t--global--border--color--hover);
17
- --#{$menu-toggle}--active--BorderWidth: var(--pf-t--global--border--width--control--active);
17
+ --#{$menu-toggle}--active--BorderWidth: var(--pf-t--global--border--width--control--clicked);
18
18
  --#{$menu-toggle}--active--BorderColor: var(--pf-t--global--border--color--active);
19
19
 
20
20
  // Border base
@@ -34,18 +34,18 @@
34
34
 
35
35
  // Focus
36
36
  --#{$menu-toggle}--focus--BackgroundColor: transparent;
37
- --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
37
+ --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--clicked);
38
38
  --#{$menu-toggle}--focus--after--BorderBottomColor: var(--pf-t--global--border--color--active);
39
39
 
40
40
  // Active
41
41
  --#{$menu-toggle}--active--BackgroundColor: transparent;
42
- --#{$menu-toggle}--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
42
+ --#{$menu-toggle}--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--clicked);
43
43
  --#{$menu-toggle}--active--after--BorderBottomColor: var(--pf-t--global--border--color--active);
44
44
 
45
45
  // Expanded
46
46
  --#{$menu-toggle}--m-expanded--Color: var(--#{$pf-global}--Color--100);
47
47
  --#{$menu-toggle}--m-expanded--BackgroundColor: transparent;
48
- --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
48
+ --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--clicked);
49
49
  --#{$menu-toggle}--m-expanded--after--BorderBottomColor: var(--pf-t--global--border--color--active);
50
50
 
51
51
  // Disabled
package/components/ProgressStepper/progress-stepper.css CHANGED
@@ -46,7 +46,7 @@
46
46
  --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-t--global--spacer--sm);
47
47
  --pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
48
48
  --pf-v5-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
49
- --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--body--sm);
49
+ --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
50
50
  --pf-v5-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
51
51
  --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
52
52
  --pf-v5-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
@@ -64,7 +64,7 @@
64
64
  --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
65
65
  --pf-v5-c-progress-stepper__step-icon--Width: 1.5rem;
66
66
  --pf-v5-c-progress-stepper__step-icon--Height: var(--pf-v5-c-progress-stepper__step-icon--Width);
67
- --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--body--default);
67
+ --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
68
68
  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-t--global--icon--color--regular);
69
69
  --pf-v5-c-progress-stepper__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
70
70
  --pf-v5-c-progress-stepper__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -116,7 +116,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
116
116
  --#{$progress-stepper}--m-compact__step-main--MarginBottom: var(--pf-t--global--spacer--sm);
117
117
  --#{$progress-stepper}--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)};
118
118
  --#{$progress-stepper}--m-compact__step-icon--Width: #{pf-size-prem(18px)};
119
- --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--body--sm);
119
+ --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
120
120
  --#{$progress-stepper}--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
121
121
  --#{$progress-stepper}--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
122
122
  --#{$progress-stepper}--m-compact__pficon--MarginTop: 2px;
@@ -142,7 +142,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
142
142
  --#{$progress-stepper}__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
143
143
  --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(24px)};
144
144
  --#{$progress-stepper}__step-icon--Height: var(--#{$progress-stepper}__step-icon--Width);
145
- --#{$progress-stepper}__step-icon--FontSize: var(--pf-t--global--icon--size--body--default);
145
+ --#{$progress-stepper}__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
146
146
  --#{$progress-stepper}__step-icon--Color: var(--pf-t--global--icon--color--regular);
147
147
  --#{$progress-stepper}__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
148
148
  --#{$progress-stepper}__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
package/components/Table/table-grid.css CHANGED
@@ -1,27 +1,25 @@
1
1
  .pf-v5-c-table[class*=pf-m-grid] {
2
2
  --pf-v5-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
3
3
  --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
4
- --pf-v5-c-table__tbody--after--border-width--base: var(--pf-v5-global--BorderWidth--lg);
4
+ --pf-v5-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
5
5
  --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
6
6
  --pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
7
7
  --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
8
- --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
9
- --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-v5-global--spacer--md);
10
- --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
11
- --pf-v5-c-table__tr--responsive--PaddingTop: var(--pf-v5-global--spacer--md);
12
- --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-v5-global--spacer--lg);
13
- --pf-v5-c-table__tr--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
14
- --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-global--spacer--md);
15
- --pf-v5-c-table__tr--responsive--PaddingLeft: var(--pf-v5-global--spacer--lg);
16
- --pf-v5-c-table__tr--responsive--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
17
- --pf-v5-c-table__tr--responsive--nested-table--PaddingTop: var(--pf-v5-global--spacer--xl);
18
- --pf-v5-c-table__tr--responsive--nested-table--PaddingRight: var(--pf-v5-global--spacer--lg);
19
- --pf-v5-c-table__tr--responsive--nested-table--PaddingBottom: var(--pf-v5-global--spacer--xl);
20
- --pf-v5-c-table__tr--responsive--nested-table--PaddingLeft: var(--pf-v5-global--spacer--lg);
8
+ --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-c-table__tbody--responsive--border-width--base);
9
+ --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
10
+ --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-v5-c-table__tbody--responsive--border-width--base);
11
+ --pf-v5-c-table__tr--responsive--PaddingTop: var(--pf-t--global--spacer--md);
12
+ --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
13
+ --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--md);
14
+ --pf-v5-c-table__tr--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
15
+ --pf-v5-c-table__tr--responsive--nested-table--PaddingTop: var(--pf-t--global--spacer--xl);
16
+ --pf-v5-c-table__tr--responsive--nested-table--PaddingRight: var(--pf-t--global--spacer--lg);
17
+ --pf-v5-c-table__tr--responsive--nested-table--PaddingBottom: var(--pf-t--global--spacer--xl);
18
+ --pf-v5-c-table__tr--responsive--nested-table--PaddingLeft: var(--pf-t--global--spacer--lg);
21
19
  --pf-v5-c-table__tbody--after__tr--BorderLeftWidth: 0;
22
20
  --pf-v5-c-table__tbody--after__tr--BorderLeftColor: transparent;
23
21
  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
24
- --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--400);
22
+ --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
25
23
  --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
26
24
  --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
27
25
  --pf-v5-c-table--m-grid--cell--hidden-visible--Display: grid;
@@ -29,48 +27,34 @@
29
27
  --pf-v5-c-table--m-grid--cell--PaddingRight: 0;
30
28
  --pf-v5-c-table--m-grid--cell--PaddingBottom: 0;
31
29
  --pf-v5-c-table--m-grid--cell--PaddingLeft: 0;
32
- --pf-v5-c-table-td--responsive--GridColumnGap: var(--pf-v5-global--spacer--md);
33
- --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-global--spacer--md);
34
- --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-global--spacer--sm);
35
- --pf-v5-c-table--cell--first-child--responsive--PaddingTop: var(--pf-v5-global--spacer--sm);
30
+ --pf-v5-c-table-td--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
31
+ --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-t--global--spacer--md);
32
+ --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
33
+ --pf-v5-c-table--cell--first-child--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
36
34
  --pf-v5-c-table--cell--responsive--PaddingRight: 0;
37
35
  --pf-v5-c-table--cell--responsive--PaddingLeft: 0;
38
- --pf-v5-c-table--m-compact__tr--responsive--PaddingTop: var(--pf-v5-global--spacer--sm);
39
- --pf-v5-c-table--m-compact__tr--responsive--PaddingBottom: var(--pf-v5-global--spacer--sm);
40
- --pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop: var(--pf-v5-global--spacer--xs);
41
- --pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom: var(--pf-v5-global--spacer--xs);
36
+ --pf-v5-c-table--m-compact__tr--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
37
+ --pf-v5-c-table--m-compact__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
38
+ --pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop: var(--pf-t--global--spacer--xs);
39
+ --pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom: var(--pf-t--global--spacer--xs);
42
40
  --pf-v5-c-table--m-compact__check--responsive--MarginTop: 0.4375rem;
43
- --pf-v5-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
44
- --pf-v5-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
41
+ --pf-v5-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1);
42
+ --pf-v5-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-t--global--spacer--xs) * -1);
45
43
  --pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom: calc(0.375rem * -1);
46
- --pf-v5-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-v5-global--spacer--lg);
47
- --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-v5-global--spacer--lg);
48
- --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
49
- --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
44
+ --pf-v5-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
45
+ --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
50
46
  --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
51
- --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
47
+ --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-v5-c-table__tbody--responsive--border-width--base);
52
48
  --pf-v5-c-table__check--responsive--MarginTop: 0.875rem;
53
49
  --pf-v5-c-table--m-grid__favorite--MarginTop: 0.5rem;
54
- --pf-v5-c-table--m-grid__check--favorite--MarginLeft: var(--pf-v5-global--spacer--xl);
50
+ --pf-v5-c-table--m-grid__check--favorite--MarginLeft: var(--pf-t--global--spacer--xl);
55
51
  --pf-v5-c-table--m-grid__action--MarginTop: 0.375rem;
56
- --pf-v5-c-table__action--responsive--MarginLeft: var(--pf-v5-global--spacer--xl);
57
- --pf-v5-c-table--m-grid__favorite--action--MarginLeft: var(--pf-v5-global--spacer--2xl);
52
+ --pf-v5-c-table__action--responsive--MarginLeft: var(--pf-t--global--spacer--xl);
53
+ --pf-v5-c-table--m-grid__favorite--action--MarginLeft: var(--pf-t--global--spacer--2xl);
58
54
  --pf-v5-c-table--m-grid__check--favorite--action--MarginLeft: calc(var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft) + var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft));
59
55
  --pf-v5-c-table__toggle__icon--Transition: .2s ease-in 0s;
60
56
  --pf-v5-c-table__toggle--m-expanded__icon--Rotate: 180deg;
61
57
  }
62
- @media screen and (max-width: 1200px) {
63
- .pf-v5-c-table[class*=pf-m-grid] {
64
- --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-v5-c-table__tr--responsive--xl--PaddingRight);
65
- --pf-v5-c-table__tr--responsive--PaddingLeft: var(--pf-v5-c-table__tr--responsive--xl--PaddingLeft);
66
- }
67
- }
68
- @media screen and (max-width: 1200px) {
69
- .pf-v5-c-table[class*=pf-m-grid] {
70
- --pf-v5-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-v5-c-table__expandable-row-content--responsive--xl--PaddingRight);
71
- --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-v5-c-table__expandable-row-content--responsive--xl--PaddingLeft);
72
- }
73
- }
74
58
 
75
59
  .pf-m-grid.pf-v5-c-table {
76
60
  --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-grid--cell--PaddingTop);
package/components/Table/table-grid.scss CHANGED
@@ -42,37 +42,31 @@
42
42
 
43
43
  // Body
44
44
  --#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
45
- --#{$table}__tbody--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
45
+ --#{$table}__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
46
46
  --#{$table}__tbody--after--BorderLeftWidth: 0;
47
47
  --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
48
48
 
49
49
  // Row
50
50
  --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
51
- --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
52
- --#{$table}__tr--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
53
- --#{$table}__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
54
- --#{$table}__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
55
- --#{$table}__tr--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
56
- --#{$table}__tr--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
57
- --#{$table}__tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--md);
58
- --#{$table}__tr--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
59
- --#{$table}__tr--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
60
-
61
- @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
62
- --#{$table}__tr--responsive--PaddingRight: var(--#{$table}__tr--responsive--xl--PaddingRight);
63
- --#{$table}__tr--responsive--PaddingLeft: var(--#{$table}__tr--responsive--xl--PaddingLeft);
64
- }
65
-
66
- --#{$table}__tr--responsive--nested-table--PaddingTop: var(--#{$pf-global}--spacer--xl);
67
- --#{$table}__tr--responsive--nested-table--PaddingRight: var(--#{$pf-global}--spacer--lg);
68
- --#{$table}__tr--responsive--nested-table--PaddingBottom: var(--#{$pf-global}--spacer--xl);
69
- --#{$table}__tr--responsive--nested-table--PaddingLeft: var(--#{$pf-global}--spacer--lg);
51
+ --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$table}__tbody--responsive--border-width--base);
52
+ --#{$table}__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
53
+ --#{$table}__tr--responsive--MarginTop: var(--#{$table}__tbody--responsive--border-width--base);
54
+ --#{$table}__tr--responsive--PaddingTop: var(--pf-t--global--spacer--md);
55
+ --#{$table}__tr--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
56
+ --#{$table}__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--md);
57
+ --#{$table}__tr--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
58
+
59
+ // * Table tr responsive nested table
60
+ --#{$table}__tr--responsive--nested-table--PaddingTop: var(--pf-t--global--spacer--xl);
61
+ --#{$table}__tr--responsive--nested-table--PaddingRight: var(--pf-t--global--spacer--lg);
62
+ --#{$table}__tr--responsive--nested-table--PaddingBottom: var(--pf-t--global--spacer--xl);
63
+ --#{$table}__tr--responsive--nested-table--PaddingLeft: var(--pf-t--global--spacer--lg);
70
64
 
71
65
  // expandable
72
66
  --#{$table}__tbody--after__tr--BorderLeftWidth: 0;
73
67
  --#{$table}__tbody--after__tr--BorderLeftColor: transparent;
74
68
  --#{$table}__tbody--m-expanded--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
75
- --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--#{$pf-global}--active-color--400);
69
+ --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
76
70
 
77
71
  // selected
78
72
  --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
@@ -88,47 +82,40 @@
88
82
  --#{$table}--m-grid--cell--PaddingLeft: 0;
89
83
 
90
84
  // Td
91
- --#{$table}-td--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
92
- --#{$table}--cell--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
93
- --#{$table}--cell--responsive--PaddingBottom: var(--#{$pf-global}--spacer--sm);
94
- --#{$table}--cell--first-child--responsive--PaddingTop: var(--#{$pf-global}--spacer--sm);
85
+ --#{$table}-td--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
86
+ --#{$table}--cell--responsive--PaddingTop: var(--pf-t--global--spacer--md);
87
+ --#{$table}--cell--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
88
+ --#{$table}--cell--first-child--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
95
89
  --#{$table}--cell--responsive--PaddingRight: 0;
96
90
  --#{$table}--cell--responsive--PaddingLeft: 0;
97
91
 
98
92
  // Compact table
99
- --#{$table}--m-compact__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--sm);
100
- --#{$table}--m-compact__tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--sm);
101
- --#{$table}--m-compact__tr__td--responsive--PaddingTop: var(--#{$pf-global}--spacer--xs);
102
- --#{$table}--m-compact__tr__td--responsive--PaddingBottom: var(--#{$pf-global}--spacer--xs);
93
+ --#{$table}--m-compact__tr--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
94
+ --#{$table}--m-compact__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
95
+ --#{$table}--m-compact__tr__td--responsive--PaddingTop: var(--pf-t--global--spacer--xs);
96
+ --#{$table}--m-compact__tr__td--responsive--PaddingBottom: var(--pf-t--global--spacer--xs);
103
97
  --#{$table}--m-compact__check--responsive--MarginTop: #{pf-size-prem(7px)};
104
- --#{$table}--m-compact__action--responsive--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
105
- --#{$table}--m-compact__action--responsive--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
98
+ --#{$table}--m-compact__action--responsive--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1);
99
+ --#{$table}--m-compact__action--responsive--MarginBottom: calc(var(--pf-t--global--spacer--xs) * -1);
106
100
  --#{$table}--m-compact__toggle--c-button--responsive--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
107
101
 
108
102
  // Expandable row content
109
- --#{$table}__expandable-row-content--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
110
- --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
111
- --#{$table}__expandable-row-content--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
112
- --#{$table}__expandable-row-content--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
103
+ --#{$table}__expandable-row-content--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
104
+ --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
113
105
  --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
114
106
 
115
- @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
116
- --#{$table}__expandable-row-content--responsive--PaddingRight: var(--#{$table}__expandable-row-content--responsive--xl--PaddingRight);
117
- --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--#{$table}__expandable-row-content--responsive--xl--PaddingLeft);
118
- }
119
-
120
107
  // Check
121
- --#{$table}__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
108
+ --#{$table}__check--responsive--MarginLeft: var(--#{$table}__tbody--responsive--border-width--base);
122
109
  --#{$table}__check--responsive--MarginTop: #{pf-size-prem(14px)};
123
110
 
124
111
  // Favorite
125
112
  --#{$table}--m-grid__favorite--MarginTop: #{pf-size-prem(8px)};
126
- --#{$table}--m-grid__check--favorite--MarginLeft: var(--#{$pf-global}--spacer--xl);
113
+ --#{$table}--m-grid__check--favorite--MarginLeft: var(--pf-t--global--spacer--xl);
127
114
 
128
115
  // Action
129
116
  --#{$table}--m-grid__action--MarginTop: #{pf-size-prem(6px)};
130
- --#{$table}__action--responsive--MarginLeft: var(--#{$pf-global}--spacer--xl);
131
- --#{$table}--m-grid__favorite--action--MarginLeft: var(--#{$pf-global}--spacer--2xl);
117
+ --#{$table}__action--responsive--MarginLeft: var(--pf-t--global--spacer--xl);
118
+ --#{$table}--m-grid__favorite--action--MarginLeft: var(--pf-t--global--spacer--2xl);
132
119
  --#{$table}--m-grid__check--favorite--action--MarginLeft: calc(var(--#{$table}--m-grid__check--favorite--MarginLeft) + var(--#{$table}--m-grid__favorite--action--MarginLeft));
133
120
 
134
121
  // Toggle icons
@@ -335,9 +322,9 @@
335
322
 
336
323
  &::after {
337
324
  position: absolute;
338
- inset-block-start: 0;
339
- inset-block-end: 0;
340
- inset-inline-start: 0;
325
+ inset-block-start: 0;
326
+ inset-block-end: 0;
327
+ inset-inline-start: 0;
341
328
  content: "";
342
329
  border: 0;
343
330
  border-inline-start: var(--#{$table}__tbody--after--BorderLeftWidth) solid var(--#{$table}__tbody--after--BorderColor);
@@ -423,9 +410,9 @@
423
410
  > tr:where(.#{$table}__tr)::after {
424
411
  content: '';
425
412
  position: absolute;
426
- inset-block-start: 0;
427
- inset-block-end: 0;
428
- inset-inline-start: 0;
413
+ inset-block-start: 0;
414
+ inset-block-end: 0;
415
+ inset-inline-start: 0;
429
416
  width: var(--#{$table}__tbody--after__tr--BorderLeftWidth);
430
417
  background-color: var(--#{$table}__tbody--after__tr--BorderLeftColor);
431
418
  }
@@ -447,9 +434,9 @@
447
434
  &::after {
448
435
  content: '';
449
436
  position: absolute;
450
- inset-block-start: 0;
451
- inset-block-end: 0;
452
- inset-inline-start: 0;
437
+ inset-block-start: 0;
438
+ inset-block-end: 0;
439
+ inset-inline-start: 0;
453
440
  width: var(--#{$table}__tr--m-selected--after--BorderLeftWidth);
454
441
  background-color: var(--#{$table}__tr--m-selected--after--BorderLeftColor);
455
442
  }
package/components/Table/table-scrollable.css CHANGED
@@ -1,14 +1,14 @@
1
1
  .pf-v5-c-table {
2
2
  --pf-v5-c-table__sticky-cell--MinWidth--base: 12.5rem;
3
3
  --pf-v5-c-table__sticky-cell--MinWidth: var(--pf-v5-c-table__sticky-cell--MinWidth--base);
4
- --pf-v5-c-table__sticky-cell--ZIndex: var(--pf-v5-global--ZIndex--xs);
4
+ --pf-v5-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
5
5
  --pf-v5-c-table__sticky-cell--Right: auto;
6
6
  --pf-v5-c-table__sticky-cell--Left: auto;
7
- --pf-v5-c-table__sticky-cell--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8
- --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
9
- --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-v5-global--BorderColor--100);
10
- --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
11
- --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
7
+ --pf-v5-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8
+ --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
9
+ --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-t--global--border--color--default);
10
+ --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
11
+ --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-t--global--border--color--default);
12
12
  --pf-v5-c-table__sticky-cell--m-right--Right: 0;
13
13
  --pf-v5-c-table__sticky-cell--m-left--Left: 0;
14
14
  --pf-v5-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v5-c-table__sticky-cell--ZIndex) + 1);
package/components/Table/table-scrollable.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  .#{$table} {
2
2
  --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(200px)};
3
3
  --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
4
- --#{$table}__sticky-cell--ZIndex: var(--#{$pf-global}--ZIndex--xs);
4
+ --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
5
5
  --#{$table}__sticky-cell--Right: auto;
6
6
  --#{$table}__sticky-cell--Left: auto;
7
- --#{$table}__sticky-cell--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
8
- --#{$table}__sticky-cell--m-border-right--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
9
- --#{$table}__sticky-cell--m-border-right--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
10
- --#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
11
- --#{$table}__sticky-cell--m-border-left--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--100);
7
+ --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8
+ --#{$table}__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
9
+ --#{$table}__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-t--global--border--color--default);
10
+ --#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
11
+ --#{$table}__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-t--global--border--color--default);
12
12
  --#{$table}__sticky-cell--m-right--Right: 0;
13
13
  --#{$table}__sticky-cell--m-left--Left: 0;
14
14
  --#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
@@ -35,12 +35,12 @@
35
35
  --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
36
36
  }
37
37
 
38
- &.pf-m-right,
38
+ &.pf-m-right,
39
39
  &.pf-m-inline-end {
40
40
  --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
41
41
  }
42
42
 
43
- &.pf-m-left,
43
+ &.pf-m-left,
44
44
  &.pf-m-inline-start {
45
45
  --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
46
46
  }