@hashicorp/design-system-tokens 1.4.2 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hashicorp/design-system-tokens
 
+## 1.6.0
+
+### Minor Changes
+
+- [#1452](https://github.com/hashicorp/design-system/pull/1452) [`b2ec25b39`](https://github.com/hashicorp/design-system/commit/b2ec25b399ba9aad5f8ae0b1f18a1bef9a6543e0) Thanks [@alex-ju](https://github.com/alex-ju)! - Add design token for loading state icon on search input
+
+## 1.5.0
+
+### Minor Changes
+
+- [#1283](https://github.com/hashicorp/design-system/pull/1283) [`d0ae66503`](https://github.com/hashicorp/design-system/commit/d0ae665033e6b83a65c2dcde8630985f76872901) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - - Add new `TooltipButton` component and `hds-tooltip` modifier
+  - Add design tokens for `Tooltip`
+
 ## 1.4.2
 
 ### Patch Changes

package/README.md

@@ -32,7 +32,7 @@ Then import one of those files in your app's style file (`app.scss` or similar):
 
 ## Usage
 
-See the dedicated page on the components website: https://design-system-components-hashicorp.vercel.app/foundations/tokens
+See the dedicated page on the components website: https://helios.hashicorp.design/foundations/tokens
 
 ## Contributing
 

package/dist/devdot/css/helpers/color.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-border-primary { border: 1px solid var(--token-color-border-primary); }

package/dist/devdot/css/helpers/elevation.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }

package/dist/devdot/css/helpers/focus-ring.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }

package/dist/devdot/css/helpers/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }

package/dist/devdot/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Apr 2023 10:45:24 GMT
+ * Generated on Wed, 28 Jun 2023 07:32:09 GMT
  */
 
 :root {
@@ -234,6 +234,7 @@
   --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
   --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
   --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
+  --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */
   --token-form-toggle-width: 32px;
   --token-form-toggle-height: 16px;
   --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */
@@ -282,6 +283,14 @@
   --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1);
   --token-tabs-indicator-transition-duration: 0.6s;
   --token-tabs-divider-height: 1px;
+  --token-tooltip-border-radius: 5px;
+  --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast);
+  --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700);
+  --token-tooltip-focus-offset: -2px;
+  --token-tooltip-max-width: 280px;
+  --token-tooltip-padding-horizontal: 12px;
+  --token-tooltip-padding-vertical: 8px;
+  --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace;

package/dist/docs/devdot/tokens.json

@@ -4991,6 +4991,27 @@
       "data-url-search-cancel"
     ]
   },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+    "comment": "notice: the icon color and animation are hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+      "comment": "notice: the icon color and animation are hardcoded here!"
+    },
+    "name": "token-form-text-input-background-image-data-url-search-loading",
+    "attributes": {
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "data-url-search-loading"
+    },
+    "path": [
+      "form",
+      "text-input",
+      "background-image",
+      "data-url-search-loading"
+    ]
+  },
   {
     "value": "32px",
     "type": "size",
@@ -6005,6 +6026,158 @@
       "height"
     ]
   },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-tooltip-border-radius",
+    "attributes": {
+      "category": "tooltip",
+      "type": "border-radius"
+    },
+    "path": [
+      "tooltip",
+      "border-radius"
+    ]
+  },
+  {
+    "value": "var(--token-color-foreground-high-contrast)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-foreground-high-contrast)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-tooltip-color-foreground-primary",
+    "attributes": {
+      "category": "tooltip",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "primary"
+    },
+    "path": [
+      "tooltip",
+      "color",
+      "foreground",
+      "primary"
+    ]
+  },
+  {
+    "value": "var(--token-color-palette-neutral-700)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-palette-neutral-700)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-tooltip-color-surface-primary",
+    "attributes": {
+      "category": "tooltip",
+      "type": "color",
+      "item": "surface",
+      "subitem": "primary"
+    },
+    "path": [
+      "tooltip",
+      "color",
+      "surface",
+      "primary"
+    ]
+  },
+  {
+    "value": "-2px",
+    "type": "size",
+    "original": {
+      "value": "-2",
+      "type": "size"
+    },
+    "name": "token-tooltip-focus-offset",
+    "attributes": {
+      "category": "tooltip",
+      "type": "focus-offset"
+    },
+    "path": [
+      "tooltip",
+      "focus-offset"
+    ]
+  },
+  {
+    "value": "280px",
+    "type": "size",
+    "original": {
+      "value": "280",
+      "type": "size"
+    },
+    "name": "token-tooltip-max-width",
+    "attributes": {
+      "category": "tooltip",
+      "type": "max-width"
+    },
+    "path": [
+      "tooltip",
+      "max-width"
+    ]
+  },
+  {
+    "value": "12px",
+    "type": "size",
+    "original": {
+      "value": "12",
+      "type": "size"
+    },
+    "name": "token-tooltip-padding-horizontal",
+    "attributes": {
+      "category": "tooltip",
+      "type": "padding",
+      "item": "horizontal"
+    },
+    "path": [
+      "tooltip",
+      "padding",
+      "horizontal"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-tooltip-padding-vertical",
+    "attributes": {
+      "category": "tooltip",
+      "type": "padding",
+      "item": "vertical"
+    },
+    "path": [
+      "tooltip",
+      "padding",
+      "vertical"
+    ]
+  },
+  {
+    "value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)",
+    "original": {
+      "value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)"
+    },
+    "name": "token-tooltip-transition-function",
+    "attributes": {
+      "category": "tooltip",
+      "type": "transition",
+      "item": "function"
+    },
+    "path": [
+      "tooltip",
+      "transition",
+      "function"
+    ]
+  },
   {
     "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
     "original": {

package/dist/docs/products/tokens.json

@@ -4945,6 +4945,27 @@
       "data-url-search-cancel"
     ]
   },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+    "comment": "notice: the icon color and animation are hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e\")",
+      "comment": "notice: the icon color and animation are hardcoded here!"
+    },
+    "name": "token-form-text-input-background-image-data-url-search-loading",
+    "attributes": {
+      "category": "form",
+      "type": "text-input",
+      "item": "background-image",
+      "subitem": "data-url-search-loading"
+    },
+    "path": [
+      "form",
+      "text-input",
+      "background-image",
+      "data-url-search-loading"
+    ]
+  },
   {
     "value": "32px",
     "type": "size",
@@ -5959,6 +5980,158 @@
       "height"
     ]
   },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-tooltip-border-radius",
+    "attributes": {
+      "category": "tooltip",
+      "type": "border-radius"
+    },
+    "path": [
+      "tooltip",
+      "border-radius"
+    ]
+  },
+  {
+    "value": "var(--token-color-foreground-high-contrast)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-foreground-high-contrast)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-tooltip-color-foreground-primary",
+    "attributes": {
+      "category": "tooltip",
+      "type": "color",
+      "item": "foreground",
+      "subitem": "primary"
+    },
+    "path": [
+      "tooltip",
+      "color",
+      "foreground",
+      "primary"
+    ]
+  },
+  {
+    "value": "var(--token-color-palette-neutral-700)",
+    "type": "color",
+    "group": "components",
+    "original": {
+      "value": "var(--token-color-palette-neutral-700)",
+      "type": "color",
+      "group": "components"
+    },
+    "name": "token-tooltip-color-surface-primary",
+    "attributes": {
+      "category": "tooltip",
+      "type": "color",
+      "item": "surface",
+      "subitem": "primary"
+    },
+    "path": [
+      "tooltip",
+      "color",
+      "surface",
+      "primary"
+    ]
+  },
+  {
+    "value": "-2px",
+    "type": "size",
+    "original": {
+      "value": "-2",
+      "type": "size"
+    },
+    "name": "token-tooltip-focus-offset",
+    "attributes": {
+      "category": "tooltip",
+      "type": "focus-offset"
+    },
+    "path": [
+      "tooltip",
+      "focus-offset"
+    ]
+  },
+  {
+    "value": "280px",
+    "type": "size",
+    "original": {
+      "value": "280",
+      "type": "size"
+    },
+    "name": "token-tooltip-max-width",
+    "attributes": {
+      "category": "tooltip",
+      "type": "max-width"
+    },
+    "path": [
+      "tooltip",
+      "max-width"
+    ]
+  },
+  {
+    "value": "12px",
+    "type": "size",
+    "original": {
+      "value": "12",
+      "type": "size"
+    },
+    "name": "token-tooltip-padding-horizontal",
+    "attributes": {
+      "category": "tooltip",
+      "type": "padding",
+      "item": "horizontal"
+    },
+    "path": [
+      "tooltip",
+      "padding",
+      "horizontal"
+    ]
+  },
+  {
+    "value": "8px",
+    "type": "size",
+    "original": {
+      "value": "8",
+      "type": "size"
+    },
+    "name": "token-tooltip-padding-vertical",
+    "attributes": {
+      "category": "tooltip",
+      "type": "padding",
+      "item": "vertical"
+    },
+    "path": [
+      "tooltip",
+      "padding",
+      "vertical"
+    ]
+  },
+  {
+    "value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)",
+    "original": {
+      "value": "cubic-bezier(0.54, 1.5, 0.38, 1.11)"
+    },
+    "name": "token-tooltip-transition-function",
+    "attributes": {
+      "category": "tooltip",
+      "type": "transition",
+      "item": "function"
+    },
+    "path": [
+      "tooltip",
+      "transition",
+      "function"
+    ]
+  },
   {
     "value": "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
     "original": {

package/dist/products/css/helpers/color.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-border-primary { border: 1px solid var(--token-color-border-primary); }

package/dist/products/css/helpers/elevation.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }

package/dist/products/css/helpers/focus-ring.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-focus-ring-action-box-shadow { box-shadow: var(--token-focus-ring-action-box-shadow); }

package/dist/products/css/helpers/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 14 Feb 2023 00:14:16 GMT
+ * Generated on Wed, 26 Apr 2023 20:11:40 GMT
  */
 
 .hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }

package/dist/products/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 20 Apr 2023 10:45:24 GMT
+ * Generated on Wed, 28 Jun 2023 07:32:09 GMT
  */
 
 :root {
@@ -232,6 +232,7 @@
   --token-form-text-input-background-image-data-url-time: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%233B3D45'%3e%3cpath d='M8.5 3.75a.75.75 0 00-1.5 0V8c0 .284.16.544.415.67l2.5 1.25a.75.75 0 10.67-1.34L8.5 7.535V3.75z'/%3e%3cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
   --token-form-text-input-background-image-data-url-search: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23656A76'%3e%3cpath d='M7.25 2a5.25 5.25 0 103.144 9.455l2.326 2.325a.75.75 0 101.06-1.06l-2.325-2.326A5.25 5.25 0 007.25 2zM3.5 7.25a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0z' fill-rule='evenodd' clip-rule='evenodd'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
   --token-form-text-input-background-image-data-url-search-cancel: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.78 4.28a.75.75 0 00-1.06-1.06L8 6.94 4.28 3.22a.75.75 0 00-1.06 1.06L6.94 8l-3.72 3.72a.75.75 0 101.06 1.06L8 9.06l3.72 3.72a.75.75 0 101.06-1.06L9.06 8l3.72-3.72z'/%3e%3c/svg%3e"); /* notice: the icon color is hardcoded here! */
+  --token-form-text-input-background-image-data-url-search-loading: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' %3e%3cg fill='%23656A76' fill-rule='evenodd' clip-rule='evenodd'%3e%3canimateTransform attributeName='transform' type='rotate' dur='0.9s' from='0 8 8' to='360 8 8' repeatCount='indefinite'/%3e%3cpath d='M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8z' opacity='.2'/%3e%3cpath d='M7.25.75A.75.75 0 018 0a8 8 0 018 8 .75.75 0 01-1.5 0A6.5 6.5 0 008 1.5a.75.75 0 01-.75-.75z'/%3e%3c/g%3e%3c/svg%3e"); /* notice: the icon color and animation are hardcoded here! */
   --token-form-toggle-width: 32px;
   --token-form-toggle-height: 16px;
   --token-form-toggle-base-surface-color-default: #f1f2f3; /* the toggle has a different base surface color, compared to the other controls */
@@ -280,6 +281,14 @@
   --token-tabs-indicator-transition-function: cubic-bezier(0.5, 1, 0.89, 1);
   --token-tabs-indicator-transition-duration: 0.6s;
   --token-tabs-divider-height: 1px;
+  --token-tooltip-border-radius: 5px;
+  --token-tooltip-color-foreground-primary: var(--token-color-foreground-high-contrast);
+  --token-tooltip-color-surface-primary: var(--token-color-palette-neutral-700);
+  --token-tooltip-focus-offset: -2px;
+  --token-tooltip-max-width: 280px;
+  --token-tooltip-padding-horizontal: 12px;
+  --token-tooltip-padding-vertical: 8px;
+  --token-tooltip-transition-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   --token-typography-font-stack-display: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --token-typography-font-stack-text: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --token-typography-font-stack-code: ui-monospace, Menlo, Consolas, monospace;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-tokens",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "description": "Helios Design Tokens",
   "keywords": [
     "hashicorp",
@@ -23,18 +23,18 @@
   },
   "devDependencies": {
     "@types/fs-extra": "^8.1.2",
-    "@types/lodash": "^4.14.191",
+    "@types/lodash": "^4.14.195",
     "@types/node": "^13.13.52",
     "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "del": "^5.1.0",
     "eslint": "^7.32.0",
-    "fs-extra": "^10.0.0",
+    "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",
     "path": "^0.12.7",
-    "style-dictionary": "^3.0.3",
-    "tinycolor2": "^1.4.2",
+    "style-dictionary": "^3.8.0",
+    "tinycolor2": "^1.6.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.9.5"
   }