@patternfly/patternfly 6.0.0-alpha.138 → 6.0.0-alpha.139
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.
- package/package.json +1 -1
- package/patternfly-charts.css +49 -44
- package/patternfly-charts.scss +52 -45
package/package.json
CHANGED
package/patternfly-charts.css
CHANGED
|
@@ -344,45 +344,50 @@
|
|
|
344
344
|
|
|
345
345
|
:where(:root) {
|
|
346
346
|
--pf-v6-chart-color-blue-100: var(--pf-t--chart--color--blue--100);
|
|
347
|
-
--pf-v6-chart-color-blue-200: var(--pf-t--chart--color--blue--
|
|
348
|
-
--pf-v6-chart-color-blue-300: var(--pf-t--chart--color--blue--
|
|
349
|
-
--pf-v6-chart-color-blue-400: var(--pf-t--chart--color--blue--
|
|
350
|
-
--pf-v6-chart-color-blue-500: var(--pf-t--chart--color--blue--
|
|
351
|
-
--pf-v6-chart-color-green-100: var(--pf-t--chart--color--
|
|
352
|
-
--pf-v6-chart-color-green-200: var(--pf-t--chart--color--
|
|
353
|
-
--pf-v6-chart-color-green-300: var(--pf-t--chart--color--
|
|
354
|
-
--pf-v6-chart-color-green-400: var(--pf-t--chart--color--
|
|
355
|
-
--pf-v6-chart-color-green-500: var(--pf-t--chart--color--
|
|
356
|
-
--pf-v6-chart-color-cyan-100: var(--pf-t--chart--color--
|
|
357
|
-
--pf-v6-chart-color-cyan-200: var(--pf-t--chart--color--
|
|
358
|
-
--pf-v6-chart-color-cyan-300: var(--pf-t--chart--color--
|
|
359
|
-
--pf-v6-chart-color-cyan-400: var(--pf-t--chart--color--
|
|
360
|
-
--pf-v6-chart-color-cyan-500: var(--pf-t--chart--color--
|
|
361
|
-
--pf-v6-chart-color-purple-100: var(--pf-t--chart--color--
|
|
362
|
-
--pf-v6-chart-color-purple-200: var(--pf-t--chart--color--
|
|
363
|
-
--pf-v6-chart-color-purple-300: var(--pf-t--chart--color--
|
|
364
|
-
--pf-v6-chart-color-purple-400: var(--pf-t--chart--color--
|
|
365
|
-
--pf-v6-chart-color-purple-500: var(--pf-t--chart--color--
|
|
366
|
-
--pf-v6-chart-color-gold-100: var(--pf-t--chart--color--
|
|
367
|
-
--pf-v6-chart-color-gold-200: var(--pf-t--chart--color--
|
|
368
|
-
--pf-v6-chart-color-gold-300: var(--pf-t--chart--color--
|
|
369
|
-
--pf-v6-chart-color-gold-400: var(--pf-t--chart--color--
|
|
370
|
-
--pf-v6-chart-color-gold-500: var(--pf-t--chart--color--
|
|
371
|
-
--pf-v6-chart-color-orange-100: var(--pf-t--chart--color--
|
|
372
|
-
--pf-v6-chart-color-orange-200: var(--pf-t--chart--color--
|
|
373
|
-
--pf-v6-chart-color-orange-300: var(--pf-t--chart--color--
|
|
374
|
-
--pf-v6-chart-color-orange-400: var(--pf-t--chart--color--
|
|
375
|
-
--pf-v6-chart-color-orange-500: var(--pf-t--chart--color--
|
|
376
|
-
--pf-v6-chart-color-red-100: var(--pf-t--chart--color--
|
|
377
|
-
--pf-v6-chart-color-red-200: var(--pf-t--chart--color--
|
|
378
|
-
--pf-v6-chart-color-red-300: var(--pf-t--chart--color--
|
|
379
|
-
--pf-v6-chart-color-red-400: var(--pf-t--chart--color--
|
|
380
|
-
--pf-v6-chart-color-red-500: var(--pf-t--chart--color--
|
|
381
|
-
--pf-v6-chart-color-black-100: var(--pf-t--chart--color--
|
|
382
|
-
--pf-v6-chart-color-black-200: var(--pf-t--chart--color--
|
|
383
|
-
--pf-v6-chart-color-black-300: var(--pf-t--chart--color--
|
|
384
|
-
--pf-v6-chart-color-black-400: var(--pf-t--chart--color--
|
|
385
|
-
--pf-v6-chart-color-black-500: var(--pf-t--chart--color--
|
|
347
|
+
--pf-v6-chart-color-blue-200: var(--pf-t--chart--color--blue--200);
|
|
348
|
+
--pf-v6-chart-color-blue-300: var(--pf-t--chart--color--blue--300);
|
|
349
|
+
--pf-v6-chart-color-blue-400: var(--pf-t--chart--color--blue--400);
|
|
350
|
+
--pf-v6-chart-color-blue-500: var(--pf-t--chart--color--blue--500);
|
|
351
|
+
--pf-v6-chart-color-green-100: var(--pf-t--chart--color--green--100);
|
|
352
|
+
--pf-v6-chart-color-green-200: var(--pf-t--chart--color--green--200);
|
|
353
|
+
--pf-v6-chart-color-green-300: var(--pf-t--chart--color--green--300);
|
|
354
|
+
--pf-v6-chart-color-green-400: var(--pf-t--chart--color--green--400);
|
|
355
|
+
--pf-v6-chart-color-green-500: var(--pf-t--chart--color--green--500);
|
|
356
|
+
--pf-v6-chart-color-cyan-100: var(--pf-t--chart--color--teal--100);
|
|
357
|
+
--pf-v6-chart-color-cyan-200: var(--pf-t--chart--color--teal--200);
|
|
358
|
+
--pf-v6-chart-color-cyan-300: var(--pf-t--chart--color--teal--300);
|
|
359
|
+
--pf-v6-chart-color-cyan-400: var(--pf-t--chart--color--teal--400);
|
|
360
|
+
--pf-v6-chart-color-cyan-500: var(--pf-t--chart--color--teal--500);
|
|
361
|
+
--pf-v6-chart-color-purple-100: var(--pf-t--chart--color--purple--100);
|
|
362
|
+
--pf-v6-chart-color-purple-200: var(--pf-t--chart--color--purple--200);
|
|
363
|
+
--pf-v6-chart-color-purple-300: var(--pf-t--chart--color--purple--300);
|
|
364
|
+
--pf-v6-chart-color-purple-400: var(--pf-t--chart--color--purple--400);
|
|
365
|
+
--pf-v6-chart-color-purple-500: var(--pf-t--chart--color--purple--500);
|
|
366
|
+
--pf-v6-chart-color-gold-100: var(--pf-t--chart--color--yellow--100);
|
|
367
|
+
--pf-v6-chart-color-gold-200: var(--pf-t--chart--color--yellow--200);
|
|
368
|
+
--pf-v6-chart-color-gold-300: var(--pf-t--chart--color--yellow--300);
|
|
369
|
+
--pf-v6-chart-color-gold-400: var(--pf-t--chart--color--yellow--400);
|
|
370
|
+
--pf-v6-chart-color-gold-500: var(--pf-t--chart--color--yellow--500);
|
|
371
|
+
--pf-v6-chart-color-orange-100: var(--pf-t--chart--color--orange--100);
|
|
372
|
+
--pf-v6-chart-color-orange-200: var(--pf-t--chart--color--orange--200);
|
|
373
|
+
--pf-v6-chart-color-orange-300: var(--pf-t--chart--color--orange--300);
|
|
374
|
+
--pf-v6-chart-color-orange-400: var(--pf-t--chart--color--orange--400);
|
|
375
|
+
--pf-v6-chart-color-orange-500: var(--pf-t--chart--color--orange--500);
|
|
376
|
+
--pf-v6-chart-color-red-100: var(--pf-t--chart--color--red--100);
|
|
377
|
+
--pf-v6-chart-color-red-200: var(--pf-t--chart--color--red--200);
|
|
378
|
+
--pf-v6-chart-color-red-300: var(--pf-t--chart--color--red--300);
|
|
379
|
+
--pf-v6-chart-color-red-400: var(--pf-t--chart--color--red--400);
|
|
380
|
+
--pf-v6-chart-color-red-500: var(--pf-t--chart--color--red--500);
|
|
381
|
+
--pf-v6-chart-color-black-100: var(--pf-t--chart--color--black--100);
|
|
382
|
+
--pf-v6-chart-color-black-200: var(--pf-t--chart--color--black--200);
|
|
383
|
+
--pf-v6-chart-color-black-300: var(--pf-t--chart--color--black--300);
|
|
384
|
+
--pf-v6-chart-color-black-400: var(--pf-t--chart--color--black--400);
|
|
385
|
+
--pf-v6-chart-color-black-500: var(--pf-t--chart--color--black--500);
|
|
386
|
+
--pf-v6-chart-color-red-orange-100: var(--pf-t--chart--color--red-orange--100);
|
|
387
|
+
--pf-v6-chart-color-red-orange-200: var(--pf-t--chart--color--red-orange--200);
|
|
388
|
+
--pf-v6-chart-color-red-orange-300: var(--pf-t--chart--color--red-orange--300);
|
|
389
|
+
--pf-v6-chart-color-red-orange-400: var(--pf-t--chart--color--red-orange--400);
|
|
390
|
+
--pf-v6-chart-color-red-orange-500: var(--pf-t--chart--color--red-orange--500);
|
|
386
391
|
--pf-v6-chart-global--FontSize--xs: var(--pf-t--chart--global--FontSize--xs);
|
|
387
392
|
--pf-v6-chart-global--FontSize--sm: var(--pf-t--chart--global--FontSize--sm);
|
|
388
393
|
--pf-v6-chart-global--FontSize--lg: var(--pf-t--chart--global--FontSize--lg);
|
|
@@ -571,11 +576,11 @@
|
|
|
571
576
|
--pf-v6-chart-theme--blue--ColorScale--300: var(--pf-t--chart--theme--colorscales--blue--colorscale--300);
|
|
572
577
|
--pf-v6-chart-theme--blue--ColorScale--400: var(--pf-t--chart--theme--colorscales--blue--colorscale--400);
|
|
573
578
|
--pf-v6-chart-theme--blue--ColorScale--500: var(--pf-t--chart--theme--colorscales--blue--colorscale--500);
|
|
574
|
-
--pf-v6-chart-theme--cyan--ColorScale--100: var(--pf-t--chart--theme--colorscales--
|
|
575
|
-
--pf-v6-chart-theme--cyan--ColorScale--200: var(--pf-t--chart--theme--colorscales--
|
|
576
|
-
--pf-v6-chart-theme--cyan--ColorScale--300: var(--pf-t--chart--theme--colorscales--
|
|
577
|
-
--pf-v6-chart-theme--cyan--ColorScale--400: var(--pf-t--chart--theme--colorscales--
|
|
578
|
-
--pf-v6-chart-theme--cyan--ColorScale--500: var(--pf-t--chart--theme--colorscales--
|
|
579
|
+
--pf-v6-chart-theme--cyan--ColorScale--100: var(--pf-t--chart--theme--colorscales--teal--colorscale--100);
|
|
580
|
+
--pf-v6-chart-theme--cyan--ColorScale--200: var(--pf-t--chart--theme--colorscales--teal--colorscale--200);
|
|
581
|
+
--pf-v6-chart-theme--cyan--ColorScale--300: var(--pf-t--chart--theme--colorscales--teal--colorscale--300);
|
|
582
|
+
--pf-v6-chart-theme--cyan--ColorScale--400: var(--pf-t--chart--theme--colorscales--teal--colorscale--400);
|
|
583
|
+
--pf-v6-chart-theme--cyan--ColorScale--500: var(--pf-t--chart--theme--colorscales--teal--colorscale--500);
|
|
579
584
|
--pf-v6-chart-theme--gold--ColorScale--100: var(--pf-t--chart--theme--colorscales--yellow--colorscale--100);
|
|
580
585
|
--pf-v6-chart-theme--gold--ColorScale--200: var(--pf-t--chart--theme--colorscales--yellow--colorscale--200);
|
|
581
586
|
--pf-v6-chart-theme--gold--ColorScale--300: var(--pf-t--chart--theme--colorscales--yellow--colorscale--300);
|
package/patternfly-charts.scss
CHANGED
|
@@ -28,59 +28,66 @@ $chart: #{$pf-prefix} + 'chart';
|
|
|
28
28
|
// Chart colors
|
|
29
29
|
// blue
|
|
30
30
|
--#{$chart}-color-blue-100: var(--pf-t--chart--color--blue--100);
|
|
31
|
-
--#{$chart}-color-blue-200: var(--pf-t--chart--color--blue--
|
|
32
|
-
--#{$chart}-color-blue-300: var(--pf-t--chart--color--blue--
|
|
33
|
-
--#{$chart}-color-blue-400: var(--pf-t--chart--color--blue--
|
|
34
|
-
--#{$chart}-color-blue-500: var(--pf-t--chart--color--blue--
|
|
31
|
+
--#{$chart}-color-blue-200: var(--pf-t--chart--color--blue--200);
|
|
32
|
+
--#{$chart}-color-blue-300: var(--pf-t--chart--color--blue--300);
|
|
33
|
+
--#{$chart}-color-blue-400: var(--pf-t--chart--color--blue--400);
|
|
34
|
+
--#{$chart}-color-blue-500: var(--pf-t--chart--color--blue--500);
|
|
35
35
|
|
|
36
36
|
// green
|
|
37
|
-
--#{$chart}-color-green-100: var(--pf-t--chart--color--
|
|
38
|
-
--#{$chart}-color-green-200: var(--pf-t--chart--color--
|
|
39
|
-
--#{$chart}-color-green-300: var(--pf-t--chart--color--
|
|
40
|
-
--#{$chart}-color-green-400: var(--pf-t--chart--color--
|
|
41
|
-
--#{$chart}-color-green-500: var(--pf-t--chart--color--
|
|
37
|
+
--#{$chart}-color-green-100: var(--pf-t--chart--color--green--100);
|
|
38
|
+
--#{$chart}-color-green-200: var(--pf-t--chart--color--green--200);
|
|
39
|
+
--#{$chart}-color-green-300: var(--pf-t--chart--color--green--300);
|
|
40
|
+
--#{$chart}-color-green-400: var(--pf-t--chart--color--green--400);
|
|
41
|
+
--#{$chart}-color-green-500: var(--pf-t--chart--color--green--500);
|
|
42
42
|
|
|
43
43
|
// cyan
|
|
44
|
-
--#{$chart}-color-cyan-100: var(--pf-t--chart--color--
|
|
45
|
-
--#{$chart}-color-cyan-200: var(--pf-t--chart--color--
|
|
46
|
-
--#{$chart}-color-cyan-300: var(--pf-t--chart--color--
|
|
47
|
-
--#{$chart}-color-cyan-400: var(--pf-t--chart--color--
|
|
48
|
-
--#{$chart}-color-cyan-500: var(--pf-t--chart--color--
|
|
44
|
+
--#{$chart}-color-cyan-100: var(--pf-t--chart--color--teal--100);
|
|
45
|
+
--#{$chart}-color-cyan-200: var(--pf-t--chart--color--teal--200);
|
|
46
|
+
--#{$chart}-color-cyan-300: var(--pf-t--chart--color--teal--300);
|
|
47
|
+
--#{$chart}-color-cyan-400: var(--pf-t--chart--color--teal--400);
|
|
48
|
+
--#{$chart}-color-cyan-500: var(--pf-t--chart--color--teal--500);
|
|
49
49
|
|
|
50
50
|
// purple
|
|
51
|
-
--#{$chart}-color-purple-100: var(--pf-t--chart--color--
|
|
52
|
-
--#{$chart}-color-purple-200: var(--pf-t--chart--color--
|
|
53
|
-
--#{$chart}-color-purple-300: var(--pf-t--chart--color--
|
|
54
|
-
--#{$chart}-color-purple-400: var(--pf-t--chart--color--
|
|
55
|
-
--#{$chart}-color-purple-500: var(--pf-t--chart--color--
|
|
51
|
+
--#{$chart}-color-purple-100: var(--pf-t--chart--color--purple--100);
|
|
52
|
+
--#{$chart}-color-purple-200: var(--pf-t--chart--color--purple--200);
|
|
53
|
+
--#{$chart}-color-purple-300: var(--pf-t--chart--color--purple--300);
|
|
54
|
+
--#{$chart}-color-purple-400: var(--pf-t--chart--color--purple--400);
|
|
55
|
+
--#{$chart}-color-purple-500: var(--pf-t--chart--color--purple--500);
|
|
56
56
|
|
|
57
57
|
// gold
|
|
58
|
-
--#{$chart}-color-gold-100: var(--pf-t--chart--color--
|
|
59
|
-
--#{$chart}-color-gold-200: var(--pf-t--chart--color--
|
|
60
|
-
--#{$chart}-color-gold-300: var(--pf-t--chart--color--
|
|
61
|
-
--#{$chart}-color-gold-400: var(--pf-t--chart--color--
|
|
62
|
-
--#{$chart}-color-gold-500: var(--pf-t--chart--color--
|
|
58
|
+
--#{$chart}-color-gold-100: var(--pf-t--chart--color--yellow--100);
|
|
59
|
+
--#{$chart}-color-gold-200: var(--pf-t--chart--color--yellow--200);
|
|
60
|
+
--#{$chart}-color-gold-300: var(--pf-t--chart--color--yellow--300);
|
|
61
|
+
--#{$chart}-color-gold-400: var(--pf-t--chart--color--yellow--400);
|
|
62
|
+
--#{$chart}-color-gold-500: var(--pf-t--chart--color--yellow--500);
|
|
63
63
|
|
|
64
64
|
// orange
|
|
65
|
-
--#{$chart}-color-orange-100: var(--pf-t--chart--color--
|
|
66
|
-
--#{$chart}-color-orange-200: var(--pf-t--chart--color--
|
|
67
|
-
--#{$chart}-color-orange-300: var(--pf-t--chart--color--
|
|
68
|
-
--#{$chart}-color-orange-400: var(--pf-t--chart--color--
|
|
69
|
-
--#{$chart}-color-orange-500: var(--pf-t--chart--color--
|
|
65
|
+
--#{$chart}-color-orange-100: var(--pf-t--chart--color--orange--100);
|
|
66
|
+
--#{$chart}-color-orange-200: var(--pf-t--chart--color--orange--200);
|
|
67
|
+
--#{$chart}-color-orange-300: var(--pf-t--chart--color--orange--300);
|
|
68
|
+
--#{$chart}-color-orange-400: var(--pf-t--chart--color--orange--400);
|
|
69
|
+
--#{$chart}-color-orange-500: var(--pf-t--chart--color--orange--500);
|
|
70
70
|
|
|
71
71
|
// red
|
|
72
|
-
--#{$chart}-color-red-100: var(--pf-t--chart--color--
|
|
73
|
-
--#{$chart}-color-red-200: var(--pf-t--chart--color--
|
|
74
|
-
--#{$chart}-color-red-300: var(--pf-t--chart--color--
|
|
75
|
-
--#{$chart}-color-red-400: var(--pf-t--chart--color--
|
|
76
|
-
--#{$chart}-color-red-500: var(--pf-t--chart--color--
|
|
72
|
+
--#{$chart}-color-red-100: var(--pf-t--chart--color--red--100);
|
|
73
|
+
--#{$chart}-color-red-200: var(--pf-t--chart--color--red--200);
|
|
74
|
+
--#{$chart}-color-red-300: var(--pf-t--chart--color--red--300);
|
|
75
|
+
--#{$chart}-color-red-400: var(--pf-t--chart--color--red--400);
|
|
76
|
+
--#{$chart}-color-red-500: var(--pf-t--chart--color--red--500);
|
|
77
77
|
|
|
78
78
|
// black
|
|
79
|
-
--#{$chart}-color-black-100: var(--pf-t--chart--color--
|
|
80
|
-
--#{$chart}-color-black-200: var(--pf-t--chart--color--
|
|
81
|
-
--#{$chart}-color-black-300: var(--pf-t--chart--color--
|
|
82
|
-
--#{$chart}-color-black-400: var(--pf-t--chart--color--
|
|
83
|
-
--#{$chart}-color-black-500: var(--pf-t--chart--color--
|
|
79
|
+
--#{$chart}-color-black-100: var(--pf-t--chart--color--black--100);
|
|
80
|
+
--#{$chart}-color-black-200: var(--pf-t--chart--color--black--200);
|
|
81
|
+
--#{$chart}-color-black-300: var(--pf-t--chart--color--black--300);
|
|
82
|
+
--#{$chart}-color-black-400: var(--pf-t--chart--color--black--400);
|
|
83
|
+
--#{$chart}-color-black-500: var(--pf-t--chart--color--black--500);
|
|
84
|
+
|
|
85
|
+
// red-orange
|
|
86
|
+
--#{$chart}-color-red-orange-100: var(--pf-t--chart--color--red-orange--100);
|
|
87
|
+
--#{$chart}-color-red-orange-200: var(--pf-t--chart--color--red-orange--200);
|
|
88
|
+
--#{$chart}-color-red-orange-300: var(--pf-t--chart--color--red-orange--300);
|
|
89
|
+
--#{$chart}-color-red-orange-400: var(--pf-t--chart--color--red-orange--400);
|
|
90
|
+
--#{$chart}-color-red-orange-500: var(--pf-t--chart--color--red-orange--500);
|
|
84
91
|
|
|
85
92
|
// typography
|
|
86
93
|
--#{$chart}-global--FontSize--xs: var(--pf-t--chart--global--FontSize--xs);
|
|
@@ -327,11 +334,11 @@ $chart: #{$pf-prefix} + 'chart';
|
|
|
327
334
|
--#{$chart}-theme--blue--ColorScale--500: var(--pf-t--chart--theme--colorscales--blue--colorscale--500);
|
|
328
335
|
|
|
329
336
|
// cyan
|
|
330
|
-
--#{$chart}-theme--cyan--ColorScale--100: var(--pf-t--chart--theme--colorscales--
|
|
331
|
-
--#{$chart}-theme--cyan--ColorScale--200: var(--pf-t--chart--theme--colorscales--
|
|
332
|
-
--#{$chart}-theme--cyan--ColorScale--300: var(--pf-t--chart--theme--colorscales--
|
|
333
|
-
--#{$chart}-theme--cyan--ColorScale--400: var(--pf-t--chart--theme--colorscales--
|
|
334
|
-
--#{$chart}-theme--cyan--ColorScale--500: var(--pf-t--chart--theme--colorscales--
|
|
337
|
+
--#{$chart}-theme--cyan--ColorScale--100: var(--pf-t--chart--theme--colorscales--teal--colorscale--100);
|
|
338
|
+
--#{$chart}-theme--cyan--ColorScale--200: var(--pf-t--chart--theme--colorscales--teal--colorscale--200);
|
|
339
|
+
--#{$chart}-theme--cyan--ColorScale--300: var(--pf-t--chart--theme--colorscales--teal--colorscale--300);
|
|
340
|
+
--#{$chart}-theme--cyan--ColorScale--400: var(--pf-t--chart--theme--colorscales--teal--colorscale--400);
|
|
341
|
+
--#{$chart}-theme--cyan--ColorScale--500: var(--pf-t--chart--theme--colorscales--teal--colorscale--500);
|
|
335
342
|
|
|
336
343
|
// gold
|
|
337
344
|
--#{$chart}-theme--gold--ColorScale--100: var(--pf-t--chart--theme--colorscales--yellow--colorscale--100);
|
|
@@ -340,7 +347,7 @@ $chart: #{$pf-prefix} + 'chart';
|
|
|
340
347
|
--#{$chart}-theme--gold--ColorScale--400: var(--pf-t--chart--theme--colorscales--yellow--colorscale--400);
|
|
341
348
|
--#{$chart}-theme--gold--ColorScale--500: var(--pf-t--chart--theme--colorscales--yellow--colorscale--500);
|
|
342
349
|
|
|
343
|
-
|
|
350
|
+
// gray
|
|
344
351
|
--#{$chart}-theme--gray--ColorScale--100: var(--pf-t--chart--theme--colorscales--gray--colorscale--100);
|
|
345
352
|
--#{$chart}-theme--gray--ColorScale--200: var(--pf-t--chart--theme--colorscales--gray--colorscale--200);
|
|
346
353
|
--#{$chart}-theme--gray--ColorScale--300: var(--pf-t--chart--theme--colorscales--gray--colorscale--300);
|