@evotor-dev/ui-kit 6.3.0 → 6.5.0

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;
@@ -168,8 +168,9 @@
 }
 
 @mixin evo-input-disabled {
-    color: $color-text-subscription;
-    background-color: $color-background-grey !important;
+    color: $color-disabled-text !important;
+    background-color: $color-background-grey-light !important;
+    border: 1px solid $color-disabled-light !important;
     cursor: default;
     pointer-events: none;
 }

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

package/styles/variables.scss

@@ -3,25 +3,27 @@ $color-primary: #F05023; /* Primary color*/
 $color-secondary: #231F20; /* Secondary color*/
 $color-success: #21C68B; /* Accent color*/
 $color-secondary-light: #403C3D; /* Secondary color light*/
-$color-secondary-lighter: #74706F;
+$color-secondary-lighter: #74706F; /* Secondary Lighter color*/
 $color-bonus: #C72AAE; /* Bonus color*/
-$color-background-grey: #F4F6F8; /* Background color*/
-$color-background-50: #F9FAFB;
+$color-background-grey: #F4F6F8; /* Background Regular color*/
+$color-background-grey-light: #F9FAFB; /* Background Light color*/
+$color-background-grey-dark: #E1ECEF; /* Background Dark color*/
 $color-highlight: #FFF8E6; /* Highlight color*/
 $color-rating: #F2C94C; /* Rating color*/
 $color-primary-light: #FF6433; /* Primary color light*/
 $color-icon-light: #BEDCE3; /* Icon color light*/
 $color-icon-dark: #91B1B8; /* Icon color dark*/
-$color-disabled: #D6D6D6; /* Disabled color*/
+$color-disabled: #C6C6C6; /* Disabled color*/
+$color-disabled-text: #B0B0B0; /* Disabled Text*/
+$color-disabled-light: #E3E3E3; /* Disabled Light*/
 $color-text: #212121; /* Text color*/
 $color-text-grey: #727272; /* Secondary text color*/
 $color-caption-text: #9B9B9B; /* Caption text color*/
-$color-link: #2099F1; /* Links color*/
+$color-link: #0986E2; /* Links color*/
 $color-error: #FF1817; /* Error color*/
 $color-danger: #FF6F6F; /* Notification color*/
 $color-white: #FFFFFF; /* White color*/
 $color-white-hover: #FDFDFE;
-$color-grey: #F4F6F8;
 $color-dark-grey: #494D59;
 $color-black: #000000; /**/
 $color-info: #E6F9FF; /* Note blue*/
@@ -37,8 +39,8 @@ $color-success-active: #1eb27d;
 $color-bonus-hover: #d255bd;
 $color-bonus-active: #b3269d;
 
-$color-link-hover: #4DADF4;
-$color-link-active: #1D8AD9;
+$color-link-hover: #3A9EE8;
+$color-link-active: #0879CB;
 
 $color-error-hover: #ff4645;
 $color-error-active: #E51715;
@@ -61,11 +63,12 @@ $color-graph-9: #847474;
 $color-graph-10: #7A96A5;
 
 /* deprecated*/
-$color-dark: $color-text;
-$color-background-dark: $color-secondary;
-$color-background-dark: $color-secondary;
-$color-secondary-2: $color-icon-dark;
-$color-text-subscription: $color-caption-text;
+$color-dark: $color-text; /* deprecated, use $color-text */
+$color-background-dark: $color-secondary; /* deprecated, use $color-secondary */
+$color-secondary-2: $color-icon-dark; /* deprecated, use $color-icon-dark */
+$color-text-subscription: $color-caption-text; /* deprecated, use $color-caption-text */
+$color-background-50: $color-background-grey-light; /* deprecated, use $color-background-grey-light */
+$color-grey: $color-background-grey; /* deprecated, use $color-background-grey */
 
 /* shadows*/
 /* ------------------------------------------------------------*/