@esri/calcite-design-tokens 4.0.0-next.11 → 4.0.0-next.13

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.
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);
@@ -44,13 +44,18 @@
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;
58
+ --calcite-color-focus: var(--calcite-color-brand);
54
59
  }
55
60
  @media (prefers-color-scheme: light) {
56
61
  .calcite-mode-auto {
@@ -92,13 +97,18 @@
92
97
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
93
98
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
94
99
  --calcite-color-transparent: rgba(0, 0, 0, 0);
95
- --calcite-color-surface-highlight: #d6efff;
96
100
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
97
- --calcite-color-foreground-3: #ebebeb;
98
- --calcite-color-foreground-2: #f2f2f2;
99
- --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 */
100
104
  --calcite-color-background-none: rgba(255, 255, 255, 0);
101
- --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;
111
+ --calcite-color-focus: var(--calcite-color-brand);
102
112
  }
103
113
  }
104
114
  @media (prefers-color-scheme: dark) {
@@ -141,13 +151,18 @@
141
151
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
142
152
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
143
153
  --calcite-color-transparent: rgba(255, 255, 255, 0);
144
- --calcite-color-surface-highlight: #2b465f;
145
154
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
146
- --calcite-color-foreground-3: #404040;
147
- --calcite-color-foreground-2: #363636;
148
- --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 */
149
158
  --calcite-color-background-none: rgba(255, 255, 255, 0);
150
- --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;
165
+ --calcite-color-focus: var(--calcite-color-brand);
151
166
  }
152
167
  }
153
168
  .calcite-mode-light {
@@ -189,13 +204,18 @@
189
204
  --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
190
205
  --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
191
206
  --calcite-color-transparent: rgba(0, 0, 0, 0);
192
- --calcite-color-surface-highlight: #d6efff;
193
207
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
194
- --calcite-color-foreground-3: #ebebeb;
195
- --calcite-color-foreground-2: #f2f2f2;
196
- --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 */
197
211
  --calcite-color-background-none: rgba(255, 255, 255, 0);
198
- --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;
218
+ --calcite-color-focus: var(--calcite-color-brand);
199
219
  }
200
220
  .calcite-mode-dark {
201
221
  --calcite-color-border-white: #f7f7f7;
@@ -236,11 +256,16 @@
236
256
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
237
257
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
238
258
  --calcite-color-transparent: rgba(255, 255, 255, 0);
239
- --calcite-color-surface-highlight: #2b465f;
240
259
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
241
- --calcite-color-foreground-3: #404040;
242
- --calcite-color-foreground-2: #363636;
243
- --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 */
244
263
  --calcite-color-background-none: rgba(255, 255, 255, 0);
245
- --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;
270
+ --calcite-color-focus: var(--calcite-color-brand);
246
271
  }
@@ -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);
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": 1765260574391,
2
+ "timestamp": 1766025217182,
3
3
  "tokens": [
4
4
  {
5
5
  "key": "{core.color.neutral.blk-000}",
@@ -1,6 +1,141 @@
1
1
  {
2
- "timestamp": 1765260572885,
2
+ "timestamp": 1766025215879,
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)",
@@ -1267,7 +1415,6 @@
1267
1415
  "attributes": {
1268
1416
  "category": "color",
1269
1417
  "group": "focus",
1270
- "scope": "component",
1271
1418
  "type": "color",
1272
1419
  "item": "focus",
1273
1420
  "subitem": "default",