@hopper-ui/tokens 5.0.0 → 5.1.1

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 +21 -0
  2. package/dist/sharegate/dark/tokens.css +57 -56
  3. package/dist/sharegate/tokens.css +408 -272
  4. package/dist/workleap/dark/tokens.css +4 -3
  5. package/dist/workleap/tokens.css +354 -218
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - d55064b: Add Button component tokens for themeable branding:
8
+ - Add `comp-button` tokens for all variants: primary, secondary, upsell, danger, ghost-primary, ghost-secondary, ghost-danger, and disabled states
9
+ - Migrate Button and ToggleButton CSS from hardcoded semantic values to `--hop-comp-button-*` tokens.
10
+
11
+ ## 5.1.0
12
+
13
+ ### Minor Changes
14
+
15
+ - e4f524a: Add ShareGate tokens and core token updates:
16
+ - Add new core color palettes: `persimmon`, `iris`, `limeburst`
17
+ - Update `rock` color palette values
18
+ - Add `inset-bevel` elevation token
19
+ - Add `rounded-2-5` (12px) border radius
20
+ - Update ShareGate semantic tokens: primary uses `iris`, upsell uses `limeburst`
21
+ - Add `primary.surface-weak-selected` token to Workleap and ShareGate themes
22
+ - Fix minor Workleap primary token values
23
+
3
24
  ## 5.0.0
4
25
 
5
26
  ### 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);