@hopper-ui/tokens 5.1.1 → 5.1.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hopper-ui/tokens
 
+## 5.1.3
+
+### Patch Changes
+
+- 092c1a7: Add Card, Select, and Combobox component tokens for themeable branding:
+  - Add `comp-card` tokens for border radius, background color, border color, and box shadow across both variants (main, second-level)
+  - Migrate Card CSS from hardcoded semantic values to `--hop-comp-card-*` tokens
+  - Add `comp-select` tokens for active and hover states (background, border, text colors)
+  - Migrate Select and ComboBox CSS from hardcoded semantic values to `--hop-comp-select-*` and `--hop-comp-input-*` tokens.
+
+## 5.1.2
+
+### Patch Changes
+
+- 8dc9376: Add Input component tokens for themeable branding:
+  - Add `-comp-field` tokens for background, border, text, icon, placeholder, and prefill colors across all states (default, hover, focus, disabled, error)
+  - Migrate Input, InputGroup, TextArea, TextField, SearchField, NumberField, and RemainingCharacterCount CSS from hardcoded semantic values to `--hop-comp-field-*` tokens.
+
 ## 5.1.1
 
 ### Patch Changes

package/dist/sharegate/tokens.css

@@ -1,9 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Feb 2026 16:37:35 GMT
+ * Generated on Wed, 11 Feb 2026 19:58:27 GMT
  */
 
 :root {
+  --hop-comp-card-second-level-box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.05);
   --hop-comp-button-ghost-disabled-border-color: transparent;
   --hop-comp-button-ghost-disabled-background-color: transparent;
   --hop-comp-button-ghost-danger-border-color: transparent;
@@ -526,6 +527,8 @@
   --hop-coastal-75: #bae6ff;
   --hop-coastal-50: #d9efff;
   --hop-coastal-25: #f0f8ff;
+  --hop-comp-field-border-radius: var(--hop-border-radius-2-5);
+  --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
   --hop-comp-button-danger-box-shadow: var(--hop-shadow-inset-bevel);
   --hop-comp-button-upsell-box-shadow: var(--hop-shadow-inset-bevel);
   --hop-comp-button-secondary-box-shadow: var(--hop-shadow-inset-bevel);
@@ -1234,6 +1237,31 @@
   --hop-space-stack-md: var(--hop-space-160);
   --hop-space-stack-sm: var(--hop-space-80);
   --hop-space-stack-xs: var(--hop-space-40);
+  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
+  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
+  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
+  --hop-comp-field-icon-color-press: var(--hop-neutral-icon-press);
+  --hop-comp-field-icon-color-hover: var(--hop-neutral-icon-hover);
+  --hop-comp-field-icon-color: var(--hop-neutral-icon);
+  --hop-comp-field-text-color-error: var(--hop-danger-text-weak);
+  --hop-comp-field-text-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-comp-field-text-color: var(--hop-neutral-text);
+  --hop-comp-field-border-color-disabled: var(--hop-neutral-border-disabled);
+  --hop-comp-field-border-color-error: var(--hop-danger-border-strong);
+  --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
+  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
+  --hop-comp-field-border-color: var(--hop-neutral-border-weak);
+  --hop-comp-field-background-color-disabled: var(--hop-neutral-surface);
+  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-weak-hover);
+  --hop-comp-field-background-color: var(--hop-neutral-surface-weak);
+  --hop-comp-select-text-color-hover: var(--hop-neutral-text-press);
+  --hop-comp-select-border-color-active: var(--hop-primary-border);
+  --hop-comp-select-background-color-active: var(--hop-neutral-surface-weak-selected);
+  --hop-comp-card-second-level-border-color: var(--hop-neutral-border-weakest);
+  --hop-comp-card-second-level-background-color: var(--hop-neutral-surface);
+  --hop-comp-card-main-border-color: var(--hop-neutral-surface-weakest);
+  --hop-comp-card-main-background-color: var(--hop-neutral-surface-weakest);
+  --hop-comp-card-border-radius: var(--hop-shape-rounded-lg);
   --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
   --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
   --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);

