feat(chip): add recipe and variables

core/scripts/testing/scripts.js

@@ -120,10 +120,11 @@ const DEFAULT_THEME = 'md';
       window.Ionic.config = window.Ionic.config || {};
       window.Ionic.config.customTheme = theme;
 
-      // Re-apply the global theme
+      // Re-apply the global theme, needed for Playwright tests
       if (window.Ionic.config.get && window.Ionic.config.set) {
         const themeModule = await import('/themes/utils/theme.js');
         themeModule.applyGlobalTheme(theme);
+        themeModule.applyComponentsTheme(theme);
       }
     } catch (error) {
       console.error(`Failed to load theme tokens for ${themeName}:`, error);

core/src/components.d.ts

@@ -872,7 +872,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
           * @default 'subtle'
          */
         "hue"?: 'bold' | 'subtle';
@@ -886,11 +886,13 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
+          * @default 'round'
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * @default 'large'
          */
         "size"?: 'small' | 'large';
         /**
@@ -6842,7 +6844,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
           * @default 'subtle'
          */
         "hue"?: 'bold' | 'subtle';
@@ -6856,11 +6858,13 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
+          * @default 'round'
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
+          * @default 'large'
          */
         "size"?: 'small' | 'large';
         /**

core/src/components/chip/chip.base.scss

@@ -0,0 +1,260 @@
+@use "../../themes/mixins" as mixins;
+@use "../../themes/functions.color" as colors;
+@use "./chip.base.vars.scss" as vars;
+@use "sass:meta";
+
+// Chip: Common Styles
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --background: Background of the chip
+   * @prop --border-radius: Border radius of the chip
+   * @prop --color: Color of the chip
+   * @prop --focus-ring-color: Color of the focus ring
+   * @prop --focus-ring-width: Width of the focus ring
+   */
+  --focus-ring-color: var(--ion-chip-state-focus-ring-color);
+  --focus-ring-width: var(--ion-chip-state-focus-ring-width);
+
+  @include mixins.font-smoothing();
+  @include mixins.border-radius(var(--border-radius));
+  @include mixins.margin(var(--ion-chip-margin));
+  @include mixins.padding(var(--ion-chip-padding-vertical), var(--ion-chip-padding-horizontal));
+  @include mixins.typography(vars.$chip-typography);
+
+  display: inline-flex;
+  position: relative;
+
+  align-items: center;
+  justify-content: center;
+
+  background: var(--background);
+  color: var(--color);
+
+  line-height: var(--ion-chip-line-height);
+
+  cursor: pointer;
+  overflow: hidden;
+  vertical-align: middle;
+  box-sizing: border-box;
+
+  gap: var(--ion-chip-gap);
+}
+
+// Chip Sizes
+// ---------------------------------------------
+
+:host(.chip-small) {
+  min-height: var(--ion-chip-size-small-height);
+
+  font-size: var(--ion-chip-size-small-font-size);
+}
+
+:host(.chip-large) {
+  min-height: var(--ion-chip-size-large-height);
+
+  font-size: var(--ion-chip-size-large-font-size);
+}
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+  --border-radius: var(--ion-chip-shape-soft-border-radius);
+}
+
+:host(.chip-round) {
+  --border-radius: var(--ion-chip-shape-round-border-radius);
+}
+
+:host(.chip-rectangular) {
+  --border-radius: var(--ion-chip-shape-rectangular-border-radius);
+}
+
+// Chip Hues
+// ---------------------------------------------
+
+// Bold
+:host(.chip-bold) {
+  --background: var(--ion-chip-hue-bold-bg);
+  --color: var(--ion-chip-hue-bold-color);
+}
+
+:host(.chip-bold.chip-outline) {
+  border-color: var(--ion-chip-variant-outline-border-color-bold);
+}
+
+// Subtle
+:host(.chip-subtle) {
+  --background: var(--ion-chip-hue-subtle-bg);
+  --color: var(--ion-chip-hue-subtle-color);
+}
+
+:host(.chip-subtle.chip-outline) {
+  border-color: var(--ion-chip-variant-outline-border-color-subtle);
+}
+
+// Chip Colors
+// ---------------------------------------------
+
+// Bold
+:host(.ion-color.chip-bold) {
+  background: var(--ion-chip-hue-bold-semantic-bg);
+  color: var(--ion-chip-hue-bold-semantic-color);
+}
+
+:host(.ion-color.chip-bold.chip-outline) {
+  border-color: var(--ion-chip-variant-outline-semantic-border-color-bold);
+}
+
+// Subtle
+:host(.ion-color.chip-subtle) {
+  background: colors.current-color(base, $subtle: true); // always the same regardless of theme
+  color: colors.current-color(contrast, $subtle: true); // always the same regardless of theme
+}
+
+:host(.ion-color.chip-subtle.chip-outline) {
+  border-color: var(--ion-chip-variant-outline-semantic-border-color-subtle);
+}
+
+// Outline Chip
+// ---------------------------------------------
+
+:host(.chip-outline) {
+  border-width: var(--ion-chip-variant-outline-border-width);
+  border-style: solid;
+
+  background: var(--ion-chip-variant-outline-bg, var(--background));
+}
+
+:host(.chip-outline.ion-color.chip-bold) {
+  background: var(--ion-chip-variant-outline-bg, var(--ion-chip-hue-bold-semantic-bg));
+}
+
+:host(.chip-outline.ion-color.chip-subtle) {
+  background: var(--ion-chip-variant-outline-bg, colors.current-color(base, $subtle: true));
+}
+
+// Chip States
+// ---------------------------------------------
+
+// Disabled
+:host(.chip-disabled) {
+  cursor: default;
+  opacity: var(--ion-chip-state-disabled-opacity);
+  pointer-events: none;
+}
+
+// Focus
+:host(.ion-focused) {
+  @include mixins.focused-state(var(--focus-ring-width), $color: var(--focus-ring-color));
+}
+
+:host(.ion-focused.chip-bold) {
+  --background: var(--ion-chip-state-focus-bg, var(--ion-chip-hue-bold-bg));
+}
+
+:host(.ion-focused.chip-subtle) {
+  --background: var(--ion-chip-state-focus-bg, var(--ion-chip-hue-subtle-bg));
+}
+
+:host(.ion-focused.ion-color.chip-bold) {
+  background: var(--ion-chip-hue-bold-semantic-state-focus-bg, var(--ion-chip-hue-bold-semantic-bg));
+}
+
+:host(.ion-focused.ion-color.chip-subtle) {
+  background: var(--ion-chip-hue-subtle-semantic-state-focus-bg, colors.current-color(base, $subtle: true));
+}
+
+:host(.ion-focused.chip-outline.chip-bold:not(.ion-color)) {
+  background: var(--ion-chip-variant-outline-state-focus-bg-bold, var(--ion-chip-hue-bold-bg));
+}
+
+:host(.ion-focused.chip-outline.chip-subtle:not(.ion-color)) {
+  background: var(--ion-chip-variant-outline-state-focus-bg-subtle, var(--ion-chip-hue-subtle-bg));
+}
+
+// Activated
+:host(.ion-activated) {
+  --background: var(--ion-chip-state-activated-bg);
+}
+
+:host(.ion-activated.ion-color) {
+  background: var(--ion-chip-state-activated-semantic-bg);
+}
+
+// Hover
+@media (any-hover: hover) {
+  :host(.chip-bold:hover) {
+    --background: var(--ion-chip-state-hover-bg, var(--ion-chip-hue-bold-bg));
+  }
+
+  :host(.chip-subtle:hover) {
+    --background: var(--ion-chip-state-hover-bg, var(--ion-chip-hue-subtle-bg));
+  }
+
+  :host(.chip-bold.ion-color:hover) {
+    background: var(--ion-chip-hue-bold-semantic-state-hover-bg, var(--ion-chip-hue-bold-semantic-bg));
+  }
+
+  :host(.chip-subtle.ion-color:hover) {
+    background: var(--ion-chip-hue-subtle-semantic-state-hover-bg, var(--ion-chip-hue-subtle-semantic-bg));
+  }
+
+  :host(.chip-outline.chip-bold:not(.ion-color):hover) {
+    background: var(--ion-chip-variant-outline-state-hover-bg-bold, var(--background));
+  }
+
+  :host(.chip-outline.chip-subtle:not(.ion-color):hover) {
+    background: var(--ion-chip-variant-outline-state-hover-bg-subtle, var(--background));
+  }
+}
+
+// Chip Slotted Elements
+// ---------------------------------------------
+
+// Icon
+::slotted(ion-icon) {
+  font-size: var(--ion-chip-icon-size);
+}
+
+:host(:not(.ion-color)) ::slotted(ion-icon) {
+  color: var(--ion-chip-icon-color);
+}
+
+::slotted(ion-icon:first-child) {
+  @include mixins.margin(
+    var(--ion-chip-icon-first-child-margin),
+    var(--ion-chip-icon-first-child-margin-end),
+    $start: var(--ion-chip-icon-first-child-margin)
+  );
+}
+
+::slotted(ion-icon:last-child) {
+  @include mixins.margin(var(--ion-chip-icon-last-child-margin), $start: var(--ion-chip-icon-last-child-margin-start));
+}
+
+// Avatar
+::slotted(ion-avatar) {
+  flex-shrink: 0;
+
+  width: var(--ion-chip-avatar-size, revert-layer);
+  height: var(--ion-chip-avatar-size, revert-layer);
+}
+
+::slotted(ion-avatar:first-child) {
+  @include mixins.margin(
+    var(--ion-chip-avatar-first-child-margin-vertical),
+    $end: var(--ion-chip-avatar-first-child-margin-end),
+    $start: var(--ion-chip-avatar-first-child-margin-start)
+  );
+}
+
+::slotted(ion-avatar:last-child) {
+  @include mixins.margin(
+    var(--ion-chip-avatar-last-child-margin-vertical),
+    $end: var(--ion-chip-avatar-last-child-margin-end),
+    $start: var(--ion-chip-avatar-last-child-margin-start)
+  );
+}

core/src/components/chip/chip.base.vars.scss

@@ -0,0 +1,15 @@
+@use "../../themes/functions.color" as colors;
+
+/// Chip Variables
+/// ---------------------------------------------
+
+/// @prop - Typography styles for the chip
+$chip-typography: (
+  font-family: var(--ion-chip-typography-font-family),
+  font-size: var(--ion-chip-typography-font-size),
+  font-weight: var(--ion-chip-typography-font-weight),
+  letter-spacing: var(--ion-chip-typography-letter-spacing),
+  line-height: var(--ion-chip-typography-line-height),
+  text-decoration: var(--ion-chip-typography-text-decoration),
+  text-transform: var(--ion-chip-typography-text-transform),
+);