@esri/calcite-design-tokens 4.0.0-next.12 → 4.0.0-next.14

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 (18) hide show
  1. package/dist/css/dark.css +9 -5
  2. package/dist/css/index.css +45 -25
  3. package/dist/css/light.css +9 -5
  4. package/dist/docs/core.json +1 -1
  5. package/dist/docs/dark.json +180 -32
  6. package/dist/docs/global.json +180 -32
  7. package/dist/docs/light.json +180 -32
  8. package/dist/docs/semantic.json +1 -1
  9. package/dist/es6/dark.d.ts +9 -1
  10. package/dist/es6/dark.js +9 -5
  11. package/dist/es6/global.d.ts +9 -1
  12. package/dist/es6/global.js +12 -8
  13. package/dist/es6/light.d.ts +9 -1
  14. package/dist/es6/light.js +9 -5
  15. package/dist/scss/dark.scss +9 -5
  16. package/dist/scss/index.scss +18 -10
  17. package/dist/scss/light.scss +9 -5
  18. package/package.json +3 -2
package/dist/css/dark.css CHANGED
@@ -4,13 +4,17 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --calcite-color-background: #212121;
7
+ --calcite-color-surface-1: #212121;
8
+ --calcite-color-surface-2: #2b2b2b;
9
+ --calcite-color-surface-3: #363636;
10
+ --calcite-color-surface-4: #404040;
11
+ --calcite-color-surface-highlight: #2b465f;
12
+ --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
8
13
  --calcite-color-background-none: rgba(255, 255, 255, 0);
9
- --calcite-color-foreground-1: #2b2b2b;
10
- --calcite-color-foreground-2: #363636;
11
- --calcite-color-foreground-3: #404040;
14
+ --calcite-color-foreground-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
15
+ --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
16
+ --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
12
17
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
13
- --calcite-color-surface-highlight: #2b465f;
14
18
  --calcite-color-transparent: rgba(255, 255, 255, 0);
15
19
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
16
20
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
package/dist/css/index.css CHANGED
@@ -44,13 +44,17 @@
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-surface-highlight: #d6efff;
48
47
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
49
- --calcite-color-foreground-3: #ebebeb;
50
- --calcite-color-foreground-2: #f2f2f2;
51
- --calcite-color-foreground-1: #ffffff;
48
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
49
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
50
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
52
51
  --calcite-color-background-none: rgba(255, 255, 255, 0);
53
- --calcite-color-background: #f7f7f7;
52
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
53
+ --calcite-color-surface-highlight: #d6efff;
54
+ --calcite-color-surface-4: #ebebeb;
55
+ --calcite-color-surface-3: #f2f2f2;
56
+ --calcite-color-surface-2: #ffffff;
57
+ --calcite-color-surface-1: #f7f7f7;
54
58
  --calcite-color-focus: var(--calcite-color-brand);
55
59
  }
56
60
  @media (prefers-color-scheme: light) {
@@ -93,13 +97,17 @@
93
97
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
94
98
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
95
99
  --calcite-color-transparent: rgba(0, 0, 0, 0);
96
- --calcite-color-surface-highlight: #d6efff;
97
100
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
98
- --calcite-color-foreground-3: #ebebeb;
99
- --calcite-color-foreground-2: #f2f2f2;
100
- --calcite-color-foreground-1: #ffffff;
101
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
102
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
103
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
101
104
  --calcite-color-background-none: rgba(255, 255, 255, 0);
102
- --calcite-color-background: #f7f7f7;
105
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
106
+ --calcite-color-surface-highlight: #d6efff;
107
+ --calcite-color-surface-4: #ebebeb;
108
+ --calcite-color-surface-3: #f2f2f2;
109
+ --calcite-color-surface-2: #ffffff;
110
+ --calcite-color-surface-1: #f7f7f7;
103
111
  --calcite-color-focus: var(--calcite-color-brand);
104
112
  }
105
113
  }
@@ -143,13 +151,17 @@
143
151
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
144
152
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
145
153
  --calcite-color-transparent: rgba(255, 255, 255, 0);
