refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>

core/src/components/scroll/readme.md

@@ -28,7 +28,7 @@ The mode for component.
 
 boolean
 
-If true, the component will emit scroll events
+If true, the component will emit scroll events.
 
 
 ## Attributes
@@ -53,7 +53,7 @@ The mode for component.
 
 boolean
 
-If true, the component will emit scroll events
+If true, the component will emit scroll events.
 
 
 ## Events

core/src/components/scroll/scroll-interface.ts

@@ -0,0 +1,15 @@
+import { GestureDetail } from '../../interface';
+
+export interface ScrollBaseDetail {
+  isScrolling: boolean;
+}
+
+export interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
+  positions: number[];
+  scrollTop: number;
+  scrollLeft: number;
+}
+
+export interface ScrollCallback {
+  (detail?: ScrollDetail): boolean|void;
+}

core/src/components/scroll/scroll.ios.scss

@@ -1,22 +0,0 @@
-@import "./scroll";
-@import "./scroll.ios.vars";
-
-// iOS Content
-// --------------------------------------------------
-
-.outer-content .scroll-ios {
-  background: $content-ios-outer-background;
-}
-
-.scroll-ios {
-  font-family: $content-ios-font-family;
-
-  color: $text-ios-color;
-  background-color: $background-ios-color;
-}
-
-.scroll-ios hr {
-  height: $hairlines-width;
-
-  background-color: css-var($background-ios-color-value, background-ios-color, $content-ios-horizontal-rule-background-color-alpha);
-}

core/src/components/scroll/scroll.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-ios-base !default;
-
-/// @prop - Background color of the outer content
-$content-ios-outer-background:                          $background-ios-color-step-50 !default;
-
-/// @prop - Alpha for the Horizontal Rule
-$content-ios-horizontal-rule-background-color-alpha:    .25 !default;

core/src/components/scroll/scroll.md.scss

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

core/src/components/scroll/scroll.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-md-base !default;

core/src/components/scroll/scroll.scss

@@ -1,6 +1,6 @@
 @import "../../themes/ionic.globals";
 
-ion-scroll {
+:host {
   @include position(0, 0, 0, 0);
 
   position: absolute;
@@ -8,48 +8,27 @@ ion-scroll {
   display: block;
 
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
 
   contain: size style layout;
+}
 
-  .focus-input {
-    @include margin(0);
-    @include padding(0);
-
-    position: absolute;
-
-    width: 0;
-    height: 0;
-
-    border: 0;
-    background: none;
-    opacity: 0;
-
-    appearance: none;
-  }
-
-
-  &.overscroll::before,
-  &.overscroll::after {
-    position: absolute;
-
-    width: 1px;
-    height: 1px;
+:host(.overscroll)::before,
+:host(.overscroll)::after {
+  position: absolute;
 
-    content: "";
-  }
+  width: 1px;
+  height: 1px;
 
-  &.overscroll::before {
-    bottom: -1px;
-  }
+  content: "";
+}
 
-  &.overscroll::after {
-    top: -1px;
-  }
+:host(.overscroll)::before {
+  bottom: -1px;
+}
 
-  > .scroll-inner {
-    min-height: 100%;
-  }
+:host(.overscroll)::after {
+  top: -1px;
 }

core/src/components/scroll/scroll.tsx

@@ -1,15 +1,11 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Config, GestureDetail, Mode, QueueController } from '../../interface';
+import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+import { Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
+import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-scroll',
-  styleUrls: {
-    ios: 'scroll.ios.scss',
-    md: 'scroll.md.scss'
-  },
-  host: {
-    theme: 'scroll'
-  }
+  styleUrl: 'scroll.scss',
+  shadow: true
 })
 export class Scroll {
 
@@ -21,8 +17,8 @@ export class Scroll {
 
   @Element() el!: HTMLElement;
 
-  @Prop({ context: 'config'}) config!: Config;
-  @Prop({ context: 'queue' }) queue!: QueueController;
+  @Prop({ context: 'config' }) config!: Config;
+  @Prop({ context: 'queue' }) queue!: QueueApi;
   @Prop({ context: 'window' }) win!: Window;
 
   /** The mode for component. */
@@ -36,7 +32,7 @@ export class Scroll {
    */
   @Prop({ mutable: true }) forceOverscroll?: boolean;
 
-  /** If true, the component will emit scroll events */
+  /** If true, the component will emit scroll events. */
   @Prop() scrollEvents = false;
 
   /**
@@ -48,7 +44,7 @@ export class Scroll {
    * Emitted while scrolling. This event is disabled by default.
    * Look at the property: `scrollEvents`
    */
-  @Event({bubbles: false}) ionScroll!: EventEmitter<ScrollDetail>;
+  @Event() ionScroll!: EventEmitter<ScrollDetail>;
 
   /**
    * Emitted when the scroll has ended.
@@ -105,7 +101,7 @@ export class Scroll {
       this.queue.read(timeStamp => {
         this.queued = false;
         this.detail.event = ev;
-        updateScrollDetail(this.detail, this.el, timeStamp, didStart);
+        updateScrollDetail(this.detail, this.el, timeStamp!, didStart);
         this.ionScroll.emit(this.detail);
       });
     }
@@ -196,7 +192,8 @@ export class Scroll {
       if (easedT < 1) {
         // do not use DomController here
         // must use nativeRaf in order to fire in the next frame
-        self.queue.read(step);
+        // TODO: remove as any
+        self.queue.read(step as any);
 
       } else {
         stopScroll = true;
@@ -212,8 +209,9 @@ export class Scroll {
     // chill out for a frame first
     this.queue.write(() => {
       this.queue.write(timeStamp => {
-        startTime = timeStamp;
-        step(timeStamp);
+        // TODO: review stencilt type of timeStamp
+        startTime = timeStamp!;
+        step(timeStamp!);
       });
     });
 
@@ -251,18 +249,14 @@ export class Scroll {
   hostData() {
     return {
       class: {
+        ...createThemedClasses(this.mode, 'scroll'),
         overscroll: this.forceOverscroll
       }
     };
   }
 
   render() {
-    return [
-      // scroll-inner is used to keep custom user padding
-      <div class="scroll-inner">
-        <slot></slot>
-      </div>
-    ];
+    return <slot></slot>;
   }
 }
 
@@ -316,17 +310,3 @@ function updateScrollDetail(
     detail.velocityY = 0;
   }
 }
-
-export interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
-  positions: number[];
-  scrollTop: number;
-  scrollLeft: number;
-}
-
-export interface ScrollBaseDetail {
-  isScrolling: boolean;
-}
-
-export interface ScrollCallback {
-  (detail?: ScrollDetail): boolean|void;
-}