@patternfly/patternfly 5.0.0-prerelease.1 → 5.0.0-prerelease.10

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 (90) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_fonts.scss +1 -1
  3. package/base/_variables.scss +4 -7
  4. package/base/patternfly-common.css +6 -0
  5. package/base/patternfly-fonts.css +1 -1
  6. package/base/patternfly-themes.css +14 -0
  7. package/base/patternfly-variables.css +8 -6
  8. package/base/themes/dark/_chart-globals.scss +1 -1
  9. package/base/themes/dark/_variables.scss +4 -0
  10. package/components/AboutModalBox/about-modal-box.css +7 -8
  11. package/components/Accordion/accordion.css +2 -0
  12. package/components/Alert/alert.css +2 -0
  13. package/components/Banner/banner.css +9 -8
  14. package/components/CalendarMonth/calendar-month.css +5 -0
  15. package/components/CalendarMonth/calendar-month.scss +2 -0
  16. package/components/CalendarMonth/themes/dark/calendar-month.scss +4 -0
  17. package/components/Card/card.css +4 -0
  18. package/components/Card/themes/dark/card.scss +7 -1
  19. package/components/Chip/chip-group.css +2 -0
  20. package/components/Chip/chip.css +2 -0
  21. package/components/ContextSelector/context-selector.css +2 -0
  22. package/components/DataList/data-list.css +2 -0
  23. package/components/FormControl/form-control.css +2 -0
  24. package/components/LogViewer/log-viewer.css +7 -8
  25. package/components/Login/login.css +8 -9
  26. package/components/Masthead/masthead.css +11 -14
  27. package/components/Masthead/masthead.scss +1 -7
  28. package/components/Masthead/themes/dark/masthead.scss +1 -0
  29. package/components/Menu/menu.css +2 -0
  30. package/components/MenuToggle/menu-toggle.css +13 -11
  31. package/components/MenuToggle/menu-toggle.scss +14 -12
  32. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  33. package/components/Page/page.css +11 -10
  34. package/components/Select/select.css +2 -0
  35. package/components/Switch/switch.css +3 -0
  36. package/components/Switch/switch.scss +3 -0
  37. package/components/Switch/themes/dark/switch.scss +1 -0
  38. package/components/Table/table.css +2 -0
  39. package/components/TextInputGroup/text-input-group.css +2 -2
  40. package/components/TextInputGroup/text-input-group.scss +2 -2
  41. package/components/Wizard/wizard.css +7 -8
  42. package/docs/components/Drawer/examples/Drawer.md +2 -2
  43. package/docs/components/Dropdown/deprecated/Dropdown.css +64 -0
  44. package/docs/components/Dropdown/{examples → deprecated}/Dropdown.md +1 -0
  45. package/docs/components/Nav/examples/Navigation.md +2 -2
  46. package/docs/components/Select/deprecated/Select.css +56 -0
  47. package/docs/components/Select/{examples → deprecated}/Select.md +1 -0
  48. package/docs/components/Switch/examples/Switch.md +36 -0
  49. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  50. package/docs/demos/Alert/examples/Alert.md +126 -2322
  51. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  52. package/docs/demos/Banner/examples/Banner.md +84 -1588
  53. package/docs/demos/CardView/examples/CardView.md +42 -774
  54. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  55. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  56. package/docs/demos/DataList/examples/DataList.md +191 -3119
  57. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  58. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  59. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  60. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  61. package/docs/demos/Modal/examples/Modal.md +252 -4644
  62. package/docs/demos/Nav/examples/Nav.md +337 -6193
  63. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  64. package/docs/demos/Page/examples/Page.md +378 -6966
  65. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  66. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  67. package/docs/demos/Table/examples/Table.md +752 -11732
  68. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  69. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  70. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  71. package/package.json +2 -2
  72. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -7
  73. package/patternfly-base-no-globals.css +22 -7
  74. package/patternfly-base-theme-dark-unversioned.css +22 -7
  75. package/patternfly-base.css +22 -7
  76. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  77. package/patternfly-charts-theme-dark.css +66 -66
  78. package/patternfly-no-globals.css +314 -609
  79. package/patternfly-theme-dark-unversioned.css +314 -609
  80. package/patternfly.css +314 -609
  81. package/patternfly.min.css +1 -1
  82. package/patternfly.min.css.map +1 -1
  83. package/sass-utilities/placeholders.scss +8 -0
  84. package/sass-utilities/scss-variables.scss +6 -2
  85. package/sass-utilities/themes/dark/placeholders.scss +3 -8
  86. package/sass-utilities/themes/dark/scss-variables.scss +6 -3
  87. package/RELEASE-NOTES.md +0 -1815
  88. package/UPGRADE-GUIDE.md +0 -1298
  89. package/docs/components/Dropdown/examples/Dropdown.css +0 -64
  90. package/docs/components/Select/examples/Select.css +0 -55
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": "5.0.0-prerelease.1",
4
+ "version": "5.0.0-prerelease.10",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -102,7 +102,7 @@
102
102
  },
