fix(theming): rename alpha variables and add more (#14066)

packages/core/scripts/theme-builder/src/theme-variables.ts

@@ -1,9 +1,10 @@
 import { Color } from './components/Color';
+
 export interface ThemeVariable {
   property: string;
-  quickPick?: {text: string};
+  quickPick?: { text: string };
   value?: Color | number | string;
-  computed?: {type: ComputedType, params: any};
+  computed?: { type: ComputedType, params: any };
 }
 
 export enum ComputedType {
@@ -13,19 +14,40 @@ export enum ComputedType {
 
 export const THEME_VARIABLES: ThemeVariable[] = [
   {
-    property: '--ion-alpha-lowest'
+    property: '--ion-alpha-md-activated'
   },
   {
-    property: '--ion-alpha-low'
+    property: '--ion-alpha-md-border-low'
   },
   {
-    property: '--ion-alpha-medium'
+    property: '--ion-alpha-md-border-medium'
   },
   {
-    property: '--ion-alpha-high'
+    property: '--ion-alpha-md-border-high'
   },
   {
-    property: '--ion-alpha-highest'
+    property: '--ion-alpha-md-disabled'
+  },
+  {
+    property: '--ion-alpha-md-focused'
+  },
+  {
+    property: '--ion-alpha-md-hover'
+  },
+  {
+    property: '--ion-alpha-md-lowest'
+  },
+  {
+    property: '--ion-alpha-md-low'
+  },
+  {
+    property: '--ion-alpha-md-medium'
+  },
+  {
+    property: '--ion-alpha-md-high'
+  },
+  {
+    property: '--ion-alpha-md-highest'
   },
   {
     property: '--ion-color-primary',
@@ -230,140 +252,140 @@ export const THEME_VARIABLES: ThemeVariable[] = [
     property: '--ion-background-color-step-50',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .050, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .050, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-100',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .100, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .100, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-150',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .150, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .150, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-200',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .200, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .200, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-250',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .250, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .250, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-300',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .300, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .300, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-350',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .350, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .350, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-400',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .400, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .400, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-450',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .450, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .450, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-500',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .500, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .500, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-550',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .550, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .550, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-600',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .600, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .600, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-650',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .650, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .650, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-700',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .700, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .700, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-750',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .750, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .750, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-800',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .800, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .800, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-850',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .850, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .850, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-900',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .900, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .900, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-950',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: .950, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: .950, from: '--ion-text-color'}
     }
   },
   {
     property: '--ion-background-color-step-1000',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-background-color', amount: 1, from: '--ion-text-color' }
+      params: {property: '--ion-background-color', amount: 1, from: '--ion-text-color'}
     }
   },
   {
@@ -389,140 +411,140 @@ export const THEME_VARIABLES: ThemeVariable[] = [
     property: '--ion-text-color-step-50',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .050, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .050, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-100',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .100, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .100, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-150',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .150, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .150, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-200',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .200, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .200, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-250',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .250, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .250, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-300',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .300, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .300, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-350',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .350, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .350, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-400',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .400, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .400, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-450',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .450, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .450, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-500',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .500, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .500, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-550',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .550, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .550, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-600',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .600, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .600, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-650',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .650, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .650, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-700',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .700, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .700, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-750',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .750, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .750, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-800',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .800, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .800, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-850',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .850, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .850, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-900',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .900, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .900, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-950',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: .950, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: .950, from: '--ion-background-color'}
     }
   },
   {
     property: '--ion-text-color-step-1000',
     computed: {
       type: ComputedType.step,
-      params: {property: '--ion-text-color', amount: 1, from: '--ion-background-color' }
+      params: {property: '--ion-text-color', amount: 1, from: '--ion-background-color'}
     }
   },
   {

packages/core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -64,7 +64,7 @@ $action-sheet-ios-title-border-width:                   $hairlines-width !defaul
 $action-sheet-ios-title-border-style:                   solid !default;
 
 /// @prop - Border color of the action sheet title
-$action-sheet-ios-title-border-color:                   ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
+$action-sheet-ios-title-border-color:                   ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-border-medium) !default;
 
 /// @prop - Font size of the action sheet sub title
 $action-sheet-ios-sub-title-font-size:                  12px !default;
@@ -112,13 +112,13 @@ $action-sheet-ios-button-border-width:                  $hairlines-width !defaul
 $action-sheet-ios-button-border-style:                  solid !default;
 
 /// @prop - Border color of the action sheet button
-$action-sheet-ios-button-border-color:                  ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
+$action-sheet-ios-button-border-color:                  ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-border-medium) !default;
 
 /// @prop - Background color of the action sheet button
 $action-sheet-ios-button-background:                    transparent !default;
 
 /// @prop - Background color of the activated action sheet button
-$action-sheet-ios-button-background-activated:          ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default;
+$action-sheet-ios-button-background-activated:          ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-activated) !default;
 
 /// @prop - Background color of the selected action sheet button
 $action-sheet-ios-button-background-selected:           $background-ios-color !default;

packages/core/src/components/alert/alert.ios.vars.scss

@@ -147,7 +147,7 @@ $alert-ios-button-text-color:                   ion-color($colors-ios, primary,
 $alert-ios-button-background-color:             transparent !default;
 
 /// @prop - Background color of the alert activated button
-$alert-ios-button-background-color-activated:   ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-lowest) !default;
+$alert-ios-button-background-color-activated:   ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-activated) !default;
 
 /// @prop - Border width of the alert button
 $alert-ios-button-border-width:                 $hairlines-width !default;
@@ -156,7 +156,7 @@ $alert-ios-button-border-width:                 $hairlines-width !default;
 $alert-ios-button-border-style:                 solid !default;
 
 /// @prop - Border color of the alert button
-$alert-ios-button-border-color:                 ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-low) !default;
+$alert-ios-button-border-color:                 ion-color-alpha($text-ios-color-value, text-ios-color, $alpha-ios-border-medium) !default;
 
 /// @prop - Border radius of the alert button
 $alert-ios-button-border-radius:                0 !default;

packages/core/src/components/button/button.ios.scss

@@ -137,7 +137,7 @@ button[disabled],
   $color-base: ion-color($colors-ios, $color-name, base, ios);
   $color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
   $color-tint: ion-color($colors-ios, $color-name, shade, ios);
-  $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios);
+  $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios);
 
   .button-outline-ios-#{$color-name} {
     border-color: $color-base;
@@ -190,7 +190,7 @@ button[disabled],
 
 @mixin ios-button-clear($color-name) {
   $fg-color: ion-color($colors-ios, $color-name, base, ios);
-  $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-low, ios);
+  $bg-color-focused: ion-color-alpha($colors-ios, $color-name, $alpha-ios-focused, ios);
 
   .button-clear-ios-#{$color-name} {
     border-color: $button-ios-clear-border-color;

packages/core/src/components/button/button.ios.vars.scss

@@ -58,7 +58,7 @@ $button-ios-opacity-hover:                          .8 !default;
 $button-ios-background-color-focused:               ion-color($colors-ios, $button-ios-background-color, shade, ios) !default;
 
 /// @prop - Opacity of the button when disabled
-$button-ios-opacity-disabled:                       $alpha-ios-medium !default;
+$button-ios-opacity-disabled:                       $alpha-ios-disabled !default;
 
 
 // iOS Large Button
@@ -136,7 +136,7 @@ $button-ios-outline-background-color-activated:     $button-ios-background-color
 $button-ios-outline-opacity-activated:              1 !default;
 
 /// @prop - Background color of the focused outline button
-$button-ios-outline-background-color-focused:       ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default;
+$button-ios-outline-background-color-focused:       ion-color-alpha($colors-ios, primary, $alpha-ios-focused, ios) !default;
 
 // iOS Clear Button
 // --------------------------------------------------
@@ -160,7 +160,7 @@ $button-ios-clear-text-color-hover:                 $button-ios-background-color
 $button-ios-clear-opacity-hover:                    .6 !default;
 
 /// @prop - Background color of the focused clear button
-$button-ios-clear-background-color-focused:         ion-color-alpha($colors-ios, primary, $alpha-ios-low, ios) !default;
+$button-ios-clear-background-color-focused:         ion-color-alpha($colors-ios, primary, $alpha-ios-focused, ios) !default;
 
 
 // iOS Round Button

packages/core/src/components/button/button.md.scss

@@ -158,7 +158,7 @@ button[disabled],
 
 @mixin md-button-outline($color-name) {
   $fg-color: ion-color($colors-md, $color-name, tint, md);
-  $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md);
+  $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-focused, md);
 
   .button-outline-md-#{$color-name} {
     border-color: $fg-color;
@@ -218,7 +218,7 @@ button[disabled],
 
 @mixin md-button-clear($color-name) {
   $fg-color: ion-color($colors-md, $color-name, base, md);
-  $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-lowest, md);
+  $bg-color-focused: ion-color-alpha($colors-md, $color-name, $alpha-md-focused, md);
 
   .button-clear-md-#{$color-name} {
     border-color: $button-md-clear-border-color;

packages/core/src/components/button/button.md.vars.scss

@@ -79,7 +79,7 @@ $button-md-ripple-background-color:        $text-md-color-step-400 !default;
 $button-md-background-color-focused:       ion-color($colors-md, $button-md-background-color, shade, md) !default;
 
 /// @prop - Opacity of the button when disabled
-$button-md-opacity-disabled:               $alpha-md-medium !default;
+$button-md-opacity-disabled:               $alpha-md-disabled !default;
 
 
 // Material Design Large Button
@@ -148,7 +148,7 @@ $button-md-outline-background-color:            transparent !default;
 $button-md-outline-box-shadow:                  none !default;
 
 /// @prop - Background color of the outline button on hover
-$button-md-outline-background-color-hover:      ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
+$button-md-outline-background-color-hover:      ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-hover) !default;
 
 /// @prop - Background color of the activated outline button
 $button-md-outline-background-color-activated:  transparent !default;
@@ -163,7 +163,7 @@ $button-md-outline-opacity-activated:           1 !default;
 $button-md-outline-ripple-background-color:     $button-md-background-color !default;
 
 /// @prop - Background color of the focused outline button
-$button-md-outline-background-color-focused:    ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default;
+$button-md-outline-background-color-focused:    ion-color-alpha($colors-md, primary, $alpha-md-focused, md) !default;
 
 // Material Design Clear Button
 // --------------------------------------------------
@@ -184,19 +184,19 @@ $button-md-clear-box-shadow:                    none !default;
 $button-md-clear-opacity:                       1 !default;
 
 /// @prop - Background color of the activated clear button
-$button-md-clear-background-color-activated:    ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
+$button-md-clear-background-color-activated:    ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-activated) !default;
 
 /// @prop - Box shadow of the activated clear button
 $button-md-clear-box-shadow-activated:          $button-md-clear-box-shadow !default;
 
 /// @prop - Background color of the clear button on hover
-$button-md-clear-background-color-hover:        ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-lowest) !default;
+$button-md-clear-background-color-hover:        ion-color-alpha($text-md-color-value, text-md-color, $alpha-md-hover) !default;
 
 /// @prop - Background color of the ripple on the clear button
 $button-md-clear-ripple-background-color:       $text-md-color-step-600 !default;
 
 /// @props - Background color of the focused clear button
-$button-md-clear-background-color-focused:      ion-color-alpha($colors-md, primary, $alpha-md-low, md) !default;
+$button-md-clear-background-color-focused:      ion-color-alpha($colors-md, primary, $alpha-md-focused, md) !default;
 
 
 // Material Design Round Button

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

@@ -117,11 +117,11 @@ ion-segment-button {
       color: $color-base;
 
       &:hover:not(.segment-activated) {
-        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
+        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-hover);
       }
 
       &:active:not(.segment-activated) {
-        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-lowest);
+        background-color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-activated);
       }
 
       &.segment-activated {
@@ -131,7 +131,7 @@ ion-segment-button {
     }
 
     .segment-button-disabled {
-      color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-medium);
+      color: ion-color-alpha($colors-ios, $color-base, $alpha-ios-disabled);
     }
   }
 }

packages/core/src/components/segment-button/segment-button.ios.vars.scss

@@ -10,13 +10,13 @@ $segment-button-ios-background-color:                 transparent !default;
 $segment-button-ios-background-color-activated:       ion-color($colors-ios, primary, base, ios) !default;
 
 /// @prop - Background of the segment button when hovered
-$segment-button-ios-background-color-hover:           ion-color-alpha($colors-ios, primary, $alpha-ios-lowest) !default;
+$segment-button-ios-background-color-hover:           ion-color-alpha($colors-ios, primary, $alpha-ios-hover) !default;
 
 /// @prop - Background of the segment button when active
-$segment-button-ios-background-color-active:          ion-color-alpha($colors-ios, primary, $alpha-ios-low) !default;
+$segment-button-ios-background-color-active:          ion-color-alpha($colors-ios, primary, $alpha-ios-activated) !default;
 
 /// @prop - Background of the activated segment button when active
-$segment-button-ios-background-color-disabled:        ion-color-alpha($colors-ios, primary, $alpha-ios-medium) !default;
+$segment-button-ios-background-color-disabled:        ion-color-alpha($colors-ios, primary, $alpha-ios-disabled) !default;
 
 /// @prop - Text color of the segment button
 $segment-button-ios-text-color:                       ion-color($colors-ios, primary, contrast, ios) !default;

packages/core/src/themes/css/default.css

@@ -1,11 +1,18 @@
 /** default theme **/
 
 :root {
-  --ion-alpha-lowest: 0.06;
+  --ion-alpha-activated: .1;
-  --ion-alpha-low: 0.1;
+  --ion-alpha-border-low: .1;
-  --ion-alpha-medium: 0.4;
+  --ion-alpha-border-medium: .2;
-  --ion-alpha-high: 0.75;
+  --ion-alpha-border-high: .3;
-  --ion-alpha-highest: 0.9;
+  --ion-alpha-disabled: .5;
+  --ion-alpha-focused: .25;
+  --ion-alpha-hover: .1;
+  --ion-alpha-lowest: .1;
+  --ion-alpha-low: .25;
+  --ion-alpha-medium: .5;
+  --ion-alpha-high: .8;
+  --ion-alpha-highest: .9;
   --ion-color-primary: #488aff;
   --ion-color-primary-rgb: 72,138,255;
   --ion-color-primary-contrast: #ffffff;
@@ -113,4 +120,28 @@
   --ion-item-border-color: #c8c7cc;
   --ion-item-text-color: #000000;
   --ion-placeholder-text-color: #999999;
+
+  /** iOS overrides **/
+  --ion-border-ios-color: #dedede;
+  --ion-overlay-ios-background-color: #f9f9f9;
+  --ion-tabbar-ios-translucent-background-color: rgba(248,248,248, var(--ion-alpha-ios-high, var(--ion-alpha-high, 0.8)));
+  --ion-tabbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.2)));
+  --ion-tabbar-ios-text-color-active: var(--ion-color-ios-primary, var(--ion-color-primary, #488aff));
+  --ion-toolbar-ios-translucent-background-color: rgba(248, 248, 248, var(--ion-alpha-ios-high, var(--ion-alpha-high, 0.8)));
+  --ion-toolbar-ios-border-color: rgba(0, 0, 0, var(--ion-alpha-ios-border-medium, var(--ion-alpha-border-medium, 0.2)));
+  --ion-item-ios-background-color: var(--ion-background-ios-color, var(--ion-background-color, #fff));
+  --ion-item-ios-background-color-active: #d9d9d9;
+
+  /** MD overrides **/
+  --ion-alpha-md-focused: 0.1;
+  --ion-alpha-md-border-low: 0.07;
+  --ion-border-md-color: #c1c4cd;
+  --ion-overlay-md-background-color: #fafafa;
+  --ion-tabbar-md-border-color: rgba(0, 0, 0, var(--ion-alpha-md-border-low, var(--ion-alpha-border-low, 0.07)));
+  --ion-tabbar-md-text-color: var(--ion-text-md-color-step-400, var(--ion-text-color-step-400, #666666));
+  --ion-toolbar-md-border-color: var(--ion-border-md-color, var(--ion-border-color, #c1c4cd));
+  --ion-toolbar-md-color-active: #4a4a4a;
+  --ion-toolbar-md-text-color: #424242;
+  --ion-item-md-background-color-active: #f1f1f1;
+  --ion-item-md-border-color: #dedede;
 }

packages/core/src/themes/css/oceanic.css

@@ -1,10 +1,17 @@
 /** oceanic theme **/
 
 :root {
-  --ion-alpha-lowest: .06;
+  --ion-alpha-activated: .1;
-  --ion-alpha-low: .1;
+  --ion-alpha-border-low: .1;
-  --ion-alpha-medium: .4;
+  --ion-alpha-border-medium: .2;
-  --ion-alpha-high: .75;
+  --ion-alpha-border-high: .3;
+  --ion-alpha-disabled: .5;
+  --ion-alpha-focused: .25;
+  --ion-alpha-hover: .1;
+  --ion-alpha-lowest: .1;
+  --ion-alpha-low: .25;
+  --ion-alpha-medium: .5;
+  --ion-alpha-high: .8;
   --ion-alpha-highest: .9;
   --ion-color-primary: #549ee7;
   --ion-color-primary-contrast: #ffffff;

packages/core/src/themes/ionic.theme.default.ios.scss

@@ -15,11 +15,18 @@ $font-size-ios-base:                          $font-size-base !default;
 
 // Default iOS Alpha levels
 // --------------------------------------------------
-$alpha-ios-lowest:                            css-var($alpha-lowest, alpha-ios-lowest);
+$alpha-ios-activated:                         css-var($alpha-activated, alpha-ios-activated) !default;
-$alpha-ios-low:                               css-var($alpha-low, alpha-ios-low);
+$alpha-ios-border-low:                        css-var($alpha-border-low, alpha-ios-border-low) !default;
-$alpha-ios-medium:                            css-var($alpha-medium, alpha-ios-medium);
+$alpha-ios-border-medium:                     css-var($alpha-border-medium, alpha-ios-border-medium) !default;
-$alpha-ios-high:                              css-var($alpha-high, alpha-ios-high);
+$alpha-ios-border-high:                       css-var($alpha-border-high, alpha-ios-border-high) !default;
-$alpha-ios-highest:                           css-var($alpha-highest, alpha-ios-highest);
+$alpha-ios-disabled:                          css-var($alpha-disabled, alpha-ios-disabled) !default;
+$alpha-ios-focused:                           css-var($alpha-focused, alpha-ios-focused) !default;
+$alpha-ios-hover:                             css-var($alpha-hover, alpha-ios-hover) !default;
+$alpha-ios-lowest:                            css-var($alpha-lowest, alpha-ios-lowest) !default
+$alpha-ios-low:                               css-var($alpha-low, alpha-ios-low) !default;
+$alpha-ios-medium:                            css-var($alpha-medium, alpha-ios-medium) !default;
+$alpha-ios-high:                              css-var($alpha-high, alpha-ios-high) !default;
+$alpha-ios-highest:                           css-var($alpha-highest, alpha-ios-highest) !default;
 
 // Default Foreground and Background Colors values
 // Allows users to override an foreground / background colors
@@ -85,11 +92,10 @@ $text-ios-color-step-900:                     css-var(mix($background-ios-color-
 $text-ios-color-step-950:                     css-var(mix($background-ios-color-value, $text-ios-color-value, 95%), text-ios-color-step-950) !default;
 $text-ios-color-step-1000:                    css-var(mix($background-ios-color-value, $text-ios-color-value, 100%), text-ios-color-step-1000) !default;
 
-
 // iOS General Colors
 // --------------------------------------------------
 $backdrop-ios-color:                          css-var($backdrop-color, backdrop-ios-color) !default;
-$border-ios-color:                            css-var(#c1c4cd, border-ios-color) !default;
+$border-ios-color:                            css-var(#dedede, border-ios-color) !default;
 $box-shadow-ios-color:                        css-var($box-shadow-color, box-shadow-ios-color) !default;
 $overlay-ios-background-color:                css-var(#f9f9f9, overlay-ios-background-color) !default;
 
@@ -97,8 +103,8 @@ $overlay-ios-background-color:                css-var(#f9f9f9, overlay-ios-backg
 // --------------------------------------------------
 $tabbar-ios-background-color:                 css-var($tabbar-background-color, tabbar-ios-background-color) !default;
 $tabbar-ios-background-color-focused:         css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
-$tabbar-ios-translucent-background-color:     css-var(rgba(248, 248, 248, .8), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
+$tabbar-ios-translucent-background-color:     css-var(unquote("rgba(248,248,248, #{$alpha-ios-high})"), tabbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
-$tabbar-ios-border-color:                     css-var(rgba(0, 0, 0, .2), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
+$tabbar-ios-border-color:                     css-var(unquote("rgba(0, 0, 0, #{$alpha-ios-border-medium})"), tabbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
 $tabbar-ios-text-color:                       css-var($tabbar-text-color, tabbar-ios-text-color) !default;
 $tabbar-ios-text-color-active:                css-var(ion-color($colors-ios, primary, base, ios), tabbar-ios-text-color-active) !default;
 
@@ -107,8 +113,8 @@ $tabbar-ios-text-color-active:                css-var(ion-color($colors-ios, pri
 $toolbar-ios-height:                          44px !default;
 $toolbar-ios-padding:                         4px !default;
 $toolbar-ios-background-color:                css-var($toolbar-background-color, toolbar-ios-background-color) !default;
-$toolbar-ios-translucent-background-color:    css-var(rgba(248, 248, 248, .8), toolbar-ios-background-color) !default; // TODO: @color-mod: remove
+$toolbar-ios-translucent-background-color:    css-var(unquote("rgba(248, 248, 248, #{$alpha-ios-high})"), toolbar-ios-translucent-background-color) !default; // TODO: @color-mod: remove
-$toolbar-ios-border-color:                    css-var(rgba(0, 0, 0, .2), toolbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
+$toolbar-ios-border-color:                    css-var(unquote("rgba(0, 0, 0, #{$alpha-ios-border-medium})"), toolbar-ios-border-color) !default; // TODO: @color-mod($border-ios-color, a($alpha-ios-low))
 $toolbar-ios-color-active:                    css-var(ion-color($colors-ios, primary, base, ios), toolbar-ios-color-active) !default;
 $toolbar-ios-color-inactive:                  css-var($toolbar-color-inactive, toolbar-ios-color-inactive) !default;
 $toolbar-ios-text-color:                      css-var($toolbar-text-color, toolbar-ios-text-color) !default;

packages/core/src/themes/ionic.theme.default.md.scss

@@ -15,11 +15,18 @@ $font-size-md-base:                     $font-size-base !default;
 
 // Default Material Design Alpha levels
 // --------------------------------------------------
-$alpha-md-lowest:                       css-var($alpha-lowest, alpha-md-lowest);
+$alpha-md-activated:                    css-var($alpha-activated, alpha-md-activated) !default;
-$alpha-md-low:                          css-var($alpha-low, alpha-md-low);
+$alpha-md-border-low:                   css-var(.07, alpha-md-border-low) !default;
-$alpha-md-medium:                       css-var($alpha-medium, alpha-md-medium);
+$alpha-md-border-medium:                css-var($alpha-border-medium, alpha-md-border-medium) !default;
-$alpha-md-high:                         css-var($alpha-high, alpha-md-high);
+$alpha-md-border-high:                  css-var($alpha-border-high, alpha-md-border-high) !default;
-$alpha-md-highest:                      css-var($alpha-highest, alpha-md-highest);
+$alpha-md-disabled:                     css-var($alpha-disabled, alpha-md-disabled) !default;
+$alpha-md-focused:                      css-var(.1, alpha-md-focused) !default;
+$alpha-md-hover:                        css-var($alpha-hover, alpha-md-hover) !default;
+$alpha-md-lowest:                       css-var($alpha-lowest, alpha-md-lowest) !default
+$alpha-md-low:                          css-var($alpha-low, alpha-md-low) !default;
+$alpha-md-medium:                       css-var($alpha-medium, alpha-md-medium) !default;
+$alpha-md-high:                         css-var($alpha-high, alpha-md-high) !default;
+$alpha-md-highest:                      css-var($alpha-highest, alpha-md-highest) !default;
 
 // Default Foreground and Background Colors values
 // Allows users to override an foreground / background colors
@@ -95,9 +102,9 @@ $overlay-md-background-color:           css-var(#fafafa, overlay-md-background-c
 // Material Design Tabs & Tab bar
 // --------------------------------------------------
 $tabbar-md-background-color:            css-var($tabbar-background-color, tabbar-md-background-color) !default;
-$tabbar-md-background-color-focused:    css-var($tabbar-background-color-focused, tabbar-ios-background-color-focused) !default;
+$tabbar-md-background-color-focused:    css-var($tabbar-background-color-focused, tabbar-md-background-color-focused) !default;
-$tabbar-md-border-color:                css-var(rgba(0, 0, 0, .07), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest))
+$tabbar-md-border-color:                css-var(unquote("rgba(0, 0, 0, #{$alpha-md-border-low})"), tabbar-md-border-color) !default; // TODO: @color-mod($border-md-color, a($alpha-lowest))
-$tabbar-md-text-color:                  css-var($text-md-color-step-400, tabbar-md-text-color) !default; // TODO: @color-mod($text-md-color, a($alpha-high))
+$tabbar-md-text-color:                  css-var($text-md-color-step-400, tabbar-md-text-color) !default;
 $tabbar-md-text-color-active:           css-var($tabbar-text-color-active, tabbar-md-text-color-active) !default;
 
 // Material Design Toolbar
@@ -116,3 +123,5 @@ $item-md-background-color:              css-var($item-background-color, item-md-
 $item-md-background-color-active:       css-var(#f1f1f1, item-md-background-color-active) !default;
 $item-md-border-color:                  css-var(#dedede, item-md-border-color) !default;
 $item-md-text-color:                    css-var($item-text-color, item-md-text-color) !default;
+
+@include css-variables-to-root($ion-colors-md);

packages/core/src/themes/ionic.theme.default.scss

@@ -17,13 +17,6 @@ $dark:            #222;
 // Allows users to override an individual color
 $colors:              () !default;
 
-// Allows users to override all alpha levels
-$alpha-lowest:        .06 !default;
-$alpha-low:           .1 !default;
-$alpha-medium:        .4 !default;
-$alpha-high:          .75 !default;
-$alpha-highest:       .9 !default;
-
 // Primary color map should provide
 //   - base: main color to be used.
 //   - rgb: a R,G,B list version of the base color. Used for alpha processing
@@ -99,10 +92,17 @@ $colors:                                ion-extend-colors($ion-colors, $colors);
 
 // Default Alpha levels
 // --------------------------------------------------
+$alpha-activated:                       css-var(.1, alpha-activated) !default;
+$alpha-border-low:                      css-var(.1, alpha-border-low) !default;
+$alpha-border-medium:                   css-var(.2, alpha-border-medium) !default;
+$alpha-border-high:                     css-var(.3, alpha-border-high) !default;
+$alpha-disabled:                        css-var(.5, alpha-disabled) !default;
+$alpha-focused:                         css-var(.25, alpha-focused) !default;
+$alpha-hover:                           css-var(.1, alpha-hover) !default;
 $alpha-lowest:                          css-var(.1, alpha-lowest) !default;
 $alpha-low:                             css-var(.25, alpha-low) !default;
 $alpha-medium:                          css-var(.5, alpha-medium) !default;
-$alpha-high:                            css-var(.75, alpha-high) !default;
+$alpha-high:                            css-var(.8, alpha-high) !default;
 $alpha-highest:                         css-var(.9, alpha-highest) !default;
 
 // Default General
@@ -135,9 +135,9 @@ $text-color-rgb:                        css-var(color-to-rgb-list($text-color-va
 
 // Default Background & Text Color Steps
 // Color Steps are used to provide variations in text and background colors of elements.
-// Steps are generally meant to move "away from" their  base color.
+// Steps move towards there "opposite" color.
-// For example a $text-color of white would generally step towards black,
+// For example $text-color-step-XXX will be $text-color stepping towards $background-color,
-// but a $text-color of black would step towards white.
+// but a $background-color-step-XXX will be $background-color stepping towards $text-color.
 // --------------------------------------------------
 $background-color-step-50:              css-var(mix($text-color-value, $background-color-value, 5%), background-color-step-50) !default;
 $background-color-step-100:             css-var(mix($text-color-value, $background-color-value, 10%), background-color-step-100) !default;