@synergy-design-system/styles
Version:
Utility classes and helpers for applications using the Synergy Design System
53 lines (52 loc) • 1.19 kB
CSS
/**
* @synergy-design-system/styles version 1.7.1
* SICK Global UX Foundation
*/
/**
* Core typographic styles
*/
/**
* Typographic text classes
* @variant {x-small | small | medium | large} syn-body The font size of the body text
*/
.syn-body--x-small {
font: var(--syn-body-x-small-regular);
}
.syn-body--small {
font: var(--syn-body-small-regular);
}
.syn-body--medium {
font: var(--syn-body-medium-regular);
}
.syn-body--large {
font: var(--syn-body-large-regular);
}
/**
* Typographic headline classes
* @variant {3x-large | 2x-large | x-large | large} syn-heading The size of the headline
*/
.syn-heading--large {
font: var(--syn-heading-large);
}
.syn-heading--x-large {
font: var(--syn-heading-x-large);
}
.syn-heading--2x-large {
font: var(--syn-heading-2x-large);
}
.syn-heading--3x-large {
font: var(--syn-heading-3x-large);
}
/**
* Typographic weight classes
* @variant {normal | semibold | bold} syn-weight The font weight to apply
*/
.syn-weight--normal {
font-weight: var(--syn-font-weight-normal);
}
.syn-weight--semibold {
font-weight: var(--syn-font-weight-semibold);
}
.syn-weight--bold {
font-weight: var(--syn-font-weight-bold);
}