From e5ee092057620269d69025ff9affa1f98fb7af39 Mon Sep 17 00:00:00 2001
From: Andrew Shu <talklittle@gmail.com>
Date: Wed, 17 Sep 2025 20:47:56 -0700
Subject: [PATCH] Revert some SCSS changes to fix Ansible provisioning

---
 tildes/package.json                    |   1 +
 tildes/scss/_functions.scss            |   8 +-
 tildes/scss/themes/_atom_one_dark.scss |   4 +-
 tildes/scss/themes/_black.scss         |   4 +-
 tildes/scss/themes/_default.scss       |   4 +-
 tildes/scss/themes/_dracula.scss       |   6 +-
 tildes/scss/themes/_gruvbox.scss       |  12 +-
 tildes/scss/themes/_love.scss          |   8 +-
 tildes/scss/themes/_nord.scss          |  12 +-
 tildes/scss/themes/_solarized.scss     |  12 +-
 tildes/scss/themes/_theme_mixins.scss  | 170 ++++++++++++-------------
 tildes/scss/themes/_zenburn.scss       |   4 +-
 12 files changed, 123 insertions(+), 122 deletions(-)

diff --git a/tildes/package.json b/tildes/package.json
index 55d741b..c3d98c0 100644
--- a/tildes/package.json
+++ b/tildes/package.json
@@ -149,6 +149,7 @@
       ],
       "scss/double-slash-comment-whitespace-inside": "always",
       "scss/load-no-partial-leading-underscore": true,
+      "scss/no-global-function-names": null,
       "scss/operator-no-newline-after": true,
       "scss/operator-no-newline-before": true,
       "scss/operator-no-unspaced": true,
diff --git a/tildes/scss/_functions.scss b/tildes/scss/_functions.scss
index 5596149..3adfa66 100644
--- a/tildes/scss/_functions.scss
+++ b/tildes/scss/_functions.scss
@@ -8,7 +8,7 @@
   $x1: $x0;
 
   @for $i from 1 through 10 {
-    $x1: $x0 - ($x0 * $x0 - math.abs($r)) / (2 * $x0);
+    $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
     $x0: $x1;
   }
 
@@ -24,9 +24,9 @@
   $brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;
 
   // Extract color components
-  $red-component: color.red($color);
-  $green-component: color.green($color);
-  $blue-component: color.blue($color);
+  $red-component: red($color);
+  $green-component: green($color);
+  $blue-component: blue($color);
 
   // Calculate a brightness value in 3d color space between 0 and 255
   $red: $red-component * $red-component * $red-magic-number;
diff --git a/tildes/scss/themes/_atom_one_dark.scss b/tildes/scss/themes/_atom_one_dark.scss
index 0ea8f91..5e2ad13 100644
--- a/tildes/scss/themes/_atom_one_dark.scss
+++ b/tildes/scss/themes/_atom_one_dark.scss
@@ -52,6 +52,6 @@ body.theme-atom-one-dark {
 
 @include theme-preview-block(
   "atom-one-dark",
-  map.get($theme-atom-one-dark, "foreground-primary"),
-  map.get($theme-atom-one-dark, "background-primary")
+  map-get($theme-atom-one-dark, "foreground-primary"),
+  map-get($theme-atom-one-dark, "background-primary")
 );
diff --git a/tildes/scss/themes/_black.scss b/tildes/scss/themes/_black.scss
index eb75013..b8ab50e 100644
--- a/tildes/scss/themes/_black.scss
+++ b/tildes/scss/themes/_black.scss
@@ -30,6 +30,6 @@ body.theme-black {
 
 @include theme-preview-block(
   "black",
-  map.get($theme-black, "foreground-primary"),
-  map.get($theme-black, "background-primary")
+  map-get($theme-black, "foreground-primary"),
+  map-get($theme-black, "background-primary")
 );
diff --git a/tildes/scss/themes/_default.scss b/tildes/scss/themes/_default.scss
index cfd8027..d620171 100644
--- a/tildes/scss/themes/_default.scss
+++ b/tildes/scss/themes/_default.scss
@@ -34,6 +34,6 @@ body {
 
 @include theme-preview-block(
   "white",
-  map.get($default-theme, "foreground-primary"),
-  map.get($default-theme, "background-primary")
+  map-get($default-theme, "foreground-primary"),
+  map-get($default-theme, "background-primary")
 );
diff --git a/tildes/scss/themes/_dracula.scss b/tildes/scss/themes/_dracula.scss
index 589e2e4..1183a41 100644
--- a/tildes/scss/themes/_dracula.scss
+++ b/tildes/scss/themes/_dracula.scss
@@ -20,7 +20,7 @@ $theme-dracula: (
   "alert": $orange,
   "background-primary": $background,
   "background-secondary": $background-alt,
-  "background-input": color.adjust($background, $lightness: -10%),
+  "background-input": darken($background, 10%),
   "border": $foreground-alt,
   "comment-label-exemplary": $cyan,
   "comment-label-joke": $green,
@@ -53,6 +53,6 @@ body.theme-dracula {
 
 @include theme-preview-block(
   "dracula",
-  map.get($theme-dracula, "foreground-primary"),
-  map.get($theme-dracula, "background-primary")
+  map-get($theme-dracula, "foreground-primary"),
+  map-get($theme-dracula, "background-primary")
 );
diff --git a/tildes/scss/themes/_gruvbox.scss b/tildes/scss/themes/_gruvbox.scss
index 01d2c61..94b0e7c 100644
--- a/tildes/scss/themes/_gruvbox.scss
+++ b/tildes/scss/themes/_gruvbox.scss
@@ -93,7 +93,7 @@ $gruvbox-base: (
 
 // Dark theme definition
 $theme-gruvbox-dark:
-  map.merge(
+  map-merge(
     $gruvbox-base,
     (
       "alert": $gb-dm-light-orange,
@@ -118,13 +118,13 @@ body.theme-gruvbox-dark {
 
 @include theme-preview-block(
   "gruvbox-dark",
-  map.get($theme-gruvbox-dark, "foreground-primary"),
-  map.get($theme-gruvbox-dark, "background-primary")
+  map-get($theme-gruvbox-dark, "foreground-primary"),
+  map-get($theme-gruvbox-dark, "background-primary")
 );
 
 // Light theme definition
 $theme-gruvbox-light:
-  map.merge(
+  map-merge(
     $gruvbox-base,
     (
       "alert": $dark-orange,
@@ -149,6 +149,6 @@ body.theme-gruvbox-light {
 
 @include theme-preview-block(
   "gruvbox-light",
-  map.get($theme-gruvbox-light, "foreground-primary"),
-  map.get($theme-gruvbox-light, "background-primary")
+  map-get($theme-gruvbox-light, "foreground-primary"),
+  map-get($theme-gruvbox-light, "background-primary")
 );
diff --git a/tildes/scss/themes/_love.scss b/tildes/scss/themes/_love.scss
index 224e210..e22eda9 100644
--- a/tildes/scss/themes/_love.scss
+++ b/tildes/scss/themes/_love.scss
@@ -36,8 +36,8 @@ body.theme-love-dark {
 
 @include theme-preview-block(
   "love-dark",
-  map.get($theme-love-dark, "foreground-primary"),
-  map.get($theme-love-dark, "background-primary")
+  map-get($theme-love-dark, "foreground-primary"),
+  map-get($theme-love-dark, "background-primary")
 );
 
 // Love Light
@@ -76,6 +76,6 @@ body.theme-love-light {
 
 @include theme-preview-block(
   "love-light",
-  map.get($theme-love-light, "foreground-primary"),
-  map.get($theme-love-light, "background-primary")
+  map-get($theme-love-light, "foreground-primary"),
+  map-get($theme-love-light, "background-primary")
 );
diff --git a/tildes/scss/themes/_nord.scss b/tildes/scss/themes/_nord.scss
index 531b130..5b297b8 100644
--- a/tildes/scss/themes/_nord.scss
+++ b/tildes/scss/themes/_nord.scss
@@ -52,7 +52,7 @@ $theme-nord-base: (
 
 // Dark theme definition
 $theme-nord-dark:
-  map.merge(
+  map-merge(
     $theme-nord-base,
     (
       "background-input": #001f27,
@@ -71,13 +71,13 @@ body.theme-nord-dark {
 
 @include theme-preview-block(
   "nord-dark",
-  map.get($theme-nord-dark, "foreground-primary"),
-  map.get($theme-nord-dark, "background-primary")
+  map-get($theme-nord-dark, "foreground-primary"),
+  map-get($theme-nord-dark, "background-primary")
 );
 
 // Light theme definition
 $theme-nord-light:
-  map.merge(
+  map-merge(
     $theme-nord-base,
     (
       "background-input": #fefbf1,
@@ -98,6 +98,6 @@ body.theme-nord-light {
 
 @include theme-preview-block(
   "nord-light",
-  map.get($theme-nord-light, "foreground-primary"),
-  map.get($theme-nord-light, "background-primary")
+  map-get($theme-nord-light, "foreground-primary"),
+  map-get($theme-nord-light, "background-primary")
 );
diff --git a/tildes/scss/themes/_solarized.scss b/tildes/scss/themes/_solarized.scss
index 457e913..c7e1b3b 100644
--- a/tildes/scss/themes/_solarized.scss
+++ b/tildes/scss/themes/_solarized.scss
@@ -56,7 +56,7 @@ $theme-solarized-base: (
 
 // Dark theme definition
 $theme-solarized-dark:
-  map.merge(
+  map-merge(
     $theme-solarized-base,
     (
       "background-input": #001f27,
@@ -75,13 +75,13 @@ body.theme-solarized-dark {
 
 @include theme-preview-block(
   "solarized-dark",
-  map.get($theme-solarized-dark, "foreground-primary"),
-  map.get($theme-solarized-dark, "background-primary")
+  map-get($theme-solarized-dark, "foreground-primary"),
+  map-get($theme-solarized-dark, "background-primary")
 );
 
 // Light theme definition
 $theme-solarized-light:
-  map.merge(
+  map-merge(
     $theme-solarized-base,
     (
       "background-input": #fefbf1,
@@ -102,6 +102,6 @@ body.theme-solarized-light {
 
 @include theme-preview-block(
   "solarized-light",
-  map.get($theme-solarized-light, "foreground-primary"),
-  map.get($theme-solarized-light, "background-primary")
+  map-get($theme-solarized-light, "foreground-primary"),
+  map-get($theme-solarized-light, "background-primary")
 );
diff --git a/tildes/scss/themes/_theme_mixins.scss b/tildes/scss/themes/_theme_mixins.scss
index 41bbc9b..c1d8c0c 100644
--- a/tildes/scss/themes/_theme_mixins.scss
+++ b/tildes/scss/themes/_theme_mixins.scss
@@ -10,12 +10,12 @@
 }
 
 @function map-get-fallback($map, $preferred-key, $fallback-key) {
-  // map.get that will fall back to a second key if the first isn't set
-  @if (map.has-key($map, $preferred-key)) {
-    @return map.get($map, $preferred-key);
+  // map-get that will fall back to a second key if the first isn't set
+  @if (map-has-key($map, $preferred-key)) {
+    @return map-get($map, $preferred-key);
   }
 
-  @return map.get($map, $fallback-key);
+  @return map-get($map, $fallback-key);
 }
 
 @function init-theme($theme) {
@@ -38,7 +38,7 @@
     "warning";
 
   @each $key in $essential-keys {
-    @if (not map.has-key($theme, $key)) {
+    @if (not map-has-key($theme, $key)) {
       @error "Missing essential key in theme: #{$key}";
     }
   }
@@ -62,27 +62,27 @@
   $topic-tag-spoiler: map-get-fallback($theme, "topic-tag-spoiler", "warning");
 
   // foreground-extreme: if not defined, use white on a dark bg and black on a light one
-  $foreground-extreme: map.get($theme, "foreground-extreme");
+  $foreground-extreme: map-get($theme, "foreground-extreme");
   $foreground-extreme:
     choose-by-brightness(
-      map.get($theme, "background-primary"),
+      map-get($theme, "background-primary"),
       #000,
       #fff,
     ) !default;
 
   // foreground-middle: if not defined, mix foreground-primary and foreground-secondary
-  $foreground-middle: map.get($theme, "foreground-middle");
+  $foreground-middle: map-get($theme, "foreground-middle");
   $foreground-middle:
-    color.mix(
-      map.get($theme, "foreground-primary"),
-      map.get($theme, "foreground-secondary")
+    mix(
+      map-get($theme, "foreground-primary"),
+      map-get($theme, "foreground-secondary")
     ) !default;
 
   // link-hover: if not defined, darken the link color slightly
-  $link-hover: map.get($theme, "link-hover");
-  $link-hover: color.adjust(map.get($theme, "link"), $lightness: -5%) !default;
+  $link-hover: map-get($theme, "link-hover");
+  $link-hover: darken(map-get($theme, "link"), 5%) !default;
   $new-theme:
-    map.merge(
+    map-merge(
       $theme,
       (
         "background-input": $background-input,
@@ -106,7 +106,7 @@
       )
     );
 
-  @return map.merge($default-theme, $new-theme);
+  @return map-merge($default-theme, $new-theme);
 }
 
 @mixin minimal-hardcoded-theme($theme) {
@@ -117,9 +117,9 @@
   @supports not (--test: green) {
     *,
     #sidebar {
-      background-color: map.get($theme, "background-primary");
-      border-color: map.get($theme, "border");
-      color: map.get($theme, "foreground-primary");
+      background-color: map-get($theme, "background-primary");
+      border-color: map-get($theme, "border");
+      color: map-get($theme, "foreground-primary");
     }
 
     a,
@@ -128,7 +128,7 @@
     .btn-link,
     .nav-item a,
     .tab-item {
-      color: map.get($theme, "link");
+      color: map-get($theme, "link");
     }
 
     // "&" represents the <body> element itself
@@ -137,7 +137,7 @@
     #site-header *,
     .comment-header,
     .comment-header * {
-      background-color: map.get($theme, "background-secondary");
+      background-color: map-get($theme, "background-secondary");
     }
 
     input,
@@ -145,7 +145,7 @@
     textarea,
     textarea[readonly],
     .form-select:not([multiple], [size]) {
-      background-color: map.get($theme, "background-input");
+      background-color: map-get($theme, "background-input");
     }
 
     .btn.btn-primary {
@@ -153,7 +153,7 @@
     }
 
     .text-secondary {
-      color: map.get($theme, "foreground-secondary");
+      color: map-get($theme, "foreground-secondary");
     }
 
     // Prevents the * rule from causing a <span> to override its parent
@@ -165,105 +165,105 @@
 
 @mixin use-theme($selected-theme) {
   $theme: init-theme($selected-theme);
-  $is-light: is-color-bright(map.get($theme, "background-primary"));
+  $is-light: is-color-bright(map-get($theme, "background-primary"));
 
   @include minimal-hardcoded-theme($theme);
 
   // When creating CSS custom properties and using any of Sass' capabilities
   // you'll have to interpolate it with the Sass syntax `#{...}` as seen below.
-  --alert-color: #{map.get($theme, "alert")};
-  --background-input-color: #{map.get($theme, "background-input")};
+  --alert-color: #{map-get($theme, "alert")};
+  --background-input-color: #{map-get($theme, "background-input")};
   --background-mixed-color:
-    #{color.mix(
-      map.get($theme, "background-primary"),
-      map.get($theme, "background-secondary")
+    #{mix(
+      map-get($theme, "background-primary"),
+      map-get($theme, "background-secondary")
     )};
-  --background-primary-color: #{map.get($theme, "background-primary")};
-  --background-secondary-color: #{map.get($theme, "background-secondary")};
-  --border-color: #{map.get($theme, "border")};
-  --button-color: #{map.get($theme, "button")};
+  --background-primary-color: #{map-get($theme, "background-primary")};
+  --background-secondary-color: #{map-get($theme, "background-secondary")};
+  --border-color: #{map-get($theme, "border")};
+  --button-color: #{map-get($theme, "button")};
   --button-by-brightness-color:
     #{choose-by-brightness(
-      map.get($theme, "button"),
+      map-get($theme, "button"),
       #000,
       #fff
     )};
-  --button-transparent-color: #{rgba(map.get($theme, "button"), 0.2)};
-  --button-used-color: #{map.get($theme, "button-used")};
-  --error-color: #{map.get($theme, "error")};
+  --button-transparent-color: #{rgba(map-get($theme, "button"), 0.2)};
+  --button-used-color: #{map-get($theme, "button-used")};
+  --error-color: #{map-get($theme, "error")};
   --error-by-brightness-color:
     #{choose-by-brightness(
-      map.get($theme, "error"),
+      map-get($theme, "error"),
       #000,
       #fff
     )};
   --foreground-extreme-color:
     #{choose-by-brightness(
-      map.get($theme, "background-primary"),
+      map-get($theme, "background-primary"),
       #000,
       #fff
     )};
-  --foreground-highlight-color: #{map.get($theme, "foreground-highlight")};
+  --foreground-highlight-color: #{map-get($theme, "foreground-highlight")};
   --foreground-mixed-color:
-    #{color.mix(
-      map.get($theme, "foreground-primary"),
-      map.get($theme, "foreground-highlight")
+    #{mix(
+      map-get($theme, "foreground-primary"),
+      map-get($theme, "foreground-highlight")
     )};
-  --foreground-primary-color: #{map.get($theme, "foreground-primary")};
-  --foreground-secondary-color: #{map.get($theme, "foreground-secondary")};
-  --link-color: #{map.get($theme, "link")};
-  --link-hover-color: #{map.get($theme, "link-hover")};
-  --link-visited-color: #{map.get($theme, "link-visited")};
-  --stripe-mine-color: #{map.get($theme, "stripe-mine")};
-  --stripe-target-color: #{map.get($theme, "stripe-target")};
-  --success-color: #{map.get($theme, "success")};
-  --syntax-builtin-color: #{map.get($theme, "syntax-builtin")};
-  --syntax-comment-color: #{map.get($theme, "syntax-comment")};
-  --syntax-constant-color: #{map.get($theme, "syntax-constant")};
-  --syntax-keyword-color: #{map.get($theme, "syntax-keyword")};
-  --syntax-literal-color: #{map.get($theme, "syntax-literal")};
-  --syntax-string-color: #{map.get($theme, "syntax-string")};
+  --foreground-primary-color: #{map-get($theme, "foreground-primary")};
+  --foreground-secondary-color: #{map-get($theme, "foreground-secondary")};
+  --link-color: #{map-get($theme, "link")};
+  --link-hover-color: #{map-get($theme, "link-hover")};
+  --link-visited-color: #{map-get($theme, "link-visited")};
+  --stripe-mine-color: #{map-get($theme, "stripe-mine")};
+  --stripe-target-color: #{map-get($theme, "stripe-target")};
+  --success-color: #{map-get($theme, "success")};
+  --syntax-builtin-color: #{map-get($theme, "syntax-builtin")};
+  --syntax-comment-color: #{map-get($theme, "syntax-comment")};
+  --syntax-constant-color: #{map-get($theme, "syntax-constant")};
+  --syntax-keyword-color: #{map-get($theme, "syntax-keyword")};
+  --syntax-literal-color: #{map-get($theme, "syntax-literal")};
+  --syntax-string-color: #{map-get($theme, "syntax-string")};
 
   // Colors for the special topic tags
   @if $is-light {
-    --topic-tag-nsfw-color: #{map.get($theme, "topic-tag-nsfw")};
+    --topic-tag-nsfw-color: #{map-get($theme, "topic-tag-nsfw")};
     --topic-tag-nsfw-foreground-color: #fff;
     --topic-tag-nsfw-border-color: transparent;
-    --topic-tag-spoiler-color: #{map.get($theme, "topic-tag-spoiler")};
+    --topic-tag-spoiler-color: #{map-get($theme, "topic-tag-spoiler")};
     --topic-tag-spoiler-foreground-color: #fff;
     --topic-tag-spoiler-border-color: transparent;
   } @else {
     --topic-tag-nsfw-color: transparent;
-    --topic-tag-nsfw-foreground-color: #{map.get($theme, "topic-tag-nsfw")};
-    --topic-tag-nsfw-border-color: #{map.get($theme, "topic-tag-nsfw")};
+    --topic-tag-nsfw-foreground-color: #{map-get($theme, "topic-tag-nsfw")};
+    --topic-tag-nsfw-border-color: #{map-get($theme, "topic-tag-nsfw")};
     --topic-tag-spoiler-color: transparent;
-    --topic-tag-spoiler-foreground-color: #{map.get($theme, "topic-tag-spoiler")};
-    --topic-tag-spoiler-border-color: #{map.get($theme, "topic-tag-spoiler")};
+    --topic-tag-spoiler-foreground-color: #{map-get($theme, "topic-tag-spoiler")};
+    --topic-tag-spoiler-border-color: #{map-get($theme, "topic-tag-spoiler")};
   }
 
-  --warning-color: #{map.get($theme, "warning")};
+  --warning-color: #{map-get($theme, "warning")};
 
   // Colors for warning toasts
   @if $is-light {
-    --warning-background-color: #{rgba(map.get($theme, "warning"), 0.9)};
+    --warning-background-color: #{rgba(map-get($theme, "warning"), 0.9)};
     --warning-foreground-color: #000;
   } @else {
     --warning-background-color: transparent;
-    --warning-foreground-color: #{map.get($theme, "warning")};
+    --warning-foreground-color: #{map-get($theme, "warning")};
   }
 
   // Variables for the comment labels.
   @if $is-light {
-    --background-label-exemplary-color: #{map.get($theme, "comment-label-exemplary")};
-    --background-label-joke-color: #{map.get($theme, "comment-label-joke")};
-    --background-label-noise-color: #{map.get($theme, "comment-label-noise")};
-    --background-label-offtopic-color: #{map.get($theme, "comment-label-offtopic")};
-    --background-label-malice-color: #{map.get($theme, "comment-label-malice")};
-    --comment-label-exemplary-color: #{map.get($theme, "comment-label-exemplary")};
-    --comment-label-joke-color: #{map.get($theme, "comment-label-joke")};
-    --comment-label-noise-color: #{map.get($theme, "comment-label-noise")};
-    --comment-label-offtopic-color: #{map.get($theme, "comment-label-offtopic")};
-    --comment-label-malice-color: #{map.get($theme, "comment-label-malice")};
+    --background-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --background-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --background-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --background-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --background-label-malice-color: #{map-get($theme, "comment-label-malice")};
+    --comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
     --foreground-label-exemplary-color: #fff;
     --foreground-label-joke-color: #fff;
     --foreground-label-noise-color: #fff;
@@ -275,15 +275,15 @@
     --background-label-noise-color: transparent;
     --background-label-offtopic-color: transparent;
     --background-label-malice-color: transparent;
-    --comment-label-exemplary-color: #{map.get($theme, "comment-label-exemplary")};
-    --comment-label-joke-color: #{map.get($theme, "comment-label-joke")};
-    --comment-label-noise-color: #{map.get($theme, "comment-label-noise")};
-    --comment-label-offtopic-color: #{map.get($theme, "comment-label-offtopic")};
-    --comment-label-malice-color: #{map.get($theme, "comment-label-malice")};
-    --foreground-label-exemplary-color: #{map.get($theme, "comment-label-exemplary")};
-    --foreground-label-joke-color: #{map.get($theme, "comment-label-joke")};
-    --foreground-label-noise-color: #{map.get($theme, "comment-label-noise")};
-    --foreground-label-offtopic-color: #{map.get($theme, "comment-label-offtopic")};
-    --foreground-label-malice-color: #{map.get($theme, "comment-label-malice")};
+    --comment-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --comment-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --comment-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --comment-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --comment-label-malice-color: #{map-get($theme, "comment-label-malice")};
+    --foreground-label-exemplary-color: #{map-get($theme, "comment-label-exemplary")};
+    --foreground-label-joke-color: #{map-get($theme, "comment-label-joke")};
+    --foreground-label-noise-color: #{map-get($theme, "comment-label-noise")};
+    --foreground-label-offtopic-color: #{map-get($theme, "comment-label-offtopic")};
+    --foreground-label-malice-color: #{map-get($theme, "comment-label-malice")};
   }
 }
diff --git a/tildes/scss/themes/_zenburn.scss b/tildes/scss/themes/_zenburn.scss
index 6c0f9b2..3899b73 100644
--- a/tildes/scss/themes/_zenburn.scss
+++ b/tildes/scss/themes/_zenburn.scss
@@ -43,6 +43,6 @@ body.theme-zenburn {
 
 @include theme-preview-block(
   "zenburn",
-  map.get($theme-zenburn, "foreground-primary"),
-  map.get($theme-zenburn, "background-primary")
+  map-get($theme-zenburn, "foreground-primary"),
+  map-get($theme-zenburn, "background-primary")
 );