@esri/calcite-design-tokens 2.0.1-next.0 → 2.0.1-next.2

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 +24 -24
  2. package/dist/css/classes.css +156 -211
  3. package/dist/css/core.css +308 -305
  4. package/dist/css/dark.css +42 -42
  5. package/dist/css/global.css +92 -90
  6. package/dist/css/index.css +205 -210
  7. package/dist/css/light.css +42 -42
  8. package/dist/docs/core.json +300 -1895
  9. package/dist/docs/global.json +201 -1225
  10. package/dist/es6/core.d.ts +1 -1
  11. package/dist/es6/core.js +1 -1
  12. package/dist/es6/global.d.ts +1 -1
  13. package/dist/es6/global.js +1 -1
  14. package/dist/js/core.d.ts +1 -1
  15. package/dist/js/core.js +6490 -7541
  16. package/dist/js/global.d.ts +1 -1
  17. package/dist/js/global.js +5654 -6478
  18. package/dist/scss/breakpoints.scss +11 -22
  19. package/dist/scss/core.scss +14 -14
  20. package/dist/scss/dark.scss +6 -6
  21. package/dist/scss/global.scss +6 -4
  22. package/dist/scss/index.scss +81 -85
  23. package/dist/scss/light.scss +1 -1
  24. package/dist/scss/mixins.scss +171 -226
  25. package/package.json +3 -3
package/dist/scss/breakpoints.scss CHANGED
@@ -1,37 +1,26 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 07 Dec 2023 19:17:49 GMT
3
+ * Generated on Sat, 09 Dec 2023 01:00:44 GMT
4
4
  */
5
5
 
6
- $calcite-container-size-width-xl-min: 1441px; // Projectors and televisions
7
- $calcite-container-size-width-lg-min: 1153px; // Large laptops and desktop computers
6
+ $calcite-container-size-width-xl-min: 1441px; // Projectors and televisions$calcite-container-size-width-lg-min: 1153px; // Large laptops and desktop computers
8
7
 
9
- $calcite-container-size-width-lg-max: 1440px; // Large laptops and desktop computers
10
- $calcite-container-size-width-md-min: 769px; // Small laptops
8
+ $calcite-container-size-width-lg-max: 1440px; // Large laptops and desktop computers$calcite-container-size-width-md-min: 769px; // Small laptops
11
9
 
12
- $calcite-container-size-width-md-max: 1152px; // Small laptops
13
- $calcite-container-size-width-sm-min: 477px; // Small tablets
10
+ $calcite-container-size-width-md-max: 1152px; // Small laptops$calcite-container-size-width-sm-min: 477px; // Small tablets
14
11
 
15
- $calcite-container-size-width-sm-max: 768px; // Small tablets
16
- $calcite-container-size-width-xs-min: 321px; // Handheld devices
12
+ $calcite-container-size-width-sm-max: 768px; // Small tablets$calcite-container-size-width-xs-min: 321px; // Handheld devices
17
13
 
18
- $calcite-container-size-width-xs-max: 476px; // Handheld devices
19
- $calcite-container-size-width-xxs-min: 0; // Small handheld devices and mini-windows
14
+ $calcite-container-size-width-xs-max: 476px; // Handheld devices$calcite-container-size-width-xxs-min: 0; // Small handheld devices and mini-windows
20
15
 
21
- $calcite-container-size-width-xxs-max: 320px; // Small handheld devices and mini-windows
22
- $calcite-container-size-height-xl-min: 855px; // Projectors and televisions
23
- $calcite-container-size-height-lg-min: 679px; // Large laptops and desktop computers
16
+ $calcite-container-size-width-xxs-max: 320px; // Small handheld devices and mini-windows$calcite-container-size-height-xl-min: 855px; // Projectors and televisions$calcite-container-size-height-lg-min: 679px; // Large laptops and desktop computers
24
17
 
