hypnagaga/src/scss/tokens/text/mixins/_text-role.scss
2023-09-13 15:08:42 +05:30

97 lines
1.8 KiB
SCSS

@use 'color' as *;
@use 'font-family' as *;
@use 'font-size' as *;
@use 'font-weight' as *;
@use 'letter-spacing' as *;
@use 'line-height' as *;
@use '../../spacers/mixins/main' as *;
@mixin h1 {
@include text-primary;
@include font-bold;
@include font-hed;
@include text-5xl;
@include leading-none;
@include fmy-1;
}
@mixin h2 {
@include text-primary;
@include font-bold;
@include font-subhed;
@include leading-tighter;
@include text-xl;
@include fmt-7;
@include fmb-2;
@media (max-width: 768px) {
@include text-2xl;
}
}
@mixin h3 {
@include text-primary;
@include font-semibold;
@include font-subhed;
@include leading-tighter;
@include text-base;
@include fmt-5;
@include fmb-1;
}
@mixin h4 {
@include font-subhed;
@include leading-tight;
@include text-sm;
@include text-secondary;
@include font-semibold;
@include tracking-wide;
text-transform: uppercase;
@include fmt-4;
@include fmb-1;
}
@mixin body-text {
@include fmt-0;
@include fmb-4;
@include font-body;
@include text-base;
@include font-regular;
@include leading-normal;
@include text-primary;
}
@mixin body-note {
@include fmt-0;
@include fmb-2;
@include font-note;
font-size: calc(0.9 * var(--theme-font-size-base));
@include text-primary;
@include leading-tight;
}
@mixin body-caption {
@include font-note;
@include text-secondary;
@include text-xs;
@include leading-tight;
@include font-regular;
@include fmy-2;
}
@mixin body-link {
color: currentColor;
text-decoration: underline;
text-underline-position: from-font;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-decoration-color: var(--theme-colour-text-secondary);
}
@mixin drop-cap {
float: left;
@include fmr-1;
@include font-light;
font-size: calc(3.33 * var(--theme-font-size-base));
line-height: 0.9;
}