@hashicorp/design-system-tokens/dist/devdot/css/helpers/typography.css

Helios Design Tokens

/**
 * Do not edit directly, this file was auto-generated.
 */

.hds-font-family-sans-display { font-family: var(--token-typography-font-stack-display); }
.hds-font-family-sans-text { font-family: var(--token-typography-font-stack-text); }
.hds-font-family-mono-code { font-family: var(--token-typography-font-stack-code); }
.hds-font-weight-regular { font-weight: 400; }
.hds-font-weight-medium { font-weight: 500; }
.hds-font-weight-semibold { font-weight: 600; }
.hds-font-weight-bold { font-weight: 700; }
.hds-typography-display-500 { font-family: var(--token-typography-display-500-font-family); font-size: var(--token-typography-display-500-font-size); line-height: var(--token-typography-display-500-line-height); margin: 0; padding: 0; }
.hds-typography-display-400 { font-family: var(--token-typography-display-400-font-family); font-size: var(--token-typography-display-400-font-size); line-height: var(--token-typography-display-400-line-height); margin: 0; padding: 0; }
.hds-typography-display-300 { font-family: var(--token-typography-display-300-font-family); font-size: var(--token-typography-display-300-font-size); line-height: var(--token-typography-display-300-line-height); margin: 0; padding: 0; }
.hds-typography-display-200 { font-family: var(--token-typography-display-200-font-family); font-size: var(--token-typography-display-200-font-size); line-height: var(--token-typography-display-200-line-height); margin: 0; padding: 0; }
.hds-typography-display-100 { font-family: var(--token-typography-display-100-font-family); font-size: var(--token-typography-display-100-font-size); line-height: var(--token-typography-display-100-line-height); margin: 0; padding: 0; }
.hds-typography-body-300 { font-family: var(--token-typography-body-300-font-family); font-size: var(--token-typography-body-300-font-size); line-height: var(--token-typography-body-300-line-height); margin: 0; padding: 0; }
.hds-typography-body-200 { font-family: var(--token-typography-body-200-font-family); font-size: var(--token-typography-body-200-font-size); line-height: var(--token-typography-body-200-line-height); margin: 0; padding: 0; }
.hds-typography-body-100 { font-family: var(--token-typography-body-100-font-family); font-size: var(--token-typography-body-100-font-size); line-height: var(--token-typography-body-100-line-height); margin: 0; padding: 0; }
.hds-typography-code-100 { font-family: var(--token-typography-code-100-font-family); font-size: var(--token-typography-code-100-font-size); line-height: var(--token-typography-code-100-line-height); margin: 0; padding: 0; }
.hds-typography-code-200 { font-family: var(--token-typography-code-200-font-family); font-size: var(--token-typography-code-200-font-size); line-height: var(--token-typography-code-200-line-height); margin: 0; padding: 0; }
.hds-typography-code-300 { font-family: var(--token-typography-code-300-font-family); font-size: var(--token-typography-code-300-font-size); line-height: var(--token-typography-code-300-line-height); margin: 0; padding: 0; }