renusify 1.4.8 → 2.0.0

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);
     }
   }
 

package/style/base.scss

@@ -1,9 +1,10 @@
 /*!
- * ress.css • v2.0.4
+ * ress.css • v5.0.2
  * MIT License
  * github.com/filipelinhares/ress
  */
 
+
 /* # =================================================================
    # Global selectors
    # ================================================================= */
@@ -41,6 +42,7 @@ html {
 hr {
   overflow: visible; /* Show the overflow in Edge and IE */
   height: 0; /* Add the correct box sizing in Firefox */
+  color: inherit; /* Correct border color in Firefox. */
 }
 
 details,
@@ -108,6 +110,15 @@ sup {
   top: -0.5em;
 }
 
+table {
+  border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
+  text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+}
+
+iframe {
+  border-style: none;
+}
+
 /* # =================================================================
    # Forms
    # ================================================================= */
@@ -116,23 +127,17 @@ input {
   border-radius: 0;
 }
 
-/* Replace pointer cursor in disabled elements */
-[disabled] {
-  cursor: default;
-}
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
 }
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
   outline-offset: -2px; /* Correct the outline style in Safari */
 }
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
 }
 
@@ -164,35 +169,34 @@ select {
 
 /* Apply cursor pointer to button elements */
 button,
-[type="button"],
-[type="reset"],
-[type="submit"],
-[role="button"] {
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
   cursor: pointer;
-  color: inherit;
 }
 
 /* Remove inner padding and border in Firefox 4+ */
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 /* Replace focus style removed in the border reset above */
 button:-moz-focusring,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   outline: 1px dotted ButtonText;
 }
 
 button,
