refactor(many): add back Sass variables

Author: thetaPC

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

@@ -25,7 +25,7 @@ $action-sheet-ios-group-margin-top: 10px;
 $action-sheet-ios-group-margin-bottom: 10px;
 
 /// @prop - Background color of the action sheet
-$action-sheet-ios-background-color: var(--ion-color-overlay-bg);
+$action-sheet-ios-background-color: $overlay-ios-background-color;
 
 /// @prop - Border radius of the action sheet
 $action-sheet-ios-border-radius: 13px;

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

@@ -15,7 +15,7 @@ $alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2);
 $alert-ios-border-radius: 13px;
 
 /// @prop - Background color of the alert
-$alert-ios-background-color: var(--ion-color-overlay-bg);
+$alert-ios-background-color: $overlay-ios-background-color;
 
 /// @prop - Background color alpha of the alert when translucent
 $alert-ios-translucent-background-color-alpha: 0.9;

core/src/components/loading/loading.ios.vars.scss

@@ -31,7 +31,7 @@ $loading-ios-border-radius: 8px;
 $loading-ios-text-color: $text-color;
 
 /// @prop - Background of the loading wrapper
-$loading-ios-background-color: var(--ion-color-overlay-bg);
+$loading-ios-background-color: $overlay-ios-background-color;
 
 /// @prop - Background color alpha of the translucent loading wrapper
 $loading-ios-translucent-background-color-alpha: 0.8;

core/src/components/tab-bar/tab-bar.ios.scss

@@ -6,9 +6,9 @@
 
 :host {
   // default color / background
-  --background: var(--ion-components-ion-tab-bar-bg);
+  --background: #{$tabbar-ios-background};
   --background-focused: #{$tabbar-ios-background-focused};
-  --border: #{$hairlines-width solid var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color))};
+  --border: #{$hairlines-width solid $tabbar-ios-border-color};
   --color: #{$tab-button-ios-text-color};
   --color-selected: #{$tabbar-ios-color-selected};
 

core/src/components/tab-bar/tab-bar.md.scss

@@ -6,7 +6,7 @@
   // default color / background
   --background: #{$tabbar-md-background};
   --background-focused: #{$tabbar-md-background-focused};
-  --border: #{1px solid (var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color)))};
+  --border: #{1px solid $tabbar-md-border-color};
   --color: #{$tab-button-md-text-color};
   --color-selected: #{$tabbar-md-color-selected};
 

core/src/themes/native/native.theme.default.ios.scss

@@ -7,10 +7,13 @@
 // iOS General Colors
 // --------------------------------------------------
 $backdrop-ios-color: var(--ion-backdrop-color, #000);
+$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-overlay-bg));
 
 // iOS Tabs & Tab bar
 // --------------------------------------------------
+$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-components-ion-tab-bar-bg));
 $tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff));
+$tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color));
 $tabbar-ios-color: var(--ion-tab-bar-color, var(--ion-color-text-600));
 $tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));
 

core/src/themes/native/native.theme.default.md.scss

@@ -13,13 +13,14 @@ $overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-back
 // --------------------------------------------------
 $tabbar-md-background: var(--ion-tab-bar-background, $background-color);
 $tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff));
+$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-components-ion-tab-bar-border-color));
 $tabbar-md-color: var(--ion-tab-bar-color, var(--ion-color-text-650));
 $tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base));
 
 // Material Design Toolbar
 // --------------------------------------------------
 $toolbar-md-background: var(--ion-toolbar-background, var(--ion-components-ion-toolbar-bg));
-$toolbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-components-ion-toolbar-border-color));
+$toolbar-md-border-color: var(--ion-toolbar-border-color, var(--ion-components-ion-toolbar-border-color));
 $toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
 
 // Material Design List & List Items