146
- --calcite-color-surface-highlight: #2b465f;
147
154
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
148
- --calcite-color-foreground-3: #404040;
149
- --calcite-color-foreground-2: #363636;
150
- --calcite-color-foreground-1: #2b2b2b;
155
+ --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
156
+ --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
157
+ --calcite-color-foreground-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
151
158
  --calcite-color-background-none: rgba(255, 255, 255, 0);
152
- --calcite-color-background: #212121;
159
+ --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
160
+ --calcite-color-surface-highlight: #2b465f;
161
+ --calcite-color-surface-4: #404040;
162
+ --calcite-color-surface-3: #363636;
163
+ --calcite-color-surface-2: #2b2b2b;
164
+ --calcite-color-surface-1: #212121;
153
165
  --calcite-color-focus: var(--calcite-color-brand);
154
166
  }
155
167
  }
@@ -192,13 +204,17 @@
192
204
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
193
205
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
194
206
  --calcite-color-transparent: rgba(0, 0, 0, 0);
195
- --calcite-color-surface-highlight: #d6efff;
196
207
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
197
- --calcite-color-foreground-3: #ebebeb;
198
- --calcite-color-foreground-2: #f2f2f2;
199
- --calcite-color-foreground-1: #ffffff;
208
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
209
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
210
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
200
211
  --calcite-color-background-none: rgba(255, 255, 255, 0);
201
- --calcite-color-background: #f7f7f7;
212
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
213
+ --calcite-color-surface-highlight: #d6efff;
214
+ --calcite-color-surface-4: #ebebeb;
215
+ --calcite-color-surface-3: #f2f2f2;
216
+ --calcite-color-surface-2: #ffffff;
217
+ --calcite-color-surface-1: #f7f7f7;
202
218
  --calcite-color-focus: var(--calcite-color-brand);
203
219
  }
204
220
  .calcite-mode-dark {
@@ -240,12 +256,16 @@
240
256
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
241
257
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
242
258
  --calcite-color-transparent: rgba(255, 255, 255, 0);
243
- --calcite-color-surface-highlight: #2b465f;
244
259
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
245
- --calcite-color-foreground-3: #404040;
246
- --calcite-color-foreground-2: #363636;
247
- --calcite-color-foreground-1: #2b2b2b;
260
+ --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
261
+ --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
262
+ --calcite-color-foreground-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
248
263
  --calcite-color-background-none: rgba(255, 255, 255, 0);
249
- --calcite-color-background: #212121;
264
+ --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
265
+ --calcite-color-surface-highlight: #2b465f;
266
+ --calcite-color-surface-4: #404040;
267
+ --calcite-color-surface-3: #363636;
268
+ --calcite-color-surface-2: #2b2b2b;
269
+ --calcite-color-surface-1: #212121;
250
270
  --calcite-color-focus: var(--calcite-color-brand);
251
271
  }
package/dist/css/light.css CHANGED
@@ -4,13 +4,17 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --calcite-color-background: #f7f7f7;
7
+ --calcite-color-surface-1: #f7f7f7;
8
+ --calcite-color-surface-2: #ffffff;
9
+ --calcite-color-surface-3: #f2f2f2;
10
+ --calcite-color-surface-4: #ebebeb;
11
+ --calcite-color-surface-highlight: #d6efff;
12
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
8
13
  --calcite-color-background-none: rgba(255, 255, 255, 0);
9
- --calcite-color-foreground-1: #ffffff;
10
- --calcite-color-foreground-2: #f2f2f2;
11
- --calcite-color-foreground-3: #ebebeb;
14
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
15
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
16
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
12
17
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
13
- --calcite-color-surface-highlight: #d6efff;
14
18
  --calcite-color-transparent: rgba(0, 0, 0, 0);
