@patternfly/patternfly 6.3.0-prerelease.54 → 6.3.0-prerelease.56

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 (33) hide show
  1. package/base/patternfly-variables.css +0 -36
  2. package/base/tokens/tokens-local.scss +0 -38
  3. package/components/Accordion/accordion.css +2 -2
  4. package/components/Accordion/accordion.scss +2 -2
  5. package/components/Banner/banner.css +1 -1
  6. package/components/Banner/banner.scss +1 -1
  7. package/components/CodeBlock/code-block.css +1 -1
  8. package/components/CodeBlock/code-block.scss +1 -1
  9. package/components/DatePicker/date-picker.css +3 -0
  10. package/components/DatePicker/date-picker.scss +4 -0
  11. package/components/Drawer/drawer.css +2 -2
  12. package/components/Drawer/drawer.scss +2 -2
  13. package/components/Login/login.css +1 -1
  14. package/components/Login/login.scss +1 -1
  15. package/components/Menu/menu.css +1 -1
  16. package/components/Menu/menu.scss +1 -1
  17. package/components/ModalBox/modal-box.css +1 -1
  18. package/components/ModalBox/modal-box.scss +1 -1
  19. package/components/Page/page.css +61 -22
  20. package/components/Page/page.scss +42 -13
  21. package/components/Popover/popover.css +1 -1
  22. package/components/Popover/popover.scss +1 -1
  23. package/components/Table/table.css +1 -1
  24. package/components/Table/table.scss +1 -1
  25. package/components/_index.css +75 -33
  26. package/docs/components/Progress/examples/Progress.md +222 -210
  27. package/package.json +1 -1
  28. package/patternfly-base-no-globals.css +0 -36
  29. package/patternfly-base.css +0 -36
  30. package/patternfly-no-globals.css +75 -69
  31. package/patternfly.css +75 -69
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -918,42 +918,6 @@
918
918
  var(--pf-t--global--box-shadow--color--lg--directional);
919
919
  --pf-t--global--list-style: disc outside;
920
920
  --pf-t--temp--dev--tbd: #BC11E0;
921
- --pf-t--global--high-contrast--border--width--action--clicked: 0;
922
- --pf-t--global--high-contrast--border--width--action--default: 0;
923
- --pf-t--global--high-contrast--border--width--action--hover: 0;
924
- --pf-t--global--high-contrast--border--width--box--clicked: 0;
925
- --pf-t--global--high-contrast--border--width--box--default: 0;
926
- --pf-t--global--high-contrast--border--width--box--hover: 0;
927
- --pf-t--global--high-contrast--border--width--box--status--default: 0;
928
- --pf-t--global--high-contrast--border--width--box--status--read: 0;
929
- --pf-t--global--high-contrast--border--width--control--clicked: 0;
930
- --pf-t--global--high-contrast--border--width--control--default: 0;
931
- --pf-t--global--high-contrast--border--width--control--hover: 0;
932
- --pf-t--global--high-contrast--border--width--divider--clicked: 0;
933
- --pf-t--global--high-contrast--border--width--divider--default: 0;
934
- --pf-t--global--high-contrast--border--width--divider--hover: 0;
935
- --pf-t--global--high-contrast--border--width--extra-strong: 0;
936
- --pf-t--global--high-contrast--border--width--regular: 0;
937
- --pf-t--global--high-contrast--border--width--strong: 0;
938
- }
939
- :root:where(.pf-v6-theme-high-contrast) {
940
- --pf-t--global--high-contrast--border--width--action--clicked: var(--pf-t--global--border--width--action--clicked);
941
- --pf-t--global--high-contrast--border--width--action--default: var(--pf-t--global--border--width--action--default);
942
- --pf-t--global--high-contrast--border--width--action--hover: var(--pf-t--global--border--width--action--hover);
943
- --pf-t--global--high-contrast--border--width--box--clicked: var(--pf-t--global--border--width--box--clicked);
944
- --pf-t--global--high-contrast--border--width--box--default: var(--pf-t--global--border--width--box--default);
945
- --pf-t--global--high-contrast--border--width--box--hover: var(--pf-t--global--border--width--box--hover);
946
- --pf-t--global--high-contrast--border--width--box--status--default: var(--pf-t--global--border--width--box--status--default);
947
- --pf-t--global--high-contrast--border--width--box--status--read: var(--pf-t--global--border--width--box--status--read);
948
- --pf-t--global--high-contrast--border--width--control--clicked: var(--pf-t--global--border--width--control--clicked);
949
- --pf-t--global--high-contrast--border--width--control--default: var(--pf-t--global--border--width--control--default);
950
- --pf-t--global--high-contrast--border--width--control--hover: var(--pf-t--global--border--width--control--hover);
951
- --pf-t--global--high-contrast--border--width--divider--clicked: var(--pf-t--global--border--width--divider--clicked);
952
- --pf-t--global--high-contrast--border--width--divider--default: var(--pf-t--global--border--width--divider--default);
953
- --pf-t--global--high-contrast--border--width--divider--hover: var(--pf-t--global--border--width--divider--hover);
954
- --pf-t--global--high-contrast--border--width--extra-strong: var(--pf-t--global--border--width--extra-strong);
955
- --pf-t--global--high-contrast--border--width--regular: var(--pf-t--global--border--width--regular);
956
- --pf-t--global--high-contrast--border--width--strong: var(--pf-t--global--border--width--strong);
957
921
  }
