fonts sorted

Author: BipinKalra

sass/styles/settings/settings.color.scss

@@ -167,6 +167,20 @@ $dark-grey-list: #999;
 $light-grey-list: #f3f3f3;
 $white-list: #fff;
 
+//Border Card
+$border-card-border-color: #e8e8e8;
+
+//Tags
+$tag-dashed-border-color: $salmon;
+$tag-dashed-text-color: $salmon;
+
+//Pills
+$pill-dashed-border-color: $salmon;
+$pill-dashed-text-color: $salmon;
+
+//Form Input
+$input-text-background-color: $hover-grey;
+
 //Background Colors
 $bg-color-list: (
   "orange": $orange,
@@ -234,17 +248,3 @@ $gradient-map: (
   hi-purple: $hi-gradient-purple-lr,
   violet-bt: linear-gradient(to top, #692fdc, #452ba3),
 );
-
-//Border Card
-$border-card-border-color: #e8e8e8;
-
-//Tags
-$tag-dashed-border-color: $salmon;
-$tag-dashed-text-color: $salmon;
-
-//Pills
-$pill-dashed-border-color: $salmon;
-$pill-dashed-text-color: $salmon;
-
-//Form Input
-$input-text-background-color: $hover-grey;

sass/styles/settings/settings.font.scss

@@ -8,30 +8,55 @@ $bold: 700;
 $extra-bold: 800;
 
 //Size
-
-$font-xs: 1rem;       // 14px
-$font-sm: 1.143rem;   // 16px
-$font-mds: 1.286rem;  // 18px
-$font-md: 1.428rem;   // 20px
-$font-lg: 1.57rem;    // 22px
-$font-xl: 1.713rem;   // 24px
+$font-xs: 1rem; // 14px
+$font-sm: 1.143rem; // 16px
+$font-mds: 1.286rem; // 18px
+$font-md: 1.428rem; // 20px
+$font-lg: 1.57rem; // 22px
+$font-xl: 1.713rem; // 24px
 $font-mdxl: 2.286rem; // 32px
 
-$font-xxl: 3.214rem;  // 45px
+$font-xxl: 3.214rem; // 45px
 
-$card-md: 0.875rem;   // 12px
-$card-mds: 0.812rem;  // 11px
-$card-sm: 0.75rem;    // 10px
-$card-sms: 0.625rem;  // 9px
-$card-xs: 0.5rem;     // 7px
+$card-md: 0.875rem; // 12px
+$card-mds: 0.812rem; // 11px
+$card-sm: 0.75rem; // 10px
+$card-sms: 0.625rem; // 9px
+$card-xs: 0.5rem; // 7px
 
 @font-face {
-  font-family: 'Muli';
-  src: url('https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli.ttf');
+  font-family: "Muli";
+  src: url("https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli.ttf");
 }
 
 @font-face {
-  font-family: 'Muli';
+  font-family: "Muli";
   font-style: italic;
-  src: url('https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli-Italic.ttf');
+  src: url("https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli-Italic.ttf");
 }
+
+$text-size-list: (
+  "font-xs": $font-xs,
+  "font-sm": $font-sm,
+  "font-mds": $font-mds,
+  "font-md": $font-md,
+  "font-lg": $font-lg,
+  "font-xl": $font-xl,
+  "font-mdxl": $font-mdxl,
+  "font-xxl": $font-xxl,
+  "card-md": $card-md,
+  "card-mds": $card-mds,
+  "card-sm": $card-sm,
+  "card-sms": $card-sms,
+  "card-xs": $card-xs,
+);
+
+$text-weight-list: (
+  "light": $light,
+  "normal": $font-normal,
+  "medium": $font-medium,
+  "regular": $regular,
+  "semi-bold": $semi-bold,
+  "bold": $bold,
+  "extra-bold": $extra-bold,
+);

sass/styles/utilities/font.scss

@@ -1,42 +1,18 @@
-// FONT SIZE
-
-$list: (font-xs, $font-xs) (font-sm, $font-sm) (font-mds, $font-mds) (font-md, $font-md) (font-lg, $font-lg)
-  (font-xl, $font-xl) (font-mdxl, $font-mdxl) (font-xxl, $font-xxl) (card-md, $card-md) (card-mds, $card-mds)
-  (card-sm, $card-sm) (card-sms, $card-sms) (card-xs, $card-xs);
-
-@each $type, $size in $list {
+// Font Size
+@each $type, $size in $text-size-list {
   .#{$type} {
     font-size: $size !important;
   }
 }
 
-// FONT STYLE
+// Font Weight
+@each $type, $weight in $text-weight-list {
+  .#{$type} {
+    font-weight: $weight !important;
+  }
+}
 
+// Font Style
 .i {
   font-style: italic !important;
 }
-
-.normal {
-  font-weight: $font-normal !important;
-}
-
-// FONT WEIGHT
-.light {
-  font-weight: $light !important;
-}
-
-.regular {
-  font-weight: $regular !important;
-}
-
-.semi-bold {
-  font-weight: $semi-bold !important;
-}
-
-.bold {
-  font-weight: $bold !important;
-}
-
-.extra-bold {
-  font-weight: $extra-bold !important;
-}