@esri/calcite-design-tokens 2.0.0-rc.0 → 2.0.1-next.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 (25) hide show
  1. package/dist/css/breakpoint.css +1 -1
  2. package/dist/css/classes.css +25 -25
  3. package/dist/css/core.css +82 -115
  4. package/dist/css/dark.css +27 -25
  5. package/dist/css/global.css +29 -36
  6. package/dist/css/index.css +149 -99
  7. package/dist/css/light.css +27 -25
  8. package/dist/docs/core.json +8134 -0
  9. package/dist/docs/global.json +6617 -0
  10. package/dist/es6/core.d.ts +296 -324
  11. package/dist/es6/core.js +287 -320
  12. package/dist/es6/global.d.ts +148 -130
  13. package/dist/es6/global.js +117 -122
  14. package/dist/js/core.d.ts +99 -144
  15. package/dist/js/core.js +5442 -6029
  16. package/dist/js/global.d.ts +66 -67
  17. package/dist/js/global.js +2173 -2081
  18. package/dist/scss/breakpoints.scss +1 -1
  19. package/dist/scss/core.scss +82 -115
  20. package/dist/scss/dark.scss +27 -25
  21. package/dist/scss/global.scss +94 -0
  22. package/dist/scss/index.scss +53 -49
  23. package/dist/scss/light.scss +27 -25
  24. package/dist/scss/mixins.scss +24 -24
  25. package/package.json +5 -26
package/dist/css/index.css CHANGED
@@ -1,29 +1,58 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 26 Nov 2023 08:48:21 GMT
3
+ * Generated on Thu, 07 Dec 2023 19:17:49 GMT
4
4
  */
5
5
 
6
6
  @import url("./global.css");
7
7
 
8
8
  @import url("./classes.css");
9
9
 
10
+ :root {
11
+ --calcite-color-border-white: #ffffff;
12
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
13
+ --calcite-color-border-input: #949494;
14
+ --calcite-color-border-3: #dfdfdf;
15
+ --calcite-color-border-2: #d4d4d4;
16
+ --calcite-color-border-1: #cacaca;
17
+ --calcite-color-text-link: #00619b;
18
+ --calcite-color-text-inverse: #ffffff;
19
+ --calcite-color-text-3: #6a6a6a;
20
+ --calcite-color-text-2: #4a4a4a;
21
+ --calcite-color-text-1: #151515;
22
+ --calcite-color-inverse-press: #202020;
23
+ --calcite-color-inverse-hover: #2b2b2b;
24
+ --calcite-color-inverse: #353535;
25
+ --calcite-color-status-danger-press: #7c1d13;
26
+ --calcite-color-status-danger-hover: #a82b1e;
27
+ --calcite-color-status-danger: #d83020;
28
+ --calcite-color-status-warning-press: #bfa200;
29
+ --calcite-color-status-warning-hover: #d9bc00;
30
+ --calcite-color-status-warning: #edd317;
31
+ --calcite-color-status-success-press: #1a6324;
32
+ --calcite-color-status-success-hover: #288835;
33
+ --calcite-color-status-success: #35ac46;
34
+ --calcite-color-status-info-press: #00304d;
35
+ --calcite-color-status-info-hover: #004874;
36
+ --calcite-color-status-info: #00619b;
37
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
38
+ --calcite-color-brand-press: #004874;
39
+ --calcite-color-brand-hover: #00619b;
40
+ --calcite-color-brand: #007ac2;
41
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
42
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
43
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
44
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
45
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
46
+ --calcite-color-foreground-current: #c7eaff;
47
+ --calcite-color-foreground-3: #eaeaea;
48
+ --calcite-color-foreground-2: #f3f3f3;
49
+ --calcite-color-foreground-1: #ffffff;
50
+ --calcite-color-background: #f8f8f8;
51
+ }
10
52
  @media (prefers-color-scheme: light) {
11
- :root {
12
- --calcite-color-inverse-press: #202020;
13
- --calcite-color-inverse-hover: #2b2b2b;
14
- --calcite-color-inverse: #353535;
15
- --calcite-color-danger-press: #7c1d13;
16
- --calcite-color-danger-hover: #a82b1e;
17
- --calcite-color-danger: #d83020;
18
- --calcite-color-warning-press: #bfa200;
19
- --calcite-color-warning-hover: #d9bc00;
20
- --calcite-color-warning: #edd317;
21
- --calcite-color-success-press: #1a6324;
22
- --calcite-color-success-hover: #288835;
23
- --calcite-color-success: #35ac46;
24
- --calcite-color-info-press: #00304d;
25
- --calcite-color-info-hover: #004874;
26
- --calcite-color-info: #00619b;
53
+ .calcite-mode-auto {
54
+ --calcite-color-border-white: #ffffff;
55
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
27
56
  --calcite-color-border-input: #949494;
28
57
  --calcite-color-border-3: #dfdfdf;
29
58
  --calcite-color-border-2: #d4d4d4;
@@ -33,40 +62,42 @@
33
62
  --calcite-color-text-3: #6a6a6a;
34
63
  --calcite-color-text-2: #4a4a4a;
35
64
  --calcite-color-text-1: #151515;
65
+ --calcite-color-inverse-press: #202020;
66
+ --calcite-color-inverse-hover: #2b2b2b;
67
+ --calcite-color-inverse: #353535;
68
+ --calcite-color-status-danger-press: #7c1d13;
69
+ --calcite-color-status-danger-hover: #a82b1e;
70
+ --calcite-color-status-danger: #d83020;
71
+ --calcite-color-status-warning-press: #bfa200;
72
+ --calcite-color-status-warning-hover: #d9bc00;
73
+ --calcite-color-status-warning: #edd317;
74
+ --calcite-color-status-success-press: #1a6324;
75
+ --calcite-color-status-success-hover: #288835;
76
+ --calcite-color-status-success: #35ac46;
77
+ --calcite-color-status-info-press: #00304d;
78
+ --calcite-color-status-info-hover: #004874;
79
+ --calcite-color-status-info: #00619b;
80
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
81
+ --calcite-color-brand-press: #004874;
82
+ --calcite-color-brand-hover: #00619b;
83
+ --calcite-color-brand: #007ac2;
84
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
85
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
86
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
87
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
88
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
36
89
  --calcite-color-foreground-current: #c7eaff;
37
90
  --calcite-color-foreground-3: #eaeaea;
38
91
  --calcite-color-foreground-2: #f3f3f3;
39
92
  --calcite-color-foreground-1: #ffffff;
40
- --calcite-color-background-transparent-dismiss: rgba(255, 255, 255, 0.8);
41
- --calcite-color-background-transparent-scrim: rgba(255, 255, 255, 0.85);
42
- --calcite-color-background-transparent-press: rgba(0, 0, 0, 0.08);
43
- --calcite-color-background-transparent-hover: rgba(0, 0, 0, 0.04);
44
- --calcite-color-background-transparent: rgba(255, 255, 255, 0);
45
93
  --calcite-color-background: #f8f8f8;
46
- --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
47
- --calcite-color-brand-press: #004874;
48
- --calcite-color-brand-hover: #00619b;
49
- --calcite-color-brand: #007ac2;
50
94
  }
51
95
  }
52
96
 
53
97
  @media (prefers-color-scheme: dark) {
54
- :root {
55
- --calcite-color-inverse-press: #f3f3f3;
56
- --calcite-color-inverse-hover: #ffffff;
57
- --calcite-color-inverse: #f8f8f8;
58
- --calcite-color-danger-press: #d90012;
59
- --calcite-color-danger-hover: #ff0015;
60
- --calcite-color-danger: #FE583E;
61
- --calcite-color-warning-press: #f5d000;
62
- --calcite-color-warning-hover: #ffee33;
63
- --calcite-color-warning: #FFC900;
64
- --calcite-color-success-press: #00b81b;
65
- --calcite-color-success-hover: #3bed52;
66
- --calcite-color-success: #36DA43;
67
- --calcite-color-info-press: #009af2;
68
- --calcite-color-info-hover: #3db8ff;
69
- --calcite-color-info: #00A0FF;
98
+ .calcite-mode-auto {
99
+ --calcite-color-border-white: #f8f8f8;
100
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
70
101
  --calcite-color-border-input: #757575;
71
102
  --calcite-color-border-3: #404040;
72
103
  --calcite-color-border-2: #4a4a4a;
@@ -76,39 +107,41 @@
76
107
  --calcite-color-text-3: #9f9f9f;
77
108
  --calcite-color-text-2: #bfbfbf;
78
109
  --calcite-color-text-1: #ffffff;
110
+ --calcite-color-inverse-press: #f3f3f3;
111
+ --calcite-color-inverse-hover: #ffffff;
112
+ --calcite-color-inverse: #f8f8f8;
113
+ --calcite-color-status-danger-press: #d90012;
114
+ --calcite-color-status-danger-hover: #ff0015;
115
+ --calcite-color-status-danger: #FE583E;
116
+ --calcite-color-status-warning-press: #f5d000;
117
+ --calcite-color-status-warning-hover: #ffee33;
118
+ --calcite-color-status-warning: #FFC900;
119
+ --calcite-color-status-success-press: #00b81b;
120
+ --calcite-color-status-success-hover: #3bed52;
121
+ --calcite-color-status-success: #36DA43;
122
+ --calcite-color-status-info-press: #009af2;
123
+ --calcite-color-status-info-hover: #3db8ff;
124
+ --calcite-color-status-info: #00A0FF;
125
+ --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
126
+ --calcite-color-brand-press: #00619b;
127
+ --calcite-color-brand-hover: #007ac2;
128
+ --calcite-color-brand: #009af2;
129
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
130
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
131
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
132
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
133
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
79
134
  --calcite-color-foreground-current: #214155;
80
135
  --calcite-color-foreground-3: #151515;
81
136
  --calcite-color-foreground-2: #202020;
82
137
  --calcite-color-foreground-1: #2b2b2b;
83
- --calcite-color-background-transparent-dismiss: rgba(43, 43, 43, 0.8);
84
- --calcite-color-background-transparent-scrim: rgba(0, 0, 0, 0.85);
85
- --calcite-color-background-transparent-press: rgba(255, 255, 255, 0.08);
86
- --calcite-color-background-transparent-hover: rgba(255, 255, 255, 0.04);
87
- --calcite-color-background-transparent: rgba(0, 0, 0, 0);
88
138
  --calcite-color-background: #353535;
89
- --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
90
- --calcite-color-brand-press: #00619b;
91
- --calcite-color-brand-hover: #007ac2;
92
- --calcite-color-brand: #009af2;
93
139
  }
94
140
  }
95
141
 
96
142
  .calcite-mode-light {
97
- --calcite-color-inverse-press: #202020;
98
- --calcite-color-inverse-hover: #2b2b2b;
99
- --calcite-color-inverse: #353535;
100
- --calcite-color-danger-press: #7c1d13;
101
- --calcite-color-danger-hover: #a82b1e;
102
- --calcite-color-danger: #d83020;
103
- --calcite-color-warning-press: #bfa200;
104
- --calcite-color-warning-hover: #d9bc00;
105
- --calcite-color-warning: #edd317;
106
- --calcite-color-success-press: #1a6324;
107
- --calcite-color-success-hover: #288835;
108
- --calcite-color-success: #35ac46;
109
- --calcite-color-info-press: #00304d;
110
- --calcite-color-info-hover: #004874;
111
- --calcite-color-info: #00619b;
143
+ --calcite-color-border-white: #ffffff;
144
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
112
145
  --calcite-color-border-input: #949494;
113
146
  --calcite-color-border-3: #dfdfdf;
114
147
  --calcite-color-border-2: #d4d4d4;
@@ -118,38 +151,40 @@
118
151
  --calcite-color-text-3: #6a6a6a;
119
152
  --calcite-color-text-2: #4a4a4a;
120
153
  --calcite-color-text-1: #151515;
154
+ --calcite-color-inverse-press: #202020;
155
+ --calcite-color-inverse-hover: #2b2b2b;
156
+ --calcite-color-inverse: #353535;
157
+ --calcite-color-status-danger-press: #7c1d13;
158
+ --calcite-color-status-danger-hover: #a82b1e;
159
+ --calcite-color-status-danger: #d83020;
160
+ --calcite-color-status-warning-press: #bfa200;
161
+ --calcite-color-status-warning-hover: #d9bc00;
162
+ --calcite-color-status-warning: #edd317;
163
+ --calcite-color-status-success-press: #1a6324;
164
+ --calcite-color-status-success-hover: #288835;
165
+ --calcite-color-status-success: #35ac46;
166
+ --calcite-color-status-info-press: #00304d;
167
+ --calcite-color-status-info-hover: #004874;
168
+ --calcite-color-status-info: #00619b;
169
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
170
+ --calcite-color-brand-press: #004874;
171
+ --calcite-color-brand-hover: #00619b;
172
+ --calcite-color-brand: #007ac2;
173
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
174
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
175
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
176
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
177
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
121
178
  --calcite-color-foreground-current: #c7eaff;
122
179
  --calcite-color-foreground-3: #eaeaea;
123
180
  --calcite-color-foreground-2: #f3f3f3;
124
181
  --calcite-color-foreground-1: #ffffff;
125
- --calcite-color-background-transparent-dismiss: rgba(255, 255, 255, 0.8);
126
- --calcite-color-background-transparent-scrim: rgba(255, 255, 255, 0.85);
127
- --calcite-color-background-transparent-press: rgba(0, 0, 0, 0.08);
128
- --calcite-color-background-transparent-hover: rgba(0, 0, 0, 0.04);
129
- --calcite-color-background-transparent: rgba(255, 255, 255, 0);
130
182
  --calcite-color-background: #f8f8f8;
131
- --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
132
- --calcite-color-brand-press: #004874;
133
- --calcite-color-brand-hover: #00619b;
134
- --calcite-color-brand: #007ac2;
135
183
  }
136
184
 
137
185
  .calcite-mode-dark {
138
- --calcite-color-inverse-press: #f3f3f3;
139
- --calcite-color-inverse-hover: #ffffff;
140
- --calcite-color-inverse: #f8f8f8;
141
- --calcite-color-danger-press: #d90012;
142
- --calcite-color-danger-hover: #ff0015;
143
- --calcite-color-danger: #FE583E;
144
- --calcite-color-warning-press: #f5d000;
145
- --calcite-color-warning-hover: #ffee33;
146
- --calcite-color-warning: #FFC900;
147
- --calcite-color-success-press: #00b81b;
148
- --calcite-color-success-hover: #3bed52;
149
- --calcite-color-success: #36DA43;
150
- --calcite-color-info-press: #009af2;
151
- --calcite-color-info-hover: #3db8ff;
152
- --calcite-color-info: #00A0FF;
186
+ --calcite-color-border-white: #f8f8f8;
187
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
153
188
  --calcite-color-border-input: #757575;
154
189
  --calcite-color-border-3: #404040;
155
190
  --calcite-color-border-2: #4a4a4a;
@@ -159,18 +194,33 @@
159
194
  --calcite-color-text-3: #9f9f9f;
160
195
  --calcite-color-text-2: #bfbfbf;
161
196
  --calcite-color-text-1: #ffffff;
197
+ --calcite-color-inverse-press: #f3f3f3;
198
+ --calcite-color-inverse-hover: #ffffff;
199
+ --calcite-color-inverse: #f8f8f8;
200
+ --calcite-color-status-danger-press: #d90012;
201
+ --calcite-color-status-danger-hover: #ff0015;
202
+ --calcite-color-status-danger: #FE583E;
203
+ --calcite-color-status-warning-press: #f5d000;
204
+ --calcite-color-status-warning-hover: #ffee33;
205
+ --calcite-color-status-warning: #FFC900;
206
+ --calcite-color-status-success-press: #00b81b;
207
+ --calcite-color-status-success-hover: #3bed52;
208
+ --calcite-color-status-success: #36DA43;
209
+ --calcite-color-status-info-press: #009af2;
210
+ --calcite-color-status-info-hover: #3db8ff;
211
+ --calcite-color-status-info: #00A0FF;
212
+ --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
213
+ --calcite-color-brand-press: #00619b;
214
+ --calcite-color-brand-hover: #007ac2;
215
+ --calcite-color-brand: #009af2;
216
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
217
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
218
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
219
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
220
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
162
221
  --calcite-color-foreground-current: #214155;
163
222
  --calcite-color-foreground-3: #151515;
164
223
  --calcite-color-foreground-2: #202020;
165
224
  --calcite-color-foreground-1: #2b2b2b;
166
- --calcite-color-background-transparent-dismiss: rgba(43, 43, 43, 0.8);
167
- --calcite-color-background-transparent-scrim: rgba(0, 0, 0, 0.85);
168
- --calcite-color-background-transparent-press: rgba(255, 255, 255, 0.08);
169
- --calcite-color-background-transparent-hover: rgba(255, 255, 255, 0.04);
170
- --calcite-color-background-transparent: rgba(0, 0, 0, 0);
171
225
  --calcite-color-background: #353535;
172
- --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
173
- --calcite-color-brand-press: #00619b;
174
- --calcite-color-brand-hover: #007ac2;
175
- --calcite-color-brand: #009af2;
176
226
  }
package/dist/css/light.css CHANGED
@@ -1,24 +1,11 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 26 Nov 2023 08:48:21 GMT
3
+ * Generated on Thu, 07 Dec 2023 19:17:49 GMT
4
4
  */
5
5
 
6
6
  :root{
7
- --calcite-color-inverse-press: #202020;
8
- --calcite-color-inverse-hover: #2b2b2b;
9
- --calcite-color-inverse: #353535;
10
- --calcite-color-danger-press: #7c1d13;
11
- --calcite-color-danger-hover: #a82b1e;
12
- --calcite-color-danger: #d83020;
13
- --calcite-color-warning-press: #bfa200;
14
- --calcite-color-warning-hover: #d9bc00;
15
- --calcite-color-warning: #edd317;
16
- --calcite-color-success-press: #1a6324;
17
- --calcite-color-success-hover: #288835;
18
- --calcite-color-success: #35ac46;
19
- --calcite-color-info-press: #00304d;
20
- --calcite-color-info-hover: #004874;
21
- --calcite-color-info: #00619b;
7
+ --calcite-color-border-white: #ffffff;
8
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
22
9
  --calcite-color-border-input: #949494;
23
10
  --calcite-color-border-3: #dfdfdf;
24
11
  --calcite-color-border-2: #d4d4d4;
@@ -28,18 +15,33 @@
28
15
  --calcite-color-text-3: #6a6a6a;
29
16
  --calcite-color-text-2: #4a4a4a;
30
17
  --calcite-color-text-1: #151515;
18
+ --calcite-color-inverse-press: #202020;
19
+ --calcite-color-inverse-hover: #2b2b2b;
20
+ --calcite-color-inverse: #353535;
21
+ --calcite-color-status-danger-press: #7c1d13;
22
+ --calcite-color-status-danger-hover: #a82b1e;
23
+ --calcite-color-status-danger: #d83020;
24
+ --calcite-color-status-warning-press: #bfa200;
25
+ --calcite-color-status-warning-hover: #d9bc00;
26
+ --calcite-color-status-warning: #edd317;
27
+ --calcite-color-status-success-press: #1a6324;
28
+ --calcite-color-status-success-hover: #288835;
29
+ --calcite-color-status-success: #35ac46;
30
+ --calcite-color-status-info-press: #00304d;
31
+ --calcite-color-status-info-hover: #004874;
32
+ --calcite-color-status-info: #00619b;
33
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
34
+ --calcite-color-brand-press: #004874;
35
+ --calcite-color-brand-hover: #00619b;
36
+ --calcite-color-brand: #007ac2;
37
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
38
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
39
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
40
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
41
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
31
42
  --calcite-color-foreground-current: #c7eaff;
32
43
  --calcite-color-foreground-3: #eaeaea;
33
44
  --calcite-color-foreground-2: #f3f3f3;
34
45
  --calcite-color-foreground-1: #ffffff;
35
- --calcite-color-background-transparent-dismiss: rgba(255, 255, 255, 0.8);
36
- --calcite-color-background-transparent-scrim: rgba(255, 255, 255, 0.85);
37
- --calcite-color-background-transparent-press: rgba(0, 0, 0, 0.08);
38
- --calcite-color-background-transparent-hover: rgba(0, 0, 0, 0.04);
39
- --calcite-color-background-transparent: rgba(255, 255, 255, 0);
40
46
  --calcite-color-background: #f8f8f8;
41
- --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
42
- --calcite-color-brand-press: #004874;
43
- --calcite-color-brand-hover: #00619b;
44
- --calcite-color-brand: #007ac2;
45
47
  }