From f32d58652364461b0090b5bc987e428fca150ba1 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Wed, 14 Jul 2021 10:10:36 +0300 Subject: [PATCH 1/3] Updated cards, dialog, tabs neumorphic shadows. --- src/components/Dialog/SDialog.vue | 6 +++++- src/styles/neumorphism/button.scss | 10 +++++----- src/styles/neumorphism/card.scss | 2 +- src/styles/neumorphism/dialog.scss | 5 +++++ src/styles/neumorphism/tabs.scss | 3 +++ src/styles/root.scss | 1 + src/styles/variables.scss | 1 + 7 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue index d838d025..d9654fa8 100644 --- a/src/components/Dialog/SDialog.vue +++ b/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 { const cssClasses: Array = [] + if (this.designSystemClass) { + cssClasses.push(this.designSystemClass) + } if (this.isStandardBorderRadius) { cssClasses.push(`s-border-radius-${this.borderRadius}`) } diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss index 100e84b1..071032de 100644 --- a/src/styles/neumorphism/button.scss +++ b/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 diff --git a/src/styles/neumorphism/card.scss b/src/styles/neumorphism/card.scss index 3f6737fa..f6bc1685 100644 --- a/src/styles/neumorphism/card.scss +++ b/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); } } } \ No newline at end of file diff --git a/src/styles/neumorphism/dialog.scss b/src/styles/neumorphism/dialog.scss index 907f5760..95bb9ce3 100644 --- a/src/styles/neumorphism/dialog.scss +++ b/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); diff --git a/src/styles/neumorphism/tabs.scss b/src/styles/neumorphism/tabs.scss index 88cc557a..95ec8d5b 100644 --- a/src/styles/neumorphism/tabs.scss +++ b/src/styles/neumorphism/tabs.scss @@ -40,6 +40,9 @@ } } } + &__item { + text-transform: uppercase; + } } } } \ No newline at end of file diff --git a/src/styles/root.scss b/src/styles/root.scss index b3956a8d..bbb8ab98 100644 --- a/src/styles/root.scss +++ b/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}; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 89bec9c9..979a6175 100644 --- a/src/styles/variables.scss +++ b/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; From 2d1449b18e876af0c17fece57f4e6095dcf3c38a Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Wed, 14 Jul 2021 13:40:57 +0300 Subject: [PATCH 2/3] Increased UI Lib version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 56b220af..906436d4 100644 --- a/package.json +++ b/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/" From 679676a732d3dc1ed927afa7d32f70e83940de03 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 15 Jul 2021 02:12:48 +0300 Subject: [PATCH 3/3] Updated input styles. --- src/styles/neumorphism/input.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss index 0f1b4651..7e6b8aa3 100644 --- a/src/styles/neumorphism/input.scss +++ b/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); + } }