refactor(tile-manager): tile header styles

Author: SisIvanova

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

@@ -61,3 +61,17 @@ $theme: $material;
         background: var-get($theme, 'overlay-background');
     }
 }
+
+[part='header'] {
+    background: var-get($theme, 'tile-background');
+    border-top-left-radius: var-get($theme, 'border-radius');
+    border-top-right-radius: var-get($theme, 'border-radius');
+}
+
+[part='title'] {
+    color: var-get($theme, 'title-color');
+}
+
+igc-divider {
+    --color: var-get($theme, 'divider-color');
+}

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

@@ -21,4 +21,8 @@ $theme: $indigo;
 
         margin: 0;
     }
-}
+}
+
+[part='header'] {
+    padding-block: sizable(rem(8px), rem(14px), rem(14px));
+}

src/components/tile-manager/themes/shared/header/tile-header.indigo.scss

@@ -74,16 +74,19 @@
     z-index: 10;
 }
 
-// REVIEW copied from tile-header.base.scss
-
 [part='header'] {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: sizable(rem(12px), rem(16px), rem(16px));
     padding-block: sizable(rem(8px), rem(13px), rem(13px));
     padding-inline: sizable(rem(12px), rem(16px), rem(20px));
 }
 
+[part='title'] {
+    width: 100%;
+}
+
 ::slotted([slot='title']) {
     @include type-style('h6');
     @include ellipsis();
@@ -95,5 +98,4 @@
 [part='actions'] {
     display: flex;
     gap: rem(8px);
-    margin-inline-start: auto;
 }

…shared/header/tile-header.bootstrap.scss …r/themes/shared/tile/tile.bootstrap.scsssrc/components/tile-manager/themes/shared/header/tile-header.bootstrap.scss renamed to src/components/tile-manager/themes/shared/tile/tile.bootstrap.scss src/components/tile-manager/themes/shared/header/tile-header.bootstrap.scss renamed to src/components/tile-manager/themes/shared/tile/tile.bootstrap.scss

@@ -2,15 +2,29 @@ import { css } from 'lit';
 
 import type { Themes } from '../../../theming/types.js';
 // Shared Styles
+import { styles as bootstrap } from './shared/tile/tile.bootstrap.css.js';
+import { styles as fluent } from './shared/tile/tile.fluent.css.js';
 import { styles as indigo } from './shared/tile/tile.indigo.css.js';
 
 const light = {
+  bootstrap: css`
+    ${bootstrap}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
   indigo: css`
     ${indigo}
   `,
 };
 
 const dark = {
+  bootstrap: css`
+    ${bootstrap}
+  `,
+  fluent: css`
+    ${fluent}
+  `,
   indigo: css`
     ${indigo}
   `,