_index.scss

@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "sass:list";
@use "../light" as l;
@use "../dark" as d;
@use "../layout";

// Overrides default options with light mode/dark mode specific version.
@function override($override: false, $base) {
  @if $override != false {
    @return $override;
  }
  @return $base;
}

// Get an option from a set.
@function get($collection, $value, $sub: false) {
  @if $sub != false {
    @return map-get($collection, $sub, $value);
  }
  @return map-get($collection, $value);
}

// Light mode
$light: (
  "background": override(l.$background, l.$background_),
  "border": override(l.$border, l.$border_),
  "lines": override(l.$lines, l.$lines_),
  "text": override(l.$text, l.$text_),
  "header-text": override(l.$header-text, l.$header-text_),
  "special-text": override(l.$special-text, l.$special-text_),
  "hover": override(l.$hover, l.$hover_),
  "links-background": override(l.$links-background, l.$links-background_),
  "highlight": override(l.$highlight, l.$highlight_),
);

// Dark mode
$dark: (
  "background": override(d.$background, d.$background_),
  "border": override(d.$border, d.$border_),
  "lines": override(d.$lines, d.$lines_),
  "text": override(d.$text, d.$text_),
  "header-text": override(d.$header-text, d.$header-text_),
  "special-text": override(d.$special-text, d.$special-text_),
  "hover": override(d.$hover, d.$hover_),
  "links-background": override(d.$links-background, d.$links-background_),
  "highlight": override(d.$highlight, d.$highlight_),
);

// Callouts
$callout-types: "note", "abstract", "info", "todo", "tip", "success", "question", "warning",
  "failure", "danger", "bug", "example", "quote";

:root[saved-theme="light"] {
  --light: #{get($light, "background")} !important;
  --lightgray: #{get($light, "border")} !important;
  --gray: #{get($light, "lines")} !important;
  --darkgray: #{get($light, "text")} !important;
  --dark: #{get($light, "header-text")} !important;
  --secondary: #{get($light, "special-text")} !important;
  --tertiary: #{get($light, "hover")} !important;
  --highlight: #{get($light, "links-background")} !important;
  --textHighlight: #{get($light, "highlight")} !important;
  .callout {
    @each $type in $callout-types {
      &[data-callout="#{$type}"] {
        --color: #{override(get(l.$callouts, "color", $type), get(l.$callouts_, "color", $type))};
        --border: #{override(
            get(l.$callouts, "border", $type),
            get(l.$callouts_, "border", $type)
          )};
        --bg: #{override(
            get(l.$callouts, "background", $type),
            get(l.$callouts_, "background", $type)
          )};
      }
    }
  }
}

:root {
  --light: #{get($dark, "background")} !important;
  --lightgray: #{get($dark, "border")} !important;
  --gray: #{get($dark, "lines")} !important;
  --darkgray: #{get($dark, "text")} !important;
  --dark: #{get($dark, "header-text")} !important;
  --secondary: #{get($dark, "special-text")} !important;
  --tertiary: #{get($dark, "hover")} !important;
  --highlight: #{get($dark, "links-background")} !important;
  --textHighlight: #{get($dark, "highlight")} !important;
  .callout {
    @each $type in $callout-types {
      &[data-callout="#{$type}"] {
        --color: #{override(get(d.$callouts, "color", $type), get(d.$callouts_, "color", $type))};
        --border: #{override(
            get(d.$callouts, "border", $type),
            get(d.$callouts_, "border", $type)
          )};
        --bg: #{override(
            get(d.$callouts, "background", $type),
            get(d.$callouts_, "background", $type)
          )};
      }
    }
  }
}