renusify 1.4.8 → 2.0.0

package/components/form/rating.vue

@@ -57,7 +57,10 @@ $btn-sizes: (
   max-width: 100%;
   white-space: nowrap;
   transition: 1s $primary-transition;
-  color: var(--color-disabled);
+
+  * {
+    color: var(--color-border);
+  }
 
   .color-rating * {
     color: #fbc02d !important;

package/components/form/select.vue

@@ -16,7 +16,7 @@
             :class="{'px-0':!multiple}"
             :close="multiple&&!textChip"
             :text="textChip || !multiple"
-            class="my-0 ms-0 color-primary-text"
+            class="my-0 ms-0"
             selectable
             @update:modelValue="handleChip($event,key)">
           {{ item ? item[text] : '' }}

package/components/form/switch.vue

@@ -2,9 +2,6 @@
     <r-input :class="`${$r.prefix}switch`" :modelValue="lazyValue" hide>
         <div class="switch-container" :class="{'switch-active':modelValue}">
             <div class="switch-label me-1 mt-1"
-                 :class="{
-                'color-primary-text':label2?modelValue:!modelValue
-            }"
             >{{label}}
             </div>
             <div class="switch-holder" @click="toggle()">
@@ -12,9 +9,6 @@
                 <div class="switch-dot"></div>
             </div>
             <div class="switch-label ms-1 mt-1"
-                 :class="{
-                'color-primary-text':label2?!modelValue:modelValue
-            }"
                  v-if="label2">{{label2}}</div>
         </div>
     </r-input>
@@ -87,7 +81,7 @@ emits:['update:modelValue','change'],
     width: 100%;
     height: 100%;
     border-radius: 10px;
