@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/sass-utilities/themes/dark/colors.scss CHANGED
@@ -1,16 +1,16 @@
1
1
  // color palette changes
2
- $pf-v5-color-black-50: #e0e0e0;
3
- $pf-v5-color-black-100: #c6c7c8;
4
- $pf-v5-color-black-200: #aaabac;
5
- $pf-v5-color-black-300: #868789;
6
- $pf-v5-color-black-400: #57585a;
7
- $pf-v5-color-black-500: #444548;
8
- $pf-v5-color-black-600: #36373a;
9
- $pf-v5-color-black-700: #26292d;
10
- $pf-v5-color-black-800: #1b1d21;
11
- $pf-v5-color-black-850: #212427;
12
- $pf-v5-color-black-900: #0f1214;
13
- $pf-v5-color-black-1000: #030303;
14
- $pf-v5-color-red-9999: #fe5142;
15
- $pf-v5-color-red-8888: #ff7468;
16
- $pf-v5-color-blue-300: #1fa7f8;
2
+ $pf-v6-color-black-50: #e0e0e0;
3
+ $pf-v6-color-black-100: #c6c7c8;
4
+ $pf-v6-color-black-200: #aaabac;
5
+ $pf-v6-color-black-300: #868789;
6
+ $pf-v6-color-black-400: #57585a;
7
+ $pf-v6-color-black-500: #444548;
8
+ $pf-v6-color-black-600: #36373a;
9
+ $pf-v6-color-black-700: #26292d;
10
+ $pf-v6-color-black-800: #1b1d21;
11
+ $pf-v6-color-black-850: #212427;
12
+ $pf-v6-color-black-900: #0f1214;
13
+ $pf-v6-color-black-1000: #030303;
14
+ $pf-v6-color-red-9999: #fe5142;
15
+ $pf-v6-color-red-8888: #ff7468;
16
+ $pf-v6-color-blue-300: #1fa7f8;
package/sass-utilities/themes/dark/scss-variables.scss CHANGED
@@ -1,92 +1,92 @@
1
1
  // background colors
2
- $pf-v5-global--BackgroundColor--100: $pf-v5-color-black-800; // primary background color
3
- $pf-v5-global--BackgroundColor--150: $pf-v5-color-black-850; // in-between special use case background color
4
- $pf-v5-global--BackgroundColor--200: $pf-v5-color-black-900; // secondary background color
5
- $pf-v5-global--BackgroundColor--300: $pf-v5-color-black-700; // floats on top of other elements
6
- $pf-v5-global--BackgroundColor--400: $pf-v5-color-black-600; // form control & item hover on --#{$pf-global}--BackgroundColor--300
7
- $pf-v5-global--BorderColor--100: $pf-v5-color-black-500; // primary border color
8
- $pf-v5-global--BorderColor--200: $pf-v5-color-black-500; // secondary border color
9
- $pf-v5-global--BorderColor--300: $pf-v5-color-black-400;
10
- $pf-v5-global--BorderColor--400: $pf-v5-color-black-200; // form control bottom border
2
+ $pf-v6-global--BackgroundColor--100: $pf-v6-color-black-800; // primary background color
3
+ $pf-v6-global--BackgroundColor--150: $pf-v6-color-black-850; // in-between special use case background color
4
+ $pf-v6-global--BackgroundColor--200: $pf-v6-color-black-900; // secondary background color
5
+ $pf-v6-global--BackgroundColor--300: $pf-v6-color-black-700; // floats on top of other elements
6
+ $pf-v6-global--BackgroundColor--400: $pf-v6-color-black-600; // form control & item hover on background-300
7
+ $pf-v6-global--BorderColor--100: $pf-v6-color-black-500; // primary border color
8
+ $pf-v6-global--BorderColor--200: $pf-v6-color-black-500; // secondary border color
9
+ $pf-v6-global--BorderColor--300: $pf-v6-color-black-400;
10
+ $pf-v6-global--BorderColor--400: $pf-v6-color-black-200; // form control bottom border
11
11
 
12
12
  // text colors
