renusify 2.5.2 → 3.0.0

package/style/_index.scss

@@ -0,0 +1,7 @@
+@forward 'variables/base.scss';
+@forward 'variables/color.scss';
+@forward 'variables/utilities.scss';
+@forward 'mixins/index.scss';
+@forward 'mixins/utilities.scss';
+@forward 'mixins/container.scss';
+@forward 'functions/index.scss';

package/style/app.scss

@@ -9,23 +9,15 @@
 
 
 html {
-  font-size: base.$font-size-root;
-  @include container.media-breakpoint-down('md') {
-    font-size: base.$font-size-root-mobile;
-  }
-
-  & {
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    box-sizing: border-box;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    -webkit-text-size-adjust: 100%;
-    scroll-behavior: smooth;
-  }
-;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
 }
 
 body {
@@ -106,19 +98,6 @@ $color-text: var(--color-on-one);
   }
 }
 
-//display
-.#{base.$prefix}app {
-  @each $size, $media_query in base.$display-breakpoints {
-    .hidden {
-      &-#{$size} {
-        @media #{$media_query}{
-          display: none !important
-        }
-      }
-    }
-  }
-}
-
 //text
 .#{base.$prefix}app {
   @each $name, $weight in base.$font-weights {
@@ -136,7 +115,7 @@ $color-text: var(--color-on-one);
 
 //typography
 .#{base.$prefix}app {
-  @include mixins.typography(base.$headings, 'body-2');
+  @include mixins.typography(base.$headings, 'body-1');
 
   .display-1 {
     @include mixins.typography(base.$headings, 'display-1')
@@ -205,29 +184,6 @@ $color-text: var(--color-on-one);
 
 }
 
-//width
-.#{base.$prefix}app {
-  @each $name, $value in base.$widths {
-    .w-#{$name} {
-      width: $value !important
-    }
-  }
-  @each $name, $value in base.$heights {
-    .h-#{$name} {
-      height: $value !important
-    }
-  }
-}
-
-//transition
-.#{base.$prefix}app {
-  @each $name, $bezier in base.$transition {
-    .timing-#{$name} {
-      transition-timing-function: $bezier !important
-    }
-  }
-}
-
 //z-index
 .#{base.$prefix}app {
   @each $name, $value in base.$z-index {
@@ -237,18 +193,10 @@ $color-text: var(--color-on-one);
   }
 }
 
