merged main

revolist · Nov 12, 2024 · ffc7226 · ffc7226
2 parents 876a377 + 0515ebd
commit ffc7226
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 37 deletions.
diff --git a/docs b/docs
diff --git a/formats/select b/formats/select
diff --git a/packages/angular b/packages/angular
diff --git a/packages/react b/packages/react
diff --git a/packages/svelte b/packages/svelte
diff --git a/packages/vue2 b/packages/vue2
diff --git a/packages/vue3 b/packages/vue3
diff --git a/src/components/revoGrid/styles/revo-grid.common.dark.scss b/src/components/revoGrid/styles/revo-grid.common.dark.scss
@@ -1,73 +1,67 @@
 @mixin revoGridDark() {
-  $font-color: #d8d8d8;
-  color: $font-color;
-
-  $cell-border-color: #404040;
-  $cell-shadow-cell: 0 -1px 0 0 $cell-border-color inset;
-  $focused-header: rgba(#7394a0, 0.15);
-  $el-color: #28272b;
+  color: $font-color-dark;
 
   .rowHeaders {
-    background-color: rgba($el-color, 0.8);
+    background-color: rgba($el-color-dark, 0.8);
     revogr-data .rgCell {
-      color: rgba($font-color, 0.8);
+      color: rgba($font-color-dark, 0.8);
     }
   }
 
   revogr-edit {
-    background-color: $el-color;
+    background-color: $el-color-dark;
   }
 
   revogr-header {
     .header-rgRow {
       &.group {
-        $shadow-bottom: 0 -1px 0 0 $cell-border-color inset;
+        $shadow-bottom: 0 -1px 0 0 $cell-border-color-dark inset;
         box-shadow: $shadow-bottom;
       }
 
       &:not(.group) {
-        $shadow-bottom: 0 -1px 0 0 $cell-border-color inset;
-        $shadow-top: 0 -1px 0 0 $cell-border-color;
+        $shadow-bottom: 0 -1px 0 0 $cell-border-color-dark inset;
+        $shadow-top: 0 -1px 0 0 $cell-border-color-dark;
         box-shadow: $shadow-top, $shadow-bottom;
       }
     }
 
     .rgHeaderCell {
       &.sortable {
         &:hover {
-          background-color: rgba($cell-border-color, 0.5);
+          background-color: rgba($cell-border-color-dark, 0.5);
         }
       }
       &.focused-cell {
-        background: $focused-header;
+        background: $focused-header-dark;
       }
     }
   }
 
   .footer-wrapper revogr-data {
-    box-shadow: 0 -1px 0 $cell-border-color;
+    box-shadow: 0 -1px 0 $cell-border-color-dark;
   }
 
   revogr-data {
     .rgCell {
-      color: rgba($font-color, 0.9);
+      color: rgba($font-color-dark, 0.9);
     }
 
     .rgRow {
-      box-shadow: $cell-shadow-cell;
+      box-shadow: $cell-shadow-cell-dark;
       &.focused-rgRow {
-        background-color: $focused-header;
+        background-color: $focused-header-dark;
       }
     }
   }
 
   revogr-viewport-scroll {
     &.colPinStart {
-      box-shadow: -1px 0 0 $cell-border-color inset;
+      box-shadow: -1px 0 0 $cell-border-color-dark inset;
     }
 
     &.colPinEnd {
-      box-shadow: -1px 0 0 $cell-border-color;
+      box-shadow: -1px 0 0 $cell-border-color-dark;
     }
   }
 }
diff --git a/src/global/_buttons.scss b/src/global/_buttons.scss
@@ -4,7 +4,7 @@
   position: relative;
   overflow: hidden;
   color: #fff;
-  background-color: #6200ee;
+  background-color: #4545ff;
   height: $h;
   line-height: $h;
   padding: 0 15px;
@@ -17,13 +17,11 @@
   &.green {
     $bg: #009037;
     background-color: $bg;
-    border: 1px solid darken($color: $bg, $amount: 5);
   }
 
   &.red {
     $bg: #E0662E;
     background-color: $bg;
-    border: 1px solid darken($color: $bg, $amount: 5);
   }
 
   &:disabled,
@@ -32,16 +30,22 @@
     filter: opacity(0.35) !important;
   }
 
-  &.light {
-    $br-color: #cedefa;
+  &.outline {
+    $br-color: #dbdbdb;
     $color: #000;
     border: 1px solid $br-color;
     line-height: $h - 2;
     background: none;
     color: $color;
     box-shadow: none;
   }
-
-
-
 }
+
+revo-grid[theme^='dark'] {
+  .revo-button {
+    &.outline {
+      border: 1px solid $cell-border-color-dark;
+      color: $font-color-dark;
+    }
+  }
+}
diff --git a/src/global/_colors.dark.scss b/src/global/_colors.dark.scss
@@ -0,0 +1,5 @@
+$font-color-dark: #d8d8d8;
+$cell-border-color-dark: #404040;
+$cell-shadow-cell-dark: 0 -1px 0 0 $cell-border-color-dark inset;
+$focused-header-dark: rgba(#7394a0, 0.15);
+$el-color-dark: #28272b;
diff --git a/src/plugins/filter/filter.panel.tsx b/src/plugins/filter/filter.panel.tsx
@@ -487,7 +487,7 @@ export class FilterPanel {
             <button
               id="revo-button-reset"
               aria-label="reset"
-              class="revo-button light"
+              class="revo-button outline"
               onClick={() => this.onReset()}
             >
               {capts.reset}

diff --git a/src/plugins/filter/filter.style.scss b/src/plugins/filter/filter.style.scss
@@ -205,3 +205,18 @@ revogr-filter-panel {
   justify-content: space-between;
   align-items: center;
 }
+
+revo-grid[theme^='dark'] {
+  revogr-filter-panel {
+    background-color: $el-color-dark;
+
+    .add-filter-divider {
+      border-bottom-color: $el-color-dark;
+    }
+
+    input[type=text] {
+      background-color: $font-color-dark;
+      color: black;
+    }
+  }
+}
diff --git a/stencil.config.ts b/stencil.config.ts
@@ -62,6 +62,7 @@ export const config: Config = {
     sass({
       injectGlobalPaths: [
         'src/global/_colors.scss',
+        'src/global/_colors.dark.scss',
         'src/global/_icons.scss',
         'src/global/_mixins.scss',
         'src/global/_buttons.scss',
+20 −6		package-lock.json
+3 −2		package.json
+1 −1		revodropdown
+2 −2		package.json
+2 −2		projects/angular-datagrid/package.json