@patternfly/design-tokens 1.13.1 → 1.14.0
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 +2 -2
- package/build/css/tokens-charts.scss +2 -2
- package/build/css/tokens-dark.scss +21 -5
- package/build/css/tokens-default.scss +90 -30
- package/build/css/tokens-highcontrast-dark.scss +392 -0
- package/build/css/tokens-highcontrast.scss +427 -0
- package/build/css/tokens-palette.scss +8 -2
- package/build.js +15 -1
- package/config.highcontrast.dark.json +23 -0
- package/config.highcontrast.json +24 -0
- package/config.palette-colors.json +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/token-layers-dark.json +4308 -966
- package/patternfly-docs/content/token-layers-default.json +4382 -1485
- package/patternfly-docs/content/tokensTable.css +16 -3
- package/patternfly-docs/content/tokensTable.js +7 -5
- package/plugins/export-patternfly-tokens/dist/code.js +87 -0
- package/plugins/export-patternfly-tokens/dist/ui.html +34212 -0
- package/plugins/export-patternfly-tokens/src/ui.tsx +12 -4
- package/tokens/dark/base.dark.json +36 -0
- package/tokens/dark/charts.dark.json +8 -8
- package/tokens/dark/palette.color.json +24 -0
- package/tokens/dark/semantic.dark.json +51 -9
- package/tokens/default/base.dimension.json +38 -6
- package/tokens/default/base.json +171 -3
- package/tokens/default/charts.json +8 -8
- package/tokens/default/palette.color.json +24 -0
- package/tokens/default/semantic.dimension.json +69 -48
- package/tokens/default/semantic.json +51 -9
- package/tokens/default/semantic.motion.json +28 -28
- package/tokens/highcontrast/base.json +559 -0
- package/tokens/highcontrast/palette.color.json +319 -0
- package/tokens/highcontrast/semantic.highcontrast.json +1758 -0
- package/tokens/highcontrast-dark/base.dark.json +421 -0
- package/tokens/highcontrast-dark/palette.color.json +319 -0
- package/tokens/highcontrast-dark/semantic.highcontrast.dark.json +1758 -0
|
@@ -0,0 +1,427 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Thu, 29 May 2025 14:58:29 GMT
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
|
|
7
|
+
--pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
|
|
8
|
+
--pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
|
|
9
|
+
--pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
|
|
10
|
+
--pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
|
|
11
|
+
--pf-t--global--color--nonstatus--green--400: #3d7019;
|
|
12
|
+
--pf-t--global--color--status--danger--300: #501600;
|
|
13
|
+
--pf-t--global--color--status--success--150: #3d7019;
|
|
14
|
+
--pf-t--global--color--status--success--300: #153300;
|
|
15
|
+
--pf-t--global--background--color--100: var(--pf-t--color--white);
|
|
16
|
+
--pf-t--global--background--color--200: var(--pf-t--color--gray--10);
|
|
17
|
+
--pf-t--global--background--color--300: var(--pf-t--color--gray--20);
|
|
18
|
+
--pf-t--global--background--color--400: var(--pf-t--color--gray--80);
|
|
19
|
+
--pf-t--global--background--color--450: var(--pf-t--color--gray--70);
|
|
20
|
+
--pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
|
|
21
|
+
--pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
|
|
22
|
+
--pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
|
|
23
|
+
--pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
|
|
24
|
+
--pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
|
|
25
|
+
--pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
|
|
26
|
+
--pf-t--global--border--color--100: var(--pf-t--color--gray--30);
|
|
27
|
+
--pf-t--global--border--color--200: var(--pf-t--color--gray--40);
|
|
28
|
+
--pf-t--global--border--color--300: var(--pf-t--color--gray--50);
|
|
29
|
+
--pf-t--global--border--color--450: var(--pf-t--color--gray--60);
|
|
30
|
+
--pf-t--global--border--color--50: var(--pf-t--color--gray--20);
|
|
31
|
+
--pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--400);
|
|
32
|
+
--pf-t--global--border--color--on-secondary: var(--pf-t--color--gray--80);
|
|
33
|
+
--pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--150);
|
|
34
|
+
--pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
|
|
35
|
+
--pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
|
|
36
|
+
--pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
|
|
37
|
+
--pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
|
|
38
|
+
--pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
|
|
39
|
+
--pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
|
|
40
|
+
--pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
|
|
41
|
+
--pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
|
|
42
|
+
--pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
|
|
43
|
+
--pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
|
|
44
|
+
--pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
|
|
45
|
+
--pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
|
|
46
|
+
--pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
|
|
47
|
+
--pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
|
|
48
|
+
--pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
|
|
49
|
+
--pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
|
|
50
|
+
--pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
|
|
51
|
+
--pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
|
|
52
|
+
--pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
|
|
53
|
+
--pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
|
|
54
|
+
--pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
|
|
55
|
+
--pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
|
|
56
|
+
--pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
|
|
57
|
+
--pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
|
|
58
|
+
--pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
|
|
59
|
+
--pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
|
|
60
|
+
--pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
|
|
61
|
+
--pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
|
|
62
|
+
--pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
|
|
63
|
+
--pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
|
|
64
|
+
--pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
|
|
65
|
+
--pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
|
|
66
|
+
--pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
|
|
67
|
+
--pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
|
|
68
|
+
--pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
|
|
69
|
+
--pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
|
|
70
|
+
--pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
|
|
71
|
+
--pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
|
|
72
|
+
--pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
|
|
73
|
+
--pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
|
|
74
|
+
--pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
|
|
75
|
+
--pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
|
|
76
|
+
--pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
|
|
77
|
+
--pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
|
|
78
|
+
--pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
|
|
79
|
+
--pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
|
|
80
|
+
--pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
|
|
81
|
+
--pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
|
|
82
|
+
--pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
|
|
83
|
+
--pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
|
|
84
|
+
--pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
|
|
85
|
+
--pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
|
|
86
|
+
--pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
|
|
87
|
+
--pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
|
|
88
|
+
--pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
|
|
89
|
+
--pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
|
|
90
|
+
--pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
|
|
91
|
+
--pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
|
|
92
|
+
--pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
|
|
93
|
+
--pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
|
|
94
|
+
--pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
|
|
95
|
+
--pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
|
|
96
|
+
--pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
|
|
97
|
+
--pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
|
|
98
|
+
--pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
|
|
99
|
+
--pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
|
|
100
|
+
--pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
|
|
101
|
+
--pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
|
|
102
|
+
--pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
|
|
103
|
+
--pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
|
|
104
|
+
--pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
|
|
105
|
+
--pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
|
|
106
|
+
--pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
|
|
107
|
+
--pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
|
|
108
|
+
--pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
|
|
109
|
+
--pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
|
|
110
|
+
--pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
|
|
111
|
+
--pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
|
|
112
|
+
--pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
|
|
113
|
+
--pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
|
|
114
|
+
--pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
|
|
115
|
+
--pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
|
|
116
|
+
--pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
|
|
117
|
+
--pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
|
|
118
|
+
--pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
|
|
119
|
+
--pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
|
|
120
|
+
--pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--300);
|
|
121
|
+
--pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--300);
|
|
122
|
+
--pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
|
|
123
|
+
--pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
|
|
124
|
+
--pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
|
|
125
|
+
--pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
|
|
126
|
+
--pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
|
|
127
|
+
--pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
|
|
128
|
+
--pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
|
|
129
|
+
--pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
|
|
130
|
+
--pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
|
|
131
|
+
--pf-t--global--icon--color--300: var(--pf-t--color--white);
|
|
132
|
+
--pf-t--global--icon--color--brand--clicked: var(--pf-t--color--blue--70);
|
|
133
|
+
--pf-t--global--icon--color--brand--default: var(--pf-t--color--blue--60);
|
|
134
|
+
--pf-t--global--icon--color--brand--hover: var(--pf-t--color--blue--70);
|
|
135
|
+
--pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--150);
|
|
136
|
+
--pf-t--global--text--color--100: var(--pf-t--color--gray--95);
|
|
137
|
+
--pf-t--global--text--color--200: var(--pf-t--color--gray--60);
|
|
138
|
+
--pf-t--global--text--color--250: var(--pf-t--color--gray--70);
|
|
139
|
+
--pf-t--global--text--color--300: var(--pf-t--color--white);
|
|
140
|
+
--pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
|
|
141
|
+
--pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
|
|
142
|
+
--pf-t--global--text--color--brand--clicked: var(--pf-t--color--blue--80);
|
|
143
|
+
--pf-t--global--text--color--brand--default: var(--pf-t--color--blue--70);
|
|
144
|
+
--pf-t--global--text--color--brand--hover: var(--pf-t--color--blue--80);
|
|
145
|
+
--pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
|
|
146
|
+
--pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
|
|
147
|
+
--pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
|
|
148
|
+
--pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
|
|
149
|
+
--pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
|
|
150
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
|
|
151
|
+
--pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
|
|
152
|
+
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
|
|
153
|
+
--pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
|
|
154
|
+
--pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
|
|
155
|
+
--pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
|
|
156
|
+
--pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
|
|
157
|
+
--pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
|
|
158
|
+
--pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
|
|
159
|
+
--pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
|
|
160
|
+
--pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
|
|
161
|
+
--pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
|
|
162
|
+
--pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
|
|
163
|
+
--pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
|
|
164
|
+
--pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
|
|
165
|
+
--pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
|
|
166
|
+
--pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--400);
|
|
167
|
+
--pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
|
|
168
|
+
--pf-t--global--border--color--default: var(--pf-t--global--border--color--450);
|
|
169
|
+
--pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
|
|
170
|
+
--pf-t--global--border--color--hover: var(--pf-t--global--color--brand--300);
|
|
171
|
+
--pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--500);
|
|
172
|
+
--pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--400);
|
|
173
|
+
--pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--500);
|
|
174
|
+
--pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--500);
|
|
175
|
+
--pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--400);
|
|
176
|
+
--pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--500);
|
|
177
|
+
--pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--500);
|
|
178
|
+
--pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--500);
|
|
179
|
+
--pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--500);
|
|
180
|
+
--pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--400);
|
|
181
|
+
--pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--500);
|
|
182
|
+
--pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--500);
|
|
183
|
+
--pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--400);
|
|
184
|
+
--pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--500);
|
|
185
|
+
--pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--500);
|
|
186
|
+
--pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--400);
|
|
187
|
+
--pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--500);
|
|
188
|
+
--pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--500);
|
|
189
|
+
--pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--400);
|
|
190
|
+
--pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--500);
|
|
191
|
+
--pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--500);
|
|
192
|
+
--pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--400);
|
|
193
|
+
--pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--500);
|
|
194
|
+
--pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--500);
|
|
195
|
+
--pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--400);
|
|
196
|
+
--pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--500);
|
|
197
|
+
--pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
|
|
198
|
+
--pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
|
|
199
|
+
--pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
|
|
200
|
+
--pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--200);
|
|
201
|
+
--pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
|
|
202
|
+
--pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
|
|
203
|
+
--pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
|
|
204
|
+
--pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--400);
|
|
205
|
+
--pf-t--global--color--brand--default: var(--pf-t--global--color--brand--300);
|
|
206
|
+
--pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--400);
|
|
207
|
+
--pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--400);
|
|
208
|
+
--pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--300);
|
|
209
|
+
--pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--400);
|
|
210
|
+
--pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
|
|
211
|
+
--pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
|
|
212
|
+
--pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
|
|
213
|
+
--pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--100);
|
|
214
|
+
--pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--50);
|
|
215
|
+
--pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--100);
|
|
216
|
+
--pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
|
|
217
|
+
--pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
|
|
218
|
+
--pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
|
|
219
|
+
--pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
|
|
220
|
+
--pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
|
|
221
|
+
--pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
|
|
222
|
+
--pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
|
|
223
|
+
--pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
|
|
224
|
+
--pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
|
|
225
|
+
--pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
|
|
226
|
+
--pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
|
|
227
|
+
--pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
|
|
228
|
+
--pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
|
|
229
|
+
--pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
|
|
230
|
+
--pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
|
|
231
|
+
--pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
|
|
232
|
+
--pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
|
|
233
|
+
--pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
|
|
234
|
+
--pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
|
|
235
|
+
--pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
|
|
236
|
+
--pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
|
|
237
|
+
--pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--300);
|
|
238
|
+
--pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--200);
|
|
239
|
+
--pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--300);
|
|
240
|
+
--pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
|
|
241
|
+
--pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--300);
|
|
242
|
+
--pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--200);
|
|
243
|
+
--pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--300);
|
|
244
|
+
--pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--200);
|
|
245
|
+
--pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
|
|
246
|
+
--pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
|
|
247
|
+
--pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
|
|
248
|
+
--pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
|
|
249
|
+
--pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
|
|
250
|
+
--pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
|
|
251
|
+
--pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
|
|
252
|
+
--pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
|
|
253
|
+
--pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
|
|
254
|
+
--pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
|
|
255
|
+
--pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--200);
|
|
256
|
+
--pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--200);
|
|
257
|
+
--pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--200);
|
|
258
|
+
--pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--200);
|
|
259
|
+
--pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--200);
|
|
260
|
+
--pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
|
|
261
|
+
--pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
|
|
262
|
+
--pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
|
|
263
|
+
--pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
|
|
264
|
+
--pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--200);
|
|
265
|
+
--pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
|
|
266
|
+
--pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
|
|
267
|
+
--pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
|
|
268
|
+
--pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--150);
|
|
269
|
+
--pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
|
|
270
|
+
--pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
|
|
271
|
+
--pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--200);
|
|
272
|
+
--pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--250);
|
|
273
|
+
--pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--350);
|
|
274
|
+
--pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
|
|
275
|
+
--pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
|
|
276
|
+
--pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
|
|
277
|
+
--pf-t--global--text--color--required: var(--pf-t--global--text--color--500);
|
|
278
|
+
--pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
|
|
279
|
+
--pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
|
|
280
|
+
--pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
|
|
281
|
+
--pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--200);
|
|
282
|
+
--pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--200);
|
|
283
|
+
--pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--600);
|
|
284
|
+
--pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--500);
|
|
285
|
+
--pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--600);
|
|
286
|
+
--pf-t--global--text--color--subtle: var(--pf-t--global--text--color--250);
|
|
287
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--primary--default);
|
|
288
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--primary--default);
|
|
289
|
+
--pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
|
|
290
|
+
--pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
|
|
291
|
+
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
|
|
292
|
+
--pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
|
|
293
|
+
--pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
|
|
294
|
+
--pf-t--global--border--color--high-contrast: var(--pf-t--global--border--color--default);
|
|
295
|
+
--pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
296
|
+
--pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
297
|
+
--pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
|
|
298
|
+
--pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
|
|
299
|
+
--pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
|
|
300
|
+
--pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
|
|
301
|
+
--pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
|
|
302
|
+
--pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
|
|
303
|
+
--pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
|
|
304
|
+
--pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
|
|
305
|
+
--pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
|
|
306
|
+
--pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
|
|
307
|
+
--pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
|
|
308
|
+
--pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
|
|
309
|
+
--pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
|
|
310
|
+
--pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
|
|
311
|
+
--pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
|
|
312
|
+
--pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
|
|
313
|
+
--pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
|
|
314
|
+
--pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
|
|
315
|
+
--pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
|
|
316
|
+
--pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
|
|
317
|
+
--pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
|
|
318
|
+
--pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
|
|
319
|
+
--pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
|
|
320
|
+
--pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
|
|
321
|
+
--pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
|
|
322
|
+
--pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
|
|
323
|
+
--pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
|
|
324
|
+
--pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
|
|
325
|
+
--pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
|
|
326
|
+
--pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
|
|
327
|
+
--pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
|
|
328
|
+
--pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
|
|
329
|
+
--pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
|
|
330
|
+
--pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
|
|
331
|
+
--pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
|
|
332
|
+
--pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
|
|
333
|
+
--pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
|
|
334
|
+
--pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
|
|
335
|
+
--pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
|
|
336
|
+
--pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
|
|
337
|
+
--pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
|
|
338
|
+
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
|
|
339
|
+
--pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
|
|
340
|
+
--pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
341
|
+
--pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
342
|
+
--pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
|
|
343
|
+
--pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
|
|
344
|
+
--pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
|
|
345
|
+
--pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
|
|
346
|
+
--pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
|
|
347
|
+
--pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
|
|
348
|
+
--pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
|
|
349
|
+
--pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
|
|
350
|
+
--pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
|
|
351
|
+
--pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
|
|
352
|
+
--pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
|
|
353
|
+
--pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
|
|
354
|
+
--pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
|
|
355
|
+
--pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
|
|
356
|
+
--pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
|
|
357
|
+
--pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
|
|
358
|
+
--pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
|
|
359
|
+
--pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
|
|
360
|
+
--pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
|
|
361
|
+
--pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
|
|
362
|
+
--pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
|
|
363
|
+
--pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
|
|
364
|
+
--pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
|
|
365
|
+
--pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
|
|
366
|
+
--pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
|
|
367
|
+
--pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
|
|
368
|
+
--pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
|
|
369
|
+
--pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
|
|
370
|
+
--pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
|
|
371
|
+
--pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
|
|
372
|
+
--pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
|
|
373
|
+
--pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
|
|
374
|
+
--pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
|
|
375
|
+
--pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
|
|
376
|
+
--pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
|
|
377
|
+
--pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
|
|
378
|
+
--pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
|
|
379
|
+
--pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
|
|
380
|
+
--pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
|
|
381
|
+
--pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
|
|
382
|
+
--pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
|
|
383
|
+
--pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
|
|
384
|
+
--pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
|
|
385
|
+
--pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
|
|
386
|
+
--pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
|
|
387
|
+
--pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
|
|
388
|
+
--pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
|
|
389
|
+
--pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
|
|
390
|
+
--pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
|
|
391
|
+
--pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
|
|
392
|
+
--pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
|
|
393
|
+
--pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
|
|
394
|
+
--pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
|
|
395
|
+
--pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
|
|
396
|
+
--pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
|
|
397
|
+
--pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
|
|
398
|
+
--pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
399
|
+
--pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
400
|
+
--pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
|
|
401
|
+
--pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
|
|
402
|
+
--pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
|
|
403
|
+
--pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
|
|
404
|
+
--pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
|
|
405
|
+
--pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
|
|
406
|
+
--pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
|
|
407
|
+
--pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
|
|
408
|
+
--pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
|
|
409
|
+
--pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
|
|
410
|
+
--pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
|
|
411
|
+
--pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
|
|
412
|
+
--pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
|
|
413
|
+
--pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
|
|
414
|
+
--pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
|
|
415
|
+
--pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
|
|
416
|
+
--pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
|
|
417
|
+
--pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
|
|
418
|
+
--pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
|
|
419
|
+
--pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
|
|
420
|
+
--pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
|
|
421
|
+
--pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
|
|
422
|
+
--pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
|
|
423
|
+
--pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
|
|
424
|
+
--pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
|
|
425
|
+
--pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
|
|
426
|
+
--pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
|
|
427
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 29 May 2025 14:58:29 GMT
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
:root {
|
|
6
6
|
--pf-t--color--black: #000000;
|
|
7
7
|
--pf-t--color--blue--10: #e0f0ff;
|
|
8
8
|
--pf-t--color--blue--20: #b9dafc;
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
--pf-t--color--blue--50: #0066cc;
|
|
12
12
|
--pf-t--color--blue--60: #004d99;
|
|
13
13
|
--pf-t--color--blue--70: #003366;
|
|
14
|
+
--pf-t--color--blue--80: #002250;
|
|
14
15
|
--pf-t--color--gray--10: #f2f2f2;
|
|
15
16
|
--pf-t--color--gray--20: #e0e0e0;
|
|
16
17
|
--pf-t--color--gray--30: #c7c7c7;
|
|
@@ -35,6 +36,7 @@
|
|
|
35
36
|
--pf-t--color--orange--50: #ca6c0f;
|
|
36
37
|
--pf-t--color--orange--60: #9e4a06;
|
|
37
38
|
--pf-t--color--orange--70: #732e00;
|
|
39
|
+
--pf-t--color--orange--80: #4d1f00;
|
|
38
40
|
--pf-t--color--purple--10: #ece6ff;
|
|
39
41
|
--pf-t--color--purple--20: #d0c5f4;
|
|
40
42
|
--pf-t--color--purple--30: #b6a6e9;
|
|
@@ -42,6 +44,7 @@
|
|
|
42
44
|
--pf-t--color--purple--50: #5e40be;
|
|
43
45
|
--pf-t--color--purple--60: #3d2785;
|
|
44
46
|
--pf-t--color--purple--70: #21134d;
|
|
47
|
+
--pf-t--color--purple--80: #1b0d33;
|
|
45
48
|
--pf-t--color--red--10: #fce3e3;
|
|
46
49
|
--pf-t--color--red--20: #fbc5c5;
|
|
47
50
|
--pf-t--color--red--30: #f9a8a8;
|
|
@@ -49,6 +52,7 @@
|
|
|
49
52
|
--pf-t--color--red--50: #ee0000;
|
|
50
53
|
--pf-t--color--red--60: #a60000;
|
|
51
54
|
--pf-t--color--red--70: #5f0000;
|
|
55
|
+
--pf-t--color--red--80: #3f0000;
|
|
52
56
|
--pf-t--color--red-orange--10: #ffe3d9;
|
|
53
57
|
--pf-t--color--red-orange--20: #fbbea8;
|
|
54
58
|
--pf-t--color--red-orange--30: #f89b78;
|
|
@@ -63,6 +67,7 @@
|
|
|
63
67
|
--pf-t--color--teal--50: #37a3a3;
|
|
64
68
|
--pf-t--color--teal--60: #147878;
|
|
65
69
|
--pf-t--color--teal--70: #004d4d;
|
|
70
|
+
--pf-t--color--teal--80: #003333;
|
|
66
71
|
--pf-t--color--white: #ffffff;
|
|
67
72
|
--pf-t--color--yellow--10: #fff4cc;
|
|
68
73
|
--pf-t--color--yellow--20: #ffe072;
|
|
@@ -71,4 +76,5 @@
|
|
|
71
76
|
--pf-t--color--yellow--50: #b98412;
|
|
72
77
|
--pf-t--color--yellow--60: #96640f;
|
|
73
78
|
--pf-t--color--yellow--70: #73480b;
|
|
79
|
+
--pf-t--color--yellow--80: #54330b;
|
|
74
80
|
}
|
package/build.js
CHANGED
|
@@ -13,6 +13,8 @@ const getTokenLayer = ({ filePath }) => {
|
|
|
13
13
|
if (filePath.includes('base.motion.json')) return ['base', 'motion'];
|
|
14
14
|
if (filePath.includes('chart')) return ['chart'];
|
|
15
15
|
if (filePath.includes('palette.color.json')) return ['palette'];
|
|
16
|
+
if (filePath.includes('semantic.highcontrast.json')) return ['semantic', 'colors'];
|
|
17
|
+
if (filePath.includes('semantic.highcontrast.dark.json')) return ['semantic', 'colors'];
|
|
16
18
|
return ['palette'];
|
|
17
19
|
};
|
|
18
20
|
// returns subdirectory within 'tokens' directory (ex: default, dark, etc)
|
|
@@ -82,7 +84,7 @@ const build = (selector) => {
|
|
|
82
84
|
name: 'patternfly/global/px',
|
|
83
85
|
type: 'value',
|
|
84
86
|
matcher: (token) =>
|
|
85
|
-
token.attributes.type === 'border' ||
|
|
87
|
+
(token.attributes.type === 'border' && token.original.type === 'number') ||
|
|
86
88
|
(token.attributes.type === 'box-shadow' && token.attributes.item !== 'color'),
|
|
87
89
|
transformer: (token) => `${token.value}px`
|
|
88
90
|
});
|
|
@@ -108,6 +110,13 @@ const build = (selector) => {
|
|
|
108
110
|
transformer: (token, options) => `${options.prefix}--${token.path.join('--')}`
|
|
109
111
|
});
|
|
110
112
|
|
|
113
|
+
StyleDictionary.registerTransform({
|
|
114
|
+
name: 'patternfly/global/round-decimel',
|
|
115
|
+
type: 'value',
|
|
116
|
+
matcher: (token) => token.type === 'number',
|
|
117
|
+
transformer: (token) => { console.log(token); return Math.round(parseFloat(token.value) * 100) / 100 }
|
|
118
|
+
});
|
|
119
|
+
|
|
111
120
|
// Reigster custom transform group
|
|
112
121
|
StyleDictionary.registerTransformGroup({
|
|
113
122
|
name: 'patternfly/css',
|
|
@@ -120,6 +129,7 @@ const build = (selector) => {
|
|
|
120
129
|
'size/rem',
|
|
121
130
|
'color/css',
|
|
122
131
|
// custom transforms
|
|
132
|
+
'patternfly/global/round-decimel',
|
|
123
133
|
'patternfly/global/px',
|
|
124
134
|
'patternfly/global/pxToRem',
|
|
125
135
|
'patternfly/global/ms',
|
|
@@ -133,6 +143,8 @@ const build = (selector) => {
|
|
|
133
143
|
const paletteExtendedSD = StyleDictionary.extend(__dirname + '/config.palette-colors.json');
|
|
134
144
|
const chartsExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.json');
|
|
135
145
|
const chartsDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.charts.dark.json');
|
|
146
|
+
const highContrastDefaultExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.json');
|
|
147
|
+
const highContrastDarkExtendedSD = StyleDictionary.extend(__dirname + '/config.highcontrast.dark.json');
|
|
136
148
|
const layersSD = StyleDictionary.extend(__dirname + '/config.layers.json');
|
|
137
149
|
const layersDarkSD = StyleDictionary.extend(__dirname + '/config.layers.dark.json');
|
|
138
150
|
|
|
@@ -142,6 +154,8 @@ const build = (selector) => {
|
|
|
142
154
|
paletteExtendedSD.buildAllPlatforms();
|
|
143
155
|
chartsExtendedSD.buildAllPlatforms();
|
|
144
156
|
chartsDarkExtendedSD.buildAllPlatforms();
|
|
157
|
+
highContrastDefaultExtendedSD.buildAllPlatforms();
|
|
158
|
+
highContrastDarkExtendedSD.buildAllPlatforms();
|
|
145
159
|
layersSD.buildAllPlatforms();
|
|
146
160
|
layersDarkSD.buildAllPlatforms();
|
|
147
161
|
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"source": ["tokens/highcontrast-dark/*.json"],
|
|
3
|
+
"platforms": {
|
|
4
|
+
"css": {
|
|
5
|
+
"transformGroup": "patternfly/css",
|
|
6
|
+
"buildPath": "build/css/",
|
|
7
|
+
"prefix": "pf-t",
|
|
8
|
+
"files": [{
|
|
9
|
+
"destination": "tokens-highcontrast-dark.scss",
|
|
10
|
+
"format": "customFormat",
|
|
11
|
+
"options": {
|
|
12
|
+
"outputReferences": true
|
|
13
|
+
},
|
|
14
|
+
"filter": {
|
|
15
|
+
"attributes": {
|
|
16
|
+
"category": "global"
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
]
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"source": ["tokens/highcontrast/*.json"],
|
|
3
|
+
"basePxFontSize": 16,
|
|
4
|
+
"platforms": {
|
|
5
|
+
"css": {
|
|
6
|
+
"transformGroup": "patternfly/css",
|
|
7
|
+
"buildPath": "build/css/",
|
|
8
|
+
"prefix": "pf-t",
|
|
9
|
+
"files": [{
|
|
10
|
+
"destination": "tokens-highcontrast.scss",
|
|
11
|
+
"format": "customFormat",
|
|
12
|
+
"options": {
|
|
13
|
+
"outputReferences": true
|
|
14
|
+
},
|
|
15
|
+
"filter": {
|
|
16
|
+
"attributes": {
|
|
17
|
+
"category": "global"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
]
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
package/package.json
CHANGED