@esri/calcite-design-tokens 3.1.1-next.0 → 3.2.0-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 (35) hide show
  1. package/dist/css/core.css +2 -2
  2. package/dist/css/dark.css +3 -2
  3. package/dist/css/global.css +2 -2
  4. package/dist/css/index.css +12 -7
  5. package/dist/css/light.css +2 -1
  6. package/dist/css/semantic.css +22 -22
  7. package/dist/docs/core.json +1278 -1319
  8. package/dist/docs/dark.json +127 -90
  9. package/dist/docs/global.json +571 -484
  10. package/dist/docs/light.json +126 -89
  11. package/dist/docs/semantic.json +333 -283
  12. package/dist/es6/core.js +2 -2
  13. package/dist/es6/dark.d.ts +2 -0
  14. package/dist/es6/dark.js +3 -2
  15. package/dist/es6/global.d.ts +3 -1
  16. package/dist/es6/global.js +8 -4
  17. package/dist/es6/light.d.ts +2 -0
  18. package/dist/es6/light.js +2 -1
  19. package/dist/es6/semantic.d.ts +1 -1
  20. package/dist/es6/semantic.js +1 -1
  21. package/dist/js/core.js +1480 -806
  22. package/dist/js/dark.d.ts +2 -0
  23. package/dist/js/dark.js +141 -46
  24. package/dist/js/global.d.ts +1 -0
  25. package/dist/js/global.js +634 -372
  26. package/dist/js/light.d.ts +2 -0
  27. package/dist/js/light.js +140 -45
  28. package/dist/js/semantic.js +366 -208
  29. package/dist/scss/core.scss +2 -2
  30. package/dist/scss/dark.scss +3 -2
  31. package/dist/scss/global.scss +2 -2
  32. package/dist/scss/index.scss +5 -3
  33. package/dist/scss/light.scss +2 -1
  34. package/dist/scss/semantic.scss +22 -22
  35. package/package.json +3 -3
package/dist/css/core.css CHANGED
@@ -169,7 +169,7 @@
169
169
  --calcite-color-medium-saturation-blue-m-bb-060: #6db5e3;
170
170
  --calcite-color-medium-saturation-blue-m-bb-070: #548eb4;
171
171
  --calcite-color-medium-saturation-blue-m-bb-080: #3a6884;
172
- --calcite-color-medium-saturation-blue-m-bb-090: #214155;
172
+ --calcite-color-medium-saturation-blue-m-bb-090: #2b465f;
173
173
  --calcite-color-medium-saturation-blue-m-bb-100: #071a26;
174
174
  --calcite-color-medium-saturation-green-blue-m-gb-010: #dbf2f1;
175
175
  --calcite-color-medium-saturation-green-blue-m-gb-020: #beedec;
@@ -291,7 +291,7 @@
291
291
  --calcite-color-medium-saturation-violet-m-vv-080: #584572;
292
292
  --calcite-color-medium-saturation-violet-m-vv-090: #36264c;
293
293
  --calcite-color-medium-saturation-violet-m-vv-100: #140726;
294
- --calcite-color-high-saturation-blue-h-bb-010: #c7eaff;
294
+ --calcite-color-high-saturation-blue-h-bb-010: #d6efff;
295
295
  --calcite-color-high-saturation-blue-h-bb-020: #9fd4f3;
296
296
  --calcite-color-high-saturation-blue-h-bb-030: #77bde7;
297
297
  --calcite-color-high-saturation-blue-h-bb-040: #50a7da;
package/dist/css/dark.css CHANGED
@@ -9,7 +9,8 @@
9
9
  --calcite-color-foreground-1: #2b2b2b;
10
10
  --calcite-color-foreground-2: #212121;
11
11
  --calcite-color-foreground-3: #141414;
12
- --calcite-color-foreground-current: #214155;
12
+ --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-foreground-highlight instead */
13
+ --calcite-color-foreground-highlight: #2b465f;
13
14
  --calcite-color-transparent: rgba(255, 255, 255, 0);
