@hashicorp/design-system-tokens 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hashicorp/design-system-tokens
 
+## 1.3.0
+
+### Minor Changes
+
+- [#740](https://github.com/hashicorp/design-system/pull/740) [`92c83961f`](https://github.com/hashicorp/design-system/commit/92c83961f0e8b01e52e3c596c85871ec5cf8c94d) Thanks [@alex-ju](https://github.com/alex-ju)! - Add design tokens for indeterminate `Checkbox`
+
+## 1.2.0
+
+### Minor Changes
+
+- [#629](https://github.com/hashicorp/design-system/pull/629) [`a079992f`](https://github.com/hashicorp/design-system/commit/a079992fbbed11812fcf4cdd4409a00fa2d246f1) Thanks [@didoo](https://github.com/didoo)! - added component-level design tokens for `Tabs` component
+
+* [#646](https://github.com/hashicorp/design-system/pull/646) [`ecbe26df`](https://github.com/hashicorp/design-system/commit/ecbe26df6bdbaf7b4f00c70d016eead0da9168f0) Thanks [@jorytindall](https://github.com/jorytindall)! - Updated the box-shadow values for overlay tokens.
+
+### Patch Changes
+
+- [#636](https://github.com/hashicorp/design-system/pull/636) [`27a283a5`](https://github.com/hashicorp/design-system/commit/27a283a52c2828b32c282401f91df9bd929f9dda) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - Add copyright notice to license file
+
 ## 1.1.0
 
 ### Minor Changes

package/LICENSE.md

@@ -1,3 +1,5 @@
+Copyright (c) 2021 HashiCorp, Inc
+
 Mozilla Public License Version 2.0
 ==================================
 

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 16 Jul 2022 14:15:33 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Sat, 16 Jul 2022 14:15:33 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Sat, 16 Jul 2022 14:15:33 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Thu, 01 Sep 2022 22:06:03 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Wed, 28 Sep 2022 11:15:46 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 GMT
  */
 
 :root {
@@ -166,14 +166,14 @@
   --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
   --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
   --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
-  --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
+  --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
   --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
   --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
   --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
   --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
   --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
-  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
+  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
   --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
   --token-form-label-color: #0c0c0e;
@@ -187,7 +187,9 @@
   --token-form-checkbox-border-width: 1px;
   --token-form-checkbox-background-image-size: 12px;
   --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-control-base-foreground-value-color: #0c0c0e;
   --token-form-control-base-foreground-placeholder-color: #656a76;
   --token-form-control-base-surface-color-default: #ffffff;
@@ -244,6 +246,16 @@
   --token-form-toggle-transition-duration: 0.2s;
   --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
   --token-form-toggle-thumb-size: 16px;
+  --token-tabs-tab-height: 36px;
+  --token-tabs-tab-padding-horizontal: 12px;
+  --token-tabs-tab-padding-vertical: 0px;
+  --token-tabs-tab-border-radius: 5px;
+  --token-tabs-tab-focus-inset: 6px;
+  --token-tabs-tab-gutter: 6px;
+  --token-tabs-indicator-height: 3px;
+  --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-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

@@ -3550,7 +3550,7 @@
     ]
   },
   {
-    "value": "0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599",
+    "value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559",
     "original": {
       "value": "{elevation.overlay.box-shadow-01.value}, {elevation.overlay.box-shadow-02.value}"
     },
@@ -3669,7 +3669,7 @@
     ]
   },
   {
-    "value": "0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599",
+    "value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559",
     "original": {
       "value": "{elevation.overlay.box-shadow-border.value}, {elevation.overlay.box-shadow.value}"
     },
@@ -3948,6 +3948,27 @@
       "data-url"
     ]
   },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dash' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dash' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url-indeterminate",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url-indeterminate"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "data-url-indeterminate"
+    ]
+  },
   {
     "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
     "comment": "notice: the 'tick' color is hardcoded here!",
@@ -3969,6 +3990,27 @@
       "data-url-disabled"
     ]
   },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dash' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dash' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url-indeterminate-disabled"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "data-url-indeterminate-disabled"
