fix(tokens): fix usage on components and review scss architecture

core/api.txt

@@ -1707,10 +1707,8 @@ ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,
 ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false
-ion-progress-bar,css-prop,--background,ionic
 ion-progress-bar,css-prop,--background,ios
 ion-progress-bar,css-prop,--background,md
-ion-progress-bar,css-prop,--progress-background,ionic
 ion-progress-bar,css-prop,--progress-background,ios
 ion-progress-bar,css-prop,--progress-background,md
 ion-progress-bar,part,progress

core/src/components/accordion-group/accordion-group.ionic.scss

@@ -5,9 +5,9 @@
 // --------------------------------------------------
 
 :host {
-  min-width: 272px;
+  min-width: calc(#{globals.$ion-scale-6200} + #{globals.$ion-space-600});
 
-  background-color: globals.$ion-primitives-base-white;
+  background-color: globals.$ion-bg-neutral-subtlest-default;
 }
 
 // Inset Accordion Group

core/src/components/accordion/accordion.ionic.scss

@@ -21,7 +21,7 @@
 
   height: globals.$ion-border-size-025;
 
-  background-color: globals.$ion-primitives-neutral-300;
+  background-color: globals.$ion-border-default;
 
   content: "";
 
@@ -43,9 +43,9 @@
 // we are adding a border to the ::after element of the accordion.
 ::slotted(ion-item[slot="header"]) {
   --border-radius: inherit;
-  --color: #{globals.$ion-primitives-neutral-1200};
-  --border-width: 0;
-  --inner-border-width: 0;
+  --color: #{globals.$ion-text-default};
+  --border-width: #{globals.$ion-border-size-0};
+  --inner-border-width: #{globals.$ion-scale-0};
   --min-height: #{globals.$ion-scale-700};
   --padding-top: #{globals.$ion-space-300};
   --padding-end: #{globals.$ion-space-400};
@@ -62,7 +62,7 @@
   @include globals.padding(null, globals.$ion-space-400, globals.$ion-space-300, globals.$ion-space-400);
   @include globals.typography(globals.$ion-body-md-regular);
 
-  color: globals.$ion-primitives-neutral-1000;
+  color: globals.$ion-text-default;
 }
 
 // Disabled Accordion

core/src/components/avatar/avatar.common.scss

@@ -1,4 +1,4 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins.scss";
 
 // Avatar
 // --------------------------------------------------

core/src/components/avatar/avatar.ionic.scss

@@ -1,5 +1,5 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
-@import "./avatar.common";
+@use "./avatar.common";
 
 // Ionic Avatar
 // --------------------------------------------------
@@ -8,21 +8,19 @@
   --padding-top: #{globals.$ion-space-0};
   --padding-bottom: #{globals.$ion-space-0};
 
+  @include globals.typography(globals.$ion-heading-h6-medium);
+
   display: flex;
 
   align-items: center;
   justify-content: center;
 
-  background: globals.$ion-primitives-neutral-100;
-  color: globals.$ion-primitives-neutral-800;
-
-  font-weight: globals.$ion-font-weight-medium;
-
-  line-height: globals.$ion-font-line-height-700;
+  background: globals.$ion-bg-neutral-subtlest-default;
+  color: globals.$ion-text-subtlest;
 }
 
 :host(:not(.avatar-image)) {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+  @include globals.padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 }
 
 // Avatar Sizes
@@ -33,38 +31,32 @@
   --padding-end: #{globals.$ion-space-050};
   --padding-start: #{globals.$ion-space-050};
 
+  @include globals.typography(globals.$ion-body-sm-medium);
+
   width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
-
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
 }
 
 /* Extra Small */
 :host(.avatar-xsmall) {
   --padding-end: #{globals.$ion-space-050};
   --padding-start: #{globals.$ion-space-050};
 
+  @include globals.typography(globals.$ion-body-sm-medium);
+
   width: globals.$ion-scale-600;
   height: globals.$ion-scale-600;
-
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
 }
 
 /* Small */
 :host(.avatar-small) {
   --padding-end: #{globals.$ion-space-150};
   --padding-start: #{globals.$ion-space-150};
 
+  @include globals.typography(globals.$ion-body-lg-medium);
+
   width: globals.$ion-scale-800;
   height: globals.$ion-scale-800;
-
-  font-size: globals.$ion-font-size-400;
-
-  line-height: globals.$ion-font-line-height-600;
 }
 
 /* Medium */
@@ -74,30 +66,28 @@
 
   width: globals.$ion-scale-1000;
   height: globals.$ion-scale-1000;
