@vuu-ui/vuu-theme 4.0.0-alpha.20 → 4.0.0-alpha.22

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 (37) hide show
  1. package/css/deprecated/characteristics.css +39 -0
  2. package/css/deprecated/foundations.css +1 -0
  3. package/css/foundations/alpha.css +0 -1
  4. package/css/foundations/animation.css +2 -1
  5. package/css/foundations/borderStyle.css +0 -1
  6. package/css/foundations/color.css +1 -8
  7. package/css/foundations/cursor.css +0 -1
  8. package/css/foundations/curve.css +9 -4
  9. package/css/foundations/duration.css +0 -1
  10. package/css/foundations/size.css +3 -1
  11. package/css/foundations/spacing.css +33 -0
  12. package/css/foundations/typography.css +6 -2
  13. package/css/foundations/zindex.css +2 -1
  14. package/css/global.css +1 -4
  15. package/css/next/characteristics/actionable.css +34 -24
  16. package/css/next/characteristics/category.css +100 -60
  17. package/css/next/characteristics/container.css +9 -7
  18. package/css/next/characteristics/content.css +1 -1
  19. package/css/next/characteristics/editable.css +5 -6
  20. package/css/next/characteristics/focused.css +3 -2
  21. package/css/next/characteristics/layout.css +12 -0
  22. package/css/next/characteristics/selectable.css +3 -9
  23. package/css/next/characteristics/sentiment.css +11 -1
  24. package/css/next/characteristics/separable.css +1 -1
  25. package/css/next/characteristics/text.css +78 -67
  26. package/css/next/deprecated/characteristics.css +111 -21
  27. package/css/next/deprecated/foundations.css +5 -0
  28. package/css/next/deprecated/palette.css +49 -2
  29. package/css/next/foundations/alpha.css +0 -1
  30. package/css/next/foundations/color.css +188 -2
  31. package/css/next/palette/accent.css +0 -2
  32. package/css/next/palette/alpha.css +18 -2
  33. package/css/next/palette/brand.css +6 -0
  34. package/css/next/palette/foreground.css +0 -2
  35. package/css/next/palette/neutral.css +0 -2
  36. package/css/theme-next.css +2 -2
  37. package/package.json +1 -1
package/css/deprecated/characteristics.css CHANGED
@@ -74,6 +74,42 @@
74
74
  --salt-text-textDecoration: var(--salt-typography-textDecoration-none);
75
75
  --salt-text-textTransform: none;
76
76
 
77
+ /* Text */
78
+ --salt-text-h1-fontFamily: var(--salt-text-heading-fontFamily);
79
+ --salt-text-h1-fontWeight: var(--salt-text-heading-fontWeight);
80
+ --salt-text-h1-fontWeight-small: var(--salt-text-heading-fontWeight-small);
81
+ --salt-text-h1-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
82
+ --salt-text-h2-fontFamily: var(--salt-text-heading-fontFamily);
83
+ --salt-text-h2-fontWeight: var(--salt-text-heading-fontWeight);
84
+ --salt-text-h2-fontWeight-small: var(--salt-text-heading-fontWeight-small);
85
+ --salt-text-h2-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
86
+ --salt-text-h3-fontFamily: var(--salt-text-heading-fontFamily);
87
+ --salt-text-h3-fontWeight: var(--salt-text-heading-fontWeight);
88
+ --salt-text-h3-fontWeight-small: var(--salt-text-heading-fontWeight-small);
89
+ --salt-text-h3-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
90
+ --salt-text-h4-fontFamily: var(--salt-text-heading-fontFamily);
91
+ --salt-text-h4-fontWeight: var(--salt-text-heading-fontWeight);
92
+ --salt-text-h4-fontWeight-small: var(--salt-text-heading-fontWeight-small);
93
+ --salt-text-h4-fontWeight-strong: var(--salt-text-heading-fontWeight-strong);
94
+ --salt-text-display1-fontFamily: var(--salt-text-display-fontFamily);
95
+ --salt-text-display1-fontWeight: var(--salt-text-display-fontWeight);
96
+ --salt-text-display1-fontWeight-small: var(--salt-text-display-fontWeight-small);
97
+ --salt-text-display1-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
98
+ --salt-text-display2-fontFamily: var(--salt-text-display-fontFamily);
99
+ --salt-text-display2-fontWeight: var(--salt-text-display-fontWeight);
100
+ --salt-text-display2-fontWeight-small: var(--salt-text-display-fontWeight-small);
101
+ --salt-text-display2-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
102
+ --salt-text-display3-fontFamily: var(--salt-text-display-fontFamily);
103
+ --salt-text-display3-fontWeight: var(--salt-text-display-fontWeight);
104
+ --salt-text-display3-fontWeight-small: var(--salt-text-display-fontWeight-small);
105
+ --salt-text-display3-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
106
+ --salt-text-display4-fontFamily: var(--salt-text-display-fontFamily);
107
+ --salt-text-display4-fontWeight: var(--salt-text-display-fontWeight);
108
+ --salt-text-display4-fontWeight-small: var(--salt-text-display-fontWeight-small);
109
+ --salt-text-display4-fontWeight-strong: var(--salt-text-display-fontWeight-strong);
110
+ --salt-text-label-fontFamily: var(--salt-text-fontFamily);
111
+ --salt-text-notation-fontFamily: var(--salt-text-fontFamily);
112
+
77
113
  /* Navigable */
78
114
  --salt-navigable-cursor-active: pointer;
79
115
  --salt-navigable-cursor-hover: pointer;
@@ -90,6 +126,9 @@
90
126
 
91
127
  /* Accent */
92
128
  --salt-accent-fontWeight: var(--salt-typography-fontWeight-semiBold); /* Use --salt-text-notation-fontWeight */
129
+ --salt-accent-background: var(--salt-palette-accent);
130
+ --salt-accent-background-disabled: var(--salt-palette-accent-disabled);
131
+ --salt-accent-borderColor: var(--salt-palette-accent);
93
132
 
94
133
  /* Track */
95
134
  --salt-track-borderStyle: solid;
package/css/deprecated/foundations.css CHANGED
@@ -40,6 +40,7 @@
40
40
  /* Typography */
41
41
  --salt-typography-fontFamily: var(--salt-typography-fontFamily-nunito);
42
42
  --salt-typography-fontFamily-code: var(--salt-typography-fontFamily-ptMono);
43
+ --salt-typography-textDecoration-italic: var(--salt-typography-fontStyle-italic);
43
44
 
44
45
  /* Alpha */
45
46
  --salt-color-black-15a: rgba(var(--salt-color-black-rgb), 0.15);
package/css/foundations/alpha.css CHANGED
@@ -1,4 +1,3 @@
1
- .salt-theme.vuu-theme,
2
1
  .salt-theme.vuu-theme {
3
2
  --salt-color-white-5a: rgba(var(--salt-color-white-rgb), 0.05);
4
3
  --salt-color-white-10a: rgba(var(--salt-color-white-rgb), 0.1);
package/css/foundations/animation.css CHANGED
@@ -1,7 +1,8 @@
1
1
  .salt-density-touch,
2
2
  .salt-density-low,
3
3
  .salt-density-medium,
4
- .salt-density-high {
4
+ .salt-density-high,
5
+ .salt-density-mobile {
5
6
  --salt-animation-opacity-start: 0;
6
7
  --salt-animation-opacity-end: 1;
7
8
  --salt-animation-scale-start: 0;
package/css/foundations/borderStyle.css CHANGED
@@ -1,4 +1,3 @@
1
- .salt-theme.vuu-theme,
2
1
  .salt-theme.vuu-theme {
3
2
  --salt-borderStyle-solid: solid;
4
3
  --salt-borderStyle-dashed: dashed;
package/css/foundations/color.css CHANGED
@@ -4,12 +4,5 @@
4
4
 
5
5
  --salt-color-black: rgb(var(--salt-color-black-rgb));
6
6
  --salt-color-white: rgb(var(--salt-color-white-rgb));
7
- }
8
-
9
- .salt-theme.vuu-theme {
10
- --salt-color-black-rgb: 0, 0, 0;
11
- --salt-color-white-rgb: 255, 255, 255;
12
-
13
- --salt-color-black: rgb(var(--salt-color-black-rgb));
14
- --salt-color-white: rgb(var(--salt-color-white-rgb));
7
+ --salt-color-transparent: transparent;
15
8
  }
package/css/foundations/cursor.css CHANGED
@@ -1,4 +1,3 @@
1
- .salt-theme.vuu-theme,
2
1
  .salt-theme.vuu-theme {
3
2
  --salt-cursor-active: pointer;
4
3
  --salt-cursor-disabled: not-allowed;
package/css/foundations/curve.css CHANGED
@@ -1,41 +1,46 @@
1
1
  .salt-density-high {
2
2
  --vuu2-curve-40: 4px;
3
3
  --vuu2-curve-60: 6px;
4
- --salt-curve-0: 0;
4
+ --salt-curve-0: 0px;
5
5
  --salt-curve-50: 2px;
6
6
  --salt-curve-100: 6px;
7
7
  --salt-curve-150: 3px;
8
8
  --salt-curve-200: 4px;
9
9
  --salt-curve-250: 5px;
10
+ --salt-curve-300: 6px;
10
11
  --salt-curve-999: 999px;
11
12
  }
12
13
 
13
14
  .salt-density-medium {
14
- --salt-curve-0: 0;
15
+ --salt-curve-0: 0px;
15
16
  --salt-curve-50: 2px;
16
17
  --salt-curve-100: 4px;
17
18
  --salt-curve-150: 6px;
18
19
  --salt-curve-200: 8px;
19
20
  --salt-curve-250: 10px;
21
+ --salt-curve-300: 12px;
20
22
  --salt-curve-999: 999px;
21
23
  }
22
24
 
23
25
  .salt-density-low {
24
- --salt-curve-0: 0;
26
+ --salt-curve-0: 0px;
25
27
  --salt-curve-50: 3px;
26
28
  --salt-curve-100: 6px;
27
29
  --salt-curve-150: 9px;
28
30
  --salt-curve-200: 12px;
29
31
  --salt-curve-250: 15px;
32
+ --salt-curve-300: 18px;
30
33
  --salt-curve-999: 999px;
31
34
  }
32
35
 
36
+ .salt-density-mobile,
33
37
  .salt-density-touch {
34
- --salt-curve-0: 0;
38
+ --salt-curve-0: 0px;
35
39
  --salt-curve-50: 4px;
36
40
  --salt-curve-100: 8px;
37
41
  --salt-curve-150: 12px;
38
42
  --salt-curve-200: 16px;
39
43
  --salt-curve-250: 20px;
44
+ --salt-curve-300: 24px;
40
45
  --salt-curve-999: 999px;
41
46
  }
package/css/foundations/duration.css CHANGED
@@ -1,4 +1,3 @@
1
- .salt-theme.vuu-theme,
2
1
  .salt-theme.vuu-theme {
3
2
  --salt-duration-instant: 0ms;
4
3
  --salt-duration-perceptible: 300ms;
package/css/foundations/size.css CHANGED
@@ -28,6 +28,7 @@
28
28
  --salt-size-bar-strong: 12px;
29
29
  }
30
30
 
31
+ .salt-density-mobile,
31
32
  .salt-density-touch {
32
33
  --salt-size-adornment: 12px;
33
34
  --salt-size-bar: 8px;
@@ -41,7 +42,8 @@
41
42
  .salt-density-touch,
42
43
  .salt-density-low,
43
44
  .salt-density-medium,
44
- .salt-density-high {
45
+ .salt-density-high,
46
+ .salt-density-mobile {
45
47
  --salt-size-fixed-100: 1px;
46
48
  --salt-size-fixed-200: 2px;
47
49
  --salt-size-fixed-300: 3px;
package/css/foundations/spacing.css CHANGED
@@ -39,7 +39,37 @@
39
39
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
40
40
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
41
41
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
42
+ }
43
+
44
+ .salt-density-mobile {
45
+ --salt-spacing-25: 4px;
46
+ --salt-spacing-50: 8px;
47
+ --salt-spacing-75: 12px;
48
+ --salt-spacing-100: 16px;
49
+ --salt-spacing-150: 18px;
50
+ --salt-spacing-200: 20px;
51
+ --salt-spacing-250: 22px;
52
+ --salt-spacing-300: 24px;
53
+ --salt-spacing-350: 26px;
54
+ --salt-spacing-400: 28px;
55
+ --salt-spacing-450: 30px;
56
+ --salt-spacing-500: 32px;
57
+ --salt-spacing-550: 34px;
58
+ --salt-spacing-600: 36px;
59
+ --salt-spacing-650: 38px;
60
+ --salt-spacing-700: 40px;
61
+ --salt-spacing-750: 42px;
62
+ --salt-spacing-800: 44px;
63
+ --salt-spacing-850: 46px;
64
+ --salt-spacing-900: 48px;
65
+ --salt-spacing-950: 50px;
66
+ }
42
67
 
68
+ .salt-density-touch,
69
+ .salt-density-low,
70
+ .salt-density-medium,
71
+ .salt-density-high,
72
+ .salt-density-mobile {
43
73
  --salt-spacing-fixed-100: 1px;
44
74
  --salt-spacing-fixed-200: 2px;
45
75
  --salt-spacing-fixed-300: 3px;
@@ -49,4 +79,7 @@
49
79
  --salt-spacing-fixed-700: 7px;
50
80
  --salt-spacing-fixed-800: 8px;
51
81
  --salt-spacing-fixed-900: 9px;
82
+ --salt-spacing-fixed-1000: 10px;
83
+ --salt-spacing-fixed-1100: 11px;
84
+ --salt-spacing-fixed-1200: 12px;
52
85
  }
package/css/foundations/typography.css CHANGED
@@ -1,5 +1,7 @@
1
- .salt-theme.vuu-theme,
2
1
  .salt-theme.vuu-theme {
2
+ --salt-typography-fontFamily-openSans: "Open Sans";
3
+ --salt-typography-fontFamily-amplitude: "Amplitude";
4
+ --salt-typography-fontFamily-ptMono: "PT Mono";
3
5
  --salt-typography-fontFamily-nunito: "Nunito Sans";
4
6
 
5
7
  --salt-typography-fontWeight-light: 300;
@@ -11,5 +13,7 @@
11
13
 
12
14
  --salt-typography-textDecoration-none: none;
13
15
  --salt-typography-textDecoration-underline: underline;
14
- --salt-typography-textDecoration-italic: italic;
16
+
17
+ --salt-typography-fontStyle-normal: normal;
18
+ --salt-typography-fontStyle-italic: italic;
15
19
  }
package/css/foundations/zindex.css CHANGED
@@ -1,7 +1,8 @@
1
1
  .salt-density-touch,
2
2
  .salt-density-low,
3
3
  .salt-density-medium,
4
- .salt-density-high {
4
+ .salt-density-high,
5
+ .salt-density-mobile {
5
6
  --salt-zIndex-default: 1;
6
7
  --salt-zIndex-popout: 1000;
7
8
  --salt-zIndex-appHeader: 1100;
package/css/global.css CHANGED
@@ -2,7 +2,6 @@
2
2
  * Have some global styles to simulate more realistic app. Currently only for Storybook.
3
3
  */
4
4
 
5
- .salt-theme.vuu-theme,
6
5
  .salt-theme.vuu-theme {
7
6
  color: var(--salt-content-primary-foreground);
8
7
  font-family: var(--salt-text-fontFamily);
@@ -11,18 +10,16 @@
11
10
  line-height: var(--salt-text-lineHeight);
12
11
  }
13
12
 
14
- .salt-theme.vuu-theme[data-mode="light"],
15
13
  .salt-theme.vuu-theme[data-mode="light"] {
16
14
  color-scheme: light;
17
15
  }
18
16
 
19
- .salt-theme.vuu-theme[data-mode="dark"],
20
17
  .salt-theme.vuu-theme[data-mode="dark"] {
21
18
  color-scheme: dark;
22
19
  }
23
20
 
24
21
  /* This uses the :where selector so it doesn't add any specificity */
25
- :where(.salt-theme) :focus-visible {
22
+ :where(.salt-theme.vuu-theme) :focus-visible {
26
23
  outline: var(--salt-focused-outline);
27
24
  }
28
25
 
package/css/next/characteristics/actionable.css CHANGED
@@ -13,7 +13,7 @@
13
13
  /* accented bordered */
14
14
  --salt-actionable-accented-background-active: var(--salt-palette-accent-weaker);
15
15
  --salt-actionable-accented-background-hover: var(--salt-palette-accent-weakest);
16
- --salt-actionable-accented-background: var(--salt-palette-alpha-none);
16
+ --salt-actionable-accented-background: var(--salt-color-transparent);
17
17
  --salt-actionable-accented-borderColor-active: var(--salt-palette-accent);
18
18
  --salt-actionable-accented-borderColor-hover: var(--salt-palette-accent);
19
19
  --salt-actionable-accented-borderColor: var(--salt-palette-accent);
@@ -28,10 +28,10 @@
28
28
  /* accented transparent */
29
29
  --salt-actionable-accented-subtle-background-active: var(--salt-palette-alpha-contrast-low);
30
30
  --salt-actionable-accented-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
31
- --salt-actionable-accented-subtle-background: var(--salt-palette-alpha-none);
32
- --salt-actionable-accented-subtle-borderColor-active: var(--salt-palette-alpha-none);
33
- --salt-actionable-accented-subtle-borderColor-hover: var(--salt-palette-alpha-none);
34
- --salt-actionable-accented-subtle-borderColor: var(--salt-palette-alpha-none);
31
+ --salt-actionable-accented-subtle-background: var(--salt-color-transparent);
32
+ --salt-actionable-accented-subtle-borderColor-active: var(--salt-color-transparent);
33
+ --salt-actionable-accented-subtle-borderColor-hover: var(--salt-color-transparent);
34
+ --salt-actionable-accented-subtle-borderColor: var(--salt-color-transparent);
35
35
  --salt-actionable-accented-subtle-foreground-active: var(--salt-palette-foreground-primary);
36
36
  --salt-actionable-accented-subtle-foreground-hover: var(--salt-palette-accent-stronger);
37
37
  --salt-actionable-accented-subtle-foreground: var(--salt-palette-foreground-primary);
@@ -50,7 +50,7 @@
50
50
  /* neutral bordered */
51
51
  --salt-actionable-background-active: var(--salt-palette-neutral-weaker);
52
52
  --salt-actionable-background-hover: var(--salt-palette-neutral-weakest);
53
- --salt-actionable-background: var(--salt-palette-alpha-none);
53
+ --salt-actionable-background: var(--salt-color-transparent);
54
54
  --salt-actionable-borderColor-active: var(--salt-palette-neutral);
55
55
  --salt-actionable-borderColor-hover: var(--salt-palette-neutral);
56
56
  --salt-actionable-borderColor: var(--salt-palette-neutral);
@@ -65,10 +65,10 @@
65
65
  /* neutral transparent - previous Secondary */
66
66
  --salt-actionable-subtle-background-active: var(--salt-palette-alpha-contrast-low);
67
67
  --salt-actionable-subtle-background-hover: var(--vuu-color-coral);
68
- --salt-actionable-subtle-background: var(--salt-palette-alpha-none);
69
- --salt-actionable-subtle-borderColor-active: var(--salt-palette-alpha-none);
68
+ --salt-actionable-subtle-background: var(--salt-color-transparent);
69
+ --salt-actionable-subtle-borderColor-active: var(--salt-color-transparent);
70
70
  --salt-actionable-subtle-borderColor-hover: var(--vuu-color-coral);
71
- --salt-actionable-subtle-borderColor: var(--salt-palette-alpha-none);
71
+ --salt-actionable-subtle-borderColor: var(--salt-color-transparent);
72
72
  --salt-actionable-subtle-foreground-active: var(--salt-palette-foreground-primary);
73
73
  --salt-actionable-subtle-foreground-hover: var(--salt-palette-foreground-primary);
74
74
  --salt-actionable-subtle-foreground: var(--salt-palette-foreground-primary);
@@ -87,7 +87,7 @@
87
87
  /* negative bordered */
88
88
  --salt-actionable-negative-background-active: var(--salt-palette-negative-weaker);
89
89
  --salt-actionable-negative-background-hover: var(--salt-palette-negative-weakest);
90
- --salt-actionable-negative-background: var(--salt-palette-alpha-none);
90
+ --salt-actionable-negative-background: var(--salt-color-transparent);
91
91
  --salt-actionable-negative-borderColor-active: var(--salt-palette-negative);
92
92
  --salt-actionable-negative-borderColor-hover: var(--salt-palette-negative);
93
93
  --salt-actionable-negative-borderColor: var(--salt-palette-negative);
@@ -102,10 +102,10 @@
102
102
  /* negative transparent */
103
103
  --salt-actionable-negative-subtle-background-active: var(--salt-palette-alpha-contrast-low);
104
104
  --salt-actionable-negative-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
105
- --salt-actionable-negative-subtle-background: var(--salt-palette-alpha-none);
106
- --salt-actionable-negative-subtle-borderColor-active: var(--salt-palette-alpha-none);
107
- --salt-actionable-negative-subtle-borderColor-hover: var(--salt-palette-alpha-none);
108
- --salt-actionable-negative-subtle-borderColor: var(--salt-palette-alpha-none);
105
+ --salt-actionable-negative-subtle-background: var(--salt-color-transparent);
106
+ --salt-actionable-negative-subtle-borderColor-active: var(--salt-color-transparent);
107
+ --salt-actionable-negative-subtle-borderColor-hover: var(--salt-color-transparent);
108
+ --salt-actionable-negative-subtle-borderColor: var(--salt-color-transparent);
109
109
  --salt-actionable-negative-subtle-foreground-active: var(--salt-palette-foreground-primary);
110
110
  --salt-actionable-negative-subtle-foreground-hover: var(--salt-palette-negative-stronger);
111
111
  --salt-actionable-negative-subtle-foreground: var(--salt-palette-negative-strong);
@@ -124,7 +124,7 @@
124
124
  /* positive bordered */
125
125
  --salt-actionable-positive-background-active: var(--salt-palette-positive-weaker);
126
126
  --salt-actionable-positive-background-hover: var(--salt-palette-positive-weakest);
127
- --salt-actionable-positive-background: var(--salt-palette-alpha-none);
127
+ --salt-actionable-positive-background: var(--salt-color-transparent);
128
128
  --salt-actionable-positive-borderColor-active: var(--salt-palette-positive);
129
129
  --salt-actionable-positive-borderColor-hover: var(--salt-palette-positive);
130
130
  --salt-actionable-positive-borderColor: var(--salt-palette-positive);
@@ -139,10 +139,10 @@
139
139
  /* positive transparent */
140
140
  --salt-actionable-positive-subtle-background-active: var(--salt-palette-alpha-contrast-low);
141
141
  --salt-actionable-positive-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
142
- --salt-actionable-positive-subtle-background: var(--salt-palette-alpha-none);
143
- --salt-actionable-positive-subtle-borderColor-active: var(--salt-palette-alpha-none);
144
- --salt-actionable-positive-subtle-borderColor-hover: var(--salt-palette-alpha-none);
145
- --salt-actionable-positive-subtle-borderColor: var(--salt-palette-alpha-none);
142
+ --salt-actionable-positive-subtle-background: var(--salt-color-transparent);
143
+ --salt-actionable-positive-subtle-borderColor-active: var(--salt-color-transparent);
144
+ --salt-actionable-positive-subtle-borderColor-hover: var(--salt-color-transparent);
145
+ --salt-actionable-positive-subtle-borderColor: var(--salt-color-transparent);
146
146
  --salt-actionable-positive-subtle-foreground-active: var(--salt-palette-foreground-primary);
147
147
  --salt-actionable-positive-subtle-foreground-hover: var(--salt-palette-positive-stronger);
148
148
  --salt-actionable-positive-subtle-foreground: var(--salt-palette-positive-strong);
@@ -161,7 +161,7 @@
161
161
  /* caution bordered */
162
162
  --salt-actionable-caution-background-active: var(--salt-palette-warning-weaker);
163
163
  --salt-actionable-caution-background-hover: var(--salt-palette-warning-weakest);
164
- --salt-actionable-caution-background: var(--salt-palette-alpha-none);
164
+ --salt-actionable-caution-background: var(--salt-color-transparent);
165
165
  --salt-actionable-caution-borderColor-active: var(--salt-palette-warning);
166
166
  --salt-actionable-caution-borderColor-hover: var(--salt-palette-warning);
167
167
  --salt-actionable-caution-borderColor: var(--salt-palette-warning);
@@ -176,11 +176,21 @@
176
176
  /* caution transparent */
177
177
  --salt-actionable-caution-subtle-background-active: var(--salt-palette-alpha-contrast-low);
178
178
  --salt-actionable-caution-subtle-background-hover: var(--salt-palette-alpha-contrast-lower);
179
- --salt-actionable-caution-subtle-background: var(--salt-palette-alpha-none);
180
- --salt-actionable-caution-subtle-borderColor-active: var(--salt-palette-alpha-none);
181
- --salt-actionable-caution-subtle-borderColor-hover: var(--salt-palette-alpha-none);
182
- --salt-actionable-caution-subtle-borderColor: var(--salt-palette-alpha-none);
179
+ --salt-actionable-caution-subtle-background: var(--salt-color-transparent);
180
+ --salt-actionable-caution-subtle-borderColor-active: var(--salt-color-transparent);
181
+ --salt-actionable-caution-subtle-borderColor-hover: var(--salt-color-transparent);
182
+ --salt-actionable-caution-subtle-borderColor: var(--salt-color-transparent);
183
183
  --salt-actionable-caution-subtle-foreground-active: var(--salt-palette-foreground-primary);
184
184
  --salt-actionable-caution-subtle-foreground-hover: var(--salt-palette-warning-stronger);
185
185
  --salt-actionable-caution-subtle-foreground: var(--salt-palette-warning-strong);
186
+
187
+ --salt-actionable-onSolid-subtle-background: var(--salt-color-transparent);
188
+ --salt-actionable-onSolid-subtle-background-active: var(--salt-palette-alpha-dark-low);
189
+ --salt-actionable-onSolid-subtle-background-hover: var(--salt-palette-alpha-dark-lower);
190
+ --salt-actionable-onSolid-subtle-borderColor: var(--salt-color-transparent);
191
+ --salt-actionable-onSolid-subtle-borderColor-active: var(--salt-color-transparent);
192
+ --salt-actionable-onSolid-subtle-borderColor-hover: var(--salt-color-transparent);
193
+ --salt-actionable-onSolid-subtle-foreground: var(--salt-palette-foreground-primary-alt);
194
+ --salt-actionable-onSolid-subtle-foreground-active: var(--salt-palette-foreground-primary-alt);
195
+ --salt-actionable-onSolid-subtle-foreground-hover: var(--salt-palette-foreground-primary-alt);
186
196
  }
package/css/next/characteristics/category.css CHANGED
@@ -1,121 +1,161 @@
1
1
  .salt-theme.salt-theme-next.vuu-theme {
2
- --salt-category-1-subtle-foreground: var(--salt-palette-categorical-1-strong);
3
- --salt-category-1-subtle-background: var(--salt-palette-categorical-1-weakest);
4
- --salt-category-1-subtle-borderColor: var(--salt-palette-categorical-1);
2
+ --salt-category-1-foreground: var(--salt-palette-categorical-1-strong);
3
+ --salt-category-1-background: var(--salt-palette-categorical-1-weakest);
4
+ --salt-category-1-borderColor: var(--salt-palette-categorical-1);
5
5
 
6
6
  --salt-category-1-bold-background: var(--salt-palette-categorical-1);
7
7
 
8
- --salt-category-2-subtle-foreground: var(--salt-palette-categorical-2-strong);
9
- --salt-category-2-subtle-background: var(--salt-palette-categorical-2-weakest);
10
- --salt-category-2-subtle-borderColor: var(--salt-palette-categorical-2);
8
+ --salt-category-1-dataviz: var(--salt-palette-categorical-1);
9
+
10
+ --salt-category-2-foreground: var(--salt-palette-categorical-2-strong);
11
+ --salt-category-2-background: var(--salt-palette-categorical-2-weakest);
12
+ --salt-category-2-borderColor: var(--salt-palette-categorical-2);
11
13
 
12
14
  --salt-category-2-bold-background: var(--salt-palette-categorical-2);
13
15
 
14
- --salt-category-3-subtle-foreground: var(--salt-palette-categorical-3-strong);
15
- --salt-category-3-subtle-background: var(--salt-palette-categorical-3-weakest);
16
- --salt-category-3-subtle-borderColor: var(--salt-palette-categorical-3);
16
+ --salt-category-2-dataviz: var(--salt-palette-categorical-2);
17
+
18
+ --salt-category-3-foreground: var(--salt-palette-categorical-3-strong);
19
+ --salt-category-3-background: var(--salt-palette-categorical-3-weakest);
20
+ --salt-category-3-borderColor: var(--salt-palette-categorical-3);
17
21
 
18
22
  --salt-category-3-bold-background: var(--salt-palette-categorical-3);
19
23
 
20
- --salt-category-4-subtle-foreground: var(--salt-palette-categorical-4-strong);
21
- --salt-category-4-subtle-background: var(--salt-palette-categorical-4-weakest);
22
- --salt-category-4-subtle-borderColor: var(--salt-palette-categorical-4);
24
+ --salt-category-3-dataviz: var(--salt-palette-categorical-3);
25
+
26
+ --salt-category-4-foreground: var(--salt-palette-categorical-4-strong);
27
+ --salt-category-4-background: var(--salt-palette-categorical-4-weakest);
28
+ --salt-category-4-borderColor: var(--salt-palette-categorical-4);
23
29
 
24
30
  --salt-category-4-bold-background: var(--salt-palette-categorical-4);
25
31
 
26
- --salt-category-5-subtle-foreground: var(--salt-palette-categorical-5-strong);
27
- --salt-category-5-subtle-background: var(--salt-palette-categorical-5-weakest);
28
- --salt-category-5-subtle-borderColor: var(--salt-palette-categorical-5);
32
+ --salt-category-4-dataviz: var(--salt-palette-categorical-4);
33
+
34
+ --salt-category-5-foreground: var(--salt-palette-categorical-5-strong);
35
+ --salt-category-5-background: var(--salt-palette-categorical-5-weakest);
36
+ --salt-category-5-borderColor: var(--salt-palette-categorical-5);
29
37
 
30
38
  --salt-category-5-bold-background: var(--salt-palette-categorical-5);
31
39
 
32
- --salt-category-6-subtle-foreground: var(--salt-palette-categorical-6-strong);
33
- --salt-category-6-subtle-background: var(--salt-palette-categorical-6-weakest);
34
- --salt-category-6-subtle-borderColor: var(--salt-palette-categorical-6);
40
+ --salt-category-5-dataviz: var(--salt-palette-categorical-5);
41
+
42
+ --salt-category-6-foreground: var(--salt-palette-categorical-6-strong);
43
+ --salt-category-6-background: var(--salt-palette-categorical-6-weakest);
44
+ --salt-category-6-borderColor: var(--salt-palette-categorical-6);
35
45
 
36
46
  --salt-category-6-bold-background: var(--salt-palette-categorical-6);
37
47
 
38
- --salt-category-7-subtle-foreground: var(--salt-palette-categorical-7-strong);
39
- --salt-category-7-subtle-background: var(--salt-palette-categorical-7-weakest);
40
- --salt-category-7-subtle-borderColor: var(--salt-palette-categorical-7);
48
+ --salt-category-6-dataviz: var(--salt-palette-categorical-6);
49
+
50
+ --salt-category-7-foreground: var(--salt-palette-categorical-7-strong);
51
+ --salt-category-7-background: var(--salt-palette-categorical-7-weakest);
52
+ --salt-category-7-borderColor: var(--salt-palette-categorical-7);
41
53
 
42
54
  --salt-category-7-bold-background: var(--salt-palette-categorical-7);
43
55
 
44
- --salt-category-8-subtle-foreground: var(--salt-palette-categorical-8-strong);
45
- --salt-category-8-subtle-background: var(--salt-palette-categorical-8-weakest);
46
- --salt-category-8-subtle-borderColor: var(--salt-palette-categorical-8);
56
+ --salt-category-7-dataviz: var(--salt-palette-categorical-7);
57
+
58
+ --salt-category-8-foreground: var(--salt-palette-categorical-8-strong);
59
+ --salt-category-8-background: var(--salt-palette-categorical-8-weakest);
60
+ --salt-category-8-borderColor: var(--salt-palette-categorical-8);
47
61
 
48
62
  --salt-category-8-bold-background: var(--salt-palette-categorical-8);
49
63
 
50
- --salt-category-9-subtle-foreground: var(--salt-palette-categorical-9-strong);
51
- --salt-category-9-subtle-background: var(--salt-palette-categorical-9-weakest);
52
- --salt-category-9-subtle-borderColor: var(--salt-palette-categorical-9);
64
+ --salt-category-8-dataviz: var(--salt-palette-categorical-8);
65
+
66
+ --salt-category-9-foreground: var(--salt-palette-categorical-9-strong);
67
+ --salt-category-9-background: var(--salt-palette-categorical-9-weakest);
68
+ --salt-category-9-borderColor: var(--salt-palette-categorical-9);
53
69
 
54
70
  --salt-category-9-bold-background: var(--salt-palette-categorical-9);
55
71
 
56
- --salt-category-10-subtle-foreground: var(--salt-palette-categorical-10-strong);
57
- --salt-category-10-subtle-background: var(--salt-palette-categorical-10-weakest);
58
- --salt-category-10-subtle-borderColor: var(--salt-palette-categorical-10);
72
+ --salt-category-9-dataviz: var(--salt-palette-categorical-9);
73
+
74
+ --salt-category-10-foreground: var(--salt-palette-categorical-10-strong);
75
+ --salt-category-10-background: var(--salt-palette-categorical-10-weakest);
76
+ --salt-category-10-borderColor: var(--salt-palette-categorical-10);
59
77
 
60
78
  --salt-category-10-bold-background: var(--salt-palette-categorical-10);
61
79
 
62
- --salt-category-11-subtle-foreground: var(--salt-palette-categorical-11-strong);
63
- --salt-category-11-subtle-background: var(--salt-palette-categorical-11-weakest);
64
- --salt-category-11-subtle-borderColor: var(--salt-palette-categorical-11);
80
+ --salt-category-10-dataviz: var(--salt-palette-categorical-10);
81
+
82
+ --salt-category-11-foreground: var(--salt-palette-categorical-11-strong);
83
+ --salt-category-11-background: var(--salt-palette-categorical-11-weakest);
84
+ --salt-category-11-borderColor: var(--salt-palette-categorical-11);
65
85
 
66
86
  --salt-category-11-bold-background: var(--salt-palette-categorical-11);
67
87
 
68
- --salt-category-12-subtle-foreground: var(--salt-palette-categorical-12-strong);
69
- --salt-category-12-subtle-background: var(--salt-palette-categorical-12-weakest);
70
- --salt-category-12-subtle-borderColor: var(--salt-palette-categorical-12);
88
+ --salt-category-11-dataviz: var(--salt-palette-categorical-11);
89
+
90
+ --salt-category-12-foreground: var(--salt-palette-categorical-12-strong);
91
+ --salt-category-12-background: var(--salt-palette-categorical-12-weakest);
92
+ --salt-category-12-borderColor: var(--salt-palette-categorical-12);
71
93
 
72
94
  --salt-category-12-bold-background: var(--salt-palette-categorical-12);
73
95
 
74
- --salt-category-13-subtle-foreground: var(--salt-palette-categorical-13-strong);
75
- --salt-category-13-subtle-background: var(--salt-palette-categorical-13-weakest);
76
- --salt-category-13-subtle-borderColor: var(--salt-palette-categorical-13);
96
+ --salt-category-12-dataviz: var(--salt-palette-categorical-12);
97
+
98
+ --salt-category-13-foreground: var(--salt-palette-categorical-13-strong);
99
+ --salt-category-13-background: var(--salt-palette-categorical-13-weakest);
100
+ --salt-category-13-borderColor: var(--salt-palette-categorical-13);
77
101
 
78
102
  --salt-category-13-bold-background: var(--salt-palette-categorical-13);
79
103
 
80
- --salt-category-14-subtle-foreground: var(--salt-palette-categorical-14-strong);
81
- --salt-category-14-subtle-background: var(--salt-palette-categorical-14-weakest);
82
- --salt-category-14-subtle-borderColor: var(--salt-palette-categorical-14);
104
+ --salt-category-13-dataviz: var(--salt-palette-categorical-13);
105
+
106
+ --salt-category-14-foreground: var(--salt-palette-categorical-14-strong);
107
+ --salt-category-14-background: var(--salt-palette-categorical-14-weakest);
108
+ --salt-category-14-borderColor: var(--salt-palette-categorical-14);
83
109
 
84
110
  --salt-category-14-bold-background: var(--salt-palette-categorical-14);
85
111
 
86
- --salt-category-15-subtle-foreground: var(--salt-palette-categorical-15-strong);
87
- --salt-category-15-subtle-background: var(--salt-palette-categorical-15-weakest);
88
- --salt-category-15-subtle-borderColor: var(--salt-palette-categorical-15);
112
+ --salt-category-14-dataviz: var(--salt-palette-categorical-14);
113
+
114
+ --salt-category-15-foreground: var(--salt-palette-categorical-15-strong);
115
+ --salt-category-15-background: var(--salt-palette-categorical-15-weakest);
116
+ --salt-category-15-borderColor: var(--salt-palette-categorical-15);
89
117
 
90
118
  --salt-category-15-bold-background: var(--salt-palette-categorical-15);
91
119
 
92
- --salt-category-16-subtle-foreground: var(--salt-palette-categorical-16-strong);
93
- --salt-category-16-subtle-background: var(--salt-palette-categorical-16-weakest);
94
- --salt-category-16-subtle-borderColor: var(--salt-palette-categorical-16);
120
+ --salt-category-15-dataviz: var(--salt-palette-categorical-15);
121
+
122
+ --salt-category-16-foreground: var(--salt-palette-categorical-16-strong);
123
+ --salt-category-16-background: var(--salt-palette-categorical-16-weakest);
124
+ --salt-category-16-borderColor: var(--salt-palette-categorical-16);
95
125
 
96
126
  --salt-category-16-bold-background: var(--salt-palette-categorical-16);
97
127
 
98
- --salt-category-17-subtle-foreground: var(--salt-palette-categorical-17-strong);
99
- --salt-category-17-subtle-background: var(--salt-palette-categorical-17-weakest);
100
- --salt-category-17-subtle-borderColor: var(--salt-palette-categorical-17);
128
+ --salt-category-16-dataviz: var(--salt-palette-categorical-16);
129
+
130
+ --salt-category-17-foreground: var(--salt-palette-categorical-17-strong);
131
+ --salt-category-17-background: var(--salt-palette-categorical-17-weakest);
132
+ --salt-category-17-borderColor: var(--salt-palette-categorical-17);
101
133
 
102
134
  --salt-category-17-bold-background: var(--salt-palette-categorical-17);
103
135
 
104
- --salt-category-18-subtle-foreground: var(--salt-palette-categorical-18-strong);
105
- --salt-category-18-subtle-background: var(--salt-palette-categorical-18-weakest);
106
- --salt-category-18-subtle-borderColor: var(--salt-palette-categorical-18);
136
+ --salt-category-17-dataviz: var(--salt-palette-categorical-17);
137
+
138
+ --salt-category-18-foreground: var(--salt-palette-categorical-18-strong);
139
+ --salt-category-18-background: var(--salt-palette-categorical-18-weakest);
140
+ --salt-category-18-borderColor: var(--salt-palette-categorical-18);
107
141
 
108
142
  --salt-category-18-bold-background: var(--salt-palette-categorical-18);
109
143
 
110
- --salt-category-19-subtle-foreground: var(--salt-palette-categorical-19-strong);
111
- --salt-category-19-subtle-background: var(--salt-palette-categorical-19-weakest);
112
- --salt-category-19-subtle-borderColor: var(--salt-palette-categorical-19);
144
+ --salt-category-18-dataviz: var(--salt-palette-categorical-18);
145
+
146
+ --salt-category-19-foreground: var(--salt-palette-categorical-19-strong);
147
+ --salt-category-19-background: var(--salt-palette-categorical-19-weakest);
148
+ --salt-category-19-borderColor: var(--salt-palette-categorical-19);
113
149
 
114
150
  --salt-category-19-bold-background: var(--salt-palette-categorical-19);
115
151
 
116
- --salt-category-20-subtle-foreground: var(--salt-palette-categorical-20-strong);
117
- --salt-category-20-subtle-background: var(--salt-palette-categorical-20-weakest);
118
- --salt-category-20-subtle-borderColor: var(--salt-palette-categorical-20);
152
+ --salt-category-19-dataviz: var(--salt-palette-categorical-19);
153
+
154
+ --salt-category-20-foreground: var(--salt-palette-categorical-20-strong);
155
+ --salt-category-20-background: var(--salt-palette-categorical-20-weakest);
156
+ --salt-category-20-borderColor: var(--salt-palette-categorical-20);
119
157
 
120
158
  --salt-category-20-bold-background: var(--salt-palette-categorical-20);
159
+
160
+ --salt-category-20-dataviz: var(--salt-palette-categorical-20);
121
161
  }