@hopper-ui/tokens 5.1.4 → 5.1.6

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 +17 -0
  2. package/dist/sharegate/tokens.css +34 -1
  3. package/dist/workleap/tokens.css +34 -1
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.6
4
+
5
+ ### Patch Changes
6
+
7
+ - 33aedf7: Fixed Workleap control disabled background color token using neutral.surface instead of neutral.surface-disabled, causing disabled Switch and SegmentedControl to appear white instead of grey
8
+
9
+ ## 5.1.5
10
+
11
+ ### Patch Changes
12
+
13
+ - 60c7679: Add Segmented Control and Switch component tokens for themeable branding:
14
+ - Add `comp-control` tokens for background and border colors across all states (default, hover, press, selected, disabled, error, focus)
15
+ - Add `comp-segmented-control` tokens for border radius, text color, icon color, and box shadow across states (default, selected)
16
+ - Add `comp-switch` tokens for border radius, track filter, track box shadow, thumb filter, background color, and icon colors across all states (default, hover, press, selected, disabled)
17
+ - Migrate SegmentedControl and SegmentedControlItem CSS from hardcoded semantic values to `--hop-comp-control-*` and `--hop-comp-segmented-control-*` tokens
18
+ - Migrate Switch CSS from hardcoded semantic values to `--hop-comp-control-*` and `--hop-comp-switch-*` tokens
19
+
3
20
  ## 5.1.4
4
21
 
5
22
  ### Patch Changes
package/dist/sharegate/tokens.css CHANGED
@@ -1,9 +1,16 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 13 Feb 2026 16:45:31 GMT
3
+ * Generated on Fri, 06 Mar 2026 21:57:27 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%));
11
+ --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;
7
14
  --hop-comp-button-ghost-disabled-border-color: transparent;
8
15
  --hop-comp-button-ghost-disabled-background-color: transparent;
9
16
  --hop-comp-button-ghost-danger-border-color: transparent;
@@ -1302,6 +1309,32 @@
1302
1309
  --hop-comp-select-text-color-hover: var(--hop-neutral-text-press);
1303
1310
  --hop-comp-select-border-color-active: var(--hop-primary-border);
1304
1311
  --hop-comp-select-background-color-active: var(--hop-neutral-surface-weak-selected);
1312
+ --hop-comp-control-border-color-error: var(--hop-danger-border-strong);
1313
+ --hop-comp-control-border-color-disabled: var(--hop-neutral-border-disabled);
1314
+ --hop-comp-control-border-color-focus: var(--hop-primary-border-focus);
1315
+ --hop-comp-control-border-color-selected: var(--hop-primary-border-selected);
1316
+ --hop-comp-control-border-color-press: var(--hop-neutral-border);
1317
+ --hop-comp-control-border-color-hover: var(--hop-neutral-border-weak);
1318
+ --hop-comp-control-border-color: var(--hop-neutral-border-weakest);
1319
+ --hop-comp-control-background-color-error: var(--hop-danger-surface-strong);
1320
+ --hop-comp-control-background-color-disabled: var(--hop-neutral-surface-disabled);
1321
+ --hop-comp-control-background-color-selected: var(--hop-neutral-surface);
1322
+ --hop-comp-control-background-color-press: var(--hop-neutral-surface-press);
1323
+ --hop-comp-control-background-color-hover: var(--hop-neutral-surface-hover);
1324
+ --hop-comp-control-background-color: var(--hop-neutral-surface-weakest);
1325
+ --hop-comp-switch-icon-color-disabled: var(--hop-neutral-icon-disabled);
1326
+ --hop-comp-switch-icon-color-selected: var(--hop-neutral-icon-selected);
1327
+ --hop-comp-switch-icon-color-press: var(--hop-neutral-icon-strong);
1328
+ --hop-comp-switch-icon-color-hover: var(--hop-neutral-icon-strong);
1329
+ --hop-comp-switch-icon-color: var(--hop-neutral-icon-strong);
1330
+ --hop-comp-switch-background-color-selected: var(--hop-primary-surface-selected);
1331
+ --hop-comp-switch-border-radius: var(--hop-shape-pill);
1332
+ --hop-comp-segmented-control-item-border-radius: var(--hop-shape-rounded-sm);
1333
+ --hop-comp-segmented-control-icon-color-selected: var(--hop-neutral-icon);
1334
+ --hop-comp-segmented-control-icon-color: var(--hop-neutral-icon-weakest);
1335
+ --hop-comp-segmented-control-text-color-selected: var(--hop-neutral-text);
1336
+ --hop-comp-segmented-control-text-color: var(--hop-neutral-text-weakest);
1337
+ --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
1305
1338
  --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
1306
1339
  --hop-comp-card-second-level-background-color: var(--hop-neutral-surface);
1307
1340
  --hop-comp-card-main-border-color: var(--hop-neutral-surface-weakest);
package/dist/workleap/tokens.css CHANGED
@@ -1,9 +1,16 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 13 Feb 2026 16:45:31 GMT
3
+ * Generated on Fri, 06 Mar 2026 21:57:28 GMT
4
4
  */
5
5
 
6
6
  :root {
7
+ --hop-comp-switch-thumb-filter-selected: none;
8
+ --hop-comp-switch-thumb-filter: none;
9
+ --hop-comp-switch-track-box-shadow: none;
10
+ --hop-comp-switch-track-filter: none;
11
+ --hop-comp-segmented-control-item-box-shadow-disabled: none;
12
+ --hop-comp-segmented-control-item-box-shadow-selected: none;
13
+ --hop-comp-segmented-control-box-shadow: none;
7
14
  --hop-comp-button-ghost-disabled-border-color: transparent;
8
15
  --hop-comp-button-ghost-disabled-background-color: transparent;
9
16
  --hop-comp-button-ghost-danger-border-color: transparent;
@@ -1301,6 +1308,32 @@
1301
1308
  --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
1302
1309
  --hop-comp-select-border-color-active: var(--hop-neutral-border-selected);
1303
1310
  --hop-comp-select-background-color-active: var(--hop-neutral-surface);
1311
+ --hop-comp-control-border-color-error: var(--hop-danger-border-strong);
1312
+ --hop-comp-control-border-color-disabled: var(--hop-neutral-border-disabled);
1313
+ --hop-comp-control-border-color-focus: var(--hop-primary-border-focus);
1314
+ --hop-comp-control-border-color-selected: var(--hop-neutral-border-selected);
1315
+ --hop-comp-control-border-color-press: var(--hop-neutral-border-press);
1316
+ --hop-comp-control-border-color-hover: var(--hop-neutral-border-hover);
1317
+ --hop-comp-control-border-color: var(--hop-neutral-border);
1318
+ --hop-comp-control-background-color-error: var(--hop-danger-surface-strong);
1319
+ --hop-comp-control-background-color-disabled: var(--hop-neutral-surface-disabled);
1320
+ --hop-comp-control-background-color-selected: var(--hop-neutral-surface-selected);
1321
+ --hop-comp-control-background-color-press: var(--hop-neutral-surface-press);
1322
+ --hop-comp-control-background-color-hover: var(--hop-neutral-surface-hover);
1323
+ --hop-comp-control-background-color: var(--hop-neutral-surface);
1324
+ --hop-comp-switch-icon-color-disabled: var(--hop-neutral-icon-disabled);
1325
+ --hop-comp-switch-icon-color-selected: var(--hop-neutral-icon-selected);
1326
+ --hop-comp-switch-icon-color-press: var(--hop-neutral-icon-press);
1327
+ --hop-comp-switch-icon-color-hover: var(--hop-neutral-icon-hover);
1328
+ --hop-comp-switch-icon-color: var(--hop-neutral-icon);
1329
+ --hop-comp-switch-background-color-selected: var(--hop-neutral-surface-selected);
1330
+ --hop-comp-switch-border-radius: var(--hop-shape-pill);
1331
+ --hop-comp-segmented-control-item-border-radius: var(--hop-shape-rounded-sm);
1332
+ --hop-comp-segmented-control-icon-color-selected: var(--hop-neutral-icon-selected);
1333
+ --hop-comp-segmented-control-icon-color: var(--hop-neutral-icon);
1334
+ --hop-comp-segmented-control-text-color-selected: var(--hop-neutral-text-selected);
1335
+ --hop-comp-segmented-control-text-color: var(--hop-neutral-text);
1336
+ --hop-comp-segmented-control-border-radius: var(--hop-shape-rounded-md);
1304
1337
  --hop-comp-card-second-level-border-color: var(--hop-neutral-surface-weakest);
1305
1338
  --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
1306
1339
  --hop-comp-card-main-border-color: var(--hop-neutral-border-weak);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hopper-ui/tokens",
3
3
  "author": "Workleap",
4
- "version": "5.1.4",
4
+ "version": "5.1.6",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {