now adding new themes/colorschemes is easier and cleaner

5 files changed, 78 insertions, 90 deletions

diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index d86f4e9..bef03dc 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -18,7 +18,7 @@
 }
 
 .ItemsDisplay .legend {
-  background-color: $altBG;
+  background-color: $background2;
 }
 
 .ItemsDisplay th {
@@ -27,16 +27,16 @@
 
 .ItemsDisplay td {
   text-align: center;
-  border-bottom: 1px solid $tableDefBorderColor;
+  border-bottom: 1px solid $underline1;
   font-size: 1.5rem;
 }
 
 .ItemsDisplay .disabledBorder {
-  border-bottom: 1px solid $tableDisabledBorderColor;
+  border-bottom: 1px solid $underline0;
 }
 
 .ItemsDisplay .warningBorder {
-  border-bottom: 1px solid $warningBorderColor;
+  border-bottom: 1px solid $underline3;
 }
 
 .ItemsDisplay .leftAlign {
@@ -44,7 +44,7 @@
 }
 
 .SummaryDisplayTR td {
-  color: $altFG;
+  color: $foreground2;
   font-size: 1.7rem;
 }
 
@@ -56,7 +56,7 @@
 .SummaryDisplay h1 {
   font-size: 3rem;
   margin: 0.5rem -1.5rem;
-  border-bottom: 1px dotted $labelUnderlineColor;
+  border-bottom: 1px dotted $underline1;
 }
 
 .SummaryDisplay table {
@@ -71,5 +71,5 @@
 
 .SummaryDisplay .grandTotal td {
   font-size: 2rem;
-  color: $altFG;
+  color: $foreground2;
 }
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index c880bea..09dfc16 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -23,18 +23,20 @@ input[type=number] {
 @mixin formPane {
   padding: 1.5rem;
   box-sizing: border-box;
-  border: 1px solid $formPaneBorderColor;
+  border: 1px solid $border1;
 
   display: flex;
   flex-direction: column;
   justify-content: space-around;
+
+  background-color: $background4;
 }
 
 @mixin formWideLabel {
   display: flex;
   justify-content: space-between;
 
-  border-bottom: 1px dotted $labelUnderlineColor;
+  border-bottom: 1px dotted $underline1;
   padding: 0.8rem 0;
   font-size: 1.5rem;
 }
@@ -120,4 +122,9 @@ input {
   margin: 1rem;
 }
 
+/* */
+.MetaInfoForm {
+  width: 60%;
+}
+
 
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 4e5253d..73f0e45 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -19,7 +19,7 @@
 	padding: none;
 	width: 100%;
 	height: 5rem;
-	background-color: $altBG;
+	background-color: $background2;
 	box-shadow: $defBigShadow;
 }
 
@@ -30,7 +30,7 @@
 nav a {
 	text-decoration: none;
 	padding: 0.3rem;
-	color: $defLink;
+	color: $link1;
 }
 
 .placeholder {
@@ -44,5 +44,5 @@ nav a {
 
 
 p, h1, h2, h3, h4, h5, h6 {
-	color: $defFG;
+	color: $foreground1;
 }
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 3011986..b2ca97b 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -2,86 +2,67 @@
 
 $defFont: 'Quicksand', sans-serif;
 
-/* Inspired by Dracula */
-/*
-$defBG: #282A36;
-$altBG: #383A59;
-
-$floatingContainerBG: #282C3466;
-$floatingBG: #2e323b;
-
-$formPaneBG: $defBG;
-
-$defFG: #F2F2F2;
-$altFG: #FF79C6;
-
-$defLink: $defFG;
-$altLink: $altFG;
-
-$paneBorderColor: pink;
-$formPaneBorderColor: $paneBorderColor;
-
-$defBorderColor: lightgreen;
-$altBorderColor: pink;
-
-$underline0: gray;
-$underline1: lightblue;
-$underline2: #FF79C6;
-
-$labelUnderlineColor: $underline1;
-
-$tableDefBorderColor: $underline1;
-$tableAltBorderColor: $underline2;
-$tableDisabledBorderColor: $underline0;
-
+/* light colorscheme, use this as template */
+// $disabledColor: gray;
+// $warningColor: red;
+// $shadowColor: #232627;
+// 
+// $background0: #282C3466; /* background for floating div */
+// $background1: #F7F2DF;
+// $background2: #A480CF;
+// $background3: #ECF5D9; /* foreground for floating div */
+// $background4: $background1; /* for form pane bg */
+// 
+// $foreground1: #000000;
+// $foreground2: #F83A59;
+// 
+// $link1: $foreground1;
+// $link2: $foreground2;
+// 
+// $defFG: $foreground1;
+// $altFG: $foreground2;
+// 
+// $border1: #232627;
+// $border2: lightgreen;
+// 
+// $underline0: $disabledColor;
+// $underline1: #F83A59;
+// $underline2: #FF79C6;
+// $underline3: $warningColor;
+// 
+// $defBigShadow: 0px 2px 4px $shadowColor;
+// $floatingShadow: 6px 6px 6px $shadowColor;
+/* template ends here */
+
+/* main dark theme inspired by dracula */
+/* my personal favourite */
+/* I name it dorakura (ドラクラー) */
+$disabledColor: gray;
 $warningColor: red;
-$warningBorderColor: $warningColor;
-
 $shadowColor: #232627;
-$defBigShadow: 0px 8px 4px $shadowColor;
-$floatingShadow: 6px 6px 6px $shadowColor;
-*/
-
-$background0: #282C3466;
-$background1: #ECF5D9;
-$background2: #A480CF;
-$background3: #F7F2DF;
-
-$underline0: gray;
-$underline1: #F83A59;
-$underline2: #FF79C6;
-
-$defBG: $background1;
-/*$altBG: #F83A59;*/
-$altBG: $background2;
-
-$floatingContainerBG: $background0;
-$floatingBG: $background3;
-
-$formPaneBG: $defBG;
 
-$defFG: #000000;
-$altFG: #F83A59;
+$background0: #282C3466; /* background for floating div */
+$background1: #282A36;
+$background2: #383A59;
+$background3: #2E323B; /* foreground for floating div */
+$background4: #00000000; /* for form pane bg */
 
-$defLink: $defFG;
-$altLink: $altFG;
+$foreground1: #FFFFFF;
+$foreground2: #FF79C6;
 
-$paneBorderColor: #232627;
-$formPaneBorderColor: $paneBorderColor;
+$link1: $foreground1;
+$link2: $foreground2;
 
-$defBorderColor: lightgreen;
-$altBorderColor: #232627;
+$defFG: $foreground1;
+$altFG: $foreground2;
 
+$border1: pink;
+$border2: lightgreen;
 
-$labelUnderlineColor: $underline1;
-
-$tableDefBorderColor: $underline1;
-$tableAltBorderColor: $underline2;
-$tableDisabledBorderColor: $underline0;
-
-$warningColor: red;
-$warningBorderColor: $warningColor;
+$underline0: $disabledColor;
+$underline1: lightblue;
+$underline2: #FF79C6;
+$underline3: $warningColor;
 
-$shadowColor: #232627;
 $defBigShadow: 0px 2px 4px $shadowColor;
 $floatingShadow: 6px 6px 6px $shadowColor;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 8605e07..9bf0904 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -27,8 +27,8 @@ html, body {
 }
 
 body {
-  background-color: $defBG;
-  color: $defFG;
+  background-color: $background1;
+  color: $foreground1;
   margin: 0;
 }
 
@@ -51,7 +51,7 @@ body {
 
 .BillingPageFlex div {
   box-sizing: border-box;
-  border: 1px solid $altBorderColor;
+  border: 1px solid $border1;
 }
 
 .floatingMenuBG {
@@ -59,7 +59,7 @@ body {
   width: 100%;
   position: fixed;
   top: 0; left: 0;
-  background-color: $floatingContainerBG;
+  background-color: $background0;
 }
 
 .floatingMenu {
@@ -73,9 +73,9 @@ body {
   margin: 0 auto;
   top: 15vh;
 
-  background-color: $floatingBG;
+  background-color: $background3;
   box-shadow: $floatingShadow;
-  border: 1px solid $defBorderColor;
+  border: 1px solid $border2;
 
   padding: 1.5rem;
 }