feat(chip): add ionic theme and visual states (#29273)

Issue number: ROU-4840

---------

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

- Added a new Ionic Theme partial, with no dependencies to current
`ios/md` architecture. This is to avoid bleeding of the current Design
System into the work we are doing for the new Ionic Design System and
Theme. For that reason I duplicated part of the basic styles for the
Chip (display, box-sizing, etc) and created provisional scss variables,
that should be replaced later on with the correct global ones from the
new Design System.

- Added styles for info chip type states (default, hover, focus and
disabled)

- No new tests were done on this scope, as there're still other Chip
tasks being developed that would override any baselines defined now for
this theme. Once the initial basic work for the Chip is complete, tests
for the Ionic Theme should be implemented, under the task ROU-4837.

- A new page was created - `chip/tests/theme-ionic` - to check styles
for current implementation. This will also be used and improved in
future Chip Ionic Theme tasks.


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

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

@@ -0,0 +1,81 @@
+@use "../../themes/ionic.mixins" as mixins;
+
+// 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};
+  --border-color: transparent;
+  --color: #{$ionic-color-neutral-900};
+  --focus-ring-color: #{$ionic-states-focus-primary};
+  --focus-ring-width: #{$ionic-border-size-medium};
+
+  @include mixins.font-smoothing;
+  @include mixins.padding($ionic-space-xs, $ionic-space-xxs);
+  @include mixins.border-radius($ionic-border-radius-rounded-large);
+
+  display: inline-flex;
+
+  position: relative;
+
+  align-items: center;
+
+  min-height: 32px;
+
+  border-width: $ionic-border-size-small;
+  border-style: solid;
+
+  border-color: var(--border-color);
+
+  background: var(--background);
+  color: var(--color);
+
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-s;
+
+  cursor: pointer;
+
+  overflow: hidden;
+
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+// Chip: Focus
+// ---------------------------------------------
+
+:host(.ion-focused) {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-width);
+}
+
+// Chip: Hover
+// ---------------------------------------------
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --background: #{rgba($ionic-color-neutral-900, 0.16)};
+  }
+}
+
+// Chip: Disabled
+// ---------------------------------------------
+
+:host(.chip-disabled) {
+  opacity: 0.6;
+  pointer-events: none;
+}

core/src/components/chip/chip.tsx

@@ -14,7 +14,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'chip.ios.scss',
     md: 'chip.md.scss',
-    ionic: 'chip.md.scss',
+    ionic: 'chip.ionic.scss',
   },
   shadow: true,
 })
@@ -47,6 +47,7 @@ export class Chip implements ComponentInterface {
           'chip-outline': this.outline,
           'chip-disabled': this.disabled,
           'ion-activatable': true,
+          'ion-focusable': true,
         })}
       >
         <slot></slot>

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

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chip - Ionic States</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <h2>Info Chip</h2>
+
+        <h3>Default</h3>
+        <p>
+          <ion-chip>
+            <ion-label>Default</ion-label>
+          </ion-chip>
+        </p>
+
+        <h3>Focus</h3>
+        <p>
+          <ion-chip class="ion-focused">
+            <ion-label>Focused</ion-label>
+          </ion-chip>
+        </p>
+
+        <h3>Disabled</h3>
+        <p>
+          <ion-chip disabled>
+            <ion-label>Disabled</ion-label>
+          </ion-chip>
+        </p>
+      </ion-content>
+    </ion-app>
+
+    <style>
+      h2,
+      h3 {
+        padding-left: 16px;
+      }
+
+      p {
+        padding-left: 8px;
+      }
+    </style>
+  </body>
+</html>