@esri/calcite-design-tokens 3.0.2-next.8 → 3.1.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.
- package/dist/css/core.css +2 -0
- package/dist/css/dark.css +4 -2
- package/dist/css/index.css +14 -4
- package/dist/css/light.css +2 -0
- package/dist/docs/core.json +53 -1
- package/dist/docs/dark.json +59 -3
- package/dist/docs/global.json +59 -3
- package/dist/docs/light.json +57 -1
- package/dist/docs/semantic.json +1 -1
- package/dist/es6/core.d.ts +2 -0
- package/dist/es6/core.js +2 -0
- package/dist/es6/dark.d.ts +2 -0
- package/dist/es6/dark.js +4 -2
- package/dist/es6/global.d.ts +8 -0
- package/dist/es6/global.js +10 -2
- package/dist/es6/light.d.ts +2 -0
- package/dist/es6/light.js +2 -0
- package/dist/js/core.d.ts +2 -0
- package/dist/js/core.js +66 -0
- package/dist/js/dark.d.ts +2 -0
- package/dist/js/dark.js +76 -4
- package/dist/js/global.d.ts +4 -0
- package/dist/js/global.js +80 -2
- package/dist/js/light.d.ts +2 -0
- package/dist/js/light.js +72 -0
- package/dist/scss/core.scss +2 -0
- package/dist/scss/dark.scss +4 -2
- package/dist/scss/index.scss +6 -2
- package/dist/scss/light.scss +2 -0
- package/package.json +2 -2
package/dist/css/core.css
CHANGED
package/dist/css/dark.css
CHANGED
|
@@ -11,8 +11,10 @@
|
|
|
11
11
|
--calcite-color-foreground-3: #151515;
|
|
12
12
|
--calcite-color-foreground-current: #214155;
|
|
13
13
|
--calcite-color-transparent: rgba(255, 255, 255, 0);
|
|
14
|
-
--calcite-color-transparent-hover: rgba(255, 255, 255, 0.
|
|
15
|
-
--calcite-color-transparent-press: rgba(255, 255, 255, 0.
|
|
14
|
+
--calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
|
|
15
|
+
--calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
|
|
16
|
+
--calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
|
|
17
|
+
--calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
|
|
16
18
|
--calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
17
19
|
--calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
|
|
18
20
|
--calcite-color-brand: #009af2;
|
package/dist/css/index.css
CHANGED
|
@@ -38,6 +38,8 @@
|
|
|
38
38
|
--calcite-color-brand: #007ac2;
|
|
39
39
|
--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
40
40
|
--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
41
|
+
--calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
|
|
42
|
+
--calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
|
|
41
43
|
--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
42
44
|
--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
43
45
|
--calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
@@ -82,6 +84,8 @@
|
|
|
82
84
|
--calcite-color-brand: #007ac2;
|
|
83
85
|
--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
84
86
|
--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
87
|
+
--calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
|
|
88
|
+
--calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
|
|
85
89
|
--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
86
90
|
--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
87
91
|
--calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
@@ -128,8 +132,10 @@
|
|
|
128
132
|
--calcite-color-brand: #009af2;
|
|
129
133
|
--calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
|
|
130
134
|
--calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
131
|
-
--calcite-color-transparent-press: rgba(
|
|
132
|
-
--calcite-color-transparent-hover: rgba(
|
|
135
|
+
--calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
|
|
136
|
+
--calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
|
|
137
|
+
--calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
|
|
138
|
+
--calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
|
|
133
139
|
--calcite-color-transparent: rgba(255, 255, 255, 0);
|
|
134
140
|
--calcite-color-foreground-3: #151515;
|
|
135
141
|
--calcite-color-foreground-2: #202020;
|
|
@@ -171,6 +177,8 @@
|
|
|
171
177
|
--calcite-color-brand: #007ac2;
|
|
172
178
|
--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
173
179
|
--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
180
|
+
--calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
|
|
181
|
+
--calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
|
|
174
182
|
--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
175
183
|
--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
176
184
|
--calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
@@ -215,8 +223,10 @@
|
|
|
215
223
|
--calcite-color-brand: #009af2;
|
|
216
224
|
--calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
|
|
217
225
|
--calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
218
|
-
--calcite-color-transparent-press: rgba(
|
|
219
|
-
--calcite-color-transparent-hover: rgba(
|
|
226
|
+
--calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
|
|
227
|
+
--calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
|
|
228
|
+
--calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
|
|
229
|
+
--calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
|
|
220
230
|
--calcite-color-transparent: rgba(255, 255, 255, 0);
|
|
221
231
|
--calcite-color-foreground-3: #151515;
|
|
222
232
|
--calcite-color-foreground-2: #202020;
|
package/dist/css/light.css
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
--calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
14
14
|
--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
15
15
|
--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
16
|
+
--calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
|
|
17
|
+
--calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
|
|
16
18
|
--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
17
19
|
--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
18
20
|
--calcite-color-brand: #007ac2;
|
package/dist/docs/core.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp":
|
|
2
|
+
"timestamp": 1744998318002,
|
|
3
3
|
"tokens": [
|
|
4
4
|
{
|
|
5
5
|
"value": "#ffffff",
|
|
@@ -14402,6 +14402,58 @@
|
|
|
14402
14402
|
"path": ["core", "opacity", "10"],
|
|
14403
14403
|
"key": "{core.opacity.10}"
|
|
14404
14404
|
},
|
|
14405
|
+
{
|
|
14406
|
+
"value": "0.12",
|
|
14407
|
+
"type": "opacity",
|
|
14408
|
+
"attributes": {
|
|
14409
|
+
"category": "opacity",
|
|
14410
|
+
"type": "opacity",
|
|
14411
|
+
"item": "12",
|
|
14412
|
+
"names": {
|
|
14413
|
+
"scss": "$calcite-opacity-12",
|
|
14414
|
+
"css": "var(--calcite-opacity-12)",
|
|
14415
|
+
"js": "core.opacity.12",
|
|
14416
|
+
"docs": "core.opacity.12",
|
|
14417
|
+
"es6": "calciteOpacity12"
|
|
14418
|
+
},
|
|
14419
|
+
"calcite-schema": {
|
|
14420
|
+
"system": "calcite",
|
|
14421
|
+
"tier": "core",
|
|
14422
|
+
"type": "opacity"
|
|
14423
|
+
}
|
|
14424
|
+
},
|
|
14425
|
+
"filePath": "src/tokens/core/opacity.json",
|
|
14426
|
+
"isSource": false,
|
|
14427
|
+
"name": "Opacity 12",
|
|
14428
|
+
"path": ["core", "opacity", "12"],
|
|
14429
|
+
"key": "{core.opacity.12}"
|
|
14430
|
+
},
|
|
14431
|
+
{
|
|
14432
|
+
"value": "0.16",
|
|
14433
|
+
"type": "opacity",
|
|
14434
|
+
"attributes": {
|
|
14435
|
+
"category": "opacity",
|
|
14436
|
+
"type": "opacity",
|
|
14437
|
+
"item": "16",
|
|
14438
|
+
"names": {
|
|
14439
|
+
"scss": "$calcite-opacity-16",
|
|
14440
|
+
"css": "var(--calcite-opacity-16)",
|
|
14441
|
+
"js": "core.opacity.16",
|
|
14442
|
+
"docs": "core.opacity.16",
|
|
14443
|
+
"es6": "calciteOpacity16"
|
|
14444
|
+
},
|
|
14445
|
+
"calcite-schema": {
|
|
14446
|
+
"system": "calcite",
|
|
14447
|
+
"tier": "core",
|
|
14448
|
+
"type": "opacity"
|
|
14449
|
+
}
|
|
14450
|
+
},
|
|
14451
|
+
"filePath": "src/tokens/core/opacity.json",
|
|
14452
|
+
"isSource": false,
|
|
14453
|
+
"name": "Opacity 16",
|
|
14454
|
+
"path": ["core", "opacity", "16"],
|
|
14455
|
+
"key": "{core.opacity.16}"
|
|
14456
|
+
},
|
|
14405
14457
|
{
|
|
14406
14458
|
"value": "0.2",
|
|
14407
14459
|
"type": "opacity",
|
package/dist/docs/dark.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp":
|
|
2
|
+
"timestamp": 1744998314511,
|
|
3
3
|
"tokens": [
|
|
4
4
|
{
|
|
5
5
|
"value": "#353535",
|
|
@@ -192,7 +192,7 @@
|
|
|
192
192
|
"key": "{semantic.color.transparent.default.default}"
|
|
193
193
|
},
|
|
194
194
|
{
|
|
195
|
-
"value": "rgba(255, 255, 255, 0.
|
|
195
|
+
"value": "rgba(255, 255, 255, 0.12)",
|
|
196
196
|
"type": "color",
|
|
197
197
|
"attributes": {
|
|
198
198
|
"category": "color",
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
"key": "{semantic.color.transparent.default.hover}"
|
|
221
221
|
},
|
|
222
222
|
{
|
|
223
|
-
"value": "rgba(255, 255, 255, 0.
|
|
223
|
+
"value": "rgba(255, 255, 255, 0.16)",
|
|
224
224
|
"type": "color",
|
|
225
225
|
"attributes": {
|
|
226
226
|
"category": "color",
|
|
@@ -247,6 +247,62 @@
|
|
|
247
247
|
"path": ["semantic", "color", "transparent", "default", "press"],
|
|
248
248
|
"key": "{semantic.color.transparent.default.press}"
|
|
249
249
|
},
|
|
250
|
+
{
|
|
251
|
+
"value": "rgba(0, 0, 0, 0.04)",
|
|
252
|
+
"type": "color",
|
|
253
|
+
"attributes": {
|
|
254
|
+
"category": "color",
|
|
255
|
+
"type": "color",
|
|
256
|
+
"item": "transparent",
|
|
257
|
+
"subitem": "inverse",
|
|
258
|
+
"state": "hover",
|
|
259
|
+
"names": {
|
|
260
|
+
"scss": "$calcite-color-transparent-inverse-hover",
|
|
261
|
+
"css": "var(--calcite-color-transparent-inverse-hover)",
|
|
262
|
+
"js": "semantic.color.transparent.inverse.hover",
|
|
263
|
+
"docs": "semantic.color.transparent.inverse.hover",
|
|
264
|
+
"es6": "calciteColorTransparentInverseHover"
|
|
265
|
+
},
|
|
266
|
+
"calcite-schema": {
|
|
267
|
+
"system": "calcite",
|
|
268
|
+
"tier": "color",
|
|
269
|
+
"type": "color"
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
"filePath": "src/tokens/semantic/color/dark.json",
|
|
273
|
+
"isSource": true,
|
|
274
|
+
"name": "Color Transparent Inverse Hover",
|
|
275
|
+
"path": ["semantic", "color", "transparent", "inverse", "hover"],
|
|
276
|
+
"key": "{semantic.color.transparent.inverse.hover}"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"value": "rgba(0, 0, 0, 0.08)",
|
|
280
|
+
"type": "color",
|
|
281
|
+
"attributes": {
|
|
282
|
+
"category": "color",
|
|
283
|
+
"type": "color",
|
|
284
|
+
"item": "transparent",
|
|
285
|
+
"subitem": "inverse",
|
|
286
|
+
"state": "press",
|
|
287
|
+
"names": {
|
|
288
|
+
"scss": "$calcite-color-transparent-inverse-press",
|
|
289
|
+
"css": "var(--calcite-color-transparent-inverse-press)",
|
|
290
|
+
"js": "semantic.color.transparent.inverse.press",
|
|
291
|
+
"docs": "semantic.color.transparent.inverse.press",
|
|
292
|
+
"es6": "calciteColorTransparentInversePress"
|
|
293
|
+
},
|
|
294
|
+
"calcite-schema": {
|
|
295
|
+
"system": "calcite",
|
|
296
|
+
"tier": "color",
|
|
297
|
+
"type": "color"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
"filePath": "src/tokens/semantic/color/dark.json",
|
|
301
|
+
"isSource": true,
|
|
302
|
+
"name": "Color Transparent Inverse Press",
|
|
303
|
+
"path": ["semantic", "color", "transparent", "inverse", "press"],
|
|
304
|
+
"key": "{semantic.color.transparent.inverse.press}"
|
|
305
|
+
},
|
|
250
306
|
{
|
|
251
307
|
"value": "rgba(0, 0, 0, 0.85)",
|
|
252
308
|
"type": "color",
|
package/dist/docs/global.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp":
|
|
2
|
+
"timestamp": 1744998317514,
|
|
3
3
|
"tokens": [
|
|
4
4
|
{
|
|
5
5
|
"value": "{\"light\":\"#f8f8f8\",\"dark\":\"#353535\"}",
|
|
@@ -192,7 +192,7 @@
|
|
|
192
192
|
"key": "{semantic.color.transparent.default.default}"
|
|
193
193
|
},
|
|
194
194
|
{
|
|
195
|
-
"value": "{\"light\":\"rgba(0, 0, 0, 0.04)\",\"dark\":\"rgba(255, 255, 255, 0.
|
|
195
|
+
"value": "{\"light\":\"rgba(0, 0, 0, 0.04)\",\"dark\":\"rgba(255, 255, 255, 0.12)\"}",
|
|
196
196
|
"type": "color",
|
|
197
197
|
"attributes": {
|
|
198
198
|
"category": "color",
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
"key": "{semantic.color.transparent.default.hover}"
|
|
221
221
|
},
|
|
222
222
|
{
|
|
223
|
-
"value": "{\"light\":\"rgba(0, 0, 0, 0.08)\",\"dark\":\"rgba(255, 255, 255, 0.
|
|
223
|
+
"value": "{\"light\":\"rgba(0, 0, 0, 0.08)\",\"dark\":\"rgba(255, 255, 255, 0.16)\"}",
|
|
224
224
|
"type": "color",
|
|
225
225
|
"attributes": {
|
|
226
226
|
"category": "color",
|
|
@@ -247,6 +247,62 @@
|
|
|
247
247
|
"path": ["semantic", "color", "transparent", "default", "press"],
|
|
248
248
|
"key": "{semantic.color.transparent.default.press}"
|
|
249
249
|
},
|
|
250
|
+
{
|
|
251
|
+
"value": "{\"light\":\"rgba(255, 255, 255, 0.12)\",\"dark\":\"rgba(0, 0, 0, 0.04)\"}",
|
|
252
|
+
"type": "color",
|
|
253
|
+
"attributes": {
|
|
254
|
+
"category": "color",
|
|
255
|
+
"type": "color",
|
|
256
|
+
"item": "transparent",
|
|
257
|
+
"subitem": "inverse",
|
|
258
|
+
"state": "hover",
|
|
259
|
+
"names": {
|
|
260
|
+
"scss": "$calcite-color-transparent-inverse-hover",
|
|
261
|
+
"css": "var(--calcite-color-transparent-inverse-hover)",
|
|
262
|
+
"js": "semantic.color.transparent.inverse.hover",
|
|
263
|
+
"docs": "semantic.color.transparent.inverse.hover",
|
|
264
|
+
"es6": "calciteColorTransparentInverseHover"
|
|
265
|
+
},
|
|
266
|
+
"calcite-schema": {
|
|
267
|
+
"system": "calcite",
|
|
268
|
+
"tier": "color",
|
|
269
|
+
"type": "color"
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
"filePath": "src/tokens/semantic/color/light.json",
|
|
273
|
+
"isSource": false,
|
|
274
|
+
"name": "Color Transparent Inverse Hover",
|
|
275
|
+
"path": ["semantic", "color", "transparent", "inverse", "hover"],
|
|
276
|
+
"key": "{semantic.color.transparent.inverse.hover}"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"value": "{\"light\":\"rgba(255, 255, 255, 0.16)\",\"dark\":\"rgba(0, 0, 0, 0.08)\"}",
|
|
280
|
+
"type": "color",
|
|
281
|
+
"attributes": {
|
|
282
|
+
"category": "color",
|
|
283
|
+
"type": "color",
|
|
284
|
+
"item": "transparent",
|
|
285
|
+
"subitem": "inverse",
|
|
286
|
+
"state": "press",
|
|
287
|
+
"names": {
|
|
288
|
+
"scss": "$calcite-color-transparent-inverse-press",
|
|
289
|
+
"css": "var(--calcite-color-transparent-inverse-press)",
|
|
290
|
+
"js": "semantic.color.transparent.inverse.press",
|
|
291
|
+
"docs": "semantic.color.transparent.inverse.press",
|
|
292
|
+
"es6": "calciteColorTransparentInversePress"
|
|
293
|
+
},
|
|
294
|
+
"calcite-schema": {
|
|
295
|
+
"system": "calcite",
|
|
296
|
+
"tier": "color",
|
|
297
|
+
"type": "color"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
"filePath": "src/tokens/semantic/color/light.json",
|
|
301
|
+
"isSource": false,
|
|
302
|
+
"name": "Color Transparent Inverse Press",
|
|
303
|
+
"path": ["semantic", "color", "transparent", "inverse", "press"],
|
|
304
|
+
"key": "{semantic.color.transparent.inverse.press}"
|
|
305
|
+
},
|
|
250
306
|
{
|
|
251
307
|
"value": "{\"light\":\"rgba(255, 255, 255, 0.85)\",\"dark\":\"rgba(0, 0, 0, 0.85)\"}",
|
|
252
308
|
"type": "color",
|
package/dist/docs/light.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp":
|
|
2
|
+
"timestamp": 1744998315667,
|
|
3
3
|
"tokens": [
|
|
4
4
|
{
|
|
5
5
|
"value": "#f8f8f8",
|
|
@@ -247,6 +247,62 @@
|
|
|
247
247
|
"path": ["semantic", "color", "transparent", "default", "press"],
|
|
248
248
|
"key": "{semantic.color.transparent.default.press}"
|
|
249
249
|
},
|
|
250
|
+
{
|
|
251
|
+
"value": "rgba(255, 255, 255, 0.12)",
|
|
252
|
+
"type": "color",
|
|
253
|
+
"attributes": {
|
|
254
|
+
"category": "color",
|
|
255
|
+
"type": "color",
|
|
256
|
+
"item": "transparent",
|
|
257
|
+
"subitem": "inverse",
|
|
258
|
+
"state": "hover",
|
|
259
|
+
"names": {
|
|
260
|
+
"scss": "$calcite-color-transparent-inverse-hover",
|
|
261
|
+
"css": "var(--calcite-color-transparent-inverse-hover)",
|
|
262
|
+
"js": "semantic.color.transparent.inverse.hover",
|
|
263
|
+
"docs": "semantic.color.transparent.inverse.hover",
|
|
264
|
+
"es6": "calciteColorTransparentInverseHover"
|
|
265
|
+
},
|
|
266
|
+
"calcite-schema": {
|
|
267
|
+
"system": "calcite",
|
|
268
|
+
"tier": "color",
|
|
269
|
+
"type": "color"
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
"filePath": "src/tokens/semantic/color/light.json",
|
|
273
|
+
"isSource": true,
|
|
274
|
+
"name": "Color Transparent Inverse Hover",
|
|
275
|
+
"path": ["semantic", "color", "transparent", "inverse", "hover"],
|
|
276
|
+
"key": "{semantic.color.transparent.inverse.hover}"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"value": "rgba(255, 255, 255, 0.16)",
|
|
280
|
+
"type": "color",
|
|
281
|
+
"attributes": {
|
|
282
|
+
"category": "color",
|
|
283
|
+
"type": "color",
|
|
284
|
+
"item": "transparent",
|
|
285
|
+
"subitem": "inverse",
|
|
286
|
+
"state": "press",
|
|
287
|
+
"names": {
|
|
288
|
+
"scss": "$calcite-color-transparent-inverse-press",
|
|
289
|
+
"css": "var(--calcite-color-transparent-inverse-press)",
|
|
290
|
+
"js": "semantic.color.transparent.inverse.press",
|
|
291
|
+
"docs": "semantic.color.transparent.inverse.press",
|
|
292
|
+
"es6": "calciteColorTransparentInversePress"
|
|
293
|
+
},
|
|
294
|
+
"calcite-schema": {
|
|
295
|
+
"system": "calcite",
|
|
296
|
+
"tier": "color",
|
|
297
|
+
"type": "color"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
"filePath": "src/tokens/semantic/color/light.json",
|
|
301
|
+
"isSource": true,
|
|
302
|
+
"name": "Color Transparent Inverse Press",
|
|
303
|
+
"path": ["semantic", "color", "transparent", "inverse", "press"],
|
|
304
|
+
"key": "{semantic.color.transparent.inverse.press}"
|
|
305
|
+
},
|
|
250
306
|
{
|
|
251
307
|
"value": "rgba(255, 255, 255, 0.85)",
|
|
252
308
|
"type": "color",
|
package/dist/docs/semantic.json
CHANGED
package/dist/es6/core.d.ts
CHANGED
|
@@ -510,6 +510,8 @@ export const calciteOpacity0: string;
|
|
|
510
510
|
export const calciteOpacity4: string;
|
|
511
511
|
export const calciteOpacity8: string;
|
|
512
512
|
export const calciteOpacity10: string;
|
|
513
|
+
export const calciteOpacity12: string;
|
|
514
|
+
export const calciteOpacity16: string;
|
|
513
515
|
export const calciteOpacity20: string;
|
|
514
516
|
export const calciteOpacity30: string;
|
|
515
517
|
export const calciteOpacity40: string;
|
package/dist/es6/core.js
CHANGED
|
@@ -510,6 +510,8 @@ export const calciteOpacity0 = "0";
|
|
|
510
510
|
export const calciteOpacity4 = "0.04";
|
|
511
511
|
export const calciteOpacity8 = "0.08";
|
|
512
512
|
export const calciteOpacity10 = "0.1";
|
|
513
|
+
export const calciteOpacity12 = "0.12";
|
|
514
|
+
export const calciteOpacity16 = "0.16";
|
|
513
515
|
export const calciteOpacity20 = "0.2";
|
|
514
516
|
export const calciteOpacity30 = "0.3";
|
|
515
517
|
export const calciteOpacity40 = "0.4";
|
package/dist/es6/dark.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ export const calciteColorForegroundCurrent: string;
|
|
|
12
12
|
export const calciteColorTransparent: string;
|
|
13
13
|
export const calciteColorTransparentHover: string;
|
|
14
14
|
export const calciteColorTransparentPress: string;
|
|
15
|
+
export const calciteColorTransparentInverseHover: string;
|
|
16
|
+
export const calciteColorTransparentInversePress: string;
|
|
15
17
|
export const calciteColorTransparentScrim: string;
|
|
16
18
|
export const calciteColorTransparentTint: string;
|
|
17
19
|
export const calciteColorBrand: string;
|
package/dist/es6/dark.js
CHANGED
|
@@ -10,8 +10,10 @@ export const calciteColorForeground2 = "#202020";
|
|
|
10
10
|
export const calciteColorForeground3 = "#151515";
|
|
11
11
|
export const calciteColorForegroundCurrent = "#214155";
|
|
12
12
|
export const calciteColorTransparent = "rgba(255, 255, 255, 0)";
|
|
13
|
-
export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.
|
|
14
|
-
export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.
|
|
13
|
+
export const calciteColorTransparentHover = "rgba(255, 255, 255, 0.12)";
|
|
14
|
+
export const calciteColorTransparentPress = "rgba(255, 255, 255, 0.16)";
|
|
15
|
+
export const calciteColorTransparentInverseHover = "rgba(0, 0, 0, 0.04)";
|
|
16
|
+
export const calciteColorTransparentInversePress = "rgba(0, 0, 0, 0.08)";
|
|
15
17
|
export const calciteColorTransparentScrim = "rgba(0, 0, 0, 0.85)";
|
|
16
18
|
export const calciteColorTransparentTint = "rgba(43, 43, 43, 0.8)";
|
|
17
19
|
export const calciteColorBrand = "#009af2";
|
package/dist/es6/global.d.ts
CHANGED
|
@@ -13,6 +13,14 @@ export const calciteColorForegroundCurrent: { light: string; dark: string };
|
|
|
13
13
|
export const calciteColorTransparent: { light: string; dark: string };
|
|
14
14
|
export const calciteColorTransparentHover: { light: string; dark: string };
|
|
15
15
|
export const calciteColorTransparentPress: { light: string; dark: string };
|
|
16
|
+
export const calciteColorTransparentInverseHover: {
|
|
17
|
+
light: string;
|
|
18
|
+
dark: string;
|
|
19
|
+
};
|
|
20
|
+
export const calciteColorTransparentInversePress: {
|
|
21
|
+
light: string;
|
|
22
|
+
dark: string;
|
|
23
|
+
};
|
|
16
24
|
export const calciteColorTransparentScrim: { light: string; dark: string };
|
|
17
25
|
export const calciteColorTransparentTint: { light: string; dark: string };
|
|
18
26
|
export const calciteColorBrand: { light: string; dark: string };
|
package/dist/es6/global.js
CHANGED
|
@@ -19,11 +19,19 @@ export const calciteColorTransparent = {
|
|
|
19
19
|
};
|
|
20
20
|
export const calciteColorTransparentHover = {
|
|
21
21
|
light: "rgba(0, 0, 0, 0.04)",
|
|
22
|
-
dark: "rgba(255, 255, 255, 0.
|
|
22
|
+
dark: "rgba(255, 255, 255, 0.12)",
|
|
23
23
|
};
|
|
24
24
|
export const calciteColorTransparentPress = {
|
|
25
25
|
light: "rgba(0, 0, 0, 0.08)",
|
|
26
|
-
dark: "rgba(255, 255, 255, 0.
|
|
26
|
+
dark: "rgba(255, 255, 255, 0.16)",
|
|
27
|
+
};
|
|
28
|
+
export const calciteColorTransparentInverseHover = {
|
|
29
|
+
light: "rgba(255, 255, 255, 0.12)",
|
|
30
|
+
dark: "rgba(0, 0, 0, 0.04)",
|
|
31
|
+
};
|
|
32
|
+
export const calciteColorTransparentInversePress = {
|
|
33
|
+
light: "rgba(255, 255, 255, 0.16)",
|
|
34
|
+
dark: "rgba(0, 0, 0, 0.08)",
|
|
27
35
|
};
|
|
28
36
|
export const calciteColorTransparentScrim = {
|
|
29
37
|
light: "rgba(255, 255, 255, 0.85)",
|
package/dist/es6/light.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ export const calciteColorForegroundCurrent: string;
|
|
|
12
12
|
export const calciteColorTransparent: string;
|
|
13
13
|
export const calciteColorTransparentHover: string;
|
|
14
14
|
export const calciteColorTransparentPress: string;
|
|
15
|
+
export const calciteColorTransparentInverseHover: string;
|
|
16
|
+
export const calciteColorTransparentInversePress: string;
|
|
15
17
|
export const calciteColorTransparentScrim: string;
|
|
16
18
|
export const calciteColorTransparentTint: string;
|
|
17
19
|
export const calciteColorBrand: string;
|
package/dist/es6/light.js
CHANGED
|
@@ -12,6 +12,8 @@ export const calciteColorForegroundCurrent = "#c7eaff";
|
|
|
12
12
|
export const calciteColorTransparent = "rgba(0, 0, 0, 0)";
|
|
13
13
|
export const calciteColorTransparentHover = "rgba(0, 0, 0, 0.04)";
|
|
14
14
|
export const calciteColorTransparentPress = "rgba(0, 0, 0, 0.08)";
|
|
15
|
+
export const calciteColorTransparentInverseHover = "rgba(255, 255, 255, 0.12)";
|
|
16
|
+
export const calciteColorTransparentInversePress = "rgba(255, 255, 255, 0.16)";
|
|
15
17
|
export const calciteColorTransparentScrim = "rgba(255, 255, 255, 0.85)";
|
|
16
18
|
export const calciteColorTransparentTint = "rgba(255, 255, 255, 0.8)";
|
|
17
19
|
export const calciteColorBrand = "#007ac2";
|
package/dist/js/core.d.ts
CHANGED
package/dist/js/core.js
CHANGED
|
@@ -18628,6 +18628,72 @@ export default {
|
|
|
18628
18628
|
path: ["core", "opacity", "10"],
|
|
18629
18629
|
key: "{core.opacity.10}",
|
|
18630
18630
|
},
|
|
18631
|
+
12: {
|
|
18632
|
+
value: "0.12",
|
|
18633
|
+
type: "opacity",
|
|
18634
|
+
attributes: {
|
|
18635
|
+
category: "opacity",
|
|
18636
|
+
type: "opacity",
|
|
18637
|
+
item: "12",
|
|
18638
|
+
names: {
|
|
18639
|
+
scss: "$calcite-opacity-12",
|
|
18640
|
+
css: "var(--calcite-opacity-12)",
|
|
18641
|
+
js: "core.opacity.12",
|
|
18642
|
+
docs: "core.opacity.12",
|
|
18643
|
+
es6: "calciteOpacity12",
|
|
18644
|
+
},
|
|
18645
|
+
"calcite-schema": {
|
|
18646
|
+
system: "calcite",
|
|
18647
|
+
tier: "core",
|
|
18648
|
+
type: "opacity",
|
|
18649
|
+
},
|
|
18650
|
+
},
|
|
18651
|
+
filePath: "src/tokens/core/opacity.json",
|
|
18652
|
+
isSource: false,
|
|
18653
|
+
original: {
|
|
18654
|
+
value: "12%",
|
|
18655
|
+
type: "opacity",
|
|
18656
|
+
attributes: {
|
|
18657
|
+
category: "opacity",
|
|
18658
|
+
},
|
|
18659
|
+
},
|
|
18660
|
+
name: "Opacity 12",
|
|
18661
|
+
path: ["core", "opacity", "12"],
|
|
18662
|
+
key: "{core.opacity.12}",
|
|
18663
|
+
},
|
|
18664
|
+
16: {
|
|
18665
|
+
value: "0.16",
|
|
18666
|
+
type: "opacity",
|
|
18667
|
+
attributes: {
|
|
18668
|
+
category: "opacity",
|
|
18669
|
+
type: "opacity",
|
|
18670
|
+
item: "16",
|
|
18671
|
+
names: {
|
|
18672
|
+
scss: "$calcite-opacity-16",
|
|
18673
|
+
css: "var(--calcite-opacity-16)",
|
|
18674
|
+
js: "core.opacity.16",
|
|
18675
|
+
docs: "core.opacity.16",
|
|
18676
|
+
es6: "calciteOpacity16",
|
|
18677
|
+
},
|
|
18678
|
+
"calcite-schema": {
|
|
18679
|
+
system: "calcite",
|
|
18680
|
+
tier: "core",
|
|
18681
|
+
type: "opacity",
|
|
18682
|
+
},
|
|
18683
|
+
},
|
|
18684
|
+
filePath: "src/tokens/core/opacity.json",
|
|
18685
|
+
isSource: false,
|
|
18686
|
+
original: {
|
|
18687
|
+
value: "16%",
|
|
18688
|
+
type: "opacity",
|
|
18689
|
+
attributes: {
|
|
18690
|
+
category: "opacity",
|
|
18691
|
+
},
|
|
18692
|
+
},
|
|
18693
|
+
name: "Opacity 16",
|
|
18694
|
+
path: ["core", "opacity", "16"],
|
|
18695
|
+
key: "{core.opacity.16}",
|
|
18696
|
+
},
|
|
18631
18697
|
20: {
|
|
18632
18698
|
value: "0.2",
|
|
18633
18699
|
type: "opacity",
|
package/dist/js/dark.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ export const calciteColorForegroundCurrent: string;
|
|
|
12
12
|
export const calciteColorTransparent: string;
|
|
13
13
|
export const calciteColorTransparentHover: string;
|
|
14
14
|
export const calciteColorTransparentPress: string;
|
|
15
|
+
export const calciteColorTransparentInverseHover: string;
|
|
16
|
+
export const calciteColorTransparentInversePress: string;
|
|
15
17
|
export const calciteColorTransparentScrim: string;
|
|
16
18
|
export const calciteColorTransparentTint: string;
|
|
17
19
|
export const calciteColorBrand: string;
|
package/dist/js/dark.js
CHANGED
|
@@ -252,7 +252,7 @@ export default {
|
|
|
252
252
|
key: "{semantic.color.transparent.default.default}",
|
|
253
253
|
},
|
|
254
254
|
hover: {
|
|
255
|
-
value: "rgba(255, 255, 255, 0.
|
|
255
|
+
value: "rgba(255, 255, 255, 0.12)",
|
|
256
256
|
type: "color",
|
|
257
257
|
attributes: {
|
|
258
258
|
category: "color",
|
|
@@ -276,7 +276,7 @@ export default {
|
|
|
276
276
|
filePath: "src/tokens/semantic/color/dark.json",
|
|
277
277
|
isSource: true,
|
|
278
278
|
original: {
|
|
279
|
-
value: "rgba({core.color.neutral.blk-000}, {core.opacity.
|
|
279
|
+
value: "rgba({core.color.neutral.blk-000}, {core.opacity.12})",
|
|
280
280
|
type: "color",
|
|
281
281
|
attributes: {
|
|
282
282
|
category: "color",
|
|
@@ -287,7 +287,7 @@ export default {
|
|
|
287
287
|
key: "{semantic.color.transparent.default.hover}",
|
|
288
288
|
},
|
|
289
289
|
press: {
|
|
290
|
-
value: "rgba(255, 255, 255, 0.
|
|
290
|
+
value: "rgba(255, 255, 255, 0.16)",
|
|
291
291
|
type: "color",
|
|
292
292
|
attributes: {
|
|
293
293
|
category: "color",
|
|
@@ -311,7 +311,7 @@ export default {
|
|
|
311
311
|
filePath: "src/tokens/semantic/color/dark.json",
|
|
312
312
|
isSource: true,
|
|
313
313
|
original: {
|
|
314
|
-
value: "rgba({core.color.neutral.blk-000}, {core.opacity.
|
|
314
|
+
value: "rgba({core.color.neutral.blk-000}, {core.opacity.16})",
|
|
315
315
|
type: "color",
|
|
316
316
|
attributes: {
|
|
317
317
|
category: "color",
|
|
@@ -322,6 +322,78 @@ export default {
|
|
|
322
322
|
key: "{semantic.color.transparent.default.press}",
|
|
323
323
|
},
|
|
324
324
|
},
|
|
325
|
+
inverse: {
|
|
326
|
+
hover: {
|
|
327
|
+
value: "rgba(0, 0, 0, 0.04)",
|
|
328
|
+
type: "color",
|
|
329
|
+
attributes: {
|
|
330
|
+
category: "color",
|
|
331
|
+
type: "color",
|
|
332
|
+
item: "transparent",
|
|
333
|
+
subitem: "inverse",
|
|
334
|
+
state: "hover",
|
|
335
|
+
names: {
|
|
336
|
+
scss: "$calcite-color-transparent-inverse-hover",
|
|
337
|
+
css: "var(--calcite-color-transparent-inverse-hover)",
|
|
338
|
+
js: "semantic.color.transparent.inverse.hover",
|
|
339
|
+
docs: "semantic.color.transparent.inverse.hover",
|
|
340
|
+
es6: "calciteColorTransparentInverseHover",
|
|
341
|
+
},
|
|
342
|
+
"calcite-schema": {
|
|
343
|
+
system: "calcite",
|
|
344
|
+
tier: "color",
|
|
345
|
+
type: "color",
|
|
346
|
+
},
|
|
347
|
+
},
|
|
348
|
+
filePath: "src/tokens/semantic/color/dark.json",
|
|
349
|
+
isSource: true,
|
|
350
|
+
original: {
|
|
351
|
+
value: "rgba({core.color.neutral.blk-240}, {core.opacity.4})",
|
|
352
|
+
type: "color",
|
|
353
|
+
attributes: {
|
|
354
|
+
category: "color",
|
|
355
|
+
},
|
|
356
|
+
},
|
|
357
|
+
name: "calciteColorTransparentInverseHover",
|
|
358
|
+
path: ["semantic", "color", "transparent", "inverse", "hover"],
|
|
359
|
+
key: "{semantic.color.transparent.inverse.hover}",
|
|
360
|
+
},
|
|
361
|
+
press: {
|
|
362
|
+
value: "rgba(0, 0, 0, 0.08)",
|
|
363
|
+
type: "color",
|
|
364
|
+
attributes: {
|
|
365
|
+
category: "color",
|
|
366
|
+
type: "color",
|
|
367
|
+
item: "transparent",
|
|
368
|
+
subitem: "inverse",
|
|
369
|
+
state: "press",
|
|
370
|
+
names: {
|
|
371
|
+
scss: "$calcite-color-transparent-inverse-press",
|
|
372
|
+
css: "var(--calcite-color-transparent-inverse-press)",
|
|
373
|
+
js: "semantic.color.transparent.inverse.press",
|
|
374
|
+
docs: "semantic.color.transparent.inverse.press",
|
|
375
|
+
es6: "calciteColorTransparentInversePress",
|
|
376
|
+
},
|
|
377
|
+
"calcite-schema": {
|
|
378
|
+
system: "calcite",
|
|
379
|
+
tier: "color",
|
|
380
|
+
type: "color",
|
|
381
|
+
},
|
|
382
|
+
},
|
|
383
|
+
filePath: "src/tokens/semantic/color/dark.json",
|
|
384
|
+
isSource: true,
|
|
385
|
+
original: {
|
|
386
|
+
value: "rgba({core.color.neutral.blk-240}, {core.opacity.8})",
|
|
387
|
+
type: "color",
|
|
388
|
+
attributes: {
|
|
389
|
+
category: "color",
|
|
390
|
+
},
|
|
391
|
+
},
|
|
392
|
+
name: "calciteColorTransparentInversePress",
|
|
393
|
+
path: ["semantic", "color", "transparent", "inverse", "press"],
|
|
394
|
+
key: "{semantic.color.transparent.inverse.press}",
|
|
395
|
+
},
|
|
396
|
+
},
|
|
325
397
|
scrim: {
|
|
326
398
|
value: "rgba(0, 0, 0, 0.85)",
|
|
327
399
|
type: "color",
|
package/dist/js/global.d.ts
CHANGED
package/dist/js/global.js
CHANGED
|
@@ -273,7 +273,7 @@ export default {
|
|
|
273
273
|
hover: {
|
|
274
274
|
value: {
|
|
275
275
|
light: "rgba(0, 0, 0, 0.04)",
|
|
276
|
-
dark: "rgba(255, 255, 255, 0.
|
|
276
|
+
dark: "rgba(255, 255, 255, 0.12)",
|
|
277
277
|
},
|
|
278
278
|
type: "color",
|
|
279
279
|
attributes: {
|
|
@@ -311,7 +311,7 @@ export default {
|
|
|
311
311
|
press: {
|
|
312
312
|
value: {
|
|
313
313
|
light: "rgba(0, 0, 0, 0.08)",
|
|
314
|
-
dark: "rgba(255, 255, 255, 0.
|
|
314
|
+
dark: "rgba(255, 255, 255, 0.16)",
|
|
315
315
|
},
|
|
316
316
|
type: "color",
|
|
317
317
|
attributes: {
|
|
@@ -347,6 +347,84 @@ export default {
|
|
|
347
347
|
key: "{semantic.color.transparent.default.press}",
|
|
348
348
|
},
|
|
349
349
|
},
|
|
350
|
+
inverse: {
|
|
351
|
+
hover: {
|
|
352
|
+
value: {
|
|
353
|
+
light: "rgba(255, 255, 255, 0.12)",
|
|
354
|
+
dark: "rgba(0, 0, 0, 0.04)",
|
|
355
|
+
},
|
|
356
|
+
type: "color",
|
|
357
|
+
attributes: {
|
|
358
|
+
category: "color",
|
|
359
|
+
type: "color",
|
|
360
|
+
item: "transparent",
|
|
361
|
+
subitem: "inverse",
|
|
362
|
+
state: "hover",
|
|
363
|
+
names: {
|
|
364
|
+
scss: "$calcite-color-transparent-inverse-hover",
|
|
365
|
+
css: "var(--calcite-color-transparent-inverse-hover)",
|
|
366
|
+
js: "semantic.color.transparent.inverse.hover",
|
|
367
|
+
docs: "semantic.color.transparent.inverse.hover",
|
|
368
|
+
es6: "calciteColorTransparentInverseHover",
|
|
369
|
+
},
|
|
370
|
+
"calcite-schema": {
|
|
371
|
+
system: "calcite",
|
|
372
|
+
tier: "color",
|
|
373
|
+
type: "color",
|
|
374
|
+
},
|
|
375
|
+
},
|
|
376
|
+
filePath: "src/tokens/semantic/color/light.json",
|
|
377
|
+
isSource: false,
|
|
378
|
+
original: {
|
|
379
|
+
value: "rgba({core.color.neutral.blk-000}, {core.opacity.12})",
|
|
380
|
+
type: "color",
|
|
381
|
+
attributes: {
|
|
382
|
+
category: "color",
|
|
383
|
+
},
|
|
384
|
+
},
|
|
385
|
+
name: "Color Transparent Inverse Hover",
|
|
386
|
+
path: ["semantic", "color", "transparent", "inverse", "hover"],
|
|
387
|
+
key: "{semantic.color.transparent.inverse.hover}",
|
|
388
|
+
},
|
|
389
|
+
press: {
|
|
390
|
+
value: {
|
|
391
|
+
light: "rgba(255, 255, 255, 0.16)",
|
|
392
|
+
dark: "rgba(0, 0, 0, 0.08)",
|
|
393
|
+
},
|
|
394
|
+
type: "color",
|
|
395
|
+
attributes: {
|
|
396
|
+
category: "color",
|
|
397
|
+
type: "color",
|
|
398
|
+
item: "transparent",
|
|
399
|
+
subitem: "inverse",
|
|
400
|
+
state: "press",
|
|
401
|
+
names: {
|
|
402
|
+
scss: "$calcite-color-transparent-inverse-press",
|
|
403
|
+
css: "var(--calcite-color-transparent-inverse-press)",
|
|
404
|
+
js: "semantic.color.transparent.inverse.press",
|
|
405
|
+
docs: "semantic.color.transparent.inverse.press",
|
|
406
|
+
es6: "calciteColorTransparentInversePress",
|
|
407
|
+
},
|
|
408
|
+
"calcite-schema": {
|
|
409
|
+
system: "calcite",
|
|
410
|
+
tier: "color",
|
|
411
|
+
type: "color",
|
|
412
|
+
},
|
|
413
|
+
},
|
|
414
|
+
filePath: "src/tokens/semantic/color/light.json",
|
|
415
|
+
isSource: false,
|
|
416
|
+
original: {
|
|
417
|
+
value: "rgba({core.color.neutral.blk-000}, {core.opacity.16})",
|
|
418
|
+
type: "color",
|
|
419
|
+
attributes: {
|
|
420
|
+
category: "color",
|
|
421
|
+
},
|
|
422
|
+
},
|
|
423
|
+
name: "Color Transparent Inverse Press",
|
|
424
|
+
path: ["semantic", "color", "transparent", "inverse", "press"],
|
|
425
|
+
key: "{semantic.color.transparent.inverse.press}",
|
|
426
|
+
},
|
|
427
|
+
},
|
|
350
428
|
scrim: {
|
|
351
429
|
value: {
|
|
352
430
|
light: "rgba(255, 255, 255, 0.85)",
|
package/dist/js/light.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ export const calciteColorForegroundCurrent: string;
|
|
|
12
12
|
export const calciteColorTransparent: string;
|
|
13
13
|
export const calciteColorTransparentHover: string;
|
|
14
14
|
export const calciteColorTransparentPress: string;
|
|
15
|
+
export const calciteColorTransparentInverseHover: string;
|
|
16
|
+
export const calciteColorTransparentInversePress: string;
|
|
15
17
|
export const calciteColorTransparentScrim: string;
|
|
16
18
|
export const calciteColorTransparentTint: string;
|
|
17
19
|
export const calciteColorBrand: string;
|
package/dist/js/light.js
CHANGED
|
@@ -322,6 +322,78 @@ export default {
|
|
|
322
322
|
key: "{semantic.color.transparent.default.press}",
|
|
323
323
|
},
|
|
324
324
|
},
|
|
325
|
+
inverse: {
|
|
326
|
+
hover: {
|
|
327
|
+
value: "rgba(255, 255, 255, 0.12)",
|
|
328
|
+
type: "color",
|
|
329
|
+
attributes: {
|
|
330
|
+
category: "color",
|
|
331
|
+
type: "color",
|
|
332
|
+
item: "transparent",
|
|
333
|
+
subitem: "inverse",
|
|
334
|
+
state: "hover",
|
|
335
|
+
names: {
|
|
336
|
+
scss: "$calcite-color-transparent-inverse-hover",
|
|
337
|
+
css: "var(--calcite-color-transparent-inverse-hover)",
|
|
338
|
+
js: "semantic.color.transparent.inverse.hover",
|
|
339
|
+
docs: "semantic.color.transparent.inverse.hover",
|
|
340
|
+
es6: "calciteColorTransparentInverseHover",
|
|
341
|
+
},
|
|
342
|
+
"calcite-schema": {
|
|
343
|
+
system: "calcite",
|
|
344
|
+
tier: "color",
|
|
345
|
+
type: "color",
|
|
346
|
+
},
|
|
347
|
+
},
|
|
348
|
+
filePath: "src/tokens/semantic/color/light.json",
|
|
349
|
+
isSource: true,
|
|
350
|
+
original: {
|
|
351
|
+
value: "rgba({core.color.neutral.blk-000}, {core.opacity.12})",
|
|
352
|
+
type: "color",
|
|
353
|
+
attributes: {
|
|
354
|
+
category: "color",
|
|
355
|
+
},
|
|
356
|
+
},
|
|
357
|
+
name: "calciteColorTransparentInverseHover",
|
|
358
|
+
path: ["semantic", "color", "transparent", "inverse", "hover"],
|
|
359
|
+
key: "{semantic.color.transparent.inverse.hover}",
|
|
360
|
+
},
|
|
361
|
+
press: {
|
|
362
|
+
value: "rgba(255, 255, 255, 0.16)",
|
|
363
|
+
type: "color",
|
|
364
|
+
attributes: {
|
|
365
|
+
category: "color",
|
|
366
|
+
type: "color",
|
|
367
|
+
item: "transparent",
|
|
368
|
+
subitem: "inverse",
|
|
369
|
+
state: "press",
|
|
370
|
+
names: {
|
|
371
|
+
scss: "$calcite-color-transparent-inverse-press",
|
|
372
|
+
css: "var(--calcite-color-transparent-inverse-press)",
|
|
373
|
+
js: "semantic.color.transparent.inverse.press",
|
|
374
|
+
docs: "semantic.color.transparent.inverse.press",
|
|
375
|
+
es6: "calciteColorTransparentInversePress",
|
|
376
|
+
},
|
|
377
|
+
"calcite-schema": {
|
|
378
|
+
system: "calcite",
|
|
379
|
+
tier: "color",
|
|
380
|
+
type: "color",
|
|
381
|
+
},
|
|
382
|
+
},
|
|
383
|
+
filePath: "src/tokens/semantic/color/light.json",
|
|
384
|
+
isSource: true,
|
|
385
|
+
original: {
|
|
386
|
+
value: "rgba({core.color.neutral.blk-000}, {core.opacity.16})",
|
|
387
|
+
type: "color",
|
|
388
|
+
attributes: {
|
|
389
|
+
category: "color",
|
|
390
|
+
},
|
|
391
|
+
},
|
|
392
|
+
name: "calciteColorTransparentInversePress",
|
|
393
|
+
path: ["semantic", "color", "transparent", "inverse", "press"],
|
|
394
|
+
key: "{semantic.color.transparent.inverse.press}",
|
|
395
|
+
},
|
|
396
|
+
},
|
|
325
397
|
scrim: {
|
|
326
398
|
value: "rgba(255, 255, 255, 0.85)",
|
|
327
399
|
type: "color",
|
package/dist/scss/core.scss
CHANGED
|
@@ -509,6 +509,8 @@ $calcite-opacity-0: 0;
|
|
|
509
509
|
$calcite-opacity-4: 0.04;
|
|
510
510
|
$calcite-opacity-8: 0.08;
|
|
511
511
|
$calcite-opacity-10: 0.1;
|
|
512
|
+
$calcite-opacity-12: 0.12;
|
|
513
|
+
$calcite-opacity-16: 0.16;
|
|
512
514
|
$calcite-opacity-20: 0.2;
|
|
513
515
|
$calcite-opacity-30: 0.3;
|
|
514
516
|
$calcite-opacity-40: 0.4;
|
package/dist/scss/dark.scss
CHANGED
|
@@ -9,8 +9,10 @@ $calcite-color-foreground-2: #202020;
|
|
|
9
9
|
$calcite-color-foreground-3: #151515;
|
|
10
10
|
$calcite-color-foreground-current: #214155;
|
|
11
11
|
$calcite-color-transparent: rgba(255, 255, 255, 0);
|
|
12
|
-
$calcite-color-transparent-hover: rgba(255, 255, 255, 0.
|
|
13
|
-
$calcite-color-transparent-press: rgba(255, 255, 255, 0.
|
|
12
|
+
$calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
|
|
13
|
+
$calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
|
|
14
|
+
$calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
|
|
15
|
+
$calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
|
|
14
16
|
$calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
15
17
|
$calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
|
|
16
18
|
$calcite-color-brand: #009af2;
|
package/dist/scss/index.scss
CHANGED
|
@@ -39,6 +39,8 @@
|
|
|
39
39
|
--calcite-color-brand: #007ac2;
|
|
40
40
|
--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
41
41
|
--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
42
|
+
--calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
|
|
43
|
+
--calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
|
|
42
44
|
--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
43
45
|
--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
44
46
|
--calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
@@ -83,8 +85,10 @@
|
|
|
83
85
|
--calcite-color-brand: #009af2;
|
|
84
86
|
--calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
|
|
85
87
|
--calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
86
|
-
--calcite-color-transparent-press: rgba(
|
|
87
|
-
--calcite-color-transparent-hover: rgba(
|
|
88
|
+
--calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
|
|
89
|
+
--calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
|
|
90
|
+
--calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
|
|
91
|
+
--calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
|
|
88
92
|
--calcite-color-transparent: rgba(255, 255, 255, 0);
|
|
89
93
|
--calcite-color-foreground-3: #151515;
|
|
90
94
|
--calcite-color-foreground-2: #202020;
|
package/dist/scss/light.scss
CHANGED
|
@@ -11,6 +11,8 @@ $calcite-color-foreground-current: #c7eaff;
|
|
|
11
11
|
$calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
12
12
|
$calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
13
13
|
$calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
14
|
+
$calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
|
|
15
|
+
$calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
|
|
14
16
|
$calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
15
17
|
$calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
16
18
|
$calcite-color-brand: #007ac2;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@esri/calcite-design-tokens",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0-next.0",
|
|
4
4
|
"description": "Esri's Calcite Design System Tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Calcite",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"volta": {
|
|
43
43
|
"extends": "../../package.json"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "e5b2af3b9a92d3d3b82adbacea032b437ce894aa"
|
|
46
46
|
}
|