@douyinfe/semi-foundation 2.1.1 → 2.1.5

package/lib/cjs/timeline/timeline.css

@@ -0,0 +1,197 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-timeline {
+  margin: 0;
+  padding: 8px;
+  width: 100%;
+  list-style: none;
+}
+.semi-timeline-item {
+  position: relative;
+  margin: 0;
+  padding: 0 0 24px 0;
+  list-style: none;
+}
+.semi-timeline-item-tail {
+  position: absolute;
+  top: 20px;
+  left: 4px;
+  height: calc(100% - 20px);
+  border-left: 1px solid var(--semi-color-text-3);
+}
+.semi-timeline-item-head {
+  position: absolute;
+  top: 5px;
+  width: 9px;
+  height: 9px;
+  border-radius: var(--semi-border-radius-circle);
+}
+.semi-timeline-item-head-ongoing {
+  background-color: var(--semi-color-primary);
+}
+.semi-timeline-item-head-default {
+  background-color: var(--semi-color-tertiary-light-active);
+}
+.semi-timeline-item-head-success {
+  background-color: var(--semi-color-success);
+}
+.semi-timeline-item-head-warning {
+  background-color: var(--semi-color-warning);
+}
+.semi-timeline-item-head-error {
+  background-color: var(--semi-color-danger);
+}
+.semi-timeline-item-head-custom {
+  position: absolute;
+  display: flex;
+  align-self: center;
+  top: 10px;
+  left: 5px;
+  width: auto;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  transform: translate(-50%, -50%);
+}
+.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-ongoing {
+  background-color: transparent;
+  color: var(--semi-color-primary);
+}
+.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-success {
+  background-color: transparent;
+  color: var(--semi-color-success);
+}
+.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-warning {
+  background-color: transparent;
+  color: var(--semi-color-warning);
+}
+.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-error {
+  background-color: transparent;
+  color: var(--semi-color-danger);
+}
+.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-default {
+  background-color: transparent;
+  color: var(--semi-color-tertiary-light-active);
+}
+.semi-timeline-item-content {
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: relative;
+  margin: 0 0 0 25px;
+  word-break: break-word;
+  color: var(--semi-color-text-0);
+}
+.semi-timeline-item-content-extra, .semi-timeline-item-content-time {
+  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;
+  color: var(--semi-color-text-2);
+  margin-top: 4px;
+}
+.semi-timeline-item:last-child .semi-timeline-item-tail {
+  border-left: none;
+}
+.semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom {
+  left: 50%;
+}
+.semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head {
+  margin-left: -4px;
+}
+.semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content {
+  left: calc(50% - 4px);
+  width: calc(50% - 14px);
+  text-align: left;
+}
+.semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content {
+  width: calc(50% - 20px);
+  margin: 0;
+  text-align: right;
+}
+.semi-timeline-center .semi-timeline-item-content-time {
+  position: absolute;
+  top: -2px;
+  margin-left: calc(-40px - 100%);
+  width: 100%;
+  text-align: right;
+}
+.semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom {
+  left: calc(100% - 9px);
+}
+.semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content {
+  width: calc(100% - 28px);
+}
+
+.semi-rtl .semi-timeline,
+.semi-portal-rtl .semi-timeline {
+  direction: rtl;
+}
+.semi-rtl .semi-timeline-item-tail,
+.semi-portal-rtl .semi-timeline-item-tail {
+  left: auto;
+  right: 4px;
+  border-left: 0;
+  border-right: 1px solid var(--semi-color-text-3);
+}
+.semi-rtl .semi-timeline-item-head-custom,
+.semi-portal-rtl .semi-timeline-item-head-custom {
+  left: auto;
+  right: 5px;
+  transform: translate(50%, -50%);
+}
+.semi-rtl .semi-timeline-item-content,
+.semi-portal-rtl .semi-timeline-item-content {
+  margin: 0 25px 0 0;
+}
+.semi-rtl .semi-timeline-item:last-child .semi-timeline-item-tail,
+.semi-portal-rtl .semi-timeline-item:last-child .semi-timeline-item-tail {
+  border-right: none;
+}
+.semi-rtl .semi-timeline-alternate .semi-timeline-item-tail, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-center .semi-timeline-item-tail, .semi-rtl .semi-timeline-center .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head-custom,
+.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-tail,
+.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head,
+.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head-custom,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-tail,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-head,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-head-custom,
+.semi-portal-rtl .semi-timeline-center .semi-timeline-item-tail,
+.semi-portal-rtl .semi-timeline-center .semi-timeline-item-head,
+.semi-portal-rtl .semi-timeline-center .semi-timeline-item-head-custom {
+  left: auto;
+  right: 50%;
+}
+.semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head,
+.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-head,
+.semi-portal-rtl .semi-timeline-center .semi-timeline-item-head {
+  margin-left: 0;
+  margin-right: -4px;
+}
+.semi-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content,
+.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content,
+.semi-portal-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content {
+  left: auto;
+  right: calc(50% - 4px);
+  text-align: right;
+}
+.semi-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content,
+.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content,
+.semi-portal-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content {
+  text-align: left;
+}
+.semi-rtl .semi-timeline-center .semi-timeline-item-content-time,
+.semi-portal-rtl .semi-timeline-center .semi-timeline-item-content-time {
+  margin-left: 0;
+  margin-right: calc(-40px - 100%);
+  text-align: left;
+}
+.semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head,
+.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom {
+  left: 0;
+  right: calc(100% - 9px);
+}

