@salt-ds/theme 0.0.0-snapshot-20230705144029 → 0.0.0-snapshot-20231213150517

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 +2 -2
  2. package/css/theme.css +611 -480
  3. package/index.css +613 -482
  4. package/package.json +10 -1
package/index.css CHANGED
@@ -1,13 +1,13 @@
1
1
  /* css/global.css */
2
2
  .salt-theme {
3
- color: var(--salt-text-primary-foreground);
3
+ color: var(--salt-content-primary-foreground);
4
4
  font-family: var(--salt-typography-fontFamily);
5
5
  font-size: var(--salt-text-fontSize);
6
6
  letter-spacing: var(--salt-text-letterSpacing);
7
7
  line-height: var(--salt-text-lineHeight);
8
8
  }
9
9
  ::selection {
10
- background: var(--salt-text-background-selected);
10
+ background: var(--salt-content-foreground-highlight);
11
11
  }
12
12
  .salt-theme[data-mode=light] {
13
13
  color-scheme: light;
@@ -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);
@@ -285,17 +285,9 @@
285
285
  --salt-color-gray-900: rgb(22, 22, 22);
286
286
  }
287
287
 
288
- /* css/foundations/delay.css */
289
- .salt-theme {
290
- --salt-delay-instant: 100ms;
291
- --salt-delay-perceptible: 300ms;
292
- --salt-delay-notable: 1000ms;
293
- --salt-delay-cutoff: 10000ms;
294
- }
295
-
296
288
  /* css/foundations/duration.css */
297
289
  .salt-theme {
298
- --salt-duration-instant: 100ms;
290
+ --salt-duration-instant: 0ms;
299
291
  --salt-duration-perceptible: 300ms;
300
292
  --salt-duration-notable: 1000ms;
301
293
  --salt-duration-cutoff: 10000ms;
@@ -303,190 +295,145 @@
303
295
 
304
296
  /* css/foundations/fade.css */
305
297
  .salt-theme {
306
- --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-foreground));
307
- --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-foreground));
308
- --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-foreground));
309
- --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-foreground));
310
- --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-foreground));
311
- --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-foreground));
312
- --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-foreground));
313
- --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-foreground));
314
- --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-foreground));
315
- --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-foreground));
316
- --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-foreground));
317
- --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
318
- --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
319
- --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-foreground));
320
- --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-foreground));
321
- --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-foreground));
322
- --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-foreground));
323
- --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-border));
324
- --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-border));
325
- --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-border));
326
- --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-border));
327
- --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-border));
328
- --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-border));
329
- --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-border));
330
- --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-border));
331
- --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-border));
332
- --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-border));
333
- --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-border));
334
- --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-border));
298
+ --salt-color-blue-100-fade-foreground: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
299
+ --salt-color-blue-500-fade-foreground: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
300
+ --salt-color-blue-600-fade-foreground: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
301
+ --salt-color-gray-200-fade-foreground: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
302
+ --salt-color-gray-70-fade-foreground: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
303
+ --salt-color-gray-90-fade-foreground: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
304
+ --salt-color-gray-900-fade-foreground: rgba(22, 22, 22, var(--salt-palette-opacity-disabled));
305
+ --salt-color-green-300-fade-foreground: rgba(60, 171, 96, var(--salt-palette-opacity-disabled));
306
+ --salt-color-green-400-fade-foreground: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
307
+ --salt-color-green-500-fade-foreground: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
308
+ --salt-color-green-700-fade-foreground: rgba(12, 93, 46, var(--salt-palette-opacity-disabled));
309
+ --salt-color-red-300-fade-foreground: rgba(255, 89, 66, var(--salt-palette-opacity-disabled));
310
+ --salt-color-red-500-fade-foreground: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
311
+ --salt-color-red-700-fade-foreground: rgba(166, 21, 11, var(--salt-palette-opacity-disabled));
312
+ --salt-color-white-fade-foreground: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
313
+ --salt-color-blue-500-fade-border: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
314
+ --salt-color-gray-60-fade-border: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
315
+ --salt-color-gray-90-fade-border: rgba(132, 135, 142, var(--salt-palette-opacity-disabled));
316
+ --salt-color-gray-200-fade-border: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
317
+ --salt-color-gray-300-fade-border: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
318
+ --salt-color-green-400-fade-border: rgba(48, 156, 90, var(--salt-palette-opacity-disabled));
319
+ --salt-color-green-500-fade-border: rgba(36, 135, 75, var(--salt-palette-opacity-disabled));
320
+ --salt-color-orange-400-fade-border: rgba(238, 133, 43, var(--salt-palette-opacity-disabled));
321
+ --salt-color-orange-500-fade-border: rgba(234, 115, 25, var(--salt-palette-opacity-disabled));
322
+ --salt-color-orange-600-fade-border: rgba(224, 101, 25, var(--salt-palette-opacity-disabled));
323
+ --salt-color-orange-700-fade-border: rgba(214, 85, 19, var(--salt-palette-opacity-disabled));
324
+ --salt-color-red-500-fade-border: rgba(227, 43, 22, var(--salt-palette-opacity-disabled));
335
325
  --salt-color-gray-90-fade-border-readonly: rgba(132, 135, 142, var(--salt-palette-opacity-border-readonly));
336
326
  --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));
338
- --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-background));
339
- --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-background));
340
- --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-background));
341
- --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-background));
342
- --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-background));
343
- --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-background));
344
- --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-background));
345
- --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-background));
346
- --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-background));
347
- --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-background));
348
- --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
349
- --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
350
- --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-background));
327
+ --salt-color-blue-30-fade-background: rgba(164, 213, 244, var(--salt-palette-opacity-disabled));
328
+ --salt-color-blue-500-fade-background: rgba(38, 112, 169, var(--salt-palette-opacity-disabled));
329
+ --salt-color-blue-600-fade-background: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
330
+ --salt-color-blue-700-fade-background: rgba(0, 71, 123, var(--salt-palette-opacity-disabled));
331
+ --salt-color-gray-20-fade-background: rgba(234, 237, 239, var(--salt-palette-opacity-disabled));
332
+ --salt-color-gray-60-fade-background: rgba(197, 201, 208, var(--salt-palette-opacity-disabled));
333
+ --salt-color-gray-70-fade-background: rgba(180, 183, 190, var(--salt-palette-opacity-disabled));
334
+ --salt-color-gray-200-fade-background: rgba(97, 101, 110, var(--salt-palette-opacity-disabled));
335
+ --salt-color-gray-300-fade-background: rgba(76, 80, 91, var(--salt-palette-opacity-disabled));
336
+ --salt-color-gray-600-fade-background: rgba(47, 49, 54, var(--salt-palette-opacity-disabled));
337
+ --salt-color-gray-800-fade-background: rgba(36, 37, 38, var(--salt-palette-opacity-disabled));
338
+ --salt-color-white-fade-background: rgba(255, 255, 255, var(--salt-palette-opacity-disabled));
351
339
  --salt-color-white-fade-background-readonly: rgba(255, 255, 255, var(--salt-palette-opacity-background-readonly));
352
340
  --salt-color-gray-20-fade-background-readonly: rgba(234, 237, 239, var(--salt-palette-opacity-background-readonly));
353
341
  --salt-color-gray-600-fade-background-readonly: rgba(47, 49, 54, var(--salt-palette-opacity-background-readonly));
354
342
  --salt-color-gray-800-fade-background-readonly: rgba(36, 37, 38, var(--salt-palette-opacity-background-readonly));
355
343
  --salt-color-black-fade-backdrop: rgba(36, 37, 38, var(--salt-palette-opacity-backdrop));
356
- --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-fill));
357
- --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
358
- --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
359
- --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-fill));
344
+ --salt-color-blue-100-fade-fill: rgba(100, 177, 228, var(--salt-palette-opacity-disabled));
345
+ --salt-color-blue-600-fade-fill: rgba(21, 92, 147, var(--salt-palette-opacity-disabled));
360
346
  --salt-color-white-fade-separatorOpacity-primary: rgba(255, 255, 255, var(--salt-palette-opacity-primary-border));
361
347
  --salt-color-white-fade-separatorOpacity-secondary: rgba(255, 255, 255, var(--salt-palette-opacity-secondary-border));
362
348
  --salt-color-white-fade-separatorOpacity-tertiary: rgba(255, 255, 255, var(--salt-palette-opacity-tertiary-border));
363
349
  --salt-color-black-fade-separatorOpacity-primary: rgba(0, 0, 0, var(--salt-palette-opacity-primary-border));
364
350
  --salt-color-black-fade-separatorOpacity-secondary: rgba(0, 0, 0, var(--salt-palette-opacity-secondary-border));
365
351
  --salt-color-black-fade-separatorOpacity-tertiary: rgba(0, 0, 0, var(--salt-palette-opacity-tertiary-border));
