Release 1.0.6

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({

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};
+}

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'

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/"

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)
     }
   }
 })

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";

src/styles/tabs.scss

@@ -75,23 +75,34 @@
   &.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);
       .el-tabs__item {
         &: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);
         }
       }
     }