@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/scss/core.scss CHANGED
@@ -167,7 +167,7 @@ $calcite-color-medium-saturation-blue-m-bb-050: #84c1e8;
167
167
  $calcite-color-medium-saturation-blue-m-bb-060: #6db5e3;
168
168
  $calcite-color-medium-saturation-blue-m-bb-070: #548eb4;
169
169
  $calcite-color-medium-saturation-blue-m-bb-080: #3a6884;
170
- $calcite-color-medium-saturation-blue-m-bb-090: #214155;
170
+ $calcite-color-medium-saturation-blue-m-bb-090: #2b465f;
171
171
  $calcite-color-medium-saturation-blue-m-bb-100: #071a26;
172
172
  $calcite-color-medium-saturation-green-blue-m-gb-010: #dbf2f1;
173
173
  $calcite-color-medium-saturation-green-blue-m-gb-020: #beedec;
@@ -289,7 +289,7 @@ $calcite-color-medium-saturation-violet-m-vv-070: #796397;
289
289
  $calcite-color-medium-saturation-violet-m-vv-080: #584572;
290
290
  $calcite-color-medium-saturation-violet-m-vv-090: #36264c;
291
291
  $calcite-color-medium-saturation-violet-m-vv-100: #140726;
292
- $calcite-color-high-saturation-blue-h-bb-010: #c7eaff;
292
+ $calcite-color-high-saturation-blue-h-bb-010: #d6efff;
293
293
  $calcite-color-high-saturation-blue-h-bb-020: #9fd4f3;
294
294
  $calcite-color-high-saturation-blue-h-bb-030: #77bde7;
295
295
  $calcite-color-high-saturation-blue-h-bb-040: #50a7da;
package/dist/scss/dark.scss CHANGED
@@ -7,7 +7,8 @@ $calcite-color-background-none: rgba(255, 255, 255, 0);
7
7
  $calcite-color-foreground-1: #2b2b2b;
8
8
  $calcite-color-foreground-2: #212121;
9
9
  $calcite-color-foreground-3: #141414;
10
- $calcite-color-foreground-current: #214155;
10
+ $calcite-color-foreground-current: #2b465f; // deprecated, use --calcite-color-foreground-highlight instead
11
+ $calcite-color-foreground-highlight: #2b465f;
11
12
  $calcite-color-transparent: rgba(255, 255, 255, 0);
12
13
  $calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
13
14
  $calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
@@ -37,7 +38,7 @@ $calcite-color-inverse-press: #f2f2f2;
37
38
  $calcite-color-text-1: #ffffff;
38
39
  $calcite-color-text-2: #bfbfbf;
39
40
  $calcite-color-text-3: #9e9e9e;
40
- $calcite-color-text-highlight: #c7eaff;
41
+ $calcite-color-text-highlight: #d6efff;
41
42
  $calcite-color-text-inverse: #141414;
42
43
  $calcite-color-text-link: #00a0ff;
43
44
  $calcite-color-border-1: #545454;
package/dist/scss/global.scss CHANGED
@@ -12,7 +12,7 @@ $calcite-container-size-margin: 24px;
12
12
  $calcite-container-size-gutter: 16px;
13
13
  $calcite-container-size-content-fluid: 100%; // for fluid grid widths
14
14
  $calcite-container-size-content-fixed: 1440px; // only for lg breakpoint fixed grid width
15
- $calcite-corner-radius-sharp: 0; // deprecated, use --calcite-conder-radius-none instead
15
+ $calcite-corner-radius-sharp: 0; // deprecated, use --calcite-corner-radius-none instead
16
16
  $calcite-corner-radius-none: 0;
17
17
  $calcite-corner-radius-xs: 2px;
18
18
  $calcite-corner-radius-sm: 4px;
@@ -59,7 +59,6 @@ $calcite-opacity-half: 0.5;
59
59
  $calcite-opacity-dark: 0.85;
60
60
  $calcite-opacity-full: 1;
61
61
  $calcite-opacity-disabled: 0.5;
62
- $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
63
62
  $calcite-size-fixed-xxxs: 2px; // deprecated
64
63
  $calcite-size-fixed-xxs: 4px; // deprecated
65
64
  $calcite-size-fixed-xs: 6px; // deprecated