366
- }
367
-
368
- /* css/foundations/icon.css */
369
- .salt-density-touch {
370
- --salt-icon-size-base: 16px;
371
- --salt-icon-size-status-adornment: 12px;
372
- }
373
- .salt-density-low {
374
- --salt-icon-size-base: 14px;
375
- --salt-icon-size-status-adornment: 10px;
376
- }
377
- .salt-density-medium {
378
- --salt-icon-size-base: 12px;
379
- --salt-icon-size-status-adornment: 8px;
380
- }
381
- .salt-density-high {
382
- --salt-icon-size-base: 10px;
383
- --salt-icon-size-status-adornment: 6px;
384
- }
385
- .salt-theme {
386
- --salt-size-icon-base: var(--salt-icon-size-base);
352
+ --salt-color-black-fade-background-hover: rgba(0, 0, 0, var(--salt-opacity-8));
353
+ --salt-color-white-fade-background-hover: rgba(255, 255, 255, var(--salt-opacity-8));
387
354
  }
388
355
 
389
356
  /* css/foundations/opacity.css */
390
357
  .salt-theme {
391
- --salt-opacity-1: 0.15;
392
- --salt-opacity-2: 0.25;
393
- --salt-opacity-3: 0.4;
394
- --salt-opacity-4: 0.7;
358
+ --salt-opacity-0: 0;
359
+ --salt-opacity-8: 0.08;
360
+ --salt-opacity-15: 0.15;
361
+ --salt-opacity-25: 0.25;
362
+ --salt-opacity-40: 0.4;
363
+ --salt-opacity-70: 0.7;
395
364
  }
396
365
 
397
366
  /* css/foundations/shadow.css */
398
367
  .salt-theme[data-mode=light] {
399
- --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
400
- --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
401
- --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
402
- --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
403
- --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
368
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.1);
369
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.1);
370
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.15);
371
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.2);
372
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.3);
404
373
  }
405
374
  .salt-theme[data-mode=dark] {
406
- --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
407
- --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
408
- --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
409
- --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
410
- --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
375
+ --salt-shadow-100-color: rgba(0, 0, 0, 0.5);
376
+ --salt-shadow-200-color: rgba(0, 0, 0, 0.5);
377
+ --salt-shadow-300-color: rgba(0, 0, 0, 0.55);
378
+ --salt-shadow-400-color: rgba(0, 0, 0, 0.55);
379
+ --salt-shadow-500-color: rgba(0, 0, 0, 0.65);
411
380
  }
412
381
  .salt-theme {
413
- --salt-shadow-0: none;
414
- --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
415
- --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
416
- --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
417
- --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
418
- --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
382
+ --salt-shadow-100: 0 1px 3px 0 var(--salt-shadow-100-color);
383
+ --salt-shadow-200: 0 2px 4px 0 var(--salt-shadow-200-color);
384
+ --salt-shadow-300: 0 4px 8px 0 var(--salt-shadow-300-color);
385
+ --salt-shadow-400: 0 6px 10px 0 var(--salt-shadow-400-color);
386
+ --salt-shadow-500: 0 12px 40px 0 var(--salt-shadow-500-color);
419
387
  }
420
388
 
421
389
  /* css/foundations/size.css */
422
- .salt-density-touch,
423
- .salt-density-low,
424
- .salt-density-medium,
425
- .salt-density-high {
426
- --salt-size-basis-unit: 4px;
427
- --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
428
- --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
429
- --salt-size-separator-strokeWidth: 1px;
430
- --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
431
- --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
432
- --salt-size-sharktooth-height: 5px;
433
- --salt-size-sharktooth-width: 10px;
434
- --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
435
- --salt-size-selection: var(--salt-size-selectable);
436
- --salt-size-brandBar: 4px;
437
- --salt-size-graphic-small: 12px;
438
- --salt-size-graphic-medium: 24px;
439
- --salt-size-graphic-large: 48px;
440
- --salt-size-divider-height: var(--salt-size-separator-height);
441
- --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
442
- }
443
390
  .salt-density-high {
444
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
445
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
446
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
447
391
  --salt-size-adornment: 6px;
448
392
  --salt-size-bar: 2px;
449
393
  --salt-size-base: 20px;
450
394
  --salt-size-border: 1px;
395
+ --salt-size-icon: 10px;
396
+ --salt-size-indicator: 1px;
451
397
  --salt-size-selectable: 12px;
452
- --salt-size-icon: 12px;
453
- --salt-size-detail: var(--salt-size-compact);
398
+ --salt-size-bar-strong: 4px;
399
+ --salt-size-bar-small: 2px;
400
+ --salt-size-border-strong: 2px;
454
401
  }
455
402
  .salt-density-medium {
456
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
457
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
458
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
459
403
  --salt-size-adornment: 8px;
460
404
  --salt-size-bar: 4px;
461
405
  --salt-size-base: 28px;
462
406
  --salt-size-border: 1px;
463
- --salt-size-selectable: 14px;
464
407
  --salt-size-icon: 12px;
465
- --salt-size-detail: var(--salt-size-compact);
408
+ --salt-size-indicator: 2px;
409
+ --salt-size-selectable: 14px;
410
+ --salt-size-bar-strong: 8px;
411
+ --salt-size-bar-small: 2px;
412
+ --salt-size-border-strong: 2px;
466
413
  }
467
414
  .salt-density-low {
468
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
469
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
470
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
471
415
  --salt-size-adornment: 10px;
472
416
  --salt-size-bar: 6px;
473
417
  --salt-size-base: 36px;
474
418
  --salt-size-border: 1px;
475
- --salt-size-selectable: 16px;
476
419
  --salt-size-icon: 14px;
477
- --salt-size-detail: var(--salt-size-compact);
420
+ --salt-size-indicator: 3px;
421
+ --salt-size-selectable: 16px;
422
+ --salt-size-bar-strong: 12px;
423
+ --salt-size-bar-small: 2px;
424
+ --salt-size-border-strong: 2px;
478
425
  }
479
426
  .salt-density-touch {
480
- --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
481
- --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
482
- --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
483
427
  --salt-size-adornment: 12px;
484
428
  --salt-size-bar: 8px;
485
429
  --salt-size-base: 44px;
486
430
  --salt-size-border: 1px;
487
- --salt-size-selectable: 18px;
488
431
  --salt-size-icon: 16px;
489
- --salt-size-detail: var(--salt-size-compact);
432
+ --salt-size-indicator: 4px;
433
+ --salt-size-selectable: 18px;
434
+ --salt-size-bar-strong: 16px;
435
+ --salt-size-bar-small: 2px;
436
+ --salt-size-border-strong: 2px;
490
437
  }
491
438
 
492
439
  /* css/foundations/spacing.css */
@@ -536,7 +483,6 @@
536
483
  .salt-density-high {
537
484
  --salt-zIndex-default: 1;
538
485
  --salt-zIndex-popout: 1000;
539
- --salt-zIndex-docked: 1050;
540
486
  --salt-zIndex-appHeader: 1100;
541
487
  --salt-zIndex-drawer: 1200;
542
488
  --salt-zIndex-modal: 1300;
@@ -546,31 +492,46 @@
546
492
  --salt-zIndex-flyover: 1500;
547
493
  }
548
494
 
549
- /* css/foundations/palette.css */
550
- .salt-theme {
551
- --salt-palette-opacity-background: var(--salt-opacity-3);
552
- --salt-palette-opacity-background-readonly: var(--salt-opacity-1);
553
- --salt-palette-opacity-border: var(--salt-opacity-3);
554
- --salt-palette-opacity-border-readonly: var(--salt-opacity-2);
555
- --salt-palette-opacity-fill: var(--salt-opacity-3);
556
- --salt-palette-opacity-foreground: var(--salt-opacity-4);
557
- --salt-palette-opacity-backdrop: var(--salt-opacity-4);
558
- --salt-palette-opacity-stroke: var(--salt-opacity-3);
559
- --salt-palette-opacity-primary-border: var(--salt-opacity-3);
560
- --salt-palette-opacity-secondary-border: var(--salt-opacity-2);
561
- --salt-palette-opacity-tertiary-border: var(--salt-opacity-1);
562
- --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
563
- --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
564
- --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
565
- --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
566
- }
495
+ /* css/palette/accent.css */
567
496
  .salt-theme[data-mode=light] {
568
497
  --salt-palette-accent-background: var(--salt-color-blue-500);
569
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
570
498
  --salt-palette-accent-border: var(--salt-color-blue-500);
571
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
572
499
  --salt-palette-accent-foreground: var(--salt-color-white);
573
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
500
+ }
501
+ .salt-theme[data-mode=dark] {
502
+ --salt-palette-accent-background: var(--salt-color-blue-500);
503
+ --salt-palette-accent-border: var(--salt-color-blue-500);
504
+ --salt-palette-accent-foreground: var(--salt-color-white);
505
+ }
506
+
507
+ /* css/palette/error.css */
508
+ .salt-theme[data-mode=light] {
509
+ --salt-palette-error-background: var(--salt-color-red-10);
510
+ --salt-palette-error-background-selected: var(--salt-color-red-20);
511
+ --salt-palette-error-border: var(--salt-color-red-500);
512
+ --salt-palette-error-foreground: var(--salt-color-red-500);
513
+ }
514
+ .salt-theme[data-mode=dark] {
515
+ --salt-palette-error-background: var(--salt-color-red-900);
516
+ --salt-palette-error-background-selected: var(--salt-color-red-900);
517
+ --salt-palette-error-border: var(--salt-color-red-500);
518
+ --salt-palette-error-foreground: var(--salt-color-red-500);
519
+ }
520
+
521
+ /* css/palette/info.css */
522
+ .salt-theme[data-mode=light] {
523
+ --salt-palette-info-background: var(--salt-color-blue-10);
524
+ --salt-palette-info-border: var(--salt-color-blue-500);
525
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
526
+ }
527
+ .salt-theme[data-mode=dark] {
528
+ --salt-palette-info-background: var(--salt-color-blue-900);
529
+ --salt-palette-info-border: var(--salt-color-blue-500);
530
+ --salt-palette-info-foreground: var(--salt-color-blue-500);
531
+ }
532
+
533
+ /* css/palette/interact.css */
534
+ .salt-theme[data-mode=light] {
574
535
  --salt-palette-interact-background: transparent;
575
536
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
576
537
  --salt-palette-interact-background-hover: var(--salt-color-blue-10);
@@ -591,109 +552,30 @@
591
552
  --salt-palette-interact-outline: var(--salt-color-blue-600);
592
553
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
593
554
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
594
- --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
595
555
  --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
596
556
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
597
557
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
598
558
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
599
- --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
600
559
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
601
560
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
602
561
  --salt-palette-interact-primary-background: var(--salt-color-gray-60);
603
562
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-200);
604
- --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
605
563
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-60-fade-background);
606
564
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-40);
607
565
  --salt-palette-interact-primary-foreground: var(--salt-color-gray-900);
