Release 0.7.14

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.7.13",
+  "version": "0.7.14",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu-private/"

src/components/Tab/STabs.vue

@@ -38,7 +38,7 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
    *
    * `"rounded"` works only when position is `"top"` or `"bottom"`
    */
-  @Prop({ type: String, default: '' }) readonly type!: string
+  @Prop({ type: String, default: '' }) readonly type!: TabsType
   /**
    * Will tabs be closable.
    *
@@ -88,10 +88,9 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
   }
 
   get computedType (): string {
-    if (!(Object.values(TabsType) as Array<string>).includes(this.type)) {
-      return ''
-    }
-    return this.type !== TabsType.ROUNDED ? this.type : ''
+    if (!(Object.values(TabsType) as Array<string>).includes(this.type)) return ''
+    if ([TabsType.ROUNDED, TabsType.ACCENT_ROUNDED].includes(this.type)) return ''
+    return this.type
   }
 
   get computedClasses (): Array<string> {
@@ -100,6 +99,10 @@ export default class STabs extends Mixins(BorderRadiusMixin) {
       ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
       cssClasses.push('s-rounded')
     }
+    if (this.type === TabsType.ACCENT_ROUNDED &&
+      ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array<string>).includes(this.position)) {
+      cssClasses.push('s-accent-rounded')
+    }
     if (this.isStandardBorderRadius) {
       cssClasses.push(`s-border-radius-${this.borderRadius}`)
     }

src/components/Tab/consts.ts

@@ -1,5 +1,6 @@
 export enum TabsType {
   ROUNDED = 'rounded',
+  ACCENT_ROUNDED = 'accent-rounded',
   CARD = 'card',
   BORDER_CARD = 'border-card'
 }

src/styles/breadcrumbs.scss

@@ -1,12 +1,12 @@
 .el-breadcrumb__separator {
   color: var(--s-color-base-content-tertiary);
-  font-weight: normal;
+  @include font-weight(400);
 }
 .el-breadcrumb__inner {
   color: var(--s-color-base-content-tertiary);
   &.is-link {
     color: var(--s-color-base-content-tertiary);
-    font-weight: normal;
+    @include font-weight(400);
     &:hover {
       color: var(--s-color-theme-accent);
     }

src/styles/button.scss

@@ -153,6 +153,10 @@ $s-color-button-tertiary-background-focused: var(--s-color-base-background) !def
       @include disabled;
     }
   }
+  span {
+    font-feature-settings: var(--s-font-feature-settings-heading);
+    @include font-weight(700, true);
+  }
 }
 button {
   > span > i {

src/styles/checkbox.scss

@@ -21,6 +21,9 @@
   @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));
+  &__label {
+    line-height: var(--s-line-height-big);
+  }
   &.is-bordered {
     &,
     &.is-disabled,

src/styles/common.scss

@@ -5,6 +5,7 @@
 
 html {
   box-sizing: border-box;
+  font-feature-settings: var(--s-font-feature-settings-common);
 }
 
 *, *:before, *:after {
@@ -15,34 +16,53 @@ html {
 /* Typography */
 h1, h2, h3, h4, h5, h6 {
   font-family: $s-font-family-default;
+  font-feature-settings: var(--s-font-feature-settings-heading);
 }
 
 h1, h2, h3, h4 {
-  font-weight: normal;
+  @include font-weight(400);
 }
 