14
15
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
15
16
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
@@ -39,7 +40,7 @@
39
40
  --calcite-color-text-1: #ffffff;
40
41
  --calcite-color-text-2: #bfbfbf;
41
42
  --calcite-color-text-3: #9e9e9e;
42
- --calcite-color-text-highlight: #c7eaff;
43
+ --calcite-color-text-highlight: #d6efff;
43
44
  --calcite-color-text-inverse: #141414;
44
45
  --calcite-color-text-link: #00a0ff;
45
46
  --calcite-color-border-1: #545454;
package/dist/css/global.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --calcite-container-size-gutter: 16px;
15
15
  --calcite-container-size-content-fluid: 100%; /** for fluid grid widths */
16
16
  --calcite-container-size-content-fixed: 1440px; /** only for lg breakpoint fixed grid width */
17
- --calcite-corner-radius-sharp: 0; /** deprecated, use --calcite-conder-radius-none instead */
17
+ --calcite-corner-radius-sharp: 0; /** deprecated, use --calcite-corner-radius-none instead */
18
18
  --calcite-corner-radius-none: 0;
19
19
  --calcite-corner-radius-xs: 2px;
20
20
  --calcite-corner-radius-sm: 4px;
@@ -61,7 +61,6 @@
61
61
  --calcite-opacity-dark: 0.85;
62
62
  --calcite-opacity-full: 1;
63
63
  --calcite-opacity-disabled: 0.5;
64
- --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
65
64
  --calcite-size-fixed-xxxs: 2px; /** deprecated */
66
65
  --calcite-size-fixed-xxs: 4px; /** deprecated */
67
66
  --calcite-size-fixed-xs: 6px; /** deprecated */
@@ -115,6 +114,7 @@
115
114
  --calcite-z-index-popup: 900;
116
115
  --calcite-z-index-tooltip: 901;
117
116
  --calcite-corner-radius: var(--calcite-corner-radius-none);
117
+ --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
118
118
  --calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
119
119
  --calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
120
120
  }
package/dist/css/index.css CHANGED
@@ -44,7 +44,8 @@
44
44
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
45
45
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
46
46
  --calcite-color-transparent: rgba(0, 0, 0, 0);
47
- --calcite-color-foreground-current: #c7eaff;
47
+ --calcite-color-foreground-highlight: #d6efff;
48
+ --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-foreground-highlight instead */
48
49
  --calcite-color-foreground-3: #ebebeb;
49
50
  --calcite-color-foreground-2: #f2f2f2;
50
51
  --calcite-color-foreground-1: #ffffff;
@@ -91,7 +92,8 @@
91
92
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
92
93
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
93
94
  --calcite-color-transparent: rgba(0, 0, 0, 0);
94
- --calcite-color-foreground-current: #c7eaff;
95
+ --calcite-color-foreground-highlight: #d6efff;
96
+ --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-foreground-highlight instead */
95
97
  --calcite-color-foreground-3: #ebebeb;
96
98
  --calcite-color-foreground-2: #f2f2f2;
97
99
  --calcite-color-foreground-1: #ffffff;
@@ -109,7 +111,7 @@
109
111
  --calcite-color-border-1: #545454;
110
112
  --calcite-color-text-link: #00a0ff;
111
113
  --calcite-color-text-inverse: #141414;
112
- --calcite-color-text-highlight: #c7eaff;
114
+ --calcite-color-text-highlight: #d6efff;
113
115
  --calcite-color-text-3: #9e9e9e;
114
116
  --calcite-color-text-2: #bfbfbf;
115
117
  --calcite-color-text-1: #ffffff;
@@ -139,7 +141,8 @@
139
141
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
140
142
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
141
143
  --calcite-color-transparent: rgba(255, 255, 255, 0);
