23.12.17: wt-icon active color [WTEL-3912]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.16",
+  "version": "23.12.17",
   "private": false,
   "scripts": {
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",

src/components/wt-icon/Readme.md

@@ -5,7 +5,7 @@
 
 Different color icons:
 ```vue
-const colors = ['default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
+const colors = ['default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
 
 <div
   style="display: flex; align-items: center; gap: 5px;"

src/components/wt-icon/_variables.scss

@@ -9,6 +9,7 @@
   --icon-xs-size: 8px;
 
   --icon-color: var(--grey-darken-2);
+  --icon-active-color: var(--grey-darken-4);
   --icon-primary-color: var(--primary-color);
   --icon-error-color: var(--error-color);
   --icon-success-color: var(--success-color);
@@ -25,5 +26,6 @@
 
 :root.theme--dark {
   --icon-color: var(--grey-lighten-2);
+  --icon-active-color: var(--grey-lighten-4);
   --icon-disabled-color: var(--grey-darken-2);
 }

src/components/wt-icon/wt-icon.vue

@@ -35,7 +35,7 @@ const props = defineProps({
     default: 'md',
   },
   /**
-   * @values 'default', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
+   * @values 'default', 'active', 'disabled', 'primary', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
    */
   color: {
     type: String,
@@ -88,6 +88,9 @@ svg {
   &-default .wt-icon__icon {
     fill: var(--icon-color);
   }
+  &-active .wt-icon__icon {
+    fill: var(--icon-active-color);
+  }
   &-primary .wt-icon__icon {
     fill: var(--icon-primary-color);
   }