13
- $pf-v5-global--Color--100: $pf-v5-color-black-50; // primary text color
14
- $pf-v5-global--Color--200: $pf-v5-color-black-200; // secondary text color
15
- $pf-v5-global--active-color--100: $pf-v5-color-blue-300;
16
- $pf-v5-global--primary-color--100: $pf-v5-color-blue-300; // primary blue against dark background - background, text, etc
17
- $pf-v5-global--primary-color--300: $pf-v5-color-blue-400; // primary blue with white text on top for contrast
18
- $pf-v5-global--primary-color--400: $pf-v5-color-white; // text color on top of primary--300
19
- $pf-v5-global--custom-color--200: $pf-v5-color-cyan-200;
20
- $pf-v5-global--success-color--100: $pf-v5-color-green-400;
21
- $pf-v5-global--warning-color--100: $pf-v5-color-gold-400;
22
- $pf-v5-global--warning-color--200: $pf-v5-color-gold-300;
23
- $pf-v5-global--danger-color--100: $pf-v5-color-red-9999;
24
- $pf-v5-global--danger-color--200: $pf-v5-color-red-8888;
25
- $pf-v5-global--link--Color: $pf-v5-color-blue-300;
26
- $pf-v5-global--link--Color--hover: $pf-v5-color-blue-200;
27
- $pf-v5-global--link--Color--visited: $pf-v5-color-purple-300;
28
- $pf-v5-global--disabled-color--100: $pf-v5-color-black-300; // disabled text on regular background color
29
- $pf-v5-global--disabled-color--200: $pf-v5-color-black-500; // disabled background color
30
- $pf-v5-global--disabled-color--300: $pf-v5-color-black-200; // disabled text on disabled or floating background color - except form elements
13
+ $pf-v6-global--Color--100: $pf-v6-color-black-50; // primary text color
14
+ $pf-v6-global--Color--200: $pf-v6-color-black-200; // secondary text color
15
+ $pf-v6-global--active-color--100: $pf-v6-color-blue-300;
16
+ $pf-v6-global--primary-color--100: $pf-v6-color-blue-300; // primary blue against dark background - background, text, etc
17
+ $pf-v6-global--primary-color--300: $pf-v6-color-blue-400; // primary blue with white text on top for contrast
18
+ $pf-v6-global--primary-color--400: $pf-v6-color-white; // text color on top of primary--300
19
+ $pf-v6-global--custom-color--200: $pf-v6-color-cyan-200;
20
+ $pf-v6-global--success-color--100: $pf-v6-color-green-400;
21
+ $pf-v6-global--warning-color--100: $pf-v6-color-gold-400;
22
+ $pf-v6-global--warning-color--200: $pf-v6-color-gold-300;
23
+ $pf-v6-global--danger-color--100: $pf-v6-color-red-9999;
24
+ $pf-v6-global--danger-color--200: $pf-v6-color-red-8888;
25
+ $pf-v6-global--link--Color: $pf-v6-color-blue-300;
26
+ $pf-v6-global--link--Color--hover: $pf-v6-color-blue-200;
27
+ $pf-v6-global--link--Color--visited: $pf-v6-color-purple-300;
28
+ $pf-v6-global--disabled-color--100: $pf-v6-color-black-300; // disabled text on regular background color
29
+ $pf-v6-global--disabled-color--200: $pf-v6-color-black-500; // disabled background color
30
+ $pf-v6-global--disabled-color--300: $pf-v6-color-black-200; // disabled text on disabled or floating background color - except form elements
31
31
 
32
32
  // icons
33
- $pf-v5-global--icon--Color--light: $pf-v5-color-black-200;
34
- $pf-v5-global--icon--Color--dark: $pf-v5-color-black-50;
33
+ $pf-v6-global--icon--Color--light: $pf-v6-color-black-200;
34
+ $pf-v6-global--icon--Color--dark: $pf-v6-color-black-50;
35
35
 
36
36
  // theme color resets
37
- $pf-v5-global--Color--dark-100: $pf-v5-global--Color--100;
38
- $pf-v5-global--Color--dark-200: $pf-v5-global--Color--200;
39
- $pf-v5-global--Color--light-100: $pf-v5-global--Color--100;
40
- $pf-v5-global--Color--light-200: $pf-v5-global--Color--200;
41
- $pf-v5-global--Color--light-300: $pf-v5-global--Color--300;
42
- $pf-v5-global--BorderColor--dark-100: $pf-v5-global--BorderColor--100;
43
- $pf-v5-global--BorderColor--light-100: $pf-v5-global--BorderColor--100;
44
- $pf-v5-global--primary-color--light-100: $pf-v5-global--primary-color--100;
45
- $pf-v5-global--primary-color--dark-100: $pf-v5-global--primary-color--100;
46
- $pf-v5-global--link--Color--light: $pf-v5-global--link--Color;
47
- $pf-v5-global--link--Color--light--hover: $pf-v5-global--link--Color--hover;
48
- $pf-v5-global--link--Color--dark: $pf-v5-global--link--Color;
49
- $pf-v5-global--link--Color--dark--hover: $pf-v5-global--link--Color--hover;
50
- $pf-v5-global--BackgroundColor--light-100: $pf-v5-global--BackgroundColor--100;
51
- $pf-v5-global--BackgroundColor--light-200: $pf-v5-global--BackgroundColor--200;
52
- $pf-v5-global--BackgroundColor--light-300: $pf-v5-global--BackgroundColor--300;
53
- $pf-v5-global--BackgroundColor--dark-100: $pf-v5-global--BackgroundColor--100;
54
- $pf-v5-global--BackgroundColor--dark-200: $pf-v5-global--BackgroundColor--200;
55
- $pf-v5-global--BackgroundColor--dark-300: $pf-v5-global--BackgroundColor--300;
56
- $pf-v5-global--BackgroundColor--dark-400: $pf-v5-global--BackgroundColor--400;
57
- $pf-v5-global--icon--Color--light--dark: $pf-v5-global--icon--Color--light;
58
- $pf-v5-global--icon--Color--dark--dark: $pf-v5-global--icon--Color--dark;
59
- $pf-v5-global--icon--Color--light--light: $pf-v5-global--icon--Color--light;
60
- $pf-v5-global--icon--Color--dark--light: $pf-v5-global--icon--Color--dark;
37
+ $pf-v6-global--Color--dark-100: $pf-v6-global--Color--100;
38
+ $pf-v6-global--Color--dark-200: $pf-v6-global--Color--200;
39
+ $pf-v6-global--Color--light-100: $pf-v6-global--Color--100;
40
+ $pf-v6-global--Color--light-200: $pf-v6-global--Color--200;
41
+ $pf-v6-global--Color--light-300: $pf-v6-global--Color--300;
42
+ $pf-v6-global--BorderColor--dark-100: $pf-v6-global--BorderColor--100;
43
+ $pf-v6-global--BorderColor--light-100: $pf-v6-global--BorderColor--100;
44
+ $pf-v6-global--primary-color--light-100: $pf-v6-global--primary-color--100;
45
+ $pf-v6-global--primary-color--dark-100: $pf-v6-global--primary-color--100;
46
+ $pf-v6-global--link--Color--light: $pf-v6-global--link--Color;
47
+ $pf-v6-global--link--Color--light--hover: $pf-v6-global--link--Color--hover;
48
+ $pf-v6-global--link--Color--dark: $pf-v6-global--link--Color;
49
+ $pf-v6-global--link--Color--dark--hover: $pf-v6-global--link--Color--hover;
50
+ $pf-v6-global--BackgroundColor--light-100: $pf-v6-global--BackgroundColor--100;
51
+ $pf-v6-global--BackgroundColor--light-200: $pf-v6-global--BackgroundColor--200;
52
+ $pf-v6-global--BackgroundColor--light-300: $pf-v6-global--BackgroundColor--300;
53
+ $pf-v6-global--BackgroundColor--dark-100: $pf-v6-global--BackgroundColor--100;
54
+ $pf-v6-global--BackgroundColor--dark-200: $pf-v6-global--BackgroundColor--200;
55
+ $pf-v6-global--BackgroundColor--dark-300: $pf-v6-global--BackgroundColor--300;
56
+ $pf-v6-global--BackgroundColor--dark-400: $pf-v6-global--BackgroundColor--400;
57
+ $pf-v6-global--icon--Color--light--dark: $pf-v6-global--icon--Color--light;
58
+ $pf-v6-global--icon--Color--dark--dark: $pf-v6-global--icon--Color--dark;
59
+ $pf-v6-global--icon--Color--light--light: $pf-v6-global--icon--Color--light;
60
+ $pf-v6-global--icon--Color--dark--light: $pf-v6-global--icon--Color--dark;
61
61
 
62
62
  // Shadows
63
63
  // small
64
- $pf-v5-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-v5-color-black-1000, .48), 0 0 pf-size-prem(2px) 0 rgba($pf-v5-color-black-1000, .24);
65
- $pf-v5-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .64);
66
- $pf-v5-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .64);
67
- $pf-v5-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .64);
68
- $pf-v5-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .64);
64
+ $pf-v6-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-v6-color-black-1000, .48), 0 0 pf-size-prem(2px) 0 rgba($pf-v6-color-black-1000, .24);
65
+ $pf-v6-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
66
+ $pf-v6-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
67
+ $pf-v6-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
68
+ $pf-v6-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v6-color-black-1000, .64);
69
69
 
70
70
  // medium
71
- $pf-v5-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .48), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .24);
72
- $pf-v5-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .72);
73
- $pf-v5-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .72);
74
- $pf-v5-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .72);
75
- $pf-v5-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .72);
71
+ $pf-v6-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v6-color-black-1000, .48), 0 0 pf-size-prem(4px) 0 rgba($pf-v6-color-black-1000, .24);
72
+ $pf-v6-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
73
+ $pf-v6-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
74
+ $pf-v6-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
75
+ $pf-v6-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v6-color-black-1000, .72);
76
76
 
77
77
  // large
78
- $pf-v5-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-v5-color-black-1000, .64), 0 0 pf-size-prem(6px) 0 rgba($pf-v5-color-black-1000, .32);
79
- $pf-v5-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .72);
80
- $pf-v5-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .72);
81
- $pf-v5-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .72);
82
- $pf-v5-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .72);
78
+ $pf-v6-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-v6-color-black-1000, .64), 0 0 pf-size-prem(6px) 0 rgba($pf-v6-color-black-1000, .32);
79
+ $pf-v6-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
80
+ $pf-v6-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
81
+ $pf-v6-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
82
+ $pf-v6-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .72);
83
83
 
84
84
  // x-large
85
- $pf-v5-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-v5-color-black-1000, .64), 0 0 pf-size-prem(8px) 0 rgba($pf-v5-color-black-1000, .4);
86
- $pf-v5-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .8);
87
- $pf-v5-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .8);
88
- $pf-v5-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .8);
89
- $pf-v5-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .8);
85
+ $pf-v6-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-v6-color-black-1000, .64), 0 0 pf-size-prem(8px) 0 rgba($pf-v6-color-black-1000, .4);
86
+ $pf-v6-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
87
+ $pf-v6-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
88
+ $pf-v6-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
89
+ $pf-v6-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v6-color-black-1000, .8);
90
90
 
91
91
  // inset
92
- $pf-v5-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 $pf-v5-color-black-1000;
92
+ $pf-v6-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 $pf-v6-color-black-1000;
package/themes/dark/_patternfly-charts-theme-dark.scss CHANGED
@@ -10,31 +10,31 @@
10
10
 
