From 74fd6d06301567efa168d50cb70cea43349b8626 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Date: Sat, 28 Nov 2020 22:08:18 +0100
Subject: [PATCH] Split scss vars for themes (#802)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 .../sync-scroll-buttons.scss                  |   8 +-
 src/style/bootstrap-color-theme/include.scss  |   1 -
 src/style/dark.scss                           | 125 +----------------
 src/style/index.scss                          |   2 +-
 src/style/variables.dark.scss                 | 130 ++++++++++++++++++
 .../{light.scss => variables.light.scss}      |   2 +-
 6 files changed, 137 insertions(+), 131 deletions(-)
 create mode 100644 src/style/variables.dark.scss
 rename src/style/{light.scss => variables.light.scss} (100%)

diff --git a/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss
index 43fb33fa5..00ce2b522 100644
--- a/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss
+++ b/src/components/editor/app-bar/sync-scroll-buttons/sync-scroll-buttons.scss
@@ -11,26 +11,26 @@
   }
   .btn {
     svg g {
-      @import "../../../../style/light.scss";
+      @import "../../../../style/variables.light";
       fill: $secondary;
     }
 
     &.active, &:hover {
       svg g {
-        @import "../../../../style/light.scss";
+        @import "../../../../style/variables.light";
         fill: $light;
       }
     }
 
     body.dark & {
       svg g {
-        @import "../../../../style/dark.scss";
+        @import "../../../../style/variables.dark";
         fill: $secondary;
       }
 
       &.active, &:hover {
         svg g {
-          @import "../../../../style/dark.scss";
+          @import "../../../../style/variables.dark";
           fill: $light;
         }
       }
diff --git a/src/style/bootstrap-color-theme/include.scss b/src/style/bootstrap-color-theme/include.scss
index eff3c3525..ddd3aa37b 100644
--- a/src/style/bootstrap-color-theme/include.scss
+++ b/src/style/bootstrap-color-theme/include.scss
@@ -5,7 +5,6 @@
  */
 
 @import "../../../node_modules/bootstrap/scss/functions";
-@import "../../../node_modules/bootstrap/scss/variables";
 @import "../../../node_modules/bootstrap/scss/mixins";
 
 @import "reboot";
diff --git a/src/style/dark.scss b/src/style/dark.scss
index fe16569f8..98b935a10 100644
--- a/src/style/dark.scss
+++ b/src/style/dark.scss
@@ -4,130 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-//
-// Color system
-//
-
-$white: #fff;
-$gray-100: #f8f9fa;
-$gray-200: #ebebeb;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #888;
-$gray-700: #444;
-$gray-800: #303030;
-$gray-900: #222;
-$black: #000;
-
-$blue: #337ab7;
-$indigo: #6610f2;
-$purple: #6f42c1;
-$pink: #e83e8c;
-$red: #e74c3c;
-$orange: #fd7e14;
-$yellow: #f39c12;
-$green: #00bc8c;
-$teal: #20c997;
-$cyan: #5EB7E0;
-
-$primary: $blue;
-$secondary: $white;
-$success: $green;
-$info: $cyan;
-$warning: $yellow;
-$danger: $red;
-$light: $gray-900;
-$dark: $white;
-
-$yiq-contrasted-threshold: 175;
-
-// Body
-$body-bg: $light;
-$body-color: $dark;
-
-// Links
-$link-color: $cyan;
-
-// Fonts
-$text-muted: $gray-400;
-
-// Tables
-$table-accent-bg: $gray-800;
-$table-border-color: $gray-700;
-
-// Forms
-$input-border-color: $body-bg;
-$input-group-addon-color: $gray-500;
-$input-group-addon-bg: $gray-700;
-$input-bg: $gray-700;
-$input-placeholder-color: $gray-500;
-$input-color: $white;
-$input-disabled-bg: $gray-900;
-
-$custom-file-color: $gray-500;
-$custom-file-border-color: $body-bg;
-
-// Dropdowns
-$dropdown-bg: $gray-900;
-$dropdown-border-color: $gray-700;
-$dropdown-divider-bg: $gray-700;
-$dropdown-link-color: $white;
-$dropdown-link-hover-color: $white;
-$dropdown-link-hover-bg: $primary;
-
-// Navs
-$nav-link-disabled-color: $gray-500;
-$nav-tabs-border-color: $gray-700;
-$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
-$nav-tabs-link-active-color: $white;
-$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
-
-// Navbar
-$navbar-dark-color: rgba($white, .6);
-$navbar-dark-hover-color: $white;
-$navbar-light-color: rgba($gray-900, .7);
-$navbar-light-hover-color: $gray-900;
-$navbar-light-active-color: $gray-900;
-$navbar-light-toggler-border-color: rgba($gray-900, .1);
-
-// Jumbotron
-$jumbotron-bg: $gray-800;
-
-// Cards
-$card-cap-bg: $gray-700;
-$card-bg: $gray-800;
-
-// Popovers
-$popover-bg: $gray-800;
-$popover-header-bg: $gray-700;
-
-// Toasts
-$toast-background-color: $gray-700;
-$toast-header-background-color: $gray-800;
-
-// Modals
-$modal-content-bg: $gray-800;
-$modal-content-border-color: $gray-700;
-$modal-header-border-color: $gray-700;
-
-// Progress bars
-$progress-bg: $gray-700;
-
-// List group
-$list-group-bg: $gray-800;
-$list-group-border-color: $gray-700;
-$list-group-hover-bg: $gray-700;
-
-// Breadcrumbs
-$breadcrumb-bg: $gray-700;
-
-// Close
-$close-color: $white;
-$close-text-shadow: none;
-
-// Code
-$pre-color: $dark;
+@import "variables.dark";
 
 body.dark {
   @import "bootstrap-color-theme/include";
diff --git a/src/style/index.scss b/src/style/index.scss
index 2c4acec00..5aacca146 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-@import './light';
+@import "variables.light";
 @import "../../node_modules/bootstrap/scss/bootstrap";
 @import '../../node_modules/react-bootstrap-typeahead/css/Typeahead';
 @import "fonts/source-code-pro/source-code-pro";
diff --git a/src/style/variables.dark.scss b/src/style/variables.dark.scss
new file mode 100644
index 000000000..62867fbf2
--- /dev/null
+++ b/src/style/variables.dark.scss
@@ -0,0 +1,130 @@
+/*
+ * SPDX-FileCopyrightText: 2020 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #ebebeb;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #888;
+$gray-700: #444;
+$gray-800: #303030;
+$gray-900: #222;
+$black: #000;
+
+$blue: #337ab7;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$red: #e74c3c;
+$orange: #fd7e14;
+$yellow: #f39c12;
+$green: #00bc8c;
+$teal: #20c997;
+$cyan: #5EB7E0;
+
+$primary: $blue;
+$secondary: $white;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-900;
+$dark: $white;
+
+$yiq-contrasted-threshold: 175;
+
+// Body
+$body-bg: $light;
+$body-color: $dark;
+
+// Links
+$link-color: $cyan;
+
+// Fonts
+$text-muted: $gray-400;
+
+// Tables
+$table-accent-bg: $gray-800;
+$table-border-color: $gray-700;
+
+// Forms
+$input-border-color: $body-bg;
+$input-group-addon-color: $gray-500;
+$input-group-addon-bg: $gray-700;
+$input-bg: $gray-700;
+$input-placeholder-color: $gray-500;
+$input-color: $white;
+$input-disabled-bg: $gray-900;
+
+$custom-file-color: $gray-500;
+$custom-file-border-color: $body-bg;
+
+// Dropdowns
+$dropdown-bg: $gray-900;
+$dropdown-border-color: $gray-700;
+$dropdown-divider-bg: $gray-700;
+$dropdown-link-color: $white;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+
+// Navs
+$nav-link-disabled-color: $gray-500;
+$nav-tabs-border-color: $gray-700;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
+$nav-tabs-link-active-color: $white;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent;
+
+// Navbar
+$navbar-dark-color: rgba($white, .6);
+$navbar-dark-hover-color: $white;
+$navbar-light-color: rgba($gray-900, .7);
+$navbar-light-hover-color: $gray-900;
+$navbar-light-active-color: $gray-900;
+$navbar-light-toggler-border-color: rgba($gray-900, .1);
+
+// Jumbotron
+$jumbotron-bg: $gray-800;
+
+// Cards
+$card-cap-bg: $gray-700;
+$card-bg: $gray-800;
+
+// Popovers
+$popover-bg: $gray-800;
+$popover-header-bg: $gray-700;
+
+// Toasts
+$toast-background-color: $gray-700;
+$toast-header-background-color: $gray-800;
+
+// Modals
+$modal-content-bg: $gray-800;
+$modal-content-border-color: $gray-700;
+$modal-header-border-color: $gray-700;
+
+// Progress bars
+$progress-bg: $gray-700;
+
+// List group
+$list-group-bg: $gray-800;
+$list-group-border-color: $gray-700;
+$list-group-hover-bg: $gray-700;
+
+// Breadcrumbs
+$breadcrumb-bg: $gray-700;
+
+// Close
+$close-color: $white;
+$close-text-shadow: none;
+
+// Code
+$pre-color: $dark;
+
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/variables";
diff --git a/src/style/light.scss b/src/style/variables.light.scss
similarity index 100%
rename from src/style/light.scss
rename to src/style/variables.light.scss
index 58864d945..f2cee10c4 100644
--- a/src/style/light.scss
+++ b/src/style/variables.light.scss
@@ -8,6 +8,6 @@ $blue:    #337ab7 !default;
 $cyan:    #5EB7E0 !default;
 
 @import "../../node_modules/bootstrap/scss/functions";
-@import "../../node_modules/bootstrap/scss/variables";
 @import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/variables";