refactored all themes to latest sass syntax, fixes deprecation warnings

css/theme/README.md

@@ -4,18 +4,17 @@ Themes are written using Sass to keep things modular and reduce the need for rep
 
 ## Creating a Theme
 
-To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build -- css-themes`.
+To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled from Sass to CSS (see the [gulpfile](https://github.com/hakimel/reveal.js/blob/master/gulpfile.js)) when you run `npm run build:styles`.
 
-Each theme file does four things in the following order:
+Each theme file follows the same structure:
 
 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)**
 Shared utility functions.
 
 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)**
-Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3.
+Declares a set of custom CSS variables that the template file (step 4) expects. Each of these variables can be overridden to customize the theme.
 
-3. **Override**
-This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please.
-
-4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
+3. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
 The template theme file which will generate final CSS output based on the currently defined variables.
+
+4. **Optionally add custom fonts and/or additional styles**

css/theme/beige.scss

@@ -4,41 +4,49 @@
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
-// Default mixins and settings -----------------
+
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+$active-color: #8b743d;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #f7f3de,
+		$background: radial-gradient( rgba(255,255,255,1), rgba(247,242,211,1) ),
+
+    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $main-font-size: 42px,
+    $main-color: #333,
+
+    $heading-color: #333,
+    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $heading-font-weight: 600,
+
+    $heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},
+
+    $heading1-size: 2.5em,
+    $heading2-size: 1.6em,
+    $heading3-size: 1.3em,
+    $heading4-size: 1.0em,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
+
+    $selection-color: #333,
+    $selection-background-color: color.scale( $active-color, $lightness: 35% ),
+
+		$overlay-element-bg-color: #{0, 0, 0},
+    $overlay-element-fg-color: #{240, 240, 240}
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("./fonts/league-gothic/league-gothic.css");
 @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
 
-// Override theme settings (see ../template/settings.scss)
-$mainColor: #333;
-$headingColor: #333;
-$headingTextShadow: none;
-$backgroundColor: #f7f3de;
-$linkColor: #8b743d;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
-$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
-$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
-  0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
-  0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
-  0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
-  0 20px 20px rgba(0, 0, 0, 0.15);
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
-// Background generator
-@mixin bodyBackground() {
-  @include radial-gradient(rgba(247, 242, 211, 1), rgba(255, 255, 255, 1));
-}
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Change text colors against light slide backgrounds
+@include mixins.dark-bg-text-color(#fff);

css/theme/black-contrast.scss

@@ -7,40 +7,41 @@
  * - $mainFontSize controls code blocks, too (although under some ratio).
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
 
-// Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+$active-color: #42affa;
 
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #000000;
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #000,
 
-$mainColor: #fff;
-$headingColor: #fff;
+    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $main-font-size: 42px,
+    $main-color: #fff,
 
-$mainFontSize: 42px;
-$mainFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #42affa;
-$linkColorHover: color.scale($linkColor, $lightness: 15%);
-$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%);
+    $heading-color: #fff,
+    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $heading-font-weight: 600,
 
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1em;
+    $heading1-size: 2.5em,
+    $heading2-size: 1.6em,
+    $heading3-size: 1.3em,
+    $heading4-size: 1.0em,
 
-// Change text colors against light slide backgrounds
-@include light-bg-text-color(#000);
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+
+    $selection-color: #fff,
+    $selection-background-color: color.scale( $active-color, $lightness: -35% )
+);
+
+// Inject the theme template
+@use "template/theme";
 
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Include theme-specific fonts
+@import url("./fonts/source-sans-pro/source-sans-pro.css");
+
+// Change text colors against light slide backgrounds
+@include mixins.light-bg-text-color(#000);

css/theme/black.scss

@@ -4,40 +4,41 @@
  * By Hakim El Hattab, http://hakim.se
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
 
-// Include theme-specific fonts
-@import url("./fonts/source-sans-pro/source-sans-pro.css");
+$active-color: #42affa;
 
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #191919;
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #191919,
 
-$mainColor: #fff;
-$headingColor: #fff;
+    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $main-font-size: 42px,
+    $main-color: #fff,
 
-$mainFontSize: 42px;
-$mainFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #42affa;
-$linkColorHover: color.scale($linkColor, $lightness: 15%);
-$selectionBackgroundColor: rgba($linkColor, 0.75);
+    $heading-color: #fff,
+    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $heading-font-weight: 600,
 
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1em;
+    $heading1-size: 2.5em,
+    $heading2-size: 1.6em,
+    $heading3-size: 1.3em,
+    $heading4-size: 1.0em,
 
-// Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+
+    $selection-color: #fff,
+    $selection-background-color: color.scale( $active-color, $lightness: -35% )
+);
+
+// Inject the theme template
+@use "template/theme";
 
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Include theme-specific fonts
+@import url("./fonts/source-sans-pro/source-sans-pro.css");
+
+// Change text colors against light slide backgrounds
+@include mixins.light-bg-text-color(#222);

css/theme/blood.scss

@@ -10,55 +10,41 @@
  *
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
 
-// Include theme-specific fonts
-
-@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");
-
-// Colors used in the theme
-$blood: #a23;
 $coal: #222;
-$codeBackground: #23241f;
+$active-color: #a23;
+$code-background-color: #23241f;
 
-$backgroundColor: $coal;
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: $coal,
 
-// Main text
-$mainFont: Ubuntu, "sans-serif";
-$mainColor: #eee;
+    $main-font: #{Ubuntu, 'sans-serif'},
+    $main-color: #eee,
 
-// Headings
-$headingFont: Ubuntu, "sans-serif";
-$headingTextShadow: 2px 2px 2px $coal;
+    $heading-font: #{Ubuntu, 'sans-serif'},
+    $heading-text-shadow: 2px 2px 2px $coal,
 
-// h1 shadow, borrowed humbly from
-// (c) Default theme by Hakim El Hattab
-$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb,
-  0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1),
-  0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
-  0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
-  0 20px 20px rgba(0, 0, 0, 0.15);
+    $heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},
 
-// Links
-$linkColor: $blood;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
 
-// Text selection
-$selectionBackgroundColor: $blood;
-$selectionColor: #fff;
+    $selection-background-color: $active-color,
+    $selection-color: #fff
+);
 
-// Change text colors against dark slide backgrounds
-@include light-bg-text-color(#222);
+// Inject the theme template
+@use "template/theme";
 
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Fonts
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic");
 
-// some overrides after theme template import
+// Invert text color when the background is light
+@include mixins.light-bg-text-color(#222);
 
 .reveal p {
   font-weight: 300;
@@ -85,9 +71,9 @@ section.has-light-background {
 }
 
 .reveal p code {
-  background-color: $codeBackground;
-  display: inline-block;
-  border-radius: 7px;
+    background-color: $code-background-color;
+    display: inline-block;
+    border-radius: 7px;
 }
 
 .reveal small code {

css/theme/dracula.scss

@@ -3,12 +3,9 @@
  * Based on https://draculatheme.com
  */
 
-
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "./template/mixins";
-@import "./template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
 
 // Include theme-specific fonts
 @import url(./fonts/league-gothic/league-gothic.css);
@@ -34,15 +31,6 @@ $systemFontsMono: Menlo,
 				  Lucida Console,
 				  monospace;
 
-/**
- * Dracula colors by Zeno Rocha
- * https://draculatheme.com/contribute
- */
-html * {
-	color-profile: sRGB;
-	rendering-intent: auto;
-}
-
 $background: #282A36;
 $foreground: #F8F8F2;
 $selection: #44475A;
@@ -55,39 +43,59 @@ $purple: #BD93F9;
 $cyan: #8BE9FD;
 $pink: #FF79C6;
 
+$mainFont: $systemFontsSansSerif;
+$codeFont: "Fira Code", $systemFontsMono;
 
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #191919,
 
-// Override theme settings (see ../template/settings.scss)
-$mainColor: $foreground;
-$headingColor: $purple;
-$headingTextShadow: none;
-$headingTextTransform: none;
-$backgroundColor: $background;
-$linkColor: $pink;
-$linkColorHover: $cyan;
-$selectionBackgroundColor: $selection;
-$inlineCodeColor: $green;
-$listBulletColor: $cyan;
+    $main-font: $mainFont,
+    $main-font-size: 42px,
+    $main-color: $foreground,
 
-$mainFont: $systemFontsSansSerif;
-$codeFont: "Fira Code", $systemFontsMono;
+		$code-font: $codeFont,
+
+    $heading-color: $purple,
+    $heading-font: $mainFont,
+    $heading-font-weight: 600,
+		$heading-text-transform: none,
+
+    $heading1-size: 2.5em,
+    $heading2-size: 1.6em,
+    $heading3-size: 1.3em,
+    $heading4-size: 1.0em,
+
+    $link-color: $pink,
+    $link-color-hover: $cyan,
+
+    $selection-color: #fff,
+    $selection-background-color: $selection
+);
+
+// Inject the theme template
+@use "template/theme";
+
+// Include theme-specific fonts
+@import url("./fonts/source-sans-pro/source-sans-pro.css");
 
 // Change text colors against light slide backgrounds
-@include light-bg-text-color($background);
+@include mixins.light-bg-text-color($background);
 
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
 
 // Define additional color effects based on Dracula spec
 // https://spec.draculatheme.com/
 :root {
 	--r-bold-color: #{$orange};
 	--r-italic-color: #{$yellow};
-	--r-inline-code-color: #{$inlineCodeColor};
-	--r-list-bullet-color: #{$listBulletColor};
+	--r-inline-code-color: #{$green};
+	--r-list-bullet-color: #{$cyan};
 }
 
+/**
+ * Dracula colors by Zeno Rocha
+ * https://draculatheme.com/contribute
+ */
 .reveal {
 	strong, b {
 		color: var(--r-bold-color);

css/theme/league.scss

@@ -6,32 +6,26 @@
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
-
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "./template/mixins";
-@import "./template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
 
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+		$background: radial-gradient( rgba(85,90,95,1), rgba(28,30,32,1) ),
+    $background-color: rgba(28,30,32,1),
 
+		$heading-text-shadow: #{0px 0px 6px rgba(0,0,0,0.2)},
+		$heading1-text-shadow: #{0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15)},
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("./fonts/league-gothic/league-gothic.css");
 @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
 
-// Override theme settings (see ../template/settings.scss)
-$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
-$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
-
-// Background generator
-@mixin bodyBackground() {
-	@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
-}
-
 // Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
-
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+@include mixins.light-bg-text-color(#222);

css/theme/moon.scss

@@ -3,50 +3,51 @@
  * Author: Achim Staebler
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+// Solarized colors by Ethan Schoonover
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;;
+
+$active-color: $blue;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: $base03,
+
+    $main-color: $base1,
+    $heading-color: $base2,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
+
+    $selection-color: #fff,
+    $selection-background-color: $magenta
+);
+
+// Inject the theme template
+@use "template/theme";
 
+// Include theme-specific fonts
 // Include theme-specific fonts
 @import url("./fonts/league-gothic/league-gothic.css");
 @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
 
-/**
- * Solarized colors by Ethan Schoonover
- */
-
-// Solarized colors
-$base03: #002b36;
-$base02: #073642;
-$base01: #586e75;
-$base00: #657b83;
-$base0: #839496;
-$base1: #93a1a1;
-$base2: #eee8d5;
-$base3: #fdf6e3;
-$yellow: #b58900;
-$orange: #cb4b16;
-$red: #dc322f;
-$magenta: #d33682;
-$violet: #6c71c4;
-$blue: #268bd2;
-$cyan: #2aa198;
-$green: #859900;
-
-// Override theme settings (see ../template/settings.scss)
-$mainColor: $base1;
-$headingColor: $base2;
-$headingTextShadow: none;
-$backgroundColor: $base03;
-$linkColor: $blue;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
-$selectionBackgroundColor: $magenta;
-
 // Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+@include mixins.light-bg-text-color(#222);

css/theme/night.scss

@@ -4,31 +4,37 @@
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+$active-color: #e7ad52;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #111,
+
+    $main-font: #{'Open Sans', sans-serif},
+    $main-color: #fff,
+
+    $heading-color: #fff,
+    $heading-font: #{'Montserrat', Impact, sans-serif},
+    $heading-text-transform: none,
+    $heading-letter-spacing: -0.03em,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
+
+    $selection-color: #111,
+    $selection-background-color: $active-color
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("https://fonts.googleapis.com/css?family=Montserrat:700");
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic");
 
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #111;
-
-$mainFont: "Open Sans", sans-serif;
-$linkColor: #e7ad52;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
-$headingFont: "Montserrat", Impact, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: -0.03em;
-$headingTextTransform: none;
-$selectionBackgroundColor: #e7ad52;
-
 // Change text colors against light slide backgrounds
-@include light-bg-text-color(#222);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+@include mixins.light-bg-text-color(#222);

css/theme/serif.scss

@@ -5,34 +5,44 @@
  * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-// Override theme settings (see ../template/settings.scss)
-$mainFont: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
-$mainColor: #000;
-$headingFont: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
-$headingColor: #383d3d;
-$headingTextShadow: none;
-$headingTextTransform: none;
-$backgroundColor: #f0f1eb;
-$linkColor: #51483d;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
-$selectionBackgroundColor: #26351c;
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
+@use "template/mixins" as mixins;
+
+$active-color: #51483D;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #F0F1EB,
+
+    $main-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
+    $main-font-size: 42px,
+    $main-color: #000,
+
+    $heading-color: #383D3D,
+    $heading-font: #{'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif},
+    $heading-font-weight: 600,
+    $heading-text-transform: none,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 25% ),
+
+    $selection-color: #fff,
+    $selection-background-color: $active-color,
+
+    $overlay-element-bg-color: #{0, 0, 0},
+    $overlay-element-fg-color: #{240, 240, 240}
+);
+
+// Inject the theme template
+@use "template/theme";
+
+// Include theme-specific fonts
+@import url("./fonts/source-sans-pro/source-sans-pro.css");
+
+// Change text colors against light slide backgrounds
+@include mixins.dark-bg-text-color(#fff);
 
 .reveal a {
   line-height: 1.3em;
 }
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------

css/theme/simple.scss

@@ -6,34 +6,44 @@
  * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+$active-color: #00008B;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #fff,
+
+    $main-color: #000,
+    $main-font: #{'Lato', sans-serif},
+
+    $heading-color: #000,
+    $heading-font: #{'News Cycle', Impact, sans-serif},
+    $heading-font-weight: 600,
+
+    $heading1-size: 2.5em,
+    $heading2-size: 1.6em,
+    $heading3-size: 1.3em,
+    $heading4-size: 1.0em,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
+
+    $selection-color: #fff,
+    $selection-background-color: $active-color,
+
+    $overlay-element-bg-color: #{0, 0, 0},
+    $overlay-element-fg-color: #{240, 240, 240}
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700");
 @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
 
-// Override theme settings (see ../template/settings.scss)
-$mainFont: "Lato", sans-serif;
-$mainColor: #000;
-$headingFont: "News Cycle", Impact, sans-serif;
-$headingColor: #000;
-$headingTextShadow: none;
-$headingTextTransform: none;
-$backgroundColor: #fff;
-$linkColor: #00008b;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
-$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);

css/theme/sky.scss

@@ -4,44 +4,44 @@
  * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+$active-color: #2a76dd;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+		$background: radial-gradient( #f7fbfc, #add9e4 ),
+    $background-color: #f7fbfc,
+
+    $main-color: #333,
+    $main-font: #{'Open Sans', sans-serif},
+
+    $heading-color: #333,
+    $heading-font: #{'Quicksand', sans-serif},
+		$heading-letter-spacing: -0.05em,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+
+    $selection-color: #fff,
+    $selection-background-color: $active-color,
+
+    $overlay-element-bg-color: #{0, 0, 0},
+    $overlay-element-fg-color: #{240, 240, 240}
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic");
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
 
-// Override theme settings (see ../template/settings.scss)
-$mainFont: "Open Sans", sans-serif;
-$mainColor: #333;
-$headingFont: "Quicksand", sans-serif;
-$headingColor: #333;
-$headingLetterSpacing: -0.08em;
-$headingTextShadow: none;
-$backgroundColor: #f7fbfc;
-$linkColor: #3b759e;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
-$selectionBackgroundColor: #134674;
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
-// Fix links so they are not cut off
-.reveal a {
-  line-height: 1.3em;
-}
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);
 
-// Background generator
-@mixin bodyBackground() {
-  @include radial-gradient(#add9e4, #f7fbfc);
+.reveal a {
+	line-height: 1.3em;
 }
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------

css/theme/solarized.scss

@@ -3,59 +3,53 @@
  * Author: Achim Staebler
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+// Solarized colors by Ethan Schoonover
+$base03:    #002b36;
+$base02:    #073642;
+$base01:    #586e75;
+$base00:    #657b83;
+$base0:     #839496;
+$base1:     #93a1a1;
+$base2:     #eee8d5;
+$base3:     #fdf6e3;
+$yellow:    #b58900;
+$orange:    #cb4b16;
+$red:       #dc322f;
+$magenta:   #d33682;
+$violet:    #6c71c4;
+$blue:      #268bd2;
+$cyan:      #2aa198;
+$green:     #859900;
+
+$active-color: $blue;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: $base3,
+
+    $main-color: $base00,
+    $heading-color: $base01,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 20% ),
+
+    $selection-color: #fff,
+    $selection-background-color: $magenta,
+
+    $overlay-element-bg-color: #{0, 0, 0},
+    $overlay-element-fg-color: #{240, 240, 240}
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("./fonts/league-gothic/league-gothic.css");
 @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic");
 
-/**
- * Solarized colors by Ethan Schoonover
- */
-html * {
-  color-profile: sRGB;
-  rendering-intent: auto;
-}
-
-// Solarized colors
-$base03: #002b36;
-$base02: #073642;
-$base01: #586e75;
-$base00: #657b83;
-$base0: #839496;
-$base1: #93a1a1;
-$base2: #eee8d5;
-$base3: #fdf6e3;
-$yellow: #b58900;
-$orange: #cb4b16;
-$red: #dc322f;
-$magenta: #d33682;
-$violet: #6c71c4;
-$blue: #268bd2;
-$cyan: #2aa198;
-$green: #859900;
-
-// Override theme settings (see ../template/settings.scss)
-$mainColor: $base00;
-$headingColor: $base01;
-$headingTextShadow: none;
-$backgroundColor: $base3;
-$linkColor: $blue;
-$linkColorHover: color.scale($linkColor, $lightness: 20%);
-$selectionBackgroundColor: $magenta;
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
-// Background generator
-// @mixin bodyBackground() {
-// 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
-// }
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);

css/theme/template/exposer.scss

@@ -1,32 +0,0 @@
-// Exposes theme's variables for easy reuse in CSS for plugin authors
-
-@use 'sass:color';
-
-:root {
-  --r-background-color: #{$backgroundColor};
-  --r-main-font: #{$mainFont};
-  --r-main-font-size: #{$mainFontSize};
-  --r-main-color: #{$mainColor};
-  --r-block-margin: #{$blockMargin};
-  --r-heading-margin: #{$headingMargin};
-  --r-heading-font: #{$headingFont};
-  --r-heading-color: #{$headingColor};
-  --r-heading-line-height: #{$headingLineHeight};
-  --r-heading-letter-spacing: #{$headingLetterSpacing};
-  --r-heading-text-transform: #{$headingTextTransform};
-  --r-heading-text-shadow: #{$headingTextShadow};
-  --r-heading-font-weight: #{$headingFontWeight};
-  --r-heading1-text-shadow: #{$heading1TextShadow};
-  --r-heading1-size: #{$heading1Size};
-  --r-heading2-size: #{$heading2Size};
-  --r-heading3-size: #{$heading3Size};
-  --r-heading4-size: #{$heading4Size};
-  --r-code-font: #{$codeFont};
-  --r-link-color: #{$linkColor};
-  --r-link-color-dark: #{color.scale($linkColor, $lightness: -15%)};
-  --r-link-color-hover: #{$linkColorHover};
-  --r-selection-background-color: #{$selectionBackgroundColor};
-  --r-selection-color: #{$selectionColor};
-  --r-overlay-element-bg-color: #{$overlayElementBgColor};
-  --r-overlay-element-fg-color: #{$overlayElementFgColor};
-}

css/theme/template/mixins.scss

@@ -1,33 +1,3 @@
-@mixin vertical-gradient( $top, $bottom ) {
-	background: $top;
-	background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
-	background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
-	background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
-	background: -o-linear-gradient( top, $top 0%, $bottom 100% );
-	background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
-	background: linear-gradient( top, $top 0%, $bottom 100% );
-}
-
-@mixin horizontal-gradient( $top, $bottom ) {
-	background: $top;
-	background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
-	background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
-	background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
-	background: -o-linear-gradient( left, $top 0%, $bottom 100% );
-	background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
-	background: linear-gradient( left, $top 0%, $bottom 100% );
-}
-
-@mixin radial-gradient( $outer, $inner, $type: circle ) {
-	background: $outer;
-	background: -moz-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
-	background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
-	background: -webkit-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
-	background: -o-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
-	background: -ms-radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
-	background: radial-gradient( center, $type cover,  $inner 0%, $outer 100% );
-}
-
 @mixin light-bg-text-color( $color ) {
 	section.has-light-background {
 		&, h1, h2, h3, h4, h5, h6 {

css/theme/template/settings.scss

@@ -4,51 +4,95 @@
 // overridden by the super-theme
 
 @use 'sass:color';
+@use 'sass:meta';
 
 // Background of the presentation
-$backgroundColor: #2b2b2b;
+$background: #2b2b2b !default;
+$background-color: #bbb !default;
 
 // Primary/body text
-$mainFont: 'Lato', sans-serif;
-$mainFontSize: 40px;
-$mainColor: #eee;
+$main-font: 'Lato', sans-serif !default;
+$main-font-size: 40px !default;
+$main-color: #eee !default;
 
 // Vertical spacing between blocks of text
-$blockMargin: 20px;
+$block-margin: 20px !default;
 
 // Headings
-$headingMargin: 0 0 $blockMargin 0;
-$headingFont: 'League Gothic', Impact, sans-serif;
-$headingColor: #eee;
-$headingLineHeight: 1.2;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingTextShadow: none;
-$headingFontWeight: normal;
-$heading1TextShadow: $headingTextShadow;
-
-$heading1Size: 3.77em;
-$heading2Size: 2.11em;
-$heading3Size: 1.55em;
-$heading4Size: 1.00em;
-
-$codeFont: monospace;
+$heading-margin: 0 0 20px 0 !default;
+$heading-font: 'League Gothic', Impact, sans-serif !default;
+$heading-color: #eee !default;
+$heading-line-height: 1.2 !default;
+$heading-letter-spacing: normal !default;
+$heading-text-transform: uppercase !default;
+$heading-text-shadow: none !default;
+$heading-font-weight: normal !default;
+$heading1-text-shadow: none !default;
+
+$heading1-size: 3.77em !default;
+$heading2-size: 2.11em !default;
+$heading3-size: 1.55em !default;
+$heading4-size: 1.00em !default;
+
+$code-font: monospace !default;
 
 // Links and actions
-$linkColor: #13DAEC;
-$linkColorHover: color.scale( $linkColor, $lightness: 20% );
+$link-color: #13DAEC !default;
+$link-color-dark: color.scale($link-color, $lightness: -15%) !default;
+$link-color-hover: color.scale($link-color, $lightness: 20%) !default;
 
 // Text selection
-$selectionBackgroundColor: #FF5E99;
-$selectionColor: #fff;
+$selection-background-color: #0fadbb !default;
+$selection-color: #fff !default;
 
 // Colors used for UI elements that are overlaid on top of
 // the presentation
-$overlayElementBgColor: 240, 240, 240;
-$overlayElementFgColor: 0, 0, 0;
-
-// Generates the presentation background, can be overridden
-// to return a background image or gradient
-@mixin bodyBackground() {
-	background: $backgroundColor;
-}
+$overlay-element-bg-color: 240, 240, 240 !default;
+$overlay-element-fg-color: 0, 0, 0 !default;
+
+// Expose all variables to the DOM
+:root {
+  // Background of the presentation
+  --r-background: #{$background};
+  --r-background-color: #{$background-color};
+
+  // Primary/body text
+  --r-main-font: #{$main-font};
+  --r-main-font-size: #{$main-font-size};
+  --r-main-color: #{$main-color};
+
+  // Vertical spacing between blocks of text
+  --r-block-margin: #{$block-margin};
+
+  // Headings
+  --r-heading-margin: #{$heading-margin};
+  --r-heading-font: #{$heading-font};
+  --r-heading-color: #{$heading-color};
+  --r-heading-line-height: #{$heading-line-height};
+  --r-heading-letter-spacing: #{$heading-letter-spacing};
+  --r-heading-text-transform: #{$heading-text-transform};
+  --r-heading-text-shadow: #{$heading-text-shadow};
+  --r-heading-font-weight: #{$heading-font-weight};
+  --r-heading1-text-shadow: #{$heading1-text-shadow};
+
+  --r-heading1-size: #{$heading1-size};
+  --r-heading2-size: #{$heading2-size};
+  --r-heading3-size: #{$heading3-size};
+  --r-heading4-size: #{$heading4-size};
+
+  --r-code-font: #{$code-font};
+
+  // Links and actions
+  --r-link-color: #{$link-color};
+  --r-link-color-dark: #{$link-color-dark};
+  --r-link-color-hover: #{$link-color-hover};
+
+  // Text selection
+  --r-selection-background-color: #{$selection-background-color};
+  --r-selection-color: #{$selection-color};
+
+  // Colors used for UI elements that are overlaid on top of
+  // the presentation
+  --r-overlay-element-bg-color: #{$overlay-element-bg-color};
+  --r-overlay-element-fg-color: #{$overlay-element-fg-color};
+}

css/theme/template/theme.scss

@@ -4,10 +4,8 @@
  * GLOBAL STYLES
  *********************************************/
 
-@import "./exposer";
-
 .reveal-viewport {
-	@include bodyBackground();
+	background: var(--r-background);
 	background-color: var(--r-background-color);
 }
 

css/theme/white-contrast.scss

@@ -7,43 +7,44 @@
  * - $mainFontSize controls code blocks, too (although under some ratio).
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+$active-color: #2a76dd;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #fff,
+
+    $main-font: "'Source Sans Pro', Helvetica, sans-serif",
+    $main-font-size: 42px,
+    $main-color: #000,
+
+    $heading-color: #000,
+    $heading-font: "'Source Sans Pro', Helvetica, sans-serif",
+    $heading-font-weight: 600,
+
+    $heading1-size: 2.5em,
+    $heading2-size: 1.6em,
+    $heading3-size: 1.3em,
+    $heading4-size: 1.0em,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+
+    $selection-color: #fff,
+    $selection-background-color: $active-color,
+
+    $overlay-element-bg-color: "0, 0, 0",
+    $overlay-element-fg-color: "240, 240, 240"
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("./fonts/source-sans-pro/source-sans-pro.css");
 
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #fff;
-
-$mainColor: #000;
-$headingColor: #000;
-
-$mainFontSize: 42px;
-$mainFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #2a76dd;
-$linkColorHover: color.scale($linkColor, $lightness: 15%);
-$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%);
-
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1em;
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);

css/theme/white.scss

@@ -4,43 +4,44 @@
  * By Hakim El Hattab, http://hakim.se
  */
 
-// Default mixins and settings -----------------
+// Load utils
 @use "sass:color";
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
+@use "template/mixins" as mixins;
+
+$active-color: #2a76dd;
+
+// Inject theme variables (with some overrides)
+@use "template/settings" with (
+    $background-color: #fff,
+
+    $main-color: #222,
+    $main-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $main-font-size: 42px,
+
+    $heading-color: #222,
+    $heading-font: #{'Source Sans Pro', Helvetica, sans-serif},
+    $heading-font-weight: 600,
+
+    $heading1-size: 2.5em,
+    $heading2-size: 1.6em,
+    $heading3-size: 1.3em,
+    $heading4-size: 1.0em,
+
+    $link-color: $active-color,
+    $link-color-hover: color.scale( $active-color, $lightness: 15% ),
+
+    $selection-color: #fff,
+    $selection-background-color: $active-color,
+
+    $overlay-element-bg-color: #{0, 0, 0},
+    $overlay-element-fg-color: #{240, 240, 240}
+);
+
+// Inject the theme template
+@use "template/theme";
 
 // Include theme-specific fonts
 @import url("./fonts/source-sans-pro/source-sans-pro.css");
 
-// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #fff;
-
-$mainColor: #222;
-$headingColor: #222;
-
-$mainFontSize: 42px;
-$mainFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingFont: "Source Sans Pro", Helvetica, sans-serif;
-$headingTextShadow: none;
-$headingLetterSpacing: normal;
-$headingTextTransform: uppercase;
-$headingFontWeight: 600;
-$linkColor: #2a76dd;
-$linkColorHover: color.scale($linkColor, $lightness: 15%);
-$selectionBackgroundColor: color.scale($linkColor, $lightness: 25%);
-
-$heading1Size: 2.5em;
-$heading2Size: 1.6em;
-$heading3Size: 1.3em;
-$heading4Size: 1em;
-
-$overlayElementBgColor: 0, 0, 0;
-$overlayElementFgColor: 240, 240, 240;
-
-// Change text colors against dark slide backgrounds
-@include dark-bg-text-color(#fff);
-
-// Theme template ------------------------------
-@import "./template/theme";
-// ---------------------------------------------
+// Change text when the background is inverted
+@include mixins.dark-bg-text-color(#fff);

package.json

@@ -53,6 +53,7 @@
     "dev": "npm run start",
     "start": "vite --port 8000",
     "build:core": "tsc && vite build && vite build -c vite.config.styles.ts",
+    "build:styles": "vite build -c vite.config.styles.ts",
     "build": "tsc && vite build && vite build -c vite.config.styles.ts && vite build -c plugin/highlight/vite.config.ts && vite build -c plugin/markdown/vite.config.ts && vite build -c plugin/math/vite.config.ts && vite build -c plugin/notes/vite.config.ts && vite build -c plugin/search/vite.config.ts && vite build -c plugin/zoom/vite.config.ts",
     "test": "node test.js"
   },

vite.config.styles.ts

@@ -13,6 +13,13 @@ const themeEntries = themeFiles.reduce((acc, file) => {
 
 export default defineConfig({
   root: './',
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler'
+      }
+    }
+  },
   build: {
     emptyOutDir: false,
     cssCodeSplit: true,

vite.config.ts

@@ -36,4 +36,11 @@ export default defineConfig({
     },
   },
   plugins: [dts({ insertTypesEntry: true, rollupTypes: true })],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler'
+      }
+    }
+  },
 });