-
-  font-size: globals.$ion-font-size-450;
 }
 
 /* Large */
 :host(.avatar-large) {
   --padding-end: #{globals.$ion-space-250};
   --padding-start: #{globals.$ion-space-250};
 
+  @include globals.typography(globals.$ion-heading-h5-medium);
+
   width: globals.$ion-scale-1200;
   height: globals.$ion-scale-1200;
-
-  font-size: globals.$ion-font-size-500;
 }
 
 /* Extra Large */
 :host(.avatar-xlarge) {
   --padding-end: #{globals.$ion-space-300};
   --padding-start: #{globals.$ion-space-300};
 
+  @include globals.typography(globals.$ion-heading-h4-medium);
+
   width: globals.$ion-scale-1400;
   height: globals.$ion-scale-1400;
-
-  font-size: globals.$ion-font-size-550;
 }
 
 // Avatar Shapes
@@ -125,7 +115,7 @@
 // --------------------------------------------------
 
 :host(.avatar-icon) {
-  @include padding(0);
+  @include globals.padding(0);
 }
 
 :host(.avatar-xsmall) ::slotted(ion-icon) {

core/src/components/backdrop/backdrop.scss → 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.md.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/button/button.vars.scss → core/src/components/backdrop/backdrop.native.scss

@@ -1,7 +1,9 @@
+@import "./backdrop.common";
 @import "../../themes/native/native.globals";
 
-// Button
+// Backdrop
 // --------------------------------------------------
 
-/// @prop - Badge padding inside button
-$button-badge-padding: 2px;
+:host {
+  z-index: $z-index-backdrop;
+}

core/src/components/badge/badge.common.scss

@@ -1,6 +1,5 @@
 @use "../../themes/functions.color" as color;
 @import "../../themes/mixins";
-@import "./badge.common.vars";
 
 // Badge
 // --------------------------------------------------
@@ -15,26 +14,14 @@
    * @prop --padding-bottom: Bottom padding of the badge
    * @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
    */
-  --padding-top: #{$badge-padding-top};
-  --padding-end: #{$badge-padding-end};
-  --padding-bottom: #{$badge-padding-bottom};
-  --padding-start: #{$badge-padding-start};
-
   @include font-smoothing();
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
 
   display: inline-block;
 
-  min-width: $badge-min-width;
-
   background: var(--background);
   color: var(--color);
 
-  font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
-
-  line-height: 1;
-
   text-align: center;
 
   white-space: nowrap;

core/src/components/badge/badge.ionic.scss

@@ -10,12 +10,14 @@
   --padding-top: #{globals.$ion-space-0};
   --padding-bottom: #{globals.$ion-space-0};
 
+  @include globals.typography(globals.$ion-body-action-sm);
+
   display: inline-flex;
 
   align-items: center;
   justify-content: center;
 
-  font-weight: globals.$ion-font-weight-medium;
+  min-width: globals.$ion-scale-250;
 }
 
 // Bold Badge
@@ -114,10 +116,6 @@
 
   min-width: globals.$ion-scale-800;
   height: globals.$ion-scale-800;
-
-  font-size: globals.$ion-font-size-400;
-
-  line-height: globals.$ion-font-line-height-600;
 }
 
 :host(.badge-small) ::slotted(ion-icon) {
@@ -127,12 +125,9 @@
 
 /* Medium Badge */
 :host(.badge-medium) {
+  @include globals.typography(globals.$ion-body-action-md);
   min-width: globals.$ion-scale-1000;
   height: globals.$ion-scale-1000;
-
-  font-size: globals.$ion-font-size-450;
-
-  line-height: globals.$ion-font-line-height-700;
 }
 
 :host(.badge-medium) ::slotted(ion-icon) {
@@ -142,12 +137,9 @@
 
 /* Large Badge */
 :host(.badge-large) {
+  @include globals.typography(globals.$ion-body-action-lg);
   min-width: globals.$ion-scale-1200;
   height: globals.$ion-scale-1200;
-
-  font-size: globals.$ion-font-size-500;
-
-  line-height: globals.$ion-font-line-height-700;
 }
 
 :host(.badge-large) ::slotted(ion-icon) {
@@ -157,12 +149,9 @@
 
 /* Extra Large Badge */
 :host(.badge-xlarge) {
+  @include globals.typography(globals.$ion-heading-h4-medium);
   min-width: globals.$ion-scale-1400;
   height: globals.$ion-scale-1400;
-
-  font-size: globals.$ion-font-size-550;
-
-  line-height: globals.$ion-font-line-height-700;
 }
 
 :host(.badge-xlarge) ::slotted(ion-icon) {
@@ -239,13 +228,10 @@
 }
 
 :host(:not(:empty).in-button) {
+  @include globals.typography(globals.$ion-body-action-xs);
   min-width: globals.$ion-scale-400;
   height: globals.$ion-scale-400;
 
-  font-size: globals.$ion-font-size-300;
-
-  line-height: globals.$ion-font-line-height-500;
-
   ::slotted(ion-icon) {
     width: globals.$ion-scale-300;
     height: globals.$ion-scale-300;