@patternfly/react-styles 6.5.0-prerelease.14 → 6.5.0-prerelease.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/assets/images/glass-brand-dark.jpg +0 -0
  3. package/css/components/Accordion/accordion.css +1 -1
  4. package/css/components/Accordion/accordion.d.ts +1 -1
  5. package/css/components/Accordion/accordion.js +1 -1
  6. package/css/components/Accordion/accordion.mjs +1 -1
  7. package/css/components/Button/button.css +2 -2
  8. package/css/components/CodeEditor/code-editor.css +1 -1
  9. package/css/components/DataList/data-list.css +1 -1
  10. package/css/components/DataList/data-list.d.ts +1 -1
  11. package/css/components/DataList/data-list.js +1 -1
  12. package/css/components/DataList/data-list.mjs +1 -1
  13. package/css/components/Drawer/drawer.css +108 -18
  14. package/css/components/Drawer/drawer.d.ts +1 -1
  15. package/css/components/Drawer/drawer.js +1 -1
  16. package/css/components/Drawer/drawer.mjs +1 -1
  17. package/css/components/JumpLinks/jump-links.css +11 -1
  18. package/css/components/MenuToggle/menu-toggle.css +1 -2
  19. package/css/components/Page/page.css +9 -6
  20. package/css/components/Page/page.d.ts +1 -1
  21. package/css/components/Page/page.js +1 -1
  22. package/css/components/Page/page.mjs +1 -1
  23. package/css/components/Progress/progress.css +3 -1
  24. package/css/components/Table/table.css +1 -1
  25. package/css/components/Table/table.d.ts +1 -1
  26. package/css/components/Table/table.js +1 -1
  27. package/css/components/Table/table.mjs +1 -1
  28. package/css/components/Tabs/tabs.css +18 -17
  29. package/css/components/Tabs/tabs.d.ts +0 -1
  30. package/css/components/Tabs/tabs.js +0 -1
  31. package/css/components/Tabs/tabs.mjs +0 -1
  32. package/css/components/Wizard/wizard.css +2 -2
  33. package/css/components/Wizard/wizard.d.ts +1 -1
  34. package/css/components/Wizard/wizard.js +1 -1
  35. package/css/components/Wizard/wizard.mjs +1 -1
  36. package/css/components/_index.css +158 -53
  37. package/css/components/_index.d.ts +1 -2
  38. package/css/components/_index.js +1 -2
  39. package/css/components/_index.mjs +1 -2
  40. package/package.json +3 -3
package/css/components/Tabs/tabs.css CHANGED
@@ -38,14 +38,14 @@
38
38
  --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
40
40
  --pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
41
- --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
42
- --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
41
+ --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: transparent;
42
+ --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: transparent;
43
43
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
44
44
  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
45
45
  --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
46
46
  --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
47
47
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
48
- --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
48
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
49
49
  --pf-v6-c-tabs__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
50
50
  --pf-v6-c-tabs__link--BorderColor: transparent;
51
51
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -55,21 +55,21 @@
55
55
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
56
56
  --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
57
57
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
59
- --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
59
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
60
60
  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
61
61
  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
62
62
  --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
63
63
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
64
64
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
65
65
  --pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
66
- --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
67
- --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
66
+ --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--disabled);
67
+ --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: transparent;
68
68
  --pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
69
69
  --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
70
70
  --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
71
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
72
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
71
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--disabled);
72
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
73
73
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
74
74
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
75
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
@@ -89,6 +89,7 @@
89
89
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
90
90
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
91
91
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
92
+ --pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor: var(--pf-t--global--border--color--alt);
92
93
  --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
93
94
  --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
94
95
  --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
@@ -101,7 +102,9 @@
101
102
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
102
103
  --pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
103
104
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
104
- --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
105
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-t--global--border--radius--pill);
106
+ --pf-v6-c-tabs--m-box__link--after--BorderRadius: var(--pf-t--global--border--radius--sharp);
107
+ --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--color--brand--accent--default);
105
108
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
106
109
  --pf-v6-c-tabs--link-accent--start: 0;
