@douyinfe/semi-foundation 2.35.0 → 2.36.0-beta.0

package/calendar/calendar.scss

@@ -273,7 +273,7 @@ $module: #{$prefix}-calendar;
                 justify-content: center;
                 align-items: center;
 
-                span {
+                > span {
                     display: flex;
                     align-items: center;
                     justify-content: center;

package/datePicker/_utils/getYears.ts

@@ -1,6 +1,10 @@
-const getYears = () => {
-    const year = new Date().getFullYear();
-    const startYear = year - 100;
-    return Array.from({ length: 200 }, (v, i) => startYear + i);
+const getYears = (startYear?: number, endYear?: number) => {
+    const currentYear = new Date().getFullYear();
+    let start = typeof startYear === 'number' ? startYear : currentYear - 100;
+    let end = typeof endYear === 'number' ? endYear : currentYear + 100;
+    if (end < start) {
+        [start, end] = [end, start];
+    }
+    return Array.from({ length: end - start + 1 }, (v, i) => start + i);
 };
 export default getYears;

package/datePicker/datePicker.scss

@@ -7,7 +7,6 @@ $module-list: #{$prefix}-scrolllist;
 .#{$module} {
     box-sizing: border-box;
     display: inline-block;
-    vertical-align: top;
 
     .#{$module-list}-body {
         .#{$module-list}-item {

package/datePicker/foundation.ts

@@ -117,7 +117,7 @@ export interface EventHandlerProps {
     onClickOutSide?: () => void
 }
 
-export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
+export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps, Pick<MonthsGridFoundationProps, 'startYear' | 'endYear'> {
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     autoSwitchDate?: boolean;

package/datePicker/monthsGridFoundation.ts

@@ -24,6 +24,7 @@ import { BaseValueType, DateInputFoundationProps, PresetPosition, ValueType } fr
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 import isValidTimeZone from './_utils/isValidTimeZone';
+import { YearAndMonthFoundationProps } from './yearAndMonthFoundation';
 
 const dateDiffFns = {
     month: differenceInCalendarMonths,
@@ -54,7 +55,7 @@ interface MonthsGridElementProps {
 export type PanelType = 'left' | 'right';
 export type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 
-export interface MonthsGridFoundationProps extends MonthsGridElementProps {
+export interface MonthsGridFoundationProps extends MonthsGridElementProps, Pick<YearAndMonthFoundationProps, 'startYear' | 'endYear'> {
     type?: Type;
     /** may be null if selection is not complete when type is dateRange or dateTimeRange */
     defaultValue?: (Date | null)[];

package/datePicker/yearAndMonthFoundation.ts

@@ -24,7 +24,9 @@ export interface YearAndMonthFoundationProps {
     renderQuickControls?: any;
     renderDateInput?: any;
     type?: Type;
-    yearAndMonthOpts?: any
+    yearAndMonthOpts?: any;
+    startYear?: number;
+    endYear?: number
 }
 
 export interface YearAndMonthFoundationState {

package/lib/cjs/calendar/calendar.css

@@ -263,13 +263,13 @@
   justify-content: center;
   align-items: center;
 }
-.semi-calendar-week-grid-row li span {
+.semi-calendar-week-grid-row li > span {
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 26px;
 }
-.semi-calendar-week-grid-row li span:last-child {
+.semi-calendar-week-grid-row li > span:last-child {
   padding: 0 4px;
 }
 .semi-calendar-week .semi-calendar-all-day {

package/lib/cjs/calendar/calendar.scss

@@ -273,7 +273,7 @@ $module: #{$prefix}-calendar;
                 justify-content: center;
                 align-items: center;
 
-                span {
+                > span {
                     display: flex;
                     align-items: center;
                     justify-content: center;

package/lib/cjs/datePicker/_utils/getYears.d.ts

@@ -1,2 +1,2 @@
-declare const getYears: () => number[];
+declare const getYears: (startYear?: number, endYear?: number) => number[];
 export default getYears;

package/lib/cjs/datePicker/_utils/getYears.js

@@ -5,12 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-const getYears = () => {
-  const year = new Date().getFullYear();
-  const startYear = year - 100;
+const getYears = (startYear, endYear) => {
+  const currentYear = new Date().getFullYear();
+  let start = typeof startYear === 'number' ? startYear : currentYear - 100;
+  let end = typeof endYear === 'number' ? endYear : currentYear + 100;
+
+  if (end < start) {
+    [start, end] = [end, start];
+  }
+
   return Array.from({
-    length: 200
-  }, (v, i) => startYear + i);
+    length: end - start + 1
+  }, (v, i) => start + i);
 };
 
 var _default = getYears;

package/lib/cjs/datePicker/datePicker.css

@@ -4,7 +4,6 @@
 .semi-datepicker {
   box-sizing: border-box;
   display: inline-block;
-  vertical-align: top;
 }
 .semi-datepicker .semi-scrolllist-body .semi-scrolllist-item {
   -ms-overflow-style: none; /* Internet Explorer 10+ */

package/lib/cjs/datePicker/datePicker.scss

@@ -7,7 +7,6 @@ $module-list: #{$prefix}-scrolllist;
 .#{$module} {
     box-sizing: border-box;
     display: inline-block;
-    vertical-align: top;
 
     .#{$module-list}-body {
         .#{$module-list}-item {

package/lib/cjs/datePicker/foundation.d.ts

@@ -87,7 +87,7 @@ export interface EventHandlerProps {
     onPresetClick?: OnPresetClickType;
     onClickOutSide?: () => void;
 }
-export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps {
+export interface DatePickerFoundationProps extends ElementProps, RenderProps, EventHandlerProps, Pick<MonthsGridFoundationProps, 'startYear' | 'endYear'> {
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     autoSwitchDate?: boolean;

package/lib/cjs/datePicker/monthsGridFoundation.d.ts

@@ -4,6 +4,7 @@ import { WeekStartNumber } from './_utils/getMonthTable';
 import { DateInputFoundationProps, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
+import { YearAndMonthFoundationProps } from './yearAndMonthFoundation';
 declare type Type = ArrayElement<typeof strings.TYPE_SET>;
 interface MonthsGridElementProps {
     navPrev?: any;
@@ -13,7 +14,7 @@ interface MonthsGridElementProps {
 }
 export declare type PanelType = 'left' | 'right';
 export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
-export interface MonthsGridFoundationProps extends MonthsGridElementProps {
+export interface MonthsGridFoundationProps extends MonthsGridElementProps, Pick<YearAndMonthFoundationProps, 'startYear' | 'endYear'> {
     type?: Type;
     /** may be null if selection is not complete when type is dateRange or dateTimeRange */
     defaultValue?: (Date | null)[];

package/lib/cjs/datePicker/yearAndMonthFoundation.d.ts

@@ -36,6 +36,8 @@ export interface YearAndMonthFoundationProps {
     renderDateInput?: any;
     type?: Type;
     yearAndMonthOpts?: any;
+    startYear?: number;
+    endYear?: number;
 }
 export interface YearAndMonthFoundationState {
     years: Array<{

package/lib/cjs/table/foundation.js

@@ -436,7 +436,8 @@ class TableFoundation extends _foundation.default {
                     }
 
                     return arr;
-                  }, [...children])
+                  }, // @ts-ignore
+                  [...children])
                 }));
               }
             } else if (onFilter(value, record)) {

package/lib/cjs/table/table.css

@@ -94,6 +94,12 @@
 .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
   background-color: var(--semi-color-bg-1);
 }
+.semi-table-align-center .semi-table-operate-wrapper {
+  justify-content: center;
+}
+.semi-table-align-right .semi-table-operate-wrapper {
+  justify-content: flex-end;
+}
 .semi-table-operate-wrapper {
   display: flex;
   justify-content: flex-start;

package/lib/cjs/table/table.scss

@@ -83,6 +83,18 @@ $module: #{$prefix}-table;
         }
     }
 
+    &-align-center {
+        .#{$module}-operate-wrapper {
+            justify-content: center;
+        }
+    }
+
+    &-align-right {
+        .#{$module}-operate-wrapper {
+            justify-content: flex-end;
+        }
+    }
+
     &-operate-wrapper {
         display: flex;
         justify-content: flex-start;

package/lib/cjs/tabs/tabs.css

@@ -34,14 +34,14 @@
   color: var(--semi-color-text-2);
   user-select: none;
 }
-.semi-tabs-bar .semi-tabs-tab .semi-icon {
+.semi-tabs-bar .semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   position: relative;
   margin-right: 8px;
   top: 3px;
   color: var(--semi-color-text-2);
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
-.semi-tabs-bar .semi-tabs-tab .semi-icon-close {
+.semi-tabs-bar .semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
   margin-right: 0;
   font-size: 14px;
   color: var(--semi-color-text-2);
@@ -51,13 +51,13 @@
 .semi-tabs-bar .semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-bar .semi-tabs-tab:hover .semi-icon {
+.semi-tabs-bar .semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-bar .semi-tabs-tab:active {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-bar .semi-tabs-tab:active .semi-icon {
+.semi-tabs-bar .semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
@@ -65,13 +65,13 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
 }
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon {
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-primary);
 }
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon-close {
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
   color: var(--semi-color-text-2);
 }
-.semi-tabs-bar .semi-tabs-tab-active .semi-icon-close:hover {
+.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
   color: var(--semi-color-text-1);
 }
 .semi-tabs-bar .semi-tabs-tab-disabled {
@@ -94,14 +94,14 @@
   color: var(--semi-color-text-2);
   user-select: none;
 }
-.semi-tabs-tab-single.semi-tabs-tab .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   position: relative;
   margin-right: 8px;
   top: 3px;
   color: var(--semi-color-text-2);
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
-.semi-tabs-tab-single.semi-tabs-tab .semi-icon-close {
+.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
   margin-right: 0;
   font-size: 14px;
   color: var(--semi-color-text-2);
@@ -111,13 +111,13 @@
 .semi-tabs-tab-single.semi-tabs-tab:hover {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab:active {
   color: var(--semi-color-text-0);
 }
-.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-text-0);
 }
 .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
@@ -125,13 +125,13 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
 }
-.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon {
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
   color: var(--semi-color-primary);
 }
-.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon-close {
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
   color: var(--semi-color-text-2);
 }
-.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon-close:hover {
+.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
   color: var(--semi-color-text-1);
 }
 .semi-tabs-tab-single.semi-tabs-tab-disabled {

package/lib/cjs/tabs/tabs.scss

@@ -4,6 +4,8 @@
 
 
 $module: #{$prefix}-tabs;
+// Prevent the Radio and Checkbox in ReactNode passed in through the tab attribute in Tabs from being affected by the icon style override
+$ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix}-icon-checkbox_indeterminate';
 
 .#{$module} {
     box-sizing: border-box;
@@ -41,7 +43,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -50,7 +52,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -61,7 +63,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -69,7 +71,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -84,16 +86,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }
@@ -123,7 +125,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -132,7 +134,7 @@ $module: #{$prefix}-tabs;
 
             }
 
-            .#{$prefix}-icon-close {
+            .#{$prefix}-icon.#{$module}-tab-icon-close {
                 margin-right: 0;
                 font-size: 14px;
                 color: var(--semi-color-text-2);
@@ -143,7 +145,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -151,7 +153,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -166,16 +168,16 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
-                .#{$prefix}-icon-close {
+                .#{$prefix}-icon.#{$module}-tab-icon-close {
                     color: var(--semi-color-text-2);
                 }
             }
 
-            .#{$prefix}-icon-close:hover {
+            .#{$prefix}-icon.#{$module}-tab-icon-close:hover {
                 color: var(--semi-color-text-1);
             }
         }

package/lib/cjs/timePicker/foundation.d.ts

@@ -21,7 +21,7 @@ declare class TimePickerFoundation<P = Record<string, any>, S = Record<string, a
         minutes: number;
         seconds: number;
     }): boolean;
-    isValidTimeZone(timeZone?: string | number): boolean;
+    isValidTimeZone(timeZone: string | number): boolean;
     getDefaultFormatIfNeed(): string;
     /**
      * User input value => save timestamp

package/lib/cjs/timePicker/foundation.js

@@ -68,9 +68,7 @@ class TimePickerFoundation extends _foundation.default {
   }
 
   isValidTimeZone(timeZone) {
-    const _timeZone = timeZone === undefined ? this.getProp('timeZone') : timeZone;
-
-    return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
+    return ['string', 'number'].includes(typeof timeZone) && timeZone !== '';
   }
 
   getDefaultFormatIfNeed() {
@@ -108,7 +106,7 @@ class TimePickerFoundation extends _foundation.default {
       const pv = (0, _utils.parseToDate)(v, formatToken, dateFnsLocale);
 
       if (!isNaN(pv.getTime())) {
-        parsedValues.push(this.isValidTimeZone() ? (0, _dateFnsExtra.utcToZonedTime)(pv, timeZone) : pv);
+        parsedValues.push(this.isValidTimeZone(timeZone) ? (0, _dateFnsExtra.utcToZonedTime)(pv, timeZone) : pv);
       }
     });
     const isAM = [true, false];
@@ -435,7 +433,7 @@ class TimePickerFoundation extends _foundation.default {
       _value = Array.isArray(_value) ? _value[0] : _value;
     }
 
-    if (this.isValidTimeZone() && _value) {
+    if (this.isValidTimeZone(timeZone) && _value) {
       const formatToken = this.getValidFormat();
 
       if (Array.isArray(_value)) {

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

@@ -12,6 +12,7 @@ const cssClasses = {
 };
 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/typography.css

@@ -146,6 +146,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 {
@@ -155,6 +175,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 {
@@ -164,6 +204,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 {
@@ -173,6 +233,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 {
@@ -182,6 +262,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 {
@@ -191,6 +291,26 @@ 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 {