release(command-palette): v0.3.0

Author: surunzi

src/command-palette/package.json

@@ -1,6 +1,6 @@
 {
   "name": "command-palette",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Command palette",
   "luna": {
     "react": true

src/command-palette/style.scss

@@ -19,17 +19,15 @@
   max-width: 100%;
   box-shadow: theme.$box-shadow;
   font-size: 12px;
-  background: theme.$color-bg-container;
 }
 
 .input {
   box-sizing: border-box;
   outline: none;
   width: 100%;
   border: none;
-  border-bottom: 1px solid theme.$color-border;
+  border-bottom: 1px solid;
   padding: 10px 4px;
-  color: theme.$color-text;
 }
 
 .list {
@@ -42,13 +40,6 @@
     padding: 5px;
     cursor: pointer;
     display: flex;
-    &:hover {
-      background: theme.$color-fill-secondary;
-    }
-    &.active {
-      color: theme.$color-white;
-      background: theme.$color-primary;
-    }
     .title {
       flex: 1;
       overflow: hidden;
@@ -60,22 +51,33 @@
   display: none;
 }
 
-.theme-dark {
-  .body {
-    background: theme.$color-bg-container-dark;
-  }
-  .input {
-    background: theme.$color-bg-container-dark;
-    border-color: theme.$color-border-dark;
-    color: theme.$color-text-dark;
-  }
-  li {
-    &:hover {
-      background: theme.$color-fill-secondary-dark;
+$themes: 'light', 'dark';
+@each $theme in $themes {
+  .theme-#{$theme} {
+    .body {
+      @include mixin.theme-rule(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);
     }
-    &.active {
-      color: theme.$color-white;
-      background: theme.$color-primary;
+
+    .list {
+      li {
+        &:hover {
+          @include mixin.theme-rule(
+            background-color,
+            color-fill-secondary,
+            $theme
+          );
+        }
+        &.active {
+          @include mixin.theme-rule(color, color-white, $theme);
+          @include mixin.theme-rule(background-color, color-primary, $theme);
+        }
+      }
     }
   }
 }

src/share/mixin.scss

@@ -1,4 +1,6 @@
 @use './theme' as theme;
+@use 'sass:meta';
+@use 'sass:map';
 
 @mixin overflow-auto($direction: 'both') {
   @if $direction == 'both' {
@@ -9,12 +11,22 @@
   -webkit-overflow-scrolling: touch;
 }
 
+$themeVariables: meta.module-variables(theme);
+@mixin theme-rule($name, $value, $theme: 'light') {
+  $suffix: if($theme == 'dark', '-dark', '');
+  #{$name}: map.get($themeVariables, #{$value}#{$suffix});
+  #{$name}: var(
+    --luna-#{$value},
+    map.get($themeVariables, #{$value}#{$suffix})
+  );
+}
+
 @mixin component($transparent: false) {
-  color: theme.$color-text;
+  @include theme-rule(color, color-text);
   @if $transparent {
     background-color: transparent;
   } @else {
-    background-color: theme.$color-bg-container;
+    @include theme-rule(background-color, color-bg-container);
   }
   font-family: theme.$font-family;
   box-sizing: border-box;
@@ -33,11 +45,11 @@
   }
   &.theme-dark {
     color-scheme: dark;
-    color: theme.$color-text-dark;
+    @include theme-rule(color, color-text-dark);
     @if $transparent {
       background-color: transparent;
     } @else {
-      background-color: theme.$color-bg-container-dark;
+      @include theme-rule(background-color, color-bg-container-dark);
     }
   }
 }