@epam/assets 5.0.0-alpha.4 → 5.0.1

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,71 +1,116 @@
-/* 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%);
-
-$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%);
-
-/* Gray */
-$gray5: #FAFAFC;
-$gray10: #F5F6FA;
-$gray20: #EBEDF5;
-$gray30: #E1E3EB;
-$gray40: #CED0DB;
-$gray50: #ACAFBF;
-$gray60: #6C6F80;
-$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-grayscale-color-names: ('gray5' $gray5, 'gray10' $gray10, 'gray20' $gray20, 'gray30' $gray30, 'gray40' $gray40,
-'gray50' $gray50, 'gray60' $gray60, 'gray70' $gray70, 'gray80' $gray80, 'gray90' $gray90);
-
+/* Main Colors */
+$white: #FFFFFF;
+
+$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: #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;
+$gray10: #F5F6FA;
+$gray20: #EBEDF5;
+$gray30: #E1E3EB;
+$gray40: #CED0DB;
+$gray50: #ACAFBF;
+$gray60: #6C6F80;
+$gray70: #474A59;
+$gray80: #303240;
+$gray90: #1D1E26;
+
+$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

@@ -1,45 +1,53 @@
-@font-face {
-    font-family: 'Sans Regular';
-    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Regular.ttf.woff2') format('woff2'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Regular.otf.woff') format('woff'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Regular.otf') format('opentype'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Sans Semibold';
-    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Semibold.otf.woff') format('woff'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Semibold.otf') format('opentype'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Semibold.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Sans Italic';
-    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-It.ttf.woff2') format('woff2'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-It.otf.woff') format('woff'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-It.otf') format('opentype'),
-        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-It.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Redacted';
-    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.eot');
-    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff2') format('woff2'),
-        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-face {
-    font-family: 'Roboto Mono';
-    font-style: normal;
-    font-weight: normal;
-    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
-}
+@font-face {
+    font-family: 'Sans Regular';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Regular.ttf.woff2') format('woff2'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Regular.otf.woff') format('woff'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Regular.otf') format('opentype'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Sans Semibold';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Semibold.otf.woff') format('woff'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Semibold.otf') format('opentype'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Semibold.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Sans Italic';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-It.ttf.woff2') format('woff2'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-It.otf.woff') format('woff'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-It.otf') format('opentype'),
+        url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-It.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Redacted';
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.eot');
+    src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff2') format('woff2'),
+        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 {
+    font-family: 'Roboto Mono';
+    font-style: normal;
+    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-roboto-mono: 'Roboto Mono', Arial, sans-serif;
+$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', 'Sans Semibold', Arial, sans-serif;
+$font-museo-slab: 'Museo Slab', 'Roboto Slab', Arial, sans-serif;
+$font-roboto-mono: 'Roboto Mono', Arial, sans-serif;