:root {
--primary-color: #202020; --rgb-primary: 32,32,32; --bg-color: #f9f9f9;
}
- data-theme=“dark”
-
{
--primary-color: #f9f9f9; --rgb-primary: 249,249,249; --bg-color: #171717;
}
// Root $root-font-family: 'Inter', system-ui, sans-serif; $root-font-family-var: 'Inter var', system-ui, sans-serif; $root-font-size: 16px; $root-letter-spacing: -0.011em; $root-line-height: 22px;
// Responsive $large-breakpoint: 1200px; $medium-breakpoint: 992px; $small-breakpoint: 768px; $large-font-size: 18px; $large-font-letter-spacing: -0.014em; $large-font-line-height: 25px;
// Typography // // Headings, body text, lists, and other misc typographic elements.
$headings-margin-top: 1.75rem; $headings-margin-bottom: 0.75rem; $headings-color: var(–primary-color);
$heading-xl: (
font-size: 40px, font-weight: 600, letter-spacing: -0.022em, line-height: 56px,
); $heading-lg: (
font-size: 24px, font-weight: 600, letter-spacing: -0.019em, line-height: 34px,
); $heading-md: (
font-size: 20px, font-weight: 500, letter-spacing: -0.017em, line-height: 28px,
); $heading-sm: (
font-size: 18px, font-weight: 500, letter-spacing: -0.014em, line-height: 25px,
); $heading-xs: (
font-size: 16px, font-weight: 500, letter-spacing: -0.011em, line-height: 22px,
);
$body-lg: (
font-size: 18px !important, font-weight: 400, letter-spacing: -0.014em !important, line-height: 25px,
);
$body-md: (
font-size: 16px, font-weight: 400, letter-spacing: -0.011em, line-height: 22px,
);
$body-sm: (
font-size: 14px, font-weight: 400, letter-spacing: -0.006em, line-height: 20px,
);
$body-xs: (
font-size: 13px, font-weight: 400, letter-spacing: -0.003em, line-height: 18px,
);
$code-font-family: “SFMono-Regular”,Consolas,“Liberation Mono”,Menlo,Courier,monospace; $code-color: bf616a;
// Add properties // Used to convert elements of Sass maps into CSS attributes
@mixin properties($map) {
@each $name, $value in $map { #{$name}: $value; }
}