diff --git a/core/api.txt b/core/api.txt
index 4ae8c28d0c..d43097b628 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -26,7 +26,15 @@ ion-action-sheet,event,ionActionSheetDidPresent,void,true
 ion-action-sheet,event,ionActionSheetDidUnload,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
+ion-action-sheet,css-prop,--background
+ion-action-sheet,css-prop,--background-activated
+ion-action-sheet,css-prop,--background-selected
+ion-action-sheet,css-prop,--color
+ion-action-sheet,css-prop,--height
+ion-action-sheet,css-prop,--max-height
 ion-action-sheet,css-prop,--max-width
+ion-action-sheet,css-prop,--min-height
+ion-action-sheet,css-prop,--min-width
 ion-action-sheet,css-prop,--width
 
 ion-alert-controller
@@ -59,8 +67,12 @@ ion-alert,event,ionAlertDidUnload,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail,true
 ion-alert,event,ionAlertWillPresent,void,true
 ion-alert,css-prop,--background
+ion-alert,css-prop,--height
 ion-alert,css-prop,--max-height
+ion-alert,css-prop,--max-width
+ion-alert,css-prop,--min-height
 ion-alert,css-prop,--min-width
+ion-alert,css-prop,--width
 
 ion-anchor
 ion-anchor,prop,color,string | undefined,undefined,false
@@ -152,11 +164,6 @@ ion-button,css-prop,--box-shadow
 ion-button,css-prop,--color
 ion-button,css-prop,--color-activated
 ion-button,css-prop,--color-focused
-ion-button,css-prop,--height
-ion-button,css-prop,--margin-bottom
-ion-button,css-prop,--margin-end
-ion-button,css-prop,--margin-start
-ion-button,css-prop,--margin-top
 ion-button,css-prop,--opacity
 ion-button,css-prop,--padding-bottom
 ion-button,css-prop,--padding-end
@@ -164,7 +171,6 @@ ion-button,css-prop,--padding-start
 ion-button,css-prop,--padding-top
 ion-button,css-prop,--ripple-color
 ion-button,css-prop,--transition
-ion-button,css-prop,--width
 
 ion-buttons
 
@@ -210,9 +216,8 @@ ion-checkbox,css-prop,--border-radius
 ion-checkbox,css-prop,--border-style
 ion-checkbox,css-prop,--border-width
 ion-checkbox,css-prop,--checkmark-color
-ion-checkbox,css-prop,--height
+ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
-ion-checkbox,css-prop,--width
 
 ion-chip
 ion-chip,prop,color,string | undefined,undefined,false
@@ -335,18 +340,12 @@ ion-fab-button,css-prop,--box-shadow
 ion-fab-button,css-prop,--color
 ion-fab-button,css-prop,--color-activated
 ion-fab-button,css-prop,--color-focused
-ion-fab-button,css-prop,--height
-ion-fab-button,css-prop,--margin-bottom
-ion-fab-button,css-prop,--margin-end
-ion-fab-button,css-prop,--margin-start
-ion-fab-button,css-prop,--margin-top
 ion-fab-button,css-prop,--padding-bottom
 ion-fab-button,css-prop,--padding-end
 ion-fab-button,css-prop,--padding-start
 ion-fab-button,css-prop,--padding-top
 ion-fab-button,css-prop,--ripple-color
 ion-fab-button,css-prop,--transition
-ion-fab-button,css-prop,--width
 
 ion-fab-list
 ion-fab-list,prop,activated,boolean,false,false
@@ -563,6 +562,14 @@ ion-loading,event,ionLoadingDidPresent,void,true
 ion-loading,event,ionLoadingDidUnload,void,true
 ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail,true
 ion-loading,event,ionLoadingWillPresent,void,true
+ion-loading,css-prop,--background
+ion-loading,css-prop,--height
+ion-loading,css-prop,--max-height
+ion-loading,css-prop,--max-width
+ion-loading,css-prop,--min-height
+ion-loading,css-prop,--min-width
+ion-loading,css-prop,--spinner-color
+ion-loading,css-prop,--width
 
 ion-menu-button
 ion-menu-button,prop,autoHide,boolean,true,false
@@ -608,8 +615,12 @@ ion-menu,event,ionDidOpen,void,true
 ion-menu,event,ionWillClose,void,true
 ion-menu,event,ionWillOpen,void,true
 ion-menu,css-prop,--background
+ion-menu,css-prop,--height
+ion-menu,css-prop,--max-height
+ion-menu,css-prop,--max-width
+ion-menu,css-prop,--min-height
+ion-menu,css-prop,--min-width
 ion-menu,css-prop,--width
-ion-menu,css-prop,--width-small
 
 ion-modal-controller
 ion-modal-controller,method,create,create<T extends ComponentRef>(opts: ModalOptions<T>) => Promise<HTMLIonModalElement>
@@ -643,6 +654,10 @@ ion-modal,css-prop,--border-radius
 ion-modal,css-prop,--border-style
 ion-modal,css-prop,--border-width
 ion-modal,css-prop,--height
+ion-modal,css-prop,--max-height
+ion-modal,css-prop,--max-width
+ion-modal,css-prop,--min-height
+ion-modal,css-prop,--min-width
 ion-modal,css-prop,--width
 
 ion-nav-pop
@@ -713,6 +728,18 @@ ion-picker,event,ionPickerDidPresent,void,true
 ion-picker,event,ionPickerDidUnload,void,true
 ion-picker,event,ionPickerWillDismiss,OverlayEventDetail,true
 ion-picker,event,ionPickerWillPresent,void,true
+ion-picker,css-prop,--background
+ion-picker,css-prop,--background-rgb
+ion-picker,css-prop,--border-color
+ion-picker,css-prop,--border-radius
+ion-picker,css-prop,--border-style
+ion-picker,css-prop,--border-width
+ion-picker,css-prop,--height
+ion-picker,css-prop,--max-height
+ion-picker,css-prop,--max-width
+ion-picker,css-prop,--min-height
+ion-picker,css-prop,--min-width
+ion-picker,css-prop,--width
 
 ion-popover-controller
 ion-popover-controller,method,create,create<T extends ComponentRef>(opts: PopoverOptions<T>) => Promise<HTMLIonPopoverElement>
@@ -742,6 +769,14 @@ ion-popover,event,ionPopoverDidPresent,void,true
 ion-popover,event,ionPopoverDidUnload,void,true
 ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true
 ion-popover,event,ionPopoverWillPresent,void,true
+ion-popover,css-prop,--background
+ion-popover,css-prop,--box-shadow
+ion-popover,css-prop,--height
+ion-popover,css-prop,--max-height
+ion-popover,css-prop,--max-width
+ion-popover,css-prop,--min-height
+ion-popover,css-prop,--min-width
+ion-popover,css-prop,--width
 
 ion-progress-bar
 ion-progress-bar,prop,buffer,number,1,false
@@ -774,10 +809,6 @@ ion-radio,event,ionRadioDidUnload,void,true
 ion-radio,event,ionSelect,CheckedInputChangeEvent,true
 ion-radio,css-prop,--color
 ion-radio,css-prop,--color-checked
-ion-radio,css-prop,--height
-ion-radio,css-prop,--inner-height
-ion-radio,css-prop,--inner-width
-ion-radio,css-prop,--width
 
 ion-range
 ion-range,prop,color,string | undefined,undefined,false
@@ -1150,6 +1181,12 @@ ion-toast,css-prop,--border-width
 ion-toast,css-prop,--box-shadow
 ion-toast,css-prop,--button-color
 ion-toast,css-prop,--color
+ion-toast,css-prop,--height
+ion-toast,css-prop,--max-height
+ion-toast,css-prop,--max-width
+ion-toast,css-prop,--min-height
+ion-toast,css-prop,--min-width
+ion-toast,css-prop,--width
 
 ion-toggle
 ion-toggle,prop,checked,boolean,false,false
diff --git a/core/src/components/action-sheet/action-sheet.ios.scss b/core/src/components/action-sheet/action-sheet.ios.scss
index 59568475bf..366375c773 100644
--- a/core/src/components/action-sheet/action-sheet.ios.scss
+++ b/core/src/components/action-sheet/action-sheet.ios.scss
@@ -5,6 +5,10 @@
 // --------------------------------------------------
 
 :host {
+  --background: #{$action-sheet-ios-background-color};
+  --background-selected: #{var(--background, $action-sheet-ios-button-background-selected)};
+  --background-activated: #{$action-sheet-ios-button-background-activated};
+
   text-align: $action-sheet-ios-text-align;
 }
 
@@ -27,8 +31,6 @@
 .action-sheet-group {
   @include border-radius($action-sheet-ios-border-radius);
   @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
-
-  background: $action-sheet-ios-background-color;
 }
 
 .action-sheet-group:first-child {
@@ -57,7 +59,7 @@
 
   border-bottom: $action-sheet-ios-title-border-width $action-sheet-ios-title-border-style $action-sheet-ios-title-border-color;
 
-  color: $action-sheet-ios-title-color;
+  color: var(--color, $action-sheet-ios-title-color);
 
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
@@ -83,8 +85,8 @@
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-border-color;
 
-  background: $action-sheet-ios-button-background;
-  color: $action-sheet-ios-button-text-color;
+  background: transparent;
+  color: var(--color, $action-sheet-ios-button-text-color);
 
   font-size: $action-sheet-ios-button-font-size;
 
@@ -104,15 +106,11 @@
 .action-sheet-button.activated {
   @include margin(-$action-sheet-ios-button-border-width, null, null, null);
 
-  border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
-  border-bottom-color: $action-sheet-ios-button-background-activated;
-
-  background: $action-sheet-ios-button-background-activated;
+  border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style var(--background-activated);
+  border-bottom-color: var(--background-activated);
 }
 
 .action-sheet-selected {
-  background: $action-sheet-ios-button-background-selected;
-
   font-weight: bold;
 }
 
@@ -121,7 +119,7 @@
 }
 
 .action-sheet-cancel {
-  background: $action-sheet-ios-button-cancel-background;
+  background: var(--background-selected);
 
   font-weight: $action-sheet-ios-button-cancel-font-weight;
 }
diff --git a/core/src/components/action-sheet/action-sheet.md.scss b/core/src/components/action-sheet/action-sheet.md.scss
index f87d7931e8..79d577d9b5 100644
--- a/core/src/components/action-sheet/action-sheet.md.scss
+++ b/core/src/components/action-sheet/action-sheet.md.scss
@@ -4,12 +4,18 @@
 // Material Design Action Sheet Title
 // -----------------------------------------
 
+:host {
+  --background: #{$action-sheet-md-background-color};
+  --background-selected: #{var(--background, $action-sheet-md-button-background-selected)};
+  --background-activated: var(--background);
+}
+
 .action-sheet-title {
   @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
 
   height: $action-sheet-md-title-height;
 
-  color: $action-sheet-md-title-color;
+  color: var(--color, $action-sheet-md-title-color);
 
   font-size: $action-sheet-md-title-font-size;
 
@@ -26,10 +32,6 @@
 // Material Design Action Sheet Group
 // -----------------------------------------
 
-.action-sheet-group {
-  background-color: $action-sheet-md-background-color;
-}
-
 .action-sheet-group:first-child {
   @include padding($action-sheet-md-padding-top, null, null, null);
 }
@@ -49,8 +51,8 @@
 
   height: $action-sheet-md-button-height;
 
-  background: $action-sheet-md-button-background;
-  color: $action-sheet-md-button-text-color;
+  background: transparent;
+  color: var(--color, $action-sheet-md-button-text-color);
 
   font-size: $action-sheet-md-button-font-size;
 
@@ -64,7 +66,7 @@
   @include padding(null, null, 4px, null);
   @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
 
-  color: $action-sheet-md-icon-color;
+  color: var(--color, $action-sheet-md-icon-color);
 
   font-size: $action-sheet-md-icon-font-size;
 }
@@ -74,7 +76,5 @@
 }
 
 .action-sheet-selected {
-  background-color: $action-sheet-md-button-background-selected;
-
   font-weight: bold;
 }
diff --git a/core/src/components/action-sheet/action-sheet.scss b/core/src/components/action-sheet/action-sheet.scss
index 62684b643a..d310d03c10 100644
--- a/core/src/components/action-sheet/action-sheet.scss
+++ b/core/src/components/action-sheet/action-sheet.scss
@@ -5,11 +5,26 @@
 
 :host {
   /**
+   * @prop --background: Background of the action sheet group
+   * @prop --background-activated: Background of the activated action sheet button
+   * @prop --background-selected: Background of the selected action sheet button
+   * @prop --color: Color of the action sheet text
+   *
+   * @prop --min-width: Minimum width of the action sheet
    * @prop --width: Width of the action sheet
    * @prop --max-width: Maximum width of the action sheet
+   *
+   * @prop --min-height: Minimum height of the action sheet
+   * @prop --height: height of the action sheet
+   * @prop --max-height: Maximum height of the action sheet
    */
+  --color: initial;
+  --min-width: auto;
   --width: #{$action-sheet-width};
   --max-width: #{$action-sheet-max-width};
+  --min-height: auto;
+  --height: auto;
+  --max-height: auto;
 
   @include font-smoothing();
   @include position(0, 0, 0, 0);
@@ -25,7 +40,7 @@
 }
 
 .action-sheet-wrapper {
-  @include position(0, 0, 0, 0);
+  @include position(null, 0, 0, 0);
   @include margin(auto);
   @include transform(translate3d(0, 100%, 0));
 
@@ -33,14 +48,19 @@
   position: absolute;
 
   width: var(--width);
+  min-width: var(--min-width);
   max-width: var(--max-width);
 
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+
   z-index: $z-index-overlay-wrapper;
   pointer-events: none;
 }
 
 .action-sheet-button {
-  width: var(--width);
+  width: 100%;
 
   border: 0;
 
@@ -49,6 +69,10 @@
   font-family: inherit;
 }
 
