117 lines
2.3 KiB
SCSS
117 lines
2.3 KiB
SCSS
@use 'sass:map';
|
|
@use 'sass:math';
|
|
|
|
// Font Family
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
|
|
// Font Weights
|
|
$font-weight-regular: 400;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
$font-weight-bold: 700;
|
|
|
|
// Font Sizes & Line Heights - Desktop
|
|
$font-sizes: (
|
|
'headline-1': (
|
|
'size': 64px,
|
|
'line-height': 76px,
|
|
'weight': $font-weight-semibold
|
|
),
|
|
'headline-2': (
|
|
'size': 36px,
|
|
'line-height': 44px,
|
|
'weight': $font-weight-semibold
|
|
),
|
|
'headline-3': (
|
|
'size': 28px,
|
|
'line-height': 36px,
|
|
'weight': $font-weight-semibold
|
|
),
|
|
'headline-4': (
|
|
'size': 20px,
|
|
'line-height': 28px,
|
|
'weight': $font-weight-semibold
|
|
),
|
|
'body-1': (
|
|
'size': 18px,
|
|
'line-height': 28px,
|
|
'weight': $font-weight-regular
|
|
),
|
|
'body-2': (
|
|
'size': 16px,
|
|
'line-height': 24px,
|
|
'weight': $font-weight-regular
|
|
),
|
|
'body-3': (
|
|
'size': 14px,
|
|
'line-height': 20px,
|
|
'weight': $font-weight-regular
|
|
),
|
|
'caption-1': (
|
|
'size': 16px,
|
|
'line-height': 24px,
|
|
'weight': $font-weight-regular
|
|
),
|
|
'caption-2': (
|
|
'size': 12px,
|
|
'line-height': 16px,
|
|
'weight': $font-weight-regular
|
|
)
|
|
);
|
|
|
|
// Font Sizes - Mobile
|
|
$font-sizes-mobile: (
|
|
'headline-1': (
|
|
'size': 28px,
|
|
'line-height': 36px,
|
|
'weight': $font-weight-bold
|
|
),
|
|
'headline-2': (
|
|
'size': 20px,
|
|
'line-height': 28px,
|
|
'weight': $font-weight-semibold
|
|
),
|
|
'headline-3': (
|
|
'size': 18px,
|
|
'line-height': 24px,
|
|
'weight': $font-weight-semibold
|
|
),
|
|
'headline-4': (
|
|
'size': 18px,
|
|
'line-height': 24px,
|
|
'weight': $font-weight-semibold
|
|
),
|
|
'body': (
|
|
'size': 16px,
|
|
'line-height': 24px,
|
|
'weight': $font-weight-medium
|
|
),
|
|
'caption': (
|
|
'size': 14px,
|
|
'line-height': 20px,
|
|
'weight': $font-weight-regular
|
|
)
|
|
);
|
|
|
|
// Breakpoints
|
|
$breakpoint-mobile: 768px;
|
|
$breakpoint-tablet: 1024px;
|
|
$breakpoint-desktop: 1280px;
|
|
|
|
// Mixins
|
|
@mixin heading($level) {
|
|
@if map.has-key($font-sizes, $level) {
|
|
$props: map.get($font-sizes, $level);
|
|
font-size: map.get($props, 'size');
|
|
line-height: map.get($props, 'line-height');
|
|
font-weight: map.get($props, 'weight');
|
|
font-family: $font-family-base;
|
|
}
|
|
}
|
|
|
|
@mixin responsive-text {
|
|
@media (max-width: $breakpoint-mobile) {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
} |