@hopper-ui/tokens 5.0.0 → 5.1.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 (6) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/sharegate/dark/tokens.css +57 -56
  3. package/dist/sharegate/tokens.css +108 -69
  4. package/dist/workleap/dark/tokens.css +4 -3
  5. package/dist/workleap/tokens.css +54 -15
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - e4f524a: Add ShareGate tokens and core token updates:
8
+ - Add new core color palettes: `persimmon`, `iris`, `limeburst`
9
+ - Update `rock` color palette values
10
+ - Add `inset-bevel` elevation token
11
+ - Add `rounded-2-5` (12px) border radius
12
+ - Update ShareGate semantic tokens: primary uses `iris`, upsell uses `limeburst`
13
+ - Add `primary.surface-weak-selected` token to Workleap and ShareGate themes
14
+ - Fix minor Workleap primary token values
15
+
3
16
  ## 5.0.0
4
17
 
5
18
  ### Major Changes
package/dist/sharegate/dark/tokens.css CHANGED
@@ -99,37 +99,38 @@
99
99
  --hop-primary-surface-strong-active: var(--hop-sapphire-600);
100
100
  --hop-primary-surface-weak-active: var(--hop-sapphire-600);
101
101
  --hop-primary-text-active: var(--hop-sapphire-75);
102
- --hop-primary-border: var(--hop-sapphire-300);
103
- --hop-primary-border-selected: var(--hop-sapphire-300);
104
- --hop-primary-border-focus: var(--hop-sapphire-200);
105
- --hop-primary-border-press: var(--hop-sapphire-500);
106
- --hop-primary-icon: var(--hop-sapphire-200);
107
- --hop-primary-icon-selected: var(--hop-sapphire-200);
108
- --hop-primary-icon-disabled: var(--hop-sapphire-700);
109
- --hop-primary-icon-hover: var(--hop-sapphire-300);
110
- --hop-primary-icon-press: var(--hop-sapphire-75);
102
+ --hop-primary-border: var(--hop-iris-300);
103
+ --hop-primary-border-selected: var(--hop-persimmon-300);
104
+ --hop-primary-border-focus: var(--hop-iris-200);
105
+ --hop-primary-border-press: var(--hop-iris-400);
106
+ --hop-primary-icon: var(--hop-iris-100);
107
+ --hop-primary-icon-selected: var(--hop-persimmon-200);
108
+ --hop-primary-icon-disabled: var(--hop-iris-700);
109
+ --hop-primary-icon-hover: var(--hop-iris-300);
110
+ --hop-primary-icon-press: var(--hop-iris-75);
111
111
  --hop-primary-icon-strong: var(--hop-samoyed);
112
- --hop-primary-icon-strong-hover: var(--hop-sapphire-300);
113
- --hop-primary-surface: var(--hop-sapphire-200);
114
- --hop-primary-surface-selected: var(--hop-sapphire-800);
115
- --hop-primary-surface-disabled: var(--hop-sapphire-700);
116
- --hop-primary-surface-focus: var(--hop-sapphire-900);
117
- --hop-primary-surface-hover: var(--hop-sapphire-400);
118
- --hop-primary-surface-press: var(--hop-sapphire-500);
119
- --hop-primary-surface-strong: var(--hop-sapphire-400);
120
- --hop-primary-surface-strong-selected: var(--hop-sapphire-800);
121
- --hop-primary-surface-strong-hover: var(--hop-sapphire-500);
122
- --hop-primary-surface-strong-press: var(--hop-sapphire-600);
123
- --hop-primary-surface-weak: var(--hop-sapphire-800);
124
- --hop-primary-surface-weak-hover: var(--hop-sapphire-700);
125
- --hop-primary-surface-weak-press: var(--hop-sapphire-600);
126
- --hop-primary-text: var(--hop-sapphire-100);
127
- --hop-primary-text-hover: var(--hop-sapphire-200);
128
- --hop-primary-text-press: var(--hop-sapphire-75);
112
+ --hop-primary-icon-strong-hover: var(--hop-samoyed);
113
+ --hop-primary-surface: var(--hop-iris-200);
114
+ --hop-primary-surface-selected: var(--hop-persimmon-400);
115
+ --hop-primary-surface-disabled: var(--hop-iris-700);
116
+ --hop-primary-surface-focus: var(--hop-iris-900);
117
+ --hop-primary-surface-hover: var(--hop-iris-400);
118
+ --hop-primary-surface-press: var(--hop-iris-500);
119
+ --hop-primary-surface-strong: var(--hop-iris-400);
120
+ --hop-primary-surface-strong-selected: var(--hop-persimmon-800);
121
+ --hop-primary-surface-strong-hover: var(--hop-iris-500);
122
+ --hop-primary-surface-strong-press: var(--hop-iris-600);
123
+ --hop-primary-surface-weak: var(--hop-iris-800);
124
+ --hop-primary-surface-weak-selected: var(--hop-persimmon-500);
125
+ --hop-primary-surface-weak-hover: var(--hop-iris-700);
126
+ --hop-primary-surface-weak-press: var(--hop-iris-600);
127
+ --hop-primary-text: var(--hop-iris-100);
128
+ --hop-primary-text-hover: var(--hop-iris-200);
129
+ --hop-primary-text-press: var(--hop-iris-75);
129
130
  --hop-primary-text-strong: var(--hop-samoyed);