-h5, h6 {
-  font-weight: bold;
+h1, h2 {
+  letter-spacing: var(--s-letter-spacing-mini);
 }
 
 h1 {
   font-size: var(--s-heading1-font-size);
+  line-height: var(--s-line-height-mini);
 }
 
 h2 {
   font-size: var(--s-heading2-font-size);
 }
 
+h2, h3 {
+  line-height: var(--s-line-height-small);
+}
+
+h3, h4 {
+  letter-spacing: var(--s-letter-spacing-small);
+}
+
 h3 {
   font-size: var(--s-heading3-font-size);
 }
 
+h4, h5, h6 {
+  line-height: var(--s-line-height-medium);
+}
+
 h4 {
   font-size: var(--s-heading4-font-size);
 }
 
+h5, h6 {
+  @include font-weight(700);
+}
+
 h5 {
   font-size: var(--s-heading5-font-size);
+  letter-spacing: var(--s-letter-spacing-big);
 }
 
 h6 {
@@ -54,7 +74,7 @@ h6 {
 }
 
 .s-bold {
-  font-weight: bold;
+  @include font-weight(700);
 }
 
 .s-big {

src/styles/datepicker.scss

@@ -134,7 +134,7 @@ $date-picker-padding: 8px;
       .el-input__inner,
       .el-range-input,
       .el-range-separator {
-        font-weight: bold;
+        @include font-weight(700, true);
       }
       &.el-input__inner,
       & .el-input__inner {
@@ -145,7 +145,7 @@ $date-picker-padding: 8px;
         &::placeholder,
         .el-range-input::placeholder {
           color: var(--s-color-base-content-tertiary);
-          font-weight: bold;
+          @include font-weight(700, true);
         }
       }
     }

src/styles/dialog.scss

@@ -21,10 +21,13 @@
   .s-border-radius-mini & {
     border-radius: var(--s-border-radius-mini);
   }
+  .el-dialog__header .el-dialog__title {
+    @include font-weight(700, true);
+  }
   .el-dialog__title {
-    font-weight: bold;
     font-size: var(--s-heading5-font-size);
     color: var(--s-color-base-content-primary);
+    font-feature-settings: var(--s-font-feature-settings-heading);
   }
   > * {
     word-break: break-word;

src/styles/fonts.scss

@@ -5,29 +5,10 @@
   font-style: normal;
   font-display: block;
 }
-@font-face {
-  font-family: "SoraB";
-  src: url("~@/assets/fonts/Sora-Bold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraEB";
-  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraSB";
-  src: url("~@/assets/fonts/Sora-SemiBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
 @font-face {
   font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-Regular.otf");
-  font-weight: normal;
-  font-style: normal;
+  src: url("~@/assets/fonts/Sora-VariableFont_wght.ttf") format("truetype-variations");
+  font-weight: 1 999;
 }
 @font-face {
   font-family: "JetBrainsMono";

src/styles/pagination.scss

@@ -53,7 +53,7 @@
       .el-select__caret,
       .el-input__inner {
         color: var(--s-color-base-content-primary);
-        font-weight: bold;
+        @include font-weight(700);
       }
       .el-select__caret {
         margin-right: 6px;
@@ -86,10 +86,11 @@
   .per-page-text,
   .el-pagination__jump {
     color: var(--s-color-base-content-tertiary);
-    font-weight: normal;
+    @include font-weight(400);
   }
   .el-pager li {
     color: var(--s-color-base-content-primary);
+    @include font-weight(700);
     &.btn-quicknext,
     &.btn-quickprev {
       color: var(--s-color-base-content-primary);
@@ -139,6 +140,11 @@
     }
   }
 }
-.el-select-dropdown__item.selected {
-  color: var(--s-color-theme-accent);
+.el-select-dropdown {
+  &__item.selected {
+    color: var(--s-color-theme-accent);
+  }
+  .el-select-dropdown__item.selected {
+    @include font-weight(700, true);
+  }
 }

src/styles/radio.scss

@@ -23,6 +23,9 @@ $radio-button-border-color: var(--s-color-theme-accent);
 
 .el-radio {
   color: var(--s-color-base-content-primary);
+  &__label {
+    line-height: var(--s-line-height-big);
+  }
   &.s-big {
     @extend .s-big;
     line-height: $s-size-big;

src/styles/scroll-sections.scss

@@ -3,7 +3,7 @@
   font-size: var(--s-font-size-small);
 }
 .s-scroll-menu {
-  font-weight: 600;
+  @include font-weight(600);
   ul {
     position: sticky;
     top: 0;
@@ -53,7 +53,7 @@
     }
   }
   .title {
-    font-weight: bold;
+    @include font-weight(700);
     display: block;
     padding-bottom: 12px;
   }

src/styles/select.scss

@@ -174,13 +174,13 @@ $select-prefix-height: $s-size-mini;
           }
         }
         .el-input__inner {
-          font-weight: bold;
+          @include font-weight(700);
           &:hover {
             border-color: var(--s-color-base-border-primary);
           }
           &::placeholder {
             color: var(--s-color-base-content-tertiary);
-            font-weight: bold;
+            @include font-weight(700);
           }
           &:focus {
             border-color: var(--s-color-base-border-primary);
@@ -253,12 +253,12 @@ $select-prefix-height: $s-size-mini;
     border: 1px solid var(--s-color-base-border-primary);
     background-color: var(--s-color-utility-surface);
     font-size: var(--s-icon-font-size-mini);
-    font-weight: bold;
+    @include font-weight(700);
     padding: 1px;
     border-radius: var(--s-border-radius-mini);
   }
   &.selected {
-    font-weight: normal;
+    @include font-weight(400);
     &.hover {
       background-color: transparent;
     }

src/styles/table.scss

@@ -55,6 +55,9 @@
   border-bottom: none;
 }
 .el-table__header {
+  thead th .cell {
+    @include font-weight(700, true);
+  }
   label.el-checkbox.is-disabled {
     cursor: not-allowed;
     pointer-events: none;