@patternfly/patternfly 6.0.0-prerelease.9 → 6.1.0-prerelease.1

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 (196) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -62
  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 -35
  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 +1 -2
  13. package/components/ActionList/action-list.scss +1 -1
  14. package/components/Alert/alert-group.css +0 -1
  15. package/components/Alert/alert.css +2 -7
  16. package/components/Alert/alert.scss +2 -7
  17. package/components/Avatar/avatar.css +0 -1
  18. package/components/BackToTop/back-to-top.css +0 -2
  19. package/components/Backdrop/backdrop.css +0 -1
  20. package/components/BackgroundImage/background-image.css +0 -1
  21. package/components/Badge/badge.css +0 -1
  22. package/components/Banner/banner.css +0 -2
  23. package/components/Brand/brand.css +0 -1
  24. package/components/Breadcrumb/breadcrumb.css +0 -1
  25. package/components/Button/button.css +8 -1
  26. package/components/Button/button.scss +8 -0
  27. package/components/CalendarMonth/calendar-month.css +0 -1
  28. package/components/Card/card.css +0 -1
  29. package/components/Check/check.css +0 -1
  30. package/components/ClipboardCopy/clipboard-copy.css +0 -1
  31. package/components/CodeBlock/code-block.css +0 -1
  32. package/components/CodeEditor/code-editor.css +0 -1
  33. package/components/Content/content.css +2 -3
  34. package/components/Content/content.scss +2 -2
  35. package/components/DataList/data-list.css +4 -16
  36. package/components/DataList/data-list.scss +4 -14
  37. package/components/DatePicker/date-picker.css +0 -1
  38. package/components/DescriptionList/description-list.css +2 -9
  39. package/components/DescriptionList/description-list.scss +2 -2
  40. package/components/Divider/divider.css +0 -1
  41. package/components/DragDrop/drag-drop.css +0 -2
  42. package/components/Drawer/drawer.css +0 -7
  43. package/components/Drawer/drawer.scss +0 -5
  44. package/components/DualListSelector/dual-list-selector.css +0 -1
  45. package/components/EmptyState/empty-state.css +1 -2
  46. package/components/EmptyState/empty-state.scss +1 -1
  47. package/components/ExpandableSection/expandable-section.css +0 -1
  48. package/components/FileUpload/file-upload.css +0 -1
  49. package/components/Form/form.css +1 -2
  50. package/components/Form/form.scss +1 -1
  51. package/components/FormControl/form-control.css +22 -4
  52. package/components/FormControl/form-control.scss +27 -4
  53. package/components/HelperText/helper-text.css +0 -1
  54. package/components/Hint/hint.css +0 -1
  55. package/components/Icon/icon.css +0 -1
  56. package/components/InlineEdit/inline-edit.css +0 -1
  57. package/components/InputGroup/input-group.css +0 -1
  58. package/components/JumpLinks/jump-links.css +0 -1
  59. package/components/Label/label-group.css +0 -1
  60. package/components/Label/label.css +0 -1
  61. package/components/List/list.css +0 -1
  62. package/components/Login/login.css +0 -9
  63. package/components/Masthead/masthead.css +0 -1
  64. package/components/Menu/menu.css +0 -1
  65. package/components/MenuToggle/menu-toggle.css +66 -56
  66. package/components/MenuToggle/menu-toggle.scss +76 -65
  67. package/components/ModalBox/modal-box.css +0 -2
  68. package/components/MultipleFileUpload/multiple-file-upload.css +0 -1
  69. package/components/Nav/nav.css +0 -1
  70. package/components/NotificationDrawer/notification-drawer.css +0 -1
  71. package/components/NumberInput/number-input.css +0 -1
  72. package/components/OverflowMenu/overflow-menu.css +0 -1
  73. package/components/Page/page.css +15 -10
  74. package/components/Page/page.scss +17 -8
  75. package/components/Pagination/pagination.css +31 -20
  76. package/components/Pagination/pagination.scss +35 -23
  77. package/components/Panel/panel.css +0 -1
  78. package/components/Popover/popover.css +0 -1
  79. package/components/Progress/progress.css +0 -1
  80. package/components/ProgressStepper/progress-stepper.css +0 -2
  81. package/components/Radio/radio.css +0 -1
  82. package/components/Sidebar/sidebar.css +0 -1
  83. package/components/SimpleList/simple-list.css +0 -1
  84. package/components/Skeleton/skeleton.css +0 -1
  85. package/components/SkipToContent/skip-to-content.css +0 -1
  86. package/components/Slider/slider.css +0 -1
  87. package/components/Spinner/spinner.css +0 -1
  88. package/components/Switch/switch.css +0 -1
  89. package/components/TabContent/tab-content.css +0 -1
  90. package/components/Table/table-grid.css +9 -5
  91. package/components/Table/table-grid.scss +5 -4
  92. package/components/Table/table-scrollable.css +0 -1
  93. package/components/Table/table-tree-view.css +0 -1
  94. package/components/Table/table.css +6 -6
  95. package/components/Table/table.scss +6 -5
  96. package/components/Tabs/tabs.css +0 -1
  97. package/components/TextInputGroup/text-input-group.css +2 -3
  98. package/components/TextInputGroup/text-input-group.scss +2 -2
  99. package/components/Tile/tile.css +0 -1
  100. package/components/Timestamp/timestamp.css +0 -1
  101. package/components/Title/title.css +0 -1
  102. package/components/ToggleGroup/toggle-group.css +0 -1
  103. package/components/Toolbar/toolbar.css +0 -1
  104. package/components/Tooltip/tooltip.css +0 -1
  105. package/components/TreeView/tree-view.css +0 -1
  106. package/components/Truncate/truncate.css +0 -1
  107. package/components/Wizard/wizard.css +0 -2
  108. package/components/_index.css +172 -239
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  111. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  112. package/docs/components/Content/examples/Content.md +188 -204
  113. package/docs/components/DataList/examples/DataList.md +187 -221
  114. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  115. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  116. package/docs/components/Form/examples/Form.md +4 -2
  117. package/docs/components/FormControl/examples/FormControl.md +10 -10
  118. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  119. package/docs/components/Login/examples/Login.md +6 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  121. package/docs/components/Pagination/examples/Pagination.md +12 -12
  122. package/docs/components/Table/examples/Table.md +1 -1
  123. package/docs/components/Tile/{examples → deprecated}/Tile.md +1 -0
  124. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  125. package/docs/demos/Card/examples/Card.md +4 -4
  126. package/docs/demos/CardView/examples/CardView.md +10 -4
  127. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  128. package/docs/demos/DataList/examples/DataList.md +37 -13
  129. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  130. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  131. package/docs/demos/Page/examples/Page.md +2 -2
  132. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  133. package/docs/demos/Table/examples/Table.md +235 -91
  134. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  135. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  136. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  137. package/layouts/Bullseye/bullseye.css +0 -1
  138. package/layouts/Flex/flex.css +0 -1
  139. package/layouts/Gallery/gallery.css +0 -1
  140. package/layouts/Grid/grid.css +0 -1
  141. package/layouts/Level/level.css +0 -1
  142. package/layouts/Split/split.css +0 -1
  143. package/layouts/Stack/stack.css +0 -1
  144. package/layouts/_index.css +0 -7
  145. package/package.json +5 -5
  146. package/patternfly-base-no-globals.css +84 -62
  147. package/patternfly-base.css +99 -62
  148. package/patternfly-charts.css +2 -2
  149. package/patternfly-charts.scss +2 -2
  150. package/patternfly-no-globals.css +256 -308
  151. package/patternfly.css +271 -308
  152. package/patternfly.min.css +1 -1
  153. package/patternfly.min.css.map +1 -1
  154. package/sass-utilities/mixins.scss +3 -3
  155. package/assets/images/PF-Masthead-Logo.svg +0 -1
  156. package/assets/images/background-filter.svg +0 -17
  157. package/assets/images/g_sizing.png +0 -0
  158. package/assets/images/img_avatar-dark.svg +0 -22
  159. package/assets/images/img_avatar.svg +0 -21
  160. package/assets/images/l_pf-reverse-164x11.png +0 -0
  161. package/assets/images/l_pf-reverse.svg +0 -1
  162. package/assets/images/logo-dropbox-old.svg +0 -1
  163. package/assets/images/logo-dropbox.svg +0 -6
  164. package/assets/images/logo-facebook.svg +0 -4
  165. package/assets/images/logo-github.svg +0 -4
  166. package/assets/images/logo-gitlab.svg +0 -4
  167. package/assets/images/logo-google.svg +0 -4
  168. package/assets/images/logo-google2.svg +0 -10
  169. package/assets/images/logo__pf--reverse--base.png +0 -0
  170. package/assets/images/logo__pf--reverse--base.svg +0 -40
  171. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  172. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  173. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  174. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  175. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  176. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  177. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  178. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  179. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  180. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  181. package/assets/images/pf-c-brand__logo.svg +0 -10
  182. package/assets/images/pf-logo.svg +0 -28
  183. package/assets/images/pf_logo.svg +0 -37
  184. package/assets/images/pf_logo_color.svg +0 -22
  185. package/assets/images/pf_logo_white.svg +0 -37
  186. package/assets/images/pf_mini_logo_white.svg +0 -1
  187. package/assets/images/pfbg_1200.jpg +0 -0
  188. package/assets/images/pfbg_2000.jpg +0 -0
  189. package/assets/images/pfbg_576.jpg +0 -0
  190. package/assets/images/pfbg_576@2x.jpg +0 -0
  191. package/assets/images/pfbg_768.jpg +0 -0
  192. package/assets/images/pfbg_768@2x.jpg +0 -0
  193. package/assets/images/pfbg_992.jpg +0 -0
  194. package/assets/images/pfbg_992@2x.jpg +0 -0
  195. package/assets/images/status-icon-sprite.svg +0 -38
  196. /package/docs/components/Tile/{examples → deprecated}/Tile.css +0 -0