130
131
  --hop-primary-text-strong-hover: var(--hop-samoyed);
131
- --hop-primary-text-selected: var(--hop-sapphire-200);
132
- --hop-primary-text-disabled: var(--hop-sapphire-700);
132
+ --hop-primary-text-selected: var(--hop-persimmon-200);
133
+ --hop-primary-text-disabled: var(--hop-iris-700);
133
134
  --hop-upsell-border-active: var(--hop-sunken-treasure-400);
134
135
  --hop-upsell-icon-active: var(--hop-sunken-treasure-900);
135
136
  --hop-upsell-icon-weak-active: var(--hop-sunken-treasure-300);
@@ -137,34 +138,34 @@
137
138
  --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-600);
138
139
  --hop-upsell-text-active: var(--hop-sunken-treasure-900);
139
140
  --hop-upsell-text-weak-active: var(--hop-sunken-treasure-300);
140
- --hop-upsell-border: var(--hop-sunken-treasure-200);
141
- --hop-upsell-border-selected: var(--hop-sunken-treasure-100);
142
- --hop-upsell-border-disabled: var(--hop-sunken-treasure-700);
143
- --hop-upsell-border-press: var(--hop-sunken-treasure-400);
144
- --hop-upsell-icon: var(--hop-sunken-treasure-700);
145
- --hop-upsell-icon-selected: var(--hop-sunken-treasure-100);
146
- --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
147
- --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
148
- --hop-upsell-icon-weakest: var(--hop-sunken-treasure-100);
149
- --hop-upsell-icon-weak: var(--hop-sunken-treasure-100);
150
- --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-200);
151
- --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-300);
152
- --hop-upsell-surface: var(--hop-sunken-treasure-75);
153
- --hop-upsell-surface-selected: var(--hop-sunken-treasure-800);
154
- --hop-upsell-surface-disabled: var(--hop-sunken-treasure-700);
155
- --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
156
- --hop-upsell-surface-press: var(--hop-sunken-treasure-200);
157
- --hop-upsell-surface-weak: var(--hop-sunken-treasure-800);
158
- --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-700);
159
- --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-600);
160
- --hop-upsell-text: var(--hop-sunken-treasure-700);
161
- --hop-upsell-text-selected: var(--hop-sunken-treasure-100);
162
- --hop-upsell-text-disabled: var(--hop-sunken-treasure-300);
163
- --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
164
- --hop-upsell-text-press: var(--hop-sunken-treasure-900);
165
- --hop-upsell-text-weak: var(--hop-sunken-treasure-100);
166
- --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-200);
167
- --hop-upsell-text-weak-press: var(--hop-sunken-treasure-300);
141
+ --hop-upsell-border: var(--hop-limeburst-600);
142
+ --hop-upsell-border-selected: var(--hop-limeburst-600);
143
+ --hop-upsell-border-disabled: var(--hop-limeburst-700);
144
+ --hop-upsell-border-press: var(--hop-limeburst-400);
145
+ --hop-upsell-icon: var(--hop-limeburst-75);
146
+ --hop-upsell-icon-selected: var(--hop-limeburst-100);
147
+ --hop-upsell-icon-hover: var(--hop-limeburst-50);
148
+ --hop-upsell-icon-press: var(--hop-limeburst-25);
149
+ --hop-upsell-icon-weakest: var(--hop-limeburst-700);
150
+ --hop-upsell-icon-weak: var(--hop-limeburst-400);
151
+ --hop-upsell-icon-weak-hover: var(--hop-limeburst-200);
152
+ --hop-upsell-icon-weak-press: var(--hop-limeburst-100);
153
+ --hop-upsell-surface: var(--hop-limeburst-900);
154
+ --hop-upsell-surface-selected: var(--hop-limeburst-800);
155
+ --hop-upsell-surface-disabled: var(--hop-limeburst-900);
156
+ --hop-upsell-surface-hover: var(--hop-limeburst-800);
157
+ --hop-upsell-surface-press: var(--hop-limeburst-700);
158
+ --hop-upsell-surface-weak: var(--hop-limeburst-700);
159
+ --hop-upsell-surface-weak-hover: var(--hop-limeburst-600);
160
+ --hop-upsell-surface-weak-press: var(--hop-limeburst-500);
161
+ --hop-upsell-text: var(--hop-limeburst-75);
162
+ --hop-upsell-text-selected: var(--hop-limeburst-100);
163
+ --hop-upsell-text-disabled: var(--hop-limeburst-300);
164
+ --hop-upsell-text-hover: var(--hop-limeburst-50);
165
+ --hop-upsell-text-press: var(--hop-limeburst-25);
166
+ --hop-upsell-text-weak: var(--hop-limeburst-400);
167
+ --hop-upsell-text-weak-hover: var(--hop-limeburst-200);
168
+ --hop-upsell-text-weak-press: var(--hop-limeburst-100);
168
169
  --hop-decorative-option1-border: var(--hop-sapphire-400);
