@hopper-ui/tokens 4.0.0 → 4.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/dark/tokens.css +129 -102
  3. package/dist/tokens.css +131 -104
  4. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 4.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 8ad853b: Retro fitted active color tokens to ease with migrations, these will be deprecated eventually.
8
+
9
+ ## 4.0.1
10
+
11
+ ### Patch Changes
12
+
13
+ - ffe99c7: Adjustment of the text crop token value for ABC Favorit Mono typeface
14
+
3
15
  ## 4.0.0
4
16
 
5
17
  ### Major Changes
package/dist/dark/tokens.css CHANGED
@@ -1,4 +1,11 @@
1
1
  [data-mode="dark"] {
2
+ --hop-danger-border-active: var(--hop-amanita-300);
3
+ --hop-danger-icon-active: var(--hop-amanita-50);
4
+ --hop-danger-icon-weak-active: var(--hop-amanita-300);
5
+ --hop-danger-surface-active: var(--hop-amanita-600);
6
+ --hop-danger-surface-weak-active: var(--hop-amanita-600);
7
+ --hop-danger-text-active: var(--hop-amanita-50);
8
+ --hop-danger-text-weak-active: var(--hop-amanita-300);
2
9
  --hop-danger-border: var(--hop-amanita-500);
3
10
  --hop-danger-border-selected: var(--hop-amanita-100);
4
11
  --hop-danger-border-press: var(--hop-amanita-300);
@@ -33,6 +40,128 @@
33
40
  --hop-danger-text-weak: var(--hop-amanita-100);
34
41
  --hop-danger-text-weak-hover: var(--hop-amanita-200);
35
42
  --hop-danger-text-weak-press: var(--hop-amanita-300);
43
+ --hop-neutral-border-active: var(--hop-rock-700);
44
+ --hop-neutral-icon-active: var(--hop-toad-25);
45
+ --hop-neutral-icon-weak-active: var(--hop-rock-50);
46
+ --hop-neutral-surface-active: var(--hop-rock-700);
47
+ --hop-neutral-surface-weak-active: var(--hop-rock-600);
48
+ --hop-neutral-text-active: var(--hop-toad-25);
49
+ --hop-neutral-text-weak-active: var(--hop-rock-50);
50
+ --hop-neutral-border: var(--hop-rock-500);
51
+ --hop-neutral-border-selected: var(--hop-toad-25);
52
+ --hop-neutral-border-disabled: var(--hop-rock-800);
53
+ --hop-neutral-border-hover: var(--hop-rock-300);
54
+ --hop-neutral-border-press: var(--hop-rock-700);
55
+ --hop-neutral-border-strong: var(--hop-samoyed);
56
+ --hop-neutral-border-strong-hover: var(--hop-samoyed);
57
+ --hop-neutral-border-weakest: var(--hop-rock-800);
58
+ --hop-neutral-border-weak: var(--hop-rock-800);
59
+ --hop-neutral-icon: var(--hop-rock-25);
60
+ --hop-neutral-icon-selected: var(--hop-rock-900);
61
+ --hop-neutral-icon-disabled: var(--hop-rock-500);
62
+ --hop-neutral-icon-hover: var(--hop-rock-50);
63
+ --hop-neutral-icon-press: var(--hop-toad-25);
64
+ --hop-neutral-icon-strong: var(--hop-rock-900);
65
+ --hop-neutral-icon-strong-hover: var(--hop-rock-900);
66
+ --hop-neutral-icon-weak: var(--hop-rock-200);
67
+ --hop-neutral-icon-weak-hover: var(--hop-rock-75);
68
+ --hop-neutral-icon-weak-press: var(--hop-rock-50);
69
+ --hop-neutral-icon-weakest: var(--hop-rock-400);
70
+ --hop-neutral-surface: var(--hop-abyss);
71
+ --hop-neutral-surface-selected: var(--hop-toad-25);
72
+ --hop-neutral-surface-disabled: var(--hop-rock-700);
73
+ --hop-neutral-surface-hover: var(--hop-rock-800);
74
+ --hop-neutral-surface-press: var(--hop-rock-700);
75
+ --hop-neutral-surface-strong: var(--hop-toad-25);
76
+ --hop-neutral-surface-weakest: var(--hop-rock-900);
77
+ --hop-neutral-surface-weak: var(--hop-rock-800);
78
+ --hop-neutral-surface-weak-selected: var(--hop-rock-800);
79
+ --hop-neutral-surface-weak-hover: var(--hop-rock-700);
80
+ --hop-neutral-surface-weak-press: var(--hop-rock-600);
81
+ --hop-neutral-surface-weakest-selected: var(--hop-rock-800);
82
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
83
+ --hop-neutral-text: var(--hop-rock-25);
84
+ --hop-neutral-text-selected: var(--hop-rock-900);
85
+ --hop-neutral-text-disabled: var(--hop-rock-500);
86
+ --hop-neutral-text-hover: var(--hop-rock-50);
87
+ --hop-neutral-text-press: var(--hop-toad-25);
88
+ --hop-neutral-text-strong: var(--hop-rock-900);
89
+ --hop-neutral-text-weak: var(--hop-rock-200);
90
+ --hop-neutral-text-weak-hover: var(--hop-rock-75);
91
+ --hop-neutral-text-weak-press: var(--hop-rock-50);
92
+ --hop-neutral-text-weakest: var(--hop-rock-400);
93
+ --hop-primary-border-active: var(--hop-sapphire-500);
94
+ --hop-primary-icon-active: var(--hop-sapphire-75);
95
+ --hop-primary-surface-active: var(--hop-sapphire-500);
96
+ --hop-primary-surface-strong-active: var(--hop-sapphire-600);
97
+ --hop-primary-surface-weak-active: var(--hop-sapphire-600);
98
+ --hop-primary-text-active: var(--hop-sapphire-75);
99
+ --hop-primary-border: var(--hop-sapphire-300);
100
+ --hop-primary-border-selected: var(--hop-sapphire-300);
101
+ --hop-primary-border-focus: var(--hop-sapphire-200);
102
+ --hop-primary-border-press: var(--hop-sapphire-500);
103
+ --hop-primary-icon: var(--hop-sapphire-200);
104
+ --hop-primary-icon-selected: var(--hop-sapphire-200);
105
+ --hop-primary-icon-disabled: var(--hop-sapphire-700);
106
+ --hop-primary-icon-hover: var(--hop-sapphire-300);
107
+ --hop-primary-icon-press: var(--hop-sapphire-75);
108
+ --hop-primary-icon-strong: var(--hop-samoyed);
109
+ --hop-primary-icon-strong-hover: var(--hop-sapphire-300);
110
+ --hop-primary-surface: var(--hop-sapphire-200);
111
+ --hop-primary-surface-selected: var(--hop-sapphire-800);
112
+ --hop-primary-surface-disabled: var(--hop-sapphire-700);
113
+ --hop-primary-surface-focus: var(--hop-sapphire-900);
114
+ --hop-primary-surface-hover: var(--hop-sapphire-400);
115
+ --hop-primary-surface-press: var(--hop-sapphire-500);
116
+ --hop-primary-surface-strong: var(--hop-sapphire-400);
117
+ --hop-primary-surface-strong-selected: var(--hop-sapphire-800);
118
+ --hop-primary-surface-strong-hover: var(--hop-sapphire-500);
119
+ --hop-primary-surface-strong-press: var(--hop-sapphire-600);
120
+ --hop-primary-surface-weak: var(--hop-sapphire-800);
121
+ --hop-primary-surface-weak-hover: var(--hop-sapphire-700);
122
+ --hop-primary-surface-weak-press: var(--hop-sapphire-600);
123
+ --hop-primary-text: var(--hop-sapphire-100);
124
+ --hop-primary-text-hover: var(--hop-sapphire-200);
125
+ --hop-primary-text-press: var(--hop-sapphire-75);
126
+ --hop-primary-text-strong: var(--hop-samoyed);
127
+ --hop-primary-text-strong-hover: var(--hop-samoyed);
128
+ --hop-primary-text-selected: var(--hop-sapphire-200);
129
+ --hop-primary-text-disabled: var(--hop-sapphire-700);
130
+ --hop-upsell-border-active: var(--hop-sunken-treasure-400);
131
+ --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
132
+ --hop-upsell-icon-weak-active: var(--hop-sunken-treasure-300);
133
+ --hop-upsell-surface-active: var(--hop-sunken-treasure-300);
134
+ --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-600);
135
+ --hop-upsell-text-active: var(--hop-sunken-treasure-900);
136
+ --hop-upsell-text-weak-active: var(--hop-sunken-treasure-300);
137
+ --hop-upsell-border: var(--hop-sunken-treasure-200);
138
+ --hop-upsell-border-selected: var(--hop-sunken-treasure-100);
139
+ --hop-upsell-border-disabled: var(--hop-sunken-treasure-700);
140
+ --hop-upsell-border-press: var(--hop-sunken-treasure-400);
141
+ --hop-upsell-icon: var(--hop-sunken-treasure-700);
142
+ --hop-upsell-icon-selected: var(--hop-sunken-treasure-100);
143
+ --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
144
+ --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
145
+ --hop-upsell-icon-weakest: var(--hop-sunken-treasure-100);
146
+ --hop-upsell-icon-weak: var(--hop-sunken-treasure-300);
147
+ --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-200);
148
+ --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-300);
149
+ --hop-upsell-surface: var(--hop-sunken-treasure-50);
150
+ --hop-upsell-surface-selected: var(--hop-sunken-treasure-800);
151
+ --hop-upsell-surface-disabled: var(--hop-sunken-treasure-700);
152
+ --hop-upsell-surface-hover: var(--hop-sunken-treasure-200);
153
+ --hop-upsell-surface-press: var(--hop-sunken-treasure-300);
154
+ --hop-upsell-surface-weak: var(--hop-sunken-treasure-900);
155
+ --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-700);
156
+ --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-600);
157
+ --hop-upsell-text: var(--hop-sunken-treasure-700);
158
+ --hop-upsell-text-selected: var(--hop-sunken-treasure-100);
159
+ --hop-upsell-text-disabled: var(--hop-sunken-treasure-300);
160
+ --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
161
+ --hop-upsell-text-press: var(--hop-sunken-treasure-900);
162
+ --hop-upsell-text-weak: var(--hop-sunken-treasure-100);
163
+ --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-200);
164
+ --hop-upsell-text-weak-press: var(--hop-sunken-treasure-300);
36
165
  --hop-decorative-option1-border: var(--hop-sapphire-400);
