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/item-divider/item-divider.ios.scss

@@ -4,7 +4,7 @@
 // iOS Item Divider
 // --------------------------------------------------
 
-.item-divider-ios {
+:host {
   @include padding-horizontal($item-ios-divider-padding-start, null);
   @include safe-area-padding-horizontal($item-ios-divider-padding-start, null);
   @include border-radius(0);
@@ -14,11 +14,11 @@
   font-family: $item-ios-divider-font-family;
   font-size: $item-ios-divider-font-size;
 
-  color: $item-ios-divider-color;
-  background-color: $item-ios-divider-background;
+  --ion-color-base: #{$item-ios-divider-background};
+  --ion-color-contrast: #{$item-ios-divider-color};
 }
 
-.item-divider-ios .item-divider-inner {
+.item-divider-inner {
   @include padding-horizontal(null, $item-ios-divider-padding-end / 2);
 
   @media screen and (orientation: landscape) {
@@ -30,16 +30,16 @@
 // iOS Item Divider Slots
 // --------------------------------------------------
 
-.item-divider-ios [slot="start"] {
+:host([slot="start"]) {
   @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start);
 }
 
-.item-divider-ios [slot="end"] {
+:host([slot="end"]) {
   @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
 }
 
-.item-divider-ios ion-icon[slot="start"],
-.item-divider-ios ion-icon[slot="end"] {
+::slotted(ion-icon[slot="start"]),
+::slotted(ion-icon[slot="end"]) {
   @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
 }
 
@@ -47,24 +47,24 @@
 // iOS Item Divider Content
 // --------------------------------------------------
 
-.item-divider-ios h1 {
+::slotted(h1) {
   @include margin(0, 0, 2px);
 
   font-size: 24px;
   font-weight: normal;
 }
 
-.item-divider-ios h2 {
+::slotted(h2) {
   @include margin(0, 0, 2px);
 
   font-size: 17px;
   font-weight: normal;
 }
 
-.item-divider-ios h3,
-.item-divider-ios h4,
-.item-divider-ios h5,
-.item-divider-ios h6 {
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
   @include margin(0, 0, 3px);
 
   font-size: 14px;
@@ -72,7 +72,7 @@
   line-height: normal;
 }
 
-.item-divider-ios p {
+::slotted(p) {
   @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
 
   overflow: inherit;
@@ -83,34 +83,11 @@
   color: $item-ios-paragraph-text-color;
 }
 
-.item-divider-ios h2:last-child,
-.item-divider-ios h3:last-child,
-.item-divider-ios h4:last-child,
-.item-divider-ios h5:last-child,
-.item-divider-ios h6:last-child,
-.item-divider-ios p:last-child {
+::slotted(h2:last-child)
+::slotted(h3:last-child),
+::slotted(h4:last-child),
+::slotted(h5:last-child),
+::slotted(h6:last-child),
+::slotted(p:last-child) {
   @include margin(null, null, 0, null);
 }
-
-
-// Generate iOS Item Divider Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-  $color-base: ion-color($colors-ios, $color-name, base, ios);
-  $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
-  $color-shade: ion-color($colors-ios, $color-name, tint, ios);
-
-  .item-divider-ios-#{$color-name} {
-    color: $color-contrast;
-    background-color: $color-base;
-
-    p {
-      color: $color-contrast;
-    }
-
-    &.activated {
-      background-color: $color-shade;
-    }
-  }
-}

core/src/components/item-divider/item-divider.ios.vars.scss

@@ -6,16 +6,16 @@
 // --------------------------------------------------
 
 /// @prop - Font family of the item
-$item-ios-divider-font-family:            $font-family-ios-base !default;
+$item-ios-divider-font-family:            $font-family-base !default;
 
 /// @prop - Font size of the item
 $item-ios-divider-font-size:              17px !default;
 
 /// @prop - Background for the divider
-$item-ios-divider-background:             $background-ios-color-step-50 !default;
+$item-ios-divider-background:             $background-color-step-50 !default;
 
 /// @prop - Color for the divider
-$item-ios-divider-color:                  $text-ios-color-step-150 !default;
+$item-ios-divider-color:                  $text-color-step-150 !default;
 
 /// @prop - Padding start for the divider
 $item-ios-divider-padding-start:          $item-ios-padding-start !default;

core/src/components/item-divider/item-divider.md.scss

@@ -4,7 +4,7 @@
 // Material Design Item Divider
 // --------------------------------------------------
 
-.item-divider-md {
+:host {
   @include padding-horizontal($item-md-divider-padding-start, null);
 
   border-bottom: $item-md-divider-border-bottom;
@@ -12,11 +12,11 @@
   font-family: $item-md-divider-font-family;
   font-size: $item-md-divider-font-size;
 
-  color: $item-md-divider-color;
-  background-color: $item-md-divider-background;
+  --ion-color-base: #{$item-md-divider-background};
+  --ion-color-contrast: #{$item-md-divider-color};
 }
 
-.item-divider-md .item-divider-inner {
+.item-divider-inner {
   @include padding-horizontal(null, ($item-md-divider-padding-end / 2));
 }
 
@@ -24,28 +24,29 @@
 // Material Design Item Divider Slots
 // --------------------------------------------------
 
-.item-divider-md [slot="start"],
-.item-divider-md [slot="end"] {
+:host([slot="start"]),
+:host([slot="end"]) {
   @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
 }
 
-.item-divider-md ion-icon[slot="start"],
-.item-divider-md ion-icon[slot="end"] {
+::slotted(ion-icon[slot="start"]),
+::slotted(ion-icon[slot="end"]) {
   @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
 }
 
-.item-divider-md ion-icon[slot="start"] + .item-inner,
-.item-divider-md ion-icon[slot="start"] + .item-interactive {
-  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
-}
+// TODO
+// .item-divider-md ion-icon[slot="start"] + .item-inner,
+// .item-divider-md ion-icon[slot="start"] + .item-interactive {
+//   @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
+// }
 
-.item-divider-md ion-avatar[slot="start"],
-.item-divider-md ion-thumbnail[slot="start"] {
+::slotted(ion-avatar[slot="start"]),
+::slotted(ion-thumbnail[slot="start"]) {
   @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
 }
 
-.item-divider-md ion-avatar[slot="end"],
-.item-divider-md ion-thumbnail[slot="end"] {
+::slotted(ion-avatar[slot="end"]),
+::slotted(ion-thumbnail[slot="end"]) {
   @include margin(($item-md-padding-end / 2));
 }
 
@@ -53,24 +54,21 @@
 // Material Design Item Divider Content
 // --------------------------------------------------
 
-.item-divider-md h1 {
+::slotted(h1) {
   @include margin(0, 0, 2px);
 
   font-size: 24px;
   font-weight: normal;
 }
 
-.item-divider-md h2 {
+::slotted(h2) {
   @include margin(2px, 0);
 
   font-size: 16px;
   font-weight: normal;
 }
 
-.item-divider-md h3,
-.item-divider-md h4,
-.item-divider-md h5,
-.item-divider-md h6 {
+::slotted(h3, h4, h5, h6) {
   @include margin(2px, 0);
 
   font-size: 14px;
@@ -78,7 +76,7 @@
   line-height: normal;
 }
 
-.item-divider-md p {
+::slotted(p) {
   @include margin(0, 0, 2px);
 
   overflow: inherit;
@@ -88,26 +86,3 @@
   text-overflow: inherit;
   color: $item-md-paragraph-text-color;
 }
-
-
-// Generate Material Design Item Divider Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-md {
-  $color-base: ion-color($colors-md, $color-name, base, md);
-  $color-contrast: ion-color($colors-md, $color-name, contrast, md);
-  $color-shade: ion-color($colors-md, $color-name, tint, md);
-
-  .item-divider-md-#{$color-name} {
-    color: $color-contrast;
-    background-color: $color-base;
-
-    p {
-      color: $color-contrast;
-    }
-
-    &.activated {
-      background-color: $color-shade;
-    }
-  }
-}

core/src/components/item-divider/item-divider.md.vars.scss

@@ -6,13 +6,13 @@
 // --------------------------------------------------
 
 /// @prop - Color for the divider
-$item-md-divider-color:              $text-md-color-step-600 !default;
+$item-md-divider-color:              $text-color-step-600 !default;
 
 /// @prop - Background for the divider
-$item-md-divider-background:         $background-md-color !default;
+$item-md-divider-background:         $background-color !default;
 
 /// @prop - Font family for the divider
-$item-md-divider-font-family:        $font-family-md-base !default;
+$item-md-divider-font-family:        $font-family-base !default;
 
 /// @prop - Font size for the divider
 $item-md-divider-font-size:          14px !default;

core/src/components/item-divider/item-divider.scss

@@ -4,7 +4,7 @@
 // Item Divider
 // --------------------------------------------------
 
-ion-item-divider {
+:host {
   @include font-smoothing();
   @include margin(0);
   @include padding(0);
@@ -21,9 +21,12 @@ ion-item-divider {
   width: 100%;
 
   min-height: $item-divider-min-height;
+
+  color: #{current-color(contrast)};
+  background-color: #{current-color(base)};
 }
 
-ion-item-divider[sticky] {
+:host([sticky]) {
   position: sticky;
   top: 0;
 }

core/src/components/item-divider/item-divider.tsx

@@ -1,5 +1,6 @@
 import { Component, Element, Prop } from '@stencil/core';
 import { Color, Mode } from '../../interface';
+import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-item-divider',
@@ -7,11 +8,10 @@ import { Color, Mode } from '../../interface';
     ios: 'item-divider.ios.scss',
     md: 'item-divider.md.scss'
   },
-  host: {
-    theme: 'item-divider'
-  }
+  shadow: true
 })
 export class ItemDivider {
+
   @Element() el!: HTMLElement;
 
   /**
@@ -36,12 +36,18 @@ export class ItemDivider {
     }
   }
 
+  hostData() {
+    return {
+      class: createColorClasses(this.color)
+    };
+  }
+
   render() {
     return [
       <slot name="start" />,
       <div class="item-divider-inner">
         <div class="item-divider-wrapper">
-          <slot />
+          <slot></slot>
         </div>
         <slot name="end" />
       </div>

core/src/components/item-divider/test/standalone/index.html

@@ -6,6 +6,7 @@
   <title>Item Divider - Standalone</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
 <body>