feat(checkbox): improve disabled state and create disable mixin (#29599)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Improved Checkbox disabled state
- Added more examples on theme-ionic file for disabled checkbox
- Created ionic.mixin for new DS specific mixins, while still forwarding
the globals one.
- Created mixin for the disabled-state, that can be reused on multiple
Ionic Theme components.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Gonçalo M <goncalo.martins@outsystems.com>

core/src/components/checkbox/checkbox.ionic.scss

@@ -319,11 +319,8 @@ input {
   pointer-events: none;
 }
 
-// disabled, indeterminate checkbox
-:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
-  border-width: globals.$ionic-border-size-0;
-
-  background-color: #{globals.$ionic-color-base-white};
+:host(.checkbox-disabled) .native-wrapper:after {
+  @include globals.disabled-state();
 }
 
 // disabled, unchecked checkbox
@@ -338,8 +335,6 @@ input {
   border-width: globals.$ionic-border-size-0;
 
   background-color: globals.$ionic-color-primary-base;
-
-  opacity: 0.6;
 }
 
 // Checkbox Hover

core/src/components/checkbox/test/theme-ionic/index.html

@@ -38,6 +38,8 @@
           <ion-checkbox justify="start" shape="soft" checked>Checked</ion-checkbox>
           <ion-checkbox justify="start" disabled>Disabled</ion-checkbox>
           <ion-checkbox justify="start" disabled checked>Disabled, Checked</ion-checkbox>
+          <ion-checkbox justify="start" disabled indeterminate>Indeterminate Disabled</ion-checkbox>
+          <ion-checkbox justify="start" disabled indeterminate checked>Indeterminate Disabled Checked</ion-checkbox>
           <ion-checkbox justify="start" checked style="--checkmark-width: 7">Checkmark Width</ion-checkbox>
           <ion-checkbox justify="start" checked class="checkbox-part">Checkmark Shadow Part</ion-checkbox>
           <ion-checkbox justify="start" checked style="--size: 100px">--size</ion-checkbox>

core/src/themes/ionic/ionic.globals.scss

@@ -2,7 +2,7 @@
 @forward "../../foundations/ionic.vars.scss";
 
 // Global Mixins
-@forward "../mixins";
+@forward "./ionic.mixins";
 
 // Global Utility Functions
 @forward "../functions.sizes";

core/src/themes/ionic/ionic.mixins.scss

@@ -0,0 +1,24 @@
+// Ionic Mixins
+// forward the global mixin to be used on component scope
+@forward "../mixins";
+// use global mixins on this ionic.mixin context
+@use "../mixins" as mixins;
+@use "../../foundations/ionic.vars.scss" as tokens;
+
+// Disabled mixin to be used on pseudo elements for the Ionic Theme disabled state
+//
+// ex: :host(.checkbox-disabled) .native-wrapper:after {
+//       @include globals.disable-state();
+//      }
+//
+// --------------------------------------------------
+@mixin disabled-state() {
+  @include mixins.position(0, 0, 0, 0);
+  position: absolute;
+
+  background-color: tokens.$ionic-state-disabled;
+
+  content: "";
+
+  pointer-events: none;
+}