@epam/assets 5.0.0-alpha.3 → 5.0.0

package/scss/loveship/typography.scss

@@ -0,0 +1,153 @@
+@use 'colors' as *;
+@use 'fonts' as *;
+
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@mixin typography-header() {
+    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    :global(.hero-header), h2 {
+        font-family: $font-sans-bold;
+    }
+
+    :global(.hero-header) {
+        margin: 30px 0;
+        font-size: 72px;
+        line-height: 72px;
+    }
+
+    h3, h4, h5, h6 {
+        font-family: $font-sans-semibold;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0.5em;
+        margin-top: 1.2em;
+        line-height: 1.35em;
+    }
+
+    h1 {
+        font-size: 42px;
+    }
+
+    h2 {
+        font-size: 30px;
+    }
+
+    h3 {
+        font-size: 24px;
+    }
+
+    h4 {
+        font-size: 18px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+}
+
+@mixin typography-inline() {
+    b, strong {
+        font-family: $font-sans-semibold;
+        color: $night900;
+    }
+
+    i, em {
+        font-family: $font-sans-italic;
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: $sky;
+        text-decoration: underline;
+
+        &:hover {
+            color: darken($sky, 10%);
+        }
+    }
+
+    code {
+        padding: 0.125em 0.25em;
+        color: $night50;
+        background-color: $night700;
+        border-radius: 3px;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+}
+
+@mixin typography-block() {
+    b, strong {
+        color: $night900;
+    }
+
+    ol, ul {
+        padding: 0;
+    }
+
+    li {
+        margin-left: 1.25em;
+        line-height: 1.5;
+    }
+
+    pre {
+        padding: 1.25em;
+        color: $night50;
+        background-color: $night700;
+        border-radius: 3px;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    figure {
+        margin: 0;
+
+        figcaption {
+            font-size: 0.9em;
+            opacity: 0.9;
+            text-align: center;
+        }
+    }
+
+    p {
+        margin: 0.5em 0;
+        line-height: 1.5;
+    }
+}
+
+@mixin typography-12() {
+    font-size: 12px;
+}
+
+@mixin typography-14() {
+    font-size: 14px;
+}
+
+@mixin typography-16() {
+    font-size: 16px;
+}
+
+@mixin typography-loveship() {
+    @include typography-header();
+    @include typography-block();
+    @include typography-inline();
+    font-family: $font-sans;
+    color: $night700;
+}

package/scss/loveship-colors.scss

@@ -1,56 +1,2 @@
-// Main Colors
-$sky: #009ECC;
-$grass: #67A300;
-$sun: #FCAA00;
-$fire: #FA4B4B;
-
-// Secondary Colors
-$cobalt: #0E74E2;
-$lavanda: #2E3A9D;
-$fuchsia: #CD0053;
-$white: #FFFFFF;
-
-/* Carbon scale */
-$carbon50: #F5F6FA;
-$carbon100: #D7D9E0;
-$carbon200: #B6B8C2;
-$carbon300: #9698A3;
-$carbon400: #81838F;
-$carbon500: #6C6E7A;
-$carbon600: #4F515C;
-$carbon700: #3D404D;
-$carbon800: #272933;
-$carbon900: #17181F;
-
-/* Night scale */
-$night50: #FAFAFC;
-$night100: #F5F6FA;
-$night200: #EBEDF5;
-$night300: #E1E3EB;
-$night400: #CED0DB;
-$night500: #ACAFBF;
-$night600: #6C6F80;
-$night700: #474A59;
-$night800: #303240;
-$night900: #1D1E26;
-
-$loveship-epam-colors: (
-    sky: $sky,
-    grass: $grass,
-    sun: $sun,
-    fire: $fire,
-    carbon: $carbon700,
-    cobalt: $cobalt,
-    lavanda: $lavanda,
-    fuchsia: $fuchsia,
-    white: $white,
-    night50: $night50,
-    night100: $night100,
-    night200: $night200,
-    night300: $night300,
-    night400: $night400,
-    night500: $night500,
-    night600: $night600,
-    night700: $night700,
-    night900: $night900
-);
+// this file is deprecated, please use 'epam-assets/scss/loveship/colors.scss' directly instead.
+@forward './loveship/colors';

package/scss/promo/colors.scss

@@ -1,53 +1,90 @@
 /* Main Colors */
 $white: #FFFFFF;
 
-$blue: #008ACE;
-$blue-dark: darken($blue, 5%);
-$blue-darkest: darken($blue, 10%);
-$blue-light: lighten($blue, 45%);
-$blue-lightest: lighten($blue, 50%);
-
-$green: #88CC00;
-$green-dark: darken($green, 5%);
-$green-darkest: darken($green, 10%);
-$green-light: lighten($green, 45%);
-$green-lightest: lighten($green, 50%);
+$blue-soft: #F5FDFF;
+$blue-lightest: #D6F2FF;
+$blue-light: #99DDFF;
+$blue: #007BBD;
+$blue-dark: #006AA3;
+$blue-darkest: #005685;
 
+$green-soft: #FCFFF5;
+$green-lightest: #EEFFCC;
+$green-light: #CFF486;
+$green: #65A300;
+$green-dark: #528500;
+$green-darkest: #446600;
+
+$amber-soft: #FFFCF5;
+$amber-lightest: #FFF2CC;
+$amber-light: #FFE38F;
 $amber: #FFC000;
-$amber-dark: darken($amber, 5%);
-$amber-darkest: darken($amber, 10%);
-$amber-light: lighten($amber, 35%);
-$amber-lightest: lighten($amber, 40%);
-
-$red: #E54322;
-$red-dark: darken($red, 5%);
-$red-darkest: darken($red, 10%);
-$red-light: lighten($red, 35%);
-$red-lightest: lighten($red, 40%);
-
-$cyan: #14CCCC;
-$cyan-dark: darken($cyan, 10%);
-$cyan-darkest: darken($cyan, 20%);
-$cyan-light: lighten($cyan, 40%);
-$cyan-lightest: lighten($cyan, 50%);
-
-$orange: #E67E17;
-$orange-dark: #89370E;
-$orange-darkest: #72250B;
-$orange-light: lighten($orange, 30%);
-$orange-lightest: lighten($orange, 40%);
-
-$purple: #AD14CC;
-$purple-dark: darken($purple, 10%);
-$purple-darkest: darken($purple, 20%);
-$purple-light: lighten($purple, 35%);
-$purple-lightest: lighten($purple, 45%);
-
-$violet: #5214CC;
-$violet-dark: darken($violet, 10%);
-$violet-darkest: darken($violet, 20%);
-$violet-light: lighten($violet, 35%);
-$violet-lightest: lighten($violet, 45%);
+$amber-dark: #DB9D00;
+$amber-darkest: #9F6B04;
+
+$red-soft: #FEF7F6;
+$red-lightest: #FADED9;
+$red-light: #F5B5A8;
+$red: #DB3A1A;
+$red-dark: #C03316;
+$red-darkest: #A02B13;
+
+//Additional Colors
+$yellow-0: #FFFFF0;
+$yellow-10: #FFFECC;
+$yellow-20: #FFFCA4;
+$yellow-30: #FDD63B;
+$yellow-40: #F9B71D;
+$yellow-50: #D3910C;
+
+$orange-0: #FEF8F4;
+$orange-10: #FFE8D7;
+$orange-20: #FFCCA7;
+$orange-30: #FF8B3E;
+$orange-40: #F76B0D;
+$orange-50: #BD4B00;
+
+$fuchia-0: #FFF7FB;
+$fuchia-10: #F9D8E7;
+$fuchia-20: #EDADC8;
+$fuchia-30: #EA4386;
+$fuchia-40: #D61E68;
+$fuchia-50: #AE1955;
+
+$purple-0: #FDF6FE;
+$purple-10: #F2CCFA;
+$purple-20: #E79DF5;
+$purple-30: #B114D1;
+$purple-40: #860F9E;
+$purple-50: #5E0B6F;
+
+$violet-0: #F8F6FE;
+$violet-10: #DBCCFA;
+$violet-20: #BB9DF5;
+$violet-30: #773CEC;
+$violet-40: #5514D6;
+$violet-50: #40109E;
+
+$cobalt-0: #F8FAFF;
+$cobalt-10: #D9E2FC;
+$cobalt-20: #AEC0F5;
+$cobalt-30: #0F98FF;
+$cobalt-40: #006FE5;
+$cobalt-50: #0954A5;
+
+$cyan-0: #F5FBFF;
+$cyan-10: #D1FAFA;
+$cyan-20: #AAEEEE;
+$cyan-30: #14CCCC;
+$cyan-40: #0F9E9E;
+$cyan-50: #0B6F6F;
+
+$mint-0: #F2FCF5;
+$mint-10: #DDF3E4;
+$mint-20: #B4DFC4;
+$mint-30: #4FC48C;
+$mint-40: #2E9E68;
+$mint-50: #236E4A;
 
 /* Gray */
 $gray5: #FAFAFC;
@@ -61,11 +98,19 @@ $gray70: #474A59;
 $gray80: #303240;
 $gray90: #1D1E26;
 
-$epam-basic-color-names: ('blue' $blue, 'blue-dark' $blue-dark, 'blue-darkest' $blue-darkest, 'blue-light' $blue-light, 'blue-lightest' $blue-lightest,
-'green' $green, 'green-dark' $green-dark, 'green-darkest' $green-darkest, 'green-light' $green-light, 'green-lightest' $green-lightest,
-'amber' $amber, 'amber-dark' $amber-dark, 'amber-darkest' $amber-darkest, 'amber-light' $amber-light, 'amber-lightest' $amber-lightest,
-'red' $red, 'red-dark' $red-dark, 'red-darkest' $red-darkest, 'red-light' $red-light, 'red-lightest' $red-lightest);
+$epam-basic-color-names: ('white' $white ,'blue-soft' $blue-soft, 'blue' $blue, 'blue-dark' $blue-dark, 'blue-darkest' $blue-darkest, 'blue-light' $blue-light, 'blue-lightest' $blue-lightest,
+'green-soft' $green-soft, 'green' $green, 'green-dark' $green-dark, 'green-darkest' $green-darkest, 'green-light' $green-light, 'green-lightest' $green-lightest,
+'amber-soft' $amber-soft ,'amber' $amber, 'amber-dark' $amber-dark, 'amber-darkest' $amber-darkest, 'amber-light' $amber-light, 'amber-lightest' $amber-lightest,
+'red-soft' $red-soft,'red' $red, 'red-dark' $red-dark, 'red-darkest' $red-darkest, 'red-light' $red-light, 'red-lightest' $red-lightest);
 
 $epam-grayscale-color-names: ('gray5' $gray5, 'gray10' $gray10, 'gray20' $gray20, 'gray30' $gray30, 'gray40' $gray40,
 'gray50' $gray50, 'gray60' $gray60, 'gray70' $gray70, 'gray80' $gray80, 'gray90' $gray90);
 
+$epam-additional-color-names: ('yellow-0' $yellow-0, 'yellow-10' $yellow-10, 'yellow-20' $yellow-20, 'yellow-30' $yellow-30, 'yellow-40' $yellow-40, 'yellow-50' $yellow-50,
+'orange-0' $orange-0, 'orange-10' $orange-10, 'orange-20' $orange-20, 'orange-30' $orange-30, 'orange-40' $orange-40, 'orange-50' $orange-50,
+'fuchia-0' $fuchia-0, 'fuchia-10' $fuchia-10, 'fuchia-20' $fuchia-20, 'fuchia-30' $fuchia-30, 'fuchia-40' $fuchia-40, 'fuchia-50' $fuchia-50,
+'purple-0' $purple-0, 'purple-10' $purple-10, 'purple-20' $purple-20, 'purple-30' $purple-30, 'purple-40' $purple-40, 'purple-50' $purple-50,
+'violet-0' $violet-0, 'violet-10' $violet-10, 'violet-20' $violet-20, 'violet-30' $violet-30, 'violet-40' $violet-40, 'violet-50' $violet-50,
+'cobalt-0' $cobalt-0, 'cobalt-10' $cobalt-10, 'cobalt-20' $cobalt-20, 'cobalt-30' $cobalt-30, 'cobalt-40' $cobalt-40, 'cobalt-50' $cobalt-50,
+'cyan-0' $cyan-0, 'cyan-10' $cyan-10, 'cyan-20' $cyan-20, 'cyan-30' $cyan-30, 'cyan-40' $cyan-40, 'cyan-50' $cyan-50,
+'mint-0' $mint-0, 'mint-10' $mint-10, 'mint-20' $mint-20, 'mint-30' $mint-30, 'mint-40' $mint-40, 'mint-50' $mint-50);

package/scss/promo/font-faces.scss

@@ -35,6 +35,7 @@
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
         url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
+    font-display: block;
 }
 
 @font-face {
@@ -43,3 +44,10 @@
     font-weight: normal;
     src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
 }
+
+@font-face {
+    font-family: 'Roboto Slab';
+    font-style: normal;
+    font-weight: normal;
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoSlab-Regular.ttf') format('truetype');
+}

package/scss/promo/fonts.scss

@@ -1,9 +1,7 @@
-@use 'font-faces';
-
 $font-sans: 'Sans Regular', Arial, sans-serif;
 $font-sans-semibold: 'Sans Semibold', Arial, sans-serif;
 $font-sans-italic: 'Sans Italic', Arial, sans-serif;
 $font-redacted: 'Redacted';
-$font-museo-sans: 'Museo Sans', Arial, sans-serif;
-$font-museo-slab: 'Museo Slab', Arial, sans-serif;
+$font-museo-sans: 'Museo Sans', 'Sans Semibold', Arial, sans-serif;
+$font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
 $font-roboto-mono: 'Roboto Mono', Arial, sans-serif;

package/scss/promo/typography.scss

@@ -161,34 +161,10 @@
     font-size: 16px;
 }
 
-:local(.typography-header) {
+@mixin typography-promo() {
     @include typography-header();
-}
-
-:local(.typography-block) {
     @include typography-block();
-}
-
-:local(.typography-inline) {
     @include typography-inline();
-}
-
-:local(.typography-16) {
-    @include typography-16();
-}
-
-:local(.typography-14) {
-    @include typography-14();
-}
-
-:local(.typography-12) {
-    @include typography-12();
-}
-
-:local(.typography-promo) {
-    font-family: $font-sans;
     color: $gray80;
-    composes: typography-header;
-    composes: typography-block;
-    composes: typography-inline;
+    font-family: $font-sans;
 }

package/scss/typography.scss

@@ -1,172 +1,2 @@
-@use 'loveship-colors' as *;
-@use 'fonts' as *;
-
-@mixin overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@mixin typography-header() {
-    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
-        margin: 0;
-    }
-
-    :global(.hero-header), h2 {
-        font-family: $font-sans-bold;
-    }
-
-    :global(.hero-header) {
-        margin: 30px 0;
-        font-size: 72px;
-        line-height: 72px;
-    }
-
-    h3, h4, h5, h6 {
-        font-family: $font-sans-semibold;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        margin-bottom: 0.5em;
-        margin-top: 1.2em;
-        line-height: 1.35em;
-    }
-
-    h1 {
-        font-size: 42px;
-    }
-
-    h2 {
-        font-size: 30px;
-    }
-
-    h3 {
-        font-size: 24px;
-    }
-
-    h4 {
-        font-size: 18px;
-    }
-
-    h5 {
-        font-size: 16px;
-    }
-
-    h6 {
-        font-size: 14px;
-    }
-}
-
-@mixin typography-inline() {
-    b, strong {
-        font-family: $font-sans-semibold;
-    }
-
-    i, em {
-        font-family: $font-sans-italic;
-    }
-
-    a {
-        display: inline-flex;
-        align-items: center;
-        color: $sky;
-        text-decoration: underline;
-
-        &:hover {
-            color: darken($sky, 10%);
-        }
-    }
-
-    code {
-        padding: 0.125em 0.25em;
-        color: $night50;
-        background-color: $night700;
-        border-radius: 3px;
-        font-family: monospace;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-}
-
-@mixin typography-block() {
-    ol, ul {
-        padding: 0;
-    }
-
-    li {
-        margin-left: 1.25em;
-        line-height: 1.5;
-    }
-
-    pre {
-        padding: 1.25em;
-        color: $night50;
-        background-color: $night700;
-        border-radius: 3px;
-        font-family: monospace;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    figure {
-        margin: 0;
-
-        figcaption {
-            font-size: 0.9em;
-            opacity: 0.9;
-            text-align: center;
-        }
-    }
-
-    p {
-        margin: 0.5em 0;
-        line-height: 1.5;
-    }
-}
-
-@mixin typography-12() {
-    font-size: 12px;
-}
-
-@mixin typography-14() {
-    font-size: 14px;
-}
-
-@mixin typography-16() {
-    font-size: 16px;
-}
-
-:local(.typography-header) {
-    @include typography-header();
-}
-
-:local(.typography-block) {
-    @include typography-block();
-}
-
-:local(.typography-inline) {
-    @include typography-inline();
-}
-
-:local(.typography-16) {
-    @include typography-16();
-}
-
-:local(.typography-14) {
-    @include typography-14();
-}
-
-:local(.typography-12) {
-    @include typography-12();
-}
-
-:local(.typography-loveship) {
-    font-family: $font-sans;
-    color: $night700;
-    composes: typography-header;
-    composes: typography-block;
-    composes: typography-inline;
-}
+// this file is deprecated, please use 'epam-assets/scss/loveship/typography' directly instead.
+@forward './loveship/typography';