@hopper-ui/tokens 5.2.0 → 5.2.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 +10 -0
  2. package/dist/sharegate/dark/tokens.css +26 -26
  3. package/dist/sharegate/tokens.css +29 -5
  4. package/dist/workleap/dark/tokens.css +48 -48
  5. package/dist/workleap/tokens.css +26 -2
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - ce0f650: - Add Callout and CompactCallout component tokens
8
+ - Add border-box to Card component
9
+ - 964568d: - Update dark tokens for Information, Warning, Success for all themes.
10
+ - Update dark tokens for Upsell (only for Workleap theme).
11
+ - Update glassy modal related tokens.
12
+
3
13
  ## 5.2.0
4
14
 
5
15
  ### Minor Changes
package/dist/sharegate/dark/tokens.css CHANGED
@@ -78,7 +78,7 @@
78
78
  --hop-neutral-surface-hover: var(--hop-rock-800);
79
79
  --hop-neutral-surface-press: var(--hop-rock-700);
80
80
  --hop-neutral-surface-strong: var(--hop-toad-25);
81
- --hop-neutral-surface-transparent: rgb(35 36 38 / 0.75);
81
+ --hop-neutral-surface-transparent: rgb(35 36 38 / 0.9);
82
82
  --hop-neutral-surface-weakest: var(--hop-rock-900);
83
83
  --hop-neutral-surface-weak: var(--hop-rock-800);
84
84
  --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
@@ -267,15 +267,15 @@
267
267
  --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
268
268
  --hop-decorative-option9-text: var(--hop-samoyed);
269
269
  --hop-decorative-option9-text-weak: var(--hop-rock-300);
270
- --hop-information-border: var(--hop-coastal-400);
271
- --hop-information-icon: var(--hop-coastal-900);
272
- --hop-information-icon-weakest: var(--hop-coastal-200);
273
- --hop-information-icon-weak: var(--hop-coastal-300);
274
- --hop-information-surface: var(--hop-coastal-75);
275
- --hop-information-surface-strong: var(--hop-coastal-300);
270
+ --hop-information-border: var(--hop-coastal-600);
271
+ --hop-information-icon: var(--hop-coastal-75);
272
+ --hop-information-icon-weakest: var(--hop-coastal-700);
273
+ --hop-information-icon-weak: var(--hop-coastal-400);
274
+ --hop-information-surface: var(--hop-coastal-900);
275
+ --hop-information-surface-strong: var(--hop-coastal-600);
276
276
  --hop-information-surface-weak: var(--hop-coastal-800);
277
- --hop-information-text: var(--hop-coastal-900);
278
- --hop-information-text-weak: var(--hop-coastal-75);
277
+ --hop-information-text: var(--hop-coastal-50);
278
+ --hop-information-text-weak: var(--hop-coastal-400);
279
279
  --hop-secondary-text: var(--hop-persimmon-100);
280
280
  --hop-secondary-text-hover: var(--hop-persimmon-200);
281
281
  --hop-secondary-text-press: var(--hop-persimmon-75);
@@ -560,25 +560,25 @@
560
560
  --hop-status-progress-text-hover: var(--hop-sapphire-900);
561
561
  --hop-status-progress-text-press: var(--hop-sapphire-800);
562
562
  --hop-status-progress-text-selected: var(--hop-sapphire-75);
563
- --hop-success-border: var(--hop-moss-500);
564
- --hop-success-icon: var(--hop-moss-900);
565
- --hop-success-icon-weakest: var(--hop-moss-200);
566
- --hop-success-icon-weak: var(--hop-moss-75);
567
- --hop-success-surface: var(--hop-moss-75);
568
- --hop-success-surface-strong: var(--hop-moss-300);
563
+ --hop-success-border: var(--hop-moss-600);
564
+ --hop-success-icon: var(--hop-moss-75);
565
+ --hop-success-icon-weakest: var(--hop-moss-600);
566
+ --hop-success-icon-weak: var(--hop-moss-400);
567
+ --hop-success-surface: var(--hop-moss-900);
568
+ --hop-success-surface-strong: var(--hop-moss-600);
569
569
  --hop-success-surface-weak: var(--hop-moss-800);
