From 973997ac664b3f956d48f7cc0094c9b6590812e4 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Wed, 7 Jul 2021 03:00:52 +0300 Subject: [PATCH 1/7] Updated switch, inputs, button, card neu styles. --- src/stories/Intro/Customization.stories.ts | 2 +- src/stories/SInput.stories.ts | 2 +- src/styles/neumorphism/button.scss | 16 ++++++++-------- src/styles/neumorphism/card.scss | 2 +- src/styles/neumorphism/input.scss | 6 ++++-- src/styles/neumorphism/radio.scss | 4 ++-- src/styles/neumorphism/switch.scss | 2 +- src/styles/variables.scss | 2 +- 8 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts index a5451ddb..bc368409 100644 --- a/src/stories/Intro/Customization.stories.ts +++ b/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" > diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts index 29981c57..8095e389 100644 --- a/src/stories/SInput.stories.ts +++ b/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) diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss index a993c5d3..24d714c1 100644 --- a/src/styles/neumorphism/button.scss +++ b/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: 1px 1px 5px var(--s-shadow-color-light), inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px var(--s-shadow-color-dark) !default; $neu-button-text-color-disabled: var(--s-color-base-content-tertiary) !default; // Primary button: common @@ -49,7 +49,7 @@ $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: -5px -5px 10px var(--s-shadow-color-light), 1px 1px 10px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light-dark) !default; $neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default; $neu-button-secondary-box-shadow-alternative: var(--s-shadow-element) !default; @@ -57,17 +57,17 @@ $neu-button-secondary-box-shadow-alternative: var(--s-shadow-element) !default; $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: 1px 1px 5px var(--s-shadow-color-light), inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px var(--s-shadow-color-dark) !default; $neu-button-action-box-shadow-alternative: none !default; $neu-button-padding-big: 7px 13px !default; diff --git a/src/styles/neumorphism/card.scss b/src/styles/neumorphism/card.scss index f11dc7ce..85cfc65a 100644 --- a/src/styles/neumorphism/card.scss +++ b/src/styles/neumorphism/card.scss @@ -46,7 +46,7 @@ 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); } } } \ No newline at end of file diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss index fc44a906..36077969 100644 --- a/src/styles/neumorphism/input.scss +++ b/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: 1px 1px 5px var(--s-shadow-color-light), inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px var(--s-shadow-color-dark) !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 { diff --git a/src/styles/neumorphism/radio.scss b/src/styles/neumorphism/radio.scss index 5e297f15..5500e4ba 100644 --- a/src/styles/neumorphism/radio.scss +++ b/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); } } } diff --git a/src/styles/neumorphism/switch.scss b/src/styles/neumorphism/switch.scss index d561cdb1..ff59bbe8 100644 --- a/src/styles/neumorphism/switch.scss +++ b/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: -5px -5px 10px var(--s-shadow-color-light), 1px 1px 10px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light-dark); &::after { width: $switch-circle-size; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index f80e8d29..2a44de14 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -43,7 +43,7 @@ $s-shadow-element-pressed: 1px 1px 2px $s-shadow-color-light, inset 1px 1px 2px // TODO: use it and discuss colors of these shadows $s-shadow-surface: 0px 1px 4px rgba(13, 2, 72, 0.35) !default; $s-shadow-tooltip: 0px 1px 4px rgba(13, 2, 72, 0.35) !default; -$s-shadow-tab: 0px 1px 1px rgba(0, 0, 0, 0.1) !default; +$s-shadow-tab: 0px 1px 1px var(--s-shadow-color-dark) !default; $s-shadow-dropdown: 0px 4px 8px rgba(19, 19, 19, 0.15) !default; $s-shadow-mobile-tap-bar: 0px -4px 8px rgba(19, 19, 19, 0.15) !default; $s-shadow-mobile-side-menu: -4px 4px 8px rgba(19, 19, 19, 0.15) !default; From 49998a5d104a6e63d4db7a39a09af88103c0003c Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Wed, 7 Jul 2021 03:02:56 +0300 Subject: [PATCH 2/7] Updated UI Lib version. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2a4a4553..56b220af 100644 --- a/package.json +++ b/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/" From c14b5ba8b7c33335b56891e910fc2436260f58c5 Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Thu, 8 Jul 2021 07:27:41 +0300 Subject: [PATCH 3/7] Updated neumorphism styles. --- src/stories/SDialog.stories.ts | 68 +++++++++++---------- src/styles/neumorphism/button.scss | 6 +- src/styles/neumorphism/dialog.scss | 6 ++ src/styles/neumorphism/index.scss | 1 + src/styles/neumorphism/input.scss | 2 +- src/styles/neumorphism/switch.scss | 3 +- src/styles/neumorphism/tabs.scss | 5 +- src/styles/neumorphism/theme-variables.scss | 2 +- src/styles/root.scss | 2 + src/styles/variables.scss | 3 + 10 files changed, 58 insertions(+), 40 deletions(-) create mode 100644 src/styles/neumorphism/dialog.scss diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts index 2f5456dd..e7ec3795 100644 --- a/src/stories/SDialog.stories.ts +++ b/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: ` - Open Dialog - - Default content - - - `, + components: { SDialog, SRow, SButton, SDesignSystemProvider }, + template: ` + + Open Dialog + + Default content + + + + `, data: () => ({ visible: false }), props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, modal: { default: boolean('Modal', true) }, diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss index 24d714c1..ba02b6ff 100644 --- a/src/styles/neumorphism/button.scss +++ b/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 var(--s-shadow-color-light), inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px var(--s-shadow-color-dark) !default; +$neu-button-box-shadow-disabled: var(--s-shadow-inset) !default; $neu-button-text-color-disabled: var(--s-color-base-content-tertiary) !default; // Primary button: common @@ -49,7 +49,7 @@ $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: -5px -5px 10px var(--s-shadow-color-light), 1px 1px 10px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light-dark) !default; +$neu-button-secondary-box-shadow: var(--s-shadow-drop) !default; $neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default; $neu-button-secondary-box-shadow-alternative: var(--s-shadow-element) !default; @@ -92,7 +92,7 @@ $neu-button-action-border-color-alternative: transparent !default; // Action button: box-shadow $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: 1px 1px 5px var(--s-shadow-color-light), inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px var(--s-shadow-color-dark) !default; +$neu-button-action-box-shadow-pressed: var(--s-shadow-inset) !default; $neu-button-action-box-shadow-alternative: none !default; $neu-button-padding-big: 7px 13px !default; diff --git a/src/styles/neumorphism/dialog.scss b/src/styles/neumorphism/dialog.scss new file mode 100644 index 00000000..907f5760 --- /dev/null +++ b/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); +} diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss index 9c1b356c..6e093d4a 100644 --- a/src/styles/neumorphism/index.scss +++ b/src/styles/neumorphism/index.scss @@ -5,3 +5,4 @@ @import "./radio.scss"; @import "./switch.scss"; @import "./tooltip.scss"; +@import "./dialog.scss"; diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss index 36077969..188c475c 100644 --- a/src/styles/neumorphism/input.scss +++ b/src/styles/neumorphism/input.scss @@ -1,6 +1,6 @@ $neu-input-border-width: 0 !default; $neu-input-background: var(--s-color-base-background) !default; -$neu-input-box-shadow: 1px 1px 5px var(--s-shadow-color-light), inset -5px -5px 5px rgba(255, 255, 255, 0.5), inset 1px 1px 10px var(--s-shadow-color-dark) !default; +$neu-input-box-shadow: var(--s-shadow-inset) !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; diff --git a/src/styles/neumorphism/switch.scss b/src/styles/neumorphism/switch.scss index ff59bbe8..dcf02f6b 100644 --- a/src/styles/neumorphism/switch.scss +++ b/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: -5px -5px 10px var(--s-shadow-color-light), 1px 1px 10px var(--s-shadow-color-dark), inset 1px 1px 2px var(--s-shadow-color-light-dark); + box-shadow: var(--s-shadow-inset); &::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); } } diff --git a/src/styles/neumorphism/tabs.scss b/src/styles/neumorphism/tabs.scss index 1a577717..6c2d4c80 100644 --- a/src/styles/neumorphism/tabs.scss +++ b/src/styles/neumorphism/tabs.scss @@ -19,15 +19,14 @@ .el-tabs { &__nav-wrap { background-color: var(--s-color-base-background); - filter: drop-shadow(1px 1px 2px var(--s-shadow-color-dark)); - box-shadow: inset 1px 1px 2px var(--s-shadow-color-light); + box-shadow: var(--s-shadow-drop); .el-tabs__item { &.is-active { &, &:focus.is-focus { color: var(--s-color-theme-accent); background-color: var(--s-color-utility-surface); - box-shadow: 1px 1px 2px var(--s-shadow-color-light), inset 1px 1px 2px var(--s-shadow-color-dark); + box-shadow: var(--s-shadow-inset); } } &:not(.is-active) { diff --git a/src/styles/neumorphism/theme-variables.scss b/src/styles/neumorphism/theme-variables.scss index a110b194..541f9943 100644 --- a/src/styles/neumorphism/theme-variables.scss +++ b/src/styles/neumorphism/theme-variables.scss @@ -27,7 +27,7 @@ $s-color-base-on-accent: #FFFFFF; // Utility colors $s-color-utility-body: #F7F3F4; $s-color-utility-surface: #FDF7FB; -$s-color-utility-overlay: rgba(0, 0, 0, 0.45); +$s-color-utility-overlay: rgba(42, 23, 31, 0.1); // Status colors $s-color-status-success: #34AD87; $s-color-status-warning: #479AEF; diff --git a/src/styles/root.scss b/src/styles/root.scss index b3956a8d..0e3c582d 100644 --- a/src/styles/root.scss +++ b/src/styles/root.scss @@ -99,6 +99,8 @@ --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-inset: #{$s-shadow-inset}; + --s-shadow-drop: #{$s-shadow-drop}; --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 2a44de14..650a11f7 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -40,6 +40,9 @@ $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 1px $s-shadow-color-dark-light, 1px 1px 3px $s-shadow-color-dark, inset 1px 1px 2px $s-shadow-color-light-dark; // input, card $s-shadow-element-pressed: 1px 1px 2px $s-shadow-color-light, inset 1px 1px 2px $s-shadow-color-dark; +$s-shadow-inset: 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-drop: -5px -5px 10px $s-shadow-color-light, 1px 1px 10px $s-shadow-color-dark, inset 1px 1px 2px $s-shadow-color-light-dark; + // TODO: use it and discuss colors of these shadows $s-shadow-surface: 0px 1px 4px rgba(13, 2, 72, 0.35) !default; $s-shadow-tooltip: 0px 1px 4px rgba(13, 2, 72, 0.35) !default; From 5d8eab77d370e9f860417937b03ec274cacac20c Mon Sep 17 00:00:00 2001 From: alexnatalia Date: Fri, 9 Jul 2021 11:23:40 +0300 Subject: [PATCH 4/7] Added collapse button neumorphic styles. --- .../Collapse/SCollapse/SCollapse.vue | 14 ++++++++++++-- src/stories/Collapse/SCollapse.stories.ts | 15 ++++++++++----- src/styles/neumorphism/collapse.scss | 19 +++++++++++++++++++ src/styles/neumorphism/index.scss | 1 + 4 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 src/styles/neumorphism/collapse.scss diff --git a/src/components/Collapse/SCollapse/SCollapse.vue b/src/components/Collapse/SCollapse/SCollapse.vue index 6d5b7b74..b4b5d6b0 100644 --- a/src/components/Collapse/SCollapse/SCollapse.vue +++ b/src/components/Collapse/SCollapse/SCollapse.vue @@ -1,5 +1,6 @@