@esri/calcite-design-tokens 2.0.0-rc.0 → 2.0.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 +105 -97
  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 +286 -319
  11. package/dist/es6/core.js +287 -320
  12. package/dist/es6/global.d.ts +101 -106
  13. package/dist/es6/global.js +116 -121
  14. package/dist/js/core.d.ts +98 -143
  15. package/dist/js/core.js +5442 -6029
  16. package/dist/js/global.d.ts +65 -66
  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,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Sun, 26 Nov 2023 08:48:21 GMT
3
+ * Generated on Sat, 02 Dec 2023 04:05:27 GMT
4
4
  */
5
5
 
6
6
  @import url("./global.css");
@@ -9,21 +9,8 @@
9
9
 
10
10
  @media (prefers-color-scheme: light) {
11
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;
12
+ --calcite-color-border-white: #ffffff;
13
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
27
14
  --calcite-color-border-input: #949494;
28
15
  --calcite-color-border-3: #dfdfdf;
29
16
  --calcite-color-border-2: #d4d4d4;
@@ -33,40 +20,42 @@
33
20
  --calcite-color-text-3: #6a6a6a;
34
21
  --calcite-color-text-2: #4a4a4a;
35
22
  --calcite-color-text-1: #151515;
23
+ --calcite-color-inverse-press: #202020;
24
+ --calcite-color-inverse-hover: #2b2b2b;
25
+ --calcite-color-inverse: #353535;
26
+ --calcite-color-status-danger-press: #7c1d13;
27
+ --calcite-color-status-danger-hover: #a82b1e;
28
+ --calcite-color-status-danger: #d83020;
29
+ --calcite-color-status-warning-press: #bfa200;
30
+ --calcite-color-status-warning-hover: #d9bc00;
31
+ --calcite-color-status-warning: #edd317;
32
+ --calcite-color-status-success-press: #1a6324;
33
+ --calcite-color-status-success-hover: #288835;
34
+ --calcite-color-status-success: #35ac46;
35
+ --calcite-color-status-info-press: #00304d;
36
+ --calcite-color-status-info-hover: #004874;
37
+ --calcite-color-status-info: #00619b;
38
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
39
+ --calcite-color-brand-press: #004874;
40
+ --calcite-color-brand-hover: #00619b;
41
+ --calcite-color-brand: #007ac2;
42
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
43
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
44
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
45
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
46
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
36
47
  --calcite-color-foreground-current: #c7eaff;
37
48
  --calcite-color-foreground-3: #eaeaea;
38
49
  --calcite-color-foreground-2: #f3f3f3;
39
50
  --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
51
  --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
52
  }
51
53
  }
52
54
 
53
55
  @media (prefers-color-scheme: dark) {
54
56
  :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;
57
+ --calcite-color-border-white: #f8f8f8;
58
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
70
59
  --calcite-color-border-input: #757575;
71
60
  --calcite-color-border-3: #404040;
72
61
  --calcite-color-border-2: #4a4a4a;
@@ -76,39 +65,41 @@
76
65
  --calcite-color-text-3: #9f9f9f;
77
66
  --calcite-color-text-2: #bfbfbf;
78
67
  --calcite-color-text-1: #ffffff;
68
+ --calcite-color-inverse-press: #f3f3f3;
69
+ --calcite-color-inverse-hover: #ffffff;
70
+ --calcite-color-inverse: #f8f8f8;
71
+ --calcite-color-status-danger-press: #d90012;
72
+ --calcite-color-status-danger-hover: #ff0015;
73
+ --calcite-color-status-danger: #FE583E;
74
+ --calcite-color-status-warning-press: #f5d000;
75
+ --calcite-color-status-warning-hover: #ffee33;
76
+ --calcite-color-status-warning: #FFC900;
77
+ --calcite-color-status-success-press: #00b81b;
78
+ --calcite-color-status-success-hover: #3bed52;
79
+ --calcite-color-status-success: #36DA43;
80
+ --calcite-color-status-info-press: #009af2;
81
+ --calcite-color-status-info-hover: #3db8ff;
82
+ --calcite-color-status-info: #00A0FF;
83
+ --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
84
+ --calcite-color-brand-press: #00619b;
85
+ --calcite-color-brand-hover: #007ac2;
86
+ --calcite-color-brand: #009af2;
87
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
88
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
89
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
90
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
91
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
79
92
  --calcite-color-foreground-current: #214155;
80
93
  --calcite-color-foreground-3: #151515;
81
94
  --calcite-color-foreground-2: #202020;
82
95
  --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
96
  --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
97
  }
