@patternfly/patternfly 6.0.0-alpha.114 → 6.0.0-alpha.116

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 (128) hide show
  1. package/assets/images/pf_logo.svg +11 -11
  2. package/assets/images/pf_logo_white.svg +2 -2
  3. package/base/_chart-globals.scss +320 -320
  4. package/base/_fa-icons.scss +2 -2
  5. package/base/_fonts.scss +16 -16
  6. package/base/_globals.scss +4 -11
  7. package/base/_variables.scss +221 -221
  8. package/base/patternfly-globals.css +2 -6
  9. package/base/patternfly-variables.css +25 -21
  10. package/base/themes/dark/_chart-globals.scss +25 -25
  11. package/base/tokens/_tokens-charts.scss +1 -1
  12. package/base/tokens/_tokens-dark.scss +1 -1
  13. package/base/tokens/_tokens-default.scss +13 -13
  14. package/base/tokens/_tokens-font.scss +8 -0
  15. package/base/tokens/_tokens-palette.scss +1 -1
  16. package/components/AboutModalBox/about-modal-box.css +1 -1
  17. package/components/AboutModalBox/about-modal-box.scss +1 -1
  18. package/components/Alert/alert-group.css +1 -1
  19. package/components/Alert/alert-group.scss +1 -1
  20. package/components/Alert/alert.css +1 -1
  21. package/components/Alert/alert.scss +1 -1
  22. package/components/AppLauncher/app-launcher.css +1 -1
  23. package/components/AppLauncher/app-launcher.scss +1 -1
  24. package/components/Backdrop/backdrop.css +1 -1
  25. package/components/Backdrop/backdrop.scss +1 -1
  26. package/components/Banner/banner.css +1 -1
  27. package/components/Banner/banner.scss +1 -1
  28. package/components/Button/button.css +3 -3
  29. package/components/Button/button.scss +3 -3
  30. package/components/Card/card.css +1 -1
  31. package/components/Card/card.scss +1 -1
  32. package/components/Content/content.css +1 -1
  33. package/components/Content/content.scss +1 -1
  34. package/components/ContextSelector/context-selector.css +1 -1
  35. package/components/ContextSelector/context-selector.scss +1 -1
  36. package/components/DatePicker/date-picker.css +1 -1
  37. package/components/DatePicker/date-picker.scss +1 -1
  38. package/components/Drawer/drawer.css +4 -4
  39. package/components/Drawer/drawer.scss +4 -4
  40. package/components/Dropdown/dropdown.css +2 -2
  41. package/components/Dropdown/dropdown.scss +2 -2
  42. package/components/DualListSelector/dual-list-selector.css +1 -1
  43. package/components/DualListSelector/dual-list-selector.scss +3 -3
  44. package/components/Form/form.css +1 -1
  45. package/components/Form/form.scss +1 -1
  46. package/components/JumpLinks/jump-links.css +1 -1
  47. package/components/JumpLinks/jump-links.scss +1 -1
  48. package/components/List/list.css +1 -1
  49. package/components/List/list.scss +1 -1
  50. package/components/Menu/menu.css +7 -7
  51. package/components/Menu/menu.scss +7 -7
  52. package/components/MenuToggle/menu-toggle.css +1 -1
  53. package/components/MenuToggle/menu-toggle.scss +1 -1
  54. package/components/ModalBox/modal-box.css +1 -1
  55. package/components/ModalBox/modal-box.scss +1 -1
  56. package/components/Nav/nav.css +1 -1
  57. package/components/Nav/nav.scss +1 -1
  58. package/components/NotificationDrawer/notification-drawer.css +2 -2
  59. package/components/NotificationDrawer/notification-drawer.scss +2 -2
  60. package/components/OptionsMenu/options-menu.css +1 -1
  61. package/components/OptionsMenu/options-menu.scss +1 -1
  62. package/components/Page/page.css +8 -8
  63. package/components/Page/page.scss +14 -14
  64. package/components/Panel/panel.css +1 -1
  65. package/components/Panel/panel.scss +1 -1
  66. package/components/ProgressStepper/progress-stepper.css +2 -2
  67. package/components/ProgressStepper/progress-stepper.scss +2 -2
  68. package/components/Select/select.css +1 -1
  69. package/components/Select/select.scss +1 -1
  70. package/components/Sidebar/sidebar.css +2 -2
  71. package/components/Sidebar/sidebar.scss +2 -2
  72. package/components/SkipToContent/skip-to-content.css +1 -1
  73. package/components/SkipToContent/skip-to-content.scss +1 -1
  74. package/components/Slider/slider.css +1 -1
  75. package/components/Slider/slider.scss +1 -1
  76. package/components/Table/table-scrollable.css +1 -1
  77. package/components/Table/table-scrollable.scss +1 -1
  78. package/components/Table/table.css +4 -4
  79. package/components/Table/table.scss +4 -4
  80. package/components/Tabs/tabs.css +1 -1
  81. package/components/Tabs/tabs.scss +1 -1
  82. package/components/ToggleGroup/toggle-group.css +3 -3
  83. package/components/ToggleGroup/toggle-group.scss +3 -3
  84. package/components/Toolbar/toolbar.css +3 -3
  85. package/components/Toolbar/toolbar.scss +3 -3
  86. package/components/TreeView/tree-view.css +1 -1
  87. package/components/TreeView/tree-view.scss +3 -3
  88. package/components/Wizard/wizard.css +4 -4
  89. package/components/Wizard/wizard.scss +4 -4
  90. package/docs/components/NotificationBadge/examples/NotificationBadge.md +18 -18
  91. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  92. package/docs/components/Table/examples/Table.md +2 -2
  93. package/docs/components/Tabs/examples/Tabs.md +102 -102
  94. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  95. package/docs/demos/Card/examples/Card.md +152 -115
  96. package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
  97. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  98. package/docs/demos/Table/examples/Table.md +2 -2
  99. package/docs/demos/Toolbar/examples/Toolbar.css +3 -3
  100. package/docs/utilities/Text/examples/Text.md +0 -1
  101. package/package.json +1 -1
  102. package/patternfly-base-no-globals-theme-dark-unversioned.css +25 -81
  103. package/patternfly-base-no-globals-theme-dark-unversioned.scss +2 -2
  104. package/patternfly-base-no-globals.css +25 -81
  105. package/patternfly-base-no-globals.scss +2 -2
  106. package/patternfly-base-theme-dark-unversioned.css +27 -83
  107. package/patternfly-base.css +27 -83
  108. package/patternfly-base.scss +0 -1
  109. package/patternfly-charts.scss +319 -319
  110. package/patternfly-no-globals.css +100 -129
  111. package/patternfly-no-globals.scss +2 -2
  112. package/patternfly-theme-dark-unversioned.css +124 -153
  113. package/patternfly-theme-dark-unversioned.scss +1 -1
  114. package/patternfly.css +102 -131
  115. package/patternfly.min.css +1 -1
  116. package/patternfly.min.css.map +1 -1
  117. package/sass-utilities/_init.scss +3 -3
  118. package/sass-utilities/colors.scss +81 -81
  119. package/sass-utilities/functions.scss +2 -2
  120. package/sass-utilities/mixins.scss +1 -1
  121. package/sass-utilities/scss-variables.scss +149 -149
  122. package/sass-utilities/themes/dark/colors.scss +15 -15
  123. package/sass-utilities/themes/dark/scss-variables.scss +74 -74
  124. package/themes/dark/_patternfly-charts-theme-dark.scss +25 -25
  125. package/base/_themes.scss +0 -43
  126. package/base/patternfly-themes.css +0 -82
  127. package/base/patternfly-themes.scss +0 -2
  128. package/base/themes/dark/_globals.scss +0 -5