142
- --calcite-color-foreground-current: #214155;
144
+ --calcite-color-foreground-highlight: #2b465f;
145
+ --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-foreground-highlight instead */
143
146
  --calcite-color-foreground-3: #141414;
144
147
  --calcite-color-foreground-2: #212121;
145
148
  --calcite-color-foreground-1: #2b2b2b;
@@ -186,7 +189,8 @@
186
189
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
187
190
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
188
191
  --calcite-color-transparent: rgba(0, 0, 0, 0);
189
- --calcite-color-foreground-current: #c7eaff;
192
+ --calcite-color-foreground-highlight: #d6efff;
193
+ --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-foreground-highlight instead */
190
194
  --calcite-color-foreground-3: #ebebeb;
191
195
  --calcite-color-foreground-2: #f2f2f2;
192
196
  --calcite-color-foreground-1: #ffffff;
@@ -202,7 +206,7 @@
202
206
  --calcite-color-border-1: #545454;
203
207
  --calcite-color-text-link: #00a0ff;
204
208
  --calcite-color-text-inverse: #141414;
205
- --calcite-color-text-highlight: #c7eaff;
209
+ --calcite-color-text-highlight: #d6efff;
206
210
  --calcite-color-text-3: #9e9e9e;
207
211
  --calcite-color-text-2: #bfbfbf;
208
212
  --calcite-color-text-1: #ffffff;
@@ -232,7 +236,8 @@
232
236
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
233
237
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
234
238
  --calcite-color-transparent: rgba(255, 255, 255, 0);
235
- --calcite-color-foreground-current: #214155;
239
+ --calcite-color-foreground-highlight: #2b465f;
240
+ --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-foreground-highlight instead */
236
241
  --calcite-color-foreground-3: #141414;
237
242
  --calcite-color-foreground-2: #212121;
238
243
  --calcite-color-foreground-1: #2b2b2b;
package/dist/css/light.css CHANGED
@@ -9,7 +9,8 @@
9
9
  --calcite-color-foreground-1: #ffffff;
10
10
  --calcite-color-foreground-2: #f2f2f2;
11
11
  --calcite-color-foreground-3: #ebebeb;
12
- --calcite-color-foreground-current: #c7eaff;
12
+ --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-foreground-highlight instead */
13
+ --calcite-color-foreground-highlight: #d6efff;
13
14
  --calcite-color-transparent: rgba(0, 0, 0, 0);
14
15
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
15
16
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
package/dist/css/semantic.css CHANGED
@@ -10,31 +10,11 @@
10
10
  --calcite-border-width-sm: 1px;
11
11
  --calcite-border-width-md: 2px;
12
12
  --calcite-border-width-lg: 4px;
13
- --calcite-container-size-height-xxs-max: 154px; /** Small handheld devices and mini-windows */
14
- --calcite-container-size-height-xs-min: 155px; /** Handheld devices */
15
- --calcite-container-size-height-xs-max: 328px; /** Handheld devices */
16
- --calcite-container-size-height-sm-min: 329px; /** Small tablets */
17
- --calcite-container-size-height-sm-max: 504px; /** Small tablets */
18
- --calcite-container-size-height-md-min: 505px; /** Small laptops */
19
- --calcite-container-size-height-md-max: 678px; /** Small laptops */
20
- --calcite-container-size-height-lg-min: 679px; /** Large laptops and desktop computers */
21
- --calcite-container-size-height-lg-max: 854px; /** Large laptops and desktop computers */
22
- --calcite-container-size-height-xl-min: 855px; /** Projectors and televisions */
23
- --calcite-container-size-width-xxs-max: 320px; /** Small handheld devices and mini-windows */
24
- --calcite-container-size-width-xs-min: 321px; /** Handheld devices */
25
- --calcite-container-size-width-xs-max: 476px; /** Handheld devices */
26
- --calcite-container-size-width-sm-min: 477px; /** Small tablets */
27
- --calcite-container-size-width-sm-max: 768px; /** Small tablets */
28
- --calcite-container-size-width-md-min: 769px; /** Small laptops */
29
- --calcite-container-size-width-md-max: 1152px; /** Small laptops */
30
- --calcite-container-size-width-lg-min: 1153px; /** Large laptops and desktop computers */
31
- --calcite-container-size-width-lg-max: 1440px; /** Large laptops and desktop computers */
32
- --calcite-container-size-width-xl-min: 1441px; /** Projectors and televisions */
33
13
  --calcite-container-size-margin: 24px;
