refactor(tile-manager): add base dark schema

Author: SisIvanova

src/components/tile-manager/themes/container.ts

@@ -6,17 +6,18 @@ import { styles as bootstrapDark } from './dark/tile-manager.bootstrap.css.js';
 import { styles as fluentDark } from './dark/tile-manager.fluent.css.js';
 import { styles as indigoDark } from './dark/tile-manager.indigo.css.js';
 import { styles as materialDark } from './dark/tile-manager.material.css.js';
+import { styles as sharedDark } from './dark/tile-manager.shared.css.js';
 // Light Overrides
 import { styles as bootstrapLight } from './light/tile-manager.bootstrap.css.js';
 import { styles as fluentLight } from './light/tile-manager.fluent.css.js';
 import { styles as indigoLight } from './light/tile-manager.indigo.css.js';
 import { styles as materialLight } from './light/tile-manager.material.css.js';
-import { styles as shared } from './light/tile-manager.shared.css.js';
+import { styles as sharedLight } from './light/tile-manager.shared.css.js';
 // Shared Styles
 
 const light = {
   shared: css`
-    ${shared}
+    ${sharedLight}
   `,
   bootstrap: css`
     ${bootstrapLight}
@@ -34,7 +35,7 @@ const light = {
 
 const dark = {
   shared: css`
-    ${shared}
+    ${sharedDark}
   `,
   bootstrap: css`
     ${bootstrapDark}

src/components/tile-manager/themes/dark/_themes.scss

@@ -1,6 +1,7 @@
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/tile-manager' as *;
 
+$base: digest-schema($dark-base-tile-manager);
 $material: digest-schema($dark-material-tile-manager);
 $bootstrap: digest-schema($dark-bootstrap-tile-manager);
 $fluent: digest-schema($dark-fluent-tile-manager);

src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
 }

src/components/tile-manager/themes/dark/tile-manager.fluent.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
 }

src/components/tile-manager/themes/dark/tile-manager.indigo.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
 }

src/components/tile-manager/themes/dark/tile-manager.material.scss

@@ -1,9 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
 }

src/components/tile-manager/themes/dark/tile-manager.shared.scss

@@ -0,0 +1,6 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+:host {
+    @include css-vars-from-theme($base, 'ig-tile-manager');
+}

src/components/tile-manager/themes/shared/tile/tile.common.scss

@@ -31,7 +31,7 @@ $theme: $material;
     }
 }
 
-[part="content-container"] {
+[part='content-container'] {
     background: var-get($theme, 'content-background');
     color: var-get($theme, 'content-color');
 }

src/components/tile-manager/themes/tile.base.scss

@@ -9,8 +9,6 @@
 }
 
 [part~='base'] {
-    // resize: both;
-    // overflow: auto;
     width: 100%;
     height: 100%;
 }
@@ -33,6 +31,7 @@
     height: 100%;
     overflow: visible;
     isolation: isolate;
+    z-index: 10;
 
     [part~='base'] {
         width: 100%;