@vector-im/compound-design-tokens 0.0.2 → 0.0.3
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/README.md +2 -1
- package/assets/web/css/cpd-common.css +53 -2
- package/assets/web/css/cpd-dark-hc-mq.css +238 -81
- package/assets/web/css/cpd-dark-hc.css +239 -82
- package/assets/web/css/cpd-dark-mq.css +311 -154
- package/assets/web/css/cpd-dark.css +312 -155
- package/assets/web/css/cpd-light-hc-mq.css +311 -154
- package/assets/web/css/cpd-light-hc.css +312 -155
- package/assets/web/css/cpd-light-mq.css +171 -14
- package/assets/web/css/cpd-light.css +172 -15
- package/assets/web/icons/$icons.json +1 -0
- package/assets/web/icons/chat.svg +3 -0
- package/assets/web/icons/check-circle.svg +3 -0
- package/assets/web/icons/check.svg +3 -0
- package/assets/web/icons/chevron.svg +3 -0
- package/assets/web/icons/close.svg +3 -0
- package/assets/web/icons/computer.svg +3 -0
- package/assets/web/icons/delete.svg +3 -0
- package/assets/web/icons/error.svg +3 -0
- package/assets/web/icons/info.svg +3 -0
- package/assets/web/icons/lock.svg +3 -0
- package/assets/web/icons/mobile.svg +3 -0
- package/assets/web/icons/thread.svg +1 -0
- package/assets/web/icons/user.svg +3 -0
- package/assets/web/icons/visibility-invisible.svg +3 -0
- package/assets/web/icons/visibility-visible.svg +3 -0
- package/assets/web/icons/web-browser.svg +3 -0
- package/assets/web/js/cpdDark.d.ts +457 -0
- package/assets/web/js/cpdDark.js +379 -155
- package/assets/web/js/cpdDarkHc.d.ts +457 -0
- package/assets/web/js/cpdDarkHc.js +306 -82
- package/assets/web/js/cpdLight.d.ts +457 -0
- package/assets/web/js/cpdLight.js +240 -16
- package/assets/web/js/cpdLightHc.d.ts +457 -0
- package/assets/web/js/cpdLightHc.js +379 -155
- package/icons/$icons.json +1 -0
- package/icons/chat.svg +3 -0
- package/icons/check-circle.svg +3 -0
- package/icons/check.svg +3 -0
- package/icons/chevron.svg +3 -0
- package/icons/close.svg +3 -0
- package/icons/computer.svg +3 -0
- package/icons/delete.svg +3 -0
- package/icons/error.svg +3 -0
- package/icons/info.svg +3 -0
- package/icons/lock.svg +3 -0
- package/icons/mobile.svg +3 -0
- package/icons/thread.svg +1 -0
- package/icons/user.svg +3 -0
- package/icons/visibility-invisible.svg +3 -0
- package/icons/visibility-visible.svg +3 -0
- package/icons/web-browser.svg +3 -0
- package/package.json +7 -3
|
@@ -36,7 +36,6 @@ export const cpdFontFamilyMono = "Inconsolata";
|
|
|
36
36
|
export const cpdFontWeightRegular = "400";
|
|
37
37
|
export const cpdFontWeightMedium = "500";
|
|
38
38
|
export const cpdFontWeightSemibold = "600";
|
|
39
|
-
export const cpdFontWeightBold = "700";
|
|
40
39
|
export const cpdFontLineHeightMinimum = "1";
|
|
41
40
|
export const cpdFontLineHeightTight = "1.25";
|
|
42
41
|
export const cpdFontLineHeightRegular = "1.5";
|
|
@@ -77,76 +76,93 @@ export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter";
|
|
|
77
76
|
export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter";
|
|
78
77
|
export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter";
|
|
79
78
|
export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter";
|
|
80
|
-
export const
|
|
81
|
-
export const
|
|
82
|
-
export const
|
|
83
|
-
export const
|
|
84
|
-
export const
|
|
85
|
-
export const
|
|
86
|
-
export const
|
|
87
|
-
export const
|
|
88
|
-
export const
|
|
89
|
-
export const
|
|
90
|
-
export const
|
|
91
|
-
export const
|
|
92
|
-
export const
|
|
93
|
-
export const
|
|
94
|
-
export const
|
|
79
|
+
export const cpdIconChat = "icons/chat.svg";
|
|
80
|
+
export const cpdIconCheckCircle = "icons/check-circle.svg";
|
|
81
|
+
export const cpdIconCheck = "icons/check.svg";
|
|
82
|
+
export const cpdIconChevron = "icons/chevron.svg";
|
|
83
|
+
export const cpdIconClose = "icons/close.svg";
|
|
84
|
+
export const cpdIconComputer = "icons/computer.svg";
|
|
85
|
+
export const cpdIconDelete = "icons/delete.svg";
|
|
86
|
+
export const cpdIconError = "icons/error.svg";
|
|
87
|
+
export const cpdIconInfo = "icons/info.svg";
|
|
88
|
+
export const cpdIconLock = "icons/lock.svg";
|
|
89
|
+
export const cpdIconMobile = "icons/mobile.svg";
|
|
90
|
+
export const cpdIconThread = "icons/thread.svg";
|
|
91
|
+
export const cpdIconUser = "icons/user.svg";
|
|
92
|
+
export const cpdIconVisibilityInvisible = "icons/visibility-invisible.svg";
|
|
93
|
+
export const cpdIconVisibilityVisible = "icons/visibility-visible.svg";
|
|
94
|
+
export const cpdIconWebBrowser = "icons/web-browser.svg";
|
|
95
|
+
export const cpdColorThemeBg = "#101317";
|
|
96
|
+
export const cpdColorGray100 = "#181a1f";
|
|
97
|
+
export const cpdColorGray200 = "#1d1f24";
|
|
98
|
+
export const cpdColorGray300 = "#26282d";
|
|
99
|
+
export const cpdColorGray400 = "#2b2e33";
|
|
100
|
+
export const cpdColorGray500 = "#3c3f44";
|
|
101
|
+
export const cpdColorGray600 = "#4a4f55";
|
|
102
|
+
export const cpdColorGray700 = "#606770";
|
|
103
|
+
export const cpdColorGray800 = "#79818d";
|
|
104
|
+
export const cpdColorGray900 = "#acb4bd";
|
|
105
|
+
export const cpdColorGray1000 = "#b8bfc7";
|
|
106
|
+
export const cpdColorGray1100 = "#c8ced5";
|
|
107
|
+
export const cpdColorGray1200 = "#d5dae1";
|
|
108
|
+
export const cpdColorGray1300 = "#ebeef2";
|
|
109
|
+
export const cpdColorGray1400 = "#f2f5f7";
|
|
110
|
+
export const cpdColorRed100 = "#3e0000";
|
|
95
111
|
export const cpdColorRed200 = "#470000";
|
|
96
|
-
export const cpdColorRed300 = "#
|
|
112
|
+
export const cpdColorRed300 = "#590000";
|
|
97
113
|
export const cpdColorRed400 = "#640000";
|
|
98
114
|
export const cpdColorRed500 = "#830009";
|
|
99
|
-
export const cpdColorRed600 = "#
|
|
100
|
-
export const cpdColorRed700 = "#
|
|
115
|
+
export const cpdColorRed600 = "#9f0d1e";
|
|
116
|
+
export const cpdColorRed700 = "#c81e28";
|
|
101
117
|
export const cpdColorRed800 = "#f52f33";
|
|
102
|
-
export const cpdColorRed900 = "#
|
|
103
|
-
export const cpdColorRed1000 = "#
|
|
118
|
+
export const cpdColorRed900 = "#ff968c";
|
|
119
|
+
export const cpdColorRed1000 = "#ffa79d";
|
|
104
120
|
export const cpdColorRed1100 = "#ffbdb5";
|
|
105
|
-
export const cpdColorRed1200 = "#
|
|
106
|
-
export const cpdColorRed1300 = "#
|
|
121
|
+
export const cpdColorRed1200 = "#ffcfc8";
|
|
122
|
+
export const cpdColorRed1300 = "#ffe9e6";
|
|
107
123
|
export const cpdColorRed1400 = "#fff2ef";
|
|
108
124
|
export const cpdColorOrange100 = "#3c0000";
|
|
109
125
|
export const cpdColorOrange200 = "#470000";
|
|
110
126
|
export const cpdColorOrange300 = "#580000";
|
|
111
127
|
export const cpdColorOrange400 = "#650000";
|
|
112
|
-
export const cpdColorOrange500 = "#
|
|
113
|
-
export const cpdColorOrange600 = "#
|
|
114
|
-
export const cpdColorOrange700 = "#
|
|
128
|
+
export const cpdColorOrange500 = "#830500";
|
|
129
|
+
export const cpdColorOrange600 = "#972206";
|
|
130
|
+
export const cpdColorOrange700 = "#b44007";
|
|
115
131
|
export const cpdColorOrange800 = "#d15f0b";
|
|
116
132
|
export const cpdColorOrange900 = "#f89d58";
|
|
117
|
-
export const cpdColorOrange1000 = "#
|
|
118
|
-
export const cpdColorOrange1100 = "#
|
|
133
|
+
export const cpdColorOrange1000 = "#faad73";
|
|
134
|
+
export const cpdColorOrange1100 = "#fdc197";
|
|
119
135
|
export const cpdColorOrange1200 = "#fed0b1";
|
|
120
|
-
export const cpdColorOrange1300 = "#
|
|
121
|
-
export const cpdColorOrange1400 = "#
|
|
136
|
+
export const cpdColorOrange1300 = "#ffeadb";
|
|
137
|
+
export const cpdColorOrange1400 = "#fff2ea";
|
|
122
138
|
export const cpdColorYellow100 = "#3a0300";
|
|
123
139
|
export const cpdColorYellow200 = "#410900";
|
|
124
140
|
export const cpdColorYellow300 = "#4c1400";
|
|
125
141
|
export const cpdColorYellow400 = "#541d00";
|
|
126
142
|
export const cpdColorYellow500 = "#682e03";
|
|
127
|
-
export const cpdColorYellow600 = "#
|
|
128
|
-
export const cpdColorYellow700 = "#
|
|
143
|
+
export const cpdColorYellow600 = "#7c3e02";
|
|
144
|
+
export const cpdColorYellow700 = "#985600";
|
|
129
145
|
export const cpdColorYellow800 = "#b47200";
|
|
130
|
-
export const cpdColorYellow900 = "#
|
|
146
|
+
export const cpdColorYellow900 = "#e3aa00";
|
|
131
147
|
export const cpdColorYellow1000 = "#ebb607";
|
|
132
|
-
export const cpdColorYellow1100 = "#
|
|
148
|
+
export const cpdColorYellow1100 = "#f7c816";
|
|
133
149
|
export const cpdColorYellow1200 = "#fed632";
|
|
134
|
-
export const cpdColorYellow1300 = "#
|
|
150
|
+
export const cpdColorYellow1300 = "#ffedb1";
|
|
135
151
|
export const cpdColorYellow1400 = "#fff4d0";
|
|
136
|
-
export const cpdColorLime100 = "#
|
|
137
|
-
export const cpdColorLime200 = "#
|
|
138
|
-
export const cpdColorLime300 = "#
|
|
152
|
+
export const cpdColorLime100 = "#002000";
|
|
153
|
+
export const cpdColorLime200 = "#002600";
|
|
154
|
+
export const cpdColorLime300 = "#003000";
|
|
139
155
|
export const cpdColorLime400 = "#003700";
|
|
140
156
|
export const cpdColorLime500 = "#004a00";
|
|
141
157
|
export const cpdColorLime600 = "#005c00";
|
|
142
158
|
export const cpdColorLime700 = "#187611";
|
|
143
159
|
export const cpdColorLime800 = "#31941d";
|
|
144
160
|
export const cpdColorLime900 = "#5eca2f";
|
|
145
|
-
export const cpdColorLime1000 = "#
|
|
146
|
-
export const cpdColorLime1100 = "#
|
|
147
|
-
export const cpdColorLime1200 = "#
|
|
161
|
+
export const cpdColorLime1000 = "#6ad639";
|
|
162
|
+
export const cpdColorLime1100 = "#92e175";
|
|
163
|
+
export const cpdColorLime1200 = "#afe99a";
|
|
148
164
|
export const cpdColorLime1300 = "#daf6d0";
|
|
149
|
-
export const cpdColorLime1400 = "#
|
|
165
|
+
export const cpdColorLime1400 = "#e9f9e3";
|
|
150
166
|
export const cpdColorGreen100 = "#001f0e";
|
|
151
167
|
export const cpdColorGreen200 = "#002513";
|
|
152
168
|
export const cpdColorGreen300 = "#002e1b";
|
|
@@ -156,78 +172,286 @@ export const cpdColorGreen600 = "#005a43";
|
|
|
156
172
|
export const cpdColorGreen700 = "#00745c";
|
|
157
173
|
export const cpdColorGreen800 = "#109173";
|
|
158
174
|
export const cpdColorGreen900 = "#37c998";
|
|
159
|
-
export const cpdColorGreen1000 = "#
|
|
160
|
-
export const cpdColorGreen1100 = "#
|
|
161
|
-
export const cpdColorGreen1200 = "#
|
|
162
|
-
export const cpdColorGreen1300 = "#
|
|
163
|
-
export const cpdColorGreen1400 = "#
|
|
175
|
+
export const cpdColorGreen1000 = "#61d2a6";
|
|
176
|
+
export const cpdColorGreen1100 = "#8fddbc";
|
|
177
|
+
export const cpdColorGreen1200 = "#ace6cc";
|
|
178
|
+
export const cpdColorGreen1300 = "#d9f4e7";
|
|
179
|
+
export const cpdColorGreen1400 = "#e9f8f1";
|
|
164
180
|
export const cpdColorCyan100 = "#001448";
|
|
165
181
|
export const cpdColorCyan200 = "#001b4e";
|
|
166
182
|
export const cpdColorCyan300 = "#002559";
|
|
167
183
|
export const cpdColorCyan400 = "#002d61";
|
|
168
|
-
export const cpdColorCyan500 = "#
|
|
184
|
+
export const cpdColorCyan500 = "#003f75";
|
|
169
185
|
export const cpdColorCyan600 = "#005188";
|
|
170
|
-
export const cpdColorCyan700 = "#
|
|
186
|
+
export const cpdColorCyan700 = "#006ca4";
|
|
171
187
|
export const cpdColorCyan800 = "#008aba";
|
|
172
|
-
export const cpdColorCyan900 = "#
|
|
173
|
-
export const cpdColorCyan1000 = "#
|
|
174
|
-
export const cpdColorCyan1100 = "#
|
|
188
|
+
export const cpdColorCyan900 = "#46c3d2";
|
|
189
|
+
export const cpdColorCyan1000 = "#6bccd9";
|
|
190
|
+
export const cpdColorCyan1100 = "#93d9e2";
|
|
175
191
|
export const cpdColorCyan1200 = "#afe2e9";
|
|
176
|
-
export const cpdColorCyan1300 = "#
|
|
177
|
-
export const cpdColorCyan1400 = "#
|
|
192
|
+
export const cpdColorCyan1300 = "#dbf2f5";
|
|
193
|
+
export const cpdColorCyan1400 = "#eaf7f9";
|
|
178
194
|
export const cpdColorBlue100 = "#00095d";
|
|
179
|
-
export const cpdColorBlue200 = "#
|
|
180
|
-
export const cpdColorBlue300 = "#
|
|
195
|
+
export const cpdColorBlue200 = "#001264";
|
|
196
|
+
export const cpdColorBlue300 = "#001e6f";
|
|
181
197
|
export const cpdColorBlue400 = "#032677";
|
|
182
|
-
export const cpdColorBlue500 = "#
|
|
183
|
-
export const cpdColorBlue600 = "#
|
|
198
|
+
export const cpdColorBlue500 = "#083891";
|
|
199
|
+
export const cpdColorBlue600 = "#0b49ab";
|
|
184
200
|
export const cpdColorBlue700 = "#0e61d1";
|
|
185
|
-
export const cpdColorBlue800 = "#
|
|
186
|
-
export const cpdColorBlue900 = "#
|
|
187
|
-
export const cpdColorBlue1000 = "#
|
|
201
|
+
export const cpdColorBlue800 = "#337fe9";
|
|
202
|
+
export const cpdColorBlue900 = "#89b5f6";
|
|
203
|
+
export const cpdColorBlue1000 = "#9ac0f8";
|
|
188
204
|
export const cpdColorBlue1100 = "#b2cffa";
|
|
189
|
-
export const cpdColorBlue1200 = "#
|
|
205
|
+
export const cpdColorBlue1200 = "#c5dbfc";
|
|
190
206
|
export const cpdColorBlue1300 = "#e4eefe";
|
|
191
|
-
export const cpdColorBlue1400 = "#
|
|
207
|
+
export const cpdColorBlue1400 = "#eff5fe";
|
|
192
208
|
export const cpdColorPurple100 = "#1c005a";
|
|
193
|
-
export const cpdColorPurple200 = "#
|
|
209
|
+
export const cpdColorPurple200 = "#22006a";
|
|
194
210
|
export const cpdColorPurple300 = "#2c0080";
|
|
195
211
|
export const cpdColorPurple400 = "#350090";
|
|
196
|
-
export const cpdColorPurple500 = "#
|
|
212
|
+
export const cpdColorPurple500 = "#4a0db1";
|
|
197
213
|
export const cpdColorPurple600 = "#5a27c6";
|
|
198
|
-
export const cpdColorPurple700 = "#
|
|
214
|
+
export const cpdColorPurple700 = "#7343e6";
|
|
199
215
|
export const cpdColorPurple800 = "#8b66f8";
|
|
200
216
|
export const cpdColorPurple900 = "#b6a7ff";
|
|
201
217
|
export const cpdColorPurple1000 = "#c0b5ff";
|
|
202
|
-
export const cpdColorPurple1100 = "#
|
|
203
|
-
export const cpdColorPurple1200 = "#
|
|
218
|
+
export const cpdColorPurple1100 = "#cec7ff";
|
|
219
|
+
export const cpdColorPurple1200 = "#dad5ff";
|
|
204
220
|
export const cpdColorPurple1300 = "#eeebff";
|
|
205
|
-
export const cpdColorPurple1400 = "#
|
|
206
|
-
export const cpdColorFuchsia100 = "#
|
|
221
|
+
export const cpdColorPurple1400 = "#f5f3ff";
|
|
222
|
+
export const cpdColorFuchsia100 = "#2e0044";
|
|
207
223
|
export const cpdColorFuchsia200 = "#37004e";
|
|
208
|
-
export const cpdColorFuchsia300 = "#
|
|
224
|
+
export const cpdColorFuchsia300 = "#46005e";
|
|
209
225
|
export const cpdColorFuchsia400 = "#4f0368";
|
|
210
226
|
export const cpdColorFuchsia500 = "#65177d";
|
|
211
227
|
export const cpdColorFuchsia600 = "#7d2394";
|
|
212
228
|
export const cpdColorFuchsia700 = "#a233b3";
|
|
213
|
-
export const cpdColorFuchsia800 = "#
|
|
214
|
-
export const cpdColorFuchsia900 = "#
|
|
229
|
+
export const cpdColorFuchsia800 = "#c153cb";
|
|
230
|
+
export const cpdColorFuchsia900 = "#dd9de3";
|
|
215
231
|
export const cpdColorFuchsia1000 = "#e3abe7";
|
|
216
|
-
export const cpdColorFuchsia1100 = "#
|
|
232
|
+
export const cpdColorFuchsia1100 = "#eac0ed";
|
|
217
233
|
export const cpdColorFuchsia1200 = "#f0cff2";
|
|
218
|
-
export const cpdColorFuchsia1300 = "#
|
|
234
|
+
export const cpdColorFuchsia1300 = "#f8e9f9";
|
|
219
235
|
export const cpdColorFuchsia1400 = "#fbf1fb";
|
|
220
236
|
export const cpdColorPink100 = "#3c0012";
|
|
221
237
|
export const cpdColorPink200 = "#450018";
|
|
222
238
|
export const cpdColorPink300 = "#550024";
|
|
223
239
|
export const cpdColorPink400 = "#61002d";
|
|
224
|
-
export const cpdColorPink500 = "#
|
|
225
|
-
export const cpdColorPink600 = "#
|
|
240
|
+
export const cpdColorPink500 = "#7c0c41";
|
|
241
|
+
export const cpdColorPink600 = "#99114f";
|
|
226
242
|
export const cpdColorPink700 = "#c51761";
|
|
227
|
-
export const cpdColorPink800 = "#
|
|
243
|
+
export const cpdColorPink800 = "#f12c75";
|
|
228
244
|
export const cpdColorPink900 = "#ff92ac";
|
|
229
|
-
export const cpdColorPink1000 = "#
|
|
230
|
-
export const cpdColorPink1100 = "#
|
|
245
|
+
export const cpdColorPink1000 = "#ffa4b9";
|
|
246
|
+
export const cpdColorPink1100 = "#ffbbca";
|
|
231
247
|
export const cpdColorPink1200 = "#ffccd7";
|
|
232
|
-
export const cpdColorPink1300 = "#
|
|
233
|
-
export const cpdColorPink1400 = "#
|
|
248
|
+
export const cpdColorPink1300 = "#ffe8ed";
|
|
249
|
+
export const cpdColorPink1400 = "#fff1f4";
|
|
250
|
+
export const cpdColorAlphaGray100 = "hsla(286, 31%, 82%, 0.04)";
|
|
251
|
+
export const cpdColorAlphaGray200 = "hsla(280, 41%, 90%, 0.06)";
|
|
252
|
+
export const cpdColorAlphaGray300 = "hsla(270, 37%, 93%, 0.1)";
|
|
253
|
+
export const cpdColorAlphaGray400 = "hsla(227, 29%, 91%, 0.13)";
|
|
254
|
+
export const cpdColorAlphaGray500 = "hsla(225, 46%, 95%, 0.2)";
|
|
255
|
+
export const cpdColorAlphaGray600 = "hsla(213, 85%, 95%, 0.27)";
|
|
256
|
+
export const cpdColorAlphaGray700 = "hsla(214, 79%, 93%, 0.39)";
|
|
257
|
+
export const cpdColorAlphaGray800 = "hsla(216, 94%, 93%, 0.51)";
|
|
258
|
+
export const cpdColorAlphaGray900 = "hsla(211, 91%, 96%, 0.72)";
|
|
259
|
+
export const cpdColorAlphaGray1000 = "hsla(213, 100%, 97%, 0.76)";
|
|
260
|
+
export const cpdColorAlphaGray1100 = "hsla(212, 100%, 97%, 0.82)";
|
|
261
|
+
export const cpdColorAlphaGray1200 = "hsla(217, 77%, 97%, 0.88)";
|
|
262
|
+
export const cpdColorAlphaGray1300 = "hsla(214, 78%, 98%, 0.95)";
|
|
263
|
+
export const cpdColorAlphaGray1400 = "hsla(204, 71%, 99%, 0.97)";
|
|
264
|
+
export const cpdColorAlphaRed100 = "hsl(0, 100%, 12%, 1)";
|
|
265
|
+
export const cpdColorAlphaRed200 = "hsl(0, 100%, 14%, 1)";
|
|
266
|
+
export const cpdColorAlphaRed300 = "hsl(0, 100%, 18%, 1)";
|
|
267
|
+
export const cpdColorAlphaRed400 = "hsl(0, 100%, 20%, 1)";
|
|
268
|
+
export const cpdColorAlphaRed500 = "hsl(356, 100%, 26%, 1)";
|
|
269
|
+
export const cpdColorAlphaRed600 = "hsla(354, 99%, 52%, 0.6)";
|
|
270
|
+
export const cpdColorAlphaRed700 = "hsla(357, 100%, 57%, 0.77)";
|
|
271
|
+
export const cpdColorAlphaRed800 = "hsla(359, 100%, 59%, 0.96)";
|
|
272
|
+
export const cpdColorAlphaRed900 = "hsl(5, 100%, 78%, 1)";
|
|
273
|
+
export const cpdColorAlphaRed1000 = "hsl(6, 100%, 81%, 1)";
|
|
274
|
+
export const cpdColorAlphaRed1100 = "hsl(6, 100%, 86%, 1)";
|
|
275
|
+
export const cpdColorAlphaRed1200 = "hsl(8, 100%, 89%, 1)";
|
|
276
|
+
export const cpdColorAlphaRed1300 = "hsl(7, 100%, 95%, 1)";
|
|
277
|
+
export const cpdColorAlphaRed1400 = "hsl(11, 100%, 97%, 1)";
|
|
278
|
+
export const cpdColorAlphaOrange100 = "hsl(0, 100%, 12%, 1)";
|
|
279
|
+
export const cpdColorAlphaOrange200 = "hsl(0, 100%, 14%, 1)";
|
|
280
|
+
export const cpdColorAlphaOrange300 = "hsl(0, 100%, 17%, 1)";
|
|
281
|
+
export const cpdColorAlphaOrange400 = "hsl(0, 100%, 20%, 1)";
|
|
282
|
+
export const cpdColorAlphaOrange500 = "hsl(2, 100%, 26%, 1)";
|
|
283
|
+
export const cpdColorAlphaOrange600 = "hsla(12, 100%, 39%, 0.74)";
|
|
284
|
+
export const cpdColorAlphaOrange700 = "hsla(20, 100%, 49%, 0.7)";
|
|
285
|
+
export const cpdColorAlphaOrange800 = "hsla(26, 99%, 51%, 0.81)";
|
|
286
|
+
export const cpdColorAlphaOrange900 = "hsla(26, 98%, 67%, 0.98)";
|
|
287
|
+
export const cpdColorAlphaOrange1000 = "hsla(26, 100%, 73%, 0.98)";
|
|
288
|
+
export const cpdColorAlphaOrange1100 = "hsl(25, 96%, 79%, 1)";
|
|
289
|
+
export const cpdColorAlphaOrange1200 = "hsl(24, 98%, 85%, 1)";
|
|
290
|
+
export const cpdColorAlphaOrange1300 = "hsl(25, 100%, 93%, 1)";
|
|
291
|
+
export const cpdColorAlphaOrange1400 = "hsl(23, 100%, 96%, 1)";
|
|
292
|
+
export const cpdColorAlphaYellow100 = "hsl(3, 100%, 11%, 1)";
|
|
293
|
+
export const cpdColorAlphaYellow200 = "hsl(8, 100%, 13%, 1)";
|
|
294
|
+
export const cpdColorAlphaYellow300 = "hsl(16, 100%, 15%, 1)";
|
|
295
|
+
export const cpdColorAlphaYellow400 = "hsl(21, 100%, 17%, 1)";
|
|
296
|
+
export const cpdColorAlphaYellow500 = "hsla(26, 100%, 23%, 0.87)";
|
|
297
|
+
export const cpdColorAlphaYellow600 = "hsla(30, 100%, 26%, 0.92)";
|
|
298
|
+
export const cpdColorAlphaYellow700 = "hsl(34, 100%, 30%, 1)";
|
|
299
|
+
export const cpdColorAlphaYellow800 = "hsl(38, 100%, 35%, 1)";
|
|
300
|
+
export const cpdColorAlphaYellow900 = "hsl(45, 100%, 45%, 1)";
|
|
301
|
+
export const cpdColorAlphaYellow1000 = "hsla(46, 99%, 51%, 0.92)";
|
|
302
|
+
export const cpdColorAlphaYellow1100 = "hsla(48, 99%, 54%, 0.97)";
|
|
303
|
+
export const cpdColorAlphaYellow1200 = "hsl(48, 99%, 60%, 1)";
|
|
304
|
+
export const cpdColorAlphaYellow1300 = "hsl(46, 100%, 85%, 1)";
|
|
305
|
+
export const cpdColorAlphaYellow1400 = "hsl(46, 100%, 91%, 1)";
|
|
306
|
+
export const cpdColorAlphaLime100 = "hsl(120, 100%, 6%, 1)";
|
|
307
|
+
export const cpdColorAlphaLime200 = "hsl(120, 100%, 8%, 1)";
|
|
308
|
+
export const cpdColorAlphaLime300 = "hsl(120, 100%, 9%, 1)";
|
|
309
|
+
export const cpdColorAlphaLime400 = "hsl(120, 100%, 11%, 1)";
|
|
310
|
+
export const cpdColorAlphaLime500 = "hsl(120, 100%, 15%, 1)";
|
|
311
|
+
export const cpdColorAlphaLime600 = "hsl(120, 100%, 18%, 1)";
|
|
312
|
+
export const cpdColorAlphaLime700 = "hsla(114, 100%, 52%, 0.42)";
|
|
313
|
+
export const cpdColorAlphaLime800 = "hsla(109, 99%, 57%, 0.55)";
|
|
314
|
+
export const cpdColorAlphaLime900 = "hsla(101, 99%, 60%, 0.78)";
|
|
315
|
+
export const cpdColorAlphaLime1000 = "hsla(101, 99%, 62%, 0.83)";
|
|
316
|
+
export const cpdColorAlphaLime1100 = "hsla(103, 97%, 75%, 0.88)";
|
|
317
|
+
export const cpdColorAlphaLime1200 = "hsla(103, 98%, 83%, 0.91)";
|
|
318
|
+
export const cpdColorAlphaLime1300 = "hsla(105, 91%, 92%, 0.97)";
|
|
319
|
+
export const cpdColorAlphaLime1400 = "hsla(104, 92%, 95%, 0.98)";
|
|
320
|
+
export const cpdColorAlphaGreen100 = "hsl(147, 100%, 6%, 1)";
|
|
321
|
+
export const cpdColorAlphaGreen200 = "hsl(151, 100%, 7%, 1)";
|
|
322
|
+
export const cpdColorAlphaGreen300 = "hsl(155, 100%, 9%, 1)";
|
|
323
|
+
export const cpdColorAlphaGreen400 = "hsl(158, 100%, 11%, 1)";
|
|
324
|
+
export const cpdColorAlphaGreen500 = "hsl(162, 100%, 14%, 1)";
|
|
325
|
+
export const cpdColorAlphaGreen600 = "hsl(165, 100%, 18%, 1)";
|
|
326
|
+
export const cpdColorAlphaGreen700 = "hsl(168, 100%, 23%, 1)";
|
|
327
|
+
export const cpdColorAlphaGreen800 = "hsla(165, 98%, 53%, 0.54)";
|
|
328
|
+
export const cpdColorAlphaGreen900 = "hsla(159, 97%, 62%, 0.78)";
|
|
329
|
+
export const cpdColorAlphaGreen1000 = "hsla(156, 100%, 73%, 0.81)";
|
|
330
|
+
export const cpdColorAlphaGreen1100 = "hsla(154, 98%, 82%, 0.86)";
|
|
331
|
+
export const cpdColorAlphaGreen1200 = "hsla(153, 94%, 87%, 0.9)";
|
|
332
|
+
export const cpdColorAlphaGreen1300 = "hsla(152, 88%, 94%, 0.96)";
|
|
333
|
+
export const cpdColorAlphaGreen1400 = "hsla(150, 80%, 96%, 0.98)";
|
|
334
|
+
export const cpdColorAlphaCyan100 = "hsl(223, 100%, 14%, 1)";
|
|
335
|
+
export const cpdColorAlphaCyan200 = "hsl(219, 100%, 15%, 1)";
|
|
336
|
+
export const cpdColorAlphaCyan300 = "hsl(215, 100%, 18%, 1)";
|
|
337
|
+
export const cpdColorAlphaCyan400 = "hsl(212, 100%, 19%, 1)";
|
|
338
|
+
export const cpdColorAlphaCyan500 = "hsl(208, 100%, 23%, 1)";
|
|
339
|
+
export const cpdColorAlphaCyan600 = "hsl(204, 100%, 27%, 1)";
|
|
340
|
+
export const cpdColorAlphaCyan700 = "hsl(200, 100%, 32%, 1)";
|
|
341
|
+
export const cpdColorAlphaCyan800 = "hsl(195, 100%, 37%, 1)";
|
|
342
|
+
export const cpdColorAlphaCyan900 = "hsla(186, 99%, 66%, 0.81)";
|
|
343
|
+
export const cpdColorAlphaCyan1000 = "hsla(187, 99%, 74%, 0.84)";
|
|
344
|
+
export const cpdColorAlphaCyan1100 = "hsla(187, 98%, 82%, 0.88)";
|
|
345
|
+
export const cpdColorAlphaCyan1200 = "hsla(188, 97%, 87%, 0.91)";
|
|
346
|
+
export const cpdColorAlphaCyan1300 = "hsla(187, 93%, 94%, 0.96)";
|
|
347
|
+
export const cpdColorAlphaCyan1400 = "hsla(187, 89%, 97%, 0.98)";
|
|
348
|
+
export const cpdColorAlphaBlue100 = "hsl(234, 100%, 18%, 1)";
|
|
349
|
+
export const cpdColorAlphaBlue200 = "hsl(229, 100%, 20%, 1)";
|
|
350
|
+
export const cpdColorAlphaBlue300 = "hsl(224, 100%, 22%, 1)";
|
|
351
|
+
export const cpdColorAlphaBlue400 = "hsla(222, 100%, 28%, 0.82)";
|
|
352
|
+
export const cpdColorAlphaBlue500 = "hsla(219, 99%, 50%, 0.53)";
|
|
353
|
+
export const cpdColorAlphaBlue600 = "hsla(217, 99%, 51%, 0.64)";
|
|
354
|
+
export const cpdColorAlphaBlue700 = "hsla(215, 98%, 52%, 0.81)";
|
|
355
|
+
export const cpdColorAlphaBlue800 = "hsla(215, 99%, 60%, 0.91)";
|
|
356
|
+
export const cpdColorAlphaBlue900 = "hsla(216, 97%, 77%, 0.97)";
|
|
357
|
+
export const cpdColorAlphaBlue1000 = "hsla(216, 100%, 81%, 0.97)";
|
|
358
|
+
export const cpdColorAlphaBlue1100 = "hsla(216, 100%, 86%, 0.98)";
|
|
359
|
+
export const cpdColorAlphaBlue1200 = "hsla(216, 97%, 89%, 0.99)";
|
|
360
|
+
export const cpdColorAlphaBlue1300 = "hsl(217, 93%, 95%, 1)";
|
|
361
|
+
export const cpdColorAlphaBlue1400 = "hsl(216, 88%, 97%, 1)";
|
|
362
|
+
export const cpdColorAlphaPurple100 = "hsl(259, 100%, 18%, 1)";
|
|
363
|
+
export const cpdColorAlphaPurple200 = "hsl(259, 100%, 21%, 1)";
|
|
364
|
+
export const cpdColorAlphaPurple300 = "hsl(261, 100%, 25%, 1)";
|
|
365
|
+
export const cpdColorAlphaPurple400 = "hsl(262, 100%, 28%, 1)";
|
|
366
|
+
export const cpdColorAlphaPurple500 = "hsla(263, 98%, 52%, 0.67)";
|
|
367
|
+
export const cpdColorAlphaPurple600 = "hsla(260, 98%, 58%, 0.76)";
|
|
368
|
+
export const cpdColorAlphaPurple700 = "hsla(258, 98%, 64%, 0.9)";
|
|
369
|
+
export const cpdColorAlphaPurple800 = "hsla(255, 100%, 71%, 0.97)";
|
|
370
|
+
export const cpdColorAlphaPurple900 = "hsl(250, 100%, 83%, 1)";
|
|
371
|
+
export const cpdColorAlphaPurple1000 = "hsl(249, 100%, 86%, 1)";
|
|
372
|
+
export const cpdColorAlphaPurple1100 = "hsl(248, 100%, 89%, 1)";
|
|
373
|
+
export const cpdColorAlphaPurple1200 = "hsl(247, 100%, 92%, 1)";
|
|
374
|
+
export const cpdColorAlphaPurple1300 = "hsl(249, 100%, 96%, 1)";
|
|
375
|
+
export const cpdColorAlphaPurple1400 = "hsl(250, 100%, 98%, 1)";
|
|
376
|
+
export const cpdColorAlphaFuchsia100 = "hsl(281, 100%, 13%, 1)";
|
|
377
|
+
export const cpdColorAlphaFuchsia200 = "hsl(282, 100%, 15%, 1)";
|
|
378
|
+
export const cpdColorAlphaFuchsia300 = "hsl(285, 100%, 18%, 1)";
|
|
379
|
+
export const cpdColorAlphaFuchsia400 = "hsla(286, 100%, 23%, 0.85)";
|
|
380
|
+
export const cpdColorAlphaFuchsia500 = "hsla(288, 100%, 56%, 0.44)";
|
|
381
|
+
export const cpdColorAlphaFuchsia600 = "hsla(289, 99%, 59%, 0.54)";
|
|
382
|
+
export const cpdColorAlphaFuchsia700 = "hsla(293, 97%, 62%, 0.68)";
|
|
383
|
+
export const cpdColorAlphaFuchsia800 = "hsla(296, 99%, 70%, 0.78)";
|
|
384
|
+
export const cpdColorAlphaFuchsia900 = "hsla(295, 100%, 85%, 0.88)";
|
|
385
|
+
export const cpdColorAlphaFuchsia1000 = "hsla(296, 97%, 87%, 0.9)";
|
|
386
|
+
export const cpdColorAlphaFuchsia1100 = "hsla(296, 92%, 90%, 0.93)";
|
|
387
|
+
export const cpdColorAlphaFuchsia1200 = "hsla(297, 95%, 92%, 0.95)";
|
|
388
|
+
export const cpdColorAlphaFuchsia1300 = "hsla(296, 90%, 96%, 0.98)";
|
|
389
|
+
export const cpdColorAlphaFuchsia1400 = "hsla(300, 71%, 97%, 0.99)";
|
|
390
|
+
export const cpdColorAlphaPink100 = "hsl(342, 100%, 12%, 1)";
|
|
391
|
+
export const cpdColorAlphaPink200 = "hsl(339, 100%, 14%, 1)";
|
|
392
|
+
export const cpdColorAlphaPink300 = "hsl(335, 100%, 17%, 1)";
|
|
393
|
+
export const cpdColorAlphaPink400 = "hsl(332, 100%, 19%, 1)";
|
|
394
|
+
export const cpdColorAlphaPink500 = "hsla(333, 97%, 50%, 0.46)";
|
|
395
|
+
export const cpdColorAlphaPink600 = "hsla(334, 98%, 53%, 0.58)";
|
|
396
|
+
export const cpdColorAlphaPink700 = "hsla(335, 99%, 55%, 0.76)";
|
|
397
|
+
export const cpdColorAlphaPink800 = "hsla(338, 98%, 58%, 0.95)";
|
|
398
|
+
export const cpdColorAlphaPink900 = "hsl(346, 100%, 79%, 1)";
|
|
399
|
+
export const cpdColorAlphaPink1000 = "hsl(346, 100%, 82%, 1)";
|
|
400
|
+
export const cpdColorAlphaPink1100 = "hsl(347, 100%, 87%, 1)";
|
|
401
|
+
export const cpdColorAlphaPink1200 = "hsl(347, 100%, 90%, 1)";
|
|
402
|
+
export const cpdColorAlphaPink1300 = "hsl(347, 100%, 96%, 1)";
|
|
403
|
+
export const cpdColorAlphaPink1400 = "hsl(347, 100%, 97%, 1)";
|
|
404
|
+
export const cpdColorTextPrimary = "#f2f5f7";
|
|
405
|
+
export const cpdColorTextSecondary = "#acb4bd";
|
|
406
|
+
export const cpdColorTextPlaceholder = "#79818d";
|
|
407
|
+
export const cpdColorTextDisabled = "#79818d";
|
|
408
|
+
export const cpdColorTextActionPrimary = "#f2f5f7";
|
|
409
|
+
export const cpdColorTextActionAccent = "#37c998";
|
|
410
|
+
export const cpdColorTextLinkExternal = "#89b5f6";
|
|
411
|
+
export const cpdColorTextCriticalPrimary = "#ff968c";
|
|
412
|
+
export const cpdColorTextSuccessPrimary = "#37c998";
|
|
413
|
+
export const cpdColorTextInfoPrimary = "#89b5f6";
|
|
414
|
+
export const cpdColorTextOnSolidPrimary = "#101317";
|
|
415
|
+
export const cpdColorBgSubtlePrimary = "#2b2e33";
|
|
416
|
+
export const cpdColorBgSubtleSecondary = "#26282d";
|
|
417
|
+
export const cpdColorBgCanvasDefault = "#101317";
|
|
418
|
+
export const cpdColorBgCanvasDisabled = "#1d1f24";
|
|
419
|
+
export const cpdColorBgCanvasDefaultLevel1 = "#26282d";
|
|
420
|
+
export const cpdColorBgActionPrimaryRest = "#f2f5f7";
|
|
421
|
+
export const cpdColorBgActionPrimaryHovered = "#d5dae1";
|
|
422
|
+
export const cpdColorBgActionPrimaryPressed = "#c8ced5";
|
|
423
|
+
export const cpdColorBgActionPrimaryDisabled = "#606770";
|
|
424
|
+
export const cpdColorBgActionSecondaryRest = "#101317";
|
|
425
|
+
export const cpdColorBgActionSecondaryHovered = "hsla(280, 41%, 90%, 0.06)";
|
|
426
|
+
export const cpdColorBgActionSecondaryPressed = "hsla(270, 37%, 93%, 0.1)";
|
|
427
|
+
export const cpdColorBgCriticalPrimary = "#ff968c";
|
|
428
|
+
export const cpdColorBgCriticalHovered = "#ffa79d";
|
|
429
|
+
export const cpdColorBgCriticalSubtle = "#470000";
|
|
430
|
+
export const cpdColorBgCriticalSubtleHovered = "#590000";
|
|
431
|
+
export const cpdColorBgSuccessSubtle = "#002513";
|
|
432
|
+
export const cpdColorBgInfoSubtle = "#001264";
|
|
433
|
+
export const cpdColorBgSubtleSecondaryLevel0 = "#101317";
|
|
434
|
+
export const cpdColorBorderDisabled = "#3c3f44";
|
|
435
|
+
export const cpdColorBorderFocused = "#89b5f6";
|
|
436
|
+
export const cpdColorBorderInteractivePrimary = "#79818d";
|
|
437
|
+
export const cpdColorBorderInteractiveSecondary = "#4a4f55";
|
|
438
|
+
export const cpdColorBorderInteractiveHovered = "#c8ced5";
|
|
439
|
+
export const cpdColorBorderCriticalPrimary = "#ff968c";
|
|
440
|
+
export const cpdColorBorderCriticalHovered = "#ffa79d";
|
|
441
|
+
export const cpdColorBorderCriticalSubtle = "#830009";
|
|
442
|
+
export const cpdColorBorderSuccessSubtle = "#004832";
|
|
443
|
+
export const cpdColorBorderInfoSubtle = "#083891";
|
|
444
|
+
export const cpdColorIconPrimary = "#f2f5f7";
|
|
445
|
+
export const cpdColorIconSecondary = "#acb4bd";
|
|
446
|
+
export const cpdColorIconTertiary = "#79818d";
|
|
447
|
+
export const cpdColorIconQuaternary = "#606770";
|
|
448
|
+
export const cpdColorIconDisabled = "#606770";
|
|
449
|
+
export const cpdColorIconPrimaryAlpha = "hsla(204, 71%, 99%, 0.97)";
|
|
450
|
+
export const cpdColorIconSecondaryAlpha = "hsla(211, 91%, 96%, 0.72)";
|
|
451
|
+
export const cpdColorIconTertiaryAlpha = "hsla(216, 94%, 93%, 0.51)";
|
|
452
|
+
export const cpdColorIconQuaternaryAlpha = "hsla(214, 79%, 93%, 0.39)";
|
|
453
|
+
export const cpdColorIconAccentTertiary = "#109173";
|
|
454
|
+
export const cpdColorIconCriticalPrimary = "#ff968c";
|
|
455
|
+
export const cpdColorIconSuccessPrimary = "#37c998";
|
|
456
|
+
export const cpdColorIconInfoPrimary = "#89b5f6";
|
|
457
|
+
export const cpdColorIconOnSolidPrimary = "#101317";
|