@hashicorp/design-system-tokens 1.10.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @hashicorp/design-system-tokens
 
+## 2.0.0
+
+### Major Changes
+
+New tokens added for large and medium size `Tab` variants. The "medium" tokens replace the former equivalent tokens which were not differentiated by size.
+
+- `--token-tabs-tab-height-medium` (**Replaces `--token-tabs-tab-height`**)
+- `--token-tabs-tab-height-large` (**New**)
+- `--token-tabs-tab-padding-horizontal-medium` (**Replaces `--token-tabs-tab-padding-horizontal`**)
+- `--token-tabs-tab-padding-horizontal-large` (**New**)
+
+<small class="doc-whats-new-changelog-metadata">[#1937](https://github.com/hashicorp/design-system/pull/1937)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+## 1.11.0
+
+### Minor Changes
+
+Updated `vault`, `vault-secrets`, and `vault-radar` brand color values
+
+<small class="doc-whats-new-changelog-metadata">[#1914](https://github.com/hashicorp/design-system/pull/1914)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
+Added design token for `terraform-brand-on-dark` color
+
+<small class="doc-whats-new-changelog-metadata">[#1915](https://github.com/hashicorp/design-system/pull/1915)</small>
+
+<div class="doc-whats-new-changelog-separator"></div>
+
 ## 1.10.0
 
 ### Minor Changes

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Jan 2024 14:44:08 GMT
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
  */
 
 .hds-border-primary { border: 1px solid var(--token-color-border-primary); }

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

@@ -1,13 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Jan 2024 14:44:08 GMT
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
  */
 
+.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
+.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-inset { box-shadow: var(--token-elevation-inset-box-shadow); }
 .hds-elevation-low { box-shadow: var(--token-elevation-low-box-shadow); }
 .hds-elevation-mid { box-shadow: var(--token-elevation-mid-box-shadow); }
-.hds-elevation-high { box-shadow: var(--token-elevation-high-box-shadow); }
-.hds-elevation-higher { box-shadow: var(--token-elevation-higher-box-shadow); }
 .hds-elevation-overlay { box-shadow: var(--token-elevation-overlay-box-shadow); }
 .hds-surface-inset { box-shadow: var(--token-surface-inset-box-shadow); }
 .hds-surface-base { box-shadow: var(--token-surface-base-box-shadow); }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Jan 2024 14:44:08 GMT
+ * Generated on Thu, 08 Feb 2024 22:22:41 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 Wed, 24 Jan 2024 14:44:08 GMT
+ * Generated on Thu, 08 Feb 2024 22:22:41 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, 24 Jan 2024 14:44:08 GMT
+ * Generated on Thu, 08 Feb 2024 22:22:41 GMT
  */
 
 :root {
@@ -129,6 +129,7 @@
   --token-color-packer-gradient-faint-start: #f3fcff; /* this is the 'packer-50' value at 25% opacity on white */
   --token-color-packer-gradient-faint-stop: #d4f2ff;
   --token-color-terraform-brand: #7b42bc;
+  --token-color-terraform-brand-on-dark: #a067da; /* this is an alternative brand color meant to be used on dark backgrounds */
   --token-color-terraform-foreground: #773cb4;
   --token-color-terraform-surface: #f4ecff;
   --token-color-terraform-border: #ebdbfc;
@@ -144,7 +145,7 @@
   --token-color-vagrant-gradient-primary-stop: #7dadff;
   --token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */
   --token-color-vagrant-gradient-faint-stop: #d6ebff;
-  --token-color-vault-radar-brand: #ffd814;
+  --token-color-vault-radar-brand: #ffcf25;
   --token-color-vault-radar-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault radar would not work */
   --token-color-vault-radar-foreground: #9a6f00;
   --token-color-vault-radar-surface: #fff9cf;
@@ -153,7 +154,7 @@
   --token-color-vault-radar-gradient-primary-stop: #ffe543;
   --token-color-vault-radar-gradient-faint-start: #fffdf2; /* this is the 'vault-radar-50' value at 25% opacity on white */
   --token-color-vault-radar-gradient-faint-stop: #fff9cf;
-  --token-color-vault-secrets-brand: #ffd814;
+  --token-color-vault-secrets-brand: #ffcf25;
   --token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */
   --token-color-vault-secrets-foreground: #9a6f00;
   --token-color-vault-secrets-surface: #fff9cf;
@@ -162,7 +163,7 @@
   --token-color-vault-secrets-gradient-primary-stop: #ffe543;
   --token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */
   --token-color-vault-secrets-gradient-faint-stop: #fff9cf;
-  --token-color-vault-brand: #ffd814;
+  --token-color-vault-brand: #ffcf25;
   --token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
   --token-color-vault-foreground: #9a6f00;
   --token-color-vault-surface: #fff9cf;
@@ -179,11 +180,11 @@
   --token-color-waypoint-gradient-primary-stop: #62d4dc;
   --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */
   --token-color-waypoint-gradient-faint-stop: #e0fcff;
+  --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-inset-box-shadow: inset 0px 1px 2px 1px #656a761a;
   --token-elevation-low-box-shadow: 0px 1px 1px 0px #656a760d, 0px 2px 2px 0px #656a760d;
   --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 #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;
@@ -194,20 +195,6 @@
   --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;
-  --token-form-legend-color: #0c0c0e;
-  --token-form-helper-text-color: #656a76;
-  --token-form-indicator-optional-color: #656a76;
-  --token-form-error-color: #c00005;
-  --token-form-error-icon-size: 14px;
-  --token-form-checkbox-size: 16px;
-  --token-form-checkbox-border-radius: 3px;
-  --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;
@@ -230,6 +217,20 @@
   --token-form-control-padding: 7px; /* Notice: we have to take in account the border, so it's 1px less than in Figma. */
   --token-form-control-border-radius: 5px;
   --token-form-control-border-width: 1px;
+  --token-form-label-color: #0c0c0e;
+  --token-form-legend-color: #0c0c0e;
+  --token-form-helper-text-color: #656a76;
+  --token-form-indicator-optional-color: #656a76;
+  --token-form-error-color: #c00005;
+  --token-form-error-icon-size: 14px;
+  --token-form-checkbox-size: 16px;
+  --token-form-checkbox-border-radius: 3px;
+  --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-radio-size: 16px;
   --token-form-radio-border-width: 1px;
   --token-form-radio-background-image-size: 12px;
@@ -297,8 +298,10 @@
   --token-side-nav-color-surface-primary: #0c0c0e;
   --token-side-nav-color-surface-interactive-hover: #3b3d45;
   --token-side-nav-color-surface-interactive-active: #656a76;
-  --token-tabs-tab-height: 36px;
-  --token-tabs-tab-padding-horizontal: 12px;
+  --token-tabs-tab-height-medium: 36px;
+  --token-tabs-tab-height-large: 48px;
+  --token-tabs-tab-padding-horizontal-medium: 12px;
+  --token-tabs-tab-padding-horizontal-large: 20px;
   --token-tabs-tab-padding-vertical: 0px;
   --token-tabs-tab-border-radius: 5px;
   --token-tabs-tab-focus-inset: 6px;