37
166
  --hop-decorative-option1-icon: var(--hop-sapphire-900);
38
167
  --hop-decorative-option1-surface: var(--hop-sapphire-100);
@@ -132,80 +261,6 @@
132
261
  --hop-information-surface-weak: var(--hop-coastal-800);
133
262
  --hop-information-text: var(--hop-coastal-900);
134
263
  --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);
137
- --hop-neutral-border-disabled: var(--hop-rock-800);
138
- --hop-neutral-border-hover: var(--hop-rock-300);
139
- --hop-neutral-border-press: var(--hop-rock-700);
140
- --hop-neutral-border-strong: var(--hop-samoyed);
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);
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);
151
- --hop-neutral-icon-weak: var(--hop-rock-200);
152
- --hop-neutral-icon-weak-hover: var(--hop-rock-75);
153
- --hop-neutral-icon-weak-press: var(--hop-rock-50);
154
- --hop-neutral-icon-weakest: var(--hop-rock-400);
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);
161
- --hop-neutral-surface-weakest: var(--hop-rock-900);
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
264
  --hop-status-caution-icon: var(--hop-koi-900);
210
265
  --hop-status-caution-surface: var(--hop-koi-75);
211
266
  --hop-status-caution-surface-strong: var(--hop-koi-200);
@@ -264,34 +319,6 @@
264
319
  --hop-success-text: var(--hop-moss-900);
