1
0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-09-02 03:03:03 +02:00

refactored all themes to latest sass syntax, fixes deprecation warnings

This commit is contained in:
Hakim El Hattab
2024-11-05 19:21:39 +01:00
parent 294d7c2486
commit 94a86f466d
36 changed files with 589 additions and 574 deletions

View File

@@ -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);