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

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 (3) hide show
  1. package/package.json +1 -1
  2. package/patternfly-charts.css +339 -8
  3. package/patternfly-charts.scss +21 -8
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.132",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
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;