@patternfly/patternfly 6.3.0-prerelease.55 → 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 (31) 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/Popover/popover.css +1 -1
  20. package/components/Popover/popover.scss +1 -1
  21. package/components/Table/table.css +1 -1
  22. package/components/Table/table.scss +1 -1
  23. package/components/_index.css +14 -11
  24. package/docs/components/Progress/examples/Progress.md +222 -210
  25. package/package.json +1 -1
  26. package/patternfly-base-no-globals.css +0 -36
  27. package/patternfly-base.css +0 -36
  28. package/patternfly-no-globals.css +14 -47
  29. package/patternfly.css +14 -47
  30. package/patternfly.min.css +1 -1
  31. 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/Popover/popover.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
4
4
  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
5
5
  --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
6
- --pf-v6-c-popover--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
6
+ --pf-v6-c-popover--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
7
7
  --pf-v6-c-popover--BorderColor: var(--pf-t--global--border--color--high-contrast);
8
8
  --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
9
9
  --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
package/components/Popover/popover.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
7
7
  --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
8
8
  --#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md);
9
- --#{$popover}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
9
+ --#{$popover}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
10
10
  --#{$popover}--BorderColor: var(--pf-t--global--border--color--high-contrast);
11
11
  --#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium);
12
12
 
package/components/Table/table.css CHANGED
@@ -121,7 +121,7 @@
121
121
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
122
122
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
123
123
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
124
- --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
124
+ --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
125
125
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
126
126
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
127
127
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
package/components/Table/table.scss CHANGED
@@ -194,7 +194,7 @@
194
194
 
195
195
  // * Compound expandable
196
196
  --#{$table}--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
197
- --#{$table}--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
197
+ --#{$table}--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
198
198
 
199
199
  // * Table compact th
200
200
  --#{$table}--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
package/components/_index.css CHANGED
@@ -271,8 +271,8 @@
271
271
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
272
272
  --pf-v6-c-accordion__item--BorderWidth: 0;
273
273
  --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
274
- --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
275
- --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
274
+ --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
275
+ --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
276
276
  --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
277
277
  }
278
278
  @media screen and (prefers-reduced-motion: no-preference) {
@@ -1262,7 +1262,7 @@
1262
1262
  --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1263
1263
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1264
1264
  --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
1265
- --pf-v6-c-banner--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
1265
+ --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1266
1266
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1267
1267
  --pf-v6-c-banner--link--TextDecoration: underline;
1268
1268
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -3162,7 +3162,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3162
3162
 
3163
3163
  .pf-v6-c-code-block {
3164
3164
  --pf-v6-c-code-block--BorderColor: var(--pf-t--global--border--color--high-contrast);
3165
- --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
3165
+ --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
3166
3166
  --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3167
3167
  --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
3168
3168
  --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -5312,6 +5312,8 @@ ul) {
5312
5312
  --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));
5313
5313
  --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
5314
5314
  --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
5315
+ --pf-v6-c-date-picker__calendar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
5316
+ --pf-v6-c-date-picker__calendar--BorderColor: var(--pf-t--global--border--color--high-contrast);
5315
5317
  --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
5316
5318
  --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
5317
5319
  --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -5342,6 +5344,7 @@ ul) {
5342
5344
  inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
5343
5345
  z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
5344
5346
  background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
5347
+ border: var(--pf-v6-c-date-picker__calendar--BorderWidth) solid var(--pf-v6-c-date-picker__calendar--BorderColor);
5345
5348
  box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
5346
5349
  }
5347
5350
  .pf-v6-c-date-picker__calendar.pf-m-align-right {
@@ -5780,9 +5783,9 @@ ul) {
5780
5783
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
5781
5784
  --pf-v6-c-drawer__panel--BoxShadow: none;
5782
5785
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
5783
- --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default);
5786
+ --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
5784
5787
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
5785
- --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
5788
+ --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
5786
5789
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
5787
5790
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
5788
5791
  --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: 0;
@@ -9437,7 +9440,7 @@ ul.pf-v6-c-list {
9437
9440
  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9438
9441
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9439
9442
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
9440
- --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
9443
+ --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9441
9444
  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
9442
9445
  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
9443
9446
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
@@ -10217,7 +10220,7 @@ ul.pf-v6-c-list {
10217
10220
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
10218
10221
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
10219
10222
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
10220
- --pf-v6-c-menu--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
10223
+ --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
10221
10224
  --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
10222
10225
  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
10223
10226
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
@@ -11355,7 +11358,7 @@ ul.pf-v6-c-list {
11355
11358
  .pf-v6-c-modal-box {
11356
11359
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11357
11360
  --pf-v6-c-modal-box--BorderColor: var(--pf-t--global--border--color--high-contrast);
11358
- --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
11361
+ --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11359
11362
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
11360
11363
  --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
11361
11364
  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);
@@ -13660,7 +13663,7 @@ ul.pf-v6-c-list {
13660
13663
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
13661
13664
  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
13662
13665
  --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
13663
- --pf-v6-c-popover--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
13666
+ --pf-v6-c-popover--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13664
13667
  --pf-v6-c-popover--BorderColor: var(--pf-t--global--border--color--high-contrast);
13665
13668
  --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
13666
13669
  --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
@@ -17615,7 +17618,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17615
17618
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
17616
17619
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
17617
17620
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
17618
- --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
17621
+ --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17619
17622
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
17620
17623
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17621
17624
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);