@hopper-ui/tokens 5.1.2 → 5.1.4

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 (4) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/sharegate/tokens.css +61 -7
  3. package/dist/workleap/tokens.css +57 -3
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - 64874a1: Add Mark, Label component tokens and tactility shadows for themeable branding:
8
+ - Add `comp-mark` tokens for background, border, check icon colors across all states (default, hover, press, focus, selected, disabled, error)
9
+ - Add `comp-checkbox` and `comp-radio` tokens for border radius and box shadow overrides
10
+ - Add `comp-label` tokens for text and icon colors across all states (default, hover, press, selected, disabled, focus, error)
11
+ - Migrate Checkbox and Radio CSS from hardcoded semantic values to `--hop-comp-mark-*` and `--hop-comp-label-*` tokens
12
+ - Rename `inset-bevel` shadow to `tactility-button` and add `tactility-card` and `tactility-control` shadow tokens
13
+
14
+ ## 5.1.3
15
+
16
+ ### Patch Changes
17
+
18
+ - 092c1a7: Add Card, Select, and Combobox component tokens for themeable branding:
19
+ - Add `comp-card` tokens for border radius, background color, border color, and box shadow across both variants (main, second-level)
20
+ - Migrate Card CSS from hardcoded semantic values to `--hop-comp-card-*` tokens
21
+ - Add `comp-select` tokens for active and hover states (background, border, text colors)
22
+ - Migrate Select and ComboBox CSS from hardcoded semantic values to `--hop-comp-select-*` and `--hop-comp-input-*` tokens.
23
+
3
24
  ## 5.1.2
4
25
 
5
26
  ### Patch Changes
package/dist/sharegate/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 11 Feb 2026 16:01:41 GMT
3
+ * Generated on Fri, 13 Feb 2026 16:45:31 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -350,7 +350,9 @@
350
350
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
351
351
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
352
352
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
353
- --hop-shadow-inset-bevel: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
353
+ --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;
354
+ --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
355
+ --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;
354
356
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
355
357
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
356
358
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
@@ -526,11 +528,15 @@
526
528
  --hop-coastal-75: #bae6ff;
527
529
  --hop-coastal-50: #d9efff;
528
530
  --hop-coastal-25: #f0f8ff;
531
+ --hop-comp-radio-box-shadow: var(--hop-shadow-tactility-control);
532
+ --hop-comp-checkbox-box-shadow: var(--hop-shadow-tactility-control);
529
533
  --hop-comp-field-border-radius: var(--hop-border-radius-2-5);
530
- --hop-comp-button-danger-box-shadow: var(--hop-shadow-inset-bevel);
531
- --hop-comp-button-upsell-box-shadow: var(--hop-shadow-inset-bevel);
532
- --hop-comp-button-secondary-box-shadow: var(--hop-shadow-inset-bevel);
533
- --hop-comp-button-primary-box-shadow: var(--hop-shadow-inset-bevel);
534
+ --hop-comp-card-second-level-box-shadow: var(--hop-shadow-tactility-card);
535
+ --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
536
+ --hop-comp-button-danger-box-shadow: var(--hop-shadow-tactility-button);
537
+ --hop-comp-button-upsell-box-shadow: var(--hop-shadow-tactility-button);
538
+ --hop-comp-button-secondary-box-shadow: var(--hop-shadow-tactility-button);
539
+ --hop-comp-button-primary-box-shadow: var(--hop-shadow-tactility-button);
534
540
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
535
541
  --hop-shape-rounded-md: var(--hop-border-radius-2);
536
542
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1235,6 +1241,47 @@
1235
1241
  --hop-space-stack-md: var(--hop-space-160);
1236
1242
  --hop-space-stack-sm: var(--hop-space-80);
1237
1243
  --hop-space-stack-xs: var(--hop-space-40);
1244
+ --hop-comp-mark-indicator-color-error: var(--hop-danger-icon-strong);
1245
+ --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1246
+ --hop-comp-mark-indicator-color: var(--hop-neutral-icon-selected);
1247
+ --hop-comp-mark-border-color-error-focus: var(--hop-danger-border-press);
1248
+ --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1249
+ --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1250
+ --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1251
+ --hop-comp-mark-border-color-error-press: var(--hop-danger-border-press);
1252
+ --hop-comp-mark-border-color-error: var(--hop-danger-border-strong);
1253
+ --hop-comp-mark-border-color-disabled: var(--hop-neutral-border-disabled);
1254
+ --hop-comp-mark-border-color-focus: var(--hop-primary-border-focus);
1255
+ --hop-comp-mark-border-color-selected: var(--hop-primary-border-selected);
1256
+ --hop-comp-mark-border-color-press: var(--hop-neutral-border-press);
1257
+ --hop-comp-mark-border-color-hover: var(--hop-neutral-border-hover);
1258
+ --hop-comp-mark-border-color: var(--hop-neutral-border);
1259
+ --hop-comp-mark-background-color-error: var(--hop-danger-surface-strong);
1260
+ --hop-comp-mark-background-color-disabled: var(--hop-neutral-surface-disabled);
1261
+ --hop-comp-mark-background-color-selected: var(--hop-primary-surface-selected);
1262
+ --hop-comp-mark-background-color-press: var(--hop-neutral-surface-press);
1263
+ --hop-comp-mark-background-color-hover: var(--hop-neutral-surface-hover);
1264
+ --hop-comp-mark-background-color: var(--hop-neutral-surface);
1265
+ --hop-comp-radio-border-radius: var(--hop-shape-circle);
1266
+ --hop-comp-checkbox-border-radius: var(--hop-shape-rounded-sm);
1267
+ --hop-comp-label-icon-color-error-press: var(--hop-danger-icon-weak-press);
1268
+ --hop-comp-label-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1269
+ --hop-comp-label-icon-color-error: var(--hop-danger-icon-weak);
1270
+ --hop-comp-label-icon-color-focus: var(--hop-neutral-icon-hover);
1271
+ --hop-comp-label-icon-color-disabled: var(--hop-neutral-icon-disabled);
1272
+ --hop-comp-label-icon-color-selected: var(--hop-neutral-icon);
1273
+ --hop-comp-label-icon-color-press: var(--hop-neutral-icon-press);
1274
+ --hop-comp-label-icon-color-hover: var(--hop-neutral-icon-hover);
1275
+ --hop-comp-label-icon-color: var(--hop-neutral-icon);
1276
+ --hop-comp-label-text-color-error-press: var(--hop-danger-text-weak-press);
1277
+ --hop-comp-label-text-color-error-hover: var(--hop-danger-text-weak-hover);
1278
+ --hop-comp-label-text-color-error: var(--hop-danger-text-weak);
1279
+ --hop-comp-label-text-color-focus: var(--hop-neutral-text-hover);
1280
+ --hop-comp-label-text-color-disabled: var(--hop-neutral-text-disabled);
1281
+ --hop-comp-label-text-color-selected: var(--hop-neutral-text);
1282
+ --hop-comp-label-text-color-press: var(--hop-neutral-text-press);
1283
+ --hop-comp-label-text-color-hover: var(--hop-neutral-text-hover);
1284
+ --hop-comp-label-text-color: var(--hop-neutral-text);
1238
1285
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1239
1286
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1240
1287
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
@@ -1250,9 +1297,16 @@
1250
1297
  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
1251
1298
  --hop-comp-field-border-color: var(--hop-neutral-border-weak);
1252
1299
  --hop-comp-field-background-color-disabled: var(--hop-neutral-surface);
1253
- --hop-comp-field-background-color-focus: var(--hop-neutral-surface-weak);
1254
1300
  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-weak-hover);
1255
1301
  --hop-comp-field-background-color: var(--hop-neutral-surface-weak);
1302
+ --hop-comp-select-text-color-hover: var(--hop-neutral-text-press);
1303
+ --hop-comp-select-border-color-active: var(--hop-primary-border);
1304
+ --hop-comp-select-background-color-active: var(--hop-neutral-surface-weak-selected);
1305
+ --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
1306
+ --hop-comp-card-second-level-background-color: var(--hop-neutral-surface);
1307
+ --hop-comp-card-main-border-color: var(--hop-neutral-surface-weakest);
1308
+ --hop-comp-card-main-background-color: var(--hop-neutral-surface-weakest);
1309
+ --hop-comp-card-border-radius: var(--hop-shape-rounded-lg);
1256
1310
  --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1257
1311
  --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1258
1312
  --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
package/dist/workleap/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 11 Feb 2026 16:01:42 GMT
3
+ * Generated on Fri, 13 Feb 2026 16:45:31 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -346,7 +346,9 @@
346
346
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
347
347
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
348
348
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
349
- --hop-shadow-inset-bevel: 0 2px 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 2px 0 rgba(0, 0, 0, 0.25) inset;
349
+ --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;
350
+ --hop-shadow-tactility-card: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
351
+ --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;
350
352
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
351
353
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
352
354
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
@@ -522,6 +524,10 @@
522
524
  --hop-coastal-75: #bae6ff;
523
525
  --hop-coastal-50: #d9efff;
524
526
  --hop-coastal-25: #f0f8ff;
527
+ --hop-comp-radio-box-shadow: var(--hop-shadow-none);
528
+ --hop-comp-checkbox-box-shadow: var(--hop-shadow-none);
529
+ --hop-comp-card-second-level-box-shadow: var(--hop-shadow-none);
530
+ --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
525
531
  --hop-comp-button-ghost-danger-box-shadow: var(--hop-shadow-none);
526
532
  --hop-comp-button-ghost-secondary-box-shadow: var(--hop-shadow-none);
527
533
  --hop-comp-button-ghost-primary-box-shadow: var(--hop-shadow-none);
@@ -1233,6 +1239,47 @@
1233
1239
  --hop-space-stack-md: var(--hop-space-160);
1234
1240
  --hop-space-stack-sm: var(--hop-space-80);
1235
1241
  --hop-space-stack-xs: var(--hop-space-40);
