125 lines
3.9 KiB
SCSS
125 lines
3.9 KiB
SCSS
/* FONT SIZE MIXINS */
|
|
@mixin font-size-1($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-scale-size-1) #{$important};
|
|
}
|
|
|
|
@mixin font-size-2($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-scale-size-2) #{$important};
|
|
}
|
|
|
|
@mixin font-size-3($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-scale-size-3) #{$important};
|
|
}
|
|
|
|
@mixin font-size-4($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-scale-size-4) #{$important};
|
|
}
|
|
|
|
@mixin font-size-5($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-scale-size-5) #{$important};
|
|
}
|
|
|
|
@mixin font-size-6($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-scale-size-6) #{$important};
|
|
}
|
|
|
|
/* TYPEFACE MIXINS */
|
|
@mixin typeface-display($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-family: var(--theme-typeface-display) #{$important};
|
|
}
|
|
|
|
@mixin typeface-serif($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-family: var(--theme-typeface-serif) #{$important};
|
|
}
|
|
|
|
@mixin typeface-sans-serif($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-family: var(--theme-typeface-sans-serif) #{$important};
|
|
}
|
|
|
|
@mixin typeface-monospace($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-family: var(--theme-typeface-monospace) #{$important};
|
|
}
|
|
|
|
/* FONT STYLE TOKEN MIXINS */
|
|
@mixin font-hed($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-hed) #{$important};
|
|
font-family: var(--theme-font-family-hed) #{$important};
|
|
font-weight: 500 #{$important};
|
|
line-height: 1.14 #{$important};
|
|
color: var(--theme-colour-text-primary) #{$important};
|
|
}
|
|
|
|
@mixin font-subhed-1($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-subhed-1) #{$important};
|
|
font-family: var(--theme-font-family-subhed) #{$important};
|
|
font-weight: 700 #{$important};
|
|
line-height: 1.14 #{$important};
|
|
color: var(--theme-colour-text-primary) #{$important};
|
|
}
|
|
|
|
@mixin font-subhed-2($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-subhed-2) #{$important};
|
|
font-family: var(--theme-font-family-subhed) #{$important};
|
|
font-weight: 700 #{$important};
|
|
line-height: 1.28 #{$important};
|
|
color: var(--theme-colour-text-primary) #{$important};
|
|
}
|
|
|
|
@mixin font-subhed-3($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-subhed-3) #{$important};
|
|
font-family: var(--theme-font-family-subhed) #{$important};
|
|
font-weight: 500 #{$important};
|
|
line-height: 1.4 #{$important};
|
|
text-transform: uppercase #{$important};
|
|
color: var(--theme-colour-text-secondary) #{$important};
|
|
}
|
|
|
|
@mixin font-body($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-body) #{$important};
|
|
font-family: var(--theme-font-family-body) #{$important};
|
|
font-weight: 400 #{$important};
|
|
line-height: 1.5 #{$important};
|
|
color: var(--theme-colour-text-primary) #{$important};
|
|
}
|
|
|
|
@mixin font-note-1($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-note-1) #{$important};
|
|
font-family: var(--theme-font-family-note) #{$important};
|
|
font-weight: 300 #{$important};
|
|
line-height: 1.4 #{$important};
|
|
color: var(--theme-colour-text-primary) #{$important};
|
|
}
|
|
|
|
@mixin font-note-2($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-note-2) #{$important};
|
|
font-family: var(--theme-font-family-note) #{$important};
|
|
font-weight: 300 #{$important};
|
|
line-height: 1.4 #{$important};
|
|
color: var(--theme-colour-text-secondary) #{$important};
|
|
}
|
|
|
|
@mixin font-note-3($i: false) {
|
|
$important: if($i, '!important', '');
|
|
font-size: var(--theme-font-size-note-3) #{$important};
|
|
font-family: var(--theme-font-family-note) #{$important};
|
|
font-weight: 400 #{$important};
|
|
line-height: 1.4 #{$important};
|
|
color: var(--theme-colour-text-secondary) #{$important};
|
|
}
|