-    background-color: var(--color-disabled);
+    background-color: var(--color-sheet-container);
   }
 
   .switch-dot {

package/components/form/text-editor/index.vue

@@ -41,9 +41,8 @@
                                 @update:model-value="addClass"></r-select-input>
             </r-col>
             <r-col class="col-12 ltr">
-                <span class="cursor-pointer" v-for="(item,i) in currentPath" :key="i" @click="borderd(item)">
-                    <span class="color-disabled-text" v-if="i===currentPath.length-1">{{item.nodeName}} </span>
-                    <span :class="{'color-error-text':selectElm===item}" v-else>{{item.nodeName}} > </span>
+                <span v-for="(item,i) in currentPath" :key="i" class="cursor-pointer" @click.prevent="borderd(item)">
+                    <span :class="{'color-one-text':selectElm===item}">{{ item.nodeName }} > </span>
                 </span>
             </r-col>
             <r-col class="col-12">
@@ -259,16 +258,19 @@ export default {
                   items: [{text: 'HI', value: 'display-1'},
                     {text: 'HI', value: 'display-2'},
                     {text: 'HI', value: 'display-3'},
-                    {text: 'HI', value: 'display-4'},
-                    {text: 'HI', value: 'display-5'},
-                    {text: 'HI', value: 'title'},
-                    {text: 'HI', value: 'subtitle-1'},
-                    {text: 'HI', value: 'subtitle-2'},
-                    {text: 'HI', value: 'overline'},
+                    {text: 'HI', value: 'headline-1'},
+                    {text: 'HI', value: 'headline-2'},
+                    {text: 'HI', value: 'headline-3'},
+                    {text: 'HI', value: 'title-1'},
+                    {text: 'HI', value: 'title-2'},
+                    {text: 'HI', value: 'title-3'},
+                    {text: 'HI', value: 'body-1'},
                     {text: 'HI', value: 'body-2'},
-                            {text: 'HI', value: 'body-1'},
-                            {text: 'HI', value: 'caption'},
-                        ]
+                    {text: 'HI', value: 'body-3'},
+                    {text: 'HI', value: 'label-1'},
+                    {text: 'HI', value: 'label-2'},
+                    {text: 'HI', value: 'label-3'},
+                  ]
                     },
                     'header': {
                       icon: '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M3 4h2v6h4V4h2v14H9v-6H5v6H3V4m10 4h2.31l.32-3h2l-.32 3h2l.32-3h2l-.32 3H23v2h-1.9l-.2 2H23v2h-2.31l-.32 3h-2l.32-3h-2l-.32 3h-2l.32-3H13v-2h1.9l.2-2H13V8m4.1 2l-.2 2h2l.2-2h-2Z"/></svg>',
@@ -284,8 +286,6 @@ export default {
                     'color': {
                       icon: '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M19 11.5s-2 2.17-2 3.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-1.33-2-3.5-2-3.5M5.21 10L10 5.21L14.79 10m1.77-1.06L7.62 0L6.21 1.41l2.38 2.38l-5.15 5.15c-.59.56-.59 1.53 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.59.59-1.56 0-2.12Z"/></svg>',
                       items: [
-                        {text: 'color', value: 'color-primary-text'},
-                        {text: 'color', value: 'color-secondary-text'},
                         {text: 'color', value: 'color-disabled-text'},
                         {text: 'color', value: 'color-one-text'},
                         {text: 'color', value: 'color-two-text'},
@@ -370,7 +370,7 @@ export default {
               return
             }
             this.selectElm = el
-                el.style.border = '1px solid red'
+            el.style.border = '1px solid var(--color-one)'
             },
             bordered() {
                 const a = this.getSelection()

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

@@ -3,14 +3,14 @@
 .#{$prefix}text-editor {
 
 
-    .editor-content {
-      border: 1px solid var(--color-border);
-    }
+  .editor-content {
+    border: 1px solid var(--color-border);
+  }
 
-  @include typography($headings, 'body-1');
+  @include typography($headings, 'body-2');
 
   a {
-    color: var(--color-link)
+    color: var(--color-one)
   }
 
   img {
@@ -18,7 +18,7 @@
   }
 
   .editor-content {
-    color: var(--color-text-primary);
+    color: var(--color-on-sheet);
     transition: all .3s ease;
     min-height: 200px;
     max-height: 60vh;

package/components/form/timepicker/timepicker.vue

@@ -554,8 +554,8 @@ export default {
   }
 
   .meridiem-active {
-    background-color: var(--color-timepicker);
-    color: #fff;
+    background-color: var(--color-three-container);
+    color: var(--color-on-three-container);
   }
 
   .text-meridiem > .time-meridiem {
@@ -683,8 +683,7 @@ export default {
 
 
   .number-disabled {
-    pointer-events: none;
-    color: var(--color-disabled)
+    @include disable-states()
   }
 }
 </style>

package/components/form/unit-input.vue

@@ -78,7 +78,7 @@ emits:['update:modelValue'],
 
 .#{$prefix}unit-input {
   .input-shadow, .input-shadow * {
-    color: var(--color-disabled) !important
+    @include disable-states()
   }
 
   input {
@@ -94,7 +94,7 @@ emits:['update:modelValue'],
     overflow-x: clip;
 
     * {
-      font-size: map-metro-get($headings, 'overline', 'size') !important;
+      font-size: map-metro-get($headings, 'label-3', 'size') !important;
     }
 
     .input-control {

package/components/formCreator/index.vue

@@ -1,7 +1,7 @@
 <template>
   <r-card v-if="!autoSend" :class="$r.prefix+'form-creator'" class="overflow-auto">
     <r-container>
-      <h1 v-if="title" class="title">{{ title }}</h1>
+      <h1 v-if="title" class="title-1">{{ title }}</h1>
       <r-form ref="form" v-model="valid" @submit.prevent="save">
         <r-row>
           <template :key="key" v-for="(item,key) in options">

package/components/icon/style.scss

@@ -5,10 +5,7 @@
   vertical-align: -.5rem;
 
   &.icon-disabled {
-    pointer-events: none;
-    opacity: .6;
-    color: var(--color-disabled) !important
-
+    @include disable-states();
   }
 
   @include rtl() {

package/components/img/index.vue

@@ -3,7 +3,7 @@
         [$r.prefix+'img']:true,
         'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hoverTitle':hoverTitle}"
        ref="rImg">
-    <div v-if="hoverTitle" class="title color-white-text img-title w-full"
+    <div v-if="hoverTitle" class="title-3 color-white-text img-title w-full"
          :class="{
             'title-hs':titleHs,
             'title-hc':titleHc,

package/components/img/svgImg.vue

@@ -28,9 +28,11 @@ export default {
           const el = document.createElement('div')
           el.innerHTML = d
           let svg = el.querySelector('svg')
-          svg.setAttribute('width', that.size.width + 'px')
-          svg.setAttribute('height', that.size.height + 'px')
-          that.replace(svg)
+          if (svg) {
+            svg.setAttribute('width', that.size.width + 'px')
+            svg.setAttribute('height', that.size.height + 'px')
+            that.replace(svg)
+          }
         })
       })
     }

package/components/infinite/div.vue

@@ -20,9 +20,9 @@
                 </div>
 
             </r-col>
-            <r-col class="col-12 text-center title"
+            <r-col class="col-12 text-center title-1"
                    v-if="noItem"
-            >{{$t('no_item','renusify')}}
+            >{{ $t('no_item', 'renusify') }}
             </r-col>
         </r-row>
     </r-container>

package/components/infinite/index.vue

@@ -3,7 +3,7 @@
         <r-container full-width class="pa-0">
             <r-row class="v-center h-space-between" :class="color">
                 <r-col class="col-auto">
-                    <h3 class="title px-2">{{ title }}</h3>
+                    <h3 class="title-1 px-2">{{ title }}</h3>
                 </r-col>
                 <r-col class="col-auto">
                     <r-switch-input

package/components/infinite/page.vue

@@ -7,9 +7,9 @@
                          v-show="loading"
 
         ></r-progress-line>
-        <div class="text-center subtitle-1"
+        <div class="text-center title-2"
              v-if="noItem"
-        >{{noItemMsg}}
+        >{{ noItemMsg }}
         </div>
     </div>
 </template>

package/components/list/index.vue

@@ -2,7 +2,7 @@
     <div :class="classes">
       <div
           class="list-item h-space-between"
-          :class="{'list-item-active color-one-text':$helper.searchArray(list,text,item_value[text])!==false}"
+          :class="{'list-item-active':$helper.searchArray(list,text,item_value[text])!==false}"
           :key="item_key"
           @click.prevent="handle(item_value)"
           v-for="(item_value,item_key) in genItems"
@@ -52,7 +52,7 @@ export default {
                 return []
             },
             classes() {
-              let c = `${this.$r.prefix}list sheet sheet-tile`
+              let c = `${this.$r.prefix}list`
                 if (this.disabled) {
                     c += ' list-disabled'
                 }

package/components/list/style.scss

@@ -12,15 +12,19 @@ $item-height: 48px;
   max-width: 100%;
 
   .list-item {
-    &.list-item-active {
-      background-color: var(--color-sheet-active)
-      }
+    &:hover {
+      background-color: var(--color-sheet-container);
+      color: var(--color-on-sheet-container);
+    }
 
-      &:hover {
-        background-color: var(--color-sheet-hover)
-      }
+    &.list-item-active {
+      background-color: var(--color-one-container);
+      color: var(--color-on-one-container)
     }
 
+
+  }
+
   &.list-subheader {
     align-items: center;
     display: flex;

package/components/map/index.vue

@@ -25,7 +25,7 @@
     <r-btn
         v-if="meLocation"
         :loading="loading"
-        class="map-location color-white color-primary-text"
+        class="map-location color-white color-black-text"
         icon
         @click.prevent="showConfirm"
     >

package/components/map/route.vue

@@ -8,7 +8,7 @@
       <r-col :style="'height: '+height" class="overflow-y-auto col-12 sm-3">
         <div class="pa-2">
           <slot :distance="distance" :time="time" name="header">
-            <div class="title">{{ $helper.ifHas(modelValue, '------', 'summary', 'name') }}</div>
+            <div class="bodey-1">{{ $helper.ifHas(modelValue, '------', 'summary', 'name') }}</div>
             <r-divider class="my-3"></r-divider>
             <div>{{ time || '---' }}</div>
             <div>{{ distance || '0 km' }}</div>
@@ -18,7 +18,7 @@
               <div v-for="(point,i) in points"
                    :key="i" class="route-point px-2 py-1 my-2 br-lg text-end">
                 <div class="d-flex">
-                  <span class="mt-1 title">{{ pos(points_keys.indexOf(i)) }}</span>
+                  <span class="mt-1 bodey-3">{{ pos(points_keys.indexOf(i)) }}</span>
                   <r-spacer></r-spacer>
                   <r-btn v-if="editable && i!==points_keys[0]" icon text
                          @click.prevent="to(points_keys.indexOf(i),points_keys.indexOf(i)-1)">

package/components/menu/index.vue

@@ -157,7 +157,7 @@ export default {
       border: 1px solid var(--color-border);
 
       &-item:hover {
-        background-color: var(--color-sheet-hover);
+        background-color: var(--color-sheet-container-high);
       }
     }
 

package/components/notify/notification.vue

@@ -5,8 +5,8 @@
         <div v-if="show" :class="[status, 'notify-msg']" :style="{ width: width }">
             <slot>
               <div>
-                <h3 class="title"><b>{{ content.title }}</b></h3>
-                <p class="subtitle-1 ma-0">{{ content.text }}</p>
+                <h3 class="title-1"><b>{{ content.title }}</b></h3>
+                <p class="title-2 ma-0">{{ content.text }}</p>
               </div>
             </slot>
           <r-btn class="h-end" icon text @click.prevent.stop="hideMe">

package/components/progress/style.scss

@@ -86,19 +86,19 @@ $progress-circle-overlay-transition: all .6s ease-in-out !default;
   text-align: center;
 
   &.progress-outlined {
-    color: var(--color-divider)
+    color: var(--color-border)
   }
 
   .line-determinate {
-    background-color: var(--color-text-primary);
+    background-color: var(--color-on-sheet);
   }
 
   .line-indeterminate {
-    background-color: var(--color-text-primary);
+    background-color: var(--color-on-sheet);
   }
 
     .progress-background {
-      background-color: var(--color-divider);
+      background-color: var(--color-sheet-container);
     }
 
   &.progress-outlined {

package/components/searchBox/index.vue

@@ -191,7 +191,7 @@ export default {
     display: flex;
     align-items: center;
     border: solid 1px var(--color-border);
-    color: var(--color-text-primary);
+    color: var(--color-on-sheet);
     position: relative;
     border-radius: map-get($borders, "md");
 
@@ -207,7 +207,7 @@ export default {
     padding: 12px;
     max-width: 100%;
     min-width: 0px;
-    caret-color: var(--color-text-primary);
+    caret-color: var(--color-on-sheet);
   }
 
   .card-search {

package/components/table/crud/header.vue

@@ -179,7 +179,7 @@
                 </r-col>
             </r-row>
         </r-container>
-      <r-progress-line color="color-two" v-if="loading"></r-progress-line>
+      <r-progress-line v-if="loading" color="color-one"></r-progress-line>
         <r-confirm
                 hard
                 v-model="showConfirm"

package/components/table/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+      v-bind="$attrs"
       :class="{
         [`${$r.prefix}table`]:true,
         'table-editable':editable,
@@ -13,7 +14,7 @@
       <svg class="table-svg" height="18" width="18">
         <path class="table-svg-path" d="M 0 0 l 0 18 l 18 0 q -18 0 -18 -18"/>
       </svg>
-      <span class="color-info-text table-editable-icon px-2"
+      <span class="table-editable-icon px-2"
             @click.prevent="open_modal()">
                 <r-icon v-html="$r.icons.setting"></r-icon>
             </span>
@@ -57,7 +58,7 @@
                     class="tr-hidden">
                   <td :colspan="($helper.size(th)||th.length)">
                     <div v-for="(v,h) in hidden" :key="key+h" class="pa-2">
-                      <span class="title">{{ getText(h) }}: </span>
+                      <span class="title-1">{{ getText(h) }}: </span>
                       <span>{{ item[h] }}</span>
                     </div>
                   </td>
@@ -85,7 +86,7 @@
         >
           <r-col>
             <r-card class="pa-4 ma-1 d-flex h-space-between" tile>
-                <span class="title">
+                <span class="title-1">
                   <r-btn class="drag-btn" icon text>
                     <r-icon v-html="$r.icons.drag"></r-icon>
                   </r-btn>

package/components/table/style.scss

@@ -9,31 +9,31 @@ $data-table-regular-header-height: 38px !default;
   position: relative;
 
     .table-wrapper {
-      background-color: var(--color-sheet);
-      color: var(--color-text-primary);
+      background-color: var(--color-sheet-container-lowest);
+      color: var(--color-on-sheet-container-lowest);
     }
     .table-svg-path {
       fill: var(--color-sheet);
     }
     .table-editable-icon {
-      background-color: var(--color-sheet) !important;
-      color: var(--color-text-primary) !important;
+      background-color: var(--color-sheet);
+      color: var(--color-on-sheet);
     }
     &.table-fixed-header {
       thead th {
-        background: var(--color-sheet);
-        box-shadow: inset 0 -2px var(--color-divider)
+        box-shadow: inset 0 -2px var(--color-border)
       }
     }
 
     thead {
       tr {
         &:last-child th {
-          border-bottom: 1px solid var(--color-divider)
+          border-bottom: 1px solid var(--color-border)
         }
 
         th {
-          color: var(--color-text-secondary)
+          background-color: var(--color-sheet);
+          color: var(--color-on-sheet)
         }
       }
     }
@@ -41,16 +41,19 @@ $data-table-regular-header-height: 38px !default;
     &.table-fixed-first-columns {
       tr {
         th:first-child {
-          background: var(--color-sheet)
+          background: var(--color-sheet);
+          color: var(--color-on-sheet)
         }
 
         td:first-child {
-          background: var(--color-sheet)
+          background: var(--color-sheet);
+          color: var(--color-on-sheet)
         }
 
         &:hover {
           td:first-child {
-            background: var(--color-sheet-hover)
+            background: var(--color-sheet-container);
+            color: var(--color-on-sheet-container)
           }
         }
       }
@@ -60,7 +63,7 @@ $data-table-regular-header-height: 38px !default;
       tbody {
         tr:nth-child(2n):not(:hover) {
           td {
-            background: var(--color-sheet-active)
+            background: var(--color-sheet-container-low)
           }
         }
       }
@@ -69,23 +72,23 @@ $data-table-regular-header-height: 38px !default;
     tbody {
       tr {
         &:active {
-          background: var(--color-sheet-active)
+          background: var(--color-sheet-container)
         }
 
         &:hover {
-          background: var(--color-sheet-hover)
+          background: var(--color-sheet-container)
         }
       }
 
       tr:not(:last-child) {
         td {
-          border-bottom: 1px solid var(--color-divider)
+          border-bottom: 1px solid var(--color-border)
         }
       }
     }
 
     &.table-bordered .table-wrapper {
-      border: 1px solid var(--color-divider);
+      border: 1px solid var(--color-border);
       border-collapse: collapse;
     }
 

package/components/timeline/index.vue

@@ -39,7 +39,7 @@
               content: '';
               width: 1px;
               height: 40%;
-              border-right: 2px solid var(--color-divider);
+              border-right: 2px solid var(--color-border);
               position: absolute;
               bottom: -20%;
               z-index: 0;

package/components/tour/index.vue

@@ -2,23 +2,23 @@
   <teleport :to="`.${$r.prefix}app`">
     <div :style="style" class="tour-layer"></div>
     <transition name="slide-up" mode="out-in">
-      <div v-if="msg" ref="tourMsg" :style="style_msg" class="tour-msg display-4">
+      <div v-if="msg" ref="tourMsg" :style="style_msg" class="tour-msg headline-1">
         <r-container>
           <div v-html="$helper.cleanXss(steps[run].msg)"></div>
           <div class="d-flex">
             <div><span
-                class="subtitle-1 color-success br-lg py-1 px-2 ltr">{{ steps.length }} / {{ run + 1 }}</span>
+                class="title-2 color-success br-lg py-1 px-2 ltr">{{ steps.length }} / {{ run + 1 }}</span>
             </div>
             <r-spacer></r-spacer>
-            <r-btn v-if="has_prev" :disabled="disable_prev" class="color-warning tour-clickable" @click.prevent="prev">
+            <r-btn v-if="has_prev" :disabled="disable_prev" class="color-info tour-clickable" @click.prevent="prev">
               {{ $t('prev', 'renusify') }}
             </r-btn>
-            <r-btn v-if="has_next" :disabled="disable_next" class="color-warning mx-1 tour-clickable"
+            <r-btn v-if="has_next" :disabled="disable_next" class="color-info mx-1 tour-clickable"
                    @click.prevent="next">
               {{ $t('next', 'renusify') }}
             </r-btn>
             <r-btn v-if="steps.length===run+1||canFinish" :disabled="disable_finish"
-                   class="color-warning mx-1 tour-clickable"
+                   class="color-success mx-1 tour-clickable"
                    @click.prevent="finish">{{ $t('finish', 'renusify') }}
             </r-btn>
           </div>

package/components/tree/index.vue

@@ -123,7 +123,6 @@ $distance: 20px;
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: var(--color-background-one);
 
   &.tree-searchable {
     .#{$prefix}float {

package/package.json

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