@webitel/ui-sdk 0.9.45 → 0.9.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.45",
+  "version": "0.9.46",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/atoms/wt-button/wt-button.vue

@@ -102,13 +102,13 @@
       &.secondary {
         color: var(--btn-secondary-color);
         border-color: var(--btn-secondary-color);
-        background: var(--btn-secondary-bg-color);
+        background: var(--btn-secondary-color);
 
         &:hover,
         &:active {
           color: var(--btn-secondary--hover-color);
           border-color: var(--btn-secondary--hover-color);
-          background: var(--btn-secondary-bg-color);
+          background: var(--btn-secondary-color);
         }
       }
 

package/src/components/molecules/wt-input/wt-input.vue

@@ -25,7 +25,6 @@
         :class="{
           'wt-input--is-password': isPassword,
         }"
-        ref="wt-input"
         :value="value"
         :type="inputType"
         :placeholder="placeholder || label"
@@ -34,28 +33,20 @@
         :max="numberMax"
         v-on="listeners"
       >
-      <div
-        class="wt-input__after-wrapper"
-        ref="after-wrapper"
-      >
-        <slot
-          name="after-input"
-        ></slot>
-        <slot
-          v-if="isPassword"
-          name="show-password"
-          v-bind="{
+      <slot
+        v-if="isPassword"
+        name="show-password"
+        v-bind="{
           isPasswordVisible,
           switchVisibilityPassword,
         }"
-        >
-          <wt-icon-btn
-            class="wt-input__password-button"
-            :icon="showPasswordIcon"
-            @click.native="switchVisibilityPassword"
-          ></wt-icon-btn>
-        </slot>
-      </div>
+      >
+        <wt-icon-btn
+          class="wt-input__password-button"
+          :icon="showPasswordIcon"
+          @click.native="switchVisibilityPassword"
+        ></wt-icon-btn>
+      </slot>
     </div>
     <wt-input-info
       v-if="isValidation"
@@ -66,9 +57,9 @@
 </template>
 
 <script>
-import validationMixin from '../../../mixins/validationMixin/validationMixin';
+  import validationMixin from '../../../mixins/validationMixin/validationMixin';
 
-export default {
+  export default {
     name: 'wt-input',
     mixins: [validationMixin],
     props: {
@@ -216,19 +207,8 @@ export default {
         this.isPasswordVisible = !this.isPasswordVisible;
         this.inputType = this.isPasswordVisible ? 'text' : 'password';
       },
-
-      updateInputPaddings() {
-        const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
-        const inputEl = this.$refs['wt-input'];
-        const defaultInputPadding = parseInt(getComputedStyle(document.documentElement)
-          .getPropertyValue('--input-padding'), 10);
-        inputEl.style.paddingRight = `${defaultInputPadding + afterWrapperWidth + defaultInputPadding}px`;
-      },
     },
-    mounted() {
-      this.updateInputPaddings();
-    },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -318,24 +298,19 @@ export default {
     }
   }
 
-  .wt-input__after-wrapper {
-    display: flex;
-    gap: var(--input-after-wrapper-gap);
-    align-items: center;
+  .wt-input__password-button {
     position: absolute;
     top: 50%;
     right: var(--input-icon-margin);
     transform: translateY(-50%);
 
-    .wt-input__password-button {
-      .wt-input--disabled & ::v-deep .wt-icon__icon {
-        fill: var(--icon-color-disabled);
-      }
+    .wt-input--disabled & ::v-deep .wt-icon__icon {
+      fill: var(--icon-color-disabled);
+    }
 
-      .wt-input:hover & ::v-deep .wt-icon__icon,
-      .wt-input:focus-within & ::v-deep .wt-icon__icon {
-        fill: var(--icon-color--hover);
-      }
+    .wt-input:hover & ::v-deep .wt-icon__icon,
+    .wt-input:focus-within & ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
     }
   }
 </style>

package/src/css/components/atoms/wt-button/_variables.scss

@@ -23,12 +23,11 @@
   --btn-dark-font-color: #000;
   --btn-light-font-color: #fff;
 
-  --btn-primary-color: var(--main-accent-color);
+  --btn-primary-color: var(--accent-color);
   --btn-primary--hover-color: #EFB917;
 
-  --btn-secondary-color: #808080;
-  --btn-secondary-bg-color: transparent;
-  --btn-secondary--hover-color: #000;
+  --btn-secondary-color: hsla(var(--_secondary-color), var(--_opacity--default));
+  --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
 
   --btn-disabled-color: var(--disabled-color);
   --btn-disabled-bg-color: transparent;

package/src/css/components/molecules/wt-input/_variables.scss

@@ -3,6 +3,4 @@
   --input-padding: 9px;
   --input-border: 1px solid;
   --input-icon-margin: 10px;
-
-  --input-after-wrapper-gap: var(--spacing--xs);
 }