107
110
  --pf-v6-c-tabs--link-accent--length: 0;
@@ -242,6 +245,7 @@
242
245
  --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
243
246
  --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
244
247
  --pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
248
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-v6-c-tabs--m-box__link--after--BorderRadius);
245
249
  }
246
250
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
247
251
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -251,7 +255,7 @@
251
255
  }
252
256
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
253
257
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
254
- --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
258
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
255
259
  --pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartColor);
256
260
  --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth);
257
261
  --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor);
@@ -421,7 +425,8 @@
421
425
  --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
422
426
  }
423
427
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
424
- --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
428
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
429
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
425
430
  --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
426
431
  }
427
432
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
@@ -464,11 +469,6 @@
464
469
  align-items: center;
465
470
  }
466
471
 
467
- .pf-v6-c-tabs__toggle-button .pf-v6-c-button {
468
- justify-content: start;
469
- white-space: normal;
470
- }
471
-
472
472
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
473
473
  scale: -1 1;
474
474
  }
@@ -599,6 +599,7 @@
599
599
  border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
600
600
  border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
601
601
  border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
602
+ border-radius: var(--pf-v6-c-tabs__link--after--BorderRadius);
602
603
  }
603
604
 
604
605
  .pf-v6-c-tabs__link:where(:hover, :focus) {
package/css/components/Tabs/tabs.d.ts CHANGED
@@ -80,7 +80,6 @@ declare const _default: {
80
80
  "tabsList": "pf-v6-c-tabs__list",
81
81
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
82
82
  "tabsToggle": "pf-v6-c-tabs__toggle",
83
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
84
83
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
85
84
  };
86
85
  export default _default;
package/css/components/Tabs/tabs.js CHANGED
@@ -82,6 +82,5 @@ exports.default = {
82
82
  "tabsList": "pf-v6-c-tabs__list",
83
83
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
84
84
  "tabsToggle": "pf-v6-c-tabs__toggle",
85
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
86
85
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
87
86
  };
package/css/components/Tabs/tabs.mjs CHANGED
@@ -80,6 +80,5 @@ export default {
80
80
  "tabsList": "pf-v6-c-tabs__list",
81
81
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
82
82
  "tabsToggle": "pf-v6-c-tabs__toggle",
83
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
84
83
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
85
84
  };
package/css/components/Wizard/wizard.css CHANGED
@@ -163,14 +163,14 @@
163
163
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
164
164
  display: none;
165
165
  }
166
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
166
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
167
167
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
168
168
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
169
169
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
170
170
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
171
171
  }
172
172
  @media screen and (min-width: 62rem) {
173
- :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain), .pf-v6-c-wizard.pf-m-plain {
173
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
174
174
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
175
175
  }
176
176
  }
package/css/components/Wizard/wizard.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const _default: {
5
5
  "modalBox": "pf-v6-c-modal-box",
6
6
  "modifiers": {
7
7
  "finished": "pf-m-finished",
8
- "noPlain": "pf-m-no-plain",
8
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
9
9
  "plain": "pf-m-plain",
10
10
  "expanded": "pf-m-expanded",
11
11
  "danger": "pf-m-danger",
package/css/components/Wizard/wizard.js CHANGED
@@ -7,7 +7,7 @@ exports.default = {
7
7
  "modalBox": "pf-v6-c-modal-box",
8
8
  "modifiers": {
9
9
  "finished": "pf-m-finished",
10
- "noPlain": "pf-m-no-plain",
10
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
11
11
  "plain": "pf-m-plain",
12
12
  "expanded": "pf-m-expanded",
13
13
  "danger": "pf-m-danger",
package/css/components/Wizard/wizard.mjs CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  "modalBox": "pf-v6-c-modal-box",
6
6
  "modifiers": {
7
7
  "finished": "pf-m-finished",
8
- "noPlain": "pf-m-no-plain",
8
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
9
9
  "plain": "pf-m-plain",
10
10
  "expanded": "pf-m-expanded",
11
11
  "danger": "pf-m-danger",