package/README.md CHANGED
@@ -16,7 +16,7 @@ Any of the files above are meant for use in consuming the library. The recommend
16
16
 
17
17
  ## Development
18
18
 
19
- **PatternFly 5 Development requires Node v16.0.0 or greater**
19
+ **PatternFly 5 Development requires Node v18.0.0 or greater**
20
20
 
21
21
  To setup the PatternFly 5 development environment:
22
22
 
package/base/normalize.scss CHANGED
@@ -6,6 +6,22 @@
6
6
  *::before,
7
7
  *::after {
8
8
  box-sizing: border-box;
9
+ scrollbar-color: var(--pf-t--global--border--color--default) transparent;
10
+ }
11
+
12
+ // styling scrollbar color in Safari requires setting max-width and max-height
13
+ *::-webkit-scrollbar-thumb {
14
+ background-color: var(--pf-t--global--border--color--default);
15
+ border-radius: var(--pf-t--global--spacer--xs);
16
+ }
17
+
18
+ *::-webkit-scrollbar-track {
19
+ background-color: transparent;
20
+ }
21
+
22
+ *::-webkit-scrollbar {
23
+ max-width: var(--pf-t--global--spacer--sm);
24
+ max-height: var(--pf-t--global--spacer--sm);
9
25
  }
10
26
 
11
27
  :where(
package/base/patternfly-variables.css CHANGED
@@ -80,26 +80,33 @@
80
80
  --pf-t--global--border--width--100: 1px;
81
81
  --pf-t--global--border--width--200: 2px;
82
82
  --pf-t--global--border--width--300: 3px;
83
- --pf-t--global--box-shadow--X--100: -8px;
83
+ --pf-t--global--box-shadow--X--100: -10px;
84
84
  --pf-t--global--box-shadow--X--200: -4px;
85
85
  --pf-t--global--box-shadow--X--300: -1px;
86
86
  --pf-t--global--box-shadow--X--400: 0px;
87
+ --pf-t--global--box-shadow--X--50: -20px;
87
88
  --pf-t--global--box-shadow--X--500: 1px;
88
89
  --pf-t--global--box-shadow--X--600: 4px;
89
- --pf-t--global--box-shadow--X--700: 8px;
90
- --pf-t--global--box-shadow--Y--100: -8px;
90
+ --pf-t--global--box-shadow--X--700: 10px;
91
+ --pf-t--global--box-shadow--X--800: 20px;
92
+ --pf-t--global--box-shadow--Y--100: -10px;
91
93
  --pf-t--global--box-shadow--Y--200: -4px;
92
94
  --pf-t--global--box-shadow--Y--300: -1px;
93
95
  --pf-t--global--box-shadow--Y--400: 0px;
96
+ --pf-t--global--box-shadow--Y--50: -20px;
94
97
  --pf-t--global--box-shadow--Y--500: 1px;
95
98
  --pf-t--global--box-shadow--Y--600: 4px;
96
- --pf-t--global--box-shadow--Y--700: 8px;
99
+ --pf-t--global--box-shadow--Y--700: 10px;
100
+ --pf-t--global--box-shadow--Y--800: 20px;
97
101
  --pf-t--global--box-shadow--blur--100: 4px;
98
- --pf-t--global--box-shadow--blur--200: 8px;
99
- --pf-t--global--box-shadow--blur--300: 24px;
100
- --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
101
- --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
102
+ --pf-t--global--box-shadow--blur--200: 9px;
103
+ --pf-t--global--box-shadow--blur--300: 20px;
104
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
105
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
102
106
  --pf-t--global--box-shadow--spread--100: 0px;
107
+ --pf-t--global--box-shadow--spread--200: -4px;
108
+ --pf-t--global--box-shadow--spread--300: -8px;
109
+ --pf-t--global--box-shadow--spread--400: -20px;
103
110
  --pf-t--global--breakpoint--100: 0rem;
104
111
  --pf-t--global--breakpoint--200: 36rem;
105
112
  --pf-t--global--breakpoint--250: 40rem;
@@ -168,11 +175,13 @@
168
175
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
169
176
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
170
177
  --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
178
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
171
179
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
172
180
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
173
181
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
174
182
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
175
183
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
184
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
176
185
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
177
186
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
178
187
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
@@ -202,43 +211,49 @@
202
211
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
203
212
  --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
204
213
  --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
205
- --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--100);
206
- --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--700);
214
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
215
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
207
216
  --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
208
217
  --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
209
218
  --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
210
- --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--200);
211
- --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--600);
219
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
220
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
212
221
  --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
213
222
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
214
223
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
215
- --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--300);
216
- --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--500);
224
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
225
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
217
226
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
218
- --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--700);
227
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
219
228
  --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
220
229
  --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
221
230
  --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
222
- --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--100);
223
- --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--600);
231
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
232
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
224
233
  --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
225
234
  --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
226
235
  --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
227
- --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--200);
228
- --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--500);
236
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
237
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
229
238
  --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
230
239
  --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
231
240
  --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
232
- --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--300);
241
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
233
242
  --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
234
243
  --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
235
244
  --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
236
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--box-shadow--color--200);
237
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--box-shadow--color--200);
238
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--box-shadow--color--100);
239
- --pf-t--global--box-shadow--spread--lg: var(--pf-t--global--box-shadow--spread--100);
240
- --pf-t--global--box-shadow--spread--md: var(--pf-t--global--box-shadow--spread--100);
241
- --pf-t--global--box-shadow--spread--sm: var(--pf-t--global--box-shadow--spread--100);
245
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
246
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
247
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
248
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
249
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
250
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
251
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
252
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
253
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
254
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
255
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
256
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
242
257
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
243
258
  --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
244
259
  --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
@@ -385,7 +400,9 @@
385
400
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
386
401
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
387
402
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
403
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
388
404
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
405
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
389
406
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
390
407
  --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
391
408
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
@@ -747,97 +764,94 @@
747
764
  var(--pf-t--global--box-shadow--X--sm--default)
748
765
  var(--pf-t--global--box-shadow--Y--sm--default)
749
766
  var(--pf-t--global--box-shadow--blur--sm)
750
- var(--pf-t--global--box-shadow--spread--sm)
751
- var(--pf-t--global--box-shadow--color--sm);
767
+ var(--pf-t--global--box-shadow--spread--sm--default)
768
+ var(--pf-t--global--box-shadow--color--sm--default);
752
769
  --pf-t--global--box-shadow--sm--top:
753
770
  var(--pf-t--global--box-shadow--X--sm--top)
754
771
  var(--pf-t--global--box-shadow--Y--sm--top)
755
772
  var(--pf-t--global--box-shadow--blur--sm)
756
- var(--pf-t--global--box-shadow--spread--sm)
757
- var(--pf-t--global--box-shadow--color--sm);
773
+ var(--pf-t--global--box-shadow--spread--sm--directional)
774
+ var(--pf-t--global--box-shadow--color--sm--directional);
758
775
  --pf-t--global--box-shadow--sm--bottom:
759
776
  var(--pf-t--global--box-shadow--X--sm--bottom)
760
777
  var(--pf-t--global--box-shadow--Y--sm--bottom)
761
778
  var(--pf-t--global--box-shadow--blur--sm)
762
- var(--pf-t--global--box-shadow--spread--sm)
763
- var(--pf-t--global--box-shadow--color--sm);
779
+ var(--pf-t--global--box-shadow--spread--sm--directional)
780
+ var(--pf-t--global--box-shadow--color--sm--directional);
764
781
  --pf-t--global--box-shadow--sm--left:
765
782
  var(--pf-t--global--box-shadow--X--sm--left)
766
783
  var(--pf-t--global--box-shadow--Y--sm--left)
767
784
  var(--pf-t--global--box-shadow--blur--sm)
768
- var(--pf-t--global--box-shadow--spread--sm)
769
- var(--pf-t--global--box-shadow--color--sm);
785
+ var(--pf-t--global--box-shadow--spread--sm--directional)
786
+ var(--pf-t--global--box-shadow--color--sm--directional);
770
787
  --pf-t--global--box-shadow--sm--right:
771
788
  var(--pf-t--global--box-shadow--X--sm--right)
772
789
  var(--pf-t--global--box-shadow--Y--sm--right)
773
790
  var(--pf-t--global--box-shadow--blur--sm)
774
- var(--pf-t--global--box-shadow--spread--sm)
775
- var(--pf-t--global--box-shadow--color--sm);
791
+ var(--pf-t--global--box-shadow--spread--sm--directional)
792
+ var(--pf-t--global--box-shadow--color--sm--directional);
776
793
  --pf-t--global--box-shadow--md:
777
794
  var(--pf-t--global--box-shadow--X--md--default)
778
795
  var(--pf-t--global--box-shadow--Y--md--default)
779
796
  var(--pf-t--global--box-shadow--blur--md)
780
- var(--pf-t--global--box-shadow--spread--md)
781
- var(--pf-t--global--box-shadow--color--md);
797
+ var(--pf-t--global--box-shadow--spread--md--default)
798
+ var(--pf-t--global--box-shadow--color--md--default);
782
799
  --pf-t--global--box-shadow--md--top:
783
800
  var(--pf-t--global--box-shadow--X--md--top)
784
801
  var(--pf-t--global--box-shadow--Y--md--top)
785
802
  var(--pf-t--global--box-shadow--blur--md)
786
- var(--pf-t--global--box-shadow--spread--md)
787
- var(--pf-t--global--box-shadow--color--md);
803
+ var(--pf-t--global--box-shadow--spread--md--directional)
804
+ var(--pf-t--global--box-shadow--color--md--directional);
788
805
  --pf-t--global--box-shadow--md--bottom:
789
806
  var(--pf-t--global--box-shadow--X--md--bottom)
790
807
  var(--pf-t--global--box-shadow--Y--md--bottom)
791
808
  var(--pf-t--global--box-shadow--blur--md)
792
- var(--pf-t--global--box-shadow--spread--md)
793
- var(--pf-t--global--box-shadow--color--md);
809
+ var(--pf-t--global--box-shadow--spread--md--directional)
810
+ var(--pf-t--global--box-shadow--color--md--directional);
794
811
  --pf-t--global--box-shadow--md--left:
795
812
  var(--pf-t--global--box-shadow--X--md--left)
796
813
  var(--pf-t--global--box-shadow--Y--md--left)
797
814
  var(--pf-t--global--box-shadow--blur--md)
798
- var(--pf-t--global--box-shadow--spread--md)
799
- var(--pf-t--global--box-shadow--color--md);
815
+ var(--pf-t--global--box-shadow--spread--md--directional)
816
+ var(--pf-t--global--box-shadow--color--md--directional);
800
817
  --pf-t--global--box-shadow--md--right:
801
818
  var(--pf-t--global--box-shadow--X--md--right)
802
819
  var(--pf-t--global--box-shadow--Y--md--right)
803
820
  var(--pf-t--global--box-shadow--blur--md)
804
- var(--pf-t--global--box-shadow--spread--md)
805
- var(--pf-t--global--box-shadow--color--md);
821
+ var(--pf-t--global--box-shadow--spread--md--directional)
822
+ var(--pf-t--global--box-shadow--color--md--directional);
806
823
  --pf-t--global--box-shadow--lg:
807
824
  var(--pf-t--global--box-shadow--X--lg--default)
808
825
  var(--pf-t--global--box-shadow--Y--lg--default)
809
826
  var(--pf-t--global--box-shadow--blur--lg)
810
- var(--pf-t--global--box-shadow--spread--lg)
811
- var(--pf-t--global--box-shadow--color--lg);
827
+ var(--pf-t--global--box-shadow--spread--lg--default)
828
+ var(--pf-t--global--box-shadow--color--lg--default);
812
829
  --pf-t--global--box-shadow--lg--top:
813
830
  var(--pf-t--global--box-shadow--X--lg--top)
814
831
  var(--pf-t--global--box-shadow--Y--lg--top)
815
832
  var(--pf-t--global--box-shadow--blur--lg)
816
- var(--pf-t--global--box-shadow--spread--lg)
817
- var(--pf-t--global--box-shadow--color--lg);
833
+ var(--pf-t--global--box-shadow--spread--lg--directional)
834
+ var(--pf-t--global--box-shadow--color--lg--directional);
818
835
  --pf-t--global--box-shadow--lg--bottom:
819
836
  var(--pf-t--global--box-shadow--X--lg--bottom)
820
837
  var(--pf-t--global--box-shadow--Y--lg--bottom)
821
838
  var(--pf-t--global--box-shadow--blur--lg)
822
- var(--pf-t--global--box-shadow--spread--lg)
823
- var(--pf-t--global--box-shadow--color--lg);
839
+ var(--pf-t--global--box-shadow--spread--lg--directional)
840
+ var(--pf-t--global--box-shadow--color--lg--directional);
824
841
  --pf-t--global--box-shadow--lg--left:
825
842
  var(--pf-t--global--box-shadow--X--lg--left)
826
843
  var(--pf-t--global--box-shadow--Y--lg--left)
827
844
  var(--pf-t--global--box-shadow--blur--lg)
828
- var(--pf-t--global--box-shadow--spread--lg)
829
- var(--pf-t--global--box-shadow--color--lg);
845
+ var(--pf-t--global--box-shadow--spread--lg--directional)
846
+ var(--pf-t--global--box-shadow--color--lg--directional);
830
847
  --pf-t--global--box-shadow--lg--right:
831
848
  var(--pf-t--global--box-shadow--X--lg--right)
832
849
  var(--pf-t--global--box-shadow--Y--lg--right)
833
850
  var(--pf-t--global--box-shadow--blur--lg)
834
- var(--pf-t--global--box-shadow--spread--lg)
835
- var(--pf-t--global--box-shadow--color--lg);
851
+ var(--pf-t--global--box-shadow--spread--lg--directional)
852
+ var(--pf-t--global--box-shadow--color--lg--directional);
836
853
  --pf-t--global--list-style: disc outside;
837
854
  --pf-t--temp--dev--tbd: #BC11E0;
838
- --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
839
- --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
840
- --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
841
855
  }
842
856
 
843
857
  :root:where(.pf-v6-theme-dark) {
@@ -845,16 +859,22 @@
845
859
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
846
860
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
847
861
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
862
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
848
863
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
849
864
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
850
865
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
851
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100);
852
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100);
853
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100);
866
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
867
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
868
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
869
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
870
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
871
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
872
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
854
873
  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
855
874
  --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
856
875
  --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
857
876
  --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
877
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
858
878
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
859
879
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
860
880
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
@@ -933,7 +953,9 @@
933
953
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
934
954
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
935
955
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
956
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
936
957
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
958
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
937
959
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
938
960
  --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
939
961
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,22 +1,28 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
7
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
8
8
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
9
9
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
10
+ --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
10
11
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
11
12
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
12
13
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
13
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100);
14
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100);
15
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100);
14
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
15
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
16
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
17
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
18
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
19
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
20
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
16
21
  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
17
22
  --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
18
23
  --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
19
24
  --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
25
+ --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
20
26
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
21
27
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
22
28
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
@@ -95,7 +101,9 @@
95
101
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
96
102
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
97
103
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
104
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
98
105
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
106
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
99
107
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
100
108
  --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
101
109
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 13 Sep 2024 01:51:18 GMT
3
+ // Generated on Mon, 23 Sep 2024 22:48:17 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -15,26 +15,33 @@
15
15
  --pf-t--global--border--width--100: 1px;
16
16
  --pf-t--global--border--width--200: 2px;
17
17
  --pf-t--global--border--width--300: 3px;
18
- --pf-t--global--box-shadow--X--100: -8px;
18
+ --pf-t--global--box-shadow--X--100: -10px;
19
19
  --pf-t--global--box-shadow--X--200: -4px;
20
20
  --pf-t--global--box-shadow--X--300: -1px;
21
21
  --pf-t--global--box-shadow--X--400: 0px;
22
+ --pf-t--global--box-shadow--X--50: -20px;
22
23
  --pf-t--global--box-shadow--X--500: 1px;
