@salt-ds/theme 1.7.0 → 1.8.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/css/theme.css +42 -35
- package/index.css +42 -35
- package/package.json +1 -1
package/css/theme.css
CHANGED
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
--salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
16
16
|
--salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
17
17
|
--salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
18
|
-
--salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
19
|
-
--salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
20
|
-
--salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
21
|
-
--salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
18
|
+
--salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
19
|
+
--salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
20
|
+
--salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
21
|
+
--salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
22
22
|
--salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
23
23
|
--salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
24
24
|
--salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
@@ -370,63 +370,41 @@
|
|
|
370
370
|
}
|
|
371
371
|
|
|
372
372
|
/* css/foundations/size.css */
|
|
373
|
-
.salt-density-touch,
|
|
374
|
-
.salt-density-low,
|
|
375
|
-
.salt-density-medium,
|
|
376
373
|
.salt-density-high {
|
|
377
|
-
--salt-size-basis-unit: 4px;
|
|
378
|
-
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
379
|
-
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
380
|
-
--salt-size-separator-strokeWidth: 1px;
|
|
381
|
-
--salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
|
|
382
|
-
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
383
|
-
--salt-size-sharktooth-height: 5px;
|
|
384
|
-
--salt-size-sharktooth-width: 10px;
|
|
385
|
-
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
386
|
-
}
|
|
387
|
-
.salt-density-high {
|
|
388
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
|
|
389
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
|
|
390
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
|
|
391
374
|
--salt-size-adornment: 6px;
|
|
392
375
|
--salt-size-bar: 2px;
|
|
393
376
|
--salt-size-base: 20px;
|
|
394
377
|
--salt-size-border: 1px;
|
|
395
|
-
--salt-size-selectable: 12px;
|
|
396
378
|
--salt-size-icon: 12px;
|
|
379
|
+
--salt-size-indicator: 1px;
|
|
380
|
+
--salt-size-selectable: 12px;
|
|
397
381
|
}
|
|
398
382
|
.salt-density-medium {
|
|
399
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
|
|
400
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
|
|
401
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
|
|
402
383
|
--salt-size-adornment: 8px;
|
|
403
384
|
--salt-size-bar: 4px;
|
|
404
385
|
--salt-size-base: 28px;
|
|
405
386
|
--salt-size-border: 1px;
|
|
406
|
-
--salt-size-selectable: 14px;
|
|
407
387
|
--salt-size-icon: 12px;
|
|
388
|
+
--salt-size-indicator: 2px;
|
|
389
|
+
--salt-size-selectable: 14px;
|
|
408
390
|
}
|
|
409
391
|
.salt-density-low {
|
|
410
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
|
|
411
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
|
|
412
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
|
|
413
392
|
--salt-size-adornment: 10px;
|
|
414
393
|
--salt-size-bar: 6px;
|
|
415
394
|
--salt-size-base: 36px;
|
|
416
395
|
--salt-size-border: 1px;
|
|
417
|
-
--salt-size-selectable: 16px;
|
|
418
396
|
--salt-size-icon: 14px;
|
|
397
|
+
--salt-size-indicator: 3px;
|
|
398
|
+
--salt-size-selectable: 16px;
|
|
419
399
|
}
|
|
420
400
|
.salt-density-touch {
|
|
421
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
|
|
422
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
|
|
423
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
|
|
424
401
|
--salt-size-adornment: 12px;
|
|
425
402
|
--salt-size-bar: 8px;
|
|
426
403
|
--salt-size-base: 44px;
|
|
427
404
|
--salt-size-border: 1px;
|
|
428
|
-
--salt-size-selectable: 18px;
|
|
429
405
|
--salt-size-icon: 16px;
|
|
406
|
+
--salt-size-indicator: 4px;
|
|
407
|
+
--salt-size-selectable: 18px;
|
|
430
408
|
}
|
|
431
409
|
|
|
432
410
|
/* css/foundations/spacing.css */
|
|
@@ -476,7 +454,6 @@
|
|
|
476
454
|
.salt-density-high {
|
|
477
455
|
--salt-zIndex-default: 1;
|
|
478
456
|
--salt-zIndex-popout: 1000;
|
|
479
|
-
--salt-zIndex-docked: 1050;
|
|
480
457
|
--salt-zIndex-appHeader: 1100;
|
|
481
458
|
--salt-zIndex-drawer: 1200;
|
|
482
459
|
--salt-zIndex-modal: 1300;
|
|
@@ -1324,6 +1301,36 @@
|
|
|
1324
1301
|
--salt-size-divider-height: var(--salt-size-separator-height);
|
|
1325
1302
|
--salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
|
|
1326
1303
|
--salt-size-detail: var(--salt-size-compact);
|
|
1304
|
+
--salt-size-basis-unit: 4px;
|
|
1305
|
+
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
1306
|
+
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
1307
|
+
--salt-size-separator-strokeWidth: 1px;
|
|
1308
|
+
--salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
|
|
1309
|
+
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
1310
|
+
--salt-size-sharktooth-height: 5px;
|
|
1311
|
+
--salt-size-sharktooth-width: 10px;
|
|
1312
|
+
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
1313
|
+
--salt-zIndex-docked: 1050;
|
|
1314
|
+
}
|
|
1315
|
+
.salt-density-high {
|
|
1316
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
|
|
1317
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
|
|
1318
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
|
|
1319
|
+
}
|
|
1320
|
+
.salt-density-medium {
|
|
1321
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
|
|
1322
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
|
|
1323
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
|
|
1324
|
+
}
|
|
1325
|
+
.salt-density-low {
|
|
1326
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
|
|
1327
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
|
|
1328
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
|
|
1329
|
+
}
|
|
1330
|
+
.salt-density-touch {
|
|
1331
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
|
|
1332
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
|
|
1333
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
|
|
1327
1334
|
}
|
|
1328
1335
|
|
|
1329
1336
|
/* css/deprecated/palette.css */
|
package/index.css
CHANGED
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
--salt-animation-slide-in-left: slide-in-left var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
50
50
|
--salt-animation-slide-in-right: slide-in-right var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
51
51
|
--salt-animation-slide-in-bottom: slide-in-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
52
|
-
--salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
53
|
-
--salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
54
|
-
--salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
55
|
-
--salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
52
|
+
--salt-animation-slide-out-top: slide-out-top var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
53
|
+
--salt-animation-slide-out-left: slide-out-left var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
54
|
+
--salt-animation-slide-out-right: slide-out-right var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
55
|
+
--salt-animation-slide-out-bottom: slide-out-bottom var(--salt-animation-duration) var(--salt-animation-timing-function) both;
|
|
56
56
|
--salt-animation-fade-in-back: fade-in-back var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
57
57
|
--salt-animation-fade-in-forward: fade-in-forward var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
58
58
|
--salt-animation-fade-in-center: fade-in-center var(--salt-animation-duration) var(--salt-animation-timing-function);
|
|
@@ -404,63 +404,41 @@
|
|
|
404
404
|
}
|
|
405
405
|
|
|
406
406
|
/* css/foundations/size.css */
|
|
407
|
-
.salt-density-touch,
|
|
408
|
-
.salt-density-low,
|
|
409
|
-
.salt-density-medium,
|
|
410
407
|
.salt-density-high {
|
|
411
|
-
--salt-size-basis-unit: 4px;
|
|
412
|
-
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
413
|
-
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
414
|
-
--salt-size-separator-strokeWidth: 1px;
|
|
415
|
-
--salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
|
|
416
|
-
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
417
|
-
--salt-size-sharktooth-height: 5px;
|
|
418
|
-
--salt-size-sharktooth-width: 10px;
|
|
419
|
-
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
420
|
-
}
|
|
421
|
-
.salt-density-high {
|
|
422
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
|
|
423
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
|
|
424
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
|
|
425
408
|
--salt-size-adornment: 6px;
|
|
426
409
|
--salt-size-bar: 2px;
|
|
427
410
|
--salt-size-base: 20px;
|
|
428
411
|
--salt-size-border: 1px;
|
|
429
|
-
--salt-size-selectable: 12px;
|
|
430
412
|
--salt-size-icon: 12px;
|
|
413
|
+
--salt-size-indicator: 1px;
|
|
414
|
+
--salt-size-selectable: 12px;
|
|
431
415
|
}
|
|
432
416
|
.salt-density-medium {
|
|
433
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
|
|
434
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
|
|
435
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
|
|
436
417
|
--salt-size-adornment: 8px;
|
|
437
418
|
--salt-size-bar: 4px;
|
|
438
419
|
--salt-size-base: 28px;
|
|
439
420
|
--salt-size-border: 1px;
|
|
440
|
-
--salt-size-selectable: 14px;
|
|
441
421
|
--salt-size-icon: 12px;
|
|
422
|
+
--salt-size-indicator: 2px;
|
|
423
|
+
--salt-size-selectable: 14px;
|
|
442
424
|
}
|
|
443
425
|
.salt-density-low {
|
|
444
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
|
|
445
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
|
|
446
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
|
|
447
426
|
--salt-size-adornment: 10px;
|
|
448
427
|
--salt-size-bar: 6px;
|
|
449
428
|
--salt-size-base: 36px;
|
|
450
429
|
--salt-size-border: 1px;
|
|
451
|
-
--salt-size-selectable: 16px;
|
|
452
430
|
--salt-size-icon: 14px;
|
|
431
|
+
--salt-size-indicator: 3px;
|
|
432
|
+
--salt-size-selectable: 16px;
|
|
453
433
|
}
|
|
454
434
|
.salt-density-touch {
|
|
455
|
-
--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
|
|
456
|
-
--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
|
|
457
|
-
--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
|
|
458
435
|
--salt-size-adornment: 12px;
|
|
459
436
|
--salt-size-bar: 8px;
|
|
460
437
|
--salt-size-base: 44px;
|
|
461
438
|
--salt-size-border: 1px;
|
|
462
|
-
--salt-size-selectable: 18px;
|
|
463
439
|
--salt-size-icon: 16px;
|
|
440
|
+
--salt-size-indicator: 4px;
|
|
441
|
+
--salt-size-selectable: 18px;
|
|
464
442
|
}
|
|
465
443
|
|
|
466
444
|
/* css/foundations/spacing.css */
|
|
@@ -510,7 +488,6 @@
|
|
|
510
488
|
.salt-density-high {
|
|
511
489
|
--salt-zIndex-default: 1;
|
|
512
490
|
--salt-zIndex-popout: 1000;
|
|
513
|
-
--salt-zIndex-docked: 1050;
|
|
514
491
|
--salt-zIndex-appHeader: 1100;
|
|
515
492
|
--salt-zIndex-drawer: 1200;
|
|
516
493
|
--salt-zIndex-modal: 1300;
|
|
@@ -1358,6 +1335,36 @@
|
|
|
1358
1335
|
--salt-size-divider-height: var(--salt-size-separator-height);
|
|
1359
1336
|
--salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
|
|
1360
1337
|
--salt-size-detail: var(--salt-size-compact);
|
|
1338
|
+
--salt-size-basis-unit: 4px;
|
|
1339
|
+
--salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
|
|
1340
|
+
--salt-size-container-spacing: calc(3 * var(--salt-size-unit));
|
|
1341
|
+
--salt-size-separator-strokeWidth: 1px;
|
|
1342
|
+
--salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
|
|
1343
|
+
--salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
|
|
1344
|
+
--salt-size-sharktooth-height: 5px;
|
|
1345
|
+
--salt-size-sharktooth-width: 10px;
|
|
1346
|
+
--salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
|
|
1347
|
+
--salt-zIndex-docked: 1050;
|
|
1348
|
+
}
|
|
1349
|
+
.salt-density-high {
|
|
1350
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
|
|
1351
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
|
|
1352
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
|
|
1353
|
+
}
|
|
1354
|
+
.salt-density-medium {
|
|
1355
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
|
|
1356
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
|
|
1357
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
|
|
1358
|
+
}
|
|
1359
|
+
.salt-density-low {
|
|
1360
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
|
|
1361
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
|
|
1362
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
|
|
1363
|
+
}
|
|
1364
|
+
.salt-density-touch {
|
|
1365
|
+
--salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
|
|
1366
|
+
--salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
|
|
1367
|
+
--salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
|
|
1361
1368
|
}
|
|
1362
1369
|
|
|
1363
1370
|
/* css/deprecated/palette.css */
|