fix(components/tiles): remove ::ng-deep from tile styles (#2527)

libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content-section.component.scss

@@ -1,8 +1,32 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
 
+:host:not(:last-child) .sky-tile-content-section {
+ @include mixins.sky-border(light);
+}
+
+:host-context(.sky-theme-modern sky-tile-content) {
+ .sky-tile-content-section {
+ border-bottom: 1px dotted $sky-theme-modern-color-gray-30;
+ }
+
+ :host:first-child {
+ .sky-tile-content-section {
+ margin-top: $sky-space-lg;
+ }
+ }
+
+ :host:last-child {
+ .sky-tile-content-section {
+ padding-bottom: 0;
+ border-bottom: none;
+ }
+ }
+}
+
 @include mixins.sky-theme-modern {
  .sky-tile-content-section {
+ border-bottom: 1px dotted $sky-theme-modern-color-gray-30;
  padding: $sky-space-lg 0;
  }
 }

libs/components/tiles/src/lib/modules/tiles/tile-content/tile-content.component.ts

@@ -6,7 +6,6 @@ import { Component } from '@angular/core';
 @Component({
  standalone: true,
  selector: 'sky-tile-content',
- styleUrls: ['./tile-content.component.scss'],
  templateUrl: 'tile-content.component.html',
 })
 export class SkyTileContentComponent {}

libs/components/tiles/src/lib/modules/tiles/tile-dashboard/tile-dashboard.component.scss

@@ -12,20 +12,9 @@
  .sky-tile-dashboard-layout-single {
  display: block;
  }
-
- /* NOTE: This style is here as we only want it when inside a tile dashboard */
- .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,
- .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile {
- margin-bottom: 0;
- }
 }
 
 :host-context(.sky-tile-dashboard-gt-xs) {
- .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,
- .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile {
- margin-bottom: $sky-margin-double;
- }
-
  :host-context(.sky-theme-default) {
  padding-top: $sky-padding-double;
  }
@@ -53,12 +42,3 @@
 :host-context(.sky-theme-default) {
  background-color: $sky-background-color-neutral-light;
 }
-
-@include mixins.sky-theme-modern {
- :host-context(.sky-tile-dashboard-gt-xs) {
- .sky-tile-dashboard-layout-single ::ng-deep .sky-tile,
- .sky-tile-dashboard-layout-multi ::ng-deep .sky-tile {
- margin-bottom: $sky-theme-modern-space-xl;
- }
- }
-}

libs/components/tiles/src/lib/modules/tiles/tile/tile.component.scss

@@ -6,6 +6,28 @@
  margin-bottom: $sky-margin-double;
 }
 
+/* NOTE: This style is here as we only want it when inside a tile dashboard */
+:host-context(
+ .sky-tile-dashboard-layout-single,
+ .sky-tile-dashboard-layout-multi
+ )
+ .sky-tile {
+ margin-bottom: 0;
+}
+
+:host-context(.sky-tile-dashboard-gt-xs) {
+ :host-context(.sky-tile-dashboard-layout-single),
+ :host-context(.sky-tile-dashboard-layout-multi) {
+ .sky-tile {
+ margin-bottom: $sky-margin-double;
+ }
+ }
+
+ :host-context(.sky-theme-default) {
+ padding-top: $sky-padding-double;
+ }
+}
+
 .sky-tile-header {
  border-color: $sky-border-color-neutral-medium;
  border-style: solid solid none;
@@ -108,25 +130,6 @@
  font-size: 16px;
  }
 
- .sky-tile-content {
- ::ng-deep .sky-tile-content-section {
- border-bottom: 1px dotted $sky-theme-modern-color-gray-30;
- }
-
- ::ng-deep sky-tile-content-section:first-child {
- .sky-tile-content-section {
- margin-top: $sky-space-lg;
- }
- }
-
- ::ng-deep sky-tile-content-section:last-child {
- .sky-tile-content-section {
- padding-bottom: 0;
- border-bottom: none;
- }
- }
- }
-
  @include mixins.sky-host-responsive-container-xs-min() {
  .sky-tile {
  border-radius: 0px;
@@ -139,3 +142,12 @@
  }
  }
 }
+
+:host-context(.sky-theme-modern .sky-tile-dashboard-gt-xs) {
+ :host-context(.sky-tile-dashboard-layout-single),
+ :host-context(.sky-tile-dashboard-layout-multi) {
+ .sky-tile {
+ margin-bottom: $sky-theme-modern-space-xl;
+ }
+ }
+}