@salt-ds/theme 0.0.0-snapshot-20230504082840 → 0.0.0-snapshot-20230623164123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/css/global.css +11 -0
  2. package/css/theme.css +65 -13
  3. package/index.css +76 -13
  4. package/package.json +3 -2
package/css/global.css CHANGED
@@ -20,3 +20,14 @@
20
20
  *::after {
21
21
  box-sizing: border-box;
22
22
  }
23
+ .salt-visuallyHidden {
24
+ position: absolute;
25
+ height: 1px;
26
+ width: 1px;
27
+ padding: 0;
28
+ margin: -1px;
29
+ overflow: hidden;
30
+ clip: rect(0, 0, 0, 0);
31
+ white-space: nowrap;
32
+ border-width: 0;
33
+ }
package/css/theme.css CHANGED
@@ -253,18 +253,18 @@
253
253
 
254
254
  /* css/foundations/delay.css */
255
255
  .salt-theme {
256
- --salt-delay-instant: 100;
257
- --salt-delay-perceptible: 300;
258
- --salt-delay-notable: 1000;
259
- --salt-delay-cutoff: 10000;
256
+ --salt-delay-instant: 100ms;
257
+ --salt-delay-perceptible: 300ms;
258
+ --salt-delay-notable: 1000ms;
259
+ --salt-delay-cutoff: 10000ms;
260
260
  }
261
261
 
262
262
  /* css/foundations/duration.css */
263
263
  .salt-theme {
264
- --salt-duration-instant: 100;
265
- --salt-duration-perceptible: 300;
266
- --salt-duration-notable: 1000;
267
- --salt-duration-cutoff: 10000;
264
+ --salt-duration-instant: 100ms;
265
+ --salt-duration-perceptible: 300ms;
266
+ --salt-duration-notable: 1000ms;
267
+ --salt-duration-cutoff: 10000ms;
268
268
  }
269
269
 
270
270
  /* css/foundations/fade.css */
@@ -300,6 +300,7 @@
300
300
  --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
301
301
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
302
302
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
303
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-background));
303
304
  --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
304
305
  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
305
306
  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
@@ -390,7 +391,6 @@
390
391
  .salt-density-high {
391
392
  --salt-size-basis-unit: 4px;
392
393
  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
393
- --salt-size-border: 1px;
394
394
  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
395
395
  --salt-size-separator-strokeWidth: 1px;
396
396
  --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
@@ -409,32 +409,80 @@
409
409
  .salt-density-high {
410
410
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
411
411
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
412
- --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
413
412
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
413
+ --salt-size-adornment: 6px;
414
+ --salt-size-bar: 2px;
415
+ --salt-size-base: 20px;
416
+ --salt-size-border: 1px;
417
+ --salt-size-selectable: 12px;
418
+ --salt-size-icon: 12px;
414
419
  --salt-size-detail: var(--salt-size-compact);
415
420
  }
416
421
  .salt-density-medium {
417
422
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
418
423
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
419
- --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
420
424
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
425
+ --salt-size-adornment: 8px;
426
+ --salt-size-bar: 4px;
427
+ --salt-size-base: 28px;
428
+ --salt-size-border: 1px;
429
+ --salt-size-selectable: 14px;
430
+ --salt-size-icon: 12px;
421
431
  --salt-size-detail: var(--salt-size-compact);
422
432
  }
423
433
  .salt-density-low {
424
434
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
425
435
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
426
- --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
427
436
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
437
+ --salt-size-adornment: 10px;
438
+ --salt-size-bar: 6px;
439
+ --salt-size-base: 36px;
440
+ --salt-size-border: 1px;
441
+ --salt-size-selectable: 16px;
442
+ --salt-size-icon: 14px;
428
443
  --salt-size-detail: var(--salt-size-compact);
429
444
  }
430
445
  .salt-density-touch {
431
446
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
432
447
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
433
- --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
434
448
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
449
+ --salt-size-adornment: 12px;
450
+ --salt-size-bar: 8px;
451
+ --salt-size-base: 44px;
452
+ --salt-size-border: 1px;
453
+ --salt-size-selectable: 18px;
454
+ --salt-size-icon: 16px;
435
455
  --salt-size-detail: var(--salt-size-compact);
436
456
  }
437
457
 
458
+ /* css/foundations/spacing.css */
459
+ .salt-density-touch {
460
+ --salt-spacing-100: 16px;
461
+ }
462
+ .salt-density-low {
463
+ --salt-spacing-100: 12px;
464
+ }
465
+ .salt-density-medium {
466
+ --salt-spacing-100: 8px;
467
+ }
468
+ .salt-density-high {
469
+ --salt-spacing-100: 4px;
470
+ }
471
+ .salt-density-touch,
472
+ .salt-density-low,
473
+ .salt-density-medium,
474
+ .salt-density-high {
475
+ --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
476
+ --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
477
+ --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
478
+ --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
479
+ --salt-spacing-200: calc(2 * var(--salt-spacing-100));
480
+ --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
481
+ --salt-spacing-300: calc(3 * var(--salt-spacing-100));
482
+ --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
483
+ --salt-spacing-400: calc(4 * var(--salt-spacing-100));
484
+ }
485
+
438
486
  /* css/foundations/typography.css */
439
487
  .salt-theme {
440
488
  --salt-typography-fontFamily: "Open Sans";
@@ -494,6 +542,7 @@
494
542
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
495
543
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
496
544
  --salt-palette-interact-background-disabled: transparent;
545
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
497
546
  --salt-palette-interact-border: var(--salt-color-gray-200);
498
547
  --salt-palette-interact-border-active: var(--salt-color-blue-600);
499
548
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
@@ -616,6 +665,7 @@
616
665
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
617
666
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
618
667
  --salt-palette-interact-background-disabled: transparent;
668
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
619
669
  --salt-palette-interact-border: var(--salt-color-gray-90);
620
670
  --salt-palette-interact-border-active: var(--salt-color-blue-100);
621
671
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
@@ -989,6 +1039,7 @@
989
1039
  --salt-selectable-cursor-selected: pointer;
990
1040
  --salt-selectable-cursor-blurSelected: pointer;
991
1041
  --salt-selectable-cursor-disabled: not-allowed;
1042
+ --salt-selectable-cursor-readonly: not-allowed;
992
1043
  --salt-selectable-borderStyle: solid;
993
1044
  --salt-selectable-borderStyle-hover: solid;
994
1045
  --salt-selectable-borderStyle-selected: solid;
@@ -1008,6 +1059,7 @@
1008
1059
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
1009
1060
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1010
1061
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1062
+ --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1011
1063
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1012
1064
  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1013
1065
  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
package/index.css CHANGED
@@ -20,6 +20,17 @@
20
20
  *::after {
21
21
  box-sizing: border-box;
22
22
  }
23
+ .salt-visuallyHidden {
24
+ position: absolute;
25
+ height: 1px;
26
+ width: 1px;
27
+ padding: 0;
28
+ margin: -1px;
29
+ overflow: hidden;
30
+ clip: rect(0, 0, 0, 0);
31
+ white-space: nowrap;
32
+ border-width: 0;
33
+ }
23
34
 
24
35
  /* css/foundations/animation.css */
25
36
  .salt-density-touch,
@@ -276,18 +287,18 @@
276
287
 
277
288
  /* css/foundations/delay.css */
278
289
  .salt-theme {
279
- --salt-delay-instant: 100;
280
- --salt-delay-perceptible: 300;
281
- --salt-delay-notable: 1000;
282
- --salt-delay-cutoff: 10000;
290
+ --salt-delay-instant: 100ms;
291
+ --salt-delay-perceptible: 300ms;
292
+ --salt-delay-notable: 1000ms;
293
+ --salt-delay-cutoff: 10000ms;
283
294
  }
284
295
 
285
296
  /* css/foundations/duration.css */
286
297
  .salt-theme {
287
- --salt-duration-instant: 100;
288
- --salt-duration-perceptible: 300;
289
- --salt-duration-notable: 1000;
290
- --salt-duration-cutoff: 10000;
298
+ --salt-duration-instant: 100ms;
299
+ --salt-duration-perceptible: 300ms;
300
+ --salt-duration-notable: 1000ms;
301
+ --salt-duration-cutoff: 10000ms;
291
302
  }
292
303
 
293
304
  /* css/foundations/fade.css */
@@ -323,6 +334,7 @@
323
334
  --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
324
335
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
325
336
  --salt-color-gray-200-fade-border-readonly: rgba(97, 101, 110, var(--salt-palette-opacity-border-readonly));
337
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-background));
326
338
  --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
327
339
  --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
328
340
  --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
@@ -413,7 +425,6 @@
413
425
  .salt-density-high {
414
426
  --salt-size-basis-unit: 4px;
415
427
  --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
416
- --salt-size-border: 1px;
417
428
  --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
418
429
  --salt-size-separator-strokeWidth: 1px;
419
430
  --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
@@ -432,32 +443,80 @@
432
443
  .salt-density-high {
433
444
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
434
445
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
435
- --salt-size-base: calc(var(--salt-size-basis-unit) * 5);
436
446
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
447
+ --salt-size-adornment: 6px;
448
+ --salt-size-bar: 2px;
449
+ --salt-size-base: 20px;
450
+ --salt-size-border: 1px;
451
+ --salt-size-selectable: 12px;
452
+ --salt-size-icon: 12px;
437
453
  --salt-size-detail: var(--salt-size-compact);
438
454
  }
439
455
  .salt-density-medium {
440
456
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
441
457
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
442
- --salt-size-base: calc(var(--salt-size-basis-unit) * 7);
443
458
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
459
+ --salt-size-adornment: 8px;
460
+ --salt-size-bar: 4px;
461
+ --salt-size-base: 28px;
462
+ --salt-size-border: 1px;
463
+ --salt-size-selectable: 14px;
464
+ --salt-size-icon: 12px;
444
465
  --salt-size-detail: var(--salt-size-compact);
445
466
  }
446
467
  .salt-density-low {
447
468
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
448
469
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
449
- --salt-size-base: calc(var(--salt-size-basis-unit) * 9);
450
470
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
471
+ --salt-size-adornment: 10px;
472
+ --salt-size-bar: 6px;
473
+ --salt-size-base: 36px;
474
+ --salt-size-border: 1px;
475
+ --salt-size-selectable: 16px;
476
+ --salt-size-icon: 14px;
451
477
  --salt-size-detail: var(--salt-size-compact);
452
478
  }
453
479
  .salt-density-touch {
454
480
  --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
455
481
  --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
456
- --salt-size-base: calc(var(--salt-size-basis-unit) * 11);
457
482
  --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
483
+ --salt-size-adornment: 12px;
484
+ --salt-size-bar: 8px;
485
+ --salt-size-base: 44px;
486
+ --salt-size-border: 1px;
487
+ --salt-size-selectable: 18px;
488
+ --salt-size-icon: 16px;
458
489
  --salt-size-detail: var(--salt-size-compact);
459
490
  }
460
491
 
492
+ /* css/foundations/spacing.css */
493
+ .salt-density-touch {
494
+ --salt-spacing-100: 16px;
495
+ }
496
+ .salt-density-low {
497
+ --salt-spacing-100: 12px;
498
+ }
499
+ .salt-density-medium {
500
+ --salt-spacing-100: 8px;
501
+ }
502
+ .salt-density-high {
503
+ --salt-spacing-100: 4px;
504
+ }
505
+ .salt-density-touch,
506
+ .salt-density-low,
507
+ .salt-density-medium,
508
+ .salt-density-high {
509
+ --salt-spacing-25: calc(0.25 * var(--salt-spacing-100));
510
+ --salt-spacing-50: calc(0.5 * var(--salt-spacing-100));
511
+ --salt-spacing-75: calc(0.75 * var(--salt-spacing-100));
512
+ --salt-spacing-150: calc(1.5 * var(--salt-spacing-100));
513
+ --salt-spacing-200: calc(2 * var(--salt-spacing-100));
514
+ --salt-spacing-250: calc(2.5 * var(--salt-spacing-100));
515
+ --salt-spacing-300: calc(3 * var(--salt-spacing-100));
516
+ --salt-spacing-350: calc(3.5 * var(--salt-spacing-100));
517
+ --salt-spacing-400: calc(4 * var(--salt-spacing-100));
518
+ }
519
+
461
520
  /* css/foundations/typography.css */
462
521
  .salt-theme {
463
522
  --salt-typography-fontFamily: "Open Sans";
@@ -517,6 +576,7 @@
517
576
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
518
577
  --salt-palette-interact-background-active: var(--salt-color-blue-30);
519
578
  --salt-palette-interact-background-disabled: transparent;
579
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
520
580
  --salt-palette-interact-border: var(--salt-color-gray-200);
521
581
  --salt-palette-interact-border-active: var(--salt-color-blue-600);
522
582
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-600-fade-fill);
@@ -639,6 +699,7 @@
639
699
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
640
700
  --salt-palette-interact-background-hover: var(--salt-color-blue-800);
641
701
  --salt-palette-interact-background-disabled: transparent;
702
+ --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-700-fade-background);
642
703
  --salt-palette-interact-border: var(--salt-color-gray-90);
643
704
  --salt-palette-interact-border-active: var(--salt-color-blue-100);
644
705
  --salt-palette-interact-border-activeDisabled: var(--salt-color-blue-100-fade-fill);
@@ -1012,6 +1073,7 @@
1012
1073
  --salt-selectable-cursor-selected: pointer;
1013
1074
  --salt-selectable-cursor-blurSelected: pointer;
1014
1075
  --salt-selectable-cursor-disabled: not-allowed;
1076
+ --salt-selectable-cursor-readonly: not-allowed;
1015
1077
  --salt-selectable-borderStyle: solid;
1016
1078
  --salt-selectable-borderStyle-hover: solid;
1017
1079
  --salt-selectable-borderStyle-selected: solid;
@@ -1031,6 +1093,7 @@
1031
1093
  --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
1032
1094
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1033
1095
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1096
+ --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1034
1097
  --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1035
1098
  --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1036
1099
  --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "0.0.0-snapshot-20230504082840",
3
+ "version": "0.0.0-snapshot-20230623164123",
4
4
  "license": "Apache-2.0",
5
5
  "style": "index.css",
6
6
  "files": [
@@ -11,6 +11,7 @@
11
11
  "build": "yarn node ./scripts/build.mjs"
12
12
  },
13
13
  "publishConfig": {
14
- "directory": "../../dist/salt-ds-theme"
14
+ "directory": "../../dist/salt-ds-theme",
15
+ "provenance": true
15
16
  }
16
17
  }