@hopper-ui/tokens 3.5.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +109 -0
  2. package/dist/dark/tokens.css +268 -227
  3. package/dist/fonts.css +2 -2
  4. package/dist/tokens.css +229 -190
  5. package/package.json +7 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,114 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 4.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - c5c6b30: ## @hopper-ui/tokens
8
+
9
+ **Added**
10
+
11
+ | Token |
12
+ | ------------------------------------- |
13
+ | danger-text-selected |
14
+ | danger-border-selected |
15
+ | danger-icon-selected |
16
+ | danger-icon-weak-hover |
17
+ | danger-icon-weak-press |
18
+ | danger-surface-selected |
19
+ | danger-surface-weak-hover |
20
+ | danger-surface-weak-press |
21
+ | danger-text-weak-hover |
22
+ | danger-text-weak-press |
23
+ | decorative-option5-surface-weak-hover |
24
+ | neutral-surface-weak-selected |
25
+ | neutral-surface-weakest-selected |
26
+ | neutral-border-selected |
27
+ | neutral-icon-selected |
28
+ | neutral-icon-strong-hover |
29
+ | neutral-icon-weak-press |
30
+ | neutral-surface-selected |
31
+ | neutral-text-weak-hover |
32
+ | neutral-text-weak-press |
33
+ | primary-border-selected |
34
+ | primary-icon-selected |
35
+ | primary-surface-selected |
36
+ | primary-surface-strong-selected |
37
+ | primary-surface-weak-hover |
38
+ | primary-surface-weak-press |
39
+ | primary-text-selected |
40
+ | upsell-border-selected |
41
+ | upsell-icon-selected |
42
+ | upsell-icon-hover |
43
+ | upsell-icon-weak-hover |
44
+ | upsell-icon-weak-press |
45
+ | upsell-surface-selected |
46
+ | upsell-surface-weak-hover |
47
+ | upsell-surface-weak-press |
48
+ | upsell-text-selected |
49
+ | upsell-text-weak |
50
+ | upsell-text-weak-hover |
51
+ | upsell-text-weak-press |
52
+
53
+ **Renamed**
54
+
55
+ Use this as a reference to fix all breaking changes.
56
+
57
+ | Old Token name | New Token name |
58
+ | ----------------------------- | ---------------------------- |
59
+ | danger-border-active | danger-border-press |
60
+ | danger-icon-active | danger-icon-press |
61
+ | danger-text-active | danger-text-press |
62
+ | danger-surface-active | danger-surface-press |
63
+ | neutral-border-active | neutral-border-press |
64
+ | neutral-icon-active | neutral-icon-press |
65
+ | neutral-surface-active | neutral-surface-press |
66
+ | neutral-surface-weak-active | neutral-surface-weak-press |
67
+ | neutral-text-active | neutral-text-press |
68
+ | primary-border-active | primary-border-press |
69
+ | primary-icon-active | primary-icon-press |
70
+ | primary-surface-active | primary-surface-press |
71
+ | primary-text-active | primary-text-press |
72
+ | primary-surface-strong-active | primary-surface-strong-press |
73
+ | upsell-border-active | upsell-border-press |
74
+ | upsell-icon-active | upsell-icon-press |
75
+ | upsell-surface-active | upsell-surface-press |
76
+ | upsell-text-active | upsell-text-press |
77
+
78
+ **Updated**
79
+
80
+ | Token |
81
+ | ---------------------------- |
82
+ | danger-surface-hover |
83
+ | danger-surface-strong |
84
+ | danger-surface-strong-hover |
85
+ | danger-text-weak |
86
+ | status-progress-text |
87
+ | status-progress-icon |
88
+ | primary-surface-strong-hover |
89
+ | primary-text |
90
+ | primary-surface-hover |
91
+ | upsell-surface-hover |
92
+ | upsell-surface-weak |
93
+ | upsell-text |
94
+ | upsell-icon |
95
+ | upsell-text-hover |
96
+
97
+ ## @hopper-ui/components
98
+
99
+ - Added a press state to Links
100
+ - Added a press state to Buttons
101
+ - Added a press state to Checkbbox
102
+ - Added a press state to Switch
103
+ - Added a press state to Radio
104
+ - Added numerous tests to test Pressed States of components
105
+
106
+ ## 3.5.1
107
+
108
+ ### Patch Changes
109
+
110
+ - f769b65: Swapped the ABC Favorit font for an alternate version
111
+
3
112
  ## 3.5.0
4
113
 
5
114
  ### Minor Changes
