refactor(thumbnail): make it mode less

core/src/components/slides/slides.tsx

@@ -1,7 +1,6 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
 
 import { Mode } from '../../interface.js';
-import { createThemedClasses } from '../../utils/theme.js';
 
 import { Swiper } from './vendor/swiper.js';
 
@@ -15,6 +14,7 @@ import { Swiper } from './vendor/swiper.js';
   shadow: true
 })
 export class Slides {
+
   private container!: HTMLElement;
   private swiper: any;
 
@@ -391,12 +391,6 @@ export class Slides {
     return { ...swiperOptions, ...this.options, ...eventOptions };
   }
 
-  hostData() {
-    return {
-      class: createThemedClasses(this.mode, 'slides')
-    };
-  }
-
   render() {
     return (
       <div class="swiper-container" ref={el => this.container = el as HTMLElement }>

core/src/components/thumbnail/thumbnail.ios.scss

@@ -1,10 +0,0 @@
-@import "./thumbnail";
-@import "./thumbnail.ios.vars";
-
-// iOS Thumbnail
-// --------------------------------------------------
-
-:host {
-  --size: #{$thumbnail-ios-width};
-  --border-radius: #{$thumbnail-ios-border-radius};
-}

core/src/components/thumbnail/thumbnail.ios.vars.scss

@@ -1,13 +0,0 @@
-@import "../../themes/ionic.globals.ios";
-
-// iOS Thumbnail
-// --------------------------------------------------
-
-/// @prop - Width of the thumbnail
-$thumbnail-ios-width:                   48px !default;
-
-/// @prop - Height of the thumbnail
-$thumbnail-ios-height:                  $thumbnail-ios-width !default;
-
-/// @prop - Border radius of the thumbnail
-$thumbnail-ios-border-radius:           0 !default;

core/src/components/thumbnail/thumbnail.md.scss

@@ -1,10 +0,0 @@
-@import "./thumbnail";
-@import "./thumbnail.md.vars";
-
-// Material Design Thumbnail
-// --------------------------------------------------
-
-:host {
-  --size: #{$thumbnail-md-width};
-  --border-radius: #{$thumbnail-md-border-radius};
-}

core/src/components/thumbnail/thumbnail.md.vars.scss

@@ -1,13 +0,0 @@
-@import "../../themes/ionic.globals.md";
-
-// Material Design Thumbnail
-// --------------------------------------------------
-
-/// @prop - Width of the thumbnail
-$thumbnail-md-width:                   48px !default;
-
-/// @prop - Height of the thumbnail
-$thumbnail-md-height:                  $thumbnail-md-width !default;
-
-/// @prop - Border radius of the thumbnail
-$thumbnail-md-border-radius:           0 !default;

core/src/components/thumbnail/thumbnail.scss

@@ -9,6 +9,8 @@
    * @prop --border-radius: Border radius of the thumbnail
    * @prop --size: Size of the thumbnail
    */
+  --size: 48px;
+  --border-radius: 0;
 
   @include border-radius(var(--border-radius));
 

core/src/components/thumbnail/thumbnail.tsx

@@ -1,25 +1,11 @@
 import { Component } from '@stencil/core';
 
-import { Mode } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
-
 @Component({
   tag: 'ion-thumbnail',
-  styleUrls: {
+  styleUrl: 'thumbnail.scss',
-    ios: 'thumbnail.ios.scss',
-    md: 'thumbnail.md.scss'
-  },
   shadow: true
 })
 export class Thumbnail {
-  mode!: Mode;
-
-  hostData() {
-    return {
-      class: createThemedClasses(this.mode, 'thumbnail')
-    };
-  }
-
   render() {
     return <slot></slot>;
   }