23
24
  --pf-t--global--box-shadow--X--600: 4px;
24
- --pf-t--global--box-shadow--X--700: 8px;
25
- --pf-t--global--box-shadow--Y--100: -8px;
25
+ --pf-t--global--box-shadow--X--700: 10px;
26
+ --pf-t--global--box-shadow--X--800: 20px;
27
+ --pf-t--global--box-shadow--Y--100: -10px;
26
28
  --pf-t--global--box-shadow--Y--200: -4px;
27
29
  --pf-t--global--box-shadow--Y--300: -1px;
28
30
  --pf-t--global--box-shadow--Y--400: 0px;
31
+ --pf-t--global--box-shadow--Y--50: -20px;
29
32
  --pf-t--global--box-shadow--Y--500: 1px;
30
33
  --pf-t--global--box-shadow--Y--600: 4px;
31
- --pf-t--global--box-shadow--Y--700: 8px;
34
+ --pf-t--global--box-shadow--Y--700: 10px;
35
+ --pf-t--global--box-shadow--Y--800: 20px;
32
36
  --pf-t--global--box-shadow--blur--100: 4px;
33
- --pf-t--global--box-shadow--blur--200: 8px;
34
- --pf-t--global--box-shadow--blur--300: 24px;
35
- --pf-t--global--box-shadow--color--100: rgba(0, 0, 0, 0.1600);
36
- --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
37
+ --pf-t--global--box-shadow--blur--200: 9px;
38
+ --pf-t--global--box-shadow--blur--300: 20px;
39
+ --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
40
+ --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
37
41
  --pf-t--global--box-shadow--spread--100: 0px;
42
+ --pf-t--global--box-shadow--spread--200: -4px;
43
+ --pf-t--global--box-shadow--spread--300: -8px;
44
+ --pf-t--global--box-shadow--spread--400: -20px;
38
45
  --pf-t--global--breakpoint--100: 0rem;
39
46
  --pf-t--global--breakpoint--200: 36rem;
40
47
  --pf-t--global--breakpoint--250: 40rem;
@@ -103,11 +110,13 @@
103
110
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
104
111
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
105
112
  --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
113
+ --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
106
114
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
107
115
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
108
116
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
109
117
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
110
118
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
119
+ --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
111
120
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
112
121
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
113
122
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
@@ -137,43 +146,49 @@
137
146
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
138
147
  --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
139
148
  --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
140
- --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--100);
141
- --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--700);
149
+ --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
150
+ --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
142
151
  --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
143
152
  --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
144
153
  --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
145
- --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--200);
146
- --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--600);
154
+ --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
155
+ --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
147
156
  --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
148
157
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
149
158
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
150
- --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--300);
151
- --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--500);
159
+ --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
160
+ --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
152
161
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
153
- --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--700);
162
+ --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
154
163
  --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
155
164
  --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
156
165
  --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
157
- --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--100);
158
- --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--600);
166
+ --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
167
+ --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
159
168
  --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
160
169
  --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
161
170
  --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
162
- --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--200);
163
- --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--500);
171
+ --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
172
+ --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
164
173
  --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
165
174
  --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
166
175
  --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
167
- --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--300);
176
+ --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
168
177
  --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
169
178
  --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
170
179
  --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
171
- --pf-t--global--box-shadow--color--lg: var(--pf-t--global--box-shadow--color--200);
172
- --pf-t--global--box-shadow--color--md: var(--pf-t--global--box-shadow--color--200);
173
- --pf-t--global--box-shadow--color--sm: var(--pf-t--global--box-shadow--color--100);
174
- --pf-t--global--box-shadow--spread--lg: var(--pf-t--global--box-shadow--spread--100);
175
- --pf-t--global--box-shadow--spread--md: var(--pf-t--global--box-shadow--spread--100);
176
- --pf-t--global--box-shadow--spread--sm: var(--pf-t--global--box-shadow--spread--100);
180
+ --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
181
+ --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
182
+ --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
183
+ --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
184
+ --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
185
+ --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
186
+ --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
187
+ --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
188
+ --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
189
+ --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
190
+ --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
191
+ --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
177
192
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
178
193
  --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
179
194
  --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
@@ -320,7 +335,9 @@
320
335
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
321
336
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
322
337
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
338
+ --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
323
339
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
340
+ --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
324
341
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
325
342
  --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
326
343
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);