feat(chip): add recipe and variables #30873

thetaPC · 2025-12-15T16:28:54Z

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:

Token Updates: Update any custom theme configurations to match the new nested structure.
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.

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:

vercel · 2025-12-15T16:29:00Z

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

Project	Deployment	Review	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Jan 20, 2026 6:00pm

brandyscarney · 2025-12-15T18:12:02Z

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

Do we need Sass variables for this? I feel like it just adds another layer when the CSS variables would do

I created it so we don't have such long variables cluttering the base file. Thoughts?

I ended up removing it: 4dd7e23

core/src/components/chip/chip.tsx

brandyscarney · 2025-12-15T18:14:40Z

core/src/themes/themes.interfaces.ts

 };
+
+type Components = {
+  IonChip?: {


Do you think we should keep these interfaces in the component's folder to keep it better organized? Or is this something we might move later and combine between components?

core/src/utils/theme.ts

brandyscarney · 2025-12-15T19:45:54Z

core/src/themes/md/default.tokens.ts

+      paddingVertical: '6px',
+      paddingHorizontal: '12px',


Suggested change

paddingVertical: '6px',

paddingHorizontal: '12px',

padding: {

vertical: '6px',

horizontal: '12px',

}

Would it not be cleaner to do it as objects?

Looks good. We might want to move to top, end, start and bottom for all components for consistency but we can tackle that when we get there.

I lean towards tackling it when we get there. Mainly because I would like to keep the tokens to a bare minimum. But I'm open to do it now if you prefer.

brandyscarney · 2025-12-15T19:48:21Z

core/src/themes/md/default.tokens.ts

A lot of these values are hardcoded - why aren't we using the design tokens like this:

--ion-scaling-xxs --ion-scaling-xs --ion-scaling-sm etc

I was in early stages of just testing. Here's the refined version: 401ef1f

brandyscarney · 2025-12-15T19:49:09Z

core/src/themes/md/default.tokens.ts

+      },
+
+      avatar: {
+        size: `${24 / fontSizes.chipBase}em`,


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

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

brandyscarney · 2025-12-15T19:50:10Z

core/src/themes/md/default.tokens.ts

+}
+
+const fontSizes = {
+  chipBase: 14,


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

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

brandyscarney · 2025-12-15T19:50:26Z

core/src/themes/ios/default.tokens.ts

My comments on the md file apply here as well

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

thetaPC · 2026-01-08T21:58:06Z

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

+  @include mixins.border-radius(var(--border-radius));
+  @include mixins.margin(vars.$chip-margin);
+  @include mixins.padding(vars.$chip-padding-vertical, vars.$chip-padding-horizontal);
+  @include mixins.typography(vars.$chip-typography);


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.

thetaPC · 2026-01-15T18:02:42Z

...s/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-ios-ltr-Mobile-Chrome-linux.png

These changes for ios are happening because

the shape default is now round instead of soft.

the hue default is now subtle instead of bold.

thetaPC · 2026-01-15T18:02:52Z

...ts/avatar/test/basic/avatar.e2e.ts-snapshots/avatar-chip-diff-md-ltr-Mobile-Chrome-linux.png

These changes for md are happening because

the shape default is now round instead of soft.

the hue default is now subtle instead of bold.

thetaPC · 2026-01-20T17:54:39Z

core/src/global/ionic-global.ts

+  const customConfig = customTheme?.config;
+  if (customConfig) {
+    Object.entries(customConfig).forEach(([key, value]) => {
+      config.set(key as keyof IonicConfig, value);
+    });
+  }


This is needed for configs like rippleEffect to be set if the user passed them through the customTheme obj.

feat(chip): add recipe and variables

e729dea

github-actions bot added the package: core @ionic/core package label Dec 15, 2025

vercel bot deployed to Preview December 15, 2025 16:30 View deployment

brandyscarney reviewed Dec 15, 2025

View reviewed changes

thetaPC and others added 3 commits December 15, 2025 16:50

Update core/src/components/chip/chip.tsx

0d6bd9d

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

Update core/src/utils/theme.ts

ade5c05

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

Update core/src/utils/theme.ts

0349ff7

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

vercel bot had a problem deploying to Preview December 16, 2025 00:54 Failure

thetaPC added 4 commits December 15, 2025 16:56

fix(theme): remove extra curly bracket

ee81a8a

refactor(theme): remove root

c6dfb10

chore(components): run build

e795c61

chore(many): run lint

39bfce5

vercel bot deployed to Preview December 16, 2025 01:03 View deployment

test(theme): add more generateComponentsThemeCSS tests

b67f4f5

vercel bot deployed to Preview December 16, 2025 01:07 View deployment

Update core/src/themes/mixins.scss

9ecb103

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

vercel bot deployed to Preview December 16, 2025 01:13 View deployment

refactor(theme): seperate objects

7040091

vercel bot deployed to Preview December 16, 2025 01:16 View deployment

feat(chip): adding ionic theme

098cba4

vercel bot deployed to Preview December 18, 2025 02:17 View deployment

thetaPC commented Jan 8, 2026

View reviewed changes

feat(themes): add ionic

55b610a

vercel bot had a problem deploying to Preview January 9, 2026 21:14 Failure

refactor(themes): optimize chip recipe

918582b

vercel bot deployed to Preview January 12, 2026 20:38 View deployment

refactor(chip): remove majority usage of Sass vars

3e5236c

vercel bot deployed to Preview January 12, 2026 21:03 View deployment

feat(theme): add ios recipe

b90fe18

test(avatar): update chip snapshots

95aeea4

thetaPC commented Jan 15, 2026

View reviewed changes

vercel bot deployed to Preview January 15, 2026 18:04 View deployment

feat(theme): use native colors for ionic

6ae28ab

vercel bot deployed to Preview January 16, 2026 21:37 View deployment

feat(themes): use native colors for ionic

fd0f67f

vercel bot deployed to Preview January 16, 2026 22:01 View deployment

refactor(themes): use variables for ionic

66fd3f3

vercel bot deployed to Preview January 16, 2026 22:41 View deployment

feat(themes): remove typography key

ce86297

vercel bot deployed to Preview January 17, 2026 00:30 View deployment

feat(themes): remove colors object

85989fc

vercel bot deployed to Preview January 17, 2026 00:43 View deployment

thetaPC force-pushed the FW-6833 branch from 0967a3e to 85989fc Compare January 17, 2026 01:30

refactor(chip): move type to component dir

f425a07

vercel bot deployed to Preview January 17, 2026 01:46 View deployment

thetaPC added 2 commits January 16, 2026 17:47

chore(chip): remove unused files

d927c57

chore(chip): remove theme test file

a710962

vercel bot deployed to Preview January 17, 2026 01:50 View deployment

chore(chip): update interfaces

83c948e

vercel bot deployed to Preview January 19, 2026 15:01 View deployment

thetaPC marked this pull request as ready for review January 19, 2026 17:56

thetaPC requested a review from a team as a code owner January 19, 2026 17:56

thetaPC requested review from BenOsodrac and brandyscarney January 19, 2026 17:56

thetaPC commented Jan 20, 2026

View reviewed changes

chore(chip): cleanup

81ec32f

vercel bot deployed to Preview January 20, 2026 18:00 View deployment

thetaPC mentioned this pull request Jan 20, 2026

feat(tokens): add gray and text colors #30799

Open

2 tasks

-      paddingVertical: '6px',
-      paddingHorizontal: '12px',
+      padding: {
+        vertical: '6px',
+        horizontal: '12px',
+      }

feat(chip): add recipe and variables #30873

Are you sure you want to change the base?

feat(chip): add recipe and variables #30873

Conversation

thetaPC commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Dec 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented Dec 15, 2025 •

edited

Loading

vercel bot commented Dec 15, 2025 •

edited

Loading