package/lib/cjs/timeline/timeline.scss

@@ -0,0 +1,175 @@
+@import './variables.scss';
+
+$module: #{$prefix}-timeline;
+
+.#{$module} {
+    margin: $spacing-timeline-margin;
+    padding: $spacing-timeline-padding;
+    width: $width-timeline;
+    list-style: none;
+
+    &-item {
+        position: relative;
+        margin: $spacing-timeline_item-margin;
+        padding: $spacing-none $spacing-none $spacing-timeline_item-paddingBottom $spacing-none;
+        list-style: none;
+
+        &-tail {
+            position: absolute;
+            top: $spacing-timeline_tail-top;
+            left: $spacing-timeline_tail-left;
+            height: $height-timline_tail;
+            border-left: $width-timeline_tail-border solid $color-timeline_tail-border;
+        }
+
+        &-head {
+            position: absolute;
+            top: $spacing-timeline_head-top;
+            width: $width-timeline_dot;
+            height: $width-timeline_dot;
+            border-radius: $radius-timeline_head;
+
+            &-ongoing {
+                background-color: $color-timeline_dot_default-bg-default;
+            }
+
+            &-default {
+                background-color: $color-timeline_dot_info-bg-default;
+            }
+
+            &-success {
+                background-color: $color-timeline_dot_success-bg-default;
+            }
+
+            &-warning {
+                background-color: $color-timeline_dot_warning-bg-default;
+            }
+
+            &-error {
+                background-color: $color-timeline_dot_error-bg-default;
+            }
+        }
+
+        &-head-custom {
+            position: absolute;
+            display: flex;
+            align-self: center;
+            top: $spacing-timeline_head_custom-top;
+            left: $spacing-timeline_head_custom-left;
+            width: $width-timeline_head_custom;
+            height: $height-timeline_head_custom;
+            // text-align: center;
+            border: $width-timeline_head_custom-border;
+            border-radius: $radius-timeline_head_custom;
+            transform: $motion-timeline_head_custom-transform;
+        }
+
+        .#{$module}-item-head-custom.#{$module}-item-head-ongoing {
+            background-color: $color-timeline_item_head-bg;
+            color: $color-timeline_dot_default-bg-default;
+        }
+
+        .#{$module}-item-head-custom.#{$module}-item-head-success {
+            background-color: $color-timeline_item_head-bg;
+            color: $color-timeline_dot_success-bg-default;
+        }
+
+        .#{$module}-item-head-custom.#{$module}-item-head-warning {
+            background-color: $color-timeline_item_head-bg;
+            color: $color-timeline_dot_warning-bg-default;
+        }
+
+        .#{$module}-item-head-custom.#{$module}-item-head-error {
+            background-color: $color-timeline_item_head-bg;
+            color: $color-timeline_dot_error-bg-default;
+        }
+
+        .#{$module}-item-head-custom.#{$module}-item-head-default {
+            background-color: $color-timeline_item_head-bg;
+            color: $color-timeline_dot_info-bg-default;
+        }
+
+        &-content {
+            @include font-size-regular;
+            position: relative;
+            margin: $spacing-none $spacing-none $spacing-none $spacing-timeline_content-marginLeft;
+            word-break: break-word;
+            color: $color-timeline_item_content-text-default;
+
+            &-extra,
+            &-time {
+                @include font-size-small;
+                color: $color-timeline_time_default-text-default;
+                margin-top: $spacing-timeline_time-marginTop;
+            }
+        }
+
+        &:last-child {
+            .#{$module}-item-tail {
+                border-left: none;
+            }
+        }
+    }
+
+    &-alternate,
+    &-right,
+    &-center {
+        .#{$module}-item {
+            &-tail,
+            &-head,
+            &-head-custom {
+                left: $spacing-timeline_item_head_custom-left;
+            }
+
+            &-head {
+                margin-left: $spacing-timeline_item_head-marginLeft;
+            }
+
+            &-left {
+                .#{$module}-item-content {
+                    left: $spacing-timeline_item_left_item_content-left;
+                    width: $width-timeline_item_left_item_content;
+                    text-align: left;
+                }
+            }
+
+            &-right {
+                .#{$module}-item-content {
+                    width: $width-timeline_item_right_item_content;
+                    margin: $spacing-timeline_item_right_item_content;
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    &-center {
+        .#{$module}-item {
+            &-content-time {
+                position: absolute;
+                top: $spacing-timeline_time-top;
+                margin-left: $spacing-timeline_item_content_time-marginLeft;
+                width: $width-timeline_item_content_time;
+                text-align: right;
+            }
+        }
+    }
+
+    &-right {
+        .#{$module}-item-right {
+            .#{$module}-item {
+                &-tail,
+                &-head,
+                &-head-custom {
+                    left: $spacing-timeline_item_right_item-left;
+                }
+
+                &-content {
+                    width: $width-timeline_item_right_content;
+                }
+            }
+        }
+    }
+}
+
+@import './rtl.scss';

