fix: color vars

.prettierrc.json

@@ -0,0 +1,28 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "quoteProps": "as-needed",
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "proseWrap": "preserve",
+    "endOfLine": "lf",
+    "overrides": [
+        {
+            "files": "*.xml",
+            "options": {
+                "printWidth": 140
+            },
+            "excludeFiles": ["*.schema.xml", "*.transfer.xml"]
+        },
+        {
+            "files": ["*.schema.xml", "*.transfer.xml"],
+            "options": {
+                "printWidth": 300
+            }
+        }
+    ]
+}

libs/button/src/lib/button-core/theme/button-core.component.theme.less

@@ -49,7 +49,7 @@
 
 // Color variants - Primary
 @btn-primary-color: var(--spy-btn-primary-color, @spy-white);
-@btn-primary-bg: var(--spy-btn-primary-bg, @primary-color);
+@btn-primary-bg: var(--spy-btn-primary-bg, @spy-primary-color);
 @btn-primary-active-bg: var(--spy-btn-primary-active-bg, @green-dark);
 
 // Color variants - Default
@@ -65,15 +65,15 @@
 @btn-danger-active-bg: var(--spy-btn-danger-active-bg, @red-dark);
 
 // Color variants - Outline
-@btn-outline-color: var(--spy-btn-outline-color, @green);
-@btn-outline-border: var(--spy-btn-outline-border, @green);
+@btn-outline-color: var(--spy-btn-outline-color, @spy-primary-color);
+@btn-outline-border: var(--spy-btn-outline-border, @spy-primary-color);
 @btn-critical-outline-color: var(--spy-btn-critical-outline-color, @red);
 @btn-critical-outline-border: var(--spy-btn-critical-outline-border, @red);
 
 // Link and special states
 @btn-disable-border: var(--spy-btn-disable-border, @gray-light);
 @btn-link-padding: var(--spy-btn-link-padding, 2px 9px);
-@btn-link-color: var(--spy-btn-link-color, @green);
+@btn-link-color: var(--spy-btn-link-color, @spy-primary-color);
 @btn-link-color-hover: var(--spy-btn-link-color-hover, @green-dark);
 @btn-link-bg-active: var(--spy-btn-link-bg-active, @gray-lighter);
 @btn-icon-right-padding: var(--spy-btn-icon-right-padding, 8px);

libs/button/src/lib/button-toggle/button-toggle.component.less

@@ -24,7 +24,7 @@
 
     &:focus {
         color: @gray-dark;
-        border-color: @green;
+        border-color: @spy-primary-color;
     }
 
     &:active {
@@ -41,18 +41,18 @@
     }
 
     &--toggled {
-        color: @green;
+        color: @spy-primary-color;
         border-color: currentColor;
 
         &:focus {
-            color: @green;
+            color: @spy-primary-color;
             border-color: @green-dark;
         }
 
         &:active {
             background: @green-lighter;
             color: @green-dark;
-            border-color: @green;
+            border-color: @spy-primary-color;
         }
 
         &:hover {

libs/carousel/src/lib/carousel/carousel.component.less

@@ -77,7 +77,7 @@
         }
 
         &:active {
-            background-color: @green;
+            background-color: @spy-primary-color;
             border-color: @transparent;
             color: @white;
         }

libs/carousel/src/lib/carousel/carousel.component.theme.less

@@ -29,7 +29,7 @@
 @carousel-slide-height-sm: var(--spy-carousel-slide-height-sm, 240px);
 
 @carousel-thumb-border: var(--spy-carousel-thumb-border, 1px solid transparent);
-@carousel-thumb-active-border: var(--spy-carousel-thumb-active-border, 1px solid @green);
+@carousel-thumb-active-border: var(--spy-carousel-thumb-active-border, 1px solid @spy-primary-color);
 
 @carousel-navigation-button-padding: var(--spy-carousel-navigation-button-padding, 3px 0 0);
 @carousel-navigation-button-icon-color: var(--spy-carousel-navigation-button-icon-color, @gray-dark);

libs/collapsible/src/lib/collapsible/collapsible.component.theme.less

@@ -29,4 +29,4 @@
 @collapse-content-padding: var(--spy-collapse-content-padding, 10px 18px);
 @collapse-header-icon-margin-right: var(--spy-collapse-header-icon-margin-right, 3px);
 @collapse-border: var(--spy-collapse-border, @collapse-panel-border-width solid @gray-light);
-@collapse-focus-border: var(--spy-collapse-border, @collapse-panel-border-width solid @green);
+@collapse-focus-border: var(--spy-collapse-border, @collapse-panel-border-width solid @spy-primary-color);

libs/date-picker/src/lib/date-picker/date-picker.component.less

@@ -25,10 +25,10 @@
     }
 
     &-focused {
-        border-color: @green;
+        border-color: @spy-primary-color;
 
         &:hover {
-            border-color: @green;
+            border-color: @spy-primary-color;
         }
     }
 
@@ -153,12 +153,12 @@
             }
 
             &:focus {
-                border-color: @green;
+                border-color: @spy-primary-color;
             }
 
             &:active {
-                border-color: @green;
-                background-color: @green;
+                border-color: @spy-primary-color;
+                background-color: @spy-primary-color;
                 background-image: @date-picker-icon-navigation-arrow-active;
                 color: @spy-white;
             }
@@ -234,7 +234,7 @@
 
         &:focus {
             .ant-picker-cell-inner::after {
-                border-color: @green;
+                border-color: @spy-primary-color;
             }
         }
 
@@ -260,15 +260,15 @@
         &-selected.ant-picker-cell-in-view,
         &-selected {
             .ant-picker-cell-inner {
-                background-color: @green !important;
+                background-color: @spy-primary-color !important;
                 color: @spy-white;
             }
 
             &:focus,
             &:active,
             &:hover {
                 .ant-picker-cell-inner {
-                    background-color: @green !important;
+                    background-color: @spy-primary-color !important;
                     color: @spy-white;
                 }
             }

libs/drawer/src/lib/drawer-wrapper/drawer-wrapper.component.theme.less

@@ -14,7 +14,7 @@
     @border-radius-base 0 0 @border-radius-base
 );
 @drawer-wrapper-action-border: var(--spy-drawer-wrapper-action-border, 1px solid @transparent);
-@drawer-wrapper-action-hover-background: var(--spy-drawer-wrapper-action-hover-background, @green);
+@drawer-wrapper-action-hover-background: var(--spy-drawer-wrapper-action-hover-background, @spy-primary-color);
 @drawer-wrapper-action-hover-color: var(--spy-drawer-wrapper-action-hover-color, @spy-white);
 @drawer-content-width: var(--spy-drawer-content-width, calc(100% - @drawer-wrapper-action-size));
 @drawer-wrapper-z-index: var(--spy-drawer-wrapper-z-index, 0);

libs/dropdown/src/lib/dropdown/dropdown.component.less

@@ -35,7 +35,7 @@
 
             &:focus {
                 border-radius: @dropdown-menu-item-border-focus-radius;
-                border-color: @green;
+                border-color: @spy-primary-color;
             }
         }
     }

libs/navigation/src/lib/navigation/navigation.component.theme.less

@@ -34,7 +34,7 @@
 @menu-item-radius: var(--spy-menu-item-radius, @border-radius-small);
 @menu-item-width: var(--spy-menu-item-width, 100%);
 @menu-item-border: var(--spy-menu-item-border, 2px solid @transparent);
-@menu-item-focus-border: var(--spy-menu-item-focus-border, 2px solid @green);
+@menu-item-focus-border: var(--spy-menu-item-focus-border, 2px solid @spy-primary-color);
 @menu-item-focus-box-shadow: var(--spy-menu-item-focus-box-shadow, inset @box-shadow-focus);
 @menu-item-submenu-padding: var(--spy-menu-item-submenu-padding, 14px 34px 14px 53px);
 @menu-item-submenu-submenu-padding: var(--spy-menu-item-submenu-submenu-padding, 11px 34px 11px 67px);

libs/pagination/src/lib/pagination/pagination.component.less

@@ -49,7 +49,7 @@
         }
 
         &:active {
-            border-color: @green;
+            border-color: @spy-primary-color;
             background-color: @spy-white;
 
             a {
@@ -63,8 +63,8 @@
     }
 
     &-item-active {
-        background-color: @green;
-        border-color: @green;
+        background-color: @spy-primary-color;
+        border-color: @spy-primary-color;
         pointer-events: none;
 
         a {
@@ -99,7 +99,7 @@
 
         &:active {
             .ant-pagination-icon {
-                color: @green;
+                color: @spy-primary-color;
             }
         }
     }

libs/radio/src/lib/radio/radio.component.theme.less

@@ -6,11 +6,11 @@
 @radio-border: var(--spy-radio-border, @spy-border-width-base solid @gray);
 @radio-inner-size: var(--spy-radio-inner-size, 10px);
 @radio-inner-margin: var(--spy-radio-inner-margin, calc(@radio-inner-size / -2) 0 0 calc(@radio-inner-size / -2));
-@radio-focus-border-color: var(--spy-radio-focus-border-color, @green);
+@radio-focus-border-color: var(--spy-radio-focus-border-color, @spy-primary-color);
 @radio-disabled-border-color: var(--spy-radio-disabled-border-color, @gray);
 @radio-inner-disabled-background: var(--spy-radio-inner-disabled-background, @gray-dark);
 @radio-hover-border-color: var(--spy-radio-hover-border-color, @gray-dark);
 @radio-checked-background: var(--spy-radio-checked-background, @green-dark);
-@radio-checked-focus-shadow: var(--spy-radio-checked-focus-shadow, 0 0 2px @green);
+@radio-checked-focus-shadow: var(--spy-radio-checked-focus-shadow, 0 0 2px @spy-primary-color);
 @radio-label-color: var(--spy-radio-label-color, @ink);
 @radio-label-indent-x: var(--spy-radio-label-indent-x, 8px);

libs/select/src/lib/select/select.component.less

@@ -111,7 +111,7 @@
 
         &.ant-select-focused:not(.ant-select-customize-input) {
             .ant-select-selector {
-                border-color: @green;
+                border-color: @spy-primary-color;
             }
         }
 
@@ -246,7 +246,7 @@
                     }
 
                     &__multiChecked {
-                        background-color: @green;
+                        background-color: @spy-primary-color;
                         line-height: @checkbox-multi-select-checked-line-height;
                         position: relative;
                         display: none;
@@ -273,7 +273,7 @@
                         background-color: @spy-white;
 
                         &:focus {
-                            border-color: @green;
+                            border-color: @spy-primary-color;
                         }
 
                         &:hover {
@@ -287,7 +287,7 @@
                     position: absolute;
                     top: @select-menu-vertical-padding;
                     right: @select-menu-horizontal-padding;
-                    color: @green;
+                    color: @spy-primary-color;
                     font-size: @check-icon-size;
                 }
 
@@ -304,7 +304,7 @@
                 &-content-wrapper-selected,
                 &-selected {
                     &:not(.ant-select-item-option-disabled) {
-                        color: @green;
+                        color: @spy-primary-color;
                         background-color: @green-lighter;
                     }
 

libs/styles/src/lib/themes/default/components/input.less

@@ -13,7 +13,7 @@
 @input-color: var(--spy-input-color, @ink);
 @input-border-color: var(--spy-input-border-color, @gray-light);
 @input-hover-border-color: var(--spy-input-hover-border-color, @border-color-base);
-@input-focus-border-color: var(--spy-input-focus-border-color, @green);
+@input-focus-border-color: var(--spy-input-focus-border-color, @spy-primary-color);
 @input-disabled-bg: var(--spy-input-disabled-bg, @spy-disabled-bg);
 @input-disabled-border: var(--spy-input-disabled-border, @gray-light);
 @input-icon-color: var(--spy-input-icon-color, @input-placeholder-color);

libs/styles/src/lib/themes/default/mixins/active-mixin.less

@@ -1,9 +1,9 @@
 /**
  * Provides active state for elements, configured by the passed parameters.
- * @param {String} @color [@primary-color]
+ * @param {String} @color [@spy-primary-color]
  * @param {String} @box-shadow [@box-shadow-focus]
  */
-.active(@color: @primary-color, @box-shadow: @box-shadow-focus) {
+.active(@color: @spy-primary-color, @box-shadow: @box-shadow-focus) {
     border-color: @color;
     outline: 0;
     box-shadow: @box-shadow;

libs/styles/src/lib/themes/default/variables/colors.less

@@ -42,22 +42,22 @@
 @global-bg-gray: var(--spy-global-bg-gray, @gray-lighter);
 
 @warning-color: #ff6800;
-@spy-warning-color: var(--spy-warning-color, @orange);
+@spy-warning-color: var(--spy-warning-color, @warning-color);
 @success-color: #11856e;
-@spy-success-color: var(--spy-success-color, @green);
+@spy-success-color: var(--spy-success-color, @success-color);
 @error-color: #c72712;
-@spy-error-color: var(--spy-error-color, @red);
+@spy-error-color: var(--spy-error-color, @error-color);
 @info-color: var(--spy-info-color, @blue);
 @primary-color: #11856e;
-@spy-primary-color: var(--spy-primary-color, @green);
+@spy-primary-color: var(--spy-primary-color, @primary-color);
 @normal-color: var(--spy-normal-color, @gray);
 @body-background: var(--spy-body-background, @gray-lighter);
 @component-background: var(--spy-component-background, @white);
 @border-color-base: var(--spy-border-color-base, @gray);
 @border-color-split: #dbdbdb;
-@spy-border-color-split: var(--spy-border-color-split, @gray-light);
+@spy-border-color-split: var(--spy-border-color-split, @border-color-split);
 @disabled-color: #71747b;
-@spy-disabled-color: var(--spy-disabled-color, @gray-dark);
+@spy-disabled-color: var(--spy-disabled-color, @disabled-color);
 @disabled-bg: #f5f5f5;
-@spy-disabled-bg: var(--spy-disabled-bg, @gray-lighter);
-@transparent: var(--spy-transparent, rgba(#fff, 0));
+@spy-disabled-bg: var(--spy-disabled-bg, @disabled-bg);
+@transparent: var(--spy-transparent, transparent);

libs/styles/src/lib/themes/default/variables/common.less

@@ -8,7 +8,7 @@
 @border-radius-base: var(--spy-border-radius-base, 10px);
 @border-radius-large: var(--spy-border-radius-base, 24px);
 
-@box-shadow-focus: var(--spy-box-shadow-focus, 0 0 3px @green);
+@box-shadow-focus: var(--spy-box-shadow-focus, 0 0 3px @spy-primary-color);
 @box-shadow-base: var(--spy-box-shadow-base, 0 1px 3px @ink-effect);
 @box-shadow-1: var(--spy-box-shadow-1, 0 4px 12px @ink-effect);
 @box-shadow-2: var(--spy-box-shadow-2, 1px 3px 18px @ink-effect);

libs/table.feature.editable/src/lib/table-editable-feature.component.less

@@ -4,7 +4,7 @@
 .ant-table {
     &-tbody > tr {
         &.ant-table-row--editable > td .ant-table-column-inner::after {
-            border-color: @green;
+            border-color: @spy-primary-color;
         }
     }
 }

libs/table.feature.settings/src/lib/table-settings-feature.component.less

@@ -83,7 +83,7 @@
 
         &:hover,
         &:focus {
-            color: @green;
+            color: @spy-primary-color;
         }
 
         &:active {

libs/table/src/lib/table-column-list/table-column-list.component.less

@@ -18,7 +18,7 @@
         line-height: @table-column-list-trigger-line-height;
         padding: @table-column-list-trigger-padding;
         margin-bottom: @table-column-list-trigger-margin-bottom;
-        color: @green;
+        color: @spy-primary-color;
         border-radius: @border-radius-base;
         cursor: pointer;
 

libs/table/src/lib/table/table.component.less

@@ -192,7 +192,7 @@
                 }
 
                 &.ant-table-row--selected::after {
-                    border-color: @green;
+                    border-color: @spy-primary-color;
                 }
 
                 &.ant-table-row--editable::after {
@@ -202,7 +202,7 @@
         }
 
         &:focus::after {
-            border-color: @green;
+            border-color: @spy-primary-color;
         }
     }