mediacube-ui 0.1.351 → 0.1.352

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.352](https://github.com/MediaCubeCo/mcui/compare/v0.1.351...v0.1.352) (2025-01-14)
+
 ### [0.1.351](https://github.com/MediaCubeCo/mcui/compare/v0.1.350...v0.1.351) (2025-01-08)
 
 ### [0.1.350](https://github.com/MediaCubeCo/mcui/compare/v0.1.349...v0.1.350) (2025-01-08)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.351",
+  "version": "0.1.352",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,

package/src/elements/McButton/McButton.vue

@@ -35,6 +35,7 @@
 <script>
 import McSvgIcon from '../McSvgIcon/McSvgIcon'
 import { VTooltip } from 'v-tooltip'
+import { checkContrastColor } from '../../utils/checkColor'
 
 VTooltip.options.defaultBoundariesElement = 'window'
 export default {
@@ -114,7 +115,7 @@ export default {
          */
         variation: {
             type: String,
-            default: 'purple',
+            default: 'main',
         },
         /**
          *  Размеры:
@@ -272,6 +273,7 @@ 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,
@@ -288,12 +290,11 @@ export default {
             const currentStyle = texts[texts.length - 1]
             let color = variation.replace(`-${currentStyle}`, '')
             switch (currentStyle) {
-                case 'link':
                 case 'flat':
                 case 'outline':
-                case 'invert': {
+                case 'invert':
+                case 'link':
                     break
-                }
                 default: {
                     color = variation
                     break
@@ -304,16 +305,28 @@ 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 'link':
                 case 'flat':
                 case 'outline':
                 case 'invert': {
+                    if (this.isContrast) textColor = 'black'
                     break
                 }
+                case 'link':
+                    textColor = this.buttonVariation.color
+                    break
                 default: {
                     switch (this.buttonVariation.color) {
                         case 'yellow':
@@ -325,7 +338,7 @@ export default {
                             break
                         }
                         default: {
-                            textColor = 'white'
+                            textColor = this.isContrast ? 'black' : 'white'
                         }
                     }
                     break
@@ -467,7 +480,18 @@ 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();
@@ -685,9 +709,22 @@ 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);
@@ -707,6 +744,9 @@ export default {
             &#{$block-name}--size-l {
                 line-height: $line-height-250;
             }
+            &#{$block-name}--contrast {
+                filter:  brightness(80%);
+            }
             &#{$block-name} {
                 &--disabled {
                     opacity: $opacity-disabled;
@@ -765,7 +805,7 @@ export default {
 
     &--is-active,
     &.nuxt-link-active {
-        color: $color-purple;
+        color: var(--color-main);
         background-color: transparent;
         border-color: transparent;
         pointer-events: none;

package/src/elements/McCropper/McCropper.vue

@@ -80,7 +80,7 @@ export default {
 .mc-cropper {
     $block-name: &;
 
-    $color-main: $color-purple;
+    $color-main: var(--color-main);
 
     .cropper {
         &-modal {

package/src/elements/McDatePicker/McDatePicker.vue

@@ -56,7 +56,7 @@
                                             v-for="preset in customPresets"
                                             :key="preset.title"
                                             variation="black-link"
-                                            secondary-color="purple"
+                                            secondary-color="main"
                                             @click="handlerPreselectRange(preset.period)"
                                         >
                                             {{ preset.title }}
@@ -66,7 +66,7 @@
                                         <mc-button
                                             v-if="placeholders.week"
                                             variation="black-link"
-                                            secondary-color="purple"
+                                            secondary-color="main"
                                             @click="selectPeriod('week')"
                                         >
                                             {{ placeholders.week }}
@@ -74,7 +74,7 @@
                                         <mc-button
                                             v-if="placeholders.month"
                                             variation="black-link"
-                                            secondary-color="purple"
+                                            secondary-color="main"
                                             @click="selectPeriod('month')"
                                         >
                                             {{ placeholders.month }}
@@ -82,7 +82,7 @@
                                         <mc-button
                                             v-if="placeholders.quarter"
                                             variation="black-link"
-                                            secondary-color="purple"
+                                            secondary-color="main"
                                             @click="selectPeriod('quarter')"
                                         >
                                             {{ placeholders.quarter }}
@@ -90,7 +90,7 @@
                                         <mc-button
                                             v-if="placeholders.year"
                                             variation="black-link"
-                                            secondary-color="purple"
+                                            secondary-color="main"
                                             @click="selectPeriod('year')"
                                         >
                                             {{ placeholders.year }}
@@ -99,7 +99,7 @@
                                 </div>
                                 <mc-button
                                     v-if="placeholders.confirm"
-                                    variation="purple-outline"
+                                    variation="main-outline"
                                     size="xs"
                                     @click="() => handleSubmit(emit)"
                                 >
@@ -635,7 +635,7 @@ export default {
         color: $color-black;
         &:hover,
         &:focus {
-            border-color: $color-purple;
+            border-color: var(--color-main);
         }
         &::placeholder {
             color: $color-gray;
@@ -762,7 +762,7 @@ export default {
             .mx-btn-text {
                 color: $color-black;
                 &:hover {
-                    color: $color-purple;
+                    color: var(--color-main);
                 }
             }
             .mx-icon {
@@ -816,19 +816,19 @@ export default {
             border-radius: $radius-100;
         }
         &:hover {
-            color: $color-purple;
-            background-color: fade-out($color-purple, 0.9);
+            color: var(--color-main);
+            background-color: var(--color-main-alpha-10);
             border-radius: $radius-100;
         }
         &.today {
-            color: $color-purple;
+            color: var(--color-main);
         }
         &.active {
             color: $color-white;
             background-color: $color-white;
 
             div {
-                background-color: $color-purple;
+                background-color: var(--color-main);
                 height: 100%;
                 display: flex;
                 align-items: center;
@@ -837,17 +837,17 @@ export default {
             }
         }
         &.hover-in-range {
-            background-color: rgba($color-purple, 0.1);
+            background-color: var(--color-main-alpha-10);
         }
         &.in-range {
-            background-color: rgba($color-purple, 0.1);
+            background-color: var(--color-main-alpha-10);
             color: $color-black;
             border-radius: 0;
 
             &:hover {
                 div {
-                    color: $color-purple;
-                    background-color: fade-out($color-purple, 0.9);
+                    color: var(--color-main);
+                    background-color: var(--color-main-alpha-10);
                     border-radius: $radius-100;
                 }
             }
@@ -870,7 +870,7 @@ export default {
             border-radius: 0;
             background-color: $color-hover-gray;
             &.today {
-                color: $color-purple;
+                color: var(--color-main);
             }
         }
     }

package/src/elements/McField/McFieldCheckbox/McFieldCheckbox.vue

@@ -11,7 +11,7 @@
                 <mc-svg-icon
                     class="mc-field-checkbox__icon"
                     :name="isChecked ? 'checkbox--checked' : 'checkbox'"
-                    :color="isChecked ? 'purple' : 'gray'"
+                    :color="isChecked ? 'main' : 'gray'"
                     :size="checkboxSize"
                 />
                 <input v-bind="inputProps" @change="handleChange" />
@@ -258,7 +258,7 @@ export default {
     &__icon {
         z-index: 1;
         &:hover {
-            color: $color-purple;
+            color: var(--color-main);
         }
     }
 

package/src/elements/McField/McFieldRadio/McFieldRadioButton/McFieldRadioButton.vue

@@ -92,7 +92,7 @@ export default {
          */
         color: {
             type: String,
-            default: 'purple',
+            default: 'main',
         },
         iconSize: {
             type: String,

package/src/elements/McField/McFieldSelect/McFieldSelect.vue

@@ -410,8 +410,8 @@ export default {
         computedOptions() {
             let options = !this.groupKeys
                 ? [...this.options, ...this.local_options].filter(
-                      (v, i, a) => a.findIndex(afi => afi.value === v.value) === i,
-                  )
+                        (v, i, a) => a.findIndex(afi => afi.value === v.value) === i,
+                    )
                 : this.options
             if (this.searchValueInOptions && this.taggable) {
                 const search = this.searchValue
@@ -451,7 +451,7 @@ export default {
             let backgroundColor = this.backgroundColor
             let labelColor
             if (!this.backgroundColor || lightColors.includes(this.backgroundColor)) {
-                borderColor = 'purple'
+                borderColor = 'main'
             }
             if (darkColors.includes(this.backgroundColor)) {
                 labelColor = 'white'
@@ -596,7 +596,7 @@ export default {
                             iosViewportIndent -
                             ref.$refs.list.getBoundingClientRect().height -
                             8}px`
-                        ref.$refs.list.style.bottom = 'auto'
+                            ref.$refs.list.style.bottom = 'auto'
                         break
                     case 'bottom':
                         ref.$refs.list.style.bottom = 'auto'
@@ -825,7 +825,7 @@ export default {
             overflow: hidden;
             text-align: start;
             &:hover {
-                border-color: $color-purple;
+                border-color: var(--color-main);
             }
             &:before {
                 content: '';
@@ -859,7 +859,7 @@ export default {
             margin-top: $space-50;
             margin-bottom: $space-50;
             margin-right: unset;
-            background-color: $color-lighter-purple;
+            background-color: var(--color-main-lighter);
             color: $color-black;
             padding: $size-50 $size-50 $size-50 $size-100;
             border-radius: 100px;
@@ -876,7 +876,7 @@ export default {
         &__tag-icon {
             @include size($size-200);
             position: relative;
-            background-color: $color-purple;
+            background-color: var(--color-main);
             border-radius: $radius-circle;
             flex: 0 0 auto;
             margin-inline-start: $space-100;
@@ -933,7 +933,7 @@ export default {
                 color: $color-black;
             }
             &--selected {
-                background-color: $color-lighter-purple !important;
+                background-color: var(--color-main-lighter) !important;
                 color: $color-black !important;
                 font-weight: $font-weight-medium;
             }
@@ -953,7 +953,7 @@ export default {
                 }
                 &__select {
                     &::before {
-                        border-color: $color-purple $color-transparent $color-transparent;
+                        border-color: var(--color-main) $color-transparent $color-transparent;
                     }
                 }
             }
@@ -961,7 +961,7 @@ export default {
         &__spinner {
             &:after,
             &:before {
-                border-top-color: $color-purple;
+                border-top-color: var(--color-main);
                 @include size($space-300);
                 top: calc(50% - 5px);
                 left: calc(50% - 2px);

package/src/elements/McField/McFieldText/McFieldText.vue

@@ -879,7 +879,7 @@ export default {
         &:focus,
         &:hover {
             outline: 0;
-            border-color: $color-purple;
+            border-color: var(--color-main);
         }
 
         &::-webkit-search-cancel-button,

package/src/elements/McField/McFieldToggle/McFieldToggle.vue

@@ -77,7 +77,7 @@ export default {
          */
         color: {
             type: String,
-            default: 'purple',
+            default: 'main',
         },
 
         /**
@@ -114,8 +114,8 @@ export default {
             let disabledColor
             let saturateValue
             switch (this.color) {
-                case 'purple': {
-                    disabledColor = 'light-purple'
+                case 'main': {
+                    disabledColor = 'main-light'
                     break
                 }
                 default: {
@@ -185,7 +185,7 @@ export default {
 
         @at-root #{$block-name}--checked#{$block-name}--colored-text {
             #{$block-name}__text {
-                color: $color-purple;
+                color: var(--color-main);
             }
         }
         @at-root #{$block-name}--disabled#{$block-name}--colored-text {
@@ -195,7 +195,7 @@ export default {
         }
         @at-root #{$block-name}--checked#{$block-name}--disabled#{$block-name}--colored-text {
             #{$block-name}__text {
-                color: $color-light-purple;
+                color: var(--color-main-light);
             }
         }
     }
@@ -221,7 +221,7 @@ export default {
             @include size(0);
 
             &:checked + #{$block-name}__slider {
-                background-color: $color-purple;
+                background-color: var(--color-main);
 
                 &:before {
                     inset-inline-start: calc(#{$space-300} + #{$toggle-indent});

package/src/elements/McNotification/McNotification.vue

@@ -63,7 +63,7 @@ export default {
          */
         variation: {
             type: String,
-            default: 'purple',
+            default: 'main',
         },
         /**
          * Заголовок блока

package/src/elements/McRangeSlider/McRangeSlider.vue

@@ -149,7 +149,7 @@ export default {
 @import '../../tokens/box-shadows';
 .mc-range-slider {
     $block-name: &;
-    --mc-range-slider-color: #{$color-purple};
+    --mc-range-slider-color: var(--color-main);
 
     .vue-slider-dot-tooltip-inner {
         line-height: $line-height-200;

package/src/elements/McTabs/McTabs/McTabs.vue

@@ -99,7 +99,7 @@ export default {
          */
         accentColor: {
             type: String,
-            default: 'purple',
+            default: 'main',
         },
         /**
          *  Заглавные буквы

package/src/patterns/McChat/McChatComment/McChatComment.vue

@@ -204,11 +204,11 @@ export default {
         color: $color-purple;
         &:hover,
         &:focus {
-            color: $color-hover-purple;
+            color: var(--color-main-dark);
         }
 
         &:active {
-            color: $color-hover-purple;
+            color: var(--color-main-dark);
         }
     }
 

package/src/patterns/McChat/McChatForm/McChatForm.vue

@@ -19,7 +19,7 @@
                     <mc-button
                         slot="append"
                         class="mc-chat-form__btn"
-                        variation="purple-link"
+                        variation="main-link"
                         size="m-compact"
                         type="submit"
                         rounded

package/src/patterns/McDropdown/McDropdown.vue

@@ -182,7 +182,7 @@ export default {
                     .mc-button__background {
                         opacity: 0 !important;
                     }
-                    background-color: fade-out($color-purple, 0.9);
+                    background-color: var(--color-main-alpha-10);
                 }
             }
         }

package/src/patterns/McFilter/McFilter.vue

@@ -19,7 +19,7 @@
                         :key="preset.name"
                         :variation="getPresetButtonVariation(preset)"
                         :tooltip="preset.tooltip"
-                        secondary-color="purple"
+                        secondary-color="main"
                         @mouseup="() => handlePresetMouseUp(preset)"
                     >
                         {{ preset.visibleName }}
@@ -50,7 +50,7 @@
                                 :use-timezone="useTimezone"
                                 @input="handleConditionChange"
                             />
-                            <mc-button v-if="hasButtonAdd" variation="purple-outline" @click.native="handleStoreTag">
+                            <mc-button v-if="hasButtonAdd" variation="main-outline" @click.native="handleStoreTag">
                                 {{ placeholders.actions[activeTag ? 'save' : 'add'] }}
                             </mc-button>
                         </template>
@@ -129,7 +129,7 @@
                         />
                         <mc-button
                             :disabled="buttonCreateIsDisable"
-                            variation="purple-outline"
+                            variation="main-outline"
                             size="s"
                             @click.native="handleCreatePreset"
                         >
@@ -197,20 +197,20 @@ export default {
             required: true,
         },
         /**
-       *  Типы фильтров
-       *
-       *  [{
-                name: Filter title,
-                value: [String] - Filter value(key),
-                type: [String] - Filter type(relation / date / text / fast / labels / simple),
-                options: [Array] - Filter options,
-                getAjaxOne: [Function] - Method for get selected options when filter initialize,
-                getAjaxOptions: [Function] - Method for get options by API,
-                [relation]: [String] - Filter relation, only for fast filter,
-                [default]: [String, Number, Boolean] - Only for fast filter type. Fast filter haven't options, we set default value
-                [description]: [String] - Only for fast filter type. Description of fast filter
+         *  Типы фильтров
+         *
+         *  [{
+                 name: Filter title,
+                 value: [String] - Filter value(key),
+                 type: [String] - Filter type(relation / date / text / fast / labels / simple),
+                 options: [Array] - Filter options,
+                 getAjaxOne: [Function] - Method for get selected options when filter initialize,
+                 getAjaxOptions: [Function] - Method for get options by API,
+                 [relation]: [String] - Filter relation, only for fast filter,
+                 [default]: [String, Number, Boolean] - Only for fast filter type. Fast filter haven't options, we set default value
+                 [description]: [String] - Only for fast filter type. Description of fast filter
             }, ...]
-       */
+         */
         filters: {
             type: Array,
             required: true,
@@ -324,7 +324,7 @@ export default {
             return this.filters.filter(f => f.type !== 'fast')
         },
         visibilityToggleVariation() {
-            return this.isOpen || !this.buttonConfirmIsDisable ? 'purple-invert' : 'black-flat'
+            return this.isOpen || !this.buttonConfirmIsDisable ? 'main-invert' : 'black-flat'
         },
         currentFilter() {
             return this.filters.find(f => f.value === this.selectedOptionFilter)
@@ -732,7 +732,7 @@ export default {
             this.activePreset = { ...preset }
         },
         getPresetButtonVariation(preset) {
-            return this.activePreset && this.activePreset.name === preset.name ? 'purple-invert' : 'gray-outline'
+            return this.activePreset && this.activePreset.name === preset.name ? 'main-invert' : 'gray-outline'
         },
     },
 }
@@ -751,7 +751,6 @@ export default {
         display: flex;
         @include child-indent-right($space-100);
     }
-
     &__presets {
         position: relative;
         flex-grow: 1;
@@ -763,7 +762,6 @@ export default {
             background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, $color-white);
             pointer-events: none;
         }
-
         &-inner {
             display: flex;
             flex-wrap: nowrap;
@@ -776,7 +774,6 @@ export default {
             }
         }
     }
-
     &__body {
         padding: $space-200 $space-200 $space-300 $space-200;
         background-color: $color-hover-gray;
@@ -784,7 +781,6 @@ export default {
         &-top {
             display: flex;
             @include child-indent-right($space-400);
-
             &-left,
             &-right {
                 @include child-indent-right($space-100);
@@ -799,7 +795,6 @@ export default {
             align-items: center;
             justify-content: space-between;
             @include child-indent-right($space-400);
-
             &-left {
                 > *:not(:first-child) {
                     margin-inline-start: $space-200;

package/src/patterns/McFilter/McFilterChip/McFilterChip.vue

@@ -39,7 +39,7 @@ export default {
             return `${this.tag.categoryName}${append}`
         },
         computedVariation() {
-            return this.closable ? 'purple-invert' : 'hover-gray'
+            return this.closable ? 'main-invert' : 'hover-gray'
         },
         classes() {
             return {
@@ -67,13 +67,15 @@ export default {
 
     &--closable {
         border-radius: $space-150;
+
         &:hover {
             cursor: pointer;
-            background-color: fade-out($color-purple, 0.6);
+            background-color: var(--color-main-alpha-40);
         }
     }
+
     &--is-active {
-        background-color: fade-out($color-purple, 0.6);
+        background-color: var(--color-main-alpha-40);
     }
 
     .mc-title {

package/src/patterns/McFilter/McFilterTypeRelation/McFilterTypeRelation.vue

@@ -18,7 +18,7 @@
                 <mc-button
                     v-for="relation in relations"
                     :key="relation"
-                    :variation="relationType === relation ? 'purple' : 'dark-gray-outline'"
+                    :variation="relationType === relation ? 'main' : 'dark-gray-outline'"
                     @click="() => changeRelationType(relation)"
                 >
                     {{ placeholders.actions[`${relation === 'exists' ? 'empty' : relation}`] }}

package/src/patterns/McOverlay/McOverlay.vue

@@ -55,7 +55,7 @@ export default {
     }
     &__spinner {
         display: block;
-        border: 2px solid $color-purple;
+        border: 2px solid var(--color-main);
         border-inline-start-color: transparent;
         border-radius: 50%;
         animation: rotate 1.5s infinite linear;

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

@@ -275,11 +275,11 @@ export default {
                     dropdownActivator: 'black',
                     mainMenuLinks: {
                         variable: 'black-flat',
-                        secondaryColor: 'purple',
+                        secondaryColor: 'main',
                     },
                     closeButton: {
                         variable: 'black-link',
-                        secondaryColor: 'purple',
+                        secondaryColor: 'main',
                     },
                 },
             }

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

@@ -23,7 +23,7 @@
                 <mc-chip
                     v-if="info || withIndicator"
                     slot="icon-append"
-                    variation="purple"
+                    variation="main"
                     class="mc-side-bar-button__chip"
                     :class="{ indicator: withIndicator }"
                 >
@@ -159,7 +159,7 @@ export default {
             return {
                 'mc-side-bar-button': true,
                 [`mc-side-bar--${this.themeConfig.mode || 'black'}__button`]: true,
-                'purple-hover': !this.secondaryColor && this.themeConfig.mainMenuLinks.variable === 'black-flat',
+                'main-hover': !this.secondaryColor && this.themeConfig.mainMenuLinks.variable === 'black-flat',
             }
         },
         btnAttrs() {
@@ -191,7 +191,7 @@ export default {
     &__dot {
         @include position(absolute, $space-100 6px null null);
         @include size($size-100);
-        background-color: $color-purple;
+        background-color: var(--color-main);
         border-radius: $radius-circle;
     }
     &__chip {
@@ -211,8 +211,8 @@ export default {
         .mc-svg-icon {
             @include size($size-300);
         }
-        &.purple-hover:hover {
-            background-color: $color-lighter-purple;
+        &.main-hover:hover {
+            background-color: var(--color-main-lighter);
         }
 
         .mc-button__text {
@@ -243,8 +243,8 @@ export default {
     &--white__button {
         &.mc-button--is-active,
         &.mc-button.nuxt-link-active {
-            color: $color-purple;
-            background-color: $color-lighter-purple;
+            color: var(--color-main);
+            background-color: var(--color-main-lighter);
             pointer-events: auto;
         }
     }

package/src/patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue

@@ -224,7 +224,7 @@ export default {
                 active: menuMainItem.active(),
                 'with-submenu': menuMainItem.menu && menuMainItem.menu.length,
                 [`mc-side-bar--${this.themeConfig.mode || 'black'}__button`]: true,
-                'purple-hover': this.themeConfig.mainMenuLinks.variable === 'black-flat',
+                'main-hover': this.themeConfig.mainMenuLinks.variable === 'black-flat',
                 [`mc-button--variation-${this.themeConfig.mainMenuLinks.variable}`]: !!this.themeConfig.mainMenuLinks
                     .variable,
                 ['mc-side-bar--black__button mc-button nuxt-link-active']:

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

@@ -612,7 +612,7 @@ export default {
         }
     }
     .vxe-body--row.row--cheched {
-        background-color: rgba($color-purple, 0.05);
+        background-color: var(--color-main-alpha-10);
     }
     .fixed-left--wrapper {
         scrollbar-width: none;
@@ -726,14 +726,14 @@ export default {
         z-index: 1;
         &:hover {
             .vxe-checkbox--icon::before {
-                border-color: $color-purple !important;
+                border-color: var(--color-main) !important;
             }
         }
         &.is--checked,
         &.is--indeterminate {
             .vxe-checkbox--icon::before {
-                border-color: $color-purple;
-                background-color: $color-purple;
+                border-color: var(--color-main);
+                background-color: var(--color-main);
             }
         }
     }

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

@@ -26,9 +26,8 @@
                         :name="getSortIcon(column)"
                         :color="getSortColor(column)"
                         size="200"
-                    />{{
-                        $attrs.type === 'seq' ? '#' : column.title
-                    }}<div slot="icon-append" class="mc-table-col__header-append">
+                    />{{ $attrs.type === 'seq' ? '#' : column.title }}
+                    <div slot="icon-append" class="mc-table-col__header-append">
                         <!-- @slot Слот для вставки в конец после заголовка столбца -->
                         <slot name="header-append" />
                     </div>
@@ -201,9 +200,9 @@ export default {
         }
     }
 }
+
 .mc-table-col {
     $block-name: &;
-
     &--border-right {
         border-inline-end: 1px solid $color-hover-gray;
     }
@@ -218,12 +217,10 @@ export default {
             overflow: visible !important;
         }
     }
-
     &__total {
         margin-inline-start: auto;
         color: $color-gray;
     }
-
     &__title {
         width: auto;
         max-width: 101%;
@@ -241,7 +238,6 @@ export default {
         @include position(absolute, 0 $space-200 0 null);
         @include child-indent-right($space-50);
         background-color: $color-white;
-
         &::before {
             @include pseudo();
             @include position(null, 0 100% 0 null);
@@ -267,6 +263,7 @@ export default {
         white-space: normal !important;
     }
 }
+
 .vxe-body--row {
     transition: background-color 0s;
     &.row--stripe {
@@ -283,6 +280,7 @@ export default {
         }
     }
     &.row--current {
+        background-color: var(--color-main-alpha-10) !important;
         @include col-right-color($vxe-table-row-current-background-color);
     }
     // описка названия в библиотеке таблицы

package/src/patterns/McTableCard/McTableCardHeader/McTableCardHeader.vue

@@ -3,7 +3,7 @@
         <div class="mc-table-card-header__left">
             <!-- @slot Слот контента -->
             <slot>
-                <mc-button :to="backTo" exact variation="purple-link" size="xs">
+                <mc-button :to="backTo" exact variation="main-link" size="xs">
                     <mc-svg-icon slot="icon-prepend" name="keyboard_arrow_left" />
                     {{ buttonBackText }}
                 </mc-button>

package/src/styles/_mixins.scss

@@ -51,7 +51,7 @@
   position: $position;
 
   @each $offset, $value in $offsets {
-      #{$offset}: $value;
+    #{$offset}: $value;
   }
 }
 
@@ -225,26 +225,26 @@
   }
 }
 
-@mixin default-link($main-color: $color-black, $second-color: $color-purple, $is-important: false) {
-  color: $main-color if($is-important, !important, null);
+@mixin default-link($main-color: '--color-black', $second-color: ('--color-purple'), $is-important: false) {
+  color: var(#{$main-color}) if($is-important, !important, null);
   &:hover,
   &:focus {
-    color: $second-color if($is-important, !important, null);
+    color: var(#{$second-color}) if($is-important, !important, null);
   }
 
   &:active {
-    color: darken($second-color, 8%) if($is-important, !important, null);
+    filter: var(#{$second-color}) if($is-important, !important, null);
   }
 }
 
 @mixin delete-link() {
-  @include default-link($color-black, $color-red);
+  @include default-link('--color-black', '--color-red');
 }
 @mixin text-link($is-important: false) {
-  @include default-link($color-purple, $color-hover-purple, $is-important);
+  @include default-link('--color-main', '--color-main-dark', $is-important);
 }
 @mixin close-link() {
-  @include default-link($color-gray, $color-black);
+  @include default-link('--color-gray', '--color-black');
 }
 
 @mixin field-error() {
@@ -430,7 +430,7 @@
     border-radius: $radius-200;
   }
   blockquote {
-    border-left: $space-50 solid $color-purple !important;
+    border-left: $space-50 solid var(--color-main) !important;
     margin: $space-zero;
     padding-left: $space-200;
   }
@@ -517,12 +517,12 @@
   }
 }
 
-@mixin animation-border-spinner($duration: 2s, $border-color: $color-purple, $border-size: $space-100) {
+@mixin animation-border-spinner($duration: 2s, $border-color: '--color-main', $border-size: $space-100) {
   background-repeat: no-repeat;
-  background-image: linear-gradient(to right, $border-color 100%, $border-color 100%),
-    linear-gradient(to bottom, $border-color 100%, $border-color 100%),
-    linear-gradient(to right, $border-color 100%, $border-color 100%),
-    linear-gradient(to bottom, $border-color 100%, $border-color 100%);
+  background-image: linear-gradient(to right, var(#{$border-color}) 100%, var(#{$border-color}) 100%),
+  linear-gradient(to bottom, var(#{$border-color}) 100%, var(#{$border-color}) 100%),
+  linear-gradient(to right, var(#{$border-color}) 100%, var(#{$border-color}) 100%),
+  linear-gradient(to bottom, var(#{$border-color}) 100%, var(#{$border-color}) 100%);
   background-position: 0 0, 100% 0, 100% 100%, 0 100%;
   background-size: 100% $border-size, $border-size 100%, 100% $border-size, $border-size 100%;
   animation: spin-border $duration linear;
@@ -609,4 +609,4 @@
   > *:not(:first-child) {
     margin-inline-start: $space;
   }
-}
+}

package/src/styles/global.scss

@@ -122,19 +122,19 @@ a {
 }
 
 ::selection {
-  background: fade-out($color-purple, 0);
+  background: var(--color-main);
   color: $color-white;
 }
 
 ::-moz-selection {
-  background: fade-out($color-purple, 0);
+  background: var(--color-main);
   color: $color-white;
 }
 
 input,
 textarea,
 [contenteditable] {
-  caret-color: $color-purple;
+  caret-color: var(--color-main);
 }
 
 button {
@@ -288,6 +288,14 @@ pre {
   @each $name, $color in $token-colors {
     #{'--color-'}#{$name}: #{$color};
   }
+  // Default main project colors
+  --color-main: $color-purple;
+  --color-main-dark: $color-hover-purple;
+  @for $i from 1 through 10 {
+    #{'--color-main-alpha-'}#{$i * 10}: #{rgba($color-purple, $i / 10)};
+  }
+  --color-main-light: $color-light-purple;
+  --color-main-lighter: $color-lighter-purple;
   @each $name, $size in $token-icon-sizes {
     #{'--size-'}#{$name}: #{$size};
   }

package/src/styles/table.scss

@@ -2,9 +2,9 @@ $vxe-table-border-color: $color-hover-gray;
 $vxe-table-header-background-color: $color-white;
 $vxe-table-row-hover-background-color: $color-hover-gray;
 $vxe-table-row-hover-striped-background-color: $color-hover-gray;
-$vxe-table-row-current-background-color: $color-lighter-purple;
-$vxe-table-row-hover-current-background-color: $color-lighter-purple;
-$vxe-table-row-cheched-background-color: $color-lighter-purple;
-$vxe-table-row-hover-cheched-background-color: $color-lighter-purple;
+$vxe-table-row-current-background-color: var(--color-main-lighter);
+$vxe-table-row-hover-current-background-color: var(--color-main-lighter);
+$vxe-table-row-cheched-background-color: var(--color-main-lighter);
+$vxe-table-row-hover-cheched-background-color: var(--color-main-lighter);
 
 $vxe-table-row-line-height: 16px;

package/src/tokens/gradients.scss

@@ -3,17 +3,17 @@
   * @presenter Gradient
   */
 $gradient-pink: linear-gradient(180deg, #F5576C 0%, #F093FB 100%); /* Фирменный цвет личного кабинета */
-$gradient-violet: linear-gradient(180deg, #E41AFE 0%, #8035F8 100%); /* Столбики в графике 5 порядка */
+$gradient-violet: linear-gradient(180deg, #E41AFE 0%, var(--color-main-dark) 100%); /* Столбики в графике 5 порядка */
 $gradient-blue: linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%); /* Нотификации и столбики в графике 4 порядка */
 $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, #9a47ed 0%, #8446ff 100%); /* Основной градиент для MCPay */
-$gradient-purple-pink: linear-gradient(90deg, #722eff 2%, #fe6ffc 100%); /*Градиент промоакции*/
-$gradient-blue-purple: linear-gradient(90deg, #18bfe3 20%, #8756ff 70%); /*Градиент промоакции*/
-$gradient-dark-blue: linear-gradient(90deg, #5550EF 0%, #7F4EFF 100%); /*Градиент автоплатежей*/
+$gradient-purple: linear-gradient(270deg, var(--color-main-dark) 0%, var(--color-main) 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%); /*Градиент автоплатежей*/
 $gradient-light-blue: linear-gradient(277.29deg, #d6e8ff 5.67%, #efe9ff 94.33%); /*Градиент новых криптовалют*/
-$gradient-purple-blue: linear-gradient(272.54deg, #18bfe3 17.19%, #8756ff 70.31%); /*Градиент баннера для криптовалют*/
+$gradient-purple-blue: linear-gradient(272.54deg, #18bfe3 17.19%, var(--color-main) 70.31%); /*Градиент баннера для криптовалют*/
 
 $gradient-primary-radial: radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244)); /* Radial gradient example */
 

package/src/utils/checkColor.js

@@ -0,0 +1,38 @@
+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
+}