From f43afaf1a6bf6c82083b83d5effb36a41a53fc3d Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Thu, 27 May 2021 10:15:32 +0300 Subject: [PATCH 01/14] add color variables --- src/styles/neomorphism/variables.scss | 38 +++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 src/styles/neomorphism/variables.scss diff --git a/src/styles/neomorphism/variables.scss b/src/styles/neomorphism/variables.scss new file mode 100644 index 00000000..3ee97158 --- /dev/null +++ b/src/styles/neomorphism/variables.scss @@ -0,0 +1,38 @@ +// Brand +$neo-brand-pinky: #ED145B; // Some texts, brand stuff +$neo-brand-blue: #0D0248; // Brand stuff +// Theme Primary +$neo-color-theme-accent: #F8087B; +$neo-color-theme-accent-hover: #F754A3; +$neo-color-theme-accent-pressed: #bf065f; +$neo-color-theme-accent-focused: #ab0555; +// Theme Secondary +$neo-color-theme-secondary: #44E5B2; +$neo-color-theme-secondary-hover: #24DAA0; +// Base: Content +$neo-color-base-content-primary: #2A171F; // Main text and icons +$neo-color-base-content-secondary: #A19A9D; // Secondary text +$neo-color-base-content-tertiary: #D5CDD0; // Hint and placeholder text +$neo-color-base-content-quaternary: #75787b; // Text +// Base: Background +$neo-color-base-background: #FAF4F8; // Interactive elements background: controls, text field +$neo-color-base-background-hover: #F7F3F4; +$neo-color-base-background-dark: #2E2E36; // Dark background +// Base: Border +$neo-color-base-border-primary: #F7F3F4; // High emphasis border/divider +$neo-color-base-border-secondary: #EDE4E7; // Low emphasis border/divider +// Base: Misc +$neo-color-base-disabled: #FDF7FB; // Disabled state +$neo-color-base-on-disabled: #A19A9D; // Text on disabled element +$neo-color-base-on-accent: #FFFFFF; // Text on dark/accent backgrounds +// Utility +$neo-color-utility-body: #F7F3F4; +$neo-color-utility-surface: #FDF7FB; +$neo-color-utility-overlay: rgba(0, 0, 0, 0.45); +// Statuses +$neo-color-status-success: #34AD87; // Success text and icon +$neo-color-status-success-background: #B9EBDB; // Success state background +$neo-color-status-warning: #479AEF; // Warning text and icon +$neo-color-status-warning-background: #C6E2FF; // Warning state background +$neo-color-status-error: #F754A3; // Error text and icon +$neo-color-status-error-background: #FFD8EB; // Error state background \ No newline at end of file From 5caa3c5042fa9df56b34b984f4a1637dac03e40a Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Thu, 27 May 2021 12:49:10 +0300 Subject: [PATCH 02/14] add provide inject components --- src/components/Button/SButton.vue | 6 +- .../DesignSystem/DesignSystemInject.ts | 11 ++++ .../DesignSystem/DesignSystemProvider.vue | 16 +++++ src/components/DesignSystem/consts.ts | 4 ++ src/components/DesignSystem/index.ts | 9 +++ src/components/index.ts | 2 + src/stories/SButton.stories.ts | 17 ++++-- src/styles/neomorphism/button.scss | 0 src/styles/neomorphism/index.scss | 1 + src/styles/neomorphism/variables.scss | 58 +++++++++---------- 10 files changed, 89 insertions(+), 35 deletions(-) create mode 100644 src/components/DesignSystem/DesignSystemInject.ts create mode 100644 src/components/DesignSystem/DesignSystemProvider.vue create mode 100644 src/components/DesignSystem/consts.ts create mode 100644 src/components/DesignSystem/index.ts create mode 100644 src/styles/neomorphism/button.scss create mode 100644 src/styles/neomorphism/index.scss diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 7d971e2a..b4d15841 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -26,6 +26,7 @@ import { ElForm } from 'element-ui/types/form' import { ElFormItem } from 'element-ui/types/form-item' import { PopoverPlacement } from 'element-ui/types/popover' +import { DesignSystemInject } from '../DesignSystem' import SizeMixin from '../../mixins/SizeMixin' import BorderRadiusMixin from '../../mixins/BorderRadiusMixin' import { SIcon } from '../Icon' @@ -35,7 +36,7 @@ import { ButtonTypes, ButtonNativeTypes, ButtonIconPosition } from './consts' @Component({ components: { SIcon, STooltip } }) -export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) { +export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin, DesignSystemInject) { readonly IconPosition = ButtonIconPosition readonly ButtonTypes = ButtonTypes /** @@ -119,6 +120,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) { get computedClasses (): Array { const cssClasses: Array = [] + if (this.designSystemClass) { + cssClasses.push(this.designSystemClass) + } if ((this.elForm || this.elFormItem || {}).size) { cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`) } else if (this.isStandardSize) { diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts new file mode 100644 index 00000000..dbd9ae12 --- /dev/null +++ b/src/components/DesignSystem/DesignSystemInject.ts @@ -0,0 +1,11 @@ +import { Component, Vue, Inject, Prop } from 'vue-property-decorator' + +@Component +export default class DesignSystemInject extends Vue { + @Prop({ default: true, type: Boolean }) readonly useDesignSystem!: boolean + @Inject('designSystem') readonly designSystem!: any + + get designSystemClass (): string { + return this.useDesignSystem ? this.designSystem.value : '' + } +} diff --git a/src/components/DesignSystem/DesignSystemProvider.vue b/src/components/DesignSystem/DesignSystemProvider.vue new file mode 100644 index 00000000..5f1b6f1f --- /dev/null +++ b/src/components/DesignSystem/DesignSystemProvider.vue @@ -0,0 +1,16 @@ + + + diff --git a/src/components/DesignSystem/consts.ts b/src/components/DesignSystem/consts.ts new file mode 100644 index 00000000..0238ed45 --- /dev/null +++ b/src/components/DesignSystem/consts.ts @@ -0,0 +1,4 @@ +export enum DesignSystemTypes { + DEFAULT = '', + NEOMORPHIC = 'neomorphic' +} diff --git a/src/components/DesignSystem/index.ts b/src/components/DesignSystem/index.ts new file mode 100644 index 00000000..6b956053 --- /dev/null +++ b/src/components/DesignSystem/index.ts @@ -0,0 +1,9 @@ +import DesignSystemProvider from './DesignSystemProvider.vue' +import DesignSystemInject from './DesignSystemInject' +import { DesignSystemTypes } from './consts' + +export { + DesignSystemProvider, + DesignSystemInject, + DesignSystemTypes +} diff --git a/src/components/index.ts b/src/components/index.ts index ec7cbf6d..27d7b5af 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -12,6 +12,7 @@ import { SCol } from './Layout/Col' import { SCollapse, SCollapseItem } from './Collapse' import { SContainer } from './Layout/Container' import { SDatePicker } from './DatePicker' +import { DesignSystemProvider } from './DesignSystem' import { SDialog } from './Dialog' import { SDivider } from './Divider' import { SDropdown, SDropdownItem } from './Dropdown' @@ -47,6 +48,7 @@ export { SCollapseItem, SContainer, SDatePicker, + DesignSystemProvider, SDialog, SDivider, SDropdown, diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 6b90d8c3..45ca7748 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,8 +1,9 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain, DesignSystemProvider } from '../components' import { Size, BorderRadius } from '../types' import { ButtonTypes, ButtonIconPosition } from '../components/Button' +import { DesignSystemTypes } from '../components/DesignSystem' export default { component: SButton, @@ -12,8 +13,10 @@ export default { } export const configurable = () => ({ - components: { SButton }, - template: ` + ({ :rounded="rounded" :alternative="alternative" @click="handleClick" - > + > {{ type !== 'action' ? 'Default' : '' }} - `, + + `, props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, disabled: { default: boolean('Disabled', false) }, diff --git a/src/styles/neomorphism/button.scss b/src/styles/neomorphism/button.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/styles/neomorphism/index.scss b/src/styles/neomorphism/index.scss new file mode 100644 index 00000000..c05e3b76 --- /dev/null +++ b/src/styles/neomorphism/index.scss @@ -0,0 +1 @@ +@import "./variables"; diff --git a/src/styles/neomorphism/variables.scss b/src/styles/neomorphism/variables.scss index 3ee97158..cb44c46f 100644 --- a/src/styles/neomorphism/variables.scss +++ b/src/styles/neomorphism/variables.scss @@ -1,38 +1,38 @@ // Brand -$neo-brand-pinky: #ED145B; // Some texts, brand stuff -$neo-brand-blue: #0D0248; // Brand stuff +$neo-brand-pinky: #ED145B !default; // Some texts, brand stuff +$neo-brand-blue: #0D0248 !default; // Brand stuff // Theme Primary -$neo-color-theme-accent: #F8087B; -$neo-color-theme-accent-hover: #F754A3; -$neo-color-theme-accent-pressed: #bf065f; -$neo-color-theme-accent-focused: #ab0555; +$neo-color-theme-accent: #F8087B !default; +$neo-color-theme-accent-hover: #F754A3 !default; +$neo-color-theme-accent-pressed: #bf065f !default; +$neo-color-theme-accent-focused: #ab0555 !default; // Theme Secondary -$neo-color-theme-secondary: #44E5B2; -$neo-color-theme-secondary-hover: #24DAA0; +$neo-color-theme-secondary: #44E5B2 !default; +$neo-color-theme-secondary-hover: #24DAA0 !default; // Base: Content -$neo-color-base-content-primary: #2A171F; // Main text and icons -$neo-color-base-content-secondary: #A19A9D; // Secondary text -$neo-color-base-content-tertiary: #D5CDD0; // Hint and placeholder text -$neo-color-base-content-quaternary: #75787b; // Text +$neo-color-base-content-primary: #2A171F !default; // Main text and icons +$neo-color-base-content-secondary: #A19A9D !default; // Secondary text +$neo-color-base-content-tertiary: #D5CDD0 !default; // Hint and placeholder text +$neo-color-base-content-quaternary: #75787b !default; // Text // Base: Background -$neo-color-base-background: #FAF4F8; // Interactive elements background: controls, text field -$neo-color-base-background-hover: #F7F3F4; -$neo-color-base-background-dark: #2E2E36; // Dark background +$neo-color-base-background: #FAF4F8 !default; // Interactive elements background: controls, text field +$neo-color-base-background-hover: #F7F3F4 !default; +$neo-color-base-background-dark: #2E2E36 !default; // Dark background // Base: Border -$neo-color-base-border-primary: #F7F3F4; // High emphasis border/divider -$neo-color-base-border-secondary: #EDE4E7; // Low emphasis border/divider +$neo-color-base-border-primary: #F7F3F4 !default; // High emphasis border/divider +$neo-color-base-border-secondary: #EDE4E7 !default; // Low emphasis border/divider // Base: Misc -$neo-color-base-disabled: #FDF7FB; // Disabled state -$neo-color-base-on-disabled: #A19A9D; // Text on disabled element -$neo-color-base-on-accent: #FFFFFF; // Text on dark/accent backgrounds +$neo-color-base-disabled: #FDF7FB !default; // Disabled state +$neo-color-base-on-disabled: #A19A9D !default; // Text on disabled element +$neo-color-base-on-accent: #FFFFFF !default; // Text on dark/accent backgrounds // Utility -$neo-color-utility-body: #F7F3F4; -$neo-color-utility-surface: #FDF7FB; -$neo-color-utility-overlay: rgba(0, 0, 0, 0.45); +$neo-color-utility-body: #F7F3F4 !default; +$neo-color-utility-surface: #FDF7FB !default; +$neo-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; // Statuses -$neo-color-status-success: #34AD87; // Success text and icon -$neo-color-status-success-background: #B9EBDB; // Success state background -$neo-color-status-warning: #479AEF; // Warning text and icon -$neo-color-status-warning-background: #C6E2FF; // Warning state background -$neo-color-status-error: #F754A3; // Error text and icon -$neo-color-status-error-background: #FFD8EB; // Error state background \ No newline at end of file +$neo-color-status-success: #34AD87 !default; // Success text and icon +$neo-color-status-success-background: #B9EBDB !default; // Success state background +$neo-color-status-warning: #479AEF !default; // Warning text and icon +$neo-color-status-warning-background: #C6E2FF !default; // Warning state background +$neo-color-status-error: #F754A3 !default; // Error text and icon +$neo-color-status-error-background: #FFD8EB !default; // Error state background From 0de45141c75405028fe710a501b3bde6a51bcb0b Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Thu, 27 May 2021 12:58:49 +0300 Subject: [PATCH 03/14] fix inject design system --- src/components/DesignSystem/DesignSystemInject.ts | 3 ++- src/components/DesignSystem/DesignSystemProvider.vue | 4 ++-- src/components/DesignSystem/consts.ts | 2 ++ src/components/DesignSystem/index.ts | 3 ++- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts index dbd9ae12..03e90d24 100644 --- a/src/components/DesignSystem/DesignSystemInject.ts +++ b/src/components/DesignSystem/DesignSystemInject.ts @@ -1,9 +1,10 @@ import { Component, Vue, Inject, Prop } from 'vue-property-decorator' +import { DesignSystemTypes, DesignSystemProvideKey } from './consts' @Component export default class DesignSystemInject extends Vue { @Prop({ default: true, type: Boolean }) readonly useDesignSystem!: boolean - @Inject('designSystem') readonly designSystem!: any + @Inject({ from: DesignSystemProvideKey, default: DesignSystemTypes.DEFAULT }) readonly designSystem!: any get designSystemClass (): string { return this.useDesignSystem ? this.designSystem.value : '' diff --git a/src/components/DesignSystem/DesignSystemProvider.vue b/src/components/DesignSystem/DesignSystemProvider.vue index 5f1b6f1f..71786099 100644 --- a/src/components/DesignSystem/DesignSystemProvider.vue +++ b/src/components/DesignSystem/DesignSystemProvider.vue @@ -6,11 +6,11 @@ diff --git a/src/components/DesignSystem/consts.ts b/src/components/DesignSystem/consts.ts index 0238ed45..80da54c4 100644 --- a/src/components/DesignSystem/consts.ts +++ b/src/components/DesignSystem/consts.ts @@ -1,3 +1,5 @@ +export const DesignSystemProvideKey = 'designSystem' + export enum DesignSystemTypes { DEFAULT = '', NEOMORPHIC = 'neomorphic' diff --git a/src/components/DesignSystem/index.ts b/src/components/DesignSystem/index.ts index 6b956053..a5381cf8 100644 --- a/src/components/DesignSystem/index.ts +++ b/src/components/DesignSystem/index.ts @@ -1,9 +1,10 @@ import DesignSystemProvider from './DesignSystemProvider.vue' import DesignSystemInject from './DesignSystemInject' -import { DesignSystemTypes } from './consts' +import { DesignSystemTypes, DesignSystemProvideKey } from './consts' export { DesignSystemProvider, + DesignSystemProvideKey, DesignSystemInject, DesignSystemTypes } From 20ffdeedec527fc45f9c2e2d8c03c13745361488 Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Thu, 27 May 2021 16:52:46 +0300 Subject: [PATCH 04/14] add primary secondary tertiary styles --- src/styles/index.scss | 1 + src/styles/neomorphism/button.scss | 163 ++++++++++++++++++++++++++ src/styles/neomorphism/index.scss | 1 + src/styles/neomorphism/variables.scss | 4 +- 4 files changed, 167 insertions(+), 2 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 93009ec5..5e3268fb 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,4 @@ +@import "./neomorphism/index.scss"; @import "./variables"; @import "./element-variables"; @import "./common"; diff --git a/src/styles/neomorphism/button.scss b/src/styles/neomorphism/button.scss index e69de29b..e645d0a8 100644 --- a/src/styles/neomorphism/button.scss +++ b/src/styles/neomorphism/button.scss @@ -0,0 +1,163 @@ +// Neo button common variables +$neo-button-border-width: 2px !default; +$neo-button-border-style: solid !default; +$neo-button-border-radius: 32px !default; +$neo-button-transition: all 0.25s ease-in-out !default; + +$neo-button-background-color-disabled: $neo-color-utility-surface !default; +$neo-button-border-color-disabled: $neo-color-utility-body !default; +$neo-button-box-shadow-disabled: -1px -1px 5px rgba(255, 255, 255, 0.6) !default; +$neo-button-text-color-disabled: $neo-color-base-content-tertiary !default; + +// Primary button: common +$neo-button-primary-border-width: $neo-button-border-width !default; +$neo-button-primary-border-style: $neo-button-border-style !default; +$neo-button-primary-border-radius: $neo-button-border-radius !default; +$neo-button-primary-transition: $neo-button-transition !default; +// Primary button: background colors +$neo-button-primary-background-color: $neo-color-theme-accent !default; +$neo-button-primary-background-color-hover: $neo-color-theme-accent-hover !default; +$neo-button-primary-background-color-pressed: $neo-color-theme-accent-pressed !default; +// Primary button: text colors +$neo-button-primary-text-color: $neo-color-base-on-accent !default; +$neo-button-primary-text-color-hover: $neo-button-primary-text-color !default; +$neo-button-primary-text-color-pressed: $neo-button-primary-text-color !default; +// Primary button: border colors +$neo-button-primary-border-color: $neo-color-base-border-secondary !default; +$neo-button-primary-border-color-hover: $neo-color-utility-surface !default; +$neo-button-primary-border-color-pressed: $neo-button-primary-border-color-hover !default; +// Primary button: box-shadow +$neo-button-primary-box-shadow: 1px 1px 5px $neo-color-base-on-accent, -1px -1px 5px $neo-color-base-on-accent !default; +$neo-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px $neo-color-base-on-accent, 0px 0px 20px rgba(247, 84, 163, 0.5) !default; +$neo-button-primary-box-shadow-pressed: $neo-button-primary-box-shadow-hover !default; + +// Secondary button: common +$neo-button-secondary-border-width: 0px !default; +$neo-button-secondary-border-style: $neo-button-border-style !default; +$neo-button-secondary-border-radius: $neo-button-border-radius !default; +$neo-button-secondary-transition: $neo-button-transition !default; +// Secondary button: background colors +$neo-button-secondary-background-color: $neo-color-base-content-tertiary !default; +$neo-button-secondary-background-color-hover: $neo-color-base-content-secondary !default; +$neo-button-secondary-background-color-pressed: $neo-button-secondary-background-color-hover !default; +// Secondary button: text colors +$neo-button-secondary-text-color: $neo-color-base-on-accent !default; +$neo-button-secondary-text-color-hover: $neo-button-secondary-text-color !default; +$neo-button-secondary-text-color-pressed: $neo-button-secondary-text-color !default; +// Secondary button: border colors +$neo-button-secondary-border-color: transparent !default; +$neo-button-secondary-border-color-hover: $neo-button-secondary-border-color !default; +$neo-button-secondary-border-color-pressed: $neo-button-secondary-border-color !default; +// Secondary button: box-shadow +$neo-button-secondary-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(0, 0, 0, 0.1) !default; +$neo-button-secondary-box-shadow-hover: $neo-button-secondary-box-shadow !default; +$neo-button-secondary-box-shadow-pressed: $neo-button-secondary-box-shadow !default; + +// Tertiary button: common +$neo-button-tertiary-border-width: 0px !default; +$neo-button-tertiary-border-style: $neo-button-border-style !default; +$neo-button-tertiary-border-radius: $neo-button-border-radius !default; +$neo-button-tertiary-transition: $neo-button-transition !default; +// Tertiary button: background colors +$neo-button-tertiary-background-color: $neo-color-utility-surface !default; +$neo-button-tertiary-background-color-hover: $neo-button-tertiary-background-color !default; +$neo-button-tertiary-background-color-pressed: $neo-button-tertiary-background-color !default; +// Tertiary button: text colors +$neo-button-tertiary-text-color: $neo-color-base-content-secondary !default; +$neo-button-tertiary-text-color-hover: $neo-color-base-content-primary !default; +$neo-button-tertiary-text-color-pressed: $neo-button-tertiary-text-color-hover !default; +// Tertiary button: border colors +$neo-button-tertiary-border-color: transparent !default; +$neo-button-tertiary-border-color-hover: $neo-button-tertiary-border-color !default; +$neo-button-tertiary-border-color-pressed: $neo-button-tertiary-border-color !default; +// Tertiary button: box-shadow +$neo-button-tertiary-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #FFFFFF !default; +$neo-button-tertiary-box-shadow-hover: $neo-button-tertiary-box-shadow !default; +$neo-button-tertiary-box-shadow-pressed: $neo-button-tertiary-box-shadow !default; + +@mixin disabled ($border-width: $neo-button-border-width) { + &:disabled, &:disabled:hover { + color: $neo-button-text-color-disabled; + background-color: $neo-button-background-color-disabled; + border-color: $neo-button-border-color-disabled; + box-shadow: $neo-button-box-shadow-disabled; + border-width: $border-width; + } +} + +.el-button.neomorphic { + &.s-primary { + background: $neo-button-primary-background-color; + border-color: $neo-button-primary-border-color; + border-radius: $neo-button-primary-border-radius; + border-style: $neo-button-primary-border-style; + border-width: $neo-button-primary-border-width; + box-shadow: $neo-button-primary-box-shadow; + color: $neo-button-primary-text-color; + transition: $neo-button-primary-transition; + + &:hover, &:focus, &.focusing { + background: $neo-button-primary-background-color-hover; + border-color: $neo-button-primary-border-color-hover; + color: $neo-button-primary-text-color-hover; + box-shadow: $neo-button-primary-box-shadow-hover; + } + &:active, &.s-pressed { + background: $neo-button-primary-background-color-pressed; + border-color: $neo-button-primary-border-color-pressed; + color: $neo-button-primary-text-color-pressed; + box-shadow: $neo-button-primary-box-shadow-pressed; + } + @include disabled; + } + + &.s-secondary { + background: $neo-button-secondary-background-color; + border-color: $neo-button-secondary-border-color; + border-radius: $neo-button-secondary-border-radius; + border-style: $neo-button-secondary-border-style; + border-width: $neo-button-secondary-border-width; + box-shadow: $neo-button-secondary-box-shadow; + color: $neo-button-secondary-text-color; + transition: $neo-button-secondary-transition; + + &:hover, &:focus, &.focusing { + background: $neo-button-secondary-background-color-hover; + border-color: $neo-button-secondary-border-color-hover; + color: $neo-button-secondary-text-color-hover; + box-shadow: $neo-button-secondary-box-shadow-hover; + } + &:active, &.s-pressed { + background: $neo-button-secondary-background-color-pressed; + border-color: $neo-button-secondary-border-color-pressed; + color: $neo-button-secondary-text-color-pressed; + box-shadow: $neo-button-secondary-box-shadow-pressed; + } + @include disabled; + } + + &.s-tertiary { + background: $neo-button-tertiary-background-color; + border-color: $neo-button-tertiary-border-color; + border-radius: $neo-button-tertiary-border-radius; + border-style: $neo-button-tertiary-border-style; + border-width: $neo-button-tertiary-border-width; + box-shadow: $neo-button-tertiary-box-shadow; + color: $neo-button-tertiary-text-color; + transition: $neo-button-tertiary-transition; + + &:hover, &:focus, &.focusing { + background: $neo-button-tertiary-background-color-hover; + border-color: $neo-button-tertiary-border-color-hover; + color: $neo-button-tertiary-text-color-hover; + box-shadow: $neo-button-tertiary-box-shadow-hover; + } + &:active, &.s-pressed { + background: $neo-button-tertiary-background-color-pressed; + border-color: $neo-button-tertiary-border-color-pressed; + color: $neo-button-tertiary-text-color-pressed; + box-shadow: $neo-button-tertiary-box-shadow-pressed; + } + @include disabled(0); + } +} \ No newline at end of file diff --git a/src/styles/neomorphism/index.scss b/src/styles/neomorphism/index.scss index c05e3b76..68b676ec 100644 --- a/src/styles/neomorphism/index.scss +++ b/src/styles/neomorphism/index.scss @@ -1 +1,2 @@ @import "./variables"; +@import "./button.scss"; diff --git a/src/styles/neomorphism/variables.scss b/src/styles/neomorphism/variables.scss index cb44c46f..03b66efd 100644 --- a/src/styles/neomorphism/variables.scss +++ b/src/styles/neomorphism/variables.scss @@ -4,8 +4,8 @@ $neo-brand-blue: #0D0248 !default; // Brand stuff // Theme Primary $neo-color-theme-accent: #F8087B !default; $neo-color-theme-accent-hover: #F754A3 !default; -$neo-color-theme-accent-pressed: #bf065f !default; -$neo-color-theme-accent-focused: #ab0555 !default; +$neo-color-theme-accent-pressed: #E44592 !default; +$neo-color-theme-accent-focused: #F24197 !default; // Theme Secondary $neo-color-theme-secondary: #44E5B2 !default; $neo-color-theme-secondary-hover: #24DAA0 !default; From 0873153e6b704de6b0756624506d2157a52b483c Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 12:39:42 +0300 Subject: [PATCH 05/14] add action and alternative states --- src/stories/SButton.stories.ts | 36 ++++---- src/styles/neomorphism/button.scss | 128 +++++++++++++++++++++++++---- 2 files changed, 135 insertions(+), 29 deletions(-) diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 45ca7748..1760e884 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -20,7 +20,7 @@ export const configurable = () => ({ :disabled="disabled" :loading="loading" :tooltip="tooltip" - :icon="type === 'action' ? 'arrow-left-16' : ''" + :icon="type === 'action' ? 'arrows-swap-24' : ''" :type="type" :size="size" :border-radius="borderRadius" @@ -61,7 +61,9 @@ export const configurable = () => ({ } }, methods: { - handleClick: () => alert('clicked') + handleClick: () => { + // alert('clicked') + } } }) @@ -77,19 +79,25 @@ export const differentTypeButtonsData = Object.values(ButtonTypes).map(type => { return data }) export const withDifferentTypes = () => ({ - components: { SButton, SRow }, - template: ` - - {{ item.label }} - - `, + components: { SButton, SRow, DesignSystemProvider }, + template: ` + + + + {{ item.label }} + + + `, props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, items: { default: () => differentTypeButtonsData } diff --git a/src/styles/neomorphism/button.scss b/src/styles/neomorphism/button.scss index e645d0a8..529d42cb 100644 --- a/src/styles/neomorphism/button.scss +++ b/src/styles/neomorphism/button.scss @@ -1,7 +1,6 @@ // Neo button common variables $neo-button-border-width: 2px !default; $neo-button-border-style: solid !default; -$neo-button-border-radius: 32px !default; $neo-button-transition: all 0.25s ease-in-out !default; $neo-button-background-color-disabled: $neo-color-utility-surface !default; @@ -11,13 +10,15 @@ $neo-button-text-color-disabled: $neo-color-base-content-tertiary !default; // Primary button: common $neo-button-primary-border-width: $neo-button-border-width !default; +$neo-button-primary-border-width-alternative: 0px !default; $neo-button-primary-border-style: $neo-button-border-style !default; -$neo-button-primary-border-radius: $neo-button-border-radius !default; $neo-button-primary-transition: $neo-button-transition !default; // Primary button: background colors $neo-button-primary-background-color: $neo-color-theme-accent !default; $neo-button-primary-background-color-hover: $neo-color-theme-accent-hover !default; $neo-button-primary-background-color-pressed: $neo-color-theme-accent-pressed !default; +$neo-button-primary-background-color-alternative: $neo-color-theme-secondary !default; +$neo-button-primary-background-color-alternative-active: $neo-color-theme-secondary-hover !default; // Primary button: text colors $neo-button-primary-text-color: $neo-color-base-on-accent !default; $neo-button-primary-text-color-hover: $neo-button-primary-text-color !default; @@ -30,20 +31,24 @@ $neo-button-primary-border-color-pressed: $neo-button-primary-border-color-hover $neo-button-primary-box-shadow: 1px 1px 5px $neo-color-base-on-accent, -1px -1px 5px $neo-color-base-on-accent !default; $neo-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px $neo-color-base-on-accent, 0px 0px 20px rgba(247, 84, 163, 0.5) !default; $neo-button-primary-box-shadow-pressed: $neo-button-primary-box-shadow-hover !default; +$neo-button-primary-box-shadow-alternative: none !default; // Secondary button: common $neo-button-secondary-border-width: 0px !default; $neo-button-secondary-border-style: $neo-button-border-style !default; -$neo-button-secondary-border-radius: $neo-button-border-radius !default; $neo-button-secondary-transition: $neo-button-transition !default; // Secondary button: background colors $neo-button-secondary-background-color: $neo-color-base-content-tertiary !default; $neo-button-secondary-background-color-hover: $neo-color-base-content-secondary !default; $neo-button-secondary-background-color-pressed: $neo-button-secondary-background-color-hover !default; +$neo-button-secondary-background-color-alternative: $neo-color-utility-body !default; +$neo-button-secondary-background-color-alternative-active: $neo-color-base-content-tertiary !default; // Secondary button: text colors $neo-button-secondary-text-color: $neo-color-base-on-accent !default; $neo-button-secondary-text-color-hover: $neo-button-secondary-text-color !default; $neo-button-secondary-text-color-pressed: $neo-button-secondary-text-color !default; +$neo-button-secondary-text-color-alternative: $neo-color-base-content-tertiary !default; +$neo-button-secondary-text-color-alternative-active: $neo-color-base-on-accent !default; // Secondary button: border colors $neo-button-secondary-border-color: transparent !default; $neo-button-secondary-border-color-hover: $neo-button-secondary-border-color !default; @@ -52,16 +57,17 @@ $neo-button-secondary-border-color-pressed: $neo-button-secondary-border-color ! $neo-button-secondary-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(0, 0, 0, 0.1) !default; $neo-button-secondary-box-shadow-hover: $neo-button-secondary-box-shadow !default; $neo-button-secondary-box-shadow-pressed: $neo-button-secondary-box-shadow !default; +$neo-button-secondary-box-shadow-alternative: -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) !default; // Tertiary button: common $neo-button-tertiary-border-width: 0px !default; $neo-button-tertiary-border-style: $neo-button-border-style !default; -$neo-button-tertiary-border-radius: $neo-button-border-radius !default; $neo-button-tertiary-transition: $neo-button-transition !default; // Tertiary button: background colors $neo-button-tertiary-background-color: $neo-color-utility-surface !default; $neo-button-tertiary-background-color-hover: $neo-button-tertiary-background-color !default; $neo-button-tertiary-background-color-pressed: $neo-button-tertiary-background-color !default; +$neo-button-tertiary-background-color-alternative: $neo-color-utility-body !default; // Tertiary button: text colors $neo-button-tertiary-text-color: $neo-color-base-content-secondary !default; $neo-button-tertiary-text-color-hover: $neo-color-base-content-primary !default; @@ -75,26 +81,56 @@ $neo-button-tertiary-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2 $neo-button-tertiary-box-shadow-hover: $neo-button-tertiary-box-shadow !default; $neo-button-tertiary-box-shadow-pressed: $neo-button-tertiary-box-shadow !default; -@mixin disabled ($border-width: $neo-button-border-width) { +// Action button: common +$neo-button-action-border-width: 0px !default; +$neo-button-action-border-style: $neo-button-border-style !default; +$neo-button-action-transition: $neo-button-transition !default; +// Action button: background colors +$neo-button-action-background-color: $neo-color-utility-body !default; +$neo-button-action-background-color-hover: $neo-button-action-background-color !default; +$neo-button-action-background-color-pressed: $neo-button-action-background-color !default; +$neo-button-action-background-color-alternative: transparent !default; +// Action button: text colors +$neo-button-action-text-color: $neo-color-base-content-tertiary !default; +$neo-button-action-text-color-hover: $neo-color-base-content-secondary !default; +$neo-button-action-text-color-pressed: $neo-color-theme-accent !default; +$neo-button-action-text-color-alternative: $neo-color-base-content-tertiary !default; +$neo-button-action-text-color-alternative-active: $neo-color-base-content-secondary !default; +// Action button: border colors +$neo-button-action-border-color: transparent !default; +$neo-button-action-border-color-hover: $neo-button-action-border-color !default; +$neo-button-action-border-color-pressed: $neo-button-action-border-color !default; +$neo-button-action-border-color-alternative: transparent !default; +// Action button: box-shadow +$neo-button-action-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) !default; +$neo-button-action-box-shadow-hover: $neo-button-action-box-shadow !default; +$neo-button-action-box-shadow-pressed: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default; +$neo-button-action-box-shadow-alternative: none !default; + +@mixin disabled ( + $border-width: $neo-button-border-width, + $background-color: $neo-button-background-color-disabled, + $box-shadow: $neo-button-box-shadow-disabled +) { &:disabled, &:disabled:hover { color: $neo-button-text-color-disabled; - background-color: $neo-button-background-color-disabled; + background-color: $background-color; border-color: $neo-button-border-color-disabled; - box-shadow: $neo-button-box-shadow-disabled; + box-shadow: $box-shadow; border-width: $border-width; } } .el-button.neomorphic { + transition: $neo-button-transition; + &.s-primary { background: $neo-button-primary-background-color; border-color: $neo-button-primary-border-color; - border-radius: $neo-button-primary-border-radius; border-style: $neo-button-primary-border-style; border-width: $neo-button-primary-border-width; box-shadow: $neo-button-primary-box-shadow; color: $neo-button-primary-text-color; - transition: $neo-button-primary-transition; &:hover, &:focus, &.focusing { background: $neo-button-primary-background-color-hover; @@ -109,17 +145,27 @@ $neo-button-tertiary-box-shadow-pressed: $neo-button-tertiary-box-shadow !defaul box-shadow: $neo-button-primary-box-shadow-pressed; } @include disabled; + + &.s-alternative { + background: $neo-button-primary-background-color-alternative; + border-width: $neo-button-primary-border-width-alternative; + box-shadow: $neo-button-primary-box-shadow-alternative; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neo-button-primary-background-color-alternative-active; + } + + @include disabled($neo-button-primary-border-width-alternative); + } } &.s-secondary { background: $neo-button-secondary-background-color; border-color: $neo-button-secondary-border-color; - border-radius: $neo-button-secondary-border-radius; border-style: $neo-button-secondary-border-style; border-width: $neo-button-secondary-border-width; box-shadow: $neo-button-secondary-box-shadow; color: $neo-button-secondary-text-color; - transition: $neo-button-secondary-transition; &:hover, &:focus, &.focusing { background: $neo-button-secondary-background-color-hover; @@ -133,18 +179,28 @@ $neo-button-tertiary-box-shadow-pressed: $neo-button-tertiary-box-shadow !defaul color: $neo-button-secondary-text-color-pressed; box-shadow: $neo-button-secondary-box-shadow-pressed; } - @include disabled; + @include disabled($neo-button-secondary-border-width); + + &.s-alternative { + background: $neo-button-secondary-background-color-alternative; + box-shadow: $neo-button-secondary-box-shadow-alternative; + color: $neo-button-secondary-text-color-alternative; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neo-button-secondary-background-color-alternative-active; + color: $neo-button-secondary-text-color-alternative-active; + } + @include disabled($neo-button-secondary-border-width); + } } &.s-tertiary { background: $neo-button-tertiary-background-color; border-color: $neo-button-tertiary-border-color; - border-radius: $neo-button-tertiary-border-radius; border-style: $neo-button-tertiary-border-style; border-width: $neo-button-tertiary-border-width; box-shadow: $neo-button-tertiary-box-shadow; color: $neo-button-tertiary-text-color; - transition: $neo-button-tertiary-transition; &:hover, &:focus, &.focusing { background: $neo-button-tertiary-background-color-hover; @@ -158,6 +214,48 @@ $neo-button-tertiary-box-shadow-pressed: $neo-button-tertiary-box-shadow !defaul color: $neo-button-tertiary-text-color-pressed; box-shadow: $neo-button-tertiary-box-shadow-pressed; } - @include disabled(0); + @include disabled($neo-button-tertiary-border-width); + + &.s-alternative { + background: $neo-button-tertiary-background-color-alternative; + + @include disabled($neo-button-tertiary-border-width); + } + } + + &.s-action { + background: $neo-button-action-background-color; + border-color: $neo-button-action-border-color; + border-style: $neo-button-action-border-style; + border-width: $neo-button-action-border-width; + box-shadow: $neo-button-action-box-shadow; + color: $neo-button-action-text-color; + + &:hover, &:focus, &.focusing { + background: $neo-button-action-background-color-hover; + border-color: $neo-button-action-border-color-hover; + color: $neo-button-action-text-color-hover; + box-shadow: $neo-button-action-box-shadow-hover; + } + &:active, &.s-pressed { + background: $neo-button-action-background-color-pressed; + border-color: $neo-button-action-border-color-pressed; + color: $neo-button-action-text-color-pressed; + box-shadow: $neo-button-action-box-shadow-pressed; + } + @include disabled($neo-button-action-border-width, $neo-button-action-background-color, $neo-button-action-box-shadow-pressed); + &.s-alternative { + color: $neo-button-action-text-color-alternative; + + &, &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background-color: $neo-button-action-background-color-alternative; + border-color: $neo-button-action-border-color-alternative; + box-shadow: $neo-button-action-box-shadow-alternative; + } + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + color: $neo-button-action-text-color-alternative-active; + } + @include disabled($neo-button-action-border-width, $neo-button-action-background-color-alternative, $neo-button-action-box-shadow-alternative); + } } } \ No newline at end of file From c506bdece53c97f5bc58de90f32dd9fa94174914 Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 12:49:25 +0300 Subject: [PATCH 06/14] remove duplicated styles --- src/styles/neomorphism/button.scss | 60 +++++++++--------------------- 1 file changed, 18 insertions(+), 42 deletions(-) diff --git a/src/styles/neomorphism/button.scss b/src/styles/neomorphism/button.scss index 529d42cb..d27ef3ca 100644 --- a/src/styles/neomorphism/button.scss +++ b/src/styles/neomorphism/button.scss @@ -12,7 +12,6 @@ $neo-button-text-color-disabled: $neo-color-base-content-tertiary !default; $neo-button-primary-border-width: $neo-button-border-width !default; $neo-button-primary-border-width-alternative: 0px !default; $neo-button-primary-border-style: $neo-button-border-style !default; -$neo-button-primary-transition: $neo-button-transition !default; // Primary button: background colors $neo-button-primary-background-color: $neo-color-theme-accent !default; $neo-button-primary-background-color-hover: $neo-color-theme-accent-hover !default; @@ -36,55 +35,44 @@ $neo-button-primary-box-shadow-alternative: none !default; // Secondary button: common $neo-button-secondary-border-width: 0px !default; $neo-button-secondary-border-style: $neo-button-border-style !default; -$neo-button-secondary-transition: $neo-button-transition !default; // Secondary button: background colors $neo-button-secondary-background-color: $neo-color-base-content-tertiary !default; -$neo-button-secondary-background-color-hover: $neo-color-base-content-secondary !default; -$neo-button-secondary-background-color-pressed: $neo-button-secondary-background-color-hover !default; +$neo-button-secondary-background-color-active: $neo-color-base-content-secondary !default; $neo-button-secondary-background-color-alternative: $neo-color-utility-body !default; $neo-button-secondary-background-color-alternative-active: $neo-color-base-content-tertiary !default; // Secondary button: text colors $neo-button-secondary-text-color: $neo-color-base-on-accent !default; -$neo-button-secondary-text-color-hover: $neo-button-secondary-text-color !default; -$neo-button-secondary-text-color-pressed: $neo-button-secondary-text-color !default; +$neo-button-secondary-text-color-active: $neo-button-secondary-text-color !default; $neo-button-secondary-text-color-alternative: $neo-color-base-content-tertiary !default; $neo-button-secondary-text-color-alternative-active: $neo-color-base-on-accent !default; // Secondary button: border colors $neo-button-secondary-border-color: transparent !default; -$neo-button-secondary-border-color-hover: $neo-button-secondary-border-color !default; -$neo-button-secondary-border-color-pressed: $neo-button-secondary-border-color !default; +$neo-button-secondary-border-color-active: $neo-button-secondary-border-color !default; // Secondary button: box-shadow $neo-button-secondary-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(0, 0, 0, 0.1) !default; -$neo-button-secondary-box-shadow-hover: $neo-button-secondary-box-shadow !default; -$neo-button-secondary-box-shadow-pressed: $neo-button-secondary-box-shadow !default; +$neo-button-secondary-box-shadow-active: $neo-button-secondary-box-shadow !default; $neo-button-secondary-box-shadow-alternative: -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) !default; // Tertiary button: common $neo-button-tertiary-border-width: 0px !default; $neo-button-tertiary-border-style: $neo-button-border-style !default; -$neo-button-tertiary-transition: $neo-button-transition !default; // Tertiary button: background colors $neo-button-tertiary-background-color: $neo-color-utility-surface !default; -$neo-button-tertiary-background-color-hover: $neo-button-tertiary-background-color !default; -$neo-button-tertiary-background-color-pressed: $neo-button-tertiary-background-color !default; +$neo-button-tertiary-background-color-active: $neo-button-tertiary-background-color !default; $neo-button-tertiary-background-color-alternative: $neo-color-utility-body !default; // Tertiary button: text colors $neo-button-tertiary-text-color: $neo-color-base-content-secondary !default; -$neo-button-tertiary-text-color-hover: $neo-color-base-content-primary !default; -$neo-button-tertiary-text-color-pressed: $neo-button-tertiary-text-color-hover !default; +$neo-button-tertiary-text-color-active: $neo-color-base-content-primary !default; // Tertiary button: border colors $neo-button-tertiary-border-color: transparent !default; -$neo-button-tertiary-border-color-hover: $neo-button-tertiary-border-color !default; -$neo-button-tertiary-border-color-pressed: $neo-button-tertiary-border-color !default; +$neo-button-tertiary-border-color-active: $neo-button-tertiary-border-color !default; // Tertiary button: box-shadow $neo-button-tertiary-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #FFFFFF !default; -$neo-button-tertiary-box-shadow-hover: $neo-button-tertiary-box-shadow !default; -$neo-button-tertiary-box-shadow-pressed: $neo-button-tertiary-box-shadow !default; +$neo-button-tertiary-box-shadow-active: $neo-button-tertiary-box-shadow !default; // Action button: common $neo-button-action-border-width: 0px !default; $neo-button-action-border-style: $neo-button-border-style !default; -$neo-button-action-transition: $neo-button-transition !default; // Action button: background colors $neo-button-action-background-color: $neo-color-utility-body !default; $neo-button-action-background-color-hover: $neo-button-action-background-color !default; @@ -167,17 +155,11 @@ $neo-button-action-box-shadow-alternative: none !default; box-shadow: $neo-button-secondary-box-shadow; color: $neo-button-secondary-text-color; - &:hover, &:focus, &.focusing { - background: $neo-button-secondary-background-color-hover; - border-color: $neo-button-secondary-border-color-hover; - color: $neo-button-secondary-text-color-hover; - box-shadow: $neo-button-secondary-box-shadow-hover; - } - &:active, &.s-pressed { - background: $neo-button-secondary-background-color-pressed; - border-color: $neo-button-secondary-border-color-pressed; - color: $neo-button-secondary-text-color-pressed; - box-shadow: $neo-button-secondary-box-shadow-pressed; + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neo-button-secondary-background-color-active; + border-color: $neo-button-secondary-border-color-active; + color: $neo-button-secondary-text-color-active; + box-shadow: $neo-button-secondary-box-shadow-active; } @include disabled($neo-button-secondary-border-width); @@ -202,17 +184,11 @@ $neo-button-action-box-shadow-alternative: none !default; box-shadow: $neo-button-tertiary-box-shadow; color: $neo-button-tertiary-text-color; - &:hover, &:focus, &.focusing { - background: $neo-button-tertiary-background-color-hover; - border-color: $neo-button-tertiary-border-color-hover; - color: $neo-button-tertiary-text-color-hover; - box-shadow: $neo-button-tertiary-box-shadow-hover; - } - &:active, &.s-pressed { - background: $neo-button-tertiary-background-color-pressed; - border-color: $neo-button-tertiary-border-color-pressed; - color: $neo-button-tertiary-text-color-pressed; - box-shadow: $neo-button-tertiary-box-shadow-pressed; + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neo-button-tertiary-background-color-active; + border-color: $neo-button-tertiary-border-color-active; + color: $neo-button-tertiary-text-color-active; + box-shadow: $neo-button-tertiary-box-shadow-active; } @include disabled($neo-button-tertiary-border-width); From 3be99d767f51f06c0d4f0d8c9137ca99e0776136 Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 13:21:23 +0300 Subject: [PATCH 07/14] fefactoring neo css vars usage --- src/styles/neomorphism/button.scss | 60 +++++++++++++-------------- src/styles/neomorphism/variables.scss | 30 ++++++++++++++ 2 files changed, 60 insertions(+), 30 deletions(-) diff --git a/src/styles/neomorphism/button.scss b/src/styles/neomorphism/button.scss index d27ef3ca..1c63a62f 100644 --- a/src/styles/neomorphism/button.scss +++ b/src/styles/neomorphism/button.scss @@ -3,32 +3,32 @@ $neo-button-border-width: 2px !default; $neo-button-border-style: solid !default; $neo-button-transition: all 0.25s ease-in-out !default; -$neo-button-background-color-disabled: $neo-color-utility-surface !default; -$neo-button-border-color-disabled: $neo-color-utility-body !default; +$neo-button-background-color-disabled: var(--neo-color-utility-surface) !default; +$neo-button-border-color-disabled: var(--neo-color-utility-body) !default; $neo-button-box-shadow-disabled: -1px -1px 5px rgba(255, 255, 255, 0.6) !default; -$neo-button-text-color-disabled: $neo-color-base-content-tertiary !default; +$neo-button-text-color-disabled: var(--neo-color-base-content-tertiary) !default; // Primary button: common $neo-button-primary-border-width: $neo-button-border-width !default; $neo-button-primary-border-width-alternative: 0px !default; $neo-button-primary-border-style: $neo-button-border-style !default; // Primary button: background colors -$neo-button-primary-background-color: $neo-color-theme-accent !default; -$neo-button-primary-background-color-hover: $neo-color-theme-accent-hover !default; -$neo-button-primary-background-color-pressed: $neo-color-theme-accent-pressed !default; -$neo-button-primary-background-color-alternative: $neo-color-theme-secondary !default; -$neo-button-primary-background-color-alternative-active: $neo-color-theme-secondary-hover !default; +$neo-button-primary-background-color: var(--neo-color-theme-accent) !default; +$neo-button-primary-background-color-hover: var(--neo-color-theme-accent-hover) !default; +$neo-button-primary-background-color-pressed: var(--neo-color-theme-accent-pressed) !default; +$neo-button-primary-background-color-alternative: var(--neo-color-theme-secondary) !default; +$neo-button-primary-background-color-alternative-active: var(--neo-color-theme-secondary-hover) !default; // Primary button: text colors -$neo-button-primary-text-color: $neo-color-base-on-accent !default; +$neo-button-primary-text-color: var(--neo-color-base-on-accent) !default; $neo-button-primary-text-color-hover: $neo-button-primary-text-color !default; $neo-button-primary-text-color-pressed: $neo-button-primary-text-color !default; // Primary button: border colors -$neo-button-primary-border-color: $neo-color-base-border-secondary !default; -$neo-button-primary-border-color-hover: $neo-color-utility-surface !default; +$neo-button-primary-border-color: var(--neo-color-base-border-secondary) !default; +$neo-button-primary-border-color-hover: var(--neo-color-utility-surface) !default; $neo-button-primary-border-color-pressed: $neo-button-primary-border-color-hover !default; // Primary button: box-shadow -$neo-button-primary-box-shadow: 1px 1px 5px $neo-color-base-on-accent, -1px -1px 5px $neo-color-base-on-accent !default; -$neo-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px $neo-color-base-on-accent, 0px 0px 20px rgba(247, 84, 163, 0.5) !default; +$neo-button-primary-box-shadow: 1px 1px 5px var(--neo-color-base-on-accent), -1px -1px 5px var(--neo-color-base-on-accent) !default; +$neo-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--neo-color-base-on-accent), 0px 0px 20px rgba(247, 84, 163, 0.5) !default; $neo-button-primary-box-shadow-pressed: $neo-button-primary-box-shadow-hover !default; $neo-button-primary-box-shadow-alternative: none !default; @@ -36,15 +36,15 @@ $neo-button-primary-box-shadow-alternative: none !default; $neo-button-secondary-border-width: 0px !default; $neo-button-secondary-border-style: $neo-button-border-style !default; // Secondary button: background colors -$neo-button-secondary-background-color: $neo-color-base-content-tertiary !default; -$neo-button-secondary-background-color-active: $neo-color-base-content-secondary !default; -$neo-button-secondary-background-color-alternative: $neo-color-utility-body !default; -$neo-button-secondary-background-color-alternative-active: $neo-color-base-content-tertiary !default; +$neo-button-secondary-background-color: var(--neo-color-base-content-tertiary) !default; +$neo-button-secondary-background-color-active: var(--neo-color-base-content-secondary) !default; +$neo-button-secondary-background-color-alternative: var(--neo-color-utility-body) !default; +$neo-button-secondary-background-color-alternative-active: var(--neo-color-base-content-tertiary) !default; // Secondary button: text colors -$neo-button-secondary-text-color: $neo-color-base-on-accent !default; +$neo-button-secondary-text-color: var(--neo-color-base-on-accent) !default; $neo-button-secondary-text-color-active: $neo-button-secondary-text-color !default; -$neo-button-secondary-text-color-alternative: $neo-color-base-content-tertiary !default; -$neo-button-secondary-text-color-alternative-active: $neo-color-base-on-accent !default; +$neo-button-secondary-text-color-alternative: var(--neo-color-base-content-tertiary) !default; +$neo-button-secondary-text-color-alternative-active: var(--neo-color-base-on-accent) !default; // Secondary button: border colors $neo-button-secondary-border-color: transparent !default; $neo-button-secondary-border-color-active: $neo-button-secondary-border-color !default; @@ -57,12 +57,12 @@ $neo-button-secondary-box-shadow-alternative: -1px -1px 1px rgba(0, 0, 0, 0.02), $neo-button-tertiary-border-width: 0px !default; $neo-button-tertiary-border-style: $neo-button-border-style !default; // Tertiary button: background colors -$neo-button-tertiary-background-color: $neo-color-utility-surface !default; +$neo-button-tertiary-background-color: var(--neo-color-utility-surface) !default; $neo-button-tertiary-background-color-active: $neo-button-tertiary-background-color !default; -$neo-button-tertiary-background-color-alternative: $neo-color-utility-body !default; +$neo-button-tertiary-background-color-alternative: var(--neo-color-utility-body) !default; // Tertiary button: text colors -$neo-button-tertiary-text-color: $neo-color-base-content-secondary !default; -$neo-button-tertiary-text-color-active: $neo-color-base-content-primary !default; +$neo-button-tertiary-text-color: var(--neo-color-base-content-secondary) !default; +$neo-button-tertiary-text-color-active: var(--neo-color-base-content-primary) !default; // Tertiary button: border colors $neo-button-tertiary-border-color: transparent !default; $neo-button-tertiary-border-color-active: $neo-button-tertiary-border-color !default; @@ -74,16 +74,16 @@ $neo-button-tertiary-box-shadow-active: $neo-button-tertiary-box-shadow !default $neo-button-action-border-width: 0px !default; $neo-button-action-border-style: $neo-button-border-style !default; // Action button: background colors -$neo-button-action-background-color: $neo-color-utility-body !default; +$neo-button-action-background-color: var(--neo-color-utility-body) !default; $neo-button-action-background-color-hover: $neo-button-action-background-color !default; $neo-button-action-background-color-pressed: $neo-button-action-background-color !default; $neo-button-action-background-color-alternative: transparent !default; // Action button: text colors -$neo-button-action-text-color: $neo-color-base-content-tertiary !default; -$neo-button-action-text-color-hover: $neo-color-base-content-secondary !default; -$neo-button-action-text-color-pressed: $neo-color-theme-accent !default; -$neo-button-action-text-color-alternative: $neo-color-base-content-tertiary !default; -$neo-button-action-text-color-alternative-active: $neo-color-base-content-secondary !default; +$neo-button-action-text-color: var(--neo-color-base-content-tertiary) !default; +$neo-button-action-text-color-hover: var(--neo-color-base-content-secondary) !default; +$neo-button-action-text-color-pressed: var(--neo-color-theme-accent) !default; +$neo-button-action-text-color-alternative: var(--neo-color-base-content-tertiary) !default; +$neo-button-action-text-color-alternative-active: var(--neo-color-base-content-secondary) !default; // Action button: border colors $neo-button-action-border-color: transparent !default; $neo-button-action-border-color-hover: $neo-button-action-border-color !default; diff --git a/src/styles/neomorphism/variables.scss b/src/styles/neomorphism/variables.scss index 03b66efd..fb784ae0 100644 --- a/src/styles/neomorphism/variables.scss +++ b/src/styles/neomorphism/variables.scss @@ -36,3 +36,33 @@ $neo-color-status-warning: #479AEF !default; // Warning text and icon $neo-color-status-warning-background: #C6E2FF !default; // Warning state background $neo-color-status-error: #F754A3 !default; // Error text and icon $neo-color-status-error-background: #FFD8EB !default; // Error state background + +:root { + --neo-color-theme-accent: #{$neo-color-theme-accent}; + --neo-color-theme-accent-hover: #{$neo-color-theme-accent-hover}; + --neo-color-theme-accent-pressed: #{$neo-color-theme-accent-pressed}; + --neo-color-theme-accent-focused: #{$neo-color-theme-accent-focused}; + --neo-color-theme-secondary: #{$neo-color-theme-secondary}; + --neo-color-theme-secondary-hover: #{$neo-color-theme-secondary-hover}; + --neo-color-base-content-primary: #{$neo-color-base-content-primary}; + --neo-color-base-content-secondary: #{$neo-color-base-content-secondary}; + --neo-color-base-content-tertiary: #{$neo-color-base-content-tertiary}; + --neo-color-base-content-quaternary: #{$neo-color-base-content-quaternary}; + --neo-color-base-background: #{$neo-color-base-background}; + --neo-color-base-background-hover: #{$neo-color-base-background-hover}; + --neo-color-base-background-dark: #{$neo-color-base-background-dark}; + --neo-color-base-border-primary: #{$neo-color-base-border-primary}; + --neo-color-base-border-secondary: #{$neo-color-base-border-secondary}; + --neo-color-base-disabled: #{$neo-color-base-disabled}; + --neo-color-base-on-disabled: #{$neo-color-base-on-disabled}; + --neo-color-base-on-accent: #{$neo-color-base-on-accent}; + --neo-color-utility-body: #{$neo-color-utility-body}; + --neo-color-utility-surface: #{$neo-color-utility-surface}; + --neo-color-utility-overlay: #{$neo-color-utility-overlay}; + --neo-color-status-success: #{$neo-color-status-success}; + --neo-color-status-success-background: #{$neo-color-status-success-background}; + --neo-color-status-warning: #{$neo-color-status-warning}; + --neo-color-status-warning-background: #{$neo-color-status-warning-background}; + --neo-color-status-error: #{$neo-color-status-error}; + --neo-color-status-error-background: #{$neo-color-status-error-background}; +} \ No newline at end of file From acfe744aba868fd4500cf48cb1de279eef6f92f3 Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 13:26:20 +0300 Subject: [PATCH 08/14] fix ln --- src/stories/SButton.stories.ts | 4 +--- src/styles/neomorphism/button.scss | 2 +- src/styles/neomorphism/variables.scss | 4 +++- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 1760e884..e761d444 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -61,9 +61,7 @@ export const configurable = () => ({ } }, methods: { - handleClick: () => { - // alert('clicked') - } + handleClick: () => alert('clicked') } }) diff --git a/src/styles/neomorphism/button.scss b/src/styles/neomorphism/button.scss index 1c63a62f..8db987d0 100644 --- a/src/styles/neomorphism/button.scss +++ b/src/styles/neomorphism/button.scss @@ -234,4 +234,4 @@ $neo-button-action-box-shadow-alternative: none !default; @include disabled($neo-button-action-border-width, $neo-button-action-background-color-alternative, $neo-button-action-box-shadow-alternative); } } -} \ No newline at end of file +} diff --git a/src/styles/neomorphism/variables.scss b/src/styles/neomorphism/variables.scss index fb784ae0..fe949d4a 100644 --- a/src/styles/neomorphism/variables.scss +++ b/src/styles/neomorphism/variables.scss @@ -38,6 +38,8 @@ $neo-color-status-error: #F754A3 !default; // Error text and icon $neo-color-status-error-background: #FFD8EB !default; // Error state background :root { + --neo-brand-pinky: #{neo-brand-pinky}; + --neo-brand-blue: #{neo-brand-blue}; --neo-color-theme-accent: #{$neo-color-theme-accent}; --neo-color-theme-accent-hover: #{$neo-color-theme-accent-hover}; --neo-color-theme-accent-pressed: #{$neo-color-theme-accent-pressed}; @@ -65,4 +67,4 @@ $neo-color-status-error-background: #FFD8EB !default; // Error state background --neo-color-status-warning-background: #{$neo-color-status-warning-background}; --neo-color-status-error: #{$neo-color-status-error}; --neo-color-status-error-background: #{$neo-color-status-error-background}; -} \ No newline at end of file +} From bb8b45c4543b39c345aaa0a3ef9670e736711fea Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 13:42:40 +0300 Subject: [PATCH 09/14] fix export --- package.json | 2 +- ...ystemProvider.vue => SDesignSystemProvider.vue} | 2 +- src/components/DesignSystem/index.ts | 4 ++-- src/components/index.ts | 4 ++-- src/index.ts | 3 +++ src/stories/SButton.stories.ts | 14 +++++++------- src/types/components.ts | 1 + 7 files changed, 17 insertions(+), 13 deletions(-) rename src/components/DesignSystem/{DesignSystemProvider.vue => SDesignSystemProvider.vue} (87%) diff --git a/package.json b/package.json index 6e8bcc79..d9a341f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.8.9", + "version": "0.9.0", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/components/DesignSystem/DesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider.vue similarity index 87% rename from src/components/DesignSystem/DesignSystemProvider.vue rename to src/components/DesignSystem/SDesignSystemProvider.vue index 71786099..7cfca97f 100644 --- a/src/components/DesignSystem/DesignSystemProvider.vue +++ b/src/components/DesignSystem/SDesignSystemProvider.vue @@ -9,7 +9,7 @@ import { Component, Vue, Prop, Provide } from 'vue-property-decorator' import { DesignSystemTypes, DesignSystemProvideKey } from './consts' @Component -export default class DesignSystemProvider extends Vue { +export default class SDesignSystemProvider extends Vue { @Prop({ default: DesignSystemTypes.DEFAULT, type: String }) readonly value!: string @Provide(DesignSystemProvideKey) designSystem = this } diff --git a/src/components/DesignSystem/index.ts b/src/components/DesignSystem/index.ts index a5381cf8..0232d01b 100644 --- a/src/components/DesignSystem/index.ts +++ b/src/components/DesignSystem/index.ts @@ -1,9 +1,9 @@ -import DesignSystemProvider from './DesignSystemProvider.vue' +import SDesignSystemProvider from './SDesignSystemProvider.vue' import DesignSystemInject from './DesignSystemInject' import { DesignSystemTypes, DesignSystemProvideKey } from './consts' export { - DesignSystemProvider, + SDesignSystemProvider, DesignSystemProvideKey, DesignSystemInject, DesignSystemTypes diff --git a/src/components/index.ts b/src/components/index.ts index 27d7b5af..b2f4448c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -12,7 +12,7 @@ import { SCol } from './Layout/Col' import { SCollapse, SCollapseItem } from './Collapse' import { SContainer } from './Layout/Container' import { SDatePicker } from './DatePicker' -import { DesignSystemProvider } from './DesignSystem' +import { SDesignSystemProvider } from './DesignSystem' import { SDialog } from './Dialog' import { SDivider } from './Divider' import { SDropdown, SDropdownItem } from './Dropdown' @@ -48,7 +48,7 @@ export { SCollapseItem, SContainer, SDatePicker, - DesignSystemProvider, + SDesignSystemProvider, SDialog, SDivider, SDropdown, diff --git a/src/index.ts b/src/index.ts index 8f4cf815..49009df8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,6 +14,7 @@ import { SCollapseItem, SContainer, SDatePicker, + SDesignSystemProvider, SDialog, SDivider, SDropdown, @@ -71,6 +72,7 @@ const components = [ { component: SCollapseItem, name: Components.SCollapseItem }, { component: SContainer, name: Components.SContainer }, { component: SDatePicker, name: Components.SDatePicker }, + { component: SDesignSystemProvider, name: Components.SDesignSystemProvider }, { component: SDialog, name: Components.SDialog }, { component: SDivider, name: Components.SDivider }, { component: SDropdown, name: Components.SDropdown }, @@ -148,6 +150,7 @@ export { SCollapseItem, SContainer, SDatePicker, + SDesignSystemProvider, SDialog, SDivider, SDropdown, diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index e761d444..865a1dca 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,6 +1,6 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow, SCol, SMain, DesignSystemProvider } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain, SDesignSystemProvider } from '../components' import { Size, BorderRadius } from '../types' import { ButtonTypes, ButtonIconPosition } from '../components/Button' import { DesignSystemTypes } from '../components/DesignSystem' @@ -13,9 +13,9 @@ export default { } export const configurable = () => ({ - components: { SButton, DesignSystemProvider }, + components: { SButton, SDesignSystemProvider }, template: ` - + ({ > {{ type !== 'action' ? 'Default' : '' }} - `, + `, props: { designSystem: { default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) @@ -77,9 +77,9 @@ export const differentTypeButtonsData = Object.values(ButtonTypes).map(type => { return data }) export const withDifferentTypes = () => ({ - components: { SButton, SRow, DesignSystemProvider }, + components: { SButton, SRow, SDesignSystemProvider }, template: ` - + ({ {{ item.label }} - `, + `, props: { designSystem: { default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) diff --git a/src/types/components.ts b/src/types/components.ts index 6be5fd3d..e5cd2b7f 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -12,6 +12,7 @@ export enum Components { SCollapseItem = 'SCollapseItem', SContainer = 'SContainer', SDatePicker = 'SDatePicker', + SDesignSystemProvider = 'SDesignSystemProvider', SDialog = 'SDialog', SDivider = 'SDivider', SDropdown = 'SDropdown', From 75c9bf5244b2b3131b09dfe0667df0beff55d431 Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 14:52:08 +0300 Subject: [PATCH 10/14] fix config --- build/rollup.config.js | 8 +++++--- package.json | 2 +- yarn.lock | 8 ++++---- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/build/rollup.config.js b/build/rollup.config.js index aa95fda3..a9ca9385 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -33,17 +33,19 @@ export default { targets: [ { src: 'src/assets/*', dest: 'lib/assets' }, { - src: 'src/styles/*', + src: 'src/styles/*.scss', dest: 'lib/styles', // Replace all imports for scss files which will be used as theming files - transform: (content) => { + transform: (content, filename) => { + console.log(filename) return content.toString() .replace(/~@\/assets\//g, '../assets/') // Add scss styles from element-ui .replace('../../node_modules/element-ui/packages/theme-chalk/src/index', './element-ui/index') } }, - { src: 'node_modules/element-ui/packages/theme-chalk/src/*', dest: 'lib/styles/element-ui' } + { src: 'node_modules/element-ui/packages/theme-chalk/src/*', dest: 'lib/styles/element-ui' }, + { src: 'src/styles/neomorphism/*', dest: 'lib/styles/neomorphism' } ] }), typescript({ diff --git a/package.json b/package.json index d9a341f1..23486122 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "postcss": "^8.2.10", "rollup": "^1.27.8", "rollup-plugin-commonjs": "^10.1.0", - "rollup-plugin-copy": "^3.3.0", + "rollup-plugin-copy": "^3.4.0", "rollup-plugin-delete": "^1.1.0", "rollup-plugin-scss": "^2.5.0", "rollup-plugin-terser": "^5.1.2", diff --git a/yarn.lock b/yarn.lock index 89b86a7b..bf3b9dc9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13383,10 +13383,10 @@ rollup-plugin-commonjs@^10.1.0: resolve "^1.11.0" rollup-pluginutils "^2.8.1" -rollup-plugin-copy@^3.3.0: - version "3.3.0" - resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.3.0.tgz#5ba230047f86b9f703a29288f242948a5580e7b9" - integrity sha512-euDjCUSBXZa06nqnwCNADbkAcYDfzwowfZQkto9K/TFhiH+QG7I4PUsEMwM9tDgomGWJc//z7KLW8t+tZwxADA== +rollup-plugin-copy@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.4.0.tgz#f1228a3ffb66ffad8606e2f3fb7ff23141ed3286" + integrity sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ== dependencies: "@types/fs-extra" "^8.0.1" colorette "^1.1.0" From 4021922199528aa82f32a529fc55329169e444ae Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 15:13:08 +0300 Subject: [PATCH 11/14] remove console.log --- build/rollup.config.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/build/rollup.config.js b/build/rollup.config.js index a9ca9385..1bf3c6f9 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -36,8 +36,7 @@ export default { src: 'src/styles/*.scss', dest: 'lib/styles', // Replace all imports for scss files which will be used as theming files - transform: (content, filename) => { - console.log(filename) + transform: (content) => { return content.toString() .replace(/~@\/assets\//g, '../assets/') // Add scss styles from element-ui From 7fbc47b6800e276873e1f45de15f64ab18f9ed6b Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Fri, 28 May 2021 16:20:39 +0300 Subject: [PATCH 12/14] rename neo to neu --- build/rollup.config.js | 2 +- src/components/DesignSystem/consts.ts | 2 +- src/styles/index.scss | 2 +- src/styles/neomorphism/button.scss | 237 ------------------ src/styles/neomorphism/variables.scss | 70 ------ src/styles/neumorphism/button.scss | 237 ++++++++++++++++++ .../{neomorphism => neumorphism}/index.scss | 0 src/styles/neumorphism/variables.scss | 70 ++++++ 8 files changed, 310 insertions(+), 310 deletions(-) delete mode 100644 src/styles/neomorphism/button.scss delete mode 100644 src/styles/neomorphism/variables.scss create mode 100644 src/styles/neumorphism/button.scss rename src/styles/{neomorphism => neumorphism}/index.scss (100%) create mode 100644 src/styles/neumorphism/variables.scss diff --git a/build/rollup.config.js b/build/rollup.config.js index 1bf3c6f9..2d7a79bc 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -44,7 +44,7 @@ export default { } }, { src: 'node_modules/element-ui/packages/theme-chalk/src/*', dest: 'lib/styles/element-ui' }, - { src: 'src/styles/neomorphism/*', dest: 'lib/styles/neomorphism' } + { src: 'src/styles/neumorphism/*', dest: 'lib/styles/neumorphism' } ] }), typescript({ diff --git a/src/components/DesignSystem/consts.ts b/src/components/DesignSystem/consts.ts index 80da54c4..8b8a958c 100644 --- a/src/components/DesignSystem/consts.ts +++ b/src/components/DesignSystem/consts.ts @@ -2,5 +2,5 @@ export const DesignSystemProvideKey = 'designSystem' export enum DesignSystemTypes { DEFAULT = '', - NEOMORPHIC = 'neomorphic' + NEUMORPHIC = 'neumorphic' } diff --git a/src/styles/index.scss b/src/styles/index.scss index 5e3268fb..c3775b6d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,4 @@ -@import "./neomorphism/index.scss"; +@import "./neumorphism/index.scss"; @import "./variables"; @import "./element-variables"; @import "./common"; diff --git a/src/styles/neomorphism/button.scss b/src/styles/neomorphism/button.scss deleted file mode 100644 index 8db987d0..00000000 --- a/src/styles/neomorphism/button.scss +++ /dev/null @@ -1,237 +0,0 @@ -// Neo button common variables -$neo-button-border-width: 2px !default; -$neo-button-border-style: solid !default; -$neo-button-transition: all 0.25s ease-in-out !default; - -$neo-button-background-color-disabled: var(--neo-color-utility-surface) !default; -$neo-button-border-color-disabled: var(--neo-color-utility-body) !default; -$neo-button-box-shadow-disabled: -1px -1px 5px rgba(255, 255, 255, 0.6) !default; -$neo-button-text-color-disabled: var(--neo-color-base-content-tertiary) !default; - -// Primary button: common -$neo-button-primary-border-width: $neo-button-border-width !default; -$neo-button-primary-border-width-alternative: 0px !default; -$neo-button-primary-border-style: $neo-button-border-style !default; -// Primary button: background colors -$neo-button-primary-background-color: var(--neo-color-theme-accent) !default; -$neo-button-primary-background-color-hover: var(--neo-color-theme-accent-hover) !default; -$neo-button-primary-background-color-pressed: var(--neo-color-theme-accent-pressed) !default; -$neo-button-primary-background-color-alternative: var(--neo-color-theme-secondary) !default; -$neo-button-primary-background-color-alternative-active: var(--neo-color-theme-secondary-hover) !default; -// Primary button: text colors -$neo-button-primary-text-color: var(--neo-color-base-on-accent) !default; -$neo-button-primary-text-color-hover: $neo-button-primary-text-color !default; -$neo-button-primary-text-color-pressed: $neo-button-primary-text-color !default; -// Primary button: border colors -$neo-button-primary-border-color: var(--neo-color-base-border-secondary) !default; -$neo-button-primary-border-color-hover: var(--neo-color-utility-surface) !default; -$neo-button-primary-border-color-pressed: $neo-button-primary-border-color-hover !default; -// Primary button: box-shadow -$neo-button-primary-box-shadow: 1px 1px 5px var(--neo-color-base-on-accent), -1px -1px 5px var(--neo-color-base-on-accent) !default; -$neo-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--neo-color-base-on-accent), 0px 0px 20px rgba(247, 84, 163, 0.5) !default; -$neo-button-primary-box-shadow-pressed: $neo-button-primary-box-shadow-hover !default; -$neo-button-primary-box-shadow-alternative: none !default; - -// Secondary button: common -$neo-button-secondary-border-width: 0px !default; -$neo-button-secondary-border-style: $neo-button-border-style !default; -// Secondary button: background colors -$neo-button-secondary-background-color: var(--neo-color-base-content-tertiary) !default; -$neo-button-secondary-background-color-active: var(--neo-color-base-content-secondary) !default; -$neo-button-secondary-background-color-alternative: var(--neo-color-utility-body) !default; -$neo-button-secondary-background-color-alternative-active: var(--neo-color-base-content-tertiary) !default; -// Secondary button: text colors -$neo-button-secondary-text-color: var(--neo-color-base-on-accent) !default; -$neo-button-secondary-text-color-active: $neo-button-secondary-text-color !default; -$neo-button-secondary-text-color-alternative: var(--neo-color-base-content-tertiary) !default; -$neo-button-secondary-text-color-alternative-active: var(--neo-color-base-on-accent) !default; -// Secondary button: border colors -$neo-button-secondary-border-color: transparent !default; -$neo-button-secondary-border-color-active: $neo-button-secondary-border-color !default; -// Secondary button: box-shadow -$neo-button-secondary-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(0, 0, 0, 0.1) !default; -$neo-button-secondary-box-shadow-active: $neo-button-secondary-box-shadow !default; -$neo-button-secondary-box-shadow-alternative: -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) !default; - -// Tertiary button: common -$neo-button-tertiary-border-width: 0px !default; -$neo-button-tertiary-border-style: $neo-button-border-style !default; -// Tertiary button: background colors -$neo-button-tertiary-background-color: var(--neo-color-utility-surface) !default; -$neo-button-tertiary-background-color-active: $neo-button-tertiary-background-color !default; -$neo-button-tertiary-background-color-alternative: var(--neo-color-utility-body) !default; -// Tertiary button: text colors -$neo-button-tertiary-text-color: var(--neo-color-base-content-secondary) !default; -$neo-button-tertiary-text-color-active: var(--neo-color-base-content-primary) !default; -// Tertiary button: border colors -$neo-button-tertiary-border-color: transparent !default; -$neo-button-tertiary-border-color-active: $neo-button-tertiary-border-color !default; -// Tertiary button: box-shadow -$neo-button-tertiary-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #FFFFFF !default; -$neo-button-tertiary-box-shadow-active: $neo-button-tertiary-box-shadow !default; - -// Action button: common -$neo-button-action-border-width: 0px !default; -$neo-button-action-border-style: $neo-button-border-style !default; -// Action button: background colors -$neo-button-action-background-color: var(--neo-color-utility-body) !default; -$neo-button-action-background-color-hover: $neo-button-action-background-color !default; -$neo-button-action-background-color-pressed: $neo-button-action-background-color !default; -$neo-button-action-background-color-alternative: transparent !default; -// Action button: text colors -$neo-button-action-text-color: var(--neo-color-base-content-tertiary) !default; -$neo-button-action-text-color-hover: var(--neo-color-base-content-secondary) !default; -$neo-button-action-text-color-pressed: var(--neo-color-theme-accent) !default; -$neo-button-action-text-color-alternative: var(--neo-color-base-content-tertiary) !default; -$neo-button-action-text-color-alternative-active: var(--neo-color-base-content-secondary) !default; -// Action button: border colors -$neo-button-action-border-color: transparent !default; -$neo-button-action-border-color-hover: $neo-button-action-border-color !default; -$neo-button-action-border-color-pressed: $neo-button-action-border-color !default; -$neo-button-action-border-color-alternative: transparent !default; -// Action button: box-shadow -$neo-button-action-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) !default; -$neo-button-action-box-shadow-hover: $neo-button-action-box-shadow !default; -$neo-button-action-box-shadow-pressed: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default; -$neo-button-action-box-shadow-alternative: none !default; - -@mixin disabled ( - $border-width: $neo-button-border-width, - $background-color: $neo-button-background-color-disabled, - $box-shadow: $neo-button-box-shadow-disabled -) { - &:disabled, &:disabled:hover { - color: $neo-button-text-color-disabled; - background-color: $background-color; - border-color: $neo-button-border-color-disabled; - box-shadow: $box-shadow; - border-width: $border-width; - } -} - -.el-button.neomorphic { - transition: $neo-button-transition; - - &.s-primary { - background: $neo-button-primary-background-color; - border-color: $neo-button-primary-border-color; - border-style: $neo-button-primary-border-style; - border-width: $neo-button-primary-border-width; - box-shadow: $neo-button-primary-box-shadow; - color: $neo-button-primary-text-color; - - &:hover, &:focus, &.focusing { - background: $neo-button-primary-background-color-hover; - border-color: $neo-button-primary-border-color-hover; - color: $neo-button-primary-text-color-hover; - box-shadow: $neo-button-primary-box-shadow-hover; - } - &:active, &.s-pressed { - background: $neo-button-primary-background-color-pressed; - border-color: $neo-button-primary-border-color-pressed; - color: $neo-button-primary-text-color-pressed; - box-shadow: $neo-button-primary-box-shadow-pressed; - } - @include disabled; - - &.s-alternative { - background: $neo-button-primary-background-color-alternative; - border-width: $neo-button-primary-border-width-alternative; - box-shadow: $neo-button-primary-box-shadow-alternative; - - &:hover, &:focus, &.focusing, &:active, &.s-pressed { - background: $neo-button-primary-background-color-alternative-active; - } - - @include disabled($neo-button-primary-border-width-alternative); - } - } - - &.s-secondary { - background: $neo-button-secondary-background-color; - border-color: $neo-button-secondary-border-color; - border-style: $neo-button-secondary-border-style; - border-width: $neo-button-secondary-border-width; - box-shadow: $neo-button-secondary-box-shadow; - color: $neo-button-secondary-text-color; - - &:hover, &:focus, &.focusing, &:active, &.s-pressed { - background: $neo-button-secondary-background-color-active; - border-color: $neo-button-secondary-border-color-active; - color: $neo-button-secondary-text-color-active; - box-shadow: $neo-button-secondary-box-shadow-active; - } - @include disabled($neo-button-secondary-border-width); - - &.s-alternative { - background: $neo-button-secondary-background-color-alternative; - box-shadow: $neo-button-secondary-box-shadow-alternative; - color: $neo-button-secondary-text-color-alternative; - - &:hover, &:focus, &.focusing, &:active, &.s-pressed { - background: $neo-button-secondary-background-color-alternative-active; - color: $neo-button-secondary-text-color-alternative-active; - } - @include disabled($neo-button-secondary-border-width); - } - } - - &.s-tertiary { - background: $neo-button-tertiary-background-color; - border-color: $neo-button-tertiary-border-color; - border-style: $neo-button-tertiary-border-style; - border-width: $neo-button-tertiary-border-width; - box-shadow: $neo-button-tertiary-box-shadow; - color: $neo-button-tertiary-text-color; - - &:hover, &:focus, &.focusing, &:active, &.s-pressed { - background: $neo-button-tertiary-background-color-active; - border-color: $neo-button-tertiary-border-color-active; - color: $neo-button-tertiary-text-color-active; - box-shadow: $neo-button-tertiary-box-shadow-active; - } - @include disabled($neo-button-tertiary-border-width); - - &.s-alternative { - background: $neo-button-tertiary-background-color-alternative; - - @include disabled($neo-button-tertiary-border-width); - } - } - - &.s-action { - background: $neo-button-action-background-color; - border-color: $neo-button-action-border-color; - border-style: $neo-button-action-border-style; - border-width: $neo-button-action-border-width; - box-shadow: $neo-button-action-box-shadow; - color: $neo-button-action-text-color; - - &:hover, &:focus, &.focusing { - background: $neo-button-action-background-color-hover; - border-color: $neo-button-action-border-color-hover; - color: $neo-button-action-text-color-hover; - box-shadow: $neo-button-action-box-shadow-hover; - } - &:active, &.s-pressed { - background: $neo-button-action-background-color-pressed; - border-color: $neo-button-action-border-color-pressed; - color: $neo-button-action-text-color-pressed; - box-shadow: $neo-button-action-box-shadow-pressed; - } - @include disabled($neo-button-action-border-width, $neo-button-action-background-color, $neo-button-action-box-shadow-pressed); - &.s-alternative { - color: $neo-button-action-text-color-alternative; - - &, &:hover, &:focus, &.focusing, &:active, &.s-pressed { - background-color: $neo-button-action-background-color-alternative; - border-color: $neo-button-action-border-color-alternative; - box-shadow: $neo-button-action-box-shadow-alternative; - } - &:hover, &:focus, &.focusing, &:active, &.s-pressed { - color: $neo-button-action-text-color-alternative-active; - } - @include disabled($neo-button-action-border-width, $neo-button-action-background-color-alternative, $neo-button-action-box-shadow-alternative); - } - } -} diff --git a/src/styles/neomorphism/variables.scss b/src/styles/neomorphism/variables.scss deleted file mode 100644 index fe949d4a..00000000 --- a/src/styles/neomorphism/variables.scss +++ /dev/null @@ -1,70 +0,0 @@ -// Brand -$neo-brand-pinky: #ED145B !default; // Some texts, brand stuff -$neo-brand-blue: #0D0248 !default; // Brand stuff -// Theme Primary -$neo-color-theme-accent: #F8087B !default; -$neo-color-theme-accent-hover: #F754A3 !default; -$neo-color-theme-accent-pressed: #E44592 !default; -$neo-color-theme-accent-focused: #F24197 !default; -// Theme Secondary -$neo-color-theme-secondary: #44E5B2 !default; -$neo-color-theme-secondary-hover: #24DAA0 !default; -// Base: Content -$neo-color-base-content-primary: #2A171F !default; // Main text and icons -$neo-color-base-content-secondary: #A19A9D !default; // Secondary text -$neo-color-base-content-tertiary: #D5CDD0 !default; // Hint and placeholder text -$neo-color-base-content-quaternary: #75787b !default; // Text -// Base: Background -$neo-color-base-background: #FAF4F8 !default; // Interactive elements background: controls, text field -$neo-color-base-background-hover: #F7F3F4 !default; -$neo-color-base-background-dark: #2E2E36 !default; // Dark background -// Base: Border -$neo-color-base-border-primary: #F7F3F4 !default; // High emphasis border/divider -$neo-color-base-border-secondary: #EDE4E7 !default; // Low emphasis border/divider -// Base: Misc -$neo-color-base-disabled: #FDF7FB !default; // Disabled state -$neo-color-base-on-disabled: #A19A9D !default; // Text on disabled element -$neo-color-base-on-accent: #FFFFFF !default; // Text on dark/accent backgrounds -// Utility -$neo-color-utility-body: #F7F3F4 !default; -$neo-color-utility-surface: #FDF7FB !default; -$neo-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; -// Statuses -$neo-color-status-success: #34AD87 !default; // Success text and icon -$neo-color-status-success-background: #B9EBDB !default; // Success state background -$neo-color-status-warning: #479AEF !default; // Warning text and icon -$neo-color-status-warning-background: #C6E2FF !default; // Warning state background -$neo-color-status-error: #F754A3 !default; // Error text and icon -$neo-color-status-error-background: #FFD8EB !default; // Error state background - -:root { - --neo-brand-pinky: #{neo-brand-pinky}; - --neo-brand-blue: #{neo-brand-blue}; - --neo-color-theme-accent: #{$neo-color-theme-accent}; - --neo-color-theme-accent-hover: #{$neo-color-theme-accent-hover}; - --neo-color-theme-accent-pressed: #{$neo-color-theme-accent-pressed}; - --neo-color-theme-accent-focused: #{$neo-color-theme-accent-focused}; - --neo-color-theme-secondary: #{$neo-color-theme-secondary}; - --neo-color-theme-secondary-hover: #{$neo-color-theme-secondary-hover}; - --neo-color-base-content-primary: #{$neo-color-base-content-primary}; - --neo-color-base-content-secondary: #{$neo-color-base-content-secondary}; - --neo-color-base-content-tertiary: #{$neo-color-base-content-tertiary}; - --neo-color-base-content-quaternary: #{$neo-color-base-content-quaternary}; - --neo-color-base-background: #{$neo-color-base-background}; - --neo-color-base-background-hover: #{$neo-color-base-background-hover}; - --neo-color-base-background-dark: #{$neo-color-base-background-dark}; - --neo-color-base-border-primary: #{$neo-color-base-border-primary}; - --neo-color-base-border-secondary: #{$neo-color-base-border-secondary}; - --neo-color-base-disabled: #{$neo-color-base-disabled}; - --neo-color-base-on-disabled: #{$neo-color-base-on-disabled}; - --neo-color-base-on-accent: #{$neo-color-base-on-accent}; - --neo-color-utility-body: #{$neo-color-utility-body}; - --neo-color-utility-surface: #{$neo-color-utility-surface}; - --neo-color-utility-overlay: #{$neo-color-utility-overlay}; - --neo-color-status-success: #{$neo-color-status-success}; - --neo-color-status-success-background: #{$neo-color-status-success-background}; - --neo-color-status-warning: #{$neo-color-status-warning}; - --neo-color-status-warning-background: #{$neo-color-status-warning-background}; - --neo-color-status-error: #{$neo-color-status-error}; - --neo-color-status-error-background: #{$neo-color-status-error-background}; -} diff --git a/src/styles/neumorphism/button.scss b/src/styles/neumorphism/button.scss new file mode 100644 index 00000000..c781ddf2 --- /dev/null +++ b/src/styles/neumorphism/button.scss @@ -0,0 +1,237 @@ +// Neu button common variables +$neu-button-border-width: 2px !default; +$neu-button-border-style: solid !default; +$neu-button-transition: all 0.25s ease-in-out !default; + +$neu-button-background-color-disabled: var(--neu-color-utility-surface) !default; +$neu-button-border-color-disabled: var(--neu-color-utility-body) !default; +$neu-button-box-shadow-disabled: -1px -1px 5px rgba(255, 255, 255, 0.6) !default; +$neu-button-text-color-disabled: var(--neu-color-base-content-tertiary) !default; + +// Primary button: common +$neu-button-primary-border-width: $neu-button-border-width !default; +$neu-button-primary-border-width-alternative: 0px !default; +$neu-button-primary-border-style: $neu-button-border-style !default; +// Primary button: background colors +$neu-button-primary-background-color: var(--neu-color-theme-accent) !default; +$neu-button-primary-background-color-hover: var(--neu-color-theme-accent-hover) !default; +$neu-button-primary-background-color-pressed: var(--neu-color-theme-accent-pressed) !default; +$neu-button-primary-background-color-alternative: var(--neu-color-theme-secondary) !default; +$neu-button-primary-background-color-alternative-active: var(--neu-color-theme-secondary-hover) !default; +// Primary button: text colors +$neu-button-primary-text-color: var(--neu-color-base-on-accent) !default; +$neu-button-primary-text-color-hover: $neu-button-primary-text-color !default; +$neu-button-primary-text-color-pressed: $neu-button-primary-text-color !default; +// Primary button: border colors +$neu-button-primary-border-color: var(--neu-color-base-border-secondary) !default; +$neu-button-primary-border-color-hover: var(--neu-color-utility-surface) !default; +$neu-button-primary-border-color-pressed: $neu-button-primary-border-color-hover !default; +// Primary button: box-shadow +$neu-button-primary-box-shadow: 1px 1px 5px var(--neu-color-base-on-accent), -1px -1px 5px var(--neu-color-base-on-accent) !default; +$neu-button-primary-box-shadow-hover: 1px 1px 5px rgba(255, 255, 255, 0.7), -1px -1px 5px var(--neu-color-base-on-accent), 0px 0px 20px rgba(247, 84, 163, 0.5) !default; +$neu-button-primary-box-shadow-pressed: $neu-button-primary-box-shadow-hover !default; +$neu-button-primary-box-shadow-alternative: none !default; + +// Secondary button: common +$neu-button-secondary-border-width: 0px !default; +$neu-button-secondary-border-style: $neu-button-border-style !default; +// Secondary button: background colors +$neu-button-secondary-background-color: var(--neu-color-base-content-tertiary) !default; +$neu-button-secondary-background-color-active: var(--neu-color-base-content-secondary) !default; +$neu-button-secondary-background-color-alternative: var(--neu-color-utility-body) !default; +$neu-button-secondary-background-color-alternative-active: var(--neu-color-base-content-tertiary) !default; +// Secondary button: text colors +$neu-button-secondary-text-color: var(--neu-color-base-on-accent) !default; +$neu-button-secondary-text-color-active: $neu-button-secondary-text-color !default; +$neu-button-secondary-text-color-alternative: var(--neu-color-base-content-tertiary) !default; +$neu-button-secondary-text-color-alternative-active: var(--neu-color-base-on-accent) !default; +// Secondary button: border colors +$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: 1px 1px 5px rgba(0, 0, 0, 0.1), inset 1px 1px 1px rgba(0, 0, 0, 0.1) !default; +$neu-button-secondary-box-shadow-active: $neu-button-secondary-box-shadow !default; +$neu-button-secondary-box-shadow-alternative: -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) !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(--neu-color-utility-surface) !default; +$neu-button-tertiary-background-color-active: $neu-button-tertiary-background-color !default; +$neu-button-tertiary-background-color-alternative: var(--neu-color-utility-body) !default; +// Tertiary button: text colors +$neu-button-tertiary-text-color: var(--neu-color-base-content-secondary) !default; +$neu-button-tertiary-text-color-active: var(--neu-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: 1px 1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2px #FFFFFF !default; +$neu-button-tertiary-box-shadow-active: $neu-button-tertiary-box-shadow !default; + +// Action button: common +$neu-button-action-border-width: 0px !default; +$neu-button-action-border-style: $neu-button-border-style !default; +// Action button: background colors +$neu-button-action-background-color: var(--neu-color-utility-body) !default; +$neu-button-action-background-color-hover: $neu-button-action-background-color !default; +$neu-button-action-background-color-pressed: $neu-button-action-background-color !default; +$neu-button-action-background-color-alternative: transparent !default; +// Action button: text colors +$neu-button-action-text-color: var(--neu-color-base-content-tertiary) !default; +$neu-button-action-text-color-hover: var(--neu-color-base-content-secondary) !default; +$neu-button-action-text-color-pressed: var(--neu-color-theme-accent) !default; +$neu-button-action-text-color-alternative: var(--neu-color-base-content-tertiary) !default; +$neu-button-action-text-color-alternative-active: var(--neu-color-base-content-secondary) !default; +// Action button: border colors +$neu-button-action-border-color: transparent !default; +$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: -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) !default; +$neu-button-action-box-shadow-hover: $neu-button-action-box-shadow !default; +$neu-button-action-box-shadow-pressed: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default; +$neu-button-action-box-shadow-alternative: none !default; + +@mixin disabled ( + $border-width: $neu-button-border-width, + $background-color: $neu-button-background-color-disabled, + $box-shadow: $neu-button-box-shadow-disabled +) { + &:disabled, &:disabled:hover { + color: $neu-button-text-color-disabled; + background-color: $background-color; + border-color: $neu-button-border-color-disabled; + box-shadow: $box-shadow; + border-width: $border-width; + } +} + +.el-button.neumorphic { + transition: $neu-button-transition; + + &.s-primary { + background: $neu-button-primary-background-color; + border-color: $neu-button-primary-border-color; + border-style: $neu-button-primary-border-style; + border-width: $neu-button-primary-border-width; + box-shadow: $neu-button-primary-box-shadow; + color: $neu-button-primary-text-color; + + &:hover, &:focus, &.focusing { + background: $neu-button-primary-background-color-hover; + border-color: $neu-button-primary-border-color-hover; + color: $neu-button-primary-text-color-hover; + box-shadow: $neu-button-primary-box-shadow-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; + } + @include disabled; + + &.s-alternative { + background: $neu-button-primary-background-color-alternative; + border-width: $neu-button-primary-border-width-alternative; + box-shadow: $neu-button-primary-box-shadow-alternative; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-primary-background-color-alternative-active; + } + + @include disabled($neu-button-primary-border-width-alternative); + } + } + + &.s-secondary { + background: $neu-button-secondary-background-color; + border-color: $neu-button-secondary-border-color; + border-style: $neu-button-secondary-border-style; + border-width: $neu-button-secondary-border-width; + box-shadow: $neu-button-secondary-box-shadow; + color: $neu-button-secondary-text-color; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-secondary-background-color-active; + border-color: $neu-button-secondary-border-color-active; + color: $neu-button-secondary-text-color-active; + box-shadow: $neu-button-secondary-box-shadow-active; + } + @include disabled($neu-button-secondary-border-width); + + &.s-alternative { + background: $neu-button-secondary-background-color-alternative; + box-shadow: $neu-button-secondary-box-shadow-alternative; + color: $neu-button-secondary-text-color-alternative; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-secondary-background-color-alternative-active; + color: $neu-button-secondary-text-color-alternative-active; + } + @include disabled($neu-button-secondary-border-width); + } + } + + &.s-tertiary { + background: $neu-button-tertiary-background-color; + border-color: $neu-button-tertiary-border-color; + border-style: $neu-button-tertiary-border-style; + border-width: $neu-button-tertiary-border-width; + box-shadow: $neu-button-tertiary-box-shadow; + color: $neu-button-tertiary-text-color; + + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background: $neu-button-tertiary-background-color-active; + border-color: $neu-button-tertiary-border-color-active; + color: $neu-button-tertiary-text-color-active; + box-shadow: $neu-button-tertiary-box-shadow-active; + } + @include disabled($neu-button-tertiary-border-width); + + &.s-alternative { + background: $neu-button-tertiary-background-color-alternative; + + @include disabled($neu-button-tertiary-border-width); + } + } + + &.s-action { + background: $neu-button-action-background-color; + border-color: $neu-button-action-border-color; + border-style: $neu-button-action-border-style; + border-width: $neu-button-action-border-width; + box-shadow: $neu-button-action-box-shadow; + color: $neu-button-action-text-color; + + &:hover, &:focus, &.focusing { + background: $neu-button-action-background-color-hover; + border-color: $neu-button-action-border-color-hover; + color: $neu-button-action-text-color-hover; + box-shadow: $neu-button-action-box-shadow-hover; + } + &:active, &.s-pressed { + background: $neu-button-action-background-color-pressed; + border-color: $neu-button-action-border-color-pressed; + color: $neu-button-action-text-color-pressed; + box-shadow: $neu-button-action-box-shadow-pressed; + } + @include disabled($neu-button-action-border-width, $neu-button-action-background-color, $neu-button-action-box-shadow-pressed); + &.s-alternative { + color: $neu-button-action-text-color-alternative; + + &, &:hover, &:focus, &.focusing, &:active, &.s-pressed { + background-color: $neu-button-action-background-color-alternative; + border-color: $neu-button-action-border-color-alternative; + box-shadow: $neu-button-action-box-shadow-alternative; + } + &:hover, &:focus, &.focusing, &:active, &.s-pressed { + color: $neu-button-action-text-color-alternative-active; + } + @include disabled($neu-button-action-border-width, $neu-button-action-background-color-alternative, $neu-button-action-box-shadow-alternative); + } + } +} diff --git a/src/styles/neomorphism/index.scss b/src/styles/neumorphism/index.scss similarity index 100% rename from src/styles/neomorphism/index.scss rename to src/styles/neumorphism/index.scss diff --git a/src/styles/neumorphism/variables.scss b/src/styles/neumorphism/variables.scss new file mode 100644 index 00000000..4cb6a9cc --- /dev/null +++ b/src/styles/neumorphism/variables.scss @@ -0,0 +1,70 @@ +// Brand +$neu-brand-pinky: #ED145B !default; // Some texts, brand stuff +$neu-brand-blue: #0D0248 !default; // Brand stuff +// Theme Primary +$neu-color-theme-accent: #F8087B !default; +$neu-color-theme-accent-hover: #F754A3 !default; +$neu-color-theme-accent-pressed: #E44592 !default; +$neu-color-theme-accent-focused: #F24197 !default; +// Theme Secondary +$neu-color-theme-secondary: #44E5B2 !default; +$neu-color-theme-secondary-hover: #24DAA0 !default; +// Base: Content +$neu-color-base-content-primary: #2A171F !default; // Main text and icons +$neu-color-base-content-secondary: #A19A9D !default; // Secondary text +$neu-color-base-content-tertiary: #D5CDD0 !default; // Hint and placeholder text +$neu-color-base-content-quaternary: #75787b !default; // Text +// Base: Background +$neu-color-base-background: #FAF4F8 !default; // Interactive elements background: controls, text field +$neu-color-base-background-hover: #F7F3F4 !default; +$neu-color-base-background-dark: #2E2E36 !default; // Dark background +// Base: Border +$neu-color-base-border-primary: #F7F3F4 !default; // High emphasis border/divider +$neu-color-base-border-secondary: #EDE4E7 !default; // Low emphasis border/divider +// Base: Misc +$neu-color-base-disabled: #FDF7FB !default; // Disabled state +$neu-color-base-on-disabled: #A19A9D !default; // Text on disabled element +$neu-color-base-on-accent: #FFFFFF !default; // Text on dark/accent backgrounds +// Utility +$neu-color-utility-body: #F7F3F4 !default; +$neu-color-utility-surface: #FDF7FB !default; +$neu-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; +// Statuses +$neu-color-status-success: #34AD87 !default; // Success text and icon +$neu-color-status-success-background: #B9EBDB !default; // Success state background +$neu-color-status-warning: #479AEF !default; // Warning text and icon +$neu-color-status-warning-background: #C6E2FF !default; // Warning state background +$neu-color-status-error: #F754A3 !default; // Error text and icon +$neu-color-status-error-background: #FFD8EB !default; // Error state background + +:root { + --neu-brand-pinky: #{neu-brand-pinky}; + --neu-brand-blue: #{neu-brand-blue}; + --neu-color-theme-accent: #{$neu-color-theme-accent}; + --neu-color-theme-accent-hover: #{$neu-color-theme-accent-hover}; + --neu-color-theme-accent-pressed: #{$neu-color-theme-accent-pressed}; + --neu-color-theme-accent-focused: #{$neu-color-theme-accent-focused}; + --neu-color-theme-secondary: #{$neu-color-theme-secondary}; + --neu-color-theme-secondary-hover: #{$neu-color-theme-secondary-hover}; + --neu-color-base-content-primary: #{$neu-color-base-content-primary}; + --neu-color-base-content-secondary: #{$neu-color-base-content-secondary}; + --neu-color-base-content-tertiary: #{$neu-color-base-content-tertiary}; + --neu-color-base-content-quaternary: #{$neu-color-base-content-quaternary}; + --neu-color-base-background: #{$neu-color-base-background}; + --neu-color-base-background-hover: #{$neu-color-base-background-hover}; + --neu-color-base-background-dark: #{$neu-color-base-background-dark}; + --neu-color-base-border-primary: #{$neu-color-base-border-primary}; + --neu-color-base-border-secondary: #{$neu-color-base-border-secondary}; + --neu-color-base-disabled: #{$neu-color-base-disabled}; + --neu-color-base-on-disabled: #{$neu-color-base-on-disabled}; + --neu-color-base-on-accent: #{$neu-color-base-on-accent}; + --neu-color-utility-body: #{$neu-color-utility-body}; + --neu-color-utility-surface: #{$neu-color-utility-surface}; + --neu-color-utility-overlay: #{$neu-color-utility-overlay}; + --neu-color-status-success: #{$neu-color-status-success}; + --neu-color-status-success-background: #{$neu-color-status-success-background}; + --neu-color-status-warning: #{$neu-color-status-warning}; + --neu-color-status-warning-background: #{$neu-color-status-warning-background}; + --neu-color-status-error: #{$neu-color-status-error}; + --neu-color-status-error-background: #{$neu-color-status-error-background}; +} From c43704643bb6b5675cd75518cc8ded8b8876668e Mon Sep 17 00:00:00 2001 From: Nikita Polyakov <53777036+Nikita-Polyakov@users.noreply.github.com> Date: Mon, 31 May 2021 16:17:50 +0300 Subject: [PATCH 13/14] Neumorphism/input (#206) * wip neumorphic input * add neu input styles & refactoring * fix file input --- .../DesignSystem/SDesignSystemProvider.vue | 7 + src/components/Input/SInput.vue | 91 +++++--- src/stories/SFloatInput.stories.ts | 17 +- src/stories/SInput.stories.ts | 32 ++- src/styles/input.scss | 214 ++++++++++-------- src/styles/neumorphism/index.scss | 1 + src/styles/neumorphism/input.scss | 49 ++++ 7 files changed, 275 insertions(+), 136 deletions(-) create mode 100644 src/styles/neumorphism/input.scss diff --git a/src/components/DesignSystem/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider.vue index 7cfca97f..c9584290 100644 --- a/src/components/DesignSystem/SDesignSystemProvider.vue +++ b/src/components/DesignSystem/SDesignSystemProvider.vue @@ -14,3 +14,10 @@ export default class SDesignSystemProvider extends Vue { @Provide(DesignSystemProvideKey) designSystem = this } + + diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue index e80d1ffd..9efb076e 100644 --- a/src/components/Input/SInput.vue +++ b/src/components/Input/SInput.vue @@ -3,40 +3,51 @@ class="s-input" :class="computedClasses" > - {{ placeholder }} - - - - + + +
+ + +
+ {{ placeholder }} + + + + +
+ +
+ + @@ -46,13 +57,14 @@ import { ElInput } from 'element-ui/types/input' import { ElForm } from 'element-ui/types/form' import { SIcon } from '../Icon' +import { DesignSystemInject } from '../DesignSystem' import BorderRadiusMixin from '../../mixins/BorderRadiusMixin' import { Autocomplete, InputSize, InputType } from './consts' @Component({ components: { SIcon } }) -export default class SInput extends Mixins(BorderRadiusMixin) { +export default class SInput extends Mixins(BorderRadiusMixin, DesignSystemInject) { readonly InputType = InputType readonly emptyValue = null /** @@ -170,6 +182,9 @@ export default class SInput extends Mixins(BorderRadiusMixin) { get computedClasses (): Array { const cssClasses: Array = [] + if (this.designSystemClass) { + cssClasses.push(this.designSystemClass) + } if (this.focused) { cssClasses.push('s-focused') } @@ -191,6 +206,12 @@ export default class SInput extends Mixins(BorderRadiusMixin) { if (this.size) { cssClasses.push(this.sizeClass) } + if (this.prefix) { + cssClasses.push('s-input--prefix') + } + if (this.suffix) { + cssClasses.push('s-input--suffix') + } return cssClasses } diff --git a/src/stories/SFloatInput.stories.ts b/src/stories/SFloatInput.stories.ts index 7c0234d8..e27ac49d 100644 --- a/src/stories/SFloatInput.stories.ts +++ b/src/stories/SFloatInput.stories.ts @@ -1,6 +1,7 @@ -import { number, text, boolean, object, withKnobs } from '@storybook/addon-knobs' +import { number, text, boolean, object, select, withKnobs } from '@storybook/addon-knobs' -import { SFloatInput, SRow } from '../components' +import { SFloatInput, SRow, SDesignSystemProvider } from '../components' +import { DesignSystemTypes } from '../components/DesignSystem' export default { component: SFloatInput, @@ -9,8 +10,10 @@ export default { } export const configurable = () => ({ - components: { SFloatInput, SRow }, - template: ` + components: { SFloatInput, SRow, SDesignSystemProvider }, + template: ` + + ({ :delimiters="delimiters" :max="max" /> - `, + + `, data: () => ({ model: '' }), props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, decimals: { default: number('Decimals', 18) }, diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts index 8e394b96..ff4267a3 100644 --- a/src/stories/SInput.stories.ts +++ b/src/stories/SInput.stories.ts @@ -1,8 +1,9 @@ import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs' -import { SInput, SRow, SCol } from '../components' +import { SInput, SRow, SCol, SDesignSystemProvider } from '../components' import { BorderRadius } from '../types' import { InputType, InputSize } from '../components/Input' +import { DesignSystemTypes } from '../components/DesignSystem' export default { component: SInput, @@ -12,8 +13,10 @@ export default { } export const configurable = () => ({ - components: { SInput }, - template: ` + ({ :size="size" :prefix="prefix" :suffix="suffix" - />`, + > +
{{ top }}
+
{{ bottom }}
+
{{ left }}
+
{{ right }}
+ + `, data: () => ({ input: '' }), props: { + designSystem: { + default: select('Design System', Object.values(DesignSystemTypes), DesignSystemTypes.DEFAULT) + }, + top: { + default: text('Top slot content', '') + }, + bottom: { + default: text('Bottom slot content', '') + }, + left: { + default: text('Left slot content', '') + }, + right: { + default: text('Right slot content', '') + }, type: { default: select('Type', Object.values(InputType), InputType.TEXT) }, diff --git a/src/styles/input.scss b/src/styles/input.scss index 35cf091b..626971f0 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss @@ -4,117 +4,157 @@ ) { &.s-border-radius { &-#{$suffix} { - border-radius: 0; - .s-placeholder { - border-top-left-radius: $border-radius; - } - .el-input, - .el-textarea { - > input, - > textarea { - border-radius: $border-radius; - } - } + border-radius: $border-radius; } } } +$input-icon-width: 18px; +$input-border-width: 1px; +$input-padding-top: $s-padding-input / 2 - $input-border-width; +$input-padding-left: $s-padding-input - $input-border-width; + .s-input { + display: flex; + flex-direction: column; + justify-content: center; + + background-color: var(--s-color-base-background); + border-color: var(--s-color-base-background); + border-style: solid; + border-width: $input-border-width; font-family: $s-font-family-default; - width: 100%; min-height: $s-size-big; + padding: $input-padding-top $input-padding-left; position: relative; + width: 100%; + @include input-border-radius; @include input-border-radius("medium", var(--s-border-radius-medium)); @include input-border-radius("small", var(--s-border-radius-small)); @include input-border-radius("mini", var(--s-border-radius-mini)); - .el-input__suffix { - z-index: 1; + + &__content { + display: flex; + align-items: center; + width: 100%; } + + &__input { + flex: 1; + position: relative; + } + + &.s-size-medium { + min-height: $s-size-medium; + } + .s-placeholder { // TODO: add default animation from material-ui color: var(--s-color-base-content-tertiary); text-align: left; font-size: var(--s-font-size-mini); - padding: 0 15px; - padding-top: 5px; - top: 1px; - left: 1px; - position: absolute; + line-height: 1.5; z-index: 1; - width: calc(100% - 15px); - background-color: var(--s-color-base-background); pointer-events: none; - } - .el-input, - .el-textarea { - height: 100%; - > input, - > textarea { - height: $s-size-big; - border: 1px solid var(--s-color-base-background); - background-color: var(--s-color-base-background); - &::placeholder { - color: var(--s-color-base-content-tertiary); - opacity: 1; // Firefox + position: absolute; + top: -3px; + + & + .el-input, & + .el-textarea { + padding-top: $s-padding-input; + + .el-input__validateIcon { + padding-top: 11px; } } - > textarea { - padding-top: 12px; - } - [class^="el-input__count"] { - background-color: transparent; - } } + &:hover { - .s-placeholder, - .el-input > input, - .el-textarea > textarea { - background-color: var(--s-color-base-background-hover); - } - .el-input > input, - .el-textarea > textarea { - border-color: var(--s-color-base-background-hover); - } + background-color: var(--s-color-base-background-hover); + border-color: var(--s-color-base-background-hover); } - &.s-size-medium { - min-height: $s-size-medium; - .el-input, - .el-textarea { - height: 100%; - > input, - > textarea { - height: $s-size-medium; - } - } - } &.s-focused { - .s-placeholder, - .el-input > input, - .el-textarea > textarea { - background-color: var(--s-color-utility-surface); - } - .el-input > input, - .el-textarea > textarea { - border-color: var(--s-color-base-border-primary); - } + background-color: var(--s-color-utility-surface); + border-color: var(--s-color-base-border-primary); } + &.s-disabled { - .s-placeholder, - .el-input > input, - .el-textarea > textarea { + color: var(--s-color-base-content-quaternary); + background-color: var(--s-color-base-disabled); + border-color: var(--s-color-base-disabled); + + .s-placeholder { color: var(--s-color-base-content-quaternary); - background-color: var(--s-color-base-disabled); } - .el-input > input, - .el-textarea > textarea { - border-color: var(--s-color-base-disabled); + } + + &--prefix:not(.s-textarea) { + .s-placeholder { + padding-left: $input-icon-width + $s-padding-input / 2; } } - &:not(.s-textarea) { + + &--suffix:not(.s-textarea) { .s-placeholder { - background-color: transparent !important; + padding-right: $input-icon-width + $s-padding-input / 2; + } + } + + .el-input, .el-textarea { + font-size: inherit; + position: unset; + + [class^="el-input__count"] { + background-color: transparent; + } + + &.is-disabled { + .el-input__inner { + background-color: transparent; + color: inherit; + } + } + + &__inner { + height: auto; + line-height: 1.5; + border: none; + border-radius: 0; + background-color: transparent; + padding: 0; + text-align: left; + + &::placeholder { + color: var(--s-color-base-content-tertiary); + opacity: 1; // Firefox + } + } + + &__icon { + line-height: 1; + width: $input-icon-width; + } + + &__prefix { + z-index: 1; + left: 0; + } + + &__suffix { + z-index: 1; + right: 0; + } + + &--prefix { + .el-input__inner { + padding-left: $input-icon-width + $s-padding-input / 2; + } + } + &--suffix { + .el-input__inner { + padding-right: $input-icon-width + $s-padding-input / 2; + } } } .el-input > input { @@ -132,27 +172,17 @@ animation-name: onAutoFillCancel; } } - .s-placeholder + .el-input { - > input { - padding-top: 12px; - } - .el-input__validateIcon { - padding-top: 11px; - } - } - .s-placeholder + .el-textarea > textarea { - padding-top: 24px; - } + &.s-text-file { .el-input > input { padding-right: 56px; } .s-icon-file-file-upload-24 { - top: 16px; - right: 16px; + right: 0; font-size: var(--s-icon-font-size-big); - z-index: 1; + z-index: 2; position: absolute; + cursor: pointer; + input { cursor: pointer; position: absolute; @@ -161,7 +191,7 @@ right: 0; width: 56px; height: 100%; - z-index: 2; + z-index: 1; } } } diff --git a/src/styles/neumorphism/index.scss b/src/styles/neumorphism/index.scss index 68b676ec..6f709c44 100644 --- a/src/styles/neumorphism/index.scss +++ b/src/styles/neumorphism/index.scss @@ -1,2 +1,3 @@ @import "./variables"; @import "./button.scss"; +@import "./input.scss"; diff --git a/src/styles/neumorphism/input.scss b/src/styles/neumorphism/input.scss new file mode 100644 index 00000000..ae590da6 --- /dev/null +++ b/src/styles/neumorphism/input.scss @@ -0,0 +1,49 @@ +$neu-input-border-width: 0 !default; +$neu-input-background: var(--neu-color-base-background) !default; +$neu-input-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) !default; +$neu-input-box-shadow-active: 1px 1px 2px #FFFFFF, inset 1px 1px 2px rgba(0, 0, 0, 0.1) !default; +$neu-input-color: var(--neu-color-base-content-primary) !default; +$neu-input-color-disabled: var(--neu-color-base-content-secondary) !default; +$neu-input-placeholder-color: var(--neu-color-base-content-secondary) !default; +$neu-input-placeholder-offset: -2px !default; +$neu-input-padding: 8px 16px !default; + +.s-input.neumorphic { + border-width: $neu-input-border-width; + box-shadow: $neu-input-box-shadow; + color: $neu-input-color; + padding: $neu-input-padding; + + .el-input, .el-textarea { + &__inner { + color: $neu-input-color; + } + + &.is-disabled { + .el-input__inner { + background-color: transparent; + } + } + } + + & .s-placeholder { + color: $neu-input-placeholder-color; + top: $neu-input-placeholder-offset; + } + + &, &:hover, &.s-focused, &.s-disabled { + background: $neu-input-background; + } + + &.s-focused, &.s-disabled { + box-shadow: $neu-input-box-shadow-active; + } + + &.s-disabled { + color: $neu-input-color-disabled; + + .s-placeholder { + color: $neu-input-placeholder-color; + } + } +} From e9f6e89d7938cc945bc5064e52228e07d67db2a9 Mon Sep 17 00:00:00 2001 From: Nikita-Polyakov Date: Mon, 31 May 2021 16:44:21 +0300 Subject: [PATCH 14/14] export setDesignTheme --- .../DesignSystem/DesignSystemInject.ts | 3 ++- .../DesignSystem/SDesignSystemProvider.vue | 3 ++- src/components/DesignSystem/index.ts | 5 ++--- src/index.ts | 7 ++++++- src/store/Theme.ts | 16 ++++++++++++++-- src/stories/SButton.stories.ts | 2 +- src/stories/SFloatInput.stories.ts | 2 +- src/stories/SInput.stories.ts | 2 +- src/utils/DesignSystem.ts | 4 ++++ src/utils/index.ts | 4 ++++ 10 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 src/utils/DesignSystem.ts diff --git a/src/components/DesignSystem/DesignSystemInject.ts b/src/components/DesignSystem/DesignSystemInject.ts index 03e90d24..9b276cee 100644 --- a/src/components/DesignSystem/DesignSystemInject.ts +++ b/src/components/DesignSystem/DesignSystemInject.ts @@ -1,5 +1,6 @@ import { Component, Vue, Inject, Prop } from 'vue-property-decorator' -import { DesignSystemTypes, DesignSystemProvideKey } from './consts' +import { DesignSystemProvideKey } from './consts' +import { DesignSystemTypes } from '../../utils/DesignSystem' @Component export default class DesignSystemInject extends Vue { diff --git a/src/components/DesignSystem/SDesignSystemProvider.vue b/src/components/DesignSystem/SDesignSystemProvider.vue index c9584290..a6922930 100644 --- a/src/components/DesignSystem/SDesignSystemProvider.vue +++ b/src/components/DesignSystem/SDesignSystemProvider.vue @@ -6,7 +6,8 @@