169
170
  --hop-decorative-option1-icon: var(--hop-sapphire-900);
170
171
  --hop-decorative-option1-surface: var(--hop-sapphire-100);
package/dist/sharegate/tokens.css CHANGED
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 23 Jan 2026 21:07:24 GMT
3
+ * Generated on Fri, 06 Feb 2026 18:24:05 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --hop-border-radius-2-5: 0.75rem;
7
8
  --hop-border-radius-9999: 624.9375rem;
8
9
  --hop-border-radius-4: 1.5rem;
9
10
  --hop-border-radius-3: 1rem;
@@ -45,24 +46,25 @@
45
46
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
46
47
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
47
48
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
49
+ --hop-shadow-inset-bevel: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
48
50
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
49
51
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
50
52
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
51
53
  --hop-shadow-none: none;
52
54
  --hop-samoyed: #ffffff;
53
- --hop-rock-900: #292929;
54
- --hop-rock-800: #3c3c3c;
55
- --hop-rock-700: #505050;
56
- --hop-rock-600: #636362;
57
- --hop-rock-500: #6c6c6b;
58
- --hop-rock-400: #777775;
59
- --hop-rock-300: #959593;
60
- --hop-rock-200: #b3b3b1;
61
- --hop-rock-100: #ccccca;
62
- --hop-rock-75: #e0dfdd;
63
- --hop-rock-50: #ecebe8;
64
- --hop-rock-25: #f8f6f3;
65
- --hop-rock-20: #fcfbfb;
55
+ --hop-rock-900: #232426;
56
+ --hop-rock-800: #313335;
57
+ --hop-rock-700: #484a4d;
58
+ --hop-rock-600: #5e6064;
59
+ --hop-rock-500: #6c6e72;
60
+ --hop-rock-400: #787a7e;
61
+ --hop-rock-300: #96989d;
62
+ --hop-rock-200: #b3b5ba;
63
+ --hop-rock-100: #cbcdd2;
64
+ --hop-rock-75: #e1e3e7;
65
+ --hop-rock-50: #eef0f2;
66
+ --hop-rock-25: #f8f9fa;
67
+ --hop-rock-20: #fafbfc;
66
68
  --hop-abyss: #1d1d1c;
67
69
  --hop-moss-900: #132a27;
68
70
  --hop-moss-800: #16433d;
@@ -88,6 +90,18 @@
88
90
  --hop-amanita-75: #ffd6d3;
89
91
  --hop-amanita-50: #fde6e5;
