refactor: on-x-colors renamed to x-on-colors [WTEL-3840]

package.json

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

src/components/wt-button/_variables.scss

@@ -6,7 +6,7 @@
   // COLORS
   --btn-primary-color: var(--primary-color);
   --btn-primary-hover-color: var(--primary-hover-color);
-  --btn-primary-text-color: var(--on-primary-color);
+  --btn-primary-text-color: var(--primary-on-color);
 
   --btn-secondary-color: var(--dp-10-surface-color);
   --btn-secondary-hover-color: var(--dp-14-surface-color);
@@ -30,7 +30,7 @@
 
   --btn-transfer-color: var(--transfer-color);
   --btn-transfer-hover-color: var(--transfer-hover-color);
-  --btn-transfer-text-color: var(--on-transfer-color);
+  --btn-transfer-text-color: var(--transfer-on-color);
 
   --btn-disabled-color: var(--dp-16-surface-color);
   --btn-disabled-text-color: var(--grey-darken-1);

src/components/wt-icon/_variables.scss

@@ -16,7 +16,7 @@
   --icon-warning-color: var(--warning-color);
   --icon-on-dark-color: var(--white);
   --icon-on-light-color: var(--grey-darken-3);
-  --icon-on-primary-color: var(--on-primary-color);
+  --icon-on-primary-color: var(--primary-on-color);
   --icon-info-color: var(--info-color);
   --icon-chat-color: var(--chat-color);
   --icon-transfer-color: var(--transfer-color);

src/css/styleguide/colors/_colors.scss

@@ -35,49 +35,49 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-4);
-  --on-success-color: var(--black);
+  --success-on-color: var(--black);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-4);
-  --on-warning-color: var(--black);
+  --warning-on-color: var(--black);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-4);
-  --on-error-color: var(--black);
+  --error-on-color: var(--black);
 
   // info colors
   --info-color: var(--blue-darken-1);
   --info-hover-color: var(--blue-lighten-1);
   --info-light-color: var(--blue-lighten-4);
-  --on-info-color: var(--black);
+  --info-on-color: var(--black);
 
   // job colors
   --job-color: var(--blue-darken-1);
   --job-hover-color: var(--blue-lighten-1);
   --job-light-color: var(--blue-lighten-4);
-  --on-job-color: var(--black);
+  --job-on-color: var(--black);
 
   // chat colors
   --chat-color: var(--indigo-accent-2);
   --chat-hover-color: var(--indigo-accent-2);
   --chat-light-color: var(--indigo-lighten-4);
-  --on-chat-color: var(--black);
+  --chat-on-color: var(--black);
 
   // transfer colors
   --transfer-color: var(--indigo-lighten-1);
   --transfer-hover-color: var(--indigo-lighten-2);
   --transfer-light-color: var(--indigo-lighten-4);
-  --on-transfer-color: var(--white);
+  --transfer-on-color: var(--white);
 
   // primary colors
   --primary-color: var(--amber-accent-3);
   --primary-hover-color: var(--amber-accent-2);
   --primary-light-color: var(--amber-lighten-4);
-  --on-primary-color: var(--black);
+  --primary-on-color: var(--black);
 
   // accent colors
   --accent-color: var(--purple-lighten-1);
@@ -124,49 +124,49 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-3);
-  --on-success-color: var(--white);
+  --success-on-color: var(--white);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-3);
-  --on-warning-color: var(--white);
+  --warning-on-color: var(--white);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-3);
-  --on-error-color: var(--white);
+  --error-on-color: var(--white);
 
   // info colors
   --info-color: var(--blue-darken-1);
   --info-hover-color: var(--blue-lighten-1);
   --info-light-color: var(--blue-lighten-3);
-  --on-info-color: var(--white);
+  --info-on-color: var(--white);
 
   // job colors
   --job-color: var(--blue-darken-1);
   --job-hover-color: var(--blue-lighten-1);
   --job-light-color: var(--blue-lighten-3);
-  --on-job-color: var(--white);
+  --job-on-color: var(--white);
 
   // chat colors
   --chat-color: var(--indigo-accent-2);
   --chat-hover-color: var(--indigo-accent-2);
   --chat-light-color: var(--indigo-lighten-3);
-  --on-chat-color: var(--white);
+  --chat-on-color: var(--white);
 
   // transfer colors
   --transfer-color: var(--indigo-darken-1);
   --transfer-hover-color: var(--indigo-lighten-1);
   --transfer-light-color: var(--indigo-lighten-4);
-  --on-transfer-color: var(--white);
+  --transfer-on-color: var(--white);
 
   // primary colors
   --primary-color: var(--amber-accent-2);
   --primary-hover-color: var(--amber-accent-3);
   --primary-light-color: var(--amber-lighten-4);
-  --on-primary-color: var(--black);
+  --primary-on-color: var(--black);
 
   // accent colors
   --accent-color: var(--purple-lighten-1);