renusify 1.0.6 → 1.0.8

package/components/app/index.vue

@@ -1,21 +1,19 @@
 <template>
-    <div :class="{
+  <div :class="{
         [$r.prefix+'app']:true,
                     'app-rtl': isRtl,
-                    'app-ltr': !isRtl,
-                    'app-dark': isDark,
-                    'app-light': !isDark
+                    'app-ltr': !isRtl
                 }" :id="id">
-        <div class="app-wrap" :style="{'min-height':$r.breakpoint.height+'px'}">
-          <slot></slot>
-        </div>
-        <r-toast></r-toast>
-        <r-notify v-if="notify" :left="notifyLeft" :top="notifyTop">
-            <template #content="props">
-                <slot name="notify" :item="props"></slot>
-            </template>
-        </r-notify>
+    <div class="app-wrap" :style="{'min-height':$r.breakpoint.height+'px'}">
+      <slot></slot>
     </div>
+    <r-toast></r-toast>
+    <r-notify v-if="notify" :left="notifyLeft" :top="notifyTop">
+      <template #content="props">
+        <slot name="notify" :item="props"></slot>
+      </template>
+    </r-notify>
+  </div>
 </template>
 
 <script>
@@ -32,24 +30,17 @@ export default {
       default: 'renusify'
     },
     notify: Boolean,
-            notifyLeft: Boolean,
-            notifyTop: Boolean,
-            rtl: {type:Boolean,default: undefined},
-            dark: {type:Boolean,default: undefined}
-        },
-        computed:{
-          isRtl(){
-              if(this.rtl!==undefined){
-                  return this.rtl
-              }
-              return this.$r.rtl
-            },
-            isDark(){
-              if(this.dark!==undefined){
-                  return this.dark
-              }
-              return this.$r.dark
-            }
-        }
+    notifyLeft: Boolean,
+    notifyTop: Boolean,
+    rtl: {type: Boolean, default: undefined}
+  },
+  computed: {
+    isRtl() {
+      if (this.rtl !== undefined) {
+        return this.rtl
+      }
+      return this.$r.rtl
     }
+  }
+}
 </script>

package/components/app/style.scss

@@ -3,26 +3,15 @@
 .#{$prefix}app {
   display: flex;
 
