diff --git a/assets/sass/abstracts/_settings.scss b/assets/sass/abstracts/_settings.scss
index 46597f97..7dc9fcf0 100644
--- a/assets/sass/abstracts/_settings.scss
+++ b/assets/sass/abstracts/_settings.scss
@@ -1,5 +1,4 @@
@use "sass:list";
-@use "sass:string";
// The maximum width of the content area:
$max-width: 865px;
@@ -12,15 +11,9 @@ $webfont-sans: "Inter";
$webfont-sans-variable: "Inter var";
$webfont-mono: "Roboto Mono";
$webfont-mono-variable: "Roboto Mono var";
-$webfont-unicode-latin-only: (
- latin:
- string.unquote(
- "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
- ),
-);
// System fonts:
-// https://markdotto.com/2018/02/07/github-system-fonts/
+// https://primer.style/design/foundations/typography#font-stack
// stylelint-disable-next-line value-keyword-case
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
$system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
diff --git a/assets/sass/abstracts/_themes.scss b/assets/sass/abstracts/_themes.scss
index 3253bc38..551a7f46 100644
--- a/assets/sass/abstracts/_themes.scss
+++ b/assets/sass/abstracts/_themes.scss
@@ -1,8 +1,5 @@
-@use "sass:list";
@use "sass:map";
-@use "settings";
-
// Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
// ex. @include themes.themed((color: "text", background-color: "background-inner"));
@mixin themed($properties) {
@@ -65,5 +62,5 @@ $themes: (
);
// Icons (modified twemojis)
-$icon-bulb-on: 'data:image/svg+xml;charset=utf-8,';
-$icon-bulb-off: 'data:image/svg+xml;charset=utf-8,';
+$icon-bulb-on: '';
+$icon-bulb-off: '';
diff --git a/assets/sass/abstracts/_typography.scss b/assets/sass/abstracts/_typography.scss
index 390cc197..a44aebef 100644
--- a/assets/sass/abstracts/_typography.scss
+++ b/assets/sass/abstracts/_typography.scss
@@ -1,9 +1,14 @@
-@use "settings";
-
@use "~@fontsource/inter/scss/mixins" as Inter;
@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
+// stylelint-disable scss/operator-no-unspaced
+// prettier-ignore
+$unicode-latin-only: (
+ latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
+);
+// stylelint-enable scss/operator-no-unspaced
+
/*!
* Inter typeface - https://rsms.me/inter/
*
@@ -12,16 +17,12 @@
*/
// Variable
-@include Inter.fontFaceVariable(
- $fontName: "Inter var",
- $type: "full",
- $unicodeMap: settings.$webfont-unicode-latin-only
-);
+@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $unicode-latin-only);
// Legacy
-@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only);
-@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: settings.$webfont-unicode-latin-only);
-@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only);
+@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: $unicode-latin-only);
+@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: $unicode-latin-only);
+@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: $unicode-latin-only);
/*!
* Roboto Mono typeface - https://github.com/googlefonts/robotomono
@@ -31,17 +32,13 @@
*/
// Variable
-@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: settings.$webfont-unicode-latin-only);
-@include RobotoMono.fontFaceVariable(
- $fontName: "Roboto Mono var",
- $style: italic,
- $unicodeMap: settings.$webfont-unicode-latin-only
-);
+@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: $unicode-latin-only);
+@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic, $unicodeMap: $unicode-latin-only);
// Legacy
-@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only);
-@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: settings.$webfont-unicode-latin-only);
-@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only);
+@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: $unicode-latin-only);
+@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: $unicode-latin-only);
+@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: $unicode-latin-only);
/*!
* Comic Neue typeface - http://comicneue.com/
@@ -50,5 +47,5 @@
* Licensed under the SIL Open Font License, Version 1.1.
*/
-@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only);
-@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only);
+@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $unicode-latin-only);
+@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $unicode-latin-only);
diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss
index b6b83b78..b645fbe0 100644
--- a/assets/sass/components/_global.scss
+++ b/assets/sass/components/_global.scss
@@ -27,11 +27,11 @@ body {
// set themed lightbulb icons manually
&.light button.dark-mode-toggle {
- background-image: url(themes.$icon-bulb-on);
+ background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-on}");
}
&.dark button.dark-mode-toggle {
- background-image: url(themes.$icon-bulb-off);
+ background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-off}");
}
}