chore: remove variable.scss

liriliri · Feb 5, 2024 · 6de14e4 · 6de14e4
1 parent 1dbc3b7
commit 6de14e4
Show file tree

Hide file tree

Showing 34 changed files with 270 additions and 267 deletions.
diff --git a/src/box-model/style.scss b/src/box-model/style.scss
@@ -3,7 +3,7 @@
 .luna-box-model {
  @include component();
  display: inline-block;
- font-size: $font-size-s;
+ font-size: #{$font-size-s-m}px;
  text-align: center;
  white-space: nowrap;
 }
@@ -39,22 +39,22 @@
  border: 1px grey dotted;
 }
 .margin {
- color: $foreground-color;
+ color: $color-text;
  border: 1px dashed;
  background: rgba(246, 178, 107, 0.66);
 }
 .border {
- color: $foreground-color;
+ color: $color-text;
  border: 1px #000 solid;
  background: rgba(255, 229, 153, 0.66);
 }
 .padding {
- color: $foreground-color;
+ color: $color-text;
  border: 1px grey dashed;
  background: rgba(147, 196, 125, 0.55);
 }
 .content {
- color: $foreground-color;
+ color: $color-text;
  border: 1px grey solid;
  min-width: 100px;
  background: rgba(111, 168, 220, 0.66);

diff --git a/src/carousel/style.scss b/src/carousel/style.scss
@@ -1,6 +1,7 @@
-@import '../share/variable';
+@import '../share/mixin';
 
 .luna-carousel {
+ @include component();
  background: #000;
  width: 100%;
  height: 100%;
@@ -30,7 +31,7 @@
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
- transition: background 0.3s, opacity 0.3s;
+ transition: background-color 0.3s, opacity 0.3s;
  opacity: 0;
  &:hover {
  background: rgba(0, 0, 0, 0.35);

diff --git a/src/color-picker/style.scss b/src/color-picker/style.scss
@@ -1,5 +1,4 @@
 @import '../share/mixin';
-@import '../share/variable';
 
 .luna-color-picker {
  @include component();

diff --git a/src/command-palette/style.scss b/src/command-palette/style.scss
@@ -1,7 +1,7 @@
-@import '../share/variable.scss';
+@import '../share/mixin';
 
 .luna-command-palette {
- font-family: $font-family;
+ @include component();
  position: fixed;
  top: 0;
  left: 0;
@@ -12,23 +12,24 @@
  align-items: flex-start;
  padding-top: 10px;
  overflow: hidden;
+ background: transparent !important;
 }
 
 .body {
  max-width: 100%;
  box-shadow: $box-shadow;
  font-size: 12px;
- background: $background-color;
+ background: $color-bg-container;
 }
 
 .input {
  box-sizing: border-box;
  outline: none;
  width: 100%;
  border: none;
- border-bottom: 1px solid $border-color;
+ border-bottom: 1px solid $color-border;
  padding: 10px 4px;
- color: $foreground-color;
+ color: $color-text;
 }
 
 .list {
@@ -42,11 +43,11 @@
  cursor: pointer;
  display: flex;
  &:hover {
- background: $darker-background-color;
+ background: $color-fill-secondary;
  }
  &.active {
- color: $select-foreground-color;
- background: $primary-color;
+ color: $color-white;
+ background: $color-primary;
  }
  .title {
  flex: 1;
@@ -58,3 +59,22 @@
 .hidden {
  display: none;
 }
+
+.theme-dark {
+ .body {
+ background: $color-bg-container-dark;
+ }
+ .input {
+ background: $color-bg-container-dark;
+ border-color: $color-border-dark;
+ }
+ li {
+ &:hover {
+ background: $color-fill-secondary-dark;
+ }
+ &.active {
+ color: $color-white;
+ background: $color-primary;
+ }
+ }
+}
diff --git a/src/console/style.scss b/src/console/style.scss
@@ -1,8 +1,6 @@
 @import '../share/mixin';
-@import '../share/variable';
 
 $padding: 10px;
-$font-size: 12px;
 $border: #ccc;
 $foreground: #333;
 $darker-background: #f3f3f3;
@@ -30,16 +28,16 @@ $console-selected-background-dark: #29323d;
 $console-selected-border-dark: #4173b4;
 
 .luna-console {
- background: $background-color;
+ background: $color-bg-container;
  @include overflow-auto(y);
  height: 100%;
  position: relative;
  will-change: scroll-position;
  cursor: default;
- font-size: $font-size;
+ font-size: #{$font-size-s-m}px;
  font-family: $font-family-code;
  &.theme-dark {
- background-color: $background-color-dark;
+ background-color: $color-bg-container-dark;
  }
 }
 
@@ -129,7 +127,7 @@ $console-selected-border-dark: #4173b4;
  margin: 0 -6px 0 $padding;
  .icon {
  line-height: 20px;
- font-size: $font-size;
+ font-size: #{$font-size-s-m}px;
  color: $foreground;
  position: relative;
  }
@@ -152,7 +150,7 @@ $console-selected-border-dark: #4173b4;
  color: #fff;
  padding: 2px 4px;
  border-radius: 10px;
- font-size: $font-size;
+ font-size: #{$font-size-s-m}px;
  float: left;
  margin: 1px -6px 0 $padding;
  }
@@ -244,7 +242,7 @@ $console-selected-border-dark: #4173b4;
  display: block;
  .icon {
  position: relative;
- font-size: $font-size-s;
+ font-size: #{$font-size-s-m}px;
  }
  .icon-caret-down {
  top: 2px;

diff --git a/src/cropper/style.scss b/src/cropper/style.scss
@@ -1,4 +1,3 @@
-@import '../share/variable';
 @import '../share/mixin';
 
 .luna-cropper {
@@ -63,7 +62,7 @@
 .view-box {
  display: block;
  height: 100%;
- outline: 1px solid $primary-color;
+ outline: 1px solid $color-primary;
  overflow: hidden;
  width: 100%;
 }
@@ -137,7 +136,7 @@
 }
 
 .line {
- background: $primary-color;
+ background: $color-primary;
  &.line-e {
  cursor: ew-resize;
  right: -3px;
@@ -165,7 +164,7 @@
 }
 
 .point {
- background-color: $primary-color;
+ background-color: $color-primary;
  border: 2px solid #fff;
  height: 6px;
  opacity: 1;

diff --git a/src/data-grid/style.scss b/src/data-grid/style.scss
@@ -3,17 +3,11 @@
 .luna-data-grid {
  @include component();
  position: relative;
- font-size: $font-size-s;
- border: 1px solid $border-color;
+ font-size: #{$font-size-s-m}px;
+ border: 1px solid $color-border;
  overflow: hidden;
  outline: none;
 
- &.theme-dark {
- color: $foreground-color-dark;
- background: $background-color-dark;
- border-color: $border-color-dark;
- }
-
  table {
  width: 100%;
  height: 100%;
@@ -25,7 +19,7 @@
  th,
  td {
  padding: 1px 4px;
- border-left: 1px solid $border-color;
+ border-left: 1px solid $color-border;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
@@ -36,9 +30,9 @@
 
  th {
  font-weight: normal;
- border-bottom: 1px solid $border-color;
+ border-bottom: 1px solid $color-border;
  text-align: left;
- background: $darker-background-color;
+ background: $color-fill-secondary;
  &.sortable {
  &:hover,
  &:active {
@@ -110,13 +104,13 @@
 }
 
 .theme-dark {
- color-scheme: dark;
+ border-color: $color-border-dark;
  th,
  td {
- border-color: $border-color-dark;
+ border-color: $color-border-dark;
  }
  th {
- background: $darker-background-color-dark;
+ background: $color-fill-secondary-dark;
  &.sortable {
  &:hover {
  background: #303030;

diff --git a/src/dom-viewer/style.scss b/src/dom-viewer/style.scss
@@ -1,5 +1,4 @@
 @import '../share/mixin';
-@import '../share/variable';
 
 .luna-dom-viewer {
  @include component();
@@ -8,7 +7,7 @@
  overflow-x: hidden;
  word-wrap: break-word;
  padding: 0 0 0 12px;
- font-size: $font-size-s;
+ font-size: #{$font-size-s-m}px;
  font-family: $font-family-code;
  cursor: default;
  list-style: none;
@@ -17,6 +16,7 @@
  }
  &.theme-dark {
  color: #e8eaed;
+ background: transparent;
  }
 }
 

diff --git a/src/editor/style.scss b/src/editor/style.scss
@@ -1,11 +1,8 @@
 @import '../share/mixin';
-@import '../share/variable';
 
 .luna-editor {
- border: 1px solid $border-color;
- * {
- box-sizing: border-box;
- }
+ @include component();
+ border: 1px solid $color-border;
  &.fullscreen {
  position: fixed;
  width: 100% !important;
@@ -17,26 +14,26 @@
 }
 
 .toolbar {
- background: $background-color;
+ background: $color-bg-container;
  padding: 0 6px;
  font-size: 0;
- border-bottom: 1px solid $border-color;
+ border-bottom: 1px solid $color-border;
 }
 
 .button {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
- background: $background-color;
+ background: $color-bg-container;
  cursor: pointer;
  border: none;
- color: $foreground-color;
+ color: $color-text;
  &:hover {
- background: $darker-background-color;
+ background: $color-fill-secondary;
  }
  &.active {
- color: $primary-color;
+ color: $color-primary;
  }
  &:active,
  &:focus {
@@ -50,7 +47,7 @@
 }
 
 .body {
- background: $background-color;
+ background: $color-bg-container;
  height: 300px;
 }
 
@@ -65,7 +62,22 @@
  blockquote {
  margin: 10px 0;
  padding: 5px 10px;
- border-left: 8px solid $primary-color;
- background: $darker-background-color;
+ border-left: 8px solid $color-primary;
+ background: $color-fill-secondary;
+ }
+}
+
+.theme-dark {
+ border-color: $color-border-dark;
+ .toolbar {
+ background: $color-bg-container-dark;
+ border-color: $color-border-dark;
+ }
+ .button {
+ background: $color-bg-container-dark;
+ color: $color-text-dark;
+ }
+ .body {
+ background: $color-bg-container-dark;
  }
 }
diff --git a/src/gallery/style.scss b/src/gallery/style.scss
@@ -1,4 +1,3 @@
-@import '../share/variable';
 @import '../share/mixin';
 
 .luna-gallery {