100 lines
2.3 KiB
SCSS
100 lines
2.3 KiB
SCSS
:root {
|
|
--font-stack: "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
|
|
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
// font size
|
|
--text-tiny: 11px;
|
|
--text-2xs: 12px;
|
|
--text-xs: 12px;
|
|
--text-sm: 13px;
|
|
--text-md: 14px; // alias
|
|
--text-base: 13px;
|
|
--text-lg: 16px;
|
|
--text-xl: 18px;
|
|
--text-2xl: 20px;
|
|
--text-3xl: 24px;
|
|
--text-4xl: 26px;
|
|
--text-5xl: 28px;
|
|
--text-6xl: 32px;
|
|
--text-7xl: 40px;
|
|
--text-8xl: 44px;
|
|
--text-9xl: 48px;
|
|
--text-10xl: 52px;
|
|
--text-11xl: 56px;
|
|
--text-12xl: 64px;
|
|
|
|
// font weight
|
|
--weight-regular: 420;
|
|
--weight-medium: 500;
|
|
--weight-semibold: 600;
|
|
--weight-bold: 700;
|
|
--weight-black: 800;
|
|
|
|
// line height TODO: better names
|
|
// naming is based on until, example until 3xl size
|
|
--text-line-height-3xl: 115%;
|
|
--text-line-height-4xl: 160%;
|
|
--text-line-height-7xl: 140%;
|
|
--text-line-height-12xl: 130%;
|
|
--text-line-height-14xl: 120%;
|
|
|
|
--para-line-height-2-xs: 160%;
|
|
--para-line-height-sm: 150%;
|
|
--para-line-height-2xl: 148%;
|
|
--para-line-height-3xl: 140%;
|
|
|
|
// font color
|
|
--heading-color: var(--gray-900);
|
|
--text-neutral: var(--gray-900);
|
|
--text-color: var(--gray-800);
|
|
--text-muted: var(--gray-700);
|
|
--text-light: var(--gray-600);
|
|
--text-dark: var(--fg-color);
|
|
}
|
|
|
|
$weight-list: "regular", "medium", "semibold", "bold", "black";
|
|
|
|
$letter-space: (
|
|
"tiny": 0.09em,
|
|
"2xs": 0.01em,
|
|
"xs": 0.02em,
|
|
"xs-heavy": 0.015em,
|
|
"sm": 0.02em,
|
|
"sm-heavy": 0.015em,
|
|
"base": 0.02em,
|
|
"base-heavy": 0.015em,
|
|
"lg": 0.02em,
|
|
"lg-heavy": 0.015em,
|
|
"xl": 0.01em,
|
|
"2xl": 0.01em,
|
|
"3xl": 0.005em,
|
|
"4xl": 0.005em,
|
|
"5xl": 0.005em,
|
|
"5xl-heavy": 0.5px,
|
|
"6xl": 0.5px,
|
|
);
|
|
|
|
$letter-space-heavy: (
|
|
"xs": "semibold",
|
|
"sm": "semibold",
|
|
"base": "medium",
|
|
"lg": "medium",
|
|
"5xl": "bold",
|
|
);
|
|
|
|
@function get_letterspacing($name, $weight) {
|
|
$heavy: map-get($letter-space-heavy, $name);
|
|
@if ((index($weight-list, $heavy) or length($weight-list)) <= index($weight-list, $weight)) {
|
|
@return map-get($letter-space, #{$name}-heavy);
|
|
}
|
|
@return map-get($letter-space, $name);
|
|
}
|
|
|
|
@mixin get_textstyle($name, $weight) {
|
|
font-size: var(--text-#{$name});
|
|
font-weight: var(--weight-#{$weight});
|
|
letter-spacing: get_letterspacing($name, $weight);
|
|
@if $name == "tiny" {
|
|
text-transform: "uppercase";
|
|
}
|
|
}
|