@esri/calcite-design-tokens 3.0.2-next.8 → 3.1.0-next.1
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 +17 -15
- package/dist/css/dark.css +13 -11
- package/dist/css/index.css +59 -49
- package/dist/css/light.css +11 -9
- package/dist/docs/core.json +68 -16
- package/dist/docs/dark.json +68 -12
- package/dist/docs/global.json +70 -14
- package/dist/docs/light.json +66 -10
- package/dist/docs/semantic.json +1 -1
- package/dist/es6/core.d.ts +2 -0
- package/dist/es6/core.js +17 -15
- package/dist/es6/dark.d.ts +2 -0
- package/dist/es6/dark.js +13 -11
- package/dist/es6/global.d.ts +8 -0
- package/dist/es6/global.js +21 -13
- package/dist/es6/light.d.ts +2 -0
- package/dist/es6/light.js +11 -9
- package/dist/js/core.d.ts +2 -0
- package/dist/js/core.js +96 -30
- package/dist/js/dark.d.ts +2 -0
- package/dist/js/dark.js +85 -13
- package/dist/js/global.d.ts +4 -0
- package/dist/js/global.js +98 -20
- package/dist/js/light.d.ts +2 -0
- package/dist/js/light.js +81 -9
- package/dist/scss/core.scss +17 -15
- package/dist/scss/dark.scss +13 -11
- package/dist/scss/index.scss +24 -20
- package/dist/scss/light.scss +11 -9
- package/package.json +2 -2
package/dist/js/global.js
CHANGED
|
@@ -10,8 +10,8 @@ export default {
|
|
|
10
10
|
background: {
|
|
11
11
|
default: {
|
|
12
12
|
value: {
|
|
13
|
-
light: "#
|
|
14
|
-
dark: "#
|
|
13
|
+
light: "#f7f7f7",
|
|
14
|
+
dark: "#363636",
|
|
15
15
|
},
|
|
16
16
|
type: "color",
|
|
17
17
|
attributes: {
|
|
@@ -120,8 +120,8 @@ export default {
|
|
|
120
120
|
},
|
|
121
121
|
2: {
|
|
122
122
|
value: {
|
|
123
|
-
light: "#
|
|
124
|
-
dark: "#
|
|
123
|
+
light: "#f2f2f2",
|
|
124
|
+
dark: "#212121",
|
|
125
125
|
},
|
|
126
126
|
type: "color",
|
|
127
127
|
attributes: {
|
|
@@ -157,8 +157,8 @@ export default {
|
|
|
157
157
|
},
|
|
158
158
|
3: {
|
|
159
159
|
value: {
|
|
160
|
-
light: "#
|
|
161
|
-
dark: "#
|
|
160
|
+
light: "#ebebeb",
|
|
161
|
+
dark: "#141414",
|
|
162
162
|
},
|
|
163
163
|
type: "color",
|
|
164
164
|
attributes: {
|
|
@@ -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)",
|
|
@@ -1047,8 +1125,8 @@ export default {
|
|
|
1047
1125
|
inverse: {
|
|
1048
1126
|
default: {
|
|
1049
1127
|
value: {
|
|
1050
|
-
light: "#
|
|
1051
|
-
dark: "#
|
|
1128
|
+
light: "#363636",
|
|
1129
|
+
dark: "#f7f7f7",
|
|
1052
1130
|
},
|
|
1053
1131
|
type: "color",
|
|
1054
1132
|
attributes: {
|
|
@@ -1121,8 +1199,8 @@ export default {
|
|
|
1121
1199
|
},
|
|
1122
1200
|
press: {
|
|
1123
1201
|
value: {
|
|
1124
|
-
light: "#
|
|
1125
|
-
dark: "#
|
|
1202
|
+
light: "#212121",
|
|
1203
|
+
dark: "#f2f2f2",
|
|
1126
1204
|
},
|
|
1127
1205
|
type: "color",
|
|
1128
1206
|
attributes: {
|
|
@@ -1160,7 +1238,7 @@ export default {
|
|
|
1160
1238
|
text: {
|
|
1161
1239
|
1: {
|
|
1162
1240
|
value: {
|
|
1163
|
-
light: "#
|
|
1241
|
+
light: "#141414",
|
|
1164
1242
|
dark: "#ffffff",
|
|
1165
1243
|
},
|
|
1166
1244
|
type: "color",
|
|
@@ -1234,8 +1312,8 @@ export default {
|
|
|
1234
1312
|
},
|
|
1235
1313
|
3: {
|
|
1236
1314
|
value: {
|
|
1237
|
-
light: "#
|
|
1238
|
-
dark: "#
|
|
1315
|
+
light: "#6b6b6b",
|
|
1316
|
+
dark: "#9e9e9e",
|
|
1239
1317
|
},
|
|
1240
1318
|
type: "color",
|
|
1241
1319
|
attributes: {
|
|
@@ -1272,7 +1350,7 @@ export default {
|
|
|
1272
1350
|
inverse: {
|
|
1273
1351
|
value: {
|
|
1274
1352
|
light: "#ffffff",
|
|
1275
|
-
dark: "#
|
|
1353
|
+
dark: "#141414",
|
|
1276
1354
|
},
|
|
1277
1355
|
type: "color",
|
|
1278
1356
|
attributes: {
|
|
@@ -1347,8 +1425,8 @@ export default {
|
|
|
1347
1425
|
border: {
|
|
1348
1426
|
1: {
|
|
1349
1427
|
value: {
|
|
1350
|
-
light: "#
|
|
1351
|
-
dark: "#
|
|
1428
|
+
light: "#c9c9c9",
|
|
1429
|
+
dark: "#545454",
|
|
1352
1430
|
},
|
|
1353
1431
|
type: "color",
|
|
1354
1432
|
attributes: {
|
|
@@ -1421,7 +1499,7 @@ export default {
|
|
|
1421
1499
|
},
|
|
1422
1500
|
3: {
|
|
1423
1501
|
value: {
|
|
1424
|
-
light: "#
|
|
1502
|
+
light: "#dedede",
|
|
1425
1503
|
dark: "#404040",
|
|
1426
1504
|
},
|
|
1427
1505
|
type: "color",
|
|
@@ -1533,7 +1611,7 @@ export default {
|
|
|
1533
1611
|
white: {
|
|
1534
1612
|
value: {
|
|
1535
1613
|
light: "#ffffff",
|
|
1536
|
-
dark: "#
|
|
1614
|
+
dark: "#f7f7f7",
|
|
1537
1615
|
},
|
|
1538
1616
|
type: "color",
|
|
1539
1617
|
attributes: {
|
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
|
@@ -8,7 +8,7 @@ export default {
|
|
|
8
8
|
color: {
|
|
9
9
|
background: {
|
|
10
10
|
default: {
|
|
11
|
-
value: "#
|
|
11
|
+
value: "#f7f7f7",
|
|
12
12
|
type: "color",
|
|
13
13
|
attributes: {
|
|
14
14
|
category: "color",
|
|
@@ -112,7 +112,7 @@ export default {
|
|
|
112
112
|
key: "{semantic.color.foreground.1}",
|
|
113
113
|
},
|
|
114
114
|
2: {
|
|
115
|
-
value: "#
|
|
115
|
+
value: "#f2f2f2",
|
|
116
116
|
type: "color",
|
|
117
117
|
attributes: {
|
|
118
118
|
category: "color",
|
|
@@ -146,7 +146,7 @@ export default {
|
|
|
146
146
|
key: "{semantic.color.foreground.2}",
|
|
147
147
|
},
|
|
148
148
|
3: {
|
|
149
|
-
value: "#
|
|
149
|
+
value: "#ebebeb",
|
|
150
150
|
type: "color",
|
|
151
151
|
attributes: {
|
|
152
152
|
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(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",
|
|
@@ -967,7 +1039,7 @@ export default {
|
|
|
967
1039
|
},
|
|
968
1040
|
inverse: {
|
|
969
1041
|
default: {
|
|
970
|
-
value: "#
|
|
1042
|
+
value: "#363636",
|
|
971
1043
|
type: "color",
|
|
972
1044
|
attributes: {
|
|
973
1045
|
category: "color",
|
|
@@ -1035,7 +1107,7 @@ export default {
|
|
|
1035
1107
|
key: "{semantic.color.inverse.hover}",
|
|
1036
1108
|
},
|
|
1037
1109
|
press: {
|
|
1038
|
-
value: "#
|
|
1110
|
+
value: "#212121",
|
|
1039
1111
|
type: "color",
|
|
1040
1112
|
attributes: {
|
|
1041
1113
|
category: "color",
|
|
@@ -1071,7 +1143,7 @@ export default {
|
|
|
1071
1143
|
},
|
|
1072
1144
|
text: {
|
|
1073
1145
|
1: {
|
|
1074
|
-
value: "#
|
|
1146
|
+
value: "#141414",
|
|
1075
1147
|
type: "color",
|
|
1076
1148
|
attributes: {
|
|
1077
1149
|
category: "color",
|
|
@@ -1139,7 +1211,7 @@ export default {
|
|
|
1139
1211
|
key: "{semantic.color.text.2}",
|
|
1140
1212
|
},
|
|
1141
1213
|
3: {
|
|
1142
|
-
value: "#
|
|
1214
|
+
value: "#6b6b6b",
|
|
1143
1215
|
type: "color",
|
|
1144
1216
|
attributes: {
|
|
1145
1217
|
category: "color",
|
|
@@ -1243,7 +1315,7 @@ export default {
|
|
|
1243
1315
|
},
|
|
1244
1316
|
border: {
|
|
1245
1317
|
1: {
|
|
1246
|
-
value: "#
|
|
1318
|
+
value: "#c9c9c9",
|
|
1247
1319
|
type: "color",
|
|
1248
1320
|
attributes: {
|
|
1249
1321
|
category: "color",
|
|
@@ -1311,7 +1383,7 @@ export default {
|
|
|
1311
1383
|
key: "{semantic.color.border.2}",
|
|
1312
1384
|
},
|
|
1313
1385
|
3: {
|
|
1314
|
-
value: "#
|
|
1386
|
+
value: "#dedede",
|
|
1315
1387
|
type: "color",
|
|
1316
1388
|
attributes: {
|
|
1317
1389
|
category: "color",
|
package/dist/scss/core.scss
CHANGED
|
@@ -3,31 +3,31 @@
|
|
|
3
3
|
// Do not edit directly, this file was auto-generated.
|
|
4
4
|
|
|
5
5
|
$calcite-color-neutral-blk-000: #ffffff;
|
|
6
|
-
$calcite-color-neutral-blk-005: #
|
|
7
|
-
$calcite-color-neutral-blk-010: #
|
|
8
|
-
$calcite-color-neutral-blk-020: #
|
|
9
|
-
$calcite-color-neutral-blk-030: #
|
|
6
|
+
$calcite-color-neutral-blk-005: #f7f7f7;
|
|
7
|
+
$calcite-color-neutral-blk-010: #f2f2f2;
|
|
8
|
+
$calcite-color-neutral-blk-020: #ebebeb;
|
|
9
|
+
$calcite-color-neutral-blk-030: #dedede;
|
|
10
10
|
$calcite-color-neutral-blk-040: #d4d4d4;
|
|
11
|
-
$calcite-color-neutral-blk-050: #
|
|
11
|
+
$calcite-color-neutral-blk-050: #c9c9c9;
|
|
12
12
|
$calcite-color-neutral-blk-060: #bfbfbf;
|
|
13
13
|
$calcite-color-neutral-blk-070: #b5b5b5;
|
|
14
|
-
$calcite-color-neutral-blk-080: #
|
|
15
|
-
$calcite-color-neutral-blk-090: #
|
|
14
|
+
$calcite-color-neutral-blk-080: #ababab;
|
|
15
|
+
$calcite-color-neutral-blk-090: #9e9e9e;
|
|
16
16
|
$calcite-color-neutral-blk-100: #949494;
|
|
17
17
|
$calcite-color-neutral-blk-110: #8a8a8a;
|
|
18
18
|
$calcite-color-neutral-blk-120: #808080;
|
|
19
19
|
$calcite-color-neutral-blk-130: #757575;
|
|
20
|
-
$calcite-color-neutral-blk-140: #
|
|
21
|
-
$calcite-color-neutral-blk-150: #
|
|
22
|
-
$calcite-color-neutral-blk-160: #
|
|
20
|
+
$calcite-color-neutral-blk-140: #6b6b6b;
|
|
21
|
+
$calcite-color-neutral-blk-150: #616161;
|
|
22
|
+
$calcite-color-neutral-blk-160: #545454;
|
|
23
23
|
$calcite-color-neutral-blk-170: #4a4a4a;
|
|
24
24
|
$calcite-color-neutral-blk-180: #404040;
|
|
25
|
-
$calcite-color-neutral-blk-190: #
|
|
25
|
+
$calcite-color-neutral-blk-190: #363636;
|
|
26
26
|
$calcite-color-neutral-blk-200: #2b2b2b;
|
|
27
|
-
$calcite-color-neutral-blk-210: #
|
|
28
|
-
$calcite-color-neutral-blk-220: #
|
|
29
|
-
$calcite-color-neutral-blk-230: #
|
|
30
|
-
$calcite-color-neutral-blk-235: #
|
|
27
|
+
$calcite-color-neutral-blk-210: #212121;
|
|
28
|
+
$calcite-color-neutral-blk-220: #141414;
|
|
29
|
+
$calcite-color-neutral-blk-230: #0a0a0a;
|
|
30
|
+
$calcite-color-neutral-blk-235: #050505;
|
|
31
31
|
$calcite-color-neutral-blk-240: #000000;
|
|
32
32
|
$calcite-color-low-saturation-blue-l-bb-010: #edf3f7;
|
|
33
33
|
$calcite-color-low-saturation-blue-l-bb-020: #d7e1e7;
|
|
@@ -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
|
@@ -2,15 +2,17 @@
|
|
|
2
2
|
// Calcite Design System
|
|
3
3
|
// Do not edit directly, this file was auto-generated.
|
|
4
4
|
|
|
5
|
-
$calcite-color-background: #
|
|
5
|
+
$calcite-color-background: #363636;
|
|
6
6
|
$calcite-color-background-none: rgba(255, 255, 255, 0);
|
|
7
7
|
$calcite-color-foreground-1: #2b2b2b;
|
|
8
|
-
$calcite-color-foreground-2: #
|
|
9
|
-
$calcite-color-foreground-3: #
|
|
8
|
+
$calcite-color-foreground-2: #212121;
|
|
9
|
+
$calcite-color-foreground-3: #141414;
|
|
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;
|
|
@@ -29,17 +31,17 @@ $calcite-color-status-warning-press: #f5d000;
|
|
|
29
31
|
$calcite-color-status-danger: #fe583e;
|
|
30
32
|
$calcite-color-status-danger-hover: #ff0015;
|
|
31
33
|
$calcite-color-status-danger-press: #d90012;
|
|
32
|
-
$calcite-color-inverse: #
|
|
34
|
+
$calcite-color-inverse: #f7f7f7;
|
|
33
35
|
$calcite-color-inverse-hover: #ffffff;
|
|
34
|
-
$calcite-color-inverse-press: #
|
|
36
|
+
$calcite-color-inverse-press: #f2f2f2;
|
|
35
37
|
$calcite-color-text-1: #ffffff;
|
|
36
38
|
$calcite-color-text-2: #bfbfbf;
|
|
37
|
-
$calcite-color-text-3: #
|
|
38
|
-
$calcite-color-text-inverse: #
|
|
39
|
+
$calcite-color-text-3: #9e9e9e;
|
|
40
|
+
$calcite-color-text-inverse: #141414;
|
|
39
41
|
$calcite-color-text-link: #00a0ff;
|
|
40
|
-
$calcite-color-border-1: #
|
|
42
|
+
$calcite-color-border-1: #545454;
|
|
41
43
|
$calcite-color-border-2: #4a4a4a;
|
|
42
44
|
$calcite-color-border-3: #404040;
|
|
43
45
|
$calcite-color-border-input: #757575;
|
|
44
46
|
$calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
|
|
45
|
-
$calcite-color-border-white: #
|
|
47
|
+
$calcite-color-border-white: #f7f7f7;
|
package/dist/scss/index.scss
CHANGED
|
@@ -10,17 +10,17 @@
|
|
|
10
10
|
--calcite-color-border-white: #ffffff;
|
|
11
11
|
--calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
|
|
12
12
|
--calcite-color-border-input: #949494;
|
|
13
|
-
--calcite-color-border-3: #
|
|
13
|
+
--calcite-color-border-3: #dedede;
|
|
14
14
|
--calcite-color-border-2: #d4d4d4;
|
|
15
|
-
--calcite-color-border-1: #
|
|
15
|
+
--calcite-color-border-1: #c9c9c9;
|
|
16
16
|
--calcite-color-text-link: #00619b;
|
|
17
17
|
--calcite-color-text-inverse: #ffffff;
|
|
18
|
-
--calcite-color-text-3: #
|
|
18
|
+
--calcite-color-text-3: #6b6b6b;
|
|
19
19
|
--calcite-color-text-2: #4a4a4a;
|
|
20
|
-
--calcite-color-text-1: #
|
|
21
|
-
--calcite-color-inverse-press: #
|
|
20
|
+
--calcite-color-text-1: #141414;
|
|
21
|
+
--calcite-color-inverse-press: #212121;
|
|
22
22
|
--calcite-color-inverse-hover: #2b2b2b;
|
|
23
|
-
--calcite-color-inverse: #
|
|
23
|
+
--calcite-color-inverse: #363636;
|
|
24
24
|
--calcite-color-status-danger-press: #7c1d13;
|
|
25
25
|
--calcite-color-status-danger-hover: #a82b1e;
|
|
26
26
|
--calcite-color-status-danger: #d83020;
|
|
@@ -39,32 +39,34 @@
|
|
|
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);
|
|
45
47
|
--calcite-color-foreground-current: #c7eaff;
|
|
46
|
-
--calcite-color-foreground-3: #
|
|
47
|
-
--calcite-color-foreground-2: #
|
|
48
|
+
--calcite-color-foreground-3: #ebebeb;
|
|
49
|
+
--calcite-color-foreground-2: #f2f2f2;
|
|
48
50
|
--calcite-color-foreground-1: #ffffff;
|
|
49
51
|
--calcite-color-background-none: rgba(255, 255, 255, 0);
|
|
50
|
-
--calcite-color-background: #
|
|
52
|
+
--calcite-color-background: #f7f7f7;
|
|
51
53
|
}
|
|
52
54
|
@mixin calcite-mode-dark {
|
|
53
55
|
--calcite-color-foreground-current: #214155;
|
|
54
|
-
--calcite-color-border-white: #
|
|
56
|
+
--calcite-color-border-white: #f7f7f7;
|
|
55
57
|
--calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
|
|
56
58
|
--calcite-color-border-input: #757575;
|
|
57
59
|
--calcite-color-border-3: #404040;
|
|
58
60
|
--calcite-color-border-2: #4a4a4a;
|
|
59
|
-
--calcite-color-border-1: #
|
|
61
|
+
--calcite-color-border-1: #545454;
|
|
60
62
|
--calcite-color-text-link: #00a0ff;
|
|
61
|
-
--calcite-color-text-inverse: #
|
|
62
|
-
--calcite-color-text-3: #
|
|
63
|
+
--calcite-color-text-inverse: #141414;
|
|
64
|
+
--calcite-color-text-3: #9e9e9e;
|
|
63
65
|
--calcite-color-text-2: #bfbfbf;
|
|
64
66
|
--calcite-color-text-1: #ffffff;
|
|
65
|
-
--calcite-color-inverse-press: #
|
|
67
|
+
--calcite-color-inverse-press: #f2f2f2;
|
|
66
68
|
--calcite-color-inverse-hover: #ffffff;
|
|
67
|
-
--calcite-color-inverse: #
|
|
69
|
+
--calcite-color-inverse: #f7f7f7;
|
|
68
70
|
--calcite-color-status-danger-press: #d90012;
|
|
69
71
|
--calcite-color-status-danger-hover: #ff0015;
|
|
70
72
|
--calcite-color-status-danger: #fe583e;
|
|
@@ -83,12 +85,14 @@
|
|
|
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
|
-
--calcite-color-foreground-3: #
|
|
90
|
-
--calcite-color-foreground-2: #
|
|
93
|
+
--calcite-color-foreground-3: #141414;
|
|
94
|
+
--calcite-color-foreground-2: #212121;
|
|
91
95
|
--calcite-color-foreground-1: #2b2b2b;
|
|
92
96
|
--calcite-color-background-none: rgba(255, 255, 255, 0);
|
|
93
|
-
--calcite-color-background: #
|
|
97
|
+
--calcite-color-background: #363636;
|
|
94
98
|
}
|
package/dist/scss/light.scss
CHANGED
|
@@ -2,15 +2,17 @@
|
|
|
2
2
|
// Calcite Design System
|
|
3
3
|
// Do not edit directly, this file was auto-generated.
|
|
4
4
|
|
|
5
|
-
$calcite-color-background: #
|
|
5
|
+
$calcite-color-background: #f7f7f7;
|
|
6
6
|
$calcite-color-background-none: rgba(255, 255, 255, 0);
|
|
7
7
|
$calcite-color-foreground-1: #ffffff;
|
|
8
|
-
$calcite-color-foreground-2: #
|
|
9
|
-
$calcite-color-foreground-3: #
|
|
8
|
+
$calcite-color-foreground-2: #f2f2f2;
|
|
9
|
+
$calcite-color-foreground-3: #ebebeb;
|
|
10
10
|
$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;
|
|
@@ -29,17 +31,17 @@ $calcite-color-status-warning-press: #bfa200;
|
|
|
29
31
|
$calcite-color-status-danger: #d83020;
|
|
30
32
|
$calcite-color-status-danger-hover: #a82b1e;
|
|
31
33
|
$calcite-color-status-danger-press: #7c1d13;
|
|
32
|
-
$calcite-color-inverse: #
|
|
34
|
+
$calcite-color-inverse: #363636;
|
|
33
35
|
$calcite-color-inverse-hover: #2b2b2b;
|
|
34
|
-
$calcite-color-inverse-press: #
|
|
35
|
-
$calcite-color-text-1: #
|
|
36
|
+
$calcite-color-inverse-press: #212121;
|
|
37
|
+
$calcite-color-text-1: #141414;
|
|
36
38
|
$calcite-color-text-2: #4a4a4a;
|
|
37
|
-
$calcite-color-text-3: #
|
|
39
|
+
$calcite-color-text-3: #6b6b6b;
|
|
38
40
|
$calcite-color-text-inverse: #ffffff;
|
|
39
41
|
$calcite-color-text-link: #00619b;
|
|
40
|
-
$calcite-color-border-1: #
|
|
42
|
+
$calcite-color-border-1: #c9c9c9;
|
|
41
43
|
$calcite-color-border-2: #d4d4d4;
|
|
42
|
-
$calcite-color-border-3: #
|
|
44
|
+
$calcite-color-border-3: #dedede;
|
|
43
45
|
$calcite-color-border-input: #949494;
|
|
44
46
|
$calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
|
|
45
47
|
$calcite-color-border-white: #ffffff;
|
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.1",
|
|
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": "67b869e28a4b9ed11656bcd364c9e9038d015c4e"
|
|
46
46
|
}
|