25
- $calcite-container-size-height-lg-max: 854px; // Large laptops and desktop computers
26
- $calcite-container-size-height-md-min: 505px; // Small laptops
18
+ $calcite-container-size-height-lg-max: 854px; // Large laptops and desktop computers$calcite-container-size-height-md-min: 505px; // Small laptops
27
19
 
28
- $calcite-container-size-height-md-max: 678px; // Small laptops
29
- $calcite-container-size-height-sm-min: 329px; // Small tablets
20
+ $calcite-container-size-height-md-max: 678px; // Small laptops$calcite-container-size-height-sm-min: 329px; // Small tablets
30
21
 
31
- $calcite-container-size-height-sm-max: 504px; // Small tablets
32
- $calcite-container-size-height-xs-min: 155px; // Handheld devices
22
+ $calcite-container-size-height-sm-max: 504px; // Small tablets$calcite-container-size-height-xs-min: 155px; // Handheld devices
33
23
 
34
- $calcite-container-size-height-xs-max: 328px; // Handheld devices
35
- $calcite-container-size-height-xxs-min: 0; // Small handheld devices and mini-windows
24
+ $calcite-container-size-height-xs-max: 328px; // Handheld devices$calcite-container-size-height-xxs-min: 0; // Small handheld devices and mini-windows
36
25
 
37
26
  $calcite-container-size-height-xxs-max: 154px; // Small handheld devices and mini-windows
package/dist/scss/core.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 07 Dec 2023 19:17:48 GMT
3
+ * Generated on Sat, 09 Dec 2023 01:00:42 GMT
4
4
  */
5
5
 
6
6
  $calcite-z-index-9: 900;
@@ -99,18 +99,18 @@ $calcite-container-size-328: 328px;
99
99
  $calcite-container-size-320: 320px;
100
100
  $calcite-container-size-154: 154px;
101
101
  $calcite-container-size-0: 0;
102
- $calcite-color-dark-blue-d-bb-430: #0087D7;
103
- $calcite-color-dark-blue-d-bb-420: #00A0FF;
104
- $calcite-color-dark-blue-d-bb-410: #47BBFF;
105
- $calcite-color-dark-red-d-rr-430: #F3381B;
106
- $calcite-color-dark-red-d-rr-420: #FE583E;
107
- $calcite-color-dark-red-d-rr-410: #FF7465;
108
- $calcite-color-dark-yellow-d-yy-430: #F4B000;
109
- $calcite-color-dark-yellow-d-yy-420: #FFC900;
110
- $calcite-color-dark-yellow-d-yy-410: #FFE24D;
111
- $calcite-color-dark-green-d-gg-430: #36DA43;
112
- $calcite-color-dark-green-d-gg-420: #36DA43;
113
- $calcite-color-dark-green-d-gg-410: #44ED51;
102
+ $calcite-color-dark-blue-d-bb-430: #0087d7;
103
+ $calcite-color-dark-blue-d-bb-420: #00a0ff;
104
+ $calcite-color-dark-blue-d-bb-410: #47bbff;
105
+ $calcite-color-dark-red-d-rr-430: #f3381b;
106
+ $calcite-color-dark-red-d-rr-420: #fe583e;
107
+ $calcite-color-dark-red-d-rr-410: #ff7465;
108
+ $calcite-color-dark-yellow-d-yy-430: #f4b000;
109
+ $calcite-color-dark-yellow-d-yy-420: #ffc900;
110
+ $calcite-color-dark-yellow-d-yy-410: #ffe24d;
111
+ $calcite-color-dark-green-d-gg-430: #36da43;
112
+ $calcite-color-dark-green-d-gg-420: #36da43;
113
+ $calcite-color-dark-green-d-gg-410: #44ed51;
114
114
  $calcite-color-vibrant-violet-v-vv-180: #6a0be6;
115
115
  $calcite-color-vibrant-violet-v-vv-160: #8129ff;
116
116
  $calcite-color-vibrant-violet-v-vv-140: #974dff;
@@ -306,4 +306,4 @@ $calcite-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0
306
306
  $calcite-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