package/lib/cjs/timeline/variables.scss

@@ -0,0 +1,46 @@
+$color-timeline_dot_default-bg-default: var(--semi-color-primary); // 时间轴节点圆点背景色 - 进行中
+$color-timeline_dot_success-bg-default: var(--semi-color-success); // 时间轴节点圆点背景色 - 成功
+$color-timeline_dot_warning-bg-default: var(--semi-color-warning); // 时间轴节点圆点背景色 - 警告
+$color-timeline_dot_error-bg-default: var(--semi-color-danger); // 时间轴节点圆点背景色 - 错误
+$color-timeline_dot_info-bg-default: var(--semi-color-tertiary-light-active); // 时间轴节点圆点背景色 - 默认
+$color-timeline_tail-border: var(--semi-color-text-3); // 时间轴连线颜色
+$color-timeline_time_default-text-default: var(--semi-color-text-2); // 时间轴文字颜色 - 默认
+$color-timeline_item_head-bg: transparent; // 时间轴头部背景颜色
+$color-timeline_item_content-text-default: var(--semi-color-text-0); // 时间轴标题文字颜色
+
+$spacing-timeline-margin: $spacing-none; // 时间轴整体外边距
+$spacing-timeline-padding: $spacing-tight; // 时间轴整体内边距
+$spacing-timeline_tail-top: $spacing-base-loose; // 时间轴连线顶部位置
+$spacing-timeline_tail-left: $spacing-extra-tight; // 时间轴连线左侧位置
+$spacing-timeline_head-top: 5px; // 时间轴节点圆点顶部位置
+$spacing-timeline_head_custom-top: 10px; // 时间轴自定义图标节点圆点顶部位置
+$spacing-timeline_head_custom-left: 5px; // 时间轴自定义图标节点圆点左侧位置
+$spacing-timeline_content-marginLeft: 25px; // 时间轴内容左侧外边距
+$spacing-timeline_time-marginTop: $spacing-extra-tight; // 时间轴时间文本顶部外边距
+$spacing-timeline_time-top: -2px; // 时间轴时间文本顶部位置
+$spacing-timeline_item-margin: $spacing-none; // 时间轴各节点外边距
+$spacing-timeline_item-paddingBottom: $spacing-loose; // 时间轴各节点底部外边距
+$spacing-timeline_item_content_time-marginLeft: calc(-40px - 100%); // 时间轴时间文本左侧外边距
+$spacing-timeline_item_right_item-left: calc(100% - 9px); // 时间轴在右侧时，各节点左侧位置
+$spacing-timeline_item_right_item_content: $spacing-none; // 时间轴在右侧时，各节点内容外边距
+$spacing-timeline_item_left_item_content-left: calc(50% - 4px); 
+$spacing-timeline_item_head_custom-left: 50%;
+$spacing-timeline_item_head-marginLeft: -4px;
+
+$width-timeline: 100%; // 时间轴整体宽度
+$width-timeline_dot: 9px; // 时间轴节点圆点宽度
+$width-timeline_head_custom: auto; // 时间轴节点自定义图标宽度
+$width-timeline_tail-border: $border-thickness-control; // 时间轴连线宽度
+$width-timeline_head_custom-border: $border-thickness; // 时间轴自定义连线宽度
+$width-timeline_item_content_time: 100%; // 时间轴时间文本宽度
+$width-timeline_item_right_content: calc(100% - 28px);
+$width-timeline_item_left_item_content: calc(50% - 14px);
+$width-timeline_item_right_item_content: calc(50% - 20px);
+$height-timline_tail: calc(100% - 20px); // 时间轴连线高度
+$height-timeline_head_custom: auto; // 时间轴自定义连线高度
+
+$radius-timeline_head: var(--semi-border-radius-circle); // 时间轴节点圆点圆角
+$radius-timeline_head_custom: 0; // 时间轴节点自定义图标圆角
+
+$motion-timeline_head_custom-transform: translate(-50%, -50%);
+$motion-timeline_head_custom-transform-rtl: translate(50%, -50%);

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