265
320
  --hop-success-text-weak: var(--hop-moss-75);
266
321
  --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
322
  --hop-warning-border: var(--hop-koi-500);
296
323
  --hop-warning-icon: var(--hop-koi-900);
297
324
  --hop-warning-icon-weakest: var(--hop-koi-200);
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 15 May 2024 13:31:38 GMT
3
+ * Generated on Tue, 11 Jun 2024 17:25:31 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -197,7 +197,7 @@
197
197
  --hop-space-40: 0.25rem;
198
198
  --hop-space-20: 0.125rem;
199
199
  --hop-space-0: 0;
200
- --hop-overline-bottom-offset: -0.125rem;
200
+ --hop-overline-bottom-offset: -0.25rem;
201
201
  --hop-overline-top-offset: -0.25rem;
202
202
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
203
203
  --hop-heading-xs-medium-top-offset: -0.4166rem;
@@ -651,34 +651,6 @@
651
651
  --hop-warning-icon-weakest: var(--hop-koi-100);
652
652
  --hop-warning-icon: var(--hop-koi-700);
653
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
654
  --hop-success-text-weak: var(--hop-moss-300);
683
655
  --hop-success-text-hover: var(--hop-moss-800);
684
656
  --hop-success-text: var(--hop-moss-700);
@@ -737,80 +709,6 @@
737
709
  --hop-status-caution-surface: var(--hop-koi-50);
738
710
  --hop-status-caution-icon: var(--hop-koi-700);
739
711
  --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);
783
- --hop-neutral-surface-weakest: var(--hop-rock-25);
784
- --hop-neutral-surface-weak-press: var(--hop-rock-100);
785
- --hop-neutral-surface-weak-hover: var(--hop-rock-75);
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);
794
- --hop-neutral-icon-weakest: var(--hop-rock-200);
795
- --hop-neutral-icon-weak-press: var(--hop-rock-700);
796
- --hop-neutral-icon-weak-hover: var(--hop-rock-600);
797
- --hop-neutral-icon-weak: var(--hop-rock-400);
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);
802
- --hop-neutral-icon-disabled: var(--hop-rock-300);
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);
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);
811
- --hop-neutral-border-disabled: var(--hop-rock-50);
812
- --hop-neutral-border-selected: var(--hop-rock-800);
813
- --hop-neutral-border: var(--hop-rock-200);
814
712
  --hop-information-text-weak: var(--hop-coastal-300);
815
713
  --hop-information-text: var(--hop-coastal-800);
816
714
  --hop-information-surface-weak: var(--hop-coastal-50);
@@ -910,6 +808,128 @@
910
808
  --hop-decorative-option9-surface: var(--hop-rock-400);
911
809
  --hop-decorative-option9-icon: var(--hop-samoyed);
912
810
  --hop-decorative-option9-border: var(--hop-rock-100);
