diff --git a/frontend/src/styles/_variables-dark.scss b/frontend/src/styles/_variables-dark.scss
index e01164688..3c3c48063 100644
--- a/frontend/src/styles/_variables-dark.scss
+++ b/frontend/src/styles/_variables-dark.scss
@@ -1,38 +1,38 @@
 // colors
-$color-darktheme-theme-bg-dark:         #C34C01;    // dark orange
+$color-theme-bg-dark:                   #C34C01;    // dark orange
 
-$color-darktheme-theme-bg-light:        rgb(252, 252, 252);
+$color-theme-bg-light:                  rgb(252, 252, 252);
 
-$color-darktheme-theme-alt-bg:          #222222;
+$color-theme-alt-bg:                    #222222;
 
-$color-darktheme-bg-dark:               #111111;
+$color-bg-dark:                         #111111;
 
-$color-darktheme-content-bg:            black;
-$color-darktheme-content-font:          #edc;
+$color-content-bg:                      black;
+$color-content-font:                    #edc;
 
-$color-darktheme-border:                #444;
+$color-border:                          #444;
 
-$color-darktheme-code-font:             #DE935F;
-$color-darktheme-code-bg:               $color-darktheme-bg-dark;
-$color-darktheme-code-border:           darken($color-darktheme-border, 50%);
+$color-code-font:                       #DE935F;
+$color-code-bg:                         $color-bg-dark;
+$color-code-border:                     darken($color-border, 50%);
 
-$color-darktheme-menu-bg-l1:            #222222;
-$color-darktheme-menu-bg-l2:            lighten($color-darktheme-menu-bg-l1, 5%);
-$color-darktheme-menu-bg-l3:            lighten($color-darktheme-menu-bg-l1, 10%);
-$color-darktheme-menu-bg-hover:         darken($color-darktheme-menu-bg-l1,  20%);
+$color-menu-bg-l1:                      #222222;
+$color-menu-bg-l2:                      lighten($color-menu-bg-l1, 5%);
+$color-menu-bg-l3:                      lighten($color-menu-bg-l1, 10%);
+$color-menu-bg-hover:                   darken($color-menu-bg-l1,  20%);
 
-$color-darktheme-menu-font:             #f0f0f0;
-$color-darktheme-menu-alt-font:         #e8e8e8;
-$color-darktheme-menu-alt-font-hover:   lighten($color-darktheme-menu-alt-font, 20%);
+$color-menu-font:                       #f0f0f0;
+$color-menu-alt-font:                   #e8e8e8;
+$color-menu-alt-font-hover:             lighten($color-menu-alt-font, 20%);
 
-$color-darktheme-tab-active-font:       rgb(200, 200, 200);
-$color-darktheme-tab-hover-font:        lighten($color-darktheme-tab-active-font, 20%);
-$color-darktheme-tab-font:              darken($color-darktheme-tab-active-font, 30%);
+$color-tab-active-font:                 rgb(200, 200, 200);
+$color-tab-hover-font:                  lighten($color-tab-active-font, 20%);
+$color-tab-font:                        darken($color-tab-active-font, 30%);
 
-$color-darktheme-widget-border:         $color-darktheme-border;
+$color-widget-border:                   $color-border;
 
-$color-darktheme-widget-output-area:    rgb(23, 23, 23);
+$color-widget-output-area:              rgb(23, 23, 23);
 
-$color-darktheme-widget-info:           rgb(234, 234, 234);
+$color-widget-info:                     rgb(234, 234, 234);
 
-$color-darktheme-settingsbar-bg:        rgb(50, 50, 50);
+$color-settingsbar-bg:                  rgb(50, 50, 50);
diff --git a/frontend/src/styles/learn-dark.scss b/frontend/src/styles/learn-dark.scss
index b57f1c954..acf440f8e 100644
--- a/frontend/src/styles/learn-dark.scss
+++ b/frontend/src/styles/learn-dark.scss
@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'variables-dark';
+@use 'variables' as v;
+@use 'variables-dark' as v_darktheme;
 
 @mixin menu_vertical_current_hover_dark_mode_colors {
     &:hover {
@@ -11,30 +11,30 @@
 @mixin menu_vertical_current_dark_mode_colors {
     @include menu_vertical_current_hover_dark_mode_colors;
     & {
-        color: $color-darktheme-menu-font;
+        color: v_darktheme.$color-menu-font;
     }
 
 
     &:visited {
-        color: $color-darktheme-menu-font;
+        color: v_darktheme.$color-menu-font;
         @include menu_vertical_current_hover_dark_mode_colors;
     }
 }
 
 @mixin menu_vertical_alt_current_hover_dark_mode_colors {
-    color: $color-darktheme-menu-alt-font;
+    color: v_darktheme.$color-menu-alt-font;
     &:hover {
-        color: $color-darktheme-menu-alt-font-hover;
+        color: v_darktheme.$color-menu-alt-font-hover;
     }
 }
 
 @media (prefers-color-scheme: dark) {
 
     html {
-        background-color: $color-darktheme-bg-dark !important;
+        background-color: v_darktheme.$color-bg-dark !important;
     }
     body {
-        background-color: $color-darktheme-bg-dark !important;
+        background-color: v_darktheme.$color-bg-dark !important;
     }
     img {
         &.dark-mode-invert-image {
@@ -51,21 +51,21 @@
     .rst-content code,
     .rst-content tt,
     code {
-        color: $color-darktheme-code-font;
-        background-color: $color-darktheme-code-bg !important;
-        border: 1px solid $color-darktheme-code-border;
+        color: v_darktheme.$color-code-font;
+        background-color: v_darktheme.$color-code-bg !important;
+        border: 1px solid v_darktheme.$color-code-border;
     }
     pre {
-        color: $color-darktheme-code-font;
-        background-color: $color-darktheme-code-bg !important;
-        border: 1px solid $color-darktheme-code-border;
+        color: v_darktheme.$color-code-font;
+        background-color: v_darktheme.$color-code-bg !important;
+        border: 1px solid v_darktheme.$color-code-border;
     }
     .btn {
-        background-color: $color-darktheme-theme-bg-dark;
+        background-color: v_darktheme.$color-theme-bg-dark;
         color: #fff;
 
         &:hover {
-            background-color: lighten($color-darktheme-theme-bg-dark, 10%);
+            background-color: lighten(v_darktheme.$color-theme-bg-dark, 10%);
         }
     }
 
@@ -75,11 +75,11 @@
     }
 
     .wy-nav-content-wrap {
-        background: $color-darktheme-bg-dark !important;
+        background: v_darktheme.$color-bg-dark !important;
     }
     .wy-nav-content {
-        background: $color-darktheme-content-bg !important;
-        color: $color-darktheme-content-font;
+        background: v_darktheme.$color-content-bg !important;
+        color: v_darktheme.$color-content-font;
         ::selection {
             // color: #333333;
             // background: lightyellow;
@@ -90,11 +90,11 @@
     }
 
     .wy-side-nav-search {
-        background-color: $color-darktheme-theme-bg-dark;
+        background-color: v_darktheme.$color-theme-bg-dark;
     }
 
     .wy-nav-side {
-        background-color: darken($color-darktheme-menu-bg-l1, 10%);
+        background-color: darken(v_darktheme.$color-menu-bg-l1, 10%);
     }
 
     .wy-menu-vertical {
@@ -106,73 +106,73 @@
                 color: lightgrey;
             }
             ul {
-                background-color: $color-darktheme-menu-bg-l1;
+                background-color: v_darktheme.$color-menu-bg-l1;
             }
             a {
                 @include menu_vertical_alt_current_hover_dark_mode_colors;
 
                 & {
-                    background-color: $color-darktheme-menu-bg-l1;
+                    background-color: v_darktheme.$color-menu-bg-l1;
                 }
 
                 &:hover {
-                    background-color: $color-darktheme-menu-bg-hover;
+                    background-color: v_darktheme.$color-menu-bg-hover;
                 }
 
                 &:visited {
                     @include menu_vertical_alt_current_hover_dark_mode_colors;
 
                     & {
-                        background-color: $color-darktheme-menu-bg-l1;
+                        background-color: v_darktheme.$color-menu-bg-l1;
                     }
 
                     &:hover {
-                        background-color: $color-darktheme-menu-bg-hover;
+                        background-color: v_darktheme.$color-menu-bg-hover;
                     }
                 }
             }
             &.toctree-l2 {
                 &.current>a {
-                    background-color: $color-darktheme-menu-bg-l1;
+                    background-color: v_darktheme.$color-menu-bg-l1;
                 }
             }
             &.current {
                 & {
-                    background-color: $color-darktheme-menu-bg-l1;
+                    background-color: v_darktheme.$color-menu-bg-l1;
                 }
 
                 a {
                     & {
-                        background-color: $color-darktheme-menu-bg-l1;
+                        background-color: v_darktheme.$color-menu-bg-l1;
                     }
                     @include menu_vertical_current_dark_mode_colors;
 
                     &:hover {
-                        background-color: $color-darktheme-menu-bg-hover;
+                        background-color: v_darktheme.$color-menu-bg-hover;
                     }
                     &:visited {
-                        background-color: $color-darktheme-menu-bg-l1;
+                        background-color: v_darktheme.$color-menu-bg-l1;
                         &:hover {
-                            background-color: $color-darktheme-menu-bg-hover;
+                            background-color: v_darktheme.$color-menu-bg-hover;
                         }
                     }
                 }
                 &.toctree-l2 {
-                    background-color: $color-darktheme-menu-bg-l1;
+                    background-color: v_darktheme.$color-menu-bg-l1;
 
                     li.toctree-l3>a {
                         @include menu_vertical_current_dark_mode_colors;
 
                         & {
-                            background-color: $color-darktheme-menu-bg-l2;
+                            background-color: v_darktheme.$color-menu-bg-l2;
                         }
                         &:hover {
-                            background-color: $color-darktheme-menu-bg-hover;
+                            background-color: v_darktheme.$color-menu-bg-hover;
                         }
                         &:visited {
-                            background-color: $color-darktheme-menu-bg-l2;
+                            background-color: v_darktheme.$color-menu-bg-l2;
                             &:hover {
-                                background-color: $color-darktheme-menu-bg-hover;
+                                background-color: v_darktheme.$color-menu-bg-hover;
                             }
                         }
                     }
@@ -182,15 +182,15 @@
                         @include menu_vertical_current_dark_mode_colors;
 
                         & {
-                            background-color: $color-darktheme-menu-bg-l3;
+                            background-color: v_darktheme.$color-menu-bg-l3;
                         }
                         &:hover {
-                            background-color: $color-darktheme-menu-bg-hover;
+                            background-color: v_darktheme.$color-menu-bg-hover;
                         }
                         &:visited {
-                            background-color: $color-darktheme-menu-bg-l3;
+                            background-color: v_darktheme.$color-menu-bg-l3;
                             &:hover {
-                                background-color: $color-darktheme-menu-bg-hover;
+                                background-color: v_darktheme.$color-menu-bg-hover;
                             }
                         }
                     }
@@ -200,11 +200,11 @@
     }
 
     .admonition-in-other-languages {
-        background: $color-darktheme-theme-alt-bg;
+        background: v_darktheme.$color-theme-alt-bg;
     }
     .rst-content {
         .highlight {
-            background: $color-darktheme-theme-alt-bg;
+            background: v_darktheme.$color-theme-alt-bg;
         }
     }
     .rst-content .admonition,
@@ -220,7 +220,7 @@
     .rst-content .tip,
     .rst-content .warning,
     .wy-alert {
-        background: $color-darktheme-theme-alt-bg;
+        background: v_darktheme.$color-theme-alt-bg;
     }
     .rst-content .admonition-title, .wy-alert-title {
         // background: #6ab0de;
@@ -228,12 +228,12 @@
     }
     .rst-content div[class^=highlight],
     .rst-content pre.literal-block {
-        border: 1px solid $color-darktheme-code-border;
-        color: $color-darktheme-code-font;
+        border: 1px solid v_darktheme.$color-code-border;
+        color: v_darktheme.$color-code-font;
     }
     .rst-content code.literal,
     .rst-content tt.literal {
-        color: $color-darktheme-code-font;
+        color: v_darktheme.$color-code-font;
     }
     .rst-content table.docutils thead,
     .rst-content table.field-list thead,
@@ -243,29 +243,29 @@
     }
     .rst-content table.docutils,
     .wy-table-bordered-all {
-        border: 1px solid $color-darktheme-border;
+        border: 1px solid v_darktheme.$color-border;
     }
     .rst-content table.docutils td,
     .wy-table-bordered-all td {
-        border-bottom: 1px solid $color-darktheme-border;
-        border-left: 1px solid $color-darktheme-border;
+        border-bottom: 1px solid v_darktheme.$color-border;
+        border-left: 1px solid v_darktheme.$color-border;
     }
     .wy-table-bordered {
-        border: 1px solid $color-darktheme-border;
+        border: 1px solid v_darktheme.$color-border;
     }
     .wy-table-bordered-rows td {
-        border-bottom: 1px solid $color-darktheme-border;
+        border-bottom: 1px solid v_darktheme.$color-border;
     }
     .wy-table-horizontal td,
     .wy-table-horizontal th {
-        border-bottom: 1px solid $color-darktheme-border;
+        border-bottom: 1px solid v_darktheme.$color-border;
     }
 
     .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td,
     .wy-table-backed,
     .wy-table-odd td,
     .wy-table-striped tr:nth-child(2n-1) td {
-        background-color: $color-darktheme-theme-alt-bg;
+        background-color: v_darktheme.$color-theme-alt-bg;
     }
 
     //
@@ -274,25 +274,25 @@
 
     .tab {
         button {
-            color: $color-darktheme-tab-font;
-            border-left: 1px dotted $color-darktheme-widget-border;
-            border-right: 1px dotted $color-darktheme-widget-border;
-            border-bottom: 1px dotted $color-darktheme-widget-border;
+            color: v_darktheme.$color-tab-font;
+            border-left: 1px dotted v_darktheme.$color-widget-border;
+            border-right: 1px dotted v_darktheme.$color-widget-border;
+            border-bottom: 1px dotted v_darktheme.$color-widget-border;
             &:hover {
-                background-color: lighten($color-darktheme-theme-bg-dark, 30%);
-                color: $color-darktheme-tab-hover-font;
+                background-color: lighten(v_darktheme.$color-theme-bg-dark, 30%);
+                color: v_darktheme.$color-tab-hover-font;
             }
             &.active {
-                color: $color-darktheme-tab-active-font;
-                border-left: 1px solid $color-darktheme-widget-border;
-                border-right: 1px solid $color-darktheme-widget-border;
-                border-bottom: 3px solid $color-darktheme-theme-bg-dark;
+                color: v_darktheme.$color-tab-active-font;
+                border-left: 1px solid v_darktheme.$color-widget-border;
+                border-right: 1px solid v_darktheme.$color-widget-border;
+                border-bottom: 3px solid v_darktheme.$color-theme-bg-dark;
             }
         }
     }
 
     .settings-bar {
-        background-color: $color-darktheme-settingsbar-bg;
+        background-color: v_darktheme.$color-settingsbar-bg;
         color: white;
 
         button {
@@ -302,7 +302,7 @@
 
         .dropdown-container {
             .dropdown-content {
-                background-color: $color-darktheme-bg-dark;
+                background-color: v_darktheme.$color-bg-dark;
 
                 a {
                     color: white;
@@ -316,67 +316,67 @@
     }
 
     .compiler-switch-help-info {
-        background-color: $color-darktheme-settingsbar-bg;
+        background-color: v_darktheme.$color-settingsbar-bg;
     }
 
     .compiler-switch-help-info-click-remove {
-        background-color: $color-darktheme-settingsbar-bg;
+        background-color: v_darktheme.$color-settingsbar-bg;
     }
 
     div {
         &.editor-container {
-            border: 1px solid $color-darktheme-widget-border;
+            border: 1px solid v_darktheme.$color-widget-border;
         }
         &.editor_label {
-            border: 1px solid $color-darktheme-widget-border;
-            color: $color-font-grey;
+            border: 1px solid v_darktheme.$color-widget-border;
+            color: v.$color-font-grey;
         }
         &.non-tabbed-links {
-            border: 1px solid $color-darktheme-widget-border;
+            border: 1px solid v_darktheme.$color-widget-border;
         }
         &.code_block_info {
-            background: $color-darktheme-widget-output-area;
+            background: v_darktheme.$color-widget-output-area;
         }
         &.code_block_info_contents {
-            color: $color-font-grey;
+            color: v.$color-font-grey;
         }
         &.output_line {
-            color: $color-font-grey;
+            color: v.$color-font-grey;
         }
         &.output_msg {
-            color: $color-widget-msg;
+            color: v.$color-widget-msg;
             &:hover {
                 background-color: #fdd;
             }
         }
         &.output_msg_info {
-            color: $color-darktheme-widget-info;
+            color: v_darktheme.$color-widget-info;
             &:hover {
-                background-color: $color-widget-msg-info-bg-hover;
+                background-color: v.$color-widget-msg-info-bg-hover;
             }
         }
         &.output_info {
-            color: $color-darktheme-widget-info;
+            color: v_darktheme.$color-widget-info;
         }
         &.output_error {
-            color: $color-widget-error;
+            color: v.$color-widget-error;
         }
         &.output_success {
-            color: $color-widget-success;
+            color: v.$color-widget-success;
         }
         &.output-area {
-            background: $color-darktheme-widget-output-area;
+            background: v_darktheme.$color-widget-output-area;
         }
     }
 
     .read-only {
-        background-color: $color-widget-readonly;
+        background-color: v.$color-widget-readonly;
         opacity: 0.2;
         position: absolute;
     }
 
     a.ebook-download-button {
-        background-color: $color-darktheme-theme-bg-dark;
+        background-color: v_darktheme.$color-theme-bg-dark;
     }
 
     //
diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss
index 95fd20f7d..b3bcf8e67 100644
--- a/frontend/src/styles/learn.scss
+++ b/frontend/src/styles/learn.scss
@@ -1,12 +1,12 @@
-@import 'variables';
+@use 'variables' as v;
 
 // theme overrides
 .btn {
-    background-color: $color-theme-bg-dark;
+    background-color: v.$color-theme-bg-dark;
     color: #fff;
 
     &:hover {
-        background-color: lighten($color-theme-bg-dark, 10%);
+        background-color: lighten(v.$color-theme-bg-dark, 10%);
     }
 }
 
@@ -31,7 +31,7 @@ a {
 }
 
 .wy-side-nav-search {
-    background-color: $color-theme-bg-dark;
+    background-color: v.$color-theme-bg-dark;
     a {
         text-align: right !important;
         float: right;
@@ -95,7 +95,7 @@ a {
 }
 
 .wy-nav-top {
-    background-color: $color-theme-bg-dark;
+    background-color: v.$color-theme-bg-dark;
     img {
         border-radius: 0 !important;
         background-color: transparent !important;
@@ -136,7 +136,7 @@ a {
 }
 
 .admonition-in-other-languages {
-    background: $color-theme-alt-bg;
+    background: v.$color-theme-alt-bg;
     padding: 12px;
     margin-bottom: 24px;
 }
@@ -171,22 +171,22 @@ pre.widget {
         transition: 0.3s;
         flex: 0 0 auto;
         border: 1px solid transparent;
-        color: $color-tab-font;
-        font-family: $mono-font;
+        color: v.$color-tab-font;
+        font-family: v.$mono-font;
         font-size: 13px;
-        border-left: 1px dotted $color-widget-border;
-        border-right: 1px dotted $color-widget-border;
-        border-bottom: 1px dotted $color-widget-border;
+        border-left: 1px dotted v.$color-widget-border;
+        border-right: 1px dotted v.$color-widget-border;
+        border-bottom: 1px dotted v.$color-widget-border;
         &:hover {
-            background-color: lighten($color-theme-bg-dark, 30%);
-            color: $color-tab-hover-font;
+            background-color: lighten(v.$color-theme-bg-dark, 30%);
+            color: v.$color-tab-hover-font;
             cursor: pointer;
         }
         &.active {
-            color: $color-tab-active-font;
-            border-left: 1px solid $color-widget-border;
-            border-right: 1px solid $color-widget-border;
-            border-bottom: 3px solid $color-theme-bg-dark;
+            color: v.$color-tab-active-font;
+            border-left: 1px solid v.$color-widget-border;
+            border-right: 1px solid v.$color-widget-border;
+            border-bottom: 3px solid v.$color-theme-bg-dark;
         }
     }
 }
@@ -197,15 +197,15 @@ pre.widget {
 }
 
 .settings-bar {
-    background-color: $color-settingsbar-bg;
-    font-family: $lato-sans-serif-font;
+    background-color: v.$color-settingsbar-bg;
+    font-family: v.$lato-sans-serif-font;
     padding-left: 13px;
     display: block;
     margin-top: 0px;
 
     button {
         background-color: transparent;
-        color: $color-font-grey;
+        color: v.$color-font-grey;
         opacity: 0.5;
         padding: 5px;
         margin-left: 5px;
@@ -225,7 +225,7 @@ pre.widget {
         .dropdown-content {
             display: none;
             position: absolute;
-            background-color: $color-theme-bg-light;
+            background-color: v.$color-theme-bg-light;
             min-width: 300px;
             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
             z-index: 10;
@@ -279,12 +279,12 @@ div {
 }
 
 .compiler-switch-help-info {
-    background-color: $color-settingsbar-bg;
+    background-color: v.$color-settingsbar-bg;
     font-size: 0.85em;
 }
 
 .compiler-switch-help-info-click-remove {
-    background-color: $color-settingsbar-bg;
+    background-color: v.$color-settingsbar-bg;
     font-size: 0.70em;
 }
 
@@ -294,32 +294,32 @@ div {
     }
     &.editor-container {
         height: 30em;
-        border: 1px solid $color-widget-border;
+        border: 1px solid v.$color-widget-border;
         margin: 0px;
         &.inline {
             height: 20em;
-            border: 1px solid $color-widget-border;
+            border: 1px solid v.$color-widget-border;
             margin: .5em 0;
         }
     }
     &.editor_label {
-        font-family: $mono-font;
-        border: 1px solid $color-widget-border;
+        font-family: v.$mono-font;
+        border: 1px solid v.$color-widget-border;
         border-bottom: 0px;
         display: inline-block;
         padding: 3px 5px;
         font-size: 0.75em;
-        color: $color-font-grey;
+        color: v.$color-font-grey;
     }
     &.non-tabbed-links {
         display: flex;
-        border: 1px solid $color-widget-border;
+        border: 1px solid v.$color-widget-border;
     }
     &.code_block_info {
-        font-family: $mono-font;
+        font-family: v.$mono-font;
         font-size: 12px;
         font-style: normal;
-        background: $color-widget-output-area;
+        background: v.$color-widget-output-area;
         margin-top: 8px;
         max-height: 250px;
         overflow-y: auto;
@@ -332,19 +332,19 @@ div {
         padding-right: 3px;
     }
     &.code_block_info_contents {
-        color: $color-font-grey;
+        color: v.$color-font-grey;
         padding-left: 15px;
         padding-right: 3px;
         white-space: pre-wrap;
     }
     &.output_line {
-        color: $color-font-grey;
+        color: v.$color-font-grey;
         padding-left: 15px;
         padding-right: 3px;
         white-space: pre-wrap;
     }
     &.output_msg {
-        color: $color-widget-msg;
+        color: v.$color-widget-msg;
         padding-left: 15px;
         padding-right: 3px;
         white-space: pre-wrap;
@@ -353,37 +353,37 @@ div {
         }
     }
     &.output_msg_info {
-        color: $color-widget-info;
+        color: v.$color-widget-info;
         padding-left: 15px;
         padding-right: 3px;
         white-space: pre-wrap;
         &:hover {
-            background-color: $color-widget-msg-info-bg-hover;
+            background-color: v.$color-widget-msg-info-bg-hover;
         }
     }
     &.output_info {
-        color: $color-widget-info;
+        color: v.$color-widget-info;
         padding-left: 3px;
         padding-right: 3px;
         white-space: pre-wrap;
     }
     &.output_error {
-        color: $color-widget-error;
+        color: v.$color-widget-error;
         padding-left: 3px;
         padding-right: 3px;
         white-space: pre-wrap;
     }
     &.output_success {
-        color: $color-widget-success;
+        color: v.$color-widget-success;
         padding-left: 3px;
         padding-right: 3px;
-        font-weight: $fontweight-bold;
+        font-weight: v.$fontweight-bold;
     }
     &.output-area {
-        font-family: $mono-font;
+        font-family: v.$mono-font;
         font-size: 12px;
         font-style: normal;
-        background: $color-widget-output-area;
+        background: v.$color-widget-output-area;
         margin-top: 8px;
         max-height: 250px;
         overflow-y: auto;
@@ -400,7 +400,7 @@ div {
 }
 
 .read-only {
-    background-color: $color-widget-readonly;
+    background-color: v.$color-widget-readonly;
     opacity: 0.2;
     position: absolute;
 }
@@ -420,11 +420,11 @@ div#learn-adacore-com>h1 {
 
 .legal {
     padding: 20px;
-    color: $color-font-grey;
+    color: v.$color-font-grey;
     font-size: 12px;
     text-align: center;
     a {
-        color: $color-font-grey;
+        color: v.$color-font-grey;
     }
 }
 
@@ -436,15 +436,15 @@ div#learn-adacore-com>h1 {
     z-index: 99;
     border: none;
     outline: none;
-    background-color: $color-scroll-button-bg;
-    color: $color-scroll-button-fg;
+    background-color: v.$color-scroll-button-bg;
+    color: v.$color-scroll-button-fg;
     cursor: pointer;
     padding: 15px;
     border-radius: 10px;
     font-size: 18px;
     transition: opacity 600ms;
     &:hover {
-        background-color: $color-scroll-button-hover;
+        background-color: v.$color-scroll-button-hover;
     }
     &.show {
         opacity: 1;
@@ -506,7 +506,7 @@ div {
 }
 
 a.ebook-download-button {
-    background-color: $color-theme-bg-dark;
+    background-color: v.$color-theme-bg-dark;
     display: block;
     padding-top: 2px;
     padding-left: 1em;
@@ -519,10 +519,10 @@ a.ebook-download-button {
     margin-top: 2px;
 
     &:before {
-        font-family: $icon-font;
+        font-family: v.$icon-font;
         font-style: normal;
-        font-weight: $icon-weight;
-        content: $download-icon;
+        font-weight: v.$icon-weight;
+        content: v.$download-icon;
         margin-right: 3px;
     }
 }
@@ -576,10 +576,10 @@ div.mwac-banner.docutils.container {
 // lab stuff
 div {
     &.lab-area {
-        font-family: $mono-font;
+        font-family: v.$mono-font;
         font-size: 12px;
-        font-weight: $fontweight-normal;
-        background: $color-labarea-bg;
+        font-weight: v.$fontweight-normal;
+        background: v.$color-labarea-bg;
     }
     &.lab_test_case {
         padding-left: 3px;
@@ -589,7 +589,7 @@ div {
         margin-bottom: 5px;
     }
     &.lab_test_msg {
-        color: $color-labarea-fg;
+        color: v.$color-labarea-fg;
         padding-left: 20px;
         padding-right: 3px;
         code {
@@ -597,21 +597,21 @@ div {
         }
     }
     &.lab_test_success {
-        background: $color-success-green-bg;
+        background: v.$color-success-green-bg;
     }
     &.lab_test_failed {
-        background: $color-fail-red-bg;
+        background: v.$color-fail-red-bg;
     }
 }
 
 span.lab_test_msg_title {
-    font-weight: $fontweight-bold;
+    font-weight: v.$fontweight-bold;
     padding-right: 5px;
 }
 
 div {
     &.lab_status {
-        font-weight: $fontweight-bold;
+        font-weight: v.$fontweight-bold;
         padding-left: 15px;
         padding-right: 3px;
     }
@@ -623,44 +623,44 @@ div {
 
 button {
     &.lab_test_success {
-        background: $color-success-green-light-bg;
+        background: v.$color-success-green-light-bg;
         span:after {
             content: "Pass";
         }
         &:hover {
-            background-color: $color-success-green-bg;
+            background-color: v.$color-success-green-bg;
         }
     }
     &.accordion span:after {
-        font-family: $mono-font;
+        font-family: v.$mono-font;
         font-size: 10px;
         font-style: italic;
-        font-weight: $fontweight-semibold;
-        color: $color-font-grey;
+        font-weight: v.$fontweight-semibold;
+        color: v.$color-font-grey;
         margin-left: 8px;
     }
     &.lab_test_failed {
-        background: $color-fail-red-light-bg;
+        background: v.$color-fail-red-light-bg;
         span:after {
             content: "Fail";
         }
         &:hover {
-            background-color: $color-fail-red-bg;
+            background-color: v.$color-fail-red-bg;
         }
     }
     &.active {
         &.lab_test_success {
-            background: $color-success-green-bg;
+            background: v.$color-success-green-bg;
         }
         &.lab_test_failed {
-            background: $color-fail-red-bg;
+            background: v.$color-fail-red-bg;
         }
     }
 }
 
 .accordion {
-    background-color: $color-theme-bg-light;
-    color: $color-theme-fg-dark;
+    background-color: v.$color-theme-bg-light;
+    color: v.$color-theme-fg-dark;
     cursor: pointer;
     padding: 10px;
     width: 100%;
@@ -668,29 +668,29 @@ button {
     border: none;
     outline: none;
     transition: 0.4s;
-    font-weight: $fontweight-bold;
+    font-weight: v.$fontweight-bold;
     border-radius: 7px;
     &.active {
         border-bottom-right-radius: 0px;
         border-bottom-left-radius: 0px;
     }
     &:after {
-        font-family: $icon-font;
+        font-family: v.$icon-font;
         font-style: normal;
-        font-weight: $icon-weight;
-        content: $triangle-right-icon;
+        font-weight: v.$icon-weight;
+        content: v.$triangle-right-icon;
         font-size: 16px;
         color: darkblue;
         float: right;
         margin-left: 5px;
     }
     &.active:after {
-        font-family: $icon-font;
+        font-family: v.$icon-font;
         font-style: normal;
-        font-weight: $icon-weight;
-        content: $triangle-down-icon;
+        font-weight: v.$icon-weight;
+        content: v.$triangle-down-icon;
         font-size: 16px;
-        color: $color-font-grey;
+        color: v.$color-font-grey;
         float: right;
         margin-left: 5px;
     }
@@ -723,7 +723,7 @@ label.custom_check,
     >div {
         width: 7px;
         height: 7px;
-        background-color: $color-spinner-fg;
+        background-color: v.$color-spinner-fg;
         border-radius: 100%;
         display: inline-block;
         -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;