@vuu-ui/vuu-theme 0.0.27 → 0.5.4

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 (34) hide show
  1. package/LICENSE +201 -0
  2. package/css/characteristics/accent.css +17 -13
  3. package/css/characteristics/actionable.css +34 -34
  4. package/css/characteristics/container.css +14 -15
  5. package/css/characteristics/differential.css +5 -5
  6. package/css/characteristics/draggable.css +7 -7
  7. package/css/characteristics/editable.css +33 -35
  8. package/css/characteristics/focused.css +13 -13
  9. package/css/characteristics/measured.css +23 -20
  10. package/css/characteristics/navigable.css +23 -21
  11. package/css/characteristics/overlayable.css +10 -10
  12. package/css/characteristics/selectable.css +58 -69
  13. package/css/characteristics/separable.css +5 -14
  14. package/css/characteristics/status.css +13 -13
  15. package/css/characteristics/taggable.css +12 -12
  16. package/css/characteristics/target.css +7 -10
  17. package/css/characteristics/text.css +139 -131
  18. package/css/foundations/animation.css +70 -70
  19. package/css/foundations/color.css +105 -105
  20. package/css/foundations/delay.css +5 -5
  21. package/css/foundations/fade.css +43 -38
  22. package/css/foundations/icon.css +8 -8
  23. package/css/foundations/opacity.css +5 -5
  24. package/css/foundations/palette.css +239 -246
  25. package/css/foundations/shadow.css +21 -14
  26. package/css/foundations/size.css +32 -32
  27. package/css/foundations/typography.css +9 -20
  28. package/css/foundations/zindex.css +14 -14
  29. package/css/global.css +8 -15
  30. package/css/icons/icons.css +22 -4
  31. package/css/theme.css +0 -1
  32. package/index.css +1277 -3
  33. package/package.json +7 -5
  34. package/css/characteristics/droptarget.css +0 -15
package/css/characteristics/selectable.css CHANGED
@@ -1,70 +1,59 @@
1
- .uitk-theme {
2
- --uitk-selectable-cursor-hover: pointer;
3
- --uitk-selectable-cursor-selected: pointer;
4
- --uitk-selectable-cursor-blurSelected: pointer;
5
- --uitk-selectable-cursor-disabled: not-allowed;
6
-
7
- --uitk-selectable-borderStyle: solid;
8
- --uitk-selectable-borderStyle-hover: solid;
9
- --uitk-selectable-borderStyle-selected: solid;
10
- --uitk-selectable-borderStyle-blurSelected: solid;
11
-
12
- --uitk-selectable-borderWidth: 1px;
13
- --uitk-selectable-borderWidth-hover: 1px;
14
- --uitk-selectable-borderWidth-selected: 1px;
15
- --uitk-selectable-borderWidth-blurSelected: 1px;
16
-
17
- --uitk-selectable-borderColor: var(--uitk-palette-interact-border);
18
- --uitk-selectable-borderColor-hover: var(--uitk-palette-interact-border-hover);
19
- --uitk-selectable-borderColor-selected: var(--uitk-palette-interact-border-active);
20
- --uitk-selectable-borderColor-selectedDisabled: var(--uitk-palette-interact-border-activeDisabled);
21
- --uitk-selectable-borderColor-disabled: var(--uitk-palette-interact-border-disabled);
22
-
23
- --uitk-selectable-foreground: var(--uitk-palette-interact-foreground);
24
- --uitk-selectable-foreground-hover: var(--uitk-palette-interact-foreground-hover);
25
- --uitk-selectable-foreground-selected: var(--uitk-palette-interact-foreground-active);
26
- --uitk-selectable-foreground-blurSelected: var(--uitk-palette-interact-foreground-blurSelected);
27
- --uitk-selectable-foreground-partial: var(--uitk-palette-interact-foreground-partial);
28
- --uitk-selectable-foreground-disabled: var(--uitk-palette-interact-foreground-disabled);
29
- --uitk-selectable-foreground-partialDisabled: var(--uitk-palette-interact-foreground-partialDisabled);
30
- --uitk-selectable-foreground-selectedDisabled: var(--uitk-palette-interact-foreground-activeDisabled);
31
-
32
- --uitk-selectable-background: transparent;
33
- --uitk-selectable-background-hover: var(--uitk-palette-interact-background-hover);
34
- --uitk-selectable-background-selected: var(--uitk-palette-interact-background-active);
35
- --uitk-selectable-background-blurSelected: var(--uitk-palette-interact-background-blurSelected);
36
- --uitk-selectable-background-disabled: transparent;
37
-
38
- --uitk-selectable-cta-foreground: var(--uitk-palette-interact-primary-foreground);
39
- --uitk-selectable-cta-foreground-hover: var(--uitk-palette-interact-cta-foreground-hover);
40
- --uitk-selectable-cta-foreground-selected: var(--uitk-palette-interact-cta-foreground-active);
41
- --uitk-selectable-cta-foreground-selectedDisabled: var(--uitk-palette-interact-cta-foreground-activeDisabled);
42
- --uitk-selectable-cta-foreground-disabled: var(--uitk-palette-interact-primary-foreground-disabled);
43
- --uitk-selectable-cta-background: transparent;
44
- --uitk-selectable-cta-background-disabled: transparent;
45
- --uitk-selectable-cta-background-hover: var(--uitk-palette-interact-cta-background-hover);
46
- --uitk-selectable-cta-background-selected: var(--uitk-palette-interact-cta-background-active);
47
- --uitk-selectable-cta-background-selectedDisabled: var(--uitk-palette-interact-cta-background-activeDisabled);
48
-
49
- --uitk-selectable-primary-foreground: var(--uitk-palette-interact-primary-foreground);
50
- --uitk-selectable-primary-foreground-selected: var(--uitk-palette-interact-primary-foreground-active);
51
- --uitk-selectable-primary-foreground-selectedDisabled: var(--uitk-palette-interact-primary-foreground-activeDisabled);
52
- --uitk-selectable-primary-foreground-disabled: var(--uitk-palette-interact-primary-foreground-disabled);
53
- --uitk-selectable-primary-foreground-hover: var(--uitk-palette-interact-primary-foreground-hover);
54
- --uitk-selectable-primary-background: transparent;
55
- --uitk-selectable-primary-background-disabled: transparent;
56
- --uitk-selectable-primary-background-hover: var(--uitk-palette-interact-primary-background-hover);
57
- --uitk-selectable-primary-background-selected: var(--uitk-palette-interact-primary-background-active);
58
- --uitk-selectable-primary-background-selectedDisabled: var(--uitk-palette-interact-primary-background-activeDisabled);
59
-
60
- --uitk-selectable-secondary-foreground: var(--uitk-palette-interact-secondary-foreground);
61
- --uitk-selectable-secondary-foreground-selected: var(--uitk-palette-interact-secondary-foreground-active);
62
- --uitk-selectable-secondary-foreground-selectedDisabled: var(--uitk-palette-interact-secondary-foreground-activeDisabled);
63
- --uitk-selectable-secondary-foreground-disabled: var(--uitk-palette-interact-secondary-foreground-disabled);
64
- --uitk-selectable-secondary-foreground-hover: var(--uitk-palette-interact-secondary-foreground-hover);
65
- --uitk-selectable-secondary-background: transparent;
66
- --uitk-selectable-secondary-background-disabled: transparent;
67
- --uitk-selectable-secondary-background-hover: var(--uitk-palette-interact-secondary-background-hover);
68
- --uitk-selectable-secondary-background-selected: var(--uitk-palette-interact-secondary-background-active);
69
- --uitk-selectable-secondary-background-selectedDisabled: var(--uitk-palette-interact-secondary-background-activeDisabled);
1
+ .salt-theme {
2
+ --salt-selectable-cursor-hover: pointer;
3
+ --salt-selectable-cursor-selected: pointer;
4
+ --salt-selectable-cursor-blurSelected: pointer;
5
+ --salt-selectable-cursor-disabled: not-allowed;
6
+
7
+ --salt-selectable-borderStyle: solid;
8
+ --salt-selectable-borderStyle-hover: solid;
9
+ --salt-selectable-borderStyle-selected: solid;
10
+ --salt-selectable-borderStyle-blurSelected: solid;
11
+
12
+ --salt-selectable-borderColor: var(--salt-palette-interact-border);
13
+ --salt-selectable-borderColor-hover: var(--salt-palette-interact-border-hover);
14
+ --salt-selectable-borderColor-selected: var(--salt-palette-interact-border-active);
15
+ --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-interact-border-activeDisabled);
16
+ --salt-selectable-borderColor-disabled: var(--salt-palette-interact-border-disabled);
17
+
18
+ --salt-selectable-foreground-partial: var(--salt-palette-interact-foreground-partial);
19
+ --salt-selectable-foreground-partialDisabled: var(--salt-palette-interact-foreground-partialDisabled);
20
+
21
+ --salt-selectable-background: var(--salt-palette-interact-background);
22
+ --salt-selectable-background-hover: var(--salt-palette-interact-background-hover);
23
+ --salt-selectable-background-selected: var(--salt-palette-interact-background-active);
24
+ --salt-selectable-background-blurSelected: var(--salt-palette-interact-background-blurSelected);
25
+ --salt-selectable-background-disabled: var(--salt-palette-interact-background-disabled);
26
+
27
+ --salt-selectable-cta-foreground: var(--salt-palette-interact-foreground);
28
+ --salt-selectable-cta-foreground-hover: var(--salt-palette-interact-cta-foreground-hover);
29
+ --salt-selectable-cta-foreground-selected: var(--salt-palette-interact-cta-foreground-active);
30
+ --salt-selectable-cta-foreground-selectedDisabled: var(--salt-palette-interact-cta-foreground-activeDisabled);
31
+ --salt-selectable-cta-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
32
+ --salt-selectable-cta-background: var(--salt-palette-interact-background);
33
+ --salt-selectable-cta-background-disabled: var(--salt-palette-interact-background-disabled);
34
+ --salt-selectable-cta-background-hover: var(--salt-palette-interact-cta-background-hover);
35
+ --salt-selectable-cta-background-selected: var(--salt-palette-interact-cta-background-active);
36
+ --salt-selectable-cta-background-selectedDisabled: var(--salt-palette-interact-cta-background-activeDisabled);
37
+
38
+ --salt-selectable-primary-foreground: var(--salt-palette-interact-foreground);
39
+ --salt-selectable-primary-foreground-selected: var(--salt-palette-interact-primary-foreground-active);
40
+ --salt-selectable-primary-foreground-selectedDisabled: var(--salt-palette-interact-primary-foreground-activeDisabled);
41
+ --salt-selectable-primary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
42
+ --salt-selectable-primary-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
43
+ --salt-selectable-primary-background: var(--salt-palette-interact-background);
44
+ --salt-selectable-primary-background-disabled: var(--salt-palette-interact-background-disabled);
45
+ --salt-selectable-primary-background-hover: var(--salt-palette-interact-primary-background-hover);
46
+ --salt-selectable-primary-background-selected: var(--salt-palette-interact-primary-background-active);
47
+ --salt-selectable-primary-background-selectedDisabled: var(--salt-palette-interact-primary-background-activeDisabled);
48
+
49
+ --salt-selectable-secondary-foreground: var(--salt-palette-interact-foreground);
50
+ --salt-selectable-secondary-foreground-selected: var(--salt-palette-interact-secondary-foreground-active);
51
+ --salt-selectable-secondary-foreground-selectedDisabled: var(--salt-palette-interact-secondary-foreground-activeDisabled);
52
+ --salt-selectable-secondary-foreground-disabled: var(--salt-palette-interact-foreground-disabled);
53
+ --salt-selectable-secondary-foreground-hover: var(--salt-palette-interact-secondary-foreground-hover);
54
+ --salt-selectable-secondary-background: var(--salt-palette-interact-background);
55
+ --salt-selectable-secondary-background-disabled: var(--salt-palette-interact-background-disabled);
56
+ --salt-selectable-secondary-background-hover: var(--salt-palette-interact-secondary-background-hover);
57
+ --salt-selectable-secondary-background-selected: var(--salt-palette-interact-secondary-background-active);
58
+ --salt-selectable-secondary-background-selectedDisabled: var(--salt-palette-interact-secondary-background-activeDisabled);
70
59
  }
package/css/characteristics/separable.css CHANGED
@@ -1,16 +1,7 @@
1
- .uitk-theme {
2
- --uitk-separable-borderStyle: solid;
3
- --uitk-separable-borderWidth: 1px;
1
+ .salt-theme {
2
+ --salt-separable-borderStyle: solid;
4
3
 
5
- --uitk-separable-primary-background: var(--uitk-palette-interact-primary-background);
6
- --uitk-separable-primary-background-hover: var(--uitk-palette-interact-primary-background-hover);
7
- --uitk-separable-primary-background-active: var(--uitk-palette-interact-primary-background-active);
8
- --uitk-separable-primary-borderColor: var(--uitk-palette-neutral-border-high);
9
- --uitk-separable-primary-foreground: var(--uitk-palette-interact-primary-foreground);
10
- --uitk-separable-primary-foreground-hover: var(--uitk-palette-interact-primary-foreground-hover);
11
- --uitk-separable-primary-foreground-active: var(--uitk-palette-interact-primary-foreground-active);
12
-
13
- --uitk-separable-secondary-borderColor: var(--uitk-palette-neutral-border-medium);
14
-
15
- --uitk-separable-tertiary-borderColor: var(--uitk-palette-neutral-border-low);
4
+ --salt-separable-primary-borderColor: var(--salt-palette-neutral-primary-separator);
5
+ --salt-separable-secondary-borderColor: var(--salt-palette-neutral-secondary-separator);
6
+ --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-tertiary-separator);
16
7
  }
package/css/characteristics/status.css CHANGED
@@ -1,16 +1,16 @@
1
- .uitk-theme {
2
- --uitk-status-info-foreground: var(--uitk-palette-info-icon);
3
- --uitk-status-success-foreground: var(--uitk-palette-success-icon);
4
- --uitk-status-warning-foreground: var(--uitk-palette-warning-icon);
5
- --uitk-status-error-foreground: var(--uitk-palette-error-icon);
1
+ .salt-theme {
2
+ --salt-status-info-foreground: var(--salt-palette-info-foreground);
3
+ --salt-status-success-foreground: var(--salt-palette-success-foreground);
4
+ --salt-status-warning-foreground: var(--salt-palette-warning-foreground);
5
+ --salt-status-error-foreground: var(--salt-palette-error-foreground);
6
6
 
7
- --uitk-status-info-borderColor: var(--uitk-palette-info-border);
8
- --uitk-status-success-borderColor: var(--uitk-palette-success-border);
9
- --uitk-status-warning-borderColor: var(--uitk-palette-warning-border);
10
- --uitk-status-error-borderColor: var(--uitk-palette-error-border);
7
+ --salt-status-info-borderColor: var(--salt-palette-info-border);
8
+ --salt-status-success-borderColor: var(--salt-palette-success-border);
9
+ --salt-status-warning-borderColor: var(--salt-palette-warning-border);
10
+ --salt-status-error-borderColor: var(--salt-palette-error-border);
11
11
 
12
- --uitk-status-info-background-high: var(--uitk-palette-info-background-high);
13
- --uitk-status-success-background-high: var(--uitk-palette-success-background-high);
14
- --uitk-status-warning-background-high: var(--uitk-palette-warning-background-high);
15
- --uitk-status-error-background-high: var(--uitk-palette-error-background-high);
12
+ --salt-status-info-background-emphasize: var(--salt-palette-info-background-emphasize);
13
+ --salt-status-success-background-emphasize: var(--salt-palette-success-background-emphasize);
14
+ --salt-status-warning-background-emphasize: var(--salt-palette-warning-background-emphasize);
15
+ --salt-status-error-background-emphasize: var(--salt-palette-error-background-emphasize);
16
16
  }
package/css/characteristics/taggable.css CHANGED
@@ -1,15 +1,15 @@
1
- .uitk-theme {
2
- --uitk-taggable-cursor-hover: pointer;
3
- --uitk-taggable-cursor-active: pointer;
4
- --uitk-taggable-cursor-disabled: not-allowed;
1
+ .salt-theme {
2
+ --salt-taggable-cursor-hover: pointer;
3
+ --salt-taggable-cursor-active: pointer;
4
+ --salt-taggable-cursor-disabled: not-allowed;
5
5
 
6
- --uitk-taggable-background: var(--uitk-palette-interact-primary-background);
7
- --uitk-taggable-background-hover: var(--uitk-palette-interact-primary-background-hover);
8
- --uitk-taggable-background-active: var(--uitk-palette-interact-primary-background-active);
9
- --uitk-taggable-background-disabled: var(--uitk-palette-interact-primary-background-disabled);
6
+ --salt-taggable-background: var(--salt-palette-interact-primary-background);
7
+ --salt-taggable-background-hover: var(--salt-palette-interact-primary-background-hover);
8
+ --salt-taggable-background-active: var(--salt-palette-interact-primary-background-active);
9
+ --salt-taggable-background-disabled: var(--salt-palette-interact-primary-background-disabled);
10
10
 
11
- --uitk-taggable-foreground: var(--uitk-palette-interact-primary-foreground);
12
- --uitk-taggable-foreground-hover: var(--uitk-palette-interact-primary-foreground-hover);
13
- --uitk-taggable-foreground-active: var(--uitk-palette-interact-primary-foreground-active);
14
- --uitk-taggable-foreground-disabled: var(--uitk-palette-interact-primary-foreground-disabled);
11
+ --salt-taggable-foreground: var(--salt-palette-interact-primary-foreground);
12
+ --salt-taggable-foreground-hover: var(--salt-palette-interact-primary-foreground-hover);
13
+ --salt-taggable-foreground-active: var(--salt-palette-interact-primary-foreground-active);
14
+ --salt-taggable-foreground-disabled: var(--salt-palette-interact-primary-foreground-disabled);
15
15
  }
package/css/characteristics/target.css CHANGED
@@ -1,13 +1,10 @@
1
- .uitk-theme {
2
- --uitk-target-background-hover: var(--uitk-palette-interact-background-hover);
1
+ .salt-theme {
2
+ --salt-target-background-hover: var(--salt-palette-interact-background-hover);
3
3
 
4
- --uitk-target-borderColor-hover: var(--uitk-palette-interact-border-hover);
5
- --uitk-target-borderStyle: dashed;
6
- --uitk-target-borderStyle-hover: solid;
7
- --uitk-target-borderStyle-disabled: dashed;
8
- --uitk-target-borderWidth: 1px;
9
- --uitk-target-borderWidth-hover: 1px;
10
- --uitk-target-borderWidth-disabled: 1px;
4
+ --salt-target-borderColor-hover: var(--salt-palette-interact-border-hover);
5
+ --salt-target-borderStyle: dashed;
6
+ --salt-target-borderStyle-hover: solid;
7
+ --salt-target-borderStyle-disabled: dashed;
11
8
 
12
- --uitk-target-cursor-disabled: not-allowed;
9
+ --salt-target-cursor-disabled: not-allowed;
13
10
  }
package/css/characteristics/text.css CHANGED
@@ -1,184 +1,192 @@
1
- .uitk-theme {
2
- /* Body text (default), tokens that don't vary by density */
3
- --uitk-text-base-lineHeight: var(--uitk-typography-lineHeight);
4
- --uitk-text-fontFamily: var(--uitk-typography-fontFamily);
5
- --uitk-text-fontWeight: var(--uitk-typography-fontWeight-regular);
6
- --uitk-text-fontWeight-small: var(--uitk-typography-fontWeight-light);
7
- --uitk-text-fontWeight-strong: var(--uitk-typography-fontWeight-semiBold);
8
- --uitk-text-letterSpacing: 0;
9
- --uitk-text-textAlign: left;
10
- --uitk-text-textAlign-embedded: center;
11
- --uitk-text-textDecoration: none;
12
- --uitk-text-textTransform: none;
1
+ .salt-theme {
2
+ /* Misc */
3
+ --salt-text-letterSpacing: 0;
4
+ --salt-text-textAlign: left;
5
+ --salt-text-textAlign-embedded: center;
6
+ --salt-text-textDecoration: none;
7
+ --salt-text-textTransform: none;
8
+
9
+ /* Body text (should be used as default) */
10
+ --salt-text-fontFamily: var(--salt-typography-fontFamily);
11
+ --salt-text-fontWeight: var(--salt-typography-fontWeight-regular);
12
+ --salt-text-fontWeight-small: var(--salt-typography-fontWeight-light);
13
+ --salt-text-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
13
14
 
14
15
  /* H1 */
15
- --uitk-text-h1-fontWeight: var(--uitk-typography-fontWeight-bold);
16
- --uitk-text-h1-fontWeight-small: var(--uitk-typography-fontWeight-light);
17
- --uitk-text-h1-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
16
+ --salt-text-h1-fontWeight: var(--salt-typography-fontWeight-bold);
17
+ --salt-text-h1-fontWeight-small: var(--salt-typography-fontWeight-medium);
18
+ --salt-text-h1-fontWeight-strong: var(--salt-typography-fontWeight-extraBold);
18
19
 
19
20
  /* H2 */
20
- --uitk-text-h2-fontWeight: var(--uitk-typography-fontWeight-semiBold);
21
- --uitk-text-h2-fontWeight-small: var(--uitk-typography-fontWeight-regular);
22
- --uitk-text-h2-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
21
+ --salt-text-h2-fontWeight: var(--salt-typography-fontWeight-semiBold);
22
+ --salt-text-h2-fontWeight-small: var(--salt-typography-fontWeight-regular);
23
+ --salt-text-h2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
23
24
 
24
25
  /* H3 */
25
- --uitk-text-h3-fontWeight: var(--uitk-typography-fontWeight-semiBold);
26
- --uitk-text-h3-fontWeight-small: var(--uitk-typography-fontWeight-regular);
27
- --uitk-text-h3-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
26
+ --salt-text-h3-fontWeight: var(--salt-typography-fontWeight-semiBold);
27
+ --salt-text-h3-fontWeight-small: var(--salt-typography-fontWeight-regular);
28
+ --salt-text-h3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
28
29
 
29
30
  /* H4 */
30
- --uitk-text-h4-fontWeight: var(--uitk-typography-fontWeight-semiBold);
31
- --uitk-text-h4-fontWeight-small: var(--uitk-typography-fontWeight-regular);
32
- --uitk-text-h4-fontWeight-strong: var(--uitk-typography-fontWeight-extraBold);
31
+ --salt-text-h4-fontWeight: var(--salt-typography-fontWeight-semiBold);
32
+ --salt-text-h4-fontWeight-small: var(--salt-typography-fontWeight-regular);
33
+ --salt-text-h4-fontWeight-strong: var(--salt-typography-fontWeight-bold);
33
34
 
34
- /* Caption */
35
- --uitk-text-caption-fontStyle: normal;
36
- --uitk-text-caption-fontWeight: var(--uitk-typography-fontWeight-regular);
37
- --uitk-text-caption-fontWeight-strong: var(--uitk-typography-fontWeight-semiBold);
35
+ /* Label */
36
+ --salt-text-label-fontWeight: var(--salt-typography-fontWeight-regular);
37
+ --salt-text-label-fontWeight-small: var(--salt-typography-fontWeight-light);
38
+ --salt-text-label-fontWeight-strong: var(--salt-typography-fontWeight-semiBold);
38
39
 
39
- /* Help text */
40
- --uitk-text-help-fontStyle: italic;
41
- --uitk-text-help-fontWeight: var(--uitk-typography-fontWeight-regular);
40
+ /* Display text */
41
+ --salt-text-display1-fontWeight: var(--salt-typography-fontWeight-semiBold);
42
+ --salt-text-display1-fontWeight-strong: var(--salt-typography-fontWeight-bold);
43
+ --salt-text-display1-fontWeight-small: var(--salt-typography-fontWeight-regular);
42
44
 
43
- /* Figure text */
44
- --uitk-text-figure1-fontSize: 56px;
45
- --uitk-text-figure1-lineHeight: 74px;
46
- --uitk-text-figure1-fontWeight: var(--uitk-typography-fontWeight-semiBold);
45
+ --salt-text-display2-fontWeight: var(--salt-typography-fontWeight-semiBold);
46
+ --salt-text-display2-fontWeight-strong: var(--salt-typography-fontWeight-bold);
47
+ --salt-text-display2-fontWeight-small: var(--salt-typography-fontWeight-regular);
47
48
 
48
- --uitk-text-figure2-fontSize: 36px;
49
- --uitk-text-figure2-lineHeight: 48px;
50
- --uitk-text-figure2-fontWeight: var(--uitk-typography-fontWeight-semiBold);
51
-
52
- --uitk-text-figure3-lineHeight: 32px;
53
- --uitk-text-figure3-fontSize: 24px;
54
- --uitk-text-figure3-fontWeight: var(--uitk-typography-fontWeight-semiBold);
49
+ --salt-text-display3-fontWeight: var(--salt-typography-fontWeight-semiBold);
50
+ --salt-text-display3-fontWeight-strong: var(--salt-typography-fontWeight-bold);
51
+ --salt-text-display3-fontWeight-small: var(--salt-typography-fontWeight-regular);
55
52
 
56
53
  /* Colors */
57
- --uitk-text-background: transparent;
58
- --uitk-text-background-hover: transparent;
59
- --uitk-text-background-selected: var(--uitk-palette-neutral-highlight);
60
-
61
- --uitk-text-primary-foreground: var(--uitk-palette-neutral-primary-foreground);
62
- --uitk-text-primary-foreground-hover: var(--uitk-palette-neutral-primary-foreground);
63
- --uitk-text-primary-foreground-selected: var(--uitk-palette-neutral-primary-foreground);
64
- --uitk-text-primary-foreground-disabled: var(--uitk-palette-neutral-primary-foreground-disabled);
54
+ --salt-text-background-selected: var(--salt-palette-interact-background-active);
65
55
 
66
- --uitk-text-secondary-foreground: var(--uitk-palette-neutral-secondary-foreground);
67
- --uitk-text-secondary-foreground-hover: var(--uitk-palette-neutral-secondary-foreground);
68
- --uitk-text-secondary-foreground-selected: var(--uitk-palette-neutral-secondary-foreground);
69
- --uitk-text-secondary-foreground-disabled: var(--uitk-palette-neutral-secondary-foreground-disabled);
56
+ --salt-text-primary-foreground: var(--salt-palette-neutral-primary-foreground);
57
+ --salt-text-primary-foreground-disabled: var(--salt-palette-neutral-primary-foreground-disabled);
58
+ --salt-text-secondary-foreground: var(--salt-palette-neutral-secondary-foreground);
59
+ --salt-text-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled);
70
60
 
71
61
  /* Link */
72
- --uitk-text-link-foreground-hover: var(--uitk-palette-navigate-foreground-hover);
73
- --uitk-text-link-textDecoration: underline;
74
- --uitk-text-link-textDecoration-hover: none;
75
- --uitk-text-link-textDecoration-selected: underline;
62
+ --salt-text-link-foreground-hover: var(--salt-palette-navigate-foreground-hover);
63
+ --salt-text-link-foreground-active: var(--salt-palette-navigate-foreground-active);
64
+ --salt-text-link-foreground-visited: var(--salt-palette-navigate-foreground-visited);
65
+ --salt-text-link-textDecoration: underline;
66
+ --salt-text-link-textDecoration-hover: none;
67
+ --salt-text-link-textDecoration-selected: underline;
76
68
 
77
69
  /* Code */
78
- --uitk-text-code-fontFamily: var(--uitk-typography-fontFamily-code);
70
+ --salt-text-code-fontFamily: var(--salt-typography-fontFamily-code);
79
71
  }
80
72
 
81
73
  /* Sizes by density */
82
- .uitk-density-touch {
83
- --uitk-text-h1-fontSize: 42px;
84
- --uitk-text-h1-lineHeight: auto;
74
+ .salt-density-touch {
75
+ --salt-text-h1-fontSize: 42px;
76
+ --salt-text-h1-lineHeight: 54px;
77
+
78
+ --salt-text-h2-fontSize: 32px;
79
+ --salt-text-h2-lineHeight: 42px;
85
80
 
86
- --uitk-text-h2-fontSize: 32px;
87
- --uitk-text-h2-lineHeight: 36px;
81
+ --salt-text-h3-fontSize: 24px;
82
+ --salt-text-h3-lineHeight: 32px;
88
83
 
89
- --uitk-text-h3-fontSize: 24px;
90
- --uitk-text-h3-lineHeight: 26px;
84
+ --salt-text-h4-fontSize: 16px;
85
+ --salt-text-h4-lineHeight: 20px;
91
86
 
92
- --uitk-text-h4-fontSize: 16px;
93
- --uitk-text-h4-lineHeight: 22px;
87
+ --salt-text-label-fontSize: 14px;
88
+ --salt-text-label-lineHeight: 18px;
94
89
 
95
- --uitk-text-caption-fontSize: 14px;
96
- --uitk-text-caption-lineHeight: 16px;
97
- --uitk-text-caption-minHeight: 16px;
90
+ --salt-text-fontSize: 16px;
91
+ --salt-text-lineHeight: 20px;
92
+ --salt-text-minHeight: 20px;
98
93
 
99
- --uitk-text-help-fontSize: 14px;
100
- --uitk-text-help-lineHeight: 16px;
101
- --uitk-text-help-minHeight: 16px;
94
+ --salt-text-display1-fontSize: 84px;
95
+ --salt-text-display1-lineHeight: 109px;
102
96
 
103
- --uitk-text-fontSize: 16px;
104
- --uitk-text-lineHeight: 22px;
105
- --uitk-text-minHeight: 20px;
97
+ --salt-text-display2-fontSize: 58px;
98
+ --salt-text-display2-lineHeight: 76px;
99
+
100
+ --salt-text-display3-fontSize: 42px;
101
+ --salt-text-display3-lineHeight: 54px;
106
102
  }
107
103
 
108
- .uitk-density-low {
109
- --uitk-text-h1-fontSize: 32px;
110
- --uitk-text-h1-lineHeight: 42px;
104
+ .salt-density-low {
105
+ --salt-text-h1-fontSize: 32px;
106
+ --salt-text-h1-lineHeight: 42px;
107
+
108
+ --salt-text-h2-fontSize: 24px;
109
+ --salt-text-h2-lineHeight: 32px;
111
110
 
112
- --uitk-text-h2-fontSize: 24px;
113
- --uitk-text-h2-lineHeight: 32px;
111
+ --salt-text-h3-fontSize: 18px;
112
+ --salt-text-h3-lineHeight: 24px;
114
113
 
115
- --uitk-text-h3-fontSize: 18px;
116
- --uitk-text-h3-lineHeight: 26px;
114
+ --salt-text-h4-fontSize: 14px;
115
+ --salt-text-h4-lineHeight: 18px;
117
116
 
118
- --uitk-text-h4-fontSize: 14px;
119
- --uitk-text-h4-lineHeight: 18px;
117
+ --salt-text-label-fontSize: 12px;
118
+ --salt-text-label-lineHeight: 16px;
120
119
 
121
- --uitk-text-caption-fontSize: 12px;
122
- --uitk-text-caption-lineHeight: 14px;
123
- --uitk-text-caption-minHeight: 14px;
120
+ --salt-text-fontSize: 14px;
121
+ --salt-text-lineHeight: 18px;
122
+ --salt-text-minHeight: 18px;
124
123
 
125
- --uitk-text-help-fontSize: 12px;
126
- --uitk-text-help-lineHeight: 14px;
127
- --uitk-text-help-minHeight: 14px;
124
+ --salt-text-display1-fontSize: 68px;
125
+ --salt-text-display1-lineHeight: 88px;
128
126
 
129
- --uitk-text-fontSize: 14px;
130
- --uitk-text-lineHeight: 18px;
131
- --uitk-text-minHeight: 18px;
127
+ --salt-text-display2-fontSize: 46px;
128
+ --salt-text-display2-lineHeight: 60px;
129
+
130
+ --salt-text-display3-fontSize: 32px;
131
+ --salt-text-display3-lineHeight: 42px;
132
132
  }
133
133
 
134
- .uitk-density-medium {
135
- --uitk-text-h1-fontSize: 24px;
136
- --uitk-text-h1-lineHeight: 31px;
134
+ .salt-density-medium {
135
+ --salt-text-h1-fontSize: 24px;
136
+ --salt-text-h1-lineHeight: 32px;
137
+
138
+ --salt-text-h2-fontSize: 18px;
139
+ --salt-text-h2-lineHeight: 24px;
140
+
141
+ --salt-text-h3-fontSize: 14px;
142
+ --salt-text-h3-lineHeight: 18px;
137
143
 
138
- --uitk-text-h2-fontSize: 18px;
139
- --uitk-text-h2-lineHeight: 24px;
144
+ --salt-text-h4-fontSize: 12px;
145
+ --salt-text-h4-lineHeight: 16px;
140
146
 
141
- --uitk-text-h3-fontSize: 14px;
142
- --uitk-text-h3-lineHeight: 22px;
147
+ --salt-text-label-fontSize: 11px;
148
+ --salt-text-label-lineHeight: 14px;
143
149
 
144
- --uitk-text-h4-fontSize: 12px;
145
- --uitk-text-h4-lineHeight: 16px;
150
+ --salt-text-fontSize: 12px;
151
+ --salt-text-lineHeight: 16px;
152
+ --salt-text-minHeight: 16px;
146
153
 
147
- --uitk-text-caption-fontSize: 11px;
148
- --uitk-text-caption-lineHeight: 14px;
149
- --uitk-text-caption-minHeight: 14px;
154
+ --salt-text-display1-fontSize: 54px;
155
+ --salt-text-display1-lineHeight: 70px;
150
156
 
151
- --uitk-text-help-fontSize: 11px;
152
- --uitk-text-help-lineHeight: 14px;
153
- --uitk-text-help-minHeight: 14px;
157
+ --salt-text-display2-fontSize: 36px;
158
+ --salt-text-display2-lineHeight: 47px;
154
159
 
155
- --uitk-text-fontSize: 12px;
156
- --uitk-text-lineHeight: 16px;
157
- --uitk-text-minHeight: 16px;
160
+ --salt-text-display3-fontSize: 24px;
161
+ --salt-text-display3-lineHeight: 32px;
158
162
  }
159
163
 
160
- .uitk-density-high {
161
- --uitk-text-h1-fontSize: 18px;
162
- --uitk-text-h1-lineHeight: 24px;
164
+ .salt-density-high {
165
+ --salt-text-h1-fontSize: 18px;
166
+ --salt-text-h1-lineHeight: 24px;
167
+
168
+ --salt-text-h2-fontSize: 14px;
169
+ --salt-text-h2-lineHeight: 18px;
170
+
171
+ --salt-text-h3-fontSize: 12px;
172
+ --salt-text-h3-lineHeight: 16px;
163
173
 
164
- --uitk-text-h2-fontSize: 14px;
165
- --uitk-text-h2-lineHeight: 18px;
174
+ --salt-text-h4-fontSize: 11px;
175
+ --salt-text-h4-lineHeight: 14px;
166
176
 
167
- --uitk-text-h3-fontSize: 12px;
168
- --uitk-text-h3-lineHeight: 16px;
177
+ --salt-text-label-fontSize: 10px;
178
+ --salt-text-label-lineHeight: 13px;
169
179
 
170
- --uitk-text-h4-fontSize: 11px;
171
- --uitk-text-h4-lineHeight: 14px;
180
+ --salt-text-fontSize: 11px;
181
+ --salt-text-lineHeight: 14px;
182
+ --salt-text-minHeight: 14px;
172
183
 
173
- --uitk-text-caption-fontSize: 10px;
174
- --uitk-text-caption-lineHeight: 14px;
175
- --uitk-text-caption-minHeight: 14px;
184
+ --salt-text-display1-fontSize: 42px;
185
+ --salt-text-display1-lineHeight: 54px;
176
186
 
177
- --uitk-text-help-fontSize: 10px;
178
- --uitk-text-help-lineHeight: 13px;
179
- --uitk-text-help-minHeight: 14px;
187
+ --salt-text-display2-fontSize: 28px;
188
+ --salt-text-display2-lineHeight: 36px;
180
189
 
181
- --uitk-text-fontSize: 11px;
182
- --uitk-text-lineHeight: 14px;
183
- --uitk-text-minHeight: 14px;
190
+ --salt-text-display3-fontSize: 18px;
191
+ --salt-text-display3-lineHeight: 24px;
184
192
  }