570
- --hop-success-text: var(--hop-moss-900);
571
- --hop-success-text-weak: var(--hop-moss-75);
572
- --hop-success-text-hover: var(--hop-moss-700);
573
- --hop-warning-border: var(--hop-koi-500);
574
- --hop-warning-icon: var(--hop-koi-900);
575
- --hop-warning-icon-weakest: var(--hop-koi-200);
576
- --hop-warning-icon-weak: var(--hop-koi-75);
577
- --hop-warning-surface: var(--hop-koi-75);
578
- --hop-warning-surface-strong: var(--hop-koi-300);
570
+ --hop-success-text: var(--hop-moss-75);
571
+ --hop-success-text-weak: var(--hop-moss-400);
572
+ --hop-success-text-hover: var(--hop-moss-50);
573
+ --hop-warning-border: var(--hop-koi-600);
574
+ --hop-warning-icon: var(--hop-koi-75);
575
+ --hop-warning-icon-weakest: var(--hop-koi-600);
576
+ --hop-warning-icon-weak: var(--hop-koi-400);
577
+ --hop-warning-surface: var(--hop-koi-900);
578
+ --hop-warning-surface-strong: var(--hop-koi-600);
579
579
  --hop-warning-surface-weak: var(--hop-koi-800);
580
- --hop-warning-text: var(--hop-koi-900);
581
- --hop-warning-text-weak: var(--hop-koi-75);
580
+ --hop-warning-text: var(--hop-koi-75);
581
+ --hop-warning-text-weak: var(--hop-koi-400);
582
582
  --hop-dataviz-unavailable: var(--hop-rock-600);
583
583
  --hop-dataviz-unavailable-weak: var(--hop-rock-400);
584
584
  --hop-dataviz-unavailable-strong: var(--hop-rock-700);
package/dist/sharegate/tokens.css CHANGED
@@ -1,11 +1,11 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Apr 2026 14:11:32 GMT
3
+ * Generated on Thu, 23 Apr 2026 16:30:46 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --hop-comp-tooltip-box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
8
- --hop-comp-tooltip-backdrop-filter: blur(15px);
8
+ --hop-comp-tooltip-backdrop-filter: blur(10px);
9
9
  --hop-comp-tile-icon-color: transparent;
10
10
  --hop-comp-tile-outline-color-disabled: transparent;
11
11
  --hop-comp-tile-outline-color-selected: transparent;
@@ -20,9 +20,9 @@
20
20
  --hop-comp-tabs-tab-list-border: none;
21
21
  --hop-comp-tabs-tab-list-background-color: transparent;
22
22
  --hop-comp-popover-box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
23
- --hop-comp-popover-backdrop-filter: blur(15px);
23
+ --hop-comp-popover-backdrop-filter: blur(10px);
24
24
  --hop-comp-modal-box-shadow: 0 4px 10px 4px rgba(0, 0, 0, 0.08), 0 8px 24px 0 rgba(0, 0, 0, 0.12);
25
- --hop-comp-modal-backdrop-filter: blur(15px);
25
+ --hop-comp-modal-backdrop-filter: blur(10px);
26
26
  --hop-comp-radio-box-shadow: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.10) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.50) inset;
27
27
  --hop-comp-checkbox-box-shadow: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.10) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.50) inset;
28
28
  --hop-comp-switch-thumb-box-shadow-selected: none;
@@ -352,7 +352,7 @@
352
352
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
353
353
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
354
354
  --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
355
- --hop-neutral-surface-transparent: rgb(255 255 255 / 0.75);
355
+ --hop-neutral-surface-transparent: rgb(255 255 255 / 0.9);
356
356
  --hop-space-1280: 8rem;
357
357
  --hop-space-960: 6rem;
358
358
  --hop-space-800: 5rem;
@@ -637,6 +637,10 @@
637
637
  --hop-comp-popover-background: var(--hop-neutral-surface-transparent);
638
638
  --hop-comp-modal-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
639
639
  --hop-comp-modal-background: var(--hop-neutral-surface-transparent);
640
+ --hop-comp-callout-upsell-icon-fill-color: var(--hop-samoyed);
641
+ --hop-comp-callout-warning-icon-fill-color: var(--hop-samoyed);
642
+ --hop-comp-callout-success-icon-fill-color: var(--hop-samoyed);
643
+ --hop-comp-callout-information-icon-fill-color: var(--hop-samoyed);
640
644
  --hop-comp-button-upsell-background-loading: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
641
645
  --hop-comp-button-upsell-background: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
642
646
  --hop-comp-button-primary-background-loading: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
@@ -1525,6 +1529,26 @@
1525
1529
  --hop-comp-card-main-border-color: var(--hop-neutral-border-weakest);
1526
1530
  --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1527
1531
  --hop-comp-card-main-border-radius: var(--hop-shape-rounded-lg);
1532
+ --hop-comp-callout-upsell-icon-background-color: var(--hop-upsell-icon-weakest);
1533
+ --hop-comp-callout-upsell-icon-shadow-color: var(--hop-neutral-icon-always-dark);
1534
+ --hop-comp-callout-upsell-text-color: var(--hop-upsell-text);
1535
+ --hop-comp-callout-upsell-border-color: var(--hop-upsell-border);
1536
+ --hop-comp-callout-upsell-background-color: var(--hop-upsell-surface);
1537
+ --hop-comp-callout-warning-icon-background-color: var(--hop-warning-icon-weakest);
1538
+ --hop-comp-callout-warning-icon-shadow-color: var(--hop-neutral-icon-always-dark);
1539
+ --hop-comp-callout-warning-text-color: var(--hop-warning-text);
1540
+ --hop-comp-callout-warning-border-color: var(--hop-warning-border);
1541
+ --hop-comp-callout-warning-background-color: var(--hop-warning-surface);
1542
+ --hop-comp-callout-success-icon-background-color: var(--hop-success-icon-weakest);
1543
+ --hop-comp-callout-success-icon-shadow-color: var(--hop-neutral-icon-always-dark);
1544
+ --hop-comp-callout-success-text-color: var(--hop-success-text);
1545
+ --hop-comp-callout-success-border-color: var(--hop-success-border);
1546
+ --hop-comp-callout-success-background-color: var(--hop-success-surface);
1547
+ --hop-comp-callout-information-icon-background-color: var(--hop-information-icon-weakest);
1548
+ --hop-comp-callout-information-icon-shadow-color: var(--hop-neutral-icon-always-dark);
1549
+ --hop-comp-callout-information-text-color: var(--hop-information-text);
1550
+ --hop-comp-callout-information-border-color: var(--hop-information-border);
1551
+ --hop-comp-callout-information-background-color: var(--hop-information-surface);
1528
1552
  --hop-comp-calendar-cell-today-border-color: var(--hop-primary-border-selected);
1529
1553
  --hop-comp-calendar-cell-background-press: var(--hop-primary-surface-press);
1530
1554
  --hop-comp-calendar-cell-background-selected: var(--hop-primary-surface-selected);
package/dist/workleap/dark/tokens.css CHANGED
@@ -78,7 +78,7 @@
78
78
  --hop-neutral-surface-hover: var(--hop-rock-800);
79
79
  --hop-neutral-surface-press: var(--hop-rock-700);
80
80
  --hop-neutral-surface-strong: var(--hop-toad-25);
81
- --hop-neutral-surface-transparent: rgb(35 36 38 / 0.75);
81
+ --hop-neutral-surface-transparent: rgb(35 36 38 / 0.9);
82
82
  --hop-neutral-surface-weakest: var(--hop-rock-900);
83
83
  --hop-neutral-surface-weak: var(--hop-rock-800);
84
84
  --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
@@ -149,34 +149,34 @@
149
149
  --hop-upsell-surface-weak-active: var(--hop-sunken-treasure-600);
150
150
  --hop-upsell-text-active: var(--hop-sunken-treasure-900);
151
151
  --hop-upsell-text-weak-active: var(--hop-sunken-treasure-300);
152
- --hop-upsell-border: var(--hop-sunken-treasure-200);
153
- --hop-upsell-border-selected: var(--hop-sunken-treasure-100);
152
+ --hop-upsell-border: var(--hop-sunken-treasure-600);
153
+ --hop-upsell-border-selected: var(--hop-sunken-treasure-300);
154
154
  --hop-upsell-border-disabled: var(--hop-sunken-treasure-700);
155
155
  --hop-upsell-border-press: var(--hop-sunken-treasure-400);
156
- --hop-upsell-icon: var(--hop-sunken-treasure-700);
157
- --hop-upsell-icon-selected: var(--hop-sunken-treasure-100);
158
- --hop-upsell-icon-hover: var(--hop-sunken-treasure-800);
159
- --hop-upsell-icon-press: var(--hop-sunken-treasure-900);
160
- --hop-upsell-icon-weakest: var(--hop-sunken-treasure-100);
161
- --hop-upsell-icon-weak: var(--hop-sunken-treasure-100);
156
+ --hop-upsell-icon: var(--hop-sunken-treasure-75);
157
+ --hop-upsell-icon-selected: var(--hop-sunken-treasure-300);
158
+ --hop-upsell-icon-hover: var(--hop-sunken-treasure-50);
159
+ --hop-upsell-icon-press: var(--hop-sunken-treasure-25);
160
+ --hop-upsell-icon-weakest: var(--hop-sunken-treasure-700);
161
+ --hop-upsell-icon-weak: var(--hop-sunken-treasure-400);
162
162
  --hop-upsell-icon-weak-hover: var(--hop-sunken-treasure-200);
163
- --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-300);
164
- --hop-upsell-surface: var(--hop-sunken-treasure-75);
163
+ --hop-upsell-icon-weak-press: var(--hop-sunken-treasure-100);
164
+ --hop-upsell-surface: var(--hop-sunken-treasure-900);
165
165
  --hop-upsell-surface-selected: var(--hop-sunken-treasure-800);
166
- --hop-upsell-surface-disabled: var(--hop-sunken-treasure-700);
167
- --hop-upsell-surface-hover: var(--hop-sunken-treasure-100);
168
- --hop-upsell-surface-press: var(--hop-sunken-treasure-200);
169
- --hop-upsell-surface-weak: var(--hop-sunken-treasure-800);
170
- --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-700);
171
- --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-600);
172
- --hop-upsell-text: var(--hop-sunken-treasure-700);
173
- --hop-upsell-text-selected: var(--hop-sunken-treasure-100);
166
+ --hop-upsell-surface-disabled: var(--hop-sunken-treasure-900);
167
+ --hop-upsell-surface-hover: var(--hop-sunken-treasure-800);
168
+ --hop-upsell-surface-press: var(--hop-sunken-treasure-700);
169
+ --hop-upsell-surface-weak: var(--hop-sunken-treasure-700);
170
+ --hop-upsell-surface-weak-hover: var(--hop-sunken-treasure-600);
171
+ --hop-upsell-surface-weak-press: var(--hop-sunken-treasure-500);
172
+ --hop-upsell-text: var(--hop-sunken-treasure-75);
173
+ --hop-upsell-text-selected: var(--hop-sunken-treasure-300);
174
174
  --hop-upsell-text-disabled: var(--hop-sunken-treasure-300);
175
- --hop-upsell-text-hover: var(--hop-sunken-treasure-800);
176
- --hop-upsell-text-press: var(--hop-sunken-treasure-900);
177
- --hop-upsell-text-weak: var(--hop-sunken-treasure-100);
175
+ --hop-upsell-text-hover: var(--hop-sunken-treasure-50);
176
+ --hop-upsell-text-press: var(--hop-sunken-treasure-25);
177
+ --hop-upsell-text-weak: var(--hop-sunken-treasure-400);
178
178
  --hop-upsell-text-weak-hover: var(--hop-sunken-treasure-200);
179
- --hop-upsell-text-weak-press: var(--hop-sunken-treasure-300);
179
+ --hop-upsell-text-weak-press: var(--hop-sunken-treasure-100);
180
180
  --hop-decorative-option1-border: var(--hop-sapphire-400);
181
181
  --hop-decorative-option1-icon: var(--hop-sapphire-900);
182
182
  --hop-decorative-option1-surface: var(--hop-sapphire-100);
@@ -267,15 +267,15 @@
267
267
  --hop-decorative-option9-surface-weakest: var(--hop-rock-200);
268
268
  --hop-decorative-option9-text: var(--hop-samoyed);