@@ -113,5 +112,6 @@ $calcite-z-index-modal: 800;
113
112
  $calcite-z-index-popup: 900;
114
113
  $calcite-z-index-tooltip: 901;
115
114
  $calcite-corner-radius: $calcite-corner-radius-none;
115
+ $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
116
116
  $calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
117
117
  $calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
package/dist/scss/index.scss CHANGED
@@ -45,7 +45,8 @@
45
45
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
46
46
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
47
47
  --calcite-color-transparent: rgba(0, 0, 0, 0);
48
- --calcite-color-foreground-current: #c7eaff;
48
+ --calcite-color-foreground-highlight: #d6efff;
49
+ --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-foreground-highlight instead */
49
50
  --calcite-color-foreground-3: #ebebeb;
50
51
  --calcite-color-foreground-2: #f2f2f2;
51
52
  --calcite-color-foreground-1: #ffffff;
@@ -61,7 +62,7 @@
61
62
  --calcite-color-border-1: #545454;
62
63
  --calcite-color-text-link: #00a0ff;
63
64
  --calcite-color-text-inverse: #141414;
64
- --calcite-color-text-highlight: #c7eaff;
65
+ --calcite-color-text-highlight: #d6efff;
65
66
  --calcite-color-text-3: #9e9e9e;
66
67
  --calcite-color-text-2: #bfbfbf;
67
68
  --calcite-color-text-1: #ffffff;
@@ -91,7 +92,8 @@
91
92
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
92
93
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
93
94
  --calcite-color-transparent: rgba(255, 255, 255, 0);
94
- --calcite-color-foreground-current: #214155;
95
+ --calcite-color-foreground-highlight: #2b465f;
96
+ --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-foreground-highlight instead */
95
97
  --calcite-color-foreground-3: #141414;
96
98
  --calcite-color-foreground-2: #212121;
97
99
  --calcite-color-foreground-1: #2b2b2b;
package/dist/scss/light.scss CHANGED
@@ -7,7 +7,8 @@ $calcite-color-background-none: rgba(255, 255, 255, 0);
7
7
  $calcite-color-foreground-1: #ffffff;
8
8
  $calcite-color-foreground-2: #f2f2f2;
9
9
  $calcite-color-foreground-3: #ebebeb;
10
- $calcite-color-foreground-current: #c7eaff;
10
+ $calcite-color-foreground-current: #d6efff; // deprecated, use --calcite-color-foreground-highlight instead
11
+ $calcite-color-foreground-highlight: #d6efff;
11
12
  $calcite-color-transparent: rgba(0, 0, 0, 0);
12
13
  $calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
13
14
  $calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
package/dist/scss/semantic.scss CHANGED
@@ -8,31 +8,11 @@ $calcite-border-width-none: 0;
8
8
  $calcite-border-width-sm: 1px;
9
9
  $calcite-border-width-md: 2px;
10
10
  $calcite-border-width-lg: 4px;
11
- $calcite-container-size-height-xxs-max: 154px; // Small handheld devices and mini-windows
12
- $calcite-container-size-height-xs-min: 155px; // Handheld devices
13
- $calcite-container-size-height-xs-max: 328px; // Handheld devices
14
- $calcite-container-size-height-sm-min: 329px; // Small tablets
15
- $calcite-container-size-height-sm-max: 504px; // Small tablets
16
- $calcite-container-size-height-md-min: 505px; // Small laptops
17
- $calcite-container-size-height-md-max: 678px; // Small laptops
18
- $calcite-container-size-height-lg-min: 679px; // Large laptops and desktop computers
19
- $calcite-container-size-height-lg-max: 854px; // Large laptops and desktop computers
20
- $calcite-container-size-height-xl-min: 855px; // Projectors and televisions
21
- $calcite-container-size-width-xxs-max: 320px; // Small handheld devices and mini-windows
22
- $calcite-container-size-width-xs-min: 321px; // Handheld devices
23
- $calcite-container-size-width-xs-max: 476px; // Handheld devices
24
- $calcite-container-size-width-sm-min: 477px; // Small tablets
25
- $calcite-container-size-width-sm-max: 768px; // Small tablets
26
- $calcite-container-size-width-md-min: 769px; // Small laptops
27
- $calcite-container-size-width-md-max: 1152px; // Small laptops
28
- $calcite-container-size-width-lg-min: 1153px; // Large laptops and desktop computers
29
- $calcite-container-size-width-lg-max: 1440px; // Large laptops and desktop computers
30
- $calcite-container-size-width-xl-min: 1441px; // Projectors and televisions
31
11
  $calcite-container-size-margin: 24px;
32
12
  $calcite-container-size-gutter: 16px;
33
13
  $calcite-container-size-content-fluid: 100%; // for fluid grid widths
34
14
  $calcite-container-size-content-fixed: 1440px; // only for lg breakpoint fixed grid width
35
- $calcite-corner-radius-sharp: 0; // deprecated, use --calcite-conder-radius-none instead
15
+ $calcite-corner-radius-sharp: 0; // deprecated, use --calcite-corner-radius-none instead
36
16
  $calcite-corner-radius-none: 0;
37
17
  $calcite-corner-radius-xs: 2px;
38
18
  $calcite-corner-radius-sm: 4px;
@@ -79,7 +59,6 @@ $calcite-opacity-half: 0.5;
79
59
  $calcite-opacity-dark: 0.85;
80
60
  $calcite-opacity-full: 1;
81
61
  $calcite-opacity-disabled: 0.5;
82
- $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
83
62
  $calcite-size-fixed-xxxs: 2px; // deprecated
84
63
  $calcite-size-fixed-xxs: 4px; // deprecated
85
64
  $calcite-size-fixed-xs: 6px; // deprecated
@@ -132,6 +111,27 @@ $calcite-z-index-overlay: 700;
132
111
  $calcite-z-index-modal: 800;
133
112
  $calcite-z-index-popup: 900;
134
113
  $calcite-z-index-tooltip: 901;
114
+ $calcite-container-size-height-xxs-max: 154px; // Small handheld devices and mini-windows
115
+ $calcite-container-size-height-xs-min: 155px; // Handheld devices
116
+ $calcite-container-size-height-xs-max: 328px; // Handheld devices
117
+ $calcite-container-size-height-sm-min: 329px; // Small tablets
118
+ $calcite-container-size-height-sm-max: 504px; // Small tablets
119
+ $calcite-container-size-height-md-min: 505px; // Small laptops
120
+ $calcite-container-size-height-md-max: 678px; // Small laptops
121
+ $calcite-container-size-height-lg-min: 679px; // Large laptops and desktop computers
122
+ $calcite-container-size-height-lg-max: 854px; // Large laptops and desktop computers
123
+ $calcite-container-size-height-xl-min: 855px; // Projectors and televisions
124
+ $calcite-container-size-width-xxs-max: 320px; // Small handheld devices and mini-windows
125
+ $calcite-container-size-width-xs-min: 321px; // Handheld devices
126
+ $calcite-container-size-width-xs-max: 476px; // Handheld devices
127
+ $calcite-container-size-width-sm-min: 477px; // Small tablets
128
+ $calcite-container-size-width-sm-max: 768px; // Small tablets
129
+ $calcite-container-size-width-md-min: 769px; // Small laptops
130
+ $calcite-container-size-width-md-max: 1152px; // Small laptops
131
+ $calcite-container-size-width-lg-min: 1153px; // Large laptops and desktop computers
132
+ $calcite-container-size-width-lg-max: 1440px; // Large laptops and desktop computers
133
+ $calcite-container-size-width-xl-min: 1441px; // Projectors and televisions
135
134
  $calcite-corner-radius: $calcite-corner-radius-none;
135
+ $calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
136
136
  $calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
137
137
  $calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@esri/calcite-design-tokens",
3
- "version": "3.1.1-next.0",
3
+ "version": "3.2.0-next.0",
4
4
  "description": "Esri's Calcite Design System Tokens",
5
5
  "keywords": [
6
6
  "Calcite",
@@ -44,7 +44,7 @@
44
44
  "extends": "../../package.json"
45
45
  },
46
46
  "devDependencies": {
47
- "vitest": "3.1.3"
47
+ "vitest": "3.1.4"
48
48
  },
49
- "gitHead": "3ca2b47990cfc1a1badd98b2c1cee58cf3f4d2d9"
49
+ "gitHead": "286845f59ea34438157a1ece5070a4e9ced18c9f"
50
50
  }