@patternfly/patternfly 6.0.0-prerelease.12 → 6.0.0-prerelease.15

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 (187) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -59
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +12 -4
  7. package/base/tokens/tokens-default.scss +44 -27
  8. package/base/tokens/tokens-local.scss +30 -30
  9. package/base/tokens/tokens-palette.scss +1 -1
  10. package/components/AboutModalBox/about-modal-box.css +0 -7
  11. package/components/Accordion/accordion.css +0 -1
  12. package/components/ActionList/action-list.css +0 -1
  13. package/components/Alert/alert-group.css +0 -1
  14. package/components/Alert/alert.css +2 -7
  15. package/components/Alert/alert.scss +2 -7
  16. package/components/Avatar/avatar.css +0 -1
  17. package/components/BackToTop/back-to-top.css +0 -2
  18. package/components/Backdrop/backdrop.css +0 -1
  19. package/components/BackgroundImage/background-image.css +0 -1
  20. package/components/Badge/badge.css +0 -1
  21. package/components/Banner/banner.css +0 -2
  22. package/components/Brand/brand.css +0 -1
  23. package/components/Breadcrumb/breadcrumb.css +0 -1
  24. package/components/Button/button.css +8 -1
  25. package/components/Button/button.scss +8 -0
  26. package/components/CalendarMonth/calendar-month.css +0 -1
  27. package/components/Card/card.css +0 -1
  28. package/components/Check/check.css +0 -1
  29. package/components/ClipboardCopy/clipboard-copy.css +0 -1
  30. package/components/CodeBlock/code-block.css +0 -1
  31. package/components/CodeEditor/code-editor.css +0 -1
  32. package/components/Content/content.css +1 -2
  33. package/components/Content/content.scss +1 -1
  34. package/components/DataList/data-list.css +4 -16
  35. package/components/DataList/data-list.scss +4 -14
  36. package/components/DatePicker/date-picker.css +0 -1
  37. package/components/DescriptionList/description-list.css +0 -7
  38. package/components/Divider/divider.css +0 -1
  39. package/components/DragDrop/drag-drop.css +0 -2
  40. package/components/Drawer/drawer.css +0 -7
  41. package/components/Drawer/drawer.scss +0 -5
  42. package/components/DualListSelector/dual-list-selector.css +0 -1
  43. package/components/EmptyState/empty-state.css +0 -1
  44. package/components/ExpandableSection/expandable-section.css +0 -1
  45. package/components/FileUpload/file-upload.css +0 -1
  46. package/components/Form/form.css +0 -1
  47. package/components/FormControl/form-control.css +22 -4
  48. package/components/FormControl/form-control.scss +27 -4
  49. package/components/HelperText/helper-text.css +0 -1
  50. package/components/Hint/hint.css +0 -1
  51. package/components/Icon/icon.css +0 -1
  52. package/components/InlineEdit/inline-edit.css +0 -1
  53. package/components/InputGroup/input-group.css +0 -1
  54. package/components/JumpLinks/jump-links.css +0 -1
  55. package/components/Label/label-group.css +0 -1
  56. package/components/Label/label.css +0 -1
  57. package/components/List/list.css +0 -1
  58. package/components/Login/login.css +0 -9
  59. package/components/Masthead/masthead.css +0 -1
  60. package/components/Menu/menu.css +0 -1
  61. package/components/MenuToggle/menu-toggle.css +66 -56
  62. package/components/MenuToggle/menu-toggle.scss +76 -65
  63. package/components/ModalBox/modal-box.css +0 -2
  64. package/components/MultipleFileUpload/multiple-file-upload.css +0 -1
  65. package/components/Nav/nav.css +0 -1
  66. package/components/NotificationDrawer/notification-drawer.css +0 -1
  67. package/components/NumberInput/number-input.css +0 -1
  68. package/components/OverflowMenu/overflow-menu.css +0 -1
  69. package/components/Page/page.css +10 -10
  70. package/components/Page/page.scss +11 -8
  71. package/components/Pagination/pagination.css +31 -20
  72. package/components/Pagination/pagination.scss +35 -23
  73. package/components/Panel/panel.css +0 -1
  74. package/components/Popover/popover.css +0 -1
  75. package/components/Progress/progress.css +0 -1
  76. package/components/ProgressStepper/progress-stepper.css +0 -2
  77. package/components/Radio/radio.css +0 -1
  78. package/components/Sidebar/sidebar.css +0 -1
  79. package/components/SimpleList/simple-list.css +0 -1
  80. package/components/Skeleton/skeleton.css +0 -1
  81. package/components/SkipToContent/skip-to-content.css +0 -1
  82. package/components/Slider/slider.css +0 -1
  83. package/components/Spinner/spinner.css +0 -1
  84. package/components/Switch/switch.css +0 -1
  85. package/components/TabContent/tab-content.css +0 -1
  86. package/components/Table/table-grid.css +9 -5
  87. package/components/Table/table-grid.scss +5 -4
  88. package/components/Table/table-scrollable.css +0 -1
  89. package/components/Table/table-tree-view.css +0 -1
  90. package/components/Table/table.css +6 -6
  91. package/components/Table/table.scss +6 -5
  92. package/components/Tabs/tabs.css +0 -1
  93. package/components/TextInputGroup/text-input-group.css +0 -1
  94. package/components/Tile/tile.css +0 -1
  95. package/components/Timestamp/timestamp.css +0 -1
  96. package/components/Title/title.css +0 -1
  97. package/components/ToggleGroup/toggle-group.css +0 -1
  98. package/components/Toolbar/toolbar.css +0 -1
  99. package/components/Tooltip/tooltip.css +0 -1
  100. package/components/TreeView/tree-view.css +0 -1
  101. package/components/Truncate/truncate.css +0 -1
  102. package/components/Wizard/wizard.css +0 -2
  103. package/components/_index.css +159 -231
  104. package/docs/components/Brand/examples/Brand.md +2 -2
  105. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  106. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  107. package/docs/components/Content/examples/Content.md +188 -204
  108. package/docs/components/DataList/examples/DataList.md +187 -221
  109. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  110. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  111. package/docs/components/Form/examples/Form.md +4 -2
  112. package/docs/components/FormControl/examples/FormControl.md +10 -10
  113. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  114. package/docs/components/Login/examples/Login.md +6 -6
  115. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  116. package/docs/components/Pagination/examples/Pagination.md +12 -12
  117. package/docs/components/Table/examples/Table.md +1 -1
  118. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  119. package/docs/demos/Card/examples/Card.md +4 -4
  120. package/docs/demos/CardView/examples/CardView.md +10 -4
  121. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  122. package/docs/demos/DataList/examples/DataList.md +37 -13
  123. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  124. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  125. package/docs/demos/Page/examples/Page.md +2 -2
  126. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  127. package/docs/demos/Table/examples/Table.md +214 -70
  128. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  129. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  130. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  131. package/layouts/Bullseye/bullseye.css +0 -1
  132. package/layouts/Flex/flex.css +0 -1
  133. package/layouts/Gallery/gallery.css +0 -1
  134. package/layouts/Grid/grid.css +0 -1
  135. package/layouts/Level/level.css +0 -1
  136. package/layouts/Split/split.css +0 -1
  137. package/layouts/Stack/stack.css +0 -1
  138. package/layouts/_index.css +0 -7
  139. package/package.json +5 -5
  140. package/patternfly-base-no-globals.css +84 -59
  141. package/patternfly-base.css +99 -59
  142. package/patternfly-no-globals.css +243 -297
  143. package/patternfly.css +258 -297
  144. package/patternfly.min.css +1 -1
  145. package/patternfly.min.css.map +1 -1
  146. package/sass-utilities/mixins.scss +3 -3
  147. package/assets/images/PF-Masthead-Logo.svg +0 -1
  148. package/assets/images/background-filter.svg +0 -17
  149. package/assets/images/g_sizing.png +0 -0
  150. package/assets/images/img_avatar-dark.svg +0 -22
  151. package/assets/images/img_avatar.svg +0 -21
  152. package/assets/images/l_pf-reverse-164x11.png +0 -0
  153. package/assets/images/l_pf-reverse.svg +0 -1
  154. package/assets/images/logo-dropbox-old.svg +0 -1
  155. package/assets/images/logo-dropbox.svg +0 -6
  156. package/assets/images/logo-facebook.svg +0 -4
  157. package/assets/images/logo-github.svg +0 -4
  158. package/assets/images/logo-gitlab.svg +0 -4
  159. package/assets/images/logo-google.svg +0 -4
  160. package/assets/images/logo-google2.svg +0 -10
  161. package/assets/images/logo__pf--reverse--base.png +0 -0
  162. package/assets/images/logo__pf--reverse--base.svg +0 -40
  163. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  164. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  165. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  166. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  167. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  168. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  169. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  170. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  171. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  172. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  173. package/assets/images/pf-c-brand__logo.svg +0 -10
  174. package/assets/images/pf-logo.svg +0 -28
  175. package/assets/images/pf_logo.svg +0 -37
  176. package/assets/images/pf_logo_color.svg +0 -22
  177. package/assets/images/pf_logo_white.svg +0 -37
  178. package/assets/images/pf_mini_logo_white.svg +0 -1
  179. package/assets/images/pfbg_1200.jpg +0 -0
  180. package/assets/images/pfbg_2000.jpg +0 -0
  181. package/assets/images/pfbg_576.jpg +0 -0
  182. package/assets/images/pfbg_576@2x.jpg +0 -0
  183. package/assets/images/pfbg_768.jpg +0 -0
  184. package/assets/images/pfbg_768@2x.jpg +0 -0
  185. package/assets/images/pfbg_992.jpg +0 -0
  186. package/assets/images/pfbg_992@2x.jpg +0 -0
  187. package/assets/images/status-icon-sprite.svg +0 -38