90
92
  --hop-amanita-25: #fdf6f6;
93
+ --hop-limeburst-900: #1f2b00;
94
+ --hop-limeburst-800: #304200;
95
+ --hop-limeburst-700: #415800;
96
+ --hop-limeburst-600: #4f6c00;
97
+ --hop-limeburst-500: #577600;
98
+ --hop-limeburst-400: #5f8100;
99
+ --hop-limeburst-300: #77a300;
100
+ --hop-limeburst-200: #8fc300;
101
+ --hop-limeburst-100: #a3df00;
102
+ --hop-limeburst-75: #b3f400;
103
+ --hop-limeburst-50: #ccff42;
104
+ --hop-limeburst-25: #edffbc;
91
105
  --hop-koi-900: #451a02;
92
106
  --hop-koi-800: #692803;
93
107
  --hop-koi-700: #8c3504;
@@ -124,6 +138,18 @@
124
138
  --hop-toad-75: #e5ded6;
125
139
  --hop-toad-50: #f0eae3;
126
140
  --hop-toad-25: #fef6ef;
141
+ --hop-iris-900: #292362;
142
+ --hop-iris-800: #3b356c;
143
+ --hop-iris-700: #4d468f;
144
+ --hop-iris-600: #6057b3;
145
+ --hop-iris-500: #685dc9;
146
+ --hop-iris-400: #736ad2;
147
+ --hop-iris-300: #8e85ec;
148
+ --hop-iris-200: #b4abff;
149
+ --hop-iris-100: #c3bcff;
150
+ --hop-iris-75: #deddff;
151
+ --hop-iris-50: #eceaff;
152
+ --hop-iris-25: #f6f6ff;
127
153
  --hop-fog-900: #20282a;
128
154
  --hop-fog-800: #313e43;
129
155
  --hop-fog-700: #40535a;
@@ -148,6 +174,18 @@
148
174
  --hop-sapphire-75: #d6e0ff;
149
175
  --hop-sapphire-50: #e6ebff;
150
176
  --hop-sapphire-25: #f5f6ff;
177
+ --hop-persimmon-900: #4c1300;
178
+ --hop-persimmon-800: #731e00;
179
+ --hop-persimmon-700: #982700;
180
+ --hop-persimmon-600: #ba3000;
181
+ --hop-persimmon-500: #ca3400;
182
+ --hop-persimmon-400: #dd3900;
183
+ --hop-persimmon-300: #ff5b22;
184
+ --hop-persimmon-200: #ff9874;
185
+ --hop-persimmon-100: #ffbda7;
186
+ --hop-persimmon-75: #ffd8ca;
187
+ --hop-persimmon-50: #ffe7df;
188
+ --hop-persimmon-25: #fff5f2;
151
189
  --hop-orchid-bloom-900: #1e1c5d;
152
190
  --hop-orchid-bloom-800: #322b8d;
153
191
  --hop-orchid-bloom-700: #433fac;
@@ -1014,34 +1052,34 @@
1014
1052
  --hop-decorative-option9-surface: var(--hop-rock-400);
1015
1053
  --hop-decorative-option9-icon: var(--hop-samoyed);
1016
1054
  --hop-decorative-option9-border: var(--hop-rock-100);