-// Utilities
-@each $breakpoint in map.keys(base.$grid-breakpoints) {
-  @include container.media-breakpoint-up($breakpoint) {
-    $infix: functions.breakpoint-min-name($breakpoint, base.$grid-breakpoints);
-    @each $key, $utility in utilities.$utilities {
-      @if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
-        @include utilities2.build-utility($utility, $infix)
-      }
-    }
+@each $key, $utility in utilities.$utilities {
+  @if meta.type-of($utility) == "map" {
+    @include utilities2.build-utility($utility, "")
   }
-
-
 }
 
 // Print utilities

package/style/colors.scss

@@ -41,6 +41,7 @@ $colorsList: (
         "sheet-dark": #D9D9E0,
         "sheet-light": #F9F9FF,
         "on-sheet": #191C20,
+        "on-sheet-2": #343a42,
         "sheet-low": #E0E2EC,
         "on-sheet-low": #44474E,
         "sheet-container-lowest": #FFFFFF,
@@ -84,16 +85,6 @@ $colorsList: (
   }
 }
 
-@each $color_name, $color_value in color.$grey {
-  .#{base.$prefix}app .color-grey-#{$color_name} {
-    @include mixins.background-color($color_value, true);
-  }
-
-  .#{base.$prefix}app .color-grey-#{$color_name}-text {
-    @include mixins.text-color($color_value, true);
-  }
-}
-
 @each $color_name, $color_value in color.$colorMain {
   .color-#{$color_name} {
     @include mixins.background-color(var(--color-#{$color_name}), true);
@@ -104,20 +95,12 @@ $colorsList: (
   }
 }
 
-.shadow-info {
-  --box-shadow: rgba(10, 150, 250, 0.2)
-}
-
-.shadow-success {
-  --box-shadow: rgba(50, 250, 10, 0.2)
-}
-
-.shadow-error {
-  --box-shadow: rgba(255, 10, 30, 0.2)
+.color-text-primary {
+  color: var(--color-on-sheet);
 }
 
-.shadow-warning {
-  --box-shadow: rgba(250, 150, 10, 0.2)
+.color-text-secondary {
+  color: var(--color-on-sheet-2);
 }
 
 

package/style/functions/index.scss

@@ -1,6 +1,7 @@
 @use "../variables/base";
 
 @use "sass:map";
+@use "sass:math";
 
 
 @function breakpoint-min-width($name, $breakpoints: base.$grid-breakpoints) {
@@ -17,4 +18,11 @@
     $map: map.get($map, $key);
   }
   @return $map
+}
+
+@function fluid-font-size($min-size, $max-size, $min-vw: base.$min-viewport-width, $max-vw: base.$max-viewport-width) {
+  $slope: math.div($max-size - $min-size, $max-vw - $min-vw);
+  $slope-vw: $slope * 100;
+  $intercept: $min-size - $slope * $min-vw;
+  @return clamp(#{$min-size}, #{$intercept} + #{$slope-vw}vw, #{$max-size});
 }

package/style/mixins/index.scss

@@ -27,11 +27,23 @@
   caret-color: $color_value if($important, !important, null);
 }
 
-@mixin typography($headings,$key) {
-  font-size: functions.map-metro-get($headings, $key, 'size');
-  font-weight: functions.map-metro-get($headings, $key, 'weight');
-  line-height: functions.map-metro-get($headings, $key, 'line-height');
-  letter-spacing: functions.map-metro-get($headings, $key, 'letter-spacing');
+
+@mixin typography($styles-map, $key) {
+  $style: map.get($styles-map, $key);
+
+  font-weight: map.get($style, 'weight');
+  line-height: map.get($style, 'line-height');
+  letter-spacing: map.get($style, 'letter-spacing');
+  text-transform: map.get($style, 'text-transform');
+
+  @if map.get($style, 'fluid') {
+    font-size: functions.fluid-font-size(
+                    map.get($style, 'min-size'),
+                    map.get($style, 'max-size')
+    );
+  } @else {
+    font-size: map.get($style, 'size');
+  }
 }
 
 @mixin elevation($name, $important: false) {

package/style/variables/base.scss

@@ -1,20 +1,14 @@
 @use "sass:map";
 @use "sass:math";
+
 $prefix: 'r-' !default;
-$body-font-family: IRANSans, 'Roboto', sans-serif !default;
-$font-size-root: 16px !default;
-$font-size-root-mobile: 13px !default;
+$body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !default;
 $line-height-root: 1.5rem !default;
 
 $spacer: 4px !default;
 $spacers: ();
 @for $i from 0 through 24 {
-        $spacers: map.merge($spacers, ($i: $spacer * $i))
-}
-
-$negative-spacers: ();
-@for $i from 1 through 24 {
-        $negative-spacers: map.merge($negative-spacers, ("n" + $i: -$spacer * $i))
+  $spacers: map.merge($spacers, ($i: $spacer * $i))
 }
 
 $borders: (
@@ -30,59 +24,14 @@ $borders: (
 
 $cursor: ('pointer', 'auto', 'grab', 'grabbing') !default;
 
-$widths: (
-        'full': 100%,
-        '95': 95%,
-        '90': 90%,
-        '85': 85%,
-        '80': 80%,
-        '75': 75%,
-        '70': 70%,
-        '65': 65%,
-        '60': 60%,
-        '55': 55%,
-        '50': 50%,
-        '45': 45%,
-        '40': 40%,
-        '35': 35%,
-        '30': 30%,
-        '25': 25%,
-        '20': 20%,
-        '15': 15%,
-        '10': 10%,
-        '5': 5%
-) !default;
-$heights: (
-        'full': 100%,
-        '95': 95%,
-        '90': 90%,
-        '85': 85%,
-        '80': 80%,
-        '75': 75%,
-        '70': 70%,
-        '65': 65%,
-        '60': 60%,
-        '55': 55%,
-        '50': 50%,
-        '45': 45%,
-        '40': 40%,
-        '35': 35%,
-        '30': 30%,
-        '25': 25%,
-        '20': 20%,
-        '15': 15%,
-        '10': 10%,
-        '5': 5%
-) !default;
-
 $grid-breakpoints: (
         'xs': 0,
-        'sm': 600px,
-        'md': 960px,
-        'lg': 1280px,
-        'xl': 1620px
+        'sm': 36rem, // Small devices (landscape phones, 576px)
+        'md': 48rem, // Medium devices (tablets, 768px)
+        'lg': 64rem, // Large devices (desktops, 1024px)
 ) !default;
 
+$base-font-size: 1rem;
 $grid-gutter: $spacer * 6 !default;
 $form-grid-gutter: $spacer * 2 !default;
 $grid-columns: 12 !default;
@@ -93,8 +42,7 @@ $grid-gutters: (
         'xs': math.div($grid-gutter, 12),
         'sm': math.div($grid-gutter, 6),
         'md': math.div($grid-gutter, 3),
-        'lg': math.div($grid-gutter * 2, 3),
-        'xl': $grid-gutter
+        'lg':$grid-gutter
 ) !default;
 
 $box-shadows: (
@@ -104,146 +52,194 @@ $box-shadows: (
         '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,
+        'xxl': var(--box-shadow, rgb(0 0 0 / 0.2)) 0 1.5rem 4rem,
 ) !default;
 
 $container-max-widths: (
-        'md': map.get($grid-breakpoints, 'md')-60,
-        'lg': map.get($grid-breakpoints, 'lg')-80,
-        'xl': map.get($grid-breakpoints, 'xl')-120
-) !default;
-
-$display-breakpoints: (
-        'print-only': 'only print',
-        'screen-only': 'only screen',
-        'xs-only': 'only screen and (max-width: #{map.get($grid-breakpoints, 'sm') - 1})',
-        'sm-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'sm')}) and (max-width: #{map.get($grid-breakpoints, 'md') - 1})',
-        'sm-and-down': 'only screen and (max-width: #{map.get($grid-breakpoints, 'md') - 1})',
-        'sm-and-up': 'only screen and (min-width: #{map.get($grid-breakpoints, 'sm')})',
-        'md-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'md')}) and (max-width: #{map.get($grid-breakpoints, 'lg') - 1})',
-        'md-and-down': 'only screen and (max-width: #{map.get($grid-breakpoints, 'lg') - 1})',
-        'md-and-up': 'only screen and (min-width: #{map.get($grid-breakpoints, 'md')})',
-        'lg-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'lg')}) and (max-width: #{map.get($grid-breakpoints, 'xl') - 1})',
-        'lg-and-down': 'only screen and (max-width: #{map.get($grid-breakpoints, 'xl') - 1})',
-        'lg-and-up': 'only screen and (min-width: #{map.get($grid-breakpoints, 'lg')})',
-        'xl-only': 'only screen and (min-width: #{map.get($grid-breakpoints, 'xl')})'
+        'md': map.get($grid-breakpoints, 'md')- 3rem,
+        'lg': map.get($grid-breakpoints, 'lg')- 4rem
 ) !default;
 
 $font-weights: (
-        'thin': 100,
         'light': 300,
         'regular': 400,
         'medium': 500,
-        'bold': 700,
-        'black': 900
+        'bold': 700
+) !default;
+
+$typography-ratio: 1.25;
+$min-viewport-width: 20rem;
+$max-viewport-width: 90rem;
+
+$line-heights: (
+        "tight": 1.15,
+        "normal": 1.5,
+        "relaxed": 1.6
+) !default;
+
+$letter-spacings: (
+        "tight": -0.025em,
+        "normal": 0,
+        "wide": 0.025em
+) !default;
+
+$line-heights: (
+        "tight": 1.15,
+        "normal": 1.5,
+        "relaxed": 1.6
+) !default;
+
+$letter-spacings: (
+        "tight": -0.025em,
+        "normal": 0,
+        "wide": 0.025em
 ) !default;
 
 
 $headings: (
+  //display-1/2/3	Massive, attention-grabbing heroes	Page title, full-width banner text
+  //The largest possible text. Reserved for the most important headline on a marketing site.
         'display-1': (
-                'size': 4.75rem,
-                'weight': 400,
-                'line-height': 6rem,
-                'letter-spacing': -0.02rem,
-                'text-transform': false
+                'min-size': 2.5rem,
+                'max-size': 3.75rem,
+                'weight': map.get($font-weights, "light"),
+                'line-height': map.get($line-heights, "tight"),
+                'letter-spacing': map.get($letter-spacings, "tight"),
+                'text-transform': none,
+                'fluid': true
         ),
+  //A slightly smaller massive headline. Often used as the main title on a landing page.
         'display-2': (
-                'size': 3.75rem,
-                'weight': 400,
-                'line-height': 5.3rem,
-                'letter-spacing': 0,
-                'text-transform': false
+                'min-size': 2rem,
+                'max-size': 3rem,
+                'weight': map.get($font-weights, "light"),
+                'line-height': map.get($line-heights, "tight"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': true
         ),
+  //A large, but more manageable, display style. Can be used for a major section title or a premium product name.
         'display-3': (
-                'size': 3rem,
-                'weight': 400,
-                'line-height': 4.3rem,
-                'letter-spacing': 0,
-                'text-transform': false
+                'min-size': 1.75rem,
+                'max-size': 2.5rem,
+                'weight': map.get($font-weights, "regular"),
+                'line-height': map.get($line-heights, "tight"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': true
         ),
+  //headline-1/2/3	Major section titles	H1, H2, H3 headings
+  //The primary title of the page. There should only be one H1 per page.
         'headline-1': (
-                'size': 2.66rem,
-                'weight': 400,
-                'line-height': 3.6rem,
-                'letter-spacing': 0,
-                'text-transform': false
+                'min-size': 1.75rem,
+                'max-size': 2.25rem,
+                'weight': map.get($font-weights, "bold"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': true
         ),
+  //Major section headings. They break the page into main topics.
         'headline-2': (
-                'size': 2.33rem,
-                'weight': 400,
-                'line-height': 3.2rem,
-                'letter-spacing': 0,
-                'text-transform': false
+                'min-size': 1.5rem,
+                'max-size': 2rem,
+                'weight': map.get($font-weights, "regular"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': true
         ),
+  //Sub-section headings. These nest under headline-2 sections.
         'headline-3': (
-                'size': 2rem,
-                'weight': 400,
-                'line-height': 2.66rem,
-                'letter-spacing': 0,
-                'text-transform': false
+                'size': 1.5rem,
+                'weight': map.get($font-weights, "regular"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': false
         ),
+  //title-1/2/3	Smaller titles, emphasized text	H4, H5, card titles, product names
+  //Perfect for card titles, feature names, or large data points (e.g., total price).
         'title-1': (
-                'size': 1.66rem,
-                'weight': 400,
-                'line-height': 2.33rem,
-                'letter-spacing': 0,
-                'text-transform': false
+                'size': 1.25rem,
+                'weight': map.get($font-weights, "medium"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': false
         ),
+  //A title that is the same size as body text but uses a medium weight (500) to create emphasis. Good for interactive element labels.
         'title-2': (
-                'size': 1.33rem,
-                'weight': 500,
-                'line-height': 1.9rem,
-                'letter-spacing': 0.0125rem,
-                'text-transform': false
+                'size': 1.125rem,
+                'weight': map.get($font-weights, "medium"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "wide"),
+                'text-transform': none,
+                'fluid': false
         ),
+  //A small, emphasized title. Useful in dense interfaces like dashboards or tables.
         'title-3': (
-                'size': 1.15rem,
-                'weight': 500,
-                'line-height': 1.66rem,
-                'letter-spacing': 0.008rem,
-                'text-transform': false
+                'size': 1rem,
+                'weight': map.get($font-weights, "medium"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "wide"),
+                'text-transform': none,
+                'fluid': false
         ),
+  //THE STANDARD. Default paragraph text, product descriptions, article content—anything users read in large quantities.
         'body-1': (
-                'size': 1.33rem,
-                'weight': 400,
-                'line-height': 1.8rem,
-                'letter-spacing': 0.042rem,
-                'text-transform': false
+                'size': $base-font-size,
+                'weight': map.get($font-weights, "regular"),
+                'line-height': map.get($line-heights, "relaxed"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': false
         ),
+  //Secondary, supporting text. Less important than body-1. Good for comments, minor details, or captions under images.
         'body-2': (
-                'size': 1.15rem,
-                'weight': 400,
-                'line-height': 1.66rem,
-                'letter-spacing': 0.02rem,
-                'text-transform': false
+                'size': 0.875rem,
+                'weight': map.get($font-weights, "regular"),
+                'line-height': map.get($line-heights, "relaxed"),
+                'letter-spacing': map.get($letter-spacings, "normal"),
+                'text-transform': none,
+                'fluid': false
         ),
+  //The absolute smallest text should be used for legal disclaimers, copyright info, or dense, non-essential data.
         'body-3': (
-                'size': 1rem,
-                'weight': 400,
-                'line-height': 1.33rem,
-                'letter-spacing': 0.033rem,
-                'text-transform': false
+                'size': 0.8125rem,
+                'weight': map.get($font-weights, "medium"),
+                'line-height': map.get($line-heights, "relaxed"),
+                'letter-spacing': map.get($letter-spacings, "wide"),
+                'text-transform': none,
+                'fluid': false
         ),
+  //label-1/2/3	UI controls, tags, buttons	Form labels, buttons, badges, chips
+  //Labels for form fields, buttons, or navigation items. The most common label size.
         'label-1': (
-                'size': 1.15rem,
-                'weight': 500,
-                'line-height': 1.5rem,
-                'letter-spacing': 0.008rem,
-                'text-transform': uppercase
+                'size': 0.875rem,
+                'weight': map.get($font-weights, "medium"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "wide"),
+                'text-transform': uppercase,
+                'fluid': false
         ),
+  //Smaller labels for tags, badges, or status indicators (e.g., "NEW", "SOLD OUT").
         'label-2': (
-                'size':1rem,
-                'weight': 500,
-                'line-height': 1.2rem,
-                'letter-spacing': 0.042rem,
-                'text-transform': uppercase
+                'size': 0.8125rem,
+                'weight': map.get($font-weights, "medium"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "wide"),
+                'text-transform': uppercase,
+                'fluid': false
         ),
+  //Highly specific and minimal. Only for extreme cases where space is incredibly limited.
         'label-3': (
-                'size': 0.85rem,
-                'weight': 500,
-                'line-height': 1.1rem,
-                'letter-spacing': 0.042rem,
-                'text-transform': uppercase
+                'size': 0.75rem,
+                'weight': map.get($font-weights, "bold"),
+                'line-height': map.get($line-heights, "normal"),
+                'letter-spacing': map.get($letter-spacings, "wide"),
+                'text-transform': uppercase,
+                'fluid': false
         )
 ) !default;
 
@@ -268,23 +264,6 @@ $z-index: (
         'veryImportant':100,
 ) !default;
 
-//bar
-//toolbar
-$toolbar-content-padding-y: 4px !default;
-$toolbar-content-padding-x: 16px !default;
-$toolbar-height: 80px !default;
-
-//modal
-$border-modal: map.get($borders, 'md') !default;
-
-//bottom navigation
-$bottom-nav-btn-min-width: 56px !default;
-$bottom-nav-btn-max-width: 168px !default;
-$bottom-nav-height: 56px !default;
-
-//navbar
-$navbar-width: 300px !default;
-
 $states: (
         'hover':('state':('opacity':0.08)),
         'focus': ('state':('opacity':0.1)),

package/style/variables/color.scss

@@ -19,15 +19,3 @@ $shades: (
         'white': #fff,
         'transparent': transparent
 );
-$grey: (
-        'base': #9e9e9e,
-        'lighten-4': #fafafa,
-        'lighten-3': #e6e6e6,
-        'lighten-2': #d2d2d2,
-        'lighten-1': #bebebe,
-        'darken-4': #1e1e1e,
-        'darken-3': #3c3c3c,
-        'darken-2': #5a5a5a,
-        'darken-1': #787878
-);
-//end color