269
269
  --hop-decorative-option9-text-weak: var(--hop-rock-300);
270
- --hop-information-border: var(--hop-coastal-400);
271
- --hop-information-icon: var(--hop-coastal-900);
272
- --hop-information-icon-weakest: var(--hop-coastal-200);
273
- --hop-information-icon-weak: var(--hop-coastal-300);
274
- --hop-information-surface: var(--hop-coastal-75);
275
- --hop-information-surface-strong: var(--hop-coastal-300);
270
+ --hop-information-border: var(--hop-coastal-600);
271
+ --hop-information-icon: var(--hop-coastal-75);
272
+ --hop-information-icon-weakest: var(--hop-coastal-700);
273
+ --hop-information-icon-weak: var(--hop-coastal-400);
274
+ --hop-information-surface: var(--hop-coastal-900);
275
+ --hop-information-surface-strong: var(--hop-coastal-600);
276
276
  --hop-information-surface-weak: var(--hop-coastal-800);
277
- --hop-information-text: var(--hop-coastal-900);
278
- --hop-information-text-weak: var(--hop-coastal-75);
277
+ --hop-information-text: var(--hop-coastal-50);
278
+ --hop-information-text-weak: var(--hop-coastal-400);
279
279
  --hop-secondary-text: var(--hop-koi-100);
280
280
  --hop-secondary-text-hover: var(--hop-koi-200);
281
281
  --hop-secondary-text-press: var(--hop-koi-75);
@@ -560,25 +560,25 @@
560
560
  --hop-status-progress-text-hover: var(--hop-sapphire-900);
561
561
  --hop-status-progress-text-press: var(--hop-sapphire-800);
562
562
  --hop-status-progress-text-selected: var(--hop-sapphire-75);
563
- --hop-success-border: var(--hop-moss-500);
564
- --hop-success-icon: var(--hop-moss-900);
565
- --hop-success-icon-weakest: var(--hop-moss-200);
566
- --hop-success-icon-weak: var(--hop-moss-75);
567
- --hop-success-surface: var(--hop-moss-75);
568
- --hop-success-surface-strong: var(--hop-moss-300);
563
+ --hop-success-border: var(--hop-moss-600);
564
+ --hop-success-icon: var(--hop-moss-75);
565
+ --hop-success-icon-weakest: var(--hop-moss-600);
566
+ --hop-success-icon-weak: var(--hop-moss-400);
567
+ --hop-success-surface: var(--hop-moss-900);
568
+ --hop-success-surface-strong: var(--hop-moss-600);
569
569
  --hop-success-surface-weak: var(--hop-moss-800);
570
- --hop-success-text: var(--hop-moss-900);
571
- --hop-success-text-weak: var(--hop-moss-75);
572
- --hop-success-text-hover: var(--hop-moss-700);
573
- --hop-warning-border: var(--hop-koi-500);
574
- --hop-warning-icon: var(--hop-koi-900);
575
- --hop-warning-icon-weakest: var(--hop-koi-200);
576
- --hop-warning-icon-weak: var(--hop-koi-75);
577
- --hop-warning-surface: var(--hop-koi-75);
578
- --hop-warning-surface-strong: var(--hop-koi-300);
570
+ --hop-success-text: var(--hop-moss-75);
571
+ --hop-success-text-weak: var(--hop-moss-400);
572
+ --hop-success-text-hover: var(--hop-moss-50);
573
+ --hop-warning-border: var(--hop-koi-600);
574
+ --hop-warning-icon: var(--hop-koi-75);
575
+ --hop-warning-icon-weakest: var(--hop-koi-600);
576
+ --hop-warning-icon-weak: var(--hop-koi-400);
577
+ --hop-warning-surface: var(--hop-koi-900);
578
+ --hop-warning-surface-strong: var(--hop-koi-600);
579
579
  --hop-warning-surface-weak: var(--hop-koi-800);
580
- --hop-warning-text: var(--hop-koi-900);
581
- --hop-warning-text-weak: var(--hop-koi-75);
580
+ --hop-warning-text: var(--hop-koi-75);
581
+ --hop-warning-text-weak: var(--hop-koi-400);
582
582
  --hop-dataviz-unavailable: var(--hop-rock-600);
