Exporting base styles

src/_maketheme.scss

@@ -1,18 +1,7 @@
 @import "./_vals.scss";
 
-@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
-
 $background:false !default;
 $on-background:false !default;
-$primary: var(--primary) !default;
-$on-primary: var(--on-primary) !default;
-
-$secondary: var(--secondary) !default;
-$on-secondary: var(--on-secondary) !default;
-
-$error: var(--error) !default;
-$on-error: var(--on-error) !default;
-
 $button-color: #CCCCCC !default;
 
 @if $background==false or $on-background==false {
@@ -24,26 +13,10 @@ $button-color: #CCCCCC !default;
     --on-background: #{$on-background};
 }
 
-$default-font-size: 1rem;
-
 .background-default {
     background: $background;
 }
 
-* {
-    box-sizing: border-box;
-    font-family: 'Roboto', sans-serif;
-    font-size: $default-font-size;
-}
-
-html,
-body {
-    background: $background;
-    color: $on-background;
-    margin: 0;
-    min-height: 100vh;
-    min-width: 100vw;
-}
 
 @each $dp in $elevations {
     .elv-#{$dp} {
@@ -51,17 +24,6 @@ body {
     }
 }
 
-.margin {
-    margin-bottom: 1.5rem;
-}
-
-.container {
-    box-sizing: content-box;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    margin: 0 auto;
-    max-width: 50rem;
-}
 
 @function darken-brighten-color($color, $val) {
     @if (lightness($color) > 50) {
@@ -73,9 +35,10 @@ body {
     }
 }
 
-@import "./_btn.scss";
-@import "./_modal.scss";
-@import "./_input.scss";
-@import "./_list.scss";
-@import "./_header.scss";
-@import "./_card.scss";
+@import "./theme/_global.scss";
+@import "./theme/_btn.scss";
+@import "./theme/_modal.scss";
+@import "./theme/_input.scss";
+@import "./theme/_list.scss";
+@import "./theme/_header.scss";
+@import "./theme/_card.scss";

src/base.scss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+
 :root {
     // --primary: #1e88e5; 
     --primary: #196eb9;
@@ -6,4 +8,22 @@
     --secondary: #d8701b;
     --on-secondary: black;
     --error: rgb(255, 0, 0);
-}
+}
+
+$default-font-size: 1rem;
+$primary: var(--primary) !default;
+$on-primary: var(--on-primary) !default;
+
+$secondary: var(--secondary) !default;
+$on-secondary: var(--on-secondary) !default;
+
+$error: var(--error) !default;
+$on-error: var(--on-error) !default;
+
+@import "./base/_global.scss";
+@import "./base/_btn.scss";
+@import "./base/_modal.scss";
+@import "./base/_input.scss";
+@import "./base/_list.scss";
+@import "./base/_header.scss";
+@import "./base/_card.scss";

src/base/_btn.scss

@@ -1,7 +1,5 @@
 .btn {
     position: relative;
-    @include Elevation(1);
-    background: $button-color;
     color: black;
     border: 0;
     margin: .3rem;
@@ -9,14 +7,6 @@
     font-weight: 500;
     text-transform: uppercase;
     transition: .05s background-color linear;
-
-    &:hover {
-        background: darken($button-color, 5%);
-    }
-
-    &:active {
-        background: lighten($button-color, 5%);
-    }
 }
 
 .btn-primary {
@@ -33,6 +23,7 @@
 }
 
 .btn-secondary {
+
     background: $secondary !important;
     color: $on-primary !important;
 
@@ -47,8 +38,6 @@
 }
 
 .fab {
-    @include Elevation(6);
-    background: $button-color;
     border-radius: 50%;
     width: 2.5rem;
     height: 2.5rem;

src/base/_card.scss

@@ -0,0 +1,3 @@
+.card {
+    padding: 1rem;
+}

src/base/_global.scss

@@ -0,0 +1,25 @@
+* {
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    font-size: $default-font-size;
+}
+
+
+html,
+body {
+    margin: 0;
+    min-height: 100vh;
+    min-width: 100vw;
+}
+
+.margin {
+    margin-bottom: 1.5rem;
+}
+
+.container {
+    box-sizing: content-box;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin: 0 auto;
+    max-width: 50rem;
+}

src/base/_header.scss

@@ -1,7 +1,6 @@
 .header {
-    @include Elevation(3);
-    background: $primary;
-    color: $on-primary;
+    background: $primary !important;
+    color: $on-primary !important;
 
     display: flex;
     justify-content: space-between;

src/base/_input.scss

@@ -1,7 +1,5 @@
 .inp {
-    // background: $background;
     background: unset;
-    color: $on-background;
     border: 1px grey solid;
     padding: 0 .5rem;
     height: 2rem;
@@ -11,10 +9,6 @@
     &:focus {
         border-color: $primary;
     }
-
-    // &disabled {
-    //     background: darken-brighten-color($background, 10%)
-    // }
 }
 
 textarea.inp {

src/base/_list.scss

@@ -9,17 +9,13 @@
 
 .list-divider {
     li:nth-child(n+2) {
-        // margin-top: 10px;
-        // padding-top: 10px;
         border-top: 1px solid rgb(128, 128, 128);
     }
 }
 
 
-
-
-.list-clickable {
-    li:hover {
-        background: darken-brighten-color($background, 5%);
-    }
-}
+// .list-clickable {
+//     // li:hover {
+//     //     background: darken-brighten-color($background, 5%);
+//     // }
+// }

src/base/_modal.scss

@@ -1,7 +1,4 @@
 .modal {
-    background: $background;
-    // background: rgba(0, 0, 0, 0.04);
-    @include Elevation(24);
     padding: 1rem;
 
     margin: auto;

src/dark.scss

@@ -9,4 +9,4 @@ $disabled-brightness: 1.1;
     z-index: $dp;
 }
 
-@import "./maketheme.scss";
+@import "./_maketheme.scss";

src/light.scss

@@ -54,4 +54,4 @@ $disabled-brightness: .9;
     z-index: $dp;
 }
 
-@import "./maketheme.scss";
+@import "./_maketheme.scss";

src/theme/_btn.scss

@@ -0,0 +1,17 @@
+.btn {
+    @include Elevation(1);
+    background: $button-color;
+
+    &:hover {
+        background: darken($button-color, 5%);
+    }
+
+    &:active {
+        background: lighten($button-color, 5%);
+    }
+}
+
+.fab {
+    @include Elevation(8);
+    background: $button-color;
+}

src/theme/_card.scss

@@ -1,6 +1,5 @@
 .card {
     @include Elevation(3);
-    padding: 1rem;
 }
 
 .card-elevated {

src/theme/_global.scss

@@ -0,0 +1,5 @@
+html,
+body {
+    background: $background;
+    color: $on-background;
+}

src/theme/_header.scss

@@ -0,0 +1,3 @@
+.header {
+    @include Elevation(3);
+}

src/theme/_input.scss

@@ -0,0 +1,8 @@
+.inp {
+    color: $on-background;
+
+    option {
+        background: $background;
+        color: $on-background;
+    }
+}

src/theme/_list.scss

@@ -0,0 +1,5 @@
+.list-clickable {
+    li:hover {
+        background: darken-brighten-color($background, 5%);
+    }
+}

src/theme/_modal.scss

@@ -0,0 +1,10 @@
+.modal {
+    background: $background;
+    @include Elevation(24);
+
+    .modal-action {
+        button {
+            @extend .btn;
+        }
+    }
+}