Text style

color.css

%color_theme_default {
  --heading-color: COLOR_PRIMARY;
  --background-color: COLOR_WHITE;
  --color: COLOR_BLACK;
  --paragraph-color: COLOR_BLACK;
  --link-color: COLOR_PRIMARY;
}

%color_body {
  --color: COLOR_BLACK;
  --background-color: COLOR_WHITE;
  color: var(--color);
  background-color: var(--background-color);
}

%color_code {
  --color: COLOR_WHITE;
  --background-color: COLOR_BLACK;
}

code {
  color: COLOR_CODE;
}
  

elements.css

body {
  @extend color_theme_default;
}

h1 {
  @extend font_heading;
  font-size: 7fs;
}

fonts.css

%font_base {
  font-family: FONT_FAMILY_BODY;
  font-size: 2fs;
}

%font_heading {
	font-family: FONT_FAMILY_DISPLAY;
	letter-spacing: -0.03em;
	line-height: 1.4;
	font-weight: 500;
	color: var(--color-heading);
}

%font_body {
	font-family: FONT_FAMILY_BODY;
	letter-spacing: -0.03em;
	line-height: 1.4;
	font-weight: 500;
  color: var(--color-body);
}

%font_caps {
	font-family: FONT_FAMILY_BODY;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.23em;
	margin-block: 4sp;
}

%font_link {
	letter-spacing: LETTER_SPACING;
	line-height: 1.4;
}

%font_quote {
	font-family: FONT_FAMILY_QUOTE;
	letter-spacing: LETTER_SPACING;
	line-height: 1.4;
}

%font_code {
	font-family: FONT_FAMILY_CODE;
	letter-spacing: LETTER_SPACING;
	line-height: 1.4;
}