package/docs/utilities/Text/examples/Text.md CHANGED
@@ -29,7 +29,6 @@ section: utility-classes
29
29
  ### Font weight
30
30
 
31
31
  ```html
32
- <div class="pf-v6-u-font-weight-light">Light</div>
33
32
  <div class="pf-v6-u-font-weight-normal">Normal</div>
34
33
  <div class="pf-v6-u-font-weight-bold">Bold</div>
35
34
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.114",
4
+ "version": "6.0.0-alpha.116",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -1,30 +1,3 @@
1
- .pf-t-light {
2
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
3
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
4
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
5
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
6
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
7
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
8
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
9
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
10
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-t-dark {
14
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
15
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
16
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
17
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
18
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
19
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
20
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
21
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
22
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
23
- }
24
- .pf-t-dark .pf-v6-c-button {
25
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
26
- }
27
-
28
1
  :where(:root) {
29
2
  --pf-v6-global--palette--black-100: #fafafa;
30
3
  --pf-v6-global--palette--black-150: #f5f5f5;
@@ -186,12 +159,12 @@
186
159
  --pf-v6-global--spacer--form-element: 0.375rem;
187
160
  --pf-v6-global--gutter: 1rem;
188
161
  --pf-v6-global--gutter--md: 1.5rem;
189
- --pf-v6-global--ZIndex--xs: 100;
190
- --pf-v6-global--ZIndex--sm: 200;
191
- --pf-v6-global--ZIndex--md: 300;
192
- --pf-v6-global--ZIndex--lg: 400;
193
- --pf-v6-global--ZIndex--xl: 500;
194
- --pf-v6-global--ZIndex--2xl: 600;
162
+ --pf-t--global--z-index--xs: 100;
163
+ --pf-t--global--z-index--sm: 200;
164
+ --pf-t--global--z-index--md: 300;
165
+ --pf-t--global--z-index--lg: 400;
166
+ --pf-t--global--z-index--xl: 500;
167
+ --pf-t--global--z-index--2xl: 600;
195
168
  --pf-v6-global--breakpoint--xs: 0;
196
169
  --pf-v6-global--breakpoint--sm: 576px;
197
170
  --pf-v6-global--breakpoint--md: 768px;
@@ -252,9 +225,9 @@
252
225
  --pf-v6-global--LineHeight--sm: 1.3;
253
226
  --pf-v6-global--LineHeight--md: 1.5;
254
227
  --pf-v6-global--ListStyle: disc outside;
255
- --pf-v6-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
256
- --pf-v6-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
257
- --pf-v6-global--TransitionDuration: 250ms;
228
+ --pf-t--global--transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
229
+ --pf-t--global--transition--timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
230
+ --pf-t--global--transitionDuration: 250ms;
258
231
  --pf-v6-global--arrow--width: 0.9375rem;
259
232
  --pf-v6-global--arrow--width-lg: 1.5625rem;
260
233
  --pf-v6-global--target-size--MinWidth: 44px;
@@ -396,6 +369,10 @@ html .ws-preview {
396
369
  var(--pf-t--global--box-shadow--blur--lg)
397
370
  var(--pf-t--global--box-shadow--spread--lg)
398
371
  var(--pf-t--global--box-shadow--color--lg);
372
+ --pf-t--global--transition: all 250ms cubic-bezier(.42, 0, .58, 1);
373
+ --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
374
+ --pf-t--global--transition--duration: 250ms;
375
+ --pf-t--global--list-style: disc outside;
399
376
  }
400
377
 
401
378
  :root {
@@ -493,12 +470,12 @@ html .ws-preview {
493
470
  --pf-t--global--box-shadow--X--300: -1px;
494
471
  --pf-t--global--box-shadow--X--200: -4px;
495
472
  --pf-t--global--box-shadow--X--100: -8px;
496
- --pf-t--global--Zindex--600: 600;
497
- --pf-t--global--Zindex--500: 500;
498
- --pf-t--global--Zindex--400: 400;
499
- --pf-t--global--Zindex--300: 300;
500
- --pf-t--global--Zindex--200: 200;
501
- --pf-t--global--Zindex--100: 100;
473
+ --pf-t--global--z-index--600: 600;
474
+ --pf-t--global--z-index--500: 500;
475
+ --pf-t--global--z-index--400: 400;
476
+ --pf-t--global--z-index--300: 300;
477
+ --pf-t--global--z-index--200: 200;
478
+ --pf-t--global--z-index--100: 100;
502
479
  --pf-t--global--font--size--800: 36px;
503
480
  --pf-t--global--font--size--700: 28px;
504
481
  --pf-t--global--font--size--600: 22px;
@@ -632,12 +609,12 @@ html .ws-preview {
632
609
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
633
610
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
634
611
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
635
- --pf-t--global--Zindex--2xl: 600;
636
- --pf-t--global--Zindex--xl: 500;
637
- --pf-t--global--Zindex--lg: 400;
638
- --pf-t--global--Zindex--md: 300;
639
- --pf-t--global--Zindex--sm: 200;
640
- --pf-t--global--Zindex--xs: 100;
612
+ --pf-t--global--z-index--2xl: 600;
613
+ --pf-t--global--z-index--xl: 500;
614
+ --pf-t--global--z-index--lg: 400;
615
+ --pf-t--global--z-index--md: 300;
616
+ --pf-t--global--z-index--sm: 200;
617
+ --pf-t--global--z-index--xs: 100;
641
618
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
642
619
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
643
620
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
@@ -1522,39 +1499,6 @@ html .ws-preview {
1522
1499
  scale: -1 1;
1523
1500
  }
1524
1501
 
1525
- :where(.pf-theme-dark) {
1526
- color-scheme: dark;
1527
- }
1528
-
1529
- .pf-t-dark.pf-m-transparent {
1530
- background-color: transparent;
1531
- }
1532
- .pf-t-dark.pf-m-transparent-100 {
1533
- background-color: rgba(3, 3, 3, 0.42);
1534
- }
1535
- .pf-t-dark.pf-m-transparent-200 {
1536
- background-color: rgba(3, 3, 3, 0.6);
1537
- }
1538
- .pf-t-dark.pf-m-opaque-100 {
1539
- background-color: #3c3f42;
1540
- }
1541
- .pf-t-dark.pf-m-opaque-200 {
1542
- background-color: #151515;
1543
- }
1544
-
1545
- .pf-t-light.pf-m-transparent {
1546
- background-color: transparent;
1547
- }
1548
- .pf-t-light.pf-m-opaque-100 {
1549
- background-color: #fff;
1550
- }
1551
- .pf-t-light.pf-m-opaque-200 {
1552
- background-color: #fafafa;
1553
- }
1554
- .pf-t-light.pf-m-opaque-300 {
1555
- background-color: #f0f0f0;
1556
- }
1557
-
1558
1502
  * .fa,
1559
1503
  * .fas,
1560
1504
  * .far,
package/patternfly-base-no-globals-theme-dark-unversioned.scss CHANGED
@@ -1,8 +1,8 @@
1
1
  // This config will generate dark them updates based on 'pf-theme-dark'
2
2
  // which can be changed by updating $pf-global--theme--namespace, $pf-global--theme--version, $pf-v6--theme-dark--class
3
3
  // $pf-global--theme-dark--placeholder--class in _init.scss
4
- $pf-v5-global--enable-reset: false;
5
- $pf-v5-global--enable-normalize: false;
4
+ $pf-v6-global--enable-reset: false;
5
+ $pf-v6-global--enable-normalize: false;
6
6
 
7
7
  // stylelint-disable scss/dollar-variable-pattern
8
8
  $pf-global--theme--version: '';
package/patternfly-base-no-globals.css CHANGED
@@ -1,30 +1,3 @@
1
- .pf-v6-t-light {
2
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
3
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
4
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
5
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
6
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
7
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
8
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
9
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
10
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v6-t-dark {
14
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
15
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
16
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
17
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
18
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
19
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
20
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
21
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
22
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
23
- }
24
- .pf-v6-t-dark .pf-v6-c-button {
25
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
26
- }
27
-
28
1
  :where(:root) {
29
2
  --pf-v6-global--palette--black-100: #fafafa;
30
3
  --pf-v6-global--palette--black-150: #f5f5f5;
@@ -186,12 +159,12 @@
186
159
  --pf-v6-global--spacer--form-element: 0.375rem;
187
160
  --pf-v6-global--gutter: 1rem;
188
161
  --pf-v6-global--gutter--md: 1.5rem;
189
- --pf-v6-global--ZIndex--xs: 100;
190
- --pf-v6-global--ZIndex--sm: 200;
191
- --pf-v6-global--ZIndex--md: 300;
192
- --pf-v6-global--ZIndex--lg: 400;
193
- --pf-v6-global--ZIndex--xl: 500;
194
- --pf-v6-global--ZIndex--2xl: 600;
162
+ --pf-t--global--z-index--xs: 100;
163
+ --pf-t--global--z-index--sm: 200;
164
+ --pf-t--global--z-index--md: 300;
165
+ --pf-t--global--z-index--lg: 400;
166
+ --pf-t--global--z-index--xl: 500;
167
+ --pf-t--global--z-index--2xl: 600;
195
168
  --pf-v6-global--breakpoint--xs: 0;
196
169
  --pf-v6-global--breakpoint--sm: 576px;
197
170
  --pf-v6-global--breakpoint--md: 768px;
@@ -252,9 +225,9 @@
252
225
  --pf-v6-global--LineHeight--sm: 1.3;
253
226
  --pf-v6-global--LineHeight--md: 1.5;
254
227
  --pf-v6-global--ListStyle: disc outside;
255
- --pf-v6-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
256
- --pf-v6-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
257
- --pf-v6-global--TransitionDuration: 250ms;
228
+ --pf-t--global--transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
229
+ --pf-t--global--transition--timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
230
+ --pf-t--global--transitionDuration: 250ms;
258
231
  --pf-v6-global--arrow--width: 0.9375rem;
259
232
  --pf-v6-global--arrow--width-lg: 1.5625rem;
260
233
  --pf-v6-global--target-size--MinWidth: 44px;
@@ -396,6 +369,10 @@ html .ws-preview {
396
369
  var(--pf-t--global--box-shadow--blur--lg)
397
370
  var(--pf-t--global--box-shadow--spread--lg)
398
371
  var(--pf-t--global--box-shadow--color--lg);
372
+ --pf-t--global--transition: all 250ms cubic-bezier(.42, 0, .58, 1);
373
+ --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
374
+ --pf-t--global--transition--duration: 250ms;
375
+ --pf-t--global--list-style: disc outside;
399
376
  }
400
377
 
401
378
  :root {
@@ -493,12 +470,12 @@ html .ws-preview {
493
470
  --pf-t--global--box-shadow--X--300: -1px;
494
471
  --pf-t--global--box-shadow--X--200: -4px;
495
472
  --pf-t--global--box-shadow--X--100: -8px;
496
- --pf-t--global--Zindex--600: 600;
497
- --pf-t--global--Zindex--500: 500;
498
- --pf-t--global--Zindex--400: 400;
499
- --pf-t--global--Zindex--300: 300;
500
- --pf-t--global--Zindex--200: 200;
501
- --pf-t--global--Zindex--100: 100;
473
+ --pf-t--global--z-index--600: 600;
474
+ --pf-t--global--z-index--500: 500;
475
+ --pf-t--global--z-index--400: 400;
476
+ --pf-t--global--z-index--300: 300;
477
+ --pf-t--global--z-index--200: 200;
478
+ --pf-t--global--z-index--100: 100;
502
479
  --pf-t--global--font--size--800: 36px;
503
480
  --pf-t--global--font--size--700: 28px;
504
481
  --pf-t--global--font--size--600: 22px;
@@ -632,12 +609,12 @@ html .ws-preview {
632
609
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
633
610
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
634
611
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
635
- --pf-t--global--Zindex--2xl: 600;
636
- --pf-t--global--Zindex--xl: 500;
637
- --pf-t--global--Zindex--lg: 400;
638
- --pf-t--global--Zindex--md: 300;
639
- --pf-t--global--Zindex--sm: 200;
640
- --pf-t--global--Zindex--xs: 100;
612
+ --pf-t--global--z-index--2xl: 600;
613
+ --pf-t--global--z-index--xl: 500;
614
+ --pf-t--global--z-index--lg: 400;
615
+ --pf-t--global--z-index--md: 300;
616
+ --pf-t--global--z-index--sm: 200;
617
+ --pf-t--global--z-index--xs: 100;
641
618
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
642
619
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
643
620
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
@@ -1522,39 +1499,6 @@ html .ws-preview {
1522
1499
  scale: -1 1;
1523
1500
  }
1524
1501
 
1525
- :where(.pf-v6-theme-dark) {
1526
- color-scheme: dark;
1527
- }
1528
-
1529
- .pf-v6-t-dark.pf-m-transparent {
1530
- background-color: transparent;
1531
- }
1532
- .pf-v6-t-dark.pf-m-transparent-100 {
1533
- background-color: rgba(3, 3, 3, 0.42);
1534
- }
1535
- .pf-v6-t-dark.pf-m-transparent-200 {
1536
- background-color: rgba(3, 3, 3, 0.6);
1537
- }
1538
- .pf-v6-t-dark.pf-m-opaque-100 {
1539
- background-color: #3c3f42;
1540
- }
1541
- .pf-v6-t-dark.pf-m-opaque-200 {
1542
- background-color: #151515;
1543
- }
1544
-
1545
- .pf-v6-t-light.pf-m-transparent {
1546
- background-color: transparent;
1547
- }
1548
- .pf-v6-t-light.pf-m-opaque-100 {
1549
- background-color: #fff;
1550
- }
1551
- .pf-v6-t-light.pf-m-opaque-200 {
1552
- background-color: #fafafa;
1553
- }
1554
- .pf-v6-t-light.pf-m-opaque-300 {
1555
- background-color: #f0f0f0;
1556
- }
1557
-
1558
1502
  * .fa,
1559
1503
  * .fas,
1560
1504
  * .far,
package/patternfly-base-no-globals.scss CHANGED
@@ -1,4 +1,4 @@
1
- $pf-v5-global--enable-reset: false;
2
- $pf-v5-global--enable-normalize: false;
1
+ $pf-v6-global--enable-reset: false;
2
+ $pf-v6-global--enable-normalize: false;
3
3
 
4
4
  @import "./patternfly-base";
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -1,30 +1,3 @@
1
- .pf-t-light {
2
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
3
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
4
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
5
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
6
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
7
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
8
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
9
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
10
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-t-dark {
14
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
15
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
16
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
17
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
18
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
19
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
20
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
21
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
22
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
23
- }
24
- .pf-t-dark .pf-v6-c-button {
25
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
26
- }
27
-
28
1
  :where(:root) {
29
2
  --pf-v6-global--palette--black-100: #fafafa;
30
3
  --pf-v6-global--palette--black-150: #f5f5f5;
@@ -186,12 +159,12 @@
186
159
  --pf-v6-global--spacer--form-element: 0.375rem;
187
160
  --pf-v6-global--gutter: 1rem;
188
161
  --pf-v6-global--gutter--md: 1.5rem;
189
- --pf-v6-global--ZIndex--xs: 100;
190
- --pf-v6-global--ZIndex--sm: 200;
191
- --pf-v6-global--ZIndex--md: 300;
192
- --pf-v6-global--ZIndex--lg: 400;
193
- --pf-v6-global--ZIndex--xl: 500;
194
- --pf-v6-global--ZIndex--2xl: 600;
162
+ --pf-t--global--z-index--xs: 100;
163
+ --pf-t--global--z-index--sm: 200;
164
+ --pf-t--global--z-index--md: 300;
165
+ --pf-t--global--z-index--lg: 400;
166
+ --pf-t--global--z-index--xl: 500;
167
+ --pf-t--global--z-index--2xl: 600;
195
168
  --pf-v6-global--breakpoint--xs: 0;
196
169
  --pf-v6-global--breakpoint--sm: 576px;
197
170
  --pf-v6-global--breakpoint--md: 768px;
@@ -252,9 +225,9 @@
252
225
  --pf-v6-global--LineHeight--sm: 1.3;
253
226
  --pf-v6-global--LineHeight--md: 1.5;
254
227
  --pf-v6-global--ListStyle: disc outside;
255
- --pf-v6-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
256
- --pf-v6-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
257
- --pf-v6-global--TransitionDuration: 250ms;
228
+ --pf-t--global--transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
229
+ --pf-t--global--transition--timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
230
+ --pf-t--global--transitionDuration: 250ms;
258
231
  --pf-v6-global--arrow--width: 0.9375rem;
259
232
  --pf-v6-global--arrow--width-lg: 1.5625rem;
260
233
  --pf-v6-global--target-size--MinWidth: 44px;
@@ -396,6 +369,10 @@ html .ws-preview {
396
369
  var(--pf-t--global--box-shadow--blur--lg)
397
370
  var(--pf-t--global--box-shadow--spread--lg)
398
371
  var(--pf-t--global--box-shadow--color--lg);
372
+ --pf-t--global--transition: all 250ms cubic-bezier(.42, 0, .58, 1);
373
+ --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
374
+ --pf-t--global--transition--duration: 250ms;
375
+ --pf-t--global--list-style: disc outside;
399
376
  }
400
377
 
401
378
  :root {
@@ -493,12 +470,12 @@ html .ws-preview {
493
470
  --pf-t--global--box-shadow--X--300: -1px;
494
471
  --pf-t--global--box-shadow--X--200: -4px;
495
472
  --pf-t--global--box-shadow--X--100: -8px;
496
- --pf-t--global--Zindex--600: 600;
497
- --pf-t--global--Zindex--500: 500;
498
- --pf-t--global--Zindex--400: 400;
499
- --pf-t--global--Zindex--300: 300;
500
- --pf-t--global--Zindex--200: 200;
501
- --pf-t--global--Zindex--100: 100;
473
+ --pf-t--global--z-index--600: 600;
474
+ --pf-t--global--z-index--500: 500;
475
+ --pf-t--global--z-index--400: 400;
476
+ --pf-t--global--z-index--300: 300;
477
+ --pf-t--global--z-index--200: 200;
478
+ --pf-t--global--z-index--100: 100;
502
479
  --pf-t--global--font--size--800: 36px;
503
480
  --pf-t--global--font--size--700: 28px;
504
481
  --pf-t--global--font--size--600: 22px;
@@ -632,12 +609,12 @@ html .ws-preview {
632
609
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
633
610
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
634
611
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
635
- --pf-t--global--Zindex--2xl: 600;
636
- --pf-t--global--Zindex--xl: 500;
637
- --pf-t--global--Zindex--lg: 400;
638
- --pf-t--global--Zindex--md: 300;
639
- --pf-t--global--Zindex--sm: 200;
640
- --pf-t--global--Zindex--xs: 100;
612
+ --pf-t--global--z-index--2xl: 600;
613
+ --pf-t--global--z-index--xl: 500;
614
+ --pf-t--global--z-index--lg: 400;
615
+ --pf-t--global--z-index--md: 300;
616
+ --pf-t--global--z-index--sm: 200;
617
+ --pf-t--global--z-index--xs: 100;
641
618
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
642
619
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
643
620
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
@@ -1630,8 +1607,8 @@ pre) {
1630
1607
  }
1631
1608
 
1632
1609
  :where(a:hover) {
1633
- --pf-v6-global--link--Color: var(--pf-t--global--text--color--link--hover);
1634
- --pf-v6-global--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
1610
+ color: var(--pf-t--global--text--color--link--hover);
1611
+ text-decoration: var(--pf-t--global--link--text-decoration--hover);
1635
1612
  }
1636
1613
 
1637
1614
  :where(a,
@@ -1639,39 +1616,6 @@ button) {
1639
1616
  cursor: pointer;
1640
1617
  }
1641
1618
 
1642
- :where(.pf-theme-dark) {
1643
- color-scheme: dark;
1644
- }
1645
-
1646
- .pf-t-dark.pf-m-transparent {
1647
- background-color: transparent;
1648
- }
1649
- .pf-t-dark.pf-m-transparent-100 {
1650
- background-color: rgba(3, 3, 3, 0.42);
1651
- }
1652
- .pf-t-dark.pf-m-transparent-200 {
1653
- background-color: rgba(3, 3, 3, 0.6);
1654
- }
1655
- .pf-t-dark.pf-m-opaque-100 {
1656
- background-color: #3c3f42;
1657
- }
1658
- .pf-t-dark.pf-m-opaque-200 {
1659
- background-color: #151515;
1660
- }
1661
-
1662
- .pf-t-light.pf-m-transparent {
1663
- background-color: transparent;
1664
- }
1665
- .pf-t-light.pf-m-opaque-100 {
1666
- background-color: #fff;
1667
- }
1668
- .pf-t-light.pf-m-opaque-200 {
1669
- background-color: #fafafa;
1670
- }
1671
- .pf-t-light.pf-m-opaque-300 {
1672
- background-color: #f0f0f0;
1673
- }
1674
-
1675
1619
  * .fa,
1676
1620
  * .fas,
1677
1621
  * .far,
package/patternfly-base.css CHANGED
@@ -1,30 +1,3 @@
1
- .pf-v6-t-light {
2
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
3
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
4
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
5
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
6
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
7
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
8
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
9
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
10
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v6-t-dark {
14
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
15
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
16
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
17
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
18
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
19
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
20
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
21
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
22
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
23
- }
24
- .pf-v6-t-dark .pf-v6-c-button {
25
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
26
- }
27
-
28
1
  :where(:root) {
29
2
  --pf-v6-global--palette--black-100: #fafafa;
30
3
  --pf-v6-global--palette--black-150: #f5f5f5;
@@ -186,12 +159,12 @@
186
159
  --pf-v6-global--spacer--form-element: 0.375rem;
187
160
  --pf-v6-global--gutter: 1rem;
188
161
  --pf-v6-global--gutter--md: 1.5rem;
189
- --pf-v6-global--ZIndex--xs: 100;
190
- --pf-v6-global--ZIndex--sm: 200;
191
- --pf-v6-global--ZIndex--md: 300;
192
- --pf-v6-global--ZIndex--lg: 400;
193
- --pf-v6-global--ZIndex--xl: 500;
194
- --pf-v6-global--ZIndex--2xl: 600;
162
+ --pf-t--global--z-index--xs: 100;
163
+ --pf-t--global--z-index--sm: 200;
164
+ --pf-t--global--z-index--md: 300;
165
+ --pf-t--global--z-index--lg: 400;
166
+ --pf-t--global--z-index--xl: 500;
167
+ --pf-t--global--z-index--2xl: 600;
195
168
  --pf-v6-global--breakpoint--xs: 0;
196
169
  --pf-v6-global--breakpoint--sm: 576px;
197
170
  --pf-v6-global--breakpoint--md: 768px;
@@ -252,9 +225,9 @@
252
225
  --pf-v6-global--LineHeight--sm: 1.3;
253
226
  --pf-v6-global--LineHeight--md: 1.5;
254
227
  --pf-v6-global--ListStyle: disc outside;
255
- --pf-v6-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
256
- --pf-v6-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
257
- --pf-v6-global--TransitionDuration: 250ms;
228
+ --pf-t--global--transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
229
+ --pf-t--global--transition--timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
230
+ --pf-t--global--transitionDuration: 250ms;
258
231
  --pf-v6-global--arrow--width: 0.9375rem;
259
232
  --pf-v6-global--arrow--width-lg: 1.5625rem;
260
233
  --pf-v6-global--target-size--MinWidth: 44px;
@@ -396,6 +369,10 @@ html .ws-preview {
396
369
  var(--pf-t--global--box-shadow--blur--lg)
397
370
  var(--pf-t--global--box-shadow--spread--lg)
398
371
  var(--pf-t--global--box-shadow--color--lg);
372
+ --pf-t--global--transition: all 250ms cubic-bezier(.42, 0, .58, 1);
373
+ --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
374
+ --pf-t--global--transition--duration: 250ms;
375
+ --pf-t--global--list-style: disc outside;
399
376
  }
400
377
 
401
378
  :root {
@@ -493,12 +470,12 @@ html .ws-preview {
493
470
  --pf-t--global--box-shadow--X--300: -1px;
494
471
  --pf-t--global--box-shadow--X--200: -4px;
495
472
  --pf-t--global--box-shadow--X--100: -8px;
496
- --pf-t--global--Zindex--600: 600;
497
- --pf-t--global--Zindex--500: 500;
498
- --pf-t--global--Zindex--400: 400;
499
- --pf-t--global--Zindex--300: 300;
500
- --pf-t--global--Zindex--200: 200;
501
- --pf-t--global--Zindex--100: 100;
473
+ --pf-t--global--z-index--600: 600;
474
+ --pf-t--global--z-index--500: 500;
475
+ --pf-t--global--z-index--400: 400;
476
+ --pf-t--global--z-index--300: 300;
477
+ --pf-t--global--z-index--200: 200;
478
+ --pf-t--global--z-index--100: 100;
502
479
  --pf-t--global--font--size--800: 36px;
503
480
  --pf-t--global--font--size--700: 28px;
504
481
  --pf-t--global--font--size--600: 22px;
@@ -632,12 +609,12 @@ html .ws-preview {
632
609
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
633
610
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
634
611
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
635
- --pf-t--global--Zindex--2xl: 600;
636
- --pf-t--global--Zindex--xl: 500;
637
- --pf-t--global--Zindex--lg: 400;
638
- --pf-t--global--Zindex--md: 300;
639
- --pf-t--global--Zindex--sm: 200;
640
- --pf-t--global--Zindex--xs: 100;
612
+ --pf-t--global--z-index--2xl: 600;
613
+ --pf-t--global--z-index--xl: 500;
614
+ --pf-t--global--z-index--lg: 400;
615
+ --pf-t--global--z-index--md: 300;
616
+ --pf-t--global--z-index--sm: 200;
617
+ --pf-t--global--z-index--xs: 100;
641
618
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
642
619
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
643
620
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
@@ -1630,8 +1607,8 @@ pre) {
1630
1607
  }
1631
1608
 
1632
1609
  :where(a:hover) {
1633
- --pf-v6-global--link--Color: var(--pf-t--global--text--color--link--hover);
1634
- --pf-v6-global--link--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
1610
+ color: var(--pf-t--global--text--color--link--hover);
1611
+ text-decoration: var(--pf-t--global--link--text-decoration--hover);
1635
1612
  }
1636
1613
 
1637
1614
  :where(a,
@@ -1639,39 +1616,6 @@ button) {
1639
1616
  cursor: pointer;
1640
1617
  }
1641
1618
 
1642
- :where(.pf-v6-theme-dark) {
1643
- color-scheme: dark;
1644
- }
1645
-
1646
- .pf-v6-t-dark.pf-m-transparent {
1647
- background-color: transparent;
1648
- }
1649
- .pf-v6-t-dark.pf-m-transparent-100 {
1650
- background-color: rgba(3, 3, 3, 0.42);
1651
- }
1652
- .pf-v6-t-dark.pf-m-transparent-200 {
1653
- background-color: rgba(3, 3, 3, 0.6);
1654
- }
1655
- .pf-v6-t-dark.pf-m-opaque-100 {
1656
- background-color: #3c3f42;
1657
- }
1658
- .pf-v6-t-dark.pf-m-opaque-200 {
1659
- background-color: #151515;
1660
- }
1661
-
1662
- .pf-v6-t-light.pf-m-transparent {
1663
- background-color: transparent;
1664
- }
1665
- .pf-v6-t-light.pf-m-opaque-100 {
1666
- background-color: #fff;
1667
- }
1668
- .pf-v6-t-light.pf-m-opaque-200 {
1669
- background-color: #fafafa;
1670
- }
1671
- .pf-v6-t-light.pf-m-opaque-300 {
1672
- background-color: #f0f0f0;
1673
- }
1674
-
1675
1619
  * .fa,
1676
1620
  * .fas,
1677
1621
  * .far,
package/patternfly-base.scss CHANGED
@@ -2,5 +2,4 @@
2
2
  @import "base/variables";
3
3
  @import "base/fonts";
4
4
  @import "base/base";
5
- @import "base/themes";
6
5
  @import "base/icons";