@epam/assets 4.8.0-alpha.0 → 4.8.0-beta.0

package/scss/loveship-color-vars.scss

@@ -1,183 +1,183 @@
-@use './loveship-colors' as colors;
-@use './contrast' as *;
-
-// Colors
-.color-sky {
-    --uui-color-500: #E1F4FA;
-    --uui-color-600: #C4EAF5;
-    --uui-color-700: #009ECC;
-    --uui-color-800: #008ABD;
-    --uui-color-900: #0079AD;
-    --uui-contrast-color-700: #{contrast(#009ECC, colors.$night700, white)};
-}
-
-.color-grass {
-    --uui-color-500: #EBF3D8;
-    --uui-color-600: #D6E6B2;
-    --uui-color-700: #67A300;
-    --uui-color-800: #558A00;
-    --uui-color-900: #428024;
-    --uui-contrast-color-700: #{contrast(#67A300, colors.$night700, white)};
-}
-
-.color-sun {
-    --uui-color-500: #FFEDC9;
-    --uui-color-600: #FFDD96;
-    --uui-color-700: #FCAA00;
-    --uui-color-800: #F67E00;
-    --uui-color-900: #E64C00;
-    --uui-contrast-color-700: #{contrast(#FCAA00, colors.$night700, white)};
-}
-
-.color-fire {
-    --uui-color-500: #FDE1E1;
-    --uui-color-600: #FCC8C8;
-    --uui-color-700: #FA4B4B;
-    --uui-color-800: #CC2929;
-    --uui-color-900: #B32424;
-    --uui-contrast-color-700: #{contrast(#FA4B4B, colors.$night700, white)};
-}
-
-.color-carbon {
-    --uui-color-500: #6C6E7A;
-    --uui-color-600: #4F515C;
-    --uui-color-700: #3D404D;
-    --uui-color-800: #272933;
-    --uui-color-900: #17181F;
-    --uui-contrast-color-700: #{contrast(#3D404D, colors.$night700, white)};
-}
-
-.color-night {
-    --uui-color-500: #ACAFBF;
-    --uui-color-600: #6C6F80;
-    --uui-color-700: #474A59;
-    --uui-color-800: #303240;
-    --uui-color-900: #1D1E26;
-    --uui-contrast-color-700: #{contrast(#474A59, colors.$night700, white)};
-}
-
-.color-cobalt {
-    --uui-color-500: #32B2FB;
-    --uui-color-600: #2196F3;
-    --uui-color-700: #0E74E2;
-    --uui-color-800: #0453C7;
-    --uui-color-900: #003399;
-    --uui-contrast-color-700: #{contrast(#0E74E2, colors.$night700, white)};
-}
-
-.color-lavanda {
-    --uui-color-500: #6362C9;
-    --uui-color-600: #3F51B5;
-    --uui-color-700: #2E3A9D;
-    --uui-color-800: #21288D;
-    --uui-color-900: #191980;
-    --uui-contrast-color-700: #{contrast(#2E3A9D, colors.$night700, white)};
-}
-
-.color-fuchsia {
-    --uui-color-500: #F5527B;
-    --uui-color-600: #E91E63;
-    --uui-color-700: #CD0053;
-    --uui-color-800: #B00052;
-    --uui-color-900: #94004C;
-    --uui-contrast-color-700: #{contrast(#CD0053, colors.$night700, white)};
-}
-
-.color-white {
-    --uui-color-500: #{lighten(colors.$white, 20%)};
-    --uui-color-600: #{lighten(colors.$white, 10%)};
-    --uui-color-700: #{colors.$white};
-    --uui-color-800: #{darken(colors.$white, 10%)};
-    --uui-color-900: #{darken(colors.$white, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$white, colors.$night700, white)};
-}
-
-.color-night50 {
-    --uui-color-500: #{lighten(colors.$night50, 20%)};
-    --uui-color-600: #{lighten(colors.$night50, 10%)};
-    --uui-color-700: #{colors.$night50};
-    --uui-color-800: #{darken(colors.$night50, 10%)};
-    --uui-color-900: #{darken(colors.$night50, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night50, colors.$night700, white)};
-}
-
-.color-night100 {
-    --uui-color-500: #{lighten(colors.$night100, 20%)};
-    --uui-color-600: #{lighten(colors.$night100, 10%)};
-    --uui-color-700: #{colors.$night100};
-    --uui-color-800: #{darken(colors.$night100, 10%)};
-    --uui-color-900: #{darken(colors.$night100, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night100, colors.$night700, white)};
-}
-
-.color-night200 {
-    --uui-color-500: #{lighten(colors.$night200, 20%)};
-    --uui-color-600: #{lighten(colors.$night200, 10%)};
-    --uui-color-700: #{colors.$night200};
-    --uui-color-800: #{darken(colors.$night200, 10%)};
-    --uui-color-900: #{darken(colors.$night200, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night200, colors.$night700, white)};
-}
-
-.color-night300 {
-    --uui-color-500: #{lighten(colors.$night300, 20%)};
-    --uui-color-600: #{lighten(colors.$night300, 10%)};
-    --uui-color-700: #{colors.$night300};
-    --uui-color-800: #{darken(colors.$night300, 10%)};
-    --uui-color-900: #{darken(colors.$night300, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night300, colors.$night700, white)};
-}
-
-.color-night400 {
-    --uui-color-500: #{lighten(colors.$night400, 20%)};
-    --uui-color-600: #{lighten(colors.$night400, 10%)};
-    --uui-color-700: #{colors.$night400};
-    --uui-color-800: #{darken(colors.$night400, 10%)};
-    --uui-color-900: #{darken(colors.$night400, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night400, colors.$night700, white)};
-}
-
-.color-night500 {
-    --uui-color-500: #{lighten(colors.$night500, 20%)};
-    --uui-color-600: #{lighten(colors.$night500, 10%)};
-    --uui-color-700: #{colors.$night500};
-    --uui-color-800: #{darken(colors.$night500, 10%)};
-    --uui-color-900: #{darken(colors.$night500, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night500, colors.$night700, white)};
-}
-
-.color-night600 {
-    --uui-color-500: #{lighten(colors.$night600, 20%)};
-    --uui-color-600: #{lighten(colors.$night600, 10%)};
-    --uui-color-700: #{colors.$night600};
-    --uui-color-800: #{darken(colors.$night600, 10%)};
-    --uui-color-900: #{darken(colors.$night600, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night600, colors.$night700, white)};
-}
-
-.color-night700 {
-    --uui-color-500: #{lighten(colors.$night700, 20%)};
-    --uui-color-600: #{lighten(colors.$night700, 10%)};
-    --uui-color-700: #{colors.$night700};
-    --uui-color-800: #{darken(colors.$night700, 10%)};
-    --uui-color-900: #{darken(colors.$night700, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night700, colors.$night700, white)};
-}
-
-.color-night800 {
-    --uui-color-500: #{lighten(colors.$night800, 20%)};
-    --uui-color-600: #{lighten(colors.$night800, 10%)};
-    --uui-color-700: #{colors.$night800};
-    --uui-color-800: #{darken(colors.$night800, 10%)};
-    --uui-color-900: #{darken(colors.$night800, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night700, colors.$night800, white)};
-}
-
-.color-night900 {
-    --uui-color-500: #{lighten(colors.$night900, 20%)};
-    --uui-color-600: #{lighten(colors.$night900, 10%)};
-    --uui-color-700: #{colors.$night900};
-    --uui-color-800: #{darken(colors.$night900, 10%)};
-    --uui-color-900: #{darken(colors.$night900, 20%)};
-    --uui-contrast-color-700: #{contrast(colors.$night900, colors.$night700, white)};
-}
+@use './loveship-colors' as colors;
+@use './contrast' as *;
+
+// Colors
+.color-sky {
+    --uui-color-500: #E1F4FA;
+    --uui-color-600: #C4EAF5;
+    --uui-color-700: #009ECC;
+    --uui-color-800: #008ABD;
+    --uui-color-900: #0079AD;
+    --uui-contrast-color-700: #{contrast(#009ECC, colors.$night700, white)};
+}
+
+.color-grass {
+    --uui-color-500: #EBF3D8;
+    --uui-color-600: #D6E6B2;
+    --uui-color-700: #67A300;
+    --uui-color-800: #558A00;
+    --uui-color-900: #428024;
+    --uui-contrast-color-700: #{contrast(#67A300, colors.$night700, white)};
+}
+
+.color-sun {
+    --uui-color-500: #FFEDC9;
+    --uui-color-600: #FFDD96;
+    --uui-color-700: #FCAA00;
+    --uui-color-800: #F67E00;
+    --uui-color-900: #E64C00;
+    --uui-contrast-color-700: #{contrast(#FCAA00, colors.$night700, white)};
+}
+
+.color-fire {
+    --uui-color-500: #FDE1E1;
+    --uui-color-600: #FCC8C8;
+    --uui-color-700: #FA4B4B;
+    --uui-color-800: #CC2929;
+    --uui-color-900: #B32424;
+    --uui-contrast-color-700: #{contrast(#FA4B4B, colors.$night700, white)};
+}
+
+.color-carbon {
+    --uui-color-500: #6C6E7A;
+    --uui-color-600: #4F515C;
+    --uui-color-700: #3D404D;
+    --uui-color-800: #272933;
+    --uui-color-900: #17181F;
+    --uui-contrast-color-700: #{contrast(#3D404D, colors.$night700, white)};
+}
+
+.color-night {
+    --uui-color-500: #ACAFBF;
+    --uui-color-600: #6C6F80;
+    --uui-color-700: #474A59;
+    --uui-color-800: #303240;
+    --uui-color-900: #1D1E26;
+    --uui-contrast-color-700: #{contrast(#474A59, colors.$night700, white)};
+}
+
+.color-cobalt {
+    --uui-color-500: #32B2FB;
+    --uui-color-600: #2196F3;
+    --uui-color-700: #0E74E2;
+    --uui-color-800: #0453C7;
+    --uui-color-900: #003399;
+    --uui-contrast-color-700: #{contrast(#0E74E2, colors.$night700, white)};
+}
+
+.color-lavanda {
+    --uui-color-500: #6362C9;
+    --uui-color-600: #3F51B5;
+    --uui-color-700: #2E3A9D;
+    --uui-color-800: #21288D;
+    --uui-color-900: #191980;
+    --uui-contrast-color-700: #{contrast(#2E3A9D, colors.$night700, white)};
+}
+
+.color-fuchsia {
+    --uui-color-500: #F5527B;
+    --uui-color-600: #E91E63;
+    --uui-color-700: #CD0053;
+    --uui-color-800: #B00052;
+    --uui-color-900: #94004C;
+    --uui-contrast-color-700: #{contrast(#CD0053, colors.$night700, white)};
+}
+
+.color-white {
+    --uui-color-500: #{lighten(colors.$white, 20%)};
+    --uui-color-600: #{lighten(colors.$white, 10%)};
+    --uui-color-700: #{colors.$white};
+    --uui-color-800: #{darken(colors.$white, 10%)};
+    --uui-color-900: #{darken(colors.$white, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$white, colors.$night700, white)};
+}
+
+.color-night50 {
+    --uui-color-500: #{lighten(colors.$night50, 20%)};
+    --uui-color-600: #{lighten(colors.$night50, 10%)};
+    --uui-color-700: #{colors.$night50};
+    --uui-color-800: #{darken(colors.$night50, 10%)};
+    --uui-color-900: #{darken(colors.$night50, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night50, colors.$night700, white)};
+}
+
+.color-night100 {
+    --uui-color-500: #{lighten(colors.$night100, 20%)};
+    --uui-color-600: #{lighten(colors.$night100, 10%)};
+    --uui-color-700: #{colors.$night100};
+    --uui-color-800: #{darken(colors.$night100, 10%)};
+    --uui-color-900: #{darken(colors.$night100, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night100, colors.$night700, white)};
+}
+
+.color-night200 {
+    --uui-color-500: #{lighten(colors.$night200, 20%)};
+    --uui-color-600: #{lighten(colors.$night200, 10%)};
+    --uui-color-700: #{colors.$night200};
+    --uui-color-800: #{darken(colors.$night200, 10%)};
+    --uui-color-900: #{darken(colors.$night200, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night200, colors.$night700, white)};
+}
+
+.color-night300 {
+    --uui-color-500: #{lighten(colors.$night300, 20%)};
+    --uui-color-600: #{lighten(colors.$night300, 10%)};
+    --uui-color-700: #{colors.$night300};
+    --uui-color-800: #{darken(colors.$night300, 10%)};
+    --uui-color-900: #{darken(colors.$night300, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night300, colors.$night700, white)};
+}
+
+.color-night400 {
+    --uui-color-500: #{lighten(colors.$night400, 20%)};
+    --uui-color-600: #{lighten(colors.$night400, 10%)};
+    --uui-color-700: #{colors.$night400};
+    --uui-color-800: #{darken(colors.$night400, 10%)};
+    --uui-color-900: #{darken(colors.$night400, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night400, colors.$night700, white)};
+}
+
+.color-night500 {
+    --uui-color-500: #{lighten(colors.$night500, 20%)};
+    --uui-color-600: #{lighten(colors.$night500, 10%)};
+    --uui-color-700: #{colors.$night500};
+    --uui-color-800: #{darken(colors.$night500, 10%)};
+    --uui-color-900: #{darken(colors.$night500, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night500, colors.$night700, white)};
+}
+
+.color-night600 {
+    --uui-color-500: #{lighten(colors.$night600, 20%)};
+    --uui-color-600: #{lighten(colors.$night600, 10%)};
+    --uui-color-700: #{colors.$night600};
+    --uui-color-800: #{darken(colors.$night600, 10%)};
+    --uui-color-900: #{darken(colors.$night600, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night600, colors.$night700, white)};
+}
+
+.color-night700 {
+    --uui-color-500: #{lighten(colors.$night700, 20%)};
+    --uui-color-600: #{lighten(colors.$night700, 10%)};
+    --uui-color-700: #{colors.$night700};
+    --uui-color-800: #{darken(colors.$night700, 10%)};
+    --uui-color-900: #{darken(colors.$night700, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night700, colors.$night700, white)};
+}
+
+.color-night800 {
+    --uui-color-500: #{lighten(colors.$night800, 20%)};
+    --uui-color-600: #{lighten(colors.$night800, 10%)};
+    --uui-color-700: #{colors.$night800};
+    --uui-color-800: #{darken(colors.$night800, 10%)};
+    --uui-color-900: #{darken(colors.$night800, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night700, colors.$night800, white)};
+}
+
+.color-night900 {
+    --uui-color-500: #{lighten(colors.$night900, 20%)};
+    --uui-color-600: #{lighten(colors.$night900, 10%)};
+    --uui-color-700: #{colors.$night900};
+    --uui-color-800: #{darken(colors.$night900, 10%)};
+    --uui-color-900: #{darken(colors.$night900, 20%)};
+    --uui-contrast-color-700: #{contrast(colors.$night900, colors.$night700, white)};
+}

package/scss/loveship-colors.scss

@@ -1,56 +1,56 @@
-// 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
+// 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
 );

package/scss/promo/colors.scss

@@ -1,71 +1,71 @@
-/* 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: #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);
+