+.action-sheet-button.activated {
+  background: var(--background-activated);
+}
+
 .action-sheet-button-inner {
   display: flex;
 
@@ -77,6 +101,8 @@
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   pointer-events: all;
+
+  background: var(--background);
 }
 
 .action-sheet-group::-webkit-scrollbar {
@@ -88,3 +114,7 @@
 
   overflow: hidden;
 }
+
+.action-sheet-selected {
+  background: var(--background-selected);
+}
\ No newline at end of file
diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index d396873624..cd9dff9e89 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -205,10 +205,18 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name          | Description                       |
-| ------------- | --------------------------------- |
-| `--max-width` | Maximum width of the action sheet |
-| `--width`     | Width of the action sheet         |
+| Name                     | Description                                     |
+| ------------------------ | ----------------------------------------------- |
+| `--background`           | Background of the action sheet group            |
+| `--background-activated` | Background of the activated action sheet button |
+| `--background-selected`  | Background of the selected action sheet button  |
+| `--color`                | Color of the action sheet text                  |
+| `--height`               | height of the action sheet                      |
+| `--max-height`           | Maximum height of the action sheet              |
+| `--max-width`            | Maximum width of the action sheet               |
+| `--min-height`           | Minimum height of the action sheet              |
+| `--min-width`            | Minimum width of the action sheet               |
+| `--width`                | Width of the action sheet                       |
 
 
 ----------------------------------------------