94
98
  }
95
99
 
96
100
  .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;
101
+ --calcite-color-border-white: #ffffff;
102
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
112
103
  --calcite-color-border-input: #949494;
113
104
  --calcite-color-border-3: #dfdfdf;
114
105
  --calcite-color-border-2: #d4d4d4;
@@ -118,38 +109,40 @@
118
109
  --calcite-color-text-3: #6a6a6a;
119
110
  --calcite-color-text-2: #4a4a4a;
120
111
  --calcite-color-text-1: #151515;
112
+ --calcite-color-inverse-press: #202020;
113
+ --calcite-color-inverse-hover: #2b2b2b;
114
+ --calcite-color-inverse: #353535;
115
+ --calcite-color-status-danger-press: #7c1d13;
116
+ --calcite-color-status-danger-hover: #a82b1e;
117
+ --calcite-color-status-danger: #d83020;
118
+ --calcite-color-status-warning-press: #bfa200;
119
+ --calcite-color-status-warning-hover: #d9bc00;
120
+ --calcite-color-status-warning: #edd317;
121
+ --calcite-color-status-success-press: #1a6324;
122
+ --calcite-color-status-success-hover: #288835;
123
+ --calcite-color-status-success: #35ac46;
124
+ --calcite-color-status-info-press: #00304d;
125
+ --calcite-color-status-info-hover: #004874;
126
+ --calcite-color-status-info: #00619b;
127
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
128
+ --calcite-color-brand-press: #004874;
129
+ --calcite-color-brand-hover: #00619b;
130
+ --calcite-color-brand: #007ac2;
131
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
132
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
133
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
134
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
135
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
121
136
  --calcite-color-foreground-current: #c7eaff;
122
137
  --calcite-color-foreground-3: #eaeaea;
123
138
  --calcite-color-foreground-2: #f3f3f3;
124
139
  --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
140
  --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
141
  }
136
142
 
137
143
  .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;
144
+ --calcite-color-border-white: #f8f8f8;
145
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
153
146
  --calcite-color-border-input: #757575;
154
147
  --calcite-color-border-3: #404040;
155
148
  --calcite-color-border-2: #4a4a4a;
@@ -159,18 +152,33 @@
159
152
  --calcite-color-text-3: #9f9f9f;
160
153
  --calcite-color-text-2: #bfbfbf;
161
154
  --calcite-color-text-1: #ffffff;
155
+ --calcite-color-inverse-press: #f3f3f3;
156
+ --calcite-color-inverse-hover: #ffffff;
157
+ --calcite-color-inverse: #f8f8f8;
158
+ --calcite-color-status-danger-press: #d90012;
159
+ --calcite-color-status-danger-hover: #ff0015;
160
+ --calcite-color-status-danger: #FE583E;
161
+ --calcite-color-status-warning-press: #f5d000;
162
+ --calcite-color-status-warning-hover: #ffee33;
163
+ --calcite-color-status-warning: #FFC900;
164
+ --calcite-color-status-success-press: #00b81b;
165
+ --calcite-color-status-success-hover: #3bed52;
166
+ --calcite-color-status-success: #36DA43;
167
+ --calcite-color-status-info-press: #009af2;
168
+ --calcite-color-status-info-hover: #3db8ff;
169
+ --calcite-color-status-info: #00A0FF;
170
+ --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
171
+ --calcite-color-brand-press: #00619b;
172
+ --calcite-color-brand-hover: #007ac2;
173
+ --calcite-color-brand: #009af2;
174
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
175
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
176
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
177
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
178
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
162
179
  --calcite-color-foreground-current: #214155;
163
180
  --calcite-color-foreground-3: #151515;
164
181
  --calcite-color-foreground-2: #202020;
165
182
  --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
183
  --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
184
  }
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 Sat, 02 Dec 2023 04:05:27 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
  }