@hopper-ui/tokens 0.2.0 → 1.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 (4) hide show
  1. package/CHANGELOG.md +165 -0
  2. package/dist/dark/tokens.css +66 -28
  3. package/dist/tokens.css +67 -28
  4. package/package.json +2 -1
package/CHANGELOG.md ADDED
@@ -0,0 +1,165 @@
1
+ # @hopper-ui/tokens
2
+
3
+ ## 1.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - 2200fed: Sync with design tokens
8
+
9
+ #### Changed
10
+
11
+ **Semantic light**
12
+
13
+ | Token | Value | Status |
14
+ | ---------------------------------------- | ------- | ------ |
15
+ | --hop-neutral-text-disabled | #959593 | update |
16
+ | --hop-neutral-surface-disabled | #ECEBE8 | update |
17
+ | --hop-neutral-border-disabled | #ECEBE8 | update |
18
+ | --hop-neutral-icon-disabled | #959593 | update |
19
+ | --hop-neutral-icon-hover | #505050 | update |
20
+ | --hop-neutral-icon-weak-hover | #505050 | new |
21
+ | --hop-neutral-surface-weakest-hover | #ECEBE8 | new |
22
+ | --hop-primary-icon-strong-hover | #FFFFFF | new |
23
+ | --hop-primary-icon-disabled | #95B1FF | update |
24
+ | --hop-primary-surface-strong-active | #E6EBFF | new |
25
+ | --hop-primary-surface-strong-hover | #2A43E8 | new |
26
+ | --hop-primary-text-strong-hover | #FFFFFF | new |
27
+ | --hop-danger-surface-strong-hover | #CB2E31 | new |
28
+ | --hop-danger-text-strong-hover | #FFFFFF | new |
29
+ | --hop-danger-icon-strong-hover | #FFFFFF | new |
30
+ | --hop-danger-icon-active | #DF3236 | update |
31
+ | --hop-decorative-option1-surface | #B9CBFF | update |
32
+ | --hop-decorative-option1-border | #B9CBFF | new |
33
+ | --hop-decorative-option1-surface-weakest | #F5F6FF | new |
34
+ | --hop-decorative-option1-surface-strong | #95B1FF | new |
35
+ | --hop-decorative-option1-surface-hover | #95B1FF | new |
36
+ | --hop-decorative-option2-surface | #BDE8E1 | update |
37
+ | --hop-decorative-option2-border | #A3D6CB | new |
38
+ | --hop-decorative-option2-surface-weak | #A3D6CB | update |
39
+ | --hop-decorative-option2-surface-hover | #A3D6CB | new |
40
+ | --hop-decorative-option3-border | #FFBF92 | new |
41
+ | --hop-decorative-option3-surface-weakest | #FFF5E9 | new |
42
+ | --hop-decorative-option3-surface-strong | #FF9B3F | new |
43
+ | --hop-decorative-option3-surface-hover | #FF9B3F | new |
44
+ | --hop-decorative-option4-border | #AAD89D | new |
45
+ | --hop-decorative-option4-surface-strong | #AAD89D | new |
46
+ | --hop-decorative-option4-surface-hover | #AAD89D | new |
47
+ | --hop-decorative-option4-surface-weak | #E3F3B9 | delete |
48
+ | --hop-decorative-option5-surface | #BAE6FF | update |
49
+ | --hop-decorative-option5-border | #9FD2F7 | new |
50
+ | --hop-decorative-option5-surface-strong | #9FD2F7 | new |
51
+ | --hop-decorative-option5-surface-hover | #9FD2F7 | new |
52
+ | --hop-decorative-option5-surface-weak | #BAE6FF | delete |
53
+ | --hop-decorative-option6-border | #EAC96D | new |
54
+ | --hop-decorative-option6-surface-strong | #2F250D | new |
55
+ | --hop-decorative-option6-surface-hover | #2F250D | new |
56
+ | --hop-decorative-option7-border | #D4CBC0 | new |
57
+ | --hop-decorative-option7-surface-strong | #E5DED6 | new |
58
+ | --hop-decorative-option7-surface-hover | #E5DED6 | new |
59
+ | --hop-decorative-option7-surface-weak | #BAE6FF | delete |
60
+ | --hop-decorative-option8-border | #FFBCB7 | new |
61
+ | --hop-decorative-option8-surface | #FFBCB7 | update |
62
+ | --hop-decorative-option8-surface-strong | #FFBCB7 | new |
63
+ | --hop-decorative-option8-surface-hover | #FF8E8E | new |
64
+ | --hop-decorative-option8-surface-weak | #FDE6E5 | delete |
65
+ | --hop-decorative-option9-surface | #777775 | update |
66
+ | --hop-decorative-option9-surface-weak | #777775 | delete |
67
+ | --hop-decorative-option9-border | #CCCCCA | new |
68
+ | --hop-decorative-option9-surface-strong | #3C3C3C | new |
69
+ | --hop-decorative-option9-surface-hover | #6C6C6B | new |
70
+
71
+ **Status light**
72
+
73
+ | Token | Value | Status |
74
+ | ------------------------------------ | ------- | ------ |
75
+ | --hop-status-inactive-surface | #ECEBE8 | new |
76
+ | --hop-status-inactive-surface-strong | #CCCCCA | new |
77
+ | --hop-status-inactive-text | #505050 | new |
78
+ | --hop-status-inactive-icon | #6C6C6B | new |
79
+ | --hop-status-option6-surface | #FFF8D6 | new |
80
+ | --hop-status-option6-surface-strong | #E2A934 | new |
81
+ | --hop-status-option6-text | #7E5E0A | new |
82
+ | --hop-status-option6-icon | #7E5E0A | new |
83
+
84
+ **Semantic dark**
85
+
86
+ | Token | Value | Status |
87
+ | ------------------------------------ | ------- | ------ |
88
+ | --hop-neutral-text-hover | #ECEBE8 | update |
89
+ | --hop-neutral-text-disabled | #6C6C6B | update |
90
+ | --hop-neutral-surface-weakest-hover | #3C3C3C | new |
91
+ | --hop-neutral-surface-weakest-active | #3C3C3C | delete |
92
+ | --hop-neutral-surface-disabled | #505050 | update |
93
+ | --hop-neutral-border-strong-hover | #FFFFFF | new |
94
+ | --hop-neutral-border-disabled | #3C3C3C | update |
95
+ | --hop-neutral-icon-hover | #ECEBE8 | update |
96
+ | --hop-neutral-icon-disabled | #6C6C6B | update |
97
+ | --hop-primary-text-strong-hover | #6C8FFD | new |
98
+ | --hop-primary-surface-strong-hover | #95B1FF | new |
99
+ | --hop-primary-surface-strong-active | #1B3587 | new |
100
+ | --hop-primary-icon-strong-hover | #6C8FFD | new |
101
+ | --hop-danger-text-strong-hover | #FFFFFF | new |
102
+ | --hop-danger-surface-strong-hover | #FF8E8E | new |
103
+ | --hop-danger-icon-active | #FA4D59 | update |
104
+ | --hop-option1-surface-weak | #E6EBFF | update |
105
+ | --hop-option1-surface | #B9CBFF | update |
106
+ | --hop-option1-surface-hover | #95B1FF | new |
107
+ | --hop-option1-surface-weakest | #F5F6FF | new |
108
+ | --hop-option1-surface-strong | #95B1FF | new |
109
+ | --hop-option1-surface-border | #4767FE | new |
110
+ | --hop-option2-surface | #BDE8E1 | update |
111
+ | --hop-option2-surface-hover | #A3D6CB | new |
112
+ | --hop-option2-surface-strong | #A3D6CB | new |
113
+ | --hop-option2-surface-weak | | delete |
114
+ | --hop-option2-border | #38836A | new |
115
+ | --hop-option3-surface | #FFBF92 | update |
116
+ | --hop-option3-surface-hover | #FF9B3F | new |
117
+ | --hop-option3-surface-weak | #FFE8D3 | update |
118
+ | --hop-option3-surface-weakest | #FFF5E9 | new |
119
+ | --hop-option3-surface-strong | #FF9B3F | new |
120
+ | --hop-option3-border | #C95109 | new |
121
+ | --hop-option4-surface-weak | | delete |
122
+ | --hop-option4-surface-strong | #AAD89D | new |
123
+ | --hop-option4-surface-hover | #AAD89D | new |
124
+ | --hop-option5-surface | #BAE6FF | update |
125
+ | --hop-option5-surface-hover | #9FD2F7 | new |
126
+ | --hop-option5-surface-strong | #9FD2F7 | new |
127
+ | --hop-option5-surface-weak | | delete |
128
+ | --hop-option5-border | #3A7BB2 | new |
129
+ | --hop-option6-surface-weak | #FFF8D6 | update |
130
+ | --hop-option6-surface-hover | #EAC96D | new |
131
+ | --hop-option6-surface-strong | #EAC96D | new |
132
+ | --hop-option7-surface | #FOEAE3 | update |
133
+ | --hop-option7-surface-hover | #E5DED6 | new |
134
+ | --hop-option7-surface-strong | #E5DED6 | new |
135
+ | --hop-option7-surface-weak | | delete |
136
+ | --hop-option7-border | #837463 | new |
137
+ | --hop-option8-surface | #FFBCB7 | update |
138
+ | --hop-option8-surface-strong | #FEBCB7 | new |
139
+ | --hop-option8-surface-hover | #FF8E8E | new |
140
+ | --hop-option8-surface-weak | | delete |
141
+ | --hop-option8-border | #DF3236 | new |
142
+ | --hop-option9-surface | #777775 | update |
143
+ | --hop-option9-surface-weak | | delete |
144
+ | --hop-option9-surface-hover | #6C6C6B | new |
145
+ | --hop-option9-surface-strong | #ЗСЗСЗС | new |
146
+ | --hop-option9-border | #777775 | new |
147
+
148
+ **Status dark**
149
+
150
+ | Token | Value | Status |
151
+ | ------------------------------------ | ------- | ------ |
152
+ | --hop-status-progress-surface | #B9CBFF | update |
153
+ | --hop-status-inactive-surface | #E0DFDD | new |
154
+ | --hop-status-inactive-surface-strong | #CCCCCA | new |
155
+ | --hop-status-inactive-icon | #3C3C3C | new |
156
+ | --hop-status-inactive-text | #292929 | new |
157
+ | --hop-status-option5-text | #2A2620 | update |
158
+ | --hop-status-option5-surface | #BDB1A3 | update |
159
+ | --hop-status-option5-icon | #2A2620 | update |
160
+ | --hop-status-option6-surface | #F7E694 | new |
161
+ | --hop-status-option6-surface-strong | #EAC96D | new |
162
+ | --hop-status-option6-text | #2F250D | new |
163
+ | --hop-status-option6-icon | #2F250D | new |
164
+
165
+ - b5956d0: Removed unnecessary line-height / fix rounding for some line height tokens
package/dist/dark/tokens.css CHANGED
@@ -16,13 +16,14 @@
16
16
  --hop-upsell-surface-active: var(--hop-sunken-treasure-800);