diff --git a/core/src/components/action-sheet/test/custom-css/index.html b/core/src/components/action-sheet/test/custom-css/index.html
deleted file mode 100644
index 9ac9783391..0000000000
--- a/core/src/components/action-sheet/test/custom-css/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Action Sheet - Custom CSS Class</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
-  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
-  <script src="../../../../../dist/ionic.js"></script>
-</head>
-
-<body>
-  <ion-app>
-
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Action Sheet - Custom CSS Class</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content padding>
-      <ion-action-sheet-controller></ion-action-sheet-controller>
-
-      <ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
-
-    </ion-content>
-
-    <style>
-      :root {
-        --ion-safe-area-top: 20px;
-        --ion-safe-area-bottom: 40px;
-      }
-      .my-custom-class {
-        --max-width: 300px;
-      }
-    </style>
-
-  </ion-app>
-
-  <script>
-    async function presentWithCssClass() {
-      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      await actionSheetController.componentOnReady();
-      const actionSheetElement = await actionSheetController.create({
-        header: "Custom Css Class",
-        cssClass: "my-class my-custom-class",
-        buttons: [
-          {
-            text: 'Test',
-            role: 'test',
-            cssClass: 'my-cancel-button my-custom-button customClass',
-            handler: () => {
-              console.log('Cancel clicked');
-            }
-          }
-        ]
-      });
-      await actionSheetElement.present();
-    }
-
-  </script>
-</body>
-
-</html>
diff --git a/core/src/components/action-sheet/test/custom-css/e2e.ts b/core/src/components/action-sheet/test/custom/e2e.ts
similarity index 64%
rename from core/src/components/action-sheet/test/custom-css/e2e.ts
rename to core/src/components/action-sheet/test/custom/e2e.ts
index ac16ecc40d..cdb9346a8f 100644
--- a/core/src/components/action-sheet/test/custom-css/e2e.ts
+++ b/core/src/components/action-sheet/test/custom/e2e.ts
@@ -1,11 +1,11 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('action-sheet: cssClass', async () => {
+test('action-sheet: custom', async () => {
   const page = await newE2EPage({
-    url: `/src/components/action-sheet/test/custom-css?ionic:_testing=true`
+    url: `/src/components/action-sheet/test/custom?ionic:_testing=true`
   });
 
-  const presentBtn = await page.find('#cssClass');
+  const presentBtn = await page.find('#custom');
   await presentBtn.click();
 
   const actionSheet = await page.find('ion-action-sheet');
diff --git a/core/src/components/action-sheet/test/custom/index.html b/core/src/components/action-sheet/test/custom/index.html
new file mode 100644
index 0000000000..290b8b5840
--- /dev/null
+++ b/core/src/components/action-sheet/test/custom/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Action Sheet - Custom CSS Class</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Action Sheet - Custom CSS Class</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding>
+      <ion-action-sheet-controller></ion-action-sheet-controller>
+
+      <ion-button expand="block" id="custom" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
+
+      <div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </ion-content>
+
+    <style>
+      :root {
+        --ion-safe-area-top: 20px;
+        --ion-safe-area-bottom: 40px;
+      }
+
+      .my-color-class {
+        --background: #292929;
+        --background-selected: #222222;
+
+        --color: #dfdfdf;;
+      }
+
+      .my-custom-class {
+        --max-width: 300px;
+        --height: 325px;
+      }
+    </style>
+
+  </ion-app>
+
+  <script>
+    async function presentWithCssClass() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        header: "Custom Css Class",
+        cssClass: "my-color-class my-custom-class",
+        buttons: [
+          {
+            text: 'Add to Favorites',
+            icon: 'star',
+            cssClass: 'my-custom-button customClass activated',
+            handler: () => {
+              console.log('Add to Favorites clicked');
+            }
+          },
+          {
+            text: 'Duplicate',
+            icon: 'copy',
+            handler: () => {
+              console.log('Duplicate clicked');
+            }
+          },
+          {
+            text: 'Move to Album',
+            icon: 'move',
+            handler: () => {
+              console.log('Move to Album clicked');
+            }
+          },
+          {
+            text: 'Delete',
+            icon: 'trash',
+            role: 'destructive',
+            handler: () => {
+              console.log('Delete clicked');
+            }
+          },
+          {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Delete clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/alert/alert.scss b/core/src/components/alert/alert.scss
index 36f0a76bb6..e4cd5f5007 100644
--- a/core/src/components/alert/alert.scss
+++ b/core/src/components/alert/alert.scss
@@ -6,10 +6,19 @@
 :host {
   /**
    * @prop --background: Background of the alert
+   *
    * @prop --min-width: Minimum width of the alert
+   * @prop --width: Width of the alert
+   * @prop --max-width: Maximum width of the alert
+   *
+   * @prop --min-height: Minimum height of the alert
+   * @prop --height: Height of the alert
    * @prop --max-height: Maximum height of the alert
    */
   --min-width: #{$alert-min-width};
+  --width: auto;
+  --min-height: auto;
+  --height: auto;
   --max-height: #{$alert-max-height};
 
   @include font-smoothing();
@@ -40,9 +49,12 @@
 
   flex-direction: column;
 
+  width: var(--width);
   min-width: var(--min-width);
   max-width: var(--max-width);
 
+  height: var(--height);
+  min-height: var(--min-height);
   max-height: var(--max-height);
 
   background: var(--background);
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index e22d8abec6..dbca70a6a3 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -613,8 +613,12 @@ Type: `Promise<void>`
 | Name           | Description                 |
 | -------------- | --------------------------- |
 | `--background` | Background of the alert     |
+| `--height`     | Height of the alert         |
 | `--max-height` | Maximum height of the alert |
+| `--max-width`  | Maximum width of the alert  |
+| `--min-height` | Minimum height of the alert |
 | `--min-width`  | Minimum width of the alert  |
+| `--width`      | Width of the alert          |
 
 
 ----------------------------------------------
diff --git a/core/src/components/back-button/test/standalone/index.html b/core/src/components/back-button/test/standalone/index.html
index ca75b67f0f..5ac1518253 100644
--- a/core/src/components/back-button/test/standalone/index.html
+++ b/core/src/components/back-button/test/standalone/index.html
@@ -102,8 +102,9 @@
     }
 
     .wide {
-      --width: 200px;
       --background: lightblue;
+
+      width: 200px;
     }
 
     .large {
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index 4fdf99a16d..fe755155ee 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -7,17 +7,16 @@
 
 :host {
   --border-radius: #{$button-ios-border-radius};
-  --margin-top: #{$button-ios-margin-top};
-  --margin-bottom: #{$button-ios-margin-bottom};
-  --margin-start: #{$button-ios-margin-start};
-  --margin-end: #{$button-ios-margin-end};
   --padding-top: #{$button-ios-padding-top};
   --padding-bottom: #{$button-ios-padding-bottom};
   --padding-start: #{$button-ios-padding-start};
   --padding-end: #{$button-ios-padding-end};
-  --height: #{$button-ios-height};
   --transition: background-color, opacity 100ms linear;
 
+  @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
+
+  height: #{$button-ios-height};
+
   font-size: #{$button-ios-font-size};
   font-weight: #{$button-ios-font-weight};
 
@@ -89,7 +88,8 @@
   --padding-start: #{$button-ios-large-padding-start};
   --padding-end: #{$button-ios-large-padding-end};
   --padding-bottom: #{$button-ios-large-padding-bottom};
-  --height: #{$button-ios-large-height};
+
+  height: #{$button-ios-large-height};
 
   font-size: #{$button-ios-large-font-size};
 }
@@ -100,7 +100,8 @@
   --padding-start: #{$button-ios-small-padding-start};
   --padding-end: #{$button-ios-small-padding-end};
   --padding-bottom: #{$button-ios-small-padding-bottom};
-  --height: #{$button-ios-small-height};
+
+  height: #{$button-ios-small-height};
 
   font-size: #{$button-ios-small-font-size};
 }
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
index cbc821fefd..e4d37335ab 100644
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -6,19 +6,18 @@
 
 :host {
   --border-radius: #{$button-md-border-radius};
-  --margin-top: #{$button-md-margin-top};
-  --margin-bottom: #{$button-md-margin-bottom};
-  --margin-start: #{$button-md-margin-start};
-  --margin-end: #{$button-md-margin-end};
   --padding-top: #{$button-md-padding-top};
   --padding-bottom: #{$button-md-padding-bottom};
   --padding-start: #{$button-md-padding-start};
   --padding-end: #{$button-md-padding-end};
-  --height: #{$button-md-height};
   --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
                 background-color 15ms linear,
                 color 15ms linear;
 
+  @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
+
+  height: #{$button-md-height};
+
   font-size: #{$button-md-font-size};
   font-weight: #{$button-md-font-weight};
 
@@ -88,7 +87,8 @@
   --padding-start: #{$button-md-large-padding-start};
   --padding-end: #{$button-md-large-padding-end};
   --padding-bottom: #{$button-md-large-padding-bottom};
-  --height: #{$button-md-large-height};
+
+  height: #{$button-md-large-height};
 
   font-size: #{$button-md-large-font-size};
 }
@@ -98,7 +98,8 @@
   --padding-start: #{$button-md-small-padding-start};
   --padding-end: #{$button-md-small-padding-end};
   --padding-bottom: #{$button-md-small-padding-bottom};
-  --height: #{$button-md-small-height};
+
+  height: #{$button-md-small-height};
 
   font-size: #{$button-md-small-font-size};
 }
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index ef03bf27ac..a16aafab5a 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -13,9 +13,6 @@
    * @prop --color-activated: Text color of the button when activated
    * @prop --color-focused: Text color of the button when focused
    *
-   * @prop --width: Width of the button
-   * @prop --height: Height of the button
-   *
    * @prop --transition: Transition of the button
    *
    * @prop --border-radius: Border radius of the button
@@ -28,17 +25,11 @@
    * @prop --box-shadow: Box shadow of the button
    * @prop --opacity: Opacity of the button
    *
-   * @prop --margin-top: Margin top of the button
-   * @prop --margin-end: Margin end of the button
-   * @prop --margin-bottom: Margin bottom of the button
-   * @prop --margin-start: Margin start of the button
-   *
    * @prop --padding-top: Padding top of the button
    * @prop --padding-end: Padding end of the button
    * @prop --padding-bottom: Padding bottom of the button
    * @prop --padding-start: Padding start of the button
    */
-  --width: auto;
   --overflow: hidden;
   --ripple-color: currentColor;
   --border-width: initial;
@@ -48,10 +39,11 @@
 
   display: inline-block;
 
+  width: auto;
+
   color: var(--color);
 
   font-family: $font-family-base;
-  pointer-events: auto;
 
   text-align: center;
   text-decoration: none;
@@ -62,6 +54,7 @@
   user-select: none;
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
+  pointer-events: auto;
 
   font-kerning: none;
 }
@@ -199,15 +192,15 @@
 .button-native {
   @include border-radius(var(--border-radius));
   @include font-smoothing();
-  @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
+  @include margin(0);
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include text-inherit();
 
   display: block;
   position: relative;
 
-  width: var(--width);
-  height: var(--height);
+  width: 100%;
+  height: 100%;
 
   transition: var(--transition);
 
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index 744276ce0a..40f6377b49 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -133,11 +133,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
 | `--color`                | Text color of the button                |
 | `--color-activated`      | Text color of the button when activated |
 | `--color-focused`        | Text color of the button when focused   |
-| `--height`               | Height of the button                    |
-| `--margin-bottom`        | Margin bottom of the button             |
-| `--margin-end`           | Margin end of the button                |
-| `--margin-start`         | Margin start of the button              |
-| `--margin-top`           | Margin top of the button                |
 | `--opacity`              | Opacity of the button                   |
 | `--padding-bottom`       | Padding bottom of the button            |
 | `--padding-end`          | Padding end of the button               |
@@ -145,7 +140,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
 | `--padding-top`          | Padding top of the button               |
 | `--ripple-color`         | Color of the button ripple effect       |
 | `--transition`           | Transition of the button                |
-| `--width`                | Width of the button                     |
 
 
 ----------------------------------------------
diff --git a/core/src/components/button/test/standalone/index.html b/core/src/components/button/test/standalone/index.html
index cd88b45820..4176cdc36b 100644
--- a/core/src/components/button/test/standalone/index.html
+++ b/core/src/components/button/test/standalone/index.html
@@ -71,7 +71,7 @@
 
   <style>
     .wide {
-      --width: 100px;
+      width: 100px;
     }
 
     .large {
@@ -80,8 +80,8 @@
     }
 
     .round {
-      --width: 60px;
-      --height: 60px;
+      width: 60px;
+      height: 60px;
       --border-radius: 50%;
       --vertical-align: middle;
 
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index 6406bb7f66..7e09552c38 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -10,7 +10,8 @@
   --padding-bottom: 0;
   --padding-start: 5px;
   --padding-end: 5px;
-  --height: 32px;
+
+  height: 32px;
 
   font-size: #{$toolbar-ios-button-font-size};
   font-weight: 400;
@@ -77,11 +78,6 @@
 
 //   min-width: 36px;
 
-//   --margin-top: 0;
-//   --margin-bottom: 0;
-//   --margin-start: 6px;
-//   --margin-end: 6px;
-
 //   --padding-top: 0;
 //   --padding-bottom: 0;
 //   --padding-start: 0;
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index f849c91959..a16f551c3d 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -9,9 +9,10 @@
   --padding-bottom: 0;
   --padding-start: 8px;
   --padding-end: 8px;
-  --height: 32px;
   --box-shadow: none;
 
+  height: 32px;
+
   font-size: #{$toolbar-md-button-font-size};
   font-weight: 500;
 }
diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.scss
index 53dad899df..b12ee35973 100644
--- a/core/src/components/buttons/buttons.scss
+++ b/core/src/components/buttons/buttons.scss
@@ -14,10 +14,6 @@
 // --------------------------------------------------
 
 ::slotted(*) ion-button {
-  --margin-top: 0;
-  --margin-bottom: 0;
-  --margin-start: 0;
-  --margin-end: 0;
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 0;
@@ -25,5 +21,6 @@
   --box-shadow: none;
   --overflow: visible;
 
+  @include margin(0);
   @include margin-horizontal(2px, 2px);
 }
diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss
index e1d5d7164a..13c0d7ce6c 100644
--- a/core/src/components/checkbox/checkbox.ios.scss
+++ b/core/src/components/checkbox/checkbox.ios.scss
@@ -5,9 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --height: #{$checkbox-ios-icon-size};
-  --width: #{$checkbox-ios-icon-size};
-
   // Border
   --border-radius: #{$checkbox-ios-icon-border-radius};
   --border-width: #{$checkbox-ios-icon-border-width};
@@ -16,6 +13,12 @@
 
   // Background
   --background: #{$checkbox-ios-background-color-off};
+
+  // Size
+  --size: #{$checkbox-ios-icon-size};
+  width: var(--size);
+
+  height: var(--size);
 }
 
 
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
index 3c9a99f5c3..48fb7b1932 100644
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -5,11 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --height: #{$checkbox-md-icon-size};
-  --width: #{$checkbox-md-icon-size};
-
   // Border
-  --border-radius: calc(var(--height) * .125);
+  --border-radius: calc(var(--size) * .125);
   --border-width: #{$checkbox-md-icon-border-width};
   --border-style: #{$checkbox-md-icon-border-style};
   --border-color: #{$checkbox-md-icon-border-color-off};
@@ -17,6 +14,12 @@
   // Background
   --background: #{$checkbox-md-icon-background-color-off};
   --transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
+
+  // Size
+  --size: #{$checkbox-md-icon-size};
+  width: var(--size);
+
+  height: var(--size);
 }
 
 
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 9886108fbc..01c29cd968 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -5,6 +5,7 @@
 
 :host {
   /**
+   * @prop --size: Size of the checkbox icon
    * @prop --background: Background of the checkbox icon
    * @prop --border-color: Border color of the checkbox icon
    * @prop --border-radius: Border radius of the checkbox icon
@@ -14,8 +15,6 @@
    * @prop --background-checked: Background of the checkbox icon when checked
    * @prop --border-color-checked: Border color of the checkbox icon when checked
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
-   * @prop --height: Height of the checkbox icon
-   * @prop --width: Width of the checkbox icon
    */
   --background-checked: #{ion-color(primary, base)};
   --border-color-checked: #{ion-color(primary, base)};
@@ -45,8 +44,8 @@ button {
   display: block;
   position: relative;
 
-  width: var(--width);
-  height: var(--height);
+  width: 100%;
+  height: 100%;
 
   transition: var(--transition);
 
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index b50ca07f53..c158d28695 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -129,9 +129,8 @@ export class HomePage {
 | `--border-style`         | Border style of the checkbox icon              |
 | `--border-width`         | Border width of the checkbox icon              |
 | `--checkmark-color`      | Color of the checkbox checkmark when checked   |
-| `--height`               | Height of the checkbox icon                    |
+| `--size`                 | Size of the checkbox icon                      |
 | `--transition`           | Transition of the checkbox icon                |
-| `--width`                | Width of the checkbox icon                     |
 
 
 ----------------------------------------------
diff --git a/core/src/components/checkbox/test/basic/index.html b/core/src/components/checkbox/test/basic/index.html
index 93bfbdc570..969a11dd2e 100644
--- a/core/src/components/checkbox/test/basic/index.html
+++ b/core/src/components/checkbox/test/basic/index.html
@@ -52,7 +52,7 @@
 
       <ion-item>
         <ion-label>Dark</ion-label>
-        <ion-checkbox checked color="dark" style="--height: 100px; --width: 100px;"></ion-checkbox>
+        <ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
       </ion-item>
 
       <ion-item>
@@ -72,7 +72,7 @@
 
       <ion-item>
         <ion-label>Dark</ion-label>
-        <ion-checkbox checked color="dark" slot="start" style="--height: 100px; --width: 100px;"></ion-checkbox>
+        <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
       </ion-item>
 
       <ion-item>
diff --git a/core/src/components/fab-button/fab-button.scss b/core/src/components/fab-button/fab-button.scss
index 4ded1226c8..1205559025 100755
--- a/core/src/components/fab-button/fab-button.scss
+++ b/core/src/components/fab-button/fab-button.scss
@@ -4,6 +4,12 @@
 // --------------------------------------------------
 
 :host {
+  --transition: background-color, opacity 100ms linear;
+  --ripple-color: currentColor;
+  --border-radius: #{$fab-border-radius};
+  --border-width: 0;
+  --border-style: none;
+  --border-color: initial;
   /**
    * @prop --background: Background of the button
    * @prop --background-activated: Background of the button when activated
@@ -13,9 +19,6 @@
    * @prop --color-activated: Text color of the button when activated
    * @prop --color-focused: Text color of the button when focused
    *
-   * @prop --width: Width of the button
-   * @prop --height: Height of the button
-   *
    * @prop --transition: Transition of the button
    *
    * @prop --border-radius: Border radius of the button
@@ -27,30 +30,17 @@
    *
    * @prop --box-shadow: Box shadow of the button
    *
-   * @prop --margin-top: Margin top of the button
-   * @prop --margin-end: Margin end of the button
-   * @prop --margin-bottom: Margin bottom of the button
-   * @prop --margin-start: Margin start of the button
-   *
    * @prop --padding-top: Padding top of the button
    * @prop --padding-end: Padding end of the button
    * @prop --padding-bottom: Padding bottom of the button
    * @prop --padding-start: Padding start of the button
    */
-  --width: #{$fab-size};
-  --height: var(--width);
-  --margin-start: calc((#{$fab-size} - var(--width)) / 2);
-  --margin-end: calc((#{$fab-size} - var(--width)) / 2);
-  --margin-top: calc((#{$fab-size} - var(--height)) / 2);
-  --margin-bottom: calc((#{$fab-size} - var(--height)) / 2);
-  --transition: background-color, opacity 100ms linear;
-  --ripple-color: currentColor;
-  --border-radius: #{$fab-border-radius};
-  --border-width: 0;
-  --border-style: none;
-  --border-color: initial;
+  @include margin(0);
   display: block;
 
+  width: #{$fab-size};
+  height: #{$fab-size};
+
   font-size: 14px;
 
   text-align: center;
@@ -81,14 +71,13 @@
 .button-native {
   @include border-radius(var(--border-radius));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include text-inherit();
 
   display: block;
   position: relative;
 
-  width: var(--width);
-  height: var(--height);
+  width: 100%;
+  height: 100%;
 
   transform: var(--transform);
 
@@ -105,8 +94,6 @@
   background-clip: padding-box;
   color: var(--color);
 
-  line-height: var(--height);
-
   box-shadow: var(--box-shadow);
   contain: strict;
   cursor: pointer;
@@ -181,7 +168,10 @@
 // --------------------------------------------------
 
 :host([mini]) {
-  --width: #{$fab-mini-size};
+  @include margin(($fab-size - $fab-mini-size) / 2);
+
+  width: #{$fab-mini-size};
+  height: #{$fab-mini-size};
 }
 
 // FAB Close Icon
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index 23207ae3d4..dfb0bcea09 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -75,18 +75,12 @@ If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the conte
 | `--color`                | Text color of the button                |
 | `--color-activated`      | Text color of the button when activated |
 | `--color-focused`        | Text color of the button when focused   |
-| `--height`               | Height of the button                    |
-| `--margin-bottom`        | Margin bottom of the button             |
-| `--margin-end`           | Margin end of the button                |
-| `--margin-start`         | Margin start of the button              |
-| `--margin-top`           | Margin top of the button                |
 | `--padding-bottom`       | Padding bottom of the button            |
 | `--padding-end`          | Padding end of the button               |
 | `--padding-start`        | Padding start of the button             |
 | `--padding-top`          | Padding top of the button               |
 | `--ripple-color`         | Color of the button ripple effect       |
 | `--transition`           | Transition of the button                |
-| `--width`                | Width of the button                     |
 
 
 ----------------------------------------------
diff --git a/core/src/components/fab-list/fab-list.scss b/core/src/components/fab-list/fab-list.scss
index 1afdab726b..ebf0a8ed4e 100644
--- a/core/src/components/fab-list/fab-list.scss
+++ b/core/src/components/fab-list/fab-list.scss
@@ -22,7 +22,10 @@
 }
 
 ::slotted(.fab-button-in-list) {
-  --width: #{$fab-mini-size};
+  @include margin(8px, 0);
+
+  width: #{$fab-mini-size};
+  height: #{$fab-mini-size};
 
   transform: scale(0);
 
@@ -32,14 +35,12 @@
 
 :host(.fab-list-side-top) ::slotted(.fab-button-in-list),
 :host(.fab-list-side-bottom) ::slotted(.fab-button-in-list) {
-  --margin-top: 5px;
-  --margin-bottom: 5px;
+  @include margin(5px, 0, 5px, 0);
 }
 
 :host(.fab-list-side-start) ::slotted(.fab-button-in-list),
 :host(.fab-list-side-end) ::slotted(.fab-button-in-list) {
-  --margin-start: 5px;
-  --margin-end: 5px;
+  @include margin(0, 5px, 0, 5px);
 }
 
 ::slotted(.fab-button-in-list.fab-button-show) {
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index f5b317d0b8..5895f5c623 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -96,7 +96,8 @@
   --padding-bottom: 0px;
   --padding-start: .5em;
   --padding-end: .5em;
-  --height: 24px;
+
+  height: 24px;
 
   font-size: 13px;
 }
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 88e161b3ac..d651db97de 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -212,7 +212,8 @@
   --padding-bottom: 0;
   --padding-start: .6em;
   --padding-end: .6em;
-  --height: 25px;
+
+  height: 25px;
 
   font-size: 12px;
 }
diff --git a/core/src/components/loading/loading.ios.scss b/core/src/components/loading/loading.ios.scss
index 7347ea5835..98f5c3c7c5 100644
--- a/core/src/components/loading/loading.ios.scss
+++ b/core/src/components/loading/loading.ios.scss
@@ -4,26 +4,27 @@
 // iOS Loading Indicator
 // --------------------------------------------------
 
-.loading-ios {
+:host {
+  --background: #{$loading-ios-background-color};
+  --max-width: #{$loading-ios-max-width};
+  --max-height: #{$loading-ios-max-height};
+  --spinner-color: #{$loading-ios-spinner-color};
+
+  color: $loading-ios-text-color;
+
   font-size: $loading-ios-font-size;
 }
 
-.loading-ios .loading-wrapper {
+.loading-wrapper {
   @include border-radius($loading-ios-border-radius);
   @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
-
-  max-width: $loading-ios-max-width;
-  max-height: $loading-ios-max-height;
-
-  background-color: $loading-ios-background-color;
-  color: $loading-ios-text-color;
 }
 
 
 // iOS Translucent Loading
 // -----------------------------------------
 
-.loading-translucent-ios .loading-wrapper {
+:host(.loading-translucent) .loading-wrapper {
   background-color: $loading-ios-translucent-background-color;
   backdrop-filter: $loading-ios-translucent-filter;
 }
@@ -32,35 +33,10 @@
 // iOS Loading Content
 // -----------------------------------------
 
-.loading-ios .loading-content {
+.loading-content {
   font-weight: $loading-ios-content-font-weight;
 }
 
-.loading-ios .loading-spinner + .loading-content {
+.loading-spinner + .loading-content {
   @include margin-horizontal(16px, null);
 }
-
-
-// iOS Loading Spinner fill colors
-// -----------------------------------------
-
-.loading-ios .spinner-lines-ios line,
-.loading-ios .spinner-lines-small-ios line {
-  stroke: $loading-ios-spinner-lines-color;
-}
-
-.loading-ios .spinner-bubbles circle {
-  fill: $loading-ios-spinner-bubbles-color;
-}
-
-.loading-ios .spinner-circles circle {
-  fill: $loading-ios-spinner-circles-color;
-}
-
-.loading-ios .spinner-crescent circle {
-  stroke: $loading-ios-spinner-crescent-color;
-}
-
-.loading-ios .spinner-dots circle {
-  fill: $loading-ios-spinner-dots-color;
-}
diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss
index 1aa4be3589..033b08ca15 100644
--- a/core/src/components/loading/loading.ios.vars.scss
+++ b/core/src/components/loading/loading.ios.vars.scss
@@ -45,20 +45,5 @@ $loading-ios-content-font-weight:                   bold !default;
 /// @prop - Color of the loading spinner
 $loading-ios-spinner-color:                         $text-color-step-400 !default;
 
-/// @prop - Color of the ios loading spinner
-$loading-ios-spinner-lines-color:                   $loading-ios-spinner-color !default;
-
-/// @prop - Color of the bubbles loading spinner
-$loading-ios-spinner-bubbles-color:                 $loading-ios-spinner-color !default;
-
-/// @prop - Color of the circles loading spinner
-$loading-ios-spinner-circles-color:                 $loading-ios-spinner-color !default;
-
-/// @prop - Color of the crescent loading spinner
-$loading-ios-spinner-crescent-color:                $loading-ios-spinner-color !default;
-
-/// @prop - Color of the dots loading spinner
-$loading-ios-spinner-dots-color:                    $loading-ios-spinner-color !default;
-
 /// @prop - Filter of the translucent loading
 $loading-ios-translucent-filter:                    saturate(180%) blur(20px) !default;
diff --git a/core/src/components/loading/loading.md.scss b/core/src/components/loading/loading.md.scss
index 529f52fd0e..03a9fd3fee 100644
--- a/core/src/components/loading/loading.md.scss
+++ b/core/src/components/loading/loading.md.scss
@@ -4,20 +4,21 @@
 // Material Design Loading Indicator
 // --------------------------------------------------
 
-.loading-md {
+:host {
+  --background: #{$loading-md-background};
+  --max-width: #{$loading-md-max-width};
+  --max-height: #{$loading-md-max-height};
+  --spinner-color: #{$loading-md-spinner-color};
+
+  color: $loading-md-text-color;
+
   font-size: $loading-md-font-size;
 }
 
-.loading-md .loading-wrapper {
+.loading-wrapper {
   @include border-radius($loading-md-border-radius);
   @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start);
 
-  max-width: $loading-md-max-width;
-  max-height: $loading-md-max-height;
-
-  background: $loading-md-background;
-  color: $loading-md-text-color;
-
   box-shadow: $loading-md-box-shadow;
 }
 
@@ -25,31 +26,6 @@
 // Material Design Loading Content
 // -----------------------------------------
 
-.loading-md .loading-spinner + .loading-content {
+.loading-spinner + .loading-content {
   @include margin-horizontal(16px, null);
 }
-
-
-// Material Design Loading Spinner fill colors
-// -----------------------------------------
-
-.loading-md .spinner-lines-md line,
-.loading-md .spinner-lines-small-md line {
-  stroke: $loading-md-spinner-lines-color;
-}
-
-.loading-md .spinner-bubbles circle {
-  fill: $loading-md-spinner-bubbles-color;
-}
-
-.loading-md .spinner-circles circle {
-  fill: $loading-md-spinner-circles-color;
-}
-
-.loading-md .spinner-crescent circle {
-  stroke: $loading-md-spinner-crescent-color;
-}
-
-.loading-md .spinner-dots circle {
-  fill: $loading-md-spinner-dots-color;
-}
diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss
index 5d9e5b7a5a..29b00ba22d 100644
--- a/core/src/components/loading/loading.md.vars.scss
+++ b/core/src/components/loading/loading.md.vars.scss
@@ -41,18 +41,3 @@ $loading-md-box-shadow:                0 16px 20px $loading-md-box-shadow-color
 
 /// @prop - Color of the loading spinner
 $loading-md-spinner-color:             ion-color(primary, base) !default;
-
-/// @prop - Color of the lines loading spinner
-$loading-md-spinner-lines-color:       $loading-md-spinner-color !default;
-
-/// @prop - Color of the bubbles loading spinner
-$loading-md-spinner-bubbles-color:     $loading-md-spinner-color !default;
-
-/// @prop - Color of the circles loading spinner
-$loading-md-spinner-circles-color:     $loading-md-spinner-color !default;
-
-/// @prop - Color of the crescent loading spinner
-$loading-md-spinner-crescent-color:    $loading-md-spinner-color !default;
-
-/// @prop - Color of the dots loading spinner
-$loading-md-spinner-dots-color:        $loading-md-spinner-color !default;
diff --git a/core/src/components/loading/loading.scss b/core/src/components/loading/loading.scss
index 025c63293e..b6556c51ed 100644
--- a/core/src/components/loading/loading.scss
+++ b/core/src/components/loading/loading.scss
@@ -3,7 +3,25 @@
 // Loading
 // --------------------------------------------------
 
-ion-loading {
+:host {
+  /**
+   * @prop --background: Background of the loading dialog
+   *
+   * @prop --min-width: Minimum width of the loading dialog
+   * @prop --width: Width of the loading dialog
+   * @prop --max-width: Maximum width of the loading dialog
+   *
+   * @prop --min-height: Minimum height of the loading dialog
+   * @prop --height: Height of the loading dialog
+   * @prop --max-height: Maximum height of the loading dialog
+   *
+   * @prop --spinner-color: Color of the loading spinner
+   */
+  --min-width: auto;
+  --width: auto;
+  --min-height: auto;
+  --height: auto;
+
   @include font-smoothing();
   @include position(0, 0, 0, 0);
 
@@ -21,15 +39,31 @@ ion-loading {
   z-index: $z-index-overlay;
 }
 
-ion-loading-controller {
-  display: none;
-}
-
 .loading-wrapper {
   display: flex;
 
-  align-items: center;
+  align-items: inherit;
+  justify-content: inherit;
+
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+
+  background: var(--background);
 
   opacity: 0;
   z-index: $z-index-overlay-wrapper;
 }
+
+.spinner-lines,
+.spinner-lines-small,
+.spinner-bubbles,
+.spinner-circles,
+.spinner-crescent,
+.spinner-dots {
+  color: var(--spinner-color);
+}
\ No newline at end of file
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 9855897835..2fbe3fece3 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me
 
 import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
-import { createThemedClasses, getClassMap } from '../../utils/theme';
+import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
@@ -14,7 +14,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
   styleUrls: {
     ios: 'loading.ios.scss',
     md: 'loading.md.scss'
-  }
+  },
+  scoped: true
 })
 export class Loading implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
@@ -183,18 +184,13 @@ export class Loading implements ComponentInterface, OverlayInterface {
   }
 
   hostData() {
-    const themedClasses = this.translucent
-      ? createThemedClasses(this.mode, 'loading-translucent')
-      : {};
-
     return {
       style: {
         zIndex: 40000 + this.overlayIndex
       },
       class: {
-        ...createThemedClasses(this.mode, 'loading'),
-        ...themedClasses,
-        ...getClassMap(this.cssClass)
+        ...getClassMap(this.cssClass),
+        'loading-translucent': this.translucent
       }
     };
   }
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 679b02e87c..183fe3d5c0 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -165,6 +165,20 @@ Type: `Promise<void>`
 
 
 
+## CSS Custom Properties
+
+| Name              | Description                          |
+| ----------------- | ------------------------------------ |
+| `--background`    | Background of the loading dialog     |
+| `--height`        | Height of the loading dialog         |
+| `--max-height`    | Maximum height of the loading dialog |
+| `--max-width`     | Maximum width of the loading dialog  |
+| `--min-height`    | Minimum height of the loading dialog |
+| `--min-width`     | Minimum width of the loading dialog  |
+| `--spinner-color` | Color of the loading spinner         |
+| `--width`         | Width of the loading dialog          |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index 856be7c10f..cd42fea979 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/core/src/components/loading/test/basic/index.html
@@ -13,52 +13,52 @@
 <body>
   <ion-app>
 
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Loading - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Loading - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-      <ion-content padding>
-        <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
-        <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
+    <ion-content padding>
+      <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
+      <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
+      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long message</ion-button>
+      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, message: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
+      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
+      <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
+      <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
 
-        <ion-loading-controller></ion-loading-controller>
+      <ion-loading-controller></ion-loading-controller>
 
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6">
-              <f class="red"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="green"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="blue"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="yellow"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="pink"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="purple"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="black"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="orange"></f>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-content>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="6">
+            <f class="red"></f>
+          </ion-col>
+          <ion-col size="6">
+            <f class="green"></f>
+          </ion-col>
+          <ion-col size="6">
+            <f class="blue"></f>
+          </ion-col>
+          <ion-col size="6">
+            <f class="yellow"></f>
+          </ion-col>
+          <ion-col size="6">
+            <f class="pink"></f>
+          </ion-col>
+          <ion-col size="6">
+            <f class="purple"></f>
+          </ion-col>
+          <ion-col size="6">
+            <f class="black"></f>
+          </ion-col>
+          <ion-col size="6">
+            <f class="orange"></f>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ion-content>
 
   </ion-app>
   <script>
@@ -81,8 +81,16 @@
   </script>
 
   <style>
-    .custom-loading .loading-wrapper {
-      background: rgb(155, 221, 226);
+    .custom-loading {
+      --background: rgba(37, 210, 223, 0.8);
+      --spinner-color: white;
+
+      --height: 100%;
+      --max-height: auto;
+      --width: 100%;
+      --max-width: auto;
+
+      color: white;
     }
 
     f {
diff --git a/core/src/components/menu-controller/readme.md b/core/src/components/menu-controller/readme.md
index 6b353d10ce..53369098c7 100644
--- a/core/src/components/menu-controller/readme.md
+++ b/core/src/components/menu-controller/readme.md
@@ -1,6 +1,6 @@
 # ion-menu-controller
 
-The MenuController makes it easy to control a Menu. Its methods can be used to display the menu, enable the menu, toggle the menu, and more. The controller will grab a reference to the menu by the side, id, or, if neither of these are passed to it, it will grab the first menu it finds.
+The Menu Controller makes it easy to control a Menu. The methods provided can be used to display the menu, enable the menu, toggle the menu, and more. The controller will grab a reference to the menu by the side, or id. if neither of these are passed to it, it will grab the first menu it finds.
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
index 0937b5a2cb..7efb2afe82 100644
--- a/core/src/components/menu/menu.scss
+++ b/core/src/components/menu/menu.scss
@@ -6,11 +6,21 @@
 :host {
   /**
    * @prop --background: Background of the menu
+   *
+   * @prop --min-width: Minimum width of the menu
    * @prop --width: Width of the menu
-   * @prop --width-small: Width of the small menu
+   * @prop --max-width: Maximum width of the menu
+   *
+   * @prop --min-height: Minimum height of the menu
+   * @prop --height: Height of the menu
+   * @prop --max-height: Maximum height of the menu
    */
   --width: #{$menu-width};
-  --width-small: #{$menu-small-width};
+  --min-width: auto;
+  --max-width: auto;
+  --height: 100%;
+  --min-height: auto;
+  --max-height: auto;
   --background: #{$background-color};
 
   @include position(0, 0, 0, 0);
@@ -37,7 +47,12 @@
   justify-content: space-between;
 
   width: var(--width);
-  height: 100%;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
 
   background: var(--background);
 
@@ -72,11 +87,9 @@ ion-backdrop {
 }
 
 @media (max-width: 340px) {
-
   .menu-inner {
-    width: var(--width-small);
+    --width: #{$menu-small-width};
   }
-
 }
 
 
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index e989d3e7ee..1e50aab7c9 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -16,53 +16,192 @@ These can be controlled from the templates, or programmatically using the MenuCo
 ### Angular
 
 ```html
-<ion-menu>
+<ion-menu side="start" menuId="first">
   <ion-header>
-    <ion-toolbar>
-      <ion-title>Menu</ion-title>
+    <ion-toolbar color="primary">
+      <ion-title>Start Menu</ion-title>
     </ion-toolbar>
   </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+    </ion-list>
+  </ion-content>
 </ion-menu>
+
+<ion-menu side="start" menuId="custom" class="my-custom-menu">
+  <ion-header>
+    <ion-toolbar color="tertiary">
+      <ion-title>Custom Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-menu side="end" type="push">
+  <ion-header>
+    <ion-toolbar color="danger">
+      <ion-title>End Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
 <ion-router-outlet main></ion-router-outlet>
 ```
 
+```typescript
+import { Component } from '@angular/core';
+import { MenuController } from '@ionic/angular';
+
+@Component({
+  selector: 'menu-example',
+  templateUrl: 'menu-example.html',
+  styleUrls: ['./menu-example.css'],
+})
+export class MenuExample {
+
+constructor(private menu: MenuController) { }
+
+  openFirst() {
+    this.menu.enable(true, 'first');
+    this.menu.open('first');
+  }
+
+  openEnd() {
+    this.menu.open('end');
+  }
+
+  openCustom() {
+    this.menu.enable(true, 'custom');
+    this.menu.open('custom');
+  }
+}
+```
+
+```css
+.my-custom-menu {
+  --width: 500px;
+}
+```
+
 
 ### Javascript
 
 ```html
 <ion-app>
-  <ion-menu side="start" content-id="menu-content">
+  <ion-menu side="start" menu-id="first">
     <ion-header>
-      <ion-toolbar color="secondary">
-        <ion-title>Left Menu</ion-title>
+      <ion-toolbar color="primary">
+        <ion-title>Start Menu</ion-title>
       </ion-toolbar>
     </ion-header>
-  </ion-menu>
-
-  <ion-menu side="end" content-id="menu-content">
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Hola</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content padding>
-      hola macho
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
     </ion-content>
   </ion-menu>
 
-  <div class="ion-page" id="menu-content">
+  <ion-menu side="start" menu-id="custom" class="my-custom-menu">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Custom Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-menu side="end" type="push">
+    <ion-header>
+      <ion-toolbar color="danger">
+        <ion-title>End Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <div class="ion-page" main>
     <ion-header>
       <ion-toolbar>
         <ion-title>Menu - Basic</ion-title>
       </ion-toolbar>
     </ion-header>
+    <ion-content padding>
+      <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
+      <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
+      <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
+    </ion-content>
   </div>
 
 </ion-app>
 <ion-menu-controller></ion-menu-controller>
 ```
 
+```javascript
+const menuCtrl = document.querySelector('ion-menu-controller');
+
+function openFirst() {
+  menuCtrl.enable(true, 'first');
+  menuCtrl.open('first');
+}
+
+function openEnd() {
+  menuCtrl.open('end');
+}
+
+function openCustom() {
+  menuCtrl.enable(true, 'custom');
+  menuCtrl.open('custom');
+}
+```
+
+```css
+.my-custom-menu {
+  --width: 500px;
+}
+```
+
 
 
 ## Properties
@@ -185,11 +324,15 @@ Type: `Promise<boolean>`
 
 ## CSS Custom Properties
 
-| Name            | Description             |
-| --------------- | ----------------------- |
-| `--background`  | Background of the menu  |
-| `--width`       | Width of the menu       |
-| `--width-small` | Width of the small menu |
+| Name           | Description                |
+| -------------- | -------------------------- |
+| `--background` | Background of the menu     |
+| `--height`     | Height of the menu         |
+| `--max-height` | Maximum height of the menu |
+| `--max-width`  | Maximum width of the menu  |
+| `--min-height` | Minimum height of the menu |
+| `--min-width`  | Minimum width of the menu  |
+| `--width`      | Width of the menu          |
 
 
 ----------------------------------------------
diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html
index 0e66084919..de69cc1dc3 100644
--- a/core/src/components/menu/test/basic/index.html
+++ b/core/src/components/menu/test/basic/index.html
@@ -12,9 +12,9 @@
 
 <body>
   <ion-app>
-    <ion-menu side="start">
+    <ion-menu side="start" menu-id="first">
       <ion-header>
-        <ion-toolbar>
+        <ion-toolbar color="primary">
           <ion-title>Start Menu</ion-title>
         </ion-toolbar>
       </ion-header>
@@ -29,9 +29,26 @@
       </ion-content>
     </ion-menu>
 
+    <ion-menu side="start" menu-id="custom" class="my-custom-menu">
+      <ion-header>
+        <ion-toolbar color="tertiary">
+          <ion-title>Custom Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          <ion-item>Menu Item</ion-item>
+          <ion-item>Menu Item</ion-item>
+          <ion-item>Menu Item</ion-item>
+          <ion-item>Menu Item</ion-item>
+          <ion-item>Menu Item</ion-item>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
     <ion-menu side="end" type="push">
       <ion-header>
-        <ion-toolbar>
+        <ion-toolbar color="danger">
           <ion-title>End Menu</ion-title>
         </ion-toolbar>
       </ion-header>
@@ -53,23 +70,36 @@
         </ion-toolbar>
       </ion-header>
       <ion-content padding>
-        <ion-button expand="block" onclick="openStart()">Open Start Menu</ion-button>
+        <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
         <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
+        <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
       </ion-content>
     </div>
 
   </ion-app>
   <ion-menu-controller></ion-menu-controller>
 
+  <style>
+    .my-custom-menu {
+      --width: 500px;
+    }
+  </style>
+
   <script>
-    function openStart() {
-      document.querySelector('ion-menu-controller')
-        .open('start');
+    const menuCtrl = document.querySelector('ion-menu-controller');
+
+    function openFirst() {
+      menuCtrl.enable(true, 'first');
+      menuCtrl.open('first');
     }
 
     function openEnd() {
-      document.querySelector('ion-menu-controller')
-        .open('end');
+      menuCtrl.open('end');
+    }
+
+    function openCustom() {
+      menuCtrl.enable(true, 'custom');
+      menuCtrl.open('custom');
     }
   </script>
 </body>
diff --git a/core/src/components/menu/usage/angular.md b/core/src/components/menu/usage/angular.md
index e4a7386ff1..13c831ed24 100644
--- a/core/src/components/menu/usage/angular.md
+++ b/core/src/components/menu/usage/angular.md
@@ -1,10 +1,89 @@
 ```html
-<ion-menu>
+<ion-menu side="start" menuId="first">
   <ion-header>
-    <ion-toolbar>
-      <ion-title>Menu</ion-title>
+    <ion-toolbar color="primary">
+      <ion-title>Start Menu</ion-title>
     </ion-toolbar>
   </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+    </ion-list>
+  </ion-content>
 </ion-menu>
+
+<ion-menu side="start" menuId="custom" class="my-custom-menu">
+  <ion-header>
+    <ion-toolbar color="tertiary">
+      <ion-title>Custom Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-menu side="end" type="push">
+  <ion-header>
+    <ion-toolbar color="danger">
+      <ion-title>End Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+      <ion-item>Menu Item</ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
 <ion-router-outlet main></ion-router-outlet>
 ```
+
+```typescript
+import { Component } from '@angular/core';
+import { MenuController } from '@ionic/angular';
+
+@Component({
+  selector: 'menu-example',
+  templateUrl: 'menu-example.html',
+  styleUrls: ['./menu-example.css'],
+})
+export class MenuExample {
+
+constructor(private menu: MenuController) { }
+
+  openFirst() {
+    this.menu.enable(true, 'first');
+    this.menu.open('first');
+  }
+
+  openEnd() {
+    this.menu.open('end');
+  }
+
+  openCustom() {
+    this.menu.enable(true, 'custom');
+    this.menu.open('custom');
+  }
+}
+```
+
+```css
+.my-custom-menu {
+  --width: 500px;
+}
+```
\ No newline at end of file
diff --git a/core/src/components/menu/usage/javascript.md b/core/src/components/menu/usage/javascript.md
index 0ba6db2ce3..fa232b1487 100644
--- a/core/src/components/menu/usage/javascript.md
+++ b/core/src/components/menu/usage/javascript.md
@@ -1,33 +1,93 @@
 ```html
 <ion-app>
-  <ion-menu side="start" content-id="menu-content">
+  <ion-menu side="start" menu-id="first">
     <ion-header>
-      <ion-toolbar color="secondary">
-        <ion-title>Left Menu</ion-title>
+      <ion-toolbar color="primary">
+        <ion-title>Start Menu</ion-title>
       </ion-toolbar>
     </ion-header>
-  </ion-menu>
-
-  <ion-menu side="end" content-id="menu-content">
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Hola</ion-title>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content padding>
-      hola macho
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
     </ion-content>
   </ion-menu>
 
-  <div class="ion-page" id="menu-content">
+  <ion-menu side="start" menu-id="custom" class="my-custom-menu">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Custom Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-menu side="end" type="push">
+    <ion-header>
+      <ion-toolbar color="danger">
+        <ion-title>End Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <div class="ion-page" main>
     <ion-header>
       <ion-toolbar>
         <ion-title>Menu - Basic</ion-title>
       </ion-toolbar>
     </ion-header>
+    <ion-content padding>
+      <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button>
+      <ion-button expand="block" onclick="openEnd()">Open End Menu</ion-button>
+      <ion-button expand="block" onclick="openCustom()">Open Custom Menu</ion-button>
+    </ion-content>
   </div>
 
 </ion-app>
 <ion-menu-controller></ion-menu-controller>
 ```
+
+```javascript
+const menuCtrl = document.querySelector('ion-menu-controller');
+
+function openFirst() {
+  menuCtrl.enable(true, 'first');
+  menuCtrl.open('first');
+}
+
+function openEnd() {
+  menuCtrl.open('end');
+}
+
+function openCustom() {
+  menuCtrl.enable(true, 'custom');
+  menuCtrl.open('custom');
+}
+```
+
+```css
+.my-custom-menu {
+  --width: 500px;
+}
+```
\ No newline at end of file
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 99d94c41eb..50c1efdd06 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -6,15 +6,27 @@
 :host {
   /**
    * @prop --background: Background of the modal content
+   *
    * @prop --border-color: Border color of the modal content
    * @prop --border-radius: Border radius of the modal content
    * @prop --border-width: Border width of the modal content
    * @prop --border-style: Border style of the modal content
-   * @prop --height: Height of the modal content
-   * @prop --width: Width of the modal content
+   *
+   * @prop --min-width: Minimum width of the modal
+   * @prop --width: Width of the modal
+   * @prop --max-width: Maximum width of the modal
+   *
+   * @prop --min-height: Minimum height of the modal
+   * @prop --height: Height of the modal
+   * @prop --max-height: Maximum height of the modal
+   *
    */
   --width: 100%;
+  --min-width: auto;
+  --max-width: auto;
   --height: 100%;
+  --min-height: auto;
+  --max-height: auto;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -37,7 +49,12 @@
   @include border-radius(var(--border-radius));
 
   width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+
   height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
 
   border-width: var(--border-width);
   border-style: var(--border-style);
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index cf27eabc19..d266956fb7 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -165,8 +165,12 @@ Type: `Promise<void>`
 | `--border-radius` | Border radius of the modal content |
 | `--border-style`  | Border style of the modal content  |
 | `--border-width`  | Border width of the modal content  |
-| `--height`        | Height of the modal content        |
-| `--width`         | Width of the modal content         |
+| `--height`        | Height of the modal                |
+| `--max-height`    | Maximum height of the modal        |
+| `--max-width`     | Maximum width of the modal         |
+| `--min-height`    | Minimum height of the modal        |
+| `--min-width`     | Minimum width of the modal         |
+| `--width`         | Width of the modal                 |
 
 
 ----------------------------------------------
diff --git a/core/src/components/modal/test/custom/index.html b/core/src/components/modal/test/custom/index.html
index c139004b71..c6b2265dfe 100644
--- a/core/src/components/modal/test/custom/index.html
+++ b/core/src/components/modal/test/custom/index.html
@@ -16,8 +16,16 @@
     --border-width: 7px 0 0 0;
     --border-color: #0d51aa;
     --border-radius: 20px 20px 0 0;
+
     align-items: flex-end;
   }
+
+  @media (max-width: 400px) {
+    .custom-modal {
+      --max-width: 98%;
+      --height: 98%;
+    }
+  }
   </style>
 </head>
 
diff --git a/core/src/components/picker-column/picker-column.ios.scss b/core/src/components/picker-column/picker-column.ios.scss
new file mode 100644
index 0000000000..cd93f5d346
--- /dev/null
+++ b/core/src/components/picker-column/picker-column.ios.scss
@@ -0,0 +1,47 @@
+@import "./picker-column";
+@import "../picker/picker.ios.vars";
+
+// iOS Picker Column
+// --------------------------------------------------
+
+.picker-col {
+  @include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);
+
+  transform-style: preserve-3d;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opts {
+  top: $picker-ios-option-offset-y;
+
+  transform-style: preserve-3d;
+
+  color: inherit;
+
+  font-size: $picker-ios-option-font-size;
+
+  line-height: $picker-ios-option-height;
+  pointer-events: none;
+}
+
+.picker-opt {
+  @include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start);
+  @include margin(0);
+  @include transform-origin(center, center);
+
+  height: 46px;
+
+  transform-style: preserve-3d;
+
+  transition-timing-function: ease-out;
+
+  background: transparent;
+  color: inherit;
+
+  font-size: $picker-ios-option-font-size;
+
+  line-height: $picker-ios-option-height;
+  backface-visibility: hidden;
+  pointer-events: auto;
+}
\ No newline at end of file
diff --git a/core/src/components/picker-column/picker-column.md.scss b/core/src/components/picker-column/picker-column.md.scss
new file mode 100644
index 0000000000..bd25897521
--- /dev/null
+++ b/core/src/components/picker-column/picker-column.md.scss
@@ -0,0 +1,51 @@
+@import "./picker-column";
+@import "../picker/picker.md.vars";
+
+// Material Design Picker Column
+// --------------------------------------------------
+
+.picker-col {
+  @include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
+
+  transform-style: preserve-3d;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opts {
+  top: $picker-md-option-offset-y;
+
+  transform-style: preserve-3d;
+
+  color: inherit;
+
+  font-size: $picker-md-option-font-size;
+
+  line-height: $picker-md-option-height;
+  pointer-events: none;
+}
+
+
+.picker-opt {
+  @include margin(0);
+  @include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
+
+  height: 43px;
+
+  transition-timing-function: ease-out;
+
+  background: transparent;
+  color: inherit;
+
+  font-size: $picker-md-option-font-size;
+
+  line-height: $picker-md-option-height;
+  backface-visibility: hidden;
+  pointer-events: auto;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opt.picker-opt-selected {
+  color: $picker-md-option-selected-color;
+}
\ No newline at end of file
diff --git a/core/src/components/picker-column/picker-column.scss b/core/src/components/picker-column/picker-column.scss
new file mode 100644
index 0000000000..cd55476d62
--- /dev/null
+++ b/core/src/components/picker-column/picker-column.scss
@@ -0,0 +1,101 @@
+@import "../../themes/ionic.globals";
+
+// Picker Column
+// --------------------------------------------------
+
+.picker-col {
+  display: flex;
+  position: relative;
+
+  flex: 1;
+  justify-content: center;
+
+  height: 100%;
+  box-sizing: content-box;
+
+  contain: content;
+}
+
+.picker-opts {
+  position: relative;
+
+  flex: 1;
+
+  max-width: 100%;
+}
+
+// contain property is supported by Chrome
+.picker-opt {
+  @include position(0, null, null, 0);
+
+  display: block;
+  position: absolute;
+
+  width: 100%;
+
+  border: 0;
+
+  text-align: center;
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  contain: strict;
+  overflow: hidden;
+  will-change: transform;
+}
+
+.picker-opt.picker-opt-disabled {
+  pointer-events: none;
+}
+
+.picker-opt-disabled {
+  opacity: 0;
+}
+
+.picker-opts-left {
+  @include ltr() {
+    justify-content: flex-start;
+  }
+
+  @include rtl() {
+    justify-content: flex-end;
+  }
+}
+
+.picker-opts-right {
+  @include ltr() {
+    justify-content: flex-end;
+  }
+
+  @include rtl() {
+    justify-content: flex-start;
+  }
+}
+
+.picker-opt {
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+.picker-prefix {
+  position: relative;
+
+  flex: 1;
+
+  text-align: end;
+
+  white-space: nowrap;
+}
+
+.picker-suffix {
+  position: relative;
+
+  flex: 1;
+
+  text-align: start;
+
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx
index a6ceec370f..a8158b8677 100644
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@@ -5,7 +5,11 @@ import { hapticSelectionChanged } from '../../utils';
 import { clamp } from '../../utils/helpers';
 
 @Component({
-  tag: 'ion-picker-column'
+  tag: 'ion-picker-column',
+  styleUrls: {
+    ios: 'picker-column.ios.scss',
+    md: 'picker-column.md.scss'
+  }
 })
 export class PickerColumnCmp implements ComponentInterface {
   mode!: Mode;
diff --git a/core/src/components/picker/picker.ios.scss b/core/src/components/picker/picker.ios.scss
index 37b175ddae..469cafbaa3 100644
--- a/core/src/components/picker/picker.ios.scss
+++ b/core/src/components/picker/picker.ios.scss
@@ -4,48 +4,47 @@
 // iOS Picker
 // --------------------------------------------------
 
-.picker-ios .picker-wrapper {
-  height: $picker-ios-height;
+:host {
+  --background: #{$picker-ios-background-color};
+  --border-width: #{1px 0 0};
+  --border-color: #{$picker-ios-border-color};
+  --height: #{$picker-ios-height};
 
-  border-top: 1px solid $picker-ios-border-color;
-
-  background: $picker-ios-background-color;
+  color: $picker-ios-option-text-color;
 }
 
-.picker-ios .picker-toolbar {
+.picker-toolbar {
   display: flex;
 
   height: $picker-ios-toolbar-height;
 
-  border-bottom: $hairlines-width solid $picker-ios-border-color;
-
-  background: $picker-ios-toolbar-background-color;
+  border-bottom: $hairlines-width solid var(--border-color);
 }
 
-.picker-ios .picker-toolbar-button {
+.picker-toolbar-button {
   flex: 1;
 
   text-align: end;
 }
 
-.picker-ios .picker-toolbar-button:last-child .picker-button {
+.picker-toolbar-button:last-child .picker-button {
   font-weight: $picker-ios-button-strong-font-weight;
 }
 
-.picker-ios .picker-toolbar-button:first-child {
+.picker-toolbar-button:first-child {
   font-weight: normal;
 
   text-align: start;
 }
 
-.picker-ios .picker-button,
-.picker-ios .picker-button.activated {
+.picker-button,
+.picker-button.activated {
   @include margin(0);
   @include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start);
 
   height: $picker-ios-button-height;
 
-  background: $picker-ios-button-background-color;
+  background: transparent;
   color: $picker-ios-button-text-color;
 
   font-size: $picker-ios-button-font-size;
@@ -56,49 +55,7 @@
   perspective: $picker-ios-column-perspective;
 }
 
-.picker-ios .picker-col {
-  @include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);
-
-  transform-style: preserve-3d;
-}
-
-.picker-ios .picker-prefix,
-.picker-ios .picker-suffix,
-.picker-ios .picker-opts {
-  top: $picker-ios-option-offset-y;
-
-  transform-style: preserve-3d;
-
-  color: $picker-ios-option-text-color;
-
-  font-size: $picker-ios-option-font-size;
-
-  line-height: $picker-ios-option-height;
-  pointer-events: none;
-}
-
-.picker-ios .picker-opt {
-  @include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start);
-  @include margin(0);
-  @include transform-origin(center, center);
-
-  height: 46px;
-
-  transform-style: preserve-3d;
-
-  transition-timing-function: ease-out;
-
-  background: transparent;
-  color: $picker-ios-option-text-color;
-
-  font-size: $picker-ios-option-font-size;
-
-  line-height: $picker-ios-option-height;
-  backface-visibility: hidden;
-  pointer-events: auto;
-}
-
-.picker-ios .picker-above-highlight {
+.picker-above-highlight {
   @include position(0, null, null, 0);
   @include transform(translate3d(0, 0, 90px));
 
@@ -108,16 +65,17 @@
   width: 100%;
   height: $picker-ios-option-offset-y + 4px;
 
-  border-bottom: 1px solid $picker-ios-border-color;
+  border-bottom: 1px solid var(--border-color);
 
-  background: linear-gradient(to bottom,
-                            $picker-ios-top-background-color 20%,
-                            $picker-ios-bottom-background-color 100%);
+  background: linear-gradient(
+    to bottom,
+    $picker-ios-top-background-color 20%,
+    $picker-ios-bottom-background-color 100%);
 
   z-index: 10;
 }
 
-.picker-ios .picker-below-highlight {
+.picker-below-highlight {
   @include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0);
   @include transform(translate3d(0, 0, 90px));
 
@@ -127,11 +85,12 @@
   width: 100%;
   height: $picker-ios-option-offset-y + $picker-ios-option-height;
 
-  border-top: 1px solid $picker-ios-border-color;
+  border-top: 1px solid var(--border-color);
 
-  background: linear-gradient(to top,
-                           $picker-ios-top-background-color 30%,
-                           $picker-ios-bottom-background-color 100%);
+  background: linear-gradient(
+    to top,
+    $picker-ios-top-background-color 30%,
+    $picker-ios-bottom-background-color 100%);
 
   z-index: 11;
 }
diff --git a/core/src/components/picker/picker.ios.vars.scss b/core/src/components/picker/picker.ios.vars.scss
index 3ed4039f07..0c4c9b095e 100644
--- a/core/src/components/picker/picker.ios.vars.scss
+++ b/core/src/components/picker/picker.ios.vars.scss
@@ -13,13 +13,13 @@ $picker-ios-border-color:                         $item-ios-border-color !defaul
 $picker-ios-background-color:                     $background-color !default;
 
 /// @prop - Top Background Color of the picker wrapper gradient
-$picker-ios-top-background-color:                 $picker-ios-background-color !default;
+$picker-ios-top-background-color:                 var(--background, $picker-ios-background-color) !default;
 
 /// @prop - Bottom Background Color alpha of the picker wrapper gradient
 $picker-ios-bottom-background-color-alpha:        .8 !default;
 
 /// @prop - Bottom Background Color of the picker wrapper gradient
-$picker-ios-bottom-background-color:              rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default;
+$picker-ios-bottom-background-color:              rgba(var(--background-rgb, var(--ion-background-color-rgb, $background-color-rgb)), $picker-ios-bottom-background-color-alpha) !default;
 
 /// @prop - Height of the picker toolbar
 $picker-ios-toolbar-height:                       44px !default;
@@ -33,9 +33,6 @@ $picker-ios-button-height:                        $picker-ios-toolbar-height !de
 /// @prop - Text color of the picker button
 $picker-ios-button-text-color:                    ion-color(primary, base) !default;
 
-/// @prop - Background of the picker button
-$picker-ios-button-background-color:              transparent !default;
-
 /// @prop - Font size of the picker button
 $picker-ios-button-font-size:                     16px !default;
 
diff --git a/core/src/components/picker/picker.md.scss b/core/src/components/picker/picker.md.scss
index 7db2199837..0b0edfc1b5 100644
--- a/core/src/components/picker/picker.md.scss
+++ b/core/src/components/picker/picker.md.scss
@@ -4,26 +4,25 @@
 // Material Design Picker
 // --------------------------------------------------
 
-.picker-md .picker-wrapper {
-  height: $picker-md-height;
+:host {
+  --background: #{$picker-md-background-color};
+  --border-width: #{$hairlines-width 0 0};
+  --border-color: #{$picker-md-border-color};
+  --height: #{$picker-md-height};
 
-  border-top: $hairlines-width solid $picker-md-border-color;
-
-  background: $picker-md-background-color;
+  color: $picker-md-option-text-color;
 }
 
-.picker-md .picker-toolbar {
+.picker-toolbar {
   display: flex;
 
   justify-content: flex-end;
 
   height: $picker-md-toolbar-height;
-
-  background: $picker-md-toolbar-background-color;
 }
 
-.picker-md .picker-button,
-.picker-md .picker-button.activated {
+.picker-button,
+.picker-button.activated {
   @include margin(0);
   @include padding(0, 1.1em);
 
@@ -40,58 +39,12 @@
   box-shadow: none;
 }
 
-.picker-md .picker-columns {
+.picker-columns {
   height: $picker-md-height - $picker-md-toolbar-height;
   perspective: 1800px;
 }
 
-.picker-md .picker-col {
-  @include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
-
-  transform-style: preserve-3d;
-}
-
-.picker-md .picker-prefix,
-.picker-md .picker-suffix,
-.picker-md .picker-opts {
-  top: $picker-md-option-offset-y;
-
-  transform-style: preserve-3d;
-
-  color: $picker-md-option-text-color;
-
-  font-size: $picker-md-option-font-size;
-
-  line-height: $picker-md-option-height;
-  pointer-events: none;
-}
-
-
-.picker-md .picker-opt {
-  @include margin(0);
-  @include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
-
-  height: 43px;
-
-  transition-timing-function: ease-out;
-
-  background: transparent;
-  color: $picker-md-option-text-color;
-
-  font-size: $picker-md-option-font-size;
-
-  line-height: $picker-md-option-height;
-  backface-visibility: hidden;
-  pointer-events: auto;
-}
-
-.picker-md .picker-prefix,
-.picker-md .picker-suffix,
-.picker-md .picker-opt.picker-opt-selected {
-  color: $picker-md-option-selected-color;
-}
-
-.picker-md .picker-above-highlight {
+.picker-above-highlight {
   @include position(0, null, null, 0);
   @include transform(translate3d(0, 0, 90px));
 
@@ -102,14 +55,15 @@
 
   border-bottom: 1px solid $picker-md-border-color;
 
-  background: linear-gradient(to bottom,
-                            $picker-md-top-background-color 20%,
-                            $picker-md-bottom-background-color 100%);
+  background: linear-gradient(
+    to bottom,
+    $picker-md-top-background-color 20%,
+    $picker-md-bottom-background-color 100%);
 
   z-index: 10;
 }
 
-.picker-md .picker-below-highlight {
+.picker-below-highlight {
   @include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0);
   @include transform(translate3d(0, 0, 90px));
 
@@ -120,9 +74,10 @@
 
   border-top: 1px solid $picker-md-border-color;
 
-  background: linear-gradient(to top,
-                           $picker-md-top-background-color 30%,
-                           $picker-md-bottom-background-color 100%);
+  background: linear-gradient(
+    to top,
+    $picker-md-top-background-color 30%,
+    $picker-md-bottom-background-color 100%);
 
   z-index: 11;
 }
diff --git a/core/src/components/picker/picker.scss b/core/src/components/picker/picker.scss
index be314fa322..1e3c10f845 100644
--- a/core/src/components/picker/picker.scss
+++ b/core/src/components/picker/picker.scss
@@ -3,15 +3,40 @@
 // Picker
 // --------------------------------------------------
 
-ion-picker {
+:host {
+  /**
+   * @prop --background: Background of the picker
+   * @prop --background-rgb: Background of the picker in rgb format
+   *
+   * @prop --border-radius: Border radius of the picker
+   * @prop --border-color: Border color of the picker
+   * @prop --border-width: Border width of the picker
+   * @prop --border-style: Border style of the picker
+   *
+   * @prop --min-width: Minimum width of the picker
+   * @prop --width: Width of the picker
+   * @prop --max-width: Maximum width of the picker
+   *
+   * @prop --min-height: Minimum height of the picker
+   * @prop --height: Height of the picker
+   * @prop --max-height: Maximum height of the picker
+   */
+  --border-radius: 0;
+  --border-style: solid;
+  --min-width: auto;
+  --width: #{$picker-width};
+  --max-width: #{$picker-max-width};
+  --min-height: auto;
+  --max-height: auto;
+
   @include font-smoothing();
   @include position(0, null, null, 0);
 
   display: block;
   position: absolute;
 
-  width: $picker-width;
-  height: $picker-width;
+  width: 100%;
+  height: 100%;
 
   font-family: $font-family-base;
 
@@ -20,14 +45,8 @@ ion-picker {
   z-index: $z-index-overlay;
 }
 
-.picker-toolbar {
-  width: 100%;
-
-  contain: strict;
-  z-index: 1;
-}
-
 .picker-wrapper {
+  @include border-radius(var(--border-radius));
   @include position(null, 0, 0, 0);
   @include margin(auto);
   @include transform(translate3d(0, 100%, 0));
@@ -37,14 +56,53 @@ ion-picker {
 
   flex-direction: column;
 
-  width: $picker-width;
-  max-width: $picker-max-width;
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+
+  background: var(--background);
 
   contain: strict;
   overflow: hidden;
   z-index: $z-index-overlay-wrapper;
 }
 
+// Picker Toolbar and Buttons
+// --------------------------------------------------
+
+.picker-toolbar {
+  width: 100%;
+
+  background: transparent;
+
+  contain: strict;
+  z-index: 1;
+}
+
+.picker-button {
+  border: 0;
+
+  font-family: inherit;
+}
+
+.picker-button {
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+// Picker Columns and Highlight
+// --------------------------------------------------
+
 .picker-columns {
   @include rtl() {
     // Date is the same format in both directions
@@ -62,118 +120,8 @@ ion-picker {
   overflow: hidden;
 }
 
-.picker-col {
-  display: flex;
-  position: relative;
-
-  flex: 1;
-  justify-content: center;
-
-  height: 100%;
-  box-sizing: content-box;
-
-  contain: content;
-}
-
-.picker-opts {
-  position: relative;
-
-  flex: 1;
-
-  max-width: 100%;
-}
-
-.picker-prefix {
-  position: relative;
-
-  flex: 2;
-
-  min-width: 45%;
-  max-width: 50%;
-
-  text-align: end;
-
-  white-space: nowrap;
-}
-
-.picker-suffix {
-  position: relative;
-
-  flex: 2;
-
-  min-width: 45%;
-  max-width: 50%;
-
-  text-align: start;
-
-  white-space: nowrap;
-}
-
-// contain property is supported by Chrome
-.picker-opt {
-  @include position(0, null, null, 0);
-
-  display: block;
-  position: absolute;
-
-  width: 100%;
-
-  border: 0;
-
-  text-align: center;
-  text-overflow: ellipsis;
-
-  white-space: nowrap;
-
-  contain: strict;
-  overflow: hidden;
-  will-change: transform;
-}
-
-.picker-opt.picker-opt-disabled {
-  pointer-events: none;
-}
-
-.picker-opt-disabled {
-  opacity: 0;
-}
-
-.picker-opts-left {
-  @include ltr() {
-    justify-content: flex-start;
-  }
-
-  @include rtl() {
-    justify-content: flex-end;
-  }
-}
-
-.picker-opts-right {
-  @include ltr() {
-    justify-content: flex-end;
-  }
-
-  @include rtl() {
-    justify-content: flex-start;
-  }
-}
-
 .picker-above-highlight,
 .picker-below-highlight {
   display: none;
   pointer-events: none;
 }
-
-.picker-button {
-  border: 0;
-
-  font-family: inherit;
-}
-
-.picker-opt,
-.picker-button {
-  &:active,
-  &:focus {
-    outline: none;
-  }
-}
diff --git a/core/src/components/picker/picker.tsx b/core/src/components/picker/picker.tsx
index a6d17bab5a..fbea1b81dc 100644
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@@ -12,7 +12,8 @@ import { iosLeaveAnimation } from './animations/ios.leave';
   styleUrls: {
     ios: 'picker.ios.scss',
     md: 'picker.md.scss'
-  }
+  },
+  scoped: true
 })
 export class Picker implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
@@ -137,13 +138,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Method()
   async present(): Promise<void> {
-    await present(
-      this,
-      'pickerEnter',
-      iosEnterAnimation,
-      iosEnterAnimation,
-      undefined
-    );
+    await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
 
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
@@ -158,14 +153,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    return dismiss(
-      this,
-      data,
-      role,
-      'pickerLeave',
-      iosLeaveAnimation,
-      iosLeaveAnimation
-    );
+    return dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
   }
 
   /**
@@ -249,7 +237,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
         tappable={this.backdropDismiss}
       >
       </ion-backdrop>,
-
       <div class="picker-wrapper" role="dialog">
         <div class="picker-toolbar">
           {this.buttons.map(b => (
@@ -266,9 +253,11 @@ export class Picker implements ComponentInterface, OverlayInterface {
         </div>
 
         <div class="picker-columns">
-          <div class="picker-above-highlight" />
-            {this.columns.map(c => <ion-picker-column col={c} />)}
-          <div class="picker-below-highlight" />
+          <div class="picker-above-highlight"></div>
+            {this.columns.map(c =>
+              <ion-picker-column col={c}></ion-picker-column>
+            )}
+          <div class="picker-below-highlight"></div>
         </div>
       </div>
     ];
diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md
index 4224e90ea6..ce945edbc4 100644
--- a/core/src/components/picker/readme.md
+++ b/core/src/components/picker/readme.md
@@ -102,6 +102,24 @@ Type: `Promise<void>`
 
 
 
+## CSS Custom Properties
+
+| Name               | Description                            |
+| ------------------ | -------------------------------------- |
+| `--background`     | Background of the picker               |
+| `--background-rgb` | Background of the picker in rgb format |
+| `--border-color`   | Border color of the picker             |
+| `--border-radius`  | Border radius of the picker            |
+| `--border-style`   | Border style of the picker             |
+| `--border-width`   | Border width of the picker             |
+| `--height`         | Height of the picker                   |
+| `--max-height`     | Maximum height of the picker           |
+| `--max-width`      | Maximum width of the picker            |
+| `--min-height`     | Minimum height of the picker           |
+| `--min-width`      | Minimum width of the picker            |
+| `--width`          | Width of the picker                    |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/picker/test/basic/index.html b/core/src/components/picker/test/basic/index.html
new file mode 100644
index 0000000000..25a4843f75
--- /dev/null
+++ b/core/src/components/picker/test/basic/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Picker - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Picker - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding>
+      <ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
+      <ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')">Show Custom Picker</ion-button>
+    </ion-content>
+
+  </ion-app>
+  <ion-picker-controller></ion-picker-controller>
+
+  <style>
+    .my-custom-class {
+      --width: 200px;
+      --height: 50%;
+
+      --background: #272727;
+      --background-rgb: 39, 39, 39;
+      --border-width: 2px;
+      --border-color: #000000;
+      --border-radius: 16px 16px 0 0;
+
+      color: #d6d6d6;
+    }
+  </style>
+
+  <script>
+    async function presentPicker(customClass) {
+      const pickerController = document.querySelector('ion-picker-controller');
+      await pickerController.componentOnReady();
+      const pickerElement = await pickerController.create({
+        buttons: [{
+          text: 'Save',
+          handler: () => console.log('Clicked Save!')
+        }, {
+          text: 'Log',
+          handler: (val) => {
+            console.log('Clicked Log. Do not Dismiss.', val);
+            return false;
+          }
+        }],
+        columns: [{
+          name: 'hours',
+          prefix: 'total',
+          suffix: 'hours',
+          options: [{
+            text: '1',
+            value: '01'
+          },
+          {
+            text: '2',
+            value: '02'
+          },
+          {
+            text: '3',
+            value: '03'
+          },
+          {
+            text: '4',
+            value: '04'
+          },
+          {
+            text: '5',
+            value: '05'
+          },
+          {
+            text: '6',
+            value: '06'
+          },
+          {
+            text: '7',
+            value: '07'
+          },
+          {
+            text: '8',
+            value: '08'
+          },
+          {
+            text: '9',
+            value: '09'
+          },
+          {
+            text: '10',
+            value: '10'
+          },
+          {
+            text: '11',
+            value: '11'
+          },
+          {
+            text: '12',
+            value: '12'
+          }]
+        }],
+        cssClass: customClass
+      });
+      return await pickerElement.present();
+    }
+  </script>
+</body>
+
+</html>
diff --git a/core/src/components/popover/popover.ios.scss b/core/src/components/popover/popover.ios.scss
index 2879b93b3b..d0d3a6b580 100644
--- a/core/src/components/popover/popover.ios.scss
+++ b/core/src/components/popover/popover.ios.scss
@@ -4,16 +4,14 @@
 // iOS Popover
 // --------------------------------------------------
 
+:host {
+  --width: #{$popover-ios-width};
+  --max-height: #{$popover-ios-max-height};
+  --box-shadow: none;
+}
+
 .popover-content {
   @include border-radius($popover-ios-border-radius);
-
-  width: $popover-ios-width;
-  min-width: $popover-ios-min-width;
-  min-height: $popover-ios-min-height;
-  max-height: $popover-ios-max-height;
-
-  background-color: $popover-ios-background-color;
-  color: $popover-ios-text-color;
 }
 
 
@@ -41,7 +39,7 @@
 
   transform: rotate(45deg);
 
-  background-color: $popover-ios-arrow-background-color;
+  background: var(--background);
 
   content: "";
   z-index: $z-index-overlay-wrapper;
diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss
index 78c9dbc163..e60590caff 100644
--- a/core/src/components/popover/popover.ios.vars.scss
+++ b/core/src/components/popover/popover.ios.vars.scss
@@ -9,32 +9,17 @@ $popover-backdrop-ios-color:                          $backdrop-ios-color !defau
 /// @prop - Width of the popover content
 $popover-ios-width:                                   200px !default;
 
-/// @prop - Min width of the popover content
-$popover-ios-min-width:                               0 !default;
-
-/// @prop - Minimum height of the popover content
-$popover-ios-min-height:                              0 !default;
-
 /// @prop - Maximum height of the popover content
 $popover-ios-max-height:                              90% !default;
 
 /// @prop - Border radius of the popover content
 $popover-ios-border-radius:                           10px !default;
 
-/// @prop - Text color of the popover content
-$popover-ios-text-color:                              $text-color !default;
-
-/// @prop - Background of the popover content
-$popover-ios-background-color:                        $background-color !default;
-
 /// @prop - Background color alpha of the popover content
 $popover-ios-translucent-background-color-alpha:      .8 !default;
 
 /// @prop - Background color of the popover content
 $popover-ios-translucent-background-color:            rgba(var(--ion-background-color-rgb, $background-color-rgb), $popover-ios-translucent-background-color-alpha) !default;
 
-/// @prop - Background of the popover arrow
-$popover-ios-arrow-background-color:                  $popover-ios-background-color !default;
-
 /// @prop - Filter of the translucent popover
 $popover-ios-translucent-filter:                      saturate(180%) blur(20px) !default;
diff --git a/core/src/components/popover/popover.md.scss b/core/src/components/popover/popover.md.scss
index b4769cd024..2b918a699a 100644
--- a/core/src/components/popover/popover.md.scss
+++ b/core/src/components/popover/popover.md.scss
@@ -4,22 +4,17 @@
 // Material Design Popover
 // --------------------------------------------------
 
+:host {
+  --width: #{$popover-md-width};
+  --max-height: #{$popover-md-max-height};
+  --box-shadow: #{$popover-md-box-shadow};
+}
+
 .popover-content {
   @include border-radius($popover-md-border-radius);
   @include transform-origin(start, top);
-
-  width: $popover-md-width;
-  min-width: $popover-md-min-width;
-  min-height: $popover-md-min-height;
-  max-height: $popover-md-max-height;
-
-  background: $popover-md-background;
-  color: $popover-md-text-color;
-
-  box-shadow: $popover-md-box-shadow;
 }
 
 .popover-viewport {
-  // opacity: 0;
   transition-delay: 100ms;
 }
diff --git a/core/src/components/popover/popover.md.vars.scss b/core/src/components/popover/popover.md.vars.scss
index 24dbd4f2d3..4241aea4de 100644
--- a/core/src/components/popover/popover.md.vars.scss
+++ b/core/src/components/popover/popover.md.vars.scss
@@ -6,23 +6,11 @@
 /// @prop - Width of the popover content
 $popover-md-width:                     250px !default;
 
-/// @prop - Min width of the popover content
-$popover-md-min-width:                 0 !default;
-
-/// @prop - Minimum height of the popover content
-$popover-md-min-height:                0 !default;
-
 /// @prop - Maximum height of the popover content
 $popover-md-max-height:                90% !default;
 
 /// @prop - Border radius of the popover content
 $popover-md-border-radius:             4px !default;
 
-/// @prop - Text color of the popover content
-$popover-md-text-color:                $text-color !default;
-
-/// @prop - Background of the popover content
-$popover-md-background:                $background-color !default;
-
 /// @prop - Box shadow of the popover content
 $popover-md-box-shadow:                0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index b6d4f989a1..8249f06348 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -4,6 +4,24 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the popover
+   * @prop --box-shadow: Box shadow of the popover
+   *
+   * @prop --min-width: Minimum width of the popover
+   * @prop --width: Width of the popover
+   * @prop --max-width: Maximum width of the popover
+   *
+   * @prop --min-height: Minimum height of the popover
+   * @prop --height: Height of the popover
+   * @prop --max-height: Maximum height of the popover
+   */
+  --background: #{$popover-background-color};
+  --min-width: 0;
+  --min-height: 0;
+  --max-width: auto;
+  --height: auto;
+
   @include position(0, 0, 0, 0);
 
   display: flex;
@@ -12,6 +30,8 @@
   align-items: center;
   justify-content: center;
 
+  color: $popover-text-color;
+
   z-index: $z-index-overlay;
 }
 
@@ -26,6 +46,18 @@
 
   flex-direction: column;
 
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+
+  background: var(--background);
+
+  box-shadow: var(--box-shadow);
+
   overflow: auto;
   z-index: $z-index-overlay-wrapper;
 }
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index bef3a3d6c9..a7efe0a745 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -223,9 +223,8 @@ export class Popover implements ComponentInterface, OverlayInterface {
       },
       'no-router': true,
       class: {
-        'popover-translucent': this.translucent,
-
         ...getClassMap(this.cssClass),
+        'popover-translucent': this.translucent
       }
     };
   }
diff --git a/core/src/components/popover/popover.vars.scss b/core/src/components/popover/popover.vars.scss
index e21c162d17..2ce9fdc7ba 100644
--- a/core/src/components/popover/popover.vars.scss
+++ b/core/src/components/popover/popover.vars.scss
@@ -1 +1,10 @@
 @import "../../themes/ionic.globals";
+
+// Popover
+// --------------------------------------------------
+
+/// @prop - Text color of the popover content
+$popover-text-color:              $text-color !default;
+
+/// @prop - Background color of the popover content
+$popover-background-color:        $background-color !default;
\ No newline at end of file
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index 21c9d6c02f..232caffc72 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -141,6 +141,20 @@ Type: `Promise<void>`
 
 
 
+## CSS Custom Properties
+
+| Name           | Description                   |
+| -------------- | ----------------------------- |
+| `--background` | Background of the popover     |
+| `--box-shadow` | Box shadow of the popover     |
+| `--height`     | Height of the popover         |
+| `--max-height` | Maximum height of the popover |
+| `--max-width`  | Maximum width of the popover  |
+| `--min-height` | Minimum height of the popover |
+| `--min-width`  | Minimum width of the popover  |
+| `--width`      | Width of the popover          |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index 6bf15ece48..43d677753d 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -29,6 +29,7 @@
       <ion-button expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
       <ion-button expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
       <ion-button expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
+      <ion-button expand="block" color="tertiary" onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })">Custom Class Popover</ion-button>
 
       <ion-popover-controller></ion-popover-controller>
     </ion-content>
@@ -45,11 +46,18 @@
     </ion-footer>
 
   </ion-app>
+
+  <style>
+    .my-custom-class {
+      --background: rgba(40, 173, 218, .6);
+      --width: 300px;
+      --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .6);
+
+      color: white;
+    }
+  </style>
+
   <script>
-
-
-    // window.addEventListener('ionPopoverDidDismiss', function(e){console.log('didDismiss', e)})
-    // window.addEventListener('ionPopoverWillDismiss', function(e){console.log('willDismiss', e)})
     async function presentPopover(opts) {
       const popoverController = document.querySelector('ion-popover-controller');
       await popoverController.componentOnReady();
diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
index bc402eab0d..bd54979a4c 100644
--- a/core/src/components/radio/radio.ios.scss
+++ b/core/src/components/radio/radio.ios.scss
@@ -6,10 +6,9 @@
 
 :host {
   --color-checked: #{ion-color(primary, base)};
-  --width: #{$radio-ios-icon-width};
-  --height: #{$radio-ios-icon-height};
-  --inner-width: 5px;
-  --inner-height: 12px;
+
+  width: $radio-ios-icon-width;
+  height: $radio-ios-icon-height;
 }
 
 :host(.ion-color.radio-checked) .radio-inner {
@@ -24,6 +23,11 @@
 // iOS Radio Checkmark: Checked
 // -----------------------------------------
 
+.radio-inner {
+  width: 33%;
+  height: 50%;
+}
+
 :host(.radio-checked) .radio-inner {
   transform: rotate(45deg);
 
@@ -34,6 +38,7 @@
   border-color: var(--color-checked);
 }
 
+
 // iOS Radio: Disabled
 // -----------------------------------------
 :host(.radio-disabled) {
diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss
index 4a62d0022b..412c45d562 100644
--- a/core/src/components/radio/radio.ios.vars.scss
+++ b/core/src/components/radio/radio.ios.vars.scss
@@ -11,10 +11,10 @@ $radio-ios-color-on:                  current-color(base) !default;
 $radio-ios-background-color-focused:  ion-color(primary, tint) !default;
 
 /// @prop - Width of the radio icon
-$radio-ios-icon-width:                16px !default;
+$radio-ios-icon-width:                15px !default;
 
 /// @prop - Height of the radio icon
-$radio-ios-icon-height:               21px !default;
+$radio-ios-icon-height:               24px !default;
 
 /// @prop - Border width of the radio icon
 $radio-ios-icon-border-width:         2px !default;
diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss
index 082114dc7b..4cca02bc2f 100644
--- a/core/src/components/radio/radio.md.scss
+++ b/core/src/components/radio/radio.md.scss
@@ -7,12 +7,11 @@
 :host {
   --color: #{$radio-md-color-off};
   --color-checked: #{ion-color(primary, base)};
-  --width: #{$radio-md-icon-width};
-  --height: #{$radio-md-icon-height};
   --border-width: #{$radio-md-icon-border-width};
   --border-style: #{$radio-md-icon-border-style};
-  --inner-width: calc(var(--width) / 2);
-  --inner-height: calc(var(--height) / 2);
+
+  width: $radio-md-icon-width;
+  height: $radio-md-icon-height;
 }
 
 :host(.ion-color) .radio-inner {
@@ -42,6 +41,9 @@
 .radio-inner {
   @include border-radius(50%);
 
+  width: calc(50% + var(--border-width));
+  height: calc(50% + var(--border-width));
+
   transform: scale3d(0, 0, 0);
 
   transition: transform $radio-md-transition-duration $radio-md-transition-easing;
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index b121560b38..4d61bbc9a1 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -7,10 +7,6 @@
   /**
    * @prop --color: Color of the radio
    * @prop --color-checked: Color of the checked radio
-   * @prop --width: Width of the radio button 
-   * @prop --height: Height of the radio button 
-   * @prop --inner-width: Width of the dot or checkmark
-   * @prop --inner-height: Height of the dot or checkmark
    */
 
   display: inline-block;
@@ -33,17 +29,12 @@
   align-items: center;
   justify-content: center;
 
-  width: var(--width);
-  height: var(--height);
+  width: 100%;
+  height: 100%;
 
   contain: layout size style;
 }
 
-.radio-inner {
-  width: var(--inner-width);
-  height: var(--inner-height);
-}
-
 button {
   @include input-cover();
 }
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index da71ca445b..af6142d3e2 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -66,14 +66,10 @@ An `ion-radio-group` can be used to group a set of radios. When radios are insid
 
 ## CSS Custom Properties
 
-| Name              | Description                    |
-| ----------------- | ------------------------------ |
-| `--color`         | Color of the radio             |
-| `--color-checked` | Color of the checked radio     |
-| `--height`        | Height of the radio button     |
-| `--inner-height`  | Height of the dot or checkmark |
-| `--inner-width`   | Width of the dot or checkmark  |
-| `--width`         | Width of the radio button      |
+| Name              | Description                |
+| ----------------- | -------------------------- |
+| `--color`         | Color of the radio         |
+| `--color-checked` | Color of the checked radio |
 
 
 ----------------------------------------------
diff --git a/core/src/components/radio/test/standalone/index.html b/core/src/components/radio/test/standalone/index.html
index d5e5f510c3..543f409910 100644
--- a/core/src/components/radio/test/standalone/index.html
+++ b/core/src/components/radio/test/standalone/index.html
@@ -47,6 +47,7 @@
   <ion-radio class="custom"></ion-radio>
   <ion-radio class="custom" checked></ion-radio>
   <ion-radio class="custom" checked color="tertiary"></ion-radio>
+  <ion-radio class="custom-size" checked color="danger"></ion-radio>
 
   <style>
     /* to be able to see the radio buttons */
@@ -59,6 +60,18 @@
       --color: orange;
       --color-checked: hotpink;
     }
+
+    .ios .custom-size {
+      width: 60px;
+      height: 96px;
+    }
+
+    .md .custom-size {
+      --border-width: 8px;
+
+      width: 80px;
+      height: 80px;
+    }
   </style>
 </body>
 </html>
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index 93149f446a..e9df3e2821 100644
--- a/core/src/components/toast/readme.md
+++ b/core/src/components/toast/readme.md
@@ -170,16 +170,22 @@ Type: `Promise<void>`
 
 ## CSS Custom Properties
 
-| Name              | Description                |
-| ----------------- | -------------------------- |
-| `--background`    | Background of the toast    |
-| `--border-color`  | Border color of the toast  |
-| `--border-radius` | Border radius of the toast |
-| `--border-style`  | Border style of the toast  |
-| `--border-width`  | Border width of the toast  |
-| `--box-shadow`    | Box shadow of the toast    |
-| `--button-color`  | Color of the button text   |
-| `--color`         | Color of the toast text    |
+| Name              | Description                 |
+| ----------------- | --------------------------- |
+| `--background`    | Background of the toast     |
+| `--border-color`  | Border color of the toast   |
+| `--border-radius` | Border radius of the toast  |
+| `--border-style`  | Border style of the toast   |
+| `--border-width`  | Border width of the toast   |
+| `--box-shadow`    | Box shadow of the toast     |
+| `--button-color`  | Color of the button text    |
+| `--color`         | Color of the toast text     |
+| `--height`        | Height of the toast         |
+| `--max-height`    | Maximum height of the toast |
+| `--max-width`     | Maximum width of the toast  |
+| `--min-height`    | Minimum height of the toast |
+| `--min-width`     | Minimum width of the toast  |
+| `--width`         | Width of the toast          |
 
 
 ----------------------------------------------
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index cd10d0807a..24caa4b7fd 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -8,20 +8,10 @@
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../dist/ionic.js"></script>
-
-  <style>
-    ion-toast.toast-border {
-      --border-radius: 20px;
-      --border-width: 5px;
-      --border-style: double;
-      --border-color: yellow;
-    }
-  </style>
 </head>
 
 <body>
   <ion-app>
-
       <ion-header>
         <ion-toolbar>
           <ion-title>Toast - Basic</ion-title>
@@ -37,7 +27,7 @@
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'toast-border'})">Show Toast with border</ion-button>
+        <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'my-custom-class'})">Show Toast with Custom Class</ion-button>
 
         <ion-toast-controller></ion-toast-controller>
 
@@ -101,6 +91,18 @@
       --ion-safe-area-bottom: 40px;
     }
 
+    .my-custom-class {
+      --border-radius: 20px;
+      --border-width: 5px;
+      --border-style: double;
+      --border-color: yellow;
+      --background: lightyellow;
+      --button-color: black;
+      --color: black;
+      --width: 180px;
+      --height: 180px;
+    }
+
     f {
       display: block;
       background: blue;
diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss
index c3ec929eb8..5ec1c201e7 100644
--- a/core/src/components/toast/toast.ios.scss
+++ b/core/src/components/toast/toast.ios.scss
@@ -6,9 +6,10 @@
 
 :host {
   --background: #{$toast-ios-background-color};
+  --border-radius: #{$toast-ios-border-radius};
   --button-color: #{$toast-ios-button-color};
   --color: #{$toast-ios-title-color};
-  --border-radius: #{$toast-ios-border-radius};
+  --max-width: #{$toast-max-width};
 
   font-size: $toast-ios-title-font-size;
 }
@@ -16,13 +17,10 @@
 .toast-wrapper {
   @include position-horizontal(10px, 10px);
   @include margin(auto);
-  @include border-radius(var(--border-radius));
 
   display: block;
   position: absolute;
 
-  max-width: $toast-max-width;
-
   z-index: $z-index-overlay-wrapper;
 }
 
diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss
index 66aa9061a2..489d25ddb6 100644
--- a/core/src/components/toast/toast.md.scss
+++ b/core/src/components/toast/toast.md.scss
@@ -5,25 +5,23 @@
 // --------------------------------------------------
 
 :host {
-  --button-color: #{ion-color(primary, base)};
   --background: #{$toast-md-background};
-  --color: #{$toast-md-color};
   --border-radius: #{$toast-md-border-radius};
   --box-shadow: #{$toast-md-box-shadow};
+  --button-color: #{ion-color(primary, base)};
+  --color: #{$toast-md-color};
+  --max-width: #{$toast-max-width};
 
   font-size: #{$toast-md-font-size};
 }
 
 .toast-wrapper {
-  @include border-radius(var(--border-radius));
   @include position-horizontal(8px, 8px);
   @include margin(auto);
 
   display: block;
   position: absolute;
 
-  max-width: $toast-max-width;
-
   opacity: .01;
 
   z-index: $z-index-overlay-wrapper;
diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index bb8c7068e7..1b97e05696 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -6,19 +6,34 @@
 :host {
   /**
    * @prop --background: Background of the toast
+   * @prop --color: Color of the toast text
+   *
    * @prop --border-color: Border color of the toast
    * @prop --border-radius: Border radius of the toast
    * @prop --border-width: Border width of the toast
    * @prop --border-style: Border style of the toast
+   *
    * @prop --box-shadow: Box shadow of the toast
+   *
+   * @prop --min-width: Minimum width of the toast
+   * @prop --width: Width of the toast
+   * @prop --max-width: Maximum width of the toast
+   *
+   * @prop --min-height: Minimum height of the toast
+   * @prop --height: Height of the toast
+   * @prop --max-height: Maximum height of the toast
+   *
    * @prop --button-color: Color of the button text
-   * @prop --color: Color of the toast text
    */
-  --button-color: inherit;
   --border-width: 0;
   --border-style: none;
   --border-color: initial;
   --box-shadow: none;
+  --min-width: auto;
+  --width: auto;
+  --min-height: auto;
+  --height: auto;
+  --max-height: auto;
 
   @include position(0, null, null, 0);
 
@@ -38,12 +53,26 @@
 }
 
 :host(.ion-color) {
-  --color: #{current-color(contrast)};
-  --background: #{current-color(base)};
   --button-color: inherit;
+
+  color: #{current-color(contrast)};
+}
+
+:host(.ion-color) .toast-wrapper {
+  background: #{current-color(base)};
 }
 
 .toast-wrapper {
+  @include border-radius(var(--border-radius));
+
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--border-color);