renusify 1.4.8 → 2.0.1

package/components/app/style.scss

@@ -3,16 +3,8 @@
 .#{$prefix}app {
   display: flex;
 
-  background: var(--color-background-one);
-  color: var(--color-text-primary);
-
-  .background-one {
-    background: var(--color-background-one);
-  }
-
-  .background-two {
-    background: var(--color-background-two);
-  }
+  background: var(--color-sheet);
+  color: var(--color-on-sheet);
 
 
   &.app-rtl {

package/components/app/toast/toast.vue

@@ -2,14 +2,15 @@
   <div :class="`${$r.prefix}toast`">
     <transition name="slide-up">
       <div class="toast-content br-sm elevation-md" :class="'color-'+type" v-if="modelValue">
-          <span class="title">
+          <span class="title-1">
             <slot></slot>
           </span>
           <r-spacer></r-spacer>
-            <r-btn text class="title font-weight-bold" :class="{
+        <r-btn :class="{
                 'color-info-text':type==='warning',
                 'color-warning-text':type!=='warning'
-            }" v-if="action" @click.prevent="action(this)">{{actionName}}</r-btn>
+            }" class="title-1 font-weight-bold" text v-if="action" @click.prevent="action(this)">{{ actionName }}
+        </r-btn>
             <r-btn @click.prevent="close()"
                    icon
                    text

package/components/bar/bottomNavigationCircle.vue