-  &.app-light {
-    background: var(--color-background-one-light);
-    color: var(--color-text-primary-light);
-    .background-one{
-      background: var(--color-background-one-light);
-    }
-    .background-two{
-      background: var(--color-background-two-light);
-    }
+  background: var(--color-background-one);
+  color: var(--color-text-primary);
+
+  .background-one {
+    background: var(--color-background-one);
   }
 
-  &.app-dark {
-    background: var(--color-background-one-dark);
-    color: var(--color-text-primary-dark);
-    .background-one{
-      background: var(--color-background-one-dark);
-    }
-    .background-two{
-      background: var(--color-background-two-dark);
-    }
+  .background-two {
+    background: var(--color-background-two);
   }
 
 

package/components/bar/bottomNavigationCircle.vue

@@ -1,97 +1,91 @@
 <template>
-    <nav :class="`${$r.prefix}bottom-navigation-circle`">
-        <router-link
-                :to="item.to"
-                class="navigation-item"
-                v-for="(item, i) in items"
-                :key="i"
-        >
-            <div class="navigation-item-icon">
-                <r-icon v-html="item.icon"></r-icon>
-            </div>
-            <div class="navigation-item-text">{{ item.name }}</div>
-        </router-link>
-    </nav>
+  <nav :class="`${$r.prefix}bottom-navigation-circle`">
+    <router-link
+        :to="item.to"
+        class="navigation-item"
+        v-for="(item, i) in items"
+        :key="i"
+    >
+      <div class="navigation-item-icon">
+        <r-icon v-html="item.icon"></r-icon>
+      </div>
+      <div class="navigation-item-text">{{ item.name }}</div>
+    </router-link>
+  </nav>
 </template>
 
 <script>
-    export default {
-        name: "rBottomNavigationCircle",
-        props: {
-            items: Object
-        },
-        data() {
-            return {};
-        }
-    };
+export default {
+  name: "rBottomNavigationCircle",
+  props: {
+    items: Object
+  },
+  data() {
+    return {};
+  }
+};
 </script>
 
 <style lang="scss">
-    @import "~renusify/style/include";
+@import "~renusify/style/include";
 
-    .#{$prefix}bottom-navigation-circle {
-        position: fixed;
-        bottom: 0;
-        display: flex;
-        left: 0;
-        justify-content: center;
-        width: 100%;
-        height: 56px;
-        z-index: map_get($z-index, "default");
+.#{$prefix}bottom-navigation-circle {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  left: 0;
+  justify-content: center;
+  width: 100%;
+  height: 56px;
+  z-index: map_get($z-index, "default");
+  background-color: var(--color-sheet);
+  color: var(--color-text-primary);
 
-        @include light() {
-            background-color: var(--color-cards-light);
-            color: var(--color-text-primary-light);
-        }
-        @include dark() {
-            background-color: var(--color-cards-dark);
-            color: var(--color-text-primary-dark);
-        }
 
-        .navigation-item {
-            width: 100%;
-            max-width: 100%;
-            text-align: center;
-            position: relative;
+  .navigation-item {
+    width: 100%;
+    max-width: 100%;
+    text-align: center;
+    position: relative;
 
-            &-text {
-                position: absolute;
-                bottom: 10px;
-                left: 0;
-                right: 0;
-            }
+    &-text {
+      position: absolute;
+      bottom: 10px;
+      left: 0;
+      right: 0;
+    }
 
-            &-icon {
-                transition: 0.3s all ease-in-out;
-                position: absolute;
-                bottom: 12px;
-                left: 0;
-                right: 0;
-                width: 50px;
-                height: 50px;
-                margin-left: auto;
-                margin-right: auto;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-        }
+    &-icon {
+      transition: 0.3s all ease-in-out;
+      position: absolute;
+      bottom: 12px;
+      left: 0;
+      right: 0;
+      width: 50px;
+      height: 50px;
+      margin-left: auto;
+      margin-right: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
 
-        .router-link-exact-active {
-            .navigation-item-icon {
-                transition: 0.3s all ease-in-out;
-                bottom: 31px;
-                background-color: currentColor;
-                border-radius: 50%;
-                padding: 15px;
-                width: 50px;
-                height: 50px;
-                border: 3px solid white;
+  .router-link-exact-active {
+    .navigation-item-icon {
+      transition: 0.3s all ease-in-out;
+      bottom: 31px;
+      background-color: currentColor;
+      border-radius: 50%;
+      padding: 15px;
+      width: 50px;
+      height: 50px;
+      border: 3px solid white;
 
-                .#{$prefix}icon {
-                    color: white;
-                }
-            }
-        }
+      .#{$prefix}icon {
+        color: white;
+      }
     }
+  }
+}
 </style>

package/components/bar/scss/bottomNav.scss

@@ -10,21 +10,12 @@ $bottom-nav-btn-font-size: map-metro-get($headings, 'caption', 'size') !default;
   width: 100%;
   height: $bottom-nav-height;
 
-  @include light() {
-    background-color: var(--color-cards-light);
-    color: var(--color-text-primary-light);
 
-    .#{$prefix}btn.router-link-exact-active {
-      color: var(--color-one-light) !important
-    }
-  }
-  @include dark() {
-    background-color: var(--color-cards-dark);
-    color: var(--color-text-primary-dark);
+  background-color: var(--color-sheet);
+  color: var(--color-text-primary);
 
-    .#{$prefix}btn.router-link-exact-active {
-      color: var(--color-one-dark) !important
-    }
+  .#{$prefix}btn.router-link-exact-active {
+    color: var(--color-one) !important
   }
 
   .#{$prefix}btn {

