rappel-ui 1.0.29 → 1.0.30

package/theme-chalk/src/css-vars/_message.scss

@@ -4,39 +4,46 @@
 $message: () !default;
 $message: map.deep-merge(
   (
-    'message': (
-      'font-size': 14px,
-      'border-radius': 4px,
-      'padding': 7px 12px,
-      'close-size': 16px,
-      'icon-size': 16px
-    ),
-    'light': (
+    '': (
       'color': getCssVar('color', 'text', 'base'),
       'bgcolor': getCssVar('color', 'fill', 'blank'),
       'border-color': getCssVar('color', 'border', 'light')
     ),
+    'light': (
+      'color': getCssVar('color', 'text', 'base')
+    ),
     'dark': (
-      'color': getCssVar('color', 'fill', 'blank'),
-      'bgcolor': getCssVar('color', 'text', 'darker'),
-      'border-color': getCssVar('color', 'text', 'darker')
+      'color': getCssVar('color', 'fill', 'blank')
     )
   ),
   $message
 );
 
-// $message-types: ('', 'primary', 'success', 'danger', 'warning', 'info');
-// @each $type in $message-types {
-//   @if $type {
-//     $message: map.deep-merge(
-//       (
-//         $type: (
-//             'bgcolor': getCssVar('color', $type, 'base'),
-//             'color': getCssVar('color', 'text', 'lightest'),
-//             'border-color': getCssVar('color', $type, 'base')
-//           )
-//       ),
-//       $message
-//     );
-//   }
-// }
+$message-types: ('', 'primary', 'success', 'error', 'warning', 'info');
+@each $type in $message-types {
+  @if $type {
+    $message: map.deep-merge(
+      (
+        $type: (
+            'bgcolor': getCssVar('color', $type, 'shade-1'),
+            'color': getCssVar('color', $type, 'base'),
+            'border-color': getCssVar('color', $type, 'shade-3')
+          )
+      ),
+      $message
+    );
+  }
+}
+$sizes: () !default;
+$sizes: map.deep-merge(
+  (
+    'message': (
+      'font-size': 14px,
+      'border-radius': 4px,
+      'padding': 10px 12px,
+      'close-size': 16px,
+      'icon-size': 16px
+    )
+  ),
+  $sizes
+);

package/theme-chalk/src/message.scss

@@ -1,13 +1,12 @@
 @use 'mixins/index' as *;
+@use 'css-vars/_message' as *;
 @use 'mixins/_message' as *;
 @use 'function/index' as *;
 
 @include buildRootCls('message') {
-  &.is-light {
-    @include message-var('light');
-  }
-  &.is-dark {
-    @include message-var('dark');
+  @include message-var();
+  @each $type in $message-types {
+    @include message-modifier-style($message, $type);
   }
 
   $border-color: getCssVar('message', 'border-color');
@@ -28,10 +27,13 @@
     flex-shrink: 0;
     margin-right: 5px;
     font-size: getCssVar('message', 'icon', 'size');
+    color: $color;
+    // fill: $color;
   }
   &__content {
     font-size: $font-size;
     line-height: 1.2;
+    color: $color;
   }
 
   &__close {

package/theme-chalk/src/mixins/_message.scss

@@ -7,6 +7,10 @@
   #{getCssVarStr('message' ,'bgcolor')}: #{deepGet($message, $key, $val)};
 }
 
+@mixin set-bgcolor-custom($value) {
+  #{getCssVarStr('message', 'bgcolor')}: #{$value};
+}
+
 @mixin set-color-var($key, $val) {
   #{getCssVarStr('message' ,'color')}: #{deepGet($message, $key, $val)};
 }
@@ -16,36 +20,51 @@
 }
 
 @mixin set-radius-var($key, $val) {
-  #{getCssVarStr('message' ,'border-radius')}: #{deepGet($message, $key, $val)};
+  #{getCssVarStr('message' ,'border-radius')}: #{deepGet($sizes, $key, $val)};
 }
 
 @mixin set-font-size-var($key, $val) {
-  #{getCssVarStr('message' ,'font-size')}: #{deepGet($message, $key, $val)};
+  #{getCssVarStr('message' ,'font-size')}: #{deepGet($sizes, $key, $val)};
 }
 
 @mixin set-padding-var($key, $val) {
-  #{getCssVarStr('message' ,'padding')}: #{deepGet($message, $key, $val)};
+  #{getCssVarStr('message' ,'padding')}: #{deepGet($sizes, $key, $val)};
 }
 
 @mixin set-close-size-var($key, $val) {
-  #{getCssVarStr('message' ,'close-size')}: #{deepGet($message, $key, $val)};
+  #{getCssVarStr('message' ,'close-size')}: #{deepGet($sizes, $key, $val)};
 }
 @mixin set-icon-size-var($key, $val) {
-  #{getCssVarStr('message' ,'icon-size')}: #{deepGet($message, $key, $val)};
+  #{getCssVarStr('message' ,'icon-size')}: #{deepGet($sizes, $key, $val)};
 }
 
-@mixin message-theme-var($theme) {
-  @include set-bgcolor-var($theme, 'bgcolor');
-  @include set-color-var($theme, 'color');
-  @include set-bordercolor-var($theme, 'border-color');
+@mixin set-bbc-color-vars($type) {
+  @include set-bgcolor-var($type, 'bgcolor');
+  @include is('plain') {
+    @include set-bgcolor-custom(getCssVar('color', 'fill', 'blank'));
+  }
+  @include set-color-var($type, 'color');
+  @include set-bordercolor-var($type, 'border-color');
 }
 
-@mixin message-var($theme) {
+@mixin message-modifier($message, $type) {
+  @include set-bbc-color-vars($type);
+}
+
+@mixin message-var() {
   @include set-font-size-var('message', 'font-size');
   @include set-radius-var('message', 'border-radius');
   @include set-padding-var('message', 'padding');
   @include set-close-size-var('message', 'close-size');
   @include set-icon-size-var('message', 'icon-size');
+}
 
-  @include message-theme-var($theme);
+@mixin message-modifier-style($message, $type) {
+  @if $type != '' {
+    &--#{$type} {
+      @include message-modifier($message, $type);
+    }
+  } @else {
+    @include message-modifier($message, $type);
+  }
 }