feat: WIP

Author: jstarpl

…c/client/styles/bootstrap-customise.scss …c/client/styles/bootstrap-variables.scsspackages/webui/src/client/styles/bootstrap-customise.scss renamed to packages/webui/src/client/styles/bootstrap-variables.scss packages/webui/src/client/styles/bootstrap-customise.scss renamed to packages/webui/src/client/styles/bootstrap-variables.scss

@@ -1,22 +1,5 @@
 // Override any bootstrap css variable default values here
 
-$font-family-sans-serif:
-	Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
-$body-tertiary-bg-dark: #343434;
-
-$font-weight-base: 300; // lighter
-$dt-font-weight: 400;
-
-$navbar-brand-font-size: 1rem;
-
-$line-height-base: 1.2;
-
-$input-padding-y: 0.5rem;
-
-$modal-header-padding: 0.5rem 1rem;
-$modal-md: 550px;
-
 $primary: #1769ff;
 $primary-dark: #1e1e1f; // #132039;
 //$dark: #252627; // this is Origo's original dark color
@@ -25,7 +8,12 @@ $dark-2: #292e32;
 $dark: $dark-1;
 $body-bg-dark: #343434;
 $modal-bg-dark: #3e4041;
-$danger: #e62421;
+
+$font-family-sans-serif:
+	Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+$font-size-base: 1rem;
+$font-weight-base: 300; // lighter
+$dt-font-weight: 400;
 
 $link-color: $primary;
 
@@ -36,3 +24,22 @@ $btn-padding-y: 0.4em;
 $btn-font-weight: 700;
 $btn-font-size: inherit;
 $btn-disabled-opacity: 0.5;
+
+$body-tertiary-bg-dark: #343434;
+
+$navbar-brand-font-size: 1rem;
+
+$line-height-base: 1.2;
+
+$input-padding-y: 0.5rem;
+
+$modal-header-padding: 0.5rem 1rem;
+$modal-md: 550px;
+
+$danger: #e62421;
+
+$theme-colors: (
+	'primary': $primary,
+	'dark': $dark,
+);
+

packages/webui/src/client/styles/bootstrap.scss

@@ -2,7 +2,7 @@
 
 // Include any default variable overrides here (though functions won't be available)
 
-@import 'bootstrap-customise';
+@import 'bootstrap-variables';
 
 @import '~bootstrap/scss/bootstrap';