feat(Chip): Add outline support for Chip Ionic Theme (#29284)

Issue number: resolves #ROU-4839

---------

<!-- 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. -->

- Added support for outline option on Ionic Theme
- Replaced temporary variables with global variables from Design Tokens
- Removed associated TODO

## 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/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/src/components/chip/chip.ionic.scss

@@ -1,32 +1,21 @@
 @use "../../themes/ionic.mixins" as mixins;
+@use "../../foundations/ionic.vars.scss" as tokens;
 
 // Chip
 // --------------------------------------------------
 
-// TODO: These variables below are not definitive! Should be replaced by the real global variables once the Design System work is done and merged!
-// That work should be done once the PR #29245 is merged and FW-5964-migration is complete
-$ionic-color-neutral-10: #f5f5f5;
-$ionic-color-neutral-100: #dadada;
-$ionic-color-neutral-900: #05080f;
-$ionic-border-size-small: 1px;
-$ionic-border-size-medium: 2px;
 $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet for this one, but it should be created in the future, once UX team has figma tokens done
-$ionic-font-family: "Inter", sans-serif; // TODO(ROU-4837): this will be replaced by the real variables once the Typography task is merged - ROU-4810 - on the final Chip task
-$ionic-font-size-s: 14px;
-$ionic-border-radius-rounded-large: 16px;
-$ionic-space-xxs: 6px;
-$ionic-space-xs: 8px;
 
 :host {
-  --background: #{$ionic-color-neutral-10};
+  --background: #{tokens.$ionic-color-neutral-10};
   --border-color: transparent;
-  --color: #{$ionic-color-neutral-900};
+  --color: #{tokens.$ionic-color-neutral-900};
   --focus-ring-color: #{$ionic-states-focus-primary};
-  --focus-ring-width: #{$ionic-border-size-medium};
+  --focus-ring-width: #{tokens.$ionic-border-size-medium};
 
   @include mixins.font-smoothing;
-  @include mixins.padding($ionic-space-xs, $ionic-space-xxs);
+  @include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs);
-  @include mixins.border-radius($ionic-border-radius-rounded-large);
+  @include mixins.border-radius(tokens.$ionic-border-radius-rounded-large);
 
   display: inline-flex;
 
@@ -36,7 +25,7 @@ $ionic-space-xs: 8px;
 
   min-height: 32px;
 
-  border-width: $ionic-border-size-small;
+  border-width: tokens.$ionic-border-size-small;
   border-style: solid;
 
   border-color: var(--border-color);
@@ -44,17 +33,24 @@ $ionic-space-xs: 8px;
   background: var(--background);
   color: var(--color);
 
-  font-family: $ionic-font-family;
+  font-family: tokens.$ionic-font-family;
-  font-size: $ionic-font-size-s;
+  font-size: tokens.$ionic-font-size-m;
 
   cursor: pointer;
 
   overflow: hidden;
 
-  vertical-align: middle;
   box-sizing: border-box;
 }
 
+// Outline Chip
+// ---------------------------------------------
+
+:host(.chip-outline) {
+  --background: transparent;
+  border-color: tokens.$ionic-color-neutral-100;
+}
+
 // Chip: Focus
 // ---------------------------------------------
 
@@ -68,7 +64,7 @@ $ionic-space-xs: 8px;
 
 @media (any-hover: hover) {
   :host(:hover) {
-    --background: #{rgba($ionic-color-neutral-900, 0.16)};
+    --background: #{rgba(tokens.$ionic-color-neutral-900, 0.16)};
   }
 }
 

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

@@ -39,6 +39,17 @@
             <ion-label>Disabled</ion-label>
           </ion-chip>
         </p>
+
+        <h3>Outline</h3>
+        <p>
+          <ion-chip outline="true">
+            <ion-label>Default</ion-label>
+          </ion-chip>
+
+          <ion-chip class="ion-focused" outline="true">
+            <ion-label>Focus</ion-label>
+          </ion-chip>
+        </p>
       </ion-content>
     </ion-app>
 
@@ -51,6 +62,10 @@
       p {
         padding-left: 8px;
       }
+
+      ion-chip + ion-chip {
+        margin-inline-start: 16px;
+      }
     </style>
   </body>
 </html>