103
103
  "publishConfig": {
104
104
  "registry": "https://registry.npmjs.org/",
105
- "tag": "alpha",
105
+ "tag": "prerelease",
106
106
  "access": "public"
107
107
  }
108
108
  }
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-t-dark {
@@ -16,6 +18,11 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
+ }
24
+ .pf-t-dark .pf-v5-c-button {
25
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
19
26
  }
20
27
 
21
28
  :where(:root) {
@@ -218,6 +225,10 @@
218
225
  --pf-v5-global--BorderRadius--lg: 30em;
219
226
  --pf-v5-global--icon--Color--light: #6a6e73;
220
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
221
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
222
233
  --pf-v5-global--icon--FontSize--md: 1rem;
223
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -250,12 +261,6 @@
250
261
  --pf-v5-global--target-size--MinHeight: 44px;
251
262
  }
252
263
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
264
  :where(.pf-theme-dark) {
260
265
  --pf-v5-global--palette--black-50: #e0e0e0;
261
266
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -312,6 +317,10 @@
312
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
313
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
314
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
315
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
316
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
317
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;
@@ -365,7 +374,7 @@
365
374
  }
366
375
  @font-face {
367
376
  font-family: RedHatDisplay;
368
- font-style: normal;
377
+ font-style: italic;
369
378
  font-weight: 700;
370
379
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
371
380
  font-display: fallback;
@@ -475,6 +484,12 @@
475
484
  font-variant-numeric: tabular-nums;
476
485
  }
477
486
 
487
+ .pf-v5-m-vf-font {
488
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
489
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
490
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
491
+ }
492
+
478
493
  :where(.pf-theme-dark) {
479
494
  color-scheme: dark;
480
495
  }
package/patternfly-base-no-globals.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-t-dark {
@@ -16,6 +18,11 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
+ }
24
+ .pf-v5-t-dark .pf-v5-c-button {
25
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
19
26
  }
20
27
 
21
28
  :where(:root) {
@@ -218,6 +225,10 @@
218
225
  --pf-v5-global--BorderRadius--lg: 30em;
219
226
  --pf-v5-global--icon--Color--light: #6a6e73;
220
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
221
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
222
233
  --pf-v5-global--icon--FontSize--md: 1rem;
223
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -250,12 +261,6 @@
250
261
  --pf-v5-global--target-size--MinHeight: 44px;
251
262
  }
252
263
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
264
  :where(.pf-v5-theme-dark) {
260
265
  --pf-v5-global--palette--black-50: #e0e0e0;
261
266
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -312,6 +317,10 @@
312
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
313
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
314
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
315
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
316
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
317
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;
@@ -365,7 +374,7 @@
365
374
  }
366
375
  @font-face {
367
376
  font-family: RedHatDisplay;
368
- font-style: normal;
377
+ font-style: italic;
369
378
  font-weight: 700;
370
379
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
371
380
  font-display: fallback;
@@ -475,6 +484,12 @@
475
484
  font-variant-numeric: tabular-nums;
476
485
  }
477
486
 
487
+ .pf-v5-m-vf-font {
488
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
489
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
490
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
491
+ }
492
+
478
493
  :where(.pf-v5-theme-dark) {
479
494
  color-scheme: dark;
480
495
  }
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-t-dark {
@@ -16,6 +18,11 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
+ }
24
+ .pf-t-dark .pf-v5-c-button {
25
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
19
26
  }
20
27
 
21
28
  :where(:root) {
@@ -218,6 +225,10 @@
218
225
  --pf-v5-global--BorderRadius--lg: 30em;
219
226
  --pf-v5-global--icon--Color--light: #6a6e73;
220
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
221
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
222
233
  --pf-v5-global--icon--FontSize--md: 1rem;
223
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -250,12 +261,6 @@
250
261
  --pf-v5-global--target-size--MinHeight: 44px;
251
262
  }
252
263
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
264
  :where(.pf-theme-dark) {
260
265
  --pf-v5-global--palette--black-50: #e0e0e0;
261
266
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -312,6 +317,10 @@
312
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
313
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
314
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
315
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
316
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
317
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;
@@ -365,7 +374,7 @@
365
374
  }
366
375
  @font-face {
367
376
  font-family: RedHatDisplay;
368
- font-style: normal;
377
+ font-style: italic;
369
378
  font-weight: 700;
370
379
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
371
380
  font-display: fallback;
@@ -475,6 +484,12 @@
475
484
  font-variant-numeric: tabular-nums;
476
485
  }
477
486
 
487
+ .pf-v5-m-vf-font {
488
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
489
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
490
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
491
+ }
492
+
478
493
  :where(html,
479
494
  body,
480
495
  p,
package/patternfly-base.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
7
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
8
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
9
11
  }
10
12
 
11
13
  .pf-v5-t-dark {
@@ -16,6 +18,11 @@
16
18
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
17
19
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
18
20
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
+ --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
+ --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
+ }
24
+ .pf-v5-t-dark .pf-v5-c-button {
25
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
19
26
  }
20
27
 
21
28
  :where(:root) {
@@ -218,6 +225,10 @@
218
225
  --pf-v5-global--BorderRadius--lg: 30em;
219
226
  --pf-v5-global--icon--Color--light: #6a6e73;
220
227
  --pf-v5-global--icon--Color--dark: #151515;
228
+ --pf-v5-global--icon--Color--light--light: #f0f0f0;
229
+ --pf-v5-global--icon--Color--dark--light: #fff;
230
+ --pf-v5-global--icon--Color--light--dark: #6a6e73;
231
+ --pf-v5-global--icon--Color--dark--dark: #151515;
221
232
  --pf-v5-global--icon--FontSize--sm: 0.75rem;
222
233
  --pf-v5-global--icon--FontSize--md: 1rem;
223
234
  --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -250,12 +261,6 @@
250
261
  --pf-v5-global--target-size--MinHeight: 44px;
251
262
  }
252
263
 
253
- .pf-m-vf-font {
254
- --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
255
- --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
256
- --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
257
- }
258
-
259
264
  :where(.pf-v5-theme-dark) {
260
265
  --pf-v5-global--palette--black-50: #e0e0e0;
261
266
  --pf-v5-global--palette--black-100: #c6c7c8;
@@ -312,6 +317,10 @@
312
317
  --pf-v5-global--link--Color--light--hover: #73bcf7;
313
318
  --pf-v5-global--link--Color--dark: #1fa7f8;
314
319
  --pf-v5-global--link--Color--dark--hover: #73bcf7;
320
+ --pf-v5-global--icon--Color--light--light: #aaabac;
321
+ --pf-v5-global--icon--Color--dark--light: #e0e0e0;
322
+ --pf-v5-global--icon--Color--light--dark: #aaabac;
323
+ --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
315
324
  --pf-v5-global--BackgroundColor--light-100: #1b1d21;
316
325
  --pf-v5-global--BackgroundColor--light-200: #0f1214;
317
326
  --pf-v5-global--BackgroundColor--light-300: #26292d;
@@ -365,7 +374,7 @@
365
374
  }
366
375
  @font-face {
367
376
  font-family: RedHatDisplay;
368
- font-style: normal;
377
+ font-style: italic;
369
378
  font-weight: 700;
370
379
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
371
380
  font-display: fallback;
@@ -475,6 +484,12 @@
475
484
  font-variant-numeric: tabular-nums;
476
485
  }
477
486
 
487
+ .pf-v5-m-vf-font {
488
+ --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
489
+ --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
490
+ --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
491
+ }
492
+
478
493
  :where(html,
479
494
  body,
480
495
  p,
package/patternfly-charts-theme-dark-unversioned.css CHANGED
@@ -1,70 +1,70 @@
1
- :where(.pf-theme-dark) .pf-v5-c-chart svg g[clip-path] {
1
+ :where(.pf-theme-dark) .pf-v5-chart svg g[clip-path] {
2
2
  mix-blend-mode: normal;
3
3
  }
4
4
  :where(.pf-theme-dark) {
5
- --pf-v5-c-chart-color-blue-100: #add6ff;
6
- --pf-v5-c-chart-color-blue-200: #85c2ff;
7
- --pf-v5-c-chart-color-blue-300: #47a3ff;
8
- --pf-v5-c-chart-color-blue-400: #0a85ff;
9
- --pf-v5-c-chart-color-blue-500: #06c;
10
- --pf-v5-c-chart-color-green-100: #d6eed3;
11
- --pf-v5-c-chart-color-green-200: #aedca7;
12
- --pf-v5-c-chart-color-green-300: #85cb7c;
13
- --pf-v5-c-chart-color-green-400: #5cb950;
14
- --pf-v5-c-chart-color-green-500: #3e8635;
15
- --pf-v5-c-chart-color-cyan-100: #b9feff;
16
- --pf-v5-c-chart-color-cyan-200: #86fdff;
17
- --pf-v5-c-chart-color-cyan-300: #00b5b8;
18
- --pf-v5-c-chart-color-cyan-400: #008c8f;
19
- --pf-v5-c-chart-color-cyan-500: #005f60;
20
- --pf-v5-c-chart-color-purple-100: #cec8e4;
21
- --pf-v5-c-chart-color-purple-200: #a99fd1;
22
- --pf-v5-c-chart-color-purple-300: #9183c3;
23
- --pf-v5-c-chart-color-purple-400: #7968b6;
24
- --pf-v5-c-chart-color-purple-500: #6753ac;
25
- --pf-v5-c-chart-color-red-100: #ffadad;
26
- --pf-v5-c-chart-color-red-200: #ff7070;
27
- --pf-v5-c-chart-color-red-300: #ff4747;
28
- --pf-v5-c-chart-color-red-400: #ff0a0a;
29
- --pf-v5-c-chart-color-red-500: #a30000;
30
- --pf-v5-c-chart-global--BorderColor: var(--pf-v5-global--BorderColor--100);
31
- --pf-v5-c-chart-global--BorderColor--accent: var(--pf-v5-global--BorderColor--400);
32
- --pf-v5-c-chart-global--label--Fill: var(--pf-v5-global--Color--100);
33
- --pf-v5-c-chart-global--title--Fill: var(--pf-v5-global--Color--100);
34
- --pf-v5-c-chart-global--subtitle--Fill: var(--pf-v5-global--Color--200);
35
- --pf-v5-c-chart-global--tooltip--Fill: var(--pf-v5-global--Color--100);
36
- --pf-v5-c-chart-global--tooltip--bg--Fill: var(--pf-v5-global--BackgroundColor--300);
37
- --pf-v5-c-chart-global--tooltip--BorderWidth: 1;
38
- --pf-v5-c-chart-global--tooltip--BorderColor: var(--pf-v5-global--BorderColor--300);
39
- --pf-v5-c-chart-axis--axis--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
40
- --pf-v5-c-chart-axis--grid--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
41
- --pf-v5-c-chart-axis--tick--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
42
- --pf-v5-c-chart-axis--axis--tick--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
43
- --pf-v5-c-chart-axis--grid--Fill: var(--pf-v5-c-chart-global--BorderColor);
44
- --pf-v5-c-chart-axis--tick-label--Fill: var(--pf-v5-c-chart-global--label--Fill);
45
- --pf-v5-c-chart-bullet--label--title--Fill: var(--pf-v5-c-chart-global--title--Fill);
46
- --pf-v5-c-chart-bullet--label--grouptitle--Fill: var(--pf-v5-c-chart-bullet--label--title--Fill);
47
- --pf-v5-c-chart-bullet--label--subtitle--Fill: var(--pf-v5-c-chart-global--subtitle--Fill);
48
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--100: var(--pf-v5-global--palette--red-400);
49
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--200: var(--pf-v5-global--palette--red-300);
50
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--300: var(--pf-v5-global--palette--red-200);
51
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--400: var(--pf-v5-global--palette--red-100);
52
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--500: var(--pf-v5-global--palette--red-9999);
53
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--100: var(--pf-v5-global--palette--black-600);
54
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--200: var(--pf-v5-global--palette--black-500);
55
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--300: var(--pf-v5-global--palette--black-400);
56
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--400: var(--pf-v5-global--palette--black-300);
57
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--500: var(--pf-v5-global--palette--black-200);
58
- --pf-v5-c-chart-container--cursor--line--Fill: var(--pf-v5-c-chart-global--BorderColor--accent);
59
- --pf-v5-c-chart-donut--label--title--Fill: var(--pf-v5-c-chart-global--title--Fill);
60
- --pf-v5-c-chart-donut--label--subtitle--Fill: var(--pf-v5-c-chart-global--subtitle--Fill);
61
- --pf-v5-c-chart-line--data--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
62
- --pf-v5-c-chart-tooltip--Fill: var(--pf-v5-c-chart-global--tooltip--Fill);
63
- --pf-v5-c-chart-voronoi--labels--Fill: var(--pf-v5-c-chart-global--tooltip--Fill);
64
- --pf-v5-c-chart-tooltip--flyoutStyle--Fill: var(--pf-v5-c-chart-global--tooltip--bg--Fill);
65
- --pf-v5-c-chart-voronoi--flyout--stroke--Fill: var(--pf-v5-c-chart-global--tooltip--bg--Fill);
66
- --pf-v5-c-chart-tooltip--flyoutStyle--stroke--Width: var(--pf-v5-c-chart-global--tooltip--BorderWidth);
67
- --pf-v5-c-chart-tooltip--flyoutStyle--stroke--Color: var(--pf-v5-c-chart-global--tooltip--BorderColor);
68
- --pf-v5-c-chart-voronoi--flyout--stroke--Width: var(--pf-v5-c-chart-global--tooltip--BorderWidth);
69
- --pf-v5-c-chart-voronoi--flyout--stroke--Color: var(--pf-v5-c-chart-global--tooltip--BorderColor);
5
+ --pf-v5-chart-color-blue-100: #add6ff;
6
+ --pf-v5-chart-color-blue-200: #85c2ff;
7
+ --pf-v5-chart-color-blue-300: #47a3ff;
8
+ --pf-v5-chart-color-blue-400: #0a85ff;
9
+ --pf-v5-chart-color-blue-500: #06c;
10
+ --pf-v5-chart-color-green-100: #d6eed3;
11
+ --pf-v5-chart-color-green-200: #aedca7;
12
+ --pf-v5-chart-color-green-300: #85cb7c;
13
+ --pf-v5-chart-color-green-400: #5cb950;
14
+ --pf-v5-chart-color-green-500: #3e8635;
15
+ --pf-v5-chart-color-cyan-100: #b9feff;
16
+ --pf-v5-chart-color-cyan-200: #86fdff;
17
+ --pf-v5-chart-color-cyan-300: #00b5b8;
18
+ --pf-v5-chart-color-cyan-400: #008c8f;
19
+ --pf-v5-chart-color-cyan-500: #005f60;
20
+ --pf-v5-chart-color-purple-100: #cec8e4;
21
+ --pf-v5-chart-color-purple-200: #a99fd1;
22
+ --pf-v5-chart-color-purple-300: #9183c3;
23
+ --pf-v5-chart-color-purple-400: #7968b6;
24
+ --pf-v5-chart-color-purple-500: #6753ac;
25
+ --pf-v5-chart-color-red-100: #ffadad;
26
+ --pf-v5-chart-color-red-200: #ff7070;
27
+ --pf-v5-chart-color-red-300: #ff4747;
28
+ --pf-v5-chart-color-red-400: #ff0a0a;
29
+ --pf-v5-chart-color-red-500: #a30000;
30
+ --pf-v5-chart-global--BorderColor: var(--pf-v5-global--BorderColor--100);
31
+ --pf-v5-chart-global--BorderColor--accent: var(--pf-v5-global--BorderColor--400);
32
+ --pf-v5-chart-global--label--Fill: var(--pf-v5-global--Color--100);
33
+ --pf-v5-chart-global--title--Fill: var(--pf-v5-global--Color--100);
34
+ --pf-v5-chart-global--subtitle--Fill: var(--pf-v5-global--Color--200);
35
+ --pf-v5-chart-global--tooltip--Fill: var(--pf-v5-global--Color--100);
36
+ --pf-v5-chart-global--tooltip--bg--Fill: var(--pf-v5-global--BackgroundColor--300);
37
+ --pf-v5-chart-global--tooltip--BorderWidth: 1;
38
+ --pf-v5-chart-global--tooltip--BorderColor: var(--pf-v5-global--BorderColor--300);
39
+ --pf-v5-chart-axis--axis--stroke--Color: var(--pf-v5-chart-global--BorderColor);
40
+ --pf-v5-chart-axis--grid--stroke--Color: var(--pf-v5-chart-global--BorderColor);
41
+ --pf-v5-chart-axis--tick--stroke--Color: var(--pf-v5-chart-global--BorderColor);
42
+ --pf-v5-chart-axis--axis--tick--stroke--Color: var(--pf-v5-chart-global--BorderColor);
43
+ --pf-v5-chart-axis--grid--Fill: var(--pf-v5-chart-global--BorderColor);
44
+ --pf-v5-chart-axis--tick-label--Fill: var(--pf-v5-chart-global--label--Fill);
45
+ --pf-v5-chart-bullet--label--title--Fill: var(--pf-v5-chart-global--title--Fill);
46
+ --pf-v5-chart-bullet--label--grouptitle--Fill: var(--pf-v5-chart-bullet--label--title--Fill);
47
+ --pf-v5-chart-bullet--label--subtitle--Fill: var(--pf-v5-chart-global--subtitle--Fill);
48
+ --pf-v5-chart-bullet--negative-measure--ColorScale--100: var(--pf-v5-global--palette--red-400);
49
+ --pf-v5-chart-bullet--negative-measure--ColorScale--200: var(--pf-v5-global--palette--red-300);
50
+ --pf-v5-chart-bullet--negative-measure--ColorScale--300: var(--pf-v5-global--palette--red-200);
51
+ --pf-v5-chart-bullet--negative-measure--ColorScale--400: var(--pf-v5-global--palette--red-100);
52
+ --pf-v5-chart-bullet--negative-measure--ColorScale--500: var(--pf-v5-global--palette--red-9999);
53
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--100: var(--pf-v5-global--palette--black-600);
54
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--200: var(--pf-v5-global--palette--black-500);
55
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--300: var(--pf-v5-global--palette--black-400);
56
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--400: var(--pf-v5-global--palette--black-300);
57
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--500: var(--pf-v5-global--palette--black-200);
58
+ --pf-v5-chart-container--cursor--line--Fill: var(--pf-v5-chart-global--BorderColor--accent);
59
+ --pf-v5-chart-donut--label--title--Fill: var(--pf-v5-chart-global--title--Fill);
60
+ --pf-v5-chart-donut--label--subtitle--Fill: var(--pf-v5-chart-global--subtitle--Fill);
61
+ --pf-v5-chart-line--data--stroke--Color: var(--pf-v5-chart-global--BorderColor);
62
+ --pf-v5-chart-tooltip--Fill: var(--pf-v5-chart-global--tooltip--Fill);
63
+ --pf-v5-chart-voronoi--labels--Fill: var(--pf-v5-chart-global--tooltip--Fill);
64
+ --pf-v5-chart-tooltip--flyoutStyle--Fill: var(--pf-v5-chart-global--tooltip--bg--Fill);
65
+ --pf-v5-chart-voronoi--flyout--stroke--Fill: var(--pf-v5-chart-global--tooltip--bg--Fill);
66
+ --pf-v5-chart-tooltip--flyoutStyle--stroke--Width: var(--pf-v5-chart-global--tooltip--BorderWidth);
67
+ --pf-v5-chart-tooltip--flyoutStyle--stroke--Color: var(--pf-v5-chart-global--tooltip--BorderColor);
68
+ --pf-v5-chart-voronoi--flyout--stroke--Width: var(--pf-v5-chart-global--tooltip--BorderWidth);
69
+ --pf-v5-chart-voronoi--flyout--stroke--Color: var(--pf-v5-chart-global--tooltip--BorderColor);
70
70
  }
package/patternfly-charts-theme-dark.css CHANGED
@@ -1,70 +1,70 @@
1
- :where(.pf-v5-theme-dark) .pf-v5-c-chart svg g[clip-path] {
1
+ :where(.pf-v5-theme-dark) .pf-v5-chart svg g[clip-path] {
2
2
  mix-blend-mode: normal;
3
3
  }
4
4
  :where(.pf-v5-theme-dark) {
5
- --pf-v5-c-chart-color-blue-100: #add6ff;
6
- --pf-v5-c-chart-color-blue-200: #85c2ff;
7
- --pf-v5-c-chart-color-blue-300: #47a3ff;
8
- --pf-v5-c-chart-color-blue-400: #0a85ff;
9
- --pf-v5-c-chart-color-blue-500: #06c;
10
- --pf-v5-c-chart-color-green-100: #d6eed3;
11
- --pf-v5-c-chart-color-green-200: #aedca7;
12
- --pf-v5-c-chart-color-green-300: #85cb7c;
13
- --pf-v5-c-chart-color-green-400: #5cb950;
14
- --pf-v5-c-chart-color-green-500: #3e8635;
15
- --pf-v5-c-chart-color-cyan-100: #b9feff;
16
- --pf-v5-c-chart-color-cyan-200: #86fdff;
17
- --pf-v5-c-chart-color-cyan-300: #00b5b8;
18
- --pf-v5-c-chart-color-cyan-400: #008c8f;
19
- --pf-v5-c-chart-color-cyan-500: #005f60;
20
- --pf-v5-c-chart-color-purple-100: #cec8e4;
21
- --pf-v5-c-chart-color-purple-200: #a99fd1;
22
- --pf-v5-c-chart-color-purple-300: #9183c3;
23
- --pf-v5-c-chart-color-purple-400: #7968b6;
24
- --pf-v5-c-chart-color-purple-500: #6753ac;
25
- --pf-v5-c-chart-color-red-100: #ffadad;
26
- --pf-v5-c-chart-color-red-200: #ff7070;
27
- --pf-v5-c-chart-color-red-300: #ff4747;
28
- --pf-v5-c-chart-color-red-400: #ff0a0a;
29
- --pf-v5-c-chart-color-red-500: #a30000;
30
- --pf-v5-c-chart-global--BorderColor: var(--pf-v5-global--BorderColor--100);
31
- --pf-v5-c-chart-global--BorderColor--accent: var(--pf-v5-global--BorderColor--400);
32
- --pf-v5-c-chart-global--label--Fill: var(--pf-v5-global--Color--100);
33
- --pf-v5-c-chart-global--title--Fill: var(--pf-v5-global--Color--100);
34
- --pf-v5-c-chart-global--subtitle--Fill: var(--pf-v5-global--Color--200);
35
- --pf-v5-c-chart-global--tooltip--Fill: var(--pf-v5-global--Color--100);
36
- --pf-v5-c-chart-global--tooltip--bg--Fill: var(--pf-v5-global--BackgroundColor--300);
37
- --pf-v5-c-chart-global--tooltip--BorderWidth: 1;
38
- --pf-v5-c-chart-global--tooltip--BorderColor: var(--pf-v5-global--BorderColor--300);
39
- --pf-v5-c-chart-axis--axis--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
40
- --pf-v5-c-chart-axis--grid--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
41
- --pf-v5-c-chart-axis--tick--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
42
- --pf-v5-c-chart-axis--axis--tick--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
43
- --pf-v5-c-chart-axis--grid--Fill: var(--pf-v5-c-chart-global--BorderColor);
44
- --pf-v5-c-chart-axis--tick-label--Fill: var(--pf-v5-c-chart-global--label--Fill);
45
- --pf-v5-c-chart-bullet--label--title--Fill: var(--pf-v5-c-chart-global--title--Fill);
46
- --pf-v5-c-chart-bullet--label--grouptitle--Fill: var(--pf-v5-c-chart-bullet--label--title--Fill);
47
- --pf-v5-c-chart-bullet--label--subtitle--Fill: var(--pf-v5-c-chart-global--subtitle--Fill);
48
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--100: var(--pf-v5-global--palette--red-400);
49
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--200: var(--pf-v5-global--palette--red-300);
50
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--300: var(--pf-v5-global--palette--red-200);
51
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--400: var(--pf-v5-global--palette--red-100);
52
- --pf-v5-c-chart-bullet--negative-measure--ColorScale--500: var(--pf-v5-global--palette--red-9999);
53
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--100: var(--pf-v5-global--palette--black-600);
54
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--200: var(--pf-v5-global--palette--black-500);
55
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--300: var(--pf-v5-global--palette--black-400);
56
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--400: var(--pf-v5-global--palette--black-300);
57
- --pf-v5-c-chart-bullet--qualitative-range--ColorScale--500: var(--pf-v5-global--palette--black-200);
58
- --pf-v5-c-chart-container--cursor--line--Fill: var(--pf-v5-c-chart-global--BorderColor--accent);
59
- --pf-v5-c-chart-donut--label--title--Fill: var(--pf-v5-c-chart-global--title--Fill);
60
- --pf-v5-c-chart-donut--label--subtitle--Fill: var(--pf-v5-c-chart-global--subtitle--Fill);
61
- --pf-v5-c-chart-line--data--stroke--Color: var(--pf-v5-c-chart-global--BorderColor);
62
- --pf-v5-c-chart-tooltip--Fill: var(--pf-v5-c-chart-global--tooltip--Fill);
63
- --pf-v5-c-chart-voronoi--labels--Fill: var(--pf-v5-c-chart-global--tooltip--Fill);
64
- --pf-v5-c-chart-tooltip--flyoutStyle--Fill: var(--pf-v5-c-chart-global--tooltip--bg--Fill);
65
- --pf-v5-c-chart-voronoi--flyout--stroke--Fill: var(--pf-v5-c-chart-global--tooltip--bg--Fill);
66
- --pf-v5-c-chart-tooltip--flyoutStyle--stroke--Width: var(--pf-v5-c-chart-global--tooltip--BorderWidth);
67
- --pf-v5-c-chart-tooltip--flyoutStyle--stroke--Color: var(--pf-v5-c-chart-global--tooltip--BorderColor);
68
- --pf-v5-c-chart-voronoi--flyout--stroke--Width: var(--pf-v5-c-chart-global--tooltip--BorderWidth);
69
- --pf-v5-c-chart-voronoi--flyout--stroke--Color: var(--pf-v5-c-chart-global--tooltip--BorderColor);
5
+ --pf-v5-chart-color-blue-100: #add6ff;
6
+ --pf-v5-chart-color-blue-200: #85c2ff;
7
+ --pf-v5-chart-color-blue-300: #47a3ff;
8
+ --pf-v5-chart-color-blue-400: #0a85ff;
9
+ --pf-v5-chart-color-blue-500: #06c;
10
+ --pf-v5-chart-color-green-100: #d6eed3;
11
+ --pf-v5-chart-color-green-200: #aedca7;
12
+ --pf-v5-chart-color-green-300: #85cb7c;
13
+ --pf-v5-chart-color-green-400: #5cb950;
14
+ --pf-v5-chart-color-green-500: #3e8635;
15
+ --pf-v5-chart-color-cyan-100: #b9feff;
16
+ --pf-v5-chart-color-cyan-200: #86fdff;
17
+ --pf-v5-chart-color-cyan-300: #00b5b8;
18
+ --pf-v5-chart-color-cyan-400: #008c8f;
19
+ --pf-v5-chart-color-cyan-500: #005f60;
20
+ --pf-v5-chart-color-purple-100: #cec8e4;
21
+ --pf-v5-chart-color-purple-200: #a99fd1;
22
+ --pf-v5-chart-color-purple-300: #9183c3;
23
+ --pf-v5-chart-color-purple-400: #7968b6;
24
+ --pf-v5-chart-color-purple-500: #6753ac;
25
+ --pf-v5-chart-color-red-100: #ffadad;
26
+ --pf-v5-chart-color-red-200: #ff7070;
27
+ --pf-v5-chart-color-red-300: #ff4747;
28
+ --pf-v5-chart-color-red-400: #ff0a0a;
29
+ --pf-v5-chart-color-red-500: #a30000;
30
+ --pf-v5-chart-global--BorderColor: var(--pf-v5-global--BorderColor--100);
31
+ --pf-v5-chart-global--BorderColor--accent: var(--pf-v5-global--BorderColor--400);
32
+ --pf-v5-chart-global--label--Fill: var(--pf-v5-global--Color--100);
33
+ --pf-v5-chart-global--title--Fill: var(--pf-v5-global--Color--100);
34
+ --pf-v5-chart-global--subtitle--Fill: var(--pf-v5-global--Color--200);
35
+ --pf-v5-chart-global--tooltip--Fill: var(--pf-v5-global--Color--100);
36
+ --pf-v5-chart-global--tooltip--bg--Fill: var(--pf-v5-global--BackgroundColor--300);
37
+ --pf-v5-chart-global--tooltip--BorderWidth: 1;
38
+ --pf-v5-chart-global--tooltip--BorderColor: var(--pf-v5-global--BorderColor--300);
39
+ --pf-v5-chart-axis--axis--stroke--Color: var(--pf-v5-chart-global--BorderColor);
40
+ --pf-v5-chart-axis--grid--stroke--Color: var(--pf-v5-chart-global--BorderColor);
41
+ --pf-v5-chart-axis--tick--stroke--Color: var(--pf-v5-chart-global--BorderColor);
42
+ --pf-v5-chart-axis--axis--tick--stroke--Color: var(--pf-v5-chart-global--BorderColor);
43
+ --pf-v5-chart-axis--grid--Fill: var(--pf-v5-chart-global--BorderColor);
44
+ --pf-v5-chart-axis--tick-label--Fill: var(--pf-v5-chart-global--label--Fill);
45
+ --pf-v5-chart-bullet--label--title--Fill: var(--pf-v5-chart-global--title--Fill);
46
+ --pf-v5-chart-bullet--label--grouptitle--Fill: var(--pf-v5-chart-bullet--label--title--Fill);
47
+ --pf-v5-chart-bullet--label--subtitle--Fill: var(--pf-v5-chart-global--subtitle--Fill);
48
+ --pf-v5-chart-bullet--negative-measure--ColorScale--100: var(--pf-v5-global--palette--red-400);
49
+ --pf-v5-chart-bullet--negative-measure--ColorScale--200: var(--pf-v5-global--palette--red-300);
50
+ --pf-v5-chart-bullet--negative-measure--ColorScale--300: var(--pf-v5-global--palette--red-200);
51
+ --pf-v5-chart-bullet--negative-measure--ColorScale--400: var(--pf-v5-global--palette--red-100);
52
+ --pf-v5-chart-bullet--negative-measure--ColorScale--500: var(--pf-v5-global--palette--red-9999);
53
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--100: var(--pf-v5-global--palette--black-600);
54
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--200: var(--pf-v5-global--palette--black-500);
55
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--300: var(--pf-v5-global--palette--black-400);
56
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--400: var(--pf-v5-global--palette--black-300);
57
+ --pf-v5-chart-bullet--qualitative-range--ColorScale--500: var(--pf-v5-global--palette--black-200);
58
+ --pf-v5-chart-container--cursor--line--Fill: var(--pf-v5-chart-global--BorderColor--accent);
59
+ --pf-v5-chart-donut--label--title--Fill: var(--pf-v5-chart-global--title--Fill);
60
+ --pf-v5-chart-donut--label--subtitle--Fill: var(--pf-v5-chart-global--subtitle--Fill);
61
+ --pf-v5-chart-line--data--stroke--Color: var(--pf-v5-chart-global--BorderColor);
62
+ --pf-v5-chart-tooltip--Fill: var(--pf-v5-chart-global--tooltip--Fill);
63
+ --pf-v5-chart-voronoi--labels--Fill: var(--pf-v5-chart-global--tooltip--Fill);
64
+ --pf-v5-chart-tooltip--flyoutStyle--Fill: var(--pf-v5-chart-global--tooltip--bg--Fill);
65
+ --pf-v5-chart-voronoi--flyout--stroke--Fill: var(--pf-v5-chart-global--tooltip--bg--Fill);
66
+ --pf-v5-chart-tooltip--flyoutStyle--stroke--Width: var(--pf-v5-chart-global--tooltip--BorderWidth);
67
+ --pf-v5-chart-tooltip--flyoutStyle--stroke--Color: var(--pf-v5-chart-global--tooltip--BorderColor);
68
+ --pf-v5-chart-voronoi--flyout--stroke--Width: var(--pf-v5-chart-global--tooltip--BorderWidth);
69
+ --pf-v5-chart-voronoi--flyout--stroke--Color: var(--pf-v5-chart-global--tooltip--BorderColor);
70
70
  }