diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 82a097d7cc..6bf059b998 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -702,14 +702,14 @@ export class Segment {
 }
 
 export declare interface SegmentButton extends StencilComponents<'IonSegmentButton'> {}
-@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'checked', 'disabled', 'layout', 'value'] })
+@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'checked', 'disabled', 'layout', 'value'] })
 export class SegmentButton {
   ionSelect!: EventEmitter<CustomEvent>;
 
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     const el = r.nativeElement;
-    proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'layout', 'value']);
+    proxyInputs(this, el, ['mode', 'checked', 'disabled', 'layout', 'value']);
     proxyOutputs(this, el, ['ionSelect']);
   }
 }
@@ -847,27 +847,27 @@ export class Tab {
 }
 
 export declare interface TabBar extends StencilComponents<'IonTabBar'> {}
-@Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'layout', 'selectedTab', 'translucent'] })
+@Component({ selector: 'ion-tab-bar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'selectedTab', 'translucent'] })
 export class TabBar {
   ionTabBarChanged!: EventEmitter<CustomEvent>;
 
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     const el = r.nativeElement;
-    proxyInputs(this, el, ['mode', 'color', 'layout', 'selectedTab', 'translucent']);
+    proxyInputs(this, el, ['mode', 'color', 'selectedTab', 'translucent']);
     proxyOutputs(this, el, ['ionTabBarChanged']);
   }
 }
 
 export declare interface TabButton extends StencilComponents<'IonTabButton'> {}
-@Component({ selector: 'ion-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'layout', 'href', 'tab', 'disabled'] })
+@Component({ selector: 'ion-tab-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['mode', 'layout', 'href', 'tab', 'disabled'] })
 export class TabButton {
   ionTabButtonClick!: EventEmitter<CustomEvent>;
 
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     const el = r.nativeElement;
-    proxyInputs(this, el, ['mode', 'color', 'layout', 'href', 'tab', 'disabled']);
+    proxyInputs(this, el, ['mode', 'layout', 'href', 'tab', 'disabled']);
     proxyOutputs(this, el, ['ionTabButtonClick']);
   }
 }
diff --git a/core/api.txt b/core/api.txt
index 8078076390..e215126378 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -875,7 +875,6 @@ ion-searchbar,css-prop,--placeholder-opacity
 
 ion-segment-button
 ion-segment-button,prop,checked,boolean,false,false
-ion-segment-button,prop,color,string | undefined,undefined,false
 ion-segment-button,prop,disabled,boolean,false,false
 ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false
 ion-segment-button,prop,mode,"ios" | "md",undefined,false
@@ -1010,7 +1009,6 @@ ion-split-pane,css-prop,--border
 
 ion-tab-bar
 ion-tab-bar,prop,color,string | undefined,undefined,false
-ion-tab-bar,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide",'icon-top',false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false
 ion-tab-bar,prop,translucent,boolean,false,false
@@ -1019,7 +1017,6 @@ ion-tab-bar,css-prop,--border
 ion-tab-bar,css-prop,--color
 
 ion-tab-button
-ion-tab-button,prop,color,string | undefined,undefined,false
 ion-tab-button,prop,disabled,boolean,false,false
 ion-tab-button,prop,href,string | undefined,undefined,false
 ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 93a59c144f..b2370e43fb 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -3847,10 +3847,6 @@ export namespace Components {
     */
     'checked': boolean;
     /**
-    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-    */
-    'color'?: Color;
-    /**
     * If `true`, the user cannot interact with the segment button.
     */
     'disabled': boolean;
@@ -3873,10 +3869,6 @@ export namespace Components {
     */
     'checked'?: boolean;
     /**
-    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-    */
-    'color'?: Color;
-    /**
     * If `true`, the user cannot interact with the segment button.
     */
     'disabled'?: boolean;
@@ -4389,10 +4381,6 @@ export namespace Components {
     */
     'color'?: Color;
     /**
-    * Set the layout of the text and icon in the tab bar.
-    */
-    'layout': TabButtonLayout;
-    /**
     * The mode determines which platform styles to use.
     */
     'mode': Mode;
@@ -4411,10 +4399,6 @@ export namespace Components {
     */
     'color'?: Color;
     /**
-    * Set the layout of the text and icon in the tab bar.
-    */
-    'layout'?: TabButtonLayout;
-    /**
     * The mode determines which platform styles to use.
     */
     'mode'?: Mode;
@@ -4430,10 +4414,6 @@ export namespace Components {
   }
 
   interface IonTabButton {
-    /**
-    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-    */
-    'color'?: Color;
     /**
     * The selected tab component
     */
@@ -4456,10 +4436,6 @@ export namespace Components {
     'tab': string;
   }
   interface IonTabButtonAttributes extends StencilHTMLAttributes {
-    /**
-    * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
-    */
-    'color'?: Color;
     /**
     * The selected tab component
     */
diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
index 452d16f984..3c9a99f5c3 100644
--- a/core/src/components/checkbox/checkbox.md.scss
+++ b/core/src/components/checkbox/checkbox.md.scss
@@ -36,9 +36,7 @@
 // Material Design Checkbox: Disabled
 // -----------------------------------------
 
-// TODO
-// .item-md.item-checkbox-disabled ion-label {
-
+// TODO .item-md.item-checkbox-disabled ion-label
 :host(.checkbox-disabled) {
   opacity: $checkbox-md-disabled-opacity;
 }
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index d11c978709..d556527eb8 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -18,12 +18,3 @@
 
   background-size: $input-ios-input-clear-icon-size;
 }
-
-// iOS Inset Input
-// --------------------------------------------------
-
-// TODO: where is it apply
-// :host(.inset-input) {
-//   @include padding($input-ios-inset-padding-top, $input-ios-inset-padding-end, $input-ios-inset-padding-bottom, $input-ios-inset-padding-start);
-//   @include margin($input-ios-inset-margin-top, $input-ios-inset-margin-end, $input-ios-inset-margin-bottom, $input-ios-inset-margin-start);
-// }
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index d5a446d562..5ff32b4c99 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -23,11 +23,3 @@
 
   background-size: $input-md-input-clear-icon-size;
 }
-
-// Material Design Inset Input
-// --------------------------------------------------
-
-// .inset-input {
-//   @include padding($input-md-inset-padding-top, $input-md-inset-padding-end, $input-md-inset-padding-bottom, $input-md-inset-padding-start);
-//   @include margin($input-md-inset-margin-top, $input-md-inset-margin-end, $input-md-inset-margin-bottom, $input-md-inset-margin-start);
-// }
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 5c6f582111..41fbd63a02 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -35,13 +35,11 @@
 
   width: 100%;
 
-  /* stylelint-disable */
-  /* TODO: find a better solution in padding.css, that does not require !important, */
+  /* stylelint-disable-next-line all */
   padding: 0 !important;
 
   background: var(--background);
   color: var(--color);
-  /* stylelint-enable */
 
   font-family: $font-family-base;
 
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index 014dd47a4a..f5b317d0b8 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -101,11 +101,6 @@
   font-size: 13px;
 }
 
-// TODO
-// .item-ios .button-small-ios ion-icon[slot="icon-only"] {
-//   @include padding(0, 1px);
-// }
-
 
 // iOS Item Avatar & Thumbnail
 // --------------------------------------------------
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index c6a6c57043..88e161b3ac 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -73,7 +73,7 @@
 // Material Design Multi-line Item
 // --------------------------------------------------
 
-// TODO this works if manually adding the class / work with prop?
+// TODO this works if manually adding the class / should it work with prop?
 // Multi-line items should align the slotted content at the top
 :host(.item-multi-line) ::slotted([slot="start"]),
 :host(.item-multi-line) ::slotted([slot="end"]) {
@@ -207,7 +207,7 @@
 // Material Design Item Button
 // --------------------------------------------------
 
-::slotted(.button-small-md) {
+::slotted(.button-small) {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: .6em;
@@ -218,12 +218,6 @@
 }
 
 
-// TODO, review
-::slotted(.button-small-md) ion-icon[slot="icon-only"] {
-  @include padding(0);
-}
-
-
 // Material Design Radio Item Label: Checked
 // -----------------------------------------
 
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index 85cdf262ff..48dd9946f7 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -85,15 +85,15 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
 
 <!-- Icon top -->
 <ion-segment>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item One</ion-label>
     <ion-icon name="call"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button checked layout="icon-top">
+  <ion-segment-button checked>
     <ion-label>Item Two</ion-label>
     <ion-icon name="heart"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item Three</ion-label>
     <ion-icon name="pin"></ion-icon>
   </ion-segment-button>
@@ -241,15 +241,15 @@ export class SegmentButtonExample {
 
 <!-- Icon top -->
 <ion-segment>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item One</ion-label>
     <ion-icon name="call"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button checked layout="icon-top">
+  <ion-segment-button checked>
     <ion-label>Item Two</ion-label>
     <ion-icon name="heart"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item Three</ion-label>
     <ion-icon name="pin"></ion-icon>
   </ion-segment-button>
@@ -318,14 +318,13 @@ for (let i = 0; i < segmentButtons.length; i++) {
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type                                                                                                    | Default               |
-| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------- |
-| `checked`  | `checked`  | If `true`, the segment button is selected.                                                                                                                                                                                                                             | `boolean`                                                                                               | `false`               |
-| `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                                                                   | `undefined`           |
-| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button.                                                                                                                                                                                                           | `boolean`                                                                                               | `false`               |
-| `layout`   | `layout`   | Set the layout of the text and icon in the segment.                                                                                                                                                                                                                    | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'`          |
-| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                                                                         | `undefined`           |
-| `value`    | `value`    | The value of the segment button.                                                                                                                                                                                                                                       | `string`                                                                                                | `'ion-sb-' + (ids++)` |
+| Property   | Attribute  | Description                                                  | Type                                                                                                    | Default               |
+| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------------------- |
+| `checked`  | `checked`  | If `true`, the segment button is selected.                   | `boolean`                                                                                               | `false`               |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean`                                                                                               | `false`               |
+| `layout`   | `layout`   | Set the layout of the text and icon in the segment.          | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'`          |
+| `mode`     | `mode`     | The mode determines which platform styles to use.            | `"ios" \| "md"`                                                                                         | `undefined`           |
+| `value`    | `value`    | The value of the segment button.                             | `string`                                                                                                | `'ion-sb-' + (ids++)` |
 
 
 ## Events
@@ -348,7 +347,7 @@ for (let i = 0; i < segmentButtons.length; i++) {
 | `--border-style`            | Style of the segment button border                                  |
 | `--border-width`            | Width of the segment button border                                  |
 | `--color`                   | Color of the segment button                                         |
-| `--color-activated`         | Color of the activated (pressed) segment button                     |
+| `--color-activated`         | Color of the activated segment button                               |
 | `--color-checked`           | Color of the checked segment button                                 |
 | `--color-checked-disabled`  | Color of the checked & disabled segment button                      |
 | `--color-disabled`          | Color of the disabled segment button                                |
diff --git a/core/src/components/segment-button/segment-button.ios.scss b/core/src/components/segment-button/segment-button.ios.scss
index f63cd5757a..3c90aa23b9 100644
--- a/core/src/components/segment-button/segment-button.ios.scss
+++ b/core/src/components/segment-button/segment-button.ios.scss
@@ -5,16 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$segment-button-ios-background-color};
-  --background-hover: #{$segment-button-ios-background-color-hover};
-  --background-activated: #{$segment-button-ios-background-color-activated};
-  --background-checked: #{$segment-button-ios-background-color-checked};
-  --border-color: #{$segment-button-ios-border-color};
-  --color: #{$segment-button-ios-text-color};
-  --color-activated: var(--color);
-  --color-checked: #{$segment-button-ios-text-color-checked};
-  --color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
-  --color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)};
   --border-radius: #{$segment-button-ios-border-radius};
   --border-width: #{$segment-button-ios-border-width};
   --border-style: solid;
diff --git a/core/src/components/segment-button/segment-button.md.scss b/core/src/components/segment-button/segment-button.md.scss
index b83b455ed7..de33a7a123 100644
--- a/core/src/components/segment-button/segment-button.md.scss
+++ b/core/src/components/segment-button/segment-button.md.scss
@@ -10,16 +10,6 @@
   --padding-bottom: #{$segment-button-md-padding-bottom};
   --padding-start: #{$segment-button-md-padding-start};
   --transition: #{$segment-button-md-transition};
-  --background: #{$segment-button-md-background};
-  --background-hover: #{$segment-button-md-background-hover};
-  --background-activated: #{$segment-button-md-background-activated};
-  --color: #{$segment-button-md-text-color};
-  --color-activated: var(--color);
-  --color-checked: #{$segment-button-md-text-color-checked};
-  --color-checked-disabled: var(--color-checked);
-  --indicator-color: transparent;
-  --indicator-color-checked: var(--color-checked);
-  --ripple-color: var(--color-checked);
 
   min-width: $segment-button-md-min-width;
 
diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss
index e5113224b9..4a1783e271 100644
--- a/core/src/components/segment-button/segment-button.md.vars.scss
+++ b/core/src/components/segment-button/segment-button.md.vars.scss
@@ -12,6 +12,9 @@ $segment-button-md-text-color:                        rgba(var(--ion-text-color-
 /// @prop - Background of the segment button
 $segment-button-md-background:                        none !default;
 
+/// @prop - Background of the checked segment button
+$segment-button-md-background-checked:                $segment-button-md-background !default;
+
 /// @prop - Background of the hovered segment button
 $segment-button-md-background-hover:                  ion-color(primary, base, .04) !default;
 
diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss
index 337bef974a..d7c3d164cc 100644
--- a/core/src/components/segment-button/segment-button.scss
+++ b/core/src/components/segment-button/segment-button.scss
@@ -11,7 +11,7 @@
    * @prop --background-checked: Background of the checked segment button
    *
    * @prop --color: Color of the segment button
-   * @prop --color-activated: Color of the activated (pressed) segment button
+   * @prop --color-activated: Color of the activated segment button
    * @prop --color-checked: Color of the checked segment button
    * @prop --color-disabled: Color of the disabled segment button
    * @prop --color-checked-disabled: Color of the checked & disabled segment button
@@ -41,7 +41,6 @@
   --padding-end: 0;
   --padding-top: 0;
   --padding-bottom: 0;
-  --indicator-color: transparent;
 
   flex: 1 0 auto;
   flex-direction: column;
@@ -52,15 +51,17 @@
   border-style: var(--border-style);
   border-color: var(--border-color);
 
+  background: var(--background);
+
   color: var(--color);
 
   text-decoration: none;
   text-overflow: ellipsis;
 
   white-space: nowrap;
-  font-kerning: none;
 
   overflow: hidden;
+  font-kerning: none;
 }
 
 :host(:first-of-type) {
@@ -103,48 +104,13 @@
 
   outline: none;
 
-  background: var(--background);
+  background: transparent;
 
   contain: content;
   cursor: pointer;
 }
 
 
-// Segment Button: Checked
-// --------------------------------------------------
-
-:host(.segment-button-checked) {
-  background: var(--background-checked);
-  color: var(--color-checked);
-}
-
-:host(.segment-button-checked) .segment-button-indicator {
-  background-color: var(--indicator-color-checked);
-}
-
-// Segment Button: Activated
-// --------------------------------------------------
-
-:host(.activated) {
-  color: var(--color-activated);
-}
-
-
-// Segment Button: Disabled
-// --------------------------------------------------
-
-:host(.segment-button-disabled) {
-  color: var(--color-disabled);
-}
-
-// Segment Button: Checked & Disabled
-// --------------------------------------------------
-
-:host(.segment-button-disabled.segment-button-checked) {
-  color: var(--color-checked-disabled);
-}
-
-
 // Segment Button: Indicator
 // --------------------------------------------------
 
@@ -161,6 +127,41 @@
 }
 
 
+// Segment Button: Checked
+// --------------------------------------------------
+
+:host(.segment-button-checked) {
+  background: var(--background-checked);
+  color: var(--color-checked);
+}
+
+:host(.segment-button-checked) .segment-button-indicator {
+  background-color: var(--indicator-color-checked, var(--color-checked));
+}
+
+// Segment Button: Activated
+// --------------------------------------------------
+
+:host(.activated) {
+  color: var(--color-activated, var(--color));
+}
+
+
+// Segment Button: Disabled
+// --------------------------------------------------
+
+:host(.segment-button-disabled) {
+  color: var(--color-disabled);
+}
+
+// Segment Button: Checked & Disabled
+// --------------------------------------------------
+
+:host(.segment-button-disabled.segment-button-checked) {
+  color: var(--color-checked-disabled);
+}
+
+
 // Segment Button Icon
 // --------------------------------------------------
 
@@ -219,5 +220,5 @@
 // --------------------------------------------------
 
 ion-ripple-effect {
-  color: var(--ripple-color);
+  color: var(--ripple-color, var(--color-checked));
 }
diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx
index 9909858bff..f46113ec36 100644
--- a/core/src/components/segment-button/segment-button.tsx
+++ b/core/src/components/segment-button/segment-button.tsx
@@ -1,7 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 
-import { Color, Mode, SegmentButtonLayout } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { Mode, SegmentButtonLayout } from '../../interface';
 
 let ids = 0;
 
@@ -17,13 +16,6 @@ export class SegmentButton implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 
-  /**
-   * The color to use from your application's color palette.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information on colors, see [theming](/docs/theming/basics).
-   */
-  @Prop() color?: Color;
-
   /**
    * The mode determines which platform styles to use.
    */
@@ -74,12 +66,11 @@ export class SegmentButton implements ComponentInterface {
   }
 
   hostData() {
-    const { disabled, checked, color, layout, hasIcon, hasLabel } = this;
+    const { checked, disabled, hasIcon, hasLabel, layout } = this;
     return {
       'ion-activatable': 'instant',
       'aria-disabled': disabled ? 'true' : null,
       class: {
-        ...createColorClasses(color),
         'segment-button-has-label': hasLabel,
         'segment-button-has-icon': hasIcon,
         'segment-button-has-label-only': hasLabel && !hasIcon,
diff --git a/core/src/components/segment-button/usage/angular.md b/core/src/components/segment-button/usage/angular.md
index 4b30ba0af9..fa70b10325 100644
--- a/core/src/components/segment-button/usage/angular.md
+++ b/core/src/components/segment-button/usage/angular.md
@@ -73,15 +73,15 @@
 
 <!-- Icon top -->
 <ion-segment>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item One</ion-label>
     <ion-icon name="call"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button checked layout="icon-top">
+  <ion-segment-button checked>
     <ion-label>Item Two</ion-label>
     <ion-icon name="heart"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item Three</ion-label>
     <ion-icon name="pin"></ion-icon>
   </ion-segment-button>
diff --git a/core/src/components/segment-button/usage/javascript.md b/core/src/components/segment-button/usage/javascript.md
index 498d8c130e..a4f22da779 100644
--- a/core/src/components/segment-button/usage/javascript.md
+++ b/core/src/components/segment-button/usage/javascript.md
@@ -73,15 +73,15 @@
 
 <!-- Icon top -->
 <ion-segment>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item One</ion-label>
     <ion-icon name="call"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button checked layout="icon-top">
+  <ion-segment-button checked>
     <ion-label>Item Two</ion-label>
     <ion-icon name="heart"></ion-icon>
   </ion-segment-button>
-  <ion-segment-button layout="icon-top">
+  <ion-segment-button>
     <ion-label>Item Three</ion-label>
     <ion-icon name="pin"></ion-icon>
   </ion-segment-button>
diff --git a/core/src/components/segment/segment.ios.scss b/core/src/components/segment/segment.ios.scss
index 9c5c936912..104d18143c 100644
--- a/core/src/components/segment/segment.ios.scss
+++ b/core/src/components/segment/segment.ios.scss
@@ -4,6 +4,19 @@
 // iOS Segment
 // --------------------------------------------------
 
+:host {
+  --background: #{$segment-button-ios-background-color};
+  --background-hover: #{$segment-button-ios-background-color-hover};
+  --background-activated: #{$segment-button-ios-background-color-activated};
+  --background-checked: #{$segment-button-ios-background-color-checked};
+  --color: #{$segment-button-ios-text-color};
+  --color-checked: #{$segment-button-ios-text-color-checked};
+  --color-disabled: #{ion-color(primary, base, $segment-button-ios-opacity-disabled)};
+  --color-checked-disabled: #{ion-color(primary, contrast, $segment-button-ios-opacity-disabled)};
+  --border-color: #{$segment-button-ios-border-color};
+  --indicator-color: transparent;
+}
+
 :host(.segment-disabled) {
   opacity: $segment-ios-opacity-disabled;
 }
@@ -16,6 +29,7 @@
   --border-color: #{current-color(base)};
   --background-hover: #{current-color(base, .04)};
 
+  background: transparent;
   color: #{current-color(base)};
 }
 
@@ -51,10 +65,11 @@
 }
 
 :host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
-  --background-checked: var(--color);
-  --border-color: var(--color);
-  --color: #{var(--ion-toolbar-color-unchecked, $segment-button-ios-text-color)};
-  --color-checked: #{var(--ion-toolbar-color-checked, $segment-button-ios-text-color-checked)};
+  color: #{var(--ion-toolbar-color-unchecked, var(--color))};
+}
+
+:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
+  color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
 }
 
 // Segment: Color Toolbar
diff --git a/core/src/components/segment/segment.md.scss b/core/src/components/segment/segment.md.scss
index d80a781033..c6b6d9b1f2 100644
--- a/core/src/components/segment/segment.md.scss
+++ b/core/src/components/segment/segment.md.scss
@@ -4,6 +4,17 @@
 // Material Design Segment
 // --------------------------------------------------
 
+:host {
+  --background: #{$segment-button-md-background};
+  --background-checked: #{$segment-button-md-background-checked};
+  --background-hover: #{$segment-button-md-background-hover};
+  --background-activated: #{$segment-button-md-background-activated};
+  --color: #{$segment-button-md-text-color};
+  --color-checked: #{$segment-button-md-text-color-checked};
+  --color-checked-disabled: var(--color-checked);
+  --indicator-color: transparent;
+}
+
 :host(.segment-disabled) {
   opacity: $segment-md-opacity-disabled;
 }
@@ -15,6 +26,9 @@
   --background-hover: #{current-color(base, .04)};
   --background-activated: #{current-color(base, .16)};
   --ripple-color: #{current-color(base)};
+
+  background: transparent;
+  color: $segment-button-md-text-color;
 }
 
 :host(.ion-color)::slotted(.segment-button-checked) {
@@ -31,8 +45,11 @@
 // --------------------------------------------------
 
 :host-context(ion-toolbar):not(.ion-color)::slotted(ion-segment-button) {
-  --color: #{var(--ion-toolbar-color-unchecked, $segment-button-md-text-color)};
-  --color-checked: #{var(--ion-toolbar-color-checked, $segment-button-md-text-color-checked)};
+  color: #{var(--ion-toolbar-color-unchecked, var(--color))};
+}
+
+:host-context(ion-toolbar):not(.ion-color)::slotted(.segment-button-checked) {
+  color: #{var(--ion-toolbar-color-checked, var(--color-checked))};
 }
 
 
diff --git a/core/src/components/segment/segment.scss b/core/src/components/segment/segment.scss
index 4ec82acf3b..71317335e3 100644
--- a/core/src/components/segment/segment.scss
+++ b/core/src/components/segment/segment.scss
@@ -4,6 +4,10 @@
 // --------------------------------------------------
 
 :host {
+  --indicator-color-checked: initial;
+  --ripple-color: initial;
+  --color-activated: initial;
+
   @include font-smoothing();
 
   display: flex;
diff --git a/core/src/components/segment/test/custom/e2e.ts b/core/src/components/segment/test/custom/e2e.ts
new file mode 100644
index 0000000000..61dc6b9f67
--- /dev/null
+++ b/core/src/components/segment/test/custom/e2e.ts
@@ -0,0 +1,12 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('segment: custom', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/segment/test/custom?ionic:_testing=true'
+  });
+
+  await page.waitFor(250);
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/segment/test/custom/index.html b/core/src/components/segment/test/custom/index.html
new file mode 100644
index 0000000000..b3b0679a44
--- /dev/null
+++ b/core/src/components/segment/test/custom/index.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Segment - Custom</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-segment value="Free">
+          <ion-segment-button value="Paid">
+            <ion-label>Paid</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="Free">
+            <ion-label>Free</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="Top">
+            <ion-label>Top</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-segment class="custom-icon" value="instagram">
+          <ion-segment-button class="segment-facebook" value="facebook">
+            <ion-label>Facebook</ion-label>
+            <ion-icon name="logo-facebook"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button class="segment-instagram" value="instagram">
+            <ion-label>Instagram</ion-label>
+            <ion-icon name="logo-instagram"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button class="segment-slack" value="slack">
+            <ion-label>Slack</ion-label>
+            <ion-icon name="logo-slack"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+
+      <ion-segment class="custom" value="active">
+        <ion-segment-button value="active">
+          <ion-label>Active</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="disabled" disabled="true">
+          <ion-label>Disabled</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="inactive" disabled="false">
+          <ion-label>Inactive</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+
+      <ion-segment class="custom-icon" value="instagram">
+        <ion-segment-button class="segment-facebook" value="facebook">
+          <ion-label>Facebook</ion-label>
+          <ion-icon name="logo-facebook"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button class="segment-instagram" value="instagram">
+          <ion-label>Instagram</ion-label>
+          <ion-icon name="logo-instagram"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button class="segment-slack" value="slack">
+          <ion-label>Slack</ion-label>
+          <ion-icon name="logo-slack"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>
+
+      <ion-segment class="custom-color" color="danger" value="dining">
+        <ion-segment-button value="dining">
+          <ion-label>Dining</ion-label>
+          <ion-icon name="cafe"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="travel">
+          <ion-label>Travel</ion-label>
+          <ion-icon name="airplane"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="entertainment">
+          <ion-label>Entertainment</ion-label>
+          <ion-icon name="radio"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>
+
+      <h2>Activated</h2>
+
+      <ion-segment>
+        <ion-segment-button class="activated" value="Paid">
+          <ion-label>Paid</ion-label>
+        </ion-segment-button>
+        <ion-segment-button class="activated" value="Free">
+          <ion-label>Free</ion-label>
+        </ion-segment-button>
+        <ion-segment-button class="activated" value="Top">
+          <ion-label>Top</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+
+      <ion-segment class="custom-icon">
+        <ion-segment-button class="activated segment-facebook" value="facebook">
+          <ion-label>Facebook</ion-label>
+          <ion-icon name="logo-facebook"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button class="activated segment-instagram" value="instagram">
+          <ion-label>Instagram</ion-label>
+          <ion-icon name="logo-instagram"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button class="activated segment-slack" value="slack">
+          <ion-label>Slack</ion-label>
+          <ion-icon name="logo-slack"></ion-icon>
+        </ion-segment-button>
+      </ion-segment>
+    </ion-content>
+  </ion-app>
+
+</body>
+
+<script>
+  var segment = document.getElementById('browserSegment');
+  var results = document.getElementById('browserResults');
+
+  checkUrl();
+
+  segment.addEventListener('ionChange', function () {
+    checkUrl();
+  });
+
+  function checkUrl() {
+    var url = window.location.href;
+
+    if (url.search('#bookmarks') > -1) {
+      setResults('bookmarks');
+    } else if (url.search('#reading') > -1) {
+      setResults('reading');
+    } else if (url.search('#links') > -1) {
+      setResults('links');
+    }
+  }
+
+  function setResults(value) {
+    results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
+    segment.value = value;
+  }
+</script>
+
+<style>
+  body {
+    margin: 0;
+  }
+
+  ion-segment {
+    margin-bottom: 10px;
+  }
+
+  ion-toolbar ion-segment {
+    margin-bottom: 0;
+  }
+
+  pre {
+    border: 1px solid #e6e9ee;
+    background: white;
+    margin: 10px;
+    padding: 4px;
+    line-height: 24px;
+  }
+
+  code {
+    display: block;
+    padding: 0.5em;
+    background: #ffffff;
+    word-wrap: normal;
+    white-space: pre;
+    color: #314361;
+  }
+
+  .custom {
+    --background: papayawhip;
+    --background-checked: navy;
+
+    --border-color: navy;
+    --border-color-checked: navy;
+    --border-color-disabled: navy;
+
+    --color: navy;
+    --color-activated: purple;
+    --color-checked: papayawhip;
+    --color-disabled: rgba(0, 0, 0, 0.3);
+  }
+
+  /* Custom Icon Segment MD */
+  .md .custom-icon {
+    --indicator-color: lightgray;
+  }
+
+  .md .segment-facebook {
+    --background-hover: rgba(59, 89, 153, .04);
+    --color-activated: #3b5999;
+    --color-checked: #3b5999;
+  }
+
+  .md .segment-instagram {
+    --background-hover: rgba(228, 64, 95, .04);
+    --color-activated: #e4405f;
+    --color-checked: #e4405f;
+  }
+
+  .md .segment-slack {
+    --background-hover: rgba(58, 175, 133, .04);
+    --color-activated: #3aaf85;
+    --color-checked: #3aaf85;
+  }
+
+  /* Custom Icon Segment iOS */
+  .ios .custom-icon ion-segment-button {
+    --border-width: 0;
+  }
+
+  .ios .segment-facebook {
+    --color: #3b5999;
+    --color-checked: #ffffff;
+    --background-hover: rgba(59, 89, 153, .1);
+    --background-activated: rgba(59, 89, 153, .16);
+    --background-checked: #3b5999;
+  }
+
+  .ios .segment-instagram {
+    --color: #e4405f;
+    --color-checked: #ffffff;
+    --background-hover: rgba(228, 64, 95, .1);
+    --background-activated: rgba(228, 64, 95, .16);
+    --background-checked: #e4405f;
+  }
+
+  .ios .segment-slack {
+    --color: #3aaf85;
+    --color-checked: #ffffff;
+    --background-hover: rgba(58, 175, 133, .1);
+    --background-activated: rgba(58, 175, 133, .16);
+    --background-checked: #3aaf85;
+  }
+
+  .custom-icon ion-icon {
+    font-size: 44px;
+  }
+
+  /* This CSS should not apply */
+  .custom-color {
+    --background: purple;
+    --color: blue;
+  }
+
+</style>
+
+</html>
diff --git a/core/src/components/segment/test/modes/index.html b/core/src/components/segment/test/modes/index.html
index 21510e4b28..8055534762 100644
--- a/core/src/components/segment/test/modes/index.html
+++ b/core/src/components/segment/test/modes/index.html
@@ -21,7 +21,7 @@
 
     <ion-content>
       <h2>Mode: ios</h2>
-      <ion-segment id="modeSegment" name="iosMode" value="kittens">
+      <ion-segment mode="ios" id="modeSegment" name="iosMode" value="kittens">
         <ion-segment-button mode="ios" value="puppies">
           <ion-label>Puppies</ion-label>
         </ion-segment-button>
@@ -36,7 +36,7 @@
       <hr>
 
       <h2>Mode: md</h2>
-      <ion-segment name="mdMode" value="kittens">
+      <ion-segment mode="md" name="mdMode" value="kittens">
         <ion-segment-button mode="md" value="puppies">
           <ion-label>Puppies</ion-label>
         </ion-segment-button>
diff --git a/core/src/components/segment/test/preview/index.html b/core/src/components/segment/test/preview/index.html
index 501a6b9f78..c7ef0a3754 100644
--- a/core/src/components/segment/test/preview/index.html
+++ b/core/src/components/segment/test/preview/index.html
@@ -72,15 +72,15 @@
 
       <!-- Icon top -->
       <ion-segment>
-        <ion-segment-button layout="icon-top">
+        <ion-segment-button>
           <ion-label>Item One</ion-label>
           <ion-icon name="call"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button checked layout="icon-top">
+        <ion-segment-button checked>
           <ion-label>Item Two</ion-label>
           <ion-icon name="heart"></ion-icon>
         </ion-segment-button>
-        <ion-segment-button layout="icon-top">
+        <ion-segment-button>
           <ion-label>Item Three</ion-label>
           <ion-icon name="pin"></ion-icon>
         </ion-segment-button>
diff --git a/core/src/components/segment/test/standalone/index.html b/core/src/components/segment/test/standalone/index.html
index 98470aed7e..6f91cd1bd0 100644
--- a/core/src/components/segment/test/standalone/index.html
+++ b/core/src/components/segment/test/standalone/index.html
@@ -53,7 +53,7 @@
 
   <ion-segment color="secondary" value="active">
     <ion-segment-button value="active">
-     <ion-label>Active</ion-label>
+      <ion-label>Active</ion-label>
     </ion-segment-button>
     <ion-segment-button value="disabled" disabled="true">
       <ion-label>Disabled</ion-label>
@@ -76,20 +76,19 @@
   </ion-segment>
 
   <ion-segment class="custom-icon" value="instagram">
-    <ion-segment-button layout="icon-top" class="segment-facebook" value="facebook">
+    <ion-segment-button class="segment-facebook" value="facebook">
       <ion-label>Facebook</ion-label>
       <ion-icon name="logo-facebook"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button layout="icon-top" class="segment-instagram" value="instagram">
+    <ion-segment-button class="segment-instagram" value="instagram">
       <ion-label>Instagram</ion-label>
       <ion-icon name="logo-instagram"></ion-icon>
     </ion-segment-button>
-    <ion-segment-button layout="icon-top" class="segment-slack" value="slack">
+    <ion-segment-button class="segment-slack" value="slack">
       <ion-label>Slack</ion-label>
       <ion-icon name="logo-slack"></ion-icon>
     </ion-segment-button>
   </ion-segment>
-
 </body>
 
 <script>
@@ -98,7 +97,7 @@
 
   checkUrl();
 
-  segment.addEventListener('ionChange', function() {
+  segment.addEventListener('ionChange', function () {
     checkUrl();
   });
 
@@ -157,10 +156,14 @@
     --border-color-disabled: navy;
     --border-color: navy;
     --color-checked: papayawhip;
-    --color-disabled: rgba(0,0,0,0.3);
+    --color-disabled: rgba(0, 0, 0, 0.3);
     --color: navy;
   }
 
+  .custom-icon {
+    --indicator-color: lightgray;
+  }
+
   .segment-facebook {
     --background-hover: rgba(59, 89, 153, .04);
     --color-checked: #3b5999;
@@ -179,5 +182,7 @@
   .custom-icon ion-icon {
     font-size: 44px;
   }
+
 </style>
+
 </html>
diff --git a/core/src/components/segment/test/toolbar/index.html b/core/src/components/segment/test/toolbar/index.html
index d55f46d84e..3aa7303962 100644
--- a/core/src/components/segment/test/toolbar/index.html
+++ b/core/src/components/segment/test/toolbar/index.html
@@ -146,15 +146,15 @@
       <!-- Icon top -->
       <ion-toolbar color="danger">
         <ion-segment>
-          <ion-segment-button layout="icon-top">
+          <ion-segment-button>
             <ion-label>Item One</ion-label>
             <ion-icon name="call"></ion-icon>
           </ion-segment-button>
-          <ion-segment-button checked layout="icon-top">
+          <ion-segment-button checked>
             <ion-label>Item Two</ion-label>
             <ion-icon name="heart"></ion-icon>
           </ion-segment-button>
-          <ion-segment-button layout="icon-top">
+          <ion-segment-button>
             <ion-label>Item Three</ion-label>
             <ion-icon name="pin"></ion-icon>
           </ion-segment-button>
diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index 72183fe844..0f9bd9412c 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -36,13 +36,12 @@ The tab bar is a UI component that contains a set of [tab buttons](../tab-button
 
 ## Properties
 
-| Property      | Attribute      | Description                                                                                                                                                                                                                                                            | Type                                                                                       | Default      |
-| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------ |
-| `color`       | `color`        | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                                                      | `undefined`  |
-| `layout`      | `layout`       | Set the layout of the text and icon in the tab bar.                                                                                                                                                                                                                    | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` | `'icon-top'` |
-| `mode`        | `mode`         | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                                                            | `undefined`  |
-| `selectedTab` | `selected-tab` | The selected tab component                                                                                                                                                                                                                                             | `string \| undefined`                                                                      | `undefined`  |
-| `translucent` | `translucent`  | If `true`, the tab bar will be translucent.                                                                                                                                                                                                                            | `boolean`                                                                                  | `false`      |
+| Property      | Attribute      | Description                                                                                                                                                                                                                                                            | Type                  | Default     |
+| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `color`       | `color`        | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
+| `mode`        | `mode`         | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
+| `selectedTab` | `selected-tab` | The selected tab component                                                                                                                                                                                                                                             | `string \| undefined` | `undefined` |
+| `translucent` | `translucent`  | If `true`, the tab bar will be translucent.                                                                                                                                                                                                                            | `boolean`             | `false`     |
 
 
 ## CSS Custom Properties
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index 4099f3442d..07afcfed45 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Color, Mode, TabBarChangedDetail, TabButtonLayout } from '../../interface';
+import { Color, Mode, TabBarChangedDetail } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -32,11 +32,6 @@ export class TabBar implements ComponentInterface {
    */
   @Prop() color?: Color;
 
-  /**
-   * Set the layout of the text and icon in the tab bar.
-   */
-  @Prop() layout: TabButtonLayout = 'icon-top';
-
   /**
    * The selected tab component
    */
diff --git a/core/src/components/tab-bar/test/preview/index.html b/core/src/components/tab-bar/test/preview/index.html
index dff6e9ae52..6366128241 100644
--- a/core/src/components/tab-bar/test/preview/index.html
+++ b/core/src/components/tab-bar/test/preview/index.html
@@ -31,7 +31,7 @@
 
   <!-- Badges -->
   <ion-tab-bar selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-top">
+    <ion-tab-button tab="1">
       <ion-icon name="heart"></ion-icon>
       <ion-label>Favorites</ion-label>
       <ion-badge color="danger"></ion-badge>
@@ -113,7 +113,7 @@
       <ion-icon name="call"></ion-icon>
     </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-top">
+    <ion-tab-button tab="2">
       <ion-badge>16</ion-badge>
       <ion-label>Favorites</ion-label>
       <ion-icon name="heart"></ion-icon>
diff --git a/core/src/components/tab-bar/test/scenarios/index.html b/core/src/components/tab-bar/test/scenarios/index.html
index f08158bc3f..813a547b31 100644
--- a/core/src/components/tab-bar/test/scenarios/index.html
+++ b/core/src/components/tab-bar/test/scenarios/index.html
@@ -73,7 +73,7 @@
       <ion-icon name="call"></ion-icon>
     </ion-tab-button>
 
-    <ion-tab-button tab="2" layout="icon-top">
+    <ion-tab-button tab="2">
       <ion-badge>6</ion-badge>
       <ion-label>hi</ion-label>
       <ion-icon name="heart"></ion-icon>
diff --git a/core/src/components/tab-bar/test/spec/index.html b/core/src/components/tab-bar/test/spec/index.html
index 74b3e442cf..1a350d861e 100644
--- a/core/src/components/tab-bar/test/spec/index.html
+++ b/core/src/components/tab-bar/test/spec/index.html
@@ -31,7 +31,7 @@
 
   <!-- Badges -->
   <ion-tab-bar selected-tab="1">
-    <ion-tab-button tab="1" layout="icon-top">
+    <ion-tab-button tab="1">
       <ion-icon name="heart"></ion-icon>
       <ion-label>Item One Max</ion-label>
       <ion-badge color="danger"></ion-badge>
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index 0ba3c5ede3..9a3a9a6995 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -60,14 +60,13 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type                                                                                                    | Default     |
-| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
-| `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                                                                   | `undefined` |
-| `disabled` | `disabled` | The selected tab component                                                                                                                                                                                                                                             | `boolean`                                                                                               | `false`     |
-| `href`     | `href`     | The URL which will be used as the `href` within this tab's button anchor.                                                                                                                                                                                              | `string \| undefined`                                                                                   | `undefined` |
-| `layout`   | `layout`   | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.                                                                                                                                                                                       | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
-| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                                                                         | `undefined` |
-| `tab`      | `tab`      | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.                                                                                                                              | `string`                                                                                                | `undefined` |
+| Property   | Attribute  | Description                                                                                                                               | Type                                                                                                    | Default     |
+| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
+| `disabled` | `disabled` | The selected tab component                                                                                                                | `boolean`                                                                                               | `false`     |
+| `href`     | `href`     | The URL which will be used as the `href` within this tab's button anchor.                                                                 | `string \| undefined`                                                                                   | `undefined` |
+| `layout`   | `layout`   | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.                                                          | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
+| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                         | `"ios" \| "md"`                                                                                         | `undefined` |
+| `tab`      | `tab`      | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string`                                                                                                | `undefined` |
 
 
 ## CSS Custom Properties
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 68dcc49aed..d5167698d5 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -1,7 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
 
-import { Color, Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
-import { createColorClasses } from '../../utils/theme';
+import { Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
 
 @Component({
   tag: 'ion-tab-button',
@@ -29,13 +28,6 @@ export class TabButton implements ComponentInterface {
    */
   @Prop() mode!: Mode;
 
-  /**
-   * The color to use from your application's color palette.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information on colors, see [theming](/docs/theming/basics).
-   */
-  @Prop() color?: Color;
-
   /**
    * Set the layout of the text and icon in the tab bar.
    * It defaults to `'icon-top'`.
@@ -96,7 +88,7 @@ export class TabButton implements ComponentInterface {
   }
 
   hostData() {
-    const { color, tab, selected, layout, disabled, hasLabel, hasIcon } = this;
+    const { disabled, hasIcon, hasLabel, layout, selected, tab } = this;
     return {
       'role': 'tab',
       'ion-activatable': true,
@@ -104,8 +96,6 @@ export class TabButton implements ComponentInterface {
       'id': `tab-button-${tab}`,
       'aria-controls': `tab-view-${tab}`,
       class: {
-        ...createColorClasses(color),
-
         'tab-selected': selected,
         'tab-disabled': disabled,
         'tab-has-label': hasLabel,
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index 2e8230e9f9..eb4bb6d47a 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -11,7 +11,6 @@
    * @prop --handle-background-checked: Background of the toggle handle when checked
    */
 
-  // TODO can we remove important here
   /* stylelint-disable-next-line declaration-no-important */
   box-sizing: content-box !important;
 
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index f58c522ec1..95805b4981 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -105,7 +105,7 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
   }
 }
 
-// TODO: remove once Safari 11.2 dies
+// TODO: remove once Safari 11.2 is no longer supported
 @supports (padding-top: constant(safe-area-inset-top)) {
   html {
     --ion-safe-area-top: constant(safe-area-inset-top);
diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss
index 268e972a49..1b17f9fcb0 100644
--- a/core/src/themes/ionic.theme.default.scss
+++ b/core/src/themes/ionic.theme.default.scss
@@ -82,7 +82,6 @@ $colors:  (
 // Default Foreground and Background Colors
 // -------------------------------------------------------------------------------------------
 // Used internally to calculate the default steps
-// TODO: @color-mod will remove all of this
 
 $background-color-value:            #fff !default;
 $background-color-rgb:              255, 255, 255 !default;