mediacube-ui 0.1.352 → 0.1.354

package/src/elements/McButton/McButton.vue

@@ -35,7 +35,6 @@
 <script>
 import McSvgIcon from '../McSvgIcon/McSvgIcon'
 import { VTooltip } from 'v-tooltip'
-import { checkContrastColor } from '../../utils/checkColor'
 
 VTooltip.options.defaultBoundariesElement = 'window'
 export default {
@@ -273,7 +272,6 @@ export default {
                 'mc-button--disabled': this.disabled,
                 'mc-button--rounded': this.rounded && /-compact$/.test(this.size),
                 'mc-button--semi-rounded': this.semiRounded,
-                'mc-button--contrast': this.isContrast,
                 'mc-button--full-width': this.fullWidth,
                 'mc-button--uppercase': this.uppercase,
                 'mc-button--shadow': this.shadow,
@@ -305,25 +303,13 @@ export default {
                 type: currentStyle,
             }
         },
-        /**
-         * Так как сейчас мы используем светлую тему, то проверяем контраст цвета на основе белого
-         * Проверяем только для main цветов, так как остальные должны подходить по стандарту
-         * TODO: сделать проверку контраста для темных тем
-         * */
-        isContrast() {
-            let [color] = this.variation.split('-') || []
-            return color.includes('main') && checkContrastColor(color, [255, 255, 255])
-        },
         styles() {
             let hoverBrightness
             let textColor
             switch (this.buttonVariation.type) {
                 case 'flat':
                 case 'outline':
-                case 'invert': {
-                    if (this.isContrast) textColor = 'black'
-                    break
-                }
+                case 'invert':
                 case 'link':
                     textColor = this.buttonVariation.color
                     break
@@ -338,7 +324,7 @@ export default {
                             break
                         }
                         default: {
-                            textColor = this.isContrast ? 'black' : 'white'
+                            textColor = 'main-contrast'
                         }
                     }
                     break
@@ -383,15 +369,15 @@ export default {
         tooltipOptions() {
             return this.tooltip
                 ? {
-                      content: this.tooltip,
-                      placement: 'top',
-                      classes: 'mc-tooltip mc-tooltip--width-m mc-tooltip--size-s',
-                      trigger: 'hover focus',
-                      show: false,
-                      container: 'body',
-                      template: `<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"><div class="tooltip-inner__content"></div></div> </div>`,
-                      innerSelector: '.tooltip-inner__content',
-                  }
+                    content: this.tooltip,
+                    placement: 'top',
+                    classes: 'mc-tooltip mc-tooltip--width-m mc-tooltip--size-s',
+                    trigger: 'hover focus',
+                    show: false,
+                    container: 'body',
+                    template: `<div class="tooltip" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"><div class="tooltip-inner__content"></div></div> </div>`,
+                    innerSelector: '.tooltip-inner__content',
+                }
                 : null
         },
     },
@@ -404,7 +390,7 @@ export default {
         animateUp() {
             if (this.animation) {
                 this.customAnimation?.text &&
-                    (this.$refs['mc-button'].querySelector('.mc-button__text').innerHTML = this.customAnimation?.text)
+                (this.$refs['mc-button'].querySelector('.mc-button__text').innerHTML = this.customAnimation?.text)
                 this.custom_background = this.customAnimation?.background
             }
         },
@@ -465,7 +451,6 @@ export default {
     -webkit-appearance: none;
     -webkit-text-fill-color: currentColor;
     z-index: 0;
-
     &__loader {
         display: none;
         @include align(true, true, absolute);
@@ -480,18 +465,6 @@ export default {
         align-items: center;
         z-index: 1;
     }
-    &--contrast {
-        color: var(--mc-button-text-color) !important;
-        #{$block-name} {
-            &--is-active,
-            &.nuxt-link-active {
-                color: var(--color-main-dark);
-                background-color: transparent;
-                border-color: transparent;
-                pointer-events: none;
-            }
-        }
-    }
     &__text {
         @include ellipsis($display: inline-block);
         @include layout-flex-fix();
@@ -508,7 +481,6 @@ export default {
                 }
             }
         }
-
         &:active {
             #{$block-name}__background {
                 @content;
@@ -518,7 +490,6 @@ export default {
     @include hoverMixin {
         filter: brightness(var(--mc-button-hover-brightness));
     }
-
     &--size {
         &-xxs {
             height: $size-300;
@@ -526,7 +497,6 @@ export default {
             letter-spacing: normal;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-300);
                 padding: $space-50;
@@ -537,7 +507,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-200);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -553,7 +522,6 @@ export default {
             letter-spacing: normal;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-400);
                 padding: 6px;
@@ -564,7 +532,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-250);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -580,7 +547,6 @@ export default {
             letter-spacing: normal;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-500);
                 padding: $space-150;
@@ -591,7 +557,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-250);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -606,7 +571,6 @@ export default {
             padding: 0 $space-200;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-500);
                 padding: $space-100;
@@ -617,7 +581,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-300);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-50;
@@ -632,7 +595,6 @@ export default {
             padding: $space-150 $space-300;
             font-size: $font-size-200;
             line-height: $line-height-200;
-
             &-compact {
                 @include size($size-600);
                 padding: $space-150;
@@ -643,7 +605,6 @@ export default {
             .mc-svg-icon {
                 @include size($size-300);
             }
-
             #{$block-name} {
                 &__prepend {
                     margin-inline-end: $space-100;
@@ -653,7 +614,6 @@ export default {
                 }
             }
         }
-
         &-s,
         &-m,
         &-l {
@@ -667,7 +627,6 @@ export default {
             }
         }
     }
-
     &__background {
         position: absolute;
         top: 0;
@@ -709,22 +668,9 @@ export default {
                     opacity: 0.1 !important;
                 }
             }
-            // TODO check contast colors
-            //&#{$block-name}--contrast {
-            //    #{$block-name} {
-            //        &__background {
-            //            opacity: 0.4 !important;
-            //        }
-            //    }
-            //}
             @include hoverMixin {
                 opacity: 0.2 !important;
             }
-            //&#{$block-name}--contrast {
-            //    @include hoverMixin {
-            //        opacity: 0.6 !important;
-            //    }
-            //}
         }
         &-flat {
             color: var(--mc-button-background-color);
@@ -744,9 +690,6 @@ export default {
             &#{$block-name}--size-l {
                 line-height: $line-height-250;
             }
-            &#{$block-name}--contrast {
-                filter:  brightness(80%);
-            }
             &#{$block-name} {
                 &--disabled {
                     opacity: $opacity-disabled;
@@ -760,7 +703,6 @@ export default {
                     filter: brightness(0.85);
                 }
             }
-
             &:active {
                 filter: brightness(0.85);
             }
@@ -786,7 +728,6 @@ export default {
             text-decoration: underline !important;
         }
     }
-
     &--secondary-color {
         @media #{$media-desktop} {
             &:hover {
@@ -797,12 +738,10 @@ export default {
             color: var(--mc-button-secondary-color);
         }
     }
-
     &--uppercase {
         text-transform: uppercase;
         letter-spacing: $letter-spacing-m;
     }
-
     &--is-active,
     &.nuxt-link-active {
         color: var(--color-main);
@@ -810,19 +749,15 @@ export default {
         border-color: transparent;
         pointer-events: none;
     }
-
     &--rounded {
         border-radius: $radius-circle;
     }
-
     &--semi-rounded {
         border-radius: 50px;
     }
-
     &--full-width {
         width: 100%;
     }
-
     &--text-align {
         &-left {
             justify-content: flex-start;
@@ -834,20 +769,17 @@ export default {
             justify-content: flex-end;
         }
     }
-
     &--loading,
     &--icon-loading,
     &--disabled {
         pointer-events: none;
     }
-
     &--loading {
         #{$block-name} {
             &__loader {
                 display: inline-block;
             }
         }
-
         > *:not(#{$block-name}__loader) {
             opacity: 0;
         }
@@ -862,7 +794,6 @@ export default {
             }
         }
     }
-
     &--disabled {
         color: $color-outline-gray;
         cursor: not-allowed;
@@ -873,7 +804,6 @@ export default {
             }
         }
     }
-
     &--inactive {
         pointer-events: none;
     }

package/src/patterns/McSideBar/McSideBarButton/McSideBarButton.vue

@@ -24,6 +24,7 @@
                     v-if="info || withIndicator"
                     slot="icon-append"
                     variation="main"
+                    text-color="main-contrast"
                     class="mc-side-bar-button__chip"
                     :class="{ indicator: withIndicator }"
                 >

package/src/patterns/McTable/McTableCol/McTableCol.vue

@@ -276,12 +276,12 @@ export default {
         }
         @include col-right-color($vxe-table-row-hover-background-color);
         &.row--current {
-            @include col-right-color($vxe-table-row-hover-current-background-color);
+            @include col-right-color(transparent);
         }
     }
     &.row--current {
         background-color: var(--color-main-alpha-10) !important;
-        @include col-right-color($vxe-table-row-current-background-color);
+        @include col-right-color(transparent);
     }
     // описка названия в библиотеке таблицы
     &.row--cheched {

package/src/styles/global.scss

@@ -123,12 +123,12 @@ a {
 
 ::selection {
   background: var(--color-main);
-  color: $color-white;
+  color: var(--color-main-contrast);
 }
 
 ::-moz-selection {
   background: var(--color-main);
-  color: $color-white;
+  color: var(--color-main-contrast);
 }
 
 input,
@@ -289,6 +289,7 @@ pre {
     #{'--color-'}#{$name}: #{$color};
   }
   // Default main project colors
+  --color-main-contrast: $color-white;
   --color-main: $color-purple;
   --color-main-dark: $color-hover-purple;
   @for $i from 1 through 10 {

package/src/tokens/gradients.scss

@@ -8,7 +8,7 @@ $gradient-blue: linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%); /* Нотиф
 $gradient-yellow: linear-gradient(180deg, #FEE41A 0%, #F89B35 100%); /* Столбики в графике 3 порядка */
 $gradient-green: linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%); /* Столбики в графике 2 порядка */
 $gradient-red: linear-gradient(180deg, #F26567 0%, #F79440 100%); /* Столбики в графике 1 порядка */
-$gradient-purple: linear-gradient(270deg, var(--color-main-dark) 0%, var(--color-main) 100%); /* Основной градиент для MCPay */
+$gradient-purple: linear-gradient(270deg, var(--color-main) 0%, var(--color-main-dark) 100%); /* Основной градиент для MCPay */
 $gradient-purple-pink: linear-gradient(90deg, var(--color-main) 2%, #fe6ffc 100%); /*Градиент промоакции*/
 $gradient-blue-purple: linear-gradient(90deg, #18bfe3 20%, var(--color-main) 70%); /*Градиент промоакции*/
 $gradient-dark-blue: linear-gradient(90deg, #5550EF 0%, var(--color-main) 100%); /*Градиент автоплатежей*/

package/src/utils/checkColor.js

@@ -1,38 +0,0 @@
-export function hexToRGB(hex, alpha, byArray = false) {
-    const r = parseInt(hex.slice(1, 3), 16)
-    const g = parseInt(hex.slice(3, 5), 16)
-    const b = parseInt(hex.slice(5, 7), 16)
-    if (byArray) return [r, g, b]
-    const rgb_color = `${r}, ${g}, ${b}`
-    return alpha ? `rgba(${rgb_color}, ${alpha})` : `rgb(${rgb_color})`
-}
-
-/**
- * Проверяем контрастность по формуле
- * https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-procedure
- * bgColor -
- * */
-export function checkContrastColor(colorName, bgColor) {
-    const RED = 0.2126
-    const GREEN = 0.7152
-    const BLUE = 0.0722
-    const GAMMA = 2.4
-
-    function luminance(r, g, b) {
-        const a = [r, g, b].map(v => {
-            v /= 255
-            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA)
-        })
-        return a[0] * RED + a[1] * GREEN + a[2] * BLUE
-    }
-
-    function contrast(rgb1, rgb2) {
-        const lum1 = luminance(...rgb2)
-        const lum2 = luminance(...rgb1)
-        const brightest = Math.max(lum1, lum2)
-        const darkest = Math.min(lum1, lum2)
-        return (brightest + 0.05) / (darkest + 0.05)
-    }
-    const color = getComputedStyle(document.querySelector(':root')).getPropertyValue(`--color-${colorName}`) || colorName
-    return contrast(hexToRGB(color, null, true), bgColor) < 4
-}