@esri/calcite-design-tokens 1.0.0-beta.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +33 -0
  3. package/dist/css/brand-light.css +9 -0
  4. package/dist/css/calcite-dark.css +504 -0
  5. package/dist/css/calcite-headless.css +2592 -0
  6. package/dist/css/calcite-light.css +507 -0
  7. package/dist/scss/brand-light.scss +9 -0
  8. package/dist/scss/calcite-dark.scss +504 -0
  9. package/dist/scss/calcite-headless.scss +2592 -0
  10. package/dist/scss/calcite-light.scss +507 -0
  11. package/package.json +108 -0
package/dist/scss/calcite-light.scss ADDED
@@ -0,0 +1,507 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 04 May 2023 18:48:24 GMT
4
+ */
5
+
6
+ @mixin calcite-theme-light() {
7
+ --calcite-ui-brand: #007ac2;
8
+ --calcite-ui-brand-hover: #00619b;
9
+ --calcite-ui-brand-press: #004874;
10
+ --calcite-ui-background-1: #f8f8f8;
11
+ --calcite-ui-foreground-1: #ffffff;
12
+ --calcite-ui-foreground-2: #f3f3f3;
13
+ --calcite-ui-foreground-3: #c7eaff;
14
+ --calcite-ui-text-1: #151515;
15
+ --calcite-ui-text-2: #4a4a4a;
16
+ --calcite-ui-text-3: #6a6a6a;
17
+ --calcite-ui-text-inverse: #ffffff;
18
+ --calcite-ui-text-link: #00619b;
19
+ --calcite-ui-border-1: #cacaca;
20
+ --calcite-ui-border-2: #d4d4d4;
21
+ --calcite-ui-border-3: #dfdfdf;
22
+ --calcite-ui-border-input: #949494;
23
+ --calcite-ui-info: #00619b;
24
+ --calcite-ui-info-hover: #004874;
25
+ --calcite-ui-info-press: #00304d;
26
+ --calcite-ui-success: #35ac46;
27
+ --calcite-ui-success-hover: #288835;
28
+ --calcite-ui-success-press: #1a6324;
29
+ --calcite-ui-warning: #edd317;
30
+ --calcite-ui-warning-hover: #d9bc00;
31
+ --calcite-ui-warning-press: #bfa200;
32
+ --calcite-ui-danger: #d83020;
33
+ --calcite-ui-danger-hover: #a82b1e;
34
+ --calcite-ui-danger-press: #7c1d13;
35
+ --calcite-ui-inverse: #353535;
36
+ --calcite-ui-component-avatar-font: #6a6a6a;
37
+ --calcite-ui-component-avatar-icon: #6a6a6a;
38
+ --calcite-ui-component-avatar-background: #f3f3f3;
39
+ --calcite-ui-component-avatar-background-red: #ffc6bf;
40
+ --calcite-ui-component-avatar-background-teal: #cef5f4;
41
+ --calcite-ui-component-avatar-background-blue: #c7eaff;
42
+ --calcite-ui-component-avatar-background-green: #e5f7b4;
43
+ --calcite-ui-component-avatar-background-yellow: #fff7cc;
44
+ --calcite-ui-component-checkbox-font: #151515;
45
+ --calcite-ui-component-checkbox-background: #ffffff;
46
+ --calcite-ui-component-checkbox-background-selected: #007ac2;
47
+ --calcite-ui-component-checkbox-icon: #ffffff;
48
+ --calcite-ui-component-checkbox-border: #949494;
49
+ --calcite-ui-component-radio-font: #151515;
50
+ --calcite-ui-component-radio-background: #ffffff;
51
+ --calcite-ui-component-radio-border-unchecked: #6a6a6a;
52
+ --calcite-ui-component-radio-border-checked: #007ac2;
53
+ --calcite-ui-component-chip-font-clear: #151515;
54
+ --calcite-ui-component-chip-font-solid-grey: #151515;
55
+ --calcite-ui-component-chip-font-solid-blue: #ffffff;
56
+ --calcite-ui-component-chip-font-solid-red: #ffffff;
57
+ --calcite-ui-component-chip-font-solid-yellow: #151515;
58
+ --calcite-ui-component-chip-font-solid-green: #151515;
59
+ --calcite-ui-component-chip-icon-clear: #151515;
60
+ --calcite-ui-component-chip-icon-solid-grey: #151515;
61
+ --calcite-ui-component-chip-icon-solid-blue: #ffffff;
62
+ --calcite-ui-component-chip-icon-solid-red: #ffffff;
63
+ --calcite-ui-component-chip-icon-solid-yellow: #151515;
64
+ --calcite-ui-component-chip-icon-solid-green: #151515;
65
+ --calcite-ui-component-chip-closable-icon: #6a6a6a;
66
+ --calcite-ui-component-chip-background-solid-grey: #f3f3f3;
67
+ --calcite-ui-component-chip-background-solid-blue: #00619b;
68
+ --calcite-ui-component-chip-background-solid-red: #d83020;
69
+ --calcite-ui-component-chip-background-solid-yellow: #edd317;
70
+ --calcite-ui-component-chip-background-solid-green: #35ac46;
71
+ --calcite-ui-component-chip-border-clear-grey: #cacaca;
72
+ --calcite-ui-component-chip-border-clear-blue: #00619b;
73
+ --calcite-ui-component-chip-border-clear-red: #d83020;
74
+ --calcite-ui-component-chip-border-clear-yellow: #edd317;
75
+ --calcite-ui-component-chip-border-clear-green: #35ac46;
76
+ --calcite-ui-component-label-font: #151515;
77
+ --calcite-ui-component-loader-font: #151515;
78
+ --calcite-ui-component-loader-foreground: #007ac2;
79
+ --calcite-ui-component-loader-inline-foreground-indeterminate: #151515;
80
+ --calcite-ui-component-loader-inline-foreground-determinate: #007ac2;
81
+ --calcite-ui-component-rating-star-background: #949494;
82
+ --calcite-ui-component-rating-star-background-active: #007ac2;
83
+ --calcite-ui-component-rating-star-background-average: #edd317;
84
+ --calcite-ui-component-rating-chip-count-font: #4a4a4a;
85
+ --calcite-ui-component-rating-chip-foreground: #f3f3f3;
86
+ --calcite-ui-component-tooltip-foreground: #ffffff;
87
+ --calcite-ui-component-tooltip-border: #dfdfdf;
88
+ --calcite-ui-component-tooltip-font: #151515;
89
+ --calcite-ui-component-accordion-item-font-heading: #151515;
90
+ --calcite-ui-component-accordion-item-font-description: #6a6a6a;
91
+ --calcite-ui-component-accordion-item-icon: #6a6a6a;
92
+ --calcite-ui-component-accordion-item-icon-expanded: #151515;
93
+ --calcite-ui-component-accordion-item-background: #ffffff;
94
+ --calcite-ui-component-accordion-item-border: #d4d4d4;
95
+ --calcite-ui-component-input-message-font: #151515;
96
+ --calcite-ui-component-input-message-icon-idle: #007ac2;
97
+ --calcite-ui-component-input-message-icon-invalid: #d83020;
98
+ --calcite-ui-component-input-message-icon-valid: #35ac46;
99
+ --calcite-ui-component-alert-font-title: #151515;
100
+ --calcite-ui-component-alert-font-message: #6a6a6a;
101
+ --calcite-ui-component-alert-background: #ffffff;
102
+ --calcite-ui-component-alert-border: #dfdfdf;
103
+ --calcite-ui-component-alert-icon-blue: #00619b;
104
+ --calcite-ui-component-alert-icon-green: #35ac46;
105
+ --calcite-ui-component-alert-icon-yellow: #edd317;
106
+ --calcite-ui-component-alert-icon-red: #d83020;
107
+ --calcite-ui-component-alert-highlight-blue: #00619b;
108
+ --calcite-ui-component-alert-highlight-green: #35ac46;
109
+ --calcite-ui-component-alert-highlight-yellow: #edd317;
110
+ --calcite-ui-component-alert-highlight-red: #d83020;
111
+ --calcite-ui-component-tip-font-heading: #151515;
112
+ --calcite-ui-component-tip-font-description: #4a4a4a;
113
+ --calcite-ui-component-tip-icon: #6a6a6a;
114
+ --calcite-ui-component-tip-background-light: #ffffff;
115
+ --calcite-ui-component-tip-border: #d4d4d4;
116
+ --calcite-ui-component-color-picker-font-label: #151515;
117
+ --calcite-ui-component-color-picker-icon: #151515;
118
+ --calcite-ui-component-color-picker-border: #cacaca;
119
+ --calcite-ui-component-color-picker-background: #ffffff;
120
+ --calcite-ui-component-date-picker-font-date: #6a6a6a;
121
+ --calcite-ui-component-date-picker-font-range-date: #151515;
122
+ --calcite-ui-component-date-picker-font-day: #6a6a6a;
123
+ --calcite-ui-component-date-picker-font-month: #151515;
124
+ --calcite-ui-component-date-picker-font-selected-date: #ffffff;
125
+ --calcite-ui-component-date-picker-font-active-date: #ffffff;
126
+ --calcite-ui-component-date-picker-icon: #6a6a6a;
127
+ --calcite-ui-component-date-picker-border: #cacaca;
128
+ --calcite-ui-component-date-picker-date-active-border: #ffffff;
129
+ --calcite-ui-component-date-picker-background: #ffffff;
130
+ --calcite-ui-component-date-picker-background-date-range: #c7eaff;
131
+ --calcite-ui-component-date-picker-background-date-active-light: #007ac2;
132
+ --calcite-ui-component-input-date-picker-font-placeholder-value: #151515;
133
+ --calcite-ui-component-input-date-picker-font-label: #151515;
134
+ --calcite-ui-component-input-date-picker-icon: #6a6a6a;
135
+ --calcite-ui-component-input-date-picker-border: #949494;
136
+ --calcite-ui-component-input-date-picker-background: #ffffff;
137
+ --calcite-ui-component-input-date-picker-background-arrow: #f8f8f8;
138
+ --calcite-ui-component-input-date-picker-background-read-only: #f8f8f8;
139
+ --calcite-ui-component-input-datetime-local-font-placeholder-value: #151515;
140
+ --calcite-ui-component-input-datetime-local-font-label: #151515;
141
+ --calcite-ui-component-input-datetime-local-font-prefix-suffix: #4a4a4a;
142
+ --calcite-ui-component-input-datetime-local-icon: #6a6a6a;
143
+ --calcite-ui-component-input-datetime-local-background: #ffffff;
144
+ --calcite-ui-component-input-datetime-local-background-prefix-sufix: #f8f8f8;
145
+ --calcite-ui-component-input-datetime-local-background-read-only: #f8f8f8;
146
+ --calcite-ui-component-input-datetime-local-border: #949494;
147
+ --calcite-ui-component-input-datetime-local-border-invalid: #d83020;
148
+ --calcite-ui-component-input-email-font-placeholder-value: #151515;
149
+ --calcite-ui-component-input-email-font-label: #151515;
150
+ --calcite-ui-component-input-email-font-prefix-suffix: #4a4a4a;
151
+ --calcite-ui-component-input-email-icon: #6a6a6a;
152
+ --calcite-ui-component-input-email-background: #ffffff;
153
+ --calcite-ui-component-input-email-background-prefix-sufix: #f8f8f8;
154
+ --calcite-ui-component-input-email-background-read-only: #f8f8f8;
155
+ --calcite-ui-component-input-email-border: #949494;
156
+ --calcite-ui-component-input-email-border-invalid: #d83020;
157
+ --calcite-ui-component-input-file-font-placeholder-value: #151515;
158
+ --calcite-ui-component-input-file-font-label: #151515;
159
+ --calcite-ui-component-input-file-font-prefix-suffix: #4a4a4a;
160
+ --calcite-ui-component-input-file-icon: #6a6a6a;
161
+ --calcite-ui-component-input-file-background: #ffffff;
162
+ --calcite-ui-component-input-file-background-prefix-sufix: #f8f8f8;
163
+ --calcite-ui-component-input-file-background-read-only: #f8f8f8;
164
+ --calcite-ui-component-input-file-border: #949494;
165
+ --calcite-ui-component-input-file-border-invalid: #d83020;
166
+ --calcite-ui-component-input-month-font-placeholder-value: #151515;
167
+ --calcite-ui-component-input-month-font-label: #151515;
168
+ --calcite-ui-component-input-month-font-prefix-suffix: #4a4a4a;
169
+ --calcite-ui-component-input-month-icon: #6a6a6a;
170
+ --calcite-ui-component-input-month-background: #ffffff;
171
+ --calcite-ui-component-input-month-background-prefix-sufix: #f8f8f8;
172
+ --calcite-ui-component-input-month-background-read-only: #f8f8f8;
173
+ --calcite-ui-component-input-month-border: #949494;
174
+ --calcite-ui-component-input-month-border-invalid: #d83020;
175
+ --calcite-ui-component-input-number-font-placeholder-value: #151515;
176
+ --calcite-ui-component-input-number-font-label: #151515;
177
+ --calcite-ui-component-input-number-font-prefix-suffix: #4a4a4a;
178
+ --calcite-ui-component-input-number-icon: #6a6a6a;
179
+ --calcite-ui-component-input-number-background: #ffffff;
180
+ --calcite-ui-component-input-number-background-prefix-sufix: #f8f8f8;
181
+ --calcite-ui-component-input-number-background-read-only: #f8f8f8;
182
+ --calcite-ui-component-input-number-border: #949494;
183
+ --calcite-ui-component-input-number-border-invalid: #d83020;
184
+ --calcite-ui-component-input-password-font-placeholder-value: #151515;
185
+ --calcite-ui-component-input-password-font-label: #151515;
186
+ --calcite-ui-component-input-password-font-prefix-suffix: #4a4a4a;
187
+ --calcite-ui-component-input-password-icon: #6a6a6a;
188
+ --calcite-ui-component-input-password-background: #ffffff;
189
+ --calcite-ui-component-input-password-background-prefix-sufix: #f8f8f8;
190
+ --calcite-ui-component-input-password-background-read-only: #f8f8f8;
191
+ --calcite-ui-component-input-password-border: #949494;
192
+ --calcite-ui-component-input-password-border-invalid: #d83020;
193
+ --calcite-ui-component-input-search-font-placeholder-value: #151515;
194
+ --calcite-ui-component-input-search-font-label: #151515;
195
+ --calcite-ui-component-input-search-font-prefix-suffix: #4a4a4a;
196
+ --calcite-ui-component-input-search-icon: #6a6a6a;
197
+ --calcite-ui-component-input-search-background: #ffffff;
198
+ --calcite-ui-component-input-search-background-prefix-sufix: #f8f8f8;
199
+ --calcite-ui-component-input-search-background-read-only: #f8f8f8;
200
+ --calcite-ui-component-input-search-border: #949494;
201
+ --calcite-ui-component-input-search-border-invalid: #d83020;
202
+ --calcite-ui-component-input-telephone-font-placeholder-value: #151515;
203
+ --calcite-ui-component-input-telephone-font-label: #151515;
204
+ --calcite-ui-component-input-telephone-font-prefix-suffix: #4a4a4a;
205
+ --calcite-ui-component-input-telephone-icon: #6a6a6a;
206
+ --calcite-ui-component-input-telephone-background: #ffffff;
207
+ --calcite-ui-component-input-telephone-background-prefix-sufix: #f8f8f8;
208
+ --calcite-ui-component-input-telephone-background-read-only: #f8f8f8;
209
+ --calcite-ui-component-input-telephone-border: #949494;
210
+ --calcite-ui-component-input-telephone-border-invalid: #d83020;
211
+ --calcite-ui-component-input-text-font-placeholder-value: #151515;
212
+ --calcite-ui-component-input-text-font-label: #151515;
213
+ --calcite-ui-component-input-text-font-prefix-suffix: #4a4a4a;
214
+ --calcite-ui-component-input-text-icon: #6a6a6a;
215
+ --calcite-ui-component-input-text-background: #ffffff;
216
+ --calcite-ui-component-input-text-background-prefix-sufix: #f8f8f8;
217
+ --calcite-ui-component-input-text-background-read-only: #f8f8f8;
218
+ --calcite-ui-component-input-text-border: #949494;
219
+ --calcite-ui-component-input-text-border-invalid: #d83020;
220
+ --calcite-ui-component-input-week-font-placeholder-value: #151515;
221
+ --calcite-ui-component-input-week-font-label: #151515;
222
+ --calcite-ui-component-input-week-font-prefix-suffix: #4a4a4a;
223
+ --calcite-ui-component-input-week-icon: #6a6a6a;
224
+ --calcite-ui-component-input-week-background: #ffffff;
225
+ --calcite-ui-component-input-week-background-prefix-sufix: #f8f8f8;
226
+ --calcite-ui-component-input-week-background-read-only: #f8f8f8;
227
+ --calcite-ui-component-input-week-border: #949494;
228
+ --calcite-ui-component-input-week-border-invalid: #d83020;
229
+ --calcite-ui-component-textarea-font-placeholder-value: #151515;
230
+ --calcite-ui-component-textarea-font-label: #151515;
231
+ --calcite-ui-component-textarea-font-chat-limit: #4a4a4a;
232
+ --calcite-ui-component-textarea-icon: #6a6a6a;
233
+ --calcite-ui-component-textarea-background: #ffffff;
234
+ --calcite-ui-component-textarea-background-read-only: #f8f8f8;
235
+ --calcite-ui-component-textarea-border: #949494;
236
+ --calcite-ui-component-tab-title-font: #6a6a6a;
237
+ --calcite-ui-component-tab-title-font-active: #151515;
238
+ --calcite-ui-component-tab-title-icon: #6a6a6a;
239
+ --calcite-ui-component-tab-title-icon-active: #151515;
240
+ --calcite-ui-component-tab-title-bordered-border: #dfdfdf;
241
+ --calcite-ui-component-tab-title-bordered-background: #ffffff;
242
+ --calcite-ui-component-tab-title-border-active: #007ac2;
243
+ --calcite-ui-component-tabs-bordered-border: #dfdfdf;
244
+ --calcite-ui-component-tabs-bordered-background: #ffffff;
245
+ --calcite-ui-component-card-font-title: #151515;
246
+ --calcite-ui-component-card-font-subtitle: #4a4a4a;
247
+ --calcite-ui-component-card-font-description: #6a6a6a;
248
+ --calcite-ui-component-card-border: #d4d4d4;
249
+ --calcite-ui-component-card-border-active: #007ac2;
250
+ --calcite-ui-component-card-background: #ffffff;
251
+ --calcite-ui-component-action-font: #6a6a6a;
252
+ --calcite-ui-component-action-icon: #6a6a6a;
253
+ --calcite-ui-component-action-background: #ffffff;
254
+ --calcite-ui-component-action-background-active: #eaeaea;
255
+ --calcite-ui-component-action-bar-border: #cacaca;
256
+ --calcite-ui-component-action-bar-background: #ffffff;
257
+ --calcite-ui-component-action-pad-border: #cacaca;
258
+ --calcite-ui-component-action-pad-background: #ffffff;
259
+ --calcite-ui-component-action-bar-grid-border: #cacaca;
260
+ --calcite-ui-component-action-bar-grid-background: #ffffff;
261
+ --calcite-ui-component-action-pad-grid-border: #cacaca;
262
+ --calcite-ui-component-action-pad-grid-background: #ffffff;
263
+ --calcite-ui-component-block-font-heading: #4a4a4a;
264
+ --calcite-ui-component-block-font-active: #151515;
265
+ --calcite-ui-component-block-font-description: #6a6a6a;
266
+ --calcite-ui-component-block-font-content: #4a4a4a;
267
+ --calcite-ui-component-block-icon-idle: #4a4a4a;
268
+ --calcite-ui-component-block-icon-valid: #35ac46;
269
+ --calcite-ui-component-block-icon-invalid: #d83020;
270
+ --calcite-ui-component-block-icon-drag-handle: #949494;
271
+ --calcite-ui-component-block-icon-chevron: #6a6a6a;
272
+ --calcite-ui-component-block-border: #dfdfdf;
273
+ --calcite-ui-component-block-background: #ffffff;
274
+ --calcite-ui-component-block-section-font: #4a4a4a;
275
+ --calcite-ui-component-block-section-icon-valid: #35ac46;
276
+ --calcite-ui-component-block-section-icon-invalid: #d83020;
277
+ --calcite-ui-component-block-section-icon-chevron: #6a6a6a;
278
+ --calcite-ui-component-block-section-background: #ffffff;
279
+ --calcite-ui-component-notice-font-title: #151515;
280
+ --calcite-ui-component-notice-font-message: #6a6a6a;
281
+ --calcite-ui-component-notice-background: #ffffff;
282
+ --calcite-ui-component-notice-icon-info: #00619b;
283
+ --calcite-ui-component-notice-icon-success: #35ac46;
284
+ --calcite-ui-component-notice-icon-warning: #edd317;
285
+ --calcite-ui-component-notice-icon-danger: #d83020;
286
+ --calcite-ui-component-notice-icon-brand: #007ac2;
287
+ --calcite-ui-component-notice-highlight-info: #00619b;
288
+ --calcite-ui-component-notice-highlight-success: #35ac46;
289
+ --calcite-ui-component-notice-highlight-warning: #edd317;
290
+ --calcite-ui-component-notice-highlight-danger: #d83020;
291
+ --calcite-ui-component-notice-highlight-brand: #007ac2;
292
+ --calcite-ui-component-modal-font-header: #151515;
293
+ --calcite-ui-component-modal-font-content: #4a4a4a;
294
+ --calcite-ui-component-modal-icon: #6a6a6a;
295
+ --calcite-ui-component-modal-border: #dfdfdf;
296
+ --calcite-ui-component-modal-border-top-brand: #007ac2;
297
+ --calcite-ui-component-modal-border-top-info: #00619b;
298
+ --calcite-ui-component-modal-border-top-success: #35ac46;
299
+ --calcite-ui-component-modal-border-top-danger: #d83020;
300
+ --calcite-ui-component-modal-border-top-warning: #edd317;
301
+ --calcite-ui-component-modal-background: #ffffff;
302
+ --calcite-ui-component-panel-header-font: #4a4a4a;
303
+ --calcite-ui-component-panel-header-icon: #6a6a6a;
304
+ --calcite-ui-component-panel-header-border: #dfdfdf;
305
+ --calcite-ui-component-panel-header-background: #ffffff;
306
+ --calcite-ui-component-popover-font: #151515;
307
+ --calcite-ui-component-popover-icon: #6a6a6a;
308
+ --calcite-ui-component-popover-border: #dfdfdf;
309
+ --calcite-ui-component-popover-background: #ffffff;
310
+ --calcite-ui-component-slider-font-label: #151515;
311
+ --calcite-ui-component-slider-font-tick-label: #4a4a4a;
312
+ --calcite-ui-component-slider-handle-background: #ffffff;
313
+ --calcite-ui-component-slider-handle-border: #6a6a6a;
314
+ --calcite-ui-component-slider-border: #d4d4d4;
315
+ --calcite-ui-component-slider-border-active: #007ac2;
316
+ --calcite-ui-component-slider-tick-background: #949494;
317
+ --calcite-ui-component-slider-tick-border: #ffffff;
318
+ --calcite-ui-component-slider-tick-active-background: #007ac2;
319
+ --calcite-ui-component-slider-tick-active-border: #ffffff;
320
+ --calcite-ui-component-slider-range-font-label: #151515;
321
+ --calcite-ui-component-slider-range-font-tick-label: #4a4a4a;
322
+ --calcite-ui-component-slider-range-handle-background: #ffffff;
323
+ --calcite-ui-component-slider-range-handle-border: #6a6a6a;
324
+ --calcite-ui-component-slider-range-border: #d4d4d4;
325
+ --calcite-ui-component-slider-range-border-active: #007ac2;
326
+ --calcite-ui-component-slider-range-tick-background: #949494;
327
+ --calcite-ui-component-slider-range-tick-border: #ffffff;
328
+ --calcite-ui-component-slider-range-tick-active-background: #007ac2;
329
+ --calcite-ui-component-slider-range-tick-active-border: #ffffff;
330
+ --calcite-ui-component-slider-histogram-font-label: #151515;
331
+ --calcite-ui-component-slider-histogram-font-tick-label: #4a4a4a;
332
+ --calcite-ui-component-slider-histogram-handle-background: #ffffff;
333
+ --calcite-ui-component-slider-histogram-handle-border: #6a6a6a;
334
+ --calcite-ui-component-slider-histogram-border: #d4d4d4;
335
+ --calcite-ui-component-slider-histogram-border-active: #007ac2;
336
+ --calcite-ui-component-slider-histogram-tick-background: #949494;
337
+ --calcite-ui-component-slider-histogram-tick-border: #ffffff;
338
+ --calcite-ui-component-slider-histogram-tick-active-background: #007ac2;
339
+ --calcite-ui-component-slider-histogram-tick-active-border: #ffffff;
340
+ --calcite-ui-component-slider-histogram-area-active-background: #9BBDDF;
341
+ --calcite-ui-component-slider-histogram-active-end-background: #ffffff;
342
+ --calcite-ui-component-slider-histogram-range-font-label: #151515;
343
+ --calcite-ui-component-slider-histogram-range-font-tick-label: #4a4a4a;
344
+ --calcite-ui-component-slider-histogram-range-handle-background: #ffffff;
345
+ --calcite-ui-component-slider-histogram-range-handle-border: #6a6a6a;
346
+ --calcite-ui-component-slider-histogram-range-border: #d4d4d4;
347
+ --calcite-ui-component-slider-histogram-range-border-active: #007ac2;
348
+ --calcite-ui-component-slider-histogram-range-tick-background: #949494;
349
+ --calcite-ui-component-slider-histogram-range-tick-border: #ffffff;
350
+ --calcite-ui-component-slider-histogram-range-tick-active-background: #007ac2;
351
+ --calcite-ui-component-slider-histogram-range-tick-active-border: #ffffff;
352
+ --calcite-ui-component-slider-histogram-range-area-active-background: #9BBDDF;
353
+ --calcite-ui-component-slider-histogram-range-active-end-background: #ffffff;
354
+ --calcite-ui-component-filter-font: #151515;
355
+ --calcite-ui-component-filter-icon: #6a6a6a;
356
+ --calcite-ui-component-filter-border: #949494;
357
+ --calcite-ui-component-filter-background: #ffffff;
358
+ --calcite-ui-component-scrim-background: #ffffff;
359
+ --calcite-ui-component-tip-manager-font-heading: #151515;
360
+ --calcite-ui-component-tip-manager-icon: #6a6a6a;
361
+ --calcite-ui-component-tip-manager-background-light: #ffffff;
362
+ --calcite-ui-component-tip-manager-border: #d4d4d4;
363
+ --calcite-ui-component-button-font-brand-solid: #ffffff;
364
+ --calcite-ui-component-button-font-brand-outline-fill: #007ac2;
365
+ --calcite-ui-component-button-font-brand-outline: #007ac2;
366
+ --calcite-ui-component-button-font-brand-transparent: #007ac2;
367
+ --calcite-ui-component-button-font-inverse-solid: #ffffff;
368
+ --calcite-ui-component-button-font-inverse-outline-fill: #151515;
369
+ --calcite-ui-component-button-font-inverse-outline: #151515;
370
+ --calcite-ui-component-button-font-inverse-transparent: #151515;
371
+ --calcite-ui-component-button-font-neutral-solid: #ffffff;
372
+ --calcite-ui-component-button-font-neutral-outline-fill: #151515;
373
+ --calcite-ui-component-button-font-neutral-outline: #151515;
374
+ --calcite-ui-component-button-font-neutral-transparent: #151515;
375
+ --calcite-ui-component-button-font-danger-solid: #ffffff;
376
+ --calcite-ui-component-button-font-danger-outline-fill: #d83020;
377
+ --calcite-ui-component-button-font-danger-outline: #d83020;
378
+ --calcite-ui-component-button-font-danger-transparent: #d83020;
379
+ --calcite-ui-component-button-icon-brand-solid: #ffffff;
380
+ --calcite-ui-component-button-icon-brand-outline-fill: #007ac2;
381
+ --calcite-ui-component-button-icon-brand-outline: #007ac2;
382
+ --calcite-ui-component-button-icon-brand-transparent: #007ac2;
383
+ --calcite-ui-component-button-icon-inverse-solid: #ffffff;
384
+ --calcite-ui-component-button-icon-inverse-outline-fill: #151515;
385
+ --calcite-ui-component-button-icon-inverse-outline: #151515;
386
+ --calcite-ui-component-button-icon-inverse-transparent: #151515;
387
+ --calcite-ui-component-button-icon-neutral-solid: #ffffff;
388
+ --calcite-ui-component-button-icon-neutral-outline-fill: #151515;
389
+ --calcite-ui-component-button-icon-neutral-outline: #151515;
390
+ --calcite-ui-component-button-icon-neutral-transparent: #151515;
391
+ --calcite-ui-component-button-icon-danger-solid: #ffffff;
392
+ --calcite-ui-component-button-icon-danger-outline-fill: #d83020;
393
+ --calcite-ui-component-button-icon-danger-outline: #d83020;
394
+ --calcite-ui-component-button-icon-danger-transparent: #d83020;
395
+ --calcite-ui-component-button-background-brand-solid: #007ac2;
396
+ --calcite-ui-component-button-background-brand-outline-fill: #ffffff;
397
+ --calcite-ui-component-button-background-inverse-solid: #353535;
398
+ --calcite-ui-component-button-background-inverse-outline-fill: #353535;
399
+ --calcite-ui-component-button-background-neutral-solid: #353535;
400
+ --calcite-ui-component-button-background-neutral-outline-fill: #353535;
401
+ --calcite-ui-component-button-background-danger-solid: #d83020;
402
+ --calcite-ui-component-button-background-danger-outline-fill: #d83020;
403
+ --calcite-ui-component-button-border-brand-outline-fill: #007ac2;
404
+ --calcite-ui-component-button-border-brand-outline: #007ac2;
405
+ --calcite-ui-component-button-border-inverse-outline-fill: #353535;
406
+ --calcite-ui-component-button-border-inverse-outline: #353535;
407
+ --calcite-ui-component-button-border-neutral-outline-fill: #353535;
408
+ --calcite-ui-component-button-border-neutral-outline: #353535;
409
+ --calcite-ui-component-button-border-danger-outline-fill: #d83020;
410
+ --calcite-ui-component-button-border-danger-outline: #d83020;
411
+ --calcite-ui-component-split-button-font-brand-solid: #ffffff;
412
+ --calcite-ui-component-split-button-font-brand-outline-fill: #007ac2;
413
+ --calcite-ui-component-split-button-font-brand-outline: #007ac2;
414
+ --calcite-ui-component-split-button-font-brand-transparent: #007ac2;
415
+ --calcite-ui-component-split-button-font-inverse-solid: #ffffff;
416
+ --calcite-ui-component-split-button-font-inverse-outline-fill: #151515;
417
+ --calcite-ui-component-split-button-font-inverse-outline: #151515;
418
+ --calcite-ui-component-split-button-font-inverse-transparent: #151515;
419
+ --calcite-ui-component-split-button-font-neutral-solid: #ffffff;
420
+ --calcite-ui-component-split-button-font-neutral-outline-fill: #151515;
421
+ --calcite-ui-component-split-button-font-neutral-outline: #151515;
422
+ --calcite-ui-component-split-button-font-neutral-transparent: #151515;
423
+ --calcite-ui-component-split-button-font-danger-solid: #ffffff;
424
+ --calcite-ui-component-split-button-font-danger-outline-fill: #d83020;
425
+ --calcite-ui-component-split-button-font-danger-outline: #d83020;
426
+ --calcite-ui-component-split-button-font-danger-transparent: #d83020;
427
+ --calcite-ui-component-split-button-icon-brand-solid: #ffffff;
428
+ --calcite-ui-component-split-button-icon-brand-outline-fill: #007ac2;
429
+ --calcite-ui-component-split-button-icon-brand-outline: #007ac2;
430
+ --calcite-ui-component-split-button-icon-brand-transparent: #007ac2;
431
+ --calcite-ui-component-split-button-icon-inverse-solid: #ffffff;
432
+ --calcite-ui-component-split-button-icon-inverse-outline-fill: #151515;
433
+ --calcite-ui-component-split-button-icon-inverse-outline: #151515;
434
+ --calcite-ui-component-split-button-icon-inverse-transparent: #151515;
435
+ --calcite-ui-component-split-button-icon-neutral-solid: #ffffff;
436
+ --calcite-ui-component-split-button-icon-neutral-outline-fill: #151515;
437
+ --calcite-ui-component-split-button-icon-neutral-outline: #151515;
438
+ --calcite-ui-component-split-button-icon-neutral-transparent: #151515;
439
+ --calcite-ui-component-split-button-icon-danger-solid: #ffffff;
440
+ --calcite-ui-component-split-button-icon-danger-outline-fill: #d83020;
441
+ --calcite-ui-component-split-button-icon-danger-outline: #d83020;
442
+ --calcite-ui-component-split-button-icon-danger-transparent: #d83020;
443
+ --calcite-ui-component-split-button-background-brand-solid: #007ac2;
444
+ --calcite-ui-component-split-button-background-brand-outline-fill: #ffffff;
445
+ --calcite-ui-component-split-button-background-inverse-solid: #353535;
446
+ --calcite-ui-component-split-button-background-inverse-outline-fill: #ffffff;
447
+ --calcite-ui-component-split-button-background-neutral-solid: #353535;
448
+ --calcite-ui-component-split-button-background-neutral-outline-fill: #ffffff;
449
+ --calcite-ui-component-split-button-background-danger-solid: #d83020;
450
+ --calcite-ui-component-split-button-background-danger-outline-fill: #ffffff;
451
+ --calcite-ui-component-split-button-border-brand-outline-fill: #007ac2;
452
+ --calcite-ui-component-split-button-border-brand-outline: #007ac2;
453
+ --calcite-ui-component-split-button-border-inverse-outline-fill: #353535;
454
+ --calcite-ui-component-split-button-border-inverse-outline: #353535;
455
+ --calcite-ui-component-split-button-border-neutral-outline-fill: #353535;
456
+ --calcite-ui-component-split-button-border-neutral-outline: #353535;
457
+ --calcite-ui-component-split-button-border-danger-outline-fill: #d83020;
458
+ --calcite-ui-component-split-button-border-danger-outline: #d83020;
459
+ --calcite-ui-component-split-button-divider-brand-solid: #ffffff;
460
+ --calcite-ui-component-split-button-divider-brand-outline-fill: #007ac2;
461
+ --calcite-ui-component-split-button-divider-brand-outline: #007ac2;
462
+ --calcite-ui-component-split-button-divider-brand-transparent: #007ac2;
463
+ --calcite-ui-component-split-button-divider-inverse-solid: #ffffff;
464
+ --calcite-ui-component-split-button-divider-inverse-outline-fill: #353535;
465
+ --calcite-ui-component-split-button-divider-inverse-outline: #353535;
466
+ --calcite-ui-component-split-button-divider-inverse-transparent: #353535;
467
+ --calcite-ui-component-split-button-divider-neutral-solid: #ffffff;
468
+ --calcite-ui-component-split-button-divider-neutral-outline-fill: #353535;
469
+ --calcite-ui-component-split-button-divider-neutral-outline: #353535;
470
+ --calcite-ui-component-split-button-divider-neutral-transparent: #353535;
471
+ --calcite-ui-component-split-button-divider-danger-solid: #d83020;
472
+ --calcite-ui-component-split-button-divider-danger-outline-fill: #d83020;
473
+ --calcite-ui-component-split-button-divider-danger-outline: #d83020;
474
+ --calcite-ui-component-split-button-divider-danger-transparent: #d83020;
475
+ --calcite-ui-component-fab-font-brand-solid: #ffffff;
476
+ --calcite-ui-component-fab-font-brand-outline-fill: #007ac2;
477
+ --calcite-ui-component-fab-font-inverse-solid: #ffffff;
478
+ --calcite-ui-component-fab-font-inverse-outline-fill: #151515;
479
+ --calcite-ui-component-fab-font-neutral-solid: #ffffff;
480
+ --calcite-ui-component-fab-font-neutral-outline-fill: #151515;
481
+ --calcite-ui-component-fab-font-danger-solid: #ffffff;
482
+ --calcite-ui-component-fab-font-danger-outline-fill: #d83020;
483
+ --calcite-ui-component-fab-icon-brand-solid: #ffffff;
484
+ --calcite-ui-component-fab-icon-brand-outline-fill: #007ac2;
485
+ --calcite-ui-component-fab-icon-inverse-solid: #ffffff;
486
+ --calcite-ui-component-fab-icon-inverse-outline-fill: #151515;
487
+ --calcite-ui-component-fab-icon-neutral-solid: #ffffff;
488
+ --calcite-ui-component-fab-icon-neutral-outline-fill: #151515;
489
+ --calcite-ui-component-fab-icon-danger-solid: #ffffff;
490
+ --calcite-ui-component-fab-icon-danger-outline-fill: #d83020;
491
+ --calcite-ui-component-fab-background-brand-solid: #007ac2;
492
+ --calcite-ui-component-fab-background-brand-outline-fill: #ffffff;
493
+ --calcite-ui-component-fab-background-inverse-solid: #353535;
494
+ --calcite-ui-component-fab-background-inverse-outline-fill: #ffffff;
495
+ --calcite-ui-component-fab-background-neutral-solid: #353535;
496
+ --calcite-ui-component-fab-background-neutral-outline-fill: #ffffff;
497
+ --calcite-ui-component-fab-background-danger-solid: #d83020;
498
+ --calcite-ui-component-fab-background-danger-outline-fill: #ffffff;
499
+ --calcite-ui-component-fab-border-brand-outline-fill: #007ac2;
500
+ --calcite-ui-component-fab-border-brand-solid: #007ac2;
501
+ --calcite-ui-component-fab-border-inverse-outline-fill: #353535;
502
+ --calcite-ui-component-fab-border-inverse-solid: #353535;
503
+ --calcite-ui-component-fab-border-neutral-outline-fill: #353535;
504
+ --calcite-ui-component-fab-border-neutral-solid: #353535;
505
+ --calcite-ui-component-fab-border-danger-outline-fill: #d83020;
506
+ --calcite-ui-component-fab-border-danger-solid: #d83020;
507
+ }
package/package.json ADDED
@@ -0,0 +1,108 @@
1
+ {
2
+ "name": "@esri/calcite-design-tokens",
3
+ "version": "1.0.0-beta.0",
4
+ "description": "Esri's Calcite Design System Tokens",
5
+ "homepage": "https://github.com/Esri/calcite-design-tokens",
6
+ "keywords": [
7
+ "Calcite",
8
+ "Calcite Design System",
9
+ "design tokens",
10
+ "tokens"
11
+ ],
12
+ "main": "./dist/js/calcite-headless.js",
13
+ "type": "module",
14
+ "exports": {
15
+ ".": "./dist/js/calcite-headless.js",
16
+ "./css": "./dist/css/calcite-headless.css",
17
+ "./css/brand/dark": "./dist/css/brand-dark.css",
18
+ "./css/brand/light": "./dist/css/brand-light.css",
19
+ "./css/calcite/dark": "./dist/css/calcite-dark.css",
20
+ "./css/calcite/light": "./dist/css/calcite-light.css",
21
+ "./css/headless": "./dist/css/calcite-headless.css",
22
+ "./scss": "./dist/scss/calcite-headless.scss",
23
+ "./scss/brand/dark": "./dist/scss/brand-dark.scss",
24
+ "./scss/brand/light": "./dist/scss/brand-light.scss",
25
+ "./scss/calcite/dark": "./dist/scss/calcite-dark.scss",
26
+ "./scss/calcite/light": "./dist/scss/calcite-light.scss",
27
+ "./scss/headless": "./dist/scss/calcite-headless.scss",
28
+ "./js/brand/dark": "./dist/js/brand-dark.js",
29
+ "./js/brand/light": "./dist/js/brand-light.js",
30
+ "./js/calcite/dark": "./dist/js/calcite-dark.js",
31
+ "./js/calcite/light": "./dist/js/calcite-light.js",
32
+ "./js/headless": "./dist/js/calcite-headless.js"
33
+ },
34
+ "repository": {
35
+ "type": "git",
36
+ "url": "git://github.com/Esri/calcite-styles.git"
37
+ },
38
+ "author": {
39
+ "name": "Esri"
40
+ },
41
+ "contributors": [
42
+ {
43
+ "name": "Ali Stump",
44
+ "email": "astump@esri.com"
45
+ },
46
+ {
47
+ "name": "Erik Harper-Dicianno",
48
+ "email": "eharperdicianno@esri.com"
49
+ },
50
+ {
51
+ "name": "Bruno Aires",
52
+ "email": "baires@esri.com"
53
+ },
54
+ {
55
+ "name": "Jacques Keet",
56
+ "email": "jkeet@esri.com"
57
+ },
58
+ {
59
+ "name": "Manuela Costa",
60
+ "email": "mcosta@esri.com"
61
+ }
62
+ ],
63
+ "license": "SEE LICENSE IN README.md",
64
+ "bugs": {
65
+ "url": "https://github.com/esri/calcite-design-tokens/issues"
66
+ },
67
+ "scripts": {
68
+ "build:tokens": "node bin/run.js",
69
+ "build:ts": "tsc --project tsconfig.prod.json",
70
+ "build": "npm run build:ts && npm run build:tokens",
71
+ "clean": "rimraf dist",
72
+ "lint:eslint": "eslint --ext .ts,.tsx --fix .",
73
+ "lint:markdown": "markdownlint --fix --disable MD024 MD013 MD041 MD033",
74
+ "lint:prettier": "prettier --write .",
75
+ "lint:staged": "lint-staged",
76
+ "lint": "npm run lint:eslint && npm run lint:markdown && npm run lint:prettier",
77
+ "prepare": "husky install",
78
+ "release": "echo 'release is still TBD. Please message Ali Stump for more information.",
79
+ "test": "jest"
80
+ },
81
+ "devDependencies": {
82
+ "@tokens-studio/sd-transforms": "^0.8.2",
83
+ "@types/jest": "^29.5.0",
84
+ "@types/node": "^18.15.11",
85
+ "@typescript-eslint/eslint-plugin": "^5.59.2",
86
+ "change-case": "^4.1.2",
87
+ "eslint": "^8.39.0",
88
+ "eslint-config-prettier": "^8.8.0",
89
+ "eslint-plugin-jest": "^27.2.1",
90
+ "eslint-plugin-jsdoc": "^43.1.1",
91
+ "eslint-plugin-prettier": "^4.2.1",
92
+ "eslint-plugin-unicorn": "^46.0.0",
93
+ "gh-release": "^7.0.2",
94
+ "husky": "^8.0.3",
95
+ "jest": "^29.5.0",
96
+ "markdownlint-cli": "^0.34.0",
97
+ "prettier": "^2.8.8",
98
+ "rimraf": "^5.0.0",
99
+ "shell-quote": "^1.8.1",
100
+ "style-dictionary": "^3.7.1",
101
+ "token-transformer": "^0.0.27",
102
+ "ts-jest": "^29.0.5",
103
+ "ts-node": "^10.9.1",
104
+ "tslib": "^2.5.0",
105
+ "typescript": "^5.0.2",
106
+ "yargs": "^17.7.2"
107
+ }
108
+ }