@hopper-ui/tokens 5.1.9 → 5.1.10

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 +19 -0
  2. package/dist/sharegate/dark/tokens.css +3 -1
  3. package/dist/sharegate/tokens.css +267 -114
  4. package/dist/workleap/dark/tokens.css +2 -0
  5. package/dist/workleap/tokens.css +244 -91
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - f416b8f: Update Tile tokens
8
+ - dfc7fb4: Added a new `elevation` prop to the Card component, and made `flat` the default so cards render without shadow unless opted in.
9
+ - 5790abf: Update Button tokens to match new ShareGate theme
10
+ - 66466d6: Add Listbox checkmark tokens
11
+ - c89ae41: Update tokens for Badge in ShareGate theme
12
+ - db468be: Update Switch and SegmentedControl branding tokens
13
+ - 71d9ff7: Add ShareGate tokens for Tooltip component
14
+ - f3fd95a: Add Tabs branding tokens
15
+ - c0784b2: - Update Checkbox and Radio button tokens
16
+ - Remove tactility-control core token
17
+ - 4119ac6: Add Calendar and RangeCalendar tokens for ShareGate theme
18
+ - 506256c: Update styles of Modal, Popover and PopoverBase in ShareGate theme.
19
+
20
+ Add neutral-surface-transparent token.
21
+
3
22
  ## 5.1.9
4
23
 
5
24
  ### Patch Changes
package/dist/sharegate/dark/tokens.css CHANGED
@@ -78,8 +78,10 @@
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
82
  --hop-neutral-surface-weakest: var(--hop-rock-900);
82
83
  --hop-neutral-surface-weak: var(--hop-rock-800);
84
+ --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
83
85
  --hop-neutral-surface-weak-selected: var(--hop-rock-800);
84
86
  --hop-neutral-surface-weak-hover: var(--hop-rock-700);
85
87
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
@@ -126,7 +128,7 @@
126
128
  --hop-primary-surface-hover: var(--hop-iris-400);
127
129
  --hop-primary-surface-press: var(--hop-iris-500);
128
130
  --hop-primary-surface-strong: var(--hop-iris-400);
129
- --hop-primary-surface-strong-selected: var(--hop-iris-800);
131
+ --hop-primary-surface-strong-selected: var(--hop-iris-300);
130
132
  --hop-primary-surface-strong-hover: var(--hop-iris-500);
131
133
  --hop-primary-surface-strong-press: var(--hop-iris-600);
132
134
  --hop-primary-surface-weak: var(--hop-iris-800);
package/dist/sharegate/tokens.css CHANGED
@@ -1,30 +1,78 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 15 Apr 2026 18:41:52 GMT
3
+ * Generated on Mon, 20 Apr 2026 19:17:39 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --hop-comp-switch-thumb-filter-selected: none;
8
- --hop-comp-switch-thumb-filter: drop-shadow(2.5px 2.5px 5px rgb(0 0 0 / 5%)) drop-shadow(-2.5px -2.5px 5px rgb(255 255 255 / 50%));
9
- --hop-comp-switch-track-box-shadow: 0.5px 1.5px 5px 0 rgb(0 0 0 / 10%) inset, -2.5px 2.5px 5px 0 rgb(255 255 255 / 50%) inset;
10
- --hop-comp-switch-track-filter: drop-shadow(1.5px 1.5px 1.5px rgb(0 0 0 / 3%));
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(5px);
9
+ --hop-comp-tile-icon-color: transparent;
10
+ --hop-comp-tile-outline-color-disabled: transparent;
11
+ --hop-comp-tile-outline-color-selected: transparent;
12
+ --hop-comp-tile-outline-color: transparent;
13
+ --hop-comp-tile-border-color-disabled: transparent;
14
+ --hop-comp-tile-border-color-selected: transparent;
15
+ --hop-comp-tile-border-color-focus: transparent;
16
+ --hop-comp-tile-border-color-press: transparent;
17
+ --hop-comp-tile-border-color-hover: transparent;
18
+ --hop-comp-tile-box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 0.12) inset, 0 1px 0 1px rgb(255 255 255 / 0.1);
19
+ --hop-comp-tabs-tab-list-border-radius: NaNrem;
20
+ --hop-comp-tabs-tab-list-border: none;
21
+ --hop-comp-tabs-tab-list-background-color: transparent;
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(5px);
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(5px);
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
+ --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
+ --hop-comp-switch-thumb-box-shadow-selected: none;
29
+ --hop-comp-switch-thumb-box-shadow: 2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.10), 2.5px 2.5px 5px 0 rgba(0, 0, 0, 0.05);
30
+ --hop-comp-switch-track-box-shadow: 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;
31
+ --hop-comp-switch-track-filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.03));
11
32
  --hop-comp-segmented-control-item-box-shadow-disabled: none;
12
- --hop-comp-segmented-control-item-box-shadow-selected: -2.5px -2.5px 5px 0 rgb(255 255 255 / 50%), 2.5px 2.5px 5px 0 rgb(0 0 0 / 5%);
13
- --hop-comp-segmented-control-box-shadow: 1.5px 1.5px 1.5px 0 rgb(0 0 0 / 3%), 0.5px 1.5px 5px 0 rgb(0 0 0 / 10%) inset, -2.5px 2.5px 5px 0 rgb(255 255 255 / 50%) inset;
14
- --hop-comp-card-second-level-box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.10), 0 -1px 3px 0 rgba(0, 0, 0, 0.12) inset;
15
- --hop-comp-card-main-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10), 0 1px 0 0 rgba(255, 255, 255, 0.40) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
16
- --hop-comp-button-ghost-disabled-border-color: transparent;
17
- --hop-comp-button-ghost-disabled-background-color: transparent;
33
+ --hop-comp-segmented-control-item-box-shadow-selected: 2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.10), 2.5px 2.5px 5px 0 rgba(0, 0, 0, 0.05);
34
+ --hop-comp-segmented-control-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;
35
+ --hop-comp-card-second-level-elevated-box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.10), 0 -1px 3px 0 rgba(0, 0, 0, 0.12) inset;
36
+ --hop-comp-card-main-elevated-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10), 0 1px 0 0 rgba(255, 255, 255, 0.40) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset;
37
+ --hop-comp-calendar-grid-border-color: transparent;
38
+ --hop-comp-button-ghost-danger-border-color-disabled: transparent;
39
+ --hop-comp-button-ghost-danger-border-color-selected: transparent;
18
40
  --hop-comp-button-ghost-danger-border-color: transparent;
19
- --hop-comp-button-ghost-danger-background-color: transparent;
41
+ --hop-comp-button-ghost-danger-background-disabled: transparent;
42
+ --hop-comp-button-ghost-danger-box-shadow-loading: none;
43
+ --hop-comp-button-ghost-danger-border-color-loading: transparent;
44
+ --hop-comp-button-ghost-danger-background-loading: transparent;
45
+ --hop-comp-button-ghost-danger-background: transparent;
20
46
  --hop-comp-button-ghost-danger-box-shadow: none;
47
+ --hop-comp-button-ghost-secondary-border-color-disabled: transparent;
48
+ --hop-comp-button-ghost-secondary-border-color-selected: transparent;
21
49
  --hop-comp-button-ghost-secondary-border-color: transparent;
22
- --hop-comp-button-ghost-secondary-background-color: transparent;
50
+ --hop-comp-button-ghost-secondary-background-disabled: transparent;
51
+ --hop-comp-button-ghost-secondary-box-shadow-loading: none;
52
+ --hop-comp-button-ghost-secondary-border-color-loading: transparent;
53
+ --hop-comp-button-ghost-secondary-background-loading: transparent;
54
+ --hop-comp-button-ghost-secondary-background: transparent;
23
55
  --hop-comp-button-ghost-secondary-box-shadow: none;
56
+ --hop-comp-button-ghost-primary-border-color-disabled: transparent;
57
+ --hop-comp-button-ghost-primary-border-color-selected: transparent;
24
58
  --hop-comp-button-ghost-primary-border-color: transparent;
25
- --hop-comp-button-ghost-primary-background-color: transparent;
59
+ --hop-comp-button-ghost-primary-background-disabled: transparent;
60
+ --hop-comp-button-ghost-primary-box-shadow-loading: none;
61
+ --hop-comp-button-ghost-primary-border-color-loading: transparent;
62
+ --hop-comp-button-ghost-primary-background-loading: transparent;
63
+ --hop-comp-button-ghost-primary-background: transparent;
26
64
  --hop-comp-button-ghost-primary-box-shadow: none;
27
- --hop-comp-button-secondary-border-color-selected: transparent;
65
+ --hop-comp-button-danger-box-shadow-loading: none;
66
+ --hop-comp-button-danger-box-shadow: none;
67
+ --hop-comp-button-upsell-border-color-disabled: transparent;
68
+ --hop-comp-button-upsell-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
69
+ --hop-comp-button-upsell-box-shadow: none;
70
+ --hop-comp-button-secondary-border-color-disabled: transparent;
71
+ --hop-comp-button-secondary-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
72
+ --hop-comp-button-secondary-box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
73
+ --hop-comp-button-primary-border-color-disabled: transparent;
74
+ --hop-comp-button-primary-box-shadow-loading: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
75
+ --hop-comp-button-primary-box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 4px 0 rgba(0, 0, 0, 0.10) inset;
28
76
  --hop-overline-bottom-offset: -0.25rem;
29
77
  --hop-overline-top-offset: -0.25rem;
30
78
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -303,6 +351,8 @@
303
351
  --hop-dataviz-monochromatic-primary-75: #d6e0ff;
304
352
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
305
353
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
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);
306
356
  --hop-space-1280: 8rem;
307
357
  --hop-space-960: 6rem;
308
358
  --hop-space-800: 5rem;
@@ -358,8 +408,6 @@
358
408
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
359
409
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
360
410
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
361
- --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
362
- --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
363
411
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
364
412
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
365
413
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
@@ -583,12 +631,16 @@
583
631
  --hop-coastal-75: #bae6ff;
584
632
  --hop-coastal-50: #d9efff;
585
633
  --hop-coastal-25: #f0f8ff;
