fix(all): improve text customization

Author: manucorporat

angular/BREAKING.md

@@ -954,7 +954,7 @@ presentPopover(ev: any) {
 async presentPopover(ev: any) {
   const popover = await this.popoverController.create({
     component: PopoverComponent,
-    ev: event,
+    event: event,
     translucent: true
   });
   return await popover.present();

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

@@ -8,6 +8,14 @@
 
   color: #{current-color(base)};
   pointer-events: all;
+
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  text-transform: none;
+
+  white-space: nowrap;
+  font-kerning: none;
 }
 
 :host-context(.can-go-back > ion-header),
@@ -16,6 +24,7 @@
 }
 
 .back-button-native {
+  @include text-inherit();
   @include font-smoothing();
 
   display: block;
@@ -27,21 +36,11 @@
 
   outline: none;
 
-  color: inherit;
-
   line-height: 1;
 
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  text-transform: none;
-
-  white-space: nowrap;
-
   cursor: pointer;
   user-select: none;
   z-index: 0;
-  font-kerning: none;
   appearance: none;
 }
 

core/src/components/button/button.scss

@@ -21,6 +21,8 @@
   user-select: none;
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  font-kerning: none;
 }
 
 :host([disabled]) {
@@ -123,7 +125,6 @@
 
   transition: var(--transition);
 
-
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--border-color);
@@ -139,11 +140,9 @@
   cursor: pointer;
   opacity: var(--opacity);
   overflow: var(--overflow);
-  vertical-align: top; // the better option for most scenarios
-  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
   z-index: 0;
   box-sizing: border-box;
-  font-kerning: none;
   appearance: none;
 }
 

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

@@ -18,6 +18,13 @@
   color: #{current-color(contrast)};
 
   font-size: 14px;
+
+  text-align: center;
+  text-overflow: ellipsis;
+  text-transform: none;
+
+  white-space: nowrap;
+  font-kerning: none;
 }
 
 
@@ -26,6 +33,7 @@
 }
 
 .fab-button-native {
+  @include text-inherit();
   @include border-radius(50%);
   @include margin(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
@@ -45,25 +53,14 @@
 
   background: var(--background);
   background-clip: padding-box;
-  color: inherit;
-
-  font-size: inherit;
-  font-weight: inherit;
 
   line-height: var(--size);
 
-  text-align: center;
-  text-overflow: ellipsis;
-  text-transform: none;
-
-  white-space: nowrap;
-
   box-shadow: var(--box-shadow);
   contain: strict;
   cursor: pointer;
   overflow: hidden;
   z-index: 0;
-  font-kerning: none;
   appearance: none;
 }
 
@@ -86,8 +83,6 @@
   flex-flow: row nowrap;
   flex-shrink: 0;
   align-items: center;
-  align-items: center;
-  justify-content: center;
   justify-content: center;
 
   height: 100%;

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

@@ -7,9 +7,18 @@
   pointer-events: all;
 
   color: #{current-color(base)};
+
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  text-transform: none;
+
+  white-space: nowrap;
+  font-kerning: none;
 }
 
 button {
+  @include text-inherit();
   @include margin(0);
   @include padding(0);
   @include font-smoothing();
@@ -30,21 +39,12 @@ button {
   outline: none;
 
   background: transparent;
-  color: inherit;
 
   line-height: 1;
 
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  text-transform: none;
-
-  white-space: nowrap;
-
   cursor: pointer;
   user-select: none;
   z-index: 0;
-  font-kerning: none;
   appearance: none;
 }
 

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

@@ -11,6 +11,12 @@
   --icon-size: 1em;
 
   flex: 1;
+
+  text-decoration: none;
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+  font-kerning: none;
 }
 
 :host(:first-of-type) .segment-button-native {
@@ -30,6 +36,7 @@
 }
 
 .segment-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));
 
@@ -46,22 +53,10 @@
   border-color: var(--border-color);
 
   background: var(--background);
-  color: inherit;
-
-  font-size: inherit;
-  font-weight: inherit;
-
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  text-transform: inherit;
-
-  white-space: nowrap;
 
   contain: content;
   cursor: pointer;
   overflow: hidden;
-  font-kerning: none;
 
   &:active,
   &:focus {

core/src/components/textarea/textarea.scss

@@ -36,13 +36,14 @@
   box-sizing: border-box;
 
   background: var(--background);
+  color: var(--color);
 }
 
 :host(.ion-color) {
   background: initial;
 }
 
-:host(.ion-color) .native-textarea {
+:host(.ion-color) {
   color: current-color(base);
 }
 
@@ -73,7 +74,6 @@
   outline: none;
 
   background: transparent;
-  color: var(--color);
 
   box-sizing: border-box;
   resize: none;

core/src/components/toast/toast.ios.scss

@@ -10,6 +10,7 @@
   --color: #{$toast-ios-title-color};
 
   font-family: $toast-ios-font-family;
+  font-size: $toast-ios-title-font-size;
 }
 
 .toast-ios .toast-wrapper {
@@ -48,10 +49,6 @@
 
 .toast-ios .toast-message {
   @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
-
-  color: var(--color);
-
-  font-size: $toast-ios-title-font-size;
 }
 
 .toast-ios .toast-button {

core/src/components/toast/toast.md.scss

@@ -6,9 +6,10 @@
 
 .toast-md {
   --background: #{$toast-md-background};
-  --color: #{toast-md-title-color};
+  --color: #{$toast-md-title-color};
 
   font-family: $toast-md-font-family;
+  font-size: $toast-md-title-font-size;
 }
 
 .toast-md .toast-wrapper {
@@ -42,8 +43,4 @@
 
 .toast-md .toast-message {
   @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
-
-  color: var(--color);
-
-  font-size: $toast-md-title-font-size;
 }

core/src/components/toast/toast.scss

@@ -18,6 +18,8 @@ ion-toast {
   width: $toast-width;
   height: $toast-width;
 
+  color: var(--color);
+
   contain: strict;
   z-index: $z-index-overlay;
   pointer-events: none;

core/src/themes/ionic.mixins.scss

@@ -361,22 +361,6 @@
   }
 }
 
-// Sets correct text align with support for old browsers
-// @param {string} $direction - text direction
-// @param {string} $decorator - !important
-// ----------------------------------------------------------
-@mixin text-align($direction, $decorator: null) {
-  @if $direction == start {
-    text-align: left;
-    text-align: start $decorator;
-  } @else if $direction == end {
-    text-align: right;
-    text-align: end $decorator;
-  } @else {
-    text-align: $direction $decorator;
-  }
-}
-
 // Add direction for all directions
 // @param {string} $dir - Direction on LTR
 @mixin direction($dir) {