diff --git a/src/box-model/style.scss b/src/box-model/style.scss
index 9ff6438..d38d7a2 100644
--- a/src/box-model/style.scss
+++ b/src/box-model/style.scss
@@ -2,12 +2,12 @@
 @use '../share/theme' as theme;
 
 .luna-box-model {
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
   @include mixin.component();
   & {
-    display: inline-block;
     font-size: #{theme.$font-size-s-m}px;
-    text-align: center;
-    white-space: nowrap;
   }
 }
 
diff --git a/src/carousel/style.scss b/src/carousel/style.scss
index 769ba9e..018c294 100644
--- a/src/carousel/style.scss
+++ b/src/carousel/style.scss
@@ -2,13 +2,13 @@
 @use '../share/theme' as theme;
 
 .luna-carousel {
+  width: 100%;
+  height: 100%;
+  min-height: 150px;
+  position: relative;
   @include mixin.component();
   & {
     background: #000;
-    width: 100%;
-    height: 100%;
-    min-height: 150px;
-    position: relative;
   }
   &:hover {
     .arrow-left,
diff --git a/src/color-picker/style.scss b/src/color-picker/style.scss
index b2ac45b..819583d 100644
--- a/src/color-picker/style.scss
+++ b/src/color-picker/style.scss
@@ -1,10 +1,11 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-color-picker {
-  @include component();
+  border: 1px solid theme.$color-border;
   touch-action: none;
   width: 225px;
-  border: 1px solid $color-border;
+  @include mixin.component();
 }
 
 .saturation {
diff --git a/src/command-palette/style.scss b/src/command-palette/style.scss
index 14ad0e6..6ff5129 100644
--- a/src/command-palette/style.scss
+++ b/src/command-palette/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-command-palette {
-  @include component();
   position: fixed;
   top: 0;
   left: 0;
@@ -12,14 +12,17 @@
   align-items: flex-start;
   padding-top: 10px;
   overflow: hidden;
-  background: transparent !important;
+  @include mixin.component();
+  & {
+    background: transparent !important;
+  }
 }
 
 .body {
   max-width: 100%;
-  box-shadow: $box-shadow;
+  box-shadow: theme.$box-shadow;
   font-size: 12px;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
 }
 
 .input {
@@ -27,9 +30,9 @@
   outline: none;
   width: 100%;
   border: none;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
   padding: 10px 4px;
-  color: $color-text;
+  color: theme.$color-text;
 }
 
 .list {
@@ -43,11 +46,11 @@
     cursor: pointer;
     display: flex;
     &:hover {
-      background: $color-fill-secondary;
+      background: theme.$color-fill-secondary;
     }
     &.active {
-      color: $color-white;
-      background: $color-primary;
+      color: theme.$color-white;
+      background: theme.$color-primary;
     }
     .title {
       flex: 1;
@@ -62,19 +65,19 @@
 
 .theme-dark {
   .body {
-    background: $color-bg-container-dark;
+    background: theme.$color-bg-container-dark;
   }
   .input {
-    background: $color-bg-container-dark;
-    border-color: $color-border-dark;
+    background: theme.$color-bg-container-dark;
+    border-color: theme.$color-border-dark;
   }
   li {
     &:hover {
-      background: $color-fill-secondary-dark;
+      background: theme.$color-fill-secondary-dark;
     }
     &.active {
-      color: $color-white;
-      background: $color-primary;
+      color: theme.$color-white;
+      background: theme.$color-primary;
     }
   }
 }
diff --git a/src/console/style.scss b/src/console/style.scss
index 3cb33db..0b3886f 100644
--- a/src/console/style.scss
+++ b/src/console/style.scss
@@ -1,4 +1,5 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 $padding: 10px;
 $border: #ccc;
@@ -28,16 +29,16 @@ $console-selected-background-dark: #29323d;
 $console-selected-border-dark: #4173b4;
 
 .luna-console {
-  background: $color-bg-container;
-  @include overflow-auto(y);
+  background: theme.$color-bg-container;
+  @include mixin.overflow-auto(y);
   height: 100%;
   position: relative;
   will-change: scroll-position;
   cursor: default;
-  font-size: #{$font-size-s-m}px;
-  font-family: $font-family-code;
+  font-size: #{theme.$font-size-s-m}px;
+  font-family: theme.$font-family-code;
   &.theme-dark {
-    background-color: $color-bg-container-dark;
+    background-color: theme.$color-bg-container-dark;
   }
 }
 
@@ -80,7 +81,7 @@ $console-selected-border-dark: #4173b4;
   border-top: 1px solid transparent;
   border-bottom: 1px solid $border;
   .time-from-container {
-    @include overflow-auto(x);
+    @include mixin.overflow-auto(x);
     padding: 3px $padding;
   }
 }
@@ -110,15 +111,15 @@ $console-selected-border-dark: #4173b4;
 .log-item {
   position: relative;
   display: flex;
-  @include clear-float();
+  @include mixin.clear-float();
   border-top: 1px solid transparent;
   border-bottom: 1px solid $border;
   margin-top: -1px;
   color: $foreground;
   .code {
     display: inline;
-    font-family: $font-family-code;
-    @include code-color;
+    font-family: theme.$font-family-code;
+    @include mixin.code-color;
   }
   a {
     color: #15c !important;
@@ -127,7 +128,7 @@ $console-selected-border-dark: #4173b4;
     margin: 0 -6px 0 $padding;
     .icon {
       line-height: 20px;
-      font-size: #{$font-size-s-m}px;
+      font-size: #{theme.$font-size-s-m}px;
       color: $foreground;
       position: relative;
     }
@@ -150,7 +151,7 @@ $console-selected-border-dark: #4173b4;
     color: #fff;
     padding: 2px 4px;
     border-radius: 10px;
-    font-size: #{$font-size-s-m}px;
+    font-size: #{theme.$font-size-s-m}px;
     float: left;
     margin: 1px -6px 0 $padding;
   }
@@ -161,7 +162,7 @@ $console-selected-border-dark: #4173b4;
   .log-content {
     padding: 3px 0;
     margin: 0 $padding;
-    @include overflow-auto(x);
+    @include mixin.overflow-auto(x);
     white-space: pre-wrap;
     user-select: text;
     * {
@@ -235,14 +236,14 @@ $console-selected-border-dark: #4173b4;
     align-items: center;
   }
   .json {
-    @include overflow-auto(x);
+    @include mixin.overflow-auto(x);
     padding-left: 12px;
   }
   .preview-icon-container {
     display: block;
     .icon {
       position: relative;
-      font-size: #{$font-size-s-m}px;
+      font-size: #{theme.$font-size-s-m}px;
     }
     .icon-caret-down {
       top: 2px;
@@ -294,7 +295,7 @@ $console-selected-border-dark: #4173b4;
     color: $foreground-dark;
     border-bottom-color: $border-dark;
     .code {
-      @include code-color(true);
+      @include mixin.code-color(true);
     }
     &.error {
       background: $console-error-background-dark;
diff --git a/src/cropper/style.scss b/src/cropper/style.scss
index e41dcb5..16a4ba2 100644
--- a/src/cropper/style.scss
+++ b/src/cropper/style.scss
@@ -1,11 +1,12 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-cropper {
-  @include component();
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
   position: relative;
   min-height: 150px;
   touch-action: none;
+  @include mixin.component();
 }
 
 .preview {
@@ -62,7 +63,7 @@
 .view-box {
   display: block;
   height: 100%;
-  outline: 1px solid $color-primary;
+  outline: 1px solid theme.$color-primary;
   overflow: hidden;
   width: 100%;
 }
@@ -136,7 +137,7 @@
 }
 
 .line {
-  background: $color-primary;
+  background: theme.$color-primary;
   &.line-e {
     cursor: ew-resize;
     right: -3px;
@@ -164,7 +165,7 @@
 }
 
 .point {
-  background-color: $color-primary;
+  background-color: theme.$color-primary;
   border: 2px solid #fff;
   height: 6px;
   opacity: 1;
diff --git a/src/data-grid/style.scss b/src/data-grid/style.scss
index 9ea17b4..0cf7d36 100644
--- a/src/data-grid/style.scss
+++ b/src/data-grid/style.scss
@@ -1,12 +1,15 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-data-grid {
-  @include component();
   position: relative;
-  font-size: #{$font-size-s-m}px;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   overflow: hidden;
   outline: none;
+  @include mixin.component();
+  & {
+    font-size: #{theme.$font-size-s-m}px;
+  }
 
   table {
     width: 100%;
@@ -19,7 +22,7 @@
   th,
   td {
     padding: 1px 4px;
-    border-left: 1px solid $color-border;
+    border-left: 1px solid theme.$color-border;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -30,12 +33,12 @@
 
   th {
     font-weight: normal;
-    border-bottom: 1px solid $color-border;
+    border-bottom: 1px solid theme.$color-border;
     text-align: left;
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
     position: relative;
     &.sortable {
-      padding-right: $padding-s-m;
+      padding-right: theme.$padding-s-m;
       &:hover,
       &:active {
         background: #e6e6e6;
@@ -114,13 +117,13 @@
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   th,
   td {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   th {
-    background: $color-fill-secondary-dark;
+    background: theme.$color-fill-secondary-dark;
     &.sortable {
       &:hover {
         background: #303030;
diff --git a/src/dom-highlighter/style.scss b/src/dom-highlighter/style.scss
index cb118e3..a1c453e 100644
--- a/src/dom-highlighter/style.scss
+++ b/src/dom-highlighter/style.scss
@@ -1,3 +1,5 @@
+@use 'sass:string';
+
 .luna-dom-highlighter {
   position: fixed;
   left: 0;
@@ -50,7 +52,7 @@
   border-radius: 3px;
   box-sizing: border-box;
   min-width: 100px;
-  max-width: unquote('min(300px, 100% - 4px)');
+  max-width: string.unquote('min(300px, 100% - 4px)');
   z-index: 2;
   background-clip: padding-box;
   will-change: transform;
diff --git a/src/dom-viewer/style.scss b/src/dom-viewer/style.scss
index 56cfe8a..69d7b50 100644
--- a/src/dom-viewer/style.scss
+++ b/src/dom-viewer/style.scss
@@ -1,16 +1,19 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-dom-viewer {
-  @include component();
-  @include overflow-auto(y);
-  background: transparent;
   overflow-x: hidden;
   word-wrap: break-word;
   padding: 0 0 0 12px;
-  font-size: #{$font-size-s-m}px;
-  font-family: $font-family-code;
   cursor: default;
   list-style: none;
+  @include mixin.overflow-auto(y);
+  @include mixin.component();
+  & {
+    background: transparent;
+    font-size: #{theme.$font-size-s-m}px;
+    font-family: theme.$font-family-code;
+  }
   ul {
     list-style: none;
   }
@@ -112,7 +115,7 @@
 }
 
 .text-node {
-  @include code-color;
+  @include mixin.code-color;
 }
 
 .theme-dark {
@@ -151,6 +154,6 @@
     }
   }
   .text-node {
-    @include code-color(true);
+    @include mixin.code-color(true);
   }
 }
diff --git a/src/editor/style.scss b/src/editor/style.scss
index ff5fe7a..954749f 100644
--- a/src/editor/style.scss
+++ b/src/editor/style.scss
@@ -1,8 +1,9 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-editor {
-  @include component();
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
+  @include mixin.component();
   &.fullscreen {
     position: fixed;
     width: 100% !important;
@@ -14,10 +15,10 @@
 }
 
 .toolbar {
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   padding: 0 6px;
   font-size: 0;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
 }
 
 .button {
@@ -25,15 +26,15 @@
   width: 30px;
   height: 30px;
   text-align: center;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   cursor: pointer;
   border: none;
-  color: $color-text;
+  color: theme.$color-text;
   &:hover {
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
   }
   &.active {
-    color: $color-primary;
+    color: theme.$color-primary;
   }
   &:active,
   &:focus {
@@ -47,7 +48,7 @@
 }
 
 .body {
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   height: 300px;
 }
 
@@ -55,29 +56,29 @@
   padding: 6px;
   width: 100%;
   height: 100%;
-  @include overflow-auto(y);
+  @include mixin.overflow-auto(y);
   &:focus {
     outline: none;
   }
   blockquote {
     margin: 10px 0;
     padding: 5px 10px;
-    border-left: 8px solid $color-primary;
-    background: $color-fill-secondary;
+    border-left: 8px solid theme.$color-primary;
+    background: theme.$color-fill-secondary;
   }
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .toolbar {
-    background: $color-bg-container-dark;
-    border-color: $color-border-dark;
+    background: theme.$color-bg-container-dark;
+    border-color: theme.$color-border-dark;
   }
   .button {
-    background: $color-bg-container-dark;
-    color: $color-text-dark;
+    background: theme.$color-bg-container-dark;
+    color: theme.$color-text-dark;
   }
   .body {
-    background: $color-bg-container-dark;
+    background: theme.$color-bg-container-dark;
   }
 }
diff --git a/src/gallery/style.scss b/src/gallery/style.scss
index d278715..47b2025 100644
--- a/src/gallery/style.scss
+++ b/src/gallery/style.scss
@@ -1,9 +1,12 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-gallery {
-  @include component();
   position: relative;
-  background: black;
+  @include mixin.component();
+  & {
+    background: black;
+  }
   &.full {
     position: fixed;
     background: rgba(0, 0, 0, 50%);
diff --git a/src/image-list/style.scss b/src/image-list/style.scss
index 87cb057..f2d90a4 100644
--- a/src/image-list/style.scss
+++ b/src/image-list/style.scss
@@ -1,8 +1,11 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-image-list {
-  @include component();
-  background-color: transparent;
+  @include mixin.component();
+  & {
+    background-color: transparent;
+  }
   &.theme-dark {
     background-color: transparent;
   }
@@ -30,17 +33,17 @@
   cursor: pointer;
   &:hover {
     .image {
-      box-shadow: $box-shadow;
+      box-shadow: theme.$box-shadow;
     }
   }
 }
 
 .image {
   width: 100%;
-  border-radius: #{$border-radius-l-g}px;
+  border-radius: #{theme.$border-radius-l-g}px;
   overflow: hidden;
-  background-color: $color-bg-container;
-  border: 1px solid $color-border;
+  background-color: theme.$color-bg-container;
+  border: 1px solid theme.$color-border;
   img {
     object-fit: cover;
     width: 100%;
@@ -59,7 +62,7 @@
 
 .theme-dark {
   .image {
-    background-color: $color-bg-container-dark;
-    border-color: $color-border-dark;
+    background-color: theme.$color-bg-container-dark;
+    border-color: theme.$color-border-dark;
   }
 }
diff --git a/src/image-viewer/style.scss b/src/image-viewer/style.scss
index 3c005ab..65cb00e 100644
--- a/src/image-viewer/style.scss
+++ b/src/image-viewer/style.scss
@@ -1,12 +1,12 @@
-@import '../share/mixin';
-@import '../share/theme';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-image-viewer {
-  @include component();
   overflow: hidden;
   touch-action: none;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   position: relative;
+  @include mixin.component();
 }
 
 .image {
@@ -42,5 +42,5 @@
 }
 
 .theme-dark {
-  border: 1px solid $color-border-dark;
+  border: 1px solid theme.$color-border-dark;
 }
diff --git a/src/json-editor/style.scss b/src/json-editor/style.scss
index 35e56a4..441ea44 100644
--- a/src/json-editor/style.scss
+++ b/src/json-editor/style.scss
@@ -1,17 +1,20 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-json-editor {
-  @include component();
-  background: transparent;
   position: relative;
   margin-left: 12px;
-  font-family: $font-family-code;
-  font-size: 12px;
   line-height: 16px;
   cursor: default;
   color: #727272;
   white-space: nowrap;
   user-select: none;
+  @include mixin.component();
+  & {
+    background: transparent;
+    font-family: theme.$font-family-code;
+    font-size: 12px;
+  }
   & > div {
     display: inline-block;
   }
diff --git a/src/keyboard/style.scss b/src/keyboard/style.scss
index 5b1a98f..fe87e00 100644
--- a/src/keyboard/style.scss
+++ b/src/keyboard/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-keyboard {
-  @include component();
+  @include mixin.component();
   border: 1px solid $color-border;
   background: #f2f2f2;
   position: relative;
diff --git a/src/markdown-editor/style.scss b/src/markdown-editor/style.scss
index d3c3c45..c2ca7e0 100644
--- a/src/markdown-editor/style.scss
+++ b/src/markdown-editor/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-markdown-editor {
-  @include component();
+  @include mixin.component();
   border: 1px solid $color-border;
   display: flex;
   flex-direction: column;
diff --git a/src/markdown-viewer/style.scss b/src/markdown-viewer/style.scss
index 6340f3f..e1cc450 100644
--- a/src/markdown-viewer/style.scss
+++ b/src/markdown-viewer/style.scss
@@ -1,8 +1,8 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 // https://github.com/sindresorhus/github-markdown-css
 .luna-markdown-viewer {
-  @include component();
+  @include mixin.component();
   background: transparent;
   &.theme-dark {
     background: transparent;
diff --git a/src/menu-bar/style.scss b/src/menu-bar/style.scss
index bb64803..d968809 100644
--- a/src/menu-bar/style.scss
+++ b/src/menu-bar/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-menu-bar {
-  @include component();
+  @include mixin.component();
   border-bottom: 1px solid $color-border;
 }
 
diff --git a/src/menu/style.scss b/src/menu/style.scss
index b6c0ddd..c95518a 100644
--- a/src/menu/style.scss
+++ b/src/menu/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-menu {
-  @include component();
+  @include mixin.component();
   position: absolute;
   padding: 4px 0;
   box-shadow: $box-shadow;
diff --git a/src/modal/style.scss b/src/modal/style.scss
index 22ef5e4..716fe1a 100644
--- a/src/modal/style.scss
+++ b/src/modal/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-modal {
-  @include component();
+  @include mixin.component();
   position: fixed;
   top: 0;
   left: 0;
diff --git a/src/music-player/style.scss b/src/music-player/style.scss
index 1f14680..8297321 100644
--- a/src/music-player/style.scss
+++ b/src/music-player/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-music-player {
-  @include component();
+  @include mixin.component();
   min-width: 375px;
   border: 1px solid $color-border;
   font-size: 14px;
diff --git a/src/music-visualizer/style.scss b/src/music-visualizer/style.scss
index d4fbca8..9e875fb 100644
--- a/src/music-visualizer/style.scss
+++ b/src/music-visualizer/style.scss
@@ -1,4 +1,4 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-music-visualizer {
   background: #13242f;
diff --git a/src/notification/style.scss b/src/notification/style.scss
index fdc2025..2f6bdb0 100644
--- a/src/notification/style.scss
+++ b/src/notification/style.scss
@@ -1,8 +1,8 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 @import '../share/theme';
 
 .luna-notification {
-  @include component();
+  @include mixin.component();
   position: relative;
   padding: 20px;
   pointer-events: none;
diff --git a/src/object-viewer/style.scss b/src/object-viewer/style.scss
index 4f979bc..946f062 100644
--- a/src/object-viewer/style.scss
+++ b/src/object-viewer/style.scss
@@ -1,4 +1,4 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-object-viewer {
   @include overflow-auto(x);
diff --git a/src/painter/style.scss b/src/painter/style.scss
index f362bdc..fd9d2ec 100644
--- a/src/painter/style.scss
+++ b/src/painter/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-painter {
-  @include component();
+  @include mixin.component();
   position: relative;
   padding-left: 40px;
   padding-top: 30px;
diff --git a/src/performance-monitor/style.scss b/src/performance-monitor/style.scss
index 97b817b..7df4eb6 100644
--- a/src/performance-monitor/style.scss
+++ b/src/performance-monitor/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-performance-monitor {
-  @include component();
+  @include mixin.component();
   border: 1px solid $color-border;
   width: 100%;
   padding: 5px;
diff --git a/src/qrcode-generator/style.scss b/src/qrcode-generator/style.scss
index 8d67294..0397089 100644
--- a/src/qrcode-generator/style.scss
+++ b/src/qrcode-generator/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-qrcode-generator {
-  @include component();
+  @include mixin.component();
   border: 1px solid $color-border;
   display: flex;
   height: 250px;
diff --git a/src/retro-emulator/style.scss b/src/retro-emulator/style.scss
index 4d1ea65..48a6235 100644
--- a/src/retro-emulator/style.scss
+++ b/src/retro-emulator/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-retro-emulator {
-  @include component();
+  @include mixin.component();
   background: #000;
   width: 100%;
   height: 100%;
diff --git a/src/retro-handheld/style.scss b/src/retro-handheld/style.scss
index 9a0d436..069d823 100644
--- a/src/retro-handheld/style.scss
+++ b/src/retro-handheld/style.scss
@@ -1,8 +1,8 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 // https://codepen.io/manz/pen/XQYoKd
 .luna-retro-handheld {
-  @include component();
+  @include mixin.component();
   min-width: 380px;
   background: #d3ccd3 linear-gradient(#d3ccd3 95%, #999 98%, #777 99%);
   overflow: hidden;
diff --git a/src/scrollbar/style.scss b/src/scrollbar/style.scss
index c8bb759..096c736 100644
--- a/src/scrollbar/style.scss
+++ b/src/scrollbar/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-scrollbar {
-  @include component();
+  @include mixin.component();
   position: relative;
   box-sizing: border-box;
   &:hover {
diff --git a/src/setting/style.scss b/src/setting/style.scss
index e66d258..df2ddd0 100644
--- a/src/setting/style.scss
+++ b/src/setting/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-setting {
-  @include component();
+  @include mixin.component();
   min-width: 320px;
 }
 
diff --git a/src/shader-toy-player/style.scss b/src/shader-toy-player/style.scss
index ae6148e..1cc29d4 100644
--- a/src/shader-toy-player/style.scss
+++ b/src/shader-toy-player/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-shader-toy-player {
-  @include component();
+  @include mixin.component();
   background: #000;
   width: 100%;
   height: 100%;
diff --git a/src/tab/style.scss b/src/tab/style.scss
index dc5e0e4..b2f9e53 100644
--- a/src/tab/style.scss
+++ b/src/tab/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-tab {
-  @include component();
+  @include mixin.component();
   position: relative;
   overflow: hidden;
   width: 100%;
diff --git a/src/text-viewer/style.scss b/src/text-viewer/style.scss
index 510ee16..6cf3e9e 100644
--- a/src/text-viewer/style.scss
+++ b/src/text-viewer/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-text-viewer {
-  @include component();
+  @include mixin.component();
   padding: 0;
   unicode-bidi: embed;
   position: relative;
diff --git a/src/toolbar/style.scss b/src/toolbar/style.scss
index 7e65b14..ce27224 100644
--- a/src/toolbar/style.scss
+++ b/src/toolbar/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-toolbar {
-  @include component();
+  @include mixin.component();
   height: 31px;
   display: flex;
   white-space: nowrap;
diff --git a/src/video-player/style.scss b/src/video-player/style.scss
index 088431c..02ceae1 100644
--- a/src/video-player/style.scss
+++ b/src/video-player/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-video-player {
-  @include component();
+  @include mixin.component();
   background: #000;
   min-height: 150px;
   position: relative;
diff --git a/src/window/style.scss b/src/window/style.scss
index 333260e..a1ebdff 100644
--- a/src/window/style.scss
+++ b/src/window/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
 
 .luna-window {
-  @include component();
+  @include mixin.component();
   position: absolute;
   pointer-events: all;
   display: flex;