586
- --hop-comp-radio-box-shadow: var(--hop-shadow-tactility-control);
587
- --hop-comp-checkbox-box-shadow: var(--hop-shadow-tactility-control);
588
- --hop-comp-button-danger-box-shadow: var(--hop-shadow-tactility-button);
589
- --hop-comp-button-upsell-box-shadow: var(--hop-shadow-tactility-button);
590
- --hop-comp-button-secondary-box-shadow: var(--hop-shadow-tactility-button);
591
- --hop-comp-button-primary-box-shadow: var(--hop-shadow-tactility-button);
634
+ --hop-comp-tooltip-background: var(--hop-neutral-surface-weak-transparent-always-dark);
635
+ --hop-comp-tabs-tab-list-border-block-end: var(--hop-space-10) solid var(--hop-neutral-border-weak);
636
+ --hop-comp-popover-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
637
+ --hop-comp-popover-background: var(--hop-neutral-surface-transparent);
638
+ --hop-comp-modal-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
639
+ --hop-comp-modal-background: var(--hop-neutral-surface-transparent);
640
+ --hop-comp-button-upsell-background-loading: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
641
+ --hop-comp-button-upsell-background: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
642
+ --hop-comp-button-primary-background-loading: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
643
+ --hop-comp-button-primary-background: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
592
644
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
593
645
  --hop-shape-rounded-md: var(--hop-border-radius-2);
594
646
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1185,7 +1237,7 @@
1185
1237
  --hop-primary-surface-weak: var(--hop-iris-25);
1186
1238
  --hop-primary-surface-strong-press: var(--hop-iris-700);
1187
1239
  --hop-primary-surface-strong-hover: var(--hop-iris-600);
1188
- --hop-primary-surface-strong-selected: var(--hop-iris-50);
1240
+ --hop-primary-surface-strong-selected: var(--hop-iris-800);
1189
1241
  --hop-primary-surface-strong: var(--hop-iris-400);
1190
1242
  --hop-primary-surface-press: var(--hop-iris-300);
1191
1243
  --hop-primary-surface-hover: var(--hop-iris-200);
@@ -1334,13 +1386,39 @@
1334
1386
  --hop-space-stack-md: var(--hop-space-160);
1335
1387
  --hop-space-stack-sm: var(--hop-space-80);
1336
1388
  --hop-space-stack-xs: var(--hop-space-40);
1337
- --hop-comp-mark-indicator-color-error: var(--hop-danger-icon-strong);
1338
- --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1339
- --hop-comp-mark-indicator-color: var(--hop-neutral-icon-selected);
1389
+ --hop-comp-tooltip-color: var(--hop-neutral-text-always-light);
1390
+ --hop-comp-tooltip-border-radius: var(--hop-shape-rounded-md);
1391
+ --hop-comp-tile-icon-color-disabled: var(--hop-neutral-icon-disabled);
1392
+ --hop-comp-tile-icon-color-selected: var(--hop-neutral-icon);
1393
+ --hop-comp-tile-text-color-disabled: var(--hop-neutral-text-disabled);
1394
+ --hop-comp-tile-text-color-selected: var(--hop-neutral-text);
1395
+ --hop-comp-tile-text-color-focus: var(--hop-neutral-text-hover);
1396
+ --hop-comp-tile-text-color-press: var(--hop-neutral-text-press);
1397
+ --hop-comp-tile-text-color-hover: var(--hop-neutral-text-hover);
1398
+ --hop-comp-tile-text-color: var(--hop-neutral-text);
1399
+ --hop-comp-tile-outline-color-focus: var(--hop-primary-border-focus);
1400
+ --hop-comp-tile-border-radius: var(--hop-shape-rounded-md);
1401
+ --hop-comp-tile-border-color: var(--hop-neutral-border-weakest);
1402
+ --hop-comp-tile-background-color-disabled: var(--hop-neutral-surface-disabled);
1403
+ --hop-comp-tile-background-color-selected: var(--hop-neutral-surface-weak-selected);
1404
+ --hop-comp-tile-background-color-focus: var(--hop-neutral-surface-weak-hover);
1405
+ --hop-comp-tile-background-color-press: var(--hop-neutral-surface-weak-press);
1406
+ --hop-comp-tile-background-color-hover: var(--hop-neutral-surface-weak-hover);
1407
+ --hop-comp-tile-background-color: var(--hop-neutral-surface);
1408
+ --hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
1409
+ --hop-comp-tabs-tab-border-radius: var(--hop-shape-rounded-sm);
1410
+ --hop-comp-tabs-tab-border-color-disabled: var(--hop-neutral-border-disabled);
1411
+ --hop-comp-tabs-tab-border-color-focus: var(--hop-primary-border-focus);
1412
+ --hop-comp-tabs-tab-border-color-selected: var(--hop-primary-border-selected);
1413
+ --hop-comp-tabs-tab-text-color-disabled: var(--hop-neutral-text-disabled);
1414
+ --hop-comp-tabs-tab-text-color-focus: var(--hop-neutral-text-hover);
1415
+ --hop-comp-tabs-tab-text-color-selected: var(--hop-primary-text-selected);
1416
+ --hop-comp-tabs-tab-text-color-press: var(--hop-neutral-text-press);
1417
+ --hop-comp-tabs-tab-text-color-hover: var(--hop-neutral-text-hover);
1418
+ --hop-comp-tabs-tab-text-color: var(--hop-neutral-text-weak);
1419
+ --hop-comp-popover-border-radius: var(--hop-shape-rounded-lg);
1420
+ --hop-comp-modal-border-radius: var(--hop-shape-rounded-lg);
1340
1421
  --hop-comp-mark-border-color-error-focus: var(--hop-danger-border-press);
1341
- --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1342
- --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1343
- --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1344
1422
  --hop-comp-mark-border-color-error-press: var(--hop-danger-border-press);
1345
1423
  --hop-comp-mark-border-color-error: var(--hop-danger-border-strong);
1346
1424
  --hop-comp-mark-border-color-disabled: var(--hop-neutral-border-disabled);
@@ -1349,6 +1427,30 @@
1349
1427
  --hop-comp-mark-border-color-press: var(--hop-neutral-border-press);
1350
1428
  --hop-comp-mark-border-color-hover: var(--hop-neutral-border-hover);
1351
1429
  --hop-comp-mark-border-color: var(--hop-neutral-border);
1430
+ --hop-comp-mark-indicator-color-error: var(--hop-neutral-icon-always-light);
1431
+ --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1432
+ --hop-comp-mark-indicator-color: var(--hop-neutral-icon-always-light);
1433
+ --hop-comp-mark-icon-color-error-press: var(--hop-danger-icon-weak-press);
1434
+ --hop-comp-mark-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1435
+ --hop-comp-mark-icon-color-error: var(--hop-danger-icon-weak);
1436
+ --hop-comp-mark-icon-color-focus: var(--hop-neutral-icon-hover);
1437
+ --hop-comp-mark-icon-color-disabled: var(--hop-neutral-icon-disabled);
1438
+ --hop-comp-mark-icon-color-selected: var(--hop-neutral-icon);
1439
+ --hop-comp-mark-icon-color-press: var(--hop-neutral-icon-press);
1440
+ --hop-comp-mark-icon-color-hover: var(--hop-neutral-icon-hover);
1441
+ --hop-comp-mark-icon-color: var(--hop-neutral-icon);
1442
+ --hop-comp-mark-text-color-error-press: var(--hop-danger-text-weak-press);
1443
+ --hop-comp-mark-text-color-error-hover: var(--hop-danger-text-weak-hover);
1444
+ --hop-comp-mark-text-color-error: var(--hop-danger-text-weak);
1445
+ --hop-comp-mark-text-color-focus: var(--hop-neutral-text-hover);
1446
+ --hop-comp-mark-text-color-disabled: var(--hop-neutral-text-disabled);
1447
+ --hop-comp-mark-text-color-selected: var(--hop-neutral-text);
1448
+ --hop-comp-mark-text-color-press: var(--hop-neutral-text-press);
1449
+ --hop-comp-mark-text-color-hover: var(--hop-neutral-text-hover);
1450
+ --hop-comp-mark-text-color: var(--hop-neutral-text);
1451
+ --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1452
+ --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1453
+ --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1352
1454
  --hop-comp-mark-background-color-error: var(--hop-danger-surface-strong);
1353
1455
  --hop-comp-mark-background-color-disabled: var(--hop-neutral-surface-disabled);
1354
1456
  --hop-comp-mark-background-color-selected: var(--hop-primary-surface-selected);
@@ -1357,24 +1459,6 @@
1357
1459
  --hop-comp-mark-background-color: var(--hop-neutral-surface);
1358
1460
  --hop-comp-radio-border-radius: var(--hop-shape-circle);
1359
1461
  --hop-comp-checkbox-border-radius: var(--hop-shape-rounded-sm);
1360
- --hop-comp-label-icon-color-error-press: var(--hop-danger-icon-weak-press);
1361
- --hop-comp-label-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1362
- --hop-comp-label-icon-color-error: var(--hop-danger-icon-weak);
1363
- --hop-comp-label-icon-color-focus: var(--hop-neutral-icon-hover);
1364
- --hop-comp-label-icon-color-disabled: var(--hop-neutral-icon-disabled);
1365
- --hop-comp-label-icon-color-selected: var(--hop-neutral-icon);
1366
- --hop-comp-label-icon-color-press: var(--hop-neutral-icon-press);
1367
- --hop-comp-label-icon-color-hover: var(--hop-neutral-icon-hover);
1368
- --hop-comp-label-icon-color: var(--hop-neutral-icon);
1369
- --hop-comp-label-text-color-error-press: var(--hop-danger-text-weak-press);
1370
- --hop-comp-label-text-color-error-hover: var(--hop-danger-text-weak-hover);
1371
- --hop-comp-label-text-color-error: var(--hop-danger-text-weak);
1372
- --hop-comp-label-text-color-focus: var(--hop-neutral-text-hover);
1373
- --hop-comp-label-text-color-disabled: var(--hop-neutral-text-disabled);
1374
- --hop-comp-label-text-color-selected: var(--hop-neutral-text);
1375
- --hop-comp-label-text-color-press: var(--hop-neutral-text-press);
1376
- --hop-comp-label-text-color-hover: var(--hop-neutral-text-hover);
1377
- --hop-comp-label-text-color: var(--hop-neutral-text);
1378
1462
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1379
1463
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1380
1464
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
@@ -1393,6 +1477,11 @@
1393
1477
  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