package/dist/dark/tokens.css CHANGED
@@ -1,265 +1,306 @@
1
1
  [data-mode="dark"] {
2
- --hop-upsell-border-active: var(--hop-sunken-treasure-500);
3
- --hop-upsell-text-active: var(--hop-sunken-treasure-300);
4
- --hop-upsell-icon-weakest: var(--hop-sunken-treasure-100);
5
- --hop-upsell-icon-weak: var(--hop-sunken-treasure-300);
6
- --hop-upsell-border: var(--hop-sunken-treasure-200);
7
- --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
8
- --hop-upsell-border-disabled: var(--hop-sunken-treasure-700);
9
- --hop-upsell-icon-active: var(--hop-sunken-treasure-300);
10
- --hop-upsell-surface-weak: var(--hop-sunken-treasure-800);
11
- --hop-upsell-surface-disabled: var(--hop-sunken-treasure-700);
12
- --hop-upsell-text: var(--hop-sunken-treasure-900);
13
- --hop-upsell-icon: var(--hop-sunken-treasure-900);
14
- --hop-upsell-text-hover: var(--hop-sunken-treasure-700);
15
- --hop-upsell-text-disabled: var(--hop-sunken-treasure-300);
16
- --hop-upsell-surface-active: var(--hop-sunken-treasure-800);
17
- --hop-upsell-surface: var(--hop-sunken-treasure-50);
18
- --hop-danger-border-active: var(--hop-amanita-400);
19
- --hop-danger-icon-active: var(--hop-amanita-300);
20
- --hop-danger-text-active: var(--hop-amanita-300);
21
- --hop-danger-surface: var(--hop-amanita-200);
22
- --hop-danger-text-hover: var(--hop-amanita-200);
23
- --hop-danger-surface-disabled: var(--hop-amanita-600);
24
- --hop-danger-surface-hover: var(--hop-amanita-200);
25
- --hop-danger-surface-strong: var(--hop-amanita-300);
26
- --hop-danger-surface-strong-hover: var(--hop-amanita-200);
27
- --hop-danger-surface-weak: var(--hop-amanita-900);
2
+ --hop-danger-border: var(--hop-amanita-500);
3
+ --hop-danger-border-selected: var(--hop-amanita-100);
4
+ --hop-danger-border-press: var(--hop-amanita-300);
28
5
  --hop-danger-border-strong: var(--hop-amanita-300);
29
6
  --hop-danger-icon: var(--hop-amanita-900);
7
+ --hop-danger-icon-selected: var(--hop-amanita-300);
8
+ --hop-danger-icon-disabled: var(--hop-amanita-600);
9
+ --hop-danger-icon-hover: var(--hop-amanita-200);
10
+ --hop-danger-icon-press: var(--hop-amanita-50);
11
+ --hop-danger-icon-strong: var(--hop-samoyed);
12
+ --hop-danger-icon-strong-hover: var(--hop-samoyed);
30
13
  --hop-danger-icon-weak: var(--hop-amanita-100);
14
+ --hop-danger-icon-weak-hover: var(--hop-amanita-200);
15
+ --hop-danger-icon-weak-press: var(--hop-amanita-300);
16
+ --hop-danger-surface: var(--hop-amanita-200);
17
+ --hop-danger-surface-selected: var(--hop-amanita-800);
18
+ --hop-danger-surface-disabled: var(--hop-amanita-600);
19
+ --hop-danger-surface-hover: var(--hop-amanita-300);
20
+ --hop-danger-surface-press: var(--hop-amanita-600);
21
+ --hop-danger-surface-strong: var(--hop-amanita-400);
22
+ --hop-danger-surface-strong-hover: var(--hop-amanita-500);
23
+ --hop-danger-surface-weak: var(--hop-amanita-900);
24
+ --hop-danger-surface-weak-hover: var(--hop-amanita-700);
25
+ --hop-danger-surface-weak-press: var(--hop-amanita-600);
31
26
  --hop-danger-text: var(--hop-amanita-900);
32
- --hop-danger-surface-active: var(--hop-amanita-800);
33
- --hop-danger-text-weak: var(--hop-amanita-100);
27
+ --hop-danger-text-selected: var(--hop-amanita-100);
28
+ --hop-danger-text-disabled: var(--hop-amanita-600);
29
+ --hop-danger-text-hover: var(--hop-amanita-200);
30
+ --hop-danger-text-press: var(--hop-amanita-50);
34
31
  --hop-danger-text-strong: var(--hop-samoyed);
35
32
  --hop-danger-text-strong-hover: var(--hop-samoyed);
36
- --hop-danger-icon-strong: var(--hop-samoyed);
37
- --hop-danger-icon-hover: var(--hop-amanita-200);
38
- --hop-danger-text-disabled: var(--hop-amanita-600);
39
- --hop-danger-icon-disabled: var(--hop-amanita-600);
40
- --hop-danger-border: var(--hop-amanita-500);
41
- --hop-primary-icon-active: var(--hop-sapphire-200);
42
- --hop-primary-border-active: var(--hop-sapphire-300);
43
- --hop-primary-text-active: var(--hop-sapphire-200);
44
- --hop-primary-icon-strong: var(--hop-samoyed);
45
- --hop-primary-icon-strong-hover: var(--hop-sapphire-300);
46
- --hop-primary-icon: var(--hop-sapphire-200);
47
- --hop-primary-border-focus: var(--hop-sapphire-200);
48
- --hop-primary-border: var(--hop-sapphire-300);
49
- --hop-primary-icon-hover: var(--hop-sapphire-300);
50
- --hop-primary-icon-disabled: var(--hop-sapphire-700);
51
- --hop-primary-surface-disabled: var(--hop-sapphire-700);
52
- --hop-primary-surface-focus: var(--hop-sapphire-900);
53
- --hop-primary-text-disabled: var(--hop-sapphire-700);
54
- --hop-primary-surface: var(--hop-sapphire-200);
55
- --hop-primary-surface-weak: var(--hop-sapphire-800);
56
- --hop-primary-surface-strong: var(--hop-sapphire-400);
57
- --hop-primary-surface-strong-hover: var(--hop-sapphire-200);
58
- --hop-primary-surface-strong-active: var(--hop-sapphire-800);
59
- --hop-primary-text: var(--hop-sapphire-200);
60
- --hop-primary-surface-hover: var(--hop-sapphire-200);
61
- --hop-primary-text-strong: var(--hop-samoyed);
62
- --hop-primary-text-strong-hover: var(--hop-samoyed);
63
- --hop-primary-text-hover: var(--hop-sapphire-300);
64
- --hop-primary-surface-active: var(--hop-sapphire-800);
65
- --hop-decorative-option9-border: var(--hop-rock-400);
66
- --hop-decorative-option9-icon: var(--hop-samoyed);
67
- --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
68
- --hop-decorative-option9-surface-weak: var(--hop-rock-300);
69
- --hop-decorative-option9-surface-weak-hover: var(--hop-rock-400);
70
- --hop-decorative-option9-surface-strong: var(--hop-rock-800);
71
- --hop-decorative-option9-surface-hover: var(--hop-rock-500);
72
- --hop-decorative-option9-surface: var(--hop-rock-400);
73
- --hop-decorative-option9-text: var(--hop-samoyed);
74
- --hop-decorative-option9-text-weak: var(--hop-rock-300);
75
- --hop-decorative-option8-border: var(--hop-amanita-400);
76
- --hop-decorative-option8-icon: var(--hop-amanita-900);
77
- --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
78
- --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
79
- --hop-decorative-option8-surface-weak-hover: var(--hop-amanita-75);
80
- --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
81
- --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
82
- --hop-decorative-option8-text-weak: var(--hop-amanita-300);
83
- --hop-decorative-option8-surface: var(--hop-amanita-75);
84
- --hop-decorative-option8-text: var(--hop-amanita-900);
85
- --hop-decorative-option7-border: var(--hop-toad-400);
86
- --hop-decorative-option7-icon: var(--hop-toad-900);
87
- --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
88
- --hop-decorative-option7-surface-weak: var(--hop-toad-50);
89
- --hop-decorative-option7-surface-weak-hover: var(--hop-toad-75);
90
- --hop-decorative-option7-surface-strong: var(--hop-toad-100);
91
- --hop-decorative-option7-surface-hover: var(--hop-toad-100);
92
- --hop-decorative-option7-surface: var(--hop-toad-50);
93
- --hop-decorative-option7-text-weak: var(--hop-toad-500);
94
- --hop-decorative-option7-text: var(--hop-toad-900);
95
- --hop-decorative-option5-text-weak: var(--hop-coastal-300);
96
- --hop-decorative-option5-text: var(--hop-coastal-900);
97
- --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
98
- --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
99
- --hop-decorative-option5-surface-weak-hover: var(--hop-coastal-75);
100
- --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
101
- --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
102
- --hop-decorative-option5-surface: var(--hop-coastal-75);
33
+ --hop-danger-text-weak: var(--hop-amanita-100);
34
+ --hop-danger-text-weak-hover: var(--hop-amanita-200);
35
+ --hop-danger-text-weak-press: var(--hop-amanita-300);
36
+ --hop-decorative-option1-border: var(--hop-sapphire-400);
37
+ --hop-decorative-option1-icon: var(--hop-sapphire-900);
38
+ --hop-decorative-option1-surface: var(--hop-sapphire-100);
39
+ --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
40
+ --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
41
+ --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
42
+ --hop-decorative-option1-surface-weak-hover: var(--hop-sapphire-75);
43
+ --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
44
+ --hop-decorative-option1-text: var(--hop-sapphire-900);
45
+ --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
46
+ --hop-decorative-option2-border: var(--hop-quetzal-400);
47
+ --hop-decorative-option2-icon: var(--hop-quetzal-900);
48
+ --hop-decorative-option2-surface: var(--hop-quetzal-100);
49
+ --hop-decorative-option2-surface-hover: var(--hop-quetzal-200);
50
+ --hop-decorative-option2-surface-strong: var(--hop-quetzal-200);
51
+ --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
52
+ --hop-decorative-option2-surface-weak-hover: var(--hop-quetzal-75);
53
+ --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
54
+ --hop-decorative-option2-text: var(--hop-quetzal-900);
55
+ --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
56
+ --hop-decorative-option3-border: var(--hop-koi-400);
57
+ --hop-decorative-option3-icon: var(--hop-koi-900);
58
+ --hop-decorative-option3-surface: var(--hop-koi-100);
59
+ --hop-decorative-option3-surface-hover: var(--hop-koi-200);
60
+ --hop-decorative-option3-surface-strong: var(--hop-koi-200);
61
+ --hop-decorative-option3-surface-weak: var(--hop-koi-50);
62
+ --hop-decorative-option3-surface-weak-hover: var(--hop-koi-75);
63
+ --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
64
+ --hop-decorative-option3-text: var(--hop-koi-900);
65
+ --hop-decorative-option3-text-weak: var(--hop-koi-300);
66
+ --hop-decorative-option4-border: var(--hop-moss-400);
67
+ --hop-decorative-option4-icon: var(--hop-moss-900);
68
+ --hop-decorative-option4-surface: var(--hop-moss-75);
69
+ --hop-decorative-option4-surface-hover: var(--hop-moss-100);
70
+ --hop-decorative-option4-surface-strong: var(--hop-moss-100);
71
+ --hop-decorative-option4-surface-weak: var(--hop-moss-50);
72
+ --hop-decorative-option4-surface-weak-hover: var(--hop-moss-75);
73
+ --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
74
+ --hop-decorative-option4-text: var(--hop-moss-900);
75
+ --hop-decorative-option4-text-weak: var(--hop-moss-400);
103
76
  --hop-decorative-option5-border: var(--hop-coastal-400);
104
77
  --hop-decorative-option5-icon: var(--hop-coastal-900);
105
- --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
106
- --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
107
- --hop-decorative-option6-surface-weak-hover: var(--hop-sunken-treasure-75);
108
- --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
109
- --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
110
- --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
78
+ --hop-decorative-option5-surface: var(--hop-coastal-75);
79
+ --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
80
+ --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
81
+ --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
82
+ --hop-decorative-option5-surface-weak-hover: var(--hop-coastal-75);
83
+ --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
84
+ --hop-decorative-option5-text: var(--hop-coastal-900);
85
+ --hop-decorative-option5-text-weak: var(--hop-coastal-300);
111
86
  --hop-decorative-option6-border: var(--hop-sunken-treasure-400);
112
87
  --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
88
+ --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
89
+ --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
90
+ --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
91
+ --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
92
+ --hop-decorative-option6-surface-weak-hover: var(--hop-sunken-treasure-75);
93
+ --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
113
94
  --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
114
95
  --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
115
- --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
116
- --hop-decorative-option4-surface-weak: var(--hop-moss-50);
117
- --hop-decorative-option4-surface-weak-hover: var(--hop-moss-75);
118
- --hop-decorative-option4-surface-strong: var(--hop-moss-100);
119
- --hop-decorative-option4-surface-hover: var(--hop-moss-100);
120
- --hop-decorative-option4-surface: var(--hop-moss-75);
121
- --hop-decorative-option4-border: var(--hop-moss-400);
122
- --hop-decorative-option4-icon: var(--hop-moss-900);
123
- --hop-decorative-option4-text-weak: var(--hop-moss-400);
124
- --hop-decorative-option4-text: var(--hop-moss-900);
125
- --hop-decorative-option3-surface-strong: var(--hop-koi-200);
126
- --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
127
- --hop-decorative-option3-surface-weak: var(--hop-koi-50);
128
- --hop-decorative-option3-surface-weak-hover: var(--hop-koi-75);
129
- --hop-decorative-option3-surface-hover: var(--hop-koi-200);
130
- --hop-decorative-option3-surface: var(--hop-koi-100);
131
- --hop-decorative-option3-border: var(--hop-koi-400);
132
- --hop-decorative-option3-icon: var(--hop-koi-900);
133
- --hop-decorative-option3-text: var(--hop-koi-900);
134
- --hop-decorative-option3-text-weak: var(--hop-koi-300);
135
- --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
136
- --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
137
- --hop-decorative-option2-surface-weak-hover: var(--hop-quetzal-75);
138
- --hop-decorative-option2-surface-strong: var(--hop-quetzal-100);
139
- --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
140
- --hop-decorative-option2-surface: var(--hop-quetzal-75);
141
- --hop-decorative-option2-text: var(--hop-quetzal-900);
142
- --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
143
- --hop-decorative-option2-border: var(--hop-quetzal-400);
144
- --hop-decorative-option2-icon: var(--hop-quetzal-900);
145
- --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
146
- --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
147
- --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
148
- --hop-decorative-option1-surface-weak-hover: var(--hop-sapphire-75);
149
- --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
150
- --hop-decorative-option1-surface: var(--hop-sapphire-100);
151
- --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
152
- --hop-decorative-option1-border: var(--hop-sapphire-400);
153
- --hop-decorative-option1-icon: var(--hop-sapphire-900);
154
- --hop-decorative-option1-text: var(--hop-sapphire-900);
155
- --hop-neutral-text-hover: var(--hop-rock-50);
156
- --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
157
- --hop-neutral-text-weak: var(--hop-rock-200);
158
- --hop-neutral-surface-disabled: var(--hop-rock-700);
159
- --hop-neutral-surface-active: var(--hop-toad-25);
160
- --hop-neutral-surface-weak: var(--hop-rock-800);
161
- --hop-neutral-surface: var(--hop-abyss);
162
- --hop-neutral-text-disabled: var(--hop-rock-500);
163
- --hop-neutral-text-active: var(--hop-rock-900);
164
- --hop-neutral-text-strong: var(--hop-rock-900);
165
- --hop-neutral-text: var(--hop-rock-25);
166
- --hop-neutral-text-weakest: var(--hop-rock-400);
96
+ --hop-decorative-option7-border: var(--hop-toad-400);
97
+ --hop-decorative-option7-icon: var(--hop-toad-900);
98
+ --hop-decorative-option7-surface: var(--hop-toad-50);
99
+ --hop-decorative-option7-surface-hover: var(--hop-toad-100);
100
+ --hop-decorative-option7-surface-strong: var(--hop-toad-100);
101
+ --hop-decorative-option7-surface-weak: var(--hop-toad-50);
102
+ --hop-decorative-option7-surface-weak-hover: var(--hop-toad-75);
103
+ --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
104
+ --hop-decorative-option7-text: var(--hop-toad-900);
105
+ --hop-decorative-option7-text-weak: var(--hop-toad-500);
106
+ --hop-decorative-option8-border: var(--hop-amanita-400);
107
+ --hop-decorative-option8-icon: var(--hop-amanita-900);
108
+ --hop-decorative-option8-surface: var(--hop-amanita-75);
109
+ --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
110
+ --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
111
+ --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
112
+ --hop-decorative-option8-surface-weak-hover: var(--hop-amanita-75);
113
+ --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
114
+ --hop-decorative-option8-text: var(--hop-amanita-900);
115
+ --hop-decorative-option8-text-weak: var(--hop-amanita-300);
116
+ --hop-decorative-option9-border: var(--hop-rock-400);
117
+ --hop-decorative-option9-icon: var(--hop-samoyed);
118
+ --hop-decorative-option9-surface: var(--hop-rock-400);
119
+ --hop-decorative-option9-surface-hover: var(--hop-rock-500);
120
+ --hop-decorative-option9-surface-strong: var(--hop-rock-800);
121
+ --hop-decorative-option9-surface-weak: var(--hop-rock-300);
122
+ --hop-decorative-option9-surface-weak-hover: var(--hop-rock-400);
123
+ --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
124
+ --hop-decorative-option9-text: var(--hop-samoyed);
125
+ --hop-decorative-option9-text-weak: var(--hop-rock-300);
126
+ --hop-information-border: var(--hop-coastal-400);
127
+ --hop-information-icon: var(--hop-coastal-900);
128
+ --hop-information-icon-weakest: var(--hop-coastal-200);
129
+ --hop-information-icon-weak: var(--hop-coastal-300);
130
+ --hop-information-surface: var(--hop-coastal-75);
131
+ --hop-information-surface-strong: var(--hop-coastal-300);
132
+ --hop-information-surface-weak: var(--hop-coastal-800);
133
+ --hop-information-text: var(--hop-coastal-900);
134
+ --hop-information-text-weak: var(--hop-coastal-75);
135
+ --hop-neutral-border: var(--hop-rock-500);
136
+ --hop-neutral-border-selected: var(--hop-toad-25);
167
137
  --hop-neutral-border-disabled: var(--hop-rock-800);
168
- --hop-neutral-border-strong-hover: var(--hop-samoyed);
138
+ --hop-neutral-border-hover: var(--hop-rock-300);
139
+ --hop-neutral-border-press: var(--hop-rock-700);
169
140
  --hop-neutral-border-strong: var(--hop-samoyed);
170
- --hop-neutral-surface-strong: var(--hop-toad-25);
171
- --hop-neutral-surface-hover: var(--hop-rock-800);
172
- --hop-neutral-icon-disabled: var(--hop-rock-500);
141
+ --hop-neutral-border-strong-hover: var(--hop-samoyed);
142
+ --hop-neutral-border-weakest: var(--hop-rock-800);
143
+ --hop-neutral-border-weak: var(--hop-rock-800);
173
144
  --hop-neutral-icon: var(--hop-rock-25);
145
+ --hop-neutral-icon-selected: var(--hop-rock-900);
146
+ --hop-neutral-icon-disabled: var(--hop-rock-500);
147
+ --hop-neutral-icon-hover: var(--hop-rock-50);
148
+ --hop-neutral-icon-press: var(--hop-toad-25);
149
+ --hop-neutral-icon-strong: var(--hop-rock-900);
150
+ --hop-neutral-icon-strong-hover: var(--hop-rock-900);
174
151
  --hop-neutral-icon-weak: var(--hop-rock-200);
175
- --hop-neutral-border: var(--hop-rock-500);
176
- --hop-neutral-border-weak: var(--hop-rock-800);
152
+ --hop-neutral-icon-weak-hover: var(--hop-rock-75);
153
+ --hop-neutral-icon-weak-press: var(--hop-rock-50);
177
154
  --hop-neutral-icon-weakest: var(--hop-rock-400);
178
- --hop-neutral-icon-strong: var(--hop-rock-900);
179
- --hop-neutral-icon-hover: var(--hop-rock-50);
180
- --hop-neutral-icon-active: var(--hop-rock-900);
181
- --hop-neutral-border-hover: var(--hop-rock-300);
182
- --hop-neutral-border-active: var(--hop-toad-25);
183
- --hop-neutral-surface-weak-hover: var(--hop-rock-700);
184
- --hop-neutral-surface-weak-active: var(--hop-rock-800);
185
- --hop-neutral-border-weakest: var(--hop-rock-800);
155
+ --hop-neutral-surface: var(--hop-abyss);
156
+ --hop-neutral-surface-selected: var(--hop-toad-25);
157
+ --hop-neutral-surface-disabled: var(--hop-rock-700);
158
+ --hop-neutral-surface-hover: var(--hop-rock-800);
159
+ --hop-neutral-surface-press: var(--hop-rock-700);
160
+ --hop-neutral-surface-strong: var(--hop-toad-25);
186
161
  --hop-neutral-surface-weakest: var(--hop-rock-900);
187
- --hop-warning-icon-weakest: var(--hop-koi-200);
188
- --hop-warning-icon-weak: var(--hop-koi-75);
189
- --hop-warning-text-weak: var(--hop-koi-75);
190
- --hop-warning-surface: var(--hop-koi-75);
191
- --hop-warning-surface-strong: var(--hop-koi-300);
192
- --hop-warning-surface-weak: var(--hop-koi-800);
193
- --hop-warning-border: var(--hop-koi-500);
194
- --hop-warning-icon: var(--hop-koi-900);
195
- --hop-warning-text: var(--hop-koi-900);
196
- --hop-success-border: var(--hop-moss-500);
197
- --hop-success-icon-weak: var(--hop-moss-75);
198
- --hop-success-icon-weakest: var(--hop-moss-200);
199
- --hop-success-text-weak: var(--hop-moss-75);
200
- --hop-success-surface: var(--hop-moss-75);
201
- --hop-success-surface-strong: var(--hop-moss-300);
202
- --hop-success-text-hover: var(--hop-moss-700);
203
- --hop-success-text: var(--hop-moss-900);
204
- --hop-success-icon: var(--hop-moss-900);
205
- --hop-success-surface-weak: var(--hop-moss-800);
206
- --hop-information-icon-weakest: var(--hop-coastal-200);
207
- --hop-information-surface-strong: var(--hop-coastal-300);
208
- --hop-information-icon-weak: var(--hop-coastal-300);
209
- --hop-information-text: var(--hop-coastal-900);
210
- --hop-information-surface: var(--hop-coastal-75);
211
- --hop-information-surface-weak: var(--hop-coastal-800);
212
- --hop-information-text-weak: var(--hop-coastal-75);
213
- --hop-information-icon: var(--hop-coastal-900);
214
- --hop-information-border: var(--hop-coastal-400);
215
- --hop-status-neutral-surface-strong: var(--hop-rock-100);
216
- --hop-status-neutral-text: var(--hop-rock-25);
162
+ --hop-neutral-surface-weak: var(--hop-rock-800);
163
+ --hop-neutral-surface-weak-selected: var(--hop-rock-800);
164
+ --hop-neutral-surface-weak-hover: var(--hop-rock-700);
165
+ --hop-neutral-surface-weak-press: var(--hop-rock-600);
166
+ --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
167
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
168
+ --hop-neutral-text: var(--hop-rock-25);
169
+ --hop-neutral-text-selected: var(--hop-rock-900);
170
+ --hop-neutral-text-disabled: var(--hop-rock-500);
171
+ --hop-neutral-text-hover: var(--hop-rock-50);
172
+ --hop-neutral-text-press: var(--hop-toad-25);
173
+ --hop-neutral-text-strong: var(--hop-rock-900);
174
+ --hop-neutral-text-weak: var(--hop-rock-200);
175
+ --hop-neutral-text-weak-hover: var(--hop-rock-75);
176
+ --hop-neutral-text-weak-press: var(--hop-rock-50);
177
+ --hop-neutral-text-weakest: var(--hop-rock-400);
178
+ --hop-primary-border: var(--hop-sapphire-300);
179
+ --hop-primary-border-selected: var(--hop-sapphire-300);
180
+ --hop-primary-border-focus: var(--hop-sapphire-200);
181
+ --hop-primary-border-press: var(--hop-sapphire-500);
182
+ --hop-primary-icon: var(--hop-sapphire-200);
183
+ --hop-primary-icon-selected: var(--hop-sapphire-200);
184
+ --hop-primary-icon-disabled: var(--hop-sapphire-700);
185
+ --hop-primary-icon-hover: var(--hop-sapphire-300);
186
+ --hop-primary-icon-press: var(--hop-sapphire-75);
187
+ --hop-primary-icon-strong: var(--hop-samoyed);
188
+ --hop-primary-icon-strong-hover: var(--hop-sapphire-300);
189
+ --hop-primary-surface: var(--hop-sapphire-200);
190
+ --hop-primary-surface-selected: var(--hop-sapphire-800);
191
+ --hop-primary-surface-disabled: var(--hop-sapphire-700);
192
+ --hop-primary-surface-focus: var(--hop-sapphire-900);
193
+ --hop-primary-surface-hover: var(--hop-sapphire-400);
194
+ --hop-primary-surface-press: var(--hop-sapphire-500);
195
+ --hop-primary-surface-strong: var(--hop-sapphire-400);
196
+ --hop-primary-surface-strong-selected: var(--hop-sapphire-800);
197
+ --hop-primary-surface-strong-hover: var(--hop-sapphire-500);
198
+ --hop-primary-surface-strong-press: var(--hop-sapphire-600);
199
+ --hop-primary-surface-weak: var(--hop-sapphire-800);
200
+ --hop-primary-surface-weak-hover: var(--hop-sapphire-700);
201
+ --hop-primary-surface-weak-press: var(--hop-sapphire-600);
202
+ --hop-primary-text: var(--hop-sapphire-100);
203
+ --hop-primary-text-hover: var(--hop-sapphire-200);
204
+ --hop-primary-text-press: var(--hop-sapphire-75);
205
+ --hop-primary-text-strong: var(--hop-samoyed);
206
+ --hop-primary-text-strong-hover: var(--hop-samoyed);
207
+ --hop-primary-text-selected: var(--hop-sapphire-200);
208
+ --hop-primary-text-disabled: var(--hop-sapphire-700);
209
+ --hop-status-caution-icon: var(--hop-koi-900);
210
+ --hop-status-caution-surface: var(--hop-koi-75);
211
+ --hop-status-caution-surface-strong: var(--hop-koi-200);
212
+ --hop-status-caution-text: var(--hop-koi-900);
213
+ --hop-status-inselected-icon: var(--hop-rock-800);
214
+ --hop-status-inselected-surface: var(--hop-rock-75);
215
+ --hop-status-inselected-surface-strong: var(--hop-rock-100);
216
+ --hop-status-inselected-text: var(--hop-rock-900);
217
+ --hop-status-negative-icon: var(--hop-amanita-900);
218
+ --hop-status-negative-surface: var(--hop-amanita-75);
219
+ --hop-status-negative-surface-strong: var(--hop-amanita-200);
220
+ --hop-status-negative-text: var(--hop-amanita-900);
217
221
  --hop-status-neutral-icon: var(--hop-rock-25);
218
222
  --hop-status-neutral-surface: var(--hop-abyss);
219
- --hop-status-progress-surface-strong: var(--hop-sapphire-200);
220
- --hop-status-progress-icon: var(--hop-sapphire-900);
221
- --hop-status-progress-surface: var(--hop-sapphire-100);
222
- --hop-status-progress-text: var(--hop-sapphire-900);
223
- --hop-status-option6-surface-strong: var(--hop-sunken-treasure-100);
224
- --hop-status-option6-icon: var(--hop-sunken-treasure-900);
225
- --hop-status-option6-surface: var(--hop-sunken-treasure-75);
226
- --hop-status-option6-text: var(--hop-sunken-treasure-900);
227
- --hop-status-option5-surface-strong: var(--hop-toad-100);
228
- --hop-status-option5-icon: var(--hop-toad-900);
229
- --hop-status-option5-surface: var(--hop-toad-200);
230
- --hop-status-option5-text: var(--hop-toad-900);
231
- --hop-status-option1-surface-strong: var(--hop-coastal-100);
223
+ --hop-status-neutral-surface-strong: var(--hop-rock-100);
224
+ --hop-status-neutral-text: var(--hop-rock-25);
232
225
  --hop-status-option1-icon: var(--hop-coastal-900);
233
226
  --hop-status-option1-surface: var(--hop-coastal-200);
227
+ --hop-status-option1-surface-strong: var(--hop-coastal-100);
234
228
  --hop-status-option1-text: var(--hop-coastal-900);
229
+ --hop-status-option2-icon: var(--hop-orchid-bloom-900);
230
+ --hop-status-option2-surface: var(--hop-orchid-bloom-200);
235
231
  --hop-status-option2-surface-strong: var(--hop-orchid-bloom-100);
236
232
  --hop-status-option2-text: var(--hop-orchid-bloom-900);
237
- --hop-status-option2-surface: var(--hop-orchid-bloom-200);
238
- --hop-status-option2-icon: var(--hop-orchid-bloom-900);
239
- --hop-status-option3-surface-strong: var(--hop-quetzal-100);
240
233
  --hop-status-option3-icon: var(--hop-quetzal-900);
241
234
  --hop-status-option3-surface: var(--hop-quetzal-200);
235
+ --hop-status-option3-surface-strong: var(--hop-quetzal-100);
242
236
  --hop-status-option3-text: var(--hop-quetzal-900);
243
- --hop-status-option4-surface-strong: var(--hop-fog-100);
244
237
  --hop-status-option4-icon: var(--hop-fog-900);
245
238
  --hop-status-option4-surface: var(--hop-fog-200);
239
+ --hop-status-option4-surface-strong: var(--hop-fog-100);
246
240
  --hop-status-option4-text: var(--hop-fog-900);
247
- --hop-status-inactive-surface-strong: var(--hop-rock-100);
248
- --hop-status-inactive-icon: var(--hop-rock-800);
249
- --hop-status-inactive-surface: var(--hop-rock-75);
250
- --hop-status-inactive-text: var(--hop-rock-900);
251
- --hop-status-caution-surface-strong: var(--hop-koi-200);
252
- --hop-status-caution-icon: var(--hop-koi-900);
253
- --hop-status-caution-surface: var(--hop-koi-75);
254
- --hop-status-caution-text: var(--hop-koi-900);
255
- --hop-status-negative-surface-strong: var(--hop-amanita-200);
256
- --hop-status-negative-icon: var(--hop-amanita-900);
257
- --hop-status-negative-surface: var(--hop-amanita-75);
258
- --hop-status-negative-text: var(--hop-amanita-900);
241
+ --hop-status-option5-icon: var(--hop-toad-900);
242
+ --hop-status-option5-surface: var(--hop-toad-200);
243
+ --hop-status-option5-surface-strong: var(--hop-toad-100);
244
+ --hop-status-option5-text: var(--hop-toad-900);
245
+ --hop-status-option6-icon: var(--hop-sunken-treasure-900);
246
+ --hop-status-option6-surface: var(--hop-sunken-treasure-75);
247
+ --hop-status-option6-surface-strong: var(--hop-sunken-treasure-100);
248
+ --hop-status-option6-text: var(--hop-sunken-treasure-900);
259
249
  --hop-status-positive-icon: var(--hop-moss-900);
260
- --hop-status-positive-surface-strong: var(--hop-moss-200);
261
250
  --hop-status-positive-surface: var(--hop-moss-75);
251
+ --hop-status-positive-surface-strong: var(--hop-moss-200);
262
252
  --hop-status-positive-text: var(--hop-moss-900);
253
+ --hop-status-progress-icon: var(--hop-sapphire-900);
254
+ --hop-status-progress-surface: var(--hop-sapphire-100);
255
+ --hop-status-progress-surface-strong: var(--hop-sapphire-200);
256
+ --hop-status-progress-text: var(--hop-sapphire-900);
257
+ --hop-success-border: var(--hop-moss-500);
258
+ --hop-success-icon: var(--hop-moss-900);
259
+ --hop-success-icon-weakest: var(--hop-moss-200);
260
+ --hop-success-icon-weak: var(--hop-moss-75);
261
+ --hop-success-surface: var(--hop-moss-75);
262
+ --hop-success-surface-strong: var(--hop-moss-300);
263
+ --hop-success-surface-weak: var(--hop-moss-800);
264
+ --hop-success-text: var(--hop-moss-900);
265
+ --hop-success-text-weak: var(--hop-moss-75);
266
+ --hop-success-text-hover: var(--hop-moss-700);
267
+ --hop-upsell-border: var(--hop-sunken-treasure-200);
268
+ --hop-upsell-border-selected: var(--hop-sunken-treasure-100);
269
+ --hop-upsell-border-disabled: var(--hop-sunken-treasure-700);
270
+ --hop-upsell-border-press: var(--hop-sunken-treasure-400);
271
+ --hop-upsell-icon: var(--hop-sunken-treasure-700);
272
+ --hop-upsell-icon-selected: var(--hop-sunken-treasure-100);
273
+ --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
274
+ --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
275
+ --hop-upsell-icon-weakest: var(--hop-sunken-treasure-100);
276
+ --hop-upsell-icon-weak: var(--hop-sunken-treasure-300);
277
+ --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-200);
278
+ --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-300);
279
+ --hop-upsell-surface: var(--hop-sunken-treasure-50);
280
+ --hop-upsell-surface-selected: var(--hop-sunken-treasure-800);
281
+ --hop-upsell-surface-disabled: var(--hop-sunken-treasure-700);
282
+ --hop-upsell-surface-hover: var(--hop-sunken-treasure-200);
283
+ --hop-upsell-surface-press: var(--hop-sunken-treasure-300);
284
+ --hop-upsell-surface-weak: var(--hop-sunken-treasure-900);
285
+ --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-700);
286
+ --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-600);
287
+ --hop-upsell-text: var(--hop-sunken-treasure-700);
288
+ --hop-upsell-text-selected: var(--hop-sunken-treasure-100);
289
+ --hop-upsell-text-disabled: var(--hop-sunken-treasure-300);
290
+ --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
291
+ --hop-upsell-text-press: var(--hop-sunken-treasure-900);
292
+ --hop-upsell-text-weak: var(--hop-sunken-treasure-100);
293
+ --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-200);
294
+ --hop-upsell-text-weak-press: var(--hop-sunken-treasure-300);
295
+ --hop-warning-border: var(--hop-koi-500);
296
+ --hop-warning-icon: var(--hop-koi-900);
297
+ --hop-warning-icon-weakest: var(--hop-koi-200);
298
+ --hop-warning-icon-weak: var(--hop-koi-75);
299
+ --hop-warning-surface: var(--hop-koi-75);
300
+ --hop-warning-surface-strong: var(--hop-koi-300);
301
+ --hop-warning-surface-weak: var(--hop-koi-800);
302
+ --hop-warning-text: var(--hop-koi-900);
303
+ --hop-warning-text-weak: var(--hop-koi-75);
263
304
  --hop-dataviz-unavailable: var(--hop-rock-600);
264
305
  --hop-dataviz-unavailable-weak: var(--hop-rock-400);
265
306
  --hop-dataviz-unavailable-strong: var(--hop-rock-700);
package/dist/fonts.css CHANGED
@@ -10,7 +10,7 @@
10
10
  font-family: "ABC Favorit Mono";
11
11
  font-style: normal;
12
12
  font-weight: 400;
13
- src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/mono/ABCFavoritMono-Regular.woff2") format("woff2-variations");
13
+ src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/mono/alternative/ABCFavoritMono-Regular.woff2") format("woff2-variations");
14
14
  font-display: fallback;
15
15
  }
16
16
 
@@ -18,6 +18,6 @@
18
18
  font-family: "ABC Favorit";
19
19
  font-style: normal;
20
20
  font-weight: 100 900;
21
- src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/ABCFavoritVariable.woff2") format("woff2-variations");
21
+ src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/alternative/ABCFavoritVariable.woff2") format("woff2-variations");
22
22
  font-display: fallback;
23
23
  }
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 08 Apr 2024 13:44:46 GMT
3
+ * Generated on Wed, 15 May 2024 13:31:38 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -642,22 +642,69 @@
642
642
  --hop-dataviz-unavailable-strong: var(--hop-rock-100);
643
643
  --hop-dataviz-unavailable-weak: var(--hop-rock-50);
