@hopper-ui/styled-system 3.1.8 → 3.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 (33) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/StyledSystemProvider.css +34 -34
  3. package/dist/StyledSystemProvider.js +9 -9
  4. package/dist/{chunk-JCDXNN3N.js → chunk-2HUHH7LB.js} +23 -12
  5. package/dist/{chunk-5GFAOBD3.js → chunk-3QAGJGK4.js} +2 -2
  6. package/dist/{chunk-CPFBX4I7.js → chunk-44YPTD2W.js} +3 -3
  7. package/dist/{chunk-V7AWRYZY.js → chunk-5CC5QKUO.js} +2 -2
  8. package/dist/{chunk-RCDHX7IY.js → chunk-ASSKAO2A.js} +2 -4
  9. package/dist/{chunk-MJGZAFTL.js → chunk-JUMG2LYR.js} +2 -2
  10. package/dist/{chunk-FL7RZ2FI.js → chunk-KIBAE75I.js} +1 -1
  11. package/dist/{chunk-QTC3OPPR.js → chunk-PJ5LKI73.js} +1 -1
  12. package/dist/{chunk-36CMNQCR.js → chunk-WTQ36CFW.js} +1 -1
  13. package/dist/global-styles/BodyStyleProvider.js +3 -2
  14. package/dist/html-wrappers/html.css +34 -34
  15. package/dist/html-wrappers/html.js +6 -6
  16. package/dist/html-wrappers/htmlElement.css +34 -34
  17. package/dist/html-wrappers/htmlElement.js +5 -5
  18. package/dist/index.css +34 -34
  19. package/dist/index.js +9 -9
  20. package/dist/styledSystemRootCssClass.js +2 -2
  21. package/dist/theme/generated/sharegate/dark.css +4 -6
  22. package/dist/theme/generated/sharegate/light.css +278 -126
  23. package/dist/theme/generated/workleap/dark.css +3 -5
  24. package/dist/theme/generated/workleap/light.css +246 -94
  25. package/dist/tokens/generated/styledSystemConstants.d.ts +1 -1
  26. package/dist/tokens/generated/styledSystemConstants.js +1 -1
  27. package/dist/tokens/generated/styledSystemToTokenMappings.d.ts +2 -4
  28. package/dist/tokens/generated/styledSystemToTokenMappings.js +1 -1
  29. package/dist/tokens/tokenMappings.d.ts +4 -2
  30. package/dist/tokens/tokenMappings.js +3 -3
  31. package/dist/useStyledSystem.css +31 -31
  32. package/dist/useStyledSystem.js +4 -4
  33. package/package.json +2 -2
package/dist/theme/generated/sharegate/light.css CHANGED
@@ -2,26 +2,76 @@
2
2
  * This file is generated by Style Dictionary. Do not edit directly.
3
3
  */
4
4
 
5
- .hop-5-1-8-sharegate {
6
- --hop-comp-switch-thumb-filter-selected: none;
7
- --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%));
8
- --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;
9
- --hop-comp-switch-track-filter: drop-shadow(1.5px 1.5px 1.5px rgb(0 0 0 / 3%));
5
+ .hop-5-1-10-sharegate {
6
+ --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);
7
+ --hop-comp-tooltip-backdrop-filter: blur(5px);
8
+ --hop-comp-tile-icon-color: transparent;
9
+ --hop-comp-tile-outline-color-disabled: transparent;
10
+ --hop-comp-tile-outline-color-selected: transparent;
11
+ --hop-comp-tile-outline-color: transparent;
12
+ --hop-comp-tile-border-color-disabled: transparent;
13
+ --hop-comp-tile-border-color-selected: transparent;
14
+ --hop-comp-tile-border-color-focus: transparent;
15
+ --hop-comp-tile-border-color-press: transparent;
16
+ --hop-comp-tile-border-color-hover: transparent;
17
+ --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);
18
+ --hop-comp-tabs-tab-list-border-radius: NaNrem;
19
+ --hop-comp-tabs-tab-list-border: none;
20
+ --hop-comp-tabs-tab-list-background-color: transparent;
21
+ --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);
22
+ --hop-comp-popover-backdrop-filter: blur(5px);
23
+ --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);
24
+ --hop-comp-modal-backdrop-filter: blur(5px);
25
+ --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;
26
+ --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;
27
+ --hop-comp-switch-thumb-box-shadow-selected: none;
28
+ --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);
29
+ --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;
30
+ --hop-comp-switch-track-filter: drop-shadow(1.5px 1.5px 1.5px rgba(0, 0, 0, 0.03));
10
31
  --hop-comp-segmented-control-item-box-shadow-disabled: none;