package/components/bar/scss/toolbar.scss

@@ -35,13 +35,13 @@
       width: 0;
       height: 100vh;
       z-index: map_get($z-index, 'important');
-      background-color: var(--color-overlay-light);
+      background-color: var(--color-overlay);
       transition: 1s width map-get($transition, 'swing');
       overflow: hidden;
-      @include rtl(){
+      @include rtl() {
         right: 0;
       }
-      @include ltr(){
+      @include ltr() {
         left: 0;
       }
     }
@@ -139,12 +139,7 @@
       width: 0;
       position: absolute;
       bottom: 0;
-      @include light() {
-        color: var(--color-one-light);
-      }
-      @include dark() {
-        color: var(--color-one-dark);
-      }
+      color: var(--color-one);
       border-bottom: 4px solid;
     }
 

package/components/breadcrumb/style.scss

@@ -11,17 +11,11 @@
   padding: 0 14px;
 
 
-  @include light() {
-    .breadcrumb-divider, .breadcrumb-item-disabled, .#{$prefix}icon {
-      color: var(--color-text-disabled-light)
-    }
-  }
-  @include dark() {
-    .breadcrumb-divider, .breadcrumb-item-disabled, .#{$prefix}icon {
-      color: var(--color-text-disabled-dark)
-    }
+  .breadcrumb-divider, .breadcrumb-item-disabled, .#{$prefix}icon {
+    color: var(--color-text-disabled)
   }
 
