added size.scss and tweaked styling code

src/DEMO/HelloWorld.vue

@@ -1,16 +1,15 @@
 <template>
   <div style="padding: 24px">
     <d-card class="rounded-lg elevation">
-      <d-checkbox size="24" on-icon="sunset" off-icon="moonset" v-model="$store.state.theme.dark">
+
+      <d-card-title class="font-size-large font-weight-light pa-0" color="primary">Hello, this is a test ;)</d-card-title>
+
+      <d-checkbox class="pa-2 px-0" size="24" on-icon="sunset" off-icon="moonset" v-model="$store.state.theme.dark">
         Darkmode
       </d-checkbox>
 
-      <d-card-title class="font-size-small">Hello, this is a test ;)</d-card-title>
-      <d-card-title class="font-size-medium">Hello, this is a test ;)</d-card-title>
-      <d-card-title class="font-size-large font-weight-light" color="primary">Hello, this is a test ;)</d-card-title>
-
       <d-card color="error" class="rounded-lg" block>
-        <d-card-title color="white">
+        <d-card-title color="#fff">
           <d-btn @click="openGithub">
             <d-icon name="github-alt"/>
             Github
@@ -38,11 +37,11 @@
       </div>
 
       <div style="display: flex; gap: 8px; margin: 8px 0; flex-flow: row wrap;">
-        <d-btn color="success">
+        <d-btn color="success" outlined depressed>
           <d-icon name="check"/>
           Success
         </d-btn>
-        <d-btn color="error">
+        <d-btn color="error" outlined>
           <d-icon name="exclamation-triangle"/>
           Error
         </d-btn>

src/components/button/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="d-btn" :style="stylesObject" :class="classesObject" @click="$emit('click')">
+  <button class="d-btn" :style="stylesObject" :class="Object.assign(classesObject,themeClass)" @click="$emit('click')">
     <span class="d-btn__content" :style="{color: this.filled ? getContrast():''}">
       <slot></slot>
     </span>
@@ -11,29 +11,26 @@ export default {
   name: "d-btn",
 
   props: {
-    color: String,
     filled: Boolean,
     outlined: Boolean,
-    block: Boolean
+    block: Boolean,
+    depressed: Boolean,
   },
 
   computed: {
-    stylesObject() {
-      return {color: this.processColor(this.color)}
-    },
     classesObject() {
-      return {'d-btn--filled': this.filled, 'd-btn--outlined': this.outlined, 'd-btn--block': this.block}
+      return {'d-btn--filled': this.filled, 'd-btn--outlined': this.outlined, 'd-btn--block': this.block, 'd-btn--depressed': this.depressed}
     },
   }
 }
 </script>
 
 <style scoped lang="scss">
 .d-btn {
+  user-select: none;
   position: relative;
   background: none;
   color: inherit;
-  //border: 2px solid currentColor;
   border: none;
   font: inherit;
   cursor: pointer;
@@ -116,6 +113,16 @@ export default {
     justify-content: center;
     gap: 4px
   }
+
+  &.d-btn--outlined {
+    box-shadow: inset 0 0 0 1.4px currentColor;
+    &.d-btn--depressed.theme--dark {
+      box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, 0.12);
+    }
+    &.d-btn--depressed.theme--light {
+      box-shadow: inset 0 0 0 1.4px rgba(0, 0, 0, 0.12);
+    }
+  }
 }
 
 .theme--dark .d-btn {

src/components/card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-card" :style="{background: this.processColor(this.color)}" :class="classesObject">
+  <div class="d-card" :style="{background: this.processColor(this.color)}" :class="Object.assign(classesObject,themeClass)">
     <slot></slot>
   </div>
 </template>
@@ -21,11 +21,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../styles/colors";
+@import "../../styles/variables";
 
 .d-card {
   padding: 4px;
-  width: max-content;
 
   &.d-card--block{
     width: auto;

src/components/card/text/CardTitle.vue

@@ -1,5 +1,5 @@
 <template>
-<span class="d-card__title" :style="stylesObject">
+<span class="d-card__title" :style="stylesObject" :class="themeClass">
   <slot></slot>
 </span>
 </template>
@@ -9,13 +9,9 @@ export default {
   name: "d-card-title",
 
   props: {
-    color: String
   },
 
   computed: {
-    stylesObject(){
-      return {color: this.processColor(this.color)}
-    }
   }
 }
 </script>

src/components/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="d-checkbox" @click="$emit('input', value = !value)">
-    <div class="d-checkbox__box" :class="classesObject" :style="stylesObject">
+  <div class="d-checkbox" @click.prevent="changeValue" :class="themeClass">
+    <div class="d-checkbox__box" :class="classesObject" :style="checkboxStylesObject">
       <d-icon :name="value ? onIcon : offIcon" :size="size" :color="value ? getContrast() : 'currentColor'"/>
     </div>
     <div class="d-checkbox__label">
@@ -24,12 +24,20 @@ export default {
   },
 
   computed: {
-    stylesObject() {
+    checkboxStylesObject() {
       return {color: this.value ? this.processColor(this.color) : this.processColor('currentColor')}
     },
     classesObject() {
       return {'d-checkbox--checked': this.value}
     }
+  },
+
+  methods: {
+    changeValue(){
+      let value = this.value;
+      value = !value;
+      this.$emit('input', value)
+    }
   }
 }
 </script>
@@ -51,6 +59,14 @@ export default {
 
     &.d-checkbox--checked {
       background: currentColor;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      &:active {
+        opacity: 0.75;
+      }
     }
   }
 

src/main.js

@@ -10,6 +10,7 @@ import store from "@/store";
 //Imports Unicon
 import Unicon from 'vue-unicons/dist/vue-unicons-vue2.es'
 import * as uc from 'vue-unicons/dist/icons'
+
 const objArray = [];
 Object.keys(uc).forEach(key => objArray.push(
     uc[key]
@@ -21,6 +22,10 @@ Vue.use(Unicon)
 Vue.config.productionTip = false
 
 Vue.mixin({
+    props: {
+        color: String,
+    },
+
     methods: {
         processColor(color) {
             let colorOut = '';
@@ -31,7 +36,7 @@ Vue.mixin({
             }
             if (!colorOut) {
                 return color
-            }else {
+            } else {
                 return colorOut
             }
         },
@@ -55,7 +60,16 @@ Vue.mixin({
             return (yiq >= 128) ? 'black' : 'white';
 
         }
-    }
+    },
+    computed: {
+        themeClass() {
+            return {'theme--dark': this.$store.state.theme.dark, 'theme--light': !this.$store.state.theme.dark}
+        },
+        stylesObject() {
+            return {color: this.processColor(this.color)}
+        }
+    },
+
 })
 
 new Vue({

src/styles/directives/elevation.scss

@@ -1,23 +1,23 @@
-@import "../colors";
+@import "../variables";
 
 .theme--dark {
-    @for $i from 1 through 24 {
-      $brightness: $i + 0.5%;
-      .elevation-#{$i} {
-        background: lighten($dark_sheet, $brightness);
-      }
+  @for $i from 1 through 24 {
+    $brightness: $i + 0.5%;
+    .elevation-#{$i} {
+      background: lighten($dark_sheet, $brightness);
     }
+  }
 
-    @for $i from 1 through 24 {
-      $brightness: $i + 0.5%;
-      .elevation-n#{$i} {
-        background-color: darken($dark_sheet, $brightness);
-      }
+  @for $i from 1 through 24 {
+    $brightness: $i + 0.5%;
+    .elevation-n#{$i} {
+      background-color: darken($dark_sheet, $brightness);
+    }
   }
 }
 
 .theme--light {
-  .elevation{
+  .elevation {
     box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
   }
 }