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 24, 2026 0:31am

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

core/src/components/chip/chip.tsx

core/src/themes/themes.interfaces.ts

core/src/utils/theme.ts

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

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.

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

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

brandyscarney

This is looking really good, great work! You've made a lot of improvements here. I reviewed this over the past couple of days and GitHub stopped showing me some of my previous comments so sorry if I repeated anything. I am going to leave a comment on the Jira ticket outlining some changes I think we should make which may overlap with some of my comments here. I decided to kind of consolidate my thoughts there.

brandyscarney · 2026-01-21T15:01:19Z

core/src/components/chip/test/hue/chip.e2e.ts


        <div id="container">
-          <ion-chip>
+          <ion-chip hue="subtle">


Why do we need to define hue here if this is the default?

For personal preference 😅. It's nice to be able to read the HTML and know immediately what prop is being used without having to go to the component file and seeing what the default is. I'm not a stickler so I can revert if you prefer the original version.

brandyscarney · 2026-01-21T15:02:57Z

core/src/components/chip/test/hue/index.html

        <h2>Chip Hue: Subtle</h2>

-        <ion-chip>
+        <ion-chip hue="subtle">


Why do we need to define hue here if this is the default?

#30873 (comment)

brandyscarney · 2026-01-21T15:08:28Z

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

We should consider removing this test from avatar and having it in chip instead.

I can make a note to do that in main that way it trickles down to all the branches.

brandyscarney · 2026-01-21T15:14:13Z

...chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png

Is this color change right? The default bold chip is no longer a dark gray and is now a light gray.

36301c8 and f2bf154

brandyscarney · 2026-01-21T15:53:00Z

core/src/components/chip/chip.tsx

-    md: 'chip.md.scss',
-    ionic: 'chip.ionic.scss',
-  },
+  styleUrl: 'chip.base.scss',


Can we just call this chip.scss now? Or do we expect to add more variants later and want to keep base for that?

Nope, we can always change the name again if we do go down that route without impacting the community: 67b6342

brandyscarney · 2026-01-22T21:12:13Z

core/src/components/chip/chip.scss

+  }
+
+  :host(.chip-subtle:hover) {
+    --background: var(--ion-chip-hue-subtle-state-hover-bg, var(--ion-chip-hue-subtle-bg));


Why do we fallback here?

brandyscarney · 2026-01-22T21:12:18Z

core/src/components/chip/chip.scss

+  }
+
+  :host(.chip-subtle.ion-color:hover) {
+    background: var(--ion-chip-hue-subtle-semantic-state-hover-bg, var(--ion-chip-hue-subtle-semantic-bg));


Why do we fallback here?

brandyscarney · 2026-01-22T21:14:49Z

core/src/components/chip/chip.interfaces.ts

+  size: string | number;
+
+  // Styles for the media component only if it is the first element in the slot
+  firstChild?: IonChipMediaMargin;


what about if we use leading and trailing instead of firstChild and lastChild? Something like this:

export type IonMargin = { margin?: { top?: string | number; end?: string | number; bottom?: string | number; start?: string | number; }; }; export type IonChipMediaTheme = { leading?: IonMargin; trailing?: IonMargin; };

avatar?: IonChipMediaTheme; icon?: IonChipMediaTheme;

brandyscarney · 2026-01-22T21:58:59Z

core/src/components/chip/chip.interfaces.ts

+  margin: string | number;
+
+  fontWeight?: string | number;
+  gap?: string | number;


Gap seems like a weird property to define here - shouldn't this be determined by spacing somehow?

brandyscarney · 2026-01-22T21:59:58Z

core/src/components/chip/chip.scss

+    var(--ion-chip-icon-last-child-margin-vertical),
+    var(--ion-chip-icon-last-child-margin-end),
+    $start: var(--ion-chip-icon-last-child-margin-start)


It is very confusing to have vertical and then end and start - we should be defining all 4.

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

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

brandyscarney requested changes Jan 22, 2026

View reviewed changes

feat(ionic): update default chip colors

36301c8

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

refactor(chip): change file name

67b6342

vercel bot deployed to Preview January 24, 2026 00:28 View deployment

test(chip): update snapshots for default color

f2bf154

vercel bot deployed to Preview January 24, 2026 00:31 View deployment

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

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!

thetaPC Jan 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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

thetaPC Jan 24, 2026 •

edited

Loading