release(modal): v1.3.1

Author: surunzi

index.json

@@ -246,7 +246,7 @@
   "modal": {
     "react": true,
     "icon": true,
-    "version": "1.3.0",
+    "version": "1.3.1",
     "style": true,
     "test": true,
     "install": false,

src/command-palette/style.scss

@@ -54,27 +54,27 @@
 @each $theme in ('light', 'dark') {
   .theme-#{$theme} {
     .body {
-      @include mixin.theme-rule(background-color, color-bg-container, $theme);
+      @include mixin.theme-var(background-color, color-bg-container, $theme);
     }
 
     .input {
-      @include mixin.theme-rule(background-color, color-bg-container, $theme);
-      @include mixin.theme-rule(border-color, color-border, $theme);
-      @include mixin.theme-rule(color, color-text, $theme);
+      @include mixin.theme-var(background-color, color-bg-container, $theme);
+      @include mixin.theme-var(border-color, color-border, $theme);
+      @include mixin.theme-var(color, color-text, $theme);
     }
 
     .list {
       li {
         &:hover {
-          @include mixin.theme-rule(
+          @include mixin.theme-var(
             background-color,
             color-fill-secondary,
             $theme
           );
         }
         &.active {
-          @include mixin.theme-rule(color, color-white, $theme);
-          @include mixin.theme-rule(background-color, color-primary, $theme);
+          @include mixin.theme-var(color, color-white, $theme);
+          @include mixin.theme-var(background-color, color-primary, $theme);
         }
       }
     }

src/data-grid/style.scss

@@ -100,16 +100,16 @@
 
 @each $theme in ('light', 'dark') {
   .theme-#{$theme} {
-    @include mixin.theme-rule(border-color, color-border, $theme);
+    @include mixin.theme-var(border-color, color-border, $theme);
     th,
     td {
-      @include mixin.theme-rule(border-color, color-border, $theme);
+      @include mixin.theme-var(border-color, color-border, $theme);
     }
     th {
-      @include mixin.theme-rule(background-color, color-fill-secondary, $theme);
+      @include mixin.theme-var(background-color, color-fill-secondary, $theme);
       &.sortable {
         &:hover {
-          @include mixin.theme-rule(background-color, color-fill, $theme);
+          @include mixin.theme-var(background-color, color-fill, $theme);
         }
       }
     }
@@ -124,7 +124,7 @@
     }
     &:focus {
       .node.selectable.selected {
-        @include mixin.theme-rule(background-color, color-primary, $theme);
+        @include mixin.theme-var(background-color, color-primary, $theme);
       }
     }
   }

src/icon-list/style.scss

@@ -68,11 +68,11 @@
     .item {
       &.selected {
         .icon {
-          @include mixin.theme-rule(background-color, color-border, $theme);
+          @include mixin.theme-var(background-color, color-border, $theme);
         }
         .name {
-          @include mixin.theme-rule(background-color, color-primary, $theme);
-          @include mixin.theme-rule(color, color-white, $theme);
+          @include mixin.theme-var(background-color, color-primary, $theme);
+          @include mixin.theme-var(color, color-white, $theme);
         }
       }
     }

src/modal/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.3.1 (26 Feb 2025)
+
+* refactor: theme
+
 ## 1.3.0 (3 Nov 2024)
 
 * feat: add auto theme

src/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modal",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Create modal dialogs",
   "luna": {
     "react": true,

src/modal/style.scss

@@ -1,5 +1,5 @@
-@use '../share/mixin' as mixin;
-@use '../share/theme' as theme;
+@use '../share/mixin' as *;
+@use '../share/theme' as *;
 
 .luna-modal {
   position: fixed;
@@ -10,7 +10,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  @include mixin.component();
+  @include component();
   & {
     background: rgba(0, 0, 0, 0.5);
   }
@@ -26,11 +26,11 @@
 
 .body {
   position: relative;
-  background: theme.$color-bg-container;
   max-height: 100%;
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  border: 1px solid;
   &.no-title {
     position: static;
     .title {
@@ -81,19 +81,17 @@
 
 .button {
   padding: 0 12px;
-  background: #e9ecef;
   cursor: default;
   position: relative;
   user-select: none;
   margin: 0 4px;
-  font-size: #{theme.$font-size-s-m}px;
+  font-size: #{$font-size-s-m}px;
   border-radius: 4px;
   overflow: hidden;
   height: 28px;
   line-height: 28px;
   &:active {
     &::before {
-      background: theme.$color-primary;
       content: '';
       opacity: 0.4;
       position: absolute;
@@ -105,13 +103,10 @@
     }
   }
   &.secondary {
-    color: theme.$color-primary;
-    border: 1px solid theme.$color-border;
-    background: #fff;
+    border: 1px solid;
   }
   &.primary {
     color: #fff;
-    background: theme.$color-primary;
   }
 }
 
@@ -121,14 +116,52 @@
   width: 100%;
   font-size: 16px;
   padding: 6px 12px;
-  border: 1px solid theme.$color-border;
+  border: 1px solid;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
-.theme-dark {
-  .body {
-    background: theme.$color-bg-container-dark;
-    border: 1px solid theme.$color-border-dark;
+@each $theme in ('light', 'dark') {
+  .theme-#{$theme} {
+    .body {
+      @include theme-vars(
+        (
+          background-color: color-bg-container,
+          border-color: color-border,
+        ),
+        $theme
+      );
+    }
+    .button {
+      @include theme-var(background-color, color-bg-container, $theme);
+      &:active {
+        &::before {
+          @include theme-var(background-color, color-primary, $theme);
+        }
+      }
+      &.secondary {
+        @include theme-vars(
+          (
+            color: color-primary,
+            border-color: color-border,
+            background-color: color-bg-container,
+          ),
+          $theme
+        );
+      }
+      &.primary {
+        @include theme-var(background-color, color-primary, $theme);
+      }
+    }
+    .input {
+      @include theme-vars(
+        (
+          background-color: color-bg-container,
+          color: color-text,
+          border-color: color-border,
+        ),
+        $theme
+      );
+    }
   }
 }