feat(chip): add recipe and variables #30873

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

Issue number: resolves #

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Yes
No

Other information

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 14, 2026 0:59am

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?

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.

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

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?

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?

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 <[email protected]>

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-13T22:43:57Z

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

These hue changes for the ionic theme are

based on the font-family rendering the correct value. More information can be reviewed in this comment.

ionic colors being added in this PR

thetaPC · 2026-01-13T23:24:09Z

...ponents/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ios-ltr-Mobile-Chrome-linux.png

size has been added to ios.

thetaPC · 2026-01-13T23:24:19Z

...mponents/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-md-ltr-Mobile-Chrome-linux.png

size has been added to md.

thetaPC · 2026-01-13T23:24:56Z

...hip/test/states/chip.e2e.ts-snapshots/chip-custom-ionic-md-ltr-light-Mobile-Chrome-linux.png

We weren't testing the customization for ionic so I added a test for it.

thetaPC · 2026-01-13T23:25:27Z

...omponents/chip/test/states/chip.e2e.ts-snapshots/chip-custom-ios-ltr-Mobile-Chrome-linux.png

These changes for ios are happening because the shape default is now round instead of soft.

thetaPC · 2026-01-13T23:25:52Z

...p/test/states/chip.e2e.ts-snapshots/chip-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png

ionic wasn't testing for the disabled state so I added it.

thetaPC · 2026-01-13T23:26:46Z

...ponents/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Chrome-linux.png

These changes for ios are happening because

the shape default is now round instead of soft.

the state looks different based on hue.

thetaPC · 2026-01-13T23:27:17Z

...mponents/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ios-ltr-Mobile-Chrome-linux.png

These changes for ios are happening because

the shape default is now round instead of soft.

the state looks different based on hue.

thetaPC · 2026-01-14T00:01:19Z

.../components/chip/test/basic/chip.e2e.ts-snapshots/chip-basic-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-14T00:01:28Z

...ponents/chip/test/basic/chip.e2e.ts-snapshots/chip-descender-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-14T00:01:52Z

...st/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png

These changes for the ionic theme are

based on the font-family rendering the correct value. More information can be reviewed in this comment.

ionic colors being added in this PR

thetaPC · 2026-01-14T00:02:35Z

...nts/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-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-14T00:02:54Z

...hip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png

These changes for the ionic theme are

based on the font-family rendering the correct value. More information can be reviewed in this comment.

ionic colors being added in this PR

thetaPC · 2026-01-14T00:03:07Z

...omponents/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-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-14T00:03:16Z

...test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png

These changes for the ionic theme are

based on the font-family rendering the correct value. More information can be reviewed in this comment.

ionic colors being added in this PR

thetaPC · 2026-01-14T00:48:10Z

...ents/chip/test/a11y/chip.e2e.ts-snapshots/chip-large-contents-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-14T00:48:20Z

...c/components/chip/test/a11y/chip.e2e.ts-snapshots/chip-scale-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-14T00:54:03Z

...p/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png

These hue changes for the ionic theme are based on the font-family rendering the correct value. More information can be reviewed in this comment.

thetaPC · 2026-01-14T00:54:33Z

...p/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png

These hue changes for the ionic theme are based on the font-family rendering the correct value. More information can be reviewed in this comment.

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 <[email protected]>

Update core/src/utils/theme.ts

ade5c05

Co-authored-by: Brandy Smith <[email protected]>

Update core/src/utils/theme.ts

0349ff7

Co-authored-by: Brandy Smith <[email protected]>

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 <[email protected]>

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

thetaPC commented Jan 13, 2026

View reviewed changes

test(chip): update states snapshots

d830d48

thetaPC commented Jan 13, 2026

View reviewed changes

vercel bot deployed to Preview January 13, 2026 23:25 View deployment

thetaPC commented Jan 13, 2026

View reviewed changes

thetaPC added 2 commits January 13, 2026 15:58

feat(theme): add outline semantic for ios

68a19fd

test(chip): update basic snapshots

fdaafcd

thetaPC commented Jan 14, 2026

View reviewed changes

vercel bot deployed to Preview January 14, 2026 00:02 View deployment

thetaPC commented Jan 14, 2026

View reviewed changes

test(chip): update a11y snapshots

c07ef36

thetaPC commented Jan 14, 2026

View reviewed changes

vercel bot deployed to Preview January 14, 2026 00:48 View deployment

test(chip): update size snapshots

b419a9c

thetaPC commented Jan 14, 2026

View reviewed changes

vercel bot deployed to Preview January 14, 2026 00:54 View deployment

test(chip): update hue snapshots

3111d64

vercel bot deployed to Preview January 14, 2026 00:59 View deployment

-      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

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!

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!

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

vercel bot commented Dec 15, 2025 •

edited

Loading