1017
- --hop-upsell-text-weak-press: var(--hop-sunken-treasure-600);
1018
- --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-500);
1019
- --hop-upsell-text-weak: var(--hop-sunken-treasure-300);
1020
- --hop-upsell-text-press: var(--hop-sunken-treasure-900);
1021
- --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
1022
- --hop-upsell-text-disabled: var(--hop-sunken-treasure-400);
1023
- --hop-upsell-text-selected: var(--hop-sunken-treasure-400);
1024
- --hop-upsell-text: var(--hop-sunken-treasure-700);
1025
- --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-200);
1026
- --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-100);
1027
- --hop-upsell-surface-weak: var(--hop-sunken-treasure-75);
1028
- --hop-upsell-surface-press: var(--hop-sunken-treasure-75);
1029
- --hop-upsell-surface-hover: var(--hop-sunken-treasure-50);
1030
- --hop-upsell-surface-disabled: var(--hop-sunken-treasure-25);
1031
- --hop-upsell-surface-selected: var(--hop-sunken-treasure-50);
1032
- --hop-upsell-surface: var(--hop-sunken-treasure-25);
1033
- --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-600);
1034
- --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-500);
1035
- --hop-upsell-icon-weak: var(--hop-sunken-treasure-300);
1036
- --hop-upsell-icon-weakest: var(--hop-sunken-treasure-75);
1037
- --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
1038
- --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
1039
- --hop-upsell-icon-selected: var(--hop-sunken-treasure-400);
1040
- --hop-upsell-icon: var(--hop-sunken-treasure-700);
1041
- --hop-upsell-border-press: var(--hop-sunken-treasure-300);
1042
- --hop-upsell-border-disabled: var(--hop-sunken-treasure-75);
1043
- --hop-upsell-border-selected: var(--hop-sunken-treasure-400);
1044
- --hop-upsell-border: var(--hop-sunken-treasure-100);
1055
+ --hop-upsell-text-weak-press: var(--hop-limeburst-600);
1056
+ --hop-upsell-text-weak-hover: var(--hop-limeburst-500);
1057
+ --hop-upsell-text-weak: var(--hop-limeburst-300);
1058
+ --hop-upsell-text-press: var(--hop-limeburst-900);
1059
+ --hop-upsell-text-hover: var(--hop-limeburst-800);
1060
+ --hop-upsell-text-disabled: var(--hop-limeburst-400);
1061
+ --hop-upsell-text-selected: var(--hop-limeburst-600);
1062
+ --hop-upsell-text: var(--hop-limeburst-700);
1063
+ --hop-upsell-surface-weak-press: var(--hop-limeburst-200);
1064
+ --hop-upsell-surface-weak-hover: var(--hop-limeburst-100);
1065
+ --hop-upsell-surface-weak: var(--hop-limeburst-75);
1066
+ --hop-upsell-surface-press: var(--hop-limeburst-75);
1067
+ --hop-upsell-surface-hover: var(--hop-limeburst-50);
1068
+ --hop-upsell-surface-disabled: var(--hop-limeburst-25);
1069
+ --hop-upsell-surface-selected: var(--hop-limeburst-50);
1070
+ --hop-upsell-surface: var(--hop-limeburst-25);
1071
+ --hop-upsell-icon-weak-press: var(--hop-limeburst-600);
1072
+ --hop-upsell-icon-weak-hover: var(--hop-limeburst-500);
1073
+ --hop-upsell-icon-weak: var(--hop-limeburst-300);
1074
+ --hop-upsell-icon-weakest: var(--hop-limeburst-75);
1075
+ --hop-upsell-icon-press: var(--hop-limeburst-900);
1076
+ --hop-upsell-icon-hover: var(--hop-limeburst-800);
1077
+ --hop-upsell-icon-selected: var(--hop-limeburst-600);
1078
+ --hop-upsell-icon: var(--hop-limeburst-700);
1079
+ --hop-upsell-border-press: var(--hop-limeburst-300);
1080
+ --hop-upsell-border-disabled: var(--hop-limeburst-75);
1081
+ --hop-upsell-border-selected: var(--hop-limeburst-400);
1082
+ --hop-upsell-border: var(--hop-limeburst-100);
1045
1083
  --hop-upsell-text-weak-active: var(--hop-sunken-treasure-600);
1046
1084
  --hop-upsell-text-active: var(--hop-sunken-treasure-900);
1047
1085
  --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-75);
@@ -1051,35 +1089,36 @@
1051
1089
  --hop-upsell-border-active: var(--hop-sunken-treasure-200);
1052
1090
  --hop-primary-text-strong-hover: var(--hop-samoyed);
1053
1091
  --hop-primary-text-strong: var(--hop-samoyed);
1054
- --hop-primary-text-press: var(--hop-sapphire-700);
1055
- --hop-primary-text-hover: var(--hop-sapphire-600);
1056
- --hop-primary-text-disabled: var(--hop-sapphire-200);
1057
- --hop-primary-text-selected: var(--hop-sapphire-500);
1058
- --hop-primary-text: var(--hop-sapphire-500);
1059
- --hop-primary-surface-weak-press: var(--hop-sapphire-75);
1060
- --hop-primary-surface-weak-hover: var(--hop-sapphire-50);
1061
- --hop-primary-surface-weak: var(--hop-sapphire-25);
1062
- --hop-primary-surface-strong-press: var(--hop-sapphire-700);
1063
- --hop-primary-surface-strong-hover: var(--hop-sapphire-600);
1064
- --hop-primary-surface-strong-selected: var(--hop-sapphire-50);
1065
- --hop-primary-surface-strong: var(--hop-sapphire-400);
1066
- --hop-primary-surface-press: var(--hop-sapphire-300);
1067
- --hop-primary-surface-hover: var(--hop-sapphire-200);
1068
- --hop-primary-surface-focus: var(--hop-sapphire-25);
1069
- --hop-primary-surface-disabled: var(--hop-sapphire-200);
1070
- --hop-primary-surface-selected: var(--hop-sapphire-50);
1071
- --hop-primary-surface: var(--hop-sapphire-50);
1092
+ --hop-primary-text-press: var(--hop-iris-700);
1093
+ --hop-primary-text-hover: var(--hop-iris-600);
1094
+ --hop-primary-text-disabled: var(--hop-iris-200);
1095
+ --hop-primary-text-selected: var(--hop-persimmon-500);
1096
+ --hop-primary-text: var(--hop-iris-500);
1097
+ --hop-primary-surface-weak-press: var(--hop-iris-75);
1098
+ --hop-primary-surface-weak-hover: var(--hop-iris-50);
1099
+ --hop-primary-surface-weak-selected: var(--hop-persimmon-200);
1100
+ --hop-primary-surface-weak: var(--hop-iris-25);
1101
+ --hop-primary-surface-strong-press: var(--hop-iris-700);
1102
+ --hop-primary-surface-strong-hover: var(--hop-iris-600);
1103
+ --hop-primary-surface-strong-selected: var(--hop-persimmon-50);
1104
+ --hop-primary-surface-strong: var(--hop-iris-400);
1105
+ --hop-primary-surface-press: var(--hop-iris-300);
1106
+ --hop-primary-surface-hover: var(--hop-iris-200);
1107
+ --hop-primary-surface-focus: var(--hop-iris-25);
1108
+ --hop-primary-surface-disabled: var(--hop-iris-200);
1109
+ --hop-primary-surface-selected: var(--hop-persimmon-300);
1110
+ --hop-primary-surface: var(--hop-iris-50);
1072
1111
  --hop-primary-icon-strong-hover: var(--hop-samoyed);
1073
1112
  --hop-primary-icon-strong: var(--hop-samoyed);
1074
- --hop-primary-icon-press: var(--hop-sapphire-700);
1075
- --hop-primary-icon-hover: var(--hop-sapphire-600);
1076
- --hop-primary-icon-disabled: var(--hop-sapphire-200);
1077
- --hop-primary-icon-selected: var(--hop-sapphire-500);
1078
- --hop-primary-icon: var(--hop-sapphire-500);
1079
- --hop-primary-border-press: var(--hop-sapphire-300);
1080
- --hop-primary-border-focus: var(--hop-sapphire-500);
1081
- --hop-primary-border-selected: var(--hop-sapphire-400);
1082
- --hop-primary-border: var(--hop-sapphire-400);
1113
+ --hop-primary-icon-press: var(--hop-iris-700);
1114
+ --hop-primary-icon-hover: var(--hop-iris-600);
1115
+ --hop-primary-icon-disabled: var(--hop-iris-200);
1116
+ --hop-primary-icon-selected: var(--hop-persimmon-500);
1117
+ --hop-primary-icon: var(--hop-iris-500);
1118
+ --hop-primary-border-press: var(--hop-iris-500);
1119
+ --hop-primary-border-focus: var(--hop-iris-500);
1120
+ --hop-primary-border-selected: var(--hop-persimmon-400);
1121
+ --hop-primary-border: var(--hop-iris-400);
1083
1122
  --hop-primary-text-active: var(--hop-sapphire-700);
1084
1123
  --hop-primary-surface-weak-active: var(--hop-sapphire-75);
1085
1124
  --hop-primary-surface-strong-active: var(--hop-sapphire-700);
package/dist/workleap/dark/tokens.css CHANGED
@@ -102,14 +102,14 @@
102
102
  --hop-primary-border: var(--hop-sapphire-300);