958
922
 
959
923
  :root:where(.pf-v6-theme-dark) {
package/base/tokens/tokens-local.scss CHANGED
@@ -124,42 +124,4 @@
124
124
  // stylelint-disable custom-property-pattern
125
125
  --pf-t--temp--dev--tbd: #BC11E0;
126
126
 
127
- // High contrast custom tokens - placeholders until they're in figma
128
- --pf-t--global--high-contrast--border--width--action--clicked: 0;
129
- --pf-t--global--high-contrast--border--width--action--default: 0;
130
- --pf-t--global--high-contrast--border--width--action--hover: 0;
131
- --pf-t--global--high-contrast--border--width--box--clicked: 0;
132
- --pf-t--global--high-contrast--border--width--box--default: 0;
133
- --pf-t--global--high-contrast--border--width--box--hover: 0;
134
- --pf-t--global--high-contrast--border--width--box--status--default: 0;
135
- --pf-t--global--high-contrast--border--width--box--status--read: 0;
136
- --pf-t--global--high-contrast--border--width--control--clicked: 0;
137
- --pf-t--global--high-contrast--border--width--control--default: 0;
138
- --pf-t--global--high-contrast--border--width--control--hover: 0;
139
- --pf-t--global--high-contrast--border--width--divider--clicked: 0;
140
- --pf-t--global--high-contrast--border--width--divider--default: 0;
141
- --pf-t--global--high-contrast--border--width--divider--hover: 0;
142
- --pf-t--global--high-contrast--border--width--extra-strong: 0;
143
- --pf-t--global--high-contrast--border--width--regular: 0;
144
- --pf-t--global--high-contrast--border--width--strong: 0;
145
-
146
- &:where(.pf-v6-theme-high-contrast) {
147
- --pf-t--global--high-contrast--border--width--action--clicked: var(--pf-t--global--border--width--action--clicked);
148
- --pf-t--global--high-contrast--border--width--action--default: var(--pf-t--global--border--width--action--default);
149
- --pf-t--global--high-contrast--border--width--action--hover: var(--pf-t--global--border--width--action--hover);
150
- --pf-t--global--high-contrast--border--width--box--clicked: var(--pf-t--global--border--width--box--clicked);
151
- --pf-t--global--high-contrast--border--width--box--default: var(--pf-t--global--border--width--box--default);
152
- --pf-t--global--high-contrast--border--width--box--hover: var(--pf-t--global--border--width--box--hover);
153
- --pf-t--global--high-contrast--border--width--box--status--default: var(--pf-t--global--border--width--box--status--default);
154
- --pf-t--global--high-contrast--border--width--box--status--read: var(--pf-t--global--border--width--box--status--read);
155
- --pf-t--global--high-contrast--border--width--control--clicked: var(--pf-t--global--border--width--control--clicked);
156
- --pf-t--global--high-contrast--border--width--control--default: var(--pf-t--global--border--width--control--default);
157
- --pf-t--global--high-contrast--border--width--control--hover: var(--pf-t--global--border--width--control--hover);
158
- --pf-t--global--high-contrast--border--width--divider--clicked: var(--pf-t--global--border--width--divider--clicked);
159
- --pf-t--global--high-contrast--border--width--divider--default: var(--pf-t--global--border--width--divider--default);
160
- --pf-t--global--high-contrast--border--width--divider--hover: var(--pf-t--global--border--width--divider--hover);
161
- --pf-t--global--high-contrast--border--width--extra-strong: var(--pf-t--global--border--width--extra-strong);
162
- --pf-t--global--high-contrast--border--width--regular: var(--pf-t--global--border--width--regular);
163
- --pf-t--global--high-contrast--border--width--strong: var(--pf-t--global--border--width--strong);
164
- }
165
127
  }
package/components/Accordion/accordion.css CHANGED
@@ -78,8 +78,8 @@
78
78
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
79
79
  --pf-v6-c-accordion__item--BorderWidth: 0;
80
80
  --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
81
- --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
82
- --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
81
+ --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
82
+ --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
83
83
  --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
84
84
  }
85
85
  @media screen and (prefers-reduced-motion: no-preference) {
package/components/Accordion/accordion.scss CHANGED
@@ -113,10 +113,10 @@
113
113
  // accordion item border for high contrast
114
114
  --#{$accordion}__item--BorderWidth: 0;
115
115
  --#{$accordion}__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
116
- --#{$accordion}__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
116
+ --#{$accordion}__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
117
117
 
118
118
  // expandable content border for high contrast
119
- --#{$accordion}__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
119
+ --#{$accordion}__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
120
120
  --#{$accordion}__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
121
121
  }
122
122
 
package/components/Banner/banner.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
10
10
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
11
11
  --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
- --pf-v6-c-banner--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
12
+ --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
13
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
14
14
  --pf-v6-c-banner--link--TextDecoration: underline;
15
15
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
package/components/Banner/banner.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
12
12
  --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
13
13
  --#{$banner}--BorderColor: var(--pf-t--global--border--color--high-contrast);
14
- --#{$banner}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
14
+ --#{$banner}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15
15
 
16
16
  @media (min-width: $pf-v6-global--breakpoint--md) {
17
17
  --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
package/components/CodeBlock/code-block.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .pf-v6-c-code-block {
2
2
  --pf-v6-c-code-block--BorderColor: var(--pf-t--global--border--color--high-contrast);
3
- --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
3
+ --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
4
4
  --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
5
  --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
6
6
  --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
package/components/CodeBlock/code-block.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @include pf-root($code-block) {
4
4
  --#{$code-block}--BorderColor: var(--pf-t--global--border--color--high-contrast);
5
- --#{$code-block}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
5
+ --#{$code-block}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
6
6
  --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
7
7
  --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
8
8
  --#{$code-block}__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
package/components/DatePicker/date-picker.css CHANGED
@@ -5,6 +5,8 @@
5
5
  --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
6
6
  --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
7
7
  --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
8
+ --pf-v6-c-date-picker__calendar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9
+ --pf-v6-c-date-picker__calendar--BorderColor: var(--pf-t--global--border--color--high-contrast);
8
10
  --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
9
11
  --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
10
12
  --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -35,6 +37,7 @@
35
37
  inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
36
38
  z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
37
39
  background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
40
+ border: var(--pf-v6-c-date-picker__calendar--BorderWidth) solid var(--pf-v6-c-date-picker__calendar--BorderColor);
38
41
  box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
39
42
  }
40
43
  .pf-v6-c-date-picker__calendar.pf-m-align-right {
package/components/DatePicker/date-picker.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  --#{$date-picker}__input--c-form-control--Width: calc(var(--#{$date-picker}__input--c-form-control--width-chars) * 1ch + var(--#{$date-picker}__input--c-form-control--width-base));
8
8
  --#{$date-picker}__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm)); // form control left/right padding + status icon width and spacer
9
9
  --#{$date-picker}__input--c-form-control--width-chars: 11;
10
+ --#{$date-picker}__calendar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11
+ --#{$date-picker}__calendar--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
12
  --#{$date-picker}__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11
13
  --#{$date-picker}__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
12
14
  --#{$date-picker}__calendar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -32,6 +34,7 @@
32
34
  }
33
35
  }
34
36
 
37
+ // TODO - remove in breaking change
35
38
  .#{$date-picker}__calendar {
36
39
  position: absolute;
37
40
  inset-block-start: var(--#{$date-picker}__calendar--InsetBlockStart);
@@ -39,6 +42,7 @@
39
42
  inset-inline-end: var(--#{$date-picker}__calendar--InsetInlineEnd);
40
43
  z-index: var(--#{$date-picker}__calendar--ZIndex);
41
44
  background-color: var(--#{$date-picker}__calendar--BackgroundColor);
45
+ border: var(--#{$date-picker}__calendar--BorderWidth) solid var(--#{$date-picker}__calendar--BorderColor);
42
46
  box-shadow: var(--#{$date-picker}__calendar--BoxShadow);
43
47
 
44
48
  &.pf-m-align-right {
package/components/Drawer/drawer.css CHANGED
@@ -110,9 +110,9 @@
110
110
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
111
111
  --pf-v6-c-drawer__panel--BoxShadow: none;
112
112
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
113
- --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default);
113
+ --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
114
114
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
115
- --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
115
+ --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
116
116
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
117
117
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
118
118
  --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: 0;
package/components/Drawer/drawer.scss CHANGED
@@ -168,9 +168,9 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
168
168
 
169
169
  // Divider
170
170
  // TODO remove these variables in a breaking change in favor of setting the border variables directly
171
- --#{$drawer}__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default);
171
+ --#{$drawer}__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
172
172
  --#{$drawer}--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default); // TODO this turns on border always for inline
173
- --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
173
+ --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
174
174
  --#{$drawer}__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
175
175
  --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
176
176
  --#{$drawer}--m-inline__panel--PaddingInlineStart: 0; // no padding needed now
package/components/Login/login.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18
18
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
19
19
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
20
- --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
20
+ --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
21
21
  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
22
22
  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
23
23
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
package/components/Login/login.scss CHANGED
@@ -40,7 +40,7 @@
40
40
  --#{$login}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
41
41
  --#{$login}__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
42
42
  --#{$login}__main--BorderRadius: var(--pf-t--global--border--radius--large);
43
- --#{$login}__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
43
+ --#{$login}__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
44
44
  --#{$login}__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
45
45
 
46
46
  @media (min-width: $pf-v6-global--breakpoint--xl) {
package/components/Menu/menu.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
8
8
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
9
9
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
10
- --pf-v6-c-menu--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
10
+ --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11
11
  --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
12
  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
13
13
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
package/components/Menu/menu.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  --#{$menu}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11
11
  --#{$menu}--BoxShadow: var(--pf-t--global--box-shadow--md);
12
12
  --#{$menu}--Color: var(--pf-t--global--text--color--regular);
13
- --#{$menu}--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
13
+ --#{$menu}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14
14
  --#{$menu}--BorderColor: var(--pf-t--global--border--color--high-contrast);
15
15
  --#{$menu}--BorderRadius: var(--pf-t--global--border--radius--small);
16
16
  --#{$menu}--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
package/components/ModalBox/modal-box.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .pf-v6-c-modal-box {
2
2
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
3
3
  --pf-v6-c-modal-box--BorderColor: var(--pf-t--global--border--color--high-contrast);
4
- --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
4
+ --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
5
5
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
6
6
  --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
7
7
  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);
package/components/ModalBox/modal-box.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @include pf-root($modal-box) {
4
4
  --#{$modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
5
5
  --#{$modal-box}--BorderColor: var(--pf-t--global--border--color--high-contrast);
6
- --#{$modal-box}--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
6
+ --#{$modal-box}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
7
7
  --#{$modal-box}--BorderRadius: var(--pf-t--global--border--radius--large);
8
8
  --#{$modal-box}--BoxShadow: var(--pf-t--global--box-shadow--lg);
9
9
  --#{$modal-box}--ZIndex: var(--pf-t--global--z-index--xl); // TODO use a z-index token
package/components/Page/page.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
8
8
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
9
9
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
- --pf-v6-c-page__sidebar--BoxShadow: none;
10
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
11
11
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12
12
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
13
13
  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -22,6 +22,8 @@
22
22
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
23
23
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
24
24
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
25
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
26
+ --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
25
27
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
26
28
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
27
29
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -46,13 +48,19 @@
46
48
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
47
49
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
48
50
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
49
- --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--border--width--main--default);
51
+ --pf-v6-c-page__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
52
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
53
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
54
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
50
55
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
51
56
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
52
57
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
53
58
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
54
59
  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
55
60
  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
61
+ --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
62
+ --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
63
+ --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
56
64
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
57
65
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
58
66
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -65,22 +73,30 @@
65
73
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
66
74
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
67
75
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
76
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
77
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
68
78
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
69
79
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
80
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
81
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
70
82
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
71
83
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
84
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
85
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
72
86
  --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
73
87
  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
88
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
89
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
74
90
  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
75
91
  --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
76
92
  --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
77
- --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
78
- --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
93
+ --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
94
+ --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
79
95
  --pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
80
96
  --pf-v6-c-page__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
81
- --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
97
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
82
98
  --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: 0;
83
- --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
99
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
84
100
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
85
101
  --pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
86
102
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
@@ -103,6 +119,7 @@
103
119
  .pf-v6-c-page {
104
120
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
105
121
  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
122
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
106
123
  }
107
124
  }
108
125
 
@@ -196,6 +213,7 @@
196
213
  overflow-y: auto;
197
214
  -webkit-overflow-scrolling: touch;
198
215
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
216
+ border-inline-end: var(--pf-v6-c-page__sidebar--BorderInlineEndWidth) solid var(--pf-v6-c-page__sidebar--BorderInlineEndColor);
199
217
  opacity: var(--pf-v6-c-page__sidebar--Opacity);
200
218
  transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
201
219
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
@@ -211,7 +229,7 @@
211
229
  }
212
230
  @media screen and (min-width: 75rem) {
213
231
  .pf-v6-c-page__sidebar.pf-m-expanded {
214
- --pf-v6-c-page__sidebar--BoxShadow: none;
232
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-v6-c-page__sidebar--BoxShadow);
215
233
  }
216
234
  }
217
235
  .pf-v6-c-page__sidebar.pf-m-collapsed {
@@ -308,6 +326,7 @@
308
326
  .pf-v6-c-page__main-group.pf-m-shadow-bottom,
309
327
  .pf-v6-c-page__main-subnav.pf-m-shadow-bottom {
310
328
  z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex);
329
+ border-block-end: var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor);
311
330
  box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow);
312
331
  }
313
332
  .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top,
@@ -317,6 +336,7 @@
317
336
  .pf-v6-c-page__main-group.pf-m-shadow-top,
318
337
  .pf-v6-c-page__main-subnav.pf-m-shadow-top {
319
338
  z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex);
339
+ border-block-start: var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor);
320
340
  box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow);
321
341
  }
322
342
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top,
@@ -328,6 +348,7 @@
328
348
  position: sticky;
329
349
  inset-block-start: 0;
330
350
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
351
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
331
352
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
332
353
  }
333
354
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom,
@@ -339,6 +360,7 @@
339
360
  position: sticky;
340
361
  inset-block-end: 0;
341
362
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
363
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
342
364
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
343
365
  }
344
366
  @media (min-height: 0) {
@@ -351,6 +373,7 @@
351
373
  position: sticky;
352
374
  inset-block-start: 0;
353
375
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
376
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
354
377
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
355
378
  }
356
379
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
@@ -362,6 +385,7 @@
362
385
  position: sticky;
363
386
  inset-block-end: 0;
364
387
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
388
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
365
389
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
366
390
  }
367
391
  }
@@ -375,6 +399,7 @@
375
399
  position: sticky;
376
400
  inset-block-start: 0;
377
401
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
402
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
378
403
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
379
404
  }
380
405
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
@@ -386,6 +411,7 @@
386
411
  position: sticky;
387
412
  inset-block-end: 0;
388
413
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
414
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
389
415
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
390
416
  }
391
417
  }
@@ -399,6 +425,7 @@
399
425
  position: sticky;
400
426
  inset-block-start: 0;
401
427
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
428
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
402
429
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
403
430
  }
404
431
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
@@ -410,6 +437,7 @@
410
437
  position: sticky;
411
438
  inset-block-end: 0;
412
439
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
440
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
413
441
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
414
442
  }
415
443
  }
@@ -423,6 +451,7 @@
423
451
  position: sticky;
424
452
  inset-block-start: 0;
425
453
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
454
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
426
455
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
427
456
  }
428
457
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
@@ -434,6 +463,7 @@
434
463
  position: sticky;
435
464
  inset-block-end: 0;
436
465
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
466
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
437
467
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
438
468
  }
439
469
  }
@@ -447,6 +477,7 @@
447
477
  position: sticky;
448
478
  inset-block-start: 0;
449
479
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
480
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
450
481
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
451
482
  }
452
483
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
@@ -458,6 +489,7 @@
458
489
  position: sticky;
459
490
  inset-block-end: 0;
460
491
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
492
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
461
493
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
462
494
  }
463
495
  }
@@ -470,7 +502,11 @@
470
502
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
471
503
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
472
504
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
473
- border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
505
+ border: solid var(--pf-v6-c-page__main-container--BorderColor);
506
+ border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
507
+ border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
508
+ border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
509
+ border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
474
510
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
475
511
  }
476
512
  @media screen and (max-width: calc(48rem - 1px)) {
@@ -480,6 +516,9 @@
480
516
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
481
517
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
482
518
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
519
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
520
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
521
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
483
522
  }
484
523
  }
485
524
 
@@ -600,8 +639,8 @@
600
639
  gap: var(--pf-v6-c-page__main-section--RowGap);
601
640
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
602
641
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
603
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
604
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
642
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
643
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
605
644
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
606
645
  }
607
646
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -610,8 +649,8 @@
610
649
  .pf-v6-c-page__main-section.pf-m-padding {
611
650
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
612
651
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
613
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
614
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
652
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
653
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
615
654
  }
616
655
  .pf-v6-c-page__main-section.pf-m-no-padding {
617
656
  padding: 0;
@@ -620,8 +659,8 @@
620
659
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
621
660
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
622
661
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
623
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
624
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
662
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
663
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
625
664
  }
626
665
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
627
666
  padding: 0;
@@ -631,8 +670,8 @@
631
670
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
632
671
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
633
672
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
634
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
635
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
673
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
674
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
636
675
  }
637
676
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
638
677
  padding: 0;
@@ -642,8 +681,8 @@
642
681
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
643
682
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
644
683
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
645
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
646
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
684
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
685
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
647
686
  }
648
687
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
649
688
  padding: 0;
@@ -653,8 +692,8 @@
653
692
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
654
693
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
655
694
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
656
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
657
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
695
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
696
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
658
697
  }
659
698
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
660
699
  padding: 0;
@@ -664,8 +703,8 @@
664
703
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
665
704
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
666
705
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
667
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
668
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
706
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
707
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
669
708
  }
670
709
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
671
710
  padding: 0;