11
11
  & {
12
12
  // colors
13
- --#{$chart}-color-blue-100: #{$pf-v5-chart-color-blue-100};
14
- --#{$chart}-color-blue-200: #{$pf-v5-chart-color-blue-200};
15
- --#{$chart}-color-blue-300: #{$pf-v5-chart-color-blue-300};
16
- --#{$chart}-color-blue-400: #{$pf-v5-chart-color-blue-400};
17
- --#{$chart}-color-blue-500: #{$pf-v5-chart-color-blue-500};
18
- --#{$chart}-color-green-100: #{$pf-v5-chart-color-green-100};
19
- --#{$chart}-color-green-200: #{$pf-v5-chart-color-green-200};
20
- --#{$chart}-color-green-300: #{$pf-v5-chart-color-green-300};
21
- --#{$chart}-color-green-400: #{$pf-v5-chart-color-green-400};
22
- --#{$chart}-color-green-500: #{$pf-v5-chart-color-green-500};
23
- --#{$chart}-color-cyan-100: #{$pf-v5-chart-color-cyan-100};
24
- --#{$chart}-color-cyan-200: #{$pf-v5-chart-color-cyan-200};
25
- --#{$chart}-color-cyan-300: #{$pf-v5-chart-color-cyan-300};
26
- --#{$chart}-color-cyan-400: #{$pf-v5-chart-color-cyan-400};
27
- --#{$chart}-color-cyan-500: #{$pf-v5-chart-color-cyan-500};
28
- --#{$chart}-color-purple-100: #{$pf-v5-chart-color-purple-100};
29
- --#{$chart}-color-purple-200: #{$pf-v5-chart-color-purple-200};
30
- --#{$chart}-color-purple-300: #{$pf-v5-chart-color-purple-300};
31
- --#{$chart}-color-purple-400: #{$pf-v5-chart-color-purple-400};
32
- --#{$chart}-color-purple-500: #{$pf-v5-chart-color-purple-500};
33
- --#{$chart}-color-red-100: #{$pf-v5-chart-color-red-100};
34
- --#{$chart}-color-red-200: #{$pf-v5-chart-color-red-200};
35
- --#{$chart}-color-red-300: #{$pf-v5-chart-color-red-300};
36
- --#{$chart}-color-red-400: #{$pf-v5-chart-color-red-400};
37
- --#{$chart}-color-red-500: #{$pf-v5-chart-color-red-500};
13
+ --#{$chart}-color-blue-100: #{$pf-v6-chart-color-blue-100};
14
+ --#{$chart}-color-blue-200: #{$pf-v6-chart-color-blue-200};
15
+ --#{$chart}-color-blue-300: #{$pf-v6-chart-color-blue-300};
16
+ --#{$chart}-color-blue-400: #{$pf-v6-chart-color-blue-400};
17
+ --#{$chart}-color-blue-500: #{$pf-v6-chart-color-blue-500};
18
+ --#{$chart}-color-green-100: #{$pf-v6-chart-color-green-100};
19
+ --#{$chart}-color-green-200: #{$pf-v6-chart-color-green-200};
20
+ --#{$chart}-color-green-300: #{$pf-v6-chart-color-green-300};
21
+ --#{$chart}-color-green-400: #{$pf-v6-chart-color-green-400};
22
+ --#{$chart}-color-green-500: #{$pf-v6-chart-color-green-500};
23
+ --#{$chart}-color-cyan-100: #{$pf-v6-chart-color-cyan-100};
24
+ --#{$chart}-color-cyan-200: #{$pf-v6-chart-color-cyan-200};
25
+ --#{$chart}-color-cyan-300: #{$pf-v6-chart-color-cyan-300};
26
+ --#{$chart}-color-cyan-400: #{$pf-v6-chart-color-cyan-400};
27
+ --#{$chart}-color-cyan-500: #{$pf-v6-chart-color-cyan-500};
28
+ --#{$chart}-color-purple-100: #{$pf-v6-chart-color-purple-100};
29
+ --#{$chart}-color-purple-200: #{$pf-v6-chart-color-purple-200};
30
+ --#{$chart}-color-purple-300: #{$pf-v6-chart-color-purple-300};
31
+ --#{$chart}-color-purple-400: #{$pf-v6-chart-color-purple-400};
32
+ --#{$chart}-color-purple-500: #{$pf-v6-chart-color-purple-500};
33
+ --#{$chart}-color-red-100: #{$pf-v6-chart-color-red-100};
34
+ --#{$chart}-color-red-200: #{$pf-v6-chart-color-red-200};
35
+ --#{$chart}-color-red-300: #{$pf-v6-chart-color-red-300};
36
+ --#{$chart}-color-red-400: #{$pf-v6-chart-color-red-400};
37
+ --#{$chart}-color-red-500: #{$pf-v6-chart-color-red-500};
38
38
 
39
39
  // globals
40
40
  --#{$chart}-global--BorderColor: var(--#{$pf-global}--BorderColor--100);
package/base/_themes.scss DELETED
@@ -1,43 +0,0 @@
1
- #{$pf-v6--theme-dark--placeholder--class} {
2
- @extend %pf-v6-t-dark;
3
-
4
- &.pf-m-transparent {
5
- background-color: transparent;
6
- }
7
-
8
- &.pf-m-transparent-100 {
9
- background-color: rgba($pf-v5-color-black-1000, .42);
10
- }
11
-
12
- &.pf-m-transparent-200 {
13
- background-color: rgba($pf-v5-color-black-1000, .6);
14
- }
15
-
16
- &.pf-m-opaque-100 {
17
- background-color: $pf-v5-color-black-800;
18
- }
19
-
20
- &.pf-m-opaque-200 {
21
- background-color: $pf-v5-color-black-900;
22
- }
23
- }
24
-
25
- #{$pf-v5--theme-light--placeholder--class} {
26
- @extend %pf-v6-t-light;
27
-
28
- &.pf-m-transparent {
29
- background-color: transparent;
30
- }
31
-
32
- &.pf-m-opaque-100 {
33
- background-color: $pf-v5-color-white;
34
- }
35
-
36
- &.pf-m-opaque-200 {
37
- background-color: $pf-v5-color-black-100;
38
- }
39
-
40
- &.pf-m-opaque-300 {
41
- background-color: $pf-v5-color-black-200;
42
- }
43
- }
package/base/patternfly-themes.css DELETED
@@ -1,82 +0,0 @@
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
- .pf-v6-t-light {
29
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
30
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
31
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
32
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
33
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
34
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
35
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
36
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
37
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
38
- }
39
-
40
- .pf-v6-t-dark {
41
- --pf-v6-global--Color--100: var(--pf-v6-global--Color--light-100);
42
- --pf-v6-global--Color--200: var(--pf-v6-global--Color--light-200);
43
- --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--light-100);
44
- --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--light-100);
45
- --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--light);
46
- --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--light);
47
- --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--dark-100);
48
- --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--light);
49
- --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--light);
50
- }
51
- .pf-v6-t-dark .pf-v6-c-button {
52
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--dark-100);
53
- }
54
-
55
- .pf-v6-t-dark.pf-m-transparent {
56
- background-color: transparent;
57
- }
58
- .pf-v6-t-dark.pf-m-transparent-100 {
59
- background-color: rgba(3, 3, 3, 0.42);
60
- }
61
- .pf-v6-t-dark.pf-m-transparent-200 {
62
- background-color: rgba(3, 3, 3, 0.6);
63
- }
64
- .pf-v6-t-dark.pf-m-opaque-100 {
65
- background-color: #3c3f42;
66
- }
67
- .pf-v6-t-dark.pf-m-opaque-200 {
68
- background-color: #151515;
69
- }
70
-
71
- .pf-v6-t-light.pf-m-transparent {
72
- background-color: transparent;
73
- }
74
- .pf-v6-t-light.pf-m-opaque-100 {
75
- background-color: #fff;
76
- }
77
- .pf-v6-t-light.pf-m-opaque-200 {
78
- background-color: #fafafa;
79
- }
80
- .pf-v6-t-light.pf-m-opaque-300 {
81
- background-color: #f0f0f0;
82
- }
package/base/patternfly-themes.scss DELETED
@@ -1,2 +0,0 @@
1
- @import "../sass-utilities/all";
2
- @import "themes";
package/base/themes/dark/_globals.scss DELETED
@@ -1,5 +0,0 @@
1
- @mixin pf-v6-theme-dark-globals() {
2
- // stylelint-disable property-no-unknown
3
- color-scheme: dark;
4
- // stylelint-enable
5
- }