1394
1478
  --hop-comp-field-background-color: var(--hop-neutral-surface);
1395
1479
  --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
1480
+ --hop-comp-select-checkmark-color-disabled: var(--hop-neutral-icon-disabled);
1481
+ --hop-comp-select-checkmark-color-pressed: var(--hop-primary-icon-press);
1482
+ --hop-comp-select-checkmark-color-focused: var(--hop-primary-icon-hover);
1483
+ --hop-comp-select-checkmark-color-hovered: var(--hop-primary-icon-hover);
1484
+ --hop-comp-select-checkmark-color: var(--hop-primary-icon);
1396
1485
  --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
1397
1486
  --hop-comp-select-border-color-active: var(--hop-primary-border);
1398
1487
  --hop-comp-select-background-color-active: var(--hop-neutral-surface);
@@ -1409,105 +1498,169 @@
1409
1498
  --hop-comp-control-background-color-press: var(--hop-neutral-surface-press);
1410
1499
  --hop-comp-control-background-color-hover: var(--hop-neutral-surface-hover);
1411
1500
  --hop-comp-control-background-color: var(--hop-neutral-surface-weakest);
1412
- --hop-comp-switch-icon-color-disabled: var(--hop-neutral-icon-disabled);
1413
- --hop-comp-switch-icon-color-selected: var(--hop-neutral-icon-selected);
1414
- --hop-comp-switch-icon-color-press: var(--hop-neutral-icon-strong);
1415
- --hop-comp-switch-icon-color-hover: var(--hop-neutral-icon-strong);
1416
- --hop-comp-switch-icon-color: var(--hop-neutral-icon-strong);
1501
+ --hop-comp-switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
1502
+ --hop-comp-switch-thumb-color-error: var(--hop-danger-icon-weak);
1503
+ --hop-comp-switch-thumb-color-selected: var(--hop-neutral-icon-always-light);
1504
+ --hop-comp-switch-thumb-color-press: var(--hop-neutral-icon-always-light);
1505
+ --hop-comp-switch-thumb-color-hover: var(--hop-neutral-icon-always-light);
1506
+ --hop-comp-switch-thumb-color: var(--hop-neutral-icon-always-light);
1507
+ --hop-comp-switch-text-color-error: var(--hop-danger-text-weak);
1508
+ --hop-comp-switch-text-color-disabled: var(--hop-neutral-text-disabled);
1509
+ --hop-comp-switch-text-color-press: var(--hop-neutral-text-press);
1510
+ --hop-comp-switch-text-color-hover: var(--hop-neutral-text-hover);
1511
+ --hop-comp-switch-text-color: var(--hop-neutral-text);
1417
1512
  --hop-comp-switch-background-color-selected: var(--hop-primary-surface-selected);
1418
- --hop-comp-switch-border-radius: var(--hop-shape-pill);
1513
+ --hop-comp-switch-thumb-border-radius: var(--hop-shape-rounded-sm);
1514
+ --hop-comp-switch-border-radius-sm: var(--hop-shape-rounded-sm);
1515
+ --hop-comp-switch-border-radius-md: var(--hop-shape-rounded-md);
1419
1516
  --hop-comp-segmented-control-item-border-radius: var(--hop-shape-rounded-sm);
1420
1517
  --hop-comp-segmented-control-icon-color-selected: var(--hop-neutral-icon);
1421
1518
  --hop-comp-segmented-control-icon-color: var(--hop-neutral-icon-weakest);
1422
1519
  --hop-comp-segmented-control-text-color-selected: var(--hop-neutral-text);
1423
1520
  --hop-comp-segmented-control-text-color: var(--hop-neutral-text-weakest);
1424
- --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
1521
+ --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-sm);
1425
1522
  --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
1426
1523
  --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
1427
1524
  --hop-comp-card-second-level-border-radius: var(--hop-shape-rounded-lg);
1428
1525
  --hop-comp-card-main-border-color: var(--hop-neutral-border-weakest);
1429
1526
  --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1430
1527
  --hop-comp-card-main-border-radius: var(--hop-shape-rounded-lg);
1431
- --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1432
- --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1433
- --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
1434
- --hop-comp-button-disabled-text-color: var(--hop-neutral-text-disabled);
1435
- --hop-comp-button-ghost-danger-border-color-selected: var(--hop-danger-surface-weak-press);
1436
- --hop-comp-button-ghost-danger-border-color-pressed: var(--hop-danger-surface-weak-press);
1437
- --hop-comp-button-ghost-danger-border-color-hover: var(--hop-neutral-surface-hover);
1438
- --hop-comp-button-ghost-danger-background-color-selected: var(--hop-danger-surface-weak-press);
1439
- --hop-comp-button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1440
- --hop-comp-button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1528
+ --hop-comp-calendar-cell-today-border-color: var(--hop-primary-border-selected);
1529
+ --hop-comp-calendar-cell-background-press: var(--hop-primary-surface-press);
1530
+ --hop-comp-calendar-cell-background-selected: var(--hop-primary-surface-selected);
1531
+ --hop-comp-button-ghost-danger-background-selected: var(--hop-danger-surface-selected);
1532
+ --hop-comp-button-ghost-danger-background-pressed: var(--hop-danger-surface-weak-press);
1533
+ --hop-comp-button-ghost-danger-background-hover: var(--hop-neutral-surface-hover);
1534
+ --hop-comp-button-ghost-danger-color-loading: var(--hop-neutral-icon);
1535
+ --hop-comp-button-ghost-danger-icon-color-selected: var(--hop-danger-icon-press);
1536
+ --hop-comp-button-ghost-danger-icon-color-press: var(--hop-danger-icon-press);
1537
+ --hop-comp-button-ghost-danger-icon-color-hover: var(--hop-danger-icon-hover);
1538
+ --hop-comp-button-ghost-danger-icon-color: var(--hop-danger-icon-weak);
1441
1539
  --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
1442
1540
  --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
1443
1541
  --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
1444
1542
  --hop-comp-button-ghost-danger-text-color: var(--hop-danger-text-weak);
1445
- --hop-comp-button-ghost-secondary-border-color-selected: var(--hop-neutral-surface-press);
1446
- --hop-comp-button-ghost-secondary-border-color-pressed: var(--hop-neutral-surface-press);
1447
- --hop-comp-button-ghost-secondary-border-color-hover: var(--hop-neutral-surface-hover);
1448
- --hop-comp-button-ghost-secondary-background-color-selected: var(--hop-neutral-surface-press);
1449
- --hop-comp-button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1450
- --hop-comp-button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1543
+ --hop-comp-button-ghost-secondary-background-selected: var(--hop-neutral-surface-weak-selected);
1544
+ --hop-comp-button-ghost-secondary-background-pressed: var(--hop-neutral-surface-press);
1545
+ --hop-comp-button-ghost-secondary-background-hover: var(--hop-neutral-surface-hover);
1546
+ --hop-comp-button-ghost-secondary-color-loading: var(--hop-neutral-icon);
1547
+ --hop-comp-button-ghost-secondary-icon-color-selected: var(--hop-neutral-icon-weak-press);
1548
+ --hop-comp-button-ghost-secondary-icon-color-press: var(--hop-neutral-icon-weak-press);
1549
+ --hop-comp-button-ghost-secondary-icon-color-hover: var(--hop-neutral-icon-weak-hover);
1550
+ --hop-comp-button-ghost-secondary-icon-color: var(--hop-neutral-icon-weak);
1451
1551
  --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
1452
1552
  --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
1453
1553
  --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
1454
1554
  --hop-comp-button-ghost-secondary-text-color: var(--hop-neutral-text-weak);
1455
- --hop-comp-button-ghost-primary-border-color-selected: var(--hop-primary-surface-weak-selected);
1456
- --hop-comp-button-ghost-primary-border-color-pressed: var(--hop-primary-surface-weak-press);
1457
- --hop-comp-button-ghost-primary-border-color-hover: var(--hop-neutral-surface-hover);
1458
- --hop-comp-button-ghost-primary-background-color-selected: var(--hop-primary-surface-weak-selected);
1459
- --hop-comp-button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1460
- --hop-comp-button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1555
+ --hop-comp-button-ghost-primary-background-selected: var(--hop-primary-surface-weak-selected);
1556
+ --hop-comp-button-ghost-primary-background-pressed: var(--hop-primary-surface-weak-press);
1557
+ --hop-comp-button-ghost-primary-background-hover: var(--hop-neutral-surface-hover);
1558
+ --hop-comp-button-ghost-primary-color-loading: var(--hop-neutral-icon);
1559
+ --hop-comp-button-ghost-primary-icon-color-selected: var(--hop-primary-icon-press);
1560
+ --hop-comp-button-ghost-primary-icon-color-press: var(--hop-primary-icon-press);
1561
+ --hop-comp-button-ghost-primary-icon-color-hover: var(--hop-primary-icon-hover);
1562
+ --hop-comp-button-ghost-primary-icon-color: var(--hop-primary-icon);
1461
1563
  --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
1462
1564
  --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
1463
1565
  --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
1464
1566
  --hop-comp-button-ghost-primary-text-color: var(--hop-primary-text);
1567
+ --hop-comp-button-danger-border-color-disabled: var(--hop-neutral-surface-disabled);
1465
1568
  --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
