diff --git a/README.md b/README.md index 042061e..feaab07 100644 --- a/README.md +++ b/README.md @@ -62,8 +62,8 @@ 3. Download the [catppuccin.css](https://github.com/catppuccin/mdBook/releases/latest/download/catppuccin.css) file from the [latest GitHub release](https://github.com/catppuccin/mdBook/releases/latest) to the `theme` - directory. - + directory. + See the [Supported Plugins](#supported-plugins) section below for integrations with other mdBook plugins. @@ -75,7 +75,7 @@ +additional-css = ["./theme/catppuccin.css"] ``` -5. Edit the `index.hbs` file to include the Catppuccin flavours: +5. Edit the `index.hbs` file to include the Catppuccin flavors: ```diff -
  • @@ -103,7 +103,7 @@ + preferred-dark-theme = "mocha" ``` -6. Build using `mdbook build` and enjoy your new Catppuccin flavours! +6. Build using `mdbook build` and enjoy your new Catppuccin flavors! ### Supported Plugins diff --git a/src/catppuccin-admonish.scss b/src/catppuccin-admonish.scss index 46fc341..4c4528a 100644 --- a/src/catppuccin-admonish.scss +++ b/src/catppuccin-admonish.scss @@ -1,16 +1,17 @@ @use "sass:color"; @use "sass:list"; +@use "sass:map"; @use "@catppuccin/palette/scss/catppuccin" as catppuccin; @mixin level($palette, $classes, $color) { :is(.admonition):is(#{$classes}) { - border-color: #{map-get($palette, $color)}; + border-color: #{map.get($palette, $color)}; } :is(#{$classes}) > :is(.admonition-title, summary.admonition-title) { - background-color: #{color.change(map-get($palette, $color), $alpha: 0.2)}; + background-color: #{color.change(map.get($palette, $color), $alpha: 0.2)}; } :is(#{$classes}) > :is(.admonition-title, summary.admonition-title)::before { - background-color: #{map-get($palette, $color)}; + background-color: #{map.get($palette, $color)}; } } @@ -70,8 +71,8 @@ $mappings: ( } } -@each $flavour, $color in catppuccin.$palette { - .#{$flavour} { - @include main($color); +@each $flavor, $colors in catppuccin.$palette { + .#{$flavor} { + @include main($colors); } } diff --git a/src/catppuccin-alerts.scss b/src/catppuccin-alerts.scss index 45232ac..70a41c9 100644 --- a/src/catppuccin-alerts.scss +++ b/src/catppuccin-alerts.scss @@ -1,21 +1,22 @@ +@use "sass:map"; @use "@catppuccin/palette/scss/catppuccin" as catppuccin; -@each $flavour, $color in catppuccin.$palette { - .#{$flavour} { +@each $flavor, $colors in catppuccin.$palette { + .#{$flavor} { .mdbook-alerts-note { - --mdbook-alerts-color: #{map-get($color, "blue")}; + --mdbook-alerts-color: #{map.get($colors, "blue")}; } .mdbook-alerts-tip { - --mdbook-alerts-color: #{map-get($color, "green")}; + --mdbook-alerts-color: #{map.get($colors, "green")}; } .mdbook-alerts-important { - --mdbook-alerts-color: #{map-get($color, "mauve")}; + --mdbook-alerts-color: #{map.get($colors, "mauve")}; } .mdbook-alerts-warning { - --mdbook-alerts-color: #{map-get($color, "yellow")}; + --mdbook-alerts-color: #{map.get($colors, "yellow")}; } .mdbook-alerts-caution { - --mdbook-alerts-color: #{map-get($color, "red")}; + --mdbook-alerts-color: #{map.get($colors, "red")}; } } } diff --git a/src/catppuccin.scss b/src/catppuccin.scss index 3241757..849a455 100644 --- a/src/catppuccin.scss +++ b/src/catppuccin.scss @@ -1,72 +1,73 @@ +@use "sass:map"; @use "@catppuccin/palette/scss/catppuccin" as catppuccin; @use "@catppuccin/highlightjs/sass/_theme" as hljs; -@each $flavour, $colour in catppuccin.$palette { - .#{$flavour} { - @include hljs.highlights($flavour); +@each $flavor, $colors in catppuccin.$palette { + .#{$flavor} { + @include hljs.highlights($flavor); code { - color: map-get($colour, "text"); - background: map-get($colour, "mantle"); + color: map.get($colors, "text"); + background: map.get($colors, "mantle"); } blockquote { blockquote { - border-top: 0.1em solid map-get($colour, "surface2"); - border-bottom: 0.1em solid map-get($colour, "surface2"); + border-top: 0.1em solid map.get($colors, "surface2"); + border-bottom: 0.1em solid map.get($colors, "surface2"); } } hr { - border-color: map-get($colour, "surface2"); + border-color: map.get($colors, "surface2"); border-style: solid; } del { - color: map-get($colour, "overlay2"); + color: map.get($colors, "overlay2"); } .ace_gutter { - color: map-get($colour, "overlay1"); - background: map-get($colour, "mantle"); + color: map.get($colors, "overlay1"); + background: map.get($colors, "mantle"); } .ace_gutter-active-line.ace_gutter-cell { - color: map-get($colour, "pink"); - background: map-get($colour, "mantle"); + color: map.get($colors, "pink"); + background: map.get($colors, "mantle"); } .tooltiptext { - background: map-get($colour, "mantle"); - color: map-get($colour, "text"); + background: map.get($colors, "mantle"); + color: map.get($colors, "text"); } } } -@each $flavour, $color in catppuccin.$palette { - .#{$flavour} { - --bg: #{map-get($color, "base")}; - --fg: #{map-get($color, "text")}; - --sidebar-bg: #{map-get($color, "mantle")}; - --sidebar-fg: #{map-get($color, "text")}; - --sidebar-non-existant: #{map-get($color, "overlay0")}; - --sidebar-active: #{map-get($color, "blue")}; - --sidebar-spacer: #{map-get($color, "overlay0")}; - --scrollbar: #{map-get($color, "overlay0")}; - --icons: #{map-get($color, "overlay0")}; - --icons-hover: #{map-get($color, "overlay1")}; - --links: #{map-get($color, "blue")}; - --inline-code-color: #{map-get($color, "peach")}; - --theme-popup-bg: #{map-get($color, "mantle")}; - --theme-popup-border: #{map-get($color, "overlay0")}; - --theme-hover: #{map-get($color, "surface0")}; - --quote-bg: #{map-get($color, "mantle")}; - --quote-border: #{map-get($color, "crust")}; - --table-border-color: #{map-get($color, "surface0")}; - --table-header-bg: #{map-get($color, "mantle")}; - --table-alternate-bg: #{map-get($color, "mantle")}; - --searchbar-border-color: #{map-get($color, "surface0")}; - --searchbar-bg: #{map-get($color, "mantle")}; - --searchbar-fg: #{map-get($color, "text")}; - --searchbar-shadow-color: #{map-get($color, "crust")}; - --searchresults-header-fg: #{map-get($color, "text")}; - --searchresults-border-color: #{map-get($color, "surface0")}; - --searchresults-li-bg: #{map-get($color, "base")}; - --search-mark-bg: #{map-get($color, "peach")}; - --warning-border: #{map-get($color, "peach")}; - --color-scheme: #{if($flavour == "latte", "light", "dark")}; +@each $flavor, $colors in catppuccin.$palette { + .#{$flavor} { + --bg: #{map.get($colors, "base")}; + --fg: #{map.get($colors, "text")}; + --sidebar-bg: #{map.get($colors, "mantle")}; + --sidebar-fg: #{map.get($colors, "text")}; + --sidebar-non-existant: #{map.get($colors, "overlay0")}; + --sidebar-active: #{map.get($colors, "blue")}; + --sidebar-spacer: #{map.get($colors, "overlay0")}; + --scrollbar: #{map.get($colors, "overlay0")}; + --icons: #{map.get($colors, "overlay0")}; + --icons-hover: #{map.get($colors, "overlay1")}; + --links: #{map.get($colors, "blue")}; + --inline-code-color: #{map.get($colors, "peach")}; + --theme-popup-bg: #{map.get($colors, "mantle")}; + --theme-popup-border: #{map.get($colors, "overlay0")}; + --theme-hover: #{map.get($colors, "surface0")}; + --quote-bg: #{map.get($colors, "mantle")}; + --quote-border: #{map.get($colors, "crust")}; + --table-border-color: #{map.get($colors, "surface0")}; + --table-header-bg: #{map.get($colors, "mantle")}; + --table-alternate-bg: #{map.get($colors, "mantle")}; + --searchbar-border-color: #{map.get($colors, "surface0")}; + --searchbar-bg: #{map.get($colors, "mantle")}; + --searchbar-fg: #{map.get($colors, "text")}; + --searchbar-shadow-color: #{map.get($colors, "crust")}; + --searchresults-header-fg: #{map.get($colors, "text")}; + --searchresults-border-color: #{map.get($colors, "surface0")}; + --searchresults-li-bg: #{map.get($colors, "base")}; + --search-mark-bg: #{map.get($colors, "peach")}; + --warning-border: #{map.get($colors, "peach")}; + --color-scheme: #{if($flavor == "latte", "light", "dark")}; } }