103
103
  --hop-primary-border-selected: var(--hop-sapphire-300);
104
104
  --hop-primary-border-focus: var(--hop-sapphire-200);
105
- --hop-primary-border-press: var(--hop-sapphire-500);
106
- --hop-primary-icon: var(--hop-sapphire-200);
105
+ --hop-primary-border-press: var(--hop-sapphire-400);
106
+ --hop-primary-icon: var(--hop-sapphire-100);
107
107
  --hop-primary-icon-selected: var(--hop-sapphire-200);
108
108
  --hop-primary-icon-disabled: var(--hop-sapphire-700);
109
109
  --hop-primary-icon-hover: var(--hop-sapphire-300);
110
110
  --hop-primary-icon-press: var(--hop-sapphire-75);
111
111
  --hop-primary-icon-strong: var(--hop-samoyed);
112
- --hop-primary-icon-strong-hover: var(--hop-sapphire-300);
112
+ --hop-primary-icon-strong-hover: var(--hop-samoyed);
113
113
  --hop-primary-surface: var(--hop-sapphire-200);
114
114
  --hop-primary-surface-selected: var(--hop-sapphire-800);
115
115
  --hop-primary-surface-disabled: var(--hop-sapphire-700);
@@ -121,6 +121,7 @@
121
121
  --hop-primary-surface-strong-hover: var(--hop-sapphire-500);
122
122
  --hop-primary-surface-strong-press: var(--hop-sapphire-600);
123
123
  --hop-primary-surface-weak: var(--hop-sapphire-800);
124
+ --hop-primary-surface-weak-selected: var(--hop-sapphire-600);
124
125
  --hop-primary-surface-weak-hover: var(--hop-sapphire-700);
125
126
  --hop-primary-surface-weak-press: var(--hop-sapphire-600);
126
127
  --hop-primary-text: var(--hop-sapphire-100);
package/dist/workleap/tokens.css CHANGED
@@ -1,9 +1,10 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 23 Jan 2026 21:07:24 GMT
3
+ * Generated on Fri, 06 Feb 2026 18:24:05 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --hop-border-radius-2-5: 0.75rem;
7
8
  --hop-border-radius-9999: 624.9375rem;
8
9
  --hop-border-radius-4: 1.5rem;
9
10
  --hop-border-radius-3: 1rem;
@@ -45,24 +46,25 @@
45
46
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
46
47
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
47
48
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
49
+ --hop-shadow-inset-bevel: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
48
50
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
49
51
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
50
52
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
51
53
  --hop-shadow-none: none;
52
54
  --hop-samoyed: #ffffff;
53
- --hop-rock-900: #292929;
54
- --hop-rock-800: #3c3c3c;
55
- --hop-rock-700: #505050;
56
- --hop-rock-600: #636362;
57
- --hop-rock-500: #6c6c6b;
58
- --hop-rock-400: #777775;
59
- --hop-rock-300: #959593;
60
- --hop-rock-200: #b3b3b1;
61
- --hop-rock-100: #ccccca;
62
- --hop-rock-75: #e0dfdd;
63
- --hop-rock-50: #ecebe8;
64
- --hop-rock-25: #f8f6f3;
65
- --hop-rock-20: #fcfbfb;
55
+ --hop-rock-900: #232426;
56
+ --hop-rock-800: #313335;
57
+ --hop-rock-700: #484a4d;
58
+ --hop-rock-600: #5e6064;
59
+ --hop-rock-500: #6c6e72;
60
+ --hop-rock-400: #787a7e;
61
+ --hop-rock-300: #96989d;
62
+ --hop-rock-200: #b3b5ba;
63
+ --hop-rock-100: #cbcdd2;
64
+ --hop-rock-75: #e1e3e7;
65
+ --hop-rock-50: #eef0f2;
66
+ --hop-rock-25: #f8f9fa;
67
+ --hop-rock-20: #fafbfc;
66
68
  --hop-abyss: #1d1d1c;
67
69
  --hop-moss-900: #132a27;
68
70
  --hop-moss-800: #16433d;
@@ -88,6 +90,18 @@
88
90
  --hop-amanita-75: #ffd6d3;
89
91
  --hop-amanita-50: #fde6e5;
90
92
  --hop-amanita-25: #fdf6f6;
