fix(color): preserve Ionic color attributes

demo/src/app/index/pages/button/button.page.html

@@ -69,6 +69,11 @@ <h2>button</h2>
           <ion-button [disabled]="true" size="default">Link</ion-button>
         </ion-buttons>
       </ion-item>
+      <ion-item>
+        <ion-label><code>button[disabled][color]</code></ion-label>
+        <ion-button slot="end" color="danger" fill="solid" type="submit" [disabled]="true">Danger</ion-button>
+        <ion-button slot="end" color="light" fill="solid" type="submit" [disabled]="true">Light</ion-button>
+      </ion-item>
     </ion-item-group>
   </ion-list>
 

demo/src/app/index/pages/item-list/item-list.page.html

@@ -11,6 +11,7 @@
       <ion-item>
         <ion-label>
           <ion-icon name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
+          <ion-icon color="warning" name="logo-ionic" style="background: linear-gradient(#489bfd, #2b77f4)"></ion-icon>
           <h2>item-list</h2>
           <ion-header collapse="condense">
             <ion-toolbar></ion-toolbar>
@@ -39,7 +40,7 @@ <h2>item-list</h2>
   </ion-list>
 
   <ion-list [inset]="true">
-    <ion-list-header><ion-label>Inset List 2 Lines</ion-label></ion-list-header>
+    <ion-list-header><ion-label color="danger">Inset List 2 Lines with danger header</ion-label></ion-list-header>
     <ion-item-group>
       <ion-item>
         <ion-label>Basic Item</ion-label>

src/styles/components/ion-button.scss

@@ -284,8 +284,15 @@ $scaleup-large-icon-only: 1.22;
     &.button-disabled {
       --background: var(--ion-background-color-step-200, #cccccc);
       opacity: 1;
+
+      &.ion-color {
+        --background: var(--ion-color-base);
+        --color: var(--ion-color-contrast);
+        opacity: 0.38;
+      }
+
       &::part(native) {
-        color: #fff;
+        color: var(--color);
       }
       &.ion-color::part(native) {
         background: var(--background);

src/styles/utils/structured-list.scss

@@ -28,7 +28,10 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
     ion-label {
       font-size: 0.9rem;
       margin: 8px 4px 4px;
-      color: var(--ion-color-medium-tint);
+
+      &:not(.ion-color) {
+        color: var(--ion-color-medium-tint);
+      }
     }
 
     ion-button {
@@ -58,9 +61,12 @@ $groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group
 
       ion-icon {
         font-size: 2.8rem;
-        color: #ffffff;
         border-radius: 20%;
         padding: 6px;
+
+        &:not(.ion-color) {
+          color: #ffffff;
+        }
       }
 
       h2 {