package/components/Pagination/pagination.scss CHANGED
@@ -32,21 +32,27 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
32
32
  --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
33
33
  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
34
34
  --#{$pagination}--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
35
- --#{$pagination}--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
36
35
  --#{$pagination}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
37
36
  --#{$pagination}--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--lg);
38
- --#{$pagination}--m-sticky--ZIndex: 100; // TODO: replace with z-index token
37
+ --#{$pagination}--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
38
+ --#{$pagination}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
39
39
  --#{$pagination}--m-sticky--InsetBlockStart: 0;
40
40
 
41
41
  // bottom
42
42
  --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
43
43
  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
44
- --#{$pagination}--m-bottom--InsetBlockEnd: 0;
45
- --#{$pagination}--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
46
- --#{$pagination}--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
47
44
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
48
-
49
- // options menu
45
+ --#{$pagination}--m-bottom--InsetBlockEnd: 0;
46
+ --#{$pagination}--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
47
+ --#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
48
+ --#{$pagination}--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
49
+ --#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
50
+ --#{$pagination}--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
51
+ --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
52
+ --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
53
+ --#{$pagination}--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
54
+
55
+ // page menu
50
56
  --#{$pagination}__page-menu--Display--base: block;
51
57
  --#{$pagination}__page-menu--Display: none;