811
+ --hop-upsell-text-weak-press: var(--hop-sunken-treasure-600);
812
+ --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-500);
813
+ --hop-upsell-text-weak: var(--hop-sunken-treasure-300);
814
+ --hop-upsell-text-press: var(--hop-sunken-treasure-900);
815
+ --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
816
+ --hop-upsell-text-disabled: var(--hop-sunken-treasure-400);
817
+ --hop-upsell-text-selected: var(--hop-sunken-treasure-400);
818
+ --hop-upsell-text: var(--hop-sunken-treasure-700);
819
+ --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-75);
820
+ --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-50);
821
+ --hop-upsell-surface-weak: var(--hop-sunken-treasure-25);
822
+ --hop-upsell-surface-press: var(--hop-sunken-treasure-200);
823
+ --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
824
+ --hop-upsell-surface-disabled: var(--hop-sunken-treasure-25);
825
+ --hop-upsell-surface-selected: var(--hop-sunken-treasure-50);
826
+ --hop-upsell-surface: var(--hop-sunken-treasure-75);
827
+ --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-600);
828
+ --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-500);
829
+ --hop-upsell-icon-weak: var(--hop-sunken-treasure-100);
830
+ --hop-upsell-icon-weakest: var(--hop-sunken-treasure-75);
831
+ --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
832
+ --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
833
+ --hop-upsell-icon-selected: var(--hop-sunken-treasure-400);
834
+ --hop-upsell-icon: var(--hop-sunken-treasure-700);
835
+ --hop-upsell-border-press: var(--hop-sunken-treasure-200);
836
+ --hop-upsell-border-disabled: var(--hop-sunken-treasure-75);
837
+ --hop-upsell-border-selected: var(--hop-sunken-treasure-200);
838
+ --hop-upsell-border: var(--hop-sunken-treasure-100);
839
+ --hop-upsell-text-weak-active: var(--hop-sunken-treasure-600);
840
+ --hop-upsell-text-active: var(--hop-sunken-treasure-900);
841
+ --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-75);
842
+ --hop-upsell-surface-active: var(--hop-sunken-treasure-200);
843
+ --hop-upsell-icon-weak-active: var(--hop-sunken-treasure-600);
844
+ --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
845
+ --hop-upsell-border-active: var(--hop-sunken-treasure-200);
846
+ --hop-primary-text-strong-hover: var(--hop-samoyed);
847
+ --hop-primary-text-strong: var(--hop-samoyed);
848
+ --hop-primary-text-press: var(--hop-sapphire-700);
849
+ --hop-primary-text-hover: var(--hop-sapphire-600);
850
+ --hop-primary-text-disabled: var(--hop-sapphire-200);
851
+ --hop-primary-text-selected: var(--hop-sapphire-500);
852
+ --hop-primary-text: var(--hop-sapphire-500);
853
+ --hop-primary-surface-weak-press: var(--hop-sapphire-75);
854
+ --hop-primary-surface-weak-hover: var(--hop-sapphire-50);
855
+ --hop-primary-surface-weak: var(--hop-sapphire-25);
856
+ --hop-primary-surface-strong-press: var(--hop-sapphire-700);
857
+ --hop-primary-surface-strong-hover: var(--hop-sapphire-600);
858
+ --hop-primary-surface-strong-selected: var(--hop-sapphire-50);
859
+ --hop-primary-surface-strong: var(--hop-sapphire-400);
860
+ --hop-primary-surface-press: var(--hop-sapphire-300);
861
+ --hop-primary-surface-hover: var(--hop-sapphire-200);
862
+ --hop-primary-surface-focus: var(--hop-sapphire-25);
863
+ --hop-primary-surface-disabled: var(--hop-sapphire-200);
864
+ --hop-primary-surface-selected: var(--hop-sapphire-50);
865
+ --hop-primary-surface: var(--hop-sapphire-50);
866
+ --hop-primary-icon-strong-hover: var(--hop-samoyed);
867
+ --hop-primary-icon-strong: var(--hop-samoyed);
868
+ --hop-primary-icon-press: var(--hop-sapphire-700);
869
+ --hop-primary-icon-hover: var(--hop-sapphire-600);
870
+ --hop-primary-icon-disabled: var(--hop-sapphire-200);
871
+ --hop-primary-icon-selected: var(--hop-sapphire-500);
872
+ --hop-primary-icon: var(--hop-sapphire-500);
873
+ --hop-primary-border-press: var(--hop-sapphire-300);
874
+ --hop-primary-border-focus: var(--hop-sapphire-500);
875
+ --hop-primary-border-selected: var(--hop-sapphire-400);
876
+ --hop-primary-border: var(--hop-sapphire-400);
877
+ --hop-primary-text-active: var(--hop-sapphire-700);
878
+ --hop-primary-surface-weak-active: var(--hop-sapphire-75);
879
+ --hop-primary-surface-strong-active: var(--hop-sapphire-700);
880
+ --hop-primary-surface-active: var(--hop-sapphire-300);
881
+ --hop-primary-icon-active: var(--hop-sapphire-700);
882
+ --hop-primary-border-active: var(--hop-sapphire-300);
883
+ --hop-neutral-text-weakest: var(--hop-rock-200);
884
+ --hop-neutral-text-weak-press: var(--hop-rock-700);
885
+ --hop-neutral-text-weak-hover: var(--hop-rock-600);
886
+ --hop-neutral-text-weak: var(--hop-rock-500);
887
+ --hop-neutral-text-strong: var(--hop-samoyed);
888
+ --hop-neutral-text-press: var(--hop-rock-900);
889
+ --hop-neutral-text-hover: var(--hop-rock-700);
890
+ --hop-neutral-text-disabled: var(--hop-rock-300);
891
+ --hop-neutral-text-selected: var(--hop-samoyed);
892
+ --hop-neutral-text: var(--hop-rock-800);
893
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
894
+ --hop-neutral-surface-weakest-selected: var(--hop-rock-50);
895
+ --hop-neutral-surface-weakest: var(--hop-rock-25);
896
+ --hop-neutral-surface-weak-press: var(--hop-rock-100);
897
+ --hop-neutral-surface-weak-hover: var(--hop-rock-75);
898
+ --hop-neutral-surface-weak-selected: var(--hop-rock-50);
899
+ --hop-neutral-surface-weak: var(--hop-rock-50);
900
+ --hop-neutral-surface-strong: var(--hop-rock-800);
901
+ --hop-neutral-surface-press: var(--hop-rock-50);
902
+ --hop-neutral-surface-hover: var(--hop-rock-25);
903
+ --hop-neutral-surface-disabled: var(--hop-rock-50);
904
+ --hop-neutral-surface-selected: var(--hop-rock-800);
905
+ --hop-neutral-surface: var(--hop-samoyed);
906
+ --hop-neutral-icon-weakest: var(--hop-rock-200);
907
+ --hop-neutral-icon-weak-press: var(--hop-rock-700);
908
+ --hop-neutral-icon-weak-hover: var(--hop-rock-600);
909
+ --hop-neutral-icon-weak: var(--hop-rock-400);
910
+ --hop-neutral-icon-strong-hover: var(--hop-samoyed);
911
+ --hop-neutral-icon-strong: var(--hop-samoyed);
912
+ --hop-neutral-icon-press: var(--hop-rock-900);
913
+ --hop-neutral-icon-hover: var(--hop-rock-700);
914
+ --hop-neutral-icon-disabled: var(--hop-rock-300);
915
+ --hop-neutral-icon-selected: var(--hop-samoyed);
916
+ --hop-neutral-icon: var(--hop-rock-800);
917
+ --hop-neutral-border-weakest: var(--hop-rock-50);
918
+ --hop-neutral-border-weak: var(--hop-rock-75);
919
+ --hop-neutral-border-strong-hover: var(--hop-rock-700);
920
+ --hop-neutral-border-strong: var(--hop-rock-800);
921
+ --hop-neutral-border-press: var(--hop-rock-400);
922
+ --hop-neutral-border-hover: var(--hop-rock-300);
923
+ --hop-neutral-border-disabled: var(--hop-rock-50);
924
+ --hop-neutral-border-selected: var(--hop-rock-800);
925
+ --hop-neutral-border: var(--hop-rock-200);
926
+ --hop-neutral-text-weak-active: var(--hop-rock-700);
927
+ --hop-neutral-text-active: var(--hop-rock-900);
928
+ --hop-neutral-surface-weak-active: var(--hop-rock-100);
929
+ --hop-neutral-surface-active: var(--hop-rock-50);
930
+ --hop-neutral-icon-weak-active: var(--hop-rock-700);
931
+ --hop-neutral-icon-active: var(--hop-rock-900);
932
+ --hop-neutral-border-active: var(--hop-rock-400);
913
933
  --hop-danger-text-weak-press: var(--hop-amanita-600);