17
17
  --hop-upsell-surface: var(--hop-sunken-treasure-50);
18
18
  --hop-danger-border-active: var(--hop-amanita-400);
19
- --hop-danger-icon-active: var(--hop-amanita-400);
19
+ --hop-danger-icon-active: var(--hop-amanita-300);
20
20
  --hop-danger-text-active: var(--hop-amanita-300);
21
21
  --hop-danger-surface: var(--hop-amanita-200);
22
22
  --hop-danger-text-hover: var(--hop-amanita-200);
23
23
  --hop-danger-surface-disabled: var(--hop-amanita-600);
24
24
  --hop-danger-surface-hover: var(--hop-amanita-200);
25
25
  --hop-danger-surface-strong: var(--hop-amanita-300);
26
+ --hop-danger-surface-strong-hover: var(--hop-amanita-200);
26
27
  --hop-danger-surface-weak: var(--hop-amanita-900);
27
28
  --hop-danger-border-strong: var(--hop-amanita-300);
28
29
  --hop-danger-icon: var(--hop-amanita-900);
@@ -31,6 +32,7 @@
31
32
  --hop-danger-surface-active: var(--hop-amanita-800);
32
33
  --hop-danger-text-weak: var(--hop-amanita-100);
33
34
  --hop-danger-text-strong: var(--hop-samoyed);
