@megafon/ui-core 8.17.1 → 8.17.3

package/styles/base.scss

@@ -0,0 +1,150 @@
+// BREAKPOINTS
+$mobileExtraSmallEnd: 359px;
+$mobileSmallEnd: 479px;
+$mobileMiddleStart: 480px;
+$mobileMiddleEnd: 767px;
+$mobileBigStart: 768px;
+$mobileBigEnd: 1023px;
+$desktopSmallStart: 1024px;
+$desktopSmallEnd: 1279px;
+$desktopMiddleStart: 1280px;
+$desktopMiddleEnd: 1439px;
+$desktopBigStart: 1440px;
+$desktopBigEnd: 1599px;
+
+$mobileXS: 'screen and (max-width: #{$mobileExtraSmallEnd})'; // ∞ - 359
+$mobile: 'screen and (max-width: #{$mobileBigEnd})'; // ∞ - 1023
+$mobileS: 'screen and (max-width: #{$mobileSmallEnd})'; // ∞ - 479
+$mobileM: 'screen and (min-width: #{$mobileMiddleStart}) and (max-width: #{$mobileMiddleEnd})'; // 480 - 767
+$mobileB: 'screen and (min-width: #{$mobileBigStart}) and (max-width: #{$mobileBigEnd})'; // 768 - 1023
+$mobileSM: 'screen and (max-width: #{$mobileMiddleEnd})'; // ∞ - 767
+$mobileMB: 'screen and (min-width: #{$mobileMiddleStart}) and (max-width: #{$mobileBigEnd})'; // 480 - 1023
+$mobileMU: 'screen and (min-width: #{$mobileMiddleStart})'; // 480 - ∞
+$mobileBU: 'screen and (min-width: #{$mobileBigStart})'; // 768 - ∞
+$desktop: 'screen and (min-width: #{$desktopSmallStart})'; // 1024 - ∞
+$desktopS: 'screen and (min-width: #{$desktopSmallStart}) and (max-width: #{$desktopSmallEnd})'; // 1024 - 1279
+$desktopM: 'screen and (min-width: #{$desktopMiddleStart}) and (max-width: #{$desktopMiddleEnd})'; // 1280 - 1439
+$desktopB: 'screen and (min-width: #{$desktopBigStart}) and (max-width: #{$desktopBigEnd})'; // 1440 - 1599
+$desktopBU: 'screen and (min-width: #{$desktopBigStart})'; // 1440 - ∞
+$desktopSM: 'screen and (min-width: #{$desktopSmallStart}) and (max-width: #{$desktopMiddleEnd})'; // 1024 - 1439
+$desktopMU: 'screen and (min-width: #{$desktopMiddleStart})'; // 1280 - ∞
+
+$retina: 'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)';
+
+$mobileRetina: '#{$mobile} and (-webkit-min-device-pixel-ratio: 2), #{$mobile} and (min--moz-device-pixel-ratio: 2), #{$mobile} and (-o-min-device-pixel-ratio: 2/1), #{$mobile} and (min-device-pixel-ratio: 2), #{$mobile} and (min-resolution: 192dpi), #{$mobile} and (min-resolution: 2dppx)';
+
+$hover: 'screen and (hover:hover)';
+$hoverNone: 'screen and (hover:none)';
+
+// INDENTS
+$contentHorizontalIndentMobileXS: 8px;
+$contentHorizontalIndentMobileSM: 16px;
+$contentHorizontalIndentMobileB: 48px;
+$contentHorizontalIndentDesktopS: 64px;
+$contentHorizontalIndentDesktopMU: 80px;
+$contentVerticalIndentDesktop: 96px;
+$contentVerticalIndentMobileB: 72px;
+$contentVerticalIndentMobileSM: 56px;
+$maxContentWidth: 1440px;
+
+// TRANSITIONS
+$defaultTransitionTiming: 0.3s;
+
+// MIXINS
+
+@mixin Graphik {
+    font-family: Graphik, Arial, sans-serif;
+}
+@mixin fontFamily {
+    font-family: inherit;
+}
+@mixin commonFont {
+    font-size: 15px;
+    line-height: 24px;
+}
+@mixin smallFont {
+    font-size: 12px;
+    line-height: 18px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    margin: 0;
+}
+
+@mixin h1 {
+    font-weight: 600;
+    font-size: 36px;
+    line-height: 30px;
+    letter-spacing: 0.5px;
+
+    @media #{$mobileB} {
+        font-size: 36px;
+        line-height: 40px;
+    }
+    @media #{$desktop} {
+        font-size: 44px;
+        line-height: 48px;
+    }
+    @media #{$desktopMU} {
+        font-size: 52px;
+        line-height: 56px;
+    }
+}
+@mixin h2 {
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 28px;
+    letter-spacing: 0.5px;
+
+    @media #{$mobileB} {
+        font-size: 26px;
+        line-height: 32px;
+    }
+    @media #{$desktop} {
+        font-size: 28px;
+        line-height: 36px;
+    }
+    @media #{$desktopMU} {
+        font-size: 32px;
+        line-height: 40px;
+    }
+}
+@mixin h3 {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: 0.5px;
+
+    @media #{$desktopMU} {
+        font-size: 20px;
+        line-height: 28px;
+    }
+}
+@mixin h5 {
+    @include commonFont;
+    font-weight: 500;
+}
+@mixin p {
+    @include commonFont;
+    font-weight: 400;
+}
+@mixin pIndents {
+    margin-top: 0;
+    margin-bottom: 16px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+@mixin link {
+    color: var(--systemBlue);
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

package/styles/colors.css

@@ -0,0 +1,165 @@
+:root {
+    /* Basic Colors */
+    --brandGreen: #00B956;
+    --brandPurple: #731982;
+    --base: #FFFFFF;
+    --content: #333333;
+    --spbSky0: #F6F6F6;
+    --spbSky1: #EDEDED;
+    --spbSky2: #D8D8D8;
+    --spbSky3: #999999;
+
+    /* Secondary Colors */
+    --lime: #AAFF00;
+    --sky: #3CB9FF;
+    --night: #1E64AA;
+    --berry: #AA5AFF;
+    --flamingo: #E64DE6;
+
+    /* System Colors */
+    --fury: #F62434;
+    --137C: #FFA717;
+    --systemBlue: #34AAF2;
+    --background: #FFFFFF;
+    --buttonHoverGreen: #10E272;
+    --buttonHoverPurple: #A500BF;
+    --buttonHoverGrey: #D6D6D6;
+    --buttonHoverGreenSoft: #B6FFDA;
+    --buttonHoverPurpleSoft: #FFD9FF;
+    --buttonDown: #404D46;
+    --overlay: #000000CC;
+
+    /* Gradients Basic*/
+    --gradientGreen1: linear-gradient(45deg, #00B956 50%, #AAFF00 100%);
+    --gradientGreen2: linear-gradient(45deg, #00B956 50%, #1EFA64 100%);
+    --gradientGreen3: linear-gradient(45deg, #00B956 50%, #00D1FF 100%);
+    --gradientPurple1: linear-gradient(45deg, #731982 50%, #AA5AFF 100%);
+    --gradientPurple2: linear-gradient(45deg, #731982 50%, #E64DE6 100%);
+    --gradientPurple3: linear-gradient(45deg, #731982 50%, #00D2FF 100%);
+    --gradientPurple4: linear-gradient(45deg, #731982 50%, #1B61AC 100%);
+
+    /* Gradients Secondary*/
+    --gradientLime: linear-gradient(45deg, #AAFF00 50%, #00D1FF 100%);
+    --gradientGrass: linear-gradient(45deg, #1EFA64 50%, #00D1FF 100%);
+    --gradientBerry1: linear-gradient(45deg, #AA5AFF 50%, #00D1FF 100%);
+    --gradientBerry2: linear-gradient(45deg, #AA5AFF 50%, #E64DE6 100%);
+
+    /* Gradients System*/
+    --gradientScrim: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 20%);
+
+    /* Static */
+    --stcWhite: #FFFFFF;
+    --stcBlack: #333333;
+
+    /* Static Opacity */
+    --stcWhite5: #FFFFFF0D;
+    --stcWhite10: #FFFFFF1A;
+    --stcWhite20: #FFFFFF33;
+    --stcWhite50: #FFFFFF80;
+    --stcBlack5: #3333330D;
+    --stcBlack10: #3333331A;
+    --stcBlack20: #33333333;
+    --stcBlack50: #33333380;
+
+    /* Soft  */
+    --brandGreen80: #0CDC78;
+    --brandGreen20: #DDFFEC;
+    --brandPurple80: #A367C1;
+    --brandPurple20: #F2E5FF;
+    --night80: #4B83BB;
+    --night20: #D2E0EE;
+    --sky80: #63C7FF;
+    --sky20: #D8F1FF;
+    --flamingo80: #EB70EB;
+    --flamingo20: #FADBFA;
+    --lime80: #CAFF60;
+    --lime20: #E7FFB7;
+    --berry80: #BB7BFF;
+    --berry20: #EEDEFF;
+    --137C80: #FFB945;
+    --137C20: #FFEDD1;
+    --fury80: #F8505D;
+    --fury20: #FFC5C9;
+
+    /* RGB Colors */
+    --spbSky0-rgb: 246, 246, 246;
+    --spbSky1-rgb: 237, 237, 237;
+    --spbSky2-rgb: 216, 216, 216;
+    --brandGreen-rgb: 0, 185, 86;
+    --background-rgb: 255, 255, 255;
+    --stcBlack-rgb: 51, 51, 51;
+}
+
+[data-theme='dark'] {
+    --brandGreen: #00B956;
+    --brandPurple: #731982;
+    --base: #333333;
+    --content: #FFFFFF;
+    --spbSky0: #3D3D3D;
+    --spbSky1: #454545;
+    --spbSky2: #595959;
+    --spbSky3: #999999;
+    --lime: #AAFF00;
+    --sky: #3CB9FF;
+    --night: #1E64AA;
+    --berry: #AA5AFF;
+    --flamingo: #E64DE6;
+    --fury: #F62434;
+    --137C: #FFA717;
+    --systemBlue: #34AAF2;
+    --background: #1F1F1F;
+    --buttonHoverGreen: #10E272;
+    --buttonHoverPurple: #A500BF;
+    --buttonHoverGrey: #D6D6D6;
+    --buttonHoverGreenSoft: #355A46;
+    --buttonHoverPurpleSoft: #492B50;
+    --buttonDown: #404D46;
+    --overlay: #000000CC;
+    --gradientGreen1: linear-gradient(45deg, #00B956 50%, #AAFF00 100%);
+    --gradientGreen2: linear-gradient(45deg, #00B956 50%, #1EFA64 100%);
+    --gradientGreen3: linear-gradient(45deg, #00B956 50%, #00D1FF 100%);
+    --gradientPurple1: linear-gradient(45deg, #731982 50%, #AA5AFF 100%);
+    --gradientPurple2: linear-gradient(45deg, #731982 50%, #E64DE6 100%);
+    --gradientPurple3: linear-gradient(45deg, #731982 50%, #00D2FF 100%);
+    --gradientPurple4: linear-gradient(45deg, #731982 50%, #1B61AC 100%);
+    --gradientLime: linear-gradient(45deg, #AAFF00 50%, #00D1FF 100%);
+    --gradientGrass: linear-gradient(45deg, #1EFA64 50%, #00D1FF 100%);
+    --gradientBerry1: linear-gradient(45deg, #AA5AFF 50%, #00D1FF 100%);
+    --gradientBerry2: linear-gradient(45deg, #AA5AFF 50%, #E64DE6 100%);
+    --gradientScrim: linear-gradient(270deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 20%);
+    --stcWhite: #FFFFFF;
+    --stcBlack: #333333;
+    --stcWhite5: #FFFFFF0D;
+    --stcWhite10: #FFFFFF1A;
+    --stcWhite20: #FFFFFF33;
+    --stcWhite50: #FFFFFF80;
+    --stcBlack5: #3333330D;
+    --stcBlack10: #3333331A;
+    --stcBlack20: #33333333;
+    --stcBlack50: #33333380;
+    --brandGreen80: #24804E;
+    --brandGreen20: #314138;
+    --brandPurple80: #562C64;
+    --brandPurple20: #33273C;
+    --night80: #1E568E;
+    --night20: #1F2D3B;
+    --sky80: #369AD2;
+    --sky20: #253E4C;
+    --flamingo80: #BE43BE;
+    --flamingo20: #472847;
+    --lime80: #8ED206;
+    --lime20: #3B4C19;
+    --berry80: #8E4ED2;
+    --berry20: #3B2B4C;
+    --137C80: #BC862E;
+    --137C20: #4A3D27;
+    --fury80: #CA3A43;
+    --fury20: #442B2D;
+    --spbSky0-rgb: 61, 61, 61;
+    --spbSky1-rgb: 69, 69, 69;
+    --spbSky2-rgb: 89, 89, 89;
+    --background-rgb: 31, 31, 31;
+    --brandGreen-rgb: 0, 185, 86;
+    --stcBlack-rgb: 51, 51, 51;
+}
+

package/styles/colorsDark.css

@@ -0,0 +1,86 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+        /* Basic Colors */
+        --brandGreen: #00B956;
+        --brandPurple: #731982;
+        --base: #333333;
+        --content: #FFFFFF;
+        --spbSky0: #3D3D3D;
+        --spbSky1: #454545;
+        --spbSky2: #595959;
+        --spbSky3: #999999;
+
+        /* Secondary Colors */
+        --lime: #AAFF00;
+        --sky: #3CB9FF; 
+        --night: #1E64AA;
+        --berry: #AA5AFF;
+        --flamingo: #E64DE6;
+
+        /* System Colors */
+        --fury: #F62434;
+        --137C: #FFA717;
+        --systemBlue: #34AAF2;
+        --background: #1F1F1F;
+        --buttonHoverGreen: #10E272;
+        --buttonHoverPurple: #A500BF;
+        --buttonHoverGrey: #D6D6D6;
+        --buttonHoverGreenSoft: #B6FFDA;
+        --buttonHoverPurpleSoft: #FFD9FF;
+        --buttonDown: #404D46;
+        --overlay: #000000CC;
+
+        /* Gradients Basic*/
+        --gradientGreen1: linear-gradient(270deg, #AAFF00 0%, #00B956 50%);
+        --gradientGreen2: linear-gradient(90deg, #00B956 50%, #1EFA64 100%);
+        --gradientGreen3: linear-gradient(90deg, #00B956 50%, #00D1FF 100%);
+        --gradientPurple1: linear-gradient(95.39deg, #731982 55%, #AA5AFF 90%);
+        --gradientPurple2: linear-gradient(90deg, #731982 50%, #E64DE6 100%);
+        --gradientPurple3: linear-gradient(90deg, #731982 50:, #00D2FF 100%);
+        --gradientPurple4: linear-gradient(90deg, #731982 50%, #1B61AC 100%);
+
+        /* Gradients Secondary*/
+        --gradientLime: linear-gradient(90deg, #AAFF00 50%, #00D1FF 100%);
+        --gradientGrass: linear-gradient(90deg, #1EFA64 50%, #00D1FF 100%);
+        --gradientBerry1: linear-gradient(90deg, #AA5AFF 50%, #00D1FF 100%);
+        --gradientBerry2: linear-gradient(90deg, #AA5AFF 50%, #E64DE6 100%);
+
+
+        /* Gradients System*/
+        --gradientScrim: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 22%);
+
+        /* Static */
+        --stcWhite: #FFFFFF;
+        --stcBlack: #333333;
+
+        /* Static Opacity */
+        --stcWhite5: #FFFFFF0D;
+        --stcWhite10: #FFFFFF1A;
+        --stcWhite20: #FFFFFF33;
+        --stcWhite50: #FFFFFF80;
+        --stcBlack5: #3333330D;
+        --stcBlack10: #3333331A;
+        --stcBlack20: #33333333;
+        --stcBlack50: #33333380;
+
+        /* Soft  */
+        --brandGreen80: #24804E;
+        --brandGreen20: #314138;
+        --brandPurple80: #562C64;
+        --brandPurple20: #33273C;
+        --night80: #1E568E;
+        --night20: #1F2D3B;
+        --sky80: #369AD2;
+        --sky20: #253E4C;
+        --flamingo80: #BE43BE;
+        --flamingo20: #472847;
+        --lime80: #8ED206;
+        --lime20: #3B4C19;
+        --berry80: #8E4ED2;
+        --berry20: #3B2B4C;
+        --137C80: #BC862E;
+        --137C20: #4A3D27;
+        --fury80: #CA3A43;
+        --fury20: #442B2D;
+    }
+}