@patternfly/patternfly 6.0.0-alpha.121 → 6.0.0-alpha.123

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 (175) hide show
  1. package/base/patternfly-variables.css +9 -22
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +4 -5
  7. package/base/tokens/tokens-default.scss +10 -11
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/AboutModalBox/about-modal-box.css +54 -54
  11. package/components/AboutModalBox/about-modal-box.scss +54 -54
  12. package/components/Accordion/accordion.css +39 -39
  13. package/components/Accordion/accordion.scss +39 -39
  14. package/components/Alert/alert-group.css +15 -15
  15. package/components/Alert/alert-group.scss +15 -15
  16. package/components/Alert/alert.css +46 -46
  17. package/components/Alert/alert.scss +46 -46
  18. package/components/AppLauncher/app-launcher.css +58 -58
  19. package/components/AppLauncher/app-launcher.scss +58 -58
  20. package/components/BackToTop/back-to-top.css +14 -14
  21. package/components/BackToTop/back-to-top.scss +14 -14
  22. package/components/Badge/badge.css +6 -6
  23. package/components/Badge/badge.scss +6 -6
  24. package/components/Banner/banner.css +12 -12
  25. package/components/Banner/banner.scss +12 -12
  26. package/components/Breadcrumb/breadcrumb.css +12 -12
  27. package/components/Breadcrumb/breadcrumb.scss +12 -12
  28. package/components/Button/button.css +93 -93
  29. package/components/Button/button.scss +93 -93
  30. package/components/CalendarMonth/calendar-month.css +42 -42
  31. package/components/CalendarMonth/calendar-month.scss +42 -42
  32. package/components/Card/card.css +59 -59
  33. package/components/Card/card.scss +59 -59
  34. package/components/Check/check.css +2 -2
  35. package/components/Check/check.scss +2 -2
  36. package/components/Chip/chip-group.css +20 -20
  37. package/components/Chip/chip-group.scss +20 -20
  38. package/components/Chip/chip.css +26 -26
  39. package/components/Chip/chip.scss +26 -26
  40. package/components/ClipboardCopy/clipboard-copy.css +36 -36
  41. package/components/ClipboardCopy/clipboard-copy.scss +36 -36
  42. package/components/CodeBlock/code-block.css +19 -19
  43. package/components/CodeBlock/code-block.scss +19 -19
  44. package/components/CodeEditor/code-editor.css +33 -33
  45. package/components/CodeEditor/code-editor.scss +33 -33
  46. package/components/Content/content.css +65 -65
  47. package/components/Content/content.scss +65 -65
  48. package/components/ContextSelector/context-selector.css +145 -145
  49. package/components/ContextSelector/context-selector.scss +145 -145
  50. package/components/DataList/data-list-grid.css +98 -98
  51. package/components/DataList/data-list-grid.scss +14 -14
  52. package/components/DataList/data-list.css +233 -233
  53. package/components/DataList/data-list.scss +135 -135
  54. package/components/DatePicker/date-picker.css +14 -14
  55. package/components/DatePicker/date-picker.scss +14 -14
  56. package/components/DescriptionList/description-list.css +6 -6
  57. package/components/DescriptionList/description-list.scss +6 -6
  58. package/components/Drawer/drawer.css +84 -84
  59. package/components/Drawer/drawer.scss +84 -84
  60. package/components/Dropdown/dropdown.css +126 -126
  61. package/components/Dropdown/dropdown.scss +126 -126
  62. package/components/DualListSelector/dual-list-selector.css +59 -58
  63. package/components/DualListSelector/dual-list-selector.scss +41 -40
  64. package/components/EmptyState/empty-state.css +32 -32
  65. package/components/EmptyState/empty-state.scss +32 -32
  66. package/components/ExpandableSection/expandable-section.css +48 -48
  67. package/components/ExpandableSection/expandable-section.scss +48 -48
  68. package/components/Form/form.css +106 -106
  69. package/components/Form/form.scss +88 -88
  70. package/components/FormControl/form-control.css +44 -44
  71. package/components/FormControl/form-control.scss +44 -44
  72. package/components/HelperText/helper-text.css +2 -2
  73. package/components/HelperText/helper-text.scss +2 -2
  74. package/components/Hint/hint.css +16 -16
  75. package/components/Hint/hint.scss +16 -16
  76. package/components/InlineEdit/inline-edit.css +10 -10
  77. package/components/InlineEdit/inline-edit.scss +10 -10
  78. package/components/InputGroup/input-group.css +16 -16
  79. package/components/InputGroup/input-group.scss +16 -16
  80. package/components/JumpLinks/jump-links.css +75 -75
  81. package/components/JumpLinks/jump-links.scss +75 -75
  82. package/components/Label/label-group.css +26 -26
  83. package/components/Label/label-group.scss +26 -26
  84. package/components/Label/label.css +30 -30
  85. package/components/Label/label.scss +30 -30
  86. package/components/List/list.css +27 -27
  87. package/components/List/list.scss +27 -27
  88. package/components/LogViewer/log-viewer.css +36 -36
  89. package/components/LogViewer/log-viewer.scss +37 -37
  90. package/components/Login/login.css +88 -88
  91. package/components/Login/login.scss +88 -88
  92. package/components/Menu/menu.css +20 -20
  93. package/components/Menu/menu.scss +20 -20
  94. package/components/MenuToggle/menu-toggle.css +58 -58
  95. package/components/MenuToggle/menu-toggle.scss +58 -58
  96. package/components/ModalBox/modal-box.css +39 -39
  97. package/components/ModalBox/modal-box.scss +39 -39
  98. package/components/MultipleFileUpload/multiple-file-upload.css +32 -32
  99. package/components/MultipleFileUpload/multiple-file-upload.scss +32 -32
  100. package/components/NotificationBadge/notification-badge.css +16 -16
  101. package/components/NotificationBadge/notification-badge.scss +16 -16
  102. package/components/NotificationDrawer/notification-drawer.css +41 -41
  103. package/components/NotificationDrawer/notification-drawer.scss +41 -41
  104. package/components/NumberInput/number-input.css +2 -2
  105. package/components/NumberInput/number-input.scss +2 -2
  106. package/components/OptionsMenu/options-menu.css +79 -79
  107. package/components/OptionsMenu/options-menu.scss +79 -79
  108. package/components/Page/page.css +181 -181
  109. package/components/Page/page.scss +131 -131
  110. package/components/Pagination/pagination.css +24 -24
  111. package/components/Pagination/pagination.scss +24 -24
  112. package/components/Panel/panel.css +24 -24
  113. package/components/Panel/panel.scss +24 -24
  114. package/components/Popover/popover.css +48 -48
  115. package/components/Popover/popover.scss +48 -48
  116. package/components/Progress/progress.css +4 -4
  117. package/components/Progress/progress.scss +4 -4
  118. package/components/ProgressStepper/progress-stepper.css +225 -225
  119. package/components/ProgressStepper/progress-stepper.scss +93 -93
  120. package/components/Radio/radio.css +6 -6
  121. package/components/Radio/radio.scss +6 -6
  122. package/components/Select/select.css +171 -171
  123. package/components/Select/select.scss +171 -171
  124. package/components/Sidebar/sidebar.css +44 -44
  125. package/components/Sidebar/sidebar.scss +44 -44
  126. package/components/SimpleList/simple-list.css +18 -18
  127. package/components/SimpleList/simple-list.scss +18 -18
  128. package/components/Skeleton/skeleton.css +4 -4
  129. package/components/Skeleton/skeleton.scss +4 -4
  130. package/components/SkipToContent/skip-to-content.css +4 -4
  131. package/components/SkipToContent/skip-to-content.scss +4 -4
  132. package/components/Slider/slider.css +25 -25
  133. package/components/Slider/slider.scss +25 -25
  134. package/components/Switch/switch.css +4 -4
  135. package/components/Switch/switch.scss +4 -4
  136. package/components/TabContent/tab-content.css +24 -24
  137. package/components/TabContent/tab-content.scss +24 -24
  138. package/components/Table/table-grid.css +404 -404
  139. package/components/Table/table-grid.scss +116 -116
  140. package/components/Table/table-scrollable.css +16 -16
  141. package/components/Table/table-scrollable.scss +16 -16
  142. package/components/Table/table-tree-view.css +251 -251
  143. package/components/Table/table-tree-view.scss +59 -59
  144. package/components/Table/table.css +122 -122
  145. package/components/Table/table.scss +122 -122
  146. package/components/Tabs/tabs.css +118 -118
  147. package/components/Tabs/tabs.scss +118 -118
  148. package/components/TextInputGroup/text-input-group.css +26 -26
  149. package/components/TextInputGroup/text-input-group.scss +26 -26
  150. package/components/Tile/tile.css +13 -13
  151. package/components/Tile/tile.scss +13 -13
  152. package/components/ToggleGroup/toggle-group.css +28 -28
  153. package/components/ToggleGroup/toggle-group.scss +28 -28
  154. package/components/Tooltip/tooltip.css +26 -26
  155. package/components/Tooltip/tooltip.scss +26 -26
  156. package/components/TreeView/tree-view.css +181 -181
  157. package/components/TreeView/tree-view.scss +122 -122
  158. package/components/Wizard/wizard.css +158 -119
  159. package/components/Wizard/wizard.scss +176 -126
  160. package/components/_index.css +4310 -4270
  161. package/docs/components/Drawer/examples/Drawer.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +39 -39
  163. package/docs/components/Table/examples/Table.md +20 -20
  164. package/docs/components/Wizard/examples/Wizard.md +827 -91
  165. package/docs/demos/Card/examples/Card.css +2 -2
  166. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -44
  167. package/docs/demos/Table/examples/Table.md +20 -20
  168. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  169. package/package.json +1 -1
  170. package/patternfly-base-no-globals.css +9 -22
  171. package/patternfly-base.css +9 -22
  172. package/patternfly-no-globals.css +4319 -4292
  173. package/patternfly.css +4319 -4292
  174. package/patternfly.min.css +1 -1
  175. package/patternfly.min.css.map +1 -1