583
583
  --hop-dataviz-unavailable-weak: var(--hop-rock-400);
584
584
  --hop-dataviz-unavailable-strong: var(--hop-rock-700);
package/dist/workleap/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 22 Apr 2026 14:11:33 GMT
3
+ * Generated on Thu, 23 Apr 2026 16:30:46 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -327,7 +327,7 @@
327
327
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
328
328
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
329
329
  --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
330
- --hop-neutral-surface-transparent: rgb(255 255 255 / 0.75);
330
+ --hop-neutral-surface-transparent: rgb(255 255 255 / 0.9);
331
331
  --hop-space-1280: 8rem;
332
332
  --hop-space-960: 6rem;
333
333
  --hop-space-800: 5rem;
@@ -613,6 +613,10 @@
613
613
  --hop-comp-checkbox-box-shadow: var(--hop-shadow-none);
614
614
  --hop-comp-card-second-level-elevated-box-shadow: var(--hop-shadow-none);
615
615
  --hop-comp-card-main-elevated-box-shadow: var(--hop-shadow-none);
616
+ --hop-comp-callout-upsell-icon-fill-color: var(--hop-samoyed);
617
+ --hop-comp-callout-warning-icon-fill-color: var(--hop-samoyed);
618
+ --hop-comp-callout-success-icon-fill-color: var(--hop-samoyed);
619
+ --hop-comp-callout-information-icon-fill-color: var(--hop-samoyed);
616
620
  --hop-comp-button-ghost-danger-box-shadow-loading: var(--hop-shadow-none);
617
621
  --hop-comp-button-ghost-danger-box-shadow: var(--hop-shadow-none);
618
622
  --hop-comp-button-ghost-secondary-box-shadow-loading: var(--hop-shadow-none);
@@ -1522,6 +1526,26 @@
1522
1526
  --hop-comp-card-main-border-color: var(--hop-neutral-border-weak);
1523
1527
  --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1524
1528
  --hop-comp-card-main-border-radius: var(--hop-shape-rounded-md);
1529
+ --hop-comp-callout-upsell-icon-background-color: var(--hop-upsell-icon-weakest);
1530
+ --hop-comp-callout-upsell-icon-shadow-color: var(--hop-upsell-icon);
1531
+ --hop-comp-callout-upsell-text-color: var(--hop-upsell-text);
1532
+ --hop-comp-callout-upsell-border-color: var(--hop-upsell-border);
1533
+ --hop-comp-callout-upsell-background-color: var(--hop-upsell-surface);
1534
+ --hop-comp-callout-warning-icon-background-color: var(--hop-warning-icon-weakest);
1535
+ --hop-comp-callout-warning-icon-shadow-color: var(--hop-warning-icon);
1536
+ --hop-comp-callout-warning-text-color: var(--hop-warning-text);
1537
+ --hop-comp-callout-warning-border-color: var(--hop-warning-border);
1538
+ --hop-comp-callout-warning-background-color: var(--hop-warning-surface);
1539
+ --hop-comp-callout-success-icon-background-color: var(--hop-success-icon-weakest);
1540
+ --hop-comp-callout-success-icon-shadow-color: var(--hop-success-icon);
1541
+ --hop-comp-callout-success-text-color: var(--hop-success-text);
1542
+ --hop-comp-callout-success-border-color: var(--hop-success-border);
1543
+ --hop-comp-callout-success-background-color: var(--hop-success-surface);
1544
+ --hop-comp-callout-information-icon-background-color: var(--hop-information-icon-weakest);
1545
+ --hop-comp-callout-information-icon-shadow-color: var(--hop-information-icon);
1546
+ --hop-comp-callout-information-text-color: var(--hop-information-text);
1547
+ --hop-comp-callout-information-border-color: var(--hop-information-border);
1548
+ --hop-comp-callout-information-background-color: var(--hop-information-surface);
1525
1549
  --hop-comp-calendar-cell-today-border-color: var(--hop-neutral-border-strong);
1526
1550
  --hop-comp-calendar-cell-background-press: var(--hop-neutral-surface-press);
1527
1551
  --hop-comp-calendar-cell-background-selected: var(--hop-neutral-surface-selected);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.2.0",
4
+ "version": "5.2.1",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {