refactor(content): make styles modeless

core/src/components/content/content.ios.scss

@@ -1,12 +0,0 @@
-@import "./content";
-@import "./content.ios.vars";
-
-// iOS Content
-// --------------------------------------------------
-
-:host {
-  --hr-height: #{$hairlines-width};
-  --hr-background: #{$content-ios-horizontal-rule-background};
-
-  font-family: $content-ios-font-family;
-}

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

@@ -1,13 +0,0 @@
-@import "../../themes/ionic.globals.ios";
-
-// iOS Content
-// --------------------------------------------------
-
-/// @prop - Font family of the content
-$content-ios-font-family:                               $font-family-base !default;
-
-/// @prop - Alpha for the Horizontal Rule
-$content-ios-horizontal-rule-background-color-alpha:    .12 !default;
-
-/// @prop - Background for the Horizontal Rule
-$content-ios-horizontal-rule-background:                rgba(var(--ion-text-color-rgb, $text-color-rgb), $content-ios-horizontal-rule-background-color-alpha) !default;

core/src/components/content/content.md.scss

@@ -1,12 +0,0 @@
-@import "./content";
-@import "./content.md.vars";
-
-// Material Design Content
-// --------------------------------------------------
-
-:host {
-  --hr-background: #{$background-color-step-50};
-
-  font-family: $content-md-font-family;
-}
-

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

@@ -1,7 +0,0 @@
-@import "../../themes/ionic.globals.md";
-
-// Material Design Content
-// --------------------------------------------------
-
-/// @prop - Font family of the content
-$content-md-font-family:  $font-family-base !default;

core/src/components/content/content.scss

@@ -14,9 +14,6 @@
    * @prop --keyboard-offset: Keyboard offset of the Content
    * @prop --offset-top: Offset top of the Content
    * @prop --offset-bottom: Offset bottom of the Content
-   *
-   * @prop --hr-height: Height of the hr in the Content
-   * @prop --hr-background: Background of the hr in the Content
    */
   --background: #{$background-color};
   --color: #{$text-color};
@@ -41,12 +38,12 @@
   background: var(--background);
   color: var(--color);
 
+  font-family: $font-family-base;
+
   contain: layout size style;
 }
 
 :host(.ion-color) {
-  --hr-background: #{current-color(shade)};
-
   background: current-color(base);
   color: current-color(contrast);
 }
@@ -54,7 +51,6 @@
 // TODO we should remove outer-content in favor of a color
 :host(.outer-content) {
   --background: #{$background-color-step-50};
-  --hr-background: #{$background-color-step-150};
 }
 
 .inner-scroll {
@@ -100,9 +96,3 @@
 .overscroll::after {
   top: -1px;
 }
-
-::slotted(hr) {
-  height: var(--hr-height);
-
-  background: var(--hr-background);
-}

core/src/components/content/content.tsx

@@ -5,10 +5,7 @@ import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-content',
-  styleUrls: {
+  styleUrl: 'content.scss',
-    ios: 'content.ios.scss',
-    md: 'content.md.scss'
-  },
   shadow: true
 })
 export class Content {

core/src/components/reorder-group/reorder-group.tsx

@@ -1,8 +1,7 @@
 import { Component, Element, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Gesture, GestureDetail, Mode } from '../../interface';
+import { Gesture, GestureDetail } from '../../interface';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/haptic';
-import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-reorder-group',
@@ -10,7 +9,7 @@ import { createThemedClasses } from '../../utils/theme';
 })
 export class ReorderGroup {
 
-  private selectedItemEl: HTMLElement | undefined;
+  private selectedItemEl?: HTMLElement;
   private selectedItemHeight!: number;
   private lastToIndex!: number;
   private cachedHeights: number[] = [];
@@ -24,8 +23,6 @@ export class ReorderGroup {
   private containerTop = 0;
   private containerBottom = 0;
 
-  mode!: Mode;
-
   @State() activated = false;
 
   @Element() el!: HTMLElement;
@@ -251,8 +248,6 @@ export class ReorderGroup {
   hostData() {
     return {
       class: {
-        ...createThemedClasses(this.mode, 'reorder-group'),
-
         'reorder-enabled': !this.disabled,
         'reorder-list-active': this.activated,
       }