35
+ --hop-danger-text-strong-hover: var(--hop-samoyed);
34
36
  --hop-danger-icon-strong: var(--hop-samoyed);
35
37
  --hop-danger-icon-hover: var(--hop-amanita-200);
36
38
  --hop-danger-text-disabled: var(--hop-amanita-600);
@@ -40,6 +42,7 @@
40
42
  --hop-primary-border-active: var(--hop-sapphire-300);
41
43
  --hop-primary-text-active: var(--hop-sapphire-200);
42
44
  --hop-primary-icon-strong: var(--hop-samoyed);
45
+ --hop-primary-icon-strong-hover: var(--hop-sapphire-300);
43
46
  --hop-primary-icon: var(--hop-sapphire-200);
44
47
  --hop-primary-border-focus: var(--hop-sapphire-200);
45
48
  --hop-primary-border: var(--hop-sapphire-300);
@@ -51,80 +54,107 @@
51
54
  --hop-primary-surface: var(--hop-sapphire-200);
52
55
  --hop-primary-surface-weak: var(--hop-sapphire-800);
53
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);
54
59
  --hop-primary-text: var(--hop-sapphire-200);
55
60
  --hop-primary-surface-hover: var(--hop-sapphire-200);
56
61
  --hop-primary-text-strong: var(--hop-samoyed);
62
+ --hop-primary-text-strong-hover: var(--hop-sapphire-300);
57
63
  --hop-primary-text-hover: var(--hop-sapphire-300);
58
64
  --hop-primary-surface-active: var(--hop-sapphire-800);
65
+ --hop-decorative-option9-border: var(--hop-rock-400);
59
66
  --hop-decorative-option9-icon: var(--hop-samoyed);
60
- --hop-decorative-option9-surface: var(--hop-rock-800);
61
- --hop-decorative-option9-surface-weak: var(--hop-rock-400);
67
+ --hop-decorative-option9-surface-strong: var(--hop-rock-800);
68
+ --hop-decorative-option9-surface-hover: var(--hop-rock-500);
69
+ --hop-decorative-option9-surface: var(--hop-rock-400);
62
70
  --hop-decorative-option9-text: var(--hop-samoyed);
63
71
  --hop-decorative-option9-text-weak: var(--hop-rock-50);
72
+ --hop-decorative-option8-border: var(--hop-amanita-400);
64
73
  --hop-decorative-option8-icon: var(--hop-amanita-900);
65
- --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
74
+ --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
75
+ --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
66
76
  --hop-decorative-option8-text-weak: var(--hop-amanita-300);
67
- --hop-decorative-option8-surface: var(--hop-amanita-75);
77
+ --hop-decorative-option8-surface: var(--hop-amanita-100);
68
78
  --hop-decorative-option8-text: var(--hop-amanita-900);
79
+ --hop-decorative-option7-border: var(--hop-toad-400);
69
80
  --hop-decorative-option7-icon: var(--hop-toad-900);
70
- --hop-decorative-option7-surface-weak: var(--hop-toad-50);
71
- --hop-decorative-option7-surface: var(--hop-toad-75);
81
+ --hop-decorative-option7-surface-strong: var(--hop-toad-75);
82
+ --hop-decorative-option7-surface-hover: var(--hop-toad-75);
83
+ --hop-decorative-option7-surface: var(--hop-toad-50);
72
84
  --hop-decorative-option7-text-weak: var(--hop-toad-500);