644
644
  --hop-dataviz-unavailable: var(--hop-rock-75);
645
+ --hop-warning-text-weak: var(--hop-koi-300);
646
+ --hop-warning-text: var(--hop-koi-700);
647
+ --hop-warning-surface-weak: var(--hop-koi-50);
648
+ --hop-warning-surface-strong: var(--hop-koi-100);
649
+ --hop-warning-surface: var(--hop-koi-25);
650
+ --hop-warning-icon-weak: var(--hop-koi-300);
651
+ --hop-warning-icon-weakest: var(--hop-koi-100);
652
+ --hop-warning-icon: var(--hop-koi-700);
653
+ --hop-warning-border: var(--hop-koi-100);
654
+ --hop-upsell-text-weak-press: var(--hop-sunken-treasure-600);
655
+ --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-500);
656
+ --hop-upsell-text-weak: var(--hop-sunken-treasure-300);
657
+ --hop-upsell-text-press: var(--hop-sunken-treasure-900);
658
+ --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
659
+ --hop-upsell-text-disabled: var(--hop-sunken-treasure-400);
660
+ --hop-upsell-text-selected: var(--hop-sunken-treasure-400);
661
+ --hop-upsell-text: var(--hop-sunken-treasure-700);
662
+ --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-75);
663
+ --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-50);
664
+ --hop-upsell-surface-weak: var(--hop-sunken-treasure-25);
665
+ --hop-upsell-surface-press: var(--hop-sunken-treasure-200);
666
+ --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
667
+ --hop-upsell-surface-disabled: var(--hop-sunken-treasure-25);
668
+ --hop-upsell-surface-selected: var(--hop-sunken-treasure-50);
669
+ --hop-upsell-surface: var(--hop-sunken-treasure-75);
670
+ --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-600);
671
+ --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-500);
672
+ --hop-upsell-icon-weak: var(--hop-sunken-treasure-100);
673
+ --hop-upsell-icon-weakest: var(--hop-sunken-treasure-75);
674
+ --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
675
+ --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
676
+ --hop-upsell-icon-selected: var(--hop-sunken-treasure-400);
677
+ --hop-upsell-icon: var(--hop-sunken-treasure-700);
678
+ --hop-upsell-border-press: var(--hop-sunken-treasure-200);
679
+ --hop-upsell-border-disabled: var(--hop-sunken-treasure-75);
680
+ --hop-upsell-border-selected: var(--hop-sunken-treasure-200);
681
+ --hop-upsell-border: var(--hop-sunken-treasure-100);
682
+ --hop-success-text-weak: var(--hop-moss-300);
683
+ --hop-success-text-hover: var(--hop-moss-800);
684
+ --hop-success-text: var(--hop-moss-700);
685
+ --hop-success-surface-weak: var(--hop-moss-50);
686
+ --hop-success-surface-strong: var(--hop-moss-100);
687
+ --hop-success-surface: var(--hop-moss-25);
688
+ --hop-success-icon-weak: var(--hop-moss-300);
689
+ --hop-success-icon-weakest: var(--hop-moss-100);
690
+ --hop-success-icon: var(--hop-moss-700);
691
+ --hop-success-border: var(--hop-moss-100);
692
+ --hop-status-progress-icon: var(--hop-sapphire-600);
693
+ --hop-status-progress-text: var(--hop-sapphire-600);
694
+ --hop-status-progress-surface-strong: var(--hop-sapphire-200);
695
+ --hop-status-progress-surface: var(--hop-sapphire-50);
645
696
  --hop-status-positive-text: var(--hop-moss-700);
646
697
  --hop-status-positive-surface: var(--hop-moss-50);
647
698
  --hop-status-positive-surface-strong: var(--hop-moss-200);
648
699
  --hop-status-positive-icon: var(--hop-moss-700);
649
- --hop-status-inactive-text: var(--hop-rock-700);
650
- --hop-status-inactive-surface: var(--hop-rock-50);
651
- --hop-status-inactive-icon: var(--hop-rock-500);
652
- --hop-status-inactive-surface-strong: var(--hop-rock-100);
653
- --hop-status-negative-text: var(--hop-amanita-700);
654
- --hop-status-negative-surface: var(--hop-amanita-50);
655
- --hop-status-negative-icon: var(--hop-amanita-700);
656
- --hop-status-negative-surface-strong: var(--hop-amanita-200);
657
- --hop-status-caution-text: var(--hop-koi-700);
658
- --hop-status-caution-surface: var(--hop-koi-50);
659
- --hop-status-caution-icon: var(--hop-koi-700);
660
- --hop-status-caution-surface-strong: var(--hop-koi-200);
700
+ --hop-status-option6-icon: var(--hop-sunken-treasure-600);
701
+ --hop-status-option6-text: var(--hop-sunken-treasure-600);
702
+ --hop-status-option6-surface-strong: var(--hop-sunken-treasure-200);
703
+ --hop-status-option6-surface: var(--hop-sunken-treasure-25);
704
+ --hop-status-option5-icon: var(--hop-toad-600);
705
+ --hop-status-option5-text: var(--hop-toad-600);
706
+ --hop-status-option5-surface-strong: var(--hop-toad-200);
707
+ --hop-status-option5-surface: var(--hop-toad-50);
661
708
  --hop-status-option4-text: var(--hop-fog-600);
662
709
  --hop-status-option4-surface: var(--hop-fog-50);
663
710
  --hop-status-option4-icon: var(--hop-fog-600);
@@ -674,235 +721,227 @@
674
721
  --hop-status-option1-surface: var(--hop-coastal-50);
675
722
  --hop-status-option1-icon: var(--hop-coastal-700);
676
723
  --hop-status-option1-surface-strong: var(--hop-coastal-200);
677
- --hop-status-option5-text: var(--hop-toad-600);
678
- --hop-status-option5-surface: var(--hop-toad-50);
679
- --hop-status-option5-icon: var(--hop-toad-600);
680
- --hop-status-option5-surface-strong: var(--hop-toad-200);
681
- --hop-status-option6-text: var(--hop-sunken-treasure-600);
682
- --hop-status-option6-surface: var(--hop-sunken-treasure-25);
683
- --hop-status-option6-icon: var(--hop-sunken-treasure-600);
684
- --hop-status-option6-surface-strong: var(--hop-sunken-treasure-200);
685
- --hop-status-progress-text: var(--hop-sapphire-500);
686
- --hop-status-progress-surface: var(--hop-sapphire-50);
687
- --hop-status-progress-icon: var(--hop-sapphire-500);
688
- --hop-status-progress-surface-strong: var(--hop-sapphire-200);
689
- --hop-status-neutral-surface: var(--hop-samoyed);
690
- --hop-status-neutral-icon: var(--hop-rock-800);
691
724
  --hop-status-neutral-text: var(--hop-rock-800);
692
725
  --hop-status-neutral-surface-strong: var(--hop-rock-200);
693
- --hop-information-border: var(--hop-coastal-100);
694
- --hop-information-icon: var(--hop-coastal-700);
695
- --hop-information-text-weak: var(--hop-coastal-300);
696
- --hop-information-surface-weak: var(--hop-coastal-50);
697
- --hop-information-surface: var(--hop-coastal-25);
698
- --hop-information-text: var(--hop-coastal-800);
699
- --hop-information-icon-weak: var(--hop-coastal-300);
700
- --hop-information-surface-strong: var(--hop-coastal-100);
701
- --hop-information-icon-weakest: var(--hop-coastal-75);
702
- --hop-success-surface-weak: var(--hop-moss-50);
703
- --hop-success-icon: var(--hop-moss-700);
704
- --hop-success-text: var(--hop-moss-700);
705
- --hop-success-text-hover: var(--hop-moss-800);
706
- --hop-success-surface-strong: var(--hop-moss-100);
707
- --hop-success-surface: var(--hop-moss-25);
708
- --hop-success-text-weak: var(--hop-moss-300);
709
- --hop-success-icon-weakest: var(--hop-moss-100);
710
- --hop-success-icon-weak: var(--hop-moss-300);
711
- --hop-success-border: var(--hop-moss-100);
712
- --hop-warning-text: var(--hop-koi-700);
713
- --hop-warning-icon: var(--hop-koi-700);
714
- --hop-warning-border: var(--hop-koi-100);
715
- --hop-warning-surface-weak: var(--hop-koi-50);
716
- --hop-warning-surface-strong: var(--hop-koi-100);
717
- --hop-warning-surface: var(--hop-koi-25);
718
- --hop-warning-text-weak: var(--hop-koi-300);
719
- --hop-warning-icon-weak: var(--hop-koi-300);
720
- --hop-warning-icon-weakest: var(--hop-koi-100);
726
+ --hop-status-neutral-surface: var(--hop-samoyed);
727
+ --hop-status-neutral-icon: var(--hop-rock-800);
728
+ --hop-status-negative-text: var(--hop-amanita-700);
729
+ --hop-status-negative-surface: var(--hop-amanita-50);
730
+ --hop-status-negative-icon: var(--hop-amanita-700);
731
+ --hop-status-negative-surface-strong: var(--hop-amanita-200);
732
+ --hop-status-inactive-text: var(--hop-rock-700);
733
+ --hop-status-inactive-surface: var(--hop-rock-50);
734
+ --hop-status-inactive-icon: var(--hop-rock-500);
735
+ --hop-status-inactive-surface-strong: var(--hop-rock-100);
736
+ --hop-status-caution-text: var(--hop-koi-700);
737
+ --hop-status-caution-surface: var(--hop-koi-50);
738
+ --hop-status-caution-icon: var(--hop-koi-700);
739
+ --hop-status-caution-surface-strong: var(--hop-koi-200);
740
+ --hop-primary-text-strong-hover: var(--hop-samoyed);
741
+ --hop-primary-text-strong: var(--hop-samoyed);
742
+ --hop-primary-text-press: var(--hop-sapphire-700);
743
+ --hop-primary-text-hover: var(--hop-sapphire-600);
744
+ --hop-primary-text-disabled: var(--hop-sapphire-200);
745
+ --hop-primary-text-selected: var(--hop-sapphire-500);
746
+ --hop-primary-text: var(--hop-sapphire-500);
747
+ --hop-primary-surface-weak-press: var(--hop-sapphire-75);
748
+ --hop-primary-surface-weak-hover: var(--hop-sapphire-50);
749
+ --hop-primary-surface-weak: var(--hop-sapphire-25);
750
+ --hop-primary-surface-strong-press: var(--hop-sapphire-700);
751
+ --hop-primary-surface-strong-hover: var(--hop-sapphire-600);
752
+ --hop-primary-surface-strong-selected: var(--hop-sapphire-50);
753
+ --hop-primary-surface-strong: var(--hop-sapphire-400);
754
+ --hop-primary-surface-press: var(--hop-sapphire-300);
755
+ --hop-primary-surface-hover: var(--hop-sapphire-200);
756
+ --hop-primary-surface-focus: var(--hop-sapphire-25);
757
+ --hop-primary-surface-disabled: var(--hop-sapphire-200);
758
+ --hop-primary-surface-selected: var(--hop-sapphire-50);
759
+ --hop-primary-surface: var(--hop-sapphire-50);
760
+ --hop-primary-icon-strong-hover: var(--hop-samoyed);
761
+ --hop-primary-icon-strong: var(--hop-samoyed);
762
+ --hop-primary-icon-press: var(--hop-sapphire-700);
763
+ --hop-primary-icon-hover: var(--hop-sapphire-600);
764
+ --hop-primary-icon-disabled: var(--hop-sapphire-200);
765
+ --hop-primary-icon-selected: var(--hop-sapphire-500);
766
+ --hop-primary-icon: var(--hop-sapphire-500);
767
+ --hop-primary-border-press: var(--hop-sapphire-300);
768
+ --hop-primary-border-focus: var(--hop-sapphire-500);
769
+ --hop-primary-border-selected: var(--hop-sapphire-400);
770
+ --hop-primary-border: var(--hop-sapphire-400);
771
+ --hop-neutral-text-weakest: var(--hop-rock-200);
772
+ --hop-neutral-text-weak-press: var(--hop-rock-700);
773
+ --hop-neutral-text-weak-hover: var(--hop-rock-600);
774
+ --hop-neutral-text-weak: var(--hop-rock-500);
775
+ --hop-neutral-text-strong: var(--hop-samoyed);
776
+ --hop-neutral-text-press: var(--hop-rock-900);
777
+ --hop-neutral-text-hover: var(--hop-rock-700);
778
+ --hop-neutral-text-disabled: var(--hop-rock-300);
779
+ --hop-neutral-text-selected: var(--hop-samoyed);
780
+ --hop-neutral-text: var(--hop-rock-800);
781
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
782
+ --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
721
783
  --hop-neutral-surface-weakest: var(--hop-rock-25);
722
- --hop-neutral-border-weakest: var(--hop-rock-50);
723
- --hop-neutral-surface-weak-active: var(--hop-rock-50);
784
+ --hop-neutral-surface-weak-press: var(--hop-rock-100);
724
785
  --hop-neutral-surface-weak-hover: var(--hop-rock-75);
725
- --hop-neutral-border-active: var(--hop-rock-800);
726
- --hop-neutral-border-hover: var(--hop-rock-300);
727
- --hop-neutral-icon-active: var(--hop-samoyed);
728
- --hop-neutral-icon-hover: var(--hop-rock-700);
729
- --hop-neutral-icon-strong: var(--hop-samoyed);
786
+ --hop-neutral-surface-weak-selected: var(--hop-rock-50);
787
+ --hop-neutral-surface-weak: var(--hop-rock-50);
788
+ --hop-neutral-surface-strong: var(--hop-rock-800);
789
+ --hop-neutral-surface-press: var(--hop-rock-50);
790
+ --hop-neutral-surface-hover: var(--hop-rock-25);
791
+ --hop-neutral-surface-disabled: var(--hop-rock-50);
792
+ --hop-neutral-surface-selected: var(--hop-rock-800);
793
+ --hop-neutral-surface: var(--hop-samoyed);
730
794
  --hop-neutral-icon-weakest: var(--hop-rock-200);
731
- --hop-neutral-border-weak: var(--hop-rock-75);
732
- --hop-neutral-border: var(--hop-rock-200);
733
- --hop-neutral-icon-weak-hover: var(--hop-rock-700);
795
+ --hop-neutral-icon-weak-press: var(--hop-rock-700);
796
+ --hop-neutral-icon-weak-hover: var(--hop-rock-600);
734
797
  --hop-neutral-icon-weak: var(--hop-rock-400);
735
- --hop-neutral-icon: var(--hop-rock-800);
798
+ --hop-neutral-icon-strong-hover: var(--hop-samoyed);
799
+ --hop-neutral-icon-strong: var(--hop-samoyed);
800
+ --hop-neutral-icon-press: var(--hop-rock-900);
801
+ --hop-neutral-icon-hover: var(--hop-rock-700);
736
802
  --hop-neutral-icon-disabled: var(--hop-rock-300);