-html [type="button"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
-[type="reset"],
-[type="submit"] {
+html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
 }
 
@@ -205,6 +209,14 @@ textarea {
   border-style: none;
 }
 
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline-width: 0;
+}
+
 /* Style select like a standard input */
 select {
   -moz-appearance: none; /* Firefox 36+ */
@@ -234,6 +246,11 @@ legend {
   font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
 }
 
+/* Replace pointer cursor in disabled elements */
+[disabled] {
+  cursor: default;
+}
+
 /* # =================================================================
    # Specify media element style
    # ================================================================= */
@@ -251,19 +268,8 @@ progress {
    # Accessibility
    # ================================================================= */
 
-/* Hide content from screens but not screenreaders */
-@media screen {
-  [hidden~="screen"] {
-    display: inherit;
-  }
-  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
-    position: absolute !important;
-    clip: rect(0 0 0 0) !important;
-  }
-}
-
 /* Specify the progress cursor of updating elements */
-[aria-busy="true"] {
+[aria-busy='true'] {
   cursor: progress;
 }
 
@@ -273,18 +279,6 @@ progress {
 }
 
 /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
-[aria-disabled="true"] {
+[aria-disabled='true'] {
   cursor: default;
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-}
+}

package/style/colors.scss

@@ -1,37 +1,58 @@
 @import "./_include";
-
+//Surface – A role used for backgrounds and large, low-emphasis areas of the screen.
+//Primary, Secondary, Tertiary – Accent color roles used to emphasize or de-emphasize foreground elements.
+//Container – Roles used as a fill color for foreground elements like buttons. They should not be used for text or icons.
+//On – Roles starting with this term indicate a color for text or icons on top of its paired parent color. For example, on primary is used for text and icons against the primary fill color.
+//Variant – Roles ending with this term offer a lower emphasis alternative to its non-variant pair. For example, outline variant is a less emphasized version of the outline color.
 $colorsList: (
-        'one': #00acc1,
-        'one_l': #5ddef4,
-        'one_d': #007c91,
-        'two': #e8098f,
-        'error':#D50000,
-        'info':#0878f6,
-        'warning':#fbc02d,
-        'success':#04c40d,
-        'link':#4f98ec,
-        'background-one':#fafafa,
-        'background-two':#e0e0e0,
-        'divider':rgba(#444, 0.2),
-        'text-primary':#515151,
-        'text-secondary':#888,
-        'disabled':rgba(#000, 0.26),
-        'focused':rgba(#000, 0.12),
-        'pressed':rgba(#999, 0.4),
-        'border': rgba(#000, 0.24),
-        'sheet': #fff,
-        'sheet-active': #f5f5f5,
-        'sheet-hover': #eeeeee,
-        'overlay': rgba(225, 225, 225, 0.5)
+        "one": #415F91,
+        "on-one": #FFFFFF,
+        "one-container": #D6E3FF,
+        "on-one-container": #001B3E,
+        "two": #565F71,
+        "on-two": #FFFFFF,
+        "two-container": #DAE2F9,
+        "on-two-container": #131C2B,
+        "three": #705575,
+        "on-three": #FFFFFF,
+        "three-container": #FAD8FD,
+        "on-three-container": #28132E,
+        "error": #BA1A1A,
+        "on-error": #FFFFFF,
+        "error-container": #FFDAD6,
+        "on-error-container": #410002,
+        "success": #246b0f,
+        "on-success": #FFFFFF,
+        "success-container": #e3ffd6,
+        "on-success-container": #1d4100,
+        "warning": #a45104,
+        "on-warning": #FFFFFF,
+        "warning-container": #ffe8d6,
+        "on-warning-container": #411f00,
+        "info": #1a5aba,
+        "on-info": #FFFFFF,
+        "info-container": #d6e9ff,
+        "on-info-container": #002341,
+        "sheet": #F9F9FF,
+        "sheet-dark": #D9D9E0,
+        "sheet-light": #F9F9FF,
+        "on-sheet": #191C20,
+        "sheet-low": #E0E2EC,
+        "on-sheet-low": #44474E,
+        "sheet-container-lowest": #FFFFFF,
+        "sheet-container-low": #F3F3FA,
+        "sheet-container": #EDEDF4,
+        "sheet-container-high": #E7E8EE,
+        "sheet-container-highest": #E2E2E9,
+        "border": #74777F,
+        "border-low": #C4C6D0,
+        "overlay": #F6FAFE7f,
 ) !default;
 
 :root {
   @each $color_name, $color_value in $colorsList {
     --color-#{$color_name}: #{$color_value};
   }
-  @each $color_name, $color_value in $colorMain {
-    --color-#{$color_name}-text: #{$color_value};
-  }
 }
 
 @each $color_name, $color_value in $gradient {
@@ -72,7 +93,7 @@ $colorsList: (
 @each $color_name, $color_value in $colorMain {
   .color-#{$color_name} {
     @include background-color(var(--color-#{$color_name}), true);
-    @include text-color(var(--color-#{$color_name}-text));
+    @include text-color(var(--color-on-#{$color_name}), true);
   }
   .color-#{$color_name}-text {
     @include text-color(var(--color-#{$color_name}), true);
@@ -95,16 +116,4 @@ $colorsList: (
   --box-shadow: rgba(250, 150, 10, 0.2)
 }
 
-.color-primary-text {
-  @include text-color(var(--color-text-primary), true);
-}
-
-.color-secondary-text {
-  @include text-color(var(--color-text-secondary), true);
-}
-
-.color-disabled-text {
-  @include text-color(var(--color-disabled), true);
-}
-
 

package/style/mixins/index.scss

@@ -24,10 +24,10 @@
 }
 
 @mixin typography($headings,$key) {
-  font-size: map-metro-get($headings, $key, 'size') !important;
+  font-size: map-metro-get($headings, $key, 'size');
   font-weight: map-metro-get($headings, $key, 'weight');
   line-height: map-metro-get($headings, $key, 'line-height');
-  letter-spacing: map-metro-get($headings, $key, 'letter-spacing') !important;
+  letter-spacing: map-metro-get($headings, $key, 'letter-spacing');
 }
 
 @mixin elevation($name, $important: false) {
@@ -37,10 +37,10 @@
 
 @mixin states() {
   &:hover::before {
-    opacity: map-get($states, 'hover')
+    opacity: map-metro-get($states, 'hover', 'state', 'opacity')
   }
   &:focus::before {
-    opacity: map-get($states, 'focus')
+    opacity: map-metro-get($states, 'focus', 'state', 'opacity')
   }
   &-active {
     @include active-states()
@@ -49,13 +49,24 @@
 
 @mixin active-states() {
   &:hover::before, &::before {
-    opacity: map-get($states, 'activated')
+    opacity: map-metro-get($states, 'activated', 'state', 'opacity')
   }
   &:focus::before {
-    opacity: map-get($states, 'pressed')
+    opacity: map-metro-get($states, 'pressed', 'state', 'opacity')
   }
 }
 
+@mixin disable-states() {
+  &::before {
+    opacity: map-metro-get($states, 'disabled', 'state', 'opacity') !important;
+  }
+  opacity: map-metro-get($states, 'disabled', 'text', 'opacity') !important;
+  color: var(--color-#{map-metro-get($states, 'disabled','text','color')}) !important;
+  pointer-events: none;
+  user-select: none;
+  box-shadow: none;
+}
+
 @mixin firefox() {
   @-moz-document url-prefix() {
     @content