diff --git a/build/rollup.config.js b/build/rollup.config.js index 78630ecb..94c6f948 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -57,8 +57,9 @@ export default { .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: 'src/styles/neumorphism/*', dest: 'lib/styles/neumorphism' } + { src: 'src/styles/neumorphism/*', dest: 'lib/styles/neumorphism' }, + { src: 'src/styles/theme/*', dest: 'lib/styles/theme' }, + { src: 'node_modules/element-ui/packages/theme-chalk/src/*', dest: 'lib/styles/element-ui' } ] }), multiInput({ diff --git a/config/storybook/neu-theme-variables.scss b/config/storybook/neu-theme-variables.scss new file mode 100644 index 00000000..b06470e3 --- /dev/null +++ b/config/storybook/neu-theme-variables.scss @@ -0,0 +1,77 @@ +// Brand +$s-brand-pinky: #ED145B; // Some texts, brand stuff +$s-brand-blue: #0D0248; // Brand stuff +// Primary theme colors +$s-color-theme-accent: #F8087B; // Primary button, links +$s-color-theme-accent-hover: #F754A3; // Primary button hover +$s-color-theme-accent-pressed: #E44592; // Primary button pressed +$s-color-theme-accent-focused: #F24197; // Primary button focused +// Secondary theme colors +$s-color-theme-secondary: #44E5B2; +$s-color-theme-secondary-hover: #24DAA0; +$s-color-theme-secondary-pressed: #24DAA0; +$s-color-theme-secondary-focused: #24DAA0; +// Base content colors +$s-color-base-content-primary: #2A171F; +$s-color-base-content-secondary: #A19A9D; +$s-color-base-content-tertiary: #D5CDD0; +$s-color-base-content-quaternary: #75787b; +// Base misc colors +$s-color-base-background: #FAF4F8; +$s-color-base-border-primary: #F7F3F4; +$s-color-base-border-secondary: #EDE4E7; +$s-color-base-background-hover: #F7F3F4; +$s-color-base-disabled: #FDF7FB; +$s-color-base-on-disabled: #A19A9D; +$s-color-base-on-accent: #FFFFFF; +// Utility colors +$s-color-utility-body: #F7F3F4; +$s-color-utility-surface: #FDF7FB; +$s-color-utility-overlay: rgba(42, 23, 31, 0.1); +// Status colors +$s-color-status-success: #34AD87; +$s-color-status-warning: #479AEF; +$s-color-status-error: #F754A3; +$s-color-status-success-background: #B9EBDB; +$s-color-status-warning-background: #C6E2FF; +$s-color-status-error-background: #FFD8EB; +// Shadows +$s-shadow-surface: 1px 1px 5px var(--s-shadow-color-dark), inset 1px 1px 1px var(--s-shadow-color-dark); // container +// Size +$s-size-big: 46px; +$s-size-medium: 42px; +$s-size-small: 32px; +$s-size-mini: 24px; + +[design-system="neumorphic"][design-system-theme="light"] { + --s-color-theme-accent: #{$s-color-theme-accent}; + --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}; + --s-color-base-content-quaternary: #{$s-color-base-content-quaternary}; + --s-color-base-background: #{$s-color-base-background}; + --s-color-base-border-primary: #{$s-color-base-border-primary}; + --s-color-base-border-secondary: #{$s-color-base-border-secondary}; + --s-color-base-background-hover: #{$s-color-base-background-hover}; + --s-color-base-disabled: #{$s-color-base-disabled}; + --s-color-base-on-disabled: #{$s-color-base-on-disabled}; + --s-color-base-on-accent: #{$s-color-base-on-accent}; + --s-color-utility-body: #{$s-color-utility-body}; + --s-color-utility-surface: #{$s-color-utility-surface}; + --s-color-utility-overlay: #{$s-color-utility-overlay}; + --s-color-status-success: #{$s-color-status-success}; + --s-color-status-warning: #{$s-color-status-warning}; + --s-color-status-error: #{$s-color-status-error}; + --s-color-status-success-background: #{$s-color-status-success-background}; + --s-color-status-warning-background: #{$s-color-status-warning-background}; + --s-color-status-error-background: #{$s-color-status-error-background}; + // Shadows + --s-shadow-surface: #{$s-shadow-surface}; +} diff --git a/config/storybook/preview.js b/config/storybook/preview.js index ff3d2695..472e95de 100644 --- a/config/storybook/preview.js +++ b/config/storybook/preview.js @@ -6,6 +6,7 @@ import ElColorPicker from 'element-ui/lib/color-picker' import '../../src/styles/index.scss' import './index.scss' +import './neu-theme-variables.scss' import mainStore from '../../src/store' import { setTheme } from '../../src/utils' import { ElementUIPlugin } from '../../src/plugins' diff --git a/package.json b/package.json index 6966238c..1ccdc326 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.5", + "version": "1.0.6", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/stories/Intro/Theming.stories.ts b/src/stories/Intro/Theming.stories.ts index e08b55b9..d5ea5e57 100644 --- a/src/stories/Intro/Theming.stories.ts +++ b/src/stories/Intro/Theming.stories.ts @@ -36,6 +36,7 @@ export const configurable = () => ({ handleDesignSystemChange: (designSystem: DesignSystem) => { const newDesignSystem = designSystem === DesignSystem.DEFAULT ? DesignSystem.NEUMORPHIC : DesignSystem.DEFAULT setDesignSystem(newDesignSystem) + document.documentElement.setAttribute('design-system', newDesignSystem) } } }) diff --git a/src/styles/index.scss b/src/styles/index.scss index fd96b31e..58519129 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,3 @@ -// @import "./neumorphism/theme-variables"; // uncomment to preview components with neu variables @import "./variables"; @import "./element-variables"; @import "./fonts"; diff --git a/src/styles/neumorphism/theme-variables.scss b/src/styles/neumorphism/theme-variables.scss deleted file mode 100644 index 541f9943..00000000 --- a/src/styles/neumorphism/theme-variables.scss +++ /dev/null @@ -1,44 +0,0 @@ -// Brand -$s-brand-pinky: #ED145B; // Some texts, brand stuff -$s-brand-blue: #0D0248; // Brand stuff -// Primary theme colors -$s-color-theme-accent: #F8087B; // Primary button, links -$s-color-theme-accent-hover: #F754A3; // Primary button hover -$s-color-theme-accent-pressed: #E44592; // Primary button pressed -$s-color-theme-accent-focused: #F24197; // Primary button focused -// Secondary theme colors -$s-color-theme-secondary: #44E5B2; -$s-color-theme-secondary-hover: #24DAA0; -$s-color-theme-secondary-pressed: #24DAA0; -$s-color-theme-secondary-focused: #24DAA0; -// Base content colors -$s-color-base-content-primary: #2A171F; -$s-color-base-content-secondary: #A19A9D; -$s-color-base-content-tertiary: #D5CDD0; -$s-color-base-content-quaternary: #75787b; -// Base misc colors -$s-color-base-background: #FAF4F8; -$s-color-base-border-primary: #F7F3F4; -$s-color-base-border-secondary: #EDE4E7; -$s-color-base-background-hover: #F7F3F4; -$s-color-base-disabled: #FDF7FB; -$s-color-base-on-disabled: #A19A9D; -$s-color-base-on-accent: #FFFFFF; -// Utility colors -$s-color-utility-body: #F7F3F4; -$s-color-utility-surface: #FDF7FB; -$s-color-utility-overlay: rgba(42, 23, 31, 0.1); -// Status colors -$s-color-status-success: #34AD87; -$s-color-status-warning: #479AEF; -$s-color-status-error: #F754A3; -$s-color-status-success-background: #B9EBDB; -$s-color-status-warning-background: #C6E2FF; -$s-color-status-error-background: #FFD8EB; -// Shadows -$s-shadow-surface: 1px 1px 5px var(--s-shadow-color-dark), inset 1px 1px 1px var(--s-shadow-color-dark); // container -// Size -$s-size-big: 46px; -$s-size-medium: 42px; -$s-size-small: 32px; -$s-size-mini: 24px; diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index d0c357dd..1f0c209a 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -75,16 +75,22 @@ &.el-tabs--card { > .el-tabs__header { border-bottom-color: var(--s-color-base-background-hover); - .el-tabs__nav { - border-color: var(--s-color-base-background-hover); - } - .el-tabs__item { - border-left-color: var(--s-color-base-background-hover); + .el-tabs { + &__item.is-active { + border-bottom-color: var(--s-color-utility-body); + } + &__nav { + border-color: var(--s-color-base-background-hover); + } + &__item { + border-left-color: var(--s-color-base-background-hover); + } } } } &.el-tabs--border-card { border-color: var(--s-color-base-border-primary); + background-color: inherit; > .el-tabs__header { background-color: var(--s-color-base-background); border-bottom-color: var(--s-color-base-border-primary); @@ -92,6 +98,11 @@ &:hover, &.is-active { color: var(--s-color-theme-accent); + background-color: inherit; + } + &.is-active { + border-right-color: var(--s-color-base-border-primary); + border-left-color: var(--s-color-base-border-primary); } } }