@hashicorp/react-design-system-tokens/dist/css/tokens.css

HDS Plus Design Tokens

:root {
  --hdsplus-color-boundary-button-color: #ffffff;
  --hdsplus-color-boundary-button-background-color: #f24c53;
  --hdsplus-color-boundary-button-background-color-hover: #df464c;
  --hdsplus-color-boundary-button-background-color-active: #c63e44;
  --hdsplus-color-boundary-button-background-color-focus: #f24c53;
  --hdsplus-color-consul-button-color: #ffffff;
  --hdsplus-color-consul-button-background-color: #e03875;
  --hdsplus-color-consul-button-background-color-hover: #ca3269;
  --hdsplus-color-consul-button-background-color-active: #b82e60;
  --hdsplus-color-consul-button-background-color-focus: #e03875;
  --hdsplus-color-nomad-button-color: #0c0c0e;
  --hdsplus-color-nomad-button-background-color: #06d092;
  --hdsplus-color-nomad-button-background-color-hover: #06bf86;
  --hdsplus-color-nomad-button-background-color-active: #05b37e;
  --hdsplus-color-nomad-button-background-color-focus: #06d092;
  --hdsplus-color-packer-button-color: #0c0c0e;
  --hdsplus-color-packer-button-background-color: #02a8ef;
  --hdsplus-color-packer-button-background-color-hover: #029bdc;
  --hdsplus-color-packer-button-background-color-active: #028dc9;
  --hdsplus-color-packer-button-background-color-focus: #02a8ef;
  --hdsplus-color-terraform-button-color: #ffffff;
  --hdsplus-color-terraform-button-background-color: #7b42bc;
  --hdsplus-color-terraform-button-background-color-hover: #713dad;
  --hdsplus-color-terraform-button-background-color-active: #65369a;
  --hdsplus-color-terraform-button-background-color-focus: #7b42bc;
  --hdsplus-color-vagrant-button-color: #ffffff;
  --hdsplus-color-vagrant-button-background-color: #1868f2;
  --hdsplus-color-vagrant-button-background-color-hover: #1660df;
  --hdsplus-color-vagrant-button-background-color-active: #1457cb;
  --hdsplus-color-vagrant-button-background-color-focus: #1868f2;
  --hdsplus-color-vault-button-color: #0c0c0e;
  --hdsplus-color-vault-button-background-color: #ffd814;
  --hdsplus-color-vault-button-background-color-hover: #f0cb13;
  --hdsplus-color-vault-button-background-color-active: #e6c212;
  --hdsplus-color-vault-button-background-color-focus: #ffd814;
  --hdsplus-color-waypoint-button-color: #0c0c0e;
  --hdsplus-color-waypoint-button-background-color: #14c6cb;
  --hdsplus-color-waypoint-button-background-color-hover: #12b6bb;
  --hdsplus-color-waypoint-button-background-color-active: #11aaaf;
  --hdsplus-color-waypoint-button-background-color-focus: #14c6cb;
  --hdsplus-color-secondary-high-contrast-button-color: #ffffff;
  --hdsplus-color-secondary-high-contrast-button-background-color: #0c0c0e;
  --hdsplus-color-secondary-high-contrast-button-background-color-hover: #1f1f21;
  --hdsplus-color-secondary-high-contrast-button-background-color-active: #2e2e30;
  --hdsplus-color-secondary-high-contrast-button-background-color-focus: #0c0c0e;
  --hdsplus-typography-font-stack-display-expressive: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-body-300-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --hdsplus-typography-body-300-font-size: 1rem; /* 16px/1rem */
  --hdsplus-typography-body-300-line-height: 1.6875; /* 24px */
  --hdsplus-typography-body-200-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --hdsplus-typography-body-200-font-size: 0.875rem; /* 14px/0.875rem */
  --hdsplus-typography-body-200-line-height: 1.7142857142857142; /* 20px */
  --hdsplus-typography-display-expressive-100-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-100-font-size: 1rem;
  --hdsplus-typography-display-expressive-100-line-height: 1.5;
  --hdsplus-typography-display-expressive-100-letter-spacing: -0.01em;
  --hdsplus-typography-display-expressive-200-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-200-font-size: 1.125rem;
  --hdsplus-typography-display-expressive-200-line-height: 1.5555555555555556;
  --hdsplus-typography-display-expressive-200-letter-spacing: -0.01em;
  --hdsplus-typography-display-expressive-300-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-300-font-size: 1.5rem;
  --hdsplus-typography-display-expressive-300-line-height: 1.3333333333333333;
  --hdsplus-typography-display-expressive-300-letter-spacing: -0.01em;
  --hdsplus-typography-display-expressive-400-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-400-font-size: 2rem;
  --hdsplus-typography-display-expressive-400-line-height: 1.3125;
  --hdsplus-typography-display-expressive-400-letter-spacing: -0.01em;
  --hdsplus-typography-display-expressive-500-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-500-font-size: 2.5rem;
  --hdsplus-typography-display-expressive-500-line-height: 1.25;
  --hdsplus-typography-display-expressive-500-letter-spacing: -0.01em;
  --hdsplus-typography-display-expressive-600-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-600-font-size: 3.125rem;
  --hdsplus-typography-display-expressive-600-line-height: 1.2;
  --hdsplus-typography-display-expressive-600-letter-spacing: -0.01em;
  --hdsplus-typography-display-expressive-700-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-700-font-size: 4rem;
  --hdsplus-typography-display-expressive-700-line-height: 1.1875;
  --hdsplus-typography-display-expressive-700-letter-spacing: -0.01em;
  --hdsplus-typography-display-expressive-800-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-display-expressive-800-font-size: 5rem;
  --hdsplus-typography-display-expressive-800-line-height: 1.125;
  --hdsplus-typography-display-expressive-800-letter-spacing: -0.01em;
  --hdsplus-typography-body-400-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --hdsplus-typography-body-400-font-size: 1.25rem;
  --hdsplus-typography-body-400-line-height: 1.5;
  --hdsplus-typography-label-font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, sans-serif;
  --hdsplus-typography-label-font-size: 0.75rem;
  --hdsplus-typography-label-line-height: 1.5;
  --hdsplus-typography-label-letter-spacing: 0.08em;
  --hdsplus-spacing-10: 3rem; /* 48px */
  --hdsplus-spacing-11: 3.5rem; /* 56px */
  --hdsplus-spacing-12: 4rem; /* 64px */
  --hdsplus-spacing-13: 4.5rem; /* 72px */
  --hdsplus-spacing-14: 5.5rem; /* 88px */
  --hdsplus-spacing-15: 6rem; /* 96px */
  --hdsplus-spacing-16: 8rem; /* 128px */
  --hdsplus-spacing-17: 8.5rem; /* 144px */
  --hdsplus-spacing-18: 10rem; /* 160px */
  --hdsplus-spacing-01: 0.25rem; /* 4px */
  --hdsplus-spacing-02: 0.375rem; /* 6px */
  --hdsplus-spacing-03: 0.5rem; /* 8px */
  --hdsplus-spacing-04: 0.75rem; /* 12px */
  --hdsplus-spacing-05: 1rem; /* 16px */
  --hdsplus-spacing-06: 1.25rem; /* 20px */
  --hdsplus-spacing-07: 1.5rem; /* 24px */
  --hdsplus-spacing-08: 2rem; /* 32px */
  --hdsplus-spacing-09: 2.5rem; /* 40px */
}