914
934
  --hop-danger-text-weak-hover: var(--hop-amanita-500);
915
935
  --hop-danger-text-weak: var(--hop-amanita-400);
@@ -944,4 +964,11 @@
944
964
  --hop-danger-border-strong: var(--hop-amanita-300);
945
965
  --hop-danger-border-selected: var(--hop-amanita-300);
946
966
  --hop-danger-border: var(--hop-amanita-100);
967
+ --hop-danger-text-weak-active: var(--hop-amanita-600);
968
+ --hop-danger-text-active: var(--hop-amanita-800);
969
+ --hop-danger-surface-weak-active: var(--hop-amanita-100);
970
+ --hop-danger-surface-active: var(--hop-amanita-600);
971
+ --hop-danger-icon-weak-active: var(--hop-amanita-600);
972
+ --hop-danger-icon-active: var(--hop-amanita-800);
973
+ --hop-danger-border-active: var(--hop-amanita-600);
947
974
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "4.0.0",
4
+ "version": "4.0.2",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -30,13 +30,13 @@
30
30
  "README.md"
31
31
  ],
32
32
  "devDependencies": {
33
- "@types/node": "20.12.10",
33
+ "@types/node": "20.14.2",
34
34
  "@workleap/eslint-plugin": "3.2.2",
35
35
  "@workleap/tsup-configs": "3.0.6",
36
36
  "@workleap/typescript-configs": "3.0.2",
37
37
  "eslint": "8.57.0",
38
38
  "style-dictionary": "3.9.2",
39
- "tsx": "4.9.3",
39
+ "tsx": "4.12.0",
40
40
  "typescript": "5.4.5"
41
41
  },
42
42
  "sideEffects": false,