@hopper-ui/tokens 5.1.4 → 5.1.5

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 +34 -1
  3. package/dist/workleap/tokens.css +34 -1
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @hopper-ui/tokens
2
2
 
3
+ ## 5.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - 60c7679: Add Segmented Control and Switch component tokens for themeable branding:
8
+ - Add `comp-control` tokens for background and border colors across all states (default, hover, press, selected, disabled, error, focus)
9
+ - Add `comp-segmented-control` tokens for border radius, text color, icon color, and box shadow across states (default, selected)
10
+ - 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)
11
+ - Migrate SegmentedControl and SegmentedControlItem CSS from hardcoded semantic values to `--hop-comp-control-*` and `--hop-comp-segmented-control-*` tokens
12
+ - Migrate Switch CSS from hardcoded semantic values to `--hop-comp-control-*` and `--hop-comp-switch-*` tokens
13
+
3
14
  ## 5.1.4
4
15
 
5
16
  ### 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 Tue, 17 Feb 2026 20:56:44 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 Tue, 17 Feb 2026 20:56:44 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);
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.5",
5
5
  "description": "The tokens package.",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {