@hopper-ui/tokens 5.1.3 → 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 +11 -0
  2. package/dist/sharegate/tokens.css +52 -7
  3. package/dist/workleap/tokens.css +47 -2
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
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
+
3
14
  ## 5.1.3
4
15
 
5
16
  ### Patch Changes
package/dist/sharegate/tokens.css CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Wed, 11 Feb 2026 19:58:27 GMT
3
+ * Generated on Fri, 13 Feb 2026 16:45:31 GMT
4
4
  */
5
5
 
6
6
  :root {
7
- --hop-comp-card-second-level-box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
8
7
  --hop-comp-button-ghost-disabled-border-color: transparent;
9
8
  --hop-comp-button-ghost-disabled-background-color: transparent;
10
9
  --hop-comp-button-ghost-danger-border-color: transparent;
@@ -351,7 +350,9 @@
351
350
  --hop-font-family-tertiary: 'ABC Favorit Mono', Consolas, 'SF Mono', monospace;
352
351
  --hop-font-family-secondary: 'Inter', Helvetica, Arial, sans-serif;
353
352
  --hop-font-family-primary: 'ABC Favorit', Helvetica, Arial, sans-serif;
354
- --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;
355
356
  --hop-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08);
356
357
  --hop-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08);
357
358
  --hop-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.10);
@@ -527,12 +528,15 @@
527
528
  --hop-coastal-75: #bae6ff;
528
529
  --hop-coastal-50: #d9efff;
529
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);
530
533
  --hop-comp-field-border-radius: var(--hop-border-radius-2-5);
534
+ --hop-comp-card-second-level-box-shadow: var(--hop-shadow-tactility-card);
531
535
  --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
532
- --hop-comp-button-danger-box-shadow: var(--hop-shadow-inset-bevel);
533
- --hop-comp-button-upsell-box-shadow: var(--hop-shadow-inset-bevel);
534
- --hop-comp-button-secondary-box-shadow: var(--hop-shadow-inset-bevel);
535
- --hop-comp-button-primary-box-shadow: var(--hop-shadow-inset-bevel);
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);
536
540
  --hop-shape-rounded-sm: var(--hop-border-radius-1);
537
541
  --hop-shape-rounded-md: var(--hop-border-radius-2);
538
542
  --hop-shape-rounded-lg: var(--hop-border-radius-3);
@@ -1237,6 +1241,47 @@
1237
1241
  --hop-space-stack-md: var(--hop-space-160);
1238
1242
  --hop-space-stack-sm: var(--hop-space-80);
1239
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);
1240
1285
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1241
1286
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1242
1287
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-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 19:58:27 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,8 @@
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);
525
529
  --hop-comp-card-second-level-box-shadow: var(--hop-shadow-none);
526
530
  --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
527
531
  --hop-comp-button-ghost-danger-box-shadow: var(--hop-shadow-none);
@@ -1235,6 +1239,47 @@
1235
1239
  --hop-space-stack-md: var(--hop-space-160);
1236
1240
  --hop-space-stack-sm: var(--hop-space-80);
1237
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);
1238
1283
  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
1239
1284
  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
1240
1285
  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-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.3",
4
+ "version": "5.1.4",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {