@patternfly/design-tokens 1.16.0 → 1.16.1
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/build/css/tokens-charts-dark.scss +4 -2
- package/build/css/tokens-charts-highcontrast-dark.scss +175 -0
- package/build/css/tokens-charts-highcontrast.scss +175 -0
- package/build/css/tokens-charts.scss +4 -2
- package/build/css/tokens-dark.scss +1 -1
- package/build/css/tokens-default.scss +1 -1
- package/build/css/tokens-felt-dark.scss +1 -1
- package/build/css/tokens-felt-glass-dark.scss +1 -1
- package/build/css/tokens-felt-glass.scss +1 -1
- package/build/css/tokens-felt-highcontrast-dark.scss +1 -1
- package/build/css/tokens-felt-highcontrast.scss +10 -2
- package/build/css/tokens-felt.scss +1 -1
- package/build/css/tokens-glass-dark.scss +1 -1
- package/build/css/tokens-glass.scss +1 -1
- package/build/css/tokens-palette.scss +1 -1
- package/build/css/tokens-redhat-highcontrast.scss +1 -1
- package/build.js +7 -1
- package/config.charts.dark.json +1 -1
- package/config.charts.highcontrast.dark.json +23 -0
- package/config.charts.highcontrast.json +23 -0
- package/config.charts.json +1 -1
- package/config.felt-highcontrast.json +2 -2
- package/config.layers.felt-highcontrast.json +2 -2
- package/config.layers.felt.json +2 -2
- package/package.json +1 -1
- package/patternfly-docs/content/token-layers-felt-dark.json +60 -16
- package/patternfly-docs/content/token-layers-felt-highcontrast.json +53027 -0
- package/patternfly-docs/content/token-layers-felt.json +65461 -0
- package/plugins/export-patternfly-tokens/dist/ui.html +9 -9
- package/plugins/export-patternfly-tokens/src/ui.tsx +8 -8
- package/tokens/default/dark/charts.dark.json +11 -3
- package/tokens/default/dark/charts.highcontrast.dark.json +11 -3
- package/tokens/default/light/charts.highcontrast.json +11 -3
- package/tokens/default/light/charts.json +11 -3
- package/tokens/felt/dark/felt.color.dark.json +41 -41
- package/tokens/felt/glass/felt.color.glass.json +9 -9
- package/tokens/felt/glass-dark/felt.color.glass.dark.json +41 -41
- package/tokens/felt/highcontrast/felt.color.highcontrast.json +9 -9
- package/tokens/felt/highcontrast-dark/felt.color.highcontrast.dark.json +9 -9
- package/tokens/felt/light/felt.color.json +9 -9
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Fri, 08 May 2026 20:06:50 GMT
|
|
4
4
|
|
|
5
5
|
@mixin pf-v6-tokens {
|
|
6
6
|
--pf-t--chart--global--BorderWidth--lg: 8;
|
|
@@ -10,9 +10,11 @@
|
|
|
10
10
|
--pf-t--chart--global--FontSize--lg: 18;
|
|
11
11
|
--pf-t--chart--global--FontSize--sm: 14;
|
|
12
12
|
--pf-t--chart--global--FontSize--xs: 12;
|
|
13
|
+
--pf-t--chart--global--fill--opacity--area: 20%;
|
|
13
14
|
--pf-t--chart--global--label--margin: 8;
|
|
14
15
|
--pf-t--chart--global--label--padding: 10;
|
|
15
|
-
--pf-t--chart--global--label--stroke: transparent;
|
|
16
|
+
--pf-t--chart--global--label--stroke--color: transparent;
|
|
17
|
+
--pf-t--chart--global--label--stroke--width: 0;
|
|
16
18
|
--pf-t--chart--global--label--text-anchor: middle;
|
|
17
19
|
--pf-t--chart--global--layout--height: 300;
|
|
18
20
|
--pf-t--chart--global--layout--padding: 50;
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Fri, 08 May 2026 20:06:50 GMT
|
|
4
|
+
|
|
5
|
+
@mixin pf-v6-tokens {
|
|
6
|
+
--pf-t--chart--global--BorderWidth--lg: 8;
|
|
7
|
+
--pf-t--chart--global--BorderWidth--sm: 2;
|
|
8
|
+
--pf-t--chart--global--BorderWidth--xs: 1;
|
|
9
|
+
--pf-t--chart--global--FontSize--2xl: 22;
|
|
10
|
+
--pf-t--chart--global--FontSize--lg: 18;
|
|
11
|
+
--pf-t--chart--global--FontSize--sm: 14;
|
|
12
|
+
--pf-t--chart--global--FontSize--xs: 12;
|
|
13
|
+
--pf-t--chart--global--fill--opacity--area: 20%;
|
|
14
|
+
--pf-t--chart--global--label--margin: 8;
|
|
15
|
+
--pf-t--chart--global--label--padding: 10;
|
|
16
|
+
--pf-t--chart--global--label--stroke--color: transparent;
|
|
17
|
+
--pf-t--chart--global--label--stroke--width: 0;
|
|
18
|
+
--pf-t--chart--global--label--text-anchor: middle;
|
|
19
|
+
--pf-t--chart--global--layout--height: 300;
|
|
20
|
+
--pf-t--chart--global--layout--padding: 50;
|
|
21
|
+
--pf-t--chart--global--layout--width: 450;
|
|
22
|
+
--pf-t--chart--global--letter-spacing: normal;
|
|
23
|
+
--pf-t--chart--global--stroke--width--sm: 2;
|
|
24
|
+
--pf-t--chart--global--stroke--width--xs: 1;
|
|
25
|
+
--pf-t--chart--global--stroke-line-cap: round;
|
|
26
|
+
--pf-t--chart--global--stroke-line-join: round;
|
|
27
|
+
--pf-t--chart--color--black--100: var(--pf-t--color--gray--50);
|
|
28
|
+
--pf-t--chart--color--black--200: var(--pf-t--color--gray--40);
|
|
29
|
+
--pf-t--chart--color--black--300: var(--pf-t--color--gray--30);
|
|
30
|
+
--pf-t--chart--color--black--400: var(--pf-t--color--gray--20);
|
|
31
|
+
--pf-t--chart--color--black--500: var(--pf-t--color--gray--10);
|
|
32
|
+
--pf-t--chart--color--blue--100: var(--pf-t--color--blue--50);
|
|
33
|
+
--pf-t--chart--color--blue--200: var(--pf-t--color--blue--40);
|
|
34
|
+
--pf-t--chart--color--blue--300: var(--pf-t--color--blue--30);
|
|
35
|
+
--pf-t--chart--color--blue--400: var(--pf-t--color--blue--20);
|
|
36
|
+
--pf-t--chart--color--blue--500: var(--pf-t--color--blue--10);
|
|
37
|
+
--pf-t--chart--color--green--100: var(--pf-t--color--green--50);
|
|
38
|
+
--pf-t--chart--color--green--200: var(--pf-t--color--green--40);
|
|
39
|
+
--pf-t--chart--color--green--300: var(--pf-t--color--green--30);
|
|
40
|
+
--pf-t--chart--color--green--400: var(--pf-t--color--green--20);
|
|
41
|
+
--pf-t--chart--color--green--500: var(--pf-t--color--green--10);
|
|
42
|
+
--pf-t--chart--color--orange--100: var(--pf-t--color--orange--50);
|
|
43
|
+
--pf-t--chart--color--orange--200: var(--pf-t--color--orange--40);
|
|
44
|
+
--pf-t--chart--color--orange--300: var(--pf-t--color--orange--30);
|
|
45
|
+
--pf-t--chart--color--orange--400: var(--pf-t--color--orange--20);
|
|
46
|
+
--pf-t--chart--color--orange--500: var(--pf-t--color--orange--10);
|
|
47
|
+
--pf-t--chart--color--purple--100: var(--pf-t--color--purple--50);
|
|
48
|
+
--pf-t--chart--color--purple--200: var(--pf-t--color--purple--40);
|
|
49
|
+
--pf-t--chart--color--purple--300: var(--pf-t--color--purple--30);
|
|
50
|
+
--pf-t--chart--color--purple--400: var(--pf-t--color--purple--20);
|
|
51
|
+
--pf-t--chart--color--purple--500: var(--pf-t--color--purple--10);
|
|
52
|
+
--pf-t--chart--color--red-orange--100: var(--pf-t--color--red-orange--50);
|
|
53
|
+
--pf-t--chart--color--red-orange--200: var(--pf-t--color--red-orange--40);
|
|
54
|
+
--pf-t--chart--color--red-orange--300: var(--pf-t--color--red-orange--30);
|
|
55
|
+
--pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--20);
|
|
56
|
+
--pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--10);
|
|
57
|
+
--pf-t--chart--color--teal--100: var(--pf-t--color--teal--50);
|
|
58
|
+
--pf-t--chart--color--teal--200: var(--pf-t--color--teal--40);
|
|
59
|
+
--pf-t--chart--color--teal--300: var(--pf-t--color--teal--30);
|
|
60
|
+
--pf-t--chart--color--teal--400: var(--pf-t--color--teal--20);
|
|
61
|
+
--pf-t--chart--color--teal--500: var(--pf-t--color--teal--10);
|
|
62
|
+
--pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--50);
|
|
63
|
+
--pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--40);
|
|
64
|
+
--pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--30);
|
|
65
|
+
--pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--20);
|
|
66
|
+
--pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--10);
|
|
67
|
+
--pf-t--chart--global--danger--color--100: var(--pf-t--color--red-orange--40);
|
|
68
|
+
--pf-t--chart--global--fill--color--100: var(--pf-t--color--gray--60);
|
|
69
|
+
--pf-t--chart--global--fill--color--200: var(--pf-t--color--gray--50);
|
|
70
|
+
--pf-t--chart--global--fill--color--300: var(--pf-t--color--gray--40);
|
|
71
|
+
--pf-t--chart--global--fill--color--400: var(--pf-t--color--gray--30);
|
|
72
|
+
--pf-t--chart--global--fill--color--500: var(--pf-t--color--gray--20);
|
|
73
|
+
--pf-t--chart--global--fill--color--700: var(--pf-t--color--gray--10);
|
|
74
|
+
--pf-t--chart--global--fill--color--900: var(--pf-t--color--white);
|
|
75
|
+
--pf-t--chart--global--fill--color--white: var(--pf-t--color--white);
|
|
76
|
+
--pf-t--chart--global--label--fill: var(--pf-t--color--white);
|
|
77
|
+
--pf-t--chart--global--success--color--100: var(--pf-t--color--blue--30);
|
|
78
|
+
--pf-t--chart--global--warning--color--100: var(--pf-t--color--orange--30);
|
|
79
|
+
--pf-t--chart--global--warning--color--200: var(--pf-t--color--yellow--30);
|
|
80
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--100: var(--pf-t--chart--color--blue--300);
|
|
81
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--200: var(--pf-t--chart--color--blue--100);
|
|
82
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--300: var(--pf-t--chart--color--blue--500);
|
|
83
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--400: var(--pf-t--chart--color--blue--200);
|
|
84
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--500: var(--pf-t--chart--color--blue--400);
|
|
85
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--100: var(--pf-t--chart--color--black--300);
|
|
86
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--200: var(--pf-t--chart--color--black--100);
|
|
87
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--300: var(--pf-t--chart--color--black--500);
|
|
88
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--400: var(--pf-t--chart--color--black--200);
|
|
89
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--500: var(--pf-t--chart--color--black--400);
|
|
90
|
+
--pf-t--chart--theme--colorscales--green--colorscale--100: var(--pf-t--chart--color--green--300);
|
|
91
|
+
--pf-t--chart--theme--colorscales--green--colorscale--200: var(--pf-t--chart--color--green--100);
|
|
92
|
+
--pf-t--chart--theme--colorscales--green--colorscale--300: var(--pf-t--chart--color--green--500);
|
|
93
|
+
--pf-t--chart--theme--colorscales--green--colorscale--400: var(--pf-t--chart--color--green--200);
|
|
94
|
+
--pf-t--chart--theme--colorscales--green--colorscale--500: var(--pf-t--chart--color--green--400);
|
|
95
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--200);
|
|
96
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--300);
|
|
97
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
|
|
98
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
|
|
99
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
|
|
100
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--100);
|
|
101
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--500);
|
|
102
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--100);
|
|
103
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--500);
|
|
104
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--100);
|
|
105
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--500);
|
|
106
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
|
|
107
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--100);
|
|
108
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
|
|
109
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--400);
|
|
110
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
|
|
111
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
|
|
112
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--400);
|
|
113
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--200);
|
|
114
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
|
|
115
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--200);
|
|
116
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--300);
|
|
117
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--200);
|
|
118
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--300);
|
|
119
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--200);
|
|
120
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--200);
|
|
121
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1000: var(--pf-t--chart--color--green--300);
|
|
122
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1100: var(--pf-t--chart--color--purple--200);
|
|
123
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1200: var(--pf-t--chart--color--orange--300);
|
|
124
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1300: var(--pf-t--chart--color--teal--200);
|
|
125
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1400: var(--pf-t--chart--color--black--300);
|
|
126
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1500: var(--pf-t--chart--color--blue--100);
|
|
127
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1600: var(--pf-t--chart--color--yellow--500);
|
|
128
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1700: var(--pf-t--chart--color--green--100);
|
|
129
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1800: var(--pf-t--chart--color--purple--500);
|
|
130
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1900: var(--pf-t--chart--color--orange--100);
|
|
131
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
|
|
132
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2000: var(--pf-t--chart--color--teal--500);
|
|
133
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2100: var(--pf-t--chart--color--black--100);
|
|
134
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2200: var(--pf-t--chart--color--blue--500);
|
|
135
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2300: var(--pf-t--chart--color--yellow--100);
|
|
136
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2400: var(--pf-t--chart--color--green--500);
|
|
137
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2500: var(--pf-t--chart--color--purple--100);
|
|
138
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2600: var(--pf-t--chart--color--orange--500);
|
|
139
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2700: var(--pf-t--chart--color--teal--100);
|
|
140
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2800: var(--pf-t--chart--color--black--500);
|
|
141
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2900: var(--pf-t--chart--color--blue--400);
|
|
142
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--200);
|
|
143
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3000: var(--pf-t--chart--color--yellow--400);
|
|
144
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3100: var(--pf-t--chart--color--green--400);
|
|
145
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3200: var(--pf-t--chart--color--purple--400);
|
|
146
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300: var(--pf-t--chart--color--orange--400);
|
|
147
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400: var(--pf-t--chart--color--teal--400);
|
|
148
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500: var(--pf-t--chart--color--black--400);
|
|
149
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--400: var(--pf-t--chart--color--purple--300);
|
|
150
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--500: var(--pf-t--chart--color--orange--200);
|
|
151
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--600: var(--pf-t--chart--color--teal--300);
|
|
152
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--700: var(--pf-t--chart--color--black--200);
|
|
153
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--800: var(--pf-t--chart--color--blue--300);
|
|
154
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--200);
|
|
155
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--100: var(--pf-t--chart--color--orange--300);
|
|
156
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--200: var(--pf-t--chart--color--orange--100);
|
|
157
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
|
|
158
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
|
|
159
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
|
|
160
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--100: var(--pf-t--chart--color--purple--300);
|
|
161
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--200: var(--pf-t--chart--color--purple--100);
|
|
162
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--300: var(--pf-t--chart--color--purple--500);
|
|
163
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--400: var(--pf-t--chart--color--purple--200);
|
|
164
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--500: var(--pf-t--chart--color--purple--400);
|
|
165
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--100: var(--pf-t--chart--color--teal--300);
|
|
166
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--200: var(--pf-t--chart--color--teal--100);
|
|
167
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--300: var(--pf-t--chart--color--teal--500);
|
|
168
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--400: var(--pf-t--chart--color--teal--200);
|
|
169
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--500: var(--pf-t--chart--color--teal--400);
|
|
170
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--100: var(--pf-t--chart--color--yellow--300);
|
|
171
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--200: var(--pf-t--chart--color--yellow--100);
|
|
172
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--300: var(--pf-t--chart--color--yellow--500);
|
|
173
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--400: var(--pf-t--chart--color--yellow--200);
|
|
174
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--500: var(--pf-t--chart--color--yellow--400);
|
|
175
|
+
}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Fri, 08 May 2026 20:06:50 GMT
|
|
4
|
+
|
|
5
|
+
@mixin pf-v6-tokens {
|
|
6
|
+
--pf-t--chart--global--BorderWidth--lg: 8;
|
|
7
|
+
--pf-t--chart--global--BorderWidth--sm: 2;
|
|
8
|
+
--pf-t--chart--global--BorderWidth--xs: 1;
|
|
9
|
+
--pf-t--chart--global--FontSize--2xl: 22;
|
|
10
|
+
--pf-t--chart--global--FontSize--lg: 18;
|
|
11
|
+
--pf-t--chart--global--FontSize--sm: 14;
|
|
12
|
+
--pf-t--chart--global--FontSize--xs: 12;
|
|
13
|
+
--pf-t--chart--global--fill--opacity--area: 10%;
|
|
14
|
+
--pf-t--chart--global--label--margin: 8;
|
|
15
|
+
--pf-t--chart--global--label--padding: 10;
|
|
16
|
+
--pf-t--chart--global--label--stroke--color: transparent;
|
|
17
|
+
--pf-t--chart--global--label--stroke--width: 0;
|
|
18
|
+
--pf-t--chart--global--label--text-anchor: middle;
|
|
19
|
+
--pf-t--chart--global--layout--height: 300;
|
|
20
|
+
--pf-t--chart--global--layout--padding: 50;
|
|
21
|
+
--pf-t--chart--global--layout--width: 450;
|
|
22
|
+
--pf-t--chart--global--letter-spacing: normal;
|
|
23
|
+
--pf-t--chart--global--stroke--width--sm: 2;
|
|
24
|
+
--pf-t--chart--global--stroke--width--xs: 1;
|
|
25
|
+
--pf-t--chart--global--stroke-line-cap: round;
|
|
26
|
+
--pf-t--chart--global--stroke-line-join: round;
|
|
27
|
+
--pf-t--chart--color--black--100: var(--pf-t--color--gray--40);
|
|
28
|
+
--pf-t--chart--color--black--200: var(--pf-t--color--gray--50);
|
|
29
|
+
--pf-t--chart--color--black--300: var(--pf-t--color--gray--60);
|
|
30
|
+
--pf-t--chart--color--black--400: var(--pf-t--color--gray--70);
|
|
31
|
+
--pf-t--chart--color--black--500: var(--pf-t--color--gray--80);
|
|
32
|
+
--pf-t--chart--color--blue--100: var(--pf-t--color--blue--40);
|
|
33
|
+
--pf-t--chart--color--blue--200: var(--pf-t--color--blue--50);
|
|
34
|
+
--pf-t--chart--color--blue--300: var(--pf-t--color--blue--60);
|
|
35
|
+
--pf-t--chart--color--blue--400: var(--pf-t--color--blue--70);
|
|
36
|
+
--pf-t--chart--color--blue--500: var(--pf-t--color--blue--80);
|
|
37
|
+
--pf-t--chart--color--green--100: var(--pf-t--color--green--40);
|
|
38
|
+
--pf-t--chart--color--green--200: var(--pf-t--color--green--50);
|
|
39
|
+
--pf-t--chart--color--green--300: var(--pf-t--color--green--60);
|
|
40
|
+
--pf-t--chart--color--green--400: var(--pf-t--color--green--70);
|
|
41
|
+
--pf-t--chart--color--green--500: var(--pf-t--color--green--80);
|
|
42
|
+
--pf-t--chart--color--orange--100: var(--pf-t--color--orange--40);
|
|
43
|
+
--pf-t--chart--color--orange--200: var(--pf-t--color--orange--50);
|
|
44
|
+
--pf-t--chart--color--orange--300: var(--pf-t--color--orange--60);
|
|
45
|
+
--pf-t--chart--color--orange--400: var(--pf-t--color--orange--70);
|
|
46
|
+
--pf-t--chart--color--orange--500: var(--pf-t--color--orange--80);
|
|
47
|
+
--pf-t--chart--color--purple--100: var(--pf-t--color--purple--40);
|
|
48
|
+
--pf-t--chart--color--purple--200: var(--pf-t--color--purple--50);
|
|
49
|
+
--pf-t--chart--color--purple--300: var(--pf-t--color--purple--60);
|
|
50
|
+
--pf-t--chart--color--purple--400: var(--pf-t--color--purple--70);
|
|
51
|
+
--pf-t--chart--color--purple--500: var(--pf-t--color--purple--80);
|
|
52
|
+
--pf-t--chart--color--red-orange--100: var(--pf-t--color--red-orange--40);
|
|
53
|
+
--pf-t--chart--color--red-orange--200: var(--pf-t--color--red-orange--50);
|
|
54
|
+
--pf-t--chart--color--red-orange--300: var(--pf-t--color--red-orange--60);
|
|
55
|
+
--pf-t--chart--color--red-orange--400: var(--pf-t--color--red-orange--70);
|
|
56
|
+
--pf-t--chart--color--red-orange--500: var(--pf-t--color--red-orange--80);
|
|
57
|
+
--pf-t--chart--color--teal--100: var(--pf-t--color--teal--40);
|
|
58
|
+
--pf-t--chart--color--teal--200: var(--pf-t--color--teal--50);
|
|
59
|
+
--pf-t--chart--color--teal--300: var(--pf-t--color--teal--60);
|
|
60
|
+
--pf-t--chart--color--teal--400: var(--pf-t--color--teal--70);
|
|
61
|
+
--pf-t--chart--color--teal--500: var(--pf-t--color--teal--80);
|
|
62
|
+
--pf-t--chart--color--yellow--100: var(--pf-t--color--yellow--40);
|
|
63
|
+
--pf-t--chart--color--yellow--200: var(--pf-t--color--yellow--50);
|
|
64
|
+
--pf-t--chart--color--yellow--300: var(--pf-t--color--yellow--60);
|
|
65
|
+
--pf-t--chart--color--yellow--400: var(--pf-t--color--yellow--70);
|
|
66
|
+
--pf-t--chart--color--yellow--500: var(--pf-t--color--yellow--80);
|
|
67
|
+
--pf-t--chart--global--danger--color--100: var(--pf-t--color--red-orange--60);
|
|
68
|
+
--pf-t--chart--global--fill--color--100: var(--pf-t--color--gray--10);
|
|
69
|
+
--pf-t--chart--global--fill--color--200: var(--pf-t--color--gray--20);
|
|
70
|
+
--pf-t--chart--global--fill--color--300: var(--pf-t--color--gray--30);
|
|
71
|
+
--pf-t--chart--global--fill--color--400: var(--pf-t--color--gray--40);
|
|
72
|
+
--pf-t--chart--global--fill--color--500: var(--pf-t--color--gray--50);
|
|
73
|
+
--pf-t--chart--global--fill--color--700: var(--pf-t--color--gray--90);
|
|
74
|
+
--pf-t--chart--global--fill--color--900: var(--pf-t--color--gray--95);
|
|
75
|
+
--pf-t--chart--global--fill--color--white: var(--pf-t--color--white);
|
|
76
|
+
--pf-t--chart--global--label--fill: var(--pf-t--color--gray--90);
|
|
77
|
+
--pf-t--chart--global--success--color--100: var(--pf-t--color--blue--60);
|
|
78
|
+
--pf-t--chart--global--warning--color--100: var(--pf-t--color--orange--50);
|
|
79
|
+
--pf-t--chart--global--warning--color--200: var(--pf-t--color--yellow--50);
|
|
80
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--100: var(--pf-t--chart--color--blue--300);
|
|
81
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--200: var(--pf-t--chart--color--blue--100);
|
|
82
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--300: var(--pf-t--chart--color--blue--500);
|
|
83
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--400: var(--pf-t--chart--color--blue--200);
|
|
84
|
+
--pf-t--chart--theme--colorscales--blue--colorscale--500: var(--pf-t--chart--color--blue--400);
|
|
85
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--100: var(--pf-t--chart--color--black--300);
|
|
86
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--200: var(--pf-t--chart--color--black--100);
|
|
87
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--300: var(--pf-t--chart--color--black--500);
|
|
88
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--400: var(--pf-t--chart--color--black--200);
|
|
89
|
+
--pf-t--chart--theme--colorscales--gray--colorscale--500: var(--pf-t--chart--color--black--400);
|
|
90
|
+
--pf-t--chart--theme--colorscales--green--colorscale--100: var(--pf-t--chart--color--green--300);
|
|
91
|
+
--pf-t--chart--theme--colorscales--green--colorscale--200: var(--pf-t--chart--color--green--100);
|
|
92
|
+
--pf-t--chart--theme--colorscales--green--colorscale--300: var(--pf-t--chart--color--green--500);
|
|
93
|
+
--pf-t--chart--theme--colorscales--green--colorscale--400: var(--pf-t--chart--color--green--200);
|
|
94
|
+
--pf-t--chart--theme--colorscales--green--colorscale--500: var(--pf-t--chart--color--green--400);
|
|
95
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300);
|
|
96
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--100);
|
|
97
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
|
|
98
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
|
|
99
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
|
|
100
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--100);
|
|
101
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--500);
|
|
102
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
|
|
103
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
|
|
104
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
|
|
105
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--400);
|
|
106
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
|
|
107
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--200);
|
|
108
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
|
|
109
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
|
|
110
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
|
|
111
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--200);
|
|
112
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--400);
|
|
113
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300);
|
|
114
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
|
|
115
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
|
|
116
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
|
|
117
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
|
|
118
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
|
|
119
|
+
--pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--500);
|
|
120
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--300);
|
|
121
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1000: var(--pf-t--chart--color--green--100);
|
|
122
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1100: var(--pf-t--chart--color--purple--500);
|
|
123
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1200: var(--pf-t--chart--color--orange--100);
|
|
124
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
|
|
125
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1400: var(--pf-t--chart--color--black--100);
|
|
126
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1500: var(--pf-t--chart--color--blue--500);
|
|
127
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1600: var(--pf-t--chart--color--yellow--100);
|
|
128
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1700: var(--pf-t--chart--color--green--500);
|
|
129
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1800: var(--pf-t--chart--color--purple--100);
|
|
130
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1900: var(--pf-t--chart--color--orange--500);
|
|
131
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
|
|
132
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2000: var(--pf-t--chart--color--teal--100);
|
|
133
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2100: var(--pf-t--chart--color--black--500);
|
|
134
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2200: var(--pf-t--chart--color--blue--200);
|
|
135
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2300: var(--pf-t--chart--color--yellow--400);
|
|
136
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2400: var(--pf-t--chart--color--green--200);
|
|
137
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2500: var(--pf-t--chart--color--purple--400);
|
|
138
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2600: var(--pf-t--chart--color--orange--200);
|
|
139
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2700: var(--pf-t--chart--color--teal--400);
|
|
140
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2800: var(--pf-t--chart--color--black--200);
|
|
141
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2900: var(--pf-t--chart--color--blue--400);
|
|
142
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--300);
|
|
143
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3000: var(--pf-t--chart--color--yellow--200);
|
|
144
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3100: var(--pf-t--chart--color--green--400);
|
|
145
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3200: var(--pf-t--chart--color--purple--200);
|
|
146
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300: var(--pf-t--chart--color--orange--400);
|
|
147
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400: var(--pf-t--chart--color--teal--200);
|
|
148
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500: var(--pf-t--chart--color--black--400);
|
|
149
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--400: var(--pf-t--chart--color--purple--300);
|
|
150
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--500: var(--pf-t--chart--color--orange--300);
|
|
151
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--600: var(--pf-t--chart--color--teal--300);
|
|
152
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--700: var(--pf-t--chart--color--black--300);
|
|
153
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--800: var(--pf-t--chart--color--blue--100);
|
|
154
|
+
--pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900: var(--pf-t--chart--color--yellow--500);
|
|
155
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--100: var(--pf-t--chart--color--orange--300);
|
|
156
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--200: var(--pf-t--chart--color--orange--100);
|
|
157
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);
|
|
158
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
|
|
159
|
+
--pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
|
|
160
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--100: var(--pf-t--chart--color--purple--300);
|
|
161
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--200: var(--pf-t--chart--color--purple--100);
|
|
162
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--300: var(--pf-t--chart--color--purple--500);
|
|
163
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--400: var(--pf-t--chart--color--purple--200);
|
|
164
|
+
--pf-t--chart--theme--colorscales--purple--colorscale--500: var(--pf-t--chart--color--purple--400);
|
|
165
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--100: var(--pf-t--chart--color--teal--300);
|
|
166
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--200: var(--pf-t--chart--color--teal--100);
|
|
167
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--300: var(--pf-t--chart--color--teal--500);
|
|
168
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--400: var(--pf-t--chart--color--teal--200);
|
|
169
|
+
--pf-t--chart--theme--colorscales--teal--colorscale--500: var(--pf-t--chart--color--teal--400);
|
|
170
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--100: var(--pf-t--chart--color--yellow--300);
|
|
171
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--200: var(--pf-t--chart--color--yellow--100);
|
|
172
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--300: var(--pf-t--chart--color--yellow--500);
|
|
173
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--400: var(--pf-t--chart--color--yellow--200);
|
|
174
|
+
--pf-t--chart--theme--colorscales--yellow--colorscale--500: var(--pf-t--chart--color--yellow--400);
|
|
175
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Fri, 08 May 2026 20:06:50 GMT
|
|
4
4
|
|
|
5
5
|
@mixin pf-v6-tokens {
|
|
6
6
|
--pf-t--chart--global--BorderWidth--lg: 8;
|
|
@@ -10,9 +10,11 @@
|
|
|
10
10
|
--pf-t--chart--global--FontSize--lg: 18;
|
|
11
11
|
--pf-t--chart--global--FontSize--sm: 14;
|
|
12
12
|
--pf-t--chart--global--FontSize--xs: 12;
|
|
13
|
+
--pf-t--chart--global--fill--opacity--area: 30%;
|
|
13
14
|
--pf-t--chart--global--label--margin: 8;
|
|
14
15
|
--pf-t--chart--global--label--padding: 10;
|
|
15
|
-
--pf-t--chart--global--label--stroke: transparent;
|
|
16
|
+
--pf-t--chart--global--label--stroke--color: transparent;
|
|
17
|
+
--pf-t--chart--global--label--stroke--width: 0;
|
|
16
18
|
--pf-t--chart--global--label--text-anchor: middle;
|
|
17
19
|
--pf-t--chart--global--layout--height: 300;
|
|
18
20
|
--pf-t--chart--global--layout--padding: 50;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Fri, 08 May 2026 20:06:51 GMT
|
|
4
4
|
|
|
5
|
-
// Only tokens that differ from base theme (
|
|
5
|
+
// Only tokens that differ from base theme (122 tokens)
|
|
6
6
|
@mixin pf-v6-tokens {
|
|
7
7
|
--pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
|
|
8
8
|
--pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
|
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
--pf-t--global--border--width--action--plain--hover: var(--pf-t--global--border--width--100);
|
|
11
11
|
--pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--200);
|
|
12
12
|
--pf-t--global--border--width--main--default: var(--pf-t--global--border--width--200);
|
|
13
|
+
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--400);
|
|
14
|
+
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
|
|
15
|
+
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--400);
|
|
13
16
|
--pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--400);
|
|
14
17
|
--pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--400);
|
|
15
18
|
--pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
|
|
@@ -49,9 +52,14 @@
|
|
|
49
52
|
--pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
|
|
50
53
|
--pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
|
|
51
54
|
--pf-t--global--border--color--subtle: var(--pf-t--global--border--color--400);
|
|
55
|
+
--pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--pill);
|
|
56
|
+
--pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--pill);
|
|
52
57
|
--pf-t--global--border--width--high-contrast--extra-strong: var(--pf-t--global--border--width--extra-strong);
|
|
53
58
|
--pf-t--global--border--width--high-contrast--regular: var(--pf-t--global--border--width--regular);
|
|
54
59
|
--pf-t--global--border--width--high-contrast--strong: var(--pf-t--global--border--width--strong);
|
|
60
|
+
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--300);
|
|
61
|
+
--pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--400);
|
|
62
|
+
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--300);
|
|
55
63
|
--pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
|
|
56
64
|
--pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
|
|
57
65
|
--pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
|
package/build.js
CHANGED
|
@@ -128,7 +128,7 @@ const build = (selector) => {
|
|
|
128
128
|
StyleDictionary.registerTransform({
|
|
129
129
|
name: 'patternfly/global/percentage',
|
|
130
130
|
type: 'value',
|
|
131
|
-
matcher: (token) => token.
|
|
131
|
+
matcher: (token) => token.path.includes('opacity') && token.original.type === 'number',
|
|
132
132
|
transformer: (token) => `${token.value}%`
|
|
133
133
|
});
|
|
134
134
|
|
|
@@ -191,6 +191,12 @@ const build = (selector) => {
|
|
|
191
191
|
const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
|
|
192
192
|
highContrastDarkExtendedSD.buildAllPlatforms();
|
|
193
193
|
|
|
194
|
+
const chartsHighContrastExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.highcontrast.json');
|
|
195
|
+
chartsHighContrastExtendedSD.buildAllPlatforms();
|
|
196
|
+
|
|
197
|
+
const chartsHighContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.highcontrast.dark.json');
|
|
198
|
+
chartsHighContrastDarkExtendedSD.buildAllPlatforms();
|
|
199
|
+
|
|
194
200
|
// Set glass tokens to initial in highcontrast themes
|
|
195
201
|
console.log('Setting glass tokens to initial in highcontrast themes...');
|
|
196
202
|
setGlassTokensToInitial(path.join(buildPath, 'tokens-highcontrast.scss'));
|
package/config.charts.dark.json
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"source": ["tokens/default/dark/palette.color.json", "tokens/default/dark/charts.highcontrast.dark.json"],
|
|
3
|
+
"platforms": {
|
|
4
|
+
"css": {
|
|
5
|
+
"transformGroup": "patternfly/css",
|
|
6
|
+
"buildPath": "build/css/",
|
|
7
|
+
"prefix": "pf-t",
|
|
8
|
+
"files": [{
|
|
9
|
+
"destination": "tokens-charts-highcontrast-dark.scss",
|
|
10
|
+
"format": "customFormat",
|
|
11
|
+
"options": {
|
|
12
|
+
"outputReferences": true
|
|
13
|
+
},
|
|
14
|
+
"filter": {
|
|
15
|
+
"attributes": {
|
|
16
|
+
"category": "chart"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"source": ["tokens/default/light/palette.color.json", "tokens/default/light/charts.highcontrast.json"],
|
|
3
|
+
"platforms": {
|
|
4
|
+
"css": {
|
|
5
|
+
"transformGroup": "patternfly/css",
|
|
6
|
+
"buildPath": "build/css/",
|
|
7
|
+
"prefix": "pf-t",
|
|
8
|
+
"files": [{
|
|
9
|
+
"destination": "tokens-charts-highcontrast.scss",
|
|
10
|
+
"format": "customFormat",
|
|
11
|
+
"options": {
|
|
12
|
+
"outputReferences": true
|
|
13
|
+
},
|
|
14
|
+
"filter": {
|
|
15
|
+
"attributes": {
|
|
16
|
+
"category": "chart"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
package/config.charts.json
CHANGED