PW-207: Design Improvements

package.json

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

src/components/Collapse/SCollapse/SCollapse.vue

@@ -1,5 +1,6 @@
 <template>
   <el-collapse
+    :class="computedClasses"
     :value="value"
     :accordion="accordion"
     :style="computedStyles"
@@ -10,12 +11,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Provide } from 'vue-property-decorator'
+import { Mixins, Component, Prop, Provide } from 'vue-property-decorator'
 
+import DesignSystemInject from '../../DesignSystem/DesignSystemInject'
 import { BorderTypes } from '../consts'
 
 @Component
-export default class SCollapse extends Vue {
+export default class SCollapse extends Mixins(DesignSystemInject) {
   /**
    * Value of the collapse component. Can be `string / number / Array (non-accordion mode)`
    */
@@ -41,6 +43,14 @@ export default class SCollapse extends Vue {
 
   @Provide('sCollapse') sCollapse = this
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.designSystemClass) {
+      cssClasses.push(this.designSystemClass)
+    }
+    return cssClasses
+  }
+
   get computedStyles (): object {
     const styles = {} as any
     if (!this.borders || this.bordersType === BorderTypes.INTERNAL) {

src/stories/Collapse/SCollapse.stories.ts

@@ -1,8 +1,8 @@
 import { withKnobs, boolean, select } from '@storybook/addon-knobs'
 
-import { SCollapse, SCollapseItem } from '../../components'
-
+import { SCollapse, SCollapseItem, SDesignSystemProvider } from '../../components'
 import { BorderTypes } from '../../components/Collapse'
+import { DesignSystemTypes } from '../../utils/DesignSystem'
 
 export default {
   component: SCollapse,
@@ -11,8 +11,9 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SCollapse, SCollapseItem },
-  template: `<s-collapse :accordion="accordion" :borders="borders" :borders-type="bordersType" @change="handleChange" style="flex: 1;">
+  components: { SCollapse, SCollapseItem, SDesignSystemProvider },
+  template: `<s-design-system-provider :value="designSystem">
+              <s-collapse :accordion="accordion" :borders="borders" :borders-type="bordersType" @change="handleChange" style="flex: 1;">
                <s-collapse-item title="Consistency" name="1">
                  <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
                  <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
@@ -30,8 +31,12 @@ export const configurable = () => ({
                  <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
                  <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
                </s-collapse-item>
-             </s-collapse>`,
+             </s-collapse>
+             </s-design-system-provider>`,
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     accordion: {
       default: boolean('Accordion', false)
     },

src/stories/Intro/Customization.stories.ts

@@ -67,7 +67,7 @@ export const configurable = () => ({
                    v-for="button in buttons"
                    :key="button.type"
                    size="small"
-                   icon="refresh"
+                   icon="refresh-16"
                    :type="button.type"
                    :tooltip="button.tooltip"
                  >

src/stories/SDialog.stories.ts

@@ -1,7 +1,8 @@
 import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
-import { SDialog, SRow, SButton } from '../components'
+import { SDialog, SRow, SButton, SDesignSystemProvider } from '../components'
 import { BorderRadius } from '../types'
+import { DesignSystemTypes } from '../utils/DesignSystem'
 
 export default {
   component: SDialog,
@@ -10,40 +11,45 @@ export default {
 }
 
 export const configurable = () => ({
-  components: { SDialog, SRow, SButton },
-  template: `<s-row
-               class="s-flex"
-               style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
-             >
-               <s-button size="medium" @click="visible = true">Open Dialog</s-button>
-               <s-dialog
-                 :visible.sync="visible"
-                 :modal="modal"
-                 :title="title"
-                 :width="width"
-                 :fullscreen="fullscreen"
-                 :top="top"
-                 :border-radius="borderRadius"
-                 :show-close="showClose"
-                 :close-on-click-modal="closeOnClickModal"
-                 :close-on-esc="closeOnEsc"
-                 :center="center"
-                 @open="handleOpen"
-                 @close="handleClose"
-                 @after-opened="handleAfterOpened"
-                 @after-closed="handleAfterClosed"
-               >
-                 <span>Default content</span>
-                 <template #footer>
-                   <s-button type="primary" size="medium" @click="visible = false">Confirm</s-button>
-                   <s-button type="secondary" size="medium" @click="visible = false">Cancel</s-button>
-                 </template>
-               </s-dialog>
-             </s-row>`,
+  components: { SDialog, SRow, SButton, SDesignSystemProvider },
+  template: `<s-design-system-provider :value="designSystem">
+              <s-row
+                class="s-flex"
+                style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
+              >
+                <s-button size="medium" @click="visible = true">Open Dialog</s-button>
+                <s-dialog
+                  :visible.sync="visible"
+                  :modal="modal"
+                  :title="title"
+                  :width="width"
+                  :fullscreen="fullscreen"
+                  :top="top"
+                  :border-radius="borderRadius"
+                  :show-close="showClose"
+                  :close-on-click-modal="closeOnClickModal"
+                  :close-on-esc="closeOnEsc"
+                  :center="center"
+                  @open="handleOpen"
+                  @close="handleClose"
+                  @after-opened="handleAfterOpened"
+                  @after-closed="handleAfterClosed"
+                >
+                  <span>Default content</span>
+                  <template #footer>
+                    <s-button type="primary" size="medium" @click="visible = false">Confirm</s-button>
+                    <s-button type="secondary" size="medium" @click="visible = false">Cancel</s-button>
+                  </template>
+                </s-dialog>
+              </s-row>
+            </s-design-system-provider>`,
   data: () => ({
     visible: false
   }),
   props: {
+    designSystem: {
+      default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT)
+    },
     modal: {
       default: boolean('Modal', true)
     },

src/stories/SInput.stories.ts

@@ -68,7 +68,7 @@ export const configurable = () => ({
       default: text('Prefix icon', 'el-icon-search')
     },
     suffix: {
-      default: text('Suffix icon', 'el-icon-search')
+      default: text('Suffix icon', 's-icon-clear-X-16')
     },
     disabled: {
       default: boolean('Disabled', false)

src/styles/neumorphism/button.scss

@@ -5,7 +5,7 @@ $neu-button-transition: all 0.25s ease-in-out !default;
 
 $neu-button-background-color-disabled: var(--s-color-utility-surface) !default;
 $neu-button-border-color-disabled: var(--s-color-utility-body) !default;
-$neu-button-box-shadow-disabled: -1px -1px 5px rgba(255, 255, 255, 0.6) !default;
+$neu-button-box-shadow-disabled: var(--s-shadow-element) !default;
 $neu-button-text-color-disabled: var(--s-color-base-content-tertiary) !default;
 
 // Primary button: common
@@ -49,25 +49,25 @@ $neu-button-secondary-text-color-alternative-active: var(--s-color-base-on-accen
 $neu-button-secondary-border-color: transparent !default;
 $neu-button-secondary-border-color-active: $neu-button-secondary-border-color !default;
 // Secondary button: box-shadow
-$neu-button-secondary-box-shadow: var(--s-shadow-surface) !default;
+$neu-button-secondary-box-shadow: var(--s-shadow-element-pressed) !default;
 $neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default;
-$neu-button-secondary-box-shadow-alternative: var(--s-shadow-element) !default;
+$neu-button-secondary-box-shadow-alternative: $neu-button-secondary-box-shadow !default;
 
 // Tertiary button: common
 $neu-button-tertiary-border-width: 0px !default;
 $neu-button-tertiary-border-style: $neu-button-border-style !default;
 // Tertiary button: background colors
-$neu-button-tertiary-background-color: var(--s-color-utility-surface) !default;
+$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;
 // Tertiary button: text colors
-$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;
+$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;
 // 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: 1px 1px 2px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light) !default;
+$neu-button-tertiary-box-shadow: $neu-button-secondary-box-shadow !default;
 $neu-button-tertiary-box-shadow-active: $neu-button-tertiary-box-shadow !default;
 
 // Action button: common
@@ -90,9 +90,9 @@ $neu-button-action-border-color-hover: $neu-button-action-border-color !default;
 $neu-button-action-border-color-pressed: $neu-button-action-border-color !default;
 $neu-button-action-border-color-alternative: transparent !default;
 // Action button: box-shadow
-$neu-button-action-box-shadow: var(--s-shadow-element) !default;
+$neu-button-action-box-shadow: $neu-button-secondary-box-shadow !default;
 $neu-button-action-box-shadow-hover: $neu-button-action-box-shadow !default;
-$neu-button-action-box-shadow-pressed: var(--s-shadow-element-pressed) !default;
+$neu-button-action-box-shadow-pressed: var(--s-shadow-element) !default;
 $neu-button-action-box-shadow-alternative: none !default;
 
 $neu-button-padding-big: 7px 13px !default;
@@ -156,12 +156,18 @@ $neu-button-padding-mini: 3px 6px !default;
       border-color: $neu-button-primary-border-color-hover;
       color: $neu-button-primary-text-color-hover;
       box-shadow: $neu-button-primary-box-shadow-hover;
+      &.is-circle {
+        border-color: $neu-button-primary-background-color-hover;
+      }
     }
     &:active, &.s-pressed {
       background: $neu-button-primary-background-color-pressed;
       border-color: $neu-button-primary-border-color-pressed;
       color: $neu-button-primary-text-color-pressed;
       box-shadow: $neu-button-primary-box-shadow-pressed;
+      &.is-circle {
+        border-color: $neu-button-primary-background-color-pressed;
+      }
     }
     @include disabled;
 
@@ -176,6 +182,13 @@ $neu-button-padding-mini: 3px 6px !default;
 
       @include disabled($neu-button-primary-border-width-alternative);
     }
+
+    &.is-circle {
+      border-color: $neu-button-primary-background-color;
+      &:disabled, &:disabled:hover {
+        border-color: $neu-button-border-color-disabled;
+      }
+    }
   }
 
   &.s-secondary {

src/styles/neumorphism/card.scss

@@ -36,17 +36,13 @@
 
   &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus {
     box-shadow: var(--s-shadow-element);
-
-    &.s-pressed {
-      box-shadow: var(--s-shadow-element-pressed);
-    }
   }
 
   &.s-primary {
     background: var(--s-color-utility-surface);
 
     &.is-always-shadow, &.is-hover-shadow:hover, &.is-hover-shadow:focus {
-      box-shadow: var(--s-shadow-surface);
+      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);
     }
   }
 }

src/styles/neumorphism/collapse.scss

@@ -0,0 +1,19 @@
+$neu-collapse-button-size: var(--s-size-medium);
+$neu-collapse-button-border-width: 0px !default;
+$neu-collapse-button-border-style: solid !default !default;
+$neu-collapse-button-background-color: var(--s-color-utility-body) !default;
+$neu-collapse-button-text-color: var(--s-color-base-content-tertiary) !default;
+$neu-collapse-button-border-color: transparent !default;
+$neu-collapse-button-box-shadow: var(--s-shadow-element-pressed) !default;
+$neu-collapse-button-font-size: 28px !default;
+.el-collapse.neumorphic .el-icon-arrow-right {
+  width: $neu-collapse-button-size;
+  height: $neu-collapse-button-size;
+  background: $neu-collapse-button-background-color;
+  border-color: $neu-collapse-button-border-color;
+  border-style: $neu-collapse-button-border-style;
+  border-width: $neu-collapse-button-border-width;
+  box-shadow: $neu-collapse-button-box-shadow;
+  color: $neu-collapse-button-text-color;
+  font-size: $neu-collapse-button-font-size;
+}

src/styles/neumorphism/dialog.scss

@@ -0,0 +1,6 @@
+.v-modal {
+  opacity: 0.75;
+  backdrop-filter: blur(4px);
+  // TODO: Fix FF behaviour
+  filter: blur(4px);
+}

src/styles/neumorphism/index.scss

@@ -1,7 +1,9 @@
 @import "./button.scss";
 @import "./input.scss";
 @import "./card.scss";
+@import "./collapse.scss";
 @import "./tabs.scss";
 @import "./radio.scss";
 @import "./switch.scss";
 @import "./tooltip.scss";
+@import "./dialog.scss";

src/styles/neumorphism/input.scss

@@ -1,7 +1,7 @@
 $neu-input-border-width: 0 !default;
 $neu-input-background: var(--s-color-base-background) !default;
 $neu-input-box-shadow: var(--s-shadow-element) !default;
-$neu-input-box-shadow-active: var(--s-shadow-element-pressed) !default;
+$neu-input-box-shadow-active: $neu-input-box-shadow !default;
 $neu-input-color: var(--s-color-base-content-primary) !default;
 $neu-input-color-disabled: var(--s-color-base-content-secondary) !default;
 $neu-input-placeholder-color: var(--s-color-base-content-secondary) !default;
@@ -41,6 +41,8 @@ $neu-input-padding: $s-basic-spacing $s-basic-spacing * 2 !default;
   & .s-placeholder {
     color: $neu-input-placeholder-color;
     top: $neu-input-placeholder-offset;
+    letter-spacing: var(--s-letter-spacing-small);
+    @include font-weight(300, true);
   }
 
   &, &:hover, &.s-focused, &.s-disabled {

src/styles/neumorphism/radio.scss

@@ -64,7 +64,7 @@
     .el-radio__inner {
       border-width: 1px;
       border-color: var(--s-color-base-border-secondary);
-      box-shadow: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1);
+      box-shadow: 1px 1px 2px var(--s-shadow-color-light), inset 1px 1px 2px var(--s-shadow-color-dark);
       background-color: var(--s-color-base-background);
 
       &:hover {
@@ -73,7 +73,7 @@
 
       &::after {
         background-color: var(--s-color-theme-accent);
-        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
+        box-shadow: -1px -1px 1px var(--s-shadow-color-dark-light), 1px 1px 3px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light-dark);
       }
     }
   }

src/styles/neumorphism/switch.scss

@@ -12,7 +12,7 @@ $switch-circle-size: 18px;
     &__core {
       background-color: var(--s-color-base-background);
       border: none;
-      box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.02), 1px 1px 3px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.8);
+      box-shadow: var(--s-shadow-element);
 
       &::after {
         width: $switch-circle-size;
@@ -33,6 +33,7 @@ $switch-circle-size: 18px;
         &::after {
           margin-left: -$switch-circle-size - 1;
           background-color: var(--s-color-base-on-accent);
+          box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--s-shadow-color-light), 0px 0px 20px rgba(247, 84, 163, 0.5);
         }
       }