+    ]
+  },
   {
     "value": "#0c0c0e",
     "type": "color",
@@ -5201,6 +5243,204 @@
       "thumb-size"
     ]
   },
+  {
+    "value": "36px",
+    "type": "size",
+    "original": {
+      "value": "36",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-height",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "height"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "height"
+    ]
+  },
+  {
+    "value": "12px",
+    "type": "size",
+    "original": {
+      "value": "12",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-padding-horizontal",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "padding",
+      "subitem": "horizontal"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "padding",
+      "horizontal"
+    ]
+  },
+  {
+    "value": "0px",
+    "type": "size",
+    "original": {
+      "value": "0",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-padding-vertical",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "padding",
+      "subitem": "vertical"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "padding",
+      "vertical"
+    ]
+  },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-border-radius",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "border-radius"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "border-radius"
+    ]
+  },
+  {
+    "value": "6px",
+    "type": "size",
+    "original": {
+      "value": "6",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-focus-inset",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "focus-inset"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "focus-inset"
+    ]
+  },
+  {
+    "value": "6px",
+    "type": "size",
+    "original": {
+      "value": "6",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-gutter",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "gutter"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "gutter"
+    ]
+  },
+  {
+    "value": "3px",
+    "type": "size",
+    "original": {
+      "value": "3",
+      "type": "size"
+    },
+    "name": "token-tabs-indicator-height",
+    "attributes": {
+      "category": "tabs",
+      "type": "indicator",
+      "item": "height"
+    },
+    "path": [
+      "tabs",
+      "indicator",
+      "height"
+    ]
+  },
+  {
+    "value": "cubic-bezier(0.5, 1, 0.89, 1)",
+    "original": {
+      "value": "cubic-bezier(0.5, 1, 0.89, 1)"
+    },
+    "name": "token-tabs-indicator-transition-function",
+    "attributes": {
+      "category": "tabs",
+      "type": "indicator",
+      "item": "transition",
+      "subitem": "function"
+    },
+    "path": [
+      "tabs",
+      "indicator",
+      "transition",
+      "function"
+    ]
+  },
+  {
+    "value": "0.6s",
+    "type": "time",
+    "unit": "s",
+    "original": {
+      "value": "0.6",
+      "type": "time",
+      "unit": "s"
+    },
+    "name": "token-tabs-indicator-transition-duration",
+    "attributes": {
+      "category": "tabs",
+      "type": "indicator",
+      "item": "transition",
+      "subitem": "duration"
+    },
+    "path": [
+      "tabs",
+      "indicator",
+      "transition",
+      "duration"
+    ]
+  },
+  {
+    "value": "1px",
+    "type": "size",
+    "original": {
+      "value": "1",
+      "type": "size"
+    },
+    "name": "token-tabs-divider-height",
+    "attributes": {
+      "category": "tabs",
+      "type": "divider",
+      "item": "height"
+    },
+    "path": [
+      "tabs",
+      "divider",
+      "height"
+    ]
+  },
   {
     "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

@@ -3504,7 +3504,7 @@
     ]
   },
   {
-    "value": "0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599",
+    "value": "0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559",
     "original": {
       "value": "{elevation.overlay.box-shadow-01.value}, {elevation.overlay.box-shadow-02.value}"
     },
@@ -3623,7 +3623,7 @@
     ]
   },
   {
-    "value": "0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599",
+    "value": "0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559",
     "original": {
       "value": "{elevation.overlay.box-shadow-border.value}, {elevation.overlay.box-shadow.value}"
     },
@@ -3902,6 +3902,27 @@
       "data-url"
     ]
   },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dash' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dash' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url-indeterminate",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url-indeterminate"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "data-url-indeterminate"
+    ]
+  },
   {
     "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e\")",
     "comment": "notice: the 'tick' color is hardcoded here!",
@@ -3923,6 +3944,27 @@
       "data-url-disabled"
     ]
   },
+  {
+    "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+    "comment": "notice: the 'dash' color is hardcoded here!",
+    "original": {
+      "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e\")",
+      "comment": "notice: the 'dash' color is hardcoded here!"
+    },
+    "name": "token-form-checkbox-background-image-data-url-indeterminate-disabled",
+    "attributes": {
+      "category": "form",
+      "type": "checkbox",
+      "item": "background-image",
+      "subitem": "data-url-indeterminate-disabled"
+    },
+    "path": [
+      "form",
+      "checkbox",
+      "background-image",
+      "data-url-indeterminate-disabled"
+    ]
+  },
   {
     "value": "#0c0c0e",
     "type": "color",
@@ -5155,6 +5197,204 @@
       "thumb-size"
     ]
   },
+  {
+    "value": "36px",
+    "type": "size",
+    "original": {
+      "value": "36",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-height",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "height"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "height"
+    ]
+  },
+  {
+    "value": "12px",
+    "type": "size",
+    "original": {
+      "value": "12",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-padding-horizontal",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "padding",
+      "subitem": "horizontal"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "padding",
+      "horizontal"
+    ]
+  },
+  {
+    "value": "0px",
+    "type": "size",
+    "original": {
+      "value": "0",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-padding-vertical",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "padding",
+      "subitem": "vertical"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "padding",
+      "vertical"
+    ]
+  },
+  {
+    "value": "5px",
+    "type": "size",
+    "original": {
+      "value": "5",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-border-radius",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "border-radius"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "border-radius"
+    ]
+  },
+  {
+    "value": "6px",
+    "type": "size",
+    "original": {
+      "value": "6",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-focus-inset",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "focus-inset"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "focus-inset"
+    ]
+  },
+  {
+    "value": "6px",
+    "type": "size",
+    "original": {
+      "value": "6",
+      "type": "size"
+    },
+    "name": "token-tabs-tab-gutter",
+    "attributes": {
+      "category": "tabs",
+      "type": "tab",
+      "item": "gutter"
+    },
+    "path": [
+      "tabs",
+      "tab",
+      "gutter"
+    ]
+  },
+  {
+    "value": "3px",
+    "type": "size",
+    "original": {
+      "value": "3",
+      "type": "size"
+    },
+    "name": "token-tabs-indicator-height",
+    "attributes": {
+      "category": "tabs",
+      "type": "indicator",
+      "item": "height"
+    },
+    "path": [
+      "tabs",
+      "indicator",
+      "height"
+    ]
+  },
+  {
+    "value": "cubic-bezier(0.5, 1, 0.89, 1)",
+    "original": {
+      "value": "cubic-bezier(0.5, 1, 0.89, 1)"
+    },
+    "name": "token-tabs-indicator-transition-function",
+    "attributes": {
+      "category": "tabs",
+      "type": "indicator",
+      "item": "transition",
+      "subitem": "function"
+    },
+    "path": [
+      "tabs",
+      "indicator",
+      "transition",
+      "function"
+    ]
+  },
+  {
+    "value": "0.6s",
+    "type": "time",
+    "unit": "s",
+    "original": {
+      "value": "0.6",
+      "type": "time",
+      "unit": "s"
+    },
+    "name": "token-tabs-indicator-transition-duration",
+    "attributes": {
+      "category": "tabs",
+      "type": "indicator",
+      "item": "transition",
+      "subitem": "duration"
+    },
+    "path": [
+      "tabs",
+      "indicator",
+      "transition",
+      "duration"
+    ]
+  },
+  {
+    "value": "1px",
+    "type": "size",
+    "original": {
+      "value": "1",
+      "type": "size"
+    },
+    "name": "token-tabs-divider-height",
+    "attributes": {
+      "category": "tabs",
+      "type": "divider",
+      "item": "height"
+    },
+    "path": [
+      "tabs",
+      "divider",
+      "height"
+    ]
+  },
   {
     "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 Sat, 16 Jul 2022 14:15:33 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Sat, 16 Jul 2022 14:15:33 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Sat, 16 Jul 2022 14:15:33 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Thu, 01 Sep 2022 22:06:03 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 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 Wed, 28 Sep 2022 11:15:46 GMT
+ * Generated on Wed, 30 Nov 2022 15:22:24 GMT
  */
 
 :root {
@@ -164,14 +164,14 @@
   --token-elevation-mid-box-shadow: 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
   --token-elevation-high-box-shadow: 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
   --token-elevation-higher-box-shadow: 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
-  --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
+  --token-elevation-overlay-box-shadow: 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-surface-inset-box-shadow: inset 0 0 0 1px #656a764d, inset 0px 1px 2px 1px #656a761a;
   --token-surface-base-box-shadow: 0 0 0 1px #656a7633;
   --token-surface-low-box-shadow: 0 0 0 1px #656a7626, 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
   --token-surface-mid-box-shadow: 0 0 0 1px #656a7626, 0px 2px 3px 0px #656a761a, 0px 8px 16px -10px #656a7633;
   --token-surface-high-box-shadow: 0 0 0 1px #656a7640, 0px 2px 3px 0px #656a7626, 0px 16px 16px -10px #656a7633;
   --token-surface-higher-box-shadow: 0 0 0 1px #656a7633, 0px 2px 3px 0px #656a761a, 0px 12px 28px 0px #656a7640;
-  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4566, 0px 2px 3px 0px #3b3d4580, 0px 12px 24px 0px #3b3d4599;
+  --token-surface-overlay-box-shadow: 0 0 0 1px #3b3d4540, 0px 2px 3px 0px #3b3d4540, 0px 12px 24px 0px #3b3d4559;
   --token-focus-ring-action-box-shadow: inset 0 0 0 1px #0c56e9, 0 0 0 3px #5990ff;
   --token-focus-ring-critical-box-shadow: inset 0 0 0 1px #c00005, 0 0 0 3px #dd7578;
   --token-form-label-color: #0c0c0e;
@@ -185,7 +185,9 @@
   --token-form-checkbox-border-width: 1px;
   --token-form-checkbox-background-image-size: 12px;
   --token-form-checkbox-background-image-data-url: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%23FFF'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-checkbox-background-image-data-url-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.78033 3.21967C10.0732 3.51256 10.0732 3.98744 9.78033 4.28033L5.28033 8.78033C4.98744 9.07322 4.51256 9.07322 4.21967 8.78033L2.21967 6.78033C1.92678 6.48744 1.92678 6.01256 2.21967 5.71967C2.51256 5.42678 2.98744 5.42678 3.28033 5.71967L4.75 7.18934L8.71967 3.21967C9.01256 2.92678 9.48744 2.92678 9.78033 3.21967Z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'tick' color is hardcoded here! */
+  --token-form-checkbox-background-image-data-url-indeterminate-disabled: url("data:image/svg+xml,%3csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m2.03125,6a0.66146,0.75 0 0 1 0.66146,-0.75l6.61458,0a0.66146,0.75 0 0 1 0,1.5l-6.61458,0a0.66146,0.75 0 0 1 -0.66146,-0.75z' fill='%238C909C'/%3e%3c/svg%3e"); /* notice: the 'dash' color is hardcoded here! */
   --token-form-control-base-foreground-value-color: #0c0c0e;
   --token-form-control-base-foreground-placeholder-color: #656a76;
   --token-form-control-base-surface-color-default: #ffffff;
@@ -242,6 +244,16 @@
   --token-form-toggle-transition-duration: 0.2s;
   --token-form-toggle-transition-timing-function: cubic-bezier(0.68, -0.2, 0.265, 1.15);
   --token-form-toggle-thumb-size: 16px;
+  --token-tabs-tab-height: 36px;
+  --token-tabs-tab-padding-horizontal: 12px;
+  --token-tabs-tab-padding-vertical: 0px;
+  --token-tabs-tab-border-radius: 5px;
+  --token-tabs-tab-focus-inset: 6px;
+  --token-tabs-tab-gutter: 6px;
+  --token-tabs-indicator-height: 3px;
+  --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-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.1.0",
+  "version": "1.3.0",
   "description": "HashiCorp Design Tokens",
   "keywords": [
     "hashicorp",