737
- --hop-neutral-surface-hover: var(--hop-rock-25);
738
- --hop-neutral-surface-strong: var(--hop-rock-800);
739
- --hop-neutral-border-strong: var(--hop-rock-800);
803
+ --hop-neutral-icon-selected: var(--hop-samoyed);
804
+ --hop-neutral-icon: var(--hop-rock-800);
805
+ --hop-neutral-border-weakest: var(--hop-rock-50);
806
+ --hop-neutral-border-weak: var(--hop-rock-75);
740
807
  --hop-neutral-border-strong-hover: var(--hop-rock-700);
808
+ --hop-neutral-border-strong: var(--hop-rock-800);
809
+ --hop-neutral-border-press: var(--hop-rock-400);
810
+ --hop-neutral-border-hover: var(--hop-rock-300);
741
811
  --hop-neutral-border-disabled: var(--hop-rock-50);
742
- --hop-neutral-text-weakest: var(--hop-rock-200);
743
- --hop-neutral-text: var(--hop-rock-800);
744
- --hop-neutral-text-strong: var(--hop-samoyed);
745
- --hop-neutral-text-active: var(--hop-samoyed);
746
- --hop-neutral-text-disabled: var(--hop-rock-300);
747
- --hop-neutral-surface: var(--hop-samoyed);
748
- --hop-neutral-surface-weak: var(--hop-rock-50);
749
- --hop-neutral-surface-active: var(--hop-rock-800);
750
- --hop-neutral-surface-disabled: var(--hop-rock-50);
751
- --hop-neutral-text-weak: var(--hop-rock-400);
752
- --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
753
- --hop-neutral-surface-weakest-active: var(--hop-rock-50);
754
- --hop-neutral-text-hover: var(--hop-rock-700);
755
- --hop-decorative-option1-text: var(--hop-sapphire-900);
756
- --hop-decorative-option1-icon: var(--hop-sapphire-900);
812
+ --hop-neutral-border-selected: var(--hop-rock-800);
813
+ --hop-neutral-border: var(--hop-rock-200);
814
+ --hop-information-text-weak: var(--hop-coastal-300);
815
+ --hop-information-text: var(--hop-coastal-800);
816
+ --hop-information-surface-weak: var(--hop-coastal-50);
817
+ --hop-information-surface-strong: var(--hop-coastal-100);
818
+ --hop-information-surface: var(--hop-coastal-25);
819
+ --hop-information-icon-weak: var(--hop-coastal-300);
820
+ --hop-information-icon-weakest: var(--hop-coastal-75);
821
+ --hop-information-icon: var(--hop-coastal-700);
822
+ --hop-information-border: var(--hop-coastal-100);
757
823
  --hop-decorative-option1-text-weak: var(--hop-sapphire-300);
758
- --hop-decorative-option1-border: var(--hop-sapphire-100);
759
- --hop-decorative-option1-surface: var(--hop-sapphire-100);
760
- --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
761
- --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
824
+ --hop-decorative-option1-text: var(--hop-sapphire-900);
762
825
  --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
763
826
  --hop-decorative-option1-surface-weak-hover: var(--hop-sapphire-75);
764
827
  --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
765
- --hop-decorative-option2-border: var(--hop-quetzal-100);
766
- --hop-decorative-option2-icon: var(--hop-quetzal-900);
828
+ --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
829
+ --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
830
+ --hop-decorative-option1-surface: var(--hop-sapphire-100);
831
+ --hop-decorative-option1-icon: var(--hop-sapphire-900);
832
+ --hop-decorative-option1-border: var(--hop-sapphire-100);
767
833
  --hop-decorative-option2-text-weak: var(--hop-quetzal-300);
768
834
  --hop-decorative-option2-text: var(--hop-quetzal-900);
769
- --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
770
- --hop-decorative-option2-surface: var(--hop-quetzal-75);
771
- --hop-decorative-option2-surface-strong: var(--hop-quetzal-100);
835
+ --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
772
836
  --hop-decorative-option2-surface-weak-hover: var(--hop-quetzal-75);
773
837
  --hop-decorative-option2-surface-weak: var(--hop-quetzal-50);
774
- --hop-decorative-option2-surface-weakest: var(--hop-quetzal-25);
775
- --hop-decorative-option3-border: var(--hop-koi-100);
838
+ --hop-decorative-option2-surface-strong: var(--hop-quetzal-100);
839
+ --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
840
+ --hop-decorative-option2-surface: var(--hop-quetzal-75);
841
+ --hop-decorative-option2-icon: var(--hop-quetzal-900);
842
+ --hop-decorative-option2-border: var(--hop-quetzal-100);
776
843
  --hop-decorative-option3-text-weak: var(--hop-koi-300);
777
844
  --hop-decorative-option3-text: var(--hop-koi-900);
778
- --hop-decorative-option3-icon: var(--hop-koi-900);
779
- --hop-decorative-option3-surface: var(--hop-koi-100);
780
- --hop-decorative-option3-surface-hover: var(--hop-koi-200);
781
- --hop-decorative-option3-surface-strong: var(--hop-koi-200);
782
845
  --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
783
846
  --hop-decorative-option3-surface-weak-hover: var(--hop-koi-75);
784
847
  --hop-decorative-option3-surface-weak: var(--hop-koi-50);
785
- --hop-decorative-option4-border: var(--hop-moss-100);
786
- --hop-decorative-option4-text: var(--hop-moss-900);
848
+ --hop-decorative-option3-surface-strong: var(--hop-koi-200);
849
+ --hop-decorative-option3-surface-hover: var(--hop-koi-200);
850
+ --hop-decorative-option3-surface: var(--hop-koi-100);
851
+ --hop-decorative-option3-icon: var(--hop-koi-900);
852
+ --hop-decorative-option3-border: var(--hop-koi-100);
787
853
  --hop-decorative-option4-text-weak: var(--hop-moss-400);
788
- --hop-decorative-option4-icon: var(--hop-moss-900);
789
- --hop-decorative-option4-surface: var(--hop-moss-75);
790
- --hop-decorative-option4-surface-hover: var(--hop-moss-100);
791
- --hop-decorative-option4-surface-strong: var(--hop-moss-100);
854
+ --hop-decorative-option4-text: var(--hop-moss-900);
855
+ --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
792
856
  --hop-decorative-option4-surface-weak-hover: var(--hop-moss-75);
793
857
  --hop-decorative-option4-surface-weak: var(--hop-moss-50);
794
- --hop-decorative-option4-surface-weakest: var(--hop-moss-25);
795
- --hop-decorative-option6-border: var(--hop-sunken-treasure-100);
858
+ --hop-decorative-option4-surface-strong: var(--hop-moss-100);
859
+ --hop-decorative-option4-surface-hover: var(--hop-moss-100);
860
+ --hop-decorative-option4-surface: var(--hop-moss-75);
861
+ --hop-decorative-option4-icon: var(--hop-moss-900);
862
+ --hop-decorative-option4-border: var(--hop-moss-100);
796
863
  --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
797
864
  --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
798
- --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
799
- --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
800
- --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
801
- --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
865
+ --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
802
866
  --hop-decorative-option6-surface-weak-hover: var(--hop-sunken-treasure-75);
803
867
  --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
804
- --hop-decorative-option6-surface-weakest: var(--hop-sunken-treasure-25);
805
- --hop-decorative-option5-border: var(--hop-coastal-100);
806
- --hop-decorative-option5-icon: var(--hop-coastal-900);
807
- --hop-decorative-option5-surface: var(--hop-coastal-75);
808
- --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
809
- --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
810
- --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
811
- --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
812
- --hop-decorative-option5-text: var(--hop-coastal-900);
868
+ --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
869
+ --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
870
+ --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
871
+ --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
872
+ --hop-decorative-option6-border: var(--hop-sunken-treasure-100);
813
873
  --hop-decorative-option5-text-weak: var(--hop-coastal-300);
814
- --hop-decorative-option7-border: var(--hop-toad-100);
815
- --hop-decorative-option7-text: var(--hop-toad-900);
874
+ --hop-decorative-option5-text: var(--hop-coastal-900);
875
+ --hop-decorative-option5-surface-weakest: var(--hop-coastal-25);
876
+ --hop-decorative-option5-surface-weak-hover: var(--hop-coastal-75);
877
+ --hop-decorative-option5-surface-weak: var(--hop-coastal-50);
878
+ --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
879
+ --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
880
+ --hop-decorative-option5-surface: var(--hop-coastal-75);
881
+ --hop-decorative-option5-icon: var(--hop-coastal-900);
882
+ --hop-decorative-option5-border: var(--hop-coastal-100);
816
883
  --hop-decorative-option7-text-weak: var(--hop-toad-500);
817
- --hop-decorative-option7-surface: var(--hop-toad-75);
818
- --hop-decorative-option7-surface-hover: var(--hop-toad-100);
819
- --hop-decorative-option7-surface-strong: var(--hop-toad-100);
884
+ --hop-decorative-option7-text: var(--hop-toad-900);
885
+ --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
820
886
  --hop-decorative-option7-surface-weak-hover: var(--hop-toad-75);
821
887
  --hop-decorative-option7-surface-weak: var(--hop-toad-50);
822
- --hop-decorative-option7-surface-weakest: var(--hop-toad-25);
888
+ --hop-decorative-option7-surface-strong: var(--hop-toad-100);
889
+ --hop-decorative-option7-surface-hover: var(--hop-toad-100);
890
+ --hop-decorative-option7-surface: var(--hop-toad-75);
823
891
  --hop-decorative-option7-icon: var(--hop-toad-900);
824
- --hop-decorative-option8-border: var(--hop-amanita-100);
825
- --hop-decorative-option8-text: var(--hop-amanita-900);
826
- --hop-decorative-option8-surface: var(--hop-amanita-75);
892
+ --hop-decorative-option7-border: var(--hop-toad-100);
827
893
  --hop-decorative-option8-text-weak: var(--hop-amanita-300);
828
- --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
829
- --hop-decorative-option8-surface-hover: var(--hop-amanita-100);
894
+ --hop-decorative-option8-text: var(--hop-amanita-900);
895
+ --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
830
896
  --hop-decorative-option8-surface-weak-hover: var(--hop-amanita-75);
831
897
  --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
832
- --hop-decorative-option8-surface-weakest: var(--hop-amanita-25);
898
+ --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
899
+ --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
900
+ --hop-decorative-option8-surface: var(--hop-amanita-75);
833
901
  --hop-decorative-option8-icon: var(--hop-amanita-900);
834
- --hop-decorative-option9-border: var(--hop-rock-100);
902
+ --hop-decorative-option8-border: var(--hop-amanita-100);
835
903
  --hop-decorative-option9-text-weak: var(--hop-rock-300);
836
904
  --hop-decorative-option9-text: var(--hop-samoyed);
837
905
  --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
838
906
  --hop-decorative-option9-surface-weak-hover: var(--hop-rock-400);
839
907
  --hop-decorative-option9-surface-weak: var(--hop-rock-300);
840
- --hop-decorative-option9-surface-hover: var(--hop-rock-500);
841
908
  --hop-decorative-option9-surface-strong: var(--hop-rock-800);
909
+ --hop-decorative-option9-surface-hover: var(--hop-rock-500);
842
910
  --hop-decorative-option9-surface: var(--hop-rock-400);
843
911
  --hop-decorative-option9-icon: var(--hop-samoyed);
844
- --hop-primary-surface-active: var(--hop-sapphire-50);
845
- --hop-primary-text-hover: var(--hop-sapphire-600);
846
- --hop-primary-text-strong-hover: var(--hop-samoyed);
847
- --hop-primary-text-strong: var(--hop-samoyed);
848
- --hop-primary-surface-hover: var(--hop-sapphire-600);
849
- --hop-primary-text: var(--hop-sapphire-500);
850
- --hop-primary-surface-strong-hover: var(--hop-sapphire-600);
851
- --hop-primary-surface-strong-active: var(--hop-sapphire-50);
852
- --hop-primary-surface-strong: var(--hop-sapphire-400);
853
- --hop-primary-surface-weak: var(--hop-sapphire-25);
854
- --hop-primary-surface: var(--hop-sapphire-50);
855
- --hop-primary-text-disabled: var(--hop-sapphire-200);
856
- --hop-primary-surface-focus: var(--hop-sapphire-25);
857
- --hop-primary-surface-disabled: var(--hop-sapphire-200);
858
- --hop-primary-icon-disabled: var(--hop-sapphire-200);
859
- --hop-primary-icon-hover: var(--hop-sapphire-600);
860
- --hop-primary-border: var(--hop-sapphire-400);
861
- --hop-primary-border-focus: var(--hop-sapphire-500);
862
- --hop-primary-icon: var(--hop-sapphire-500);
863
- --hop-primary-icon-strong-hover: var(--hop-samoyed);
864
- --hop-primary-icon-strong: var(--hop-samoyed);
865
- --hop-primary-text-active: var(--hop-sapphire-500);
866
- --hop-primary-border-active: var(--hop-sapphire-400);
867
- --hop-primary-icon-active: var(--hop-sapphire-500);
868
- --hop-danger-border: var(--hop-amanita-100);
869
- --hop-danger-icon-disabled: var(--hop-amanita-100);
870
- --hop-danger-text-disabled: var(--hop-amanita-100);
871
- --hop-danger-icon-hover: var(--hop-amanita-500);
872
- --hop-danger-icon-strong-hover: var(--hop-samoyed);
873
- --hop-danger-icon-strong: var(--hop-samoyed);
912
+ --hop-decorative-option9-border: var(--hop-rock-100);
913
+ --hop-danger-text-weak-press: var(--hop-amanita-600);
914
+ --hop-danger-text-weak-hover: var(--hop-amanita-500);
915
+ --hop-danger-text-weak: var(--hop-amanita-400);
874
916
  --hop-danger-text-strong-hover: var(--hop-samoyed);
875
917
  --hop-danger-text-strong: var(--hop-samoyed);
876
- --hop-danger-text-weak: var(--hop-amanita-300);
877
- --hop-danger-surface-active: var(--hop-amanita-50);
918
+ --hop-danger-text-press: var(--hop-amanita-800);
919
+ --hop-danger-text-hover: var(--hop-amanita-500);
920
+ --hop-danger-text-disabled: var(--hop-amanita-100);
921
+ --hop-danger-text-selected: var(--hop-amanita-400);
878
922
  --hop-danger-text: var(--hop-amanita-700);
879
- --hop-danger-icon-weak: var(--hop-amanita-300);
880
- --hop-danger-icon: var(--hop-amanita-700);
881
- --hop-danger-border-strong: var(--hop-amanita-300);
923
+ --hop-danger-surface-weak-press: var(--hop-amanita-100);
924
+ --hop-danger-surface-weak-hover: var(--hop-amanita-75);
882
925
  --hop-danger-surface-weak: var(--hop-amanita-50);
883
926
  --hop-danger-surface-strong-hover: var(--hop-amanita-500);
884
- --hop-danger-surface-strong: var(--hop-amanita-300);
927
+ --hop-danger-surface-strong: var(--hop-amanita-400);
928
+ --hop-danger-surface-press: var(--hop-amanita-600);
885
929
  --hop-danger-surface-hover: var(--hop-amanita-500);
886
930
  --hop-danger-surface-disabled: var(--hop-amanita-100);
887
- --hop-danger-text-hover: var(--hop-amanita-500);
931
+ --hop-danger-surface-selected: var(--hop-amanita-50);
888
932
  --hop-danger-surface: var(--hop-amanita-25);
889
- --hop-danger-text-active: var(--hop-amanita-400);
890
- --hop-danger-icon-active: var(--hop-amanita-400);
891
- --hop-danger-border-active: var(--hop-amanita-300);
892
- --hop-upsell-surface: var(--hop-sunken-treasure-75);
893
- --hop-upsell-surface-active: var(--hop-sunken-treasure-50);
894
- --hop-upsell-text-disabled: var(--hop-sunken-treasure-400);
895
- --hop-upsell-text-hover: var(--hop-sunken-treasure-900);
896
- --hop-upsell-icon: var(--hop-sunken-treasure-800);
897
- --hop-upsell-text: var(--hop-sunken-treasure-800);
898
- --hop-upsell-surface-disabled: var(--hop-sunken-treasure-25);
899
- --hop-upsell-surface-weak: var(--hop-sunken-treasure-25);
900
- --hop-upsell-icon-active: var(--hop-sunken-treasure-400);
901
- --hop-upsell-border-disabled: var(--hop-sunken-treasure-75);
902
- --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
903
- --hop-upsell-border: var(--hop-sunken-treasure-100);
904
- --hop-upsell-icon-weak: var(--hop-sunken-treasure-100);
905
- --hop-upsell-icon-weakest: var(--hop-sunken-treasure-75);
906
- --hop-upsell-text-active: var(--hop-sunken-treasure-400);
907
- --hop-upsell-border-active: var(--hop-sunken-treasure-200);
933
+ --hop-danger-icon-weak-press: var(--hop-amanita-600);
934
+ --hop-danger-icon-weak-hover: var(--hop-amanita-500);
935
+ --hop-danger-icon-weak: var(--hop-amanita-300);
936
+ --hop-danger-icon-strong-hover: var(--hop-samoyed);
937
+ --hop-danger-icon-strong: var(--hop-samoyed);
938
+ --hop-danger-icon-press: var(--hop-amanita-800);
939
+ --hop-danger-icon-hover: var(--hop-amanita-500);
940
+ --hop-danger-icon-disabled: var(--hop-amanita-100);
941
+ --hop-danger-icon-selected: var(--hop-amanita-400);
942
+ --hop-danger-icon: var(--hop-amanita-700);
943
+ --hop-danger-border-press: var(--hop-amanita-600);
944
+ --hop-danger-border-strong: var(--hop-amanita-300);
945
+ --hop-danger-border-selected: var(--hop-amanita-300);
946
+ --hop-danger-border: var(--hop-amanita-100);
908
947
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "3.5.0",
4
+ "version": "4.0.0",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -30,13 +30,14 @@
30
30
  "README.md"
31
31
  ],
32
32
  "devDependencies": {
33
- "@types/node": "20.11.30",
34
- "@workleap/eslint-plugin": "3.1.0",
35
- "@workleap/tsup-configs": "3.0.4",
33
+ "@types/node": "20.12.10",
34
+ "@workleap/eslint-plugin": "3.2.2",
35
+ "@workleap/tsup-configs": "3.0.6",
36
36
  "@workleap/typescript-configs": "3.0.2",
37
+ "eslint": "8.57.0",
37
38
  "style-dictionary": "3.9.2",
38
- "tsx": "4.7.1",
39
- "typescript": "5.4.2"
39
+ "tsx": "4.9.3",
40
+ "typescript": "5.4.5"
40
41
  },
41
42
  "sideEffects": false,
42
43
  "scripts": {