307
307
  $calcite-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
308
308
  $calcite-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
309
- $calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
309
+ $calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
package/dist/scss/dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 07 Dec 2023 19:17:49 GMT
3
+ * Generated on Sat, 09 Dec 2023 01:00:44 GMT
4
4
  */
5
5
 
6
6
  $calcite-color-border-white: #f8f8f8;
@@ -9,7 +9,7 @@ $calcite-color-border-input: #757575;
9
9
  $calcite-color-border-3: #404040;
10
10
  $calcite-color-border-2: #4a4a4a;
11
11
  $calcite-color-border-1: #555555;
12
- $calcite-color-text-link: #00A0FF;
12
+ $calcite-color-text-link: #00a0ff;
13
13
  $calcite-color-text-inverse: #151515;
14
14
  $calcite-color-text-3: #9f9f9f;
15
15
  $calcite-color-text-2: #bfbfbf;
@@ -19,16 +19,16 @@ $calcite-color-inverse-hover: #ffffff;
19
19
  $calcite-color-inverse: #f8f8f8;
20
20
  $calcite-color-status-danger-press: #d90012;
21
21
  $calcite-color-status-danger-hover: #ff0015;
22
- $calcite-color-status-danger: #FE583E;
22
+ $calcite-color-status-danger: #fe583e;
23
23
  $calcite-color-status-warning-press: #f5d000;
24
24
  $calcite-color-status-warning-hover: #ffee33;
25
- $calcite-color-status-warning: #FFC900;
25
+ $calcite-color-status-warning: #ffc900;
26
26
  $calcite-color-status-success-press: #00b81b;
27
27
  $calcite-color-status-success-hover: #3bed52;
28
- $calcite-color-status-success: #36DA43;
28
+ $calcite-color-status-success: #36da43;
29
29
  $calcite-color-status-info-press: #009af2;
30
30
  $calcite-color-status-info-hover: #3db8ff;
31
- $calcite-color-status-info: #00A0FF;
31
+ $calcite-color-status-info: #00a0ff;
32
32
  $calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
33
33
  $calcite-color-brand-press: #00619b;
34
34
  $calcite-color-brand-hover: #007ac2;
package/dist/scss/global.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 07 Dec 2023 19:17:49 GMT
3
+ * Generated on Sat, 09 Dec 2023 01:00:44 GMT
4
4
  */
5
5
 
6
6
  $calcite-z-index-tooltip: 901;
@@ -88,7 +88,9 @@ $calcite-border-width-lg: 4px;
88
88
  $calcite-border-width-md: 2px;
89
89
  $calcite-border-width-sm: 1px;
90
90
  $calcite-border-width-none: 0;
91
- $calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
92
- $calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
91
+ $calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08),
92
+ 0 12px 30px rgba(0, 0, 0, 0.1);
93
+ $calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04),
94
+ 0 4px 16px 0 rgba(0, 0, 0, 0.08);
93
95
  $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
94
- $calcite-corner-radius: var(--calcite-corner-radius-sharp);
96
+ $calcite-corner-radius: var(--calcite-corner-radius-sharp);
package/dist/scss/index.scss CHANGED
@@ -1,96 +1,92 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 07 Dec 2023 19:17:49 GMT
3
+ * Generated on Sat, 09 Dec 2023 01:00:44 GMT
4
4
  */
5
5
 
6
6
  @import "./global.scss";
7
-
8
7
  @import "./breakpoints.scss";
9
-
10
8
  @import "./mixins.scss";
