renusify 1.4.7 → 2.0.0

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

package/style/variables/base.scss

@@ -1,7 +1,7 @@
 $prefix: 'r-' !default;
 $body-font-family: IRANSans, 'Roboto', sans-serif !default;
 $font-size-root: 16px !default;
-$font-size-root-mobile: 14px !default;
+$font-size-root-mobile: 13px !default;
 $line-height-root: 1.5rem !default;
 
 $spacer: 4px !default;
@@ -26,7 +26,7 @@ $borders: (
         'circle': 50%
 ) !default;
 
-$cursor:('pointer','auto','grab','grabbing')!default;
+$cursor: ('pointer', 'auto', 'grab', 'grabbing') !default;
 
 $widths: (
         'full': 100%,
@@ -97,12 +97,12 @@ $grid-gutters: (
 
 $box-shadows: (
         'none': none,
-        'xs': var(--box-shadow,rgb(0 0 0 / 0.05)) 0 .06rem .125rem,
-        'sm': var(--box-shadow,rgb(0 0 0 / 0.05)) 0 .125rem .25rem,
-        'md': var(--box-shadow,rgb(0 0 0 / 0.1)) 0 .25rem .5rem ,
-        'lg': var(--box-shadow,rgb(0 0 0 / 0.1)) 0 .5rem 1rem,
-        'xl': var(--box-shadow,rgb(0 0 0 / 0.1)) 0 .75rem 2rem ,
-        '2xl': var(--box-shadow,rgb(0 0 0 / 0.2)) 0 1.5rem 4rem,
+        'xs': var(--box-shadow, rgb(0 0 0 / 0.05)) 0 .06rem .125rem,
+        'sm': var(--box-shadow, rgb(0 0 0 / 0.05)) 0 .125rem .25rem,
+        'md': var(--box-shadow, rgb(0 0 0 / 0.1)) 0 .25rem .5rem,
+        'lg': var(--box-shadow, rgb(0 0 0 / 0.1)) 0 .5rem 1rem,
+        'xl': var(--box-shadow, rgb(0 0 0 / 0.1)) 0 .75rem 2rem,
+        '2xl': var(--box-shadow, rgb(0 0 0 / 0.2)) 0 1.5rem 4rem,
 ) !default;
 
 $container-max-widths: (
@@ -138,95 +138,109 @@ $font-weights: (
 
 
 $headings: (
-        'h1': (
-                'size': 6rem,
-                'weight': 300,
-                'line-height': 7rem,
-                'letter-spacing': -.015625em,
+        'display-1': (
+                'size': 4.75rem,
+                'weight': 400,
+                'line-height': 5.33rem,
+                'letter-spacing': -0.02rem,
                 'text-transform': false
         ),
-        'h2': (
+        'display-2': (
                 'size': 3.75rem,
-                'weight': 300,
-                'line-height': 4.25rem,
-                'letter-spacing': -.0083333333em,
+                'weight': 400,
+                'line-height': 4.33rem,
+                'letter-spacing': 0,
                 'text-transform': false
         ),
-        'h3': (
+        'display-3': (
                 'size': 3rem,
                 'weight': 400,
-                'line-height': 3.75rem,
-                'letter-spacing': normal,
+                'line-height': 3.66rem,
+                'letter-spacing': 0,
                 'text-transform': false
         ),
-        'h4': (
-                'size': 2.125rem,
+        'headline-1': (
+                'size': 2.66rem,
                 'weight': 400,
-                'line-height': 2.75rem,
-                'letter-spacing': .0073529412em,
+                'line-height': 3.33rem,
+                'letter-spacing': 0,
                 'text-transform': false
         ),
-        'h5': (
-                'size': 1.5rem,
+        'headline-2': (
+                'size': 2.33rem,
                 'weight': 400,
-                'line-height': 2rem,
-                'letter-spacing': normal,
+                'line-height': 3rem,
+                'letter-spacing': 0,
                 'text-transform': false
         ),
-        'h6': (
-                'size': 1.25rem,
-                'weight': 500,
-                'line-height': 2rem,
-                'letter-spacing': .0125em,
+        'headline-3': (
+                'size': 2rem,
+                'weight': 400,
+                'line-height': 2.66rem,
+                'letter-spacing': 0,
                 'text-transform': false
         ),
-        'subtitle-1': (
-                'size': 1rem,
-                'weight': normal,
-                'line-height': 1.75rem,
-                'letter-spacing': .009375em,
+        'title-1': (
+                'size': 1.66rem,
+                'weight': 400,
+                'line-height': 2.33rem,
+                'letter-spacing': 0,
+                'text-transform': false
+        ),
+        'title-2': (
+                'size': 1.33rem,
+                'weight': 500,
+                'line-height': 2rem,
+                'letter-spacing': 0.0125rem,
                 'text-transform': false
         ),
-        'subtitle-2': (
-                'size': .875rem,
+        'title-3': (
+                'size': 1.15rem,
                 'weight': 500,
-                'line-height': 1.375rem,
-                'letter-spacing': .0071428571em,
+                'line-height': 1.66rem,
+                'letter-spacing': 0.008rem,
                 'text-transform': false
         ),
         'body-1': (
-                'size': 1rem,
+                'size': 1.33rem,
                 'weight': 400,
-                'line-height': 1.5rem,
-                'letter-spacing': .03125em,
+                'line-height': 2rem,
+                'letter-spacing': 0.042rem,
                 'text-transform': false
         ),
         'body-2': (
-                'size': .875rem,
+                'size': 1.15rem,
+                'weight': 400,
+                'line-height': 1.66rem,
+                'letter-spacing': 0.02rem,
+                'text-transform': false
+        ),
+        'body-3': (
+                'size': 1rem,
                 'weight': 400,
-                'line-height': 1.25rem,
-                'letter-spacing': .0178571429em,
+                'line-height': 1.33rem,
+                'letter-spacing': 0.033rem,
                 'text-transform': false
         ),
-        'button': (
-                'size': .875rem,
+        'label-1': (
+                'size': 1.15rem,
                 'weight': 500,
-                'line-height': 2.25rem,
-                'letter-spacing': .0892857143em,
+                'line-height': 1.66rem,
+                'letter-spacing': 0.008rem,
                 'text-transform': uppercase
         ),
-        'caption': (
-                'size': .75rem,
-                'weight': 400,
-                'line-height': 1.25rem,
-                'letter-spacing': .0333333333em,
-                'text-transform': false
+        'label-2': (
+                'size':1rem,
+                'weight': 500,
+                'line-height': 1.33rem,
+                'letter-spacing': 0.042rem,
+                'text-transform': uppercase
         ),
-        'overline': (
-                'size': .75rem,
+        'label-3': (
+                'size': 0.85rem,
                 'weight': 500,
-                'line-height': 2rem,
-                'letter-spacing': .1666666667em,
+                'line-height': 1.33rem,
+                'letter-spacing': 0.042rem,
                 'text-transform': uppercase
         )
 ) !default;
@@ -270,10 +284,11 @@ $bottom-nav-height: 56px !default;
 $navbar-width: 300px !default;
 
 $states: (
-        'hover': 0.04,
-        'focus': 0.12,
-        'selected': 0.08,
-        'activated': 0.12,
-        'pressed': 0.16,
-        'dragged': 0.08
-)!default;
+        'hover':('state':('opacity':0.08)),
+        'focus': ('state':('opacity':0.1)),
+        'selected': ('state':('opacity':0.08)),
+        'activated': ('state':('opacity':0.12)),
+        'pressed': ('state':('opacity':0.1)),
+        'disabled': ('state':('opacity':0.12, 'color':'sheet'), 'text':('opacity':0.38, 'color':'on-sheet')),
+        'dragged': ('state':('opacity':0.16))
+) !default;

package/style/variables/color.scss

@@ -6,9 +6,8 @@ $gradient: (
 ) !default;
 $colorMain: (
         'one':#fff,
-        'one_l':#fff,
-        'one_d':#fff,
         'two':#fff,
+        'three':#fff,
         'error':#fff,
         'info':#fff,
         'warning':#fff,