73
85
  --hop-decorative-option7-text: var(--hop-toad-900);
74
86
  --hop-decorative-option5-text-weak: var(--hop-coastal-50);
75
87
  --hop-decorative-option5-text: var(--hop-coastal-900);
76
- --hop-decorative-option5-surface-weak: var(--hop-coastal-75);
77
- --hop-decorative-option5-surface: var(--hop-coastal-100);
88
+ --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
89
+ --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
90
+ --hop-decorative-option5-surface: var(--hop-coastal-75);
91
+ --hop-decorative-option5-border: var(--hop-coastal-400);
78
92
  --hop-decorative-option5-icon: var(--hop-coastal-900);
79
- --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
93
+ --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-25);
94
+ --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
95
+ --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
80
96
  --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
97
+ --hop-decorative-option6-border: var(--hop-sunken-treasure-400);
81
98
  --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
82
99
  --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
83
100
  --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
84
- --hop-decorative-option4-surface-weak: var(--hop-moss-50);
101
+ --hop-decorative-option4-surface-strong: var(--hop-moss-100);
102
+ --hop-decorative-option4-surface-hover: var(--hop-moss-100);
85
103
  --hop-decorative-option4-surface: var(--hop-moss-75);
104
+ --hop-decorative-option4-border: var(--hop-moss-400);
86
105
  --hop-decorative-option4-icon: var(--hop-moss-900);
87
106
  --hop-decorative-option4-text-weak: var(--hop-moss-400);
88
107
  --hop-decorative-option4-text: var(--hop-moss-900);
89
- --hop-decorative-option3-surface-weak: var(--hop-koi-100);
90
- --hop-decorative-option3-surface: var(--hop-koi-200);
108
+ --hop-decorative-option3-surface-strong: var(--hop-koi-200);
109
+ --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
110
+ --hop-decorative-option3-surface-weak: var(--hop-koi-50);
111
+ --hop-decorative-option3-surface-hover: var(--hop-koi-200);
112
+ --hop-decorative-option3-surface: var(--hop-koi-100);
113
+ --hop-decorative-option3-border: var(--hop-koi-400);
91
114
  --hop-decorative-option3-icon: var(--hop-koi-900);
92
115
  --hop-decorative-option3-text: var(--hop-koi-900);
93
116
  --hop-decorative-option3-text-weak: var(--hop-koi-50);
94
- --hop-decorative-option2-surface-weak: var(--hop-quetzal-75);
95
- --hop-decorative-option2-surface: var(--hop-quetzal-100);
117
+ --hop-decorative-option2-surface-strong: var(--hop-quetzal-100);
118
+ --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
119
+ --hop-decorative-option2-surface: var(--hop-quetzal-75);
96
120
  --hop-decorative-option2-text: var(--hop-quetzal-900);
97
121
  --hop-decorative-option2-text-weak: var(--hop-quetzal-50);
122
+ --hop-decorative-option2-border: var(--hop-quetzal-400);
98
123
  --hop-decorative-option2-icon: var(--hop-quetzal-900);
99
- --hop-decorative-option1-surface-weak: var(--hop-sapphire-75);
100
- --hop-decorative-option1-surface: var(--hop-sapphire-200);
124
+ --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
125
+ --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
126
+ --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
127
+ --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
128
+ --hop-decorative-option1-surface: var(--hop-sapphire-100);
101
129
  --hop-decorative-option1-text-weak: var(--hop-sapphire-50);
130
+ --hop-decorative-option1-border: var(--hop-sapphire-400);
102
131
  --hop-decorative-option1-icon: var(--hop-sapphire-900);
103
132
  --hop-decorative-option1-text: var(--hop-sapphire-900);
104
- --hop-neutral-text-hover: var(--hop-rock-25);
105
- --hop-neutral-surface-weakest-active: var(--hop-rock-800);
133
+ --hop-neutral-text-hover: var(--hop-rock-50);
134
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-800);
106
135
  --hop-neutral-text-weak: var(--hop-rock-200);
107
- --hop-neutral-surface-disabled: var(--hop-rock-600);
136
+ --hop-neutral-surface-disabled: var(--hop-rock-700);
108
137
  --hop-neutral-surface-active: var(--hop-toad-25);
109
138
  --hop-neutral-surface-weak: var(--hop-rock-800);
110
139
  --hop-neutral-surface: var(--hop-abyss);
111
- --hop-neutral-text-disabled: var(--hop-rock-400);
140
+ --hop-neutral-text-disabled: var(--hop-rock-500);
112
141
  --hop-neutral-text-active: var(--hop-rock-900);
113
142
  --hop-neutral-text-strong: var(--hop-rock-900);
114
143
  --hop-neutral-text: var(--hop-rock-25);
115
144
  --hop-neutral-text-weakest: var(--hop-rock-400);
116
- --hop-neutral-border-disabled: var(--hop-rock-600);
145
+ --hop-neutral-border-disabled: var(--hop-rock-800);
146
+ --hop-neutral-border-strong-hover: var(--hop-samoyed);
117
147
  --hop-neutral-border-strong: var(--hop-samoyed);
118
148
  --hop-neutral-surface-strong: var(--hop-samoyed);
119
149
  --hop-neutral-surface-hover: var(--hop-rock-800);