52
58
  --#{$pagination}--m-display-summary__page-menu--Display: none;
@@ -86,19 +92,13 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
86
92
  position: sticky;
87
93
  inset-block-end: var(--#{$pagination}--m-bottom--InsetBlockEnd);
88
94
  justify-content: center;
89
- padding-inline-start: var(--#{$pagination}--m-bottom--PaddingInlineStart);
90
- padding-inline-end: var(--#{$pagination}--m-bottom--PaddingInlineEnd);
95
+ padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
96
+ padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
97
+ padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
98
+ padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
91
99
  background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
92
100
  box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
93
101
 
94
- &.pf-m-static {
95
- --#{$pagination}--m-bottom--MarginBlockStart: 0;
96
- --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
97
-
98
- position: relative;
99
- box-shadow: none;
100
- }
101
-
102
102
  .#{$pagination}__nav-control.pf-m-first,
103
103
  .#{$pagination}__nav-control.pf-m-last,
104
104
  .#{$pagination}__nav-page-select {
@@ -123,7 +123,11 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
123
123
 
124
124
  position: relative;
125
125
  justify-content: flex-end;
126
-
126
+ padding-block-start: var(--#{$pagination}--m-bottom--m-static--PaddingBlockStart);
127
+ padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
128
+ padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
129
+ padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
130
+
127
131
  .#{$pagination}__nav-control.pf-m-first,
128
132
  .#{$pagination}__nav-control.pf-m-last,
129
133
  .#{$pagination}__nav-page-select {
@@ -145,16 +149,25 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
145
149
  }
146
150
  }
147
151
 
152
+ &.pf-m-static {
153
+ position: relative;
154
+ padding-block-start: var(--#{$pagination}--m-bottom--m-static--PaddingBlockStart);
155
+ padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
156
+ padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
157
+ padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
158
+ box-shadow: none;
159
+ }
160
+
148
161
  &.pf-m-sticky {
149
162
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
150
163
 
151
164
  position: sticky;
152
165
  inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);
153
166
  z-index: var(--#{$pagination}--m-sticky--ZIndex);
154
- padding-block-start: var(--#{$pagination}--m-sticky--PaddingBlockStart);
155
- padding-block-end: var(--#{$pagination}--m-sticky--PaddingBlockEnd);
156
- padding-inline-start: var(--#{$pagination}--m-sticky--PaddingInlineStart);
157
- padding-inline-end: var(--#{$pagination}--m-sticky--PaddingInlineEnd);
167
+ padding-block-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockStart);
168
+ padding-block-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd);
169
+ padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
170
+ padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
158
171
  background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
159
172
  box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
160
173
  }
@@ -164,7 +177,6 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
164
177
  }
165
178
  }
166
179
 
167
-
168
180
  // nav
169
181
  .#{$pagination}__nav {
170
182
  display: var(--#{$pagination}__nav--Display);
package/components/Panel/panel.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-panel {
3
2
  --pf-v6-c-panel--Width: auto;
4
3
  --pf-v6-c-panel--MinWidth: auto;
package/components/Popover/popover.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-popover {
3
2
  --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
4
3
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
package/components/Progress/progress.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-progress {
3
2
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
4
3
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
package/components/ProgressStepper/progress-stepper.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-progress-stepper {
3
2
  --pf-v6-c-progress-stepper--m-vertical--GridAutoFlow: row;
4
3
  --pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
@@ -120,7 +119,6 @@
120
119
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
121
120
  }
122
121
  @media screen and (min-width: 48rem) {
123
- :root,
124
122
  .pf-v6-c-progress-stepper {
125
123
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
126
124
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
package/components/Radio/radio.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-radio {
3
2
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
package/components/Sidebar/sidebar.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-sidebar {
3
2
  --pf-v6-c-sidebar--inset: var(--pf-t--global--spacer--md);
4
3
  --pf-v6-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
package/components/SimpleList/simple-list.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-simple-list {
3
2
  --pf-v6-c-simple-list__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
4
3
  --pf-v6-c-simple-list__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
package/components/Skeleton/skeleton.css CHANGED
@@ -1,5 +1,4 @@
1
1
  @charset "UTF-8";
2
- :root,
3
2
  .pf-v6-c-skeleton {
4
3
  --pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
4
  --pf-v6-c-skeleton--Width: auto;
package/components/SkipToContent/skip-to-content.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-skip-to-content {
3
2
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
4
3
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
package/components/Slider/slider.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-slider {
3
2
  --pf-v6-c-slider--value: 0;
4
3
  --pf-v6-c-slider__step--InsetInlineStart: 0;
package/components/Spinner/spinner.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-spinner {
3
2
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
4
3
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
package/components/Switch/switch.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-switch {
3
2
  --pf-v6-c-switch--FontSize: var(--pf-t--global--font--size--sm);
4
3
  --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
package/components/TabContent/tab-content.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tab-content {
3
2
  --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
4
3
  --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
package/components/Table/table-grid.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-table {
3
2
  --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
4
3
  --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
@@ -11,9 +10,9 @@
11
10
  --pf-v6-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
12
11
  --pf-v6-c-table__tr--responsive--MarginBlockStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
13
12
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--md);
14
- --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
15
14
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--md);
16
- --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
17
16
  --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart: var(--pf-t--global--spacer--xl);
18
17
  --pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
19
18
  --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
@@ -43,8 +42,8 @@
43
42
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
44
43
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
45
44
  --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
46
- --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
47
- --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--lg);
45
+ --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
46
+ --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
48
47
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
49
48
  --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
50
49
  --pf-v6-c-table__check--responsive--MarginBlockStart: 0.875rem;
@@ -62,6 +61,7 @@
62
61
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
63
62
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
64
63
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
64
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
65
65
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
66
66
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
67
67
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -361,6 +361,7 @@
361
361
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
362
362
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
363
363
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
364
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
364
365
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
365
366
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
366
367
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -663,6 +664,7 @@
663
664
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
664
665
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
665
666
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
667
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
666
668
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
667
669
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
668
670
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -965,6 +967,7 @@
965
967
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
966
968
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
967
969
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
970
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
968
971
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
969
972
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
970
973
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -1267,6 +1270,7 @@
1267
1270
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
1268
1271
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
1269
1272
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
1273
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
1270
1274
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
1271
1275
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
1272
1276
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
package/components/Table/table-grid.scss CHANGED
@@ -58,9 +58,9 @@
58
58
  --#{$table}__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
59
59
  --#{$table}__tr--responsive--MarginBlockStart: var(--#{$table}__tbody--responsive--border-width--base);
60
60
  --#{$table}__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--md);
61
- --#{$table}__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
61
+ --#{$table}__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
62
62
  --#{$table}__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--md);
63
- --#{$table}__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--lg);
63
+ --#{$table}__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
64
64
 
65
65
  // * Table tr responsive nested table
66
66
  --#{$table}__tr--responsive--nested-table--PaddingBlockStart: var(--pf-t--global--spacer--xl);
@@ -106,8 +106,8 @@
106
106
  --#{$table}--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
107
107
 
108
108
  // * Table grid expandable row content
109
- --#{$table}__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
110
- --#{$table}__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--lg);
109
+ --#{$table}__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
110
+ --#{$table}__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
111
111
  --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
112
112
 
113
113
  // * Table check
@@ -134,6 +134,7 @@
134
134
  --#{$table}--cell--PaddingInlineEnd: var(--#{$table}--m-grid--cell--PaddingInlineEnd);
135
135
  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-grid--cell--PaddingBlockEnd);
136
136
  --#{$table}--cell--PaddingInlineStart: var(--#{$table}--m-grid--cell--PaddingInlineStart);
137
+ --#{$table}--cell--first-last-child--PaddingInline: 0;
137
138
 
138
139
  // - Table favorite
139
140
  --#{$table}__favorite--c-button--MarginBlockStart: auto;
package/components/Table/table-scrollable.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-table {
3
2
  --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
4
3
  --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
package/components/Table/table-tree-view.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-table {
3
2
  --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth));
4
3
  --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md));
package/components/Table/table.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-table {
3
2
  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4
3
  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
@@ -8,7 +7,7 @@
8
7
  --pf-v6-c-table__caption--PaddingBlockStart: var(--pf-t--global--spacer--md);
9
8
  --pf-v6-c-table__caption--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10
9
  --pf-v6-c-table__caption--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10
+ --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12
11
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
13
12
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
14
13
  --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -26,7 +25,7 @@
26
25
  --pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body--default);
27
26
  --pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body);
28
27
  --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
29
- --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--sm);
28
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
30
29
  --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base);
31
30
  --pf-v6-c-table--cell--MinWidth: 0;
32
31
  --pf-v6-c-table--cell--MaxWidth: none;
@@ -255,10 +254,10 @@
255
254
  }
256
255
  }
257
256
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
258
- padding-inline-start: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingInlineStart));
257
+ padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
259
258
  }
260
259
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
261
- padding-inline-end: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingInlineEnd));
260
+ padding-inline-end: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
262
261
  }
263
262
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-center {
264
263
  text-align: center;
@@ -491,7 +490,7 @@
491
490
  .pf-v6-c-table__column-help {
492
491
  display: inline-grid;
493
492
  grid-template-columns: auto max-content;
494
- align-items: baseline;
493
+ align-items: last baseline;
495
494
  justify-content: start;
496
495
  }
497
496
  .pf-v6-c-table__button-content .pf-v6-c-table__text,
@@ -656,6 +655,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
656
655
  }
657
656
 
658
657
  .pf-v6-c-table__column-help-action {
658
+ align-self: last baseline;
659
659
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
660
660
  }
661
661
 
package/components/Table/table.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  --#{$table}__caption--PaddingBlockStart: var(--pf-t--global--spacer--md);
15
15
  --#{$table}__caption--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
16
16
  --#{$table}__caption--PaddingBlockEnd: var(--pf-t--global--spacer--md);
17
- --#{$table}__caption--PaddingInlineStart: var(--pf-t--global--spacer--lg);
17
+ --#{$table}__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
18
18
 
19
19
  // * Table thead cell
20
20
  --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -44,7 +44,7 @@
44
44
  --#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body--default);
45
45
  --#{$table}--cell--LineHeight: var(--pf-t--global--font--line-height--body);
46
46
  --#{$table}--cell--Color: var(--pf-t--global--text--color--regular);
47
- --#{$table}--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--sm);
47
+ --#{$table}--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
48
48
  --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
49
49
 
50
50
  // * Table cell - default variables
@@ -337,12 +337,12 @@
337
337
 
338
338
  // First child padding left
339
339
  &:first-child {
340
- padding-inline-start: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingInlineStart));
340
+ padding-inline-start: var(--#{$table}--cell--first-last-child--PaddingInline);
341
341
  }
342
342
 
343
343
  // Last child padding right
344
344
  &:last-child {
345
- padding-inline-end: calc(var(--#{$table}--cell--first-last-child--PaddingInline) + var(--#{$table}--cell--PaddingInlineEnd));
345
+ padding-inline-end: var(--#{$table}--cell--first-last-child--PaddingInline);
346
346
  }
347
347
 
348
348
  &.pf-m-center {
@@ -677,7 +677,7 @@
677
677
  .#{$table}__column-help {
678
678
  display: inline-grid;
679
679
  grid-template-columns: auto max-content;
680
- align-items: baseline;
680
+ align-items: last baseline;
681
681
  justify-content: start;
682
682
 
683
683
  .#{$table}__text {
@@ -886,6 +886,7 @@
886
886
 
887
887
  // - Table column help action
888
888
  .#{$table}__column-help-action {
889
+ align-self: last baseline;
889
890
  margin-inline-start: var(--#{$table}__column-help--MarginInlineStart);
890
891
  }
891
892
 
package/components/Tabs/tabs.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tabs {
3
2
  --pf-v6-c-tabs--inset: 0;
4
3
  --pf-v6-c-tabs--Width: auto;
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-text-input-group {
3
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
4
3
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
package/components/Tile/tile.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tile {
3
2
  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
4
3
  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
package/components/Timestamp/timestamp.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-timestamp {
3
2
  --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
4
3
  --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
package/components/Title/title.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-title {
3
2
  --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
4
3
  --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-toggle-group {
3
2
  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4
3
  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
package/components/Toolbar/toolbar.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-toolbar {
3
2
  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
4
3
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
package/components/Tooltip/tooltip.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tooltip {
3
2
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
4
3
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
package/components/TreeView/tree-view.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-tree-view {
3
2
  --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
4
3
  --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
package/components/Truncate/truncate.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-truncate {
3
2
  --pf-v6-c-truncate--MinWidth: 6ch;
4
3
  --pf-v6-c-truncate__start--MinWidth: 6ch;
package/components/Wizard/wizard.css CHANGED
@@ -1,4 +1,3 @@
1
- :root,
2
1
  .pf-v6-c-wizard {
3
2
  --pf-v6-c-wizard--Height: initial;
4
3
  --pf-v6-c-wizard--Height--base: 100%;
@@ -115,7 +114,6 @@
115
114
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
116
115
  }
117
116
  @media screen and (min-width: 62rem) {
118
- :root,
119
117
  .pf-v6-c-wizard {
120
118
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
121
119
  --pf-v6-c-wizard__nav--BoxShadow: none;