From dfcfebed9c13d45c7a99dd53efd197e2a02b963e Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 3 Oct 2020 11:32:25 +0400
Subject: [PATCH 01/11] Rename css classes to correct format

---
 config/storybook/preview.js                       |  2 +-
 src/components/Menu/SMenuItem.vue                 |  2 +-
 src/components/ScrollSections/SScrollSections.vue |  2 +-
 src/stories/DatePicker.stories.ts                 |  2 +-
 src/stories/Radio/SRadio.stories.ts               |  4 ++--
 src/stories/SButton.stories.ts                    | 10 +++++-----
 src/stories/SCard.stories.ts                      |  4 ++--
 src/stories/SCheckbox.stories.ts                  |  2 +-
 src/stories/SDialog.stories.ts                    |  2 +-
 src/stories/SDivider.stories.ts                   |  2 +-
 src/stories/SIcon.stories.ts                      |  2 +-
 src/stories/SInput.stories.ts                     |  6 +++---
 src/stories/SJsonInput.stories.ts                 |  2 +-
 src/stories/SPagination.stories.ts                |  8 ++++----
 src/stories/STooltip.stories.ts                   |  2 +-
 src/styles/common.scss                            |  6 +++---
 src/styles/element-variables.scss                 |  2 +-
 src/styles/icons.scss                             |  2 +-
 18 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/config/storybook/preview.js b/config/storybook/preview.js
index fdabd181..bea3f949 100644
--- a/config/storybook/preview.js
+++ b/config/storybook/preview.js
@@ -20,7 +20,7 @@ addParameters({
 
 addDecorator(withA11y)
 addDecorator(() => ({
-  template: `<div class="flex" style="padding: 20px;">
+  template: `<div class="s-flex" style="padding: 20px;">
                <story/>
              </div>`
 }))
diff --git a/src/components/Menu/SMenuItem.vue b/src/components/Menu/SMenuItem.vue
index 9a51857e..d7c01e71 100644
--- a/src/components/Menu/SMenuItem.vue
+++ b/src/components/Menu/SMenuItem.vue
@@ -1,6 +1,6 @@
 <template>
   <el-menu-item
-    class="flex"
+    class="s-flex"
     :index="index"
     :route="route"
     :disabled="disabled"
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index 88cba035..1e34a645 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="s-scroll-sections flex">
+  <div class="s-scroll-sections s-flex">
     <nav class="s-scroll-menu" v-if="menuItems.length > 0" :style="computedFlex.menu">
       <ul :style="computedStyles">
         <li class="s-scroll-item" v-for="item in menuItems" :key="item.section">
diff --git a/src/stories/DatePicker.stories.ts b/src/stories/DatePicker.stories.ts
index f59c5b28..aaedea14 100644
--- a/src/stories/DatePicker.stories.ts
+++ b/src/stories/DatePicker.stories.ts
@@ -12,7 +12,7 @@ export default {
 
 export const configurable = () => ({
   components: { SDatePicker },
-  template: `<div class="flex" style="flex: 1; flex-direction: column;">
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
                <s-date-picker
                  v-model="vModelValue"
                  :unlink-panels="unlinkPanels"
diff --git a/src/stories/Radio/SRadio.stories.ts b/src/stories/Radio/SRadio.stories.ts
index 26d2b470..880fd528 100644
--- a/src/stories/Radio/SRadio.stories.ts
+++ b/src/stories/Radio/SRadio.stories.ts
@@ -54,7 +54,7 @@ export const configurable = () => ({
 
 export const disabled = () => ({
   components: { SRadio, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-radio
                  v-for="item in items"
                  :key="item.label"
@@ -73,7 +73,7 @@ export const disabled = () => ({
 
 export const withBorders = () => ({
   components: { SRadio, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-radio
                  v-for="item in items"
                  :key="item.label"
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index e0ca996b..e82316f7 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -66,7 +66,7 @@ export const differentTypesData = Object.values(ButtonTypes).map(type => {
 })
 export const withDifferentTypes = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.type"
@@ -88,7 +88,7 @@ export const differentSizeData = Object.values(ButtonSize).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const withDifferentSize = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.size"
@@ -106,7 +106,7 @@ export const withDifferentSize = () => ({
 
 export const disabled = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.type"
@@ -127,7 +127,7 @@ export const disabled = () => ({
 
 export const loading = () => ({
   components: { SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button
                  v-for="item in items"
                  :key="item.type"
@@ -179,7 +179,7 @@ export const withIcon = () => ({
 
 export const buttonGroup = () => ({
   components: { SButton, SButtonGroup, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-button-group>
                  <s-button type="primary">Append</s-button>
                  <s-button type="delete">Remove</s-button>
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 3bdff199..5619a475 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -11,10 +11,10 @@ export default {
 
 export const configurable = () => ({
   components: { SCard, SRow, SDropdown, SDropdownItem },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-card style="width: 80%;" :shadow="shadow" :clickable="clickable" @click="handleClick">
                  <template slot="header">
-                   <div class="flex" style="justify-content: space-between; padding-right: 20px;">
+                   <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
                      <s-dropdown type="ellipsis">
                        Menu
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 069209e7..24f4c0ec 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -12,7 +12,7 @@ export default {
 
 export const configurable = () => ({
   components: { SCheckbox },
-  template: `<div class="flex" style="flex: 1; flex-direction: column;">
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
                <s-checkbox
                  v-model="vModelValue"
                  :disabled="disabled"
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index de33d4b5..fbe98861 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -11,7 +11,7 @@ export default {
 export const configurable = () => ({
   components: { SDialog, SRow, SButton },
   template: `<s-row
-               class="flex"
+               class="s-flex"
                style="flex: 1; justify-content: space-between; align-items: center; height: 400px;"
              >
                <s-button size="medium" @click="visible = true">Open Dialog</s-button>
diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts
index 1c43f88a..c494ced5 100644
--- a/src/stories/SDivider.stories.ts
+++ b/src/stories/SDivider.stories.ts
@@ -11,7 +11,7 @@ export default {
 
 export const configurable = () => ({
   components: { SRow, SDivider },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <span>First text paragraph</span>
                <s-divider
                  :style="direction === 'vertical' ? { height: '56px' } : {}"
diff --git a/src/stories/SIcon.stories.ts b/src/stories/SIcon.stories.ts
index c9f13cc1..70148a6c 100644
--- a/src/stories/SIcon.stories.ts
+++ b/src/stories/SIcon.stories.ts
@@ -34,7 +34,7 @@ export const allIcons = () => ({
                    :span="3"
                    v-for="icon in icons"
                    :key="icon"
-                   class="flex"
+                   class="s-flex"
                    style="flex-direction: column; padding-bottom: 20px;"
                  >
                    <s-icon :name="icon" :size="18" />
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index e484d588..2ec7cda8 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -126,7 +126,7 @@ export const focused = () => ({
 
 export const password = () => ({
   components: { SInput, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-input
                  v-model="input"
                  placeholder="Password"
@@ -140,7 +140,7 @@ export const password = () => ({
 
 export const withTextLimit = () => ({
   components: { SInput, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-input
                  v-model="input"
                  placeholder="Limited text"
@@ -155,7 +155,7 @@ export const withTextLimit = () => ({
 
 export const textFileInput = () => ({
   components: { SInput },
-  template: `<div class="flex" style="flex: 1; flex-direction: column;">
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column;">
                <s-input
                  v-model="vModelValue"
                  type="text-file"
diff --git a/src/stories/SJsonInput.stories.ts b/src/stories/SJsonInput.stories.ts
index 2910d1d9..125c63d7 100644
--- a/src/stories/SJsonInput.stories.ts
+++ b/src/stories/SJsonInput.stories.ts
@@ -23,7 +23,7 @@ export const jsonData = {
 }
 export const configurable = () => ({
   components: { SJsonInput, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-json-input
                  v-model="json"
                  :height="height"
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index 95b908b4..a500f55b 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -10,7 +10,7 @@ export default {
 
 export const configurable = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination
                  :total="total"
                  :layout="layout"
@@ -59,21 +59,21 @@ export const configurable = () => ({
 
 export const small = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination :total="400" small></s-pagination>
              </s-row>`
 })
 
 export const withBackground = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination :total="400" background></s-pagination>
              </s-row>`
 })
 
 export const disabled = () => ({
   components: { SRow, SPagination },
-  template: `<s-row class="flex" style="flex: 1; flex-direction: column;">
+  template: `<s-row class="s-flex" style="flex: 1; flex-direction: column;">
                <s-pagination :total="400" disabled></s-pagination>
                <s-pagination :total="400" small disabled></s-pagination>
                <s-pagination :total="400" background disabled></s-pagination>
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index 686d578d..9f051909 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -12,7 +12,7 @@ export default {
 
 export const configurable = () => ({
   components: { STooltip, SButton, SRow },
-  template: `<s-row class="flex" style="flex: 1; justify-content: space-between; align-items: center;">
+  template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
                <s-tooltip
                  :theme="theme"
                  v-model="model"
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 48a715da..cd6fca8a 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import "./variables";
 
 [class^="el-"]:not(i):not([class*='el-icon']),
 [class*="el-"]:not(i):not([class*='el-icon']) {
@@ -14,11 +14,11 @@ html {
   margin: 0;
 }
 
-.flex {
+.s-flex {
   display: flex;
 }
 
-.bold {
+.s-bold {
   font-weight: bold;
 }
 
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index ada8c48f..e1da6253 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import "./variables";
 
 $--color-primary: $s-color-main-brand;
 $--color-danger: $s-color-error;
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 0bcd5135..0a8993c7 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import "./variables";
 
 [class^="s-icon-"], [class*=" s-icon-"] {
   font-family: 'soramitsu-icons' !important;

From ebb796783dba063638004041eb6244e895d14393 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 3 Oct 2020 12:27:19 +0400
Subject: [PATCH 02/11] Fix theming issues

---
 src/components/Breadcrumb/SBreadcrumb.vue     |   8 -
 src/components/Breadcrumb/SBreadcrumbItem.vue |  14 --
 src/components/Button/SButton.vue             | 149 -----------
 src/components/Card/SCard.vue                 |  24 --
 src/components/Checkbox/SCheckbox.vue         |  90 -------
 src/components/Collapse/SCollapse.vue         |   9 -
 src/components/Collapse/SCollapseItem.vue     |  46 ----
 src/components/DatePicker/SDatePicker.vue     | 234 ------------------
 src/components/Dialog/SDialog.vue             |  16 --
 src/components/Divider/SDivider.vue           |  11 -
 src/components/Dropdown/SDropdown.vue         |  40 ---
 src/components/Dropdown/SDropdownItem.vue     |  11 -
 src/components/Form/SFormItem.vue             |  69 ------
 src/components/Input/SInput.vue               | 145 -----------
 src/components/Input/SJsonInput.vue           | 116 ---------
 src/components/Pagination/SPagination.vue     |  99 --------
 src/components/Radio/SRadio.vue               |  89 -------
 .../ScrollSections/SScrollSectionItem.vue     |  20 --
 .../ScrollSections/SScrollSections.vue        |  49 ----
 src/components/Select/SOptionGroup.vue        |  11 -
 src/components/Select/SSelect.vue             | 217 ----------------
 src/components/Tab/STabs.vue                  |  83 -------
 src/components/Table/STable.vue               | 105 --------
 src/components/Table/STableColumn.vue         |   4 -
 src/components/Tooltip/STooltip.vue           |  14 --
 src/components/index.ts                       |   1 +
 src/styles/breadcrumbs.scss                   |  16 ++
 src/styles/button.scss                        | 140 +++++++++++
 src/styles/card.scss                          |  21 ++
 src/styles/checkbox.scss                      |  87 +++++++
 src/styles/collapse.scss                      |  47 ++++
 src/styles/datepicker.scss                    | 232 +++++++++++++++++
 src/styles/dialog.scss                        |  13 +
 src/styles/divider.scss                       |   6 +
 src/styles/dropdown.scss                      |  43 ++++
 src/styles/fonts.scss                         |  37 +++
 src/styles/form.scss                          |  66 +++++
 src/styles/index.scss                         |  23 ++
 src/styles/index.ts                           |   5 +-
 src/styles/input.scss                         | 142 +++++++++++
 src/styles/json-input.scss                    | 113 +++++++++
 src/styles/pagination.scss                    |  96 +++++++
 src/styles/radio.scss                         |  86 +++++++
 src/styles/scroll-sections.scss               |  63 +++++
 src/styles/select.scss                        | 220 ++++++++++++++++
 src/styles/table.scss                         | 102 ++++++++
 src/styles/tabs.scss                          |  81 ++++++
 src/styles/tooltip.scss                       |  11 +
 src/styles/variables.scss                     |  39 ---
 49 files changed, 1647 insertions(+), 1716 deletions(-)
 create mode 100644 src/styles/breadcrumbs.scss
 create mode 100644 src/styles/button.scss
 create mode 100644 src/styles/card.scss
 create mode 100644 src/styles/checkbox.scss
 create mode 100644 src/styles/collapse.scss
 create mode 100644 src/styles/datepicker.scss
 create mode 100644 src/styles/dialog.scss
 create mode 100644 src/styles/divider.scss
 create mode 100644 src/styles/dropdown.scss
 create mode 100644 src/styles/fonts.scss
 create mode 100644 src/styles/form.scss
 create mode 100644 src/styles/index.scss
 create mode 100644 src/styles/input.scss
 create mode 100644 src/styles/json-input.scss
 create mode 100644 src/styles/pagination.scss
 create mode 100644 src/styles/radio.scss
 create mode 100644 src/styles/scroll-sections.scss
 create mode 100644 src/styles/select.scss
 create mode 100644 src/styles/table.scss
 create mode 100644 src/styles/tabs.scss
 create mode 100644 src/styles/tooltip.scss

diff --git a/src/components/Breadcrumb/SBreadcrumb.vue b/src/components/Breadcrumb/SBreadcrumb.vue
index 58b3b2bb..ae2344e1 100644
--- a/src/components/Breadcrumb/SBreadcrumb.vue
+++ b/src/components/Breadcrumb/SBreadcrumb.vue
@@ -15,11 +15,3 @@ export default class SBreadcrumb extends Vue {
   @Prop({ default: '/', type: String }) readonly separator!: string
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__separator {
-  color: $s-color-neutral-secondary;
-  font-weight: normal;
-}
-</style>
diff --git a/src/components/Breadcrumb/SBreadcrumbItem.vue b/src/components/Breadcrumb/SBreadcrumbItem.vue
index 0e324a7d..706572d3 100644
--- a/src/components/Breadcrumb/SBreadcrumbItem.vue
+++ b/src/components/Breadcrumb/SBreadcrumbItem.vue
@@ -24,17 +24,3 @@ export default class SBreadcrumbItem extends Vue {
   @Prop({ default: false, type: Boolean }) readonly replace!: boolean
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.el-breadcrumb__inner {
-  color: $s-color-neutral-secondary;
-  &.is-link {
-    color: $s-color-neutral-secondary;
-    font-weight: normal;
-  }
-}
-.el-breadcrumb__item:last-child {
-  pointer-events: none;
-}
-</style>
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index c686eccd..10b0a5e9 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -182,152 +182,3 @@ export default class SButton extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-loading {
-  padding: 12px 17.5px;
-  i {
-    position: absolute;
-    left: var(--s-button-loading-left);
-  }
-  &.s-small {
-    padding: 9px 15px;
-    i {
-      left: calc(var(--s-button-loading-left) + 2px);
-    }
-  }
-  > :not(i) {
-    color: transparent;
-  }
-}
-
-.s-primary {
-  &:hover, &:active, &:focus {
-    background-color: $s-color-main-hover;
-    border-color: $s-color-main-hover;
-  }
-  &:disabled, &:disabled:hover {
-    background-color: $s-color-main-inactive;
-    border-color: $s-color-main-inactive;
-  }
-}
-
-.s-secondary {
-  &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: $s-color-basic-white;
-    border-color: $s-color-main-brand;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-    border-color: $s-color-neutral-border;
-  }
-  &.s-alternative {
-    &:hover, &:active, &:focus {
-      color: $s-color-basic-black;
-      background-color: $s-color-neutral-hover;
-      border-color: $s-color-neutral-hover;
-    }
-    &:disabled, &:disabled:hover {
-      color: $s-color-neutral-inactive;
-      border-color: $s-color-neutral-border;
-      background-color: $s-color-basic-white;
-    }
-  }
-}
-
-.s-link {
-  color: $s-color-basic-black;
-  border: none;
-  background-color: transparent;
-  &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: transparent;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-  }
-}
-
-.s-tertiary {
-  color: $s-color-basic-black;
-  border-color: $s-color-neutral-placeholder;
-  background-color: $s-color-neutral-placeholder;
-  &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: $s-color-neutral-placeholder;
-    border-color: $s-color-neutral-placeholder;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-    background-color: $s-color-neutral-placeholder;
-    border-color: $s-color-neutral-placeholder;
-  }
-}
-
-.s-action {
-  &.s-big {
-    width: $s-size-big;
-    padding: 12px;
-    i {
-      font-size: 20px;
-    }
-  }
-  &.s-medium {
-    width: $s-size-medium;
-    padding: 10px;
-    i {
-      font-size: 18px;
-    }
-  }
-  &.s-small {
-    width: $s-size-small;
-    padding: 9px;
-    i {
-      font-size: 16px;
-      margin-left: -2px;
-      margin-top: -2px;
-    }
-  }
-  color: $s-color-basic-black;
-  background-color: $s-color-neutral-placeholder;
-  border-color: $s-color-neutral-placeholder;
-  border-radius: 8px;
-  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-    color: $s-color-basic-black;
-    background-color: $s-color-neutral-hover;
-    border-color: $s-color-neutral-hover;
-  }
-  &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-  }
-  &.s-alternative {
-    background-color: $s-color-basic-white;
-    border-color: $s-color-neutral-border;
-    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-      color: $s-color-basic-black;
-      background-color: $s-color-neutral-placeholder;
-      border-color: $s-color-neutral-placeholder;
-    }
-    &:disabled, &:disabled:hover {
-      color: $s-color-neutral-inactive;
-    }
-  }
-}
-
-button {
-  > span > i {
-    &[class^=s-icon-], &[class^=el-icon-] {
-      display: inline-block;
-      color: inherit;
-    }
-  }
-  &:not(.s-action) > span > i {
-    &[class^=s-icon-], &[class^=el-icon-] {
-      margin-right: 6px;
-    }
-  }
-}
-</style>
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index c589d701..bf2ea598 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -57,27 +57,3 @@ export default class SCard extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-card {
-  color: $s-color-basic-black;
-  border-radius: 8px;
-  border-color: $s-color-neutral-border;
-  &.s-clickable {
-    cursor: pointer;
-  }
-  &:hover, &:focus {
-    border-color: $s-color-basic-white;
-  }
-  .el-card__header {
-    border-bottom-color: $s-color-basic-white;
-    padding-bottom: 0;
-    text-align: left;
-  }
-  .el-card__body {
-    padding: 18px 20px;
-  }
-}
-</style>
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index 3513144a..c2759c5c 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -98,93 +98,3 @@ export default class SCheckbox extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/common.scss";
-
-.el-checkbox {
-  &.s-big {
-    @extend .s-big;
-    padding: 17px 0 9px 0;
-    &.is-bordered {
-      padding: 17px 20px 9px 15px;
-    }
-  }
-  &.s-medium {
-    @extend .s-medium;
-    &, &.is-bordered {
-      padding: 9px 15px 7px 10px;
-      .el-checkbox__inner {
-        height: 16px;
-        width: 16px;
-        &::after {
-          top: 0;
-          left: 4px;
-          height: 8px;
-          width: 4px;
-        }
-      }
-    }
-    & {
-      padding: 9px 0 7px 0;
-    }
-  }
-  &.s-small {
-    @extend .s-small;
-    border-radius: 4px;
-    .el-checkbox__label {
-      font-size: 12px;
-    }
-    &, &.is-bordered {
-      padding: 5px 15px 5px 10px;
-      .el-checkbox__inner {
-        height: 14px;
-        width: 14px;
-        &::after {
-          top: 1px;
-          left: 4px;
-          height: 6px;
-          width: 2px;
-        }
-      }
-    }
-    & {
-      padding: 5px 0;
-    }
-  }
-}
-.el-checkbox__inner {
-  border-color: $s-color-neutral-inactive;
-  border-radius: 4px;
-  width: 20px;
-  height: 20px;
-  &::after {
-    border-width: 2px;
-    height: 10px;
-    left: 6px;
-    width: 5px;
-  }
-}
-.el-checkbox__input {
-  &.is-disabled {
-    .el-checkbox__inner {
-      background-color: $s-color-neutral-placeholder;
-    }
-    & + span.el-checkbox__label {
-      color: $s-color-neutral-inactive;
-    }
-  }
-  &.is-checked {
-    &.is-disabled > .el-checkbox__inner {
-      background-color: $s-color-neutral-placeholder;
-      &::after {
-        border-color: $s-color-neutral-inactive;
-      }
-    }
-    & + .el-checkbox__label {
-      color: $s-color-basic-black;
-    }
-  }
-}
-</style>
diff --git a/src/components/Collapse/SCollapse.vue b/src/components/Collapse/SCollapse.vue
index 7d16c283..6f1f5b16 100644
--- a/src/components/Collapse/SCollapse.vue
+++ b/src/components/Collapse/SCollapse.vue
@@ -46,12 +46,3 @@ export default class SCollapse extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-collapse {
-  border-top-color: #F5F5F5;
-  border-bottom-color: #F5F5F5;
-}
-</style>
diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue
index ff0d07fa..26be0bd2 100644
--- a/src/components/Collapse/SCollapseItem.vue
+++ b/src/components/Collapse/SCollapseItem.vue
@@ -50,49 +50,3 @@ export default class SCollapseItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
-
-.s-without-border {
-  > div > .el-collapse-item__header,
-  > .el-collapse-item__wrap {
-    border: none;
-  }
-}
-.s-without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
-  padding-bottom: 0;
-}
-.el-collapse-item__ {
-  &wrap {
-    border-bottom-color: #F5F5F5;
-  }
-  &header {
-    color: $s-color-basic-black;
-    border-bottom-color: #F5F5F5;
-    &.is-active {
-      border-bottom-color: transparent;
-    }
-    .el-icon-arrow-right {
-      font-family: 'soramitsu-icons' !important;
-      @extend .s-icon-chevron-top;
-      font-size: 16px;
-      padding: 8px;
-      width: 32px;
-      height: 32px;
-      background-color: $s-color-neutral-placeholder;
-      border-radius: 50%;
-      &.is-active {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  &content {
-    color: $s-color-basic-black;
-  }
-}
-.el-collapse-item.is-disabled .el-collapse-item__header {
-  color: $s-color-neutral-inactive;
-}
-</style>
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 25268190..29862d5a 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -248,237 +248,3 @@ export default class SDatePicker extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.s-date-picker {
-  font-family: $font-family-default;
-  width: 100%;
-  position: relative;
-  .el-date-editor {
-    width: 100%;
-    &.el-input, &.el-input__inner {
-      width: 100%;
-    }
-    .el-range-separator {
-      color: $s-color-neutral-tertiary;
-    }
-    .el-input__inner, .el-range-input {
-      &::placeholder {
-        color: $s-color-neutral-secondary;
-        opacity: 1; // Firefox
-      }
-    }
-    &.is-active {
-      border-color: $s-color-neutral-border;
-    }
-  }
-  &.s-has-value {
-    .el-date-editor .el-range-separator {
-      color: $s-color-basic-black;
-    }
-  }
-  &.s-input-type {
-    min-height: $s-size-big;
-    .el-input__inner {
-      height: $s-size-big;
-      padding: 0 15px;
-      border: 1px solid $s-color-neutral-placeholder;
-      background-color: $s-color-neutral-placeholder;
-    }
-    &:hover {
-      .el-input__inner {
-        border-color: $s-color-neutral-hover;
-      }
-      .el-input__inner, .s-placeholder {
-        background-color: $s-color-neutral-hover;
-      }
-    }
-    .s-placeholder + .el-date-editor {
-      > .el-input__inner {
-        padding-top: 12px;
-      }
-      .el-input__validateIcon {
-        padding-top: 11px;
-      }
-    }
-    &.s-focused {
-      .el-input__inner {
-        border-color: $s-color-neutral-border;
-      }
-      .el-input__inner, .s-placeholder {
-        background-color: $s-color-basic-white;
-      }
-    }
-    &.s-disabled {
-      .el-input__inner {
-        border-color: $s-color-neutral-border;
-      }
-      .el-input__inner, .s-placeholder {
-        color: $s-color-neutral-secondary;
-        background-color: $s-color-neutral-placeholder;
-      }
-    }
-  }
-  .s-placeholder {
-    // TODO: add default animation from material-ui
-    color: $s-color-neutral-secondary;
-    text-align: left;
-    font-size: 12px;
-    padding: 0 15px;
-    padding-top: 5px;
-    top: 1px;
-    left: 1px;
-    border-top-left-radius: 4px;
-    position: absolute;
-    z-index: 1;
-    width: calc(100% - 15px);
-    background-color: $s-color-neutral-placeholder;
-    pointer-events: none;
-  }
-  &.s-select-type {
-    .el-date-editor {
-      .el-input__inner, .el-range-input, .el-range-separator {
-        font-weight: bold;
-      }
-      &.el-input__inner, & .el-input__inner {
-        border-radius: 8px;
-        padding-left: 12px;
-        &:hover {
-          border-color: $s-color-neutral-inactive;
-        }
-        &::placeholder, .el-range-input::placeholder {
-          color: $s-color-neutral-tertiary;
-          font-weight: bold;
-        }
-      }
-    }
-    .s-icon-chevron-bottom {
-      position: absolute;
-      right: 10px;
-      top: 30%;
-      pointer-events: none;
-      color: $s-color-neutral-tertiary;
-      transition: transform .3s;
-    }
-    &.s-focused {
-      .el-date-editor.el-input__inner,
-      .el-date-editor .el-input__inner {
-        border-color: $s-color-neutral-inactive;
-      }
-      &:not(.disabled) .s-icon-chevron-bottom {
-        transform: rotate(180deg);
-      }
-    }
-    &.s-has-value {
-      .s-icon-chevron-bottom {
-        color: $s-color-basic-black;
-      }
-    }
-    &.s-disabled {
-      .el-date-editor.el-input__inner,
-      .el-date-editor .el-input__inner {
-        color: $s-color-neutral-inactive;
-        border-color: $s-color-neutral-border;
-        background-color: $s-color-basic-white;
-        &::placeholder {
-          color: $s-color-neutral-inactive;
-        }
-        .el-range-input {
-          background-color: $s-color-basic-white;
-          color: $s-color-neutral-inactive;
-          &::placeholder {
-            color: $s-color-neutral-inactive;
-          }
-        }
-        .el-range-separator {
-          color: $s-color-neutral-inactive;
-        }
-      }
-      .s-icon-chevron-bottom {
-        color: $s-color-neutral-inactive;
-      }
-    }
-  }
-}
-.el-picker-panel__icon-btn,
-.el-date-picker__header-label,
-.el-date-table td,
-.el-date-table th,
-.el-picker-panel__link-btn,
-.el-time-panel__btn,
-.el-date-range-picker__time-header > .el-icon-arrow-right {
-  color: $s-color-basic-black;
-}
-.el-picker-panel {
-  border-color: $s-color-neutral-hover;
-  .el-picker-panel__content {
-    .el-date-table {
-      td {
-        &.available:hover {
-          color: $s-color-main-brand;
-        }
-        &.next-month, &.prev-month {
-          color: $s-color-neutral-inactive;
-        }
-      }
-      th {
-        border-bottom-color: $s-color-neutral-hover;
-      }
-    }
-  }
-  .el-picker-panel__footer {
-    border-top-color: $s-color-neutral-hover;
-    > .el-button {
-      height: 32px;
-      border-radius: 4px;
-    }
-  }
-  div[x-arrow].popper__arrow {
-    border-bottom-color: $s-color-neutral-hover;
-  }
-}
-.el-time-panel {
-  border-radius: 4px;
-  border-color: $s-color-neutral-hover;
-  .el-time-panel__footer {
-    border-top-color: $s-color-neutral-hover;
-  }
-  .el-time-spinner__item {
-    &.active:not(.disabled) {
-      color: $s-color-basic-black;
-    }
-    &:hover:not(.disabled):not(.active) {
-      background-color: $s-color-neutral-placeholder;
-    }
-  }
-  .el-time-panel__content {
-    &::after, &::before {
-      border-top-color: $s-color-neutral-hover;
-      border-bottom-color: $s-color-neutral-hover;
-    }
-  }
-}
-.el-date-table.is-week-mode .el-date-table__row {
-  &.current, &:hover {
-    div {
-      background-color: $s-color-main-hover-light;
-    }
-  }
-}
-.el-month-table td.in-range div {
-  background-color: $s-color-main-hover-light;
-  &:hover {
-    background-color: $s-color-main-hover-light;
-  }
-}
-.el-date-table td.in-range div {
-  background-color: $s-color-main-hover-light;
-  &:hover {
-    background-color: $s-color-main-hover-light;
-  }
-}
-.el-date-range-picker__content.is-left {
-  border-right-color: $s-color-neutral-hover;
-}
-</style>
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index d15e4140..d2f1238e 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -204,19 +204,3 @@ export default class SDialog extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-dialog {
-  border-radius: 8px;
-  .el-dialog__title {
-    font-weight: bold;
-    font-size: 16px;
-    color: $s-color-basic-black;
-  }
-  > * {
-    word-break: break-word;
-  }
-}
-</style>
diff --git a/src/components/Divider/SDivider.vue b/src/components/Divider/SDivider.vue
index 6517e44c..c74cb2a8 100644
--- a/src/components/Divider/SDivider.vue
+++ b/src/components/Divider/SDivider.vue
@@ -25,14 +25,3 @@ export default class SDivider extends Vue {
   @Prop({ default: ContentPosition.CENTER, type: String }) readonly contentPosition!: string
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-divider {
-  background-color: #F5F5F5;
-}
-.el-divider--horizontal {
-  margin: 20px 0;
-}
-</style>
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index bbbb3295..bc1e294b 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -189,43 +189,3 @@ export default class SDropdown extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-dropdown {
-  > .el-button-group {
-    > .el-button {
-      float: left;
-    }
-    .el-dropdown__caret-button {
-      &.s-secondary {
-        &::before {
-          background-color: $s-color-neutral-border;
-        }
-        &:hover, &:active, &:focus {
-          &::before {
-            background-color: $s-color-main-brand;
-          }
-        }
-      }
-      &.s-tertiary, &.s-link {
-        &::before {
-          background-color: transparent;
-        }
-        &:hover, &:active, &:focus {
-          &::before {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-  > i {
-    cursor: pointer;
-  }
-  .s-icon-more-horizontal {
-    font-size: 24px;
-  }
-}
-</style>
diff --git a/src/components/Dropdown/SDropdownItem.vue b/src/components/Dropdown/SDropdownItem.vue
index b3e04fd9..c775b633 100644
--- a/src/components/Dropdown/SDropdownItem.vue
+++ b/src/components/Dropdown/SDropdownItem.vue
@@ -43,14 +43,3 @@ export default class SDropdownItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-dropdown-menu__item:not(.is-disabled) {
-  &:hover, &:focus {
-    background-color: $s-color-neutral-placeholder;
-    color: $s-color-basic-black;
-  }
-}
-</style>
diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index c65b50be..90a18bc1 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -122,72 +122,3 @@ export default class SFormItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-form-item {
-  margin-bottom: 26px;
-  &__content {
-    line-height: 20px;
-    > button {
-      width: 100%;
-    }
-  }
-  &.is-error {
-    margin-bottom: 6px;
-    > .el-form-item__content {
-      > .el-form-item__error {
-        position: relative;
-        padding-top: 8px;
-        padding-left: 30px;
-        color: $s-color-basic-black;
-        &::before {
-          content: '';
-        }
-      }
-      > [class^="s-input"]:not(.disabled) {
-        .placeholder {
-          color: $s-color-error;
-          background-color: $s-color-main-base;
-        }
-        input, textarea {
-          background-color: $s-color-main-base;
-          &::placeholder {
-            color: $s-color-error;
-          }
-        }
-        &:hover {
-          .placeholder,
-          .el-input > input,
-          .el-textarea > textarea {
-            background-color: $s-color-main-hover-light;
-          }
-          .el-input > input,
-          .el-textarea > textarea {
-            border-color: $s-color-error;
-          }
-        }
-        &.focused {
-          .placeholder,
-          .el-input > input,
-          .el-textarea > textarea {
-            background-color: $s-color-basic-white;
-          }
-          .el-input > input,
-          .el-textarea > textarea {
-            border-color: $s-color-error;
-          }
-        }
-      }
-    }
-    .s-icon-error {
-      position: absolute;
-      bottom: 0;
-      left: 4px;
-      font-size: 16px;
-      color: $s-color-error;
-    }
-  }
-}
-</style>
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 078581d3..757b52e3 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -232,148 +232,3 @@ export default class SInput extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-input {
-  font-family: $font-family-default;
-  width: 100%;
-  min-height: $s-size-big;
-  position: relative;
-  .el-input__suffix {
-    z-index: 1;
-  }
-  .s-placeholder {
-    // TODO: add default animation from material-ui
-    color: $s-color-neutral-secondary;
-    text-align: left;
-    font-size: 12px;
-    padding: 0 15px;
-    padding-top: 5px;
-    top: 1px;
-    left: 1px;
-    border-top-left-radius: 4px;
-    position: absolute;
-    z-index: 1;
-    width: calc(100% - 15px);
-    background-color: $s-color-neutral-placeholder;
-    pointer-events: none;
-  }
-  .el-input,
-  .el-textarea {
-    height: 100%;
-    > input,
-    > textarea {
-      height: $s-size-big;
-      border: 1px solid $s-color-neutral-placeholder;
-      background-color: $s-color-neutral-placeholder;
-      &::placeholder {
-        color: $s-color-neutral-secondary;
-        opacity: 1; // Firefox
-      }
-    }
-    > textarea {
-      padding-top: 12px;
-    }
-    [class^="el-input__count"] {
-      background-color: transparent;
-    }
-  }
-  &:hover {
-    .s-placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      background-color: $s-color-neutral-hover;
-    }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: $s-color-neutral-hover;
-    }
-  }
-  &.s-focused {
-    .s-placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      background-color: $s-color-basic-white;
-    }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: $s-color-neutral-border;
-    }
-  }
-  &.s-disabled {
-    .s-placeholder,
-    .el-input > input,
-    .el-textarea > textarea {
-      color: $s-color-neutral-secondary;
-      background-color: $s-color-neutral-placeholder;
-    }
-    .el-input > input,
-    .el-textarea > textarea {
-      border-color: $s-color-neutral-border;
-    }
-  }
-  &.s-autofill {
-    .s-placeholder {
-      background-color: transparent !important;
-    }
-  }
-  .el-input > input {
-    &:-webkit-autofill {
-      color: $s-color-basic-black !important;
-      animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
-    }
-    &:not(:-webkit-autofill) {
-      animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel
-    }
-    &:-internal-autofill-selected {
-      animation-name: onAutoFillStart;
-    }
-    &:not(:-internal-autofill-selected) {
-      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-upload {
-      top: 16px;
-      right: 16px;
-      font-size: 24px;
-      z-index: 1;
-      position: absolute;
-      + input {
-        cursor: pointer;
-        position: absolute;
-        opacity: 0;
-        top: 0;
-        right: 0;
-        width: 56px;
-        height: 100%;
-        z-index: 2;
-      }
-    }
-  }
-}
-@keyframes onAutoFillStart {
-  from {/**/}
-  to {/**/}
-}
-@keyframes onAutoFillCancel {
-  from {/**/}
-  to {/**/}
-}
-</style>
diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput.vue
index c528c000..d3d9562d 100644
--- a/src/components/Input/SJsonInput.vue
+++ b/src/components/Input/SJsonInput.vue
@@ -104,119 +104,3 @@ export default class SJsonInput extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-// @import "../../styles/icons.scss";
-
-$color-ide-variable: #0451A5;
-$color-ide-string: #A31515;
-$color-ide-number: #098658;
-$color-ide-boolean: #0000FF;
-
-.s-json-input {
-  width: 100%;
-  border: 1px solid $s-color-neutral-border;
-  border-radius: $s-border-radius-default;
-  &.s-disabled {
-    .ace-jsoneditor {
-      pointer-events: none;
-      .ace_cursor {
-        display: none !important;
-      }
-      .ace_scroller,
-      .ace_gutter-active-line {
-        background-color: $s-color-neutral-placeholder;
-      }
-    }
-  }
-  &.s-readonly .jsoneditor {
-    .ace_gutter .ace_gutter-cell.ace_error {
-      background-image: none;
-    }
-    .ace_tooltip {
-      display: none !important;
-    }
-  }
-  // TODO: think about hover and focus
-}
-
-.jsoneditor {
-  border: none !important;
-  font-family: $font-family-mono;
-  .ace-jsoneditor {
-    *, textarea.jsoneditor-text * {
-      font-family: $font-family-mono;
-    }
-    .ace_fold {
-      border: none;
-      background: none;
-      color: $s-color-basic-black;
-      margin-top: -13px;
-    }
-    .ace_text-layer {
-      color: $s-color-basic-black;
-    }
-    .ace_variable {
-      color: $color-ide-variable;
-    }
-    .ace_string {
-      color: $color-ide-string;
-    }
-    .ace_constant {
-      &.ace_numeric {
-        color: $color-ide-number;
-      }
-      &.ace_language {
-        color: $color-ide-boolean;
-      }
-    }
-    &.ace_editor {
-      border-top-left-radius: 3px;
-      border-top-right-radius: 3px;
-      .ace_marker-layer {
-        .ace_active-line {
-          background-color: $s-color-neutral-placeholder;
-        }
-        .ace_selection {
-          background: $s-color-neutral-border;
-        }
-      }
-    }
-  }
-  .jsoneditor-statusbar {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-    background-color: $s-color-neutral-placeholder;
-    color: $s-color-neutral-secondary;
-    .jsoneditor-parse-error-icon {
-      // If full error message will be needed, then it should be removed
-      display: none !important;
-      pointer-events: none;
-    }
-  }
-  .ace_gutter {
-    background-color: $s-color-neutral-placeholder;
-    &-active-line {
-      background-color: $s-color-neutral-border;
-    }
-    // .ace_gutter-cell.ace_error {
-    //   @extend .s-icon-error; // TODO: fix the path for icon
-    // }
-  }
-  .ace_editor .ace_content,
-  .ace_gutter .ace_gutter-cell {
-    font-family: $font-family-mono;
-  }
-  .ace_tooltip {
-    font-family: $font-family-default;
-    background: $s-color-basic-black;
-    border-color: $s-color-basic-black;
-    color: $s-color-basic-white;
-    border-radius: $s-border-radius-default;
-    padding: 10px;
-    font-size: 12px;
-    line-height: 1.2;
-  }
-}
-</style>
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 1955da6d..03f23c54 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -195,102 +195,3 @@ export default class SPagination extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-pagination {
-  .btn-prev, .btn-next {
-    color: $s-color-basic-black;
-  }
-  button:disabled {
-    color: $s-color-neutral-inactive;
-  }
-  .el-pagination__sizes {
-    .el-select .el-input {
-      width: 65px;
-      .el-select__caret, .el-input__inner {
-        color: $s-color-basic-black;
-        font-weight: bold;
-      }
-      .el-select__caret {
-        margin-right: 6px;
-      }
-      .el-input__inner {
-        border-radius: 8px;
-        padding-right: 20px;
-        padding-left: 5px;
-        background-color: $s-color-neutral-placeholder;
-        border-color: $s-color-neutral-placeholder;
-      }
-      &.is-disabled {
-        .el-select__caret, .el-input__inner {
-          color: $s-color-neutral-inactive;
-        }
-      }
-    }
-  }
-  .el-pagination__editor.el-input {
-    .el-input__inner {
-      border-radius: 8px;
-      background-color: $s-color-neutral-placeholder;
-      border-color: $s-color-neutral-placeholder;
-      color: $s-color-basic-black;
-    }
-    &.is-disabled .el-input__inner {
-      color: $s-color-neutral-inactive;
-    }
-  }
-  .el-pagination__total, .per-page-text, .el-pagination__jump {
-    color: $s-color-neutral-secondary;
-    font-weight: normal;
-  }
-  .el-pager li {
-    color: $s-color-basic-black;
-    &.btn-quicknext, &.btn-quickprev {
-      color: $s-color-basic-black;
-    }
-    &:not(.disabled) {
-      &:hover, &.active {
-        color: $s-color-main-brand;
-      }
-    }
-    &.disabled {
-      color: $s-color-neutral-inactive;
-    }
-  }
-  &.is-background {
-    .el-pager li {
-      background-color: $s-color-neutral-placeholder;
-      &.disabled {
-        color: $s-color-neutral-inactive;
-      }
-    }
-    .btn-prev, .btn-next {
-      background-color: $s-color-neutral-placeholder;
-      &:disabled {
-        color: $s-color-neutral-inactive;
-        background-color: $s-color-neutral-placeholder;
-      }
-      &:not(:disabled):hover {
-        color: $s-color-main-brand;
-      }
-    }
-  }
-  &.el-pagination--small {
-    .el-pagination__editor {
-      height: 22px;
-    }
-    .el-pagination__sizes .el-select .el-input {
-      .el-input__inner {
-        height: 22px !important;
-        font-size: 12px;
-      }
-      .el-select__caret {
-        font-size: 12px;
-        line-height: 23px;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index 76906d36..a1bbe20d 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -71,92 +71,3 @@ export default class SRadio extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/common.scss";
-
-.el-radio {
-  &.s-big {
-    @extend .s-big;
-    line-height: $s-size-big;
-    &.is-bordered {
-      padding-top: 18px;
-    }
-    > .el-radio__input .el-radio__inner {
-      width: 20px;
-      height: 20px;
-      border-width: 2px;
-      &::after {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-  &.s-medium {
-    @extend .s-medium;
-    line-height: $s-size-medium;
-    > .el-radio__input .el-radio__inner {
-      width: 16px;
-      height: 16px;
-      border-width: 2px;
-      &::after {
-        width: 8px;
-        height: 8px;
-      }
-    }
-  }
-  &.s-small {
-    @extend .s-small;
-    line-height: $s-size-small;
-    &.is-bordered {
-      padding-top: 9px;
-    }
-    > .el-radio__label {
-      font-size: 12px;
-    }
-    > .el-radio__input .el-radio__inner {
-      width: 14px;
-      height: 14px;
-      border-width: 2px;
-      &::after {
-        width: 6px;
-        height: 6px;
-      }
-    }
-  }
-  &.is-bordered {
-    line-height: 0;
-    &.is-disabled {
-      border-color: $s-color-neutral-border;
-    }
-  }
-  > .el-radio__input {
-    .el-radio__inner {
-      background-color: $s-color-basic-white;
-      &::after {
-        background-color: $s-color-main-brand;
-      }
-    }
-    &.is-checked .el-radio__inner {
-      background-color: $s-color-basic-white;
-    }
-    &.is-disabled {
-      .el-radio__inner {
-        background-color: $s-color-neutral-placeholder;
-        border-color: $s-color-neutral-border;
-      }
-      &.is-checked .el-radio__inner {
-        background-color: $s-color-neutral-placeholder;
-        border-color: $s-color-neutral-border;
-        &::after {
-          background-color: $s-color-neutral-inactive;
-        }
-      }
-      & + span.el-radio__label {
-        color: $s-color-neutral-inactive;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/ScrollSections/SScrollSectionItem.vue b/src/components/ScrollSections/SScrollSectionItem.vue
index 915db4dc..9f9f6b47 100644
--- a/src/components/ScrollSections/SScrollSectionItem.vue
+++ b/src/components/ScrollSections/SScrollSectionItem.vue
@@ -41,23 +41,3 @@ export default class SScrollSectionItem extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-.s-scroll-section-item {
-  padding: 10px 20px;
-  &:first-child {
-    margin-top: 10px;
-  }
-  &:last-child {
-    margin-bottom: 10px;
-    .el-divider.el-divider--horizontal {
-      height: 0;
-    }
-  }
-  .title {
-    font-weight: bold;
-    display: block;
-    padding-bottom: 12px;
-  }
-}
-</style>
diff --git a/src/components/ScrollSections/SScrollSections.vue b/src/components/ScrollSections/SScrollSections.vue
index 1e34a645..c907a554 100644
--- a/src/components/ScrollSections/SScrollSections.vue
+++ b/src/components/ScrollSections/SScrollSections.vue
@@ -194,52 +194,3 @@ export default class SScrollSections extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.s-scroll-sections {
-  font-family: $font-family-default;
-  font-size: 14px;
-}
-.s-scroll-menu {
-  font-weight: 600;
-  ul {
-    position: sticky;
-    top: 0;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .s-scroll-item {
-    text-decoration: none;
-    a {
-      display: block;
-      padding: 8px 16px;
-      text-decoration: none;
-      cursor: pointer;
-      color: var(--s-menu-color-text);
-      &:hover {
-        color: var(--s-menu-color-hover);
-      }
-      &.active {
-        color: var(--s-menu-color-text-active);
-        border-left: 2px solid var(--s-menu-color-text-active);
-      }
-      &.disabled {
-        cursor: not-allowed;
-        pointer-events: none;
-        color: $s-color-neutral-inactive;
-        border-left: none;
-      }
-    }
-  }
-}
-.s-scroll-content {
-  padding-bottom: 90%;
-  color: $s-color-basic-black;
-  .title {
-    font-size: 16px;
-  }
-}
-</style>
diff --git a/src/components/Select/SOptionGroup.vue b/src/components/Select/SOptionGroup.vue
index abddf8b7..fdbdd931 100644
--- a/src/components/Select/SOptionGroup.vue
+++ b/src/components/Select/SOptionGroup.vue
@@ -21,14 +21,3 @@ export default class SOptionGroup extends Vue {
   @Prop({ type: Boolean, default: false }) readonly disabled!: boolean
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-select-group__wrap:not(:last-of-type)::after {
-  background-color: $s-color-neutral-hover;
-}
-.el-select-group__title {
-  color: $s-color-neutral-tertiary;
-}
-</style>
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 2c2697c6..2a4e988f 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -192,220 +192,3 @@ export default class SSelect extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/icons.scss";
-
-.s-select {
-  font-family: $font-family-default;
-  width: 100%;
-  position: relative;
-  .el-select {
-    width: 100%;
-    i.el-icon-arrow-up {
-      font-family: $icons-font;
-      font-size: 16px;
-      &:before {
-        content: $s-icon-chevron-top;
-      }
-    }
-    .el-input {
-      &.is-focus .el-input__inner {
-        border-color: $s-color-neutral-placeholder;
-      }
-      .el-input__inner {
-        &::placeholder {
-          color: $s-color-neutral-secondary;
-          opacity: 1; // Firefox
-        }
-      }
-      .el-select__caret {
-        color: $s-color-neutral-secondary;
-      }
-    }
-  }
-  &.s-input-type {
-    .el-select {
-      .el-input__inner {
-        height: $s-size-big;
-        padding: 0 15px;
-        border: 1px solid $s-color-neutral-placeholder;
-        background-color: $s-color-neutral-placeholder;
-        &:focus {
-          border-color: $s-color-neutral-placeholder;
-        }
-      }
-    }
-    &:hover {
-      .el-select {
-        .el-input__inner {
-          border-color: $s-color-neutral-hover;
-          background-color: $s-color-neutral-hover;
-        }
-      }
-      .s-placeholder {
-        background-color: $s-color-neutral-hover;
-      }
-    }
-    .s-placeholder + .el-select {
-      .el-input__inner {
-        padding-top: 12px;
-      }
-      .el-input__validateIcon {
-        padding-top: 11px;
-      }
-    }
-    &.s-focused {
-      .el-select {
-        .el-input__inner {
-          border-color: $s-color-neutral-border;
-          background-color: $s-color-basic-white;
-        }
-      }
-      .s-placeholder {
-        background-color: $s-color-basic-white;
-      }
-    }
-    &.s-disabled {
-      .el-select {
-        .el-select__caret {
-          color: $s-color-neutral-secondary;
-        }
-        .el-input__inner, .el-input__inner:hover {
-          border-color: $s-color-neutral-border;
-          color: $s-color-neutral-secondary;
-          background-color: $s-color-neutral-placeholder;
-          &::placeholder {
-            color: $s-color-neutral-secondary;
-          }
-        }
-      }
-      .s-placeholder {
-        color: $s-color-neutral-secondary;
-        background-color: $s-color-neutral-placeholder;
-      }
-    }
-  }
-  .s-placeholder {
-    // TODO: add default animation from material-ui
-    color: $s-color-neutral-secondary;
-    text-align: left;
-    font-size: 12px;
-    padding: 0 15px;
-    padding-top: 5px;
-    top: 1px;
-    left: 1px;
-    border-top-left-radius: 4px;
-    position: absolute;
-    z-index: 1;
-    width: calc(100% - 15px);
-    background-color: $s-color-neutral-placeholder;
-    pointer-events: none;
-  }
-  &.s-select-type {
-    .el-select {
-      .el-input__inner {
-        border-radius: 8px;
-        padding-left: 12px;
-        font-weight: bold;
-        &:hover {
-          border-color: $s-color-neutral-inactive;
-        }
-        &::placeholder {
-          color: $s-color-neutral-tertiary;
-          font-weight: bold;
-        }
-        &:focus {
-          border-color: $s-color-neutral-inactive;
-        }
-      }
-      .el-select__caret {
-        color: $s-color-neutral-tertiary;
-      }
-    }
-    &.s-focused {
-      .el-select {
-        .el-input__inner {
-          color: $s-color-basic-black;
-          border-color: $s-color-neutral-inactive;
-          &::placeholder {
-            color: $s-color-basic-black;
-          }
-        }
-        .el-select__caret {
-          color: $s-color-basic-black;
-        }
-      }
-    }
-    &.s-has-value {
-      .el-select {
-        .el-select__caret {
-          color: $s-color-basic-black;
-        }
-      }
-    }
-    &.s-disabled {
-      .el-select {
-        .el-input__inner {
-          color: $s-color-neutral-inactive;
-          border-color: $s-color-neutral-border;
-          background-color: $s-color-basic-white;
-          &::placeholder {
-            color: $s-color-neutral-inactive;
-          }
-        }
-        .el-select__caret {
-          color: $s-color-neutral-inactive;
-        }
-      }
-    }
-  }
-}
-.el-select-dropdown__item {
-  &.hover {
-    background-color: transparent;
-  }
-  &:hover {
-    background-color: $s-color-neutral-placeholder;
-  }
-  &.is-disabled {
-    color: $s-color-neutral-inactive;;
-  }
-}
-.el-select-dropdown.is-multiple .el-select-dropdown__item {
-  > span {
-    padding-left: 16px;
-    vertical-align: top;
-    color: $s-color-basic-black;
-  }
-  &::before {
-    font-family: "element-icons";
-    content: "\e6da";
-    color: $s-color-basic-white;
-    border: 1px solid $s-color-neutral-border;
-    background-color: $s-color-basic-white;
-    font-size: 16px;
-    font-weight: bold;
-    padding: 1px;
-    border-radius: 4px;
-  }
-  &.selected {
-    font-weight: normal;
-    &.hover {
-      background-color: transparent;
-    }
-    &:hover {
-      background-color: $s-color-neutral-placeholder;
-    }
-    &::before {
-      color: $s-color-basic-white;
-      background-color: $s-color-main-brand;
-      border-color: $s-color-main-brand;
-    }
-    &::after {
-      content: '';
-    }
-  }
-}
-</style>
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index 6bf29610..48af7487 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -119,86 +119,3 @@ export default class STabs extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-.s-tabs {
-  width: 100%;
-  .el-tabs__item {
-    font-weight: bold;
-    .el-icon-close {
-      &:before {
-        font-weight: bold;
-      }
-      &:hover {
-        background-color: transparent;
-        color: inherit;
-      }
-    }
-    &:not(.is-active) {
-      color: $s-color-basic-black;
-    }
-  }
-  .el-tab-pane {
-    color: $s-color-basic-black;
-  }
-  .el-tabs__nav-wrap::after {
-    background-color: $s-color-neutral-placeholder;
-  }
-  .el-tabs--card {
-    > .el-tabs__header {
-      border-bottom-color: $s-color-neutral-hover;
-      .el-tabs__nav {
-        border-color: $s-color-neutral-hover;
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
-      }
-      .el-tabs__item {
-        border-left-color: $s-color-neutral-hover;
-      }
-    }
-  }
-  .el-tabs--border-card {
-    border-color: $s-color-neutral-border;
-    > .el-tabs__header {
-      background-color: $s-color-neutral-placeholder;
-      border-bottom-color: $s-color-neutral-border;
-    }
-  }
-  &.s-rounded {
-    .el-tabs__header {
-      width: fit-content;
-    }
-    .el-tabs__nav-wrap {
-      background-color: $s-color-neutral-placeholder;
-      border-radius: 8px;
-      height: 32px;
-      padding-top: 2px;
-      padding-left: 2px;
-      padding-right: 2px;
-      &::after, .el-tabs__active-bar {
-        height: 0;
-      }
-      .el-tabs__item {
-        padding: 0 32px;
-        height: 28px;
-        line-height: 28px;
-        &:nth-child(2), &:last-child {
-          padding: 0 32px;
-        }
-        &.is-active {
-          color: $s-color-basic-black;
-          background-color: #FFFFFF;
-          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
-          border-radius: 8px;
-        }
-        &: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);
-          border-radius: 8px;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index a5776490..f59493f3 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -360,108 +360,3 @@ export default class STable extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-table--enable-row-hover .el-table__body tr:hover > td {
-  background-color: $s-color-neutral-hover;
-  border-left: none;
-  border-right: none;
-}
-.el-table__body {
-  tr {
-    &.hover-row {
-      > td,
-      &.current-row > td,
-      &.el-table__row--striped > td,
-      &.el-table__row--striped.current-row > td {
-        background-color: $s-color-neutral-hover;
-        border-left: none;
-        border-right: none;
-      }
-    }
-  }
-}
-.el-table--border th:first-child .cell,
-.el-table--border td:first-child .cell {
-  padding-left: 13px;
-}
-.el-table thead {
-  color: $s-color-neutral-tertiary;
-}
-.el-table--group,
-.el-table--border,
-.el-table th.is-leaf,
-.el-table td,
-.el-table--border th {
-  border-color: $s-color-neutral-placeholder;
-}
-.el-table--group::after,
-.el-table--border::after {
-  background-color: $s-color-neutral-placeholder;
-}
-.el-table:not(.el-table--border)::before {
-  background-color: $s-color-basic-white;
-}
-.el-table tr:last-child td {
-  border-bottom-color: $s-color-basic-white;
-}
-.el-table__header {
-  label.el-checkbox.is-disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    height: 4px;
-    top: 7px;
-  }
-}
-.el-table {
-  .el-checkbox__inner {
-    height: 20px;
-    width: 20px;
-    border-radius: 4px;
-    &::after {
-      border-width: 2px;
-      height: 10px;
-      left: 6px;
-      width: 5px;
-    }
-  }
-}
-.el-table--medium {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    top: 5px;
-  }
-  .el-checkbox__inner {
-    height: 16px;
-    width: 16px;
-    &::after {
-      top: 0;
-      left: 4px;
-      height: 8px;
-      width: 4px;
-    }
-  }
-}
-.el-table--small {
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
-    top: 4px;
-  }
-  .el-checkbox__inner {
-    height: 14px;
-    width: 14px;
-    &::after {
-      top: 1px;
-      left: 4px;
-      height: 6px;
-      width: 2px;
-    }
-  }
-}
-.el-table__header-wrapper tbody td,
-.el-table__footer-wrapper tbody td {
-  background-color: $s-color-neutral-placeholder;
-}
-</style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 96fb3147..1ca47e3a 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -184,7 +184,3 @@ export default class STableColumn extends Vue {
   @Prop({ type: Array }) readonly filteredValue!: Array<any>
 }
 </script>
-
-<style lang="scss">
-
-</style>
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index ad1fe903..7d1ba338 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -123,17 +123,3 @@ export default class STooltip extends Vue {
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-
-.el-tooltip__popper {
-  &.is-dark {
-    background-color: $s-color-basic-black;
-  }
-  &.is-light {
-    color: $s-color-basic-black;
-  }
-  border-color: $s-color-basic-black;
-}
-</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 24ea6d52..573e5ba2 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,6 @@
 import '../plugins'
 import '../styles'
+import '../styles/index.scss'
 
 import { SApp } from './Layout/App'
 import { SAside } from './Layout/Aside'
diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
new file mode 100644
index 00000000..4ca5eba3
--- /dev/null
+++ b/src/styles/breadcrumbs.scss
@@ -0,0 +1,16 @@
+@import "./variables";
+
+.el-breadcrumb__separator {
+  color: $s-color-neutral-secondary;
+  font-weight: normal;
+}
+.el-breadcrumb__inner {
+  color: $s-color-neutral-secondary;
+  &.is-link {
+    color: $s-color-neutral-secondary;
+    font-weight: normal;
+  }
+}
+.el-breadcrumb__item:last-child {
+  pointer-events: none;
+}
diff --git a/src/styles/button.scss b/src/styles/button.scss
new file mode 100644
index 00000000..08e36278
--- /dev/null
+++ b/src/styles/button.scss
@@ -0,0 +1,140 @@
+@import "./variables";
+
+.s-loading {
+  padding: 12px 17.5px;
+  i {
+    position: absolute;
+    left: var(--s-button-loading-left);
+  }
+  &.s-small {
+    padding: 9px 15px;
+    i {
+      left: calc(var(--s-button-loading-left) + 2px);
+    }
+  }
+  > :not(i) {
+    color: transparent;
+  }
+}
+.s-primary {
+  &:hover, &:active, &:focus {
+    background-color: $s-color-main-hover;
+    border-color: $s-color-main-hover;
+  }
+  &:disabled, &:disabled:hover {
+    background-color: $s-color-main-inactive;
+    border-color: $s-color-main-inactive;
+  }
+}
+.s-secondary {
+  &:hover, &:active, &:focus {
+    color: $s-color-main-brand;
+    background-color: $s-color-basic-white;
+    border-color: $s-color-main-brand;
+  }
+  &:disabled, &:disabled:hover {
+    color: $s-color-neutral-inactive;
+    border-color: $s-color-neutral-border;
+  }
+  &.s-alternative {
+    &:hover, &:active, &:focus {
+      color: $s-color-basic-black;
+      background-color: $s-color-neutral-hover;
+      border-color: $s-color-neutral-hover;
+    }
+    &:disabled, &:disabled:hover {
+      color: $s-color-neutral-inactive;
+      border-color: $s-color-neutral-border;
+      background-color: $s-color-basic-white;
+    }
+  }
+}
+.s-link {
+  color: $s-color-basic-black;
+  border: none;
+  background-color: transparent;
+  &:hover, &:active, &:focus {
+    color: $s-color-main-brand;
+    background-color: transparent;
+  }
+  &:disabled, &:disabled:hover {
+    color: $s-color-neutral-inactive;
+  }
+}
+.s-tertiary {
+  color: $s-color-basic-black;
+  border-color: $s-color-neutral-placeholder;
+  background-color: $s-color-neutral-placeholder;
+  &:hover, &:active, &:focus {
+    color: $s-color-main-brand;
+    background-color: $s-color-neutral-placeholder;
+    border-color: $s-color-neutral-placeholder;
+  }
+  &:disabled, &:disabled:hover {
+    color: $s-color-neutral-inactive;
+    background-color: $s-color-neutral-placeholder;
+    border-color: $s-color-neutral-placeholder;
+  }
+}
+.s-action {
+  &.s-big {
+    width: $s-size-big;
+    padding: 12px;
+    i {
+      font-size: 20px;
+    }
+  }
+  &.s-medium {
+    width: $s-size-medium;
+    padding: 10px;
+    i {
+      font-size: 18px;
+    }
+  }
+  &.s-small {
+    width: $s-size-small;
+    padding: 9px;
+    i {
+      font-size: 16px;
+      margin-left: -2px;
+      margin-top: -2px;
+    }
+  }
+  color: $s-color-basic-black;
+  background-color: $s-color-neutral-placeholder;
+  border-color: $s-color-neutral-placeholder;
+  border-radius: 8px;
+  &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+    color: $s-color-basic-black;
+    background-color: $s-color-neutral-hover;
+    border-color: $s-color-neutral-hover;
+  }
+  &:disabled, &:disabled:hover {
+    color: $s-color-neutral-inactive;
+  }
+  &.s-alternative {
+    background-color: $s-color-basic-white;
+    border-color: $s-color-neutral-border;
+    &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
+      color: $s-color-basic-black;
+      background-color: $s-color-neutral-placeholder;
+      border-color: $s-color-neutral-placeholder;
+    }
+    &:disabled, &:disabled:hover {
+      color: $s-color-neutral-inactive;
+    }
+  }
+}
+button {
+  > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      display: inline-block;
+      color: inherit;
+    }
+  }
+  &:not(.s-action) > span > i {
+    &[class^=s-icon-], &[class^=el-icon-] {
+      margin-right: 6px;
+    }
+  }
+}
diff --git a/src/styles/card.scss b/src/styles/card.scss
new file mode 100644
index 00000000..31846ea8
--- /dev/null
+++ b/src/styles/card.scss
@@ -0,0 +1,21 @@
+@import "./variables";
+
+.s-card {
+  color: $s-color-basic-black;
+  border-radius: 8px;
+  border-color: $s-color-neutral-border;
+  &.s-clickable {
+    cursor: pointer;
+  }
+  &:hover, &:focus {
+    border-color: transparent;
+  }
+  .el-card__header {
+    border-bottom-color: transparent;
+    padding-bottom: 0;
+    text-align: left;
+  }
+  .el-card__body {
+    padding: 18px 20px;
+  }
+}
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
new file mode 100644
index 00000000..9c866215
--- /dev/null
+++ b/src/styles/checkbox.scss
@@ -0,0 +1,87 @@
+@import "./variables";
+@import "./common";
+
+.el-checkbox {
+  &.s-big {
+    @extend .s-big;
+    padding: 17px 0 9px 0;
+    &.is-bordered {
+      padding: 17px 20px 9px 15px;
+    }
+  }
+  &.s-medium {
+    @extend .s-medium;
+    &, &.is-bordered {
+      padding: 9px 15px 7px 10px;
+      .el-checkbox__inner {
+        height: 16px;
+        width: 16px;
+        &::after {
+          top: 0;
+          left: 4px;
+          height: 8px;
+          width: 4px;
+        }
+      }
+    }
+    & {
+      padding: 9px 0 7px 0;
+    }
+  }
+  &.s-small {
+    @extend .s-small;
+    border-radius: 4px;
+    .el-checkbox__label {
+      font-size: 12px;
+    }
+    &, &.is-bordered {
+      padding: 5px 15px 5px 10px;
+      .el-checkbox__inner {
+        height: 14px;
+        width: 14px;
+        &::after {
+          top: 1px;
+          left: 4px;
+          height: 6px;
+          width: 2px;
+        }
+      }
+    }
+    & {
+      padding: 5px 0;
+    }
+  }
+}
+.el-checkbox__inner {
+  border-color: $s-color-neutral-inactive;
+  border-radius: 4px;
+  width: 20px;
+  height: 20px;
+  &::after {
+    border-width: 2px;
+    height: 10px;
+    left: 6px;
+    width: 5px;
+  }
+}
+.el-checkbox__input {
+  &.is-disabled {
+    .el-checkbox__inner {
+      background-color: $s-color-neutral-placeholder;
+    }
+    & + span.el-checkbox__label {
+      color: $s-color-neutral-inactive;
+    }
+  }
+  &.is-checked {
+    &.is-disabled > .el-checkbox__inner {
+      background-color: $s-color-neutral-placeholder;
+      &::after {
+        border-color: $s-color-neutral-inactive;
+      }
+    }
+    & + .el-checkbox__label {
+      color: $s-color-basic-black;
+    }
+  }
+}
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
new file mode 100644
index 00000000..4c0c05c4
--- /dev/null
+++ b/src/styles/collapse.scss
@@ -0,0 +1,47 @@
+@import "./variables";
+@import "./icons";
+
+.el-collapse {
+  border-top-color: #F5F5F5; // TODO: ask about possibility to override it
+  border-bottom-color: #F5F5F5;
+}
+.s-without-border {
+  > div > .el-collapse-item__header,
+  > .el-collapse-item__wrap {
+    border: none;
+  }
+}
+.s-without-padding > .el-collapse-item__wrap > .el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-collapse-item__ {
+  &wrap {
+    border-bottom-color: #F5F5F5;
+  }
+  &header {
+    color: $s-color-basic-black;
+    border-bottom-color: #F5F5F5;
+    &.is-active {
+      border-bottom-color: transparent;
+    }
+    .el-icon-arrow-right {
+      font-family: 'soramitsu-icons' !important;
+      @extend .s-icon-chevron-top;
+      font-size: 16px;
+      padding: 8px;
+      width: 32px;
+      height: 32px;
+      background-color: $s-color-neutral-placeholder;
+      border-radius: 50%;
+      &.is-active {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &content {
+    color: $s-color-basic-black;
+  }
+}
+.el-collapse-item.is-disabled .el-collapse-item__header {
+  color: $s-color-neutral-inactive;
+}
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
new file mode 100644
index 00000000..1931b0fd
--- /dev/null
+++ b/src/styles/datepicker.scss
@@ -0,0 +1,232 @@
+@import "./variables";
+
+.s-date-picker {
+  font-family: $font-family-default;
+  width: 100%;
+  position: relative;
+  .el-date-editor {
+    width: 100%;
+    &.el-input, &.el-input__inner {
+      width: 100%;
+    }
+    .el-range-separator {
+      color: $s-color-neutral-tertiary;
+    }
+    .el-input__inner, .el-range-input {
+      &::placeholder {
+        color: $s-color-neutral-secondary;
+        opacity: 1; // Firefox
+      }
+    }
+    &.is-active {
+      border-color: $s-color-neutral-border;
+    }
+  }
+  &.s-has-value {
+    .el-date-editor .el-range-separator {
+      color: $s-color-basic-black;
+    }
+  }
+  &.s-input-type {
+    min-height: $s-size-big;
+    .el-input__inner {
+      height: $s-size-big;
+      padding: 0 15px;
+      border: 1px solid $s-color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
+    }
+    &:hover {
+      .el-input__inner {
+        border-color: $s-color-neutral-hover;
+      }
+      .el-input__inner, .s-placeholder {
+        background-color: $s-color-neutral-hover;
+      }
+    }
+    .s-placeholder + .el-date-editor {
+      > .el-input__inner {
+        padding-top: 12px;
+      }
+      .el-input__validateIcon {
+        padding-top: 11px;
+      }
+    }
+    &.s-focused {
+      .el-input__inner {
+        border-color: $s-color-neutral-border;
+      }
+      .el-input__inner, .s-placeholder {
+        background-color: $s-color-basic-white;
+      }
+    }
+    &.s-disabled {
+      .el-input__inner {
+        border-color: $s-color-neutral-border;
+      }
+      .el-input__inner, .s-placeholder {
+        color: $s-color-neutral-secondary;
+        background-color: $s-color-neutral-placeholder;
+      }
+    }
+  }
+  .s-placeholder {
+    // TODO: add default animation from material-ui
+    color: $s-color-neutral-secondary;
+    text-align: left;
+    font-size: 12px;
+    padding: 0 15px;
+    padding-top: 5px;
+    top: 1px;
+    left: 1px;
+    border-top-left-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    width: calc(100% - 15px);
+    background-color: $s-color-neutral-placeholder;
+    pointer-events: none;
+  }
+  &.s-select-type {
+    .el-date-editor {
+      .el-input__inner, .el-range-input, .el-range-separator {
+        font-weight: bold;
+      }
+      &.el-input__inner, & .el-input__inner {
+        border-radius: 8px;
+        padding-left: 12px;
+        &:hover {
+          border-color: $s-color-neutral-inactive;
+        }
+        &::placeholder, .el-range-input::placeholder {
+          color: $s-color-neutral-tertiary;
+          font-weight: bold;
+        }
+      }
+    }
+    .s-icon-chevron-bottom {
+      position: absolute;
+      right: 10px;
+      top: 30%;
+      pointer-events: none;
+      color: $s-color-neutral-tertiary;
+      transition: transform .3s;
+    }
+    &.s-focused {
+      .el-date-editor.el-input__inner,
+      .el-date-editor .el-input__inner {
+        border-color: $s-color-neutral-inactive;
+      }
+      &:not(.disabled) .s-icon-chevron-bottom {
+        transform: rotate(180deg);
+      }
+    }
+    &.s-has-value {
+      .s-icon-chevron-bottom {
+        color: $s-color-basic-black;
+      }
+    }
+    &.s-disabled {
+      .el-date-editor.el-input__inner,
+      .el-date-editor .el-input__inner {
+        color: $s-color-neutral-inactive;
+        border-color: $s-color-neutral-border;
+        background-color: $s-color-basic-white;
+        &::placeholder {
+          color: $s-color-neutral-inactive;
+        }
+        .el-range-input {
+          background-color: $s-color-basic-white;
+          color: $s-color-neutral-inactive;
+          &::placeholder {
+            color: $s-color-neutral-inactive;
+          }
+        }
+        .el-range-separator {
+          color: $s-color-neutral-inactive;
+        }
+      }
+      .s-icon-chevron-bottom {
+        color: $s-color-neutral-inactive;
+      }
+    }
+  }
+}
+.el-picker-panel__icon-btn,
+.el-date-picker__header-label,
+.el-date-table td,
+.el-date-table th,
+.el-picker-panel__link-btn,
+.el-time-panel__btn,
+.el-date-range-picker__time-header > .el-icon-arrow-right {
+  color: $s-color-basic-black;
+}
+.el-picker-panel {
+  border-color: $s-color-neutral-hover;
+  .el-picker-panel__content {
+    .el-date-table {
+      td {
+        &.available:hover {
+          color: $s-color-main-brand;
+        }
+        &.next-month, &.prev-month {
+          color: $s-color-neutral-inactive;
+        }
+      }
+      th {
+        border-bottom-color: $s-color-neutral-hover;
+      }
+    }
+  }
+  .el-picker-panel__footer {
+    border-top-color: $s-color-neutral-hover;
+    > .el-button {
+      height: 32px;
+      border-radius: 4px;
+    }
+  }
+  div[x-arrow].popper__arrow {
+    border-bottom-color: $s-color-neutral-hover;
+  }
+}
+.el-time-panel {
+  border-radius: 4px;
+  border-color: $s-color-neutral-hover;
+  .el-time-panel__footer {
+    border-top-color: $s-color-neutral-hover;
+  }
+  .el-time-spinner__item {
+    &.active:not(.disabled) {
+      color: $s-color-basic-black;
+    }
+    &:hover:not(.disabled):not(.active) {
+      background-color: $s-color-neutral-placeholder;
+    }
+  }
+  .el-time-panel__content {
+    &::after, &::before {
+      border-top-color: $s-color-neutral-hover;
+      border-bottom-color: $s-color-neutral-hover;
+    }
+  }
+}
+.el-date-table.is-week-mode .el-date-table__row {
+  &.current, &:hover {
+    div {
+      background-color: $s-color-main-hover-light;
+    }
+  }
+}
+.el-month-table td.in-range div {
+  background-color: $s-color-main-hover-light;
+  &:hover {
+    background-color: $s-color-main-hover-light;
+  }
+}
+.el-date-table td.in-range div {
+  background-color: $s-color-main-hover-light;
+  &:hover {
+    background-color: $s-color-main-hover-light;
+  }
+}
+.el-date-range-picker__content.is-left {
+  border-right-color: $s-color-neutral-hover;
+}
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
new file mode 100644
index 00000000..981359b0
--- /dev/null
+++ b/src/styles/dialog.scss
@@ -0,0 +1,13 @@
+@import "./variables";
+
+.el-dialog {
+  border-radius: 8px;
+  .el-dialog__title {
+    font-weight: bold;
+    font-size: 16px;
+    color: $s-color-basic-black;
+  }
+  > * {
+    word-break: break-word;
+  }
+}
diff --git a/src/styles/divider.scss b/src/styles/divider.scss
new file mode 100644
index 00000000..6fdb2d2b
--- /dev/null
+++ b/src/styles/divider.scss
@@ -0,0 +1,6 @@
+.el-divider {
+  background-color: #F5F5F5; // TODO: ask about possibility to override it
+}
+.el-divider--horizontal {
+  margin: 20px 0;
+}
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
new file mode 100644
index 00000000..119697a4
--- /dev/null
+++ b/src/styles/dropdown.scss
@@ -0,0 +1,43 @@
+@import "./variables";
+
+.el-dropdown {
+  > .el-button-group {
+    > .el-button {
+      float: left;
+    }
+    .el-dropdown__caret-button {
+      &.s-secondary {
+        &::before {
+          background-color: $s-color-neutral-border;
+        }
+        &:hover, &:active, &:focus {
+          &::before {
+            background-color: $s-color-main-brand;
+          }
+        }
+      }
+      &.s-tertiary, &.s-link {
+        &::before {
+          background-color: transparent;
+        }
+        &:hover, &:active, &:focus {
+          &::before {
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+  > i {
+    cursor: pointer;
+  }
+  .s-icon-more-horizontal {
+    font-size: 24px;
+  }
+}
+.el-dropdown-menu__item:not(.is-disabled) {
+  &:hover, &:focus {
+    background-color: $s-color-neutral-placeholder;
+    color: $s-color-basic-black;
+  }
+}
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
new file mode 100644
index 00000000..ed2a1131
--- /dev/null
+++ b/src/styles/fonts.scss
@@ -0,0 +1,37 @@
+@font-face {
+  font-family: "soramitsu-icons";
+  src: url("~@/assets/fonts/soramitsu-icons.woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+@font-face {
+  font-family: "SoraB";
+  src: url("~@/assets/fonts/Sora-Bold.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "SoraEB";
+  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "SoraSB";
+  src: url("~@/assets/fonts/Sora-SemiBold.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Sora";
+  src: url("~@/assets/fonts/Sora-Regular.otf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "JetBrainsMono";
+  src: url("~@/assets/fonts/JetBrainsMono-Regular.woff");
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/styles/form.scss b/src/styles/form.scss
new file mode 100644
index 00000000..3374314e
--- /dev/null
+++ b/src/styles/form.scss
@@ -0,0 +1,66 @@
+@import "./variables";
+
+.el-form-item {
+  margin-bottom: 26px;
+  &__content {
+    line-height: 20px;
+    > button {
+      width: 100%;
+    }
+  }
+  &.is-error {
+    margin-bottom: 6px;
+    > .el-form-item__content {
+      > .el-form-item__error {
+        position: relative;
+        padding-top: 8px;
+        padding-left: 30px;
+        color: $s-color-basic-black;
+        &::before {
+          content: '';
+        }
+      }
+      > [class^="s-input"]:not(.disabled) {
+        .placeholder {
+          color: $s-color-error;
+          background-color: $s-color-main-base;
+        }
+        input, textarea {
+          background-color: $s-color-main-base;
+          &::placeholder {
+            color: $s-color-error;
+          }
+        }
+        &:hover {
+          .placeholder,
+          .el-input > input,
+          .el-textarea > textarea {
+            background-color: $s-color-main-hover-light;
+          }
+          .el-input > input,
+          .el-textarea > textarea {
+            border-color: $s-color-error;
+          }
+        }
+        &.focused {
+          .placeholder,
+          .el-input > input,
+          .el-textarea > textarea {
+            background-color: $s-color-basic-white;
+          }
+          .el-input > input,
+          .el-textarea > textarea {
+            border-color: $s-color-error;
+          }
+        }
+      }
+    }
+    .s-icon-error {
+      position: absolute;
+      bottom: 0;
+      left: 4px;
+      font-size: 16px;
+      color: $s-color-error;
+    }
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 00000000..9b2002d7
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,23 @@
+@import "./variables";
+@import "./element-variables";
+@import "./common";
+@import "./button";
+@import "./breadcrumbs";
+@import "./card";
+@import "./checkbox";
+@import "./collapse";
+@import "./datepicker";
+@import "./dialog";
+@import "./divider";
+@import "./dropdown";
+@import "./form";
+@import "./icons";
+@import "./input";
+@import "./json-input";
+@import "./pagination";
+@import "./radio";
+@import "./scroll-sections";
+@import "./select";
+@import "./tabs";
+@import "./table";
+@import "./tooltip";
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 167ad313..4591aad9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,4 +1 @@
-import './variables.scss'
-import './element-variables.scss'
-import './icons.scss'
-import './common.scss'
+import './fonts.scss'
diff --git a/src/styles/input.scss b/src/styles/input.scss
new file mode 100644
index 00000000..737b9915
--- /dev/null
+++ b/src/styles/input.scss
@@ -0,0 +1,142 @@
+@import "./variables";
+
+.s-input {
+  font-family: $font-family-default;
+  width: 100%;
+  min-height: $s-size-big;
+  position: relative;
+  .el-input__suffix {
+    z-index: 1;
+  }
+  .s-placeholder {
+    // TODO: add default animation from material-ui
+    color: $s-color-neutral-secondary;
+    text-align: left;
+    font-size: 12px;
+    padding: 0 15px;
+    padding-top: 5px;
+    top: 1px;
+    left: 1px;
+    border-top-left-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    width: calc(100% - 15px);
+    background-color: $s-color-neutral-placeholder;
+    pointer-events: none;
+  }
+  .el-input,
+  .el-textarea {
+    height: 100%;
+    > input,
+    > textarea {
+      height: $s-size-big;
+      border: 1px solid $s-color-neutral-placeholder;
+      background-color: $s-color-neutral-placeholder;
+      &::placeholder {
+        color: $s-color-neutral-secondary;
+        opacity: 1; // Firefox
+      }
+    }
+    > textarea {
+      padding-top: 12px;
+    }
+    [class^="el-input__count"] {
+      background-color: transparent;
+    }
+  }
+  &:hover {
+    .s-placeholder,
+    .el-input > input,
+    .el-textarea > textarea {
+      background-color: $s-color-neutral-hover;
+    }
+    .el-input > input,
+    .el-textarea > textarea {
+      border-color: $s-color-neutral-hover;
+    }
+  }
+  &.s-focused {
+    .s-placeholder,
+    .el-input > input,
+    .el-textarea > textarea {
+      background-color: $s-color-basic-white;
+    }
+    .el-input > input,
+    .el-textarea > textarea {
+      border-color: $s-color-neutral-border;
+    }
+  }
+  &.s-disabled {
+    .s-placeholder,
+    .el-input > input,
+    .el-textarea > textarea {
+      color: $s-color-neutral-secondary;
+      background-color: $s-color-neutral-placeholder;
+    }
+    .el-input > input,
+    .el-textarea > textarea {
+      border-color: $s-color-neutral-border;
+    }
+  }
+  &.s-autofill {
+    .s-placeholder {
+      background-color: transparent !important;
+    }
+  }
+  .el-input > input {
+    &:-webkit-autofill {
+      color: $s-color-basic-black !important;
+      animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
+    }
+    &:not(:-webkit-autofill) {
+      animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel
+    }
+    &:-internal-autofill-selected {
+      animation-name: onAutoFillStart;
+    }
+    &:not(:-internal-autofill-selected) {
+      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-upload {
+      top: 16px;
+      right: 16px;
+      font-size: 24px;
+      z-index: 1;
+      position: absolute;
+      + input {
+        cursor: pointer;
+        position: absolute;
+        opacity: 0;
+        top: 0;
+        right: 0;
+        width: 56px;
+        height: 100%;
+        z-index: 2;
+      }
+    }
+  }
+}
+@keyframes onAutoFillStart {
+  from {/**/}
+  to {/**/}
+}
+@keyframes onAutoFillCancel {
+  from {/**/}
+  to {/**/}
+}
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
new file mode 100644
index 00000000..b17a0b6f
--- /dev/null
+++ b/src/styles/json-input.scss
@@ -0,0 +1,113 @@
+@import "./variables";
+// @import "./icons";
+
+$color-ide-variable: #0451A5;
+$color-ide-string: #A31515;
+$color-ide-number: #098658;
+$color-ide-boolean: #0000FF;
+
+.s-json-input {
+  width: 100%;
+  border: 1px solid $s-color-neutral-border;
+  border-radius: $s-border-radius-default;
+  &.s-disabled {
+    .ace-jsoneditor {
+      pointer-events: none;
+      .ace_cursor {
+        display: none !important;
+      }
+      .ace_scroller,
+      .ace_gutter-active-line {
+        background-color: $s-color-neutral-placeholder;
+      }
+    }
+  }
+  &.s-readonly .jsoneditor {
+    .ace_gutter .ace_gutter-cell.ace_error {
+      background-image: none;
+    }
+    .ace_tooltip {
+      display: none !important;
+    }
+  }
+  // TODO: think about hover and focus
+}
+
+.jsoneditor {
+  border: none !important;
+  font-family: $font-family-mono;
+  .ace-jsoneditor {
+    *, textarea.jsoneditor-text * {
+      font-family: $font-family-mono;
+    }
+    .ace_fold {
+      border: none;
+      background: none;
+      color: $s-color-basic-black;
+      margin-top: -13px;
+    }
+    .ace_text-layer {
+      color: $s-color-basic-black;
+    }
+    .ace_variable {
+      color: $color-ide-variable;
+    }
+    .ace_string {
+      color: $color-ide-string;
+    }
+    .ace_constant {
+      &.ace_numeric {
+        color: $color-ide-number;
+      }
+      &.ace_language {
+        color: $color-ide-boolean;
+      }
+    }
+    &.ace_editor {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+      .ace_marker-layer {
+        .ace_active-line {
+          background-color: $s-color-neutral-placeholder;
+        }
+        .ace_selection {
+          background: $s-color-neutral-border;
+        }
+      }
+    }
+  }
+  .jsoneditor-statusbar {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    background-color: $s-color-neutral-placeholder;
+    color: $s-color-neutral-secondary;
+    .jsoneditor-parse-error-icon {
+      // If full error message will be needed, then it should be removed
+      display: none !important;
+      pointer-events: none;
+    }
+  }
+  .ace_gutter {
+    background-color: $s-color-neutral-placeholder;
+    &-active-line {
+      background-color: $s-color-neutral-border;
+    }
+    // .ace_gutter-cell.ace_error {
+    //   @extend .s-icon-error; // TODO: fix the path for icon
+    // }
+  }
+  .ace_editor .ace_content,
+  .ace_gutter .ace_gutter-cell {
+    font-family: $font-family-mono;
+  }
+  .ace_tooltip {
+    font-family: $font-family-default;
+    background: $s-color-basic-black;
+    border-color: $s-color-basic-black;
+    color: $s-color-basic-white;
+    border-radius: $s-border-radius-default;
+    padding: 10px;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+}
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
new file mode 100644
index 00000000..cda3a96e
--- /dev/null
+++ b/src/styles/pagination.scss
@@ -0,0 +1,96 @@
+@import "./variables";
+
+.el-pagination {
+  .btn-prev, .btn-next {
+    color: $s-color-basic-black;
+  }
+  button:disabled {
+    color: $s-color-neutral-inactive;
+  }
+  .el-pagination__sizes {
+    .el-select .el-input {
+      width: 65px;
+      .el-select__caret, .el-input__inner {
+        color: $s-color-basic-black;
+        font-weight: bold;
+      }
+      .el-select__caret {
+        margin-right: 6px;
+      }
+      .el-input__inner {
+        border-radius: 8px;
+        padding-right: 20px;
+        padding-left: 5px;
+        background-color: $s-color-neutral-placeholder;
+        border-color: $s-color-neutral-placeholder;
+      }
+      &.is-disabled {
+        .el-select__caret, .el-input__inner {
+          color: $s-color-neutral-inactive;
+        }
+      }
+    }
+  }
+  .el-pagination__editor.el-input {
+    .el-input__inner {
+      border-radius: 8px;
+      background-color: $s-color-neutral-placeholder;
+      border-color: $s-color-neutral-placeholder;
+      color: $s-color-basic-black;
+    }
+    &.is-disabled .el-input__inner {
+      color: $s-color-neutral-inactive;
+    }
+  }
+  .el-pagination__total, .per-page-text, .el-pagination__jump {
+    color: $s-color-neutral-secondary;
+    font-weight: normal;
+  }
+  .el-pager li {
+    color: $s-color-basic-black;
+    &.btn-quicknext, &.btn-quickprev {
+      color: $s-color-basic-black;
+    }
+    &:not(.disabled) {
+      &:hover, &.active {
+        color: $s-color-main-brand;
+      }
+    }
+    &.disabled {
+      color: $s-color-neutral-inactive;
+    }
+  }
+  &.is-background {
+    .el-pager li {
+      background-color: $s-color-neutral-placeholder;
+      &.disabled {
+        color: $s-color-neutral-inactive;
+      }
+    }
+    .btn-prev, .btn-next {
+      background-color: $s-color-neutral-placeholder;
+      &:disabled {
+        color: $s-color-neutral-inactive;
+        background-color: $s-color-neutral-placeholder;
+      }
+      &:not(:disabled):hover {
+        color: $s-color-main-brand;
+      }
+    }
+  }
+  &.el-pagination--small {
+    .el-pagination__editor {
+      height: 22px;
+    }
+    .el-pagination__sizes .el-select .el-input {
+      .el-input__inner {
+        height: 22px !important;
+        font-size: 12px;
+      }
+      .el-select__caret {
+        font-size: 12px;
+        line-height: 23px;
+      }
+    }
+  }
+}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
new file mode 100644
index 00000000..3e3c61ff
--- /dev/null
+++ b/src/styles/radio.scss
@@ -0,0 +1,86 @@
+@import "./variables";
+@import "./common";
+
+.el-radio {
+  &.s-big {
+    @extend .s-big;
+    line-height: $s-size-big;
+    &.is-bordered {
+      padding-top: 18px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 20px;
+      height: 20px;
+      border-width: 2px;
+      &::after {
+        width: 10px;
+        height: 10px;
+      }
+    }
+  }
+  &.s-medium {
+    @extend .s-medium;
+    line-height: $s-size-medium;
+    > .el-radio__input .el-radio__inner {
+      width: 16px;
+      height: 16px;
+      border-width: 2px;
+      &::after {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+  &.s-small {
+    @extend .s-small;
+    line-height: $s-size-small;
+    &.is-bordered {
+      padding-top: 9px;
+    }
+    > .el-radio__label {
+      font-size: 12px;
+    }
+    > .el-radio__input .el-radio__inner {
+      width: 14px;
+      height: 14px;
+      border-width: 2px;
+      &::after {
+        width: 6px;
+        height: 6px;
+      }
+    }
+  }
+  &.is-bordered {
+    line-height: 0;
+    &.is-disabled {
+      border-color: $s-color-neutral-border;
+    }
+  }
+  > .el-radio__input {
+    .el-radio__inner {
+      background-color: $s-color-basic-white;
+      &::after {
+        background-color: $s-color-main-brand;
+      }
+    }
+    &.is-checked .el-radio__inner {
+      background-color: $s-color-basic-white;
+    }
+    &.is-disabled {
+      .el-radio__inner {
+        background-color: $s-color-neutral-placeholder;
+        border-color: $s-color-neutral-border;
+      }
+      &.is-checked .el-radio__inner {
+        background-color: $s-color-neutral-placeholder;
+        border-color: $s-color-neutral-border;
+        &::after {
+          background-color: $s-color-neutral-inactive;
+        }
+      }
+      & + span.el-radio__label {
+        color: $s-color-neutral-inactive;
+      }
+    }
+  }
+}
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
new file mode 100644
index 00000000..a71ee520
--- /dev/null
+++ b/src/styles/scroll-sections.scss
@@ -0,0 +1,63 @@
+@import "./variables";
+
+.s-scroll-sections {
+  font-family: $font-family-default;
+  font-size: 14px;
+}
+.s-scroll-menu {
+  font-weight: 600;
+  ul {
+    position: sticky;
+    top: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .s-scroll-item {
+    text-decoration: none;
+    a {
+      display: block;
+      padding: 8px 16px;
+      text-decoration: none;
+      cursor: pointer;
+      color: var(--s-menu-color-text);
+      &:hover {
+        color: var(--s-menu-color-hover);
+      }
+      &.active {
+        color: var(--s-menu-color-text-active);
+        border-left: 2px solid var(--s-menu-color-text-active);
+      }
+      &.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        color: $s-color-neutral-inactive;
+        border-left: none;
+      }
+    }
+  }
+}
+.s-scroll-content {
+  padding-bottom: 90%;
+  color: $s-color-basic-black;
+  .title {
+    font-size: 16px;
+  }
+}
+.s-scroll-section-item {
+  padding: 10px 20px;
+  &:first-child {
+    margin-top: 10px;
+  }
+  &:last-child {
+    margin-bottom: 10px;
+    .el-divider.el-divider--horizontal {
+      height: 0;
+    }
+  }
+  .title {
+    font-weight: bold;
+    display: block;
+    padding-bottom: 12px;
+  }
+}
diff --git a/src/styles/select.scss b/src/styles/select.scss
new file mode 100644
index 00000000..1b1cb09c
--- /dev/null
+++ b/src/styles/select.scss
@@ -0,0 +1,220 @@
+@import "./variables";
+@import "./icons";
+
+.s-select {
+  font-family: $font-family-default;
+  width: 100%;
+  position: relative;
+  .el-select {
+    width: 100%;
+    i.el-icon-arrow-up {
+      font-family: $icons-font;
+      font-size: 16px;
+      &:before {
+        content: $s-icon-chevron-top;
+      }
+    }
+    .el-input {
+      &.is-focus .el-input__inner {
+        border-color: $s-color-neutral-placeholder;
+      }
+      .el-input__inner {
+        &::placeholder {
+          color: $s-color-neutral-secondary;
+          opacity: 1; // Firefox
+        }
+      }
+      .el-select__caret {
+        color: $s-color-neutral-secondary;
+      }
+    }
+  }
+  &.s-input-type {
+    .el-select {
+      .el-input__inner {
+        height: $s-size-big;
+        padding: 0 15px;
+        border: 1px solid $s-color-neutral-placeholder;
+        background-color: $s-color-neutral-placeholder;
+        &:focus {
+          border-color: $s-color-neutral-placeholder;
+        }
+      }
+    }
+    &:hover {
+      .el-select {
+        .el-input__inner {
+          border-color: $s-color-neutral-hover;
+          background-color: $s-color-neutral-hover;
+        }
+      }
+      .s-placeholder {
+        background-color: $s-color-neutral-hover;
+      }
+    }
+    .s-placeholder + .el-select {
+      .el-input__inner {
+        padding-top: 12px;
+      }
+      .el-input__validateIcon {
+        padding-top: 11px;
+      }
+    }
+    &.s-focused {
+      .el-select {
+        .el-input__inner {
+          border-color: $s-color-neutral-border;
+          background-color: $s-color-basic-white;
+        }
+      }
+      .s-placeholder {
+        background-color: $s-color-basic-white;
+      }
+    }
+    &.s-disabled {
+      .el-select {
+        .el-select__caret {
+          color: $s-color-neutral-secondary;
+        }
+        .el-input__inner, .el-input__inner:hover {
+          border-color: $s-color-neutral-border;
+          color: $s-color-neutral-secondary;
+          background-color: $s-color-neutral-placeholder;
+          &::placeholder {
+            color: $s-color-neutral-secondary;
+          }
+        }
+      }
+      .s-placeholder {
+        color: $s-color-neutral-secondary;
+        background-color: $s-color-neutral-placeholder;
+      }
+    }
+  }
+  .s-placeholder {
+    // TODO: add default animation from material-ui
+    color: $s-color-neutral-secondary;
+    text-align: left;
+    font-size: 12px;
+    padding: 0 15px;
+    padding-top: 5px;
+    top: 1px;
+    left: 1px;
+    border-top-left-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    width: calc(100% - 15px);
+    background-color: $s-color-neutral-placeholder;
+    pointer-events: none;
+  }
+  &.s-select-type {
+    .el-select {
+      .el-input__inner {
+        border-radius: 8px;
+        padding-left: 12px;
+        font-weight: bold;
+        &:hover {
+          border-color: $s-color-neutral-inactive;
+        }
+        &::placeholder {
+          color: $s-color-neutral-tertiary;
+          font-weight: bold;
+        }
+        &:focus {
+          border-color: $s-color-neutral-inactive;
+        }
+      }
+      .el-select__caret {
+        color: $s-color-neutral-tertiary;
+      }
+    }
+    &.s-focused {
+      .el-select {
+        .el-input__inner {
+          color: $s-color-basic-black;
+          border-color: $s-color-neutral-inactive;
+          &::placeholder {
+            color: $s-color-basic-black;
+          }
+        }
+        .el-select__caret {
+          color: $s-color-basic-black;
+        }
+      }
+    }
+    &.s-has-value {
+      .el-select {
+        .el-select__caret {
+          color: $s-color-basic-black;
+        }
+      }
+    }
+    &.s-disabled {
+      .el-select {
+        .el-input__inner {
+          color: $s-color-neutral-inactive;
+          border-color: $s-color-neutral-border;
+          background-color: $s-color-basic-white;
+          &::placeholder {
+            color: $s-color-neutral-inactive;
+          }
+        }
+        .el-select__caret {
+          color: $s-color-neutral-inactive;
+        }
+      }
+    }
+  }
+}
+.el-select-dropdown__item {
+  &.hover {
+    background-color: transparent;
+  }
+  &:hover {
+    background-color: $s-color-neutral-placeholder;
+  }
+  &.is-disabled {
+    color: $s-color-neutral-inactive;;
+  }
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item {
+  > span {
+    padding-left: 16px;
+    vertical-align: top;
+    color: $s-color-basic-black;
+  }
+  &::before {
+    font-family: "element-icons";
+    content: "\e6da";
+    color: $s-color-basic-white;
+    border: 1px solid $s-color-neutral-border;
+    background-color: $s-color-basic-white;
+    font-size: 16px;
+    font-weight: bold;
+    padding: 1px;
+    border-radius: 4px;
+  }
+  &.selected {
+    font-weight: normal;
+    &.hover {
+      background-color: transparent;
+    }
+    &:hover {
+      background-color: $s-color-neutral-placeholder;
+    }
+    &::before {
+      color: $s-color-basic-white;
+      background-color: $s-color-main-brand;
+      border-color: $s-color-main-brand;
+    }
+    &::after {
+      content: '';
+    }
+  }
+}
+.el-select-group__wrap:not(:last-of-type)::after {
+  background-color: $s-color-neutral-hover;
+}
+.el-select-group__title {
+  color: $s-color-neutral-tertiary;
+}
diff --git a/src/styles/table.scss b/src/styles/table.scss
new file mode 100644
index 00000000..bccb38cd
--- /dev/null
+++ b/src/styles/table.scss
@@ -0,0 +1,102 @@
+@import "./variables";
+
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: $s-color-neutral-hover;
+  border-left: none;
+  border-right: none;
+}
+.el-table__body {
+  tr {
+    &.hover-row {
+      > td,
+      &.current-row > td,
+      &.el-table__row--striped > td,
+      &.el-table__row--striped.current-row > td {
+        background-color: $s-color-neutral-hover;
+        border-left: none;
+        border-right: none;
+      }
+    }
+  }
+}
+.el-table--border th:first-child .cell,
+.el-table--border td:first-child .cell {
+  padding-left: 13px;
+}
+.el-table thead {
+  color: $s-color-neutral-tertiary;
+}
+.el-table--group,
+.el-table--border,
+.el-table th.is-leaf,
+.el-table td,
+.el-table--border th {
+  border-color: $s-color-neutral-placeholder;
+}
+.el-table--group::after,
+.el-table--border::after {
+  background-color: $s-color-neutral-placeholder;
+}
+.el-table:not(.el-table--border)::before {
+  background-color: $s-color-basic-white;
+}
+.el-table tr:last-child td {
+  border-bottom-color: $s-color-basic-white;
+}
+.el-table__header {
+  label.el-checkbox.is-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    height: 4px;
+    top: 7px;
+  }
+}
+.el-table {
+  .el-checkbox__inner {
+    height: 20px;
+    width: 20px;
+    border-radius: 4px;
+    &::after {
+      border-width: 2px;
+      height: 10px;
+      left: 6px;
+      width: 5px;
+    }
+  }
+}
+.el-table--medium {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 5px;
+  }
+  .el-checkbox__inner {
+    height: 16px;
+    width: 16px;
+    &::after {
+      top: 0;
+      left: 4px;
+      height: 8px;
+      width: 4px;
+    }
+  }
+}
+.el-table--small {
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+    top: 4px;
+  }
+  .el-checkbox__inner {
+    height: 14px;
+    width: 14px;
+    &::after {
+      top: 1px;
+      left: 4px;
+      height: 6px;
+      width: 2px;
+    }
+  }
+}
+.el-table__header-wrapper tbody td,
+.el-table__footer-wrapper tbody td {
+  background-color: $s-color-neutral-placeholder;
+}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
new file mode 100644
index 00000000..c8cfb68d
--- /dev/null
+++ b/src/styles/tabs.scss
@@ -0,0 +1,81 @@
+@import "./variables";
+
+.s-tabs {
+  width: 100%;
+  .el-tabs__item {
+    font-weight: bold;
+    .el-icon-close {
+      &:before {
+        font-weight: bold;
+      }
+      &:hover {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+    &:not(.is-active) {
+      color: $s-color-basic-black;
+    }
+  }
+  .el-tab-pane {
+    color: $s-color-basic-black;
+  }
+  .el-tabs__nav-wrap::after {
+    background-color: $s-color-neutral-placeholder;
+  }
+  .el-tabs--card {
+    > .el-tabs__header {
+      border-bottom-color: $s-color-neutral-hover;
+      .el-tabs__nav {
+        border-color: $s-color-neutral-hover;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+      }
+      .el-tabs__item {
+        border-left-color: $s-color-neutral-hover;
+      }
+    }
+  }
+  .el-tabs--border-card {
+    border-color: $s-color-neutral-border;
+    > .el-tabs__header {
+      background-color: $s-color-neutral-placeholder;
+      border-bottom-color: $s-color-neutral-border;
+    }
+  }
+  &.s-rounded {
+    .el-tabs__header {
+      width: fit-content;
+    }
+    .el-tabs__nav-wrap {
+      background-color: $s-color-neutral-placeholder;
+      border-radius: 8px;
+      height: 32px;
+      padding-top: 2px;
+      padding-left: 2px;
+      padding-right: 2px;
+      &::after, .el-tabs__active-bar {
+        height: 0;
+      }
+      .el-tabs__item {
+        padding: 0 32px;
+        height: 28px;
+        line-height: 28px;
+        &:nth-child(2), &:last-child {
+          padding: 0 32px;
+        }
+        &.is-active {
+          color: $s-color-basic-black;
+          background-color: $s-color-basic-white;
+          box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
+          border-radius: 8px;
+        }
+        &: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);
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
new file mode 100644
index 00000000..cfbb375a
--- /dev/null
+++ b/src/styles/tooltip.scss
@@ -0,0 +1,11 @@
+@import "./variables";
+
+.el-tooltip__popper {
+  &.is-dark {
+    background-color: $s-color-basic-black;
+  }
+  &.is-light {
+    color: $s-color-basic-black;
+  }
+  border-color: $s-color-basic-black;
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 6f082b07..d7f07aa6 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -24,45 +24,6 @@ $s-size-small: 32px !default;
 
 $s-border-radius-default: 4px !default;
 // Fonts
-@font-face {
-  font-family: "soramitsu-icons";
-  src: url("~@/assets/fonts/soramitsu-icons.woff");
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-@font-face {
-  font-family: "SoraB";
-  src: url("~@/assets/fonts/Sora-Bold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraEB";
-  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraSB";
-  src: url("~@/assets/fonts/Sora-SemiBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-Regular.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "JetBrainsMono";
-  src: url("~@/assets/fonts/JetBrainsMono-Regular.woff");
-  font-weight: normal;
-  font-style: normal;
-}
-
 $font-family-default: 'Sora', sans-serif !important;
 $font-family-mono: 'JetBrainsMono', monospace !important;
 // Responsive

From 5cf80b919df724d44ff181c0a7be8b26e9744fe6 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Sat, 3 Oct 2020 12:58:03 +0400
Subject: [PATCH 03/11] Fix json input logic

---
 src/components/Input/SJsonInput.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Input/SJsonInput.vue b/src/components/Input/SJsonInput.vue
index d3d9562d..8e979cdf 100644
--- a/src/components/Input/SJsonInput.vue
+++ b/src/components/Input/SJsonInput.vue
@@ -96,6 +96,7 @@ export default class SJsonInput extends Vue {
     if (!this.readonly) {
       this.$emit('input', value)
       this.$emit('change', value)
+      return
     }
     if (!this.jsoneditor) {
       return

From 8e1e06231fd83397f3c32e0ed77647f03abe072f Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:12:40 +0400
Subject: [PATCH 04/11] Move stories to another directory

---
 src/stories/Breadcrumb/SBreadcrumb.stories.ts        |  2 +-
 src/stories/Breadcrumb/SBreadcrumbItem.stories.ts    |  2 +-
 src/stories/Collapse/SCollapse.stories.ts            |  2 +-
 src/stories/Collapse/SCollapseItem.stories.ts        |  2 +-
 src/stories/Dropdown/SDropdown.stories.ts            |  2 +-
 src/stories/Dropdown/SDropdownItem.stories.ts        |  2 +-
 src/stories/Form/SForm.stories.ts                    |  2 +-
 src/stories/Form/SFormItem.stories.ts                |  2 +-
 src/stories/Menu/SMenu.stories.ts                    |  2 +-
 src/stories/Menu/SMenuItem.stories.ts                |  2 +-
 src/stories/Menu/SMenuItemGroup.stories.ts           |  2 +-
 src/stories/Menu/SSubmenu.stories.ts                 |  2 +-
 src/stories/SButton.stories.ts                       | 12 ++++++------
 src/stories/SCard.stories.ts                         |  2 +-
 src/stories/SCheckbox.stories.ts                     |  2 +-
 ...{DatePicker.stories.ts => SDatePicker.stories.ts} |  2 +-
 src/stories/SDialog.stories.ts                       |  2 +-
 src/stories/SDivider.stories.ts                      |  2 +-
 src/stories/SIcon.stories.ts                         |  2 +-
 src/stories/SInput.stories.ts                        |  4 ++--
 src/stories/SJsonInput.stories.ts                    |  2 +-
 src/stories/SPagination.stories.ts                   |  2 +-
 src/stories/{Radio => }/SRadio.stories.ts            |  6 +++---
 src/stories/STooltip.stories.ts                      |  2 +-
 .../ScrollSections/SScrollSectionItem.stories.ts     |  2 +-
 .../ScrollSections/SScrollSections.stories.ts        |  2 +-
 src/stories/Select/SOption.stories.ts                |  2 +-
 src/stories/Select/SOptionGroup.stories.ts           |  2 +-
 src/stories/Select/SSelect.stories.ts                |  2 +-
 src/stories/Tab/STabs.stories.ts                     |  2 +-
 src/stories/Table/STable.stories.ts                  |  2 +-
 src/stories/Table/STableColumn.stories.ts            |  2 +-
 32 files changed, 40 insertions(+), 40 deletions(-)
 rename src/stories/{DatePicker.stories.ts => SDatePicker.stories.ts} (99%)
 rename src/stories/{Radio => }/SRadio.stories.ts (94%)

diff --git a/src/stories/Breadcrumb/SBreadcrumb.stories.ts b/src/stories/Breadcrumb/SBreadcrumb.stories.ts
index aae615bf..c1ed6b33 100644
--- a/src/stories/Breadcrumb/SBreadcrumb.stories.ts
+++ b/src/stories/Breadcrumb/SBreadcrumb.stories.ts
@@ -2,7 +2,7 @@ import { SBreadcrumb, SBreadcrumbItem } from '../../components'
 
 export default {
   component: SBreadcrumb,
-  title: 'Design System/Breadcrumb'
+  title: 'Design System/Components/Breadcrumb'
 }
 
 export const configurable = () => ({
diff --git a/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts b/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
index 4ff181ce..022bb31e 100644
--- a/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
+++ b/src/stories/Breadcrumb/SBreadcrumbItem.stories.ts
@@ -2,7 +2,7 @@ import { SBreadcrumb, SBreadcrumbItem } from '../../components'
 
 export default {
   component: SBreadcrumbItem,
-  title: 'Design System/Breadcrumb/Breadcrumb Item'
+  title: 'Design System/Components/Breadcrumb/Breadcrumb Item'
 }
 
 export const configurable = () => ({
diff --git a/src/stories/Collapse/SCollapse.stories.ts b/src/stories/Collapse/SCollapse.stories.ts
index fb86361b..ae75bcff 100644
--- a/src/stories/Collapse/SCollapse.stories.ts
+++ b/src/stories/Collapse/SCollapse.stories.ts
@@ -4,7 +4,7 @@ import { SCollapse, SCollapseItem } from '../../components'
 
 export default {
   component: SCollapse,
-  title: 'Design System/Collapse',
+  title: 'Design System/Components/Collapse',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Collapse/SCollapseItem.stories.ts b/src/stories/Collapse/SCollapseItem.stories.ts
index 9c00c89e..811cf42a 100644
--- a/src/stories/Collapse/SCollapseItem.stories.ts
+++ b/src/stories/Collapse/SCollapseItem.stories.ts
@@ -4,7 +4,7 @@ import { SCollapse, SCollapseItem } from '../../components'
 
 export default {
   component: SCollapseItem,
-  title: 'Design System/Collapse/Collapse Item',
+  title: 'Design System/Components/Collapse/Collapse Item',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index 0a6962a4..a4ec4086 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -6,7 +6,7 @@ import { ButtonTypes } from '../../components/Button'
 
 export default {
   component: SDropdown,
-  title: 'Design System/Dropdown',
+  title: 'Design System/Components/Dropdown',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Dropdown/SDropdownItem.stories.ts b/src/stories/Dropdown/SDropdownItem.stories.ts
index 62315af4..1d4b952f 100644
--- a/src/stories/Dropdown/SDropdownItem.stories.ts
+++ b/src/stories/Dropdown/SDropdownItem.stories.ts
@@ -4,7 +4,7 @@ import { SDropdown, SDropdownItem } from '../../components'
 
 export default {
   component: SDropdownItem,
-  title: 'Design System/Dropdown/DropdownItem',
+  title: 'Design System/Components/Dropdown/DropdownItem',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Form/SForm.stories.ts b/src/stories/Form/SForm.stories.ts
index e50f2adb..594c1a63 100644
--- a/src/stories/Form/SForm.stories.ts
+++ b/src/stories/Form/SForm.stories.ts
@@ -5,7 +5,7 @@ import { LabelPosition } from '../../components/Form'
 
 export default {
   component: SForm,
-  title: 'Design System/Form',
+  title: 'Design System/Components/Form',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Form/SFormItem.stories.ts b/src/stories/Form/SFormItem.stories.ts
index 9eda0eaa..9f258560 100644
--- a/src/stories/Form/SFormItem.stories.ts
+++ b/src/stories/Form/SFormItem.stories.ts
@@ -4,7 +4,7 @@ import { SButton, SForm, SFormItem, SInput } from '../../components'
 
 export default {
   component: SFormItem,
-  title: 'Design System/Form/Form Item',
+  title: 'Design System/Components/Form/Form Item',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Menu/SMenu.stories.ts b/src/stories/Menu/SMenu.stories.ts
index e495fa32..e56016a9 100644
--- a/src/stories/Menu/SMenu.stories.ts
+++ b/src/stories/Menu/SMenu.stories.ts
@@ -2,7 +2,7 @@ import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../compon
 
 export default {
   component: SMenu,
-  title: 'Design System/Menu',
+  title: 'Design System/Components/Menu',
   excludeStories: /.*Data$/
 }
 
diff --git a/src/stories/Menu/SMenuItem.stories.ts b/src/stories/Menu/SMenuItem.stories.ts
index 06ed9368..54a22282 100644
--- a/src/stories/Menu/SMenuItem.stories.ts
+++ b/src/stories/Menu/SMenuItem.stories.ts
@@ -2,7 +2,7 @@ import { SMenu, SMenuItem } from '../../components'
 
 export default {
   component: SMenuItem,
-  title: 'Design System/Menu/MenuItem'
+  title: 'Design System/Components/Menu/MenuItem'
 }
 
 export const defaultUsage = () => ({
diff --git a/src/stories/Menu/SMenuItemGroup.stories.ts b/src/stories/Menu/SMenuItemGroup.stories.ts
index 27f3364b..83382ee3 100644
--- a/src/stories/Menu/SMenuItemGroup.stories.ts
+++ b/src/stories/Menu/SMenuItemGroup.stories.ts
@@ -2,7 +2,7 @@ import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../compon
 
 export default {
   component: SMenuItemGroup,
-  title: 'Design System/Menu/MenuItemGroup',
+  title: 'Design System/Components/Menu/MenuItemGroup',
   excludeStories: /.*Data$/
 }
 
diff --git a/src/stories/Menu/SSubmenu.stories.ts b/src/stories/Menu/SSubmenu.stories.ts
index 1b1ec25b..fa36aa2b 100644
--- a/src/stories/Menu/SSubmenu.stories.ts
+++ b/src/stories/Menu/SSubmenu.stories.ts
@@ -2,7 +2,7 @@ import { SAside, SMenu, SMenuItem, SSubmenu } from '../../components'
 
 export default {
   component: SSubmenu,
-  title: 'Design System/Menu/Submenu'
+  title: 'Design System/Components/Menu/Submenu'
 }
 
 export const defaultUsage = () => ({
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index e82316f7..980a010e 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -5,7 +5,7 @@ import { ButtonSize, ButtonTypes } from '../components/Button'
 
 export default {
   component: SButton,
-  title: 'Design System/Button',
+  title: 'Design System/Components/Button',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
@@ -53,7 +53,7 @@ export const configurable = () => ({
   }
 })
 
-export const differentTypesData = Object.values(ButtonTypes).map(type => {
+export const differentTypeButtonsData = Object.values(ButtonTypes).map(type => {
   const label = type[0].toUpperCase() + type.slice(1)
   const data = { type } as any
   if (type === ButtonTypes.ACTION) {
@@ -79,7 +79,7 @@ export const withDifferentTypes = () => ({
              </s-row>`,
   props: {
     items: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
@@ -120,7 +120,7 @@ export const disabled = () => ({
              </s-row>`,
   props: {
     items: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
@@ -141,7 +141,7 @@ export const loading = () => ({
              </s-row>`,
   props: {
     items: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
@@ -172,7 +172,7 @@ export const withIcon = () => ({
       default: () => differentSizeData
     },
     differentTypesData: {
-      default: () => differentTypesData
+      default: () => differentTypeButtonsData
     }
   }
 })
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 5619a475..5146bc9b 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -5,7 +5,7 @@ import { CardShadow } from '../components/Card'
 
 export default {
   component: SCard,
-  title: 'Design System/Card',
+  title: 'Design System/Components/Card',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 24f4c0ec..517f77c1 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -5,7 +5,7 @@ import { CheckboxSize } from '../components/Checkbox'
 
 export default {
   component: SCheckbox,
-  title: 'Design System/Checkbox',
+  title: 'Design System/Components/Checkbox',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/DatePicker.stories.ts b/src/stories/SDatePicker.stories.ts
similarity index 99%
rename from src/stories/DatePicker.stories.ts
rename to src/stories/SDatePicker.stories.ts
index aaedea14..428593f3 100644
--- a/src/stories/DatePicker.stories.ts
+++ b/src/stories/SDatePicker.stories.ts
@@ -5,7 +5,7 @@ import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePick
 
 export default {
   component: SDatePicker,
-  title: 'Design System/Date Picker',
+  title: 'Design System/Components/Date Picker',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index fbe98861..9de70626 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -4,7 +4,7 @@ import { SDialog, SRow, SButton } from '../components'
 
 export default {
   component: SDialog,
-  title: 'Design System/Dialog',
+  title: 'Design System/Components/Dialog',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/SDivider.stories.ts b/src/stories/SDivider.stories.ts
index c494ced5..a18abf33 100644
--- a/src/stories/SDivider.stories.ts
+++ b/src/stories/SDivider.stories.ts
@@ -5,7 +5,7 @@ import { DividerDirection, ContentPosition } from '../components/Divider/consts'
 
 export default {
   component: SDivider,
-  title: 'Design System/Divider',
+  title: 'Design System/Components/Divider',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/SIcon.stories.ts b/src/stories/SIcon.stories.ts
index 70148a6c..67c75152 100644
--- a/src/stories/SIcon.stories.ts
+++ b/src/stories/SIcon.stories.ts
@@ -5,7 +5,7 @@ import { Icons } from '../components/Icon'
 
 export default {
   component: SIcon,
-  title: 'Design System/Icon',
+  title: 'Design System/Components/Icon',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 2ec7cda8..88cf7a08 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -5,7 +5,7 @@ import { InputType } from '../components/Input'
 
 export default {
   component: SInput,
-  title: 'Design System/Input',
+  title: 'Design System/Components/Input',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
@@ -110,7 +110,7 @@ export const focused = () => ({
                  style="padding-bottom: 20px;"
                >
                  <s-input
-                   class="focused"
+                   class="s-focused"
                    v-model="item.model"
                    :type="item.type"
                    :placeholder="item.placeholder"
diff --git a/src/stories/SJsonInput.stories.ts b/src/stories/SJsonInput.stories.ts
index 125c63d7..68adc1e6 100644
--- a/src/stories/SJsonInput.stories.ts
+++ b/src/stories/SJsonInput.stories.ts
@@ -4,7 +4,7 @@ import { SJsonInput, SRow } from '../components'
 
 export default {
   component: SJsonInput,
-  title: 'Design System/JSON Input',
+  title: 'Design System/Components/JSON Input',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index a500f55b..85acfe7c 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -4,7 +4,7 @@ import { SPagination, SRow } from '../components'
 
 export default {
   component: SPagination,
-  title: 'Design System/Pagination',
+  title: 'Design System/Components/Pagination',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Radio/SRadio.stories.ts b/src/stories/SRadio.stories.ts
similarity index 94%
rename from src/stories/Radio/SRadio.stories.ts
rename to src/stories/SRadio.stories.ts
index 880fd528..0b693797 100644
--- a/src/stories/Radio/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -1,11 +1,11 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
-import { SRadio, SRow, SCol } from '../../components'
-import { RadioSize } from '../../components/Radio'
+import { SRadio, SRow, SCol } from '../components'
+import { RadioSize } from '../components/Radio'
 
 export default {
   component: SRadio,
-  title: 'Design System/Radio',
+  title: 'Design System/Components/Radio',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index 9f051909..a75c75ed 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -5,7 +5,7 @@ import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
 
 export default {
   component: STooltip,
-  title: 'Design System/Tooltip',
+  title: 'Design System/Components/Tooltip',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/ScrollSections/SScrollSectionItem.stories.ts b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
index db980f2c..104163a6 100644
--- a/src/stories/ScrollSections/SScrollSectionItem.stories.ts
+++ b/src/stories/ScrollSections/SScrollSectionItem.stories.ts
@@ -4,7 +4,7 @@ import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
   component: SScrollSectionItem,
-  title: 'Design System/Scroll Sections/Scroll Section Item',
+  title: 'Design System/Components/Scroll Sections/Scroll Section Item',
   decorators: [StoryRouter({}, { initialEntry: '/' })]
 }
 
diff --git a/src/stories/ScrollSections/SScrollSections.stories.ts b/src/stories/ScrollSections/SScrollSections.stories.ts
index 1607c1c8..8eae751b 100644
--- a/src/stories/ScrollSections/SScrollSections.stories.ts
+++ b/src/stories/ScrollSections/SScrollSections.stories.ts
@@ -5,7 +5,7 @@ import { SScrollSectionItem, SScrollSections } from '../../components'
 
 export default {
   component: SScrollSections,
-  title: 'Design System/Scroll Sections',
+  title: 'Design System/Components/Scroll Sections',
   decorators: [StoryRouter({}, { initialEntry: '/' }), withKnobs]
 }
 
diff --git a/src/stories/Select/SOption.stories.ts b/src/stories/Select/SOption.stories.ts
index 79770041..00fc47de 100644
--- a/src/stories/Select/SOption.stories.ts
+++ b/src/stories/Select/SOption.stories.ts
@@ -4,7 +4,7 @@ import { SSelect, SRow, SCol, SOption } from '../../components'
 
 export default {
   component: SOption,
-  title: 'Design System/Select/Option',
+  title: 'Design System/Components/Select/Option',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Select/SOptionGroup.stories.ts b/src/stories/Select/SOptionGroup.stories.ts
index 49c9a274..da0218c2 100644
--- a/src/stories/Select/SOptionGroup.stories.ts
+++ b/src/stories/Select/SOptionGroup.stories.ts
@@ -4,7 +4,7 @@ import { SSelect, SRow, SCol, SOption, SOptionGroup } from '../../components'
 
 export default {
   component: SOptionGroup,
-  title: 'Design System/Select/Option Group',
+  title: 'Design System/Components/Select/Option Group',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
index 0fb66cba..94955808 100644
--- a/src/stories/Select/SSelect.stories.ts
+++ b/src/stories/Select/SSelect.stories.ts
@@ -5,7 +5,7 @@ import { InputTypes } from '../../components/Select'
 
 export default {
   component: SSelect,
-  title: 'Design System/Select',
+  title: 'Design System/Components/Select',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index 12a66950..ba750b3e 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -5,7 +5,7 @@ import { TabsPosition, TabsType } from '../../components/Tab'
 
 export default {
   component: STabs,
-  title: 'Design System/Tabs',
+  title: 'Design System/Components/Tabs',
   decorators: [withKnobs]
 }
 
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 23a39ef9..4814232f 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -5,7 +5,7 @@ import { TableSize } from '../../components/Table'
 
 export default {
   component: STable,
-  title: 'Design System/Table',
+  title: 'Design System/Components/Table',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }
diff --git a/src/stories/Table/STableColumn.stories.ts b/src/stories/Table/STableColumn.stories.ts
index 1ec6025b..33f28c88 100644
--- a/src/stories/Table/STableColumn.stories.ts
+++ b/src/stories/Table/STableColumn.stories.ts
@@ -7,7 +7,7 @@ import { tableData } from './STable.stories'
 
 export default {
   component: STableColumn,
-  title: 'Design System/Table/Table Column',
+  title: 'Design System/Components/Table/Table Column',
   decorators: [withKnobs],
   excludeStories: /.*Data$/
 }

From 139d49e9a200fd3af8eb55c09147816d3dfbc8df Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:13:14 +0400
Subject: [PATCH 05/11] Add enum with css colors

---
 src/types/index.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/types/index.ts b/src/types/index.ts
index 70855221..30255c57 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -8,3 +8,21 @@ export enum Direction {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'
 }
+
+export enum CSSColors {
+  MainBrand = '--s-color-main-brand',
+  MainHover = '--s-color-main-hover',
+  MainInactive = '--s-color-main-inactive',
+  MainHoverLight = '--s-color-main-hover-light',
+  MainBase = '--s-color-main-base',
+  NeutralPrimary = '--s-color-neutral-primary',
+  NeutralSecondary = '--s-color-neutral-secondary',
+  NeutralTertiary = '--s-color-neutral-tertiary',
+  NeutralInactive = '--s-color-neutral-inactive',
+  NeutralBorder = '--s-color-neutral-border',
+  NeutralHover = '--s-color-neutral-hover',
+  NeutralPlaceholder = '--s-color-neutral-placeholder',
+  Error = '--s-color-error',
+  BasicBlack = '--s-color-basic-black',
+  BasicWhite = '--s-color-basic-white'
+}

From d6a8892543785937a733390810f396bcf6f6b1ae Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:14:11 +0400
Subject: [PATCH 06/11] Add css variables with colors for theme switching in
 real-time

---
 src/styles/variables.scss | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d7f07aa6..238ae45c 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -5,7 +5,7 @@ $s-color-main-inactive: #F6CCD1 !default;
 $s-color-main-hover-light: #FEE6E7 !default;
 $s-color-main-base: #FFF9FA !default;
 // Neutral colors
-$s-color-neutral-primary: #53565A !default;
+$s-color-neutral-primary: #53565A !default; // TODO: not used
 $s-color-neutral-secondary: #75787B !default;
 $s-color-neutral-tertiary: #909296 !default;
 $s-color-neutral-inactive: #C8C9C7 !default;
@@ -53,3 +53,21 @@ $--breakpoints-spec: (
   'lg-and-down': (max-width: $--xl - 1),
   'xl-only' : (min-width: $--xl),
 );
+
+:root {
+  --s-color-main-brand: #{$s-color-main-brand};
+  --s-color-main-hover: #{$s-color-main-hover};
+  --s-color-main-inactive: #{$s-color-main-inactive};
+  --s-color-main-hover-light: #{$s-color-main-hover-light};
+  --s-color-main-base: #{$s-color-main-base};
+  --s-color-neutral-primary: #{$s-color-neutral-primary};
+  --s-color-neutral-secondary: #{$s-color-neutral-secondary};
+  --s-color-neutral-tertiary: #{$s-color-neutral-tertiary};
+  --s-color-neutral-inactive: #{$s-color-neutral-inactive};
+  --s-color-neutral-border: #{$s-color-neutral-border};
+  --s-color-neutral-hover: #{$s-color-neutral-hover};
+  --s-color-neutral-placeholder: #{$s-color-neutral-placeholder};
+  --s-color-error: #{$s-color-error};
+  --s-color-basic-black: #{$s-color-basic-black};
+  --s-color-basic-white: #{$s-color-basic-white};
+}

From ec3693b9408487d6a83459b197b56cddb0f48c55 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:14:52 +0400
Subject: [PATCH 07/11] Modify styles according to theme switching in real-time

---
 src/styles/breadcrumbs.scss     |  17 +++-
 src/styles/button.scss          |  94 ++++++++++++---------
 src/styles/card.scss            |   4 +-
 src/styles/checkbox.scss        |  33 ++++++--
 src/styles/collapse.scss        |  14 +++-
 src/styles/common.scss          |  53 ++++++++++--
 src/styles/datepicker.scss      | 141 +++++++++++++++++++++-----------
 src/styles/dialog.scss          |   5 +-
 src/styles/dropdown.scss        |  19 +++--
 src/styles/form.scss            |  35 +++++---
 src/styles/icons.scss           |   2 +-
 src/styles/input.scss           |  29 ++++---
 src/styles/json-input.scss      |  27 +++---
 src/styles/pagination.scss      |  61 +++++++++-----
 src/styles/radio.scss           |  37 ++++++---
 src/styles/scroll-sections.scss |   4 +-
 src/styles/select.scss          |  94 ++++++++++-----------
 src/styles/table.scss           |  25 ++++--
 src/styles/tabs.scss            |  39 +++++----
 src/styles/tooltip.scss         |   7 +-
 20 files changed, 473 insertions(+), 267 deletions(-)

diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
index 4ca5eba3..04c87bfa 100644
--- a/src/styles/breadcrumbs.scss
+++ b/src/styles/breadcrumbs.scss
@@ -1,16 +1,27 @@
 @import "./variables";
 
 .el-breadcrumb__separator {
-  color: $s-color-neutral-secondary;
+  color: var(--s-color-neutral-secondary);
   font-weight: normal;
 }
 .el-breadcrumb__inner {
-  color: $s-color-neutral-secondary;
+  color: var(--s-color-neutral-secondary);
   &.is-link {
-    color: $s-color-neutral-secondary;
+    color: var(--s-color-neutral-secondary);
     font-weight: normal;
+    &:hover {
+      color: var(--s-color-main-brand);
+    }
+  }
+  a:hover {
+    color: var(--s-color-main-brand);
   }
 }
 .el-breadcrumb__item:last-child {
   pointer-events: none;
+  .el-breadcrumb__inner {
+    &, &:hover, & a, & a:hover {
+      color: var(--s-color-basic-black);
+    }
+  }
 }
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 08e36278..7687da51 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -17,63 +17,68 @@
   }
 }
 .s-primary {
+  background-color: var(--s-color-main-brand);
+  border-color: var(--s-color-main-brand);
   &:hover, &:active, &:focus {
-    background-color: $s-color-main-hover;
-    border-color: $s-color-main-hover;
+    background-color: var(--s-color-main-hover);
+    border-color: var(--s-color-main-hover);
   }
   &:disabled, &:disabled:hover {
-    background-color: $s-color-main-inactive;
-    border-color: $s-color-main-inactive;
+    background-color: var(--s-color-main-inactive);
+    border-color: var(--s-color-main-inactive);
   }
 }
 .s-secondary {
+  background-color: var(--s-color-basic-white);
+  color: var(--s-color-basic-black);
+  border-color: var(--s-color-neutral-border);
   &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: $s-color-basic-white;
-    border-color: $s-color-main-brand;
+    color: var(--s-color-main-brand);
+    background-color: var(--s-color-basic-white);
+    border-color: var(--s-color-main-brand);
   }
   &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-    border-color: $s-color-neutral-border;
+    color: var(--s-color-neutral-inactive);
+    border-color: var(--s-color-neutral-border);
   }
   &.s-alternative {
     &:hover, &:active, &:focus {
-      color: $s-color-basic-black;
-      background-color: $s-color-neutral-hover;
-      border-color: $s-color-neutral-hover;
+      color: var(--s-color-basic-black);
+      background-color: var(--s-color-neutral-hover);
+      border-color: var(--s-color-neutral-hover);
     }
     &:disabled, &:disabled:hover {
-      color: $s-color-neutral-inactive;
-      border-color: $s-color-neutral-border;
-      background-color: $s-color-basic-white;
+      color: var(--s-color-neutral-inactive);
+      border-color: var(--s-color-neutral-border);
+      background-color: var(--s-color-basic-white);
     }
   }
 }
 .s-link {
-  color: $s-color-basic-black;
+  color: var(--s-color-basic-black);
   border: none;
   background-color: transparent;
   &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
+    color: var(--s-color-main-brand);
     background-color: transparent;
   }
   &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
+    color: var(--s-color-neutral-inactive);
   }
 }
 .s-tertiary {
-  color: $s-color-basic-black;
-  border-color: $s-color-neutral-placeholder;
-  background-color: $s-color-neutral-placeholder;
+  color: var(--s-color-basic-black);
+  border-color: var(--s-color-neutral-placeholder);
+  background-color: var(--s-color-neutral-placeholder);
   &:hover, &:active, &:focus {
-    color: $s-color-main-brand;
-    background-color: $s-color-neutral-placeholder;
-    border-color: $s-color-neutral-placeholder;
+    color: var(--s-color-main-brand);
+    background-color: var(--s-color-neutral-placeholder);
+    border-color: var(--s-color-neutral-placeholder);
   }
   &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
-    background-color: $s-color-neutral-placeholder;
-    border-color: $s-color-neutral-placeholder;
+    color: var(--s-color-neutral-inactive);
+    background-color: var(--s-color-neutral-placeholder);
+    border-color: var(--s-color-neutral-placeholder);
   }
 }
 .s-action {
@@ -100,28 +105,28 @@
       margin-top: -2px;
     }
   }
-  color: $s-color-basic-black;
-  background-color: $s-color-neutral-placeholder;
-  border-color: $s-color-neutral-placeholder;
+  color: var(--s-color-basic-black);
+  background-color: var(--s-color-neutral-placeholder);
+  border-color: var(--s-color-neutral-placeholder);
   border-radius: 8px;
   &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-    color: $s-color-basic-black;
-    background-color: $s-color-neutral-hover;
-    border-color: $s-color-neutral-hover;
+    color: var(--s-color-basic-black);
+    background-color: var(--s-color-neutral-hover);
+    border-color: var(--s-color-neutral-hover);
   }
   &:disabled, &:disabled:hover {
-    color: $s-color-neutral-inactive;
+    color: var(--s-color-neutral-inactive);
   }
   &.s-alternative {
-    background-color: $s-color-basic-white;
-    border-color: $s-color-neutral-border;
+    background-color: var(--s-color-basic-white);
+    border-color: var(--s-color-neutral-border);
     &:hover, &:active, &:focus, &:disabled, &:disabled:hover {
-      color: $s-color-basic-black;
-      background-color: $s-color-neutral-placeholder;
-      border-color: $s-color-neutral-placeholder;
+      color: var(--s-color-basic-black);
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-placeholder);
     }
     &:disabled, &:disabled:hover {
-      color: $s-color-neutral-inactive;
+      color: var(--s-color-neutral-inactive);
     }
   }
 }
@@ -138,3 +143,12 @@ button {
     }
   }
 }
+.el-button-group .el-button--plain {
+  color: var(--s-color-basic-black);
+  border-color: var(--s-color-neutral-border);
+  &:hover, &:active, &:focus {
+    color: var(--s-color-main-brand);
+    background-color: var(--s-color-basic-white);
+    border-color: var(--s-color-main-brand);
+  }
+}
diff --git a/src/styles/card.scss b/src/styles/card.scss
index 31846ea8..ad6fcd9b 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -1,9 +1,9 @@
 @import "./variables";
 
 .s-card {
-  color: $s-color-basic-black;
+  color: var(--s-color-basic-black);
   border-radius: 8px;
-  border-color: $s-color-neutral-border;
+  border-color: var(--s-color-neutral-border);
   &.s-clickable {
     cursor: pointer;
   }
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index 9c866215..84fcd705 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -2,6 +2,15 @@
 @import "./common";
 
 .el-checkbox {
+  color: var(--s-color-basic-black);
+  &.is-bordered {
+    &, &.is-disabled {
+      border-color: var(--s-color-neutral-border);
+    }
+    &.is-checked {
+      border-color: var(--s-color-main-brand);
+    }
+  }
   &.s-big {
     @extend .s-big;
     padding: 17px 0 9px 0;
@@ -53,7 +62,7 @@
   }
 }
 .el-checkbox__inner {
-  border-color: $s-color-neutral-inactive;
+  border-color: var(--s-color-neutral-inactive);
   border-radius: 4px;
   width: 20px;
   height: 20px;
@@ -63,25 +72,37 @@
     left: 6px;
     width: 5px;
   }
+  &:hover {
+    border-color: var(--s-color-main-brand);
+  }
 }
 .el-checkbox__input {
   &.is-disabled {
     .el-checkbox__inner {
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-border);
     }
     & + span.el-checkbox__label {
-      color: $s-color-neutral-inactive;
+      color: var(--s-color-neutral-inactive);
     }
   }
+  &.is-focus > .el-checkbox__inner {
+    border-color: var(--s-color-main-brand);
+  }
   &.is-checked {
+    > .el-checkbox__inner {
+      background-color: var(--s-color-main-brand);
+      border-color: var(--s-color-main-brand);
+    }
     &.is-disabled > .el-checkbox__inner {
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-border);
       &::after {
-        border-color: $s-color-neutral-inactive;
+        border-color: var(--s-color-neutral-inactive);
       }
     }
     & + .el-checkbox__label {
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
     }
   }
 }
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index 4c0c05c4..79d5386e 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -19,7 +19,7 @@
     border-bottom-color: #F5F5F5;
   }
   &header {
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
     border-bottom-color: #F5F5F5;
     &.is-active {
       border-bottom-color: transparent;
@@ -31,17 +31,23 @@
       padding: 8px;
       width: 32px;
       height: 32px;
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
       border-radius: 50%;
       &.is-active {
         transform: rotate(180deg);
       }
+      &:hover, &:focus {
+        background-color: var(--s-color-neutral-hover);
+      }
     }
   }
   &content {
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
   }
 }
 .el-collapse-item.is-disabled .el-collapse-item__header {
-  color: $s-color-neutral-inactive;
+  color: var(--s-color-neutral-inactive);
+  .el-collapse-item__arrow.el-icon-arrow-right {
+    background-color: var(--s-color-neutral-hover);
+  }
 }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index cd6fca8a..3e7919a5 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: 'Sora', sans-serif !important;
+  font-family: $font-family-default;
 }
 
 html {
@@ -14,6 +14,43 @@ html {
   margin: 0;
 }
 
+/* Typography */
+h1 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 36px;
+}
+
+h2 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 30px;
+}
+
+h3 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 24px;
+}
+
+h4 {
+  font-family: $font-family-default;
+  font-weight: normal;
+  font-size: 18px;
+}
+
+h5 {
+  font-family: $font-family-default;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+h6 {
+  font-family: $font-family-default;
+  font-weight: bold;
+  font-size: 14px;
+}
+
 .s-flex {
   display: flex;
 }
@@ -70,7 +107,7 @@ button > span {
 .el-message-box {
   .el-message-box__header {
     .el-message-box__title {
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
       font-size: 16px;
     }
   }
@@ -80,15 +117,15 @@ button > span {
       font-size: 14px;
       border-radius: 4px;
       &:hover, &:active, &:focus {
-        color: $s-color-main-brand;
-        background-color: $s-color-basic-white;
-        border-color: $s-color-main-brand;
+        color: var(--s-color-main-brand);
+        background-color: var(--s-color-basic-white);
+        border-color: var(--s-color-main-brand);
       }
       &.el-button--primary {
         &:hover, &:active, &:focus {
-          color: $s-color-basic-white;
-          background-color: $s-color-main-hover;
-          border-color: $s-color-main-hover;
+          color: var(--s-color-basic-white);
+          background-color: var(--s-color-main-hover);
+          border-color: var(--s-color-main-hover);
         }
       }
     }
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index 1931b0fd..451d93b5 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -10,21 +10,24 @@
       width: 100%;
     }
     .el-range-separator {
-      color: $s-color-neutral-tertiary;
+      color: var(--s-color-neutral-tertiary);
     }
     .el-input__inner, .el-range-input {
       &::placeholder {
-        color: $s-color-neutral-secondary;
+        color: var(--s-color-neutral-secondary);
         opacity: 1; // Firefox
       }
     }
     &.is-active {
-      border-color: $s-color-neutral-border;
+      border-color: var(--s-color-neutral-border);
     }
   }
   &.s-has-value {
     .el-date-editor .el-range-separator {
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
+    }
+    .el-range-input {
+      color: var(--s-color-basic-black);
     }
   }
   &.s-input-type {
@@ -32,15 +35,15 @@
     .el-input__inner {
       height: $s-size-big;
       padding: 0 15px;
-      border: 1px solid $s-color-neutral-placeholder;
-      background-color: $s-color-neutral-placeholder;
+      border: 1px solid var(--s-color-neutral-placeholder);
+      background-color: var(--s-color-neutral-placeholder);
     }
     &:hover {
       .el-input__inner {
-        border-color: $s-color-neutral-hover;
+        border-color: var(--s-color-neutral-hover);
       }
       .el-input__inner, .s-placeholder {
-        background-color: $s-color-neutral-hover;
+        background-color: var(--s-color-neutral-hover);
       }
     }
     .s-placeholder + .el-date-editor {
@@ -53,25 +56,25 @@
     }
     &.s-focused {
       .el-input__inner {
-        border-color: $s-color-neutral-border;
+        border-color: var(--s-color-neutral-border);
       }
       .el-input__inner, .s-placeholder {
-        background-color: $s-color-basic-white;
+        background-color: var(--s-color-basic-white);
       }
     }
     &.s-disabled {
       .el-input__inner {
-        border-color: $s-color-neutral-border;
+        border-color: var(--s-color-neutral-border);
       }
       .el-input__inner, .s-placeholder {
-        color: $s-color-neutral-secondary;
-        background-color: $s-color-neutral-placeholder;
+        color: var(--s-color-neutral-secondary);
+        background-color: var(--s-color-neutral-placeholder);
       }
     }
   }
   .s-placeholder {
     // TODO: add default animation from material-ui
-    color: $s-color-neutral-secondary;
+    color: var(--s-color-neutral-secondary);
     text-align: left;
     font-size: 12px;
     padding: 0 15px;
@@ -82,7 +85,7 @@
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
-    background-color: $s-color-neutral-placeholder;
+    background-color: var(--s-color-neutral-placeholder);
     pointer-events: none;
   }
   &.s-select-type {
@@ -94,10 +97,10 @@
         border-radius: 8px;
         padding-left: 12px;
         &:hover {
-          border-color: $s-color-neutral-inactive;
+          border-color: var(--s-color-neutral-inactive);
         }
         &::placeholder, .el-range-input::placeholder {
-          color: $s-color-neutral-tertiary;
+          color: var(--s-color-neutral-tertiary);
           font-weight: bold;
         }
       }
@@ -107,13 +110,13 @@
       right: 10px;
       top: 30%;
       pointer-events: none;
-      color: $s-color-neutral-tertiary;
+      color: var(--s-color-neutral-tertiary);
       transition: transform .3s;
     }
     &.s-focused {
       .el-date-editor.el-input__inner,
       .el-date-editor .el-input__inner {
-        border-color: $s-color-neutral-inactive;
+        border-color: var(--s-color-neutral-inactive);
       }
       &:not(.disabled) .s-icon-chevron-bottom {
         transform: rotate(180deg);
@@ -121,31 +124,31 @@
     }
     &.s-has-value {
       .s-icon-chevron-bottom {
-        color: $s-color-basic-black;
+        color: var(--s-color-basic-black);
       }
     }
     &.s-disabled {
       .el-date-editor.el-input__inner,
       .el-date-editor .el-input__inner {
-        color: $s-color-neutral-inactive;
-        border-color: $s-color-neutral-border;
-        background-color: $s-color-basic-white;
+        color: var(--s-color-neutral-inactive);
+        border-color: var(--s-color-neutral-border);
+        background-color: var(--s-color-basic-white);
         &::placeholder {
-          color: $s-color-neutral-inactive;
+          color: var(--s-color-neutral-inactive);
         }
         .el-range-input {
-          background-color: $s-color-basic-white;
-          color: $s-color-neutral-inactive;
+          background-color: var(--s-color-basic-white);
+          color: var(--s-color-neutral-inactive);
           &::placeholder {
-            color: $s-color-neutral-inactive;
+            color: var(--s-color-neutral-inactive);
           }
         }
         .el-range-separator {
-          color: $s-color-neutral-inactive;
+          color: var(--s-color-neutral-inactive);
         }
       }
       .s-icon-chevron-bottom {
-        color: $s-color-neutral-inactive;
+        color: var(--s-color-neutral-inactive);
       }
     }
   }
@@ -156,77 +159,115 @@
 .el-date-table th,
 .el-picker-panel__link-btn,
 .el-time-panel__btn,
-.el-date-range-picker__time-header > .el-icon-arrow-right {
-  color: $s-color-basic-black;
+.el-date-range-picker__time-header > .el-icon-arrow-right,
+.el-year-table td .cell,
+.el-month-table td .cell {
+  color: var(--s-color-basic-black);
+}
+.el-picker-panel__icon-btn:hover,
+.el-date-picker__header-label:hover,
+.el-year-table td.today .cell,
+.el-year-table td .cell:hover,
+.el-year-table td.current:not(.disabled) .cell,
+.el-month-table td.today .cell,
+.el-month-table td.current:not(.disabled) .cell,
+.el-month-table td .cell:hover,
+.el-picker-panel__shortcut:hover {
+  color: var(--s-color-main-brand);
 }
 .el-picker-panel {
-  border-color: $s-color-neutral-hover;
+  border-color: var(--s-color-neutral-hover);
   .el-picker-panel__content {
     .el-date-table {
       td {
-        &.available:hover {
-          color: $s-color-main-brand;
+        &.available:hover, &.today span {
+          color: var(--s-color-main-brand);
         }
         &.next-month, &.prev-month {
-          color: $s-color-neutral-inactive;
+          color: var(--s-color-neutral-inactive);
+        }
+        &.current:not(.disabled), &.selected, &.start-date, &.end-date {
+          span {
+            background-color: var(--s-color-main-brand);
+            color: var(--s-color-basic-white);
+          }
         }
       }
       th {
-        border-bottom-color: $s-color-neutral-hover;
+        border-bottom-color: var(--s-color-neutral-hover);
+      }
+    }
+    .el-month-table td {
+      &.start-date, &.end-date {
+        .cell {
+          background-color: var(--s-color-main-brand);
+          color: var(--s-color-basic-white);
+        }
       }
     }
   }
   .el-picker-panel__footer {
-    border-top-color: $s-color-neutral-hover;
+    border-top-color: var(--s-color-neutral-hover);
     > .el-button {
       height: 32px;
       border-radius: 4px;
+      &:hover, &:focus {
+        color: var(--s-color-main-brand);
+      }
+      &.is-plain {
+        &:hover, &:focus {
+          border-color: var(--s-color-main-brand);
+        }
+      }
     }
   }
   div[x-arrow].popper__arrow {
-    border-bottom-color: $s-color-neutral-hover;
+    border-bottom-color: var(--s-color-neutral-hover);
   }
 }
 .el-time-panel {
   border-radius: 4px;
-  border-color: $s-color-neutral-hover;
+  border-color: var(--s-color-neutral-hover);
   .el-time-panel__footer {
-    border-top-color: $s-color-neutral-hover;
+    border-top-color: var(--s-color-neutral-hover);
+    .confirm {
+      color: var(--s-color-main-brand);
+    }
   }
   .el-time-spinner__item {
     &.active:not(.disabled) {
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
     }
     &:hover:not(.disabled):not(.active) {
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
     }
   }
   .el-time-panel__content {
     &::after, &::before {
-      border-top-color: $s-color-neutral-hover;
-      border-bottom-color: $s-color-neutral-hover;
+      border-top-color: var(--s-color-neutral-hover);
+      border-bottom-color: var(--s-color-neutral-hover);
     }
   }
 }
 .el-date-table.is-week-mode .el-date-table__row {
   &.current, &:hover {
     div {
-      background-color: $s-color-main-hover-light;
+      background-color: var(--s-color-main-hover-light);
     }
   }
 }
 .el-month-table td.in-range div {
-  background-color: $s-color-main-hover-light;
+  background-color: var(--s-color-main-hover-light);
   &:hover {
-    background-color: $s-color-main-hover-light;
+    background-color: var(--s-color-main-hover-light);
   }
 }
 .el-date-table td.in-range div {
-  background-color: $s-color-main-hover-light;
+  background-color: var(--s-color-main-hover-light);
   &:hover {
-    background-color: $s-color-main-hover-light;
+    background-color: var(--s-color-main-hover-light);
   }
 }
 .el-date-range-picker__content.is-left {
-  border-right-color: $s-color-neutral-hover;
+  border-right-color: var(--s-color-neutral-hover);
 }
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index 981359b0..dd7dda6a 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -5,9 +5,12 @@
   .el-dialog__title {
     font-weight: bold;
     font-size: 16px;
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
   }
   > * {
     word-break: break-word;
   }
+  .el-dialog__body {
+    color: var(--s-color-basic-black);
+  }
 }
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index 119697a4..02921f0f 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -1,6 +1,7 @@
 @import "./variables";
 
 .el-dropdown {
+  color: var(--s-color-basic-black);
   > .el-button-group {
     > .el-button {
       float: left;
@@ -8,11 +9,11 @@
     .el-dropdown__caret-button {
       &.s-secondary {
         &::before {
-          background-color: $s-color-neutral-border;
+          background-color: var(--s-color-neutral-border);
         }
         &:hover, &:active, &:focus {
           &::before {
-            background-color: $s-color-main-brand;
+            background-color: var(--s-color-main-brand);
           }
         }
       }
@@ -35,9 +36,15 @@
     font-size: 24px;
   }
 }
-.el-dropdown-menu__item:not(.is-disabled) {
-  &:hover, &:focus {
-    background-color: $s-color-neutral-placeholder;
-    color: $s-color-basic-black;
+.el-dropdown-menu__item {
+  color: var(--s-color-basic-black);
+  &:not(.is-disabled) {
+    &:hover, &:focus {
+      background-color: var(--s-color-neutral-placeholder);
+      color: var(--s-color-basic-black);
+    }
+  }
+  &.is-disabled {
+    color: var(--s-color-neutral-inactive);
   }
 }
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 3374314e..2e3013ab 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -8,6 +8,9 @@
       width: 100%;
     }
   }
+  &__label {
+    color: var(--s-color-basic-black);
+  }
   &.is-error {
     margin-bottom: 6px;
     > .el-form-item__content {
@@ -15,42 +18,42 @@
         position: relative;
         padding-top: 8px;
         padding-left: 30px;
-        color: $s-color-basic-black;
+        color: var(--s-color-basic-black);
         &::before {
           content: '';
         }
       }
       > [class^="s-input"]:not(.disabled) {
-        .placeholder {
-          color: $s-color-error;
-          background-color: $s-color-main-base;
+        .s-placeholder {
+          color: var(--s-color-error);
+          background-color: var(--s-color-main-base);
         }
         input, textarea {
-          background-color: $s-color-main-base;
+          background-color: var(--s-color-main-base);
           &::placeholder {
-            color: $s-color-error;
+            color: var(--s-color-error);
           }
         }
         &:hover {
-          .placeholder,
+          .s-placeholder,
           .el-input > input,
           .el-textarea > textarea {
-            background-color: $s-color-main-hover-light;
+            background-color: var(--s-color-main-hover-light);
           }
           .el-input > input,
           .el-textarea > textarea {
-            border-color: $s-color-error;
+            border-color: var(--s-color-error);
           }
         }
         &.focused {
-          .placeholder,
+          .s-placeholder,
           .el-input > input,
           .el-textarea > textarea {
-            background-color: $s-color-basic-white;
+            background-color: var(--s-color-basic-white);
           }
           .el-input > input,
           .el-textarea > textarea {
-            border-color: $s-color-error;
+            border-color: var(--s-color-error);
           }
         }
       }
@@ -60,7 +63,13 @@
       bottom: 0;
       left: 4px;
       font-size: 16px;
-      color: $s-color-error;
+      color: var(--s-color-error);
+    }
+    .el-input__inner,
+    .el-input__inner:focus,
+    .el-textarea__inner,
+    .el-textarea__inner:focus {
+      border-color: var(--s-color-error);
     }
   }
 }
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 0a8993c7..01fbb196 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -9,7 +9,7 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: $s-color-basic-black;
+  color: var(--s-color-basic-black);
 }
 $icons-font: 'soramitsu-icons' !important;
 /*_____________________________________________Icons variables_____________________________________________*/
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 737b9915..08a4b891 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -10,7 +10,7 @@
   }
   .s-placeholder {
     // TODO: add default animation from material-ui
-    color: $s-color-neutral-secondary;
+    color: var(--s-color-neutral-secondary);
     text-align: left;
     font-size: 12px;
     padding: 0 15px;
@@ -21,7 +21,7 @@
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
-    background-color: $s-color-neutral-placeholder;
+    background-color: var(--s-color-neutral-placeholder);
     pointer-events: none;
   }
   .el-input,
@@ -30,10 +30,10 @@
     > input,
     > textarea {
       height: $s-size-big;
-      border: 1px solid $s-color-neutral-placeholder;
-      background-color: $s-color-neutral-placeholder;
+      border: 1px solid var(--s-color-neutral-placeholder);
+      background-color: var(--s-color-neutral-placeholder);
       &::placeholder {
-        color: $s-color-neutral-secondary;
+        color: var(--s-color-neutral-secondary);
         opacity: 1; // Firefox
       }
     }
@@ -48,34 +48,34 @@
     .s-placeholder,
     .el-input > input,
     .el-textarea > textarea {
-      background-color: $s-color-neutral-hover;
+      background-color: var(--s-color-neutral-hover);
     }
     .el-input > input,
     .el-textarea > textarea {
-      border-color: $s-color-neutral-hover;
+      border-color: var(--s-color-neutral-hover);
     }
   }
   &.s-focused {
     .s-placeholder,
     .el-input > input,
     .el-textarea > textarea {
-      background-color: $s-color-basic-white;
+      background-color: var(--s-color-basic-white);
     }
     .el-input > input,
     .el-textarea > textarea {
-      border-color: $s-color-neutral-border;
+      border-color: var(--s-color-neutral-border);
     }
   }
   &.s-disabled {
     .s-placeholder,
     .el-input > input,
     .el-textarea > textarea {
-      color: $s-color-neutral-secondary;
-      background-color: $s-color-neutral-placeholder;
+      color: var(--s-color-neutral-secondary);
+      background-color: var(--s-color-neutral-placeholder);
     }
     .el-input > input,
     .el-textarea > textarea {
-      border-color: $s-color-neutral-border;
+      border-color: var(--s-color-neutral-border);
     }
   }
   &.s-autofill {
@@ -85,7 +85,7 @@
   }
   .el-input > input {
     &:-webkit-autofill {
-      color: $s-color-basic-black !important;
+      color: var(--s-color-basic-black) !important;
       animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
     }
     &:not(:-webkit-autofill) {
@@ -132,6 +132,9 @@
     }
   }
 }
+.el-input__inner, .el-textarea__inner {
+  color: var(--s-color-basic-black);
+}
 @keyframes onAutoFillStart {
   from {/**/}
   to {/**/}
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index b17a0b6f..5526c51e 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -8,7 +8,7 @@ $color-ide-boolean: #0000FF;
 
 .s-json-input {
   width: 100%;
-  border: 1px solid $s-color-neutral-border;
+  border: 1px solid var(--s-color-neutral-border);
   border-radius: $s-border-radius-default;
   &.s-disabled {
     .ace-jsoneditor {
@@ -18,7 +18,7 @@ $color-ide-boolean: #0000FF;
       }
       .ace_scroller,
       .ace_gutter-active-line {
-        background-color: $s-color-neutral-placeholder;
+        background-color: var(--s-color-neutral-placeholder);
       }
     }
   }
@@ -43,11 +43,11 @@ $color-ide-boolean: #0000FF;
     .ace_fold {
       border: none;
       background: none;
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
       margin-top: -13px;
     }
     .ace_text-layer {
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
     }
     .ace_variable {
       color: $color-ide-variable;
@@ -68,10 +68,10 @@ $color-ide-boolean: #0000FF;
       border-top-right-radius: 3px;
       .ace_marker-layer {
         .ace_active-line {
-          background-color: $s-color-neutral-placeholder;
+          background-color: var(--s-color-neutral-placeholder);
         }
         .ace_selection {
-          background: $s-color-neutral-border;
+          background: var(--s-color-neutral-border);
         }
       }
     }
@@ -79,8 +79,8 @@ $color-ide-boolean: #0000FF;
   .jsoneditor-statusbar {
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
-    background-color: $s-color-neutral-placeholder;
-    color: $s-color-neutral-secondary;
+    background-color: var(--s-color-neutral-placeholder);
+    color: var(--s-color-neutral-secondary);
     .jsoneditor-parse-error-icon {
       // If full error message will be needed, then it should be removed
       display: none !important;
@@ -88,9 +88,10 @@ $color-ide-boolean: #0000FF;
     }
   }
   .ace_gutter {
-    background-color: $s-color-neutral-placeholder;
+    background-color: var(--s-color-neutral-placeholder);
+    color: var(--s-color-basic-black);
     &-active-line {
-      background-color: $s-color-neutral-border;
+      background-color: var(--s-color-neutral-border);
     }
     // .ace_gutter-cell.ace_error {
     //   @extend .s-icon-error; // TODO: fix the path for icon
@@ -102,9 +103,9 @@ $color-ide-boolean: #0000FF;
   }
   .ace_tooltip {
     font-family: $font-family-default;
-    background: $s-color-basic-black;
-    border-color: $s-color-basic-black;
-    color: $s-color-basic-white;
+    background: var(--s-color-basic-black);
+    border-color: var(--s-color-basic-black);
+    color: var(--s-color-basic-white);
     border-radius: $s-border-radius-default;
     padding: 10px;
     font-size: 12px;
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index cda3a96e..e7533cd1 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -1,17 +1,31 @@
 @import "./variables";
 
 .el-pagination {
+  &.is-background .el-pager li:not(.disabled) {
+    &.active {
+      background-color: var(--s-color-main-brand);
+      color: var(--s-color-basic-white);
+    }
+    &:hover {
+      color: var(--s-color-main-brand);
+    }
+  }
   .btn-prev, .btn-next {
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
   }
-  button:disabled {
-    color: $s-color-neutral-inactive;
+  button {
+    &:hover {
+      color: var(--s-color-main-brand);
+    }
+    &:disabled {
+      color: var(--s-color-neutral-inactive);
+    }
   }
   .el-pagination__sizes {
     .el-select .el-input {
       width: 65px;
       .el-select__caret, .el-input__inner {
-        color: $s-color-basic-black;
+        color: var(--s-color-basic-black);
         font-weight: bold;
       }
       .el-select__caret {
@@ -21,12 +35,12 @@
         border-radius: 8px;
         padding-right: 20px;
         padding-left: 5px;
-        background-color: $s-color-neutral-placeholder;
-        border-color: $s-color-neutral-placeholder;
+        background-color: var(--s-color-neutral-placeholder);
+        border-color: var(--s-color-neutral-placeholder);
       }
       &.is-disabled {
         .el-select__caret, .el-input__inner {
-          color: $s-color-neutral-inactive;
+          color: var(--s-color-neutral-inactive);
         }
       }
     }
@@ -34,47 +48,47 @@
   .el-pagination__editor.el-input {
     .el-input__inner {
       border-radius: 8px;
-      background-color: $s-color-neutral-placeholder;
-      border-color: $s-color-neutral-placeholder;
-      color: $s-color-basic-black;
+      background-color: var(--s-color-neutral-placeholder);
+      border-color: var(--s-color-neutral-placeholder);
+      color: var(--s-color-basic-black);
     }
     &.is-disabled .el-input__inner {
-      color: $s-color-neutral-inactive;
+      color: var(--s-color-neutral-inactive);
     }
   }
   .el-pagination__total, .per-page-text, .el-pagination__jump {
-    color: $s-color-neutral-secondary;
+    color: var(--s-color-neutral-secondary);
     font-weight: normal;
   }
   .el-pager li {
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
     &.btn-quicknext, &.btn-quickprev {
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
     }
     &:not(.disabled) {
       &:hover, &.active {
-        color: $s-color-main-brand;
+        color: var(--s-color-main-brand);
       }
     }
     &.disabled {
-      color: $s-color-neutral-inactive;
+      color: var(--s-color-neutral-inactive);
     }
   }
   &.is-background {
     .el-pager li {
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
       &.disabled {
-        color: $s-color-neutral-inactive;
+        color: var(--s-color-neutral-inactive);
       }
     }
     .btn-prev, .btn-next {
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
       &:disabled {
-        color: $s-color-neutral-inactive;
-        background-color: $s-color-neutral-placeholder;
+        color: var(--s-color-neutral-inactive);
+        background-color: var(--s-color-neutral-placeholder);
       }
       &:not(:disabled):hover {
-        color: $s-color-main-brand;
+        color: var(--s-color-main-brand);
       }
     }
   }
@@ -94,3 +108,6 @@
     }
   }
 }
+.el-select-dropdown__item.selected {
+  color: var(--s-color-main-brand);
+}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 3e3c61ff..f7a0079d 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -2,6 +2,7 @@
 @import "./common";
 
 .el-radio {
+  color: var(--s-color-basic-black);
   &.s-big {
     @extend .s-big;
     line-height: $s-size-big;
@@ -51,35 +52,49 @@
     }
   }
   &.is-bordered {
+    border-color: var(--s-color-neutral-border);
     line-height: 0;
+    &.is-checked {
+      border-color: var(--s-color-main-brand);
+    }
     &.is-disabled {
-      border-color: $s-color-neutral-border;
+      border-color: var(--s-color-neutral-border);
     }
   }
   > .el-radio__input {
     .el-radio__inner {
-      background-color: $s-color-basic-white;
+      border-color: var(--s-color-neutral-border);
+      background-color: var(--s-color-basic-white);
+      &:hover {
+        border-color: var(--s-color-main-brand);
+      }
       &::after {
-        background-color: $s-color-main-brand;
+        background-color: var(--s-color-main-brand);
       }
     }
-    &.is-checked .el-radio__inner {
-      background-color: $s-color-basic-white;
+    &.is-checked {
+      .el-radio__inner {
+        background-color: var(--s-color-basic-white);
+        border-color: var(--s-color-main-brand);
+      }
+      + .el-radio__label {
+        color: var(--s-color-main-brand);
+      }
     }
     &.is-disabled {
       .el-radio__inner {
-        background-color: $s-color-neutral-placeholder;
-        border-color: $s-color-neutral-border;
+        background-color: var(--s-color-neutral-placeholder);
+        border-color: var(--s-color-neutral-border);
       }
       &.is-checked .el-radio__inner {
-        background-color: $s-color-neutral-placeholder;
-        border-color: $s-color-neutral-border;
+        background-color: var(--s-color-neutral-placeholder);
+        border-color: var(--s-color-neutral-border);
         &::after {
-          background-color: $s-color-neutral-inactive;
+          background-color: var(--s-color-neutral-inactive);
         }
       }
       & + span.el-radio__label {
-        color: $s-color-neutral-inactive;
+        color: var(--s-color-neutral-inactive);
       }
     }
   }
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
index a71ee520..6cb84a54 100644
--- a/src/styles/scroll-sections.scss
+++ b/src/styles/scroll-sections.scss
@@ -31,7 +31,7 @@
       &.disabled {
         cursor: not-allowed;
         pointer-events: none;
-        color: $s-color-neutral-inactive;
+        color: var(--s-color-neutral-inactive);
         border-left: none;
       }
     }
@@ -39,7 +39,7 @@
 }
 .s-scroll-content {
   padding-bottom: 90%;
-  color: $s-color-basic-black;
+  color: var(--s-color-basic-black);
   .title {
     font-size: 16px;
   }
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 1b1cb09c..7684f070 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -16,16 +16,16 @@
     }
     .el-input {
       &.is-focus .el-input__inner {
-        border-color: $s-color-neutral-placeholder;
+        border-color: var(--s-color-neutral-placeholder);
       }
       .el-input__inner {
         &::placeholder {
-          color: $s-color-neutral-secondary;
+          color: var(--s-color-neutral-secondary);
           opacity: 1; // Firefox
         }
       }
       .el-select__caret {
-        color: $s-color-neutral-secondary;
+        color: var(--s-color-neutral-secondary);
       }
     }
   }
@@ -34,22 +34,22 @@
       .el-input__inner {
         height: $s-size-big;
         padding: 0 15px;
-        border: 1px solid $s-color-neutral-placeholder;
-        background-color: $s-color-neutral-placeholder;
+        border: 1px solid var(--s-color-neutral-placeholder);
+        background-color: var(--s-color-neutral-placeholder);
         &:focus {
-          border-color: $s-color-neutral-placeholder;
+          border-color: var(--s-color-neutral-placeholder);
         }
       }
     }
     &:hover {
       .el-select {
         .el-input__inner {
-          border-color: $s-color-neutral-hover;
-          background-color: $s-color-neutral-hover;
+          border-color: var(--s-color-neutral-hover);
+          background-color: var(--s-color-neutral-hover);
         }
       }
       .s-placeholder {
-        background-color: $s-color-neutral-hover;
+        background-color: var(--s-color-neutral-hover);
       }
     }
     .s-placeholder + .el-select {
@@ -63,37 +63,37 @@
     &.s-focused {
       .el-select {
         .el-input__inner {
-          border-color: $s-color-neutral-border;
-          background-color: $s-color-basic-white;
+          border-color: var(--s-color-neutral-border);
+          background-color: var(--s-color-basic-white);
         }
       }
       .s-placeholder {
-        background-color: $s-color-basic-white;
+        background-color: var(--s-color-basic-white);
       }
     }
     &.s-disabled {
       .el-select {
         .el-select__caret {
-          color: $s-color-neutral-secondary;
+          color: var(--s-color-neutral-secondary);
         }
         .el-input__inner, .el-input__inner:hover {
-          border-color: $s-color-neutral-border;
-          color: $s-color-neutral-secondary;
-          background-color: $s-color-neutral-placeholder;
+          border-color: var(--s-color-neutral-border);
+          color: var(--s-color-neutral-secondary);
+          background-color: var(--s-color-neutral-placeholder);
           &::placeholder {
-            color: $s-color-neutral-secondary;
+            color: var(--s-color-neutral-secondary);
           }
         }
       }
       .s-placeholder {
-        color: $s-color-neutral-secondary;
-        background-color: $s-color-neutral-placeholder;
+        color: var(--s-color-neutral-secondary);
+        background-color: var(--s-color-neutral-placeholder);
       }
     }
   }
   .s-placeholder {
     // TODO: add default animation from material-ui
-    color: $s-color-neutral-secondary;
+    color: var(--s-color-neutral-secondary);
     text-align: left;
     font-size: 12px;
     padding: 0 15px;
@@ -104,7 +104,7 @@
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
-    background-color: $s-color-neutral-placeholder;
+    background-color: var(--s-color-neutral-placeholder);
     pointer-events: none;
   }
   &.s-select-type {
@@ -114,53 +114,53 @@
         padding-left: 12px;
         font-weight: bold;
         &:hover {
-          border-color: $s-color-neutral-inactive;
+          border-color: var(--s-color-neutral-inactive);
         }
         &::placeholder {
-          color: $s-color-neutral-tertiary;
+          color: var(--s-color-neutral-tertiary);
           font-weight: bold;
         }
         &:focus {
-          border-color: $s-color-neutral-inactive;
+          border-color: var(--s-color-neutral-inactive);
         }
       }
       .el-select__caret {
-        color: $s-color-neutral-tertiary;
+        color: var(--s-color-neutral-tertiary);
       }
     }
     &.s-focused {
       .el-select {
         .el-input__inner {
-          color: $s-color-basic-black;
-          border-color: $s-color-neutral-inactive;
+          color: var(--s-color-basic-black);
+          border-color: var(--s-color-neutral-inactive);
           &::placeholder {
-            color: $s-color-basic-black;
+            color: var(--s-color-basic-black);
           }
         }
         .el-select__caret {
-          color: $s-color-basic-black;
+          color: var(--s-color-basic-black);
         }
       }
     }
     &.s-has-value {
       .el-select {
         .el-select__caret {
-          color: $s-color-basic-black;
+          color: var(--s-color-basic-black);
         }
       }
     }
     &.s-disabled {
       .el-select {
         .el-input__inner {
-          color: $s-color-neutral-inactive;
-          border-color: $s-color-neutral-border;
-          background-color: $s-color-basic-white;
+          color: var(--s-color-neutral-inactive);
+          border-color: var(--s-color-neutral-border);
+          background-color: var(--s-color-basic-white);
           &::placeholder {
-            color: $s-color-neutral-inactive;
+            color: var(--s-color-neutral-inactive);
           }
         }
         .el-select__caret {
-          color: $s-color-neutral-inactive;
+          color: var(--s-color-neutral-inactive);
         }
       }
     }
@@ -171,24 +171,24 @@
     background-color: transparent;
   }
   &:hover {
-    background-color: $s-color-neutral-placeholder;
+    background-color: var(--s-color-neutral-placeholder);
   }
   &.is-disabled {
-    color: $s-color-neutral-inactive;;
+    color: var(--s-color-neutral-inactive);
   }
 }
 .el-select-dropdown.is-multiple .el-select-dropdown__item {
   > span {
     padding-left: 16px;
     vertical-align: top;
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
   }
   &::before {
     font-family: "element-icons";
     content: "\e6da";
-    color: $s-color-basic-white;
-    border: 1px solid $s-color-neutral-border;
-    background-color: $s-color-basic-white;
+    color: var(--s-color-basic-white);
+    border: 1px solid var(--s-color-neutral-border);
+    background-color: var(--s-color-basic-white);
     font-size: 16px;
     font-weight: bold;
     padding: 1px;
@@ -200,12 +200,12 @@
       background-color: transparent;
     }
     &:hover {
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
     }
     &::before {
-      color: $s-color-basic-white;
-      background-color: $s-color-main-brand;
-      border-color: $s-color-main-brand;
+      color: var(--s-color-basic-white);
+      background-color: var(--s-color-main-brand);
+      border-color: var(--s-color-main-brand);
     }
     &::after {
       content: '';
@@ -213,8 +213,8 @@
   }
 }
 .el-select-group__wrap:not(:last-of-type)::after {
-  background-color: $s-color-neutral-hover;
+  background-color: var(--s-color-neutral-hover);
 }
 .el-select-group__title {
-  color: $s-color-neutral-tertiary;
+  color: var(--s-color-neutral-tertiary);
 }
diff --git a/src/styles/table.scss b/src/styles/table.scss
index bccb38cd..33769881 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -1,7 +1,12 @@
 @import "./variables";
 
+.el-table,
+.el-table__header-wrapper tbody td,
+.el-table__footer-wrapper tbody td {
+  color: var(--s-color-basic-black);
+}
 .el-table--enable-row-hover .el-table__body tr:hover > td {
-  background-color: $s-color-neutral-hover;
+  background-color: var(--s-color-neutral-hover);
   border-left: none;
   border-right: none;
 }
@@ -12,7 +17,7 @@
       &.current-row > td,
       &.el-table__row--striped > td,
       &.el-table__row--striped.current-row > td {
-        background-color: $s-color-neutral-hover;
+        background-color: var(--s-color-neutral-hover);
         border-left: none;
         border-right: none;
       }
@@ -24,24 +29,24 @@
   padding-left: 13px;
 }
 .el-table thead {
-  color: $s-color-neutral-tertiary;
+  color: var(--s-color-neutral-tertiary);
 }
 .el-table--group,
 .el-table--border,
 .el-table th.is-leaf,
 .el-table td,
 .el-table--border th {
-  border-color: $s-color-neutral-placeholder;
+  border-color: var(--s-color-neutral-placeholder);
 }
 .el-table--group::after,
 .el-table--border::after {
-  background-color: $s-color-neutral-placeholder;
+  background-color: var(--s-color-neutral-placeholder);
 }
 .el-table:not(.el-table--border)::before {
-  background-color: $s-color-basic-white;
+  background-color: var(--s-color-basic-white);
 }
 .el-table tr:last-child td {
-  border-bottom-color: $s-color-basic-white;
+  border-bottom-color: var(--s-color-basic-white);
 }
 .el-table__header {
   label.el-checkbox.is-disabled {
@@ -98,5 +103,9 @@
 }
 .el-table__header-wrapper tbody td,
 .el-table__footer-wrapper tbody td {
-  background-color: $s-color-neutral-placeholder;
+  background-color: var(--s-color-neutral-placeholder);
+}
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: var(--s-color-main-brand);
+  border-color: var(--s-color-main-brand);
 }
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index c8cfb68d..0881e263 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -13,34 +13,42 @@
         color: inherit;
       }
     }
+    &.is-active {
+      color: var(--s-color-main-brand);
+    }
     &:not(.is-active) {
-      color: $s-color-basic-black;
+      color: var(--s-color-basic-black);
     }
   }
   .el-tab-pane {
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
   }
   .el-tabs__nav-wrap::after {
-    background-color: $s-color-neutral-placeholder;
+    background-color: var(--s-color-neutral-placeholder);
   }
-  .el-tabs--card {
+  &.el-tabs--card {
     > .el-tabs__header {
-      border-bottom-color: $s-color-neutral-hover;
+      border-bottom-color: var(--s-color-neutral-hover);
       .el-tabs__nav {
-        border-color: $s-color-neutral-hover;
+        border-color: var(--s-color-neutral-hover);
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
       }
       .el-tabs__item {
-        border-left-color: $s-color-neutral-hover;
+        border-left-color: var(--s-color-neutral-hover);
       }
     }
   }
-  .el-tabs--border-card {
-    border-color: $s-color-neutral-border;
+  &.el-tabs--border-card {
+    border-color: var(--s-color-neutral-border);
     > .el-tabs__header {
-      background-color: $s-color-neutral-placeholder;
-      border-bottom-color: $s-color-neutral-border;
+      background-color: var(--s-color-neutral-placeholder);
+      border-bottom-color: var(--s-color-neutral-border);
+      .el-tabs__item {
+        &:hover, &.is-active {
+          color: var(--s-color-main-brand);
+        }
+      }
     }
   }
   &.s-rounded {
@@ -48,7 +56,7 @@
       width: fit-content;
     }
     .el-tabs__nav-wrap {
-      background-color: $s-color-neutral-placeholder;
+      background-color: var(--s-color-neutral-placeholder);
       border-radius: 8px;
       height: 32px;
       padding-top: 2px;
@@ -65,8 +73,8 @@
           padding: 0 32px;
         }
         &.is-active {
-          color: $s-color-basic-black;
-          background-color: $s-color-basic-white;
+          color: var(--s-color-basic-black);
+          background-color: var(--s-color-basic-white);
           box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12), 0px 3px 1px rgba(0, 0, 0, 0.04);
           border-radius: 8px;
         }
@@ -78,4 +86,7 @@
       }
     }
   }
+  .el-tabs__active-bar {
+    background-color: var(--s-color-main-brand);
+  }
 }
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
index cfbb375a..806b5e6b 100644
--- a/src/styles/tooltip.scss
+++ b/src/styles/tooltip.scss
@@ -2,10 +2,11 @@
 
 .el-tooltip__popper {
   &.is-dark {
-    background-color: $s-color-basic-black;
+    background-color: var(--s-color-basic-black);
   }
   &.is-light {
-    color: $s-color-basic-black;
+    color: var(--s-color-basic-black);
+    border-color: var(--s-color-basic-black);
   }
-  border-color: $s-color-basic-black;
+  border-color: var(--s-color-basic-black);
 }

From 19616fcbfb43fc5da260697f89883dba48996bc6 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:15:08 +0400
Subject: [PATCH 08/11] Add typography

---
 src/stories/Intro/Typography.stories.ts | 32 +++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/stories/Intro/Typography.stories.ts

diff --git a/src/stories/Intro/Typography.stories.ts b/src/stories/Intro/Typography.stories.ts
new file mode 100644
index 00000000..70040d3a
--- /dev/null
+++ b/src/stories/Intro/Typography.stories.ts
@@ -0,0 +1,32 @@
+export default {
+  title: 'Design System/Intro/Typography'
+}
+
+export const basic = () => ({
+  template: `<div class="s-flex" style="flex: 1; flex-direction: column; justify-content: space-between; height: 600px;">
+                 <h1>
+                   [h1]
+                   Soramitsu's clients  count on us to help them design and launch their next-generation financial applications, at a lower cost and in record time. Iroha has essential functionality for your asset and identity management needs.
+                 </h1>
+                 <h2>
+                   [h2]
+                   Hyperledger project of Linux Foundation owns that code. Which means that you can create any applications based on Iroha.
+                 </h2>
+                 <h3>
+                   [h3]
+                   Often enough, truly decentralized solutions are not available for payment due to delays in receiving confirmations or due to overcomplexity of the technology.
+                 </h3>
+                 <h4>
+                   [h4]
+                   Hyperledger Iroha is a straightforward DLT, inspired by Japanese Kaizen principle — eliminate excessiveness (muri). Iroha has essential functionality for your asset and identity management needs, at the same time being an efficient and trustworthy byzantine fault-tolerant tool for your enterprise needs.
+                 </h4>
+                 <h5>
+                   [h5]
+                   With the support of multi-signature transactions, it is possible to maintain a fund by many managers. The fund assets should be held at one account. Its signatories should be fund managers, who are dealing with investments and portfolio distributions.
+                 </h5>
+                 <h6>
+                   [h6]
+                   Sora is a decentralized economy that provides its citizens various opportunities to decide which projects and ideas should be supported and which ones should not - that way everyone benefits from making the economy stronger and the world - better.
+                 </h6>
+               </div>`
+})

From 1fbe87ac4907eb37a4f64db19ca78ccaec665368 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:15:23 +0400
Subject: [PATCH 09/11] Add how to guide

---
 src/stories/Intro/Intro.stories.mdx | 70 +++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/stories/Intro/Intro.stories.mdx

diff --git a/src/stories/Intro/Intro.stories.mdx b/src/stories/Intro/Intro.stories.mdx
new file mode 100644
index 00000000..d2fbff7c
--- /dev/null
+++ b/src/stories/Intro/Intro.stories.mdx
@@ -0,0 +1,70 @@
+<Meta title="Design System/Intro/How to use" />
+
+# 1. Add `.npmrc` and `.yarnrc` files to the project
+
+`.npmrc` should looks like:
+
+```
+@soramitsu:registry=https://nexus.iroha.tech/repository/npm-group/
+```
+
+`.yarnrc` should looks like:
+
+```
+"@soramitsu:registry" "https://nexus.iroha.tech/repository/npm-group/"
+```
+
+If you want to run project locally, then you should run the following command:
+```
+npm login --registry="https://nexus.iroha.tech/repository/npm-group/"
+```
+* If this command fails, please contact DevOps team
+
+# 2. Add as a dependency to the project
+
+Add `"@soramitsu/soramitsu-js-ui": "^0.3.4"` in `package.json` file (`"dependencies"` section)
+
+OR RUN
+
+`yarn add "@soramitsu/soramitsu-js-ui"`
+
+# 3. Add components with styles to the project
+
+For instance, `soramitsuUI.ts`:
+
+```
+import Vue from 'vue'
+import SoramitsuElements, { Message, MessageBox, Notification } from '@soramitsu/soramitsu-js-ui'
+import '@soramitsu/soramitsu-js-ui/lib/styles'
+
+Vue.use(SoramitsuElements)
+Vue.prototype.$prompt = MessageBox.prompt
+Vue.prototype.$alert = MessageBox.alert
+Vue.prototype.$message = Message
+Vue.prototype.$notify = Notification
+
+```
+
+# 4. Add all required styles
+
+The previous section added not all required styles. To fix it you should add imports into `scss` file.
+
+For instance, `soramitsu-variables.scss`:
+
+```
+@import '../../node_modules/@soramitsu/soramitsu-js-ui/lib/styles/index';
+```
+
+If you want to customise some colors, borders, paddings, size, etc. - you can override scss variables.
+
+For instance, `soramitsu-variables.scss`:
+
+```
+// Main colors
+$s-color-main-brand: #ED145B;
+// Basic colors
+$s-color-basic-black: #0D0248;
+
+@import '../../node_modules/@soramitsu/soramitsu-js-ui/lib/styles/index';
+
+```

From a2644cd70f53dcc7bfc9a70ce93a7ee1fb58a8e3 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:15:42 +0400
Subject: [PATCH 10/11] Add story for theme switching in real-time

---
 src/stories/Intro/Customization.stories.ts | 71 ++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/stories/Intro/Customization.stories.ts

diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
new file mode 100644
index 00000000..e0e367e3
--- /dev/null
+++ b/src/stories/Intro/Customization.stories.ts
@@ -0,0 +1,71 @@
+import { withKnobs } from '@storybook/addon-knobs'
+
+import { CSSColors } from '../../types'
+import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
+import { differentTypeButtonsData } from '../SButton.stories'
+
+export default {
+  title: 'Design System/Intro/Customization',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const colorsData = Object.values(CSSColors).map(color => ({
+  label: color,
+  value: getComputedStyle(document.documentElement).getPropertyValue(color)
+}))
+export const themeInputsData = [
+  'text',
+  'textarea',
+  'text-file'
+]
+export const configurable = () => ({
+  components: { SRow, SCol, SButton, SInput, SDivider },
+  template: `<div style="flex: 1;">
+             <s-row>
+               <s-col
+                 class="s-flex"
+                 style="align-items: center;"
+                 v-for="color in colors"
+                 :key="color.label"
+                 :span="4"
+               >
+                 <span style="padding-right: 10px;">{{ color.label }}</span>
+                 <el-color-picker size="small" v-model="color.value" @change="(value) => handleColorChange(color.label, value)" />
+               </s-col>
+             </s-row>
+             <s-divider />
+             <s-row>
+               <s-col class="s-flex" :span="12" style="justify-content: space-between;">
+                 <s-button
+                   v-for="button in buttons"
+                   :key="button.type"
+                   size="small"
+                   icon="refresh"
+                   :type="button.type"
+                   :tooltip="button.tooltip"
+                 >
+                   {{ button.label }}
+                 </s-button>
+               </s-col>
+             </s-row>
+             <s-divider />
+             <s-row :gutter="20">
+               <s-col v-for="input in inputs" :key="input" :span="4">
+                 <s-input :placeholder="input" :type="input" />
+               </s-col>
+             </s-row>
+             <s-divider />
+             <h4>You can also check another components, these colors are applied to the whole library</h4>
+             </div>`,
+  data: () => ({
+    colors: colorsData,
+    buttons: differentTypeButtonsData,
+    inputs: themeInputsData
+  }),
+  methods: {
+    handleColorChange: (label: string, color: string) => {
+      document.documentElement.style.setProperty(label, color)
+    }
+  }
+})

From 260c08306d922ae19461aa49fe26cffd3992d2dd Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Fri, 9 Oct 2020 18:16:27 +0400
Subject: [PATCH 11/11] Update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ec54e632..aa110c06 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"