120
- --hop-neutral-icon-disabled: var(--hop-rock-400);
150
+ --hop-neutral-icon-disabled: var(--hop-rock-500);
121
151
  --hop-neutral-icon: var(--hop-rock-25);
122
152
  --hop-neutral-icon-weak: var(--hop-rock-200);
123
153
  --hop-neutral-border: var(--hop-rock-500);
124
154
  --hop-neutral-border-weak: var(--hop-rock-800);
125
155
  --hop-neutral-icon-weakest: var(--hop-rock-400);
126
156
  --hop-neutral-icon-strong: var(--hop-rock-900);
127
- --hop-neutral-icon-hover: var(--hop-rock-25);
157
+ --hop-neutral-icon-hover: var(--hop-rock-50);
128
158
  --hop-neutral-icon-active: var(--hop-rock-900);
129
159
  --hop-neutral-border-hover: var(--hop-rock-300);
130
160
  --hop-neutral-border-active: var(--hop-toad-25);
@@ -165,12 +195,16 @@
165
195
  --hop-status-neutral-surface: var(--hop-abyss);
166
196
  --hop-status-progress-surface-strong: var(--hop-sapphire-200);
167
197
  --hop-status-progress-icon: var(--hop-sapphire-900);
168
- --hop-status-progress-surface: var(--hop-sapphire-75);
198
+ --hop-status-progress-surface: var(--hop-sapphire-100);
169
199
  --hop-status-progress-text: var(--hop-sapphire-900);
200
+ --hop-status-option6-surface-strong: var(--hop-sunken-treasure-100);
201
+ --hop-status-option6-icon: var(--hop-sunken-treasure-900);
202
+ --hop-status-option6-surface: var(--hop-sunken-treasure-75);
203
+ --hop-status-option6-text: var(--hop-sunken-treasure-900);
170
204
  --hop-status-option5-surface-strong: var(--hop-toad-100);
171
- --hop-status-option5-icon: var(--hop-toad-25);
172
- --hop-status-option5-surface: var(--hop-toad-700);
173
- --hop-status-option5-text: var(--hop-toad-25);
205
+ --hop-status-option5-icon: var(--hop-toad-900);
206
+ --hop-status-option5-surface: var(--hop-toad-200);
207
+ --hop-status-option5-text: var(--hop-toad-900);
174
208
  --hop-status-option1-surface-strong: var(--hop-coastal-100);
175
209
  --hop-status-option1-icon: var(--hop-coastal-900);
176
210
  --hop-status-option1-surface: var(--hop-coastal-200);
@@ -187,6 +221,10 @@
187
221
  --hop-status-option4-icon: var(--hop-fog-900);
188
222
  --hop-status-option4-surface: var(--hop-fog-200);
189
223
  --hop-status-option4-text: var(--hop-fog-900);
224
+ --hop-status-inactive-surface-strong: var(--hop-rock-100);
225
+ --hop-status-inactive-icon: var(--hop-rock-800);
226
+ --hop-status-inactive-surface: var(--hop-rock-75);
227
+ --hop-status-inactive-text: var(--hop-rock-900);
190
228
  --hop-status-caution-surface-strong: var(--hop-koi-200);
191
229
  --hop-status-caution-icon: var(--hop-koi-900);
192
230
  --hop-status-caution-surface: var(--hop-koi-75);
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 29 Aug 2023 16:37:07 GMT
3
+ * Generated on Wed, 04 Oct 2023 15:53:22 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -11,12 +11,11 @@
11
11
  --hop-border-radius-1: 0.25rem;
12
12
  --hop-border-radius-0: 0;
13
13
  --hop-line-height-1-50: 1.5;
14
- --hop-line-height-1-4295: 1.4295;
15
- --hop-line-height-1-4285: 1.4285;
16
- --hop-line-height-1-33: 1.33;
14
+ --hop-line-height-1-4285: 1.4285714;
15
+ --hop-line-height-1-33: 1.3333333;
17
16
  --hop-line-height-1-25: 1.25;
18
17
  --hop-line-height-1-20: 1.2;
19
- --hop-line-height-1-14: 1.14;
18
+ --hop-line-height-1-14: 1.1428571;
20
19
  --hop-line-height-1-125: 1.125;
21
20
  --hop-font-weight-690: 690;
22
21
  --hop-font-weight-680: 680;
@@ -244,19 +243,19 @@
244
243
  --hop-body-xs-font-weight: var(--hop-font-weight-410);
245
244
  --hop-body-xs-font-size: var(--hop-font-size-120);
246
245
  --hop-body-xs-font-family: var(--hop-font-family-secondary);
247
- --hop-body-sm-underline-line-height: var(--hop-line-height-1-4295);
246
+ --hop-body-sm-underline-line-height: var(--hop-line-height-1-4285);
248
247
  --hop-body-sm-underline-font-weight: var(--hop-font-weight-505);
249
248
  --hop-body-sm-underline-font-size: var(--hop-font-size-140);
250
249
  --hop-body-sm-underline-font-family: var(--hop-font-family-secondary);
251
- --hop-body-sm-bold-line-height: var(--hop-line-height-1-4295);
250
+ --hop-body-sm-bold-line-height: var(--hop-line-height-1-4285);
252
251
  --hop-body-sm-bold-font-weight: var(--hop-font-weight-690);
253
252
  --hop-body-sm-bold-font-size: var(--hop-font-size-140);