608
566
  --salt-palette-interact-primary-foreground-active: var(--salt-color-white);
609
- --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
610
567
  --salt-palette-interact-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
611
568
  --salt-palette-interact-primary-foreground-hover: var(--salt-color-gray-900);
612
569
  --salt-palette-interact-secondary-background: transparent;
613
570
  --salt-palette-interact-secondary-background-active: var(--salt-color-gray-200);
614
- --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
615
571
  --salt-palette-interact-secondary-background-disabled: transparent;
616
572
  --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-40);
617
573
  --salt-palette-interact-secondary-foreground: var(--salt-color-gray-900);
618
574
  --salt-palette-interact-secondary-foreground-active: var(--salt-color-white);
619
- --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
620
575
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
621
576
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-gray-900);
622
- --salt-palette-error-background: var(--salt-color-red-10);
623
- --salt-palette-error-background-selected: var(--salt-color-red-20);
624
- --salt-palette-error-border: var(--salt-color-red-500);
625
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
626
- --salt-palette-error-foreground: var(--salt-color-red-500);
627
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
628
- --salt-palette-info-background: var(--salt-color-blue-10);
629
- --salt-palette-info-border: var(--salt-color-blue-500);
630
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
631
- --salt-palette-info-foreground: var(--salt-color-blue-500);
632
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
633
- --salt-palette-success-background: var(--salt-color-green-10);
634
- --salt-palette-success-background-selected: var(--salt-color-green-20);
635
- --salt-palette-success-border: var(--salt-color-green-500);
636
- --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
637
- --salt-palette-success-foreground: var(--salt-color-green-500);
638
- --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
639
- --salt-palette-warning-background: var(--salt-color-orange-10);
640
- --salt-palette-warning-background-selected: var(--salt-color-orange-20);
641
- --salt-palette-warning-border: var(--salt-color-orange-700);
642
- --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
643
- --salt-palette-warning-foreground: var(--salt-color-orange-700);
644
- --salt-palette-navigate-primary-background: transparent;
645
- --salt-palette-navigate-primary-background-active: transparent;
646
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
647
- --salt-palette-navigate-secondary-background: transparent;
648
- --salt-palette-navigate-secondary-background-active: transparent;
649
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
650
- --salt-palette-navigate-tertiary-background: transparent;
651
- --salt-palette-navigate-tertiary-background-active: transparent;
652
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
653
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
654
- --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
655
- --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
656
- --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
657
- --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
658
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
659
- --salt-palette-negative-foreground: var(--salt-color-red-700);
660
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
661
- --salt-palette-neutral-primary-background: var(--salt-color-white);
662
- --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
663
- --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
664
- --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
665
- --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
666
- --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
667
- --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
668
- --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
669
- --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
670
- --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
671
- --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
672
- --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
673
- --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
674
- --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
675
- --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
676
- --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
677
- --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
678
- --salt-palette-neutral-tertiary-background: transparent;
679
- --salt-palette-neutral-tertiary-background-disabled: transparent;
680
- --salt-palette-neutral-tertiary-border: transparent;
681
- --salt-palette-neutral-tertiary-border-disabled: transparent;
682
- --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
683
- --salt-palette-positive-foreground: var(--salt-color-green-700);
684
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
685
- --salt-palette-track-background: var(--salt-color-gray-60);
686
- --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
687
- --salt-palette-track-border: var(--salt-color-gray-90);
688
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
689
577
  }
690
578
  .salt-theme[data-mode=dark] {
691
- --salt-palette-accent-background: var(--salt-color-blue-500);
692
- --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
693
- --salt-palette-accent-border: var(--salt-color-blue-500);
694
- --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
695
- --salt-palette-accent-foreground: var(--salt-color-white);
696
- --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
697
579
  --salt-palette-interact-background: transparent;
698
580
  --salt-palette-interact-background-active: var(--salt-color-blue-700);
699
581
  --salt-palette-interact-background-blurSelected: var(--salt-color-gray-600);
@@ -714,73 +596,78 @@
714
596
  --salt-palette-interact-outline: var(--salt-color-blue-100);
715
597
  --salt-palette-interact-cta-background: var(--salt-color-blue-600);
716
598
  --salt-palette-interact-cta-background-active: var(--salt-color-blue-700);
717
- --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
718
599
  --salt-palette-interact-cta-background-disabled: var(--salt-color-blue-600-fade-background);
719
600
  --salt-palette-interact-cta-background-hover: var(--salt-color-blue-500);
720
601
  --salt-palette-interact-cta-foreground: var(--salt-color-white);
721
602
  --salt-palette-interact-cta-foreground-active: var(--salt-color-white);
722
- --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
723
603
  --salt-palette-interact-cta-foreground-disabled: var(--salt-color-white-fade-foreground);
724
604
  --salt-palette-interact-cta-foreground-hover: var(--salt-color-white);
725
605
  --salt-palette-interact-primary-background: var(--salt-color-gray-300);
726
606
  --salt-palette-interact-primary-background-active: var(--salt-color-gray-70);
727
- --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
728
607
  --salt-palette-interact-primary-background-disabled: var(--salt-color-gray-300-fade-background);
729
608
  --salt-palette-interact-primary-background-hover: var(--salt-color-gray-200);
730
609
  --salt-palette-interact-primary-foreground: var(--salt-color-white);
731
610
  --salt-palette-interact-primary-foreground-active: var(--salt-color-gray-900);
732
- --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
733
611
  --salt-palette-interact-primary-foreground-disabled: var(--salt-color-white-fade-foreground);
734
612
  --salt-palette-interact-primary-foreground-hover: var(--salt-color-white);
735
613
  --salt-palette-interact-secondary-background: transparent;
736
614
  --salt-palette-interact-secondary-background-active: var(--salt-color-gray-70);
737
- --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
738
615
  --salt-palette-interact-secondary-background-disabled: transparent;
739
616
  --salt-palette-interact-secondary-background-hover: var(--salt-color-gray-200);
740
617
  --salt-palette-interact-secondary-foreground: var(--salt-color-white);
741
618
  --salt-palette-interact-secondary-foreground-active: var(--salt-color-gray-900);
742
- --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
743
619
  --salt-palette-interact-secondary-foreground-disabled: var(--salt-color-white-fade-foreground);
744
620
  --salt-palette-interact-secondary-foreground-hover: var(--salt-color-white);
745
- --salt-palette-error-background: var(--salt-color-red-900);
746
- --salt-palette-error-background-selected: var(--salt-color-red-900);
747
- --salt-palette-error-border: var(--salt-color-red-500);
748
- --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
749
- --salt-palette-error-foreground: var(--salt-color-red-500);
750
- --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
751
- --salt-palette-info-background: var(--salt-color-blue-900);
752
- --salt-palette-info-border: var(--salt-color-blue-500);
753
- --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
754
- --salt-palette-info-foreground: var(--salt-color-blue-500);
755
- --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
756
- --salt-palette-success-background: var(--salt-color-green-900);
757
- --salt-palette-success-background-selected: var(--salt-color-green-900);
758
- --salt-palette-success-border: var(--salt-color-green-400);
759
- --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
760
- --salt-palette-success-foreground: var(--salt-color-green-400);
761
- --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
762
- --salt-palette-warning-background: var(--salt-color-orange-900);
763
- --salt-palette-warning-background-selected: var(--salt-color-orange-900);
764
- --salt-palette-warning-border: var(--salt-color-orange-500);
765
- --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
766
- --salt-palette-warning-foreground: var(--salt-color-orange-500);
767
- --salt-palette-navigate-primary-background: transparent;
768
- --salt-palette-navigate-primary-background-active: transparent;
769
- --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
770
- --salt-palette-navigate-secondary-background: transparent;
771
- --salt-palette-navigate-secondary-background-active: transparent;
772
- --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
773
- --salt-palette-navigate-tertiary-background: transparent;
774
- --salt-palette-navigate-tertiary-background-active: transparent;
775
- --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
776
- --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
621
+ }
622
+
623
+ /* css/palette/navigate.css */
624
+ .salt-theme[data-mode=light] {
625
+ --salt-palette-navigate-background-hover: var(--salt-color-black-fade-background-hover);
626
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-600);
627
+ --salt-palette-navigate-foreground-active: var(--salt-color-blue-700);
628
+ --salt-palette-navigate-foreground-visited: var(--salt-color-purple-800);
629
+ --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
630
+ --salt-palette-navigate-indicator-active: var(--salt-color-orange-600);
631
+ }
632
+ .salt-theme[data-mode=dark] {
633
+ --salt-palette-navigate-background-hover: var(--salt-color-white-fade-background-hover);
634
+ --salt-palette-navigate-foreground-hover: var(--salt-color-blue-200);
777
635
  --salt-palette-navigate-foreground-active: var(--salt-color-blue-300);
778
636
  --salt-palette-navigate-foreground-visited: var(--salt-color-purple-100);
779
637
  --salt-palette-navigate-indicator-hover: var(--salt-color-gray-90);
780
638
  --salt-palette-navigate-indicator-active: var(--salt-color-orange-400);
781
- --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
639
+ }
640
+
641
+ /* css/palette/negative.css */
642
+ .salt-theme[data-mode=light] {
643
+ --salt-palette-negative-foreground: var(--salt-color-red-700);
644
+ }
645
+ .salt-theme[data-mode=dark] {
782
646
  --salt-palette-negative-foreground: var(--salt-color-red-300);
783
- --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
647
+ }
648
+
649
+ /* css/palette/neutral.css */
650
+ .salt-theme[data-mode=light] {
651
+ --salt-palette-neutral-primary-background: var(--salt-color-white);
652
+ --salt-palette-neutral-primary-background-disabled: var(--salt-color-white-fade-background);
653
+ --salt-palette-neutral-primary-background-readonly: var(--salt-color-white-fade-background-readonly);
654
+ --salt-palette-neutral-primary-foreground: var(--salt-color-gray-900);
655
+ --salt-palette-neutral-primary-foreground-disabled: var(--salt-color-gray-900-fade-foreground);
656
+ --salt-palette-neutral-primary-separator: var(--salt-color-black-fade-separatorOpacity-primary);
657
+ --salt-palette-neutral-primary-border: var(--salt-color-gray-60);
658
+ --salt-palette-neutral-primary-border-disabled: var(--salt-color-gray-60-fade-border);
659
+ --salt-palette-neutral-secondary-background: var(--salt-color-gray-20);
660
+ --salt-palette-neutral-secondary-background-disabled: var(--salt-color-gray-20-fade-background);
661
+ --salt-palette-neutral-secondary-background-readonly: var(--salt-color-gray-20-fade-background-readonly);
662
+ --salt-palette-neutral-secondary-border: var(--salt-color-gray-90);
663
+ --salt-palette-neutral-secondary-border-disabled: var(--salt-color-gray-90-fade-border);
664
+ --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
665
+ --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
666
+ --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
667
+ --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
668
+ --salt-palette-neutral-tertiary-separator: var(--salt-color-black-fade-separatorOpacity-tertiary);
669
+ }
670
+ .salt-theme[data-mode=dark] {
784
671
  --salt-palette-neutral-primary-background: var(--salt-color-gray-800);
785
672
  --salt-palette-neutral-primary-background-disabled: var(--salt-color-gray-800-fade-background);
786
673
  --salt-palette-neutral-primary-background-readonly: var(--salt-color-gray-800-fade-background-readonly);
@@ -798,74 +685,61 @@
798
685
  --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-70-fade-foreground);
799
686
  --salt-palette-neutral-backdrop: var(--salt-color-black-fade-backdrop);
800
687
  --salt-palette-neutral-secondary-separator: var(--salt-color-white-fade-separatorOpacity-secondary);
801
- --salt-palette-neutral-tertiary-background: transparent;
802
- --salt-palette-neutral-tertiary-background-disabled: transparent;
803
- --salt-palette-neutral-tertiary-border: transparent;
804
- --salt-palette-neutral-tertiary-border-disabled: transparent;
805
688
  --salt-palette-neutral-tertiary-separator: var(--salt-color-white-fade-separatorOpacity-tertiary);
806
- --salt-palette-positive-foreground: var(--salt-color-green-300);
807
- --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
808
- --salt-palette-track-background: var(--salt-color-gray-300);
809
- --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
810
- --salt-palette-track-border: var(--salt-color-gray-90);
811
- --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
812
689
  }
690
+
691
+ /* css/palette/opacity.css */
692
+ .salt-theme {
693
+ --salt-palette-opacity-backdrop: var(--salt-opacity-70);
694
+ --salt-palette-opacity-disabled: var(--salt-opacity-40);
695
+ --salt-palette-opacity-background-readonly: var(--salt-opacity-0);
696
+ --salt-palette-opacity-border-readonly: var(--salt-opacity-15);
697
+ --salt-palette-opacity-primary-border: var(--salt-opacity-40);
698
+ --salt-palette-opacity-secondary-border: var(--salt-opacity-25);
699
+ --salt-palette-opacity-tertiary-border: var(--salt-opacity-15);
700
+ }
701
+
702
+ /* css/palette/positive.css */
813
703
  .salt-theme[data-mode=light] {
814
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
815
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
816
- --salt-palette-measured-fill: var(--salt-color-blue-500);
817
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
818
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
819
- --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
820
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
821
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
822
- --salt-palette-measured-background: var(--salt-color-gray-60);
823
- --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
824
- --salt-palette-measured-border: var(--salt-color-gray-90);
825
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
826
- --salt-palette-neutral-tertiary-background-readonly: transparent;
704
+ --salt-palette-positive-foreground: var(--salt-color-green-700);
827
705
  }
828
706
  .salt-theme[data-mode=dark] {
829
- --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
830
- --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
831
- --salt-palette-measured-fill: var(--salt-color-blue-300);
832
- --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
833
- --salt-palette-measured-foreground: var(--salt-color-gray-90);
834
- --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
835
- --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
836
- --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
837
- --salt-palette-measured-background: var(--salt-color-gray-300);
838
- --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
839
- --salt-palette-measured-border: var(--salt-color-gray-90);
840
- --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
841
- --salt-palette-neutral-tertiary-background-readonly: transparent;
707
+ --salt-palette-positive-foreground: var(--salt-color-green-300);
842
708
  }
843
709
 
844
- /* css/characteristics/accent.css */
845
- .salt-density-high {
846
- --salt-accent-fontSize: 8px;
847
- --salt-accent-lineHeight: 11px;
710
+ /* css/palette/success.css */
711
+ .salt-theme[data-mode=light] {
712
+ --salt-palette-success-background: var(--salt-color-green-10);
713
+ --salt-palette-success-background-selected: var(--salt-color-green-20);
714
+ --salt-palette-success-border: var(--salt-color-green-500);
715
+ --salt-palette-success-foreground: var(--salt-color-green-500);
848
716
  }
849
- .salt-density-medium {
850
- --salt-accent-fontSize: 10px;
851
- --salt-accent-lineHeight: 13px;
717
+ .salt-theme[data-mode=dark] {
718
+ --salt-palette-success-background: var(--salt-color-green-900);
719
+ --salt-palette-success-background-selected: var(--salt-color-green-900);
720
+ --salt-palette-success-border: var(--salt-color-green-400);
721
+ --salt-palette-success-foreground: var(--salt-color-green-400);
852
722
  }
853
- .salt-density-low {
854
- --salt-accent-fontSize: 12px;
855
- --salt-accent-lineHeight: 16px;
723
+
724
+ /* css/palette/warning.css */
725
+ .salt-theme[data-mode=light] {
726
+ --salt-palette-warning-background: var(--salt-color-orange-10);
727
+ --salt-palette-warning-background-selected: var(--salt-color-orange-20);
728
+ --salt-palette-warning-border: var(--salt-color-orange-700);
729
+ --salt-palette-warning-foreground: var(--salt-color-orange-700);
856
730
  }
857
- .salt-density-touch {
858
- --salt-accent-fontSize: 14px;
859
- --salt-accent-lineHeight: 18px;
731
+ .salt-theme[data-mode=dark] {
732
+ --salt-palette-warning-background: var(--salt-color-orange-900);
733
+ --salt-palette-warning-background-selected: var(--salt-color-orange-900);
734
+ --salt-palette-warning-border: var(--salt-color-orange-500);
735
+ --salt-palette-warning-foreground: var(--salt-color-orange-500);
860
736
  }
737
+
738
+ /* css/characteristics/accent.css */
861
739
  .salt-theme {
862
740
  --salt-accent-background: var(--salt-palette-accent-background);
863
- --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
864
741
  --salt-accent-borderColor: var(--salt-palette-accent-border);
865
- --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
866
742
  --salt-accent-foreground: var(--salt-palette-accent-foreground);
867
- --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
868
- --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
869
743
  }
870
744
 
871
745
  /* css/characteristics/actionable.css */
@@ -873,9 +747,6 @@
873
747
  --salt-actionable-cursor-hover: pointer;
874
748
  --salt-actionable-cursor-active: pointer;
875
749
  --salt-actionable-cursor-disabled: not-allowed;
876
- --salt-actionable-letterSpacing: 0.6px;
877
- --salt-actionable-textAlign: center;
878
- --salt-actionable-textTransform: uppercase;
879
750
  --salt-actionable-primary-foreground: var(--salt-palette-interact-primary-foreground);
880
751
  --salt-actionable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
881
752
  --salt-actionable-primary-foreground-active: var(--salt-palette-interact-primary-foreground-active);
@@ -884,7 +755,6 @@
884
755
  --salt-actionable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
885
756
  --salt-actionable-primary-background-active: var(--salt-palette-interact-primary-background-active);
886
757
  --salt-actionable-primary-background-disabled: var(--salt-palette-interact-primary-background-disabled);
887
- --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
888
758
  --salt-actionable-cta-foreground: var(--salt-palette-interact-cta-foreground);
889
759
  --salt-actionable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
890
760
  --salt-actionable-cta-foreground-active: var(--salt-palette-interact-cta-foreground-active);
@@ -893,7 +763,6 @@
893
763
  --salt-actionable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
894
764
  --salt-actionable-cta-background-active: var(--salt-palette-interact-cta-background-active);
895
765
  --salt-actionable-cta-background-disabled: var(--salt-palette-interact-cta-background-disabled);
896
- --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
897
766
  --salt-actionable-secondary-foreground: var(--salt-palette-interact-secondary-foreground);
898
767
  --salt-actionable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
899
768
  --salt-actionable-secondary-foreground-active: var(--salt-palette-interact-secondary-foreground-active);
@@ -902,7 +771,6 @@
902
771
  --salt-actionable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
903
772
  --salt-actionable-secondary-background-active: var(--salt-palette-interact-secondary-background-active);
904
773
  --salt-actionable-secondary-background-disabled: var(--salt-palette-interact-secondary-background-disabled);
905
- --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
906
774
  }
907
775
 
908
776
  /* css/characteristics/container.css */
@@ -916,16 +784,6 @@
916
784
  --salt-container-secondary-background-disabled: var(--salt-palette-neutral-secondary-background-disabled);
917
785
  --salt-container-secondary-borderColor: var(--salt-palette-neutral-secondary-border);
918
786
  --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-secondary-border-disabled);
919
- --salt-container-tertiary-background: var(--salt-palette-neutral-tertiary-background);
920
- --salt-container-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
921
- --salt-container-tertiary-borderColor: var(--salt-palette-neutral-tertiary-border);
922
- --salt-container-tertiary-borderColor-disabled: var(--salt-palette-neutral-tertiary-border-disabled);
923
- }
924
-
925
- /* css/characteristics/differential.css */
926
- .salt-theme {
927
- --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
928
- --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
929
787
  }
930
788
 
931
789
  /* css/characteristics/draggable.css */
@@ -976,11 +834,6 @@
976
834
  --salt-editable-secondary-background-hover: var(--salt-palette-neutral-secondary-background);
977
835
  --salt-editable-secondary-background-readonly: var(--salt-palette-neutral-secondary-background-readonly);
978
836
  --salt-editable-help-fontStyle: italic;
979
- --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
980
- --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
981
- --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
982
- --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
983
- --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
984
837
  }
985
838
 
986
839
  /* css/characteristics/focused.css */
@@ -1004,32 +857,6 @@
1004
857
  position: absolute;
1005
858
  }
1006
859
 
1007
- /* css/characteristics/measured.css */
1008
- .salt-theme {
1009
- --salt-measured-borderStyle: solid;
1010
- --salt-measured-borderStyle-active: solid;
1011
- --salt-measured-borderStyle-complete: solid;
1012
- --salt-measured-borderStyle-incomplete: dotted;
1013
- --salt-measured-borderWidth: 2px;
1014
- --salt-measured-borderWidth-active: 2px;
1015
- --salt-measured-borderWidth-complete: 2px;
1016
- --salt-measured-borderWidth-incomplete: 2px;
1017
- --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1018
- --salt-measured-textAlign: center;
1019
- --salt-measured-background: var(--salt-palette-measured-background);
1020
- --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1021
- --salt-measured-borderColor: var(--salt-palette-measured-border);
1022
- --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1023
- --salt-measured-fill: var(--salt-palette-measured-fill);
1024
- --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1025
- --salt-measured-foreground: var(--salt-palette-measured-foreground);
1026
- --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1027
- --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1028
- --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1029
- --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1030
- --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1031
- }
1032
-
1033
860
  /* css/characteristics/navigable.css */
1034
861
  .salt-theme {
1035
862
  --salt-navigable-cursor-active: pointer;
@@ -1042,29 +869,22 @@
1042
869
  --salt-navigable-fontWeight-edit: var(--salt-typography-fontWeight-regular);
1043
870
  --salt-navigable-indicator-hover: var(--salt-palette-navigate-indicator-hover);
1044
871
  --salt-navigable-indicator-active: var(--salt-palette-navigate-indicator-active);
1045
- --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
1046
- --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
1047
- --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
1048
- --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
1049
- --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
1050
- --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
1051
- --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
1052
- --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
1053
- --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
1054
- --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
872
+ --salt-navigable-background-hover: var(--salt-palette-navigate-primary-background-hover);
873
+ --salt-navigable-textDecoration: underline;
874
+ --salt-navigable-textDecoration-hover: none;
875
+ --salt-navigable-textDecoration-selected: underline;
1055
876
  }
1056
877
 
1057
878
  /* css/characteristics/overlayable.css */
1058
879
  .salt-theme {
1059
- --salt-overlayable-shadow-scroll: var(--salt-shadow-1);
1060
- --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
1061
- --salt-overlayable-shadow: var(--salt-shadow-2);
1062
- --salt-overlayable-shadow-hover: var(--salt-shadow-3);
1063
- --salt-overlayable-shadow-popout: var(--salt-shadow-4);
1064
- --salt-overlayable-shadow-drag: var(--salt-shadow-4);
1065
- --salt-overlayable-shadow-modal: var(--salt-shadow-5);
880
+ --salt-overlayable-shadow-scroll: var(--salt-shadow-100);
881
+ --salt-overlayable-shadow-region: var(--salt-shadow-200);
882
+ --salt-overlayable-shadow: var(--salt-shadow-200);
883
+ --salt-overlayable-shadow-hover: var(--salt-shadow-300);
884
+ --salt-overlayable-shadow-popout: var(--salt-shadow-400);
885
+ --salt-overlayable-shadow-drag: var(--salt-shadow-400);
886
+ --salt-overlayable-shadow-modal: var(--salt-shadow-500);
1066
887
  --salt-overlayable-background: var(--salt-palette-neutral-backdrop);
1067
- --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1068
888
  }
1069
889
 
1070
890
  /* css/characteristics/selectable.css */
@@ -1083,6 +903,7 @@
1083
903
  --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
1084
904
  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
1085
905
  --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
906
+ --salt-selectable-borderColor-readonly: var(--salt-palette-interact-border-readonly);
1086
907
  --salt-selectable-foreground: var(--salt-palette-interact-foreground);
1087
908
  --salt-selectable-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1088
909
  --salt-selectable-foreground-hover: var(--salt-palette-interact-foreground-hover);
@@ -1094,38 +915,6 @@
1094
915
  --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
1095
916
  --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
1096
917
  --salt-selectable-background-selectedDisabled: var(--salt-palette-interact-background-activeDisabled);
1097
- --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1098
- --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1099
- --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
1100
- --salt-selectable-cta-background: var(--salt-palette-interact-background);
1101
- --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
1102
- --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1103
- --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
1104
- --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
1105
- --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1106
- --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1107
- --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
1108
- --salt-selectable-primary-background: var(--salt-palette-interact-background);
1109
- --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
1110
- --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1111
- --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
1112
- --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
1113
- --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1114
- --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
1115
- --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
1116
- --salt-selectable-secondary-background: var(--salt-palette-interact-background);
1117
- --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
1118
- --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1119
- --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1120
- --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1121
- --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1122
- --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1123
- --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1124
- --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1125
- --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1126
- --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1127
- --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1128
- --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1129
918
  }
1130
919
 
1131
920
  /* css/characteristics/separable.css */
@@ -1145,21 +934,10 @@
1145
934
  --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground);
1146
935
  --salt-status-negative-foreground: var(--salt-palette-negative-foreground);
1147
936
  --salt-status-positive-foreground: var(--salt-palette-positive-foreground);
1148
- --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1149
- --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1150
- --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1151
- --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1152
- --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1153
- --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1154
- --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1155
937
  --salt-status-info-borderColor: var(--salt-palette-info-border);
1156
938
  --salt-status-success-borderColor: var(--salt-palette-success-border);
1157
939
  --salt-status-warning-borderColor: var(--salt-palette-warning-border);
1158
940
  --salt-status-error-borderColor: var(--salt-palette-error-border);
1159
- --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1160
- --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1161
- --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1162
- --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1163
941
  --salt-status-info-background: var(--salt-palette-info-background);
1164
942
  --salt-status-success-background: var(--salt-palette-success-background);
1165
943
  --salt-status-warning-background: var(--salt-palette-warning-background);
@@ -1167,25 +945,6 @@
1167
945
  --salt-status-success-background-selected: var(--salt-palette-success-background-selected);
1168
946
  --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected);
1169
947
  --salt-status-error-background-selected: var(--salt-palette-error-background-selected);
1170
- --salt-status-info-background-emphasize: var(--salt-status-info-background);
1171
- --salt-status-success-background-emphasize: var(--salt-status-success-background);
1172
- --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1173
- --salt-status-error-background-emphasize: var(--salt-status-error-background);
1174
- }
1175
-
1176
- /* css/characteristics/taggable.css */
1177
- .salt-theme {
1178
- --salt-taggable-cursor-hover: pointer;
1179
- --salt-taggable-cursor-active: pointer;
1180
- --salt-taggable-cursor-disabled: not-allowed;
1181
- --salt-taggable-background: var(--salt-palette-interact-primary-background);
1182
- --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
1183
- --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
1184
- --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1185
- --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
1186
- --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1187
- --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1188
- --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1189
948
  }
1190
949
 
1191
950
  /* css/characteristics/text.css */
@@ -1195,10 +954,18 @@
1195
954
  --salt-text-textAlign-embedded: center;
1196
955
  --salt-text-textDecoration: none;
1197
956
  --salt-text-textTransform: none;
957
+ --salt-text-action-letterSpacing: 0.6px;
958
+ --salt-text-action-textTransform: uppercase;
959
+ --salt-text-action-textAlign: center;
960
+ --salt-text-action-fontWeight: var(--salt-typography-fontWeight-semiBold);
1198
961
  --salt-text-fontFamily: var(--salt-typography-fontFamily);
1199
962
  --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
1200
963
  --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
1201
964
  --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
965
+ --salt-text-notation-fontFamily: var(--salt-typography-fontFamily);
966
+ --salt-text-notation-fontWeight: var(--salt-typography-fontWeight-semiBold);
967
+ --salt-text-notation-fontWeight-small: var(--salt-typography-fontWeight-regular);
968
+ --salt-text-notation-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1202
969
  --salt-text-h1-fontFamily: var(--salt-typography-fontFamily);
1203
970
  --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
1204
971
  --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
@@ -1231,17 +998,6 @@
1231
998
  --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
1232
999
  --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
1233
1000
  --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
1234
- --salt-text-background-selected: var(--salt-palette-interact-background-active);
1235
- --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1236
- --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1237
- --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1238
- --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1239
- --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1240
- --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
1241
- --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1242
- --salt-text-link-textDecoration: underline;
1243
- --salt-text-link-textDecoration-hover: none;
1244
- --salt-text-link-textDecoration-selected: underline;
1245
1001
  --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
1246
1002
  }
1247
1003
  .salt-density-touch {
@@ -1264,6 +1020,8 @@
1264
1020
  --salt-text-display2-lineHeight: 76px;
1265
1021
  --salt-text-display3-fontSize: 42px;
1266
1022
  --salt-text-display3-lineHeight: 54px;
1023
+ --salt-text-notation-fontSize: 14px;
1024
+ --salt-text-notation-lineHeight: 18px;
1267
1025
  }
1268
1026
  .salt-density-low {
1269
1027
  --salt-text-h1-fontSize: 32px;
@@ -1285,6 +1043,8 @@
1285
1043
  --salt-text-display2-lineHeight: 60px;
1286
1044
  --salt-text-display3-fontSize: 32px;
1287
1045
  --salt-text-display3-lineHeight: 42px;
1046
+ --salt-text-notation-fontSize: 12px;
1047
+ --salt-text-notation-lineHeight: 16px;
1288
1048
  }
1289
1049
  .salt-density-medium {
1290
1050
  --salt-text-h1-fontSize: 24px;
@@ -1306,6 +1066,8 @@
1306
1066
  --salt-text-display2-lineHeight: 47px;
1307
1067
  --salt-text-display3-fontSize: 24px;
1308
1068
  --salt-text-display3-lineHeight: 32px;
1069
+ --salt-text-notation-fontSize: 10px;
1070
+ --salt-text-notation-lineHeight: 13px;
1309
1071
  }
1310
1072
  .salt-density-high {
1311
1073
  --salt-text-h1-fontSize: 18px;
@@ -1327,6 +1089,20 @@
1327
1089
  --salt-text-display2-lineHeight: 36px;
1328
1090
  --salt-text-display3-fontSize: 18px;
1329
1091
  --salt-text-display3-lineHeight: 24px;
1092
+ --salt-text-notation-fontSize: 8px;
1093
+ --salt-text-notation-lineHeight: 10px;
1094
+ }
1095
+
1096
+ /* css/characteristics/content.css */
1097
+ .salt-theme {
1098
+ --salt-content-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1099
+ --salt-content-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1100
+ --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1101
+ --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1102
+ --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1103
+ --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active);
1104
+ --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1105
+ --salt-content-foreground-highlight: var(--salt-palette-interact-background-active);
1330
1106
  }
1331
1107
 
1332
1108
  /* css/characteristics/track.css */
@@ -1335,16 +1111,371 @@
1335
1111
  --salt-track-borderStyle-active: solid;
1336
1112
  --salt-track-borderStyle-complete: solid;
1337
1113
  --salt-track-borderStyle-incomplete: dotted;
1338
- --salt-track-borderWidth: 2px;
1339
- --salt-track-borderWidth-active: 2px;
1340
- --salt-track-borderWidth-complete: 2px;
1341
- --salt-track-borderWidth-incomplete: 2px;
1342
- --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1343
- --salt-track-textAlign: center;
1114
+ }
1115
+
1116
+ /* css/deprecated/characteristics.css */
1117
+ .salt-theme {
1118
+ --salt-differential-positive-foreground: var(--salt-palette-positive-foreground);
1119
+ --salt-differential-negative-foreground: var(--salt-palette-negative-foreground);
1120
+ --salt-editable-tertiary-background: var(--salt-palette-neutral-tertiary-background);
1121
+ --salt-editable-tertiary-background-active: var(--salt-palette-neutral-tertiary-background);
1122
+ --salt-editable-tertiary-background-disabled: var(--salt-palette-neutral-tertiary-background-disabled);
1123
+ --salt-editable-tertiary-background-hover: var(--salt-palette-neutral-tertiary-background);
1124
+ --salt-editable-tertiary-background-readonly: var(--salt-palette-neutral-tertiary-background-readonly);
1125
+ --salt-measured-borderStyle: solid;
1126
+ --salt-measured-borderStyle-active: solid;
1127
+ --salt-measured-borderStyle-complete: solid;
1128
+ --salt-measured-borderStyle-incomplete: dotted;
1129
+ --salt-measured-borderWidth: 2px;
1130
+ --salt-measured-borderWidth-active: 2px;
1131
+ --salt-measured-borderWidth-complete: 2px;
1132
+ --salt-measured-borderWidth-incomplete: 2px;
1133
+ --salt-measured-fontWeight: var(--salt-typography-fontWeight-semiBold);
1134
+ --salt-measured-textAlign: center;
1135
+ --salt-measured-background: var(--salt-palette-measured-background);
1136
+ --salt-measured-background-disabled: var(--salt-palette-measured-background-disabled);
1137
+ --salt-measured-borderColor: var(--salt-palette-measured-border);
1138
+ --salt-measured-borderColor-disabled: var(--salt-palette-measured-border-disabled);
1139
+ --salt-measured-fill: var(--salt-palette-measured-fill);
1140
+ --salt-measured-fill-disabled: var(--salt-palette-measured-fill-disabled);
1141
+ --salt-measured-foreground: var(--salt-palette-measured-foreground);
1142
+ --salt-measured-foreground-hover: var(--salt-palette-measured-foreground-active);
1143
+ --salt-measured-foreground-active: var(--salt-palette-measured-foreground-active);
1144
+ --salt-measured-foreground-undo: var(--salt-palette-measured-foreground-active);
1145
+ --salt-measured-foreground-activeDisabled: var(--salt-palette-measured-foreground-activeDisabled);
1146
+ --salt-measured-foreground-disabled: var(--salt-palette-measured-foreground-disabled);
1147
+ --salt-overlayable-shadow-scroll-color: var(--salt-shadow-1-color);
1148
+ --salt-overlayable-shadow-borderRegion: var(--salt-shadow-2);
1149
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
1150
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
1151
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
1152
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1153
+ --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
1154
+ --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
1155
+ --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
1156
+ --salt-selectable-cta-background: var(--salt-palette-interact-background);
1157
+ --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
1158
+ --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
1159
+ --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
1160
+ --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
1161
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
1162
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1163
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1164
+ --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
1165
+ --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
1166
+ --salt-selectable-primary-background: var(--salt-palette-interact-background);
1167
+ --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
1168
+ --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
1169
+ --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
1170
+ --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
1171
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
1172
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
1173
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
1174
+ --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
1175
+ --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
1176
+ --salt-selectable-secondary-background: var(--salt-palette-interact-background);
1177
+ --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
1178
+ --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
1179
+ --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
1180
+ --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
1181
+ --salt-status-info-background-emphasize: var(--salt-status-info-background);
1182
+ --salt-status-success-background-emphasize: var(--salt-status-success-background);
1183
+ --salt-status-warning-background-emphasize: var(--salt-status-warning-background);
1184
+ --salt-status-error-background-emphasize: var(--salt-status-error-background);
1185
+ --salt-status-info-foreground-disabled: var(--salt-palette-info-foreground-disabled);
1186
+ --salt-status-success-foreground-disabled: var(--salt-palette-success-foreground-disabled);
1187
+ --salt-status-warning-foreground-disabled: var(--salt-palette-warning-foreground-disabled);
1188
+ --salt-status-error-foreground-disabled: var(--salt-palette-error-foreground-disabled);
1189
+ --salt-status-static-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1190
+ --salt-status-negative-foreground-disabled: var(--salt-palette-negative-foreground-disabled);
1191
+ --salt-status-positive-foreground-disabled: var(--salt-palette-positive-foreground-disabled);
1192
+ --salt-status-info-borderColor-disabled: var(--salt-palette-info-border-disabled);
1193
+ --salt-status-success-borderColor-disabled: var(--salt-palette-success-border-disabled);
1194
+ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled);
1195
+ --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled);
1196
+ --salt-actionable-letterSpacing: 0.6px;
1197
+ --salt-actionable-textTransform: uppercase;
1198
+ --salt-actionable-textAlign: center;
1199
+ --salt-actionable-primary-fontWeight: var(--salt-typography-fontWeight-bold);
1200
+ --salt-actionable-cta-fontWeight: var(--salt-typography-fontWeight-bold);
1201
+ --salt-actionable-secondary-fontWeight: var(--salt-typography-fontWeight-semiBold);
1202
+ --salt-text-background-selected: var(--salt-content-foreground-highlight);
1203
+ --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
1204
+ --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
1205
+ --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
1206
+ --salt-text-link-textDecoration: underline;
1207
+ --salt-text-link-textDecoration-hover: none;
1208
+ --salt-text-link-textDecoration-selected: underline;
1209
+ --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
1210
+ --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
1211
+ --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
1212
+ --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
1213
+ --salt-navigable-primary-background: var(--salt-palette-navigate-primary-background);
1214
+ --salt-navigable-primary-background-hover: var(--salt-palette-navigate-primary-background-hover);
1215
+ --salt-navigable-primary-background-active: var(--salt-palette-navigate-primary-background-active);
1216
+ --salt-navigable-secondary-background: var(--salt-palette-navigate-secondary-background);
1217
+ --salt-navigable-secondary-background-hover: var(--salt-palette-navigate-secondary-background-hover);
1218
+ --salt-navigable-secondary-background-active: var(--salt-palette-navigate-secondary-background-active);
1219
+ --salt-navigable-tertiary-background: var(--salt-palette-navigate-tertiary-background);
1220
+ --salt-navigable-tertiary-background-hover: var(--salt-palette-navigate-tertiary-background-hover);
1221
+ --salt-navigable-tertiary-background-active: var(--salt-palette-navigate-tertiary-background-active);
1222
+ --salt-navigable-indicator-activeDisabled: var(--salt-palette-navigate-indicator-activeDisabled);
1223
+ --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold);
1224
+ --salt-accent-foreground-disabled: var(--salt-palette-accent-foreground-disabled);
1225
+ --salt-accent-background-disabled: var(--salt-palette-accent-background-disabled);
1226
+ --salt-accent-borderColor-disabled: var(--salt-palette-accent-border-disabled);
1227
+ --salt-track-borderWidth: 2px;
1228
+ --salt-track-borderWidth-active: 2px;
1229
+ --salt-track-borderWidth-complete: 2px;
1230
+ --salt-track-borderWidth-incomplete: 2px;
1231
+ --salt-track-fontWeight: var(--salt-typography-fontWeight-semiBold);
1232
+ --salt-track-textAlign: center;
1344
1233
  --salt-track-background: var(--salt-palette-track-background);
1345
1234
  --salt-track-background-disabled: var(--salt-palette-track-background-disabled);
1346
1235
  --salt-track-borderColor: var(--salt-palette-track-border);
1347
1236
  --salt-track-borderColor-disabled: var(--salt-palette-track-border-disabled);
1237
+ --salt-taggable-cursor-hover: pointer;
1238
+ --salt-taggable-cursor-active: pointer;
1239
+ --salt-taggable-cursor-disabled: not-allowed;
1240
+ --salt-taggable-background: var(--salt-palette-interact-primary-background);
1241
+ --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
1242
+ --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
1243
+ --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
1244
+ --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
1245
+ --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
1246
+ --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
1247
+ --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
1248
+ --salt-container-tertiary-background: transparent;
1249
+ --salt-container-tertiary-background-disabled: transparent;
1250
+ --salt-container-tertiary-borderColor: transparent;
1251
+ --salt-container-tertiary-borderColor-disabled: transparent;
1252
+ }
1253
+ .salt-density-high {
1254
+ --salt-accent-fontSize: 8px;
1255
+ --salt-accent-lineHeight: 11px;
1256
+ }
1257
+ .salt-density-medium {
1258
+ --salt-accent-fontSize: 10px;
1259
+ --salt-accent-lineHeight: 13px;
1260
+ }
1261
+ .salt-density-low {
1262
+ --salt-accent-fontSize: 12px;
1263
+ --salt-accent-lineHeight: 16px;
1264
+ }
1265
+ .salt-density-touch {
1266
+ --salt-accent-fontSize: 14px;
1267
+ --salt-accent-lineHeight: 18px;
1268
+ }
1269
+
1270
+ /* css/deprecated/fade.css */
1271
+ .salt-theme {
1272
+ --salt-color-orange-500-fade-foreground: rgba(234, 115, 25, var(--salt-palette-opacity-foreground));
1273
+ --salt-color-orange-700-fade-foreground: rgba(214, 85, 19, var(--salt-palette-opacity-foreground));
1274
+ --salt-color-orange-400-fade-background: rgba(238, 133, 43, var(--salt-palette-opacity-background));
1275
+ --salt-color-orange-600-fade-background: rgba(224, 101, 25, var(--salt-palette-opacity-background));
1276
+ --salt-color-blue-300-fade-fill: rgba(51, 141, 205, var(--salt-palette-opacity-fill));
1277
+ --salt-color-blue-500-fade-fill: rgba(38, 112, 169, var(--salt-palette-opacity-fill));
1278
+ }
1279
+
1280
+ /* css/deprecated/foundations.css */
1281
+ .salt-theme {
1282
+ --salt-delay-instant: 100ms;
1283
+ --salt-delay-perceptible: 300ms;
1284
+ --salt-delay-notable: 1000ms;
1285
+ --salt-delay-cutoff: 10000ms;
1286
+ --salt-size-icon-base: var(--salt-icon-size-base);
1287
+ --salt-opacity-1: 0.15;
1288
+ --salt-opacity-2: 0.25;
1289
+ --salt-opacity-3: 0.4;
1290
+ --salt-opacity-4: 0.7;
1291
+ --salt-shadow-0: none;
1292
+ --salt-shadow-1: 0 1px 3px 0 var(--salt-shadow-1-color);
1293
+ --salt-shadow-2: 0 2px 4px 0 var(--salt-shadow-2-color);
1294
+ --salt-shadow-3: 0 4px 8px 0 var(--salt-shadow-3-color);
1295
+ --salt-shadow-4: 0 6px 10px 0 var(--salt-shadow-4-color);
1296
+ --salt-shadow-5: 0 12px 40px 0 var(--salt-shadow-5-color);
1297
+ }
1298
+ .salt-theme[data-mode=light] {
1299
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.1);
1300
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.1);
1301
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.15);
1302
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.2);
1303
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.3);
1304
+ }
1305
+ .salt-theme[data-mode=dark] {
1306
+ --salt-shadow-1-color: rgba(0, 0, 0, 0.5);
1307
+ --salt-shadow-2-color: rgba(0, 0, 0, 0.5);
1308
+ --salt-shadow-3-color: rgba(0, 0, 0, 0.55);
1309
+ --salt-shadow-4-color: rgba(0, 0, 0, 0.55);
1310
+ --salt-shadow-5-color: rgba(0, 0, 0, 0.65);
1311
+ }
1312
+ .salt-density-touch,
1313
+ .salt-density-low,
1314
+ .salt-density-medium,
1315
+ .salt-density-high {
1316
+ --salt-size-selection: var(--salt-size-selectable);
1317
+ --salt-size-brandBar: 4px;
1318
+ --salt-size-graphic-small: 12px;
1319
+ --salt-size-graphic-medium: 24px;
1320
+ --salt-size-graphic-large: 48px;
1321
+ --salt-size-divider-height: var(--salt-size-separator-height);
1322
+ --salt-size-divider-strokeWidth: var(--salt-size-separator-strokeWidth);
1323
+ --salt-size-detail: var(--salt-size-compact);
1324
+ --salt-size-basis-unit: 4px;
1325
+ --salt-size-adornmentGap: calc(0.75 * var(--salt-size-unit));
1326
+ --salt-size-container-spacing: calc(3 * var(--salt-size-unit));
1327
+ --salt-size-separator-strokeWidth: 1px;
1328
+ --salt-size-selectable: calc(var(--salt-size-base) - (1.5 * var(--salt-size-unit)) - (0.5 * var(--salt-size-basis-unit)));
1329
+ --salt-size-separator-height: calc(var(--salt-size-compact) + 1.5 * var(--salt-size-basis-unit));
1330
+ --salt-size-sharktooth-height: 5px;
1331
+ --salt-size-sharktooth-width: 10px;
1332
+ --salt-size-stackable: calc(var(--salt-size-base) + var(--salt-size-unit));
1333
+ --salt-zIndex-docked: 1050;
1334
+ }
1335
+ .salt-density-high {
1336
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 1);
1337
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 1.5);
1338
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 0.5);
1339
+ --salt-icon-size-base: 10px;
1340
+ --salt-icon-size-status-adornment: 6px;
1341
+ }
1342
+ .salt-density-medium {
1343
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 2);
1344
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2);
1345
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1);
1346
+ --salt-icon-size-base: 12px;
1347
+ --salt-icon-size-status-adornment: 8px;
1348
+ }
1349
+ .salt-density-low {
1350
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 3);
1351
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 2.5);
1352
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 1.5);
1353
+ --salt-icon-size-base: 14px;
1354
+ --salt-icon-size-status-adornment: 10px;
1355
+ }
1356
+ .salt-density-touch {
1357
+ --salt-size-unit: calc(var(--salt-size-basis-unit) * 4);
1358
+ --salt-size-compact: calc(var(--salt-size-basis-unit) * 3);
1359
+ --salt-size-accent: calc(var(--salt-size-basis-unit) * 2);
1360
+ --salt-icon-size-base: 16px;
1361
+ --salt-icon-size-status-adornment: 12px;
1362
+ }
1363
+
1364
+ /* css/deprecated/palette.css */
1365
+ .salt-theme {
1366
+ --salt-palette-error-background-emphasize: var(--salt-palette-error-background);
1367
+ --salt-palette-warning-background-emphasize: var(--salt-palette-warning-background);
1368
+ --salt-palette-success-background-emphasize: var(--salt-palette-success-background);
1369
+ --salt-palette-info-background-emphasize: var(--salt-palette-info-background);
1370
+ --salt-palette-opacity-fill: var(--salt-palette-opacity-disabled);
1371
+ --salt-palette-opacity-stroke: var(--salt-palette-opacity-disabled);
1372
+ --salt-palette-opacity-background: var(--salt-palette-opacity-disabled);
1373
+ --salt-palette-opacity-border: var(--salt-palette-opacity-disabled);
1374
+ --salt-palette-opacity-foreground: var(--salt-palette-opacity-disabled);
1375
+ }
1376
+ .salt-theme[data-mode=light] {
1377
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-600);
1378
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-600-fade-foreground);
1379
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
1380
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1381
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1382
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
1383
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1384
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-200-fade-background);
1385
+ --salt-palette-measured-fill: var(--salt-color-blue-500);
1386
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-500-fade-fill);
1387
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1388
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-500);
1389
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1390
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-500-fade-fill);
1391
+ --salt-palette-measured-background: var(--salt-color-gray-60);
1392
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-60-fade-background);
1393
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1394
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1395
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1396
+ --salt-palette-neutral-tertiary-background: transparent;
1397
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
1398
+ --salt-palette-neutral-tertiary-border: transparent;
1399
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
1400
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1401
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1402
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1403
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1404
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground);
1405
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-700-fade-foreground);
1406
+ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border);
1407
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground);
1408
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground);
1409
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border);
1410
+ --salt-palette-navigate-primary-background: transparent;
1411
+ --salt-palette-navigate-primary-background-active: transparent;
1412
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-20);
1413
+ --salt-palette-navigate-secondary-background: transparent;
1414
+ --salt-palette-navigate-secondary-background-active: transparent;
1415
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-30);
1416
+ --salt-palette-navigate-tertiary-background: transparent;
1417
+ --salt-palette-navigate-tertiary-background-active: transparent;
1418
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-20);
1419
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-600-fade-border);
1420
+ --salt-palette-track-border: var(--salt-color-gray-90);
1421
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
1422
+ --salt-palette-track-background: var(--salt-color-gray-60);
1423
+ --salt-palette-track-background-disabled: var(--salt-color-gray-60-fade-background);
1424
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
1425
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
1426
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
1427
+ }
1428
+ .salt-theme[data-mode=dark] {
1429
+ --salt-palette-interact-foreground-partial: var(--salt-color-blue-100);
1430
+ --salt-palette-interact-foreground-partialDisabled: var(--salt-color-blue-100-fade-foreground);
1431
+ --salt-palette-interact-cta-background-activeDisabled: var(--salt-color-blue-700-fade-background);
1432
+ --salt-palette-interact-cta-foreground-activeDisabled: var(--salt-color-white-fade-foreground);
1433
+ --salt-palette-interact-primary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
1434
+ --salt-palette-interact-primary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
1435
+ --salt-palette-interact-secondary-foreground-activeDisabled: var(--salt-color-gray-900-fade-foreground);
1436
+ --salt-palette-interact-secondary-background-activeDisabled: var(--salt-color-gray-70-fade-background);
1437
+ --salt-palette-measured-fill: var(--salt-color-blue-300);
1438
+ --salt-palette-measured-fill-disabled: var(--salt-color-blue-300-fade-fill);
1439
+ --salt-palette-measured-foreground: var(--salt-color-gray-90);
1440
+ --salt-palette-measured-foreground-active: var(--salt-color-blue-300);
1441
+ --salt-palette-measured-foreground-disabled: var(--salt-color-gray-90-fade-foreground);
1442
+ --salt-palette-measured-foreground-activeDisabled: var(--salt-color-blue-300-fade-fill);
1443
+ --salt-palette-measured-background: var(--salt-color-gray-300);
1444
+ --salt-palette-measured-background-disabled: var(--salt-color-gray-300-fade-background);
1445
+ --salt-palette-measured-border: var(--salt-color-gray-90);
1446
+ --salt-palette-measured-border-disabled: var(--salt-color-gray-90-fade-border);
1447
+ --salt-palette-neutral-tertiary-background-readonly: transparent;
1448
+ --salt-palette-neutral-tertiary-background: transparent;
1449
+ --salt-palette-neutral-tertiary-background-disabled: transparent;
1450
+ --salt-palette-neutral-tertiary-border: transparent;
1451
+ --salt-palette-neutral-tertiary-border-disabled: transparent;
1452
+ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground);
1453
+ --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border);
1454
+ --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border);
1455
+ --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground);
1456
+ --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground);
1457
+ --salt-palette-positive-foreground-disabled: var(--salt-color-green-300-fade-foreground);
1458
+ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border);
1459
+ --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground);
1460
+ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground);
1461
+ --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border);
1462
+ --salt-palette-navigate-primary-background: transparent;
1463
+ --salt-palette-navigate-primary-background-active: transparent;
1464
+ --salt-palette-navigate-primary-background-hover: var(--salt-color-gray-700);
1465
+ --salt-palette-navigate-secondary-background: transparent;
1466
+ --salt-palette-navigate-secondary-background-active: transparent;
1467
+ --salt-palette-navigate-secondary-background-hover: var(--salt-color-gray-600);
1468
+ --salt-palette-navigate-tertiary-background: transparent;
1469
+ --salt-palette-navigate-tertiary-background-active: transparent;
1470
+ --salt-palette-navigate-tertiary-background-hover: var(--salt-color-gray-700);
1471
+ --salt-palette-navigate-indicator-activeDisabled: var(--salt-color-orange-400-fade-border);
1472
+ --salt-palette-track-border: var(--salt-color-gray-90);
1473
+ --salt-palette-track-border-disabled: var(--salt-color-gray-90-fade-border);
1474
+ --salt-palette-track-background: var(--salt-color-gray-300);
1475
+ --salt-palette-track-background-disabled: var(--salt-color-gray-300-fade-background);
1476
+ --salt-palette-accent-background-disabled: var(--salt-color-blue-500-fade-background);
1477
+ --salt-palette-accent-foreground-disabled: var(--salt-color-white-fade-foreground);
1478
+ --salt-palette-accent-border-disabled: var(--salt-color-blue-500-fade-border);
1348
1479
  }
1349
1480
 
1350
1481
  /* css/theme.css */