chore: update sass

liriliri · Oct 29, 2024 · f6f429e · f6f429e
1 parent 2a1e417
commit f6f429e
Show file tree

Hide file tree

Showing 25 changed files with 293 additions and 257 deletions.
diff --git a/src/keyboard/style.scss b/src/keyboard/style.scss
@@ -1,14 +1,17 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-keyboard {
-  @include mixin.component();
-  border: 1px solid $color-border;
-  background: #f2f2f2;
+  border: 1px solid theme.$color-border;
   position: relative;
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
   padding: 3px;
+  @include mixin.component();
+  & {
+    background: #f2f2f2;
+  }
 }
 
 .row {
@@ -34,7 +37,7 @@
     &:active,
     &.pressed {
       color: #fff;
-      background-color: $color-primary;
+      background-color: theme.$color-primary;
     }
   }
   li {
@@ -145,5 +148,5 @@
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
 }
diff --git a/src/markdown-editor/style.scss b/src/markdown-editor/style.scss
@@ -1,10 +1,11 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-markdown-editor {
-  @include mixin.component();
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   display: flex;
   flex-direction: column;
+  @include mixin.component();
   &.fullscreen {
     position: fixed;
     width: 100% !important;
@@ -20,7 +21,7 @@
 }
 
 .toolbar {
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
   font-size: 0;
 }
 
@@ -29,15 +30,15 @@
   width: 30px;
   height: 30px;
   text-align: center;
-  color: $color-text;
+  color: theme.$color-text;
   border: none;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   cursor: pointer;
   &:hover {
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
   }
   &.active {
-    color: $color-primary;
+    color: theme.$color-primary;
   }
 }
 
@@ -57,7 +58,7 @@
   min-height: 100px;
   height: 300px;
   font-family: inherit;
-  color: $color-text;
+  color: theme.$color-text;
 }
 
 .preview-container {
@@ -68,26 +69,26 @@
   height: 100%;
   overflow-y: auto;
   padding: 8px;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .toolbar {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   .toolbar,
   .button {
-    background: $color-bg-container-dark;
+    background: theme.$color-bg-container-dark;
   }
   .button {
-    color: $color-text-dark;
+    color: theme.$color-text-dark;
   }
   .textarea {
-    color: $color-text-dark;
+    color: theme.$color-text-dark;
   }
   .textarea,
   .preview-container {
-    background: $color-bg-container-dark;
+    background: theme.$color-bg-container-dark;
   }
 }
diff --git a/src/markdown-viewer/style.scss b/src/markdown-viewer/style.scss
@@ -2,11 +2,6 @@
 
 // https://github.com/sindresorhus/github-markdown-css
 .luna-markdown-viewer {
-  @include mixin.component();
-  background: transparent;
-  &.theme-dark {
-    background: transparent;
-  }
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
@@ -17,6 +12,13 @@
   line-height: 1.5;
   word-wrap: break-word;
   overflow-y: auto;
+  @include mixin.component();
+  & {
+    background: transparent;
+  }
+  &.theme-dark {
+    background: transparent;
+  }
   details,
   figcaption,
   figure {

diff --git a/src/menu-bar/style.scss b/src/menu-bar/style.scss
@@ -1,28 +1,29 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-menu-bar {
+  border-bottom: 1px solid theme.$color-border;
   @include mixin.component();
-  border-bottom: 1px solid $color-border;
 }
 
 .menu-list {
   font-size: 0;
-  @include clear-float();
+  @include mixin.clear-float();
 }
 
 .menu-item {
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   padding: 2px 6px;
   cursor: default;
   display: block;
   float: left;
   user-select: none;
   &:hover {
-    color: $color-text;
-    background: $color-fill-secondary;
+    color: theme.$color-text;
+    background: theme.$color-fill-secondary;
   }
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
 }
diff --git a/src/menu/style.scss b/src/menu/style.scss
@@ -1,14 +1,15 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-menu {
-  @include mixin.component();
   position: absolute;
   padding: 4px 0;
-  box-shadow: $box-shadow;
-  border: 1px solid $color-border;
+  box-shadow: theme.$box-shadow;
+  border: 1px solid theme.$color-border;
   padding: 4px 0;
   z-index: 4000;
   overflow-y: auto;
+  @include mixin.component();
 }
 
 .glass-pane {
@@ -29,8 +30,8 @@
   width: 100%;
   font-size: 12px;
   &.active {
-    color: $color-white;
-    background: $color-primary;
+    color: theme.$color-white;
+    background: theme.$color-primary;
   }
   .icon-arrow-right {
     margin-left: auto;
@@ -43,13 +44,13 @@
 
 .separator {
   height: 1px;
-  background-color: $color-border;
+  background-color: theme.$color-border;
   margin: 5px 1px;
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .separator {
-    background-color: $color-border-dark;
+    background-color: theme.$color-border-dark;
   }
 }
diff --git a/src/modal/style.scss b/src/modal/style.scss
@@ -1,16 +1,19 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-modal {
-  @include mixin.component();
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
+  @include mixin.component();
+  & {
+    background: rgba(0, 0, 0, 0.5);
+  }
 }
 
 .icon-close {
@@ -23,7 +26,7 @@
 
 .body {
   position: relative;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   max-height: 100%;
   display: flex;
   flex-direction: column;
@@ -83,14 +86,14 @@
   position: relative;
   user-select: none;
   margin: 0 4px;
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   border-radius: 4px;
   overflow: hidden;
   height: 28px;
   line-height: 28px;
   &:active {
     &::before {
-      background: $color-primary;
+      background: theme.$color-primary;
       content: '';
       opacity: 0.4;
       position: absolute;
@@ -102,13 +105,13 @@
     }
   }
   &.secondary {
-    color: $color-primary;
-    border: 1px solid $color-border;
+    color: theme.$color-primary;
+    border: 1px solid theme.$color-border;
     background: #fff;
   }
   &.primary {
     color: #fff;
-    background: $color-primary;
+    background: theme.$color-primary;
   }
 }
 
@@ -118,14 +121,14 @@
   width: 100%;
   font-size: 16px;
   padding: 6px 12px;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
 .theme-dark {
   .body {
-    background: $color-bg-container-dark;
-    border: 1px solid $color-border-dark;
+    background: theme.$color-bg-container-dark;
+    border: 1px solid theme.$color-border-dark;
   }
 }