@evotor-dev/ui-kit 6.4.0 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evotor-dev/ui-kit",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "peerDependencies": {
     "@angular/common": ">=12.0.0 <13.0.0",
     "@angular/core": ">=12.0.0 <13.0.0",

package/styles/components/evo-button.scss

@@ -13,7 +13,7 @@ $dot-size: 10px;
     color: $color-white;
     font-weight: 500;
     font-size: 16px;
-    font-family: $font-secondary;
+    font-family: var(--font-secondary);
     line-height: 1;
     white-space: nowrap;
     text-align: center;

package/styles/components/evo-title.scss

@@ -3,7 +3,7 @@
 .evo-title {
     color: $color-text;
     font-weight: 700;
-    font-family: $font-secondary;
+    font-family: var(--font-secondary);
 
     &_h1 {
         @include h1;

package/styles/globals.scss

@@ -1,14 +1,19 @@
+@import "variables";
+
 * {
     box-sizing: border-box;
 }
 
 body {
+    --font: 'Noto Sans', #{$font-fallback};
+    --font-secondary: #{$font-secondary};
+
     min-width: 320px;
     overflow-x: hidden;
     color: $color-text;
     font-weight: 400;
     font-size: 14px;
-    font-family: $font;
+    font-family: var(--font);
     line-height: 1.4;
     background-color: $color-white;
     -moz-osx-font-smoothing: grayscale;

package/styles/main.scss

@@ -3,7 +3,12 @@
 @import 'variables.scss';
 @import 'mixins.scss';
 @import 'globals.scss';
-/*components*/
+
+/* partials*/
+@import './partials/fonts';
+@import './partials/typography';
+
+/* components*/
 @import './components/evo-grid.scss';
 @import './components/evo-alert.scss';
 @import './components/evo-button-loader.scss';

package/styles/mixins.scss

@@ -75,7 +75,7 @@
 @mixin title {
     color: #333F48;
     font-weight: 700;
-    font-family: $font-secondary;
+    font-family: var(--font-secondary);
 }
 
 @mixin h1 {
@@ -154,7 +154,7 @@
     color: $color-text;
     font-weight: normal;
     font-size: var(--evo-input-font-size);
-    font-family: $font;
+    font-family: var(--font);
     white-space: nowrap;
     background-color: $color-white;
     border: 1px solid $color-disabled;

package/styles/partials/_typography.scss

@@ -0,0 +1,123 @@
+@import '../mixins';
+@import './typography/typography-caption-mixin';
+@import './typography/typography-header-mixin';
+@import './typography/typography-header-mobile-mixin';
+@import './typography/typography-paragraph-mixin';
+@import './typography/typography-field-typo-mixin';
+@import './typography/typography-subtitle-mixin';
+
+.evo-field-typo {
+    &_label {
+        @include evo-field-typo(label);
+    }
+
+    &_placeholder {
+        @include evo-field-typo(placeholder);
+    }
+
+    &_placeholder-bold {
+        @include evo-field-typo(placeholder-bold);
+    }
+
+    &_hint {
+        @include evo-field-typo(hint);
+    }
+
+    &_error {
+        @include evo-field-typo(error);
+    }
+}
+
+.evo-paragraph {
+    &_p1 {
+        @include evo-paragraph(p1);
+    }
+
+    &_p2 {
+        @include evo-paragraph(p2);
+    }
+
+    &_p3 {
+        @include evo-paragraph(p3);
+    }
+
+    &_p4 {
+        @include evo-paragraph(p4);
+    }
+
+    &_p5 {
+        @include evo-paragraph(p5);
+    }
+
+    &_tips {
+        @include evo-paragraph(tips);
+    }
+}
+
+.evo-caption {
+    &_c1 {
+        @include evo-caption(c1);
+    }
+
+    &_c2 {
+        @include evo-caption(c2);
+    }
+
+    &_c3 {
+        @include evo-caption(c3);
+    }
+}
+
+.evo-subtitle {
+    &_s1 {
+        @include evo-subtitle(s1);
+    }
+
+    &_s2 {
+        @include evo-subtitle(s2);
+    }
+}
+
+.evo-header {
+    &_h1 {
+        @include evo-header(h1);
+    }
+
+    &_h2 {
+        @include evo-header(h2);
+    }
+
+    &_h3 {
+        @include evo-header(h3);
+    }
+
+    &_h4 {
+        @include evo-header(h4);
+    }
+
+    &_h5 {
+        @include evo-header(h5);
+    }
+}
+
+.evo-header-mobile {
+    &_h1 {
+        @include evo-header-mobile(h1-mobile);
+    }
+
+    &_h2 {
+        @include evo-header-mobile(h2-mobile);
+    }
+
+    &_h3 {
+        @include evo-header-mobile(h3-mobile);
+    }
+
+    &_h4 {
+        @include evo-header-mobile(h4-mobile);
+    }
+
+    &_h5 {
+        @include evo-header-mobile(h5-mobile);
+    }
+}

package/styles/partials/fonts.scss

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,500,500i,700,700i&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');

package/styles/partials/typography/_typography-caption-mixin.scss

@@ -0,0 +1,26 @@
+@use "sass:list";
+
+$evo-caption-styles: c1, c2, c3;
+
+@mixin evo-caption($style) {
+    @if not list.index($evo-caption-styles, $style) {
+        @error "#{$style} is not a valid caption style. Use one of #{$evo-caption-styles}";
+    }
+
+    font-family: var(--font);
+    font-style: normal;
+
+    @if $style == c1 {
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 400;
+    } @else if $style == c2 {
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 600;
+    } @else if $style == c3 {
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 700;
+    }
+}

package/styles/partials/typography/_typography-field-typo-mixin.scss

@@ -0,0 +1,36 @@
+@use "sass:list";
+
+$evo-field-typo-styles: label, placeholder, placeholder-bold, hint, error;
+
+@mixin evo-field-typo($style) {
+    @if not list.index($evo-field-typo-styles, $style) {
+        @error "#{$style} is not a valid field typo style. Use one of #{$evo-field-typo-styles}";
+    }
+
+    font-family: var(--font);
+    font-style: normal;
+
+    @if $style == label {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+    } @else if $style == placeholder {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+    } @else if $style == placeholder-bold {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
+    } @else if $style == hint {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+        font-style: italic;
+    } @else if $style == error {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+        font-style: italic;
+    }
+}

package/styles/partials/typography/_typography-header-mixin.scss

@@ -0,0 +1,62 @@
+@use "sass:list";
+@import "../../mixins";
+@import "./typography-header-mobile-mixin";
+
+$evo-header-styles: h1, h2, h3, h4, h5;
+
+@mixin evo-header($style, $noMobile: false) {
+    @if not list.index($evo-header-styles, $style) {
+        @error "#{$style} is not a valid header style. Use one of #{$evo-header-styles}";
+    }
+
+    font-family: var(--font-secondary);
+    font-style: normal;
+    font-weight: 700;
+
+    @if $style == h1 {
+        font-size: 36px;
+        line-height: 44px;
+
+        @if not $noMobile {
+            @include media-mobile {
+                @include evo-header-mobile(h1-mobile);
+            }
+        }
+    } @else if $style == h2 {
+        font-size: 30px;
+        line-height: 38px;
+
+        @if not $noMobile {
+            @include media-mobile {
+                @include evo-header-mobile(h2-mobile);
+            }
+        }
+    } @else if $style == h3 {
+        font-size: 24px;
+        line-height: 32px;
+
+        @if not $noMobile {
+            @include media-mobile {
+                @include evo-header-mobile(h3-mobile);
+            }
+        }
+    } @else if $style == h4 {
+        font-size: 18px;
+        line-height: 26px;
+
+        @if not $noMobile {
+            @include media-mobile {
+                @include evo-header-mobile(h4-mobile);
+            }
+        }
+    } @else if $style == h5 {
+        font-size: 16px;
+        line-height: 24px;
+
+        @if not $noMobile {
+            @include media-mobile {
+                @include evo-header-mobile(h5-mobile);
+            }
+        }
+    }
+}

package/styles/partials/typography/_typography-header-mobile-mixin.scss

@@ -0,0 +1,34 @@
+@use "sass:list";
+
+$evo-header-mobile-styles: h1-mobile, h2-mobile, h3-mobile, h4-mobile, h5-mobile;
+
+@mixin evo-header-mobile($style) {
+    @if not list.index($evo-header-mobile-styles, $style) {
+        @error "#{$style} is not a valid header mobile style. Use one of #{$evo-header-mobile-styles}";
+    }
+
+    font-family: var(--font-secondary);
+    font-style: normal;
+
+    @if $style == h1-mobile {
+        font-weight: 700;
+        font-size: 30px;
+        line-height: 38px;
+    } @else if $style == h2-mobile {
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 32px;
+    } @else if $style == h3-mobile {
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 28px;
+    } @else if $style == h4-mobile {
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 24px;
+    } @else if $style == h5-mobile {
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 22px;
+    }
+}

package/styles/partials/typography/_typography-paragraph-mixin.scss

@@ -0,0 +1,41 @@
+@use "sass:list";
+@import "../../variables";
+
+$evo-paragraph-styles: p1, p2, p3, p4, p5, tips;
+
+@mixin evo-paragraph($style) {
+    @if not list.index($evo-paragraph-styles, $style) {
+        @error "#{$style} is not a valid paragraph style. Use one of #{$evo-paragraph-styles}";
+    }
+
+    font-family: var(--font);
+    font-style: normal;
+
+    @if $style == p1 {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+    } @else if $style == p2 {
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 600;
+    } @else if $style == p3 {
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 400;
+    } @else if $style == p4 {
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 600;
+    } @else if $style == p5 {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
+    } @else if $style == tips {
+        font-size: 12px;
+        line-height: 18px;
+        font-weight: 400;
+        font-style: italic;
+        color: $color-text-grey;
+    }
+}

package/styles/partials/typography/_typography-subtitle-mixin.scss

@@ -0,0 +1,20 @@
+@use "sass:list";
+
+$evo-subtitle-styles: s1, s2;
+
+@mixin evo-subtitle($style) {
+    @if not list.index($evo-subtitle-styles, $style) {
+        @error "#{$style} is not a valid caption style. Use one of #{$evo-subtitle-styles}";
+    }
+
+    font-family: var(--font);
+    font-style: normal;
+    font-size: 18px;
+    line-height: 26px;
+
+    @if $style == s1 {
+        font-weight: 400;
+    } @else if $style == s2 {
+        font-weight: 600;
+    }
+}