93
+ --hop-limeburst-900: #1f2b00;
94
+ --hop-limeburst-800: #304200;
95
+ --hop-limeburst-700: #415800;
96
+ --hop-limeburst-600: #4f6c00;
97
+ --hop-limeburst-500: #577600;
98
+ --hop-limeburst-400: #5f8100;
99
+ --hop-limeburst-300: #77a300;
100
+ --hop-limeburst-200: #8fc300;
101
+ --hop-limeburst-100: #a3df00;
102
+ --hop-limeburst-75: #b3f400;
103
+ --hop-limeburst-50: #ccff42;
104
+ --hop-limeburst-25: #edffbc;
91
105
  --hop-koi-900: #451a02;
92
106
  --hop-koi-800: #692803;
93
107
  --hop-koi-700: #8c3504;
@@ -124,6 +138,18 @@
124
138
  --hop-toad-75: #e5ded6;
125
139
  --hop-toad-50: #f0eae3;
126
140
  --hop-toad-25: #fef6ef;
141
+ --hop-iris-900: #292362;
142
+ --hop-iris-800: #3b356c;
143
+ --hop-iris-700: #4d468f;
144
+ --hop-iris-600: #6057b3;
145
+ --hop-iris-500: #685dc9;
146
+ --hop-iris-400: #736ad2;
147
+ --hop-iris-300: #8e85ec;
148
+ --hop-iris-200: #b4abff;
149
+ --hop-iris-100: #c3bcff;
150
+ --hop-iris-75: #deddff;
151
+ --hop-iris-50: #eceaff;
152
+ --hop-iris-25: #f6f6ff;
127
153
  --hop-fog-900: #20282a;
128
154
  --hop-fog-800: #313e43;
129
155
  --hop-fog-700: #40535a;
@@ -148,6 +174,18 @@
148
174
  --hop-sapphire-75: #d6e0ff;
149
175
  --hop-sapphire-50: #e6ebff;
150
176
  --hop-sapphire-25: #f5f6ff;
177
+ --hop-persimmon-900: #4c1300;
178
+ --hop-persimmon-800: #731e00;
179
+ --hop-persimmon-700: #982700;
180
+ --hop-persimmon-600: #ba3000;
181
+ --hop-persimmon-500: #ca3400;
182
+ --hop-persimmon-400: #dd3900;
183
+ --hop-persimmon-300: #ff5b22;
184
+ --hop-persimmon-200: #ff9874;
185
+ --hop-persimmon-100: #ffbda7;
186
+ --hop-persimmon-75: #ffd8ca;
187
+ --hop-persimmon-50: #ffe7df;
188
+ --hop-persimmon-25: #fff5f2;
151
189
  --hop-orchid-bloom-900: #1e1c5d;
152
190
  --hop-orchid-bloom-800: #322b8d;
153
191
  --hop-orchid-bloom-700: #433fac;
@@ -1058,6 +1096,7 @@
1058
1096
  --hop-primary-text: var(--hop-sapphire-500);
1059
1097
  --hop-primary-surface-weak-press: var(--hop-sapphire-75);
1060
1098
  --hop-primary-surface-weak-hover: var(--hop-sapphire-50);
1099
+ --hop-primary-surface-weak-selected: var(--hop-sapphire-100);
1061
1100
  --hop-primary-surface-weak: var(--hop-sapphire-25);
1062
1101
  --hop-primary-surface-strong-press: var(--hop-sapphire-700);
1063
1102
  --hop-primary-surface-strong-hover: var(--hop-sapphire-600);
@@ -1076,7 +1115,7 @@
1076
1115
  --hop-primary-icon-disabled: var(--hop-sapphire-200);
1077
1116
  --hop-primary-icon-selected: var(--hop-sapphire-500);
1078
1117
  --hop-primary-icon: var(--hop-sapphire-500);
1079
- --hop-primary-border-press: var(--hop-sapphire-300);
1118
+ --hop-primary-border-press: var(--hop-sapphire-500);
1080
1119
  --hop-primary-border-focus: var(--hop-sapphire-500);
1081
1120
  --hop-primary-border-selected: var(--hop-sapphire-400);
1082
1121
  --hop-primary-border: var(--hop-sapphire-400);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.0.0",
4
+ "version": "5.1.0",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {