23.12.16: various color fixes [WTEL-3902]

package.json

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

src/components/wt-button/_variables.scss

@@ -37,35 +37,5 @@
 }
 
 :root.theme--dark {
-  // COLORS
-  --btn-primary-color: var(--primary-color);
-  --btn-primary-hover-color: var(--primary-hover-color);
-  --btn-primary-text-color: var(--on-primary-color);
-
-  --btn-secondary-color: var(--dp-10-surface-color);
-  --btn-secondary-hover-color: var(--dp-14-surface-color);
   --btn-secondary-text-color: var(--grey-lighten-4);
-
-  --btn-success-color: var(--success-color);
-  --btn-success-hover-color: var(--success-hover-color);
-  --btn-success-text-color: var(--grey-lighten-5);
-
-  --btn-info-color: var(--info-color);
-  --btn-info-hover-color: var(--info-hover-color);
-  --btn-info-text-color: var(--grey-lighten-5);
-
-  --btn-job-color: var(--job-color);
-  --btn-job-hover-color: var(--job-hover-color);
-  --btn-job-text-color: var(--grey-lighten-5);
-
-  --btn-error-color: var(--error-color);
-  --btn-error-hover-color: var(--error-hover-color);
-  --btn-error-text-color: var(--grey-lighten-5);
-
-  --btn-transfer-color: var(--transfer-color);
-  --btn-transfer-hover-color: var(--transfer-hover-color);
-  --btn-transfer-text-color: var(--on-transfer-color);
-
-  --btn-disabled-color: var(--dp-16-surface-color);
-  --btn-disabled-text-color: var(--grey-lighten-1);
 }

src/components/wt-icon/Readme.md

@@ -5,7 +5,7 @@
 
 Different color icons:
 ```vue
-const colors = ['default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'];
+const colors = ['default', '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-primary-color: var(--primary-color);
   --icon-error-color: var(--error-color);
   --icon-success-color: var(--success-color);
   --icon-warning-color: var(--warning-color);
@@ -25,14 +26,4 @@
 :root.theme--dark {
   --icon-color: var(--grey-lighten-2);
   --icon-disabled-color: var(--grey-darken-2);
-  --icon-error-color: var(--error-color);
-  --icon-success-color: var(--success-color);
-  --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-info-color: var(--info-color);
-  --icon-chat-color: var(--chat-color);
-  --icon-transfer-color: var(--transfer-color);
-  --icon-job-color: var(--job-color);
 }

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

@@ -35,7 +35,7 @@ const props = defineProps({
     default: 'md',
   },
   /**
-   * @values 'default', 'disabled', 'error', 'success', 'warning', 'on-dark', 'on-light', 'on-primary', 'info', 'chat', 'transfer', 'job'
+   * @values 'default', '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);
   }
+  &-primary .wt-icon__icon {
+    fill: var(--icon-primary-color);
+  }
   &-error .wt-icon__icon {
     fill: var(--icon-error-color);
   }

src/components/wt-rounded-action/_variables.scss

@@ -4,42 +4,11 @@
 
   --rounded-action-rounded-border-radius: var(--border-radius--pill);
 
-  --rounded-action-primary-color: var(--primary-color);
-  --rounded-action-primary-hover-color: var(--primary-hover-color);
+  --rounded-action-bg-color: var(--dp-20-surface-color);
+  --rounded-action-bg-hover-color: var(--dp-22-surface-color);
 
-  --rounded-action-secondary-color: var(--dp-20-surface-color);
-  --rounded-action-secondary-hover-color: var(--dp-18-surface-color);
-  --rounded-action-secondary-active-color: var(--grey-lighten-1);
-
-  --rounded-action-success-color: var(--success-color);
-  --rounded-action-success-hover-color: var(--success-hover-color);
-
-  --rounded-action-error-color: var(--error-color);
-  --rounded-action-error-hover-color: var(--error-hover-color);
-
-  --rounded-action-transfer-color: var(--transfer-color);
-  --rounded-action-transfer-hover-color: var(--transfer-hover-color);
-
-  --rounded-action-disabled-color: var(--dp-18-surface-color);
+  --rounded-action-active-color: var(--dp-10-surface-color);
 }
 
 :root.theme--dark {
-  --rounded-action-primary-color: var(--primary-color);
-  --rounded-action-primary-hover-color: var(--primary-hover-color);
-
-  --rounded-action-secondary-color: var(--dp-20-surface-color);
-  --rounded-action-secondary-hover-color: var(--dp-18-surface-color);
-  --rounded-action-secondary-active-color: var(--grey-darken-1);
-
-  --rounded-action-success-color: var(--success-color);
-  --rounded-action-success-hover-color: var(--success-hover-color);
-
-  --rounded-action-error-color: var(--error-color);
-  --rounded-action-error-hover-color: var(--error-hover-color);
-
-  --rounded-action-transfer-color: var(--transfer-color);
-  --rounded-action-transfer-hover-color: var(--transfer-hover-color);
-
-  --rounded-action-disabled-color: var(--dp-18-surface-color);
-
 }

src/components/wt-rounded-action/wt-rounded-action.vue

@@ -1,7 +1,6 @@
 <template>
   <button
     :class="[
-      `wt-rounded-action--color-${color}`,
       `wt-rounded-action--size-${size}`,
       { 'wt-rounded-action--active': active },
       { 'wt-rounded-action--disabled': disabled },
@@ -76,16 +75,14 @@ const props = defineProps({
 const emit = defineEmits(['click']);
 
 const iColor = computed(() => {
-  const onDark = ['success', 'error', 'transfer'];
-  const onLight = ['primary'];
   if (props.disabled) return 'disabled';
-  if (onDark.includes(props.color)) return 'on-dark';
-  if (onLight.includes(props.color)) return 'on-light';
-  if (props.active) return 'default';
-  return 'default';
+  switch (props.color) {
+    case 'secondary': return 'default';
+    default: return props.color;
+  }
 });
 const loaderColor = computed(() => {
-  if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
+  // if (['success', 'transfer', 'error'].includes(props.color)) return 'main';
   return 'contrast';
 });
 </script>
@@ -101,11 +98,16 @@ const loaderColor = computed(() => {
   line-height: 0;
   padding: var(--rounded-action-padding);
   border: var(--rounded-action-border-size) solid;
-  background: var(--rounded-action-secondary-color);
-  border-color: var(--rounded-action-secondary-color);
+  background: var(--rounded-action-bg-color);
+  border-color: var(--rounded-action-bg-color);
   border-radius: var(--border-radius);
   transition: var(--transition);
 
+  &:hover {
+    background: var(--rounded-action-bg-hover-color);
+    border-color: var(--rounded-action-bg-hover-color);
+  }
+
   &--wide {
     width: 100%;
   }
@@ -114,66 +116,15 @@ const loaderColor = computed(() => {
     border-radius: var(--rounded-action-rounded-border-radius);
   }
 
-  &--color {
-    &-primary {
-      background: var(--rounded-action-primary-color);
-      border-color: var(--rounded-action-primary-color);
-
-      &:hover {
-        background: var(--rounded-action-primary-hover-color);
-        border-color: var(--rounded-action-primary-hover-color);
-      }
-    }
-
-    &-secondary {
-      background: var(--rounded-action-secondary-color);
-      border-color: var(--rounded-action-secondary-color);
-
-      &:hover {
-        background: var(--rounded-action-secondary-hover-color);
-        border-color: var(--rounded-action-secondary-hover-color);
-      }
-
-      &.wt-rounded-action--active {
-        background: transparent;
-        border-color: var(--rounded-action-secondary-active-color);
-      }
-    }
-
-    &-success {
-      background: var(--rounded-action-success-color);
-      border-color: var(--rounded-action-success-color);
-
-      &:hover {
-        background: var(--rounded-action-success-hover-color);
-        border-color: var(--rounded-action-success-hover-color);
-      }
-    }
-
-    &-error {
-      background: var(--rounded-action-error-color);
-      border-color: var(--rounded-action-error-color);
-
-      &:hover {
-        background: var(--rounded-action-error-hover-color);
-        border-color: var(--rounded-action-error-hover-color);
-      }
-    }
-
-    &-transfer {
-      background: var(--rounded-action-transfer-color);
-      border-color: var(--rounded-action-transfer-color);
+  &--active {
+    border-color: var(--rounded-action-active-color);
 
-      &:hover {
-        background: var(--rounded-action-transfer-hover-color);
-        border-color: var(--rounded-action-transfer-hover-color);
-      }
+    &:hover {
+      border-color: var(--rounded-action-active-color);
     }
   }
 
   &.wt-rounded-action--disabled {
-    background: var(--rounded-action-disabled-color);
-    border-color: var(--rounded-action-disabled-color);
     pointer-events: none;
   }
 

src/css/styleguide/colors/_colors.scss

@@ -28,6 +28,9 @@
   --dp-2-surface-color: hsl(225, 20%, 78%);
   --dp-1-surface-color: hsl(225, 20%, 77%);
 
+  // content wrapper
+  --content-wrapper-color: var(--dp-24-surface-color);
+
   // success colors
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
@@ -65,8 +68,8 @@
   --on-chat-color: var(--black);
 
   // transfer colors
-  --transfer-color: var(--indigo-darken-1);
-  --transfer-hover-color: var(--indigo-lighten-1);
+  --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);
 
@@ -114,6 +117,9 @@
   --dp-2-surface-color: hsl(225, 20%, 3%);
   --dp-1-surface-color: hsl(225, 20%, 2%);
 
+  // content wrapper
+  --content-wrapper-color: var(--dp-24-surface-color);
+
   // success colors
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);