fix button tokens architecture

Author: BenOsodrac

core/src/components/button/button.common.scss

@@ -1,5 +1,5 @@
 @import "../../themes/mixins";
-@import "./button.vars";
+@import "../../themes/functions.color";
 
 // Button
 // --------------------------------------------------
@@ -70,23 +70,12 @@
   pointer-events: none;
 }
 
-// Solid Button
-// --------------------------------------------------
-
-// Default Solid Color
-:host(.button-solid) {
-  --background: #{ion-color(primary, base)};
-  --color: #{ion-color(primary, contrast)};
-}
-
 // Outline Button
 // --------------------------------------------------
 
 // Default Outline Color
 :host(.button-outline) {
-  --border-color: #{ion-color(primary, base)};
   --background: transparent;
-  --color: #{ion-color(primary, base)};
 }
 
 // Clear Button
@@ -96,7 +85,6 @@
 :host(.button-clear) {
   --border-width: 0;
   --background: transparent;
-  --color: #{ion-color(primary, foreground)};
 }
 
 // Block Button
@@ -327,8 +315,6 @@ ion-ripple-effect {
 }
 
 :host ::slotted(ion-badge[vertical]:not(:empty)) {
-  @include padding($button-badge-padding);
-
   display: flex;
 
   align-items: center;

core/src/components/button/button.ionic.scss

@@ -39,6 +39,12 @@
 // Button Fills
 // -------------------------------------------------------------------------------
 
+// Default Clear Color
+:host(.button-clear) {
+  --color: #{ion-color(primary, foreground)};
+}
+
+
 // Solid Button
 // --------------------------------------------------
 
@@ -47,6 +53,8 @@
   --background-hover: #{globals.ion-color(primary, shade)};
   --background-focused: transparent;
   --background-hover-opacity: 1;
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -61,6 +69,8 @@
   --background-focused: transparent;
   --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
   --background-hover-opacity: 1;
+  --border-color: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, base)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -73,6 +83,7 @@
   --background-focused: transparent;
   --background-hover: #{globals.$ion-bg-neutral-subtlest-press};
   --background-hover-opacity: 1;
+  --color: #{globals.ion-color(primary, foreground)};
   --ripple-opacity: var(--background-activated-opacity, 1);
   --ripple-color: var(--background-activated);
 }
@@ -240,8 +251,11 @@
 // Button: Disabled
 // --------------------------------------------------
 
-:host(.button-disabled) {
-  opacity: 0.6;
+:host(.button-disabled) .button-native::after {
+  @include globals.disabled-state();
+
+  width: inherit;
+  height: inherit;
 }
 
 // Button Icons
@@ -288,3 +302,9 @@
 :host(.button-xlarge) ::slotted(ion-spinner[slot="end"]) {
   @include globals.margin-horizontal(globals.$ion-space-300, null);
 }
+
+// Button Badge
+// --------------------------------------------------
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include globals.padding(globals.$ion-space-050);
+}

core/src/components/button/button.native.scss

@@ -1,4 +1,4 @@
-@use "../../themes/native/native.globals.md" as globals;
+@use "../../themes/native/native.globals" as globals;
 @use "./button.common";
 
 // Button - iOS and Material Design
@@ -8,6 +8,32 @@
   font-family: globals.$font-family-base;
 }
 
+// Solid Button
+// --------------------------------------------------
+
+// Default Solid Color
+:host(.button-solid) {
+  --background: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, contrast)};
+}
+
+// Outline Button
+// --------------------------------------------------
+
+// Default Outline Color
+:host(.button-outline) {
+  --border-color: #{globals.ion-color(primary, base)};
+  --color: #{globals.ion-color(primary, base)};
+}
+
+// Clear Button
+// --------------------------------------------------
+
+// Default Clear Color
+:host(.button-clear) {
+  --color: #{globals.ion-color(primary, foreground)};
+}
+
 // Button Icons
 // --------------------------------------------------
 
@@ -29,3 +55,7 @@
 .button-native ::slotted(ion-badge) {
   position: fixed;
 }
+
+:host ::slotted(ion-badge[vertical]:not(:empty)) {
+  @include globals.padding(2px);
+}