PW-207: Design Improvements Updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

src/components/Dialog/SDialog.vue

@@ -33,10 +33,11 @@
 import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import elementResizeDetectorMaker from 'element-resize-detector'
 
+import DesignSystemInject from '../DesignSystem/DesignSystemInject'
 import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 
 @Component
-export default class SDialog extends Mixins(BorderRadiusMixin) {
+export default class SDialog extends Mixins(BorderRadiusMixin, DesignSystemInject) {
   /**
    * Visibility of the dialog component.
    *
@@ -160,6 +161,9 @@ export default class SDialog extends Mixins(BorderRadiusMixin) {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
     if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }

src/styles/neumorphism/button.scss

@@ -43,7 +43,7 @@ $neu-button-secondary-background-color-alternative-active: var(--s-color-base-co
 // Secondary button: text colors
 $neu-button-secondary-text-color: var(--s-color-base-on-accent) !default;
 $neu-button-secondary-text-color-active: $neu-button-secondary-text-color !default;
-$neu-button-secondary-text-color-alternative: var(--s-color-base-content-tertiary) !default;
+$neu-button-secondary-text-color-alternative: var(--s-color-base-content-secondary) !default;
 $neu-button-secondary-text-color-alternative-active: var(--s-color-base-on-accent) !default;
 // Secondary button: border colors
 $neu-button-secondary-border-color: transparent !default;
@@ -59,15 +59,15 @@ $neu-button-tertiary-border-style: $neu-button-border-style !default;
 // Tertiary button: background colors
 $neu-button-tertiary-background-color: var(--s-color-utility-body) !default;
 $neu-button-tertiary-background-color-active: $neu-button-tertiary-background-color !default;
-$neu-button-tertiary-background-color-alternative: var(--s-color-utility-body) !default;
+$neu-button-tertiary-background-color-alternative: $neu-button-tertiary-background-color !default;
 // Tertiary button: text colors
-$neu-button-tertiary-text-color: var(--s-color-base-content-tertiary) !default;
-$neu-button-tertiary-text-color-active: var(--s-color-base-content-secondary) !default;
+$neu-button-tertiary-text-color: var(--s-color-base-content-secondary) !default;
+$neu-button-tertiary-text-color-active: var(--s-color-base-content-primary) !default;
 // Tertiary button: border colors
 $neu-button-tertiary-border-color: transparent !default;
 $neu-button-tertiary-border-color-active: $neu-button-tertiary-border-color !default;
 // Tertiary button: box-shadow
-$neu-button-tertiary-box-shadow: $neu-button-secondary-box-shadow !default;
+$neu-button-tertiary-box-shadow: var(--s-shadow-element) !default;
 $neu-button-tertiary-box-shadow-active: $neu-button-tertiary-box-shadow !default;
 
 // Action button: common

src/styles/neumorphism/card.scss

@@ -42,7 +42,7 @@
     background: var(--s-color-utility-surface);
 
     &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus {
-      box-shadow: -5px -5px 15px rgba(255, 255, 255, 0.9), 1px 1px 15px var(--s-shadow-color-dark), inset 1px 1px 10px var(--s-shadow-color-light);
+      box-shadow: var(--s-shadow-dialog);
     }
   }
 }

src/styles/neumorphism/dialog.scss

@@ -1,3 +1,8 @@
+.neumorphic {
+  .el-dialog {
+    box-shadow: var(--s-shadow-dialog);
+  }
+}
 .v-modal {
   opacity: 0.75;
   backdrop-filter: blur(4px);

src/styles/neumorphism/input.scss

@@ -29,6 +29,11 @@ $neu-input-padding: $s-basic-spacing $s-basic-spacing * 2 !default;
   .el-input, .el-textarea {
     &__inner {
       color: $neu-input-color;
+      letter-spacing: var(--s-letter-spacing-small);
+
+      &::placeholder {
+        color: var(--s-color-base-content-primary);
+      }
     }
 
     &.is-disabled {
@@ -60,4 +65,9 @@ $neu-input-padding: $s-basic-spacing $s-basic-spacing * 2 !default;
       color: $neu-input-placeholder-color;
     }
   }
+
+  .el-input__prefix {
+    color: var(--s-color-base-content-secondary);
+    font-size: var(--s-icon-font-size-mini);
+  }
 }

src/styles/neumorphism/tabs.scss

@@ -40,6 +40,9 @@
           }
         }
       }
+      &__item {
+        text-transform: uppercase;
+      }
     }
   }
 }

src/styles/root.scss

@@ -99,6 +99,7 @@
   --s-shadow-color-light-dark: #{$s-shadow-color-light-dark};
   --s-shadow-element: #{$s-shadow-element};
   --s-shadow-element-pressed: #{$s-shadow-element-pressed};
+  --s-shadow-dialog: #{$s-shadow-dialog};
   --s-shadow-surface: #{$s-shadow-surface};
   --s-shadow-tooltip: #{$s-shadow-tooltip};
   --s-shadow-tab: #{$s-shadow-tab};

src/styles/variables.scss

@@ -40,6 +40,7 @@ $s-shadow-color-light: rgba(255, 255, 255, 1);
 $s-shadow-color-light-dark: rgba(255, 255, 255, 0.8);
 $s-shadow-element: 1px 1px 5px $s-shadow-color-light, inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px $s-shadow-color-dark;
 $s-shadow-element-pressed: -5px -5px 10px $s-shadow-color-light, 1px 1px 10px $s-shadow-color-dark, inset 1px 1px 2px $s-shadow-color-light-dark;
+$s-shadow-dialog: -5px -5px 15px rgba(255, 255, 255, 0.9), 1px 1px 15px var(--s-shadow-color-dark), inset 1px 1px 10px var(--s-shadow-color-light);
 
 // TODO: use it and discuss colors of these shadows
 $s-shadow-surface: 0px 1px 4px rgba(13, 2, 72, 0.35) !default;