package/components/CodeBlock/code-block.css CHANGED
@@ -1,16 +1,16 @@
1
1
  :where(:root, .pf-v6-c-code-block) {
2
2
  --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3
3
  --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
4
- --pf-v6-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
5
- --pf-v6-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
6
- --pf-v6-c-code-block__header--PaddingTop: var(--pf-t--global--spacer--xs);
7
- --pf-v6-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
8
- --pf-v6-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
9
- --pf-v6-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
10
- --pf-v6-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-code-block__content--PaddingRight: var(--pf-t--global--spacer--md);
12
- --pf-v6-c-code-block__content--PaddingBottom: var(--pf-t--global--spacer--md);
13
- --pf-v6-c-code-block__content--PaddingLeft: var(--pf-t--global--spacer--md);
4
+ --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
5
+ --pf-v6-c-code-block__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
6
+ --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7
+ --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
8
+ --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10
+ --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
11
+ --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12
+ --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
13
+ --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
14
14
  --pf-v6-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
15
15
  --pf-v6-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
16
16
  }
@@ -22,11 +22,11 @@
22
22
 
23
23
  .pf-v6-c-code-block__header {
24
24
  display: flex;
25
- padding-block-start: var(--pf-v6-c-code-block__header--PaddingTop);
26
- padding-block-end: var(--pf-v6-c-code-block__header--PaddingBottom);
27
- padding-inline-start: var(--pf-v6-c-code-block__header--PaddingLeft);
28
- padding-inline-end: var(--pf-v6-c-code-block__header--PaddingRight);
29
- border-block-end: var(--pf-v6-c-code-block__header--BorderBottomWidth) solid var(--pf-v6-c-code-block__header--BorderBottomColor);
25
+ padding-block-start: var(--pf-v6-c-code-block__header--PaddingBlockStart);
26
+ padding-block-end: var(--pf-v6-c-code-block__header--PaddingBlockEnd);
27
+ padding-inline-start: var(--pf-v6-c-code-block__header--PaddingInlineStart);
28
+ padding-inline-end: var(--pf-v6-c-code-block__header--PaddingInlineEnd);
29
+ border-block-end: var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor);
30
30
  }