+
   li {
     align-items: center;
     display: inline-flex;

package/components/button/buttonConfirm.vue

@@ -0,0 +1,44 @@
+<template>
+  <r-btn v-bind="$attrs" @click.prevent.stop="show=true">
+    <slot></slot>
+  </r-btn>
+  <r-confirm
+      :hard="hard"
+      :title="title"
+      :text="body"
+      :cancelText="cancelText"
+      :confirmText="confirmText"
+      v-model="show"
+      v-on:accept="accept"
+      v-on:cancel="show = false"
+  />
+</template>
+
+<script>
+export default {
+  name: "buttonConfirm",
+  props: {
+    hard: String,
+    title: String,
+    body: String,
+    cancelText: String,
+    confirmText: String,
+  },
+  emits: ['click'],
+  data() {
+    return {
+      show: false
+    }
+  },
+  methods: {
+    accept() {
+      this.$emit('click', true)
+      this.show = false
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~renusify/style/include";
+</style>

package/components/button/style.scss

@@ -38,7 +38,6 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
 .#{$prefix}btn {
   cursor: pointer;
-  color: inherit;
   align-items: center;
   border-radius: $btn-border-radius;
   display: inline-flex;
@@ -59,48 +58,28 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   vertical-align: middle;
   white-space: nowrap;
 
-  @include light() {
-    &.btn-disabled {
-      color: var(--color-disabled-light) !important;
 
-      .btn-loading {
-        color: var(--color-disabled-light) !important
-      }
+  &.btn-disabled {
+    color: var(--color-disabled) !important;
 
-      &:not(.btn-text):not(.btn-outlined) {
-        background-color: var(--color-focused-light) !important
-      }
+    .btn-loading {
+      color: var(--color-disabled) !important
     }
 
     &:not(.btn-text):not(.btn-outlined) {
-      background-color: var(--color-cards-light)
-    }
-
-    &.btn-outlined.btn-text {
-      border-color: var(--color-divider-light)
+      background-color: var(--color-focused) !important
     }
   }
-  @include dark() {
-    &.btn-disabled {
-      color: var(--color-disabled-dark) !important;
 
-      .btn-loading {
-        color: var(--color-disabled-dark) !important
-      }
+  &:not(.btn-text):not(.btn-outlined) {
+    background-color: var(--color-sheet)
+  }
 
-      &:not(.btn-text):not(.btn-outlined) {
-        background-color: var(--color-focused-dark) !important
-      }
-    }
+  &.btn-outlined.btn-text {
+    border-color: var(--color-divider)
+  }
 
-    &:not(.btn-text):not(.btn-outlined) {
-      background-color: var(--color-cards-dark)
-    }
 
-    &.btn-outlined.btn-text {
-      border-color: var(--color-divider-dark)
-    }
-  }
   @include states();
 
   @include ltr() {
@@ -373,12 +352,8 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 .#{$prefix}button-group {
   position: relative;
   color: inherit;
-  @include light() {
-    background-color: var(--color-cards-light);
-  }
-  @include dark() {
-    background-color: var(--color-cards-dark);
-  }
+  background-color: var(--color-sheet);
+
   @include states();
 
   .btn-container {

package/components/calendar/index.vue

@@ -322,60 +322,30 @@ export default {
   color: #303030;
   overflow-x: auto;
   max-width: 100%;
-  @include dark {
-    $Color: var(--color-one-dark);
     .cell, .headCell {
-      border: 1px solid var(--color-border-dark);
+      border: 1px solid var(--color-border);
     }
     .cell {
       &.today {
-        color: $Color;
+        color: var(--color-one);
 
         .cellContent {
-          border: solid 1px $Color;
+          border: solid 1px var(--color-one);
         }
       }
 
       &.selectable:hover {
         .cellContent {
-          border: solid 1px $Color;
-
+          border: solid 1px var(--color-one);
         }
       }
 
     }
     .cell.disabled {
-      background-color: var(--color-disabled-dark);
+      background-color: var(--color-disabled);
       opacity: 0.5;
     }
-  }
-
-  @include light {
-    $Color: var(--color-one-light);
-    .cell, .headCell {
-      border: 1px solid var(--color-border-light);
-    }
-    .cell {
-      &.today {
-        color: $Color;
-
-        .cellContent {
-          border: solid 1px $Color;
-        }
-      }
 
-      &.selectable:hover {
-        .cellContent {
-          border: solid 1px $Color;
-        }
-      }
-
-    }
-    .cell.disabled {
-      background-color: var(--color-disabled-light);
-      opacity: 0.5;
-    }
-  }
 
   .table {
     width: 100%;

package/components/card/style.scss

@@ -12,14 +12,10 @@
   overflow-wrap: break-word;
   white-space: normal;
 
-   &.card-outlined {
-    @include light() {
-      border: 1px solid var(--color-border-light)
-    }
-    @include dark() {
-      border: 1px solid var(--color-border-dark)
-    }
+  &.card-outlined {
+    border: 1px solid var(--color-border)
   }
+
   @include states();
 
   &.card-hover {
@@ -76,16 +72,11 @@
   @include elevation('md');
   border-radius: map_get($borders, 'md');
 
-  @include light() {
-    background-color: var(--color-cards-light);
-    border-color: var(--color-cards-light);
-    color: var(--color-text-primary-light);
-  }
-  @include dark() {
-    background-color: var(--color-cards-dark);
-    border-color: var(--color-cards-dark);
-    color: var(--color-text-primary-dark);
-  }
+
+  background-color: var(--color-sheet);
+  border-color: var(--color-sheet);
+  color: var(--color-text-primary);
+
 
   &-tile {
     border-radius: 0;

package/components/chat/chatInput.vue

@@ -115,16 +115,10 @@ export default {
 
 .#{$prefix}chat-input {
   display: flex;
-  @include light() {
-    box-shadow: black 0px 8px 15px;
-    background: var(--color-background-two-light);
-    border-top: 1px solid var(--color-border-light);
-  }
-  @include dark() {
-    box-shadow: white 0px 8px 15px;
-    background: var(--color-background-two-dark);
-    border-top: 1px solid var(--color-border-dark);
-  }
+
+  box-shadow: black 0px 8px 15px;
+  background: var(--color-background-two);
+  border-top: 1px solid var(--color-border);
 
   .chat-input {
     margin: 5px 0;