fix backdrop tokens & architecture

Author: BenOsodrac

core/src/components/backdrop/backdrop.scss renamed to core/src/components/backdrop/backdrop.common.scss

@@ -1,4 +1,4 @@
-@import "./backdrop.vars";
+@import "../../themes/mixins.scss";
 
 // Backdrop
 // --------------------------------------------------
@@ -15,7 +15,6 @@
   cursor: pointer;
   opacity: 0.01;
   touch-action: none;
-  z-index: $z-index-backdrop;
 }
 
 :host(.backdrop-hide) {

core/src/components/backdrop/backdrop.ionic.scss

@@ -1,6 +1,8 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./backdrop";
+@use "./backdrop.common";
 
 :host {
   background-color: rgba(globals.$ion-primitives-base-black-rgb, 0.7);
+
+  z-index: 2;
 }

core/src/components/backdrop/backdrop.ios.scss

@@ -1,5 +1,5 @@
-@import "./backdrop";
-@import "./backdrop.ios.vars";
+@import "./backdrop.native";
+@import "../../themes/native/native.globals.ios";
 
 :host {
   background-color: $backdrop-ios-color;

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

@@ -1,5 +1,5 @@
-@import "./backdrop";
-@import "./backdrop.md.vars";
+@import "./backdrop.native";
+@import "../../themes/native/native.globals.md.scss";
 
 :host {
   background-color: $backdrop-md-color;

core/src/components/backdrop/backdrop.md.scss

@@ -0,0 +1,9 @@
+@import "./backdrop.common";
+@import "../../themes/native/native.globals";
+
+// Backdrop
+// --------------------------------------------------
+
+:host {
+  z-index: $z-index-backdrop;
+}