@@ -43,8 +43,8 @@ export default {
   height: 56px;
   z-index: map_get($z-index, "default");
   background-color: var(--color-sheet);
-  color: var(--color-text-primary);
-
+  color: var(--color-on-sheet);
+  @include typography($headings, 'body-3');
 
   .navigation-item {
     width: 100%;
@@ -80,15 +80,15 @@ export default {
     .navigation-item-icon {
       transition: 0.3s all ease-in-out;
       bottom: 31px;
-      background-color: currentColor;
+      background-color: var(--color-one);
       border-radius: 50%;
       padding: 12px;
       width: 50px;
       height: 50px;
-      border: 3px solid white;
+      border: 3px solid var(--color-on-one);
 
       .#{$prefix}icon {
-        color: white;
+        color: var(--color-on-one);
       }
     }
   }

package/components/bar/scss/bottomNav.scss

@@ -1,6 +1,6 @@
 @import "../../../style/include";
 
-$bottom-nav-btn-font-size: map-metro-get($headings, 'caption', 'size') !default;
+$bottom-nav-btn-font-size: map-metro-get($headings, 'label-1', 'size') !default;
 
 .#{$prefix}bottom-navigation {
   bottom: 0;
@@ -9,13 +9,12 @@ $bottom-nav-btn-font-size: map-metro-get($headings, 'caption', 'size') !default;
   justify-content: center;
   width: 100%;
   height: $bottom-nav-height;
-
-
   background-color: var(--color-sheet);
-  color: var(--color-text-primary);
+  color: var(--color-on-sheet);
+  @include typography($headings, 'body-3');
 
   .router-link-exact-active {
-    color: var(--color-one) !important
+    color: var(--color-one)
   }
 
   .#{$prefix}btn {

package/components/bar/scss/toolbar.scss

@@ -2,17 +2,19 @@
 
 .#{$prefix}toolbar {
   flex: 1 1 auto;
+  background-color: var(--color-sheet);
+  color: var(--color-on-sheet);
 
   .toolbar-mobile {
-    .toolbar-close{
+    .toolbar-close {
       width: 40px;
       height: 40px;
       position: absolute;
       transition: 2s all map-get($transition, 'swing');
-      @include rtl(){
+      @include rtl() {
         right: -40px;
       }
-      @include ltr(){
+      @include ltr() {
         left: -40px;
       }
     }

package/components/breadcrumb/style.scss

@@ -12,7 +12,7 @@
 
 
   .breadcrumb-divider, .breadcrumb-item-disabled, .#{$prefix}icon {
-    color: var(--color-disabled)
+    color: var(--color-border)
   }
 
 

package/components/button/index.vue

@@ -22,14 +22,15 @@
 
 <script>
 import './style.scss'
-import { roots } from '../../tools/rootable'
+import {roots} from '../../tools/rootable'
+
 export default {
   name: 'r-btn',
   mixins: [roots],
   props: {
     tag: {
       type: String,
-      default: 'span'
+      default: 'button'
     },
     size: {
       type: String,
@@ -89,8 +90,7 @@ export default {
         c += ' btn-tile'
       }
       if (this.disabled) {
-        c += ' btn-disabled'
-        c += ' disabled-text'
+        c += ` btn-disabled`
       }
       if (this.readonly) {
         c += ' btn-readonly'

package/components/button/style.scss

@@ -58,37 +58,36 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   vertical-align: middle;
   white-space: nowrap;
 
-
-  &.btn-disabled {
-    color: var(--color-disabled) !important;
-
-    .btn-loading {
-      color: var(--color-disabled) !important
-    }
-
-    &:not(.btn-text):not(.btn-outlined) {
-      background-color: var(--color-focused) !important
-    }
-  }
-
   &:not(.btn-text):not(.btn-outlined) {
-    background-color: var(--color-sheet);
+    background-color: var(--color-sheet-container-low);
+    color: var(--color-on-sheet);
   }
 
   &.btn-outlined.btn-text {
-    border-color: var(--color-divider)
+    border-color: var(--color-border)
   }
 
 
   @include states();
 
+  &.btn-disabled {
+    @include disable-states();
+
+    &:not(.btn-text):not(.btn-outlined) {
+      background-color: var(--color-#{map-metro-get($states, 'disabled','state','color')}) !important;
+    }
+
+    &.btn-text, &.btn-outlined {
+      &::before {
+        opacity: 0 !important;
+      }
+    }
+  }
+
   @include ltr() {
     letter-spacing: $btn-letter-spacing;
   }
 
-  &.btn-disabled {
-    pointer-events: none;
-  }
 
   &.btn-readonly {
     pointer-events: none;
@@ -109,10 +108,6 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
     background-color: currentColor
   }
 
-  &:not(.btn-disabled) {
-    will-change: box-shadow
-  }
-
   &:not(.btn-round) {
     @each $name, $size in $btn-sizes {
       $p: div($size, 2.25);
@@ -223,11 +218,6 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   box-shadow: none !important
 }
 
-.btn-disabled {
-  box-shadow: none;
-  pointer-events: none
-}
-
 .btn-icon,
 .btn-fab {
   min-height: 0;
@@ -351,8 +341,8 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 
 .#{$prefix}button-group {
   position: relative;
-  color: inherit;
-  background-color: var(--color-sheet);
+  color: var(--color-on-sheet);;
+  background-color: var(--color-sheet-low);
 
   @include states();
 

package/components/calendar/index.vue

@@ -111,7 +111,7 @@ export default {
     year: Number,
     month: Number,
   },
-  emits:['change','select'],
+  emits: ['change', 'select'],
   data() {
     return {
       tab: 'day',
@@ -322,33 +322,34 @@ export default {
   position: relative;
   display: inline-block;
   font-size: 10px;
-  color: #303030;
   overflow-x: auto;
   max-width: 100%;
-    .cell, .headCell {
-      border: 1px solid var(--color-border);
-    }
-    .cell {
-      &.today {
-        color: var(--color-one);
 
-        .cellContent {
-          border: solid 1px var(--color-one);
-        }
-      }
+  .cell, .headCell {
+    border: 1px solid var(--color-border);
+  }
 
-      &.selectable:hover {
-        .cellContent {
-          border: solid 1px var(--color-one);
-        }
-      }
+  .cell {
 
+    &.today {
+      .cellContent {
+        border: solid 1px var(--color-one);
+      }
     }
-    .cell.disabled {
-      background-color: var(--color-disabled);
-      opacity: 0.5;
+
+    &.selectable:hover {
+      .cellContent {
+        border: solid 1px var(--color-one);
+      }
     }
 
+  }
+
+  .cell.disabled {
+    background-color: var(--color-border);
+    opacity: 0.3;
+  }
+
 
   .table {
     width: 100%;

package/components/card/style.scss

@@ -71,11 +71,9 @@
   transition: box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1);
   @include elevation('md');
   border-radius: map_get($borders, 'md');
-
-
-  background-color: var(--color-sheet);
-  border-color: var(--color-sheet);
-  color: var(--color-text-primary);
+  background-color: var(--color-sheet-container-low);
+  border-color: var(--color-sheet-container-low);
+  color: var(--color-on-sheet);
 
 
   &-tile {

package/components/chat/chatInput.vue

@@ -37,7 +37,7 @@
         <r-icon v-html="$r.icons.send"></r-icon>
       </r-btn>
       <br>
-      <span class="caption color-error-text" v-if="remain<30">{{ remain }}</span>
+      <span v-if="remain<30" class="label-1 color-error-text">{{ remain }}</span>
     </div>
     <input accept="*"
            @change="addFile()"
@@ -118,7 +118,8 @@ export default {
   display: flex;
 
   box-shadow: black 0px 8px 15px;
-  background: var(--color-background-two);
+  background: var(--color-sheet-container);
+  color: var(--color-on-sheet);
   border-top: 1px solid var(--color-border);
 
   .chat-input {

package/components/chat/chatMsg.vue

@@ -18,7 +18,7 @@
                             'in-line-btm':i===message.list.length-1&&message.list.length>1
                  }">
         <div class="message-text body-1">
-          <div class="message-username subtitle-2" v-if="!isMe">{{ user.name }}
+          <div v-if="!isMe" class="message-username title-3">{{ user.name }}
           </div>
           <div v-if="msg.type==='file'" @click="$helper.download('/'+msg.link)">
             <div class="mx-n2 mt-n1" v-if="isImg(msg.link)">
@@ -32,7 +32,7 @@
             </div>
           </div>
           <div v-html="msg.content"></div>
-          <div class="message-info text-end caption">
+          <div class="message-info text-end label-1">
             {{ msg.timestamp }}
           </div>
         </div>
@@ -170,7 +170,7 @@ export default {
       height: 30px;
       border-radius: 50%;
 
-      background-color: var(--color-background-two);
+      background-color: var(--color-sheet);
 
       position: absolute;
       top: -15px;

package/components/chat/index.vue

@@ -110,6 +110,7 @@ export default {
   flex-direction: column;
   align-items: stretch;
   overflow: hidden;
-  background: var(--color-background-two);
+  background: var(--color-sheet);
+  color: var(--color-on-sheet);
 }
 </style>

package/components/chip/index.vue

@@ -43,7 +43,7 @@ export default {
         c += ' chip-selectable'
       }
       if (this.modelValue) {
-        c += ' chip-active ps-0 color-one'
+        c += ' chip-active ps-0'
       }
 
       if (this.close) {

package/components/chip/style.scss

@@ -53,16 +53,29 @@ $icon-sizes: (
   transition-duration: $chip-transition-duration;
   transition-timing-function: $chip-transition-fn;
   vertical-align: middle;
-
-
-  border-color: var(--color-divider);
+  border-color: var(--color-border);
 
   &:not(.chip-active) {
-    background: #e0e0e0;
+    background: var(--color-sheet-container-low);
+    color: var(--color-on-sheet);
   }
 
   @include states();
 
+  &.chip-disabled {
+    @include disable-states();
+
+    &:not(.chip-text):not(.chip-outlined) {
+      background-color: var(--color-#{map-metro-get($states, 'disabled','state','color')}) !important;
+    }
+
+    &.btn-text, &.btn-outlined {
+      &::before {
+        opacity: 0 !important;
+      }
+    }
+  }
+
   &:before {
     background-color: currentColor;
     bottom: 0;
@@ -108,18 +121,19 @@ $icon-sizes: (
   }
 
   &.chip-active {
+    background-color: var(--color-one);
+    color: var(--color-on-one);
+
+    .chip-close {
+      color: var(--color-on-one);
+    }
+
     .#{$prefix}icon {
       color: inherit;
       padding: 0 3px;
     }
   }
 
-  &.chip-disabled {
-    opacity: .4;
-    pointer-events: none;
-    user-select: none;
-  }
-
   &.chip-label {
     border-radius: $chip-label-border-radius !important
   }

package/components/codeEditor/index.vue

@@ -2,7 +2,7 @@
   <div :class="`${$r.prefix}code-editor`">
     <div class="code-action text-right">
       <r-btn
-          class="image-copy"
+          class="color-white-text"
           icon
           text
           @click.prevent="$helper.copy($refs.codeView.innerText)"
@@ -10,18 +10,18 @@
         <r-icon v-html="$r.icons.copy"></r-icon>
       </r-btn>
       <r-btn
-          class="image-copy"
+          class="color-white-text"
           icon
           text
           @click.prevent="pretty"
       >
         P
       </r-btn>
-      <r-btn v-if="show === 'code' && runnable" text @click="show = 'run'">
+      <r-btn v-if="show === 'code' && runnable" class="color-white-text" text @click="show = 'run'">
         run
         <r-icon v-html="$r.icons.play" exact></r-icon>
       </r-btn>
-      <r-btn v-if="show === 'run'" text @click="show = 'code'">
+      <r-btn v-if="show === 'run'" class="color-white-text" text @click="show = 'code'">
         <r-icon v-html="$r.icons.code_tags" exact></r-icon>
       </r-btn>
     </div>
@@ -137,6 +137,7 @@ export default {
   background-color: #15212e;
   color: #fff;
   padding: 10px;
+  font-size: 14px;
 
   .code-script,
   .code-template {

package/components/confirm/index.vue

@@ -4,9 +4,9 @@
       <r-container class="container-fluid">
         <r-row>
           <r-col class="col-12 text-center">
-             <h2 class="display-5">
-            {{title||$t('confirm_title','renusify')}}
-          </h2>
+             <h2 class="title-1">
+               {{ title || $t('confirm_title', 'renusify') }}
+             </h2>
             <r-divider class="my-3 color-warning"></r-divider>
           </r-col>
           <r-col class="col-12">

package/components/container/style.scss

@@ -70,7 +70,7 @@ $divider-inset-margin: 72px !default;
   max-height: 0px;
   transition: inherit;
 
-  border-top: solid thin var(--color-divider);
+  border-top: solid thin var(--color-border-low);
 
   &.divider-inset:not(.divider-vertical) {
     max-width: calc(100% - #{$divider-inset-margin});

package/components/form/checkbox.vue

@@ -16,7 +16,7 @@
                                v-html="$r.icons.check" exact></r-icon>
                    </transition>
             </span>
-        <span class="ms-2 color-primary-text" @click="emit">
+        <span class="ms-2" @click="emit">
                 <span class="color-error-text" v-if="isRequired">*</span>
           <slot name="label">{{ label }}</slot>
             </span>
@@ -72,7 +72,7 @@ emits:['update:modelValue'],
   cursor: pointer;
 
   .checkbox-input {
-    border: 1px solid var(--color-border)
+    border: 1px solid var(--color-on-sheet-low)
   }
 
   .#{$prefix}icon {
@@ -145,6 +145,7 @@ emits:['update:modelValue'],
 
   .checkbox-select {
     background-color: currentColor;
+    border: 0;
   }
 }
 </style>

package/components/form/colorPicker/index.vue

@@ -2,13 +2,13 @@
   <r-input class="mt-5" :model-value="modelValue" hide labelControlClass="label-active"
            :class="`${$r.prefix}color-picker`">
     <div @click="open=true" class="shower" :style="{'background-color':modelValue||'#ffffff'}"></div>
-    <r-modal v-model="open" maxWidth="260px" :closebtn="false" closable>
+    <r-modal v-model="open" :closebtn="false" class="color-picker-modal" closable maxWidth="260px">
       <picker :color="modelValue" @changeColor="emit"></picker>
       <div class="d-flex h-space-between">
-        <r-btn class="color-success flex-grow-1 me-1" @click.prevent="close()">
+        <r-btn class="color-success flex-grow-1 me-1" outlined @click.prevent="close()">
           <r-icon v-html="$r.icons.check" exact></r-icon>
         </r-btn>
-        <r-btn class=" color-error flex-grow-1 ms-1" @click.prevent="clear()" exact>
+        <r-btn class=" color-error flex-grow-1 ms-1" exact outlined @click.prevent="clear()">
           <r-icon v-html="$r.icons.delete"></r-icon>
         </r-btn>
       </div>
@@ -62,5 +62,10 @@ export default {
     cursor: pointer;
     border: 1px solid black;
   }
+
+  .color-picker-modal {
+    background-color: var(--color-sheet-container-high);
+    color: var(--color-on-sheet);
+  }
 }
 </style>

package/components/form/colorPicker/picker.vue

@@ -170,8 +170,6 @@ export default {
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
 
-  background: #f7f8f9;
-
   canvas {
     vertical-align: top;
   }
@@ -212,13 +210,11 @@ export default {
 
 
     .name {
-      color: #999;
-      background: #e7e8e9;
+      background: var(--color-sheet-container)
     }
 
     .value {
-      color: #666;
-      background: #eceef0;
+      background: var(--color-sheet)
     }
   }
 }

package/components/form/datePicker/index.vue

@@ -375,7 +375,8 @@ export default {
   position: relative;
   display: inline-block;
   font-size: 10px;
-  color: #303030;
+  color: var(--color-on-sheet);
+  background-color: var(--color-sheet-container-high);
 
   .cell {
     &.today {
@@ -388,8 +389,7 @@ export default {
 
     &.selected {
       .cellContent {
-
-        color: #fff;
+        color: var(--color-on-one);
         background: var(--color-one);
 
       }
@@ -398,7 +398,7 @@ export default {
     &.selectable:hover {
       .cellContent {
 
-        color: #fff;
+        color: var(--color-on-one);
         background: var(--color-one);
 
       }
@@ -439,7 +439,7 @@ export default {
 
     font-size: 1.3em;
     font-weight: normal;
-    color: #848484;
+    color: var(--color-on-sheet-low);
 
   }
 
@@ -456,7 +456,7 @@ export default {
   }
 
   .cell.outOfRange {
-    color: #c7c7c7;
+    color: var(--color-sheet-low);
   }
 
   .cell.selectable {
@@ -466,9 +466,7 @@ export default {
   }
 
   .cell.disabled {
-
-    opacity: 0.5;
-
+    opacity: 0.38;
   }
 
 }