15
19
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
16
20
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
package/dist/docs/core.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1765409950904,
2
+ "timestamp": 1766531905347,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{core.color.neutral.blk-000}",
package/dist/docs/dark.json CHANGED
@@ -1,6 +1,141 @@
1
1
  {
2
- "timestamp": 1765409949474,
2
+ "timestamp": 1766531903897,
3
3
  "tokens": [
4
+ {
5
+ "key": "{semantic.color.surface.1}",
6
+ "value": "#212121",
7
+ "type": "color",
8
+ "attributes": {
9
+ "category": "color",
10
+ "group": "surface",
11
+ "type": "color",
12
+ "item": "surface",
13
+ "subitem": "1",
14
+ "names": {
15
+ "scss": "$calcite-color-surface-1",
16
+ "css": "var(--calcite-color-surface-1)",
17
+ "docs": "semantic.color.surface.1",
18
+ "es6": "calciteColorSurface1"
19
+ },
20
+ "calcite-schema": {
21
+ "system": "calcite",
22
+ "tier": "color",
23
+ "type": "color"
24
+ }
25
+ },
26
+ "filePath": "src/tokens/semantic/color/dark.json",
27
+ "isSource": true,
28
+ "name": "Color Surface 1",
29
+ "path": ["semantic", "color", "surface", "1"]
30
+ },
31
+ {
32
+ "key": "{semantic.color.surface.2}",
33
+ "value": "#2b2b2b",
34
+ "type": "color",
35
+ "attributes": {
36
+ "category": "color",
37
+ "group": "surface",
38
+ "type": "color",
39
+ "item": "surface",
40
+ "subitem": "2",
41
+ "names": {
42
+ "scss": "$calcite-color-surface-2",
43
+ "css": "var(--calcite-color-surface-2)",
44
+ "docs": "semantic.color.surface.2",
45
+ "es6": "calciteColorSurface2"
46
+ },
47
+ "calcite-schema": {
48
+ "system": "calcite",
49
+ "tier": "color",
50
+ "type": "color"
51
+ }
52
+ },
53
+ "filePath": "src/tokens/semantic/color/dark.json",
54
+ "isSource": true,
55
+ "name": "Color Surface 2",
56
+ "path": ["semantic", "color", "surface", "2"]
57
+ },
58
+ {
59
+ "key": "{semantic.color.surface.3}",
60
+ "value": "#363636",
61
+ "type": "color",
62
+ "attributes": {
63
+ "category": "color",
64
+ "group": "surface",
65
+ "type": "color",
66
+ "item": "surface",
67
+ "subitem": "3",
68
+ "names": {
69
+ "scss": "$calcite-color-surface-3",
70
+ "css": "var(--calcite-color-surface-3)",
71
+ "docs": "semantic.color.surface.3",
72
+ "es6": "calciteColorSurface3"
73
+ },
74
+ "calcite-schema": {
75
+ "system": "calcite",
76
+ "tier": "color",
77
+ "type": "color"
78
+ }
79
+ },
80
+ "filePath": "src/tokens/semantic/color/dark.json",
81
+ "isSource": true,
82
+ "name": "Color Surface 3",
83
+ "path": ["semantic", "color", "surface", "3"]
84
+ },
85
+ {
86
+ "key": "{semantic.color.surface.4}",
87
+ "value": "#404040",
88
+ "type": "color",
89
+ "attributes": {
90
+ "category": "color",
91
+ "group": "surface",
92
+ "type": "color",
93
+ "item": "surface",
94
+ "subitem": "4",
95
+ "names": {
96
+ "scss": "$calcite-color-surface-4",
97
+ "css": "var(--calcite-color-surface-4)",
98
+ "docs": "semantic.color.surface.4",
99
+ "es6": "calciteColorSurface4"
100
+ },
101
+ "calcite-schema": {
102
+ "system": "calcite",
103
+ "tier": "color",
104
+ "type": "color"
105
+ }
106
+ },
107
+ "filePath": "src/tokens/semantic/color/dark.json",
108
+ "isSource": true,
109
+ "name": "Color Surface 4",
110
+ "path": ["semantic", "color", "surface", "4"]
111
+ },
112
+ {
113
+ "key": "{semantic.color.surface.highlight}",
114
+ "value": "#2b465f",
115
+ "type": "color",
116
+ "attributes": {
117
+ "category": "color",
118
+ "group": "surface",
119
+ "type": "color",
120
+ "item": "surface",
121
+ "subitem": "highlight",
122
+ "names": {
123
+ "scss": "$calcite-color-surface-highlight",
124
+ "css": "var(--calcite-color-surface-highlight)",
125
+ "docs": "semantic.color.surface.highlight",
126
+ "es6": "calciteColorSurfaceHighlight"
127
+ },
128
+ "calcite-schema": {
129
+ "system": "calcite",
130
+ "tier": "color",
131
+ "type": "color"
132
+ }
133
+ },
134
+ "filePath": "src/tokens/semantic/color/dark.json",
135
+ "isSource": true,
136
+ "name": "Color Surface Highlight",
137
+ "path": ["semantic", "color", "surface", "highlight"]
138
+ },
4
139
  {
5
140
  "key": "{semantic.color.background.default}",
6
141
  "value": "#212121",
@@ -11,6 +146,14 @@
11
146
  "type": "color",
12
147
  "item": "background",
13
148
  "subitem": "default",
149
+ "value": "#212121",
150
+ "description": "Deprecated, use `--calcite-color-surface-1` instead",
151
+ "filePath": "src/tokens/semantic/color/dark.json",
152
+ "isSource": true,
153
+ "key": "{semantic.color.background.default}",
154
+ "name": "calcite-semantic-color-background-default",
155
+ "path": ["semantic", "color", "background", "default"],
156
+ "comment": "Deprecated, use `--calcite-color-surface-1` instead",
14
157
  "names": {
15
158
  "scss": "$calcite-color-background",
16
159
  "css": "var(--calcite-color-background)",
@@ -23,10 +166,12 @@
23
166
  "type": "color"
24
167
  }
25
168
  },
169
+ "description": "Deprecated, use `--calcite-color-surface-1` instead",
26
170
  "filePath": "src/tokens/semantic/color/dark.json",
27
171
  "isSource": true,
28
172
  "name": "Color Background",
29
- "path": ["semantic", "color", "background", "default"]
173
+ "path": ["semantic", "color", "background", "default"],
174
+ "comment": "Deprecated, use `--calcite-color-surface-1` instead"
30
175
  },
31
176
  {
32
177
  "key": "{semantic.color.background.none}",
@@ -65,6 +210,14 @@
65
210
  "type": "color",
66
211
  "item": "foreground",
67
212
  "subitem": "1",
213
+ "value": "#2b2b2b",
214
+ "description": "Deprecated, use `--calcite-color-surface-2` instead",
215
+ "filePath": "src/tokens/semantic/color/dark.json",
216
+ "isSource": true,
217
+ "key": "{semantic.color.foreground.1}",
218
+ "name": "calcite-semantic-color-foreground-1",
219
+ "path": ["semantic", "color", "foreground", "1"],
220
+ "comment": "Deprecated, use `--calcite-color-surface-2` instead",
68
221
  "names": {
69
222
  "scss": "$calcite-color-foreground-1",
70
223
  "css": "var(--calcite-color-foreground-1)",
@@ -77,10 +230,12 @@
77
230
  "type": "color"
78
231
  }
79
232
  },
233
+ "description": "Deprecated, use `--calcite-color-surface-2` instead",
80
234
  "filePath": "src/tokens/semantic/color/dark.json",
81
235
  "isSource": true,
82
236
  "name": "Color Foreground 1",
83
- "path": ["semantic", "color", "foreground", "1"]
237
+ "path": ["semantic", "color", "foreground", "1"],
238
+ "comment": "Deprecated, use `--calcite-color-surface-2` instead"
84
239
  },
85
240
  {
86
241
  "key": "{semantic.color.foreground.2}",
@@ -92,6 +247,14 @@
92
247
  "type": "color",
93
248
  "item": "foreground",
94
249
  "subitem": "2",
250
+ "value": "#363636",
251
+ "description": "Deprecated, use `--calcite-color-surface-3` instead",
252
+ "filePath": "src/tokens/semantic/color/dark.json",
253
+ "isSource": true,
254
+ "key": "{semantic.color.foreground.2}",
255
+ "name": "calcite-semantic-color-foreground-2",
256
+ "path": ["semantic", "color", "foreground", "2"],
257
+ "comment": "Deprecated, use `--calcite-color-surface-3` instead",
95
258
  "names": {
96
259
  "scss": "$calcite-color-foreground-2",
97
260
  "css": "var(--calcite-color-foreground-2)",
@@ -104,10 +267,12 @@
104
267
  "type": "color"
105
268
  }
106
269
  },
270
+ "description": "Deprecated, use `--calcite-color-surface-3` instead",
107
271
  "filePath": "src/tokens/semantic/color/dark.json",
108
272
  "isSource": true,
109
273
  "name": "Color Foreground 2",
110
- "path": ["semantic", "color", "foreground", "2"]
274
+ "path": ["semantic", "color", "foreground", "2"],
275
+ "comment": "Deprecated, use `--calcite-color-surface-3` instead"
111
276
  },
112
277
  {
113
278
  "key": "{semantic.color.foreground.3}",
@@ -119,6 +284,14 @@
119
284
  "type": "color",
120
285
  "item": "foreground",
121
286
  "subitem": "3",
287
+ "value": "#404040",
288
+ "description": "Deprecated, use `--calcite-color-surface-4` instead",
289
+ "filePath": "src/tokens/semantic/color/dark.json",
290
+ "isSource": true,
291
+ "key": "{semantic.color.foreground.3}",
292
+ "name": "calcite-semantic-color-foreground-3",
293
+ "path": ["semantic", "color", "foreground", "3"],
294
+ "comment": "Deprecated, use `--calcite-color-surface-4` instead",
122
295
  "names": {
123
296
  "scss": "$calcite-color-foreground-3",
124
297
  "css": "var(--calcite-color-foreground-3)",
@@ -131,10 +304,12 @@
131
304
  "type": "color"
132
305
  }
133
306
  },
307
+ "description": "Deprecated, use `--calcite-color-surface-4` instead",
134
308
  "filePath": "src/tokens/semantic/color/dark.json",
135
309
  "isSource": true,
136
310
  "name": "Color Foreground 3",
137
- "path": ["semantic", "color", "foreground", "3"]
311
+ "path": ["semantic", "color", "foreground", "3"],
312
+ "comment": "Deprecated, use `--calcite-color-surface-4` instead"
138
313
  },
139
314
  {
140
315
  "key": "{semantic.color.foreground.current}",
@@ -173,33 +348,6 @@
173
348
  "path": ["semantic", "color", "foreground", "current"],
174
349
  "comment": "deprecated, use --calcite-color-surface-highlight instead"
175
350
  },
176
- {
177
- "key": "{semantic.color.surface.highlight}",
178
- "value": "#2b465f",
179
- "type": "color",
180
- "attributes": {
181
- "category": "color",
182
- "group": "foreground",
183
- "type": "color",
184
- "item": "surface",
185
- "subitem": "highlight",
186
- "names": {
187
- "scss": "$calcite-color-surface-highlight",
188
- "css": "var(--calcite-color-surface-highlight)",
189
- "docs": "semantic.color.surface.highlight",
190
- "es6": "calciteColorSurfaceHighlight"
191
- },
192
- "calcite-schema": {
193
- "system": "calcite",
194
- "tier": "color",
195
- "type": "color"
196
- }
197
- },
198
- "filePath": "src/tokens/semantic/color/dark.json",
199
- "isSource": true,
200
- "name": "Color Surface Highlight",
201
- "path": ["semantic", "color", "surface", "highlight"]
202
- },
203
351
  {
204
352
  "key": "{semantic.color.transparent.default.default}",
205
353
  "value": "rgba(255, 255, 255, 0)",