From 8a9f541fe0cafbc4a3324424fbf57981f0fbe3c1 Mon Sep 17 00:00:00 2001 From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com> Date: Mon, 26 Oct 2020 10:40:50 +0300 Subject: [PATCH 01/21] SMenu Component: Added ability to add the box shadow. (#72) --- src/components/Menu/SMenu.vue | 8 ++++++++ src/styles/menu.scss | 1 + 2 files changed, 9 insertions(+) diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue index 21ab9dff..41169236 100644 --- a/src/components/Menu/SMenu.vue +++ b/src/components/Menu/SMenu.vue @@ -6,6 +6,7 @@ :mode="mode" :collapse="collapse" :background-color="backgroundColor" + :box-shadow="boxShadow" :text-color="textColor" :active-text-color="activeTextColor" :default-active="defaultActive" @@ -48,6 +49,10 @@ export default class SMenu extends Vue { * By default it's set to `"#2D2926"` */ @Prop({ default: '#2D2926', type: String }) readonly backgroundColor!: string + /** + * Menu shadow if it exists + */ + @Prop({ default: 'none', type: String }) readonly boxShadow!: string /** * Text color of menu in hex format. * @@ -104,6 +109,9 @@ export default class SMenu extends Vue { get computedStyles (): object { const styles = {} as any + if (this.boxShadow) { + styles['--s-menu-box-shadow'] = this.boxShadow + } if (this.activeHoverColor) { styles['--s-menu-color-hover'] = this.activeHoverColor } diff --git a/src/styles/menu.scss b/src/styles/menu.scss index 564e15e2..e9a9597f 100644 --- a/src/styles/menu.scss +++ b/src/styles/menu.scss @@ -1,6 +1,7 @@ $margin-bottom-menu-item: 8px; .s-menu { + box-shadow: var(--s-menu-box-shadow); padding: 20px 12px; &:not(.el-menu--horizontal) > :not(:last-child) { margin-bottom: $margin-bottom-menu-item; From d198341a5f797f23c6fe50696d60626f164301ce Mon Sep 17 00:00:00 2001 From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com> Date: Tue, 27 Oct 2020 13:42:35 +0300 Subject: [PATCH 02/21] Icon Story: Fixed knob title (#73) * SMenu Component: Added ability to add the box shadow. * Icon Story: Fixed knob title. --- src/stories/SIcon.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/SIcon.stories.ts b/src/stories/SIcon.stories.ts index 67c75152..d8cda33c 100644 --- a/src/stories/SIcon.stories.ts +++ b/src/stories/SIcon.stories.ts @@ -21,7 +21,7 @@ export const configurable = () => ({ default: select('Name', Object.values(Icons), Icons.Activity) }, size: { - default: number('Content position', 16) + default: number('Icon Size', 16) } } }) From 3c07b61ae396525d9c003f69867921b142f232e5 Mon Sep 17 00:00:00 2001 From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com> Date: Tue, 27 Oct 2020 14:21:14 +0300 Subject: [PATCH 03/21] UI Lib Version: updated. (#74) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 23bea9b0..d1a1fec0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.5.0", + "version": "0.5.1", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/" From 7826ff6904b096edb4a338bb139829b8d2d8017f Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 12:15:34 +0400 Subject: [PATCH 04/21] Fix arrow icons for collapse items --- src/styles/collapse.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss index bf522caa..91b56023 100644 --- a/src/styles/collapse.scss +++ b/src/styles/collapse.scss @@ -26,7 +26,7 @@ } .el-icon-arrow-right { font-family: 'soramitsu-icons' !important; - @extend .s-icon-chevron-top; + @extend .s-icon-chevron-bottom; font-size: 16px; padding: 8px; width: 32px; From 9f026098e485622867bb2ec2c3d56dfec1f9a086 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 12:16:04 +0400 Subject: [PATCH 05/21] Fix date picker range color --- src/styles/datepicker.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss index e7f3c34f..9815a34b 100644 --- a/src/styles/datepicker.scss +++ b/src/styles/datepicker.scss @@ -252,20 +252,20 @@ .el-date-table.is-week-mode .el-date-table__row { &.current, &:hover { div { - background-color: var(--s-color-theme-secondary-hover); + background-color: var(--s-color-base-background-hover); } } } .el-month-table td.in-range div { - background-color: var(--s-color-theme-secondary-hover); + background-color: var(--s-color-base-background-hover); &:hover { - background-color: var(--s-color-theme-secondary-hover); + background-color: var(--s-color-base-background-hover); } } .el-date-table td.in-range div { - background-color: var(--s-color-theme-secondary-hover); + background-color: var(--s-color-base-background-hover); &:hover { - background-color: var(--s-color-theme-secondary-hover); + background-color: var(--s-color-base-background-hover); } } .el-date-range-picker__content.is-left { From 0d6e9570792fc6375b7fbdecdd86695378702a2a Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 12:56:28 +0400 Subject: [PATCH 06/21] Add type prop for divider component --- src/components/Divider/SDivider.vue | 16 +++++++++++++++- src/components/Divider/consts.ts | 5 +++++ src/components/Divider/index.ts | 3 ++- src/stories/SDivider.stories.ts | 6 +++++- src/styles/divider.scss | 11 ++++++++--- 5 files changed, 35 insertions(+), 6 deletions(-) diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue index c74cb2a8..4cac3d63 100644 --- a/src/components/Divider/SDivider.vue +++ b/src/components/Divider/SDivider.vue @@ -7,10 +7,16 @@ diff --git a/src/components/Divider/consts.ts b/src/components/Divider/consts.ts index 10f7624d..d9987b08 100644 --- a/src/components/Divider/consts.ts +++ b/src/components/Divider/consts.ts @@ -6,4 +6,9 @@ export enum ContentPosition { CENTER = 'center' } +export enum DividerType { + PRIMARY = 'primary', + SECONDARY = 'secondary' +} + export const DividerDirection = Direction diff --git a/src/components/Divider/index.ts b/src/components/Divider/index.ts index 7426c29d..fdab10ef 100644 --- a/src/components/Divider/index.ts +++ b/src/components/Divider/index.ts @@ -1,3 +1,4 @@ import SDivider from './SDivider.vue' +import { ContentPosition, DividerType, DividerDirection } from './consts' -export { SDivider } +export { SDivider, ContentPosition, DividerDirection, DividerType } diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts index a18abf33..2fa74812 100644 --- a/src/stories/SDivider.stories.ts +++ b/src/stories/SDivider.stories.ts @@ -1,7 +1,7 @@ import { withKnobs, select } from '@storybook/addon-knobs' import { SDivider, SRow } from '../components' -import { DividerDirection, ContentPosition } from '../components/Divider/consts' +import { ContentPosition, DividerDirection, DividerType } from '../components/Divider' export default { component: SDivider, @@ -15,6 +15,7 @@ export const configurable = () => ({ First text paragraph @@ -23,6 +24,9 @@ export const configurable = () => ({ Second text paragraph `, props: { + type: { + default: select('Type', Object.values(DividerType), DividerType.SECONDARY) + }, direction: { default: select('Direction', Object.values(DividerDirection), DividerDirection.HORIZONTAL) }, diff --git a/src/styles/divider.scss b/src/styles/divider.scss index 5c56d24f..a67c42e3 100644 --- a/src/styles/divider.scss +++ b/src/styles/divider.scss @@ -1,6 +1,11 @@ -.el-divider { - background-color: var(--s-color-base-border-secondary); -} .el-divider--horizontal { margin: 20px 0; } +.s-divider { + &-primary { + background-color: var(--s-color-base-border-primary); + } + &-secondary { + background-color: var(--s-color-base-border-secondary); + } +} From a9abf16a63f4c0971356c289db595a2bd9bb99b0 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 13:23:54 +0400 Subject: [PATCH 07/21] Fix action button styles --- src/styles/button.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/styles/button.scss b/src/styles/button.scss index 630668d6..20c064d7 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -120,24 +120,28 @@ background-color: var(--s-color-base-background); border-color: var(--s-color-base-background); border-radius: 8px; - &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + &:hover, &:active, &:focus { color: var(--s-color-base-content-primary); background-color: var(--s-color-base-background-hover); border-color: var(--s-color-base-background-hover); } &:disabled, &:disabled:hover { color: var(--s-color-base-content-quaternary); + background-color: var(--s-color-base-disabled); + border-color: var(--s-color-base-disabled); } &.s-alternative { background-color: var(--s-color-base-on-accent); border-color: var(--s-color-base-border-primary); - &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + &:hover, &:active, &:focus { color: var(--s-color-base-content-primary); background-color: var(--s-color-base-background); border-color: var(--s-color-base-background); } &:disabled, &:disabled:hover { color: var(--s-color-base-content-quaternary); + background-color: var(--s-color-base-disabled); + border-color: var(--s-color-base-disabled); } } } From 2ababede79effe4b1c8de0f66e45e7995dd537cb Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 13:24:09 +0400 Subject: [PATCH 08/21] Fix checkbox disabled state --- src/styles/checkbox.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss index 450e99ad..bb9e8af2 100644 --- a/src/styles/checkbox.scss +++ b/src/styles/checkbox.scss @@ -4,7 +4,7 @@ .el-checkbox { color: var(--s-color-base-content-primary); &.is-bordered { - &, &.is-disabled { + &, &.is-disabled, &.is-disabled.is-checked { border-color: var(--s-color-base-border-primary); } &.is-checked { @@ -83,7 +83,7 @@ border-color: var(--s-color-base-border-primary); } & + span.el-checkbox__label { - color: var(--s-color-base-content-quaternary); + color: var(--s-color-base-on-disabled); } } &.is-focus > .el-checkbox__inner { @@ -98,7 +98,7 @@ background-color: var(--s-color-base-disabled); border-color: var(--s-color-base-border-primary); &::after { - border-color: var(--s-color-base-content-quaternary); + border-color: var(--s-color-base-on-disabled); } } & + .el-checkbox__label { From d2afeeb98886d5205a49959f10faaf2116013175 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 13:24:30 +0400 Subject: [PATCH 09/21] Fix radio button disabled styles --- src/styles/radio.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 44c42b79..391930d8 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -107,17 +107,17 @@ $radio-button-border-color: var(--s-color-theme-accent); &.is-disabled { .el-radio__inner { background-color: var(--ss-color-base-background); - border-color: var(--s-color-base-border-primary); + border-color: var(--s-color-base-on-disabled); } &.is-checked .el-radio__inner { background-color: var(--s-color-base-background); - border-color: var(--s-color-base-border-primary); + border-color: var(--s-color-base-on-disabled); &::after { - background-color: var(--s-color-base-content-quaternary); + background-color: var(--s-color-base-on-disabled); } } & + span.el-radio__label { - color: var(--s-color-base-content-quaternary); + color: var(--s-color-base-on-disabled); } } } From 91a8771bcb60a5020094358ca522c57b7471fb90 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 13:27:17 +0400 Subject: [PATCH 10/21] Fix radio button disabled styles --- src/styles/radio.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 391930d8..1763dc82 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -156,13 +156,13 @@ $radio-button-border-color: var(--s-color-theme-accent); } &.is-disabled { #{$radio-button-class}__inner { - color: var(--s-color-base-content-quaternary); + color: var(--s-color-base-on-disabled); } } &.is-disabled, &.is-disabled:hover { #{$radio-button-class}__inner { - border-color: var(--s-color-base-border-primary); + border-color: var(--s-color-base-on-disabled); } } &.is-active { @@ -180,8 +180,8 @@ $radio-button-border-color: var(--s-color-theme-accent); &.is-disabled, &.is-disabled:hover { #{$radio-button-class}__inner { - background-color: var(--s-color-base-content-quaternary); - border-color: var(--s-color-base-content-quaternary); + background-color: var(--s-color-base-on-disabled); + border-color: var(--s-color-base-on-disabled); } } } From beeb66d3ed2200521d86a68cbec3d4855fc9f81a Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 13:37:45 +0400 Subject: [PATCH 11/21] Add secondary colors --- src/styles/dialog.scss | 4 ++++ src/styles/variables.scss | 22 ++++++++++++++-------- 2 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss index c992a033..d469b2ed 100644 --- a/src/styles/dialog.scss +++ b/src/styles/dialog.scss @@ -14,3 +14,7 @@ color: var(--s-color-base-content-primary); } } +.v-modal { + background-color: var(--s-color-utility-overlay); + opacity: 1; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 5c7f7bb3..108271e3 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,7 +4,10 @@ $s-color-theme-accent-hover: #D51252 !default; // Primary button hover $s-color-theme-accent-pressed: #C00F4A !default; // Primary button pressed $s-color-theme-accent-focused: #AA0E42 !default; // Primary button focused // Secondary theme colors -$s-color-theme-secondary-hover: #F3CCDA !default; // Datepicker values +$s-color-theme-secondary: #F4E0E8 !default; +$s-color-theme-secondary-hover: #F3CCDA !default; +$s-color-theme-secondary-pressed: #F1C0D2 !default; +$s-color-theme-secondary-focused: #EDABC3 !default; // Base content colors $s-color-base-content-primary: #2D2926 !default; $s-color-base-content-secondary: #53565A !default; // not used @@ -17,18 +20,18 @@ $s-color-base-border-primary: #DDE0E1 !default; $s-color-base-border-secondary: #ECEFF0 !default; $s-color-base-background-hover: #ECEFF0 !default; $s-color-base-disabled: #F5F7F8 !default; -$s-color-base-on-disabled: #75787B !default; // not used +$s-color-base-on-disabled: #75787B !default; $s-color-base-on-accent: #FFFFFF !default; // Utility colors -$s-color-utility-body: #FFFFFF !default; // not used +$s-color-utility-body: #FFFFFF !default; $s-color-utility-surface: #FFFFFF !default; -$s-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; // not used +$s-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; // Status colors -$s-color-status-success: #009900 !default; // not used -$s-color-status-warning: #FF9900 !default; // not used +$s-color-status-success: #009900 !default; +$s-color-status-warning: #FF9900 !default; $s-color-status-error: #FF0000 !default; -$s-color-status-success-background: #CCEDCC !default; // not used -$s-color-status-warning-background: #FFE3B8 !default; // not used +$s-color-status-success-background: #CCEDCC !default; +$s-color-status-warning-background: #FFE3B8 !default; $s-color-status-error-background: #FFF9FA !default; // Size @@ -78,7 +81,10 @@ $--breakpoints-spec: ( --s-color-theme-accent-hover: #{$s-color-theme-accent-hover}; --s-color-theme-accent-pressed: #{$s-color-theme-accent-pressed}; --s-color-theme-accent-focused: #{$s-color-theme-accent-focused}; + --s-color-theme-secondary: #{$s-color-theme-secondary}; --s-color-theme-secondary-hover: #{$s-color-theme-secondary-hover}; + --s-color-theme-secondary-pressed: #{$s-color-theme-secondary-pressed}; + --s-color-theme-secondary-focused: #{$s-color-theme-secondary-focused}; --s-color-base-content-primary: #{$s-color-base-content-primary}; --s-color-base-content-secondary: #{$s-color-base-content-secondary}; --s-color-base-content-tertiary: #{$s-color-base-content-tertiary}; From 5c9f7a48b6187fee8b61918059f99c481a9038db Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 16:27:07 +0400 Subject: [PATCH 12/21] Add global variables for tertiary colors --- src/styles/button.scss | 38 ++++++++++++++++++++++++++++++++------ 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/src/styles/button.scss b/src/styles/button.scss index 20c064d7..33ca99ae 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -1,5 +1,21 @@ @import "./variables"; +$s-color-button-tertiary-color: var(--s-color-base-content-primary); +$s-color-button-tertiary-color-active: var(--s-color-theme-accent); +$s-color-button-tertiary-background: var(--s-color-base-background); +$s-color-button-tertiary-background-hover: var(--s-color-base-background); +$s-color-button-tertiary-background-pressed: var(--s-color-base-background); +$s-color-button-tertiary-background-focused: var(--s-color-base-background); + +:root { + --s-color-button-tertiary-color: #{$s-color-button-tertiary-color}; + --s-color-button-tertiary-color-active: #{$s-color-button-tertiary-color-active}; + --s-color-button-tertiary-background: #{$s-color-button-tertiary-background}; + --s-color-button-tertiary-background-hover: #{$s-color-button-tertiary-background-hover}; + --s-color-button-tertiary-background-pressed: #{$s-color-button-tertiary-background-pressed}; + --s-color-button-tertiary-background-focused: #{$s-color-button-tertiary-background-focused}; +} + .s-loading { padding: 12px 17.5px; i { @@ -78,13 +94,23 @@ } } .s-tertiary { - color: var(--s-color-base-content-primary); - border-color: var(--s-color-base-background); - background-color: var(--s-color-base-background); + color: var(--s-color-button-tertiary-color); + border-color: var(--s-color-button-tertiary-background); + background-color: var(--s-color-button-tertiary-background); &:hover, &:active, &:focus { - color: var(--s-color-theme-accent); - background-color: var(--s-color-base-background); - border-color: var(--s-color-base-background); + color: var(--s-color-button-tertiary-color-active); + } + &:hover { + background-color: var(--s-color-button-tertiary-background-hover); + border-color: var(--s-color-button-tertiary-background-hover); + } + &:active { + background-color: var(--s-color-button-tertiary-background-pressed); + border-color: var(--s-color-button-tertiary-background-pressed); + } + &:focus { + background-color: var(--s-color-button-tertiary-background-focused); + border-color: var(--s-color-button-tertiary-background-focused); } &:disabled, &:disabled:hover { color: var(--s-color-base-content-quaternary); From e27adead946ae01959aa3f2859076c659218f023 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 16:27:31 +0400 Subject: [PATCH 13/21] Add new enums for colors --- src/types/index.ts | 117 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 91 insertions(+), 26 deletions(-) diff --git a/src/types/index.ts b/src/types/index.ts index e2e3a93d..4c78a22f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -10,30 +10,95 @@ export enum Direction { } export enum Colors { - ThemeAccent = '--s-color-theme-accent', - ThemeAccentHover = '--s-color-theme-accent-hover', - ThemeAccentPressed = '--s-color-theme-accent-pressed', - ThemeAccentFocused = '--s-color-theme-accent-focused', - ThemeSecondaryHover = '--s-color-theme-secondary-hover', - BaseContentPrimary = '--s-color-base-content-primary', - BaseContentSecondary = '--s-color-base-content-secondary', - BaseContentTertiary = '--s-color-base-content-tertiary', - BaseContentQuaternary = '--s-color-base-content-quaternary', - BaseBackground = '--s-color-base-background', - BaseDarkBackground = '--s-color-base-dark-background', - BaseBorderPrimary = '--s-color-base-border-primary', - BaseBorderSecondary = '--s-color-base-border-secondary', - BaseBackgroundHover = '--s-color-base-background-hover', - BaseDisabled = '--s-color-base-disabled', - BaseOnDisabled = '--s-color-base-on-disabled', - BaseOnAccent = '--s-color-base-on-accent', - UtilityBody = '--s-color-utility-body', - UtilitySurface = '--s-color-utility-surface', - UtilityOverlay = '--s-color-utility-overlay', - StatusSuccess = '--s-color-status-success', - StatusWarning = '--s-color-status-warning', - StatusError = '--s-color-status-error', - StatusSuccessBackground = '--s-color-status-success-background', - StatusWarningBackground = '--s-color-status-warning-background', - StatusErrorBackground = '--s-color-status-error-background' + ThemeAccent = 'theme-accent', + ThemeAccentHover = 'theme-accent-hover', + ThemeAccentPressed = 'theme-accent-pressed', + ThemeAccentFocused = 'theme-accent-focused', + ThemeSecondary = 'theme-secondary', + ThemeSecondaryHover = 'theme-secondary-hover', + ThemeSecondaryPressed = 'theme-secondary-pressed', + ThemeSecondaryFocused = 'theme-secondary-focused', + BaseContentPrimary = 'base-content-primary', + BaseContentSecondary = 'base-content-secondary', + BaseContentTertiary = 'base-content-tertiary', + BaseContentQuaternary = 'base-content-quaternary', + BaseBackground = 'base-background', + BaseDarkBackground = 'base-dark-background', + BaseBorderPrimary = 'base-border-primary', + BaseBorderSecondary = 'base-border-secondary', + BaseBackgroundHover = 'base-background-hover', + BaseDisabled = 'base-disabled', + BaseOnDisabled = 'base-on-disabled', + BaseOnAccent = 'base-on-accent', + UtilityBody = 'utility-body', + UtilitySurface = 'utility-surface', + UtilityOverlay = 'utility-overlay', + StatusSuccess = 'status-success', + StatusWarning = 'status-warning', + StatusError = 'status-error', + StatusSuccessBackground = 'status-success-background', + StatusWarningBackground = 'status-warning-background', + StatusErrorBackground = 'status-error-background', + ButtonTertiaryColor = 'button-tertiary-color', + ButtonTertiaryColorActive = 'button-tertiary-color-active', + ButtonTertiaryBackground = 'button-tertiary-background', + ButtonTertiaryBackgroundHover = 'button-tertiary-background-hover', + ButtonTertiaryBackgroundPressed = 'button-tertiary-background-pressed', + ButtonTertiaryBackgroundFocused = 'button-tertiary-background-focused' +} + +export enum AccentColors { + ThemeAccent = Colors.ThemeAccent, + ThemeAccentHover = Colors.ThemeAccentHover, + ThemeAccentPressed = Colors.ThemeAccentPressed, + ThemeAccentFocused = Colors.ThemeAccentFocused +} + +export enum SecondaryColors { + ThemeSecondary = Colors.ThemeSecondary, + ThemeSecondaryHover = Colors.ThemeSecondaryHover, + ThemeSecondaryPressed = Colors.ThemeSecondaryPressed, + ThemeSecondaryFocused = Colors.ThemeSecondaryFocused +} + +export enum ContentColors { + BaseContentPrimary = Colors.BaseContentPrimary, + BaseContentSecondary = Colors.BaseContentSecondary, + BaseContentTertiary = Colors.BaseContentTertiary, + BaseContentQuaternary = Colors.BaseContentQuaternary +} + +export enum MiscColors { + BaseBackground = Colors.BaseBackground, + BaseDarkBackground = Colors.BaseDarkBackground, + BaseBorderPrimary = Colors.BaseBorderPrimary, + BaseBorderSecondary = Colors.BaseBorderSecondary, + BaseBackgroundHover = Colors.BaseBackgroundHover, + BaseDisabled = Colors.BaseDisabled, + BaseOnDisabled = Colors.BaseOnDisabled, + BaseOnAccent = Colors.BaseOnAccent +} + +export enum UtilityColors { + UtilityBody = Colors.UtilityBody, + UtilitySurface = Colors.UtilitySurface, + UtilityOverlay = Colors.UtilityOverlay +} + +export enum StatusColors { + StatusSuccess = Colors.StatusSuccess, + StatusWarning = Colors.StatusWarning, + StatusError = Colors.StatusError, + StatusSuccessBackground = Colors.StatusSuccessBackground, + StatusWarningBackground = Colors.StatusWarningBackground, + StatusErrorBackground = Colors.StatusErrorBackground +} + +export enum TertiaryButtonColors { + ButtonTertiaryColor = Colors.ButtonTertiaryColor, + ButtonTertiaryColorActive = Colors.ButtonTertiaryColorActive, + ButtonTertiaryBackground = Colors.ButtonTertiaryBackground, + ButtonTertiaryBackgroundHover = Colors.ButtonTertiaryBackgroundHover, + ButtonTertiaryBackgroundPressed = Colors.ButtonTertiaryBackgroundPressed, + ButtonTertiaryBackgroundFocused = Colors.ButtonTertiaryBackgroundFocused } From b1edb335cb6e7e851034c6eb2162888356fcc810 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 16:28:00 +0400 Subject: [PATCH 14/21] Modify colors customization story --- src/stories/Intro/Customization.stories.ts | 43 ++++++++++++++++------ 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts index 728ad41c..43df1693 100644 --- a/src/stories/Intro/Customization.stories.ts +++ b/src/stories/Intro/Customization.stories.ts @@ -1,6 +1,6 @@ import { withKnobs } from '@storybook/addon-knobs' -import { Colors } from '../../types' +import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors } from '../../types' import { SRow, SButton, SInput, SCol, SDivider } from '../../components' import { differentTypeButtonsData } from '../SButton.stories' @@ -10,10 +10,20 @@ export default { excludeStories: /.*Data$/ } -export const colorsData = Object.values(Colors).map(color => ({ - label: color, - value: getComputedStyle(document.documentElement).getPropertyValue(color) -})) +const getColorsData = (colors) => Object.values(colors).map(color => { + const value = getComputedStyle(document.documentElement).getPropertyValue(`--s-color-${color}`) + const isRgb = value.includes('rgb') + return { label: color, value, isRgb } +}) +export const colorsSectionsData = [ + { title: 'Theme / Accent', colors: getColorsData(AccentColors) }, + { title: 'Theme / Secondary', colors: getColorsData(SecondaryColors) }, + { title: 'Base / Content', colors: getColorsData(ContentColors) }, + { title: 'Base / Misc.', colors: getColorsData(MiscColors) }, + { title: 'Utility', colors: getColorsData(UtilityColors) }, + { title: 'Status', colors: getColorsData(StatusColors) }, + { title: 'Button / Tertiary', colors: getColorsData(TertiaryButtonColors) } +] export const themeInputsData = [ 'text', 'textarea', @@ -25,13 +35,22 @@ export const configurable = () => ({ - {{ color.label }} - + {{ section.title }} +
+ {{ color.label }} + +
@@ -59,7 +78,7 @@ export const configurable = () => ({

You can also check another components, these colors are applied to the whole library

`, data: () => ({ - colors: colorsData, + sections: colorsSectionsData, buttons: differentTypeButtonsData, inputs: themeInputsData }), From bf5af62da6e43395b252921bc96232e898138262 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Wed, 28 Oct 2020 17:12:30 +0400 Subject: [PATCH 15/21] Fix form component --- src/styles/form.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/styles/form.scss b/src/styles/form.scss index 5acc7677..eeea8fe7 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -1,7 +1,7 @@ @import "./variables"; .el-form-item { - margin-bottom: 26px; + margin-bottom: 12px; &__content { line-height: 20px; > button { @@ -12,9 +12,10 @@ color: var(--s-color-base-content-primary); } &.is-error { - margin-bottom: 6px; + margin-bottom: 0; > .el-form-item__content { > .el-form-item__error { + margin-bottom: 6px; position: relative; padding-top: 8px; padding-left: 30px; @@ -23,7 +24,7 @@ content: ''; } } - > [class^="s-input"]:not(.disabled) { + > [class^="s-input"]:not(.s-disabled) { .s-placeholder { color: var(--s-color-status-error); background-color: var(--s-color-status-error-background); @@ -45,7 +46,7 @@ border-color: var(--s-color-status-error); } } - &.focused { + &.s-focused { .s-placeholder, .el-input > input, .el-textarea > textarea { @@ -60,7 +61,7 @@ } .s-icon-error { position: absolute; - bottom: 0; + bottom: 6px; left: 4px; font-size: 16px; color: var(--s-color-status-error); From bca8867074a944b1caa43254fef447ecb687ab08 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 29 Oct 2020 10:35:43 +0400 Subject: [PATCH 16/21] Fix shadow for rounded tabs --- src/styles/tabs.scss | 8 +++----- src/styles/variables.scss | 8 ++++++++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 3f2aca1c..7df25f8f 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -59,9 +59,6 @@ background-color: var(--s-color-base-background); border-radius: 8px; height: 32px; - padding-top: 2px; - padding-left: 2px; - padding-right: 2px; &::after, .el-tabs__active-bar { height: 0; } @@ -75,12 +72,13 @@ &.is-active { color: var(--s-color-base-content-primary); background-color: var(--s-color-base-on-accent); - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04); + box-shadow: $s-shadow-surface; border-radius: 8px; + margin: 2px; } &:focus.is-focus { // TODO: make it more focusable - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04); + box-shadow: $s-shadow-surface; border-radius: 8px; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 108271e3..0d15373f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -33,6 +33,14 @@ $s-color-status-error: #FF0000 !default; $s-color-status-success-background: #CCEDCC !default; $s-color-status-warning-background: #FFE3B8 !default; $s-color-status-error-background: #FFF9FA !default; +// Shadow +// TODO: use it and discuss colors of these shadows +$s-shadow-surface: 0px 1px 4px rgba(13, 2, 72, 0.35) !default; +$s-shadow-tooltip: 0px 1px 4px rgba(13, 2, 72, 0.35) !default; +$s-shadow-tab: 0px 1px 1px rgba(0, 0, 0, 0.1) !default; +$s-shadow-dropdown: 0px 4px 8px rgba(19, 19, 19, 0.15) !default; +$s-shadow-mobile-tap-bar: 0px -4px 8px rgba(19, 19, 19, 0.15) !default; +$s-shadow-mobile-side-menu: -4px 4px 8px rgba(19, 19, 19, 0.15) !default; // Size $s-size-big: 56px !default; From 811de0705f26e35fe92012c5d9f5847d5e8bcc5b Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 29 Oct 2020 10:49:06 +0400 Subject: [PATCH 17/21] Rename font variables --- src/styles/collapse.scss | 3 +-- src/styles/common.scss | 14 +++++++------- src/styles/datepicker.scss | 2 +- src/styles/input.scss | 2 +- src/styles/json-input.scss | 8 ++++---- src/styles/scroll-sections.scss | 2 +- src/styles/select.scss | 2 +- src/styles/variables.scss | 5 +++-- 8 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss index 91b56023..8a24398c 100644 --- a/src/styles/collapse.scss +++ b/src/styles/collapse.scss @@ -1,5 +1,4 @@ @import "./variables"; -@import "./icons"; .el-collapse { border-top-color: var(--s-color-base-border-secondary); @@ -25,7 +24,7 @@ border-bottom-color: transparent; } .el-icon-arrow-right { - font-family: 'soramitsu-icons' !important; + font-family: $s-font-family-icons; @extend .s-icon-chevron-bottom; font-size: 16px; padding: 8px; diff --git a/src/styles/common.scss b/src/styles/common.scss index d76fc659..5909f007 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -2,7 +2,7 @@ [class^="el-"]:not(i):not([class*='el-icon']), [class*="el-"]:not(i):not([class*='el-icon']) { - font-family: $font-family-default; + font-family: $s-font-family-default; } html { @@ -16,37 +16,37 @@ html { /* Typography */ h1 { - font-family: $font-family-default; + font-family: $s-font-family-default; font-weight: normal; font-size: 36px; } h2 { - font-family: $font-family-default; + font-family: $s-font-family-default; font-weight: normal; font-size: 30px; } h3 { - font-family: $font-family-default; + font-family: $s-font-family-default; font-weight: normal; font-size: 24px; } h4 { - font-family: $font-family-default; + font-family: $s-font-family-default; font-weight: normal; font-size: 18px; } h5 { - font-family: $font-family-default; + font-family: $s-font-family-default; font-weight: bold; font-size: 16px; } h6 { - font-family: $font-family-default; + font-family: $s-font-family-default; font-weight: bold; font-size: 14px; } diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss index 9815a34b..76705c12 100644 --- a/src/styles/datepicker.scss +++ b/src/styles/datepicker.scss @@ -1,7 +1,7 @@ @import "./variables"; .s-date-picker { - font-family: $font-family-default; + font-family: $s-font-family-default; width: 100%; position: relative; .el-date-editor { diff --git a/src/styles/input.scss b/src/styles/input.scss index 6a5e2797..85ff393a 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss @@ -1,7 +1,7 @@ @import "./variables"; .s-input { - font-family: $font-family-default; + font-family: $s-font-family-default; width: 100%; min-height: $s-size-big; position: relative; diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss index 81327704..2229f1c9 100644 --- a/src/styles/json-input.scss +++ b/src/styles/json-input.scss @@ -35,10 +35,10 @@ $color-ide-boolean: #0000FF; .jsoneditor { border: none !important; - font-family: $font-family-mono; + font-family: $s-font-family-mono; .ace-jsoneditor { *, textarea.jsoneditor-text * { - font-family: $font-family-mono; + font-family: $s-font-family-mono; } .ace_fold { border: none; @@ -99,10 +99,10 @@ $color-ide-boolean: #0000FF; } .ace_editor .ace_content, .ace_gutter .ace_gutter-cell { - font-family: $font-family-mono; + font-family: $s-font-family-mono; } .ace_tooltip { - font-family: $font-family-default; + font-family: $s-font-family-default; background: var(--s-color-base-content-primary); border-color: var(--s-color-base-content-primary); color: var(--s-color-base-on-accent); diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss index 4f23f482..8cb89fdf 100644 --- a/src/styles/scroll-sections.scss +++ b/src/styles/scroll-sections.scss @@ -1,7 +1,7 @@ @import "./variables"; .s-scroll-sections { - font-family: $font-family-default; + font-family: $s-font-family-default; font-size: 14px; } .s-scroll-menu { diff --git a/src/styles/select.scss b/src/styles/select.scss index b256beb2..7af02217 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss @@ -2,7 +2,7 @@ @import "./icons"; .s-select { - font-family: $font-family-default; + font-family: $s-font-family-default; width: 100%; position: relative; .el-select { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 0d15373f..f9b61c17 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -50,8 +50,9 @@ $s-size-mini: 24px !default; $s-border-radius-default: 4px !default; // Fonts -$font-family-default: 'Sora', sans-serif !important; -$font-family-mono: 'JetBrainsMono', monospace !important; +$s-font-family-default: 'Sora', sans-serif !important; +$s-font-family-mono: 'JetBrainsMono', monospace !important; +$s-font-family-icons: 'soramitsu-icons' !important; // Font sizes $s-font-size-big: 14px !default; $s-font-size-small: 12px !default; From da91a656626402ec0ca5dc0fe3a00dcb6bbc955e Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 29 Oct 2020 10:49:12 +0400 Subject: [PATCH 18/21] Fix table expanded icons --- src/styles/table.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/table.scss b/src/styles/table.scss index 427c8d81..f4a3319c 100644 --- a/src/styles/table.scss +++ b/src/styles/table.scss @@ -109,3 +109,12 @@ background-color: var(--s-color-theme-accent); border-color: var(--s-color-theme-accent); } +.el-table__expand-icon { + > .el-icon.el-icon-arrow-right { + font-family: $s-font-family-icons; + @extend .s-icon-chevron-bottom; + } + &--expanded { + transform: rotate(180deg); + } +} From 6c01e05ff7c6a773cca24f38a37ae8611af6f9ba Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 29 Oct 2020 10:50:59 +0400 Subject: [PATCH 19/21] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d1a1fec0..aa0b80b0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "0.5.1", + "version": "0.5.2", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/" From e907949e97a692ec37dffdc9197c7ecfb0025570 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 29 Oct 2020 12:28:44 +0400 Subject: [PATCH 20/21] Change default values for buttons --- src/components/Button/SButton.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 10b0a5e9..14cb1635 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -37,9 +37,9 @@ export default class SButton extends Vue { /** * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`. * - * By default it's set to `"primary"` + * By default it's set to `"secondary"` */ - @Prop({ default: ButtonTypes.PRIMARY, type: String }) readonly type!: string + @Prop({ default: ButtonTypes.SECONDARY, type: String }) readonly type!: string /** * Rounded property for `type="action"` buttons. * @@ -49,9 +49,9 @@ export default class SButton extends Vue { /** * Size of button. Possible values: `"big"`, `"medium"`, `"small"`. * - * By default it's set to `"big"` + * By default it's set to `"medium"` */ - @Prop({ default: ButtonSize.BIG, type: String }) readonly size!: string + @Prop({ default: ButtonSize.MEDIUM, type: String }) readonly size!: string /** * Icon name from icon collection of this library */ From 664023e46c4d29f3f6e523d0919377e9b752efe8 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Thu, 29 Oct 2020 14:43:29 +0400 Subject: [PATCH 21/21] Fix styles --- src/styles/button.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/button.scss b/src/styles/button.scss index 33ca99ae..adf7d741 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss @@ -1,11 +1,11 @@ @import "./variables"; -$s-color-button-tertiary-color: var(--s-color-base-content-primary); -$s-color-button-tertiary-color-active: var(--s-color-theme-accent); -$s-color-button-tertiary-background: var(--s-color-base-background); -$s-color-button-tertiary-background-hover: var(--s-color-base-background); -$s-color-button-tertiary-background-pressed: var(--s-color-base-background); -$s-color-button-tertiary-background-focused: var(--s-color-base-background); +$s-color-button-tertiary-color: var(--s-color-base-content-primary) !default; +$s-color-button-tertiary-color-active: var(--s-color-theme-accent) !default; +$s-color-button-tertiary-background: var(--s-color-base-background) !default; +$s-color-button-tertiary-background-hover: var(--s-color-base-background) !default; +$s-color-button-tertiary-background-pressed: var(--s-color-base-background) !default; +$s-color-button-tertiary-background-focused: var(--s-color-base-background) !default; :root { --s-color-button-tertiary-color: #{$s-color-button-tertiary-color};