11
-
12
9
  @mixin calcite-mode-light {
13
- --calcite-color-border-white: #ffffff;
14
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
15
- --calcite-color-border-input: #949494;
16
- --calcite-color-border-3: #dfdfdf;
17
- --calcite-color-border-2: #d4d4d4;
18
- --calcite-color-border-1: #cacaca;
19
- --calcite-color-text-link: #00619b;
20
- --calcite-color-text-inverse: #ffffff;
21
- --calcite-color-text-3: #6a6a6a;
22
- --calcite-color-text-2: #4a4a4a;
23
- --calcite-color-text-1: #151515;
24
- --calcite-color-inverse-press: #202020;
25
- --calcite-color-inverse-hover: #2b2b2b;
26
- --calcite-color-inverse: #353535;
27
- --calcite-color-status-danger-press: #7c1d13;
28
- --calcite-color-status-danger-hover: #a82b1e;
29
- --calcite-color-status-danger: #d83020;
30
- --calcite-color-status-warning-press: #bfa200;
31
- --calcite-color-status-warning-hover: #d9bc00;
32
- --calcite-color-status-warning: #edd317;
33
- --calcite-color-status-success-press: #1a6324;
34
- --calcite-color-status-success-hover: #288835;
35
- --calcite-color-status-success: #35ac46;
36
- --calcite-color-status-info-press: #00304d;
37
- --calcite-color-status-info-hover: #004874;
38
- --calcite-color-status-info: #00619b;
39
- --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
40
- --calcite-color-brand-press: #004874;
41
- --calcite-color-brand-hover: #00619b;
42
- --calcite-color-brand: #007ac2;
43
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
44
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
45
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
46
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
47
- --calcite-color-transparent: rgba(0, 0, 0, 0);
48
- --calcite-color-foreground-current: #c7eaff;
49
- --calcite-color-foreground-3: #eaeaea;
50
- --calcite-color-foreground-2: #f3f3f3;
51
- --calcite-color-foreground-1: #ffffff;
52
- --calcite-color-background: #f8f8f8;
10
+ --calcite-color-border-white: #ffffff;
11
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
12
+ --calcite-color-border-input: #949494;
13
+ --calcite-color-border-3: #dfdfdf;
14
+ --calcite-color-border-2: #d4d4d4;
15
+ --calcite-color-border-1: #cacaca;
16
+ --calcite-color-text-link: #00619b;
17
+ --calcite-color-text-inverse: #ffffff;
18
+ --calcite-color-text-3: #6a6a6a;
19
+ --calcite-color-text-2: #4a4a4a;
20
+ --calcite-color-text-1: #151515;
21
+ --calcite-color-inverse-press: #202020;
22
+ --calcite-color-inverse-hover: #2b2b2b;
23
+ --calcite-color-inverse: #353535;
24
+ --calcite-color-status-danger-press: #7c1d13;
25
+ --calcite-color-status-danger-hover: #a82b1e;
26
+ --calcite-color-status-danger: #d83020;
27
+ --calcite-color-status-warning-press: #bfa200;
28
+ --calcite-color-status-warning-hover: #d9bc00;
29
+ --calcite-color-status-warning: #edd317;
30
+ --calcite-color-status-success-press: #1a6324;
31
+ --calcite-color-status-success-hover: #288835;
32
+ --calcite-color-status-success: #35ac46;
33
+ --calcite-color-status-info-press: #00304d;
34
+ --calcite-color-status-info-hover: #004874;
35
+ --calcite-color-status-info: #00619b;
36
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
37
+ --calcite-color-brand-press: #004874;
38
+ --calcite-color-brand-hover: #00619b;
39
+ --calcite-color-brand: #007ac2;
40
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
41
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
42
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
43
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
44
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
45
+ --calcite-color-foreground-current: #c7eaff;
46
+ --calcite-color-foreground-3: #eaeaea;
47
+ --calcite-color-foreground-2: #f3f3f3;
48
+ --calcite-color-foreground-1: #ffffff;
49
+ --calcite-color-background: #f8f8f8;
53
50
  }
