@g1cloud/bluesea 5.0.0-alpha.75 → 5.0.0-alpha.77

package/css/component.scss

@@ -18,19 +18,44 @@
   display: inline-flex;
   align-items: center;
   justify-content: left;
-  background-color: white;
+  background-color: $color-body-bg;
 }
 
 // input component
 .bs-input-wrap {
-  @extend .bs-box-component-wrap
+  @extend .bs-box-component-wrap;
+
+  .suffix,
+  .prefix {
+    font-size: 0.9em;
+    margin-right: 4px;
+    margin-left: 4px;
+    background-color: $color-gray-200;
+    padding: 2px 4px;
+    border-radius: 2px;
+    line-height: 1;
+    white-space: nowrap;
+
+    &:first-child {
+      margin-left: 4px;
+    }
+
+    .font-icon {
+      font-size: 0.9em;
+    }
+
+    img {
+      width: 0.9em;
+      height: 0.9em;
+    }
+  }
 }
 
 .bs-input-base {
   @extend .bs-box-component-base;
   border: 1px solid $color-border;
   border-radius: 2px;
-  background-color: $white;
+  background-color: $color-body-bg;
 
   > input {
     border: 0;
@@ -42,6 +67,7 @@
     padding: 0 6px;
     background-color: transparent;
     width: 100%;
+    color: $color-body-text;
   }
 
   > textarea {
@@ -53,34 +79,12 @@
     padding: 6px;
     line-height: 1.4;
     font-family: sans-serif;
-  }
-
-  > .suffix,
-  .prefix {
-    font-size: 0.9em;
-    margin-right: 4px;
-    background-color: $gray-200;
-    padding: 2px 4px;
-    border-radius: 2px;
-    line-height: 1;
-    white-space: nowrap;
-
-    &:first-child {
-      margin-left: 4px;
-    }
-
-    .font-icon {
-      font-size: 0.9em;
-    }
-
-    img {
-      width: 0.9em;
-      height: 0.9em;
-    }
+    background-color: $color-body-bg;
+    color: $color-body-text;
   }
 
   &:hover {
-    border-color: $black;
+    border-color: $color-border-hover;
   }
 
   &:has(:focus) {
@@ -118,11 +122,17 @@
 
   &.disabled {
     > .input-area {
-      border-color: $gray-400 !important;
-      background-color: $gray-100 !important;
+      border-color: $color-border !important;
+      background-color: $color-gray-100 !important;
+      color: $color-gray-400 !important;
 
       > input {
-        color: $gray-400 !important;
+        color: $color-gray-400 !important;
+        background-color: $color-gray-100 !important;
+      }
+
+      > textarea {
+        background-color: $color-gray-100 !important;
       }
     }
   }
@@ -151,7 +161,7 @@
 .bs-calendar,
 .bs-calendar-range {
   .extra-dates {
-    color: $gray-500;
+    color: $color-body-text;
     margin-top: 4px;
 
     .extra-date {
@@ -181,7 +191,7 @@
 // checkbox, radio-button component
 .bs-checkbox-base {
   display: inline-block;
-  color: $color-text;
+  color: $color-body-text;
 
   input {
     appearance: none;
@@ -193,14 +203,14 @@
       font-size: 20px;
       vertical-align: middle;
       cursor: pointer;
-      color: $color-text;
+      color: $color-body-text;
     }
 
     &:hover {
-      color: $black;
+      color: $color-gray-500;
 
       & ~ label {
-        color: $black;
+        color: $color-gray-500;
       }
     }
 
@@ -236,11 +246,11 @@
 
   &.disabled {
     & input::before {
-      color: $gray-400 !important;
+      color: $color-gray-400 !important;
     }
 
     & input ~ label {
-      color: $gray-400 !important;
+      color: $color-gray-400 !important;
     }
   }
 
@@ -280,10 +290,11 @@
   @extend .bs-box-component-wrap;
   position: relative;
   outline: 0;
-  background-color: $white;
+  background-color: $color-body-bg;
+  color: $color-body-text;
 
   &:hover > .selected {
-    border-color: $black;
+    border-color: $color-border-hover;
   }
 
   &:focus > .selected {
@@ -335,9 +346,9 @@
   }
 
   &.disabled > .selected {
-    border-color: $gray-400 !important;
-    background-color: $gray-100 !important;
-    color: $gray-400 !important;
+    border-color: $color-border !important;
+    background-color: $color-gray-100 !important;
+    color: $color-gray-500 !important;
   }
 
   .small-progress {
@@ -378,7 +389,13 @@
 
 // utility
 .component-shadow-base {
-  box-shadow: 2px 2px 8px #aaa;
+  box-shadow: 2px 2px 8px rgba(0,0,0,.1);
+}
+
+[data-theme="dark"] {
+  .component-shadow-base {
+    box-shadow: 2px 2px 8px rgba(255,255,255,.1);
+  }
 }
 
 .font-icon {

package/css/frame/default.scss

@@ -1,13 +1,9 @@
 @import "../variable";
 @import "../component";
 
-$color-header-bg: $primary !default;
-$color-header-text: #FFFFFF !default;
 $color-menu-bg: #464854 !default;
 $color-menu-border: #2D2E36;
-
 $header-height: 44px !default;
-
 $sidebar-menu-width: 220px !default;
 
 header.default-header {
@@ -36,8 +32,8 @@ header.default-header {
       margin-right: 6px;
       padding: 2px 4px;
       border-radius: 4px;
-      background-color: $white;
-      color: $primary-600;
+      background-color: $color-header-text;
+      color: $color-header-bg;
       font-size: 1em;
       font-weight: 700;
     }
@@ -137,7 +133,7 @@ header.default-header {
     overflow-x: auto;
 
     .header-tab {
-      background-color: $primary-400;
+      background-color: $color-header-tab;
       padding: 0 12px;
       height: 32px;
       border-top-left-radius: 4px;
@@ -178,22 +174,28 @@ header.default-header {
           display: block;
         }
 
-        background-color: lighten($primary-400, 5%);
+        opacity: .8;
       }
 
       &.selected {
-        color: $color-text;
-        background-color: $white;
+        color: $color-header-tab-text;
+        background-color: $color-header-tab-selected;
 
         &:hover {
-          background-color: $white;
+          background-color: $color-header-tab-selected;
         }
       }
     }
   }
 }
 
+html {
+  background-color: $color-body-bg;
+}
+
 .default-body {
+  background-color: $color-body-bg;
+  color: $color-body-text;
   margin-top: $header-height;
   min-height: calc(100vh - $header-height);
 
@@ -208,8 +210,9 @@ header.default-header {
   .fixed-header {
     position: fixed;
     width: 100%;
-    border-bottom: 1px solid $gray-400;
-    background-color: white;
+    min-height: 43px;
+    border-bottom: 1px solid $color-border;
+    background-color: $color-body-bg;
     padding: 8px 16px;
     z-index: 10;
   }
@@ -220,15 +223,15 @@ header.default-header {
 
   .colored-bg {
     flex-grow: 1;
-    background-color: $primary-100;
+    background-color: $color-colored-bg;
 
     > .box-style {
-      background-color: $white;
+      background-color: $color-body-bg;
       border-radius: 10px;
     }
 
     .dashboard-box-style {
-      background-color: $white;
+      background-color: $color-body-bg;
       padding: 16px;
       border-radius: 10px;
 

package/css/layout.scss

@@ -103,7 +103,7 @@
 
 .bs-layout-form {
 
-  border-bottom: 1px solid $gray-200;
+  border-bottom: 1px solid $color-border;
 
   > div {
     display: flex;
@@ -113,18 +113,18 @@
       padding: 8px 16px;
       width: 12.3076em;
       line-height: 1.2em;
-      color: $black;
+      color: $color-body-text;
     }
 
     > :not(.title) {
       padding: 8px;
       width: 10em;
       flex-grow: 1;
-      color: $gray-700;
+      color: $color-body-text;
     }
 
     &:nth-child(odd) {
-      background-color: $gray-100;
+      background-color: $color-gray-100;
     }
   }
 

package/css/utility.scss

@@ -712,51 +712,51 @@ $vertical-aligns: baseline, top, middle, bottom, text-bottom, text-top;
 
 .code-chip-red {
   @extend .code-chip-base;
-  color: $red;
+  color: $color-red;
   border-color: $red;
-  background-color: #FFE3E2;
+  background-color: $color-red-bg;
 }
 
 .code-chip-black {
   @extend .code-chip-base;
-  color: $gray-700;
-  border-color: $gray-700;
-  background-color: $white;
+  color: $color-body-text;
+  border-color: $color-body-text;
+  background-color: $color-body-bg;
 }
 
 .code-chip-gray {
   @extend .code-chip-base;
-  color: $gray;
-  border-color: $gray;
-  background-color: #FFF;
+  color: $color-gray;
+  border-color: $gray-500;
+  background-color: $color-gray-bg;
 }
 
 .code-chip-blue {
   @extend .code-chip-base;
-  color: $primary;
-  border-color: $primary;
-  background-color: $primary-200;
+  color: $color-blue;
+  border-color: $blue;
+  background-color: $color-blue-bg;
 }
 
 .code-chip-green {
   @extend .code-chip-base;
-  color: $green;
+  color: $color-green;
   border-color: $green;
-  background-color: #E9FEE7;
+  background-color: $color-green-bg;
 }
 
 .code-chip-purple {
   @extend .code-chip-base;
-  color: $purple;
+  color: $color-purple;
   border-color: $purple;
-  background-color: #EAD8FF;
+  background-color: $color-purple-bg;
 }
 
 .code-chip-orange {
   @extend .code-chip-base;
-  color: $orange;
+  color: $color-orange;
   border-color: $orange;
-  background-color: #FFF8DE;
+  background-color: $color-orange-bg;
 }