renusify 2.0.0 → 2.0.1

package/components/app/style.scss

@@ -3,8 +3,8 @@
 .#{$prefix}app {
   display: flex;
 
-  background: var(--color-sheet-container-lowest);
-  color: var(--color-on-sheet-container-lowest);
+  background: var(--color-sheet);
+  color: var(--color-on-sheet);
 
 
   &.app-rtl {

package/components/bar/bottomNavigationCircle.vue

@@ -44,7 +44,7 @@ export default {
   z-index: map_get($z-index, "default");
   background-color: var(--color-sheet);
   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

@@ -9,13 +9,12 @@ $bottom-nav-btn-font-size: map-metro-get($headings, 'label-1', 'size') !default;
   justify-content: center;
   width: 100%;
   height: $bottom-nav-height;
-
-
   background-color: var(--color-sheet);
   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/button/style.scss

@@ -59,7 +59,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
   white-space: nowrap;
 
   &:not(.btn-text):not(.btn-outlined) {
-    background-color: var(--color-sheet);
+    background-color: var(--color-sheet-container-low);
     color: var(--color-on-sheet);
   }
 
@@ -342,7 +342,7 @@ $btn-transition: opacity 0.2s map-get($transition, 'ease-in-out') !default;
 .#{$prefix}button-group {
   position: relative;
   color: var(--color-on-sheet);;
-  background-color: var(--color-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,32 +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 {
-        .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-border);
-      opacity: 0.3;
+
+    &.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,8 +71,8 @@
   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);
+  background-color: var(--color-sheet-container-low);
+  border-color: var(--color-sheet-container-low);
   color: var(--color-on-sheet);
 
 

package/components/chat/chatInput.vue

@@ -119,6 +119,7 @@ export default {
 
   box-shadow: black 0px 8px 15px;
   background: var(--color-sheet-container);
+  color: var(--color-on-sheet);
   border-top: 1px solid var(--color-border);
 
   .chat-input {

package/components/chat/chatMsg.vue

@@ -170,7 +170,7 @@ export default {
       height: 30px;
       border-radius: 50%;
 
-      background-color: var(--color-sheet-container);
+      background-color: var(--color-sheet);
 
       position: absolute;
       top: -15px;

package/components/chat/index.vue

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

package/components/chip/style.scss

@@ -56,8 +56,8 @@ $icon-sizes: (
   border-color: var(--color-border);
 
   &:not(.chip-active) {
-    background: var(--color-two-container);
-    color: var(--color-on-two-container);
+    background: var(--color-sheet-container-low);
+    color: var(--color-on-sheet);
   }
 
   @include states();
@@ -124,6 +124,10 @@ $icon-sizes: (
     background-color: var(--color-one);
     color: var(--color-on-one);
 
+    .chip-close {
+      color: var(--color-on-one);
+    }
+
     .#{$prefix}icon {
       color: inherit;
       padding: 0 3px;

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-border);
+  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

@@ -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,9 +170,6 @@ export default {
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   z-index: 1;
 
-  background: var(--color-sheet-container-lowest);
-  color: var(--color-on-sheet-container-lowest);
-
   canvas {
     vertical-align: top;
   }
@@ -213,12 +210,10 @@ export default {
 
 
     .name {
-      color: var(--color-on-sheet-container);
       background: var(--color-sheet-container)
     }
 
     .value {
-      color: var(--color-on-sheet);
       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);
 
       }
@@ -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 {

package/components/form/input.vue

@@ -306,26 +306,33 @@ export default {
 
   &:not(.input-disabled) {
     input,
-    textarea, .label, .#{$prefix}icon, .#{$prefix}btn {
+    textarea {
       color: var(--color-on-sheet)
     }
   }
 
+  &:not(.input-disabled) {
+    .label, .#{$prefix}icon, .#{$prefix}btn {
+      color: var(--color-on-sheet-low)
+    }
+  }
+
   input::placeholder,
   textarea::placeholder {
-    color: var(--color-on-three-container)
+    color: var(--color-on-sheet-low)
   }
 
   &.input-disabled {
+    opacity: 0.38;
+    pointer-events: none;
+
     * {
-      color: var(--color-border)
+      color: var(--color-on-sheet)
     }
 
-    pointer-events: none;
-  }
-
-  .input-control {
-    border: solid 1px var(--color-border)
+    .input-control {
+      background-color: var(--color-sheet-container);
+    }
   }
 
 
@@ -368,6 +375,8 @@ export default {
     align-items: flex-start;
     justify-content: center;
     position: relative;
+    border: solid 1px var(--color-sheet-low);
+    background-color: var(--color-sheet-container-highest);
 
     .after-icon {
       position: absolute;
@@ -410,6 +419,7 @@ export default {
       border: unset !important;
       height: auto;
       padding: 0;
+      background-color: unset !important;
     }
   }
 

package/components/form/inputTel/index.vue

@@ -155,7 +155,7 @@ export default {
 
   .btn-country {
     width: 120px;
-    border-color: var(--color-border)
+    border-color: var(--color-sheet-low)
 
   }
 

package/components/form/json/JsonView.vue

@@ -87,10 +87,10 @@ export default {
 
 .#{$prefix}json-view {
   @include rtl() {
-    border-right: 1px solid var(--color-border);
+    border-right: 1px solid var(--color-sheet-low);
   }
   @include ltr() {
-    border-left: 1px solid var(--color-border);
+    border-left: 1px solid var(--color-sheet-low);
   }
 }
 </style>

package/components/form/json/index.vue

@@ -210,7 +210,7 @@ export default {
 .#{$prefix}json-input {
   textarea {
     outline: none;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-sheet-low);
   }
 
   .state-error {
@@ -236,9 +236,9 @@ export default {
 
     textarea {
       &::selection {
-        background-color: var(--color-two);
-        -webkit-text-fill-color: var(--color-two-text);
-        color: var(--color-two-text);
+        background-color: var(--color-one);
+        -webkit-text-fill-color: var(--color-one-text);
+        color: var(--color-one-text);
       }
 
       padding: 12px;

package/components/form/radioInput.vue

@@ -74,7 +74,7 @@ export default {
   cursor: pointer;
 
   .radio-input-item {
-    border: 1px solid var(--color-border)
+    border: 1px solid var(--color-on-sheet-low)
   }
 
   .#{$prefix}icon {

package/components/form/range.vue

@@ -252,7 +252,7 @@ export default {
         @include ltr() {
           transform: translate(-2px, -2px);
         }
-        border: 3px solid var(--color-two) !important;
+        border: 3px solid var(--color-one) !important;
       }
     }
 
@@ -315,7 +315,7 @@ export default {
         @include ltr {
           transform: translate(-2px, -2px);
         }
-        border: 3px solid var(--color-two) !important;
+        border: 3px solid var(--color-one) !important;
       }
     }
 

package/components/form/rating.vue

@@ -59,7 +59,7 @@ $btn-sizes: (
   transition: 1s $primary-transition;
 
   * {
-    color: var(--color-border);
+    color: var(--color-on-sheet-low);
   }
 
   .color-rating * {

package/components/form/text-editor/style.scss

@@ -4,7 +4,7 @@
 
 
   .editor-content {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-sheet-low);
   }
 
   @include typography($headings, 'body-2');

package/components/form/timepicker/index.vue

@@ -94,6 +94,8 @@ export default {
 <style lang="scss">
 .modal-timepicker {
   .modal-mini {
+    background-color: var(--color-sheet-container-high);
+    color: var(--color-on-sheet);
     max-width: 285px !important;
   }
 }

package/components/form/unit-input.vue

@@ -86,7 +86,7 @@ emits:['update:modelValue'],
   }
 
 
-  --c-unit: var(--color-border);
+  --c-unit: var(--color-sheet-low);
 
 
   .select-unit {

package/components/list/style.scss

@@ -11,20 +11,6 @@ $item-height: 48px;
   position: relative;
   max-width: 100%;
 
-  .list-item {
-    &:hover {
-      background-color: var(--color-sheet-container);
-      color: var(--color-on-sheet-container);
-    }
-
-    &.list-item-active {
-      background-color: var(--color-one-container);
-      color: var(--color-on-one-container)
-    }
-
-
-  }
-
   &.list-subheader {
     align-items: center;
     display: flex;
@@ -49,12 +35,16 @@ $item-height: 48px;
     position: relative;
     text-decoration: none;
     margin-bottom: 4px;
-
     &:hover {
       cursor: pointer;
+      background-color: var(--color-sheet-container);
+      color: var(--color-on-sheet);
     }
 
     &.list-item-active {
+      background-color: var(--color-one-container);
+      color: var(--color-on-one-container);
+
       .#{$prefix}icon {
         color: inherit;
       }

package/components/map/index.vue

@@ -9,7 +9,7 @@
       <r-search-box
           :label="$t('search','renusify')"
           :notFoundMsg="$t('map_not_found','renusify')"
-          inputClass="sheet"
+          inputControlClass="sheet"
           no-overlay
           query="q"
           url="https://nominatim.openstreetmap.org/search.php?polygon_geojson=0&accept-language=fa&countrycodes=IR&format=jsonv2"

package/components/map/route.vue

@@ -578,7 +578,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      color: var(--color-link);
+      color: var(--color-one);
     }
   }
 }

package/components/modal/style.scss

@@ -25,7 +25,7 @@
   outline: none;
 
   .modal-content {
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-sheet-container-low);
   }
 
 

package/components/progress/line.vue

@@ -1,41 +1,40 @@
 <template>
     <div :class="{
         [`${$r.prefix}progress`]:true,
-        'progress-outlined':outlined,
         'progress-rounded':rounded,
         [`size-${size}`]:true
     }">
-        <span class="label" v-if="showPercent">{{ modelValue }} %</span>
-        <div class="progress-container" :class="{'progress-background':showBackground}">
-            <div :class="classes" :style="[styles,progressStyle]"></div>
-        </div>
+      <span class="label" v-if="showPercent">{{ modelValue }} %</span>
+      <div :class="{'progress-background':showBackground,'progress-outlined':outlined}" class="progress-container">
+        <div :class="classes" :style="[styles,progressStyle]"></div>
+      </div>
     </div>
 </template>
 
 <script>
-    import './style.scss'
+import './style.scss'
 
-    export default {
-      name: 'pline',
-      props: {
-        modelValue: [Number, String],
-        color: String,
-        progressStyle: [String, Object, Array],
-        showPercent: Boolean,
-        outlined: Boolean,
-        rounded: Boolean,
-        showBackground: Boolean,
-        size: {
-          type: String,
-            default: 'small',
-            validator: function (value) {
-              return ['small', 'medium', 'large', 'x-large'].indexOf(value) !== -1
-            }
-            }
-        },
-        computed: {
-            isIndeterminate() {
-                if (this.modelValue !== undefined) {
+export default {
+  name: 'pline',
+  props: {
+    modelValue: [Number, String],
+    color: String,
+    progressStyle: [String, Object, Array],
+    showPercent: Boolean,
+    outlined: Boolean,
+    rounded: Boolean,
+    showBackground: Boolean,
+    size: {
+      type: String,
+      default: 'small',
+      validator: function (value) {
+        return ['small', 'medium', 'large', 'x-large'].indexOf(value) !== -1
+      }
+    }
+  },
+  computed: {
+    isIndeterminate() {
+      if (this.modelValue !== undefined) {
                     return !(this.modelValue >= 0 && this.modelValue <= 100)
                 } else {
                     return true

package/components/progress/style.scss

@@ -85,8 +85,8 @@ $progress-circle-overlay-transition: all .6s ease-in-out !default;
 .#{$prefix}progress {
   text-align: center;
 
-  &.progress-outlined {
-    color: var(--color-border)
+  .progress-outlined {
+    color: var(--color-sheet-container-highest)
   }
 
   .line-determinate {
@@ -98,7 +98,7 @@ $progress-circle-overlay-transition: all .6s ease-in-out !default;
   }
 
     .progress-background {
-      background-color: var(--color-sheet-container);
+      background-color: var(--color-sheet-container-highest);
     }
 
   &.progress-outlined {

package/components/searchBox/index.vue

@@ -234,11 +234,11 @@ export default {
       border-radius: 0;
       min-height: 30px;
       @include ltr() {
-        border-right: 1px solid var(--color-border) !important;
+        border-right: 1px solid var(--color-sheet-container-low) !important;
       }
 
       @include rtl() {
-        border-left: 1px solid var(--color-border) !important;
+        border-left: 1px solid var(--color-sheet-container-low) !important;
       }
     }
 

package/components/table/style.scss

@@ -10,7 +10,7 @@ $data-table-regular-header-height: 38px !default;
 
     .table-wrapper {
       background-color: var(--color-sheet-container-lowest);
-      color: var(--color-on-sheet-container-lowest);
+      color: var(--color-on-sheet);
     }
     .table-svg-path {
       fill: var(--color-sheet);
@@ -53,7 +53,7 @@ $data-table-regular-header-height: 38px !default;
         &:hover {
           td:first-child {
             background: var(--color-sheet-container);
-            color: var(--color-on-sheet-container)
+            color: var(--color-on-sheet)
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",