54
-
55
51
  @mixin calcite-mode-dark {
56
- --calcite-color-border-white: #f8f8f8;
57
- --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
58
- --calcite-color-border-input: #757575;
59
- --calcite-color-border-3: #404040;
60
- --calcite-color-border-2: #4a4a4a;
61
- --calcite-color-border-1: #555555;
62
- --calcite-color-text-link: #00A0FF;
63
- --calcite-color-text-inverse: #151515;
64
- --calcite-color-text-3: #9f9f9f;
65
- --calcite-color-text-2: #bfbfbf;
66
- --calcite-color-text-1: #ffffff;
67
- --calcite-color-inverse-press: #f3f3f3;
68
- --calcite-color-inverse-hover: #ffffff;
69
- --calcite-color-inverse: #f8f8f8;
70
- --calcite-color-status-danger-press: #d90012;
71
- --calcite-color-status-danger-hover: #ff0015;
72
- --calcite-color-status-danger: #FE583E;
73
- --calcite-color-status-warning-press: #f5d000;
74
- --calcite-color-status-warning-hover: #ffee33;
75
- --calcite-color-status-warning: #FFC900;
76
- --calcite-color-status-success-press: #00b81b;
77
- --calcite-color-status-success-hover: #3bed52;
78
- --calcite-color-status-success: #36DA43;
79
- --calcite-color-status-info-press: #009af2;
80
- --calcite-color-status-info-hover: #3db8ff;
81
- --calcite-color-status-info: #00A0FF;
82
- --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
83
- --calcite-color-brand-press: #00619b;
84
- --calcite-color-brand-hover: #007ac2;
85
- --calcite-color-brand: #009af2;
86
- --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
87
- --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
88
- --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
89
- --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
90
- --calcite-color-transparent: rgba(255, 255, 255, 0);
91
- --calcite-color-foreground-current: #214155;
92
- --calcite-color-foreground-3: #151515;
93
- --calcite-color-foreground-2: #202020;
94
- --calcite-color-foreground-1: #2b2b2b;
95
- --calcite-color-background: #353535;
52
+ --calcite-color-border-white: #f8f8f8;
53
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
54
+ --calcite-color-border-input: #757575;
55
+ --calcite-color-border-3: #404040;
56
+ --calcite-color-border-2: #4a4a4a;
57
+ --calcite-color-border-1: #555555;
58
+ --calcite-color-text-link: #00a0ff;
59
+ --calcite-color-text-inverse: #151515;
60
+ --calcite-color-text-3: #9f9f9f;
61
+ --calcite-color-text-2: #bfbfbf;
62
+ --calcite-color-text-1: #ffffff;
63
+ --calcite-color-inverse-press: #f3f3f3;
64
+ --calcite-color-inverse-hover: #ffffff;
65
+ --calcite-color-inverse: #f8f8f8;
66
+ --calcite-color-status-danger-press: #d90012;
67
+ --calcite-color-status-danger-hover: #ff0015;
68
+ --calcite-color-status-danger: #fe583e;
69
+ --calcite-color-status-warning-press: #f5d000;
70
+ --calcite-color-status-warning-hover: #ffee33;
71
+ --calcite-color-status-warning: #ffc900;
72
+ --calcite-color-status-success-press: #00b81b;
73
+ --calcite-color-status-success-hover: #3bed52;
74
+ --calcite-color-status-success: #36da43;
75
+ --calcite-color-status-info-press: #009af2;
76
+ --calcite-color-status-info-hover: #3db8ff;
77
+ --calcite-color-status-info: #00a0ff;
78
+ --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
79
+ --calcite-color-brand-press: #00619b;
80
+ --calcite-color-brand-hover: #007ac2;
81
+ --calcite-color-brand: #009af2;
82
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
83
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
84
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
85
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
86
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
87
+ --calcite-color-foreground-current: #214155;
88
+ --calcite-color-foreground-3: #151515;
89
+ --calcite-color-foreground-2: #202020;
90
+ --calcite-color-foreground-1: #2b2b2b;
91
+ --calcite-color-background: #353535;
96
92
  }
package/dist/scss/light.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 07 Dec 2023 19:17:49 GMT
3
+ * Generated on Sat, 09 Dec 2023 01:00:44 GMT
4
4
  */
5
5
 
6
6
  $calcite-color-border-white: #ffffff;