1466
- --hop-comp-button-danger-border-color-pressed: var(--hop-danger-surface-press);
1467
- --hop-comp-button-danger-border-color-hover: var(--hop-danger-surface-strong-hover);
1468
- --hop-comp-button-danger-border-color: var(--hop-danger-surface-strong);
1469
- --hop-comp-button-danger-background-color-selected: var(--hop-danger-surface-selected);
1470
- --hop-comp-button-danger-background-color-pressed: var(--hop-danger-surface-press);
1471
- --hop-comp-button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1472
- --hop-comp-button-danger-background-color: var(--hop-danger-surface-strong);
1569
+ --hop-comp-button-danger-border-color: var(--hop-neutral-border-weakest);
1570
+ --hop-comp-button-danger-background-disabled: var(--hop-neutral-surface-disabled);
1571
+ --hop-comp-button-danger-background-selected: var(--hop-danger-surface-selected);
1572
+ --hop-comp-button-danger-background-pressed: var(--hop-danger-surface-press);
1573
+ --hop-comp-button-danger-background-hover: var(--hop-danger-surface-strong-hover);
1574
+ --hop-comp-button-danger-border-color-loading: var(--hop-neutral-border-weakest);
1575
+ --hop-comp-button-danger-color-loading: var(--hop-primary-icon-strong);
1576
+ --hop-comp-button-danger-background-loading: var(--hop-danger-surface-strong);
1577
+ --hop-comp-button-danger-background: var(--hop-danger-surface-strong);
1578
+ --hop-comp-button-danger-icon-color-selected: var(--hop-danger-icon-selected);
1579
+ --hop-comp-button-danger-icon-color-press: var(--hop-danger-icon-strong-hover);
1580
+ --hop-comp-button-danger-icon-color-hover: var(--hop-danger-icon-strong-hover);
1581
+ --hop-comp-button-danger-icon-color: var(--hop-danger-icon-strong);
1473
1582
  --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
1474
1583
  --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
1475
1584
  --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
1476
1585
  --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
1477
1586
  --hop-comp-button-upsell-border-color-selected: var(--hop-upsell-border-selected);
1478
- --hop-comp-button-upsell-border-color-pressed: var(--hop-neutral-border-weakest);
1479
- --hop-comp-button-upsell-border-color-hover: var(--hop-neutral-border-weakest);
1480
- --hop-comp-button-upsell-border-color: var(--hop-neutral-border-weakest);
1481
- --hop-comp-button-upsell-background-color-selected: var(--hop-upsell-surface-selected);
1482
- --hop-comp-button-upsell-background-color-pressed: var(--hop-upsell-surface-weak-press);
1483
- --hop-comp-button-upsell-background-color-hover: var(--hop-upsell-surface-weak-hover);
1484
- --hop-comp-button-upsell-background-color: var(--hop-upsell-surface-weak);
1587
+ --hop-comp-button-upsell-border-color: var(--hop-upsell-border);
1588
+ --hop-comp-button-upsell-background-disabled: var(--hop-neutral-surface-disabled);
1589
+ --hop-comp-button-upsell-background-selected: linear-gradient(var(--hop-upsell-surface-weak-press), var(--hop-upsell-surface-weak-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1590
+ --hop-comp-button-upsell-background-pressed: linear-gradient(var(--hop-upsell-surface-weak-press), var(--hop-upsell-surface-weak-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1591
+ --hop-comp-button-upsell-background-hover: linear-gradient(var(--hop-upsell-surface-weak-hover), var(--hop-upsell-surface-weak-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1592
+ --hop-comp-button-upsell-border-color-loading: var(--hop-upsell-border);
1593
+ --hop-comp-button-upsell-color-loading: var(--hop-neutral-icon-always-dark);
1594
+ --hop-comp-button-upsell-icon-color-selected: var(--hop-upsell-icon-selected);
1595
+ --hop-comp-button-upsell-icon-color-press: var(--hop-upsell-icon-weak-press);
1596
+ --hop-comp-button-upsell-icon-color-hover: var(--hop-upsell-icon-hover);
1597
+ --hop-comp-button-upsell-icon-color: var(--hop-neutral-icon-always-dark);
1485
1598
  --hop-comp-button-upsell-text-color-selected: var(--hop-upsell-text-selected);
1486
- --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-press);
1599
+ --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-weak-press);
1487
1600
  --hop-comp-button-upsell-text-color-hover: var(--hop-upsell-text-hover);
1488
- --hop-comp-button-upsell-text-color: var(--hop-upsell-text);
1489
- --hop-comp-button-secondary-border-color-pressed: var(--hop-neutral-border-weakest);
1490
- --hop-comp-button-secondary-border-color-hover: var(--hop-neutral-border-weakest);
1601
+ --hop-comp-button-upsell-text-color: var(--hop-neutral-text-always-dark);
1602
+ --hop-comp-button-secondary-border-color-selected: var(--hop-neutral-border-weakest);
1491
1603
  --hop-comp-button-secondary-border-color: var(--hop-neutral-border-weakest);
1492
- --hop-comp-button-secondary-background-color-selected: var(--hop-primary-surface-weak-selected);
1493
- --hop-comp-button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1494
- --hop-comp-button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1495
- --hop-comp-button-secondary-background-color: var(--hop-neutral-surface);
1496
- --hop-comp-button-secondary-text-color-selected: var(--hop-neutral-text);
1497
- --hop-comp-button-secondary-text-color-pressed: var(--hop-neutral-text-press);
1498
- --hop-comp-button-secondary-text-color-hover: var(--hop-neutral-text-hover);
1499
- --hop-comp-button-secondary-text-color: var(--hop-neutral-text);
1604
+ --hop-comp-button-secondary-background-disabled: var(--hop-neutral-surface-disabled);
1605
+ --hop-comp-button-secondary-background-selected: linear-gradient(var(--hop-neutral-surface-weak-selected), var(--hop-neutral-surface-weak-selected) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1606
+ --hop-comp-button-secondary-background-pressed: linear-gradient(var(--hop-neutral-surface-weak-hover), var(--hop-neutral-surface-weak-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1607
+ --hop-comp-button-secondary-background-hover: linear-gradient(var(--hop-neutral-surface-weak-hover), var(--hop-neutral-surface-weak-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1608
+ --hop-comp-button-secondary-border-color-loading: var(--hop-neutral-border-weakest);
1609
+ --hop-comp-button-secondary-color-loading: var(--hop-neutral-icon);
1610
+ --hop-comp-button-secondary-background-loading: linear-gradient(var(--hop-neutral-surface), var(--hop-neutral-surface-weak) 100%);
1611
+ --hop-comp-button-secondary-background: linear-gradient(var(--hop-neutral-surface), var(--hop-neutral-surface-weak) 100%);
1612
+ --hop-comp-button-secondary-icon-color-selected: var(--hop-primary-icon-selected);
1613
+ --hop-comp-button-secondary-icon-color-press: var(--hop-primary-icon-press);
1614
+ --hop-comp-button-secondary-icon-color-hover: var(--hop-primary-icon-hover);
1615
+ --hop-comp-button-secondary-icon-color: var(--hop-primary-icon);
1616
+ --hop-comp-button-secondary-text-color-selected: var(--hop-primary-text-selected);
1617
+ --hop-comp-button-secondary-text-color-pressed: var(--hop-primary-text-press);
1618
+ --hop-comp-button-secondary-text-color-hover: var(--hop-primary-text-hover);
1619
+ --hop-comp-button-secondary-text-color: var(--hop-primary-text);
1500
1620
  --hop-comp-button-primary-border-color-selected: var(--hop-neutral-border-weakest);
1501
- --hop-comp-button-primary-border-color-pressed: var(--hop-neutral-border-weakest);
1502
- --hop-comp-button-primary-border-color-hover: var(--hop-neutral-border-weakest);
1503
- --hop-comp-button-primary-border-color: var(--hop-neutral-border-weakest);
1504
- --hop-comp-button-primary-background-color-selected: var(--hop-primary-surface-selected);
1505
- --hop-comp-button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1506
- --hop-comp-button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1507
- --hop-comp-button-primary-background-color: var(--hop-primary-surface-strong);
1508
- --hop-comp-button-primary-text-color-selected: var(--hop-neutral-text-strong);
1509
- --hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
1510
- --hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
1511
- --hop-comp-button-primary-text-color: var(--hop-primary-text-strong);
1621
+ --hop-comp-button-primary-border-color: var(--hop-primary-border);
1622
+ --hop-comp-button-primary-background-disabled: var(--hop-neutral-surface-disabled);
1623
+ --hop-comp-button-primary-background-selected: linear-gradient(var(--hop-primary-surface-strong-selected), var(--hop-primary-surface-strong-selected) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1624
+ --hop-comp-button-primary-background-pressed: linear-gradient(var(--hop-primary-surface-strong-press), var(--hop-primary-surface-strong-press) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1625
+ --hop-comp-button-primary-background-hover: linear-gradient(var(--hop-primary-surface-strong-hover), var(--hop-primary-surface-strong-hover) 100%); /* Single-stop gradient to allow smooth CSS transition from the multi-stop gradient default background. */
1626
+ --hop-comp-button-primary-border-color-loading: var(--hop-primary-border);
1627
+ --hop-comp-button-primary-color-loading: var(--hop-primary-icon-strong);
1628
+ --hop-comp-button-primary-icon-color-selected: var(--hop-neutral-icon-always-light);
1629
+ --hop-comp-button-primary-icon-color-press: var(--hop-neutral-icon-always-light);
1630
+ --hop-comp-button-primary-icon-color-hover: var(--hop-neutral-icon-always-light);
1631
+ --hop-comp-button-primary-icon-color: var(--hop-neutral-icon-always-light);
1632
+ --hop-comp-button-primary-text-color-selected: var(--hop-neutral-text-always-light);
1633
+ --hop-comp-button-primary-text-color-pressed: var(--hop-neutral-text-always-light);
1634
+ --hop-comp-button-primary-text-color-hover: var(--hop-neutral-text-always-light);
1635
+ --hop-comp-button-primary-text-color: var(--hop-neutral-text-always-light);
1636
+ --hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
1637
+ --hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
1638
+ --hop-comp-button-border-color-focus: var(--hop-primary-border-focus);
1512
1639
  --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
1640
+ --hop-comp-badge-disabled-text-color: var(--hop-neutral-text-disabled);
1641
+ --hop-comp-badge-disabled-background: var(--hop-neutral-surface-disabled);
1642
+ --hop-comp-badge-subdued-text-color-selected: var(--hop-neutral-text-always-light);
1643
+ --hop-comp-badge-subdued-text-color-press: var(--hop-neutral-text-press);
1644
+ --hop-comp-badge-subdued-text-color-hover: var(--hop-neutral-text-hover);
1645
+ --hop-comp-badge-subdued-text-color: var(--hop-neutral-text);
1646
+ --hop-comp-badge-subdued-background-selected: var(--hop-primary-surface-strong);
1647
+ --hop-comp-badge-subdued-background-press: var(--hop-primary-surface-weak-press);
1648
+ --hop-comp-badge-subdued-background-hover: var(--hop-primary-surface-weak-hover);
1649
+ --hop-comp-badge-subdued-background: var(--hop-primary-surface-weak);
1650
+ --hop-comp-badge-secondary-text-color-selected: var(--hop-primary-text);
1651
+ --hop-comp-badge-secondary-text-color-press: var(--hop-primary-text-strong);
1652
+ --hop-comp-badge-secondary-text-color-hover: var(--hop-primary-text-strong-hover);
1653
+ --hop-comp-badge-secondary-text-color: var(--hop-primary-text-strong);
1654
+ --hop-comp-badge-secondary-background-selected: var(--hop-primary-surface-weak);
1655
+ --hop-comp-badge-secondary-background-press: var(--hop-primary-surface-strong-press);
1656
+ --hop-comp-badge-secondary-background-hover: var(--hop-primary-surface-strong-hover);
1657
+ --hop-comp-badge-secondary-background: var(--hop-primary-surface-strong);
1658
+ --hop-comp-badge-primary-text-color-selected: var(--hop-secondary-text);
1659
+ --hop-comp-badge-primary-text-color-press: var(--hop-neutral-text-strong);
1660
+ --hop-comp-badge-primary-text-color-hover: var(--hop-neutral-text-strong);
1661
+ --hop-comp-badge-primary-text-color: var(--hop-neutral-text-always-light);
1662
+ --hop-comp-badge-primary-background-selected: var(--hop-secondary-surface-strong-selected);
1663
+ --hop-comp-badge-primary-background-press: var(--hop-secondary-surface-strong-press);
1664
+ --hop-comp-badge-primary-background-hover: var(--hop-secondary-surface-strong-hover);
1665
+ --hop-comp-badge-primary-background: var(--hop-secondary-surface-strong);
1513
1666
  }
package/dist/workleap/dark/tokens.css CHANGED
@@ -78,8 +78,10 @@
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
82
  --hop-neutral-surface-weakest: var(--hop-rock-900);
82
83
  --hop-neutral-surface-weak: var(--hop-rock-800);
84
+ --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
83
85
  --hop-neutral-surface-weak-selected: var(--hop-rock-800);
84
86
  --hop-neutral-surface-weak-hover: var(--hop-rock-700);
85
87
  --hop-neutral-surface-weak-press: var(--hop-rock-600);
package/dist/workleap/tokens.css CHANGED
@@ -1,24 +1,53 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 15 Apr 2026 18:41:53 GMT
3
+ * Generated on Mon, 20 Apr 2026 19:17:39 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --hop-comp-switch-thumb-filter-selected: none;
8
- --hop-comp-switch-thumb-filter: none;
7
+ --hop-comp-tooltip-backdrop-filter: none;
8
+ --hop-comp-tile-icon-color: transparent;
9
+ --hop-comp-tile-outline-color-disabled: transparent;
10
+ --hop-comp-tile-outline-color: transparent;
11
+ --hop-comp-tile-border-color-selected: transparent;
12
+ --hop-comp-tile-border-color-focus: transparent;
13
+ --hop-comp-tile-box-shadow: none;
14
+ --hop-comp-popover-backdrop-filter: none;
15
+ --hop-comp-modal-backdrop-filter: none;
16
+ --hop-comp-modal-border: none;
17
+ --hop-comp-switch-thumb-box-shadow-selected: none;
18
+ --hop-comp-switch-thumb-box-shadow: none;
9
19
  --hop-comp-switch-track-box-shadow: none;
10
20
  --hop-comp-switch-track-filter: none;
11
21
  --hop-comp-segmented-control-item-box-shadow-disabled: none;
12
22
  --hop-comp-segmented-control-item-box-shadow-selected: none;
13
23
  --hop-comp-segmented-control-box-shadow: none;
14
- --hop-comp-button-ghost-disabled-border-color: transparent;
15
- --hop-comp-button-ghost-disabled-background-color: transparent;
24
+ --hop-comp-button-ghost-danger-border-color-disabled: transparent;
25
+ --hop-comp-button-ghost-danger-border-color-selected: transparent;
16
26
  --hop-comp-button-ghost-danger-border-color: transparent;
17
- --hop-comp-button-ghost-danger-background-color: transparent;
27
+ --hop-comp-button-ghost-danger-background-disabled: transparent;
28
+ --hop-comp-button-ghost-danger-border-color-loading: transparent;
29
+ --hop-comp-button-ghost-danger-background-loading: transparent;
30
+ --hop-comp-button-ghost-danger-background: transparent;
31
+ --hop-comp-button-ghost-secondary-border-color-disabled: transparent;
32
+ --hop-comp-button-ghost-secondary-border-color-selected: transparent;
18
33
  --hop-comp-button-ghost-secondary-border-color: transparent;
19
- --hop-comp-button-ghost-secondary-background-color: transparent;
34
+ --hop-comp-button-ghost-secondary-background-disabled: transparent;
35
+ --hop-comp-button-ghost-secondary-border-color-loading: transparent;
36
+ --hop-comp-button-ghost-secondary-background-loading: transparent;
37
+ --hop-comp-button-ghost-secondary-background: transparent;
38
+ --hop-comp-button-ghost-primary-border-color-disabled: transparent;
39
+ --hop-comp-button-ghost-primary-border-color-selected: transparent;
20
40
  --hop-comp-button-ghost-primary-border-color: transparent;
21
- --hop-comp-button-ghost-primary-background-color: transparent;
41
+ --hop-comp-button-ghost-primary-background-disabled: transparent;
42
+ --hop-comp-button-ghost-primary-border-color-loading: transparent;
43
+ --hop-comp-button-ghost-primary-background-loading: transparent;
44
+ --hop-comp-button-ghost-primary-background: transparent;
45
+ --hop-comp-button-danger-border-color: transparent;
46
+ --hop-comp-button-danger-border-color-loading: transparent;
47
+ --hop-comp-button-upsell-border-color: transparent;
48
+ --hop-comp-button-upsell-border-color-loading: transparent;
49
+ --hop-comp-button-primary-border-color: transparent;
50
+ --hop-comp-button-primary-border-color-loading: transparent;
22
51
  --hop-overline-bottom-offset: -0.25rem;
23
52
  --hop-overline-top-offset: -0.25rem;
24
53
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -297,6 +326,8 @@
297
326
  --hop-dataviz-monochromatic-primary-75: #d6e0ff;
298
327
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
299
328
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
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);
300
331
  --hop-space-1280: 8rem;
301
332
  --hop-space-960: 6rem;
302
333
  --hop-space-800: 5rem;
@@ -352,8 +383,6 @@
352
383
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
353
384
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
354
385
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
355
- --hop-shadow-tactility-control: 1.5px 1.5px 1.5px 0 rgba(0, 0, 0, 0.03), -5px -5px 20px 0 rgba(255, 255, 255, 0.2), 0.5px 1.5px 5px 0 rgba(0, 0, 0, 0.1) inset, -2.5px 2.5px 5px 0 rgba(255, 255, 255, 0.5) inset;
356
- --hop-shadow-tactility-button: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
357
386
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
358
387
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
359
388
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
@@ -577,16 +606,26 @@
577
606
  --hop-coastal-75: #bae6ff;
578
607
  --hop-coastal-50: #d9efff;
579
608
  --hop-coastal-25: #f0f8ff;
609
+ --hop-comp-tabs-tab-list-border-block-end: var(--hop-space-10) solid var(--hop-neutral-border-weak);
610
+ --hop-comp-tabs-tab-list-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
611
+ --hop-comp-popover-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
580
612
  --hop-comp-radio-box-shadow: var(--hop-shadow-none);
581
613
  --hop-comp-checkbox-box-shadow: var(--hop-shadow-none);
582
- --hop-comp-card-second-level-box-shadow: var(--hop-shadow-none);
583
- --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
614
+ --hop-comp-card-second-level-elevated-box-shadow: var(--hop-shadow-none);
615
+ --hop-comp-card-main-elevated-box-shadow: var(--hop-shadow-none);
616
+ --hop-comp-button-ghost-danger-box-shadow-loading: var(--hop-shadow-none);
584
617
  --hop-comp-button-ghost-danger-box-shadow: var(--hop-shadow-none);
618
+ --hop-comp-button-ghost-secondary-box-shadow-loading: var(--hop-shadow-none);
585
619
  --hop-comp-button-ghost-secondary-box-shadow: var(--hop-shadow-none);
620
+ --hop-comp-button-ghost-primary-box-shadow-loading: var(--hop-shadow-none);
586
621
  --hop-comp-button-ghost-primary-box-shadow: var(--hop-shadow-none);
622
+ --hop-comp-button-danger-box-shadow-loading: var(--hop-shadow-none);
587
623
  --hop-comp-button-danger-box-shadow: var(--hop-shadow-none);
624
+ --hop-comp-button-upsell-box-shadow-loading: var(--hop-shadow-none);
588
625
  --hop-comp-button-upsell-box-shadow: var(--hop-shadow-none);
626
+ --hop-comp-button-secondary-box-shadow-loading: var(--hop-shadow-none);
589
627
  --hop-comp-button-secondary-box-shadow: var(--hop-shadow-none);
628
+ --hop-comp-button-primary-box-shadow-loading: var(--hop-shadow-none);
590
629
  --hop-comp-button-primary-box-shadow: var(--hop-shadow-none);
591
630
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
592
631
  --hop-shape-rounded-md: var(--hop-border-radius-2);
@@ -1333,13 +1372,51 @@
1333
1372
  --hop-space-stack-md: var(--hop-space-160);
1334
1373
  --hop-space-stack-sm: var(--hop-space-80);
1335
1374
  --hop-space-stack-xs: var(--hop-space-40);
1336
- --hop-comp-mark-indicator-color-error: var(--hop-danger-icon-strong);
1337
- --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1338
- --hop-comp-mark-indicator-color: var(--hop-neutral-icon-selected);
1375
+ --hop-comp-tooltip-color: var(--hop-neutral-text-strong);
1376
+ --hop-comp-tooltip-box-shadow: var(--hop-elevation-raised);
1377
+ --hop-comp-tooltip-border-radius: var(--hop-shape-rounded-md);
1378
+ --hop-comp-tooltip-background: var(--hop-neutral-surface-strong);
1379
+ --hop-comp-tile-icon-color-disabled: var(--hop-neutral-icon-disabled);
1380
+ --hop-comp-tile-icon-color-selected: var(--hop-neutral-icon);
1381
+ --hop-comp-tile-text-color-disabled: var(--hop-neutral-text-disabled);
1382
+ --hop-comp-tile-text-color-selected: var(--hop-neutral-text);
1383
+ --hop-comp-tile-text-color-focus: var(--hop-neutral-text-hover);
1384
+ --hop-comp-tile-text-color-press: var(--hop-neutral-text-press);
1385
+ --hop-comp-tile-text-color-hover: var(--hop-neutral-text-hover);
1386
+ --hop-comp-tile-text-color: var(--hop-neutral-text);
1387
+ --hop-comp-tile-outline-color-selected: var(--hop-neutral-border-strong);
1388
+ --hop-comp-tile-outline-color-focus: var(--hop-primary-border-focus);
1389
+ --hop-comp-tile-border-radius: var(--hop-shape-rounded-md);
1390
+ --hop-comp-tile-border-color-disabled: var(--hop-neutral-border-disabled);
1391
+ --hop-comp-tile-border-color-press: var(--hop-neutral-border-strong);
1392
+ --hop-comp-tile-border-color-hover: var(--hop-neutral-border-strong-hover);
1393
+ --hop-comp-tile-border-color: var(--hop-neutral-border-strong);
1394
+ --hop-comp-tile-background-color-disabled: var(--hop-neutral-surface-disabled);
1395
+ --hop-comp-tile-background-color-selected: var(--hop-neutral-surface-weak-selected);
1396
+ --hop-comp-tile-background-color-focus: var(--hop-neutral-surface-hover);
1397
+ --hop-comp-tile-background-color-press: var(--hop-neutral-surface-press);
1398
+ --hop-comp-tile-background-color-hover: var(--hop-neutral-surface-hover);
1399
+ --hop-comp-tile-background-color: var(--hop-neutral-surface);
1400
+ --hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
1401
+ --hop-comp-tabs-tab-list-border-radius: var(--hop-shape-rounded-md);
1402
+ --hop-comp-tabs-tab-list-background-color: var(--hop-neutral-surface-weakest);
1403
+ --hop-comp-tabs-tab-border-radius: var(--hop-shape-rounded-md);
1404
+ --hop-comp-tabs-tab-border-color-disabled: var(--hop-neutral-border-disabled);
1405
+ --hop-comp-tabs-tab-border-color-focus: var(--hop-primary-border-focus);
1406
+ --hop-comp-tabs-tab-border-color-selected: var(--hop-neutral-border-selected);
1407
+ --hop-comp-tabs-tab-text-color-disabled: var(--hop-neutral-text-disabled);
1408
+ --hop-comp-tabs-tab-text-color-focus: var(--hop-neutral-text-hover);
1409
+ --hop-comp-tabs-tab-text-color-selected: var(--hop-neutral-text);
1410
+ --hop-comp-tabs-tab-text-color-press: var(--hop-neutral-text-press);
1411
+ --hop-comp-tabs-tab-text-color-hover: var(--hop-neutral-text-hover);
1412
+ --hop-comp-tabs-tab-text-color: var(--hop-neutral-text-weak);
1413
+ --hop-comp-popover-box-shadow: var(--hop-elevation-lifted);
1414
+ --hop-comp-popover-border-radius: var(--hop-shape-rounded-md);
1415
+ --hop-comp-popover-background: var(--hop-neutral-surface);
1416
+ --hop-comp-modal-box-shadow: var(--hop-elevation-none);
1417
+ --hop-comp-modal-border-radius: var(--hop-shape-rounded-md);
1418
+ --hop-comp-modal-background: var(--hop-neutral-surface);
1339
1419
  --hop-comp-mark-border-color-error-focus: var(--hop-danger-border-press);
1340
- --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1341
- --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1342
- --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1343
1420
  --hop-comp-mark-border-color-error-press: var(--hop-danger-border-press);
1344
1421
  --hop-comp-mark-border-color-error: var(--hop-danger-border-strong);
1345
1422
  --hop-comp-mark-border-color-disabled: var(--hop-neutral-border-disabled);
@@ -1348,6 +1425,30 @@
1348
1425
  --hop-comp-mark-border-color-press: var(--hop-neutral-border-press);
1349
1426
  --hop-comp-mark-border-color-hover: var(--hop-neutral-border-hover);
1350
1427
  --hop-comp-mark-border-color: var(--hop-neutral-border);
1428
+ --hop-comp-mark-indicator-color-error: var(--hop-danger-icon-strong);
1429
+ --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1430
+ --hop-comp-mark-indicator-color: var(--hop-neutral-icon-selected);
1431
+ --hop-comp-mark-icon-color-error-press: var(--hop-danger-icon-weak-press);
1432
+ --hop-comp-mark-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1433
+ --hop-comp-mark-icon-color-error: var(--hop-danger-icon-weak);
1434
+ --hop-comp-mark-icon-color-focus: var(--hop-neutral-icon-hover);
1435
+ --hop-comp-mark-icon-color-disabled: var(--hop-neutral-icon-disabled);
1436
+ --hop-comp-mark-icon-color-selected: var(--hop-neutral-icon);
1437
+ --hop-comp-mark-icon-color-press: var(--hop-neutral-icon-press);
1438
+ --hop-comp-mark-icon-color-hover: var(--hop-neutral-icon-hover);
1439
+ --hop-comp-mark-icon-color: var(--hop-neutral-icon);
1440
+ --hop-comp-mark-text-color-error-press: var(--hop-danger-text-weak-press);
1441
+ --hop-comp-mark-text-color-error-hover: var(--hop-danger-text-weak-hover);
1442
+ --hop-comp-mark-text-color-error: var(--hop-danger-text-weak);
1443
+ --hop-comp-mark-text-color-focus: var(--hop-neutral-text-hover);
1444
+ --hop-comp-mark-text-color-disabled: var(--hop-neutral-text-disabled);
1445
+ --hop-comp-mark-text-color-selected: var(--hop-neutral-text);
1446
+ --hop-comp-mark-text-color-press: var(--hop-neutral-text-press);
1447
+ --hop-comp-mark-text-color-hover: var(--hop-neutral-text-hover);
1448
+ --hop-comp-mark-text-color: var(--hop-neutral-text);
1449
+ --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1450
+ --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1451
+ --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1351
1452
  --hop-comp-mark-background-color-error: var(--hop-danger-surface-strong);
1352
1453
  --hop-comp-mark-background-color-disabled: var(--hop-neutral-surface-disabled);
1353
1454
  --hop-comp-mark-background-color-selected: var(--hop-neutral-surface-selected);
@@ -1356,24 +1457,6 @@
1356
1457
  --hop-comp-mark-background-color: var(--hop-neutral-surface);
1357
1458
  --hop-comp-radio-border-radius: var(--hop-shape-circle);
1358
1459
  --hop-comp-checkbox-border-radius: var(--hop-shape-rounded-sm);
1359
- --hop-comp-label-icon-color-error-press: var(--hop-danger-icon-weak-press);
1360
- --hop-comp-label-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1361
- --hop-comp-label-icon-color-error: var(--hop-danger-icon-weak);
1362
- --hop-comp-label-icon-color-focus: var(--hop-neutral-icon-hover);
1363
- --hop-comp-label-icon-color-disabled: var(--hop-neutral-icon-disabled);
1364
- --hop-comp-label-icon-color-selected: var(--hop-neutral-icon);
1365
- --hop-comp-label-icon-color-press: var(--hop-neutral-icon-press);
1366
- --hop-comp-label-icon-color-hover: var(--hop-neutral-icon-hover);
1367
- --hop-comp-label-icon-color: var(--hop-neutral-icon);
1368
- --hop-comp-label-text-color-error-press: var(--hop-danger-text-weak-press);
1369
- --hop-comp-label-text-color-error-hover: var(--hop-danger-text-weak-hover);
1370
- --hop-comp-label-text-color-error: var(--hop-danger-text-weak);
1371
- --hop-comp-label-text-color-focus: var(--hop-neutral-text-hover);
1372
- --hop-comp-label-text-color-disabled: var(--hop-neutral-text-disabled);
1373
- --hop-comp-label-text-color-selected: var(--hop-neutral-text);
1374
- --hop-comp-label-text-color-press: var(--hop-neutral-text-press);
1375
- --hop-comp-label-text-color-hover: var(--hop-neutral-text-hover);
1376
- --hop-comp-label-text-color: var(--hop-neutral-text);
1377
1460
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1378
1461
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1379
1462
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
@@ -1392,6 +1475,11 @@
1392
1475
  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
1393
1476
  --hop-comp-field-background-color: var(--hop-neutral-surface);
1394
1477
  --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
1478
+ --hop-comp-select-checkmark-color-disabled: var(--hop-neutral-icon-disabled);
1479
+ --hop-comp-select-checkmark-color-pressed: var(--hop-neutral-icon-press);
1480
+ --hop-comp-select-checkmark-color-focused: var(--hop-neutral-icon-hover);
1481
+ --hop-comp-select-checkmark-color-hovered: var(--hop-neutral-icon-hover);
1482
+ --hop-comp-select-checkmark-color: var(--hop-neutral-icon);
1395
1483
  --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
1396
1484
  --hop-comp-select-border-color-active: var(--hop-neutral-border-selected);
1397
1485
  --hop-comp-select-background-color-active: var(--hop-neutral-surface);
@@ -1408,13 +1496,21 @@
1408
1496
  --hop-comp-control-background-color-press: var(--hop-neutral-surface-press);
1409
1497
  --hop-comp-control-background-color-hover: var(--hop-neutral-surface-hover);
1410
1498
  --hop-comp-control-background-color: var(--hop-neutral-surface);
1411
- --hop-comp-switch-icon-color-disabled: var(--hop-neutral-icon-disabled);
1412
- --hop-comp-switch-icon-color-selected: var(--hop-neutral-icon-selected);
1413
- --hop-comp-switch-icon-color-press: var(--hop-neutral-icon-press);
1414
- --hop-comp-switch-icon-color-hover: var(--hop-neutral-icon-hover);
1415
- --hop-comp-switch-icon-color: var(--hop-neutral-icon);
1499
+ --hop-comp-switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
1500
+ --hop-comp-switch-thumb-color-error: var(--hop-danger-icon-weak);
1501
+ --hop-comp-switch-thumb-color-selected: var(--hop-neutral-icon-selected);
1502
+ --hop-comp-switch-thumb-color-press: var(--hop-neutral-icon-press);
1503
+ --hop-comp-switch-thumb-color-hover: var(--hop-neutral-icon-hover);
1504
+ --hop-comp-switch-thumb-color: var(--hop-neutral-icon);
1505
+ --hop-comp-switch-text-color-error: var(--hop-danger-text-weak);
1506
+ --hop-comp-switch-text-color-disabled: var(--hop-neutral-text-disabled);
1507
+ --hop-comp-switch-text-color-press: var(--hop-neutral-text-press);
1508
+ --hop-comp-switch-text-color-hover: var(--hop-neutral-text-hover);
1509
+ --hop-comp-switch-text-color: var(--hop-neutral-text);
1416
1510
  --hop-comp-switch-background-color-selected: var(--hop-neutral-surface-selected);
1417
- --hop-comp-switch-border-radius: var(--hop-shape-pill);
1511
+ --hop-comp-switch-thumb-border-radius: var(--hop-shape-circle);
1512
+ --hop-comp-switch-border-radius-sm: var(--hop-shape-pill);
1513
+ --hop-comp-switch-border-radius-md: var(--hop-shape-pill);
1418
1514
  --hop-comp-segmented-control-item-border-radius: var(--hop-shape-rounded-sm);
1419
1515
  --hop-comp-segmented-control-icon-color-selected: var(--hop-neutral-icon-selected);
1420
1516
  --hop-comp-segmented-control-icon-color: var(--hop-neutral-icon);
@@ -1427,87 +1523,144 @@
1427
1523
  --hop-comp-card-main-border-color: var(--hop-neutral-border-weak);
1428
1524
  --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1429
1525
  --hop-comp-card-main-border-radius: var(--hop-shape-rounded-md);
1430
- --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1431
- --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1432
- --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
1433
- --hop-comp-button-disabled-text-color: var(--hop-neutral-text-disabled);
1434
- --hop-comp-button-ghost-danger-border-color-selected: var(--hop-danger-surface-weak-press);
1435
- --hop-comp-button-ghost-danger-border-color-pressed: var(--hop-danger-surface-weak-press);
1436
- --hop-comp-button-ghost-danger-border-color-hover: var(--hop-neutral-surface-hover);
1437
- --hop-comp-button-ghost-danger-background-color-selected: var(--hop-danger-surface-weak-press);
1438
- --hop-comp-button-ghost-danger-background-color-pressed: var(--hop-danger-surface-weak-press);
1439
- --hop-comp-button-ghost-danger-background-color-hover: var(--hop-neutral-surface-hover);
1526
+ --hop-comp-calendar-cell-today-border-color: var(--hop-neutral-border-strong);
1527
+ --hop-comp-calendar-cell-background-press: var(--hop-neutral-surface-press);
1528
+ --hop-comp-calendar-cell-background-selected: var(--hop-neutral-surface-selected);
1529
+ --hop-comp-calendar-grid-border-color: var(--hop-neutral-border);
1530
+ --hop-comp-button-ghost-danger-background-selected: var(--hop-danger-surface-weak-press);
1531
+ --hop-comp-button-ghost-danger-background-pressed: var(--hop-danger-surface-weak-press);
1532
+ --hop-comp-button-ghost-danger-background-hover: var(--hop-neutral-surface-hover);
1533
+ --hop-comp-button-ghost-danger-color-loading: var(--hop-neutral-icon);
1534
+ --hop-comp-button-ghost-danger-icon-color-selected: var(--hop-danger-icon-press);
1535
+ --hop-comp-button-ghost-danger-icon-color-press: var(--hop-danger-icon-press);
1536
+ --hop-comp-button-ghost-danger-icon-color-hover: var(--hop-danger-icon-hover);
1537
+ --hop-comp-button-ghost-danger-icon-color: var(--hop-danger-icon-weak);
1440
1538
  --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
1441
1539
  --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
1442
1540
  --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
1443
1541
  --hop-comp-button-ghost-danger-text-color: var(--hop-danger-text-weak);
1444
- --hop-comp-button-ghost-secondary-border-color-selected: var(--hop-neutral-surface-press);
1445
- --hop-comp-button-ghost-secondary-border-color-pressed: var(--hop-neutral-surface-press);
1446
- --hop-comp-button-ghost-secondary-border-color-hover: var(--hop-neutral-surface-hover);
1447
- --hop-comp-button-ghost-secondary-background-color-selected: var(--hop-neutral-surface-press);
1448
- --hop-comp-button-ghost-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1449
- --hop-comp-button-ghost-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1542
+ --hop-comp-button-ghost-secondary-background-selected: var(--hop-neutral-surface-weak-selected);
1543
+ --hop-comp-button-ghost-secondary-background-pressed: var(--hop-neutral-surface-press);
1544
+ --hop-comp-button-ghost-secondary-background-hover: var(--hop-neutral-surface-hover);
1545
+ --hop-comp-button-ghost-secondary-color-loading: var(--hop-neutral-icon);
1546
+ --hop-comp-button-ghost-secondary-icon-color-selected: var(--hop-neutral-icon-weak-press);
1547
+ --hop-comp-button-ghost-secondary-icon-color-press: var(--hop-neutral-icon-weak-press);
1548
+ --hop-comp-button-ghost-secondary-icon-color-hover: var(--hop-neutral-icon-weak-hover);
1549
+ --hop-comp-button-ghost-secondary-icon-color: var(--hop-neutral-icon-weak);
1450
1550
  --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
1451
1551
  --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
1452
1552
  --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
1453
1553
  --hop-comp-button-ghost-secondary-text-color: var(--hop-neutral-text-weak);
1454
- --hop-comp-button-ghost-primary-border-color-selected: var(--hop-primary-surface-weak-press);
1455
- --hop-comp-button-ghost-primary-border-color-pressed: var(--hop-primary-surface-weak-press);
1456
- --hop-comp-button-ghost-primary-border-color-hover: var(--hop-neutral-surface-hover);
1457
- --hop-comp-button-ghost-primary-background-color-selected: var(--hop-primary-surface-weak-press);
1458
- --hop-comp-button-ghost-primary-background-color-pressed: var(--hop-primary-surface-weak-press);
1459
- --hop-comp-button-ghost-primary-background-color-hover: var(--hop-neutral-surface-hover);
1554
+ --hop-comp-button-ghost-primary-background-selected: var(--hop-primary-surface-weak-press);
1555
+ --hop-comp-button-ghost-primary-background-pressed: var(--hop-primary-surface-weak-press);
1556
+ --hop-comp-button-ghost-primary-background-hover: var(--hop-neutral-surface-hover);
1557
+ --hop-comp-button-ghost-primary-color-loading: var(--hop-neutral-icon);
1558
+ --hop-comp-button-ghost-primary-icon-color-selected: var(--hop-primary-icon-press);
1559
+ --hop-comp-button-ghost-primary-icon-color-press: var(--hop-primary-icon-press);
1560
+ --hop-comp-button-ghost-primary-icon-color-hover: var(--hop-primary-text-hover);
1561
+ --hop-comp-button-ghost-primary-icon-color: var(--hop-primary-icon);
1460
1562
  --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
1461
1563
  --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
1462
1564
  --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
1463
1565
  --hop-comp-button-ghost-primary-text-color: var(--hop-primary-text);
1566
+ --hop-comp-button-danger-border-color-disabled: var(--hop-neutral-surface-disabled);
1464
1567
  --hop-comp-button-danger-border-color-selected: var(--hop-danger-border-selected);
1465
- --hop-comp-button-danger-border-color-pressed: var(--hop-danger-surface-press);
1466
- --hop-comp-button-danger-border-color-hover: var(--hop-danger-surface-strong-hover);
1467
- --hop-comp-button-danger-border-color: var(--hop-danger-surface-strong);
1468
- --hop-comp-button-danger-background-color-selected: var(--hop-danger-surface-selected);
1469
- --hop-comp-button-danger-background-color-pressed: var(--hop-danger-surface-press);
1470
- --hop-comp-button-danger-background-color-hover: var(--hop-danger-surface-strong-hover);
1471
- --hop-comp-button-danger-background-color: var(--hop-danger-surface-strong);
1568
+ --hop-comp-button-danger-background-disabled: var(--hop-neutral-surface-disabled);
1569
+ --hop-comp-button-danger-background-selected: var(--hop-danger-surface-selected);
1570
+ --hop-comp-button-danger-background-pressed: var(--hop-danger-surface-press);
1571
+ --hop-comp-button-danger-background-hover: var(--hop-danger-surface-strong-hover);
1572
+ --hop-comp-button-danger-color-loading: var(--hop-primary-icon-strong);
1573
+ --hop-comp-button-danger-background-loading: var(--hop-danger-surface-strong);
1574
+ --hop-comp-button-danger-background: var(--hop-danger-surface-strong);
1575
+ --hop-comp-button-danger-icon-color-selected: var(--hop-danger-icon-selected);
1576
+ --hop-comp-button-danger-icon-color-press: var(--hop-danger-icon-strong-hover);
1577
+ --hop-comp-button-danger-icon-color-hover: var(--hop-danger-icon-strong-hover);
1578
+ --hop-comp-button-danger-icon-color: var(--hop-danger-icon-strong);
1472
1579
  --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
1473
1580
  --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
1474
1581
  --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
1475
1582
  --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
1583
+ --hop-comp-button-upsell-border-color-disabled: var(--hop-neutral-surface-disabled);
1476
1584
  --hop-comp-button-upsell-border-color-selected: var(--hop-upsell-border-selected);
1477
- --hop-comp-button-upsell-border-color-pressed: var(--hop-upsell-surface-weak-press);
1478
- --hop-comp-button-upsell-border-color-hover: var(--hop-upsell-surface-weak-hover);
1479
- --hop-comp-button-upsell-border-color: var(--hop-upsell-surface-weak);
1480
- --hop-comp-button-upsell-background-color-selected: var(--hop-upsell-surface-selected);
1481
- --hop-comp-button-upsell-background-color-pressed: var(--hop-upsell-surface-weak-press);
1482
- --hop-comp-button-upsell-background-color-hover: var(--hop-upsell-surface-weak-hover);
1483
- --hop-comp-button-upsell-background-color: var(--hop-upsell-surface-weak);
1585
+ --hop-comp-button-upsell-background-disabled: var(--hop-neutral-surface-disabled);
1586
+ --hop-comp-button-upsell-background-selected: var(--hop-upsell-surface-selected);
1587
+ --hop-comp-button-upsell-background-pressed: var(--hop-upsell-surface-weak-press);
1588
+ --hop-comp-button-upsell-background-hover: var(--hop-upsell-surface-weak-hover);
1589
+ --hop-comp-button-upsell-color-loading: var(--hop-upsell-icon);
1590
+ --hop-comp-button-upsell-background-loading: var(--hop-upsell-surface-weak);
1591
+ --hop-comp-button-upsell-background: var(--hop-upsell-surface-weak);
1592
+ --hop-comp-button-upsell-icon-color-selected: var(--hop-upsell-icon-selected);
1593
+ --hop-comp-button-upsell-icon-color-press: var(--hop-upsell-icon-press);
1594
+ --hop-comp-button-upsell-icon-color-hover: var(--hop-upsell-icon-hover);
1595
+ --hop-comp-button-upsell-icon-color: var(--hop-upsell-icon);
1484
1596
  --hop-comp-button-upsell-text-color-selected: var(--hop-upsell-text-selected);
1485
1597
  --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-press);
1486
1598
  --hop-comp-button-upsell-text-color-hover: var(--hop-upsell-text-hover);
1487
1599
  --hop-comp-button-upsell-text-color: var(--hop-upsell-text);
1600
+ --hop-comp-button-secondary-border-color-disabled: var(--hop-neutral-surface-disabled);
1488
1601
  --hop-comp-button-secondary-border-color-selected: var(--hop-neutral-border-selected);
1489
- --hop-comp-button-secondary-border-color-pressed: var(--hop-neutral-border-strong);
1490
- --hop-comp-button-secondary-border-color-hover: var(--hop-neutral-border-strong-hover);
1491
1602
  --hop-comp-button-secondary-border-color: var(--hop-neutral-border-strong);
1492
- --hop-comp-button-secondary-background-color-selected: var(--hop-neutral-surface-selected);
1493
- --hop-comp-button-secondary-background-color-pressed: var(--hop-neutral-surface-press);
1494
- --hop-comp-button-secondary-background-color-hover: var(--hop-neutral-surface-hover);
1495
- --hop-comp-button-secondary-background-color: var(--hop-neutral-surface);
1603
+ --hop-comp-button-secondary-background-disabled: var(--hop-neutral-surface-disabled);
1604
+ --hop-comp-button-secondary-background-selected: var(--hop-neutral-surface-selected);
1605
+ --hop-comp-button-secondary-background-pressed: var(--hop-neutral-surface-press);
1606
+ --hop-comp-button-secondary-background-hover: var(--hop-neutral-surface-hover);
1607
+ --hop-comp-button-secondary-border-color-loading: var(--hop-neutral-border-strong);
1608
+ --hop-comp-button-secondary-color-loading: var(--hop-neutral-icon);
1609
+ --hop-comp-button-secondary-background-loading: var(--hop-neutral-surface);
1610
+ --hop-comp-button-secondary-background: var(--hop-neutral-surface);
1611
+ --hop-comp-button-secondary-icon-color-selected: var(--hop-neutral-icon-selected);
1612
+ --hop-comp-button-secondary-icon-color-press: var(--hop-neutral-icon-press);
1613
+ --hop-comp-button-secondary-icon-color-hover: var(--hop-neutral-icon-hover);
1614
+ --hop-comp-button-secondary-icon-color: var(--hop-neutral-icon);
1496
1615
  --hop-comp-button-secondary-text-color-selected: var(--hop-neutral-text-selected);
1497
1616
  --hop-comp-button-secondary-text-color-pressed: var(--hop-neutral-text-press);
1498
1617
  --hop-comp-button-secondary-text-color-hover: var(--hop-neutral-text-hover);
1499
1618
  --hop-comp-button-secondary-text-color: var(--hop-neutral-text);
1619
+ --hop-comp-button-primary-border-color-disabled: var(--hop-neutral-surface-disabled);
1500
1620
  --hop-comp-button-primary-border-color-selected: var(--hop-primary-border-selected);
1501
- --hop-comp-button-primary-border-color-pressed: var(--hop-primary-surface-strong-press);
1502
- --hop-comp-button-primary-border-color-hover: var(--hop-primary-surface-strong-hover);
1503
- --hop-comp-button-primary-border-color: var(--hop-primary-surface-strong);
1504
- --hop-comp-button-primary-background-color-selected: var(--hop-primary-surface-selected);
1505
- --hop-comp-button-primary-background-color-pressed: var(--hop-primary-surface-strong-press);
1506
- --hop-comp-button-primary-background-color-hover: var(--hop-primary-surface-strong-hover);
1507
- --hop-comp-button-primary-background-color: var(--hop-primary-surface-strong);
1621
+ --hop-comp-button-primary-background-disabled: var(--hop-neutral-surface-disabled);
1622
+ --hop-comp-button-primary-background-selected: var(--hop-primary-surface-selected);
1623
+ --hop-comp-button-primary-background-pressed: var(--hop-primary-surface-strong-press);
1624
+ --hop-comp-button-primary-background-hover: var(--hop-primary-surface-strong-hover);
1625
+ --hop-comp-button-primary-color-loading: var(--hop-primary-icon-strong);
1626
+ --hop-comp-button-primary-background-loading: var(--hop-primary-surface-strong);
1627
+ --hop-comp-button-primary-background: var(--hop-primary-surface-strong);
1628
+ --hop-comp-button-primary-icon-color-selected: var(--hop-primary-icon-selected);
1629
+ --hop-comp-button-primary-icon-color-press: var(--hop-primary-icon-strong);
1630
+ --hop-comp-button-primary-icon-color-hover: var(--hop-primary-icon-strong-hover);
1631
+ --hop-comp-button-primary-icon-color: var(--hop-primary-icon-strong);
1508
1632
  --hop-comp-button-primary-text-color-selected: var(--hop-primary-text-selected);
1509
1633
  --hop-comp-button-primary-text-color-pressed: var(--hop-primary-text-strong);
1510
1634
  --hop-comp-button-primary-text-color-hover: var(--hop-primary-text-strong-hover);
1511
1635
  --hop-comp-button-primary-text-color: var(--hop-primary-text-strong);
1636
+ --hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
1637
+ --hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
1638
+ --hop-comp-button-border-color-focus: var(--hop-primary-border-focus);
1512
1639
  --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
1640
+ --hop-comp-badge-disabled-text-color: var(--hop-neutral-text-disabled);
1641
+ --hop-comp-badge-disabled-background: var(--hop-neutral-surface-disabled);
1642
+ --hop-comp-badge-subdued-text-color-selected: var(--hop-neutral-text-weak-selected);
1643
+ --hop-comp-badge-subdued-text-color-press: var(--hop-neutral-text-weak-press);
1644
+ --hop-comp-badge-subdued-text-color-hover: var(--hop-neutral-text-weak-hover);
1645
+ --hop-comp-badge-subdued-text-color: var(--hop-neutral-text-weak);
1646
+ --hop-comp-badge-subdued-background-selected: var(--hop-neutral-surface-weak-selected);
1647
+ --hop-comp-badge-subdued-background-press: var(--hop-neutral-surface-weak-press);
1648
+ --hop-comp-badge-subdued-background-hover: var(--hop-neutral-surface-weak-hover);
1649
+ --hop-comp-badge-subdued-background: var(--hop-neutral-surface-weak);
1650
+ --hop-comp-badge-secondary-text-color-selected: var(--hop-neutral-text-selected);
1651
+ --hop-comp-badge-secondary-text-color-press: var(--hop-neutral-text-strong);
1652
+ --hop-comp-badge-secondary-text-color-hover: var(--hop-neutral-text-strong);
1653
+ --hop-comp-badge-secondary-text-color: var(--hop-neutral-text-strong);
1654
+ --hop-comp-badge-secondary-background-selected: var(--hop-neutral-surface-selected);
1655
+ --hop-comp-badge-secondary-background-press: var(--hop-neutral-surface-strong);
1656
+ --hop-comp-badge-secondary-background-hover: var(--hop-neutral-surface-strong);
1657
+ --hop-comp-badge-secondary-background: var(--hop-neutral-surface-strong);
1658
+ --hop-comp-badge-primary-text-color-selected: var(--hop-neutral-text-selected);
1659
+ --hop-comp-badge-primary-text-color-press: var(--hop-primary-text-strong);
1660
+ --hop-comp-badge-primary-text-color-hover: var(--hop-primary-text-strong-hover);
1661
+ --hop-comp-badge-primary-text-color: var(--hop-primary-text-strong);
1662
+ --hop-comp-badge-primary-background-selected: var(--hop-neutral-surface-selected);
1663
+ --hop-comp-badge-primary-background-press: var(--hop-primary-surface-strong-press);
1664
+ --hop-comp-badge-primary-background-hover: var(--hop-primary-surface-strong-hover);
1665
+ --hop-comp-badge-primary-background: var(--hop-primary-surface-strong);
1513
1666
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.1.9",
4
+ "version": "5.1.10",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {