From 42ef6e776aa8787bc4948178e515f81a82fa1aff Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Wed, 11 Nov 2020 19:34:13 +0300
Subject: [PATCH 1/6] Customization bug fix (#88)

* Fixed colors customization bug.
* Updated to 0.5.7 version.
---
 package.json                               | 2 +-
 src/stories/Intro/Customization.stories.ts | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 70a1dd7f..edce40d6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 43df1693..17083f81 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -10,10 +10,11 @@ export default {
   excludeStories: /.*Data$/
 }
 
-const getColorsData = (colors) => Object.values(colors).map(color => {
-  const value = getComputedStyle(document.documentElement).getPropertyValue(`--s-color-${color}`)
+const colorPropertyPrefix = '--s-color-'
+const getColorsData = (colors) => Object.values(colors).map(colorPropertyName => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`${colorPropertyPrefix}${colorPropertyName}`)
   const isRgb = value.includes('rgb')
-  return { label: color, value, isRgb }
+  return { label: colorPropertyName, value, isRgb }
 })
 export const colorsSectionsData = [
   { title: 'Theme / Accent', colors: getColorsData(AccentColors) },
@@ -84,7 +85,7 @@ export const configurable = () => ({
   }),
   methods: {
     handleColorChange: (label: string, color: string) => {
-      document.documentElement.style.setProperty(label, color)
+      document.documentElement.style.setProperty(`${colorPropertyPrefix}${label}`, color)
     }
   }
 })

From 8ef86b4b90a55749793859824dc7b148f09a1914 Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 17 Nov 2020 11:58:26 +0300
Subject: [PATCH 2/6] Fix imports (#90)

* Fix issues with import

* Add version control for icons font

* Add shadow css variables
---
 package.json                                        |   2 +-
 ...amitsu-icons.woff => soramitsu-icons-1.0.0.woff} | Bin
 src/styles/breadcrumbs.scss                         |   2 --
 src/styles/button.scss                              |   2 --
 src/styles/card.scss                                |   2 --
 src/styles/checkbox.scss                            |   3 ---
 src/styles/collapse.scss                            |   2 --
 src/styles/common.scss                              |   2 --
 src/styles/datepicker.scss                          |   2 --
 src/styles/dialog.scss                              |   2 --
 src/styles/dropdown.scss                            |   2 --
 src/styles/element-variables.scss                   |   2 --
 src/styles/fonts.scss                               |   2 +-
 src/styles/form.scss                                |   2 --
 src/styles/icons.scss                               |   2 --
 src/styles/input.scss                               |   2 --
 src/styles/json-input.scss                          |   3 ---
 src/styles/layout.scss                              |   2 --
 src/styles/pagination.scss                          |   2 --
 src/styles/radio.scss                               |   3 ---
 src/styles/scroll-sections.scss                     |   2 --
 src/styles/select.scss                              |   3 ---
 src/styles/slider.scss                              |   2 --
 src/styles/switch.scss                              |   2 --
 src/styles/table.scss                               |   2 --
 src/styles/tabs.scss                                |   2 --
 src/styles/tooltip.scss                             |   2 --
 src/styles/variables.scss                           |  10 +++++++++-
 28 files changed, 11 insertions(+), 55 deletions(-)
 rename src/assets/fonts/{soramitsu-icons.woff => soramitsu-icons-1.0.0.woff} (100%)

diff --git a/package.json b/package.json
index edce40d6..b4faac03 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/assets/fonts/soramitsu-icons.woff b/src/assets/fonts/soramitsu-icons-1.0.0.woff
similarity index 100%
rename from src/assets/fonts/soramitsu-icons.woff
rename to src/assets/fonts/soramitsu-icons-1.0.0.woff
diff --git a/src/styles/breadcrumbs.scss b/src/styles/breadcrumbs.scss
index 3e62ec6f..1d819577 100644
--- a/src/styles/breadcrumbs.scss
+++ b/src/styles/breadcrumbs.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-breadcrumb__separator {
   color: var(--s-color-base-content-tertiary);
   font-weight: normal;
diff --git a/src/styles/button.scss b/src/styles/button.scss
index adf7d741..13fe0985 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 $s-color-button-tertiary-color: var(--s-color-base-content-primary) !default;
 $s-color-button-tertiary-color-active: var(--s-color-theme-accent) !default;
 $s-color-button-tertiary-background: var(--s-color-base-background) !default;
diff --git a/src/styles/card.scss b/src/styles/card.scss
index 9619569f..edc23ef7 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .s-card {
   color: var(--s-color-base-content-primary);
   border-radius: 8px;
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index bb9e8af2..e8dce297 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -1,6 +1,3 @@
-@import "./variables";
-@import "./common";
-
 .el-checkbox {
   color: var(--s-color-base-content-primary);
   &.is-bordered {
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index 8a24398c..3a907164 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-collapse {
   border-top-color: var(--s-color-base-border-secondary);
   border-bottom-color: var(--s-color-base-border-secondary);
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 5909f007..508f9b87 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 [class^="el-"]:not(i):not([class*='el-icon']),
 [class*="el-"]:not(i):not([class*='el-icon']) {
   font-family: $s-font-family-default;
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index 76705c12..e2054d22 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .s-date-picker {
   font-family: $s-font-family-default;
   width: 100%;
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index d469b2ed..840b6191 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-dialog {
   border-radius: 8px;
   .el-dialog__title {
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index ac7eb2e4..9801d26a 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-dropdown {
   color: var(--s-color-base-content-primary);
   > .el-button-group {
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index 61642300..ae861389 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 $--color-primary: $s-color-theme-accent;
 $--color-danger: $s-color-status-error;
 $--color-success: $s-color-status-success;
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index ed2a1131..e5ebf686 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: "soramitsu-icons";
-  src: url("~@/assets/fonts/soramitsu-icons.woff");
+  src: url("~@/assets/fonts/soramitsu-icons-1.0.0.woff");
   font-weight: normal;
   font-style: normal;
   font-display: block;
diff --git a/src/styles/form.scss b/src/styles/form.scss
index eeea8fe7..473f6c56 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-form-item {
   margin-bottom: 12px;
   &__content {
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 2aea6089..ee98cbc5 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 [class^="s-icon-"], [class*=" s-icon-"] {
   font-family: 'soramitsu-icons' !important;
   font-style: normal;
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 2e748fa6..b4c81805 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .s-input {
   font-family: $s-font-family-default;
   width: 100%;
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 2229f1c9..f633a69e 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -1,6 +1,3 @@
-@import "./variables";
-// @import "./icons";
-
 $color-ide-variable: #0451A5;
 $color-ide-string: #A31515;
 $color-ide-number: #098658;
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index c16b9c73..7eabcde8 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -1,5 +1,3 @@
-@import "./common";
-
 $box-shadow-layout: 0px 0px 8px rgba(45, 41, 38, 0.2);
 $font-size-layout: 18px;
 
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index 5f7805c1..32cb4d05 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-pagination {
   &.is-background .el-pager li:not(.disabled) {
     &.active {
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 1763dc82..2135b5b7 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -1,6 +1,3 @@
-@import "./variables";
-@import "./common";
-
 $radio-button-class: ".el-radio-button";
 $radio-button-border-width: 1px;
 $radio-button-border-color: var(--s-color-theme-accent);
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
index 8cb89fdf..cfa4a1a1 100644
--- a/src/styles/scroll-sections.scss
+++ b/src/styles/scroll-sections.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .s-scroll-sections {
   font-family: $s-font-family-default;
   font-size: 14px;
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 7af02217..83b65ab7 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -1,6 +1,3 @@
-@import "./variables";
-@import "./icons";
-
 .s-select {
   font-family: $s-font-family-default;
   width: 100%;
diff --git a/src/styles/slider.scss b/src/styles/slider.scss
index 1c02c827..477ede57 100644
--- a/src/styles/slider.scss
+++ b/src/styles/slider.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 @mixin slider-colors(
   $background-color: --s-color-theme-accent,
   $border-color: $background-color,
diff --git a/src/styles/switch.scss b/src/styles/switch.scss
index 86ec5ac0..b176320d 100644
--- a/src/styles/switch.scss
+++ b/src/styles/switch.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 $switch-class: ".el-switch";
 
 .s-switch {
diff --git a/src/styles/table.scss b/src/styles/table.scss
index f4a3319c..fadd0078 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-table,
 .el-table__header-wrapper tbody td,
 .el-table__footer-wrapper tbody td {
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index 7df25f8f..b86e52b6 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .s-tabs {
   width: 100%;
   .el-tabs__item {
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
index 5bb1cc99..2e28040c 100644
--- a/src/styles/tooltip.scss
+++ b/src/styles/tooltip.scss
@@ -1,5 +1,3 @@
-@import "./variables";
-
 .el-tooltip__popper {
   &.is-dark {
     background-color: var(--s-color-base-content-primary);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f9b61c17..b23829bd 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -10,7 +10,7 @@ $s-color-theme-secondary-pressed: #F1C0D2 !default;
 $s-color-theme-secondary-focused: #EDABC3 !default;
 // Base content colors
 $s-color-base-content-primary: #2D2926 !default;
-$s-color-base-content-secondary: #53565A !default; // not used
+$s-color-base-content-secondary: #53565A !default;
 $s-color-base-content-tertiary: #75787B !default;
 $s-color-base-content-quaternary: #A3A4A8 !default;
 // Base misc colors
@@ -86,6 +86,7 @@ $--breakpoints-spec: (
 );
 
 :root {
+  // Colors
   --s-color-theme-accent: #{$s-color-theme-accent};
   --s-color-theme-accent-hover: #{$s-color-theme-accent-hover};
   --s-color-theme-accent-pressed: #{$s-color-theme-accent-pressed};
@@ -115,4 +116,11 @@ $--breakpoints-spec: (
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  // Shadows
+  --s-shadow-surface: #{$s-shadow-surface};
+  --s-shadow-tooltip: #{$s-shadow-tooltip};
+  --s-shadow-tab: #{$s-shadow-tab};
+  --s-shadow-dropdown: #{$s-shadow-dropdown};
+  --s-shadow-mobile-tap-bar: #{$s-shadow-mobile-tap-bar};
+  --s-shadow-mobile-side-menu: #{$s-shadow-mobile-side-menu};
 }

From a78c2a8ec53faaf31e6e753414d30bc663f2a310 Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Wed, 18 Nov 2020 14:11:11 +0300
Subject: [PATCH 3/6] Border Radius Configuration (#85)

* Added Border Radius configuration.
* Updated Tabs, Table, Button, Card, Dialog, Checkbox, Pagination, Input, Select, Date Picker, Tooltip,  Dropdown, Form, Radio, Menu components and stories.
* Added Size and Border Radius mixins, embedded mixins to components.
---
 package.json                               |  2 +-
 src/components/Button/SButton.vue          | 27 +++-----
 src/components/Button/consts.ts            |  4 --
 src/components/Button/index.ts             |  4 +-
 src/components/Card/SCard.vue              | 18 ++++-
 src/components/Checkbox/SCheckbox.vue      | 26 +++----
 src/components/Checkbox/consts.ts          |  3 -
 src/components/Checkbox/index.ts           |  3 +-
 src/components/DatePicker/SDatePicker.vue  | 35 ++++++----
 src/components/DatePicker/consts.ts        |  4 --
 src/components/DatePicker/index.ts         |  5 +-
 src/components/Dialog/SDialog.vue          | 19 ++++-
 src/components/Dropdown/SDropdown.vue      | 45 +++++++-----
 src/components/Dropdown/consts.ts          |  4 --
 src/components/Dropdown/index.ts           |  3 +-
 src/components/Form/SForm.vue              |  1 +
 src/components/Form/SFormItem.vue          |  3 +-
 src/components/Input/SInput.vue            | 10 ++-
 src/components/Menu/SMenu.vue              | 15 +++-
 src/components/Pagination/SPagination.vue  | 28 +++++++-
 src/components/Radio/SRadio.vue            | 14 ++--
 src/components/Radio/SRadioGroup.vue       | 14 ++--
 src/components/Radio/consts.ts             |  3 -
 src/components/Radio/index.ts              |  3 +-
 src/components/Select/SSelect.vue          | 24 ++++++-
 src/components/Tab/STabs.vue               |  8 ++-
 src/components/Table/STable.vue            | 15 ++--
 src/components/Table/consts.ts             |  2 -
 src/components/Table/index.ts              |  5 +-
 src/components/Tooltip/STooltip.vue        | 21 +++++-
 src/mixins/BorderRadiusMixin.ts            | 16 +++++
 src/mixins/SizeMixin.ts                    | 23 ++++++
 src/stories/Dropdown/SDropdown.stories.ts  | 14 +++-
 src/stories/Intro/Customization.stories.ts | 27 +++++++-
 src/stories/Menu/SMenu.stories.ts          | 20 ++++++
 src/stories/SButton.stories.ts             | 31 ++++++++-
 src/stories/SCard.stories.ts               |  8 ++-
 src/stories/SCheckbox.stories.ts           | 33 ++++++++-
 src/stories/SDatePicker.stories.ts         |  8 ++-
 src/stories/SDialog.stories.ts             |  7 +-
 src/stories/SInput.stories.ts              |  5 ++
 src/stories/SPagination.stories.ts         |  8 ++-
 src/stories/SRadio.stories.ts              |  6 +-
 src/stories/STooltip.stories.ts            |  5 ++
 src/stories/Select/SSelect.stories.ts      |  8 ++-
 src/stories/Tab/STabs.stories.ts           |  5 ++
 src/stories/Table/STable.stories.ts        |  4 +-
 src/styles/button.scss                     |  1 -
 src/styles/card.scss                       |  1 -
 src/styles/checkbox.scss                   | 33 +++++++--
 src/styles/common.scss                     | 18 ++++-
 src/styles/datepicker.scss                 | 81 ++++++++++++++++------
 src/styles/dialog.scss                     | 23 +++++-
 src/styles/dropdown.scss                   | 18 +++++
 src/styles/input.scss                      | 26 ++++++-
 src/styles/json-input.scss                 |  4 +-
 src/styles/menu.scss                       | 25 +++++--
 src/styles/pagination.scss                 | 51 +++++++++++---
 src/styles/select.scss                     | 30 ++++++--
 src/styles/table.scss                      |  2 +-
 src/styles/tabs.scss                       | 50 ++++++++++---
 src/styles/variables.scss                  | 17 ++++-
 src/types/index.ts                         |  7 ++
 63 files changed, 747 insertions(+), 236 deletions(-)
 delete mode 100644 src/components/Checkbox/consts.ts
 delete mode 100644 src/components/Radio/consts.ts
 create mode 100644 src/mixins/BorderRadiusMixin.ts
 create mode 100644 src/mixins/SizeMixin.ts

diff --git a/package.json b/package.json
index b4faac03..38c7556d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index 14cb1635..e2cecedc 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -20,19 +20,21 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Inject } from 'vue-property-decorator'
 import { ElForm } from 'element-ui/types/form'
 import { ElFormItem } from 'element-ui/types/form-item'
 import { PopoverPlacement } from 'element-ui/types/popover'
 
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { SIcon } from '../Icon'
 import { STooltip, TooltipPlacement } from '../Tooltip'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonNativeTypes } from './consts'
 
 @Component({
   components: { SIcon, STooltip }
 })
-export default class SButton extends Vue {
+export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
   readonly ButtonTypes = ButtonTypes
   /**
    * Type of button. Possible values: `"primary"`, `"secondary"`, `"tertiary"`, `"action"`, `"link"`.
@@ -46,12 +48,6 @@ export default class SButton extends Vue {
    * By default it's set to `false`
    */
   @Prop({ default: false, type: Boolean }) readonly rounded!: boolean
-  /**
-   * Size of button. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: ButtonSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Icon name from icon collection of this library
    */
@@ -105,14 +101,6 @@ export default class SButton extends Vue {
   private iconLeftOffset = 0
   elementIcon = ''
 
-  get computedSize (): string {
-    if (this.size === ButtonSize.BIG ||
-      !(Object.values(ButtonSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
   get computedType (): string {
     if (this.type === ButtonTypes.PRIMARY) {
       return this.type
@@ -124,9 +112,12 @@ export default class SButton extends Vue {
     const cssClasses: Array<string> = []
     if ((this.elForm || this.elFormItem || {}).size) {
       cssClasses.push(`s-${(this.elForm || this.elFormItem).size}`)
-    } else if ((Object.values(ButtonSize) as Array<string>).includes(this.size)) {
+    } else if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if ((Object.values(ButtonTypes) as Array<string>).includes(this.type)) {
       cssClasses.push(`s-${this.type}`)
     }
diff --git a/src/components/Button/consts.ts b/src/components/Button/consts.ts
index 4599450b..d11d2a08 100644
--- a/src/components/Button/consts.ts
+++ b/src/components/Button/consts.ts
@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum ButtonTypes {
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
@@ -13,5 +11,3 @@ export enum ButtonNativeTypes {
   SUBMIT = 'submit',
   RESET = 'reset'
 }
-
-export const ButtonSize = Size
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index f91e9931..53b5d0b7 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,5 +1,5 @@
 import SButton from './SButton.vue'
 import SButtonGroup from './SButtonGroup.vue'
-import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts'
+import { ButtonTypes, ButtonNativeTypes } from './consts'
 
-export { SButton, SButtonGroup, ButtonTypes, ButtonSize, ButtonNativeTypes }
+export { SButton, SButtonGroup, ButtonTypes, ButtonNativeTypes }
diff --git a/src/components/Card/SCard.vue b/src/components/Card/SCard.vue
index bf2ea598..81810fbc 100644
--- a/src/components/Card/SCard.vue
+++ b/src/components/Card/SCard.vue
@@ -1,7 +1,7 @@
 <template>
   <el-card
     class="s-card"
-    :class="{ 's-clickable': clickable }"
+    :class="computedClasses"
     :header="header"
     :body-style="bodyStyle"
     :shadow="shadow"
@@ -12,12 +12,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { CardShadow } from './consts'
 
 @Component
-export default class SCard extends Vue {
+export default class SCard extends Mixins(BorderRadiusMixin) {
   /**
    * Header of the card. Also it can be set by slot#header
    */
@@ -41,6 +42,17 @@ export default class SCard extends Vue {
    */
   @Prop({ default: false, type: Boolean }) readonly clickable!: boolean
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    if (this.clickable) {
+      cssClasses.push('s-clickable')
+    }
+    return cssClasses
+  }
+
   handleClick (): void {
     if (!this.clickable) {
       return
diff --git a/src/components/Checkbox/SCheckbox.vue b/src/components/Checkbox/SCheckbox.vue
index c2759c5c..6e25e862 100644
--- a/src/components/Checkbox/SCheckbox.vue
+++ b/src/components/Checkbox/SCheckbox.vue
@@ -16,12 +16,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { CheckboxSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 
 @Component
-export default class SCheckbox extends Vue {
+export default class SCheckbox extends Mixins(SizeMixin, BorderRadiusMixin) {
   /**
    * Value of the checkbox item. Can be `string / number / boolean`
    */
@@ -48,12 +49,6 @@ export default class SCheckbox extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly checked!: boolean
-  /**
-   * Size of the checkbox item. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: CheckboxSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Native name property of the checkbox item
    */
@@ -77,19 +72,14 @@ export default class SCheckbox extends Vue {
     this.$emit('input', value)
   }
 
-  get computedSize (): string {
-    if (this.size === CheckboxSize.BIG ||
-      !(Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(CheckboxSize) as Array<string>).includes(this.size)) {
+    if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     return cssClasses
   }
 
diff --git a/src/components/Checkbox/consts.ts b/src/components/Checkbox/consts.ts
deleted file mode 100644
index f7d55fd0..00000000
--- a/src/components/Checkbox/consts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Size } from '../../types'
-
-export const CheckboxSize = Size
diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts
index 5f2acf9d..c30a6ad3 100644
--- a/src/components/Checkbox/index.ts
+++ b/src/components/Checkbox/index.ts
@@ -1,4 +1,3 @@
 import SCheckbox from './SCheckbox.vue'
-import { CheckboxSize } from './consts'
 
-export { SCheckbox, CheckboxSize }
+export { SCheckbox }
diff --git a/src/components/DatePicker/SDatePicker.vue b/src/components/DatePicker/SDatePicker.vue
index 29862d5a..deb95519 100644
--- a/src/components/DatePicker/SDatePicker.vue
+++ b/src/components/DatePicker/SDatePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="s-date-picker" :class="computedClasses">
+  <div :class="computedClasses">
     <span v-if="willPlaceholderBeShown" class="s-placeholder">{{ placeholder }}</span>
     <el-date-picker
       ref="picker"
@@ -15,7 +15,7 @@
       :end-placeholder="endPlaceholder"
       :format="format"
       :align="align"
-      :popper-class="popperClass"
+      :popper-class="computedPopperClass"
       :picker-options="pickerOptions"
       :range-separator="rangeSeparator"
       :default-value="defaultValue"
@@ -35,12 +35,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
-import { PickerTypes, PickerSize, PickerAlignment, InputTypes } from './consts'
+// TODO: ask do we need size prop for the component?
+// Prev comment => TODO: ask design team
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 @Component
-export default class SDatePicker extends Vue {
+export default class SDatePicker extends Mixins(BorderRadiusMixin) {
   /**
    * Value of date picker component. Can be used with `v-model`.
    * Can be date object / array with date objects for date range picker
@@ -91,12 +94,6 @@ export default class SDatePicker extends Vue {
    * `true` by default
    */
   @Prop({ type: Boolean, default: true }) readonly clearable!: boolean
-  /**
-   * Size of the date picker input
-   * TODO: ask design team
-   * `"medium"` by default
-   */
-  // @Prop({ type: String, default: PickerSize.MEDIUM }) readonly size!: string
   /**
    * Placeholder in non-range mode
    */
@@ -209,11 +206,25 @@ export default class SDatePicker extends Vue {
     return !!(this.model && this.placeholder)
   }
 
-  get computedClasses (): Array<string> {
+  get computedPopperClass (): string {
     const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = ['s-date-picker']
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${!this.isInputType ? InputTypes.SELECT : this.inputType}-type`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
diff --git a/src/components/DatePicker/consts.ts b/src/components/DatePicker/consts.ts
index b28af7a3..a39cd70e 100644
--- a/src/components/DatePicker/consts.ts
+++ b/src/components/DatePicker/consts.ts
@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum PickerTypes {
   YEAR = 'year',
   MONTH = 'month',
@@ -22,5 +20,3 @@ export enum InputTypes {
   INPUT = 'input',
   SELECT = 'select'
 }
-
-export const PickerSize = Size
diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts
index e100a2dc..9a55cca4 100644
--- a/src/components/DatePicker/index.ts
+++ b/src/components/DatePicker/index.ts
@@ -1,10 +1,9 @@
 import SDatePicker from './SDatePicker.vue'
-import { PickerTypes, PickerAlignment, InputTypes, PickerSize } from './consts'
+import { PickerTypes, PickerAlignment, InputTypes } from './consts'
 
 export {
   SDatePicker,
   PickerTypes,
   PickerAlignment,
-  InputTypes,
-  PickerSize
+  InputTypes
 }
diff --git a/src/components/Dialog/SDialog.vue b/src/components/Dialog/SDialog.vue
index d2f1238e..ff094302 100644
--- a/src/components/Dialog/SDialog.vue
+++ b/src/components/Dialog/SDialog.vue
@@ -11,7 +11,7 @@
     :modal-append-to-body="modalAppendToBody"
     :append-to-body="appendToBody"
     :lock-scroll="lockScroll"
-    :custom-class="customClass"
+    :class="computedClasses"
     :close-on-click-modal="closeOnClickModal"
     :close-on-press-escape="closeOnEsc"
     :before-close="beforeClose"
@@ -28,11 +28,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import elementResizeDetectorMaker from 'element-resize-detector'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+
 @Component
-export default class SDialog extends Vue {
+export default class SDialog extends Mixins(BorderRadiusMixin) {
   /**
    * Visibility of the dialog component.
    *
@@ -148,6 +150,17 @@ export default class SDialog extends Vue {
     this.$emit('update:visible', value)
   }
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    if (this.customClass) {
+      cssClasses.push(this.customClass)
+    }
+    return cssClasses
+  }
+
   mounted (): void {
     this.$nextTick(() => {
       const wrapper = (this.dialog || {}).$el as HTMLElement
diff --git a/src/components/Dropdown/SDropdown.vue b/src/components/Dropdown/SDropdown.vue
index 679a9c9c..15ce5173 100644
--- a/src/components/Dropdown/SDropdown.vue
+++ b/src/components/Dropdown/SDropdown.vue
@@ -3,6 +3,7 @@
     ref="dropdown"
     :split-button="splitButton"
     :size="computedSize"
+    :class="computedClasses"
     :type="computedType"
     :placement="placement"
     :trigger="computedTrigger"
@@ -35,20 +36,22 @@
         </template>
       </s-tooltip>
     </template>
-    <el-dropdown-menu :class="{'ellipsis': type === DropdownType.ELLIPSIS}">
+    <el-dropdown-menu :class="computedPopperClass">
       <slot name="menu"></slot>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElDropdown } from 'element-ui/types/dropdown'
 
-import { DropdownType, DropdownSize, DropdownPlacement, DropdownTrigger } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { ButtonTypes, SButton } from '../Button'
 import { Icons, SIcon } from '../Icon'
 import { STooltip } from '../Tooltip'
+import { DropdownType, DropdownPlacement, DropdownTrigger } from './consts'
 
 @Component({
   components: {
@@ -57,7 +60,7 @@ import { STooltip } from '../Tooltip'
     STooltip
   }
 })
-export default class SDropdown extends Vue {
+export default class SDropdown extends Mixins(SizeMixin, BorderRadiusMixin) {
   readonly DropdownType = DropdownType
   /**
    * A type of the dropdown component. Possible values: `"default"`, `"button"`, `"ellipsis"`.
@@ -78,13 +81,6 @@ export default class SDropdown extends Vue {
    * By default, it's set to `"secondary"`
    */
   @Prop({ type: String, default: ButtonTypes.SECONDARY }) readonly buttonType!: string
-  /**
-   * A size of the dropdown items. Possible values: `"big"`, `"medium"`, `"small"`.
-   * It affects on the button size if `type="button"` as well.
-   *
-   * By default, it's set to `"big"`
-   */
-  @Prop({ type: String, default: DropdownSize.BIG }) readonly size!: string
   /**
    * A placement of the popup menu. You can use any value from `DropdownPlacement` enum.
    *
@@ -133,6 +129,25 @@ export default class SDropdown extends Vue {
 
   willTooltipBeDisabled = false
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
+  get computedPopperClass (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.type === DropdownType.ELLIPSIS) {
+      cssClasses.push('ellipsis')
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedType () {
     if (this.type === DropdownType.BUTTON) {
       return this.computedButtonType
@@ -150,14 +165,6 @@ export default class SDropdown extends Vue {
     return this.trigger
   }
 
-  get computedSize (): string {
-    if (this.size === DropdownSize.BIG ||
-      !(Object.values(DropdownSize) as Array<string>).includes(this.size)) {
-      return ''
-    }
-    return this.size
-  }
-
   get computedButtonType (): string {
     if (this.buttonType === ButtonTypes.ACTION ||
       !(Object.values(ButtonTypes) as Array<string>).includes(this.buttonType)) {
diff --git a/src/components/Dropdown/consts.ts b/src/components/Dropdown/consts.ts
index 8fd34a23..d9a6ec1e 100644
--- a/src/components/Dropdown/consts.ts
+++ b/src/components/Dropdown/consts.ts
@@ -1,5 +1,3 @@
-import { Size } from '../../types'
-
 export enum DropdownType {
   DEFAULT = 'default',
   BUTTON = 'button',
@@ -19,5 +17,3 @@ export enum DropdownTrigger {
   HOVER = 'hover',
   CLICK = 'click'
 }
-
-export const DropdownSize = Size
diff --git a/src/components/Dropdown/index.ts b/src/components/Dropdown/index.ts
index 87bb2280..70b3392c 100644
--- a/src/components/Dropdown/index.ts
+++ b/src/components/Dropdown/index.ts
@@ -1,12 +1,11 @@
 import SDropdown from './SDropdown.vue'
 import SDropdownItem from './SDropdownItem.vue'
-import { DropdownPlacement, DropdownSize, DropdownTrigger, DropdownType } from './consts'
+import { DropdownPlacement, DropdownTrigger, DropdownType } from './consts'
 
 export {
   SDropdown,
   SDropdownItem,
   DropdownPlacement,
-  DropdownSize,
   DropdownTrigger,
   DropdownType
 }
diff --git a/src/components/Form/SForm.vue b/src/components/Form/SForm.vue
index b9ca19e3..fd269a9f 100644
--- a/src/components/Form/SForm.vue
+++ b/src/components/Form/SForm.vue
@@ -81,6 +81,7 @@ export default class SForm extends Vue {
   /**
    * Size of form items. Possible values: `"big"`, `"medium"`, `"small"`
    */
+  // TODO: play with Form size setting
   @Prop({ type: String }) readonly size!: string
   /**
    * Disabled form state. You can disable all form's elements using this property.
diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue
index 90a18bc1..d6e34373 100644
--- a/src/components/Form/SFormItem.vue
+++ b/src/components/Form/SFormItem.vue
@@ -73,7 +73,8 @@ export default class SFormItem extends Vue {
   /**
    * Size of form items. Possible values: `"big"`, `"medium"`, `"small"`
    */
-  @Prop({ type: String }) readonly size!: string // TODO: think about size for all items, not only for button
+  // TODO: think about size for all items, not only for button
+  @Prop({ type: String }) readonly size!: string
 
   @Ref('formItem') formItem!: ElFormItem
 
diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue
index 5ba34655..730dde91 100644
--- a/src/components/Input/SInput.vue
+++ b/src/components/Input/SInput.vue
@@ -23,7 +23,7 @@
       :label="label"
       :accept="accept"
       :tabindex="tabindex"
-      :prefix-icon="isMediumInput && prefix"
+      :prefix-icon="(isMediumInput && prefix) ? prefix : ''"
       :suffix-icon="suffix"
       @input="handleInput"
       @change="handleChange"
@@ -38,14 +38,15 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Inject, Watch } from 'vue-property-decorator'
 import { ElInput } from 'element-ui/types/input'
 import { ElForm } from 'element-ui/types/form'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete, InputSize, InputType } from './consts'
 
 @Component
-export default class SInput extends Vue {
+export default class SInput extends Mixins(BorderRadiusMixin) {
   readonly InputType = InputType
   readonly emptyValue = null
   /**
@@ -181,6 +182,9 @@ export default class SInput extends Vue {
     if (this.disabled || (this.elForm || {}).disabled) {
       cssClasses.push('s-disabled')
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.type === InputType.TEXT_FILE) {
       cssClasses.push('s-text-file')
     }
diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue
index 41169236..fefd9b8a 100644
--- a/src/components/Menu/SMenu.vue
+++ b/src/components/Menu/SMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <el-menu
-    class="s-menu"
     ref="el-menu"
+    :class="computedClasses"
     :style="computedStyles"
     :mode="mode"
     :collapse="collapse"
@@ -24,13 +24,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElMenu } from 'element-ui/types/menu'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { MenuMode, MenuTrigger } from './consts'
 
 @Component
-export default class SMenu extends Vue {
+export default class SMenu extends Mixins(BorderRadiusMixin) {
   /**
    * Mode of menu. Possible values: `"horizontal"`, `"vertical"`.
    *
@@ -107,6 +108,14 @@ export default class SMenu extends Vue {
 
   @Ref('el-menu') elMenu!: ElMenu
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = ['s-menu']
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   get computedStyles (): object {
     const styles = {} as any
     if (this.boxShadow) {
diff --git a/src/components/Pagination/SPagination.vue b/src/components/Pagination/SPagination.vue
index 03f23c54..bb06f139 100644
--- a/src/components/Pagination/SPagination.vue
+++ b/src/components/Pagination/SPagination.vue
@@ -7,8 +7,9 @@
     :total="total"
     :small="small"
     :background="background"
+    :class="computedClasses"
     :current-page.sync="currentPageModel"
-    :popper-class="popperClass"
+    :popper-class="computedPopperClass"
     :prev-text="prevText"
     :next-text="nextText"
     :disabled="disabled"
@@ -23,12 +24,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import { ElPagination } from 'element-ui/types/pagination'
 import cloneDeep from 'lodash/fp/cloneDeep'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
+
 @Component
-export default class SPagination extends Vue {
+export default class SPagination extends Mixins(BorderRadiusMixin) {
   /**
    * Will pagination component be small.
    *
@@ -167,6 +170,25 @@ export default class SPagination extends Vue {
     return this.layout.includes('slot')
   }
 
+  get computedPopperClass (): string {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses
+  }
+
   mounted (): void {
     this.initPaginationItems()
     this.renderPaginationItems()
diff --git a/src/components/Radio/SRadio.vue b/src/components/Radio/SRadio.vue
index d30b2246..ff62d7d5 100644
--- a/src/components/Radio/SRadio.vue
+++ b/src/components/Radio/SRadio.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { RadioSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Vue {
+export default class SRadio extends Mixins(SizeMixin) {
   /**
    * Binding value of the radio component. Can be `string` / `number` / `boolean`
    */
@@ -56,12 +56,6 @@ export default class SRadio extends Vue {
    * Native name property
    */
   @Prop({ default: '', type: String }) readonly name!: string
-  /**
-   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`.
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
 
   model = this.value
 
@@ -78,7 +72,7 @@ export default class SRadio extends Vue {
 
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
-    if ((Object.values(RadioSize) as Array<string>).includes(this.size)) {
+    if (this.isStandardSize) {
       cssClasses.push(`s-${this.size}`)
     }
     return cssClasses
diff --git a/src/components/Radio/SRadioGroup.vue b/src/components/Radio/SRadioGroup.vue
index 93382e17..36f0ace0 100644
--- a/src/components/Radio/SRadioGroup.vue
+++ b/src/components/Radio/SRadioGroup.vue
@@ -1,7 +1,7 @@
 <template>
   <el-radio-group
     v-model="model"
-    :size="size"
+    :size="computedSize"
     :disabled="disabled"
   >
     <slot></slot>
@@ -9,22 +9,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
-import { RadioSize } from './consts'
+import SizeMixin from '../../mixins/SizeMixin'
 
 @Component
-export default class SRadio extends Vue {
+export default class SRadio extends Mixins(SizeMixin) {
   /**
    * Binding value of the radio group. Can be `string` / `number` / `boolean`
    */
   @Prop() readonly value!: string | number | boolean
-  /**
-   * Size of the radio item. Possible values: `"big"`, `"medium"`, `"small"`
-   *
-   * By default it's set to `"medium"`
-   */
-  @Prop({ default: RadioSize.MEDIUM, type: String }) readonly size!: string
   /**
    * Whether the nesting radios are disabled.
    */
diff --git a/src/components/Radio/consts.ts b/src/components/Radio/consts.ts
deleted file mode 100644
index 63f35931..00000000
--- a/src/components/Radio/consts.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Size } from '../../types'
-
-export const RadioSize = Size
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
index 9392d611..4448645d 100644
--- a/src/components/Radio/index.ts
+++ b/src/components/Radio/index.ts
@@ -1,5 +1,4 @@
 import SRadio from './SRadio.vue'
 import SRadioGroup from './SRadioGroup.vue'
-import { RadioSize } from './consts'
 
-export { SRadio, SRadioGroup, RadioSize }
+export { SRadio, SRadioGroup }
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index 2a4e988f..c706e329 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -12,6 +12,7 @@
       :clearable="clearable"
       :multiple-limit="multipleLimit"
       :no-data-text="noDataText"
+      :popper-class="computedPopperClass"
       @blur="handleBlur"
       @focus="handleFocus"
       @visible-change="handleVisibleChange"
@@ -24,13 +25,14 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { Autocomplete } from '../Input'
 import { InputTypes } from './consts'
 
 @Component
-export default class SSelect extends Vue {
+export default class SSelect extends Mixins(BorderRadiusMixin) {
   /**
    * Selected value. Can be used with `v-model`
    */
@@ -64,6 +66,10 @@ export default class SSelect extends Vue {
    * `"No data"` is set by default
    */
   @Prop({ type: String, default: 'No data' }) readonly noDataText!: string
+  /**
+   * Custom class name for the page size Select's dropdown
+   */
+  @Prop({ default: '', type: String }) readonly popperClass!: string
   /**
    * Name attribute for input
    */
@@ -137,11 +143,25 @@ export default class SSelect extends Vue {
     this.$nextTick(this.updateInputValue)
   }
 
+  get computedPopperClass (): string {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
   get computedClasses (): Array<string> {
     const cssClasses: Array<string> = []
     if ((Object.values(InputTypes) as Array<string>).includes(this.inputType)) {
       cssClasses.push(`s-${this.inputType}-type`)
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     if (this.focused) {
       cssClasses.push('s-focused')
     }
diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue
index 48af7487..51cfa17a 100644
--- a/src/components/Tab/STabs.vue
+++ b/src/components/Tab/STabs.vue
@@ -20,12 +20,13 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TabsType, TabsPosition } from './consts'
 
 @Component
-export default class STabs extends Vue {
+export default class STabs extends Mixins(BorderRadiusMixin) {
   /**
    * Name of the selected tab. Can be used with `v-model`.
    *
@@ -99,6 +100,9 @@ export default class STabs extends Vue {
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
     }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
     return cssClasses
   }
 
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index f59493f3..1f6410a2 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -6,7 +6,7 @@
     :max-height="maxHeight"
     :stripe="stripe"
     :border="border"
-    :size="size"
+    :size="computedSize"
     :fit="fit"
     :show-header="showHeader"
     :highlight-current-row="highlightCurrentRow"
@@ -58,15 +58,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
 import { ElTable } from 'element-ui/types/table'
 import { ElTableColumn } from 'element-ui/types/table-column'
 
+import SizeMixin from '../../mixins/SizeMixin'
 import { TooltipTheme } from '../Tooltip'
-import { TableSize, SortDirection } from './consts'
+import { SortDirection } from './consts'
 
 @Component
-export default class STable extends Vue {
+export default class STable extends Mixins(SizeMixin) {
   /**
    * Data of the table.
    *
@@ -97,12 +98,6 @@ export default class STable extends Vue {
    * `false` by default
    */
   @Prop({ default: false, type: Boolean }) readonly border!: boolean
-  /**
-   * Table's size attribute.
-   *
-   * `"big"` by default
-   */
-  @Prop({ default: TableSize.BIG, type: String }) readonly size!: string
   /**
    * Will width of column automatically be fit its container.
    *
diff --git a/src/components/Table/consts.ts b/src/components/Table/consts.ts
index bb5ff572..93104b42 100644
--- a/src/components/Table/consts.ts
+++ b/src/components/Table/consts.ts
@@ -1,4 +1,3 @@
-import { Size } from '../../types'
 import { TooltipPlacement } from '../Tooltip'
 
 export enum ColumnType {
@@ -23,5 +22,4 @@ export enum ColumnAlignment {
   RIGHT = 'right'
 }
 
-export const TableSize = Size
 export const ColumnFilterPlacement = TooltipPlacement
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 2a46f9ea..1c87173f 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -1,6 +1,6 @@
 import STable from './STable.vue'
 import STableColumn from './STableColumn.vue'
-import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection, TableSize } from './consts'
+import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection } from './consts'
 
 export {
   STable,
@@ -8,6 +8,5 @@ export {
   ColumnAlignment,
   ColumnFixedPosition,
   ColumnType,
-  SortDirection,
-  TableSize
+  SortDirection
 }
diff --git a/src/components/Tooltip/STooltip.vue b/src/components/Tooltip/STooltip.vue
index 7d1ba338..48807ffc 100644
--- a/src/components/Tooltip/STooltip.vue
+++ b/src/components/Tooltip/STooltip.vue
@@ -11,6 +11,7 @@
     :transition="animation"
     :visible-arrow="showArrow"
     :open-delay="openDelay"
+    :popper-class="computedPopperClass"
     :manual="manual"
     :hide-after="closeDelay"
     :tabindex="tabindex"
@@ -21,15 +22,16 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch, Ref } from 'vue-property-decorator'
 import { TooltipEffect } from 'element-ui/types/tooltip'
 import { PopoverPlacement } from 'element-ui/types/popover'
 import debounce from 'throttle-debounce/debounce'
 
+import BorderRadiusMixin from '../../mixins/BorderRadiusMixin'
 import { TooltipTheme, TooltipPlacement } from './consts'
 
 @Component
-export default class STooltip extends Vue {
+export default class STooltip extends Mixins(BorderRadiusMixin) {
   /**
    * Theme of the tooltip. Supported values: `"dark"` or `"light"`.
    *
@@ -80,6 +82,10 @@ export default class STooltip extends Vue {
    * `0` by default
    */
   @Prop({ default: 0, type: Number }) readonly openDelay!: number
+  /**
+   * Custom class name for tooltip's popper
+   */
+  @Prop({ type: String }) readonly popperClass!: string
   /**
    * Manual mode of the tooltip. `Mouseenter` and `mouseleave` won't have
    * effects if set to true.
@@ -102,6 +108,17 @@ export default class STooltip extends Vue {
 
   @Ref('tooltip') tooltip!: any
 
+  get computedPopperClass (): string {
+    const cssClasses: Array<string> = []
+    if (this.popperClass) {
+      cssClasses.push(this.popperClass)
+    }
+    if (this.isStandardBorderRadius) {
+      cssClasses.push(`s-border-radius-${this.borderRadius}`)
+    }
+    return cssClasses.join(' ')
+  }
+
   model = this.value
 
   @Watch('value')
diff --git a/src/mixins/BorderRadiusMixin.ts b/src/mixins/BorderRadiusMixin.ts
new file mode 100644
index 00000000..8703a66e
--- /dev/null
+++ b/src/mixins/BorderRadiusMixin.ts
@@ -0,0 +1,16 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { BorderRadius } from '../types'
+
+@Component
+export default class BorderRadiusMixin extends Vue {
+  /**
+   * Border radius of component. Possible values: `"big"`, `"medium"`, `"small"`, `"mini"`.
+   *
+   * By default it's set to `"small"`
+   */
+  @Prop({ default: BorderRadius.SMALL }) borderRadius!: string
+
+  get isStandardBorderRadius (): boolean {
+    return (Object.values(BorderRadius) as Array<string>).includes(this.borderRadius)
+  }
+}
diff --git a/src/mixins/SizeMixin.ts b/src/mixins/SizeMixin.ts
new file mode 100644
index 00000000..fdacc3a6
--- /dev/null
+++ b/src/mixins/SizeMixin.ts
@@ -0,0 +1,23 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Size } from '../types'
+
+@Component
+export default class SizeMixin extends Vue {
+  /**
+   * Size of component. Possible values: `"big"`, `"medium"`, `"small"`.
+   *
+   * By default it's set to `"medium"`
+   */
+  @Prop({ default: Size.MEDIUM }) readonly size!: string
+
+  get isStandardSize (): boolean {
+    return (Object.values(Size) as Array<string>).includes(this.size)
+  }
+
+  get computedSize (): Size | string {
+    if (this.size === Size.BIG || !this.isStandardSize) {
+      return ''
+    }
+    return this.size
+  }
+}
diff --git a/src/stories/Dropdown/SDropdown.stories.ts b/src/stories/Dropdown/SDropdown.stories.ts
index a4ec4086..b01e3d03 100644
--- a/src/stories/Dropdown/SDropdown.stories.ts
+++ b/src/stories/Dropdown/SDropdown.stories.ts
@@ -1,7 +1,8 @@
 import { number, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCol, SDropdown, SDropdownItem, SRow } from '../../components'
-import { DropdownPlacement, DropdownSize, DropdownTrigger, DropdownType } from '../../components/Dropdown'
+import { Size, BorderRadius } from '../../types'
+import { DropdownPlacement, DropdownTrigger, DropdownType } from '../../components/Dropdown'
 import { ButtonTypes } from '../../components/Button'
 
 export default {
@@ -15,7 +16,8 @@ export const configurable = () => ({
   components: { SDropdown, SDropdownItem },
   template: `<s-dropdown
                type="button"
-               size="big"
+               :size="size"
+               :borderRadius="borderRadius"
                :buttonType="buttonType"
                :placement="placement"
                :hide-on-click="hideOnClick"
@@ -35,6 +37,12 @@ export const configurable = () => ({
     buttonType: {
       default: select('Button Type', Object.values(ButtonTypes), ButtonTypes.SECONDARY)
     },
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     placement: {
       default: select('Placement', Object.values(DropdownPlacement), DropdownPlacement.BOTTOM_END)
     },
@@ -126,7 +134,7 @@ export const differentTypes = () => ({
   }
 })
 
-export const differentSizeData = Object.values(DropdownSize).map(size => {
+export const differentSizeData = Object.values(Size).map(size => {
   const data = { size, type: DropdownType.BUTTON, buttonType: ButtonTypes.PRIMARY } as any
   data.label = size[0].toUpperCase() + size.slice(1)
   return data
diff --git a/src/stories/Intro/Customization.stories.ts b/src/stories/Intro/Customization.stories.ts
index 17083f81..f74e9ce0 100644
--- a/src/stories/Intro/Customization.stories.ts
+++ b/src/stories/Intro/Customization.stories.ts
@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs'
 
-import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors } from '../../types'
+import { AccentColors, ContentColors, MiscColors, SecondaryColors, StatusColors, TertiaryButtonColors, UtilityColors, BorderRadius } from '../../types'
 import { SRow, SButton, SInput, SCol, SDivider } from '../../components'
 import { differentTypeButtonsData } from '../SButton.stories'
 
@@ -10,6 +10,12 @@ export default {
   excludeStories: /.*Data$/
 }
 
+const borderRadiusPropertyPrefix = '--s-border-radius-'
+const getRadiusData = (BorderRadius) => Object.values(BorderRadius).map(borderRadiusPropertyName => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(`${borderRadiusPropertyPrefix}${borderRadiusPropertyName}`)
+  return { label: borderRadiusPropertyName, value }
+})
+
 const colorPropertyPrefix = '--s-color-'
 const getColorsData = (colors) => Object.values(colors).map(colorPropertyName => {
   const value = getComputedStyle(document.documentElement).getPropertyValue(`${colorPropertyPrefix}${colorPropertyName}`)
@@ -70,6 +76,21 @@ export const configurable = () => ({
                </s-col>
              </s-row>
              <s-divider />
+             <s-row>
+               <h6 style="margin-bottom: 10px">Border Radius</h6>
+               <s-col class="s-flex" :span="12" style="justify-content: space-between;">
+               <div class="s-flex" v-for="button in borderRadiusButtons" :key="button.borderRadius">
+                  <s-input
+                    type="number"
+                    :placeholder="button.label + ' (px)'"
+                    :borderRadius="button.label"
+                    style="margin-right: 10px; margin-right: 10px;"
+                    @change="(value) => handleBorderRadiusChange(button.label, value)"
+                  />
+               </div>
+               </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" />
@@ -81,11 +102,15 @@ export const configurable = () => ({
   data: () => ({
     sections: colorsSectionsData,
     buttons: differentTypeButtonsData,
+    borderRadiusButtons: getRadiusData(BorderRadius),
     inputs: themeInputsData
   }),
   methods: {
     handleColorChange: (label: string, color: string) => {
       document.documentElement.style.setProperty(`${colorPropertyPrefix}${label}`, color)
+    },
+    handleBorderRadiusChange: (label: string, borderRadius: string) => {
+      document.documentElement.style.setProperty(`${borderRadiusPropertyPrefix}${label}`, `${+borderRadius > 0 ? borderRadius : '0'}px`)
     }
   }
 })
diff --git a/src/stories/Menu/SMenu.stories.ts b/src/stories/Menu/SMenu.stories.ts
index e56016a9..246c197b 100644
--- a/src/stories/Menu/SMenu.stories.ts
+++ b/src/stories/Menu/SMenu.stories.ts
@@ -1,4 +1,6 @@
+import { select } from '@storybook/addon-knobs'
 import { SAside, SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from '../../components'
+import { BorderRadius } from '../../types'
 
 export default {
   component: SMenu,
@@ -11,6 +13,7 @@ export const basicMenu = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="1"
+                 :borderRadius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -36,6 +39,11 @@ export const basicMenu = () => ({
                  </s-menu-item-group>
                </s-menu>
              </s-aside>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleOpen (key: string, keyPath: Array<string>): void {
       console.log('handleOpen', key, keyPath)
@@ -54,6 +62,7 @@ export const sideBar = () => ({
   template: `<s-aside width="220px">
                <s-menu
                  default-active="2"
+                 :borderRadius="borderRadius"
                  @open="handleOpen"
                  @select="handleSelect"
                  @close="handleClose">
@@ -89,6 +98,11 @@ export const sideBar = () => ({
                  </s-menu-item>
                </s-menu>
              </s-aside>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleOpen (key: string, keyPath: Array<string>): void {
       console.log('handleOpen', key, keyPath)
@@ -107,6 +121,7 @@ export const topBar = () => ({
   template: `<s-menu
                default-active="4"
                mode="horizontal"
+               :borderRadius="borderRadius"
                @select="handleSelect">
                <s-menu-item index="1">Navigator One</s-menu-item>
                <s-submenu index="2">
@@ -124,6 +139,11 @@ export const topBar = () => ({
                <s-menu-item index="3" disabled>Navigator Three</s-menu-item>
                <s-menu-item index="4">Navigator Four</s-menu-item>
              </s-menu>`,
+  props: {
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    }
+  },
   methods: {
     handleSelect (key: string, keyPath: Array<string>): void {
       console.log('handleSelect', key, keyPath)
diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts
index 980a010e..011e73d1 100644
--- a/src/stories/SButton.stories.ts
+++ b/src/stories/SButton.stories.ts
@@ -1,7 +1,8 @@
 import { text, boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components'
-import { ButtonSize, ButtonTypes } from '../components/Button'
+import { Size, BorderRadius } from '../types'
+import { ButtonTypes } from '../components/Button'
 
 export default {
   component: SButton,
@@ -19,6 +20,7 @@ export const configurable = () => ({
                :icon="type === 'action' ? 'back' : ''"
                :type="type"
                :size="size"
+               :borderRadius="borderRadius"
                :rounded="rounded"
                :alternative="alternative"
                @click="handleClick"
@@ -36,7 +38,10 @@ export const configurable = () => ({
       default: select('Type', Object.values(ButtonTypes), ButtonTypes.PRIMARY)
     },
     size: {
-      default: select('Size', Object.values(ButtonSize), ButtonSize.BIG)
+      default: select('Size', Object.values(Size), Size.BIG)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
     },
     rounded: {
       default: boolean('Rounded', false)
@@ -84,7 +89,7 @@ export const withDifferentTypes = () => ({
   }
 })
 
-export const differentSizeData = Object.values(ButtonSize).map(size =>
+export const differentSizeData = Object.values(Size).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const withDifferentSize = () => ({
   components: { SButton, SRow },
@@ -104,6 +109,26 @@ export const withDifferentSize = () => ({
   }
 })
 
+export const differentBorderRadiusData = Object.values(BorderRadius).map(borderRadius =>
+  ({ borderRadius, label: borderRadius[0].toUpperCase() + borderRadius.slice(1) }))
+export const withDifferentBorderRadius = () => ({
+  components: { SButton, SRow },
+  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.borderRadius"
+                 :borderRadius="item.borderRadius"
+               >
+                 {{ item.label }}
+               </s-button>
+             </s-row>`,
+  props: {
+    items: {
+      default: () => differentBorderRadiusData
+    }
+  }
+})
+
 export const disabled = () => ({
   components: { SButton, SRow },
   template: `<s-row class="s-flex" style="flex: 1; justify-content: space-between; align-items: center;">
diff --git a/src/stories/SCard.stories.ts b/src/stories/SCard.stories.ts
index 5146bc9b..1150b755 100644
--- a/src/stories/SCard.stories.ts
+++ b/src/stories/SCard.stories.ts
@@ -1,6 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCard, SRow, SDropdown, SDropdownItem } from '../components'
+import { BorderRadius } from '../types'
 import { CardShadow } from '../components/Card'
 
 export default {
@@ -12,11 +13,11 @@ export default {
 export const configurable = () => ({
   components: { SCard, SRow, SDropdown, SDropdownItem },
   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">
+               <s-card style="width: 80%;" :shadow="shadow" :borderRadius="borderRadius" :clickable="clickable" @click="handleClick">
                  <template slot="header">
                    <div class="s-flex" style="justify-content: space-between; padding-right: 20px;">
                      <span>{{ header }}</span>
-                     <s-dropdown type="ellipsis">
+                     <s-dropdown type="ellipsis" :borderRadius="borderRadius">
                        Menu
                        <template #menu>
                          <s-dropdown-item>First</s-dropdown-item>
@@ -38,6 +39,9 @@ export const configurable = () => ({
     header: {
       default: text('Header', 'Card header')
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     clickable: {
       default: boolean('Clickable', false)
     }
diff --git a/src/stories/SCheckbox.stories.ts b/src/stories/SCheckbox.stories.ts
index 517f77c1..b97569ce 100644
--- a/src/stories/SCheckbox.stories.ts
+++ b/src/stories/SCheckbox.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SCheckbox, SRow, SCol } from '../components'
-import { CheckboxSize } from '../components/Checkbox'
+import { Size, BorderRadius } from '../types'
 
 export default {
   component: SCheckbox,
@@ -17,6 +17,7 @@ export const configurable = () => ({
                  v-model="vModelValue"
                  :disabled="disabled"
                  :border="border"
+                 :borderRadius="borderRadius"
                  :size="size"
                  :label="label"
                  @change="(value) => changeValue = value"
@@ -37,11 +38,14 @@ export const configurable = () => ({
     border: {
       default: boolean('Border', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
+    },
     label: {
       default: text('Label', 'Checkbox')
     },
     size: {
-      default: select('Size', Object.values(CheckboxSize), CheckboxSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     }
   }
 })
@@ -66,7 +70,7 @@ export const disabled = () => ({
   })
 })
 
-export const differentSizeData = Object.values(CheckboxSize).map(size =>
+export const differentSizeData = Object.values(Size).map(size =>
   ({ size, label: size[0].toUpperCase() + size.slice(1) }))
 export const differentSize = () => ({
   components: { SCheckbox, SRow, SCol },
@@ -87,4 +91,27 @@ export const differentSize = () => ({
   data: () => ({
     items: differentSizeData
   })
+}
+)
+export const differentBorderRadiusData = Object.values(BorderRadius).map(borderRadius =>
+  ({ borderRadius, label: borderRadius[0].toUpperCase() + borderRadius.slice(1) }))
+export const differentBorderRadius = () => ({
+  components: { SCheckbox, SRow, SCol },
+  template: `<s-row :gutter="20" style="flex: 1;">
+               <template v-for="item in items">
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox :borderRadius="item.borderRadius" :value="false">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+                 <s-col :span="6" style="height: 56px; margin-bottom: 20px;">
+                   <s-checkbox border :borderRadius="item.borderRadius" :value="true">
+                     {{ item.label }}
+                   </s-checkbox>
+                 </s-col>
+               </template>
+             </s-row>`,
+  data: () => ({
+    items: differentBorderRadiusData
+  })
 })
diff --git a/src/stories/SDatePicker.stories.ts b/src/stories/SDatePicker.stories.ts
index 428593f3..5afd3413 100644
--- a/src/stories/SDatePicker.stories.ts
+++ b/src/stories/SDatePicker.stories.ts
@@ -1,6 +1,7 @@
-import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
+import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SDatePicker, SRow, SCol } from '../components'
+import { BorderRadius } from '../types'
 import { PickerAlignment, PickerTypes, InputTypes } from '../components/DatePicker'
 
 export default {
@@ -21,6 +22,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :clearable="clearable"
                  :align="align"
+                 :borderRadius="borderRadius"
+                 :popperClass="borderRadius"
                  :input-type="inputType"
                  placeholder="Select date"
                  start-placeholder="From"
@@ -60,6 +63,9 @@ export const configurable = () => ({
     },
     align: {
       default: select('Align', Object.values(PickerAlignment), PickerAlignment.LEFT)
+    },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
     }
   },
   methods: {
diff --git a/src/stories/SDialog.stories.ts b/src/stories/SDialog.stories.ts
index 9de70626..a56e4518 100644
--- a/src/stories/SDialog.stories.ts
+++ b/src/stories/SDialog.stories.ts
@@ -1,6 +1,7 @@
-import { text, withKnobs, boolean } from '@storybook/addon-knobs'
+import { text, withKnobs, boolean, select } from '@storybook/addon-knobs'
 
 import { SDialog, SRow, SButton } from '../components'
+import { BorderRadius } from '../types'
 
 export default {
   component: SDialog,
@@ -22,6 +23,7 @@ export const configurable = () => ({
                  :width="width"
                  :fullscreen="fullscreen"
                  :top="top"
+                 :borderRadius="borderRadius"
                  :show-close="showClose"
                  :close-on-click-modal="closeOnClickModal"
                  :close-on-esc="closeOnEsc"
@@ -51,6 +53,9 @@ export const configurable = () => ({
     fullscreen: {
       default: boolean('fullscreen', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     showClose: {
       default: boolean('Show close', true)
     },
diff --git a/src/stories/SInput.stories.ts b/src/stories/SInput.stories.ts
index 182d55e8..85381d27 100644
--- a/src/stories/SInput.stories.ts
+++ b/src/stories/SInput.stories.ts
@@ -1,6 +1,7 @@
 import { text, boolean, withKnobs, number, select } from '@storybook/addon-knobs'
 
 import { SInput, SRow, SCol } from '../components'
+import { BorderRadius } from '../types'
 import { InputType, InputSize } from '../components/Input'
 
 export default {
@@ -17,6 +18,7 @@ export const configurable = () => ({
                :type="type"
                :placeholder="placeholder"
                :disabled="disabled"
+               :borderRadius="borderRadius"
                :show-password="showPassword"
                :readonly="readonly"
                :show-text-limit="showTextLimit"
@@ -47,6 +49,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.MINI)
+    },
     showPassword: {
       default: boolean('Show password', false)
     },
diff --git a/src/stories/SPagination.stories.ts b/src/stories/SPagination.stories.ts
index 85acfe7c..d18d3012 100644
--- a/src/stories/SPagination.stories.ts
+++ b/src/stories/SPagination.stories.ts
@@ -1,6 +1,7 @@
-import { withKnobs, number, text, boolean } from '@storybook/addon-knobs'
+import { withKnobs, number, text, boolean, select } from '@storybook/addon-knobs'
 
 import { SPagination, SRow } from '../components'
+import { BorderRadius } from '../types'
 
 export default {
   component: SPagination,
@@ -17,6 +18,8 @@ export const configurable = () => ({
                  :disabled="disabled"
                  :small="small"
                  :background="background"
+                 :borderRadius="borderRadius"
+                 :popperClass="borderRadius"
                  :prev-text="prevText"
                  :next-text="nextText"
                  @size-change="handleSizeChange"
@@ -42,6 +45,9 @@ export const configurable = () => ({
     background: {
       default: boolean('Background', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     prevText: {
       default: text('Prev text', '')
     },
diff --git a/src/stories/SRadio.stories.ts b/src/stories/SRadio.stories.ts
index 15a21449..226c63de 100644
--- a/src/stories/SRadio.stories.ts
+++ b/src/stories/SRadio.stories.ts
@@ -1,7 +1,7 @@
 import { withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { SRadio, SRadioGroup, SRow, SCol } from '../components'
-import { RadioSize } from '../components/Radio'
+import { Size } from '../types'
 
 export default {
   component: SRadio,
@@ -41,7 +41,7 @@ export const configurable = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
@@ -115,7 +115,7 @@ export const radioButtonGroup = () => ({
   }),
   props: {
     size: {
-      default: select('Size', Object.values(RadioSize), RadioSize.MEDIUM)
+      default: select('Size', Object.values(Size), Size.MEDIUM)
     },
     disabled: {
       default: boolean('Disabled', false)
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index a75c75ed..9d9a0eba 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -1,6 +1,7 @@
 import { text, withKnobs, boolean, select, number } from '@storybook/addon-knobs'
 
 import { SButton, STooltip, SRow, SMain } from '../components'
+import { BorderRadius } from '../types'
 import { TooltipPlacement, TooltipTheme } from '../components/Tooltip'
 
 export default {
@@ -18,6 +19,7 @@ export const configurable = () => ({
                  v-model="model"
                  :content="content"
                  :disabled="disabled"
+                 :borderRadius="borderRadius"
                  :offset="offset"
                  :openDelay="openDelay"
                  @change="handleChange"
@@ -38,6 +40,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     offset: {
       default: number('Offset', 0)
     },
diff --git a/src/stories/Select/SSelect.stories.ts b/src/stories/Select/SSelect.stories.ts
index 94955808..85215c81 100644
--- a/src/stories/Select/SSelect.stories.ts
+++ b/src/stories/Select/SSelect.stories.ts
@@ -1,6 +1,7 @@
-import { text, withKnobs, boolean, number } from '@storybook/addon-knobs'
+import { text, withKnobs, boolean, number, select } from '@storybook/addon-knobs'
 
 import { SSelect, SRow, SCol, SOption } from '../../components'
+import { BorderRadius } from '../../types'
 import { InputTypes } from '../../components/Select'
 
 export default {
@@ -25,6 +26,7 @@ export const configurable = () => ({
                  <s-select
                    v-model="model"
                    :disabled="disabled"
+                   :borderRadius="borderRadius"
                    :loading="loading"
                    :multiple="multiple"
                    :input-type="item.inputType"
@@ -34,6 +36,7 @@ export const configurable = () => ({
                    :multiple-text-prefix="multipleTextPrefix"
                    :loading-text="loadingText"
                    :no-data-text="noDataText"
+                   :popperClass="borderRadius"
                    @change="handleChange"
                  >
                    <s-option
@@ -54,6 +57,9 @@ export const configurable = () => ({
     disabled: {
       default: boolean('Disabled', false)
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     loading: {
       default: boolean('Loading', false)
     },
diff --git a/src/stories/Tab/STabs.stories.ts b/src/stories/Tab/STabs.stories.ts
index ba750b3e..ec8886d6 100644
--- a/src/stories/Tab/STabs.stories.ts
+++ b/src/stories/Tab/STabs.stories.ts
@@ -1,6 +1,7 @@
 import { boolean, select, withKnobs } from '@storybook/addon-knobs'
 
 import { STabs, STab } from '../../components'
+import { BorderRadius } from '../../types'
 import { TabsPosition, TabsType } from '../../components/Tab'
 
 export default {
@@ -14,6 +15,7 @@ export const defaultUsage = () => ({
   template: `<s-tabs
                v-model="activeName"
                :type="type"
+               :borderRadius="borderRadius"
                :position="position"
                :closable="closable"
                :addable="addable"
@@ -30,6 +32,9 @@ export const defaultUsage = () => ({
     type: {
       default: select('Type', [...Object.values(TabsType), '––'], '––')
     },
+    borderRadius: {
+      default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
+    },
     position: {
       default: select('Position', Object.values(TabsPosition), TabsPosition.TOP)
     },
diff --git a/src/stories/Table/STable.stories.ts b/src/stories/Table/STable.stories.ts
index 4814232f..4209c7c8 100644
--- a/src/stories/Table/STable.stories.ts
+++ b/src/stories/Table/STable.stories.ts
@@ -1,7 +1,7 @@
 import { text, withKnobs, select, boolean } from '@storybook/addon-knobs'
 
 import { STable, STableColumn } from '../../components'
-import { TableSize } from '../../components/Table'
+import { Size } from '../../types'
 
 export default {
   component: STable,
@@ -72,7 +72,7 @@ export const configurable = () => ({
       default: boolean('Show header', true)
     },
     size: {
-      default: select('Size', Object.values(TableSize), TableSize.BIG)
+      default: select('Size', Object.values(Size), Size.BIG)
     },
     highlightCurrentRow: {
       default: boolean('Highlight current row', false)
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 13fe0985..3146b2c7 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -143,7 +143,6 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
   color: var(--s-color-base-content-primary);
   background-color: var(--s-color-base-background);
   border-color: var(--s-color-base-background);
-  border-radius: 8px;
   &:hover, &:active, &:focus {
     color: var(--s-color-base-content-primary);
     background-color: var(--s-color-base-background-hover);
diff --git a/src/styles/card.scss b/src/styles/card.scss
index edc23ef7..ff200792 100644
--- a/src/styles/card.scss
+++ b/src/styles/card.scss
@@ -1,6 +1,5 @@
 .s-card {
   color: var(--s-color-base-content-primary);
-  border-radius: 8px;
   border-color: var(--s-color-base-border-primary);
   &.s-clickable {
     cursor: pointer;
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index e8dce297..98d4d158 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -1,7 +1,30 @@
+@mixin checkbox-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      &.is-bordered {
+        border-radius: $border-radius;
+      }
+      .el-checkbox__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .el-checkbox {
   color: var(--s-color-base-content-primary);
+  @include checkbox-border-radius;
+  @include checkbox-border-radius("medium", var(--s-border-radius-medium));
+  @include checkbox-border-radius("small", var(--s-border-radius-small));
+  @include checkbox-border-radius("mini", var(--s-border-radius-mini));
   &.is-bordered {
-    &, &.is-disabled, &.is-disabled.is-checked {
+    &,
+    &.is-disabled,
+    &.is-disabled.is-checked {
       border-color: var(--s-color-base-border-primary);
     }
     &.is-checked {
@@ -17,7 +40,8 @@
   }
   &.s-medium {
     @extend .s-medium;
-    &, &.is-bordered {
+    &,
+    &.is-bordered {
       padding: 9px 15px 7px 10px;
       .el-checkbox__inner {
         height: 16px;
@@ -36,11 +60,11 @@
   }
   &.s-small {
     @extend .s-small;
-    border-radius: 4px;
     .el-checkbox__label {
       font-size: 12px;
     }
-    &, &.is-bordered {
+    &,
+    &.is-bordered {
       padding: 5px 15px 5px 10px;
       .el-checkbox__inner {
         height: 14px;
@@ -60,7 +84,6 @@
 }
 .el-checkbox__inner {
   border-color: var(--s-color-base-border-primary);
-  border-radius: 4px;
   width: 20px;
   height: 20px;
   &::after {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 508f9b87..57b5206c 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -69,6 +69,22 @@ h6 {
   height: $s-size-small;
 }
 
+.s-border-radius-big {
+  border-radius: var(--s-border-radius-big);
+}
+
+.s-border-radius-medium {
+  border-radius: var(--s-border-radius-medium);
+}
+
+.s-border-radius-small {
+  border-radius: var(--s-border-radius-small);
+}
+
+.s-border-radius-mini {
+  border-radius: var(--s-border-radius-mini);
+}
+
 button > span {
   position: relative;
 }
@@ -113,7 +129,7 @@ button > span {
     button.el-button.el-button--default.el-button--small {
       height: $s-size-medium;
       font-size: 14px;
-      border-radius: 4px;
+      border-radius: var(--s-border-radius-mini);
       &:hover, &:active, &:focus {
         color: var(--s-color-theme-accent);
         background-color: var(--s-color-base-on-accent);
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index e2054d22..2696e508 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -1,16 +1,35 @@
+@mixin date-picker-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      & .el-input__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-date-picker {
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
   .el-date-editor {
     width: 100%;
-    &.el-input, &.el-input__inner {
+    &.el-input,
+    &.el-input__inner {
       width: 100%;
     }
     .el-range-separator {
       color: var(--s-color-base-content-tertiary);
     }
-    .el-input__inner, .el-range-input {
+    .el-input__inner,
+    .el-range-input {
       &::placeholder {
         color: var(--s-color-base-content-tertiary);
         opacity: 1; // Firefox
@@ -20,6 +39,10 @@
       border-color: var(--s-color-base-border-primary);
     }
   }
+  @include date-picker-border-radius;
+  @include date-picker-border-radius("medium", var(--s-border-radius-medium));
+  @include date-picker-border-radius("small", var(--s-border-radius-small));
+  @include date-picker-border-radius("mini", var(--s-border-radius-mini));
   &.s-has-value {
     .el-date-editor .el-range-separator {
       color: var(--s-color-base-content-primary);
@@ -40,7 +63,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-background-hover);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         background-color: var(--s-color-base-background-hover);
       }
     }
@@ -56,7 +80,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-border-primary);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         background-color: var(--s-color-utility-surface);
       }
     }
@@ -64,7 +89,8 @@
       .el-input__inner {
         border-color: var(--s-color-base-disabled);
       }
-      .el-input__inner, .s-placeholder {
+      .el-input__inner,
+      .s-placeholder {
         color: var(--s-color-base-content-quaternary);
         background-color: var(--s-color-base-disabled);
       }
@@ -79,7 +105,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -88,16 +113,19 @@
   }
   &.s-select-type {
     .el-date-editor {
-      .el-input__inner, .el-range-input, .el-range-separator {
+      .el-input__inner,
+      .el-range-input,
+      .el-range-separator {
         font-weight: bold;
       }
-      &.el-input__inner, & .el-input__inner {
-        border-radius: 8px;
+      &.el-input__inner,
+      & .el-input__inner {
         padding-left: 12px;
         &:hover {
           border-color: var(--s-color-base-border-primary);
         }
-        &::placeholder, .el-range-input::placeholder {
+        &::placeholder,
+        .el-range-input::placeholder {
           color: var(--s-color-base-content-tertiary);
           font-weight: bold;
         }
@@ -109,7 +137,7 @@
       top: 30%;
       pointer-events: none;
       color: var(--s-color-base-content-tertiary);
-      transition: transform .3s;
+      transition: transform 0.3s;
     }
     &.s-focused {
       .el-date-editor.el-input__inner,
@@ -178,13 +206,18 @@
   .el-picker-panel__content {
     .el-date-table {
       td {
-        &.available:hover, &.today span {
+        &.available:hover,
+        &.today span {
           color: var(--s-color-theme-accent);
         }
-        &.next-month, &.prev-month {
+        &.next-month,
+        &.prev-month {
           color: var(--s-color-base-content-quaternary);
         }
-        &.current:not(.disabled), &.selected, &.start-date, &.end-date {
+        &.current:not(.disabled),
+        &.selected,
+        &.start-date,
+        &.end-date {
           span {
             background-color: var(--s-color-theme-accent);
             color: var(--s-color-utility-surface);
@@ -196,7 +229,8 @@
       }
     }
     .el-month-table td {
-      &.start-date, &.end-date {
+      &.start-date,
+      &.end-date {
         .cell {
           background-color: var(--s-color-theme-accent);
           color: var(--s-color-utility-surface);
@@ -206,14 +240,18 @@
   }
   .el-picker-panel__footer {
     border-top-color: var(--s-color-base-background-hover);
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
     > .el-button {
       height: 32px;
-      border-radius: 4px;
-      &:hover, &:focus {
+      border-radius: var(--s-border-radius-mini);
+      &:hover,
+      &:focus {
         color: var(--s-color-theme-accent);
       }
       &.is-plain {
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           border-color: var(--s-color-theme-accent);
         }
       }
@@ -224,7 +262,6 @@
   }
 }
 .el-time-panel {
-  border-radius: 4px;
   border-color: var(--s-color-base-background-hover);
   .el-time-panel__footer {
     border-top-color: var(--s-color-base-background-hover);
@@ -241,14 +278,16 @@
     }
   }
   .el-time-panel__content {
-    &::after, &::before {
+    &::after,
+    &::before {
       border-top-color: var(--s-color-base-background-hover);
       border-bottom-color: var(--s-color-base-background-hover);
     }
   }
 }
 .el-date-table.is-week-mode .el-date-table__row {
-  &.current, &:hover {
+  &.current,
+  &:hover {
     div {
       background-color: var(--s-color-base-background-hover);
     }
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index 840b6191..2701d1ae 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -1,5 +1,26 @@
 .el-dialog {
-  border-radius: 8px;
+  &__wrapper {
+    &.s-border-radius {
+      &-big,
+      &-medium,
+      &-small,
+      &-mini {
+        border-radius: 0;
+      }
+    }
+  }
+  .s-border-radius-big & {
+    border-radius: var(--s-border-radius-big);
+  }
+  .s-border-radius-medium & {
+    border-radius: var(--s-border-radius-medium);
+  }
+  .s-border-radius-small & {
+    border-radius: var(--s-border-radius-small);
+  }
+  .s-border-radius-mini & {
+    border-radius: var(--s-border-radius-mini);
+  }
   .el-dialog__title {
     font-weight: bold;
     font-size: 16px;
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index 9801d26a..39db4325 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -1,5 +1,23 @@
+@mixin dropdown-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-button {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .el-dropdown {
   color: var(--s-color-base-content-primary);
+  @include dropdown-border-radius;
+  @include dropdown-border-radius("medium", var(--s-border-radius-medium));
+  @include dropdown-border-radius("small", var(--s-border-radius-small));
+  @include dropdown-border-radius("mini", var(--s-border-radius-mini));
   > .el-button-group {
     > .el-button {
       float: left;
diff --git a/src/styles/input.scss b/src/styles/input.scss
index b4c81805..5c111828 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -1,8 +1,33 @@
+@mixin input-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      .el-input,
+      .el-textarea {
+        > input,
+        > textarea {
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
 .s-input {
   font-family: $s-font-family-default;
   width: 100%;
   min-height: $s-size-big;
   position: relative;
+  @include input-border-radius;
+  @include input-border-radius("medium", var(--s-border-radius-medium));
+  @include input-border-radius("small", var(--s-border-radius-small));
+  @include input-border-radius("mini", var(--s-border-radius-mini));
   .el-input__suffix {
     z-index: 1;
   }
@@ -15,7 +40,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index f633a69e..073a9977 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -6,7 +6,7 @@ $color-ide-boolean: #0000FF;
 .s-json-input {
   width: 100%;
   border: 1px solid var(--s-color-base-border-primary);
-  border-radius: $s-border-radius-default;
+  border-radius: var(--s-border-radius-mini);
   &.s-disabled {
     .ace-jsoneditor {
       pointer-events: none;
@@ -103,7 +103,7 @@ $color-ide-boolean: #0000FF;
     background: var(--s-color-base-content-primary);
     border-color: var(--s-color-base-content-primary);
     color: var(--s-color-base-on-accent);
-    border-radius: $s-border-radius-default;
+    border-radius: var(--s-border-radius-mini);
     padding: 10px;
     font-size: 12px;
     line-height: 1.2;
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index e9a9597f..51bbb91a 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -1,8 +1,27 @@
 $margin-bottom-menu-item: 8px;
 
+@mixin menu-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-menu-item,
+      .el-submenu__title {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-menu {
   box-shadow: var(--s-menu-box-shadow);
   padding: 20px 12px;
+  @include menu-border-radius;
+  @include menu-border-radius("medium", var(--s-border-radius-medium));
+  @include menu-border-radius("small", var(--s-border-radius-small));
+  @include menu-border-radius("mini", var(--s-border-radius-mini));
   &:not(.el-menu--horizontal) > :not(:last-child) {
     margin-bottom: $margin-bottom-menu-item;
   }
@@ -12,7 +31,6 @@ $margin-bottom-menu-item: 8px;
 }
 .el-menu-item {
   align-items: center;
-  border-radius: 6px;
   &:not(.is-disabled):hover,
   &.is-active {
     background-color: var(--s-menu-color-hover) !important;
@@ -21,7 +39,7 @@ $margin-bottom-menu-item: 8px;
       color: var(--s-menu-text-color-active);
     }
   }
-  [class^=s-icon-] {
+  [class^="s-icon-"] {
     margin-right: 12px;
     font-size: 20px;
   }
@@ -47,8 +65,7 @@ $margin-bottom-menu-item: 8px;
 .el-submenu__title {
   display: flex;
   align-items: center;
-  border-radius: 6px;
-  [class^=s-icon-] {
+  [class^="s-icon-"] {
     margin-right: 12px;
     font-size: 20px;
   }
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index 32cb4d05..6953d9d4 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -1,3 +1,26 @@
+@mixin pagination-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .el-pagination__sizes {
+        .el-select .el-input {
+          .el-input__inner {
+            border-radius: $border-radius;
+          }
+        }
+      }
+      .el-pagination__editor.el-input {
+        .el-input__inner {
+          border-radius: $border-radius;
+        }
+      }
+    }
+  }
+}
+
 .el-pagination {
   &.is-background .el-pager li:not(.disabled) {
     &.active {
@@ -8,7 +31,8 @@
       color: var(--s-color-theme-accent);
     }
   }
-  .btn-prev, .btn-next {
+  .btn-prev,
+  .btn-next {
     color: var(--s-color-base-content-primary);
   }
   button {
@@ -19,10 +43,15 @@
       color: var(--s-color-base-content-quaternary);
     }
   }
+  @include pagination-border-radius;
+  @include pagination-border-radius("medium", var(--s-border-radius-medium));
+  @include pagination-border-radius("small", var(--s-border-radius-small));
+  @include pagination-border-radius("mini", var(--s-border-radius-mini));
   .el-pagination__sizes {
     .el-select .el-input {
       width: 65px;
-      .el-select__caret, .el-input__inner {
+      .el-select__caret,
+      .el-input__inner {
         color: var(--s-color-base-content-primary);
         font-weight: bold;
       }
@@ -30,14 +59,14 @@
         margin-right: 6px;
       }
       .el-input__inner {
-        border-radius: 8px;
         padding-right: 20px;
         padding-left: 5px;
         background-color: var(--s-color-base-background);
         border-color: var(--s-color-base-background);
       }
       &.is-disabled {
-        .el-select__caret, .el-input__inner {
+        .el-select__caret,
+        .el-input__inner {
           color: var(--s-color-base-content-quaternary);
         }
       }
@@ -45,7 +74,6 @@
   }
   .el-pagination__editor.el-input {
     .el-input__inner {
-      border-radius: 8px;
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
       color: var(--s-color-base-content-primary);
@@ -54,17 +82,21 @@
       color: var(--s-color-base-content-quaternary);
     }
   }
-  .el-pagination__total, .per-page-text, .el-pagination__jump {
+  .el-pagination__total,
+  .per-page-text,
+  .el-pagination__jump {
     color: var(--s-color-base-content-tertiary);
     font-weight: normal;
   }
   .el-pager li {
     color: var(--s-color-base-content-primary);
-    &.btn-quicknext, &.btn-quickprev {
+    &.btn-quicknext,
+    &.btn-quickprev {
       color: var(--s-color-base-content-primary);
     }
     &:not(.disabled) {
-      &:hover, &.active {
+      &:hover,
+      &.active {
         color: var(--s-color-theme-accent);
       }
     }
@@ -79,7 +111,8 @@
         color: var(--s-color-base-content-quaternary);
       }
     }
-    .btn-prev, .btn-next {
+    .btn-prev,
+    .btn-next {
       background-color: var(--s-color-base-background);
       &:disabled {
         color: var(--s-color-base-content-quaternary);
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 83b65ab7..0730a45b 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -1,7 +1,28 @@
+@mixin select-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      .s-placeholder {
+        border-top-left-radius: $border-radius;
+      }
+      .el-input__inner {
+        border-radius: $border-radius;
+      }
+    }
+  }
+}
+
 .s-select {
   font-family: $s-font-family-default;
   width: 100%;
   position: relative;
+  @include select-border-radius;
+  @include select-border-radius("medium", var(--s-border-radius-medium));
+  @include select-border-radius("small", var(--s-border-radius-small));
+  @include select-border-radius("mini", var(--s-border-radius-mini));
   .el-select {
     width: 100%;
     i.el-icon-arrow-up {
@@ -73,7 +94,8 @@
         .el-select__caret {
           color: var(--s-color-base-content-quaternary);
         }
-        .el-input__inner, .el-input__inner:hover {
+        .el-input__inner,
+        .el-input__inner:hover {
           border-color: var(--s-color-base-disabled);
           color: var(--s-color-base-content-quaternary);
           background-color: var(--s-color-base-disabled);
@@ -97,7 +119,6 @@
     padding-top: 5px;
     top: 1px;
     left: 1px;
-    border-top-left-radius: 4px;
     position: absolute;
     z-index: 1;
     width: calc(100% - 15px);
@@ -107,7 +128,6 @@
   &.s-select-type {
     .el-select {
       .el-input__inner {
-        border-radius: 8px;
         padding-left: 12px;
         font-weight: bold;
         &:hover {
@@ -189,7 +209,7 @@
     font-size: 16px;
     font-weight: bold;
     padding: 1px;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius-mini);
   }
   &.selected {
     font-weight: normal;
@@ -205,7 +225,7 @@
       border-color: var(--s-color-theme-accent);
     }
     &::after {
-      content: '';
+      content: "";
     }
   }
 }
diff --git a/src/styles/table.scss b/src/styles/table.scss
index fadd0078..576a2079 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -60,7 +60,7 @@
   .el-checkbox__inner {
     height: 20px;
     width: 20px;
-    border-radius: 4px;
+    border-radius: var(--s-border-radius-mini);
     &::after {
       border-width: 2px;
       height: 10px;
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index b86e52b6..e6fa2d3c 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,5 +1,41 @@
+@mixin tabs-border-radius(
+  $suffix: "big",
+  $border-radius: var(--s-border-radius-big)
+) {
+  &.s-border-radius {
+    &-#{$suffix} {
+      border-radius: 0;
+      &.el-tabs--card {
+        > .el-tabs__header {
+          .el-tabs__nav {
+            border-top-left-radius: $border-radius;
+            border-top-right-radius: $border-radius;
+          }
+        }
+      }
+      &.s-rounded {
+        .el-tabs__nav-wrap {
+          border-radius: $border-radius;
+          .el-tabs__item {
+            &.is-active {
+              border-radius: $border-radius;
+            }
+            &:focus.is-focus {
+              border-radius: $border-radius;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .s-tabs {
   width: 100%;
+  @include tabs-border-radius;
+  @include tabs-border-radius("medium", var(--s-border-radius-medium));
+  @include tabs-border-radius("small", var(--s-border-radius-small));
+  @include tabs-border-radius("mini", var(--s-border-radius-mini));
   .el-tabs__item {
     font-weight: bold;
     .el-icon-close {
@@ -29,8 +65,6 @@
       border-bottom-color: var(--s-color-base-background-hover);
       .el-tabs__nav {
         border-color: var(--s-color-base-background-hover);
-        border-top-left-radius: 8px;
-        border-top-right-radius: 8px;
       }
       .el-tabs__item {
         border-left-color: var(--s-color-base-background-hover);
@@ -43,7 +77,8 @@
       background-color: var(--s-color-base-background);
       border-bottom-color: var(--s-color-base-border-primary);
       .el-tabs__item {
-        &:hover, &.is-active {
+        &:hover,
+        &.is-active {
           color: var(--s-color-theme-accent);
         }
       }
@@ -55,29 +90,28 @@
     }
     .el-tabs__nav-wrap {
       background-color: var(--s-color-base-background);
-      border-radius: 8px;
       height: 32px;
-      &::after, .el-tabs__active-bar {
+      &::after,
+      .el-tabs__active-bar {
         height: 0;
       }
       .el-tabs__item {
         padding: 0 32px;
         height: 28px;
         line-height: 28px;
-        &:nth-child(2), &:last-child {
+        &:nth-child(2),
+        &:last-child {
           padding: 0 32px;
         }
         &.is-active {
           color: var(--s-color-base-content-primary);
           background-color: var(--s-color-base-on-accent);
           box-shadow: $s-shadow-surface;
-          border-radius: 8px;
           margin: 2px;
         }
         &:focus.is-focus {
           // TODO: make it more focusable
           box-shadow: $s-shadow-surface;
-          border-radius: 8px;
         }
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index b23829bd..f98e6898 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -48,7 +48,12 @@ $s-size-medium: 40px !default;
 $s-size-small: 32px !default;
 $s-size-mini: 24px !default;
 
-$s-border-radius-default: 4px !default;
+$s-border-radius-base: 4px;
+$s-border-radius-mini: $s-border-radius-base !default;
+$s-border-radius-small: $s-border-radius-base * 2 !default;
+$s-border-radius-medium: $s-border-radius-base * 3 !default;
+$s-border-radius-big: $s-border-radius-base * 4 !default;
+
 // Fonts
 $s-font-family-default: 'Sora', sans-serif !important;
 $s-font-family-mono: 'JetBrainsMono', monospace !important;
@@ -116,6 +121,16 @@ $--breakpoints-spec: (
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  // Size
+  --s-size-mini: #{$s-size-mini};
+  --s-size-small: #{$s-size-small};
+  --s-size-medium: #{$s-size-medium};
+  --s-size-big: #{$s-size-big};
+  // Border Radius
+  --s-border-radius-mini: #{$s-border-radius-mini};
+  --s-border-radius-small: #{$s-border-radius-small};
+  --s-border-radius-medium: #{$s-border-radius-medium};
+  --s-border-radius-big: #{$s-border-radius-big};
   // Shadows
   --s-shadow-surface: #{$s-shadow-surface};
   --s-shadow-tooltip: #{$s-shadow-tooltip};
diff --git a/src/types/index.ts b/src/types/index.ts
index 4c78a22f..dc62dba7 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,6 +4,13 @@ export enum Size {
   SMALL = 'small'
 }
 
+export enum BorderRadius {
+  BIG = 'big',
+  MEDIUM = 'medium',
+  SMALL = 'small',
+  MINI = 'mini'
+}
+
 export enum Direction {
   HORIZONTAL = 'horizontal',
   VERTICAL = 'vertical'

From ebf3e352a6f7cd11e7ed8dceb27b3092f2b37372 Mon Sep 17 00:00:00 2001
From: Alex Natalia <38787212+alexnatalia@users.noreply.github.com>
Date: Tue, 1 Dec 2020 16:05:43 +0300
Subject: [PATCH 4/6] Font Size Configuration and Disabled Button Color Fix
 (#93)

Button component: Refactored and updated disabled color. Added Font size variables.
---
 package.json                    |  2 +-
 src/styles/button.scss          | 52 ++++++++++++---------------------
 src/styles/checkbox.scss        |  2 +-
 src/styles/collapse.scss        |  2 +-
 src/styles/common.scss          | 48 ++++++++++++++++--------------
 src/styles/datepicker.scss      |  2 +-
 src/styles/dialog.scss          |  2 +-
 src/styles/dropdown.scss        |  2 +-
 src/styles/form.scss            |  2 +-
 src/styles/input.scss           |  4 +--
 src/styles/json-input.scss      |  2 +-
 src/styles/menu.scss            |  4 +--
 src/styles/pagination.scss      |  4 +--
 src/styles/radio.scss           |  8 ++---
 src/styles/scroll-sections.scss |  4 +--
 src/styles/select.scss          |  6 ++--
 src/styles/variables.scss       | 31 ++++++++++++++++++--
 17 files changed, 96 insertions(+), 81 deletions(-)

diff --git a/package.json b/package.json
index 38c7556d..832137ea 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 3146b2c7..db55f392 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -14,6 +14,14 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
   --s-color-button-tertiary-background-focused: #{$s-color-button-tertiary-background-focused};
 }
 
+@mixin disabled {
+  &:disabled, &:disabled:hover {
+    color: var(--s-color-base-on-disabled);
+    background-color: var(--s-color-base-disabled);
+    border-color: var(--s-color-base-disabled);
+  }
+}
+
 .s-loading {
   padding: 12px 17.5px;
   i {
@@ -46,11 +54,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-theme-accent-focused);
     border-color: var(--s-color-theme-accent-focused);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
 }
 .s-secondary {
   background-color: var(--s-color-base-on-accent);
@@ -61,22 +65,14 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-base-on-accent);
     border-color: var(--s-color-theme-accent);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
   &.s-alternative {
     &:hover, &:active, &:focus {
       color: var(--s-color-base-content-primary);
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
     }
-    &:disabled, &:disabled:hover {
-      color: var(--s-color-base-content-quaternary);
-      background-color: var(--s-color-base-disabled);
-      border-color: var(--s-color-base-disabled);
-    }
+    @include disabled;
   }
 }
 .s-link {
@@ -88,7 +84,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: transparent;
   }
   &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
+    color: var(--s-color-base-on-disabled);
   }
 }
 .s-tertiary {
@@ -110,32 +106,28 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-button-tertiary-background-focused);
     border-color: var(--s-color-button-tertiary-background-focused);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
 }
 .s-action {
   &.s-big {
     width: $s-size-big;
     padding: 12px;
     i {
-      font-size: 20px;
+      font-size: var(--s-icon-font-size-medium);
     }
   }
   &.s-medium {
     width: $s-size-medium;
     padding: 10px;
     i {
-      font-size: 18px;
+      font-size: var(--s-icon-font-size-small);
     }
   }
   &.s-small {
     width: $s-size-small;
     padding: 9px;
     i {
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       margin-left: -2px;
       margin-top: -2px;
     }
@@ -148,11 +140,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     background-color: var(--s-color-base-background-hover);
     border-color: var(--s-color-base-background-hover);
   }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-content-quaternary);
-    background-color: var(--s-color-base-disabled);
-    border-color: var(--s-color-base-disabled);
-  }
+  @include disabled;
   &.s-alternative {
     background-color: var(--s-color-base-on-accent);
     border-color: var(--s-color-base-border-primary);
@@ -161,11 +149,7 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
       background-color: var(--s-color-base-background);
       border-color: var(--s-color-base-background);
     }
-    &:disabled, &:disabled:hover {
-      color: var(--s-color-base-content-quaternary);
-      background-color: var(--s-color-base-disabled);
-      border-color: var(--s-color-base-disabled);
-    }
+    @include disabled;
   }
 }
 button {
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index 98d4d158..f732c9d8 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -61,7 +61,7 @@
   &.s-small {
     @extend .s-small;
     .el-checkbox__label {
-      font-size: 12px;
+      font-size: var(--s-font-size-mini);
     }
     &,
     &.is-bordered {
diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss
index 3a907164..4bdc620f 100644
--- a/src/styles/collapse.scss
+++ b/src/styles/collapse.scss
@@ -24,7 +24,7 @@
     .el-icon-arrow-right {
       font-family: $s-font-family-icons;
       @extend .s-icon-chevron-bottom;
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       padding: 8px;
       width: 32px;
       height: 32px;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 57b5206c..10d205ef 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -13,40 +13,40 @@ html {
 }
 
 /* Typography */
-h1 {
+h1, h2, h3, h4, h5, h6 {
   font-family: $s-font-family-default;
+}
+
+h1, h2, h3, h4 {
   font-weight: normal;
-  font-size: 36px;
+}
+
+h5, h6 {
+  font-weight: bold;
+}
+
+h1 {
+  font-size: var(--s-heading1-font-size);
 }
 
 h2 {
-  font-family: $s-font-family-default;
-  font-weight: normal;
-  font-size: 30px;
+  font-size: var(--s-heading2-font-size);
 }
 
 h3 {
-  font-family: $s-font-family-default;
-  font-weight: normal;
-  font-size: 24px;
+  font-size: var(--s-heading3-font-size);
 }
 
 h4 {
-  font-family: $s-font-family-default;
-  font-weight: normal;
-  font-size: 18px;
+  font-size: var(--s-heading4-font-size);
 }
 
 h5 {
-  font-family: $s-font-family-default;
-  font-weight: bold;
-  font-size: 16px;
+  font-size: var(--s-heading5-font-size);
 }
 
 h6 {
-  font-family: $s-font-family-default;
-  font-weight: bold;
-  font-size: 14px;
+  font-size: var(--s-heading6-font-size);
 }
 
 .s-flex {
@@ -58,15 +58,19 @@ h6 {
 }
 
 .s-big {
-  height: $s-size-big;
+  height: var(--s-size-big);
 }
 
 .s-medium {
-  height: $s-size-medium;
+  height: var(--s-size-medium);
 }
 
 .s-small {
-  height: $s-size-small;
+  height: var(--s-size-small);
+}
+
+.s-mini {
+  height: var(--s-size-mini);
 }
 
 .s-border-radius-big {
@@ -122,13 +126,13 @@ button > span {
   .el-message-box__header {
     .el-message-box__title {
       color: var(--s-color-base-content-primary);
-      font-size: 16px;
+      font-size: var(--s-heading5-font-size);
     }
   }
   .el-message-box__btns {
     button.el-button.el-button--default.el-button--small {
       height: $s-size-medium;
-      font-size: 14px;
+      font-size: var(--s-font-size-small);
       border-radius: var(--s-border-radius-mini);
       &:hover, &:active, &:focus {
         color: var(--s-color-theme-accent);
diff --git a/src/styles/datepicker.scss b/src/styles/datepicker.scss
index 2696e508..ccaca164 100644
--- a/src/styles/datepicker.scss
+++ b/src/styles/datepicker.scss
@@ -100,7 +100,7 @@
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
     text-align: left;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     padding: 0 15px;
     padding-top: 5px;
     top: 1px;
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
index 2701d1ae..a2e1b13e 100644
--- a/src/styles/dialog.scss
+++ b/src/styles/dialog.scss
@@ -23,7 +23,7 @@
   }
   .el-dialog__title {
     font-weight: bold;
-    font-size: 16px;
+    font-size: var(--s-heading5-font-size);
     color: var(--s-color-base-content-primary);
   }
   > * {
diff --git a/src/styles/dropdown.scss b/src/styles/dropdown.scss
index 39db4325..ab14ba00 100644
--- a/src/styles/dropdown.scss
+++ b/src/styles/dropdown.scss
@@ -49,7 +49,7 @@
     cursor: pointer;
   }
   .s-icon-more-horizontal {
-    font-size: 24px;
+    font-size: var(--s-icon-font-size-big);
   }
 }
 .el-dropdown-menu__item {
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 473f6c56..25014119 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -61,7 +61,7 @@
       position: absolute;
       bottom: 6px;
       left: 4px;
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       color: var(--s-color-status-error);
     }
     .el-input__inner,
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 5c111828..cdef94b3 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -35,7 +35,7 @@
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
     text-align: left;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     padding: 0 15px;
     padding-top: 5px;
     top: 1px;
@@ -150,7 +150,7 @@
     .s-icon-file-upload {
       top: 16px;
       right: 16px;
-      font-size: 24px;
+      font-size: var(--s-icon-font-size-big);
       z-index: 1;
       position: absolute;
       + input {
diff --git a/src/styles/json-input.scss b/src/styles/json-input.scss
index 073a9977..1adf4ad2 100644
--- a/src/styles/json-input.scss
+++ b/src/styles/json-input.scss
@@ -105,7 +105,7 @@ $color-ide-boolean: #0000FF;
     color: var(--s-color-base-on-accent);
     border-radius: var(--s-border-radius-mini);
     padding: 10px;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     line-height: 1.2;
   }
 }
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 51bbb91a..5a790d35 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -41,7 +41,7 @@ $margin-bottom-menu-item: 8px;
   }
   [class^="s-icon-"] {
     margin-right: 12px;
-    font-size: 20px;
+    font-size: var(--s-icon-font-size-medium);
   }
   i {
     color: var(--s-menu-text-color);
@@ -67,7 +67,7 @@ $margin-bottom-menu-item: 8px;
   align-items: center;
   [class^="s-icon-"] {
     margin-right: 12px;
-    font-size: 20px;
+    font-size: var(--s-icon-font-size-medium);
   }
   i {
     color: var(--s-menu-text-color);
diff --git a/src/styles/pagination.scss b/src/styles/pagination.scss
index 6953d9d4..1a3a0abb 100644
--- a/src/styles/pagination.scss
+++ b/src/styles/pagination.scss
@@ -130,10 +130,10 @@
     .el-pagination__sizes .el-select .el-input {
       .el-input__inner {
         height: 22px !important;
-        font-size: 12px;
+        font-size: var(--s-font-size-mini);
       }
       .el-select__caret {
-        font-size: 12px;
+        font-size: var(--s-font-size-mini);
         line-height: 23px;
       }
     }
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 2135b5b7..f8e5837d 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -5,7 +5,7 @@ $radio-button-border-color: var(--s-color-theme-accent);
 @mixin radio-button-size(
   $modifier: "small",
   $size: $s-size-small,
-  $font-size: $s-font-size-small
+  $font-size: var(--s-font-size-mini)
 ) {
   $radio-button-vertical-padding: #{($size - $font-size) / 2 - $radio-button-border-width};
   #{$radio-button-class} {
@@ -59,7 +59,7 @@ $radio-button-border-color: var(--s-color-theme-accent);
       padding-top: 9px;
     }
     > .el-radio__label {
-      font-size: 12px;
+      font-size: var(--s-font-size-mini);
     }
     > .el-radio__input .el-radio__inner {
       width: 14px;
@@ -185,8 +185,8 @@ $radio-button-border-color: var(--s-color-theme-accent);
   }
   &-group {
     @include radio-button-size;
-    @include radio-button-size("medium", $s-size-medium, $s-font-size-big);
-    @include radio-button-size("big", $s-size-big, $s-font-size-big);
+    @include radio-button-size("medium", $s-size-medium, var(--s-font-size-small));
+    @include radio-button-size("big", $s-size-big, var(--s-font-size-small));
     #{$radio-button-class} {
       &__inner {
         background-color: var(--s-color-utility-surface);
diff --git a/src/styles/scroll-sections.scss b/src/styles/scroll-sections.scss
index cfa4a1a1..b2c88b27 100644
--- a/src/styles/scroll-sections.scss
+++ b/src/styles/scroll-sections.scss
@@ -1,6 +1,6 @@
 .s-scroll-sections {
   font-family: $s-font-family-default;
-  font-size: 14px;
+  font-size: var(--s-font-size-small)
 }
 .s-scroll-menu {
   font-weight: 600;
@@ -39,7 +39,7 @@
   padding-bottom: 90%;
   color: var(--s-color-base-content-primary);
   .title {
-    font-size: 16px;
+    font-size: var(--s-heading5-font-size);
   }
 }
 .s-scroll-section-item {
diff --git a/src/styles/select.scss b/src/styles/select.scss
index 0730a45b..cbf72ac3 100644
--- a/src/styles/select.scss
+++ b/src/styles/select.scss
@@ -27,7 +27,7 @@
     width: 100%;
     i.el-icon-arrow-up {
       font-family: $icons-font;
-      font-size: 16px;
+      font-size: var(--s-icon-font-size-mini);
       &:before {
         content: $s-icon-chevron-top;
       }
@@ -114,7 +114,7 @@
     // TODO: add default animation from material-ui
     color: var(--s-color-base-content-tertiary);
     text-align: left;
-    font-size: 12px;
+    font-size: var(--s-font-size-mini);
     padding: 0 15px;
     padding-top: 5px;
     top: 1px;
@@ -206,7 +206,7 @@
     color: var(--s-color-base-on-accent);
     border: 1px solid var(--s-color-base-border-primary);
     background-color: var(--s-color-utility-surface);
-    font-size: 16px;
+    font-size: var(--s-icon-font-size-mini);
     font-weight: bold;
     padding: 1px;
     border-radius: var(--s-border-radius-mini);
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f98e6898..c7177943 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -59,8 +59,20 @@ $s-font-family-default: 'Sora', sans-serif !important;
 $s-font-family-mono: 'JetBrainsMono', monospace !important;
 $s-font-family-icons: 'soramitsu-icons' !important;
 // Font sizes
-$s-font-size-big: 14px !default;
-$s-font-size-small: 12px !default;
+$s-font-size-mini: 12px !default;
+$s-font-size-small: 14px !default;
+// Icons font sizes
+$s-icon-font-size-mini: 16px !default;
+$s-icon-font-size-small: 18px !default;
+$s-icon-font-size-medium: 20px !default;
+$s-icon-font-size-big: 24px !default;
+// Font heading sizes
+$s-heading1-font-size: 36px !default;
+$s-heading2-font-size: 30px !default;
+$s-heading3-font-size: 24px !default;
+$s-heading4-font-size: 18px !default;
+$s-heading5-font-size: 16px !default;
+$s-heading6-font-size: 14px !default;
 
 // Responsive
 $--sm: 640px !default;
@@ -121,6 +133,21 @@ $--breakpoints-spec: (
   --s-color-status-success-background: #{$s-color-status-success-background};
   --s-color-status-warning-background: #{$s-color-status-warning-background};
   --s-color-status-error-background: #{$s-color-status-error-background};
+  // Font Sizes
+  --s-font-size-mini: #{$s-font-size-mini};
+  --s-font-size-small: #{$s-font-size-small};
+  // Icons font sizes
+  --s-icon-font-size-mini: #{$s-icon-font-size-mini};
+  --s-icon-font-size-small: #{$s-icon-font-size-small};
+  --s-icon-font-size-medium: #{$s-icon-font-size-medium};
+  --s-icon-font-size-big: #{$s-icon-font-size-big};
+  // Heading Font Sizes
+  --s-heading1-font-size: #{$s-heading1-font-size};
+  --s-heading2-font-size: #{$s-heading2-font-size};
+  --s-heading3-font-size: #{$s-heading3-font-size};
+  --s-heading4-font-size: #{$s-heading4-font-size};
+  --s-heading5-font-size: #{$s-heading5-font-size};
+  --s-heading6-font-size: #{$s-heading6-font-size};
   // Size
   --s-size-mini: #{$s-size-mini};
   --s-size-small: #{$s-size-small};

From c60647f59769ce7f3161ad70e6a2095889b0838d Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 8 Dec 2020 10:50:33 +0400
Subject: [PATCH 5/6] Fix select placeholder when zero values are set as a
 model (#95)

---
 package.json                      | 2 +-
 src/components/Select/SSelect.vue | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 832137ea..52858275 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Select/SSelect.vue b/src/components/Select/SSelect.vue
index c706e329..04fdcccc 100644
--- a/src/components/Select/SSelect.vue
+++ b/src/components/Select/SSelect.vue
@@ -178,7 +178,12 @@ export default class SSelect extends Mixins(BorderRadiusMixin) {
     if (this.inputType !== InputTypes.INPUT) {
       return false
     }
-    return !!(this.model && this.model.length !== 0 && this.placeholder)
+    return !!(
+      this.model !== null &&
+      this.model !== undefined &&
+      (!Array.isArray(this.model) || this.model.length !== 0) &&
+      this.placeholder
+    )
   }
 
   handleBlur (event: Event): void {

From d32d121c5f3820518ec618c14d223c70ca5704cc Mon Sep 17 00:00:00 2001
From: Stefan Popov <stefanpopov@list.ru>
Date: Tue, 8 Dec 2020 12:46:19 +0400
Subject: [PATCH 6/6] Make half-second delay for pressed color, drop current
 state (#96)

---
 package.json                      |   2 +-
 src/components/Button/SButton.vue |   8 ++
 src/styles/button.scss            | 201 +++++++++++++++---------------
 3 files changed, 111 insertions(+), 100 deletions(-)

diff --git a/package.json b/package.json
index 52858275..26831cd9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"
diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue
index e2cecedc..6858f377 100644
--- a/src/components/Button/SButton.vue
+++ b/src/components/Button/SButton.vue
@@ -100,6 +100,7 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
 
   private iconLeftOffset = 0
   elementIcon = ''
+  pressed = false
 
   get computedType (): string {
     if (this.type === ButtonTypes.PRIMARY) {
@@ -127,6 +128,9 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
     if (this.alternative) {
       cssClasses.push('s-alternative')
     }
+    if (this.pressed) {
+      cssClasses.push('s-pressed')
+    }
     return cssClasses
   }
 
@@ -159,6 +163,10 @@ export default class SButton extends Mixins(SizeMixin, BorderRadiusMixin) {
 
   handleClick (): void {
     this.$emit('click')
+    this.pressed = true
+    setTimeout(() => {
+      this.pressed = false
+    }, 500)
   }
 
   mounted (): void {
diff --git a/src/styles/button.scss b/src/styles/button.scss
index db55f392..2b026621 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -38,118 +38,120 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
     color: transparent;
   }
 }
-.s-primary {
-  background-color: var(--s-color-theme-accent);
-  border-color: var(--s-color-theme-accent);
-  color: var(--s-color-base-on-accent);
-  &:hover {
-    background-color: var(--s-color-theme-accent-hover);
-    border-color: var(--s-color-theme-accent-hover);
-  }
-  &:active {
-    background-color: var(--s-color-theme-accent-pressed);
-    border-color: var(--s-color-theme-accent-pressed);
-  }
-  &:focus {
-    background-color: var(--s-color-theme-accent-focused);
-    border-color: var(--s-color-theme-accent-focused);
-  }
-  @include disabled;
-}
-.s-secondary {
-  background-color: var(--s-color-base-on-accent);
-  color: var(--s-color-base-content-primary);
-  border-color: var(--s-color-base-border-primary);
-  &:hover, &:active, &:focus {
-    color: var(--s-color-theme-accent);
-    background-color: var(--s-color-base-on-accent);
+.el-button {
+  &.s-primary {
+    background-color: var(--s-color-theme-accent);
     border-color: var(--s-color-theme-accent);
+    color: var(--s-color-base-on-accent);
+    &.focusing {
+      background-color: var(--s-color-theme-accent-focused);
+      border-color: var(--s-color-theme-accent-focused);
+    }
+    &:hover {
+      background-color: var(--s-color-theme-accent-hover);
+      border-color: var(--s-color-theme-accent-hover);
+    }
+    &.s-pressed {
+      background-color: var(--s-color-theme-accent-pressed);
+      border-color: var(--s-color-theme-accent-pressed);
+    }
+    @include disabled;
   }
-  @include disabled;
-  &.s-alternative {
-    &:hover, &:active, &:focus {
-      color: var(--s-color-base-content-primary);
-      background-color: var(--s-color-base-background);
-      border-color: var(--s-color-base-background);
+  &.s-secondary {
+    background-color: var(--s-color-base-on-accent);
+    color: var(--s-color-base-content-primary);
+    border-color: var(--s-color-base-border-primary);
+    &.focusing, &:hover, &.s-pressed {
+      color: var(--s-color-theme-accent);
+      background-color: var(--s-color-base-on-accent);
+      border-color: var(--s-color-theme-accent);
     }
     @include disabled;
+    &.s-alternative {
+      &.focusing, &:hover, &.s-pressed {
+        color: var(--s-color-base-content-primary);
+        background-color: var(--s-color-base-background);
+        border-color: var(--s-color-base-background);
+      }
+      @include disabled;
+    }
   }
-}
-.s-link {
-  color: var(--s-color-base-content-primary);
-  border: none;
-  background-color: transparent;
-  &:hover, &:active, &:focus {
-    color: var(--s-color-theme-accent);
+  &.s-link {
+    color: var(--s-color-base-content-primary);
+    border: none;
     background-color: transparent;
-  }
-  &:disabled, &:disabled:hover {
-    color: var(--s-color-base-on-disabled);
-  }
-}
-.s-tertiary {
-  color: var(--s-color-button-tertiary-color);
-  border-color: var(--s-color-button-tertiary-background);
-  background-color: var(--s-color-button-tertiary-background);
-  &:hover, &:active, &:focus {
-    color: var(--s-color-button-tertiary-color-active);
-  }
-  &:hover {
-    background-color: var(--s-color-button-tertiary-background-hover);
-    border-color: var(--s-color-button-tertiary-background-hover);
-  }
-  &:active {
-    background-color: var(--s-color-button-tertiary-background-pressed);
-    border-color: var(--s-color-button-tertiary-background-pressed);
-  }
-  &:focus {
-    background-color: var(--s-color-button-tertiary-background-focused);
-    border-color: var(--s-color-button-tertiary-background-focused);
-  }
-  @include disabled;
-}
-.s-action {
-  &.s-big {
-    width: $s-size-big;
-    padding: 12px;
-    i {
-      font-size: var(--s-icon-font-size-medium);
+    &.focusing, &:hover, &.s-pressed {
+      color: var(--s-color-theme-accent);
+      background-color: transparent;
     }
-  }
-  &.s-medium {
-    width: $s-size-medium;
-    padding: 10px;
-    i {
-      font-size: var(--s-icon-font-size-small);
+    &:disabled, &:disabled:hover {
+      color: var(--s-color-base-on-disabled);
     }
   }
-  &.s-small {
-    width: $s-size-small;
-    padding: 9px;
-    i {
-      font-size: var(--s-icon-font-size-mini);
-      margin-left: -2px;
-      margin-top: -2px;
+  &.s-tertiary {
+    color: var(--s-color-button-tertiary-color);
+    border-color: var(--s-color-button-tertiary-background);
+    background-color: var(--s-color-button-tertiary-background);
+    &.focusing, &:hover, &.s-pressed {
+      color: var(--s-color-button-tertiary-color-active);
+    }
+    &.focusing {
+      background-color: var(--s-color-button-tertiary-background-focused);
+      border-color: var(--s-color-button-tertiary-background-focused);
     }
+    &:hover {
+      background-color: var(--s-color-button-tertiary-background-hover);
+      border-color: var(--s-color-button-tertiary-background-hover);
+    }
+    &.s-pressed {
+      background-color: var(--s-color-button-tertiary-background-pressed);
+      border-color: var(--s-color-button-tertiary-background-pressed);
+    }
+    @include disabled;
   }
-  color: var(--s-color-base-content-primary);
-  background-color: var(--s-color-base-background);
-  border-color: var(--s-color-base-background);
-  &:hover, &:active, &:focus {
+  &.s-action {
+    &.s-big {
+      width: $s-size-big;
+      padding: 12px;
+      i {
+        font-size: var(--s-icon-font-size-medium);
+      }
+    }
+    &.s-medium {
+      width: $s-size-medium;
+      padding: 10px;
+      i {
+        font-size: var(--s-icon-font-size-small);
+      }
+    }
+    &.s-small {
+      width: $s-size-small;
+      padding: 9px;
+      i {
+        font-size: var(--s-icon-font-size-mini);
+        margin-left: -2px;
+        margin-top: -2px;
+      }
+    }
     color: var(--s-color-base-content-primary);
-    background-color: var(--s-color-base-background-hover);
-    border-color: var(--s-color-base-background-hover);
-  }
-  @include disabled;
-  &.s-alternative {
-    background-color: var(--s-color-base-on-accent);
-    border-color: var(--s-color-base-border-primary);
-    &:hover, &:active, &:focus {
+    background-color: var(--s-color-base-background);
+    border-color: var(--s-color-base-background);
+    &.focusing, &:hover, &.s-pressed {
       color: var(--s-color-base-content-primary);
-      background-color: var(--s-color-base-background);
-      border-color: var(--s-color-base-background);
+      background-color: var(--s-color-base-background-hover);
+      border-color: var(--s-color-base-background-hover);
     }
     @include disabled;
+    &.s-alternative {
+      background-color: var(--s-color-base-on-accent);
+      border-color: var(--s-color-base-border-primary);
+      &.focusing, &:hover, &.s-pressed {
+        color: var(--s-color-base-content-primary);
+        background-color: var(--s-color-base-background);
+        border-color: var(--s-color-base-background);
+      }
+      @include disabled;
+    }
   }
 }
 button {
@@ -165,10 +167,11 @@ button {
     }
   }
 }
-.el-button-group .el-button--plain {
+.el-button-group .el-button.el-button--plain {
   color: var(--s-color-base-content-primary);
   border-color: var(--s-color-base-border-primary);
-  &:hover, &:active, &:focus {
+  background-color: var(--s-color-base-on-accent);
+  &.focusing, &:hover, &.s-pressed {
     color: var(--s-color-theme-accent);
     background-color: var(--s-color-base-on-accent);
     border-color: var(--s-color-theme-accent);