31
31
 
32
32
  .pf-v6-c-code-block__actions {
@@ -35,10 +35,10 @@
35
35
  }
36
36
 
37
37
  .pf-v6-c-code-block__content {
38
- padding-block-start: var(--pf-v6-c-code-block__content--PaddingTop);
39
- padding-block-end: var(--pf-v6-c-code-block__content--PaddingBottom);
40
- padding-inline-start: var(--pf-v6-c-code-block__content--PaddingLeft);
41
- padding-inline-end: var(--pf-v6-c-code-block__content--PaddingRight);
38
+ padding-block-start: var(--pf-v6-c-code-block__content--PaddingBlockStart);
39
+ padding-block-end: var(--pf-v6-c-code-block__content--PaddingBlockEnd);
40
+ padding-inline-start: var(--pf-v6-c-code-block__content--PaddingInlineStart);
41
+ padding-inline-end: var(--pf-v6-c-code-block__content--PaddingInlineEnd);
42
42
  }
43
43
 
44
44
  .pf-v6-c-code-block__pre {
package/components/CodeBlock/code-block.scss CHANGED
@@ -3,16 +3,16 @@
3
3
  :where(:root, .#{$code-block}) {
4
4
  --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
5
  --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
6
- --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
7
- --#{$code-block}__header--BorderBottomColor: var(--pf-t--global--border--color--default);
8
- --#{$code-block}__header--PaddingTop: var(--pf-t--global--spacer--xs);
9
- --#{$code-block}__header--PaddingBottom: var(--pf-t--global--spacer--xs);
10
- --#{$code-block}__header--PaddingRight: var(--pf-t--global--spacer--sm);
11
- --#{$code-block}__header--PaddingLeft: var(--pf-t--global--spacer--sm);
12
- --#{$code-block}__content--PaddingTop: var(--pf-t--global--spacer--md);
13
- --#{$code-block}__content--PaddingRight: var(--pf-t--global--spacer--md);
14
- --#{$code-block}__content--PaddingBottom: var(--pf-t--global--spacer--md);
15
- --#{$code-block}__content--PaddingLeft: var(--pf-t--global--spacer--md);
6
+ --#{$code-block}__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
7
+ --#{$code-block}__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
8
+ --#{$code-block}__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
9
+ --#{$code-block}__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --#{$code-block}__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11
+ --#{$code-block}__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12
+ --#{$code-block}__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
13
+ --#{$code-block}__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
14
+ --#{$code-block}__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
+ --#{$code-block}__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
16
16
  --#{$code-block}__pre--FontFamily: var(--pf-t--global--font--family--mono);
17
17
  --#{$code-block}__pre--FontSize: var(--pf-t--global--font--size--xs);
18
18
  }
@@ -24,11 +24,11 @@
24
24
 
25
25
  .#{$code-block}__header {
26
26
  display: flex;
27
- padding-block-start: var(--#{$code-block}__header--PaddingTop);
28
- padding-block-end: var(--#{$code-block}__header--PaddingBottom);
29
- padding-inline-start: var(--#{$code-block}__header--PaddingLeft);
30
- padding-inline-end: var(--#{$code-block}__header--PaddingRight);
31
- border-block-end: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);
27
+ padding-block-start: var(--#{$code-block}__header--PaddingBlockStart);
28
+ padding-block-end: var(--#{$code-block}__header--PaddingBlockEnd);
29
+ padding-inline-start: var(--#{$code-block}__header--PaddingInlineStart);
30
+ padding-inline-end: var(--#{$code-block}__header--PaddingInlineEnd);
31
+ border-block-end: var(--#{$code-block}__header--BorderBlockEndWidth) solid var(--#{$code-block}__header--BorderBlockEndColor);
32
32
  }
33
33
 
34
34
  .#{$code-block}__actions {
@@ -37,10 +37,10 @@
37
37
  }
38
38
 
39
39
  .#{$code-block}__content {
40
- padding-block-start: var(--#{$code-block}__content--PaddingTop);
41
- padding-block-end: var(--#{$code-block}__content--PaddingBottom);
42
- padding-inline-start: var(--#{$code-block}__content--PaddingLeft);
43
- padding-inline-end: var(--#{$code-block}__content--PaddingRight);
40
+ padding-block-start: var(--#{$code-block}__content--PaddingBlockStart);
41
+ padding-block-end: var(--#{$code-block}__content--PaddingBlockEnd);
42
+ padding-inline-start: var(--#{$code-block}__content--PaddingInlineStart);
43
+ padding-inline-end: var(--#{$code-block}__content--PaddingInlineEnd);
44
44
  }
45
45
 
46
46
  .#{$code-block}__pre {
package/components/CodeEditor/code-editor.css CHANGED
@@ -1,8 +1,8 @@
1
1
  :where(:root, .pf-v6-c-code-editor) {
2
2
  --pf-v6-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3
3
  --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
4
- --pf-v6-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
5
- --pf-v6-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
4
+ --pf-v6-c-code-editor__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default);
5
+ --pf-v6-c-code-editor__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
6
6
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
7
7
  --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8
8
  --pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -28,27 +28,27 @@
28
28
  --pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
29
29
  --pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30
30
  --pf-v6-c-code-editor__main--m-drag-hover--after--Opacity: .1;
31
- --pf-v6-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
32
- --pf-v6-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
33
- --pf-v6-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
34
- --pf-v6-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
31
+ --pf-v6-c-code-editor__code--PaddingBlockStart: var(--pf-t--global--spacer--sm);
32
+ --pf-v6-c-code-editor__code--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33
+ --pf-v6-c-code-editor__code--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
34
+ --pf-v6-c-code-editor__code--PaddingInlineStart: var(--pf-t--global--spacer--sm);
35
35
  --pf-v6-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
36
36
  --pf-v6-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
37
- --pf-v6-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
38
- --pf-v6-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
37
+ --pf-v6-c-code-editor__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
38
+ --pf-v6-c-code-editor__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
39
39
  --pf-v6-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
40
40
  --pf-v6-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
41
- --pf-v6-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
42
- --pf-v6-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
43
- --pf-v6-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
44
- --pf-v6-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
45
- --pf-v6-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
46
- --pf-v6-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
47
- --pf-v6-c-code-editor__tab--BorderBottomWidth: 0;
48
- --pf-v6-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
41
+ --pf-v6-c-code-editor__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
42
+ --pf-v6-c-code-editor__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
43
+ --pf-v6-c-code-editor__tab--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
44
+ --pf-v6-c-code-editor__tab--PaddingInlineStart: var( --pf-t--global--spacer--sm);
45
+ --pf-v6-c-code-editor__tab--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
46
+ --pf-v6-c-code-editor__tab--BorderInlineEndWidth: var(--pf-t--global--border--width--box--default);
47
+ --pf-v6-c-code-editor__tab--BorderBlockEndWidth: 0;
48
+ --pf-v6-c-code-editor__tab--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
49
49
  --pf-v6-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
50
50
  --pf-v6-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
51
- --pf-v6-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
52
52
  }
53
53
 
54
54
  .pf-v6-c-code-editor.pf-m-read-only {
@@ -66,7 +66,7 @@
66
66
  inset-inline-end: 0;
67
67
  pointer-events: none;
68
68
  content: "";
69
- border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBottomColor);
69
+ border-block-end: var(--pf-v6-c-code-editor__header--before--BorderBlockEndWidth) solid var(--pf-v6-c-code-editor__header--before--BorderBlockEndColor);
70
70
  }
71
71
  .pf-v6-c-code-editor__header.pf-m-plain {
72
72
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor);
@@ -96,8 +96,8 @@
96
96
  .pf-v6-c-code-editor__header-main {
97
97
  flex-grow: 1;
98
98
  align-self: center;
99
- padding-inline-start: var(--pf-v6-c-code-editor__header-main--PaddingLeft);
100
- padding-inline-end: var(--pf-v6-c-code-editor__header-main--PaddingRight);
99
+ padding-inline-start: var(--pf-v6-c-code-editor__header-main--PaddingInlineStart);
100
+ padding-inline-end: var(--pf-v6-c-code-editor__header-main--PaddingInlineEnd);
101
101
  }
102
102
 
103
103
  .pf-v6-c-code-editor__upload {
@@ -141,10 +141,10 @@
141
141
 
142
142
  .pf-v6-c-code-editor__code {
143
143
  position: relative;
144
- padding-block-start: var(--pf-v6-c-code-editor__code--PaddingTop);
145
- padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBottom);
146
- padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingLeft);
147
- padding-inline-end: var(--pf-v6-c-code-editor__code--PaddingRight);
144
+ padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
145
+ padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
146
+ padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);
147
+ padding-inline-end: var(--pf-v6-c-code-editor__code--PaddingInlineEnd);
148
148
  }
149
149
  .pf-v6-c-code-editor__code .pf-v6-c-code-editor__code-pre {
150
150
  font-family: var(--pf-v6-c-code-editor__code-pre--FontFamily);
@@ -156,21 +156,21 @@
156
156
  position: relative;
157
157
  display: flex;
158
158
  align-items: center;
159
- padding-block-start: var(--pf-v6-c-code-editor__tab--PaddingTop);
160
- padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBottom);
161
- padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingLeft);
162
- padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingRight);
159
+ padding-block-start: var(--pf-v6-c-code-editor__tab--PaddingBlockStart);
160
+ padding-block-end: var(--pf-v6-c-code-editor__tab--PaddingBlockEnd);
161
+ padding-inline-start: var(--pf-v6-c-code-editor__tab--PaddingInlineStart);
162
+ padding-inline-end: var(--pf-v6-c-code-editor__tab--PaddingInlineEnd);
163
163
  color: var(--pf-v6-c-code-editor__tab--Color);
164
164
  background-color: var(--pf-v6-c-code-editor__tab--BackgroundColor);
165
165
  border-color: var(--pf-v6-c-code-editor__tab--BorderColor);
166
166
  border-style: solid;
167
- border-block-start-width: var(--pf-v6-c-code-editor__tab--BorderTopWidth);
168
- border-block-end-width: var(--pf-v6-c-code-editor__tab--BorderBottomWidth);
169
- border-inline-start-width: var(--pf-v6-c-code-editor__tab--BorderLeftWidth);
170
- border-inline-end-width: var(--pf-v6-c-code-editor__tab--BorderRightWidth);
167
+ border-block-start-width: var(--pf-v6-c-code-editor__tab--BorderBlockStartWidth);
168
+ border-block-end-width: var(--pf-v6-c-code-editor__tab--BorderBlockEndWidth);
169
+ border-inline-start-width: var(--pf-v6-c-code-editor__tab--BorderInlineStartWidth);
170
+ border-inline-end-width: var(--pf-v6-c-code-editor__tab--BorderInlineEndWidth);
171
171
  border-start-end-radius: var(--pf-v6-c-code-editor__tab--BorderStartEndRadius);
172
172
  }
173
173
 
174
174
  .pf-v6-c-code-editor__tab-icon + .pf-v6-c-code-editor__tab-text {
175
- margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginLeft);
175
+ margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
176
176
  }
package/components/CodeEditor/code-editor.scss CHANGED
@@ -6,8 +6,8 @@
6
6
  --#{$code-editor}__controls--Gap: var(--pf-t--global--spacer--xs);
7
7
 
8
8
  // header
9
- --#{$code-editor}__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
10
- --#{$code-editor}__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
9
+ --#{$code-editor}__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default);
10
+ --#{$code-editor}__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
11
11
 
12
12
  // header content
13
13
  --#{$code-editor}__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -41,33 +41,33 @@
41
41
  --#{$code-editor}__main--m-drag-hover--after--Opacity: .1;
42
42
 
43
43
  // code
44
- --#{$code-editor}__code--PaddingTop: var(--pf-t--global--spacer--sm);
45
- --#{$code-editor}__code--PaddingRight: var(--pf-t--global--spacer--sm);
46
- --#{$code-editor}__code--PaddingBottom: var(--pf-t--global--spacer--sm);
47
- --#{$code-editor}__code--PaddingLeft: var(--pf-t--global--spacer--sm);
44
+ --#{$code-editor}__code--PaddingBlockStart: var(--pf-t--global--spacer--sm);
45
+ --#{$code-editor}__code--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
46
+ --#{$code-editor}__code--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
47
+ --#{$code-editor}__code--PaddingInlineStart: var(--pf-t--global--spacer--sm);
48
48
  --#{$code-editor}__code-pre--FontSize: var(--pf-t--global--font--size--sm);
49
49
  --#{$code-editor}__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
50
50
 
51
51
  // content
52
- --#{$code-editor}__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
53
- --#{$code-editor}__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
52
+ --#{$code-editor}__header-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
53
+ --#{$code-editor}__header-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
54
54
 
55
55
  // tab
56
56
  --#{$code-editor}__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
57
57
  --#{$code-editor}__tab--Color: var(--pf-t--global--text--color--subtle);
58
- --#{$code-editor}__tab--PaddingTop: var(--pf-t--global--spacer--sm);
59
- --#{$code-editor}__tab--PaddingRight: var( --pf-t--global--spacer--sm);
60
- --#{$code-editor}__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
61
- --#{$code-editor}__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
62
- --#{$code-editor}__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
63
- --#{$code-editor}__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
64
- --#{$code-editor}__tab--BorderBottomWidth: 0;
65
- --#{$code-editor}__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
58
+ --#{$code-editor}__tab--PaddingBlockStart: var(--pf-t--global--spacer--sm);
59
+ --#{$code-editor}__tab--PaddingInlineEnd: var( --pf-t--global--spacer--sm);
60
+ --#{$code-editor}__tab--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
61
+ --#{$code-editor}__tab--PaddingInlineStart: var( --pf-t--global--spacer--sm);
62
+ --#{$code-editor}__tab--BorderBlockStartWidth: var(--pf-t--global--border--width--box--default);
63
+ --#{$code-editor}__tab--BorderInlineEndWidth: var(--pf-t--global--border--width--box--default);
64
+ --#{$code-editor}__tab--BorderBlockEndWidth: 0;
65
+ --#{$code-editor}__tab--BorderInlineStartWidth: var(--pf-t--global--border--width--box--default);
66
66
  --#{$code-editor}__tab--BorderColor: var(--pf-t--global--border--color--default);
67
67
  --#{$code-editor}__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
68
68
 
69
69
  // tab text
70
- --#{$code-editor}__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
70
+ --#{$code-editor}__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
71
71
  }
72
72
 
73
73
  .#{$code-editor} {
@@ -87,7 +87,7 @@
87
87
  inset-inline-end: 0;
88
88
  pointer-events: none;
89
89
  content: "";
90
- border-block-end: var(--#{$code-editor}__header--before--BorderBottomWidth) solid var(--#{$code-editor}__header--before--BorderBottomColor);
90
+ border-block-end: var(--#{$code-editor}__header--before--BorderBlockEndWidth) solid var(--#{$code-editor}__header--before--BorderBlockEndColor);
91
91
  }
92
92
 
93
93
  &.pf-m-plain {
@@ -120,8 +120,8 @@
120
120
  .#{$code-editor}__header-main {
121
121
  flex-grow: 1;
122
122
  align-self: center;
123
- padding-inline-start: var(--#{$code-editor}__header-main--PaddingLeft);
124
- padding-inline-end: var(--#{$code-editor}__header-main--PaddingRight);
123
+ padding-inline-start: var(--#{$code-editor}__header-main--PaddingInlineStart);
124
+ padding-inline-end: var(--#{$code-editor}__header-main--PaddingInlineEnd);
125
125
  }
126
126
 
127
127
  .#{$code-editor}__upload {
@@ -170,10 +170,10 @@
170
170
 
171
171
  .#{$code-editor}__code {
172
172
  position: relative;
173
- padding-block-start: var(--#{$code-editor}__code--PaddingTop);
174
- padding-block-end: var(--#{$code-editor}__code--PaddingBottom);
175
- padding-inline-start: var(--#{$code-editor}__code--PaddingLeft);
176
- padding-inline-end: var(--#{$code-editor}__code--PaddingRight);
173
+ padding-block-start: var(--#{$code-editor}__code--PaddingBlockStart);
174
+ padding-block-end: var(--#{$code-editor}__code--PaddingBlockEnd);
175
+ padding-inline-start: var(--#{$code-editor}__code--PaddingInlineStart);
176
+ padding-inline-end: var(--#{$code-editor}__code--PaddingInlineEnd);
177
177
 
178
178
  .#{$code-editor}__code-pre {
179
179
  font-family: var(--#{$code-editor}__code-pre--FontFamily);
@@ -186,21 +186,21 @@
186
186
  position: relative;
187
187
  display: flex;
188
188
  align-items: center;
189
- padding-block-start: var(--#{$code-editor}__tab--PaddingTop);
190
- padding-block-end: var(--#{$code-editor}__tab--PaddingBottom);
191
- padding-inline-start: var(--#{$code-editor}__tab--PaddingLeft);
192
- padding-inline-end: var(--#{$code-editor}__tab--PaddingRight);
189
+ padding-block-start: var(--#{$code-editor}__tab--PaddingBlockStart);
190
+ padding-block-end: var(--#{$code-editor}__tab--PaddingBlockEnd);
191
+ padding-inline-start: var(--#{$code-editor}__tab--PaddingInlineStart);
192
+ padding-inline-end: var(--#{$code-editor}__tab--PaddingInlineEnd);
193
193
  color: var(--#{$code-editor}__tab--Color);
194
194
  background-color: var(--#{$code-editor}__tab--BackgroundColor);
195
195
  border-color: var(--#{$code-editor}__tab--BorderColor);
196
196
  border-style: solid;
197
- border-block-start-width: var(--#{$code-editor}__tab--BorderTopWidth);
198
- border-block-end-width: var(--#{$code-editor}__tab--BorderBottomWidth);
199
- border-inline-start-width: var(--#{$code-editor}__tab--BorderLeftWidth);
200
- border-inline-end-width: var(--#{$code-editor}__tab--BorderRightWidth);
197
+ border-block-start-width: var(--#{$code-editor}__tab--BorderBlockStartWidth);
198
+ border-block-end-width: var(--#{$code-editor}__tab--BorderBlockEndWidth);
199
+ border-inline-start-width: var(--#{$code-editor}__tab--BorderInlineStartWidth);
200
+ border-inline-end-width: var(--#{$code-editor}__tab--BorderInlineEndWidth);
201
201
  border-start-end-radius: var(--#{$code-editor}__tab--BorderStartEndRadius);
202
202
  }
203
203
 
204
204
  .#{$code-editor}__tab-icon + .#{$code-editor}__tab-text {
205
- margin-inline-start: var(--#{$code-editor}__tab-icon--text--MarginLeft);
205
+ margin-inline-start: var(--#{$code-editor}__tab-icon--text--MarginInlineStart);
206
206
  }
package/components/Content/content.css CHANGED
@@ -1,41 +1,41 @@
1
1
  :where(:root, .pf-v6-c-content) {
2
- --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
2
+ --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
3
3
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
4
4
  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
5
5
  --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body);
6
6
  --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
7
7
  --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
8
- --pf-v6-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
9
- --pf-v6-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
8
+ --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
9
+ --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
11
11
  --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
12
12
  --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
13
- --pf-v6-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
14
- --pf-v6-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
14
+ --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
15
15
  --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
16
16
  --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
17
17
  --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
18
- --pf-v6-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
19
- --pf-v6-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
19
+ --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
20
20
  --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
21
21
  --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
22
22
  --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
23
- --pf-v6-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
24
- --pf-v6-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
23
+ --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
24
+ --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
25
25
  --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
26
26
  --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
27
27
  --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
28
- --pf-v6-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
29
- --pf-v6-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
28
+ --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
29
+ --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
30
30
  --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
31
31
  --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
32
32
  --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
33
- --pf-v6-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
34
- --pf-v6-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
33
+ --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
34
+ --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
35
35
  --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
36
36
  --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
37
37
  --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
38
- --pf-v6-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
38
+ --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
40
40
  --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
41
41
  --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
@@ -44,28 +44,28 @@
44
44
  --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
45
45
  --pf-v6-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
46
46
  --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
47
- --pf-v6-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
48
- --pf-v6-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
49
- --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
50
- --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
47
+ --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
48
+ --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
49
+ --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
50
+ --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
51
51
  --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
52
- --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-t--global--border--color--default);
53
- --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300);
54
- --pf-v6-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
55
- --pf-v6-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
56
- --pf-v6-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
57
- --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
59
- --pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
60
- --pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
61
- --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
52
+ --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
53
+ --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
54
+ --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
55
+ --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
56
+ --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
57
+ --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
58
+ --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
59
+ --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
60
+ --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
61
+ --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
62
62
  --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
63
- --pf-v6-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
63
+ --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
64
64
  --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
65
65
  --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
66
66
  --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
67
- --pf-v6-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
68
- --pf-v6-c-content--dt--sm--MarginTop: 0;
67
+ --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
68
+ --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
69
69
  --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
70
70
  --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
71
71
  }
@@ -89,7 +89,7 @@
89
89
  }
90
90
 
91
91
  :is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
92
- margin-block-start: var(--pf-v6-c-content--li--MarginTop);
92
+ margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart);
93
93
  }
94
94
 
95
95
  :is(.pf-v6-c-content--p,
@@ -101,7 +101,7 @@
101
101
  .pf-v6-c-content--pre,
102
102
  .pf-v6-c-content--table,
103
103
  .pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
104
- margin-block-end: var(--pf-v6-c-content--MarginBottom);
104
+ margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
105
105
  }
106
106
 
107
107
  :is(.pf-v6-c-content--h1,
@@ -142,48 +142,48 @@
142
142
  }
143
143
 
144
144
  :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
145
- margin-block-start: var(--pf-v6-c-content--h1--MarginTop);
146
- margin-block-end: var(--pf-v6-c-content--h1--MarginBottom);
145
+ margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
146
+ margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
147
147
  font-size: var(--pf-v6-c-content--h1--FontSize);
148
148
  font-weight: var(--pf-v6-c-content--h1--FontWeight);
149
149
  line-height: var(--pf-v6-c-content--h1--LineHeight);
150
150
  }
151
151
 
152
152
  :is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
153
- margin-block-start: var(--pf-v6-c-content--h2--MarginTop);
154
- margin-block-end: var(--pf-v6-c-content--h2--MarginBottom);
153
+ margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart);
154
+ margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd);
155
155
  font-size: var(--pf-v6-c-content--h2--FontSize);
156
156
  font-weight: var(--pf-v6-c-content--h2--FontWeight);
157
157
  line-height: var(--pf-v6-c-content--h2--LineHeight);
158
158
  }
159
159
 
160
160
  :is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
161
- margin-block-start: var(--pf-v6-c-content--h3--MarginTop);
162
- margin-block-end: var(--pf-v6-c-content--h3--MarginBottom);
161
+ margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart);
162
+ margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd);
163
163
  font-size: var(--pf-v6-c-content--h3--FontSize);
164
164
  font-weight: var(--pf-v6-c-content--h3--FontWeight);
165
165
  line-height: var(--pf-v6-c-content--h3--LineHeight);
166
166
  }
167
167
 
168
168
  :is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
169
- margin-block-start: var(--pf-v6-c-content--h4--MarginTop);
170
- margin-block-end: var(--pf-v6-c-content--h4--MarginBottom);
169
+ margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart);
170
+ margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd);
171
171
  font-size: var(--pf-v6-c-content--h4--FontSize);
172
172
  font-weight: var(--pf-v6-c-content--h4--FontWeight);
173
173
  line-height: var(--pf-v6-c-content--h4--LineHeight);
174
174
  }
175
175
 
176
176
  :is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
177
- margin-block-start: var(--pf-v6-c-content--h5--MarginTop);
178
- margin-block-end: var(--pf-v6-c-content--h5--MarginBottom);
177
+ margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart);
178
+ margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd);
179
179
  font-size: var(--pf-v6-c-content--h5--FontSize);
180
180
  font-weight: var(--pf-v6-c-content--h5--FontWeight);
181
181
  line-height: var(--pf-v6-c-content--h5--LineHeight);
182
182
  }
183
183
 
184
184
  :is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
185
- margin-block-start: var(--pf-v6-c-content--h6--MarginTop);
186
- margin-block-end: var(--pf-v6-c-content--h6--MarginBottom);
185
+ margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart);
186
+ margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd);
187
187
  font-size: var(--pf-v6-c-content--h6--FontSize);
188
188
  font-weight: var(--pf-v6-c-content--h6--FontWeight);
189
189
  line-height: var(--pf-v6-c-content--h6--LineHeight);
@@ -196,16 +196,16 @@
196
196
  color: var(--pf-v6-c-content--small--Color);
197
197
  }
198
198
  :is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
199
- margin-block-end: var(--pf-v6-c-content--small--MarginBottom);
199
+ margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
200
200
  }
201
201
 
202
202
  :is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
203
- padding-block-start: var(--pf-v6-c-content--blockquote--PaddingTop);
204
- padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBottom);
205
- padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingLeft);
206
- padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingRight);
203
+ padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart);
204
+ padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd);
205
+ padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart);
206
+ padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd);
207
207
  color: var(--pf-v6-c-content--blockquote--Color);
208
- border-inline-start: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor);
208
+ border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
209
209
  }
210
210
 
211
211
  :is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
@@ -215,34 +215,34 @@
215
215
  }
216
216
 
217
217
  :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
218
- padding-inline-start: var(--pf-v6-c-content--ol--PaddingLeft);
219
- margin-inline-start: var(--pf-v6-c-content--ol--MarginLeft);
218
+ padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
219
+ margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
220
220
  }
221
221
  :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
222
222
  ul) {
223
- --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
224
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
223
+ --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
224
+ margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
225
225
  }
226
226
  :is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
227
227
  ol) {
228
- --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
229
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
228
+ --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
229
+ margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
230
230
  }
231
231
 
232
232
  :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
233
- padding-inline-start: var(--pf-v6-c-content--ul--PaddingLeft);
234
- margin-inline-start: var(--pf-v6-c-content--ul--MarginLeft);
233
+ padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
234
+ margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
235
235
  list-style: var(--pf-v6-c-content--ul--ListStyle);
236
236
  }
237
237
  :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
238
238
  ul) {
239
- --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
240
- margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
239
+ --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
240
+ margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
241
241
  }
242
242
  :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
243
243
  ol) {
244
- --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
245
- margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
244
+ --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
245
+ margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
246
246
  }
247
247
 
248
248
  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
@@ -261,11 +261,11 @@ ol) {
261
261
  font-weight: var(--pf-v6-c-content--dt--FontWeight);
262
262
  }
263
263
  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
264
- margin-block-start: var(--pf-v6-c-content--dt--MarginTop);
264
+ margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
265
265
  }
266
266
  @media screen and (min-width: 576px) {
267
267
  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
268
- --pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop);
268
+ --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
269
269
  }
270
270
  }
271
271
  @media screen and (min-width: 576px) {