@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/cjs/treeSelect/treeSelect.css

@@ -17,12 +17,29 @@
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
-  border: 1px solid inherit;
+  border: 1px solid transparent;
+}
+.semi-tree-select:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-tree-select:active {
+  background-color: var(--semi-color-fill-2);
 }
 .semi-tree-select-focus {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-focus-border);
+  outline: 0;
+}
+.semi-tree-select-focus:hover {
+  background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
+.semi-tree-select-focus:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-tree-select-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -91,11 +108,14 @@
   padding-right: 0;
   cursor: pointer;
   color: var(--semi-color-text-0);
+  position: relative;
 }
-.semi-tree-select-selection-placeholder {
+.semi-tree-select-selection-content {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+}
+.semi-tree-select-selection-placeholder {
   color: var(--semi-color-text-2);
 }
 .semi-tree-select-selection .semi-tag-group {
@@ -109,6 +129,10 @@
 }
 .semi-tree-select-selection-TriggerSearchItem {
   position: absolute;
+  max-width: calc(100% - 12px);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .semi-tree-select-selection-TriggerSearchItem-placeholder {
   opacity: 0.6;
@@ -139,20 +163,18 @@
 .semi-tree-select-selection .semi-tagInput {
   border: hidden;
   background: transparent;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-default {
   min-height: 30px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-small {
+.semi-tree-select-selection .semi-tagInput-small {
   min-height: 22px;
 }
-.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper-large {
+.semi-tree-select-selection .semi-tagInput-large {
   min-height: 38px;
 }
+.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper {
+  padding-left: 4px;
+  padding-right: 4px;
+}
 .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input {
   padding-left: 0;
 }
@@ -274,6 +296,29 @@
   border-bottom: 1px var(--semi-color-fill-0) solid;
 }
 
+.semi-tree-select-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-tree-select-borderless:not(:focus-within):not(:hover) .semi-tree-select-arrow {
+  opacity: 0;
+}
+.semi-tree-select-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-tree-select-borderless.semi-tree-select-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-tree-select-borderless.semi-tree-select-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-tree-select-borderless.semi-tree-select-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-tree-select-borderless.semi-tree-select-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-tree-select,
 .semi-portal-rtl .semi-tree-select {
   direction: rtl;

package/lib/cjs/treeSelect/treeSelect.scss

@@ -16,16 +16,41 @@ $module: #{$prefix}-tree-select;
     position: relative;
     cursor: pointer;
 
+
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
         border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
+    &:focus {
+        border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        background-color: $color-treeSelect_default-bg-focus;
+        outline: 0;
+    }
+
+    &:active{
+        background-color: $color-treeSelect_default-bg-active;
+    }
+
+
     &-focus {
+        background-color: $color-treeSelect_default-bg-focus;
         border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
         outline: 0;
+
+        &:hover {
+            background-color: $color-treeSelect_default-bg-focus;
+            border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+            outline: 0;
+        }
+
+
+        &:active{
+            background-color: $color-treeSelect_default-bg-active;
+        }
     }
 
+
     &-warning {
         background-color: $color-treeSelect_warning-bg-default;
         border-color: $color-treeSelect_warning-border-default;
@@ -108,11 +133,15 @@ $module: #{$prefix}-tree-select;
         padding-right: 0;
         cursor: pointer;
         color: $color-treeSelect_selection-text-default;
+        position: relative;
 
-        &-placeholder {
+        &-content {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+        }
+        
+        &-placeholder {
             color: $color-treeSelect_input_placeholder-text-default;
         }
 
@@ -129,6 +158,10 @@ $module: #{$prefix}-tree-select;
 
         &-TriggerSearchItem {
             position: absolute;
+            max-width: calc(100% - $spacing-treeSelect_selection-paddingLeft);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
             
             &-placeholder {
                 opacity: .6;
@@ -171,23 +204,20 @@ $module: #{$prefix}-tree-select;
         .#{$prefix}-tagInput {
             border: hidden;
             background: transparent;
+            min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+            }
 
             .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                &-default {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
-                }
-
-                &-large {
-                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
-                }
-
                 .#{$prefix}-input-wrapper {
                     // height: $height-treeSelect_selection_tagInput_input_default;
 
@@ -205,13 +235,6 @@ $module: #{$prefix}-tree-select;
                         margin-bottom: $spacing-treeSelect_tag-marginY;
                     }
                 }
-    
-                // .#{$prefix}-input-wrapper-small {
-                //     height: $height-treeSelect_selection_tagInput_input_small;
-                // }
-                // .#{$prefix}-input-wrapper-large {
-                //     height: $height-treeSelect_selection_tagInput_input_large;
-                // }
             }
         }
     }
@@ -357,4 +380,37 @@ $module: #{$prefix}-tree-select;
     }
 }
 
+.#{$module}-borderless{
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-treeSelect_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-treeSelect_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-treeSelect_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-treeSelect_warning-border-focus;
+    }
+
+}
+
 @import './rtl.scss';

package/lib/cjs/treeSelect/variables.scss

@@ -1,12 +1,14 @@
 $color-treeSelect_default-bg-default: var(--semi-color-fill-0); // 树选择器选择框背景颜色 - 默认
+$color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
+$color-treeSelect_default-bg-active: var(--semi-color-fill-2); // 树选择器选择框背景颜色 - 按下
+$color-treeSelect_default-bg-focus: var(--semi-color-fill-0); // 树选择器选择框背景颜色 - 选中
 $color-treeSelect_default-border-default: transparent; // 树选择器选择框描边颜色 - 默认
 $color-treeSelect_selection-text-default: var(--semi-color-text-0); // 树选择器选择框回填内容文本颜色 - 默认
 $color-treeSelect_default-icon-default: var(--semi-color-text-2); // 树选择器选择框图标颜色 - 默认
 $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选择器选择框清空按钮颜色 - 悬停
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
-$color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
-$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
+$color-treeSelect_default-border-hover: transparent; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认

package/lib/cjs/typography/constants.d.ts

@@ -2,6 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
+    readonly WEIGHT: readonly ["light", "regular", "medium", "semibold", "bold", "default"];
     readonly TYPE: readonly ["primary", "secondary", "danger", "warning", "success", "tertiary", "quaternary"];
     readonly SIZE: readonly ["normal", "small"];
     readonly SPACING: readonly ["normal", "extended"];

package/lib/cjs/typography/constants.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.strings = exports.cssClasses = void 0;
-
 var _constants = require("../base/constants");
-
 const cssClasses = {
-  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-typography")
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-typography`
 };
 exports.cssClasses = cssClasses;
 const strings = {
+  WEIGHT: ['light', 'regular', 'medium', 'semibold', 'bold', "default"],
   TYPE: ['primary', 'secondary', 'danger', 'warning', 'success', 'tertiary', 'quaternary'],
   SIZE: ['normal', 'small'],
   SPACING: ['normal', 'extended'],

package/lib/cjs/typography/formatNumeral.d.ts

@@ -1,7 +1,7 @@
 import { strings } from './constants';
-declare type Rule = typeof strings.RULE[number];
-declare type Truncate = typeof strings.TRUNCATE[number];
-declare type Parser = (value: string) => string;
+type Rule = typeof strings.RULE[number];
+type Truncate = typeof strings.TRUNCATE[number];
+type Parser = (value: string) => string;
 export default class FormatNumeral {
     private readonly content;
     private readonly rule;

package/lib/cjs/typography/formatNumeral.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 class FormatNumeral {
   constructor(content, rule, precision, truncate, parser) {
     // A collection of methods for formatting numbers;  Methods key: Rule (strings.RULE);  Not included: 'text' & 'numbers'
@@ -12,41 +11,32 @@ class FormatNumeral {
       'bytes-decimal': value => {
         const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         let i = 0;
-
         while (value >= 1000) {
           value /= 1000;
           i++;
         }
-
-        return "".concat(this.truncatePrecision(value), " ").concat(units[i]);
+        return `${this.truncatePrecision(value)} ${units[i]}`;
       },
       'bytes-binary': value => {
         const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
         let i = 0;
-
         while (value >= 1024) {
           value /= 1024;
           i++;
         }
-
-        return "".concat(this.truncatePrecision(value), " ").concat(units[i]);
+        return `${this.truncatePrecision(value)} ${units[i]}`;
       },
       percentages: value => {
-        const cArr = value.toString().split('.');
-
-        if (Number(cArr[0]) === 0) {
-          return "".concat(this.truncatePrecision(value * 100), "%");
-        }
-
-        return "".concat(this.truncatePrecision(value), "%");
+        // The rules here have been modified in version v2.30.0
+        return `${this.truncatePrecision(value * 100)}%`;
       },
       exponential: value => {
         const vExponential = value.toExponential(this.precision + 2);
         const vArr = vExponential.split('e');
-        return "".concat(this.truncatePrecision(Number(vArr[0])), "e").concat(vArr[1]);
+        return `${this.truncatePrecision(Number(vArr[0]))}e${vArr[1]}`;
       }
-    }; // A collection of methods for truncating numbers; Methods key: Truncate (strings.Truncate);
-
+    };
+    // A collection of methods for truncating numbers; Methods key: Truncate (strings.Truncate);
     this.truncateMethods = {
       ceil: Math.ceil,
       floor: Math.floor,
@@ -58,57 +48,46 @@ class FormatNumeral {
     this.precision = precision;
     this.truncate = truncate;
     this.parser = parser;
-  } // Formatting numbers within a string.
-
-
+  }
+  // Formatting numbers within a string.
   format() {
     // Executed when a custom method exists
     if (this.isDiyParser) {
       return this.parser(this.content);
-    } //  When the `rule` is `text`, only the `truncatePrecision` method is executed for numeric processing.
-
-
+    }
+    //  When the `rule` is `text`, only the `truncatePrecision` method is executed for numeric processing.
     if (this.rule === 'text') {
       return extractNumbers(this.content).map(item => checkIsNumeral(item) ? this.truncatePrecision(item) : item).join('');
-    } // Separate extraction of numbers when `rule` is `numbers`.
-
-
+    }
+    // Separate extraction of numbers when `rule` is `numbers`.
     if (this.rule === 'numbers') {
       return extractNumbers(this.content).filter(item => checkIsNumeral(item)).map(item => this.truncatePrecision(item)).join(',');
-    } // Run formatting methods that exist.
-
-
+    }
+    // Run formatting methods that exist.
     return extractNumbers(this.content).map(item => checkIsNumeral(item) ? this.ruleMethods[this.rule](Number(item)) : item).join('');
   }
-
   truncatePrecision(content) {
     // Truncation and selection of rounding methods for processing. function from: truncateMethods
     const cTruncated = this.truncateMethods[this.truncate](Number(content) * Math.pow(10, this.precision)) / Math.pow(10, this.precision);
-    const cArr = cTruncated.toString().split('.'); // is an integer then the end number is normalised
-
+    const cArr = cTruncated.toString().split('.');
+    // is an integer then the end number is normalised
     if (cArr.length === 1) {
       return cTruncated.toFixed(this.precision);
     }
-
-    const cTLength = cArr[1].length; // Fill in any missing `0` at the end.
-
+    const cTLength = cArr[1].length;
+    // Fill in any missing `0` at the end.
     if (cTLength < this.precision) {
-      return "".concat(cArr[0], ".").concat(cArr[1]).concat('0'.repeat(this.precision - cTLength));
+      return `${cArr[0]}.${cArr[1]}${'0'.repeat(this.precision - cTLength)}`;
     }
-
     return cTruncated.toString();
   }
-
-} // Separate numbers from strings, the `-` symbol is a numeric prefix not allowed on its own.
-
-
+}
+// Separate numbers from strings, the `-` symbol is a numeric prefix not allowed on its own.
 exports.default = FormatNumeral;
-
 function extractNumbers(content) {
   const reg = /(-?[0-9]*\.?[0-9]+([eE]-?[0-9]+)?)|([^-\d\.]+)/g;
   return content.match(reg) || [];
 }
-
 function checkIsNumeral(str) {
   return !(isNaN(Number(str)) || str.replace(/\s+/g, '') === '');
 }

package/lib/cjs/typography/typography.css

@@ -46,6 +46,10 @@
   font-size: 12px;
   line-height: 16px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+}
+.semi-typography-small.semi-typography-paragraph {
+  font-weight: 400;
 }
 .semi-typography code {
   border: 1px solid var(--semi-color-border);
@@ -98,18 +102,26 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.semi-typography-ellipsis-multiple-line.semi-typography-ellipsis-multiple-line-text {
+  display: -webkit-inline-box;
+}
 .semi-typography-ellipsis-overflow-ellipsis {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.semi-typography-ellipsis-overflow-ellipsis.semi-typography-ellipsis-overflow-ellipsis-text {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: top;
+}
 .semi-typography-ellipsis-expand {
   display: inline;
   margin-left: 8px;
 }
 .semi-typography-action-copy {
   display: inline-flex;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   padding: 0;
   margin-left: 4px;
 }
@@ -123,7 +135,7 @@
   color: var(--semi-color-text-2);
 }
 .semi-typography-action-copied .semi-icon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
   color: var(--semi-color-success);
 }
 .semi-typography-paragraph {
@@ -138,6 +150,26 @@ h1.semi-typography,
   font-weight: 600;
   margin: 0;
 }
+h1.semi-typography.semi-typography-h1-weight-light,
+.semi-typography-h1.semi-typography.semi-typography-h1-weight-light {
+  font-weight: 200;
+}
+h1.semi-typography.semi-typography-h1-weight-regular,
+.semi-typography-h1.semi-typography.semi-typography-h1-weight-regular {
+  font-weight: 400;
+}
+h1.semi-typography.semi-typography-h1-weight-medium,
+.semi-typography-h1.semi-typography.semi-typography-h1-weight-medium {
+  font-weight: 500;
+}
+h1.semi-typography.semi-typography-h1-weight-semibold,
+.semi-typography-h1.semi-typography.semi-typography-h1-weight-semibold {
+  font-weight: 600;
+}
+h1.semi-typography.semi-typography-h1-weight-bold,
+.semi-typography-h1.semi-typography.semi-typography-h1-weight-bold {
+  font-weight: 700;
+}
 
 h2.semi-typography,
 .semi-typography-h2.semi-typography {
@@ -147,6 +179,26 @@ h2.semi-typography,
   font-weight: 600;
   margin: 0;
 }
+h2.semi-typography.semi-typography-h2-weight-light,
+.semi-typography-h2.semi-typography.semi-typography-h2-weight-light {
+  font-weight: 200;
+}
+h2.semi-typography.semi-typography-h2-weight-regular,
+.semi-typography-h2.semi-typography.semi-typography-h2-weight-regular {
+  font-weight: 400;
+}
+h2.semi-typography.semi-typography-h2-weight-medium,
+.semi-typography-h2.semi-typography.semi-typography-h2-weight-medium {
+  font-weight: 500;
+}
+h2.semi-typography.semi-typography-h2-weight-semibold,
+.semi-typography-h2.semi-typography.semi-typography-h2-weight-semibold {
+  font-weight: 600;
+}
+h2.semi-typography.semi-typography-h2-weight-bold,
+.semi-typography-h2.semi-typography.semi-typography-h2-weight-bold {
+  font-weight: 700;
+}
 
 h3.semi-typography,
 .semi-typography-h3.semi-typography {
@@ -156,6 +208,26 @@ h3.semi-typography,
   font-weight: 600;
   margin: 0;
 }
+h3.semi-typography.semi-typography-h3-weight-light,
+.semi-typography-h3.semi-typography.semi-typography-h3-weight-light {
+  font-weight: 200;
+}
+h3.semi-typography.semi-typography-h3-weight-regular,
+.semi-typography-h3.semi-typography.semi-typography-h3-weight-regular {
+  font-weight: 400;
+}
+h3.semi-typography.semi-typography-h3-weight-medium,
+.semi-typography-h3.semi-typography.semi-typography-h3-weight-medium {
+  font-weight: 500;
+}
+h3.semi-typography.semi-typography-h3-weight-semibold,
+.semi-typography-h3.semi-typography.semi-typography-h3-weight-semibold {
+  font-weight: 600;
+}
+h3.semi-typography.semi-typography-h3-weight-bold,
+.semi-typography-h3.semi-typography.semi-typography-h3-weight-bold {
+  font-weight: 700;
+}
 
 h4.semi-typography,
 .semi-typography-h4.semi-typography {
@@ -165,6 +237,26 @@ h4.semi-typography,
   font-weight: 600;
   margin: 0;
 }
+h4.semi-typography.semi-typography-h4-weight-light,
+.semi-typography-h4.semi-typography.semi-typography-h4-weight-light {
+  font-weight: 200;
+}
+h4.semi-typography.semi-typography-h4-weight-regular,
+.semi-typography-h4.semi-typography.semi-typography-h4-weight-regular {
+  font-weight: 400;
+}
+h4.semi-typography.semi-typography-h4-weight-medium,
+.semi-typography-h4.semi-typography.semi-typography-h4-weight-medium {
+  font-weight: 500;
+}
+h4.semi-typography.semi-typography-h4-weight-semibold,
+.semi-typography-h4.semi-typography.semi-typography-h4-weight-semibold {
+  font-weight: 600;
+}
+h4.semi-typography.semi-typography-h4-weight-bold,
+.semi-typography-h4.semi-typography.semi-typography-h4-weight-bold {
+  font-weight: 700;
+}
 
 h5.semi-typography,
 .semi-typography-h5.semi-typography {
@@ -174,6 +266,26 @@ h5.semi-typography,
   font-weight: 600;
   margin: 0;
 }
+h5.semi-typography.semi-typography-h5-weight-light,
+.semi-typography-h5.semi-typography.semi-typography-h5-weight-light {
+  font-weight: 200;
+}
+h5.semi-typography.semi-typography-h5-weight-regular,
+.semi-typography-h5.semi-typography.semi-typography-h5-weight-regular {
+  font-weight: 400;
+}
+h5.semi-typography.semi-typography-h5-weight-medium,
+.semi-typography-h5.semi-typography.semi-typography-h5-weight-medium {
+  font-weight: 500;
+}
+h5.semi-typography.semi-typography-h5-weight-semibold,
+.semi-typography-h5.semi-typography.semi-typography-h5-weight-semibold {
+  font-weight: 600;
+}
+h5.semi-typography.semi-typography-h5-weight-bold,
+.semi-typography-h5.semi-typography.semi-typography-h5-weight-bold {
+  font-weight: 700;
+}
 
 h6.semi-typography,
 .semi-typography-h6.semi-typography {
@@ -183,10 +295,31 @@ h6.semi-typography,
   font-weight: 600;
   margin: 0;
 }
+h6.semi-typography.semi-typography-h6-weight-light,
+.semi-typography-h6.semi-typography.semi-typography-h6-weight-light {
+  font-weight: 200;
+}
+h6.semi-typography.semi-typography-h6-weight-regular,
+.semi-typography-h6.semi-typography.semi-typography-h6-weight-regular {
+  font-weight: 400;
+}
+h6.semi-typography.semi-typography-h6-weight-medium,
+.semi-typography-h6.semi-typography.semi-typography-h6-weight-medium {
+  font-weight: 500;
+}
+h6.semi-typography.semi-typography-h6-weight-semibold,
+.semi-typography-h6.semi-typography.semi-typography-h6-weight-semibold {
+  font-weight: 600;
+}
+h6.semi-typography.semi-typography-h6-weight-bold,
+.semi-typography-h6.semi-typography.semi-typography-h6-weight-bold {
+  font-weight: 700;
+}
 
 p.semi-typography-extended,
 .semi-typography-paragraph.semi-typography-extended {
   line-height: 24px;
+  font-weight: 400;
 }
 
 .semi-rtl .semi-typography,