11
- --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%);
12
- --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;
13
- --hop-comp-button-ghost-disabled-border-color: transparent;
14
- --hop-comp-button-ghost-disabled-background-color: transparent;
32
+ --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);
33
+ --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;
34
+ --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;
35
+ --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;
36
+ --hop-comp-calendar-grid-border-color: transparent;
37
+ --hop-comp-button-ghost-danger-border-color-disabled: transparent;
38
+ --hop-comp-button-ghost-danger-border-color-selected: transparent;
15
39
  --hop-comp-button-ghost-danger-border-color: transparent;
16
- --hop-comp-button-ghost-danger-background-color: transparent;
40
+ --hop-comp-button-ghost-danger-background-disabled: transparent;
41
+ --hop-comp-button-ghost-danger-box-shadow-loading: none;
42
+ --hop-comp-button-ghost-danger-border-color-loading: transparent;
43
+ --hop-comp-button-ghost-danger-background-loading: transparent;
44
+ --hop-comp-button-ghost-danger-background: transparent;
17
45
  --hop-comp-button-ghost-danger-box-shadow: none;
46
+ --hop-comp-button-ghost-secondary-border-color-disabled: transparent;
47
+ --hop-comp-button-ghost-secondary-border-color-selected: transparent;
18
48
  --hop-comp-button-ghost-secondary-border-color: transparent;
19
- --hop-comp-button-ghost-secondary-background-color: transparent;
49
+ --hop-comp-button-ghost-secondary-background-disabled: transparent;
50
+ --hop-comp-button-ghost-secondary-box-shadow-loading: none;
51
+ --hop-comp-button-ghost-secondary-border-color-loading: transparent;
52
+ --hop-comp-button-ghost-secondary-background-loading: transparent;
53
+ --hop-comp-button-ghost-secondary-background: transparent;
20
54
  --hop-comp-button-ghost-secondary-box-shadow: none;
55
+ --hop-comp-button-ghost-primary-border-color-disabled: transparent;
56
+ --hop-comp-button-ghost-primary-border-color-selected: transparent;
21
57
  --hop-comp-button-ghost-primary-border-color: transparent;
22
- --hop-comp-button-ghost-primary-background-color: transparent;
58
+ --hop-comp-button-ghost-primary-background-disabled: transparent;
59
+ --hop-comp-button-ghost-primary-box-shadow-loading: none;
60
+ --hop-comp-button-ghost-primary-border-color-loading: transparent;
61
+ --hop-comp-button-ghost-primary-background-loading: transparent;
62
+ --hop-comp-button-ghost-primary-background: transparent;
23
63
  --hop-comp-button-ghost-primary-box-shadow: none;
24
- --hop-comp-button-secondary-border-color-selected: transparent;
64
+ --hop-comp-button-danger-box-shadow-loading: none;
65
+ --hop-comp-button-danger-box-shadow: none;
66
+ --hop-comp-button-upsell-border-color-disabled: transparent;
67
+ --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;
68
+ --hop-comp-button-upsell-box-shadow: none;
69
+ --hop-comp-button-secondary-border-color-disabled: transparent;
70
+ --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;
71
+ --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;
72
+ --hop-comp-button-primary-border-color-disabled: transparent;
73
+ --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;
74
+ --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;
25
75
  --hop-overline-bottom-offset: -0.25rem;
26
76
  --hop-overline-top-offset: -0.25rem;
27
77
  --hop-heading-xs-medium-bottom-offset: -0.25rem;
@@ -300,6 +350,8 @@
300
350
  --hop-dataviz-monochromatic-primary-75: #d6e0ff;
301
351
  --hop-dataviz-monochromatic-primary-50: #e6ebff;
302
352
  --hop-dataviz-monochromatic-primary-25: #f5f6ff;
353
+ --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
354
+ --hop-neutral-surface-transparent: rgb(255 255 255 / 0.75);
303
355
  --hop-space-1280: 8rem;
304
356
  --hop-space-960: 6rem;
305
357
  --hop-space-800: 5rem;
@@ -314,7 +366,6 @@
314
366
  --hop-space-20: 0.125rem;
315
367
  --hop-space-10: 0.0625rem;
316
368
  --hop-space-0: 0;
317
- --hop-border-radius-2-5: 0.75rem;
318
369
  --hop-border-radius-9999: 624.9375rem;
319
370
  --hop-border-radius-4: 1.5rem;
320
371
  --hop-border-radius-3: 1rem;
@@ -356,9 +407,6 @@
356
407
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
357
408
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
358
409
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
359
- --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;
360
- --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
361
- --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;
362
410
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
363
411
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
364
412
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
@@ -582,15 +630,16 @@
582
630
  --hop-coastal-75: #bae6ff;
583
631
  --hop-coastal-50: #d9efff;
584
632
  --hop-coastal-25: #f0f8ff;
585
- --hop-comp-radio-box-shadow: var(--hop-shadow-tactility-control);
586
- --hop-comp-checkbox-box-shadow: var(--hop-shadow-tactility-control);
587
- --hop-comp-field-border-radius: var(--hop-border-radius-2-5);
588
- --hop-comp-card-second-level-box-shadow: var(--hop-shadow-tactility-card);
589
- --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
590
- --hop-comp-button-danger-box-shadow: var(--hop-shadow-tactility-button);
591
- --hop-comp-button-upsell-box-shadow: var(--hop-shadow-tactility-button);
592
- --hop-comp-button-secondary-box-shadow: var(--hop-shadow-tactility-button);
593
- --hop-comp-button-primary-box-shadow: var(--hop-shadow-tactility-button);
633
+ --hop-comp-tooltip-background: var(--hop-neutral-surface-weak-transparent-always-dark);
634
+ --hop-comp-tabs-tab-list-border-block-end: var(--hop-space-10) solid var(--hop-neutral-border-weak);
635
+ --hop-comp-popover-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
636
+ --hop-comp-popover-background: var(--hop-neutral-surface-transparent);
637
+ --hop-comp-modal-border: var(--hop-space-10) solid var(--hop-neutral-border-weak);
638
+ --hop-comp-modal-background: var(--hop-neutral-surface-transparent);
639
+ --hop-comp-button-upsell-background-loading: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
640
+ --hop-comp-button-upsell-background: linear-gradient(var(--hop-limeburst-50), var(--hop-persimmon-300) 151%);
641
+ --hop-comp-button-primary-background-loading: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
642
+ --hop-comp-button-primary-background: linear-gradient(var(--hop-iris-300), var(--hop-iris-600) 100%);
594
643
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
595
644
  --hop-shape-rounded-md: var(--hop-border-radius-2);
596
645
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1187,7 +1236,7 @@
1187
1236
  --hop-primary-surface-weak: var(--hop-iris-25);
1188
1237
  --hop-primary-surface-strong-press: var(--hop-iris-700);
1189
1238
  --hop-primary-surface-strong-hover: var(--hop-iris-600);
1190
- --hop-primary-surface-strong-selected: var(--hop-iris-50);
1239
+ --hop-primary-surface-strong-selected: var(--hop-iris-800);
1191
1240
  --hop-primary-surface-strong: var(--hop-iris-400);
1192
1241
  --hop-primary-surface-press: var(--hop-iris-300);
1193
1242
  --hop-primary-surface-hover: var(--hop-iris-200);
@@ -1336,13 +1385,39 @@
1336
1385
  --hop-space-stack-md: var(--hop-space-160);
1337
1386
  --hop-space-stack-sm: var(--hop-space-80);
1338
1387
  --hop-space-stack-xs: var(--hop-space-40);
1339
- --hop-comp-mark-indicator-color-error: var(--hop-danger-icon-strong);
1340
- --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1341
- --hop-comp-mark-indicator-color: var(--hop-neutral-icon-selected);
1388
+ --hop-comp-tooltip-color: var(--hop-neutral-text-always-light);
1389
+ --hop-comp-tooltip-border-radius: var(--hop-shape-rounded-md);
1390
+ --hop-comp-tile-icon-color-disabled: var(--hop-neutral-icon-disabled);
1391
+ --hop-comp-tile-icon-color-selected: var(--hop-neutral-icon);
1392
+ --hop-comp-tile-text-color-disabled: var(--hop-neutral-text-disabled);
1393
+ --hop-comp-tile-text-color-selected: var(--hop-neutral-text);
1394
+ --hop-comp-tile-text-color-focus: var(--hop-neutral-text-hover);
1395
+ --hop-comp-tile-text-color-press: var(--hop-neutral-text-press);
1396
+ --hop-comp-tile-text-color-hover: var(--hop-neutral-text-hover);
1397
+ --hop-comp-tile-text-color: var(--hop-neutral-text);
1398
+ --hop-comp-tile-outline-color-focus: var(--hop-primary-border-focus);
1399
+ --hop-comp-tile-border-radius: var(--hop-shape-rounded-md);
1400
+ --hop-comp-tile-border-color: var(--hop-neutral-border-weakest);
1401
+ --hop-comp-tile-background-color-disabled: var(--hop-neutral-surface-disabled);
1402
+ --hop-comp-tile-background-color-selected: var(--hop-neutral-surface-weak-selected);
1403
+ --hop-comp-tile-background-color-focus: var(--hop-neutral-surface-weak-hover);
1404
+ --hop-comp-tile-background-color-press: var(--hop-neutral-surface-weak-press);
1405
+ --hop-comp-tile-background-color-hover: var(--hop-neutral-surface-weak-hover);
1406
+ --hop-comp-tile-background-color: var(--hop-neutral-surface);
1407
+ --hop-comp-tabs-tab-panel-border-color-focus: var(--hop-primary-border-focus);
1408
+ --hop-comp-tabs-tab-border-radius: var(--hop-shape-rounded-sm);
1409
+ --hop-comp-tabs-tab-border-color-disabled: var(--hop-neutral-border-disabled);
1410
+ --hop-comp-tabs-tab-border-color-focus: var(--hop-primary-border-focus);
1411
+ --hop-comp-tabs-tab-border-color-selected: var(--hop-primary-border-selected);
1412
+ --hop-comp-tabs-tab-text-color-disabled: var(--hop-neutral-text-disabled);
1413
+ --hop-comp-tabs-tab-text-color-focus: var(--hop-neutral-text-hover);
1414
+ --hop-comp-tabs-tab-text-color-selected: var(--hop-primary-text-selected);
1415
+ --hop-comp-tabs-tab-text-color-press: var(--hop-neutral-text-press);
1416
+ --hop-comp-tabs-tab-text-color-hover: var(--hop-neutral-text-hover);
1417
+ --hop-comp-tabs-tab-text-color: var(--hop-neutral-text-weak);
1418
+ --hop-comp-popover-border-radius: var(--hop-shape-rounded-lg);
1419
+ --hop-comp-modal-border-radius: var(--hop-shape-rounded-lg);
1342
1420
  --hop-comp-mark-border-color-error-focus: var(--hop-danger-border-press);
1343
- --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1344
- --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1345
- --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1346
1421
  --hop-comp-mark-border-color-error-press: var(--hop-danger-border-press);
1347
1422
  --hop-comp-mark-border-color-error: var(--hop-danger-border-strong);
1348
1423
  --hop-comp-mark-border-color-disabled: var(--hop-neutral-border-disabled);
@@ -1351,6 +1426,30 @@
1351
1426
  --hop-comp-mark-border-color-press: var(--hop-neutral-border-press);
1352
1427
  --hop-comp-mark-border-color-hover: var(--hop-neutral-border-hover);
1353
1428
  --hop-comp-mark-border-color: var(--hop-neutral-border);
1429
+ --hop-comp-mark-indicator-color-error: var(--hop-neutral-icon-always-light);
1430
+ --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1431
+ --hop-comp-mark-indicator-color: var(--hop-neutral-icon-always-light);
1432
+ --hop-comp-mark-icon-color-error-press: var(--hop-danger-icon-weak-press);
1433
+ --hop-comp-mark-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1434
+ --hop-comp-mark-icon-color-error: var(--hop-danger-icon-weak);
1435
+ --hop-comp-mark-icon-color-focus: var(--hop-neutral-icon-hover);
1436
+ --hop-comp-mark-icon-color-disabled: var(--hop-neutral-icon-disabled);
1437
+ --hop-comp-mark-icon-color-selected: var(--hop-neutral-icon);
1438
+ --hop-comp-mark-icon-color-press: var(--hop-neutral-icon-press);
1439
+ --hop-comp-mark-icon-color-hover: var(--hop-neutral-icon-hover);
1440
+ --hop-comp-mark-icon-color: var(--hop-neutral-icon);
1441
+ --hop-comp-mark-text-color-error-press: var(--hop-danger-text-weak-press);
1442
+ --hop-comp-mark-text-color-error-hover: var(--hop-danger-text-weak-hover);
1443
+ --hop-comp-mark-text-color-error: var(--hop-danger-text-weak);
1444
+ --hop-comp-mark-text-color-focus: var(--hop-neutral-text-hover);
1445
+ --hop-comp-mark-text-color-disabled: var(--hop-neutral-text-disabled);
1446
+ --hop-comp-mark-text-color-selected: var(--hop-neutral-text);
1447
+ --hop-comp-mark-text-color-press: var(--hop-neutral-text-press);
1448
+ --hop-comp-mark-text-color-hover: var(--hop-neutral-text-hover);
1449
+ --hop-comp-mark-text-color: var(--hop-neutral-text);
1450
+ --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1451
+ --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1452
+ --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1354
1453
  --hop-comp-mark-background-color-error: var(--hop-danger-surface-strong);
1355
1454
  --hop-comp-mark-background-color-disabled: var(--hop-neutral-surface-disabled);
1356
1455
  --hop-comp-mark-background-color-selected: var(--hop-primary-surface-selected);
@@ -1359,24 +1458,6 @@
1359
1458
  --hop-comp-mark-background-color: var(--hop-neutral-surface);
1360
1459
  --hop-comp-radio-border-radius: var(--hop-shape-circle);
1361
1460
  --hop-comp-checkbox-border-radius: var(--hop-shape-rounded-sm);
1362
- --hop-comp-label-icon-color-error-press: var(--hop-danger-icon-weak-press);
1363
- --hop-comp-label-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1364
- --hop-comp-label-icon-color-error: var(--hop-danger-icon-weak);
1365
- --hop-comp-label-icon-color-focus: var(--hop-neutral-icon-hover);
1366
- --hop-comp-label-icon-color-disabled: var(--hop-neutral-icon-disabled);
1367
- --hop-comp-label-icon-color-selected: var(--hop-neutral-icon);
1368
- --hop-comp-label-icon-color-press: var(--hop-neutral-icon-press);
1369
- --hop-comp-label-icon-color-hover: var(--hop-neutral-icon-hover);
1370
- --hop-comp-label-icon-color: var(--hop-neutral-icon);
1371
- --hop-comp-label-text-color-error-press: var(--hop-danger-text-weak-press);
1372
- --hop-comp-label-text-color-error-hover: var(--hop-danger-text-weak-hover);
1373
- --hop-comp-label-text-color-error: var(--hop-danger-text-weak);
1374
- --hop-comp-label-text-color-focus: var(--hop-neutral-text-hover);
1375
- --hop-comp-label-text-color-disabled: var(--hop-neutral-text-disabled);
1376
- --hop-comp-label-text-color-selected: var(--hop-neutral-text);
1377
- --hop-comp-label-text-color-press: var(--hop-neutral-text-press);
1378
- --hop-comp-label-text-color-hover: var(--hop-neutral-text-hover);
1379
- --hop-comp-label-text-color: var(--hop-neutral-text);
1380
1461
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1381
1462
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1382
1463
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
@@ -1391,12 +1472,18 @@
1391
1472
  --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
1392
1473
  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
1393
1474
  --hop-comp-field-border-color: var(--hop-neutral-border-weak);
1394
- --hop-comp-field-background-color-disabled: var(--hop-neutral-surface);
1395
- --hop-comp-field-background-color-hover: var(--hop-neutral-surface-weak-hover);
1396
- --hop-comp-field-background-color: var(--hop-neutral-surface-weak);
1397
- --hop-comp-select-text-color-hover: var(--hop-neutral-text-press);
1475
+ --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
1476
+ --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
1477
+ --hop-comp-field-background-color: var(--hop-neutral-surface);
1478
+ --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
1479
+ --hop-comp-select-checkmark-color-disabled: var(--hop-neutral-icon-disabled);
1480
+ --hop-comp-select-checkmark-color-pressed: var(--hop-primary-icon-press);
1481
+ --hop-comp-select-checkmark-color-focused: var(--hop-primary-icon-hover);
1482
+ --hop-comp-select-checkmark-color-hovered: var(--hop-primary-icon-hover);
1483
+ --hop-comp-select-checkmark-color: var(--hop-primary-icon);
1484
+ --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
1398
1485
  --hop-comp-select-border-color-active: var(--hop-primary-border);
1399
- --hop-comp-select-background-color-active: var(--hop-neutral-surface-weak-selected);
1486
+ --hop-comp-select-background-color-active: var(--hop-neutral-surface);
1400
1487
  --hop-comp-control-border-color-error: var(--hop-danger-border-strong);
1401
1488
  --hop-comp-control-border-color-disabled: var(--hop-neutral-border-disabled);
1402
1489
  --hop-comp-control-border-color-focus: var(--hop-primary-border-focus);
@@ -1410,104 +1497,169 @@
1410
1497
  --hop-comp-control-background-color-press: var(--hop-neutral-surface-press);
1411
1498
  --hop-comp-control-background-color-hover: var(--hop-neutral-surface-hover);
1412
1499
  --hop-comp-control-background-color: var(--hop-neutral-surface-weakest);
1413
- --hop-comp-switch-icon-color-disabled: var(--hop-neutral-icon-disabled);
1414
- --hop-comp-switch-icon-color-selected: var(--hop-neutral-icon-selected);
1415
- --hop-comp-switch-icon-color-press: var(--hop-neutral-icon-strong);
1416
- --hop-comp-switch-icon-color-hover: var(--hop-neutral-icon-strong);
1417
- --hop-comp-switch-icon-color: var(--hop-neutral-icon-strong);
1500
+ --hop-comp-switch-thumb-color-disabled: var(--hop-neutral-icon-disabled);
1501
+ --hop-comp-switch-thumb-color-error: var(--hop-danger-icon-weak);
1502
+ --hop-comp-switch-thumb-color-selected: var(--hop-neutral-icon-always-light);
1503
+ --hop-comp-switch-thumb-color-press: var(--hop-neutral-icon-always-light);
1504
+ --hop-comp-switch-thumb-color-hover: var(--hop-neutral-icon-always-light);
1505
+ --hop-comp-switch-thumb-color: var(--hop-neutral-icon-always-light);
1506
+ --hop-comp-switch-text-color-error: var(--hop-danger-text-weak);
1507
+ --hop-comp-switch-text-color-disabled: var(--hop-neutral-text-disabled);
1508
+ --hop-comp-switch-text-color-press: var(--hop-neutral-text-press);
1509
+ --hop-comp-switch-text-color-hover: var(--hop-neutral-text-hover);
1510
+ --hop-comp-switch-text-color: var(--hop-neutral-text);
1418
1511
  --hop-comp-switch-background-color-selected: var(--hop-primary-surface-selected);
1419
- --hop-comp-switch-border-radius: var(--hop-shape-pill);
1512
+ --hop-comp-switch-thumb-border-radius: var(--hop-shape-rounded-sm);
1513
+ --hop-comp-switch-border-radius-sm: var(--hop-shape-rounded-sm);
1514
+ --hop-comp-switch-border-radius-md: var(--hop-shape-rounded-md);
1420
1515
  --hop-comp-segmented-control-item-border-radius: var(--hop-shape-rounded-sm);
1421
1516
  --hop-comp-segmented-control-icon-color-selected: var(--hop-neutral-icon);
1422
1517
  --hop-comp-segmented-control-icon-color: var(--hop-neutral-icon-weakest);
1423
1518
  --hop-comp-segmented-control-text-color-selected: var(--hop-neutral-text);
1424
1519
  --hop-comp-segmented-control-text-color: var(--hop-neutral-text-weakest);
1425
- --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
1520
+ --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-sm);
1426
1521
  --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
1427
- --hop-comp-card-second-level-background-color: var(--hop-neutral-surface);
1428
- --hop-comp-card-main-border-color: var(--hop-neutral-surface-weakest);
1429
- --hop-comp-card-main-background-color: var(--hop-neutral-surface-weakest);
1430
- --hop-comp-card-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);
1522
+ --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
1523
+ --hop-comp-card-second-level-border-radius: var(--hop-shape-rounded-lg);
1524
+ --hop-comp-card-main-border-color: var(--hop-neutral-border-weakest);
1525
+ --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1526
+ --hop-comp-card-main-border-radius: var(--hop-shape-rounded-lg);
1527
+ --hop-comp-calendar-cell-today-border-color: var(--hop-primary-border-selected);
1528
+ --hop-comp-calendar-cell-background-press: var(--hop-primary-surface-press);
1529
+ --hop-comp-calendar-cell-background-selected: var(--hop-primary-surface-selected);
1530
+ --hop-comp-button-ghost-danger-background-selected: var(--hop-danger-surface-selected);
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);
1441
1538
  --hop-comp-button-ghost-danger-text-color-selected: var(--hop-danger-text-press);
1442
1539
  --hop-comp-button-ghost-danger-text-color-pressed: var(--hop-danger-text-press);
1443
1540
  --hop-comp-button-ghost-danger-text-color-hover: var(--hop-danger-text-hover);
1444
1541
  --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);
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);
1451
1550
  --hop-comp-button-ghost-secondary-text-color-selected: var(--hop-neutral-text-weak-press);
1452
1551
  --hop-comp-button-ghost-secondary-text-color-pressed: var(--hop-neutral-text-weak-press);
1453
1552
  --hop-comp-button-ghost-secondary-text-color-hover: var(--hop-neutral-text-weak-hover);
1454
1553
  --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);
1554
+ --hop-comp-button-ghost-primary-background-selected: var(--hop-primary-surface-weak-selected);
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-icon-hover);
1561
+ --hop-comp-button-ghost-primary-icon-color: var(--hop-primary-icon);
1461
1562
  --hop-comp-button-ghost-primary-text-color-selected: var(--hop-primary-text-press);
1462
1563
  --hop-comp-button-ghost-primary-text-color-pressed: var(--hop-primary-text-press);
1463
1564
  --hop-comp-button-ghost-primary-text-color-hover: var(--hop-primary-text-hover);
1464
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);
1465
1567
  --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);
1568
+ --hop-comp-button-danger-border-color: var(--hop-neutral-border-weakest);
1569
+ --hop-comp-button-danger-background-disabled: var(--hop-neutral-surface-disabled);
1570
+ --hop-comp-button-danger-background-selected: var(--hop-danger-surface-selected);
1571
+ --hop-comp-button-danger-background-pressed: var(--hop-danger-surface-press);
1572
+ --hop-comp-button-danger-background-hover: var(--hop-danger-surface-strong-hover);
1573
+ --hop-comp-button-danger-border-color-loading: var(--hop-neutral-border-weakest);
1574
+ --hop-comp-button-danger-color-loading: var(--hop-primary-icon-strong);
1575
+ --hop-comp-button-danger-background-loading: var(--hop-danger-surface-strong);
1576
+ --hop-comp-button-danger-background: var(--hop-danger-surface-strong);
1577
+ --hop-comp-button-danger-icon-color-selected: var(--hop-danger-icon-selected);
1578
+ --hop-comp-button-danger-icon-color-press: var(--hop-danger-icon-strong-hover);
1579
+ --hop-comp-button-danger-icon-color-hover: var(--hop-danger-icon-strong-hover);
1580
+ --hop-comp-button-danger-icon-color: var(--hop-danger-icon-strong);
1473
1581
  --hop-comp-button-danger-text-color-selected: var(--hop-danger-text-selected);
1474
1582
  --hop-comp-button-danger-text-color-pressed: var(--hop-danger-text-strong-hover);
1475
1583
  --hop-comp-button-danger-text-color-hover: var(--hop-danger-text-strong-hover);
1476
1584
  --hop-comp-button-danger-text-color: var(--hop-danger-text-strong);
1477
1585
  --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);
1586
+ --hop-comp-button-upsell-border-color: var(--hop-upsell-border);
1587
+ --hop-comp-button-upsell-background-disabled: var(--hop-neutral-surface-disabled);
1588
+ --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. */
1589
+ --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. */
1590
+ --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. */
1591
+ --hop-comp-button-upsell-border-color-loading: var(--hop-upsell-border);
1592
+ --hop-comp-button-upsell-color-loading: var(--hop-neutral-icon-always-dark);
1593
+ --hop-comp-button-upsell-icon-color-selected: var(--hop-upsell-icon-selected);
1594
+ --hop-comp-button-upsell-icon-color-press: var(--hop-upsell-icon-weak-press);
1595
+ --hop-comp-button-upsell-icon-color-hover: var(--hop-upsell-icon-hover);
1596
+ --hop-comp-button-upsell-icon-color: var(--hop-neutral-icon-always-dark);
1485
1597
  --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);
1598
+ --hop-comp-button-upsell-text-color-pressed: var(--hop-upsell-text-weak-press);
1487
1599
  --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);
1600
+ --hop-comp-button-upsell-text-color: var(--hop-neutral-text-always-dark);
1601
+ --hop-comp-button-secondary-border-color-selected: var(--hop-neutral-border-weakest);
1491
1602
  --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);
1603
+ --hop-comp-button-secondary-background-disabled: var(--hop-neutral-surface-disabled);
1604
+ --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. */
1605
+ --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. */
1606
+ --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. */
1607
+ --hop-comp-button-secondary-border-color-loading: var(--hop-neutral-border-weakest);
1608
+ --hop-comp-button-secondary-color-loading: var(--hop-neutral-icon);
1609
+ --hop-comp-button-secondary-background-loading: linear-gradient(var(--hop-neutral-surface), var(--hop-neutral-surface-weak) 100%);
1610
+ --hop-comp-button-secondary-background: linear-gradient(var(--hop-neutral-surface), var(--hop-neutral-surface-weak) 100%);
1611
+ --hop-comp-button-secondary-icon-color-selected: var(--hop-primary-icon-selected);
1612
+ --hop-comp-button-secondary-icon-color-press: var(--hop-primary-icon-press);
1613
+ --hop-comp-button-secondary-icon-color-hover: var(--hop-primary-icon-hover);
1614
+ --hop-comp-button-secondary-icon-color: var(--hop-primary-icon);
1615
+ --hop-comp-button-secondary-text-color-selected: var(--hop-primary-text-selected);
1616
+ --hop-comp-button-secondary-text-color-pressed: var(--hop-primary-text-press);
1617
+ --hop-comp-button-secondary-text-color-hover: var(--hop-primary-text-hover);
1618
+ --hop-comp-button-secondary-text-color: var(--hop-primary-text);
1500
1619
  --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);
1620
+ --hop-comp-button-primary-border-color: var(--hop-primary-border);
1621
+ --hop-comp-button-primary-background-disabled: var(--hop-neutral-surface-disabled);
1622
+ --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. */
1623
+ --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. */
1624
+ --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. */
1625
+ --hop-comp-button-primary-border-color-loading: var(--hop-primary-border);
1626
+ --hop-comp-button-primary-color-loading: var(--hop-primary-icon-strong);
1627
+ --hop-comp-button-primary-icon-color-selected: var(--hop-neutral-icon-always-light);
1628
+ --hop-comp-button-primary-icon-color-press: var(--hop-neutral-icon-always-light);
1629
+ --hop-comp-button-primary-icon-color-hover: var(--hop-neutral-icon-always-light);
1630
+ --hop-comp-button-primary-icon-color: var(--hop-neutral-icon-always-light);
1631
+ --hop-comp-button-primary-text-color-selected: var(--hop-neutral-text-always-light);
1632
+ --hop-comp-button-primary-text-color-pressed: var(--hop-neutral-text-always-light);
1633
+ --hop-comp-button-primary-text-color-hover: var(--hop-neutral-text-always-light);
1634
+ --hop-comp-button-primary-text-color: var(--hop-neutral-text-always-light);
1635
+ --hop-comp-button-icon-color-disabled: var(--hop-neutral-icon-disabled);
1636
+ --hop-comp-button-text-color-disabled: var(--hop-neutral-text-disabled);
1637
+ --hop-comp-button-border-color-focus: var(--hop-primary-border-focus);
1512
1638
  --hop-comp-button-border-radius: var(--hop-shape-rounded-md);
1639
+ --hop-comp-badge-disabled-text-color: var(--hop-neutral-text-disabled);
1640
+ --hop-comp-badge-disabled-background: var(--hop-neutral-surface-disabled);
1641
+ --hop-comp-badge-subdued-text-color-selected: var(--hop-neutral-text-always-light);
1642
+ --hop-comp-badge-subdued-text-color-press: var(--hop-neutral-text-press);
1643
+ --hop-comp-badge-subdued-text-color-hover: var(--hop-neutral-text-hover);
1644
+ --hop-comp-badge-subdued-text-color: var(--hop-neutral-text);
1645
+ --hop-comp-badge-subdued-background-selected: var(--hop-primary-surface-strong);
1646
+ --hop-comp-badge-subdued-background-press: var(--hop-primary-surface-weak-press);
1647
+ --hop-comp-badge-subdued-background-hover: var(--hop-primary-surface-weak-hover);
1648
+ --hop-comp-badge-subdued-background: var(--hop-primary-surface-weak);
1649
+ --hop-comp-badge-secondary-text-color-selected: var(--hop-primary-text);
1650
+ --hop-comp-badge-secondary-text-color-press: var(--hop-primary-text-strong);
1651
+ --hop-comp-badge-secondary-text-color-hover: var(--hop-primary-text-strong-hover);
1652
+ --hop-comp-badge-secondary-text-color: var(--hop-primary-text-strong);
1653
+ --hop-comp-badge-secondary-background-selected: var(--hop-primary-surface-weak);
1654
+ --hop-comp-badge-secondary-background-press: var(--hop-primary-surface-strong-press);
1655
+ --hop-comp-badge-secondary-background-hover: var(--hop-primary-surface-strong-hover);
1656
+ --hop-comp-badge-secondary-background: var(--hop-primary-surface-strong);
1657
+ --hop-comp-badge-primary-text-color-selected: var(--hop-secondary-text);
1658
+ --hop-comp-badge-primary-text-color-press: var(--hop-neutral-text-strong);
1659
+ --hop-comp-badge-primary-text-color-hover: var(--hop-neutral-text-strong);
1660
+ --hop-comp-badge-primary-text-color: var(--hop-neutral-text-always-light);
1661
+ --hop-comp-badge-primary-background-selected: var(--hop-secondary-surface-strong-selected);
1662
+ --hop-comp-badge-primary-background-press: var(--hop-secondary-surface-strong-press);
1663
+ --hop-comp-badge-primary-background-hover: var(--hop-secondary-surface-strong-hover);
1664
+ --hop-comp-badge-primary-background: var(--hop-secondary-surface-strong);
1513
1665
  }
package/dist/theme/generated/workleap/dark.css CHANGED
@@ -2,7 +2,9 @@
2
2
  * This file is generated by Style Dictionary. Do not edit directly.
3
3
  */
4
4
 
5
- .hop-5-1-8-workleap-dark {
5
+ .hop-5-1-10-workleap-dark {
6
+ --hop-neutral-surface-weak-transparent-always-dark: rgb(49 51 53 / 0.75);
7
+ --hop-neutral-surface-transparent: rgb(35 36 38 / 0.75);
6
8
  --hop-space-1280: 8rem;
7
9
  --hop-space-960: 6rem;
8
10
  --hop-space-800: 5rem;
@@ -17,7 +19,6 @@
17
19
  --hop-space-20: 0.125rem;
18
20
  --hop-space-10: 0.0625rem;
19
21
  --hop-space-0: 0;
20
- --hop-border-radius-2-5: 0.75rem;
21
22
  --hop-border-radius-9999: 624.9375rem;
22
23
  --hop-border-radius-4: 1.5rem;
23
24
  --hop-border-radius-3: 1rem;
@@ -59,9 +60,6 @@
59
60
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
60
61
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
61
62
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
62
- --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;
63
- --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
64
- --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;
65
63
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
66
64
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
67
65
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);