1242
+ --hop-comp-mark-indicator-color-error: var(--hop-danger-icon-strong);
1243
+ --hop-comp-mark-indicator-color-disabled: var(--hop-neutral-icon-disabled);
1244
+ --hop-comp-mark-indicator-color: var(--hop-neutral-icon-selected);
1245
+ --hop-comp-mark-border-color-error-focus: var(--hop-danger-border-press);
1246
+ --hop-comp-mark-background-color-error-focus: var(--hop-danger-surface);
1247
+ --hop-comp-mark-background-color-error-press: var(--hop-danger-surface-weak-press);
1248
+ --hop-comp-mark-background-color-error-hover: var(--hop-danger-surface-weak-hover);
1249
+ --hop-comp-mark-border-color-error-press: var(--hop-danger-border-press);
1250
+ --hop-comp-mark-border-color-error: var(--hop-danger-border-strong);
1251
+ --hop-comp-mark-border-color-disabled: var(--hop-neutral-border-disabled);
1252
+ --hop-comp-mark-border-color-focus: var(--hop-primary-border-focus);
1253
+ --hop-comp-mark-border-color-selected: var(--hop-neutral-border-selected);
1254
+ --hop-comp-mark-border-color-press: var(--hop-neutral-border-press);
1255
+ --hop-comp-mark-border-color-hover: var(--hop-neutral-border-hover);
1256
+ --hop-comp-mark-border-color: var(--hop-neutral-border);
1257
+ --hop-comp-mark-background-color-error: var(--hop-danger-surface-strong);
1258
+ --hop-comp-mark-background-color-disabled: var(--hop-neutral-surface-disabled);
1259
+ --hop-comp-mark-background-color-selected: var(--hop-neutral-surface-selected);
1260
+ --hop-comp-mark-background-color-press: var(--hop-neutral-surface-press);
1261
+ --hop-comp-mark-background-color-hover: var(--hop-neutral-surface-hover);
1262
+ --hop-comp-mark-background-color: var(--hop-neutral-surface);
1263
+ --hop-comp-radio-border-radius: var(--hop-shape-circle);
1264
+ --hop-comp-checkbox-border-radius: var(--hop-shape-rounded-sm);
1265
+ --hop-comp-label-icon-color-error-press: var(--hop-danger-icon-weak-press);
1266
+ --hop-comp-label-icon-color-error-hover: var(--hop-danger-icon-weak-hover);
1267
+ --hop-comp-label-icon-color-error: var(--hop-danger-icon-weak);
1268
+ --hop-comp-label-icon-color-focus: var(--hop-neutral-icon-hover);
1269
+ --hop-comp-label-icon-color-disabled: var(--hop-neutral-icon-disabled);
1270
+ --hop-comp-label-icon-color-selected: var(--hop-neutral-icon);
1271
+ --hop-comp-label-icon-color-press: var(--hop-neutral-icon-press);
1272
+ --hop-comp-label-icon-color-hover: var(--hop-neutral-icon-hover);
1273
+ --hop-comp-label-icon-color: var(--hop-neutral-icon);
1274
+ --hop-comp-label-text-color-error-press: var(--hop-danger-text-weak-press);
1275
+ --hop-comp-label-text-color-error-hover: var(--hop-danger-text-weak-hover);
1276
+ --hop-comp-label-text-color-error: var(--hop-danger-text-weak);
1277
+ --hop-comp-label-text-color-focus: var(--hop-neutral-text-hover);
1278
+ --hop-comp-label-text-color-disabled: var(--hop-neutral-text-disabled);
1279
+ --hop-comp-label-text-color-selected: var(--hop-neutral-text);
1280
+ --hop-comp-label-text-color-press: var(--hop-neutral-text-press);
1281
+ --hop-comp-label-text-color-hover: var(--hop-neutral-text-hover);
1282
+ --hop-comp-label-text-color: var(--hop-neutral-text);
1236
1283
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1237
1284
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1238
1285
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
@@ -1248,10 +1295,17 @@
1248
1295
  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
1249
1296
  --hop-comp-field-border-color: var(--hop-neutral-border);
1250
1297
  --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
1251
- --hop-comp-field-background-color-focus: var(--hop-neutral-surface);
1252
1298
  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
1253
1299
  --hop-comp-field-background-color: var(--hop-neutral-surface);
1254
1300
  --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
1301
+ --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
1302
+ --hop-comp-select-border-color-active: var(--hop-neutral-border-selected);
1303
+ --hop-comp-select-background-color-active: var(--hop-neutral-surface);
1304
+ --hop-comp-card-second-level-border-color: var(--hop-neutral-surface-weakest);
1305
+ --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
1306
+ --hop-comp-card-main-border-color: var(--hop-neutral-border-weak);
1307
+ --hop-comp-card-main-background-color: var(--hop-neutral-surface);
1308
+ --hop-comp-card-border-radius: var(--hop-shape-rounded-md);
1255
1309
  --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
1256
1310
  --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
1257
1311
  --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.1.2",
4
+ "version": "5.1.4",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {