initial commit

package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-unicons": "^3.3.0",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -18,6 +20,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^6.0.1",
+    "sass-loader": "^10",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/App.vue

@@ -1,28 +1,37 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+  <div id="app" :class="themeMode">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './DEMO/HelloWorld.vue'
 
 export default {
   name: 'App',
   components: {
     HelloWorld
+  },
+
+  data: ()=> ({
+    themeMode: 'theme--light'
+  }),
+
+  watch: {
+    '$store.state.theme.dark'(){
+      this.themeMode = this.$store.state.theme.dark ? 'theme--dark' : 'theme--light'
+    }
+  },
+
+  mounted() {
+    this.themeMode = this.$store.state.theme.dark ? 'theme--dark' : 'theme--light'
   }
 }
 </script>
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/DEMO/HelloWorld.vue

@@ -0,0 +1,90 @@
+<template>
+  <div style="padding: 40px">
+    <d-card class="rounded-lg">
+      <input type="checkbox" v-model="$store.state.theme.dark"/>
+      <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="error">Hello, this is a test ;)</d-card-title>
+
+      <div style="display: flex; gap: 4px; margin-bottom: 4px">
+        <d-btn color="success">
+          <d-icon name="check"/>
+          Holo Success
+        </d-btn>
+        <d-btn color="error">
+          <d-icon name="exclamation-triangle"/>
+          Error
+        </d-btn>
+        <d-btn color="warning">
+          <d-icon name="exclamation-octagon"/>
+          Warning
+        </d-btn>
+        <d-btn color="info">
+          <d-icon name="info-circle"/>
+          Info
+        </d-btn>
+      </div>
+
+      <div style="display: flex; gap: 4px; margin-top: 4px">
+        <d-btn color="success" filled>
+          <d-icon name="check"/>
+          Filled Success
+        </d-btn>
+        <d-btn color="error" filled>
+          <d-icon name="exclamation-triangle"/>
+          Filled Error
+        </d-btn>
+        <d-btn color="warning" filled>
+          <d-icon name="exclamation-octagon"/>
+          Filled Warning
+        </d-btn>
+        <d-btn color="info" filled>
+          <d-icon name="info-circle"/>
+          Filled Info
+        </d-btn>
+      </div>
+    </d-card>
+
+    <d-card class="rounded-xl" style="margin-top: 8px">
+      <d-card-title class="font-size-small font-weight-thicc" color="primary">Hello, this is a test ;)</d-card-title>
+      <d-card-title class="font-size-medium font-weight-medium">Hello, this is a test ;)</d-card-title>
+      <d-card-title class="font-size-large font-weight-light">Hello, this is a test ;)</d-card-title>
+    </d-card>
+  </div>
+</template>
+
+<script>
+import DCard from "@/components/card/Card";
+import DCardTitle from "@/components/card/text/CardTitle";
+import DBtn from "@/components/button/Button";
+import DIcon from "@/components/icon/Icon";
+
+export default {
+  name: 'HelloWorld',
+  components: {DIcon, DBtn, DCard, DCardTitle},
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

src/components/button/Button.vue

@@ -0,0 +1,148 @@
+<template>
+  <button class="d-btn" :style="stylesObject" :class="classesObject">
+    <span class="d-btn__content" :style="{color: getContrast}">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "d-btn",
+
+  props: {
+    color: String,
+    filled: Boolean,
+    outlined: Boolean,
+    block: 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}
+    },
+
+    getContrast() {
+      if(!this.filled){
+        return
+      }
+      let hexColor = this.processColor(this.color);
+      if (hexColor.slice(0, 1) === '#') {
+        hexColor = hexColor.slice(1);
+      }
+      if (hexColor.length === 3) {
+        hexColor = hexColor.split('').map(function (hex) {
+          return hex + hex;
+        }).join('');
+      }
+      // Convert to RGB value
+      let r = parseInt(hexColor.substr(0, 2), 16);
+      let g = parseInt(hexColor.substr(2, 2), 16);
+      let b = parseInt(hexColor.substr(4, 2), 16);
+      // Get YIQ ratio
+      let yiq = ((r * 299) + (g * 395) + (b * 114)) / 1000;
+      // Check contrast
+      return (yiq >= 128) ? 'black' : 'white';
+
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.d-btn {
+  position: relative;
+  background: none;
+  color: inherit;
+  //border: 2px solid currentColor;
+  border: none;
+  font: inherit;
+  cursor: pointer;
+  padding: 0 12px;
+
+  min-height: 36px;
+  min-width: 80px;
+
+  border-radius: 8px;
+
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 0.875rem;
+  letter-spacing: 0.0892857143em;
+
+  &:focus-visible {
+    outline: 1px solid currentColor;
+    box-shadow: inset 0px -2px 0px 0px currentColor
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    border-radius: inherit;
+
+    background: currentColor;
+    opacity: 0;
+
+    transition-duration: 0.25s;
+  }
+
+  &:active {
+    &::before {
+      background-color: currentColor;
+      opacity: 0.2 !important;
+    }
+  }
+
+  &:hover {
+    &::before {
+      background: currentColor;
+      opacity: 0.1;
+      transition-duration: 0.15s;
+    }
+  }
+
+  &.d-btn--filled {
+    &::before {
+      background: currentColor;
+      opacity: 1;
+    }
+    &:active {
+      &::before {
+        background-color: currentColor;
+        opacity: 0.75 !important;
+      }
+    }
+    &:hover {
+      &::before {
+        background: currentColor;
+        opacity: 0.9;
+      }
+    }
+  }
+
+  .d-btn__content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px
+  }
+}
+
+.theme--dark .d-btn {
+
+}
+
+
+.theme--light .d-btn {
+
+}
+</style>