renusify 1.4.8 → 2.0.1

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)">
@@ -578,7 +578,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      color: var(--color-link);
+      color: var(--color-one);
     }
   }
 }

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/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/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/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,20 +85,20 @@ $progress-circle-overlay-transition: all .6s ease-in-out !default;
 .#{$prefix}progress {
   text-align: center;
 
-  &.progress-outlined {
-    color: var(--color-divider)
+  .progress-outlined {
+    color: var(--color-sheet-container-highest)
   }
 
   .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-highest);
     }
 
   &.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 {
@@ -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/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);
     }
     .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)
           }
         }
       }
@@ -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.1",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",

package/style/app.scss

@@ -41,8 +41,8 @@ body {
   background: rgba(100, 100, 100, 0.6);
 }
 
-$color: var(--color-two);
-$color-text: var(--color-two-text);
+$color: var(--color-one);
+$color-text: var(--color-on-one);
 
 ::-moz-selection {
   color: $color-text;
@@ -82,7 +82,7 @@ $color-text: var(--color-two-text);
 }
 
 .router-link-exact-active, a:hover {
-  color: var(--color-link)
+  color: var(--color-one)
 }
 
 //curser
@@ -124,55 +124,67 @@ $color-text: var(--color-two-text);
 
 //typography
 .#{$prefix}app {
-  @include typography($headings, 'body-1');
+  @include typography($headings, 'body-2');
 
   .display-1 {
-    @include typography($headings, 'h1')
+    @include typography($headings, 'display-1')
   }
 
   .display-2 {
-    @include typography($headings, 'h2')
+    @include typography($headings, 'display-2')
   }
 
   .display-3 {
-    @include typography($headings, 'h3')
+    @include typography($headings, 'display-3')
   }
 
-  .display-4 {
-    @include typography($headings, 'h4')
+  .headline-1 {
+    @include typography($headings, 'headline-1')
   }
 
-  .display-5 {
-    @include typography($headings, 'h5')
+  .headline-2 {
+    @include typography($headings, 'headline-2')
   }
 
-  .title {
-    @include typography($headings, 'h6')
+  .headline-3 {
+    @include typography($headings, 'headline-3')
   }
 
-  .subtitle-1 {
-    @include typography($headings, 'subtitle-1');
+  .title-1 {
+    @include typography($headings, 'title-1')
   }
 
-  .subtitle-2 {
-    @include typography($headings, 'subtitle-2');
+  .title-2 {
+    @include typography($headings, 'title-2');
   }
 
-  .body-2 {
-    @include typography($headings, 'body-2');
+  .title-3 {
+    @include typography($headings, 'title-3');
   }
 
   .body-1 {
     @include typography($headings, 'body-1');
   }
 
-  .caption {
-    @include typography($headings, 'caption')
+  .body-2 {
+    @include typography($headings, 'body-2');
+  }
+
+  .body-3 {
+    @include typography($headings, 'body-3');
+  }
+
+
+  .label-1 {
+    @include typography($headings, 'label-1')
+  }
+
+  .label-2 {
+    @include typography($headings, 'label-2')
   }
 
-  .overline {
-    @include typography($headings, 'overline');
-    text-transform: uppercase
+  .label-3 {
+    @include typography($headings, 'label-3')
   }
 
   p {
@@ -181,10 +193,6 @@ $color-text: var(--color-two-text);
 
 }
 
-.subtitle-1, .subtitle-2, .body-2, .caption, .overline {
-  @include text-color(var(--color-text-secondary));
-}
-
 //width
 .#{$prefix}app {
   @each $name, $value in $widths {
@@ -290,18 +298,16 @@ $color-text: var(--color-two-text);
     color: white;
   }
 
-  $background: #e2ece2;
-
   blockquote {
-    background-color: $background;
-    border: 5px solid var(--color-one);
+    background-color: var(--color-one-container);
+    border: 5px solid var(--color-border);
 
     &::before {
-      background-color: $background;
+      background-color: var(--color-one-container);
     }
 
     &::after {
-      color: var(--color-one);
+      color: var(--color-on-one-container);
     }
   }