First Version

src/_maketheme.scss

@@ -0,0 +1,84 @@
+@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 {
+    @error("background and on-background must be set!");
+}
+
+:root {
+    --background: $background;
+    --on-background: $on-background;
+}
+
+$default-font-size: 1.2rem;
+
+.background-default {
+    background: $background;
+}
+
+* {
+    box-sizing: border-box;
+    font-family: 'Roboto', sans-serif;
+    font-size: $default-font-size;
+
+    transition: .2s ease-in-out;
+    transition-property: color, background-color;
+}
+
+html,
+body {
+    background: $background;
+    color: $on-background;
+    margin: 0;
+    min-height: 100vh;
+    min-width: 100vw;
+}
+
+@each $dp in $elevations {
+    .elv-#{$dp} {
+        @include Elevation($dp);
+    }
+}
+
+.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) {
+        @return darken($color, $val); // Lighter backgorund, return dark color
+    }
+
+    @else {
+        @return lighten($color, $val); // Darker background, return light color
+    }
+}
+
+@import "./_btn.scss";
+@import "./_modal.scss";
+@import "./_input.scss";
+@import "./_list.scss";
+@import "./_header.scss";
+@import "./_card.scss";