34
14
  --calcite-container-size-gutter: 16px;
35
15
  --calcite-container-size-content-fluid: 100%; /** for fluid grid widths */
36
16
  --calcite-container-size-content-fixed: 1440px; /** only for lg breakpoint fixed grid width */
37
- --calcite-corner-radius-sharp: 0; /** deprecated, use --calcite-conder-radius-none instead */
17
+ --calcite-corner-radius-sharp: 0; /** deprecated, use --calcite-corner-radius-none instead */
38
18
  --calcite-corner-radius-none: 0;
39
19
  --calcite-corner-radius-xs: 2px;
40
20
  --calcite-corner-radius-sm: 4px;
@@ -81,7 +61,6 @@
81
61
  --calcite-opacity-dark: 0.85;
82
62
  --calcite-opacity-full: 1;
83
63
  --calcite-opacity-disabled: 0.5;
84
- --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
85
64
  --calcite-size-fixed-xxxs: 2px; /** deprecated */
86
65
  --calcite-size-fixed-xxs: 4px; /** deprecated */
87
66
  --calcite-size-fixed-xs: 6px; /** deprecated */
@@ -134,7 +113,28 @@
134
113
  --calcite-z-index-modal: 800;
135
114
  --calcite-z-index-popup: 900;
136
115
  --calcite-z-index-tooltip: 901;
116
+ --calcite-container-size-height-xxs-max: 154px; /** Small handheld devices and mini-windows */
117
+ --calcite-container-size-height-xs-min: 155px; /** Handheld devices */
118
+ --calcite-container-size-height-xs-max: 328px; /** Handheld devices */
119
+ --calcite-container-size-height-sm-min: 329px; /** Small tablets */
120
+ --calcite-container-size-height-sm-max: 504px; /** Small tablets */
121
+ --calcite-container-size-height-md-min: 505px; /** Small laptops */
122
+ --calcite-container-size-height-md-max: 678px; /** Small laptops */
123
+ --calcite-container-size-height-lg-min: 679px; /** Large laptops and desktop computers */
124
+ --calcite-container-size-height-lg-max: 854px; /** Large laptops and desktop computers */
125
+ --calcite-container-size-height-xl-min: 855px; /** Projectors and televisions */
126
+ --calcite-container-size-width-xxs-max: 320px; /** Small handheld devices and mini-windows */
127
+ --calcite-container-size-width-xs-min: 321px; /** Handheld devices */
128
+ --calcite-container-size-width-xs-max: 476px; /** Handheld devices */
129
+ --calcite-container-size-width-sm-min: 477px; /** Small tablets */
130
+ --calcite-container-size-width-sm-max: 768px; /** Small tablets */
131
+ --calcite-container-size-width-md-min: 769px; /** Small laptops */
132
+ --calcite-container-size-width-md-max: 1152px; /** Small laptops */
133
+ --calcite-container-size-width-lg-min: 1153px; /** Large laptops and desktop computers */
134
+ --calcite-container-size-width-lg-max: 1440px; /** Large laptops and desktop computers */
135
+ --calcite-container-size-width-xl-min: 1441px; /** Projectors and televisions */
137
136
  --calcite-corner-radius: var(--calcite-corner-radius-none);
137
+ --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
138
138
  --calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
139
139
  --calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
140
140
  }