@patternfly/patternfly 6.0.0-alpha.131 → 6.0.0-alpha.133

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 (51) hide show
  1. package/components/Breadcrumb/breadcrumb.css +10 -10
  2. package/components/Breadcrumb/breadcrumb.scss +10 -10
  3. package/components/Hint/hint.css +2 -2
  4. package/components/Hint/hint.scss +2 -3
  5. package/components/Login/login.css +4 -2
  6. package/components/Login/login.scss +2 -1
  7. package/components/Menu/menu.css +4 -1
  8. package/components/Menu/menu.scss +5 -1
  9. package/components/_index.css +20 -15
  10. package/docs/components/ActionList/examples/ActionList.md +4 -4
  11. package/docs/components/Breadcrumb/examples/Breadcrumb.md +2 -1
  12. package/docs/components/Card/examples/Card.md +80 -416
  13. package/docs/components/DataList/examples/DataList.md +170 -952
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +160 -896
  15. package/docs/components/Hint/examples/Hint.md +30 -156
  16. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  17. package/docs/components/LogViewer/examples/LogViewer.css +9 -2
  18. package/docs/components/LogViewer/examples/LogViewer.md +315 -3313
  19. package/docs/components/Menu/examples/Menu.md +6 -76
  20. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -0
  21. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +370 -2064
  22. package/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +56 -143
  24. package/docs/components/Table/examples/Table.css +7 -0
  25. package/docs/components/Table/examples/Table.md +281 -405
  26. package/docs/components/Toolbar/examples/Toolbar.md +32 -239
  27. package/docs/demos/CardView/examples/CardView.md +110 -583
  28. package/docs/demos/Dashboard/examples/Dashboard.md +10 -56
  29. package/docs/demos/DataList/examples/DataList.md +44 -96
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +10 -56
  31. package/docs/demos/Drawer/examples/Drawer.md +10 -56
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +647 -3504
  33. package/docs/demos/Page/examples/Penta.md +5 -5
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +150 -675
  35. package/docs/demos/Table/examples/Table.md +142 -220
  36. package/docs/demos/Tabs/examples/Tabs.md +15 -28
  37. package/docs/demos/Toolbar/examples/Toolbar.css +0 -16
  38. package/docs/demos/Toolbar/examples/Toolbar.md +88 -609
  39. package/docs/utilities/Display/examples/Display.css +1 -8
  40. package/docs/utilities/Display/examples/Display.md +16 -7
  41. package/package.json +1 -1
  42. package/patternfly-addons.css +38 -0
  43. package/patternfly-charts.css +339 -8
  44. package/patternfly-charts.scss +21 -8
  45. package/patternfly-no-globals.css +20 -15
  46. package/patternfly.css +20 -15
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/utilities/Display/display.css +38 -0
  50. package/utilities/Display/display.scss +3 -1
  51. package/utilities/_index.css +38 -0
package/docs/utilities/Display/examples/Display.css CHANGED
@@ -1,11 +1,4 @@
1
- .ws-core-u-display .pf-v6-u-display-inline-block,
2
- .ws-core-u-display .pf-v6-u-display-block,
3
- .ws-core-u-display .pf-v6-u-display-flex,
4
- .ws-core-u-display .pf-v6-u-display-inline-flex,
5
- .ws-core-u-display .pf-v6-u-display-grid,
6
- .ws-core-u-display .pf-v6-u-display-inline,
7
- .ws-core-u-display .pf-v6-u-display-table,
8
- .ws-core-u-display .pf-v6-u-display-table-cell {
1
+ .ws-core-u-display [class*="pf-v6-u-display-"] {
9
2
  padding: var(--pf-t--global--spacer--sm);
10
3
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
11
4
  }
package/docs/utilities/Display/examples/Display.md CHANGED
@@ -5,10 +5,10 @@ section: utility-classes
5
5
 
6
6
  ## Examples
7
7
 
8
- ### Inline block
8
+ ### Inline
9
9
 
10
10
  ```html
11
- <div class="pf-v6-u-display-inline-block">.pf-v6-u-display-inline-block</div>
11
+ <div class="pf-v6-u-display-inline">.pf-v6-u-display-inline</div>
12
12
 
13
13
  ```
14
14
 
@@ -19,6 +19,13 @@ section: utility-classes
19
19
 
20
20
  ```
21
21
 
22
+ ### Inline block
23
+
24
+ ```html
25
+ <div class="pf-v6-u-display-inline-block">.pf-v6-u-display-inline-block</div>
26
+
27
+ ```
28
+
22
29
  ### Flex
23
30
 
24
31
  ```html
@@ -40,14 +47,14 @@ section: utility-classes
40
47
 
41
48
  ```
42
49
 
43
- ### Inline
50
+ ### Inline grid
44
51
 
45
52
  ```html
46
- <div class="pf-v6-u-display-inline">.pf-v6-u-display-inline</div>
53
+ <div class="pf-v6-u-display-inline-grid">.pf-v6-u-display-inline-grid</div>
47
54
 
48
55
  ```
49
56
 
50
- ### Table
57
+ ### Table, table row, table cell
51
58
 
52
59
  ```html
53
60
  <div class="pf-v6-u-display-table">
@@ -82,11 +89,13 @@ section: utility-classes
82
89
 
83
90
  | Class | Applied to | Outcome |
84
91
  | -- | -- | -- |
85
- | `.pf-v6-u-display-inline-block{-on-[breakpoint]}` | `*` | Sets display: inline-block |
86
- | `.pf-v6-u-display-block{-on-[breakpoint]}` | `*` | Sets display: block |
87
92
  | `.pf-v6-u-display-inline{-on-[breakpoint]}` | `*` | Sets display: inline |
93
+ | `.pf-v6-u-display-block{-on-[breakpoint]}` | `*` | Sets display: block |
94
+ | `.pf-v6-u-display-inline-block{-on-[breakpoint]}` | `*` | Sets display: inline-block |
88
95
  | `.pf-v6-u-display-flex{-on-[breakpoint]}` | `*` | Sets display: flex |
89
96
  | `.pf-v6-u-display-inline-flex{-on-[breakpoint]}` | `*` | Sets display: inline-flex |
97
+ | `.pf-v6-u-display-grid{-on-[breakpoint]}` | `*` | Sets display: grid |
98
+ | `.pf-v6-u-display-inline-grid{-on-[breakpoint]}` | `*` | Sets display: inline-grid |
90
99
  | `.pf-v6-u-display-table{-on-[breakpoint]}` | `*` | Sets display: table |
91
100
  | `.pf-v6-u-display-table-row{-on-[breakpoint]}` | `*` | Sets display: table-row |
92
101
  | `.pf-v6-u-display-table-cell{-on-[breakpoint]}` | `*` | Sets display: table-cell |
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.131",
4
+ "version": "6.0.0-alpha.133",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-addons.css CHANGED
@@ -409,6 +409,14 @@
409
409
  display: inline-flex !important;
410
410
  }
411
411
 
412
+ .pf-v6-u-display-grid {
413
+ display: grid !important;
414
+ }
415
+
416
+ .pf-v6-u-display-inline-grid {
417
+ display: inline-grid !important;
418
+ }
419
+
412
420
  @media screen and (min-width: 576px) {
413
421
  .pf-v6-u-display-none-on-sm {
414
422
  display: none !important;
@@ -437,6 +445,12 @@
437
445
  .pf-v6-u-display-inline-flex-on-sm {
438
446
  display: inline-flex !important;
439
447
  }
448
+ .pf-v6-u-display-grid-on-sm {
449
+ display: grid !important;
450
+ }
451
+ .pf-v6-u-display-inline-grid-on-sm {
452
+ display: inline-grid !important;
453
+ }
440
454
  }
441
455
  @media screen and (min-width: 768px) {
442
456
  .pf-v6-u-display-none-on-md {
@@ -466,6 +480,12 @@
466
480
  .pf-v6-u-display-inline-flex-on-md {
467
481
  display: inline-flex !important;
468
482
  }
483
+ .pf-v6-u-display-grid-on-md {
484
+ display: grid !important;
485
+ }
486
+ .pf-v6-u-display-inline-grid-on-md {
487
+ display: inline-grid !important;
488
+ }
469
489
  }
470
490
  @media screen and (min-width: 992px) {
471
491
  .pf-v6-u-display-none-on-lg {
@@ -495,6 +515,12 @@
495
515
  .pf-v6-u-display-inline-flex-on-lg {
496
516
  display: inline-flex !important;
497
517
  }
518
+ .pf-v6-u-display-grid-on-lg {
519
+ display: grid !important;
520
+ }
521
+ .pf-v6-u-display-inline-grid-on-lg {
522
+ display: inline-grid !important;
523
+ }
498
524
  }
499
525
  @media screen and (min-width: 1200px) {
500
526
  .pf-v6-u-display-none-on-xl {
@@ -524,6 +550,12 @@
524
550
  .pf-v6-u-display-inline-flex-on-xl {
525
551
  display: inline-flex !important;
526
552
  }
553
+ .pf-v6-u-display-grid-on-xl {
554
+ display: grid !important;
555
+ }
556
+ .pf-v6-u-display-inline-grid-on-xl {
557
+ display: inline-grid !important;
558
+ }
527
559
  }
528
560
  @media screen and (min-width: 1450px) {
529
561
  .pf-v6-u-display-none-on-2xl {
@@ -553,6 +585,12 @@
553
585
  .pf-v6-u-display-inline-flex-on-2xl {
554
586
  display: inline-flex !important;
555
587
  }
588
+ .pf-v6-u-display-grid-on-2xl {
589
+ display: grid !important;
590
+ }
591
+ .pf-v6-u-display-inline-grid-on-2xl {
592
+ display: inline-grid !important;
593
+ }
556
594
  }
557
595
  .pf-v6-u-flex-direction-column {
558
596
  flex-direction: column !important;
package/patternfly-charts.css CHANGED
@@ -2,6 +2,338 @@
2
2
  mix-blend-mode: multiply;
3
3
  }
4
4
 
5
+ :where(:root) {
6
+ --pf-t--chart--global--layout--width: 450;
7
+ --pf-t--chart--global--layout--height: 300;
8
+ --pf-t--chart--global--layout--padding: 50;
9
+ --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--margin: 8;
11
+ --pf-t--chart--global--label--padding: 10;
12
+ --pf-t--chart--global--FontSize--2xl: 22;
13
+ --pf-t--chart--global--FontSize--lg: 18;
14
+ --pf-t--chart--global--FontSize--sm: 14;
15
+ --pf-t--chart--global--FontSize--xs: 12;
16
+ --pf-t--chart--global--stroke--width--sm: 2;
17
+ --pf-t--chart--global--stroke--width--xs: 1;
18
+ --pf-t--chart--global--BorderWidth--lg: 8;
19
+ --pf-t--chart--global--BorderWidth--sm: 2;
20
+ --pf-t--chart--global--BorderWidth--xs: 1;
21
+ --pf-t--chart--global--label--fill: var(--pf-t--color--gray--90);
22
+ --pf-t--chart--global--danger--color--100: var(--pf-t--color--red-orange--60);
23
+ --pf-t--chart--global--success--color--100: var(--pf-t--color--blue--50);
24
+ --pf-t--chart--global--warning--color--200: var(--pf-t--color--yellow--40);
25
+ --pf-t--chart--global--warning--color--100: var(--pf-t--color--orange--40);
26
+ --pf-t--chart--global--fill--color--white: var(--pf-t--color--white);
27
+ --pf-t--chart--global--fill--color--900: var(--pf-t--color--gray--90);
28
+ --pf-t--chart--global--fill--color--700: var(--pf-t--color--gray--70);
29
+ --pf-t--chart--global--fill--color--500: var(--pf-t--color--gray--50);
30
+ --pf-t--chart--global--fill--color--400: var(--pf-t--color--gray--40);
31
+ --pf-t--chart--global--fill--color--300: var(--pf-t--color--gray--30);
32
+ --pf-t--chart--global--fill--color--200: var(--pf-t--color--gray--20);
33
+ --pf-t--chart--global--fill--color--100: var(--pf-t--color--gray--10);
34
+ --pf-t--chart--color--black--500: var(--pf-t--color--gray--50);
35
+ --pf-t--chart--color--black--400: var(--pf-t--color--gray--40);
36
+ --pf-t--chart--color--black--300: var(--pf-t--color--gray--30);
37
+ --pf-t--chart--color--black--200: var(--pf-t--color--gray--20);
38
+ --pf-t--chart--color--black--100: var(--pf-t--color--gray--10);
39
+ --pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--70);
40
+ --pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--60);
41
+ --pf-t--chart--color--red-orange--300: var(--pf-t--color--red-orange--50);
42
+ --pf-t--chart--color--red-orange--200: var(--pf-t--color--red-orange--40);
43
+ --pf-t--chart--color--red-orange--100: var(--pf-t--color--red-orange--30);
44
+ --pf-t--chart--color--orange--500: var(--pf-t--color--orange--70);
45
+ --pf-t--chart--color--orange--400: var(--pf-t--color--orange--60);
46
+ --pf-t--chart--color--orange--300: var(--pf-t--color--orange--50);
47
+ --pf-t--chart--color--orange--200: var(--pf-t--color--orange--40);
48
+ --pf-t--chart--color--orange--100: var(--pf-t--color--orange--30);
49
+ --pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--60);
50
+ --pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--50);
51
+ --pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--40);
52
+ --pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--30);
53
+ --pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--20);
54
+ --pf-t--chart--color--purple--500: var(--pf-t--color--purple--70);
55
+ --pf-t--chart--color--purple--400: var(--pf-t--color--purple--60);
56
+ --pf-t--chart--color--purple--300: var(--pf-t--color--purple--50);
57
+ --pf-t--chart--color--purple--200: var(--pf-t--color--purple--40);
58
+ --pf-t--chart--color--purple--100: var(--pf-t--color--purple--30);
59
+ --pf-t--chart--color--teal--500: var(--pf-t--color--teal--70);
60
+ --pf-t--chart--color--teal--400: var(--pf-t--color--teal--60);
61
+ --pf-t--chart--color--teal--300: var(--pf-t--color--teal--50);
62
+ --pf-t--chart--color--teal--200: var(--pf-t--color--teal--40);
63
+ --pf-t--chart--color--teal--100: var(--pf-t--color--teal--30);
64
+ --pf-t--chart--color--green--500: var(--pf-t--color--green--70);
65
+ --pf-t--chart--color--green--400: var(--pf-t--color--green--60);
66
+ --pf-t--chart--color--green--300: var(--pf-t--color--green--50);
67
+ --pf-t--chart--color--green--200: var(--pf-t--color--green--40);
68
+ --pf-t--chart--color--green--100: var(--pf-t--color--green--30);
69
+ --pf-t--chart--color--blue--500: var(--pf-t--color--blue--70);
70
+ --pf-t--chart--color--blue--400: var(--pf-t--color--blue--60);
71
+ --pf-t--chart--color--blue--300: var(--pf-t--color--blue--50);
72
+ --pf-t--chart--color--blue--200: var(--pf-t--color--blue--40);
73
+ --pf-t--chart--color--blue--100: var(--pf-t--color--blue--30);
74
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500: var(--pf-t--chart--color--black--400);
75
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400: var(--pf-t--chart--color--teal--200);
76
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300: var(--pf-t--chart--color--orange--400);
77
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3200: var(--pf-t--chart--color--purple--200);
78
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3100: var(--pf-t--chart--color--green--400);
79
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3000: var(--pf-t--chart--color--yellow--200);
80
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2900: var(--pf-t--chart--color--blue--400);
81
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2800: var(--pf-t--chart--color--black--200);
82
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2700: var(--pf-t--chart--color--teal--400);
83
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2600: var(--pf-t--chart--color--orange--200);
84
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2500: var(--pf-t--chart--color--purple--400);
85
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2400: var(--pf-t--chart--color--green--200);
86
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2300: var(--pf-t--chart--color--yellow--400);
87
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2200: var(--pf-t--chart--color--blue--200);
88
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2100: var(--pf-t--chart--color--black--500);
89
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2000: var(--pf-t--chart--color--teal--100);
90
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1900: var(--pf-t--chart--color--orange--500);
91
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1800: var(--pf-t--chart--color--purple--100);
92
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1700: var(--pf-t--chart--color--green--500);
93
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1600: var(--pf-t--chart--color--yellow--100);
94
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1500: var(--pf-t--chart--color--blue--500);
95
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1400: var(--pf-t--chart--color--black--100);
96
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
97
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1200: var(--pf-t--chart--color--orange--100);
98
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1100: var(--pf-t--chart--color--purple--500);
99
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1000: var(--pf-t--chart--color--green--100);
100
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--500);
101
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--800: var(--pf-t--chart--color--blue--100);
102
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--700: var(--pf-t--chart--color--black--300);
103
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--600: var(--pf-t--chart--color--teal--300);
104
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--500: var(--pf-t--chart--color--orange--300);
105
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--400: var(--pf-t--chart--color--purple--300);
106
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--300);
107
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
108
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--300);
109
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--400);
110
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--200);
111
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
112
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
113
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
114
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--200);
115
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--400);
116
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
117
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
118
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
119
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--500);
120
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--100);
121
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
122
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
123
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
124
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--100);
125
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--500);
126
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
127
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
128
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
129
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
130
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
131
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300);
132
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
133
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300);
134
+ --pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
135
+ --pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
136
+ --pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
137
+ --pf-t--chart--theme--colorscales--orange--colorscale--200: var(--pf-t--chart--color--orange--100);
138
+ --pf-t--chart--theme--colorscales--orange--colorscale--100: var(--pf-t--chart--color--orange--300);
139
+ --pf-t--chart--theme--colorscales--purple--colorscale--500: var(--pf-t--chart--color--purple--400);
140
+ --pf-t--chart--theme--colorscales--purple--colorscale--400: var(--pf-t--chart--color--purple--200);
141
+ --pf-t--chart--theme--colorscales--purple--colorscale--300: var(--pf-t--chart--color--purple--500);
142
+ --pf-t--chart--theme--colorscales--purple--colorscale--200: var(--pf-t--chart--color--purple--100);
143
+ --pf-t--chart--theme--colorscales--purple--colorscale--100: var(--pf-t--chart--color--purple--300);
144
+ --pf-t--chart--theme--colorscales--green--colorscale--500: var(--pf-t--chart--color--green--400);
145
+ --pf-t--chart--theme--colorscales--green--colorscale--400: var(--pf-t--chart--color--green--200);
146
+ --pf-t--chart--theme--colorscales--green--colorscale--300: var(--pf-t--chart--color--green--500);
147
+ --pf-t--chart--theme--colorscales--green--colorscale--200: var(--pf-t--chart--color--green--100);
148
+ --pf-t--chart--theme--colorscales--green--colorscale--100: var(--pf-t--chart--color--green--300);
149
+ --pf-t--chart--theme--colorscales--gray--colorscale--500: var(--pf-t--chart--color--black--400);
150
+ --pf-t--chart--theme--colorscales--gray--colorscale--400: var(--pf-t--chart--color--black--200);
151
+ --pf-t--chart--theme--colorscales--gray--colorscale--300: var(--pf-t--chart--color--black--500);
152
+ --pf-t--chart--theme--colorscales--gray--colorscale--200: var(--pf-t--chart--color--black--100);
153
+ --pf-t--chart--theme--colorscales--gray--colorscale--100: var(--pf-t--chart--color--black--300);
154
+ --pf-t--chart--theme--colorscales--yellow--colorscale--500: var(--pf-t--chart--color--yellow--400);
155
+ --pf-t--chart--theme--colorscales--yellow--colorscale--400: var(--pf-t--chart--color--yellow--200);
156
+ --pf-t--chart--theme--colorscales--yellow--colorscale--300: var(--pf-t--chart--color--yellow--500);
157
+ --pf-t--chart--theme--colorscales--yellow--colorscale--200: var(--pf-t--chart--color--yellow--100);
158
+ --pf-t--chart--theme--colorscales--yellow--colorscale--100: var(--pf-t--chart--color--yellow--300);
159
+ --pf-t--chart--theme--colorscales--teal--colorscale--500: var(--pf-t--chart--color--teal--400);
160
+ --pf-t--chart--theme--colorscales--teal--colorscale--400: var(--pf-t--chart--color--teal--200);
161
+ --pf-t--chart--theme--colorscales--teal--colorscale--300: var(--pf-t--chart--color--teal--500);
162
+ --pf-t--chart--theme--colorscales--teal--colorscale--200: var(--pf-t--chart--color--teal--100);
163
+ --pf-t--chart--theme--colorscales--teal--colorscale--100: var(--pf-t--chart--color--teal--300);
164
+ --pf-t--chart--theme--colorscales--blue--colorscale--500: var(--pf-t--chart--color--blue--400);
165
+ --pf-t--chart--theme--colorscales--blue--colorscale--400: var(--pf-t--chart--color--blue--200);
166
+ --pf-t--chart--theme--colorscales--blue--colorscale--300: var(--pf-t--chart--color--blue--500);
167
+ --pf-t--chart--theme--colorscales--blue--colorscale--200: var(--pf-t--chart--color--blue--100);
168
+ --pf-t--chart--theme--colorscales--blue--colorscale--100: var(--pf-t--chart--color--blue--300);
169
+ }
170
+
171
+ :where(.pf-v6-theme-dark) {
172
+ --pf-t--chart--global--layout--width: 450;
173
+ --pf-t--chart--global--layout--height: 300;
174
+ --pf-t--chart--global--layout--padding: 50;
175
+ --pf-t--chart--global--label--stroke--width: 0;
176
+ --pf-t--chart--global--label--margin: 8;
177
+ --pf-t--chart--global--label--padding: 10;
178
+ --pf-t--chart--global--FontSize--2xl: 22;
179
+ --pf-t--chart--global--FontSize--lg: 18;
180
+ --pf-t--chart--global--FontSize--sm: 14;
181
+ --pf-t--chart--global--FontSize--xs: 12;
182
+ --pf-t--chart--global--stroke--width--sm: 2;
183
+ --pf-t--chart--global--stroke--width--xs: 1;
184
+ --pf-t--chart--global--BorderWidth--lg: 8;
185
+ --pf-t--chart--global--BorderWidth--sm: 2;
186
+ --pf-t--chart--global--BorderWidth--xs: 1;
187
+ --pf-t--chart--global--label--fill: var(--pf-t--color--gray--90);
188
+ --pf-t--chart--global--danger--color--100: var(--pf-t--color--red-orange--50);
189
+ --pf-t--chart--global--success--color--100: var(--pf-t--color--blue--30);
190
+ --pf-t--chart--global--warning--color--200: var(--pf-t--color--yellow--30);
191
+ --pf-t--chart--global--warning--color--100: var(--pf-t--color--orange--30);
192
+ --pf-t--chart--global--fill--color--white: var(--pf-t--color--white);
193
+ --pf-t--chart--global--fill--color--900: var(--pf-t--color--white);
194
+ --pf-t--chart--global--fill--color--700: var(--pf-t--color--gray--10);
195
+ --pf-t--chart--global--fill--color--500: var(--pf-t--color--gray--20);
196
+ --pf-t--chart--global--fill--color--400: var(--pf-t--color--gray--30);
197
+ --pf-t--chart--global--fill--color--300: var(--pf-t--color--gray--40);
198
+ --pf-t--chart--global--fill--color--200: var(--pf-t--color--gray--50);
199
+ --pf-t--chart--global--fill--color--100: var(--pf-t--color--gray--60);
200
+ --pf-t--chart--color--black--500: var(--pf-t--color--gray--10);
201
+ --pf-t--chart--color--black--400: var(--pf-t--color--gray--20);
202
+ --pf-t--chart--color--black--300: var(--pf-t--color--gray--30);
203
+ --pf-t--chart--color--black--200: var(--pf-t--color--gray--40);
204
+ --pf-t--chart--color--black--100: var(--pf-t--color--gray--50);
205
+ --pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--10);
206
+ --pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--20);
207
+ --pf-t--chart--color--red-orange--300: var(--pf-t--color--red-orange--30);
208
+ --pf-t--chart--color--red-orange--200: var(--pf-t--color--red-orange--40);
209
+ --pf-t--chart--color--red-orange--100: var(--pf-t--color--red-orange--50);
210
+ --pf-t--chart--color--orange--500: var(--pf-t--color--orange--10);
211
+ --pf-t--chart--color--orange--400: var(--pf-t--color--orange--20);
212
+ --pf-t--chart--color--orange--300: var(--pf-t--color--orange--30);
213
+ --pf-t--chart--color--orange--200: var(--pf-t--color--orange--40);
214
+ --pf-t--chart--color--orange--100: var(--pf-t--color--orange--50);
215
+ --pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--10);
216
+ --pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--20);
217
+ --pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--30);
218
+ --pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--40);
219
+ --pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--50);
220
+ --pf-t--chart--color--purple--500: var(--pf-t--color--purple--20);
221
+ --pf-t--chart--color--purple--400: var(--pf-t--color--purple--30);
222
+ --pf-t--chart--color--purple--300: var(--pf-t--color--purple--40);
223
+ --pf-t--chart--color--purple--200: var(--pf-t--color--purple--50);
224
+ --pf-t--chart--color--purple--100: var(--pf-t--color--purple--60);
225
+ --pf-t--chart--color--teal--500: var(--pf-t--color--teal--10);
226
+ --pf-t--chart--color--teal--400: var(--pf-t--color--teal--20);
227
+ --pf-t--chart--color--teal--300: var(--pf-t--color--teal--30);
228
+ --pf-t--chart--color--teal--200: var(--pf-t--color--teal--40);
229
+ --pf-t--chart--color--teal--100: var(--pf-t--color--teal--50);
230
+ --pf-t--chart--color--green--500: var(--pf-t--color--green--10);
231
+ --pf-t--chart--color--green--400: var(--pf-t--color--green--20);
232
+ --pf-t--chart--color--green--300: var(--pf-t--color--green--30);
233
+ --pf-t--chart--color--green--200: var(--pf-t--color--green--40);
234
+ --pf-t--chart--color--green--100: var(--pf-t--color--green--50);
235
+ --pf-t--chart--color--blue--500: var(--pf-t--color--blue--10);
236
+ --pf-t--chart--color--blue--400: var(--pf-t--color--blue--20);
237
+ --pf-t--chart--color--blue--300: var(--pf-t--color--blue--30);
238
+ --pf-t--chart--color--blue--200: var(--pf-t--color--blue--40);
239
+ --pf-t--chart--color--blue--100: var(--pf-t--color--blue--50);
240
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500: var(--pf-t--chart--color--black--400);
241
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400: var(--pf-t--chart--color--teal--400);
242
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300: var(--pf-t--chart--color--orange--400);
243
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3200: var(--pf-t--chart--color--purple--400);
244
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3100: var(--pf-t--chart--color--green--400);
245
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3000: var(--pf-t--chart--color--yellow--400);
246
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2900: var(--pf-t--chart--color--blue--400);
247
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2800: var(--pf-t--chart--color--black--500);
248
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2700: var(--pf-t--chart--color--teal--100);
249
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2600: var(--pf-t--chart--color--orange--500);
250
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2500: var(--pf-t--chart--color--purple--100);
251
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2400: var(--pf-t--chart--color--green--500);
252
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2300: var(--pf-t--chart--color--yellow--100);
253
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2200: var(--pf-t--chart--color--blue--500);
254
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2100: var(--pf-t--chart--color--black--100);
255
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2000: var(--pf-t--chart--color--teal--500);
256
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1900: var(--pf-t--chart--color--orange--100);
257
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1800: var(--pf-t--chart--color--purple--500);
258
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1700: var(--pf-t--chart--color--green--100);
259
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1600: var(--pf-t--chart--color--yellow--500);
260
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1500: var(--pf-t--chart--color--blue--100);
261
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1400: var(--pf-t--chart--color--black--300);
262
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1300: var(--pf-t--chart--color--teal--200);
263
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1200: var(--pf-t--chart--color--orange--300);
264
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1100: var(--pf-t--chart--color--purple--200);
265
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1000: var(--pf-t--chart--color--green--300);
266
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--200);
267
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--800: var(--pf-t--chart--color--blue--300);
268
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--700: var(--pf-t--chart--color--black--200);
269
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--600: var(--pf-t--chart--color--teal--300);
270
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--500: var(--pf-t--chart--color--orange--200);
271
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--400: var(--pf-t--chart--color--purple--300);
272
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--200);
273
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
274
+ --pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--200);
275
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--400);
276
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
277
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
278
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--400);
279
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
280
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--100);
281
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--500);
282
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--100);
283
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--500);
284
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--100);
285
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--500);
286
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--100);
287
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
288
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
289
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
290
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--300);
291
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--200);
292
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--300);
293
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--200);
294
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--300);
295
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--200);
296
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
297
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--200);
298
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
299
+ --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--200);
300
+ --pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
301
+ --pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
302
+ --pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
303
+ --pf-t--chart--theme--colorscales--orange--colorscale--200: var(--pf-t--chart--color--orange--100);
304
+ --pf-t--chart--theme--colorscales--orange--colorscale--100: var(--pf-t--chart--color--orange--300);
305
+ --pf-t--chart--theme--colorscales--purple--colorscale--500: var(--pf-t--chart--color--purple--400);
306
+ --pf-t--chart--theme--colorscales--purple--colorscale--400: var(--pf-t--chart--color--purple--200);
307
+ --pf-t--chart--theme--colorscales--purple--colorscale--300: var(--pf-t--chart--color--purple--500);
308
+ --pf-t--chart--theme--colorscales--purple--colorscale--200: var(--pf-t--chart--color--purple--100);
309
+ --pf-t--chart--theme--colorscales--purple--colorscale--100: var(--pf-t--chart--color--purple--300);
310
+ --pf-t--chart--theme--colorscales--green--colorscale--500: var(--pf-t--chart--color--green--400);
311
+ --pf-t--chart--theme--colorscales--green--colorscale--400: var(--pf-t--chart--color--green--200);
312
+ --pf-t--chart--theme--colorscales--green--colorscale--300: var(--pf-t--chart--color--green--500);
313
+ --pf-t--chart--theme--colorscales--green--colorscale--200: var(--pf-t--chart--color--green--100);
314
+ --pf-t--chart--theme--colorscales--green--colorscale--100: var(--pf-t--chart--color--green--300);
315
+ --pf-t--chart--theme--colorscales--gray--colorscale--500: var(--pf-t--chart--color--black--400);
316
+ --pf-t--chart--theme--colorscales--gray--colorscale--400: var(--pf-t--chart--color--black--200);
317
+ --pf-t--chart--theme--colorscales--gray--colorscale--300: var(--pf-t--chart--color--black--500);
318
+ --pf-t--chart--theme--colorscales--gray--colorscale--200: var(--pf-t--chart--color--black--100);
319
+ --pf-t--chart--theme--colorscales--gray--colorscale--100: var(--pf-t--chart--color--black--300);
320
+ --pf-t--chart--theme--colorscales--yellow--colorscale--500: var(--pf-t--chart--color--yellow--400);
321
+ --pf-t--chart--theme--colorscales--yellow--colorscale--400: var(--pf-t--chart--color--yellow--200);
322
+ --pf-t--chart--theme--colorscales--yellow--colorscale--300: var(--pf-t--chart--color--yellow--500);
323
+ --pf-t--chart--theme--colorscales--yellow--colorscale--200: var(--pf-t--chart--color--yellow--100);
324
+ --pf-t--chart--theme--colorscales--yellow--colorscale--100: var(--pf-t--chart--color--yellow--300);
325
+ --pf-t--chart--theme--colorscales--teal--colorscale--500: var(--pf-t--chart--color--teal--400);
326
+ --pf-t--chart--theme--colorscales--teal--colorscale--400: var(--pf-t--chart--color--teal--200);
327
+ --pf-t--chart--theme--colorscales--teal--colorscale--300: var(--pf-t--chart--color--teal--500);
328
+ --pf-t--chart--theme--colorscales--teal--colorscale--200: var(--pf-t--chart--color--teal--100);
329
+ --pf-t--chart--theme--colorscales--teal--colorscale--100: var(--pf-t--chart--color--teal--300);
330
+ --pf-t--chart--theme--colorscales--blue--colorscale--500: var(--pf-t--chart--color--blue--400);
331
+ --pf-t--chart--theme--colorscales--blue--colorscale--400: var(--pf-t--chart--color--blue--200);
332
+ --pf-t--chart--theme--colorscales--blue--colorscale--300: var(--pf-t--chart--color--blue--500);
333
+ --pf-t--chart--theme--colorscales--blue--colorscale--200: var(--pf-t--chart--color--blue--100);
334
+ --pf-t--chart--theme--colorscales--blue--colorscale--100: var(--pf-t--chart--color--blue--300);
335
+ }
336
+
5
337
  :where(:root) {
6
338
  --pf-v6-chart-color-blue-100: var(--pf-t--chart--color--blue--100);
7
339
  --pf-v6-chart-color-blue-200: var(--pf-t--chart--color--blue--100);
@@ -69,13 +401,13 @@
69
401
  --pf-v6-chart-global--warning--Color--100: var(--pf-t--chart--global--warning--color--100);
70
402
  --pf-v6-chart-global--warning--Color--200: var(--pf-t--chart--global--warning--color--200);
71
403
  --pf-v6-chart-global--success--Color--100: var(--pf-t--chart--global--success--color--100);
72
- --pf-v6-chart-global--Fill--Color--900: var(--pf-t--chart--global--fill--color--900:);
73
- --pf-v6-chart-global--Fill--Color--700: var(--pf-t--chart--global--fill--color--700:);
74
- --pf-v6-chart-global--Fill--Color--500: var(--pf-t--chart--global--fill--color--500:);
75
- --pf-v6-chart-global--Fill--Color--400: var(--pf-t--chart--global--fill--color--400:);
76
- --pf-v6-chart-global--Fill--Color--300: var(--pf-t--chart--global--fill--color--300:);
77
- --pf-v6-chart-global--Fill--Color--200: var(--pf-t--chart--global--fill--color--200:);
78
- --pf-v6-chart-global--Fill--Color--white: var(--pf-t--chart--global--fill--color--white:);
404
+ --pf-v6-chart-global--Fill--Color--900: var(--pf-t--chart--global--fill--color--900);
405
+ --pf-v6-chart-global--Fill--Color--700: var(--pf-t--chart--global--fill--color--700);
406
+ --pf-v6-chart-global--Fill--Color--500: var(--pf-t--chart--global--fill--color--500);
407
+ --pf-v6-chart-global--Fill--Color--400: var(--pf-t--chart--global--fill--color--400);
408
+ --pf-v6-chart-global--Fill--Color--300: var(--pf-t--chart--global--fill--color--300);
409
+ --pf-v6-chart-global--Fill--Color--200: var(--pf-t--chart--global--fill--color--200);
410
+ --pf-v6-chart-global--Fill--Color--white: var(--pf-t--chart--global--fill--color--white);
79
411
  --pf-v6-chart-area--Opacity: .3;
80
412
  --pf-v6-chart-area--stroke--Width: var(--pf-v6-chart-global--stroke--Width--sm);
81
413
  --pf-v6-chart-area--data--Fill: var(--pf-v6-chart-global--Fill--Color--900);
@@ -223,7 +555,6 @@
223
555
  --pf-v6-chart-voronoi--labels--Fill: var(--pf-v6-chart-global--Fill--Color--200);
224
556
  --pf-v6-chart-voronoi--labels--PointerEvents: none;
225
557
  --pf-v6-chart-voronoi--flyout--stroke--Width: var(--pf-v6-chart-global--stroke--Width--xs);
226
- --pf-v6-chart-voronoi--flyout--PointerEvents: none;
227
558
  --pf-v6-chart-voronoi--flyout--stroke--Color: var(--pf-v6-chart-global--Fill--Color--900);
228
559
  --pf-v6-chart-voronoi--flyout--stroke--Fill: var(--pf-v6-chart-global--Fill--Color--900);
229
560
  --pf-v6-chart-voronoi--flyout--PointerEvents: none;
package/patternfly-charts.scss CHANGED
@@ -1,4 +1,6 @@
1
1
  @use './sass-utilities' as *;
2
+ @use "./base/tokens/tokens-charts" as charts;
3
+ @use "./base/tokens/tokens-charts-dark" as charts-dark;
2
4
 
3
5
  // stylelint-disable-next-line scss/dollar-variable-pattern
4
6
  $chart: #{$pf-prefix} + 'chart';
@@ -10,6 +12,18 @@ $chart: #{$pf-prefix} + 'chart';
10
12
  }
11
13
  }
12
14
 
15
+ // Charts tokens
16
+ :where(:root) {
17
+ @include charts.pf-v6-tokens;
18
+ }
19
+
20
+ // Charts dark tokens
21
+ :where(.pf-v6-theme-dark) {
22
+ @include charts-dark.pf-v6-tokens;
23
+ }
24
+
25
+ // Charts styles
26
+ // stylelint-disable-next-line no-duplicate-selectors
13
27
  :where(:root) {
14
28
  // Chart colors
15
29
  // blue
@@ -105,13 +119,13 @@ $chart: #{$pf-prefix} + 'chart';
105
119
  --#{$chart}-global--warning--Color--100: var(--pf-t--chart--global--warning--color--100);
106
120
  --#{$chart}-global--warning--Color--200: var(--pf-t--chart--global--warning--color--200);
107
121
  --#{$chart}-global--success--Color--100: var(--pf-t--chart--global--success--color--100);
108
- --#{$chart}-global--Fill--Color--900: var(--pf-t--chart--global--fill--color--900:);
109
- --#{$chart}-global--Fill--Color--700: var(--pf-t--chart--global--fill--color--700:);
110
- --#{$chart}-global--Fill--Color--500: var(--pf-t--chart--global--fill--color--500:);
111
- --#{$chart}-global--Fill--Color--400: var(--pf-t--chart--global--fill--color--400:);
112
- --#{$chart}-global--Fill--Color--300: var(--pf-t--chart--global--fill--color--300:);
113
- --#{$chart}-global--Fill--Color--200: var(--pf-t--chart--global--fill--color--200:);
114
- --#{$chart}-global--Fill--Color--white: var(--pf-t--chart--global--fill--color--white:);
122
+ --#{$chart}-global--Fill--Color--900: var(--pf-t--chart--global--fill--color--900);
123
+ --#{$chart}-global--Fill--Color--700: var(--pf-t--chart--global--fill--color--700);
124
+ --#{$chart}-global--Fill--Color--500: var(--pf-t--chart--global--fill--color--500);
125
+ --#{$chart}-global--Fill--Color--400: var(--pf-t--chart--global--fill--color--400);
126
+ --#{$chart}-global--Fill--Color--300: var(--pf-t--chart--global--fill--color--300);
127
+ --#{$chart}-global--Fill--Color--200: var(--pf-t--chart--global--fill--color--200);
128
+ --#{$chart}-global--Fill--Color--white: var(--pf-t--chart--global--fill--color--white);
115
129
 
116
130
  // Individual Charts
117
131
 
@@ -299,7 +313,6 @@ $chart: #{$pf-prefix} + 'chart';
299
313
  --#{$chart}-voronoi--labels--Fill: var(--#{$chart}-global--Fill--Color--200);
300
314
  --#{$chart}-voronoi--labels--PointerEvents: none;
301
315
  --#{$chart}-voronoi--flyout--stroke--Width: var(--#{$chart}-global--stroke--Width--xs);
302
- --#{$chart}-voronoi--flyout--PointerEvents: none;
303
316
  --#{$chart}-voronoi--flyout--stroke--Color: var(--#{$chart}-global--Fill--Color--900);
304
317
  --#{$chart}-voronoi--flyout--stroke--Fill: var(--#{$chart}-global--Fill--Color--900);
305
318
  --#{$chart}-voronoi--flyout--PointerEvents: none;