feat(chip): add recipe and variables

[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

Component styles for ion-chip are fragmented across multiple files (ios, md, ionic). Developers were restricted to those themes and how those themes structured the logic and styles.

What is the new behavior?

• Unified Style Architecture: Combined theme-specific styling into a single chip.base.scss file that consumes CSS variables, ensuring a single source of truth for component logic.
• Property-First Token Structure: Refactored the IonChip type and tokens to prioritize a Property-First approach. Instead of flat or element-centric tokens, they are nested by element and then by property (e.g., icon.firstChild.margin.end). This ensures:
  • Predictability: Developers can determine token names based on the CSS property they wish to override.
  • Consistency: The structure matches other system keys like padding and border.
  • Granularity: Allows for specific overrides of individual directions without cluttering the top-level interface.
• Defined TypeScript Interfaces: Added chip.interfaces.ts with reusable utility types like HueRef to standardize the "Bold vs. Subtle" logic used in variants and interaction states.
• Standardized Sizing: Introduced a "small" to md and ios.
• Standardized Hues: Introduced a "subtle" to md and ios.
• Defined Defaults: Updated defaults to be consistent regardless of theme.

Does this introduce a breaking change?

• Yes
• No

This PR introduces a breaking change to how IonChip is styled. Existing manual CSS overrides targeting internal chip structures or old token names will no longer work due to the shift to a Property-First token hierarchy and a unified base SCSS file.

Migration Path:

1. Token Updates: Update any custom theme configurations to match the new nested structure.

2. CSS Overrides: Ensure selectors align with the new slotted element logic and variable names (e.g., --ion-chip-hue-bold-bg).

--background should no longer be used. Setting the value with IonChip.hue.bold.bg and IonChip.hue.subtle.bg within the tokens file should be used to change the background based on the hue.

3. Properties: Update any references to match old defaults based on the theme.

If md or ios with no shape, then update the component to default to soft.

Other information

This PR significantly improves the developer experience for theming. By moving logic into default.tokens.ts and away from hardcoded SCSS functions, designers and developers can now override complex states (like an activated outline chip) purely through token configuration.

Preview:

• Basic
• Hue
• Shape
• Size
• States

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jan 29, 2026 4:27pm

[brandyscarney]

These numbers seem made up - maybe we need to define these calculations better?

[thetaPC]

The avatar size is based on the existing values from the original vars file.

[brandyscarney]

Why is the base 14 for Chip? Shouldn't all components have the same base size?

[thetaPC]

The original value is 14 based on the vars file. I don't remember why 14 was chosen.

[thetaPC]

The font family for chip on ionic-modular and this branch do not match when it comes to the ionic theme. The ionic theme uses ion-body-sm-medium to set the typography for chip. This variable includes font family with the value of -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol". This is exactly what is being rendered on this branch. However, the ionic-modular renders it with a value of var(--ion-font-family, inherit). Based on my investigation, ionic-modular and next are not loading the correct font family. This branch fixes it.