@@ -0,0 +1,14 @@
+declare const cssClasses: {
+    PREFIX: string;
+    WRAPPER: string;
+    LIST: string;
+};
+declare const strings: {
+    types: string[];
+    themes: string[];
+    directions: string[];
+};
+declare const numbers: {
+    duration: number;
+};
+export { cssClasses, strings, numbers };

package/lib/cjs/toast/constants.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const PREFIX = "".concat(_constants.BASE_CLASS_PREFIX, "-toast");
+const cssClasses = {
+  PREFIX,
+  WRAPPER: "".concat(PREFIX, "-wrapper"),
+  LIST: "".concat(PREFIX, "-list")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  types: ['warning', 'success', 'info', 'error', 'default'],
+  themes: ['normal', 'light'],
+  directions: ['ltr', 'rtl']
+};
+exports.strings = strings;
+const numbers = {
+  duration: 3 // default close time, unit: s
+
+};
+exports.numbers = numbers;

package/lib/cjs/toast/rtl.scss

@@ -0,0 +1,16 @@
+$module: #{$prefix}-toast;
+
+.#{$module} {
+
+    &-rtl {
+        direction: rtl;
+    }
+
+    .#{$module}-rtl &-content {
+        .#{$module}-content-text {
+            text-align: right;
+            margin-left: $spacing-toast_content_text-marginRight;
+            margin-right: $spacing-toast_content_text-marginLeft;
+        }
+    }
+}

package/lib/cjs/toast/toast.css

