Browse Source

fixed $color-notification_ambient-bg token name (#447)

* fixed $color-input_default-border-hover not reference

* Update variables.scss

添加变量 $color-notification-bg-ambient 与全局变量 --semi-color-bg-0 保持一致

* Update notification.scss

引入变量 $color-notification-bg-ambient 叠加于 light 背景色下,避免因透明度导致的内容穿透;

* Update notification.scss

修改css 属性 background => background-image & background-color

* Update variables.scss

$color-notification-bg-ambient => $color-notification-ambient-bg

* Update variables.scss

update $color-notification_ambient-bg  name

* Update notification.scss

fixed $color-notification_ambient-bg name
carlos 3 years ago
parent
commit
362da791b5

+ 9 - 5
packages/semi-foundation/notification/notification.scss

@@ -93,23 +93,27 @@ $module: #{$prefix}-notification;
 
         &-light {
             &.#{$module}-notice-warning {
-                background-color: $color-notification_warning_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_warning_light-bg, $color-notification_warning_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_warning_light-border;
             }
 
             &.#{$module}-notice-success {
-                background-color: $color-notification_success_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_success_light-bg, $color-notification_success_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_success_light-border;
             }
 
             &.#{$module}-notice-info,
             &.#{$module}-notice-default {
-                background-color: $color-notification_info_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_info_light-bg, $color-notification_info_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_info_light-border;
             }
 
             &.#{$module}-notice-error {
-                background-color: $color-notification_danger_light-bg;
+                background-image: linear-gradient(0deg, $color-notification_danger_light-bg, $color-notification_danger_light-bg);
+                background-color: $color-notification_ambient-bg;
                 border: $width-notification_notice-border solid $color-notification_danger_light-border;
             }
         }
@@ -165,4 +169,4 @@ $module: #{$prefix}-notification;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

+ 1 - 0
packages/semi-foundation/notification/variables.scss

@@ -15,6 +15,7 @@ $color-notification_info_light-bg: var(--semi-color-info-light-default); // 彩
 $color-notification_info_light-border: var(--semi-color-info); // 彩色通知信息描边色
 $color-notification_danger_light-bg: var(--semi-color-danger-light-default); // 彩色通知危险背景色
 $color-notification_danger_light-border: var(--semi-color-danger); // 彩色通知危险描边色
+$color-notification_ambient-bg: var(--semi-color-bg-0); // 透明背景色叠加层(与bg0保持一致不建议修改)
 
 // Width/Height
 $width-notification_notice: auto; // 通知宽度