254
253
  --hop-body-sm-bold-font-family: var(--hop-font-family-secondary);
255
- --hop-body-sm-semibold-line-height: var(--hop-line-height-1-4295);
254
+ --hop-body-sm-semibold-line-height: var(--hop-line-height-1-4285);
256
255
  --hop-body-sm-semibold-font-weight: var(--hop-font-weight-590);
257
256
  --hop-body-sm-semibold-font-size: var(--hop-font-size-140);
258
257
  --hop-body-sm-semibold-font-family: var(--hop-font-family-secondary);
259
- --hop-body-sm-medium-line-height: var(--hop-line-height-1-4295);
258
+ --hop-body-sm-medium-line-height: var(--hop-line-height-1-4285);
260
259
  --hop-body-sm-medium-font-weight: var(--hop-font-weight-505);
261
260
  --hop-body-sm-medium-font-size: var(--hop-font-size-140);
262
261
  --hop-body-sm-medium-font-family: var(--hop-font-family-secondary);
@@ -356,6 +355,10 @@
356
355
  --hop-status-positive-surface: var(--hop-moss-50);
357
356
  --hop-status-positive-surface-strong: var(--hop-moss-200);
358
357
  --hop-status-positive-icon: var(--hop-moss-700);
358
+ --hop-status-inactive-text: var(--hop-rock-700);
359
+ --hop-status-inactive-surface: var(--hop-rock-50);
360
+ --hop-status-inactive-icon: var(--hop-rock-500);
361
+ --hop-status-inactive-surface-strong: var(--hop-rock-100);
359
362
  --hop-status-negative-text: var(--hop-amanita-700);
360
363
  --hop-status-negative-surface: var(--hop-amanita-50);
361
364
  --hop-status-negative-icon: var(--hop-amanita-700);
@@ -384,6 +387,10 @@
384
387
  --hop-status-option5-surface: var(--hop-toad-50);
385
388
  --hop-status-option5-icon: var(--hop-toad-600);
386
389
  --hop-status-option5-surface-strong: var(--hop-toad-200);
390
+ --hop-status-option6-text: var(--hop-sunken-treasure-600);
391
+ --hop-status-option6-surface: var(--hop-sunken-treasure-25);
392
+ --hop-status-option6-icon: var(--hop-sunken-treasure-600);
393
+ --hop-status-option6-surface-strong: var(--hop-sunken-treasure-200);
387
394
  --hop-status-progress-text: var(--hop-sapphire-500);
388
395
  --hop-status-progress-surface: var(--hop-sapphire-50);
389
396
  --hop-status-progress-icon: var(--hop-sapphire-500);
@@ -426,91 +433,120 @@
426
433
  --hop-neutral-border-active: var(--hop-rock-800);
427
434
  --hop-neutral-border-hover: var(--hop-rock-300);
428
435
  --hop-neutral-icon-active: var(--hop-samoyed);
429
- --hop-neutral-icon-hover: var(--hop-rock-800);
436
+ --hop-neutral-icon-hover: var(--hop-rock-700);
430
437
  --hop-neutral-icon-strong: var(--hop-samoyed);
431
438
  --hop-neutral-icon-weakest: var(--hop-rock-200);
432
439
  --hop-neutral-border-weak: var(--hop-rock-75);
433
440
  --hop-neutral-border: var(--hop-rock-200);
441
+ --hop-neutral-icon-weak-hover: var(--hop-rock-700);
434
442
  --hop-neutral-icon-weak: var(--hop-rock-400);
435
443
  --hop-neutral-icon: var(--hop-rock-800);
436
- --hop-neutral-icon-disabled: var(--hop-rock-200);
444
+ --hop-neutral-icon-disabled: var(--hop-rock-300);
437
445
  --hop-neutral-surface-hover: var(--hop-rock-25);
438
446
  --hop-neutral-surface-strong: var(--hop-rock-800);
439
447
  --hop-neutral-border-strong: var(--hop-rock-800);
440
- --hop-neutral-border-disabled: var(--hop-rock-75);
448
+ --hop-neutral-border-disabled: var(--hop-rock-50);
441
449
  --hop-neutral-text-weakest: var(--hop-rock-200);
442
450
  --hop-neutral-text: var(--hop-rock-800);
443
451
  --hop-neutral-text-strong: var(--hop-samoyed);
444
452
  --hop-neutral-text-active: var(--hop-samoyed);
445
- --hop-neutral-text-disabled: var(--hop-rock-200);
453
+ --hop-neutral-text-disabled: var(--hop-rock-300);
446
454
  --hop-neutral-surface: var(--hop-samoyed);
447
455
  --hop-neutral-surface-weak: var(--hop-rock-50);
448
456
  --hop-neutral-surface-active: var(--hop-rock-800);
449
- --hop-neutral-surface-disabled: var(--hop-rock-75);
457
+ --hop-neutral-surface-disabled: var(--hop-rock-50);
450
458
  --hop-neutral-text-weak: var(--hop-rock-400);
459
+ --hop-neutral-surface-weakest-hover: var(--hop-rock-50);
451
460
  --hop-neutral-surface-weakest-active: var(--hop-rock-50);
452
- --hop-neutral-text-hover: var(--hop-rock-800);
461
+ --hop-neutral-text-hover: var(--hop-rock-700);
453
462
  --hop-decorative-option1-text: var(--hop-sapphire-900);
