refactor(buttons): button-native without prefix

Now we don't need prefix because of shadow-dom

core/src/components/buttons/buttons.ios.scss

@@ -5,7 +5,7 @@
 // iOS Toolbar Default Button
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) ion-button.button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 5px;

core/src/components/buttons/buttons.md.scss

@@ -4,7 +4,7 @@
 // Material Design Toolbar Default Button
 // --------------------------------------------------
 
-::slotted(*) ion-button {
+::slotted(*) ion-button.button {
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 8px;

core/src/components/chip-button/chip-button.scss

@@ -39,17 +39,17 @@
   --color: #{ion-color(primary, contrast)};
 }
 
-:host(.chip-button-solid.ion-color) .chip-button-native {
+:host(.chip-button-solid.ion-color) .button-native {
   background: current-color(base);
   color: current-color(contrast);
 }
 
-:host(.chip-button-clear.ion-color) .chip-button-native {
+:host(.chip-button-clear.ion-color) .button-native {
   background: transparent;
   color: current-color(base);
 }
 
-.chip-button-native {
+.button-native {
   @include text-inherit();
   @include border-radius(var(--border-radius));
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@@ -68,7 +68,7 @@
   appearance: none;
 }
 
-.chip-button-inner {
+.button-inner {
   display: flex;
 
   flex-flow: row nowrap;

core/src/components/chip-button/chip-button.tsx

@@ -56,11 +56,11 @@ export class ChipButton implements ComponentInterface {
     return (
       <TagType
         type="button"
-        class="chip-button-native"
+        class="button-native"
         disabled={this.disabled}
         href={this.href}
       >
-        <span class="chip-button-inner">
+        <span class="button-inner">
           <slot></slot>
         </span>
         {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}

core/src/components/datetime/datetime.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Pr
 
 import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
 import { clamp, deferEvent } from '../../utils/helpers';
-import { createThemedClasses, hostContext } from '../../utils/theme';
+import { hostContext } from '../../utils/theme';
 
 import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
 
@@ -507,7 +507,6 @@ export class Datetime implements ComponentInterface {
 
     return {
       class: {
-        ...createThemedClasses(this.mode, 'datetime'),
         'datetime-disabled': this.disabled,
         'datetime-placeholder': addPlaceholderClass,
         'in-item': hostContext('ion-item', this.el)

core/src/components/fab-button/fab-button.ios.scss

@@ -17,7 +17,7 @@
 }
 
 ::slotted(ion-icon),
-.fab-button-close-icon {
+.close-icon {
   font-size: $fab-ios-icon-font-size;
 }
 

core/src/components/fab-button/fab-button.md.scss

@@ -16,7 +16,7 @@
 }
 
 ::slotted(ion-icon),
-.fab-button-close-icon {
+.close-icon {
   font-size: 24px;
 }
 

core/src/components/fab-button/fab-button.scss

@@ -37,7 +37,7 @@
   --background: #{current-color(tint)};
 }
 
-.fab-button-native {
+.button-native {
   @include text-inherit();
   @include border-radius(50%);
   @include margin(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@@ -69,7 +69,7 @@
   appearance: none;
 }
 
-.fab-button-native[disabled] {
+.button-native[disabled] {
   cursor: default;
   opacity: .5;
   pointer-events: none;
@@ -79,7 +79,7 @@
   line-height: 1;
 }
 
-.fab-button-inner {
+.button-inner {
   @include position(0, 0, null, 0);
 
   display: flex;
@@ -107,7 +107,7 @@
 // FAB Close Icon
 // --------------------------------------------------
 
-.fab-button-close-icon {
+.close-icon {
   @include position(0, 0, null, 0);
 
   display: flex;
@@ -129,13 +129,13 @@
 // FAB Animation
 // --------------------------------------------------
 
-:host(.fab-button-close-active) .fab-button-close-icon {
+:host(.fab-button-close-active) .close-icon {
   transform: scale(1) rotateZ(0deg);
 
   opacity: 1;
 }
 
-:host(.fab-button-close-active) .fab-button-inner {
+:host(.fab-button-close-active) .button-inner {
   transform: scale(.4) rotateZ(45deg);
 
   opacity: 0;

core/src/components/fab-button/fab-button.tsx

@@ -83,15 +83,15 @@ export class FabButton implements ComponentInterface {
 
     return (
       <TagType
-        class="fab-button-native"
+        class="button-native"
         disabled={this.disabled}
         href={this.href}
         onClick={ev => openURL(this.win, this.href, ev, this.routerDirection)}
       >
-        <span class="fab-button-close-icon">
+        <span class="close-icon">
           <ion-icon name="close" lazy={false}></ion-icon>
         </span>
-        <span class="fab-button-inner">
+        <span class="button-inner">
           <slot></slot>
         </span>
         {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}

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

@@ -22,7 +22,7 @@
   color: current-color(contrast);
 }
 
-.item-option-native {
+.button-native {
   @include text-inherit();
   @include padding(0, .7em);
 
@@ -41,7 +41,7 @@
   appearance: none;
 }
 
-.item-option-button-inner {
+.button-inner {
   display: flex;
 
   flex-direction: column;

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

@@ -65,12 +65,12 @@ export class ItemOption implements ComponentInterface {
     return (
       <TagType
         type="button"
-        class="item-option-native"
+        class="button-native"
         disabled={this.disabled}
         href={this.href}
         onClick={this.clickedOptionButton.bind(this)}
       >
-        <span class="item-option-button-inner">
+        <span class="button-inner">
           <slot name="start"></slot>
           <slot name="top" />
           <slot name="icon-only" />

core/src/components/segment-button/segment-button.scss

@@ -40,23 +40,23 @@
   font-kerning: none;
 }
 
-:host(:first-of-type) .segment-button-native {
+:host(:first-of-type) .button-native {
   --padding-end: 0;
 
   @include border-radius(var(--border-radius), 0, 0, var(--border-radius));
 }
 
-:host(:not(:first-of-type)) .segment-button-native {
+:host(:not(:first-of-type)) .button-native {
   border-left-width: 0;
 }
 
-:host(:last-of-type) .segment-button-native {
+:host(:last-of-type) .button-native {
   --padding-start: 0;
 
   @include border-radius(0, var(--border-radius), var(--border-radius), 0);
 }
 
-.segment-button-native {
+.button-native {
   @include text-inherit();
   @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@@ -73,16 +73,13 @@
   border-style: var(--border-style);
   border-color: var(--btn-border-color);
 
+  outline: none;
+
   background: var(--btn-background);
 
   contain: content;
   cursor: pointer;
   overflow: hidden;
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
 }
 
 ::slotted(ion-icon) {

core/src/components/segment-button/segment-button.tsx

@@ -71,7 +71,7 @@ export class SegmentButton implements ComponentInterface {
       <button
         type="button"
         aria-pressed={this.checked ? 'true' : null}
-        class="segment-button-native"
+        class="button-native"
         disabled={this.disabled}
         onClick={() => this.checked = true}
       >

core/src/components/select-popover/select-popover.tsx

@@ -1,7 +1,6 @@
 import { Component, ComponentInterface, Listen, Prop } from '@stencil/core';
 
 import { Mode, SelectPopoverOption } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-select-popover',
@@ -32,12 +31,6 @@ export class SelectPopover implements ComponentInterface {
     }
   }
 
-  hostData() {
-    return {
-      class: createThemedClasses(this.mode, 'select-popover')
-    };
-  }
-
   render() {
     return (
       <ion-list>