fix(aggrid/style): use theme variables in filter

siemens · Sep 15, 2022 · 79a1e87 · 79a1e87
1 parent f67e02c
commit 79a1e87
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/packages/aggrid/scss/ix-aggrid.scss b/packages/aggrid/scss/ix-aggrid.scss
@@ -99,4 +99,13 @@
     letter-spacing: normal;
     color: var(--theme-table-data-cell--color);
   }
+
+  .ag-filter-wrapper {
+    background-color: var(--theme-color-1);
+
+    .ag-checkbox .ag-input-wrapper,
+    .ag-radio-button .ag-input-wrapper {
+      color: var(--theme-color-primary);
+    }
+  }
 }
diff --git a/packages/aggrid/src/components/ix-ag-grid/ix-ag-grid.tsx b/packages/aggrid/src/components/ix-ag-grid/ix-ag-grid.tsx
@@ -33,7 +33,7 @@ export class IxAgGrid {
     }
 
     if (!this.grid) {
-      const gridDiv = this.host.querySelector('div.ag-theme-ix-brand-dark') as HTMLElement;
+      const gridDiv = this.host.querySelector('div.ag-theme-ix') as HTMLElement;
       this.grid = new Grid(gridDiv, this.gridOptions);
     }
   }

diff --git a/packages/aggrid/src/index.html b/packages/aggrid/src/index.html
@@ -20,7 +20,7 @@
     <link rel="stylesheet" href="/build/ix/dist/siemens-ix/siemens-ix.css" />
     <link rel="stylesheet" href="/build/ix-icons/css/ix-icons.css" />
   </head>
-  <body class="theme-brand-dark" style="height: 100vh; width: 100vw">
+  <body class="theme-classic-dark" style="height: 100vh; width: 100vw">
     <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
   </body>
 </html>