454
463
  --hop-decorative-option1-icon: var(--hop-sapphire-900);
455
464
  --hop-decorative-option1-text-weak: var(--hop-sapphire-50);
456
- --hop-decorative-option1-surface: var(--hop-sapphire-200);
465
+ --hop-decorative-option1-border: var(--hop-sapphire-100);
466
+ --hop-decorative-option1-surface: var(--hop-sapphire-100);
467
+ --hop-decorative-option1-surface-hover: var(--hop-sapphire-200);
468
+ --hop-decorative-option1-surface-strong: var(--hop-sapphire-200);
469
+ --hop-decorative-option1-surface-weakest: var(--hop-sapphire-25);
457
470
  --hop-decorative-option1-surface-weak: var(--hop-sapphire-50);
471
+ --hop-decorative-option2-border: var(--hop-quetzal-100);
458
472
  --hop-decorative-option2-icon: var(--hop-quetzal-900);
459
473
  --hop-decorative-option2-text-weak: var(--hop-quetzal-50);
460
474
  --hop-decorative-option2-text: var(--hop-quetzal-900);
461
- --hop-decorative-option2-surface: var(--hop-quetzal-100);
462
- --hop-decorative-option2-surface-weak: var(--hop-quetzal-75);
475
+ --hop-decorative-option2-surface-hover: var(--hop-quetzal-100);
476
+ --hop-decorative-option2-surface: var(--hop-quetzal-75);
477
+ --hop-decorative-option2-surface-weak: var(--hop-quetzal-100);
478
+ --hop-decorative-option3-border: var(--hop-koi-100);
463
479
  --hop-decorative-option3-text-weak: var(--hop-koi-50);
464
480
  --hop-decorative-option3-text: var(--hop-koi-900);
465
481
  --hop-decorative-option3-icon: var(--hop-koi-900);
466
482
  --hop-decorative-option3-surface: var(--hop-koi-200);
483
+ --hop-decorative-option3-surface-hover: var(--hop-koi-200);
484
+ --hop-decorative-option3-surface-strong: var(--hop-koi-200);
485
+ --hop-decorative-option3-surface-weakest: var(--hop-koi-25);
467
486
  --hop-decorative-option3-surface-weak: var(--hop-koi-100);
487
+ --hop-decorative-option4-border: var(--hop-moss-100);
468
488
  --hop-decorative-option4-text: var(--hop-moss-900);
469
489
  --hop-decorative-option4-text-weak: var(--hop-moss-400);
470
490
  --hop-decorative-option4-icon: var(--hop-moss-900);
471
491
  --hop-decorative-option4-surface: var(--hop-moss-75);
472
- --hop-decorative-option4-surface-weak: var(--hop-moss-50);
492
+ --hop-decorative-option4-surface-hover: var(--hop-moss-100);
493
+ --hop-decorative-option4-surface-strong: var(--hop-moss-100);
494
+ --hop-decorative-option6-border: var(--hop-sunken-treasure-100);
473
495
  --hop-decorative-option6-text-weak: var(--hop-sunken-treasure-200);
474
496
  --hop-decorative-option6-text: var(--hop-sunken-treasure-900);
475
497
  --hop-decorative-option6-icon: var(--hop-sunken-treasure-900);
476
498
  --hop-decorative-option6-surface: var(--hop-sunken-treasure-75);
499
+ --hop-decorative-option6-surface-strong: var(--hop-sunken-treasure-100);
500
+ --hop-decorative-option6-surface-hover: var(--hop-sunken-treasure-100);
477
501
  --hop-decorative-option6-surface-weak: var(--hop-sunken-treasure-50);
502
+ --hop-decorative-option5-border: var(--hop-coastal-100);
478
503
  --hop-decorative-option5-icon: var(--hop-coastal-900);
479
- --hop-decorative-option5-surface: var(--hop-coastal-100);
480
- --hop-decorative-option5-surface-weak: var(--hop-coastal-75);
504
+ --hop-decorative-option5-surface: var(--hop-coastal-75);
505
+ --hop-decorative-option5-surface-hover: var(--hop-coastal-100);
506
+ --hop-decorative-option5-surface-strong: var(--hop-coastal-100);
481
507
  --hop-decorative-option5-text: var(--hop-coastal-900);
482
508
  --hop-decorative-option5-text-weak: var(--hop-coastal-50);
509
+ --hop-decorative-option7-border: var(--hop-toad-100);
483
510
  --hop-decorative-option7-text: var(--hop-toad-900);
484
511
  --hop-decorative-option7-text-weak: var(--hop-toad-500);
485
512
  --hop-decorative-option7-surface: var(--hop-toad-75);
486
- --hop-decorative-option7-surface-weak: var(--hop-toad-50);
513
+ --hop-decorative-option7-surface-hover: var(--hop-toad-75);
514
+ --hop-decorative-option7-surface-strong: var(--hop-toad-75);
487
515
  --hop-decorative-option7-icon: var(--hop-toad-900);
516
+ --hop-decorative-option8-border: var(--hop-amanita-100);
488
517
  --hop-decorative-option8-text: var(--hop-amanita-900);
489
- --hop-decorative-option8-surface: var(--hop-amanita-75);
518
+ --hop-decorative-option8-surface: var(--hop-amanita-100);
490
519
  --hop-decorative-option8-text-weak: var(--hop-amanita-300);