@@ -0,0 +1,76 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-toast {
+  pointer-events: none;
+}
+.semi-toast-wrapper {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 1010;
+}
+.semi-toast-content {
+  pointer-events: all;
+  box-shadow: var(--semi-shadow-elevated);
+  font-size: 14px;
+  line-height: 20px;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: var(--semi-color-bg-3);
+  border-radius: var(--semi-border-radius-medium);
+  padding: 12px 8px;
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 12px;
+  font-weight: 600;
+  color: var(--semi-color-text-0);
+}
+.semi-toast-content .semi-toast-close-button {
+  margin-top: -2px;
+  height: 20px;
+}
+.semi-toast-content .semi-toast-content-text {
+  margin-left: 12px;
+  margin-right: 12px;
+  text-align: left;
+}
+.semi-toast-light.semi-toast-warning .semi-toast-content {
+  background-color: var(--semi-color-warning-light-default);
+  border: 1px solid var(--semi-color-warning);
+}
+.semi-toast-light.semi-toast-success .semi-toast-content {
+  background-color: var(--semi-color-success-light-default);
+  border: 1px solid var(--semi-color-success);
+}
+.semi-toast-light.semi-toast-info .semi-toast-content {
+  background-color: var(--semi-color-info-light-default);
+  border: 1px solid var(--semi-color-info);
+}
+.semi-toast-light.semi-toast-error .semi-toast-content {
+  background-color: var(--semi-color-danger-light-default);
+  border: 1px solid var(--semi-color-danger);
+}
+.semi-toast .semi-toast-icon-warning {
+  color: var(--semi-color-warning);
+}
+.semi-toast .semi-toast-icon-success {
+  color: var(--semi-color-success);
+}
+.semi-toast .semi-toast-icon-info {
+  color: var(--semi-color-info);
+}
+.semi-toast .semi-toast-icon-error {
+  color: var(--semi-color-danger);
+}
+
+.semi-toast-rtl {
+  direction: rtl;
+}
+.semi-toast-rtl .semi-toast-content .semi-toast-content-text {
+  text-align: right;
+  margin-left: 12px;
+  margin-right: 12px;
+}

package/lib/cjs/toast/toast.scss

@@ -0,0 +1,92 @@
+//@import '../theme/variables.scss';
+@import "./variables.scss";
+
+$module: #{$prefix}-toast;
+$icon: #{$prefix}-toast-icon;
+
+.#{$module} {
+    pointer-events: none;
+
+    &-wrapper {
+        pointer-events: none;
+        position: fixed;
+        top: $spacing-toast_wrapper-top;
+        width: $width-toast_wrapper;
+        text-align: center;
+        z-index: $z-toast;
+    }
+
+    &-content {
+        pointer-events: all;
+        @include shadow-elevated;
+        @include font-size-regular;
+        background-color: $color-toast-bg-default;
+        border-radius: $radius-toast_content;
+        padding: $spacing-toast_content-paddingY $spacing-toast_content-paddingX;
+        display: inline-flex;
+        align-items: flex-start;
+        justify-content: center;
+        margin: $spacing-toast_content-margin;
+        font-weight: $font-toast_content-fontWeight;
+        color: $color-toast-text-default;
+
+        .#{$module}-close-button {
+            margin-top: $spacing-toast_content_close_btn-marginTop;
+            height: $width-icon-large;
+        }
+
+        .#{$module}-content-text {
+            margin-left: $spacing-toast_content_text-marginLeft;
+            margin-right: $spacing-toast_content_text-marginRight;
+            text-align: left;
+        }
+    }
+
+    &-light {
+        &.#{$module}-warning {
+            .#{$module}-content {
+                background-color: $color-toast_warning_light-bg;
+                border: $width-toast_light-border solid $color-toast_warning_light-border;
+            }
+        }
+
+        &.#{$module}-success {
+            .#{$module}-content {
+                background-color: $color-toast_success_light-bg;
+                border: $width-toast_light-border solid $color-toast_success_light-border;
+            }
+        }
+
+        &.#{$module}-info {
+            .#{$module}-content {
+                background-color: $color-toast_info_light-bg;
+                border: $width-toast_light-border solid $color-toast_info_light-border;
+            }
+        }
+
+        &.#{$module}-error {
+            .#{$module}-content {
+                background-color: $color-toast_danger_light-bg;
+                border: $width-toast_light-border solid $color-toast_danger_light-border;
+            }
+        }
+    }
+
+    .#{$icon}-warning {
+        color: $color-toast_warning-icon;
+    }
+
+    .#{$icon}-success {
+        color: $color-toast_success-icon;
+    }
+
+    .#{$icon}-info {
+        color: $color-toast_info-icon;
+    }
+
+    .#{$icon}-error {
+        color: $color-toast_danger-icon;
+    }
+}
+
+@import "./rtl.scss";