package/dist/workleap/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 10 Feb 2026 16:37:35 GMT
+ * Generated on Wed, 11 Feb 2026 19:58:27 GMT
  */
 
 :root {
@@ -522,6 +522,8 @@
   --hop-coastal-75: #bae6ff;
   --hop-coastal-50: #d9efff;
   --hop-coastal-25: #f0f8ff;
+  --hop-comp-card-second-level-box-shadow: var(--hop-shadow-none);
+  --hop-comp-card-main-box-shadow: var(--hop-shadow-none);
   --hop-comp-button-ghost-danger-box-shadow: var(--hop-shadow-none);
   --hop-comp-button-ghost-secondary-box-shadow: var(--hop-shadow-none);
   --hop-comp-button-ghost-primary-box-shadow: var(--hop-shadow-none);
@@ -1233,6 +1235,32 @@
   --hop-space-stack-md: var(--hop-space-160);
   --hop-space-stack-sm: var(--hop-space-80);
   --hop-space-stack-xs: var(--hop-space-40);
+  --hop-comp-field-prefill-color: var(--hop-neutral-text-weak);
+  --hop-comp-field-placeholder-color: var(--hop-neutral-text-weakest);
+  --hop-comp-field-icon-color-disabled: var(--hop-neutral-icon-disabled);
+  --hop-comp-field-icon-color-press: var(--hop-neutral-icon-press);
+  --hop-comp-field-icon-color-hover: var(--hop-neutral-icon-hover);
+  --hop-comp-field-icon-color: var(--hop-neutral-icon);
+  --hop-comp-field-text-color-error: var(--hop-danger-text-weak);
+  --hop-comp-field-text-color-disabled: var(--hop-neutral-text-disabled);
+  --hop-comp-field-text-color: var(--hop-neutral-text);
+  --hop-comp-field-border-color-disabled: var(--hop-neutral-border-disabled);
+  --hop-comp-field-border-color-error: var(--hop-danger-border-strong);
+  --hop-comp-field-border-color-focus: var(--hop-primary-border-focus);
+  --hop-comp-field-border-color-hover: var(--hop-neutral-border-hover);
+  --hop-comp-field-border-color: var(--hop-neutral-border);
+  --hop-comp-field-background-color-disabled: var(--hop-neutral-surface-disabled);
+  --hop-comp-field-background-color-hover: var(--hop-neutral-surface-hover);
+  --hop-comp-field-background-color: var(--hop-neutral-surface);
+  --hop-comp-field-border-radius: var(--hop-shape-rounded-md);
+  --hop-comp-select-text-color-hover: var(--hop-neutral-text-hover);
+  --hop-comp-select-border-color-active: var(--hop-neutral-border-selected);
+  --hop-comp-select-background-color-active: var(--hop-neutral-surface);
+  --hop-comp-card-second-level-border-color: var(--hop-neutral-surface-weakest);
+  --hop-comp-card-second-level-background-color: var(--hop-neutral-surface-weakest);
+  --hop-comp-card-main-border-color: var(--hop-neutral-border-weak);
+  --hop-comp-card-main-background-color: var(--hop-neutral-surface);
+  --hop-comp-card-border-radius: var(--hop-shape-rounded-md);
   --hop-comp-button-ghost-disabled-text-color: var(--hop-neutral-text-disabled);
   --hop-comp-button-disabled-border-color: var(--hop-neutral-surface-disabled);
   --hop-comp-button-disabled-background-color: var(--hop-neutral-surface-disabled);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hopper-ui/tokens",
   "author": "Workleap",
-  "version": "5.1.1",
+  "version": "5.1.3",
   "description": "The tokens package.",
   "license": "Apache-2.0",
   "repository": {