491
- --hop-decorative-option8-surface-weak: var(--hop-amanita-50);
520
+ --hop-decorative-option8-surface-strong: var(--hop-amanita-100);
521
+ --hop-decorative-option8-surface-hover: var(--hop-amanita-200);
492
522
  --hop-decorative-option8-icon: var(--hop-amanita-900);
523
+ --hop-decorative-option9-border: var(--hop-rock-100);
493
524
  --hop-decorative-option9-text-weak: var(--hop-rock-50);
494
525
  --hop-decorative-option9-text: var(--hop-samoyed);
495
- --hop-decorative-option9-surface-weak: var(--hop-rock-400);
496
- --hop-decorative-option9-surface: var(--hop-rock-800);
526
+ --hop-decorative-option9-surface-hover: var(--hop-rock-500);
527
+ --hop-decorative-option9-surface-strong: var(--hop-rock-800);
528
+ --hop-decorative-option9-surface: var(--hop-rock-400);
497
529
  --hop-decorative-option9-icon: var(--hop-samoyed);
498
530
  --hop-primary-surface-active: var(--hop-sapphire-50);
499
531
  --hop-primary-text-hover: var(--hop-sapphire-600);
532
+ --hop-primary-text-strong-hover: var(--hop-samoyed);
500
533
  --hop-primary-text-strong: var(--hop-samoyed);
501
534
  --hop-primary-surface-hover: var(--hop-sapphire-600);
502
535
  --hop-primary-text: var(--hop-sapphire-500);
536
+ --hop-primary-surface-strong-hover: var(--hop-sapphire-600);
537
+ --hop-primary-surface-strong-active: var(--hop-sapphire-50);
503
538
  --hop-primary-surface-strong: var(--hop-sapphire-400);
504
539
  --hop-primary-surface-weak: var(--hop-sapphire-25);
505
540
  --hop-primary-surface: var(--hop-sapphire-50);
506
541
  --hop-primary-text-disabled: var(--hop-sapphire-200);
507
542
  --hop-primary-surface-focus: var(--hop-sapphire-25);
508
543
  --hop-primary-surface-disabled: var(--hop-sapphire-200);
509
- --hop-primary-icon-disabled: var(--hop-sapphire-50);
544
+ --hop-primary-icon-disabled: var(--hop-sapphire-200);
510
545
  --hop-primary-icon-hover: var(--hop-sapphire-600);
511
546
  --hop-primary-border: var(--hop-sapphire-400);
512
547
  --hop-primary-border-focus: var(--hop-sapphire-500);
513
548
  --hop-primary-icon: var(--hop-sapphire-500);
549
+ --hop-primary-icon-strong-hover: var(--hop-samoyed);
514
550
  --hop-primary-icon-strong: var(--hop-samoyed);
515
551
  --hop-primary-text-active: var(--hop-sapphire-500);
516
552
  --hop-primary-border-active: var(--hop-sapphire-400);
@@ -519,7 +555,9 @@
519
555
  --hop-danger-icon-disabled: var(--hop-amanita-100);
520
556
  --hop-danger-text-disabled: var(--hop-amanita-100);
521
557
  --hop-danger-icon-hover: var(--hop-amanita-500);
558
+ --hop-danger-icon-strong-hover: var(--hop-samoyed);
522
559
  --hop-danger-icon-strong: var(--hop-samoyed);
560
+ --hop-danger-text-strong-hover: var(--hop-samoyed);
523
561
  --hop-danger-text-strong: var(--hop-samoyed);
524
562
  --hop-danger-text-weak: var(--hop-amanita-300);
525
563
  --hop-danger-surface-active: var(--hop-amanita-50);
@@ -528,13 +566,14 @@
528
566
  --hop-danger-icon: var(--hop-amanita-700);
529
567
  --hop-danger-border-strong: var(--hop-amanita-300);
530
568
  --hop-danger-surface-weak: var(--hop-amanita-50);
569
+ --hop-danger-surface-strong-hover: var(--hop-amanita-500);
531
570
  --hop-danger-surface-strong: var(--hop-amanita-300);
532
571
  --hop-danger-surface-hover: var(--hop-amanita-500);
533
572
  --hop-danger-surface-disabled: var(--hop-amanita-100);
534
573
  --hop-danger-text-hover: var(--hop-amanita-500);
535
574
  --hop-danger-surface: var(--hop-amanita-25);
536
575
  --hop-danger-text-active: var(--hop-amanita-400);
537
- --hop-danger-icon-active: var(--hop-amanita-300);
576
+ --hop-danger-icon-active: var(--hop-amanita-400);
538
577
  --hop-danger-border-active: var(--hop-amanita-300);
539
578
  --hop-upsell-surface: var(--hop-sunken-treasure-25);
540
579
  --hop-upsell-surface-active: var(--hop-sunken-treasure-50);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "0.2.0",
4
+ "version": "1.0.0",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
@@ -33,6 +33,7 @@
33
33
  "style-dictionary": "^3.8.0"
34
34
  },
35
35
  "devDependencies": {
36
+ "@types/react": "^18.2.23",
36
37
  "@types/node": "18.15.11",
37
38
  "@workleap/eslint-plugin": "1.8.1",
38
39
  "@workleap/tsup-configs": "^2.0.0",