First Version

src/_btn.scss

@@ -0,0 +1,69 @@
+.btn {
+    position: relative;
+    @include Elevation(1);
+    background: $button-color;
+    color: black;
+    border: 0;
+    margin: .3rem;
+    padding: .5rem;
+    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 {
+    background: $primary !important;
+    color: $on-primary !important;
+
+    &:hover {
+        filter: brightness(.95);
+    }
+
+    &:active {
+        filter: brightness(1.05);
+    }
+}
+
+.btn-secondary {
+    background: $secondary !important;
+    color: $on-primary !important;
+
+
+    &:hover {
+        filter: brightness(.95);
+    }
+
+    &:active {
+        filter: brightness(1.05);
+    }
+}
+
+.fab {
+    @include Elevation(6);
+    background: $button-color;
+    border-radius: 50%;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin: .5rem;
+    line-height: 1.5rem;
+    font-size: 1.5rem;
+
+    >svg {
+        height: 1.5rem;
+        width: 1.5rem;
+    }
+
+    position: fixed;
+    bottom: 1.5rem;
+    right: 1.5rem;
+
+    border: none;
+}

src/_card.scss

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

src/_header.scss

@@ -0,0 +1,36 @@
+.header {
+    @include Elevation(3);
+    background: $primary;
+    color: $on-primary;
+
+    display: flex;
+    justify-content: space-between;
+    padding: .75rem;
+    margin-bottom: .5rem;
+
+    >* {
+        margin: 0;
+        background: $primary;
+        color: $on-primary;
+    }
+
+    .header-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex-grow: 1;
+        margin: 0 1rem;
+    }
+
+    .header-icon-button {
+        display: block;
+        margin-top: auto;
+        margin-bottom: auto;
+        min-width: $default-font-size;
+
+        >svg {
+            height: $default-font-size;
+            width: $default-font-size;
+        }
+    }
+}

src/_input.scss

@@ -0,0 +1,39 @@
+.inp {
+    // background: $background;
+    background: unset;
+    color: $on-background;
+    border: 1px grey solid;
+    padding: 0 .5rem;
+    height: 2rem;
+    display: inline-block;
+    min-width: 10rem;
+
+    &:focus {
+        border-color: $primary;
+    }
+
+    // &disabled {
+    //     background: darken-brighten-color($background, 10%)
+    // }
+}
+
+textarea.inp {
+    height: unset !important;
+    min-height: 6rem !important;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    @extend .margin;
+
+    input {
+        @extend .inp;
+    }
+
+    label {
+        display: inline-block;
+        margin-bottom: .3rem;
+        margin-left: .5rem;
+    }
+}

src/_list.scss

@@ -0,0 +1,25 @@
+.list {
+    padding: 0;
+    list-style: none;
+
+    li {
+        padding: .5rem;
+    }
+}
+
+.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%);
+    }
+}

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";

src/_modal.scss

@@ -0,0 +1,61 @@
+.modal {
+    background: $background;
+    // background: rgba(0, 0, 0, 0.04);
+    @include Elevation(24);
+    padding: 1rem;
+
+    margin: auto;
+    max-width: 600px;
+    min-width: 250px;
+    width: calc(100% - 2rem);
+
+    max-height: calc(100vh - 2rem);
+
+    transform: translate(-50%, -50%);
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+
+    .modal-title {
+        font-weight: 600;
+        font-size: 1.2rem;
+        margin-bottom: .5rem;
+    }
+
+    .modal-content {
+        overflow-y: auto;
+        max-height: calc(100vh - 10rem);
+        // margin: auto;
+    }
+
+    .modal-action {
+        margin-top: .5rem;
+        display: flex;
+
+        :first-child {
+            margin-left: auto;
+        }
+
+        button {
+            @extend .btn;
+        }
+    }
+
+    transform-origin: center;
+    animation: growModalBox .2s linear;
+}
+
+@keyframes growModalBox {
+    from {
+        filter: opacity(0);
+    }
+
+    to {
+        filter: opacity(1);
+    }
+}
+
+.modal-hidden {
+    display: none;
+}

src/_vals.scss

@@ -0,0 +1,10 @@
+$elevations: 1,
+2,
+3,
+4,
+6,
+8,
+9,
+12,
+16,
+24;

src/base.scss

@@ -0,0 +1,9 @@
+:root {
+    // --primary: #1e88e5; 
+    --primary: #196eb9;
+    // or 196eb9 => Needs further investigations
+    --on-primary: white;
+    --secondary: #d8701b;
+    --on-secondary: black;
+    --error: rgb(255, 0, 0);
+}

src/dark.scss

@@ -0,0 +1,12 @@
+@import "./_vals.scss";
+
+$background: #000000;
+$on-background: white;
+$disabled-brightness: 1.1;
+
+@mixin Elevation ($dp) {
+    background: lighten($background, floor(($dp + 3) * 1%));
+    z-index: $dp;
+}
+
+@import "./maketheme.scss";

src/light.scss

@@ -0,0 +1,57 @@
+$background: #f9f9f9;
+$on-background: black;
+$disabled-brightness: .9;
+
+@mixin Elevation ($dp) {
+    @if $dp==0 {
+        box-shadow: none
+    }
+
+    @else if $dp==1 {
+        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==2 {
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==3 {
+        box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .12), 0 1px 8px 0 rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==4 {
+        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==6 {
+        box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==8 {
+        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==9 {
+        box-shadow: 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12), 0 5px 6px -3px rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==12 {
+        box-shadow: 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12), 0 7px 8px -4px rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==16 {
+        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .20)
+    }
+
+    @else if $dp==24 {
+        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12), 0 11px 15px -7px rgba(0, 0, 0, .20)
+    }
+
+    @else {
+        @error "Invalid argument for $dp: {"+$dp+"}, look at the method definition for possible values";
+    }
+
+    z-index: $dp;
+}
+
+@import "./maketheme.scss";