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	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Feb 12, 2026 0:47am

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.

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

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-02-03T18:02:53Z

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

Updated this page to only display the default chip since the hue page captures colors.

thetaPC · 2026-02-03T18:04:43Z

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

hue has been added to md.

thetaPC · 2026-02-03T18:04:53Z

...mponents/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ios-ltr-Mobile-Chrome-linux.png

hue has been added to ios.

thetaPC · 2026-02-03T18:06:24Z

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

We don't need snapshots for the default shape. These are being captured in other tests.

thetaPC · 2026-02-03T18:07:44Z

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

The diff is because ionic was rendering the app background as black. I didn't think it was necessary so I switched it back to white to stay consistent with the other themes.

thetaPC · 2026-02-03T18:08:42Z

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

      await page.goto(`/src/components/chip/test/shape`, config);
    });

-    test.describe('default', () => {


We don't need snapshots for the default shape. These are being captured in other tests.

thetaPC · 2026-02-03T18:31:04Z

core/src/components/chip/chip.scss

+// Disabled
+:host(.chip-disabled) {
+  cursor: default;
+  opacity: var(--ion-chip-state-disabled-opacity, 1);


ionic targets the :after to add a layer of disabled. In order to accommodate all the themes, I feel that using an opacity is a good compromise. We should aim to do the same for the other components when it comes to disabled.

thetaPC · 2026-02-03T18:31:59Z

core/src/components/chip/chip.tsx

    }

-    return shape;
+    const fillConfig = config.getObjectValue('IonChip.fill', 'solid') as string;


Typing it as a string since I'm passing a fallback so I know for a fact that it will return a string value.

thetaPC · 2026-02-03T18:42:44Z

core/src/utils/test/playwright/page/utils/set-content.ts

Without these changes, config.get, config.getObjectValue, etc, would always return undefined and would create components with the fallbacks. This would cause false snapshots. For example, md has been set to have bold hues by default but snapshots would keep rendering it as subtle. subtle is the fallback if config was unable to find a value.

In a perfect world, scripts.js should be the only file it needs but scripts is being run too late so Playwright ends up creating flaky tests.

thetaPC · 2026-02-03T18:44:44Z

core/src/utils/test/playwright/page/utils/set-content.ts

 import type { Page, TestInfo } from '@playwright/test';
 import type { Direction, E2EPageOptions, Mode, Palette, Theme } from '@utils/test/playwright';

+import { defaultTheme as baseTheme } from '../../../../../themes/base/default.tokens';


I'm not too thrilled of importing all the themes but dynamic imports would cause run errors within Playwright.

brandyscarney · 2026-01-29T15:56:19Z

core/src/components/chip/chip.tsx

  @Prop({ reflect: true }) color?: Color;

  /**
+   * @deprecated - Use fill="outline" instead


Doesn't this need to be the last line of the comment or does it matter?

Based on reorder-group, it seems to not matter.

brandyscarney · 2026-01-29T15:56:41Z

core/src/components/chip/chip.tsx

+  /**
+   * The fill for the chip.
+   *
+   * Set to `"outline"` for a chip with a border and background.


Suggested change

* Set to `"outline"` for a chip with a border and background.

* Set to `"outline"` for a chip with a border and no background.

Should this be "no background" or "transparent background"?

It should just be background because native has it as transparent and ionic has a solid background regardless of fill.

brandyscarney · 2026-01-29T15:58:40Z

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

+        },
+      },
+
+      // Fils


Suggested change

// Fils

// Fills

I ended up removing this comment.

brandyscarney · 2026-01-29T16:32:22Z

core/src/components/chip/chip.tsx

+   *
   * Display an outline style button.
   */
  @Prop() outline = false;


Can we add a console warning if this is used:

componentDidLoad() { if (this.el.hasAttribute('outline')) { printIonWarning( `[ion-chip] - The "outline" attribute has been deprecated in favor of the "fill" attribute. Please use the "fill" attribute with the value "outline" instead.`, this.el ); } }

Wouldn't it be covered through the fillValue()?

brandyscarney · 2026-01-29T16:43:01Z

core/src/components/chip/chip.scss

+
+// Bold
+:host(.chip-bold) {
+  --background: var(--ion-chip-hue-bold-bg);


I think this introduces a breaking change without much benefit. Switching to bg is more ambiguous and could be confusing for anyone using a translator or who isn't a native English speaker.

brandyscarney · 2026-02-10T17:24:22Z

core/src/components/chip/chip.tsx

+   * Defaults to `"large"` if no size is set in the custom
+   * theme config.


Suggested change

* Defaults to `"large"` if no size is set in the custom

* theme config.

* Defaults to `"large"`.

Why do we need to mention the custom theme config? Doesn't it default to large if the property is not set too?

brandyscarney · 2026-02-10T17:26:44Z

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

+  avatar?: IonChipAvatarDefinition;
+};
+
+type ChipFills = {


Why do we call it ChipFills, ChipStates, etc. here but use IonChipSizeDefinition, IonChipShapeDefinition, etc. in other places?

brandyscarney · 2026-02-10T17:27:48Z

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

+  width?: string | number;
+};
+
+export type IonChipConfig = {


Is Config the best name here?

brandyscarney · 2026-02-11T18:48:25Z

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

+
+            // Any of the semantic colors like primary, secondary, etc.
+            semantic: {
+              default: {


Do we need this extra layer of default? Are we expecting to be able to pass something like this:

semantic: { default: { bg: currentColor('base'), color: currentColor('contrast'), }, warning: { bg: currentColor('tint'), color: currentColor('contrast'), } }

brandyscarney · 2026-02-11T19:19:10Z

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

+      hue: {
+        bold: {
+          solid: {
+            // default non-semantic states


Suggested change

// default non-semantic states

// Default non-semantic states

Nit: can you capitalize this in all places to match the other comments

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

thetaPC commented Feb 3, 2026

View reviewed changes

test(chip): update states snapshots

df55483

thetaPC commented Feb 3, 2026

View reviewed changes

vercel bot deployed to Preview February 3, 2026 18:31 View deployment

thetaPC commented Feb 3, 2026

View reviewed changes

thetaPC added 2 commits February 3, 2026 10:51

test(chip): revert snapshots

c2aa770

test(avatar): update chip snapshots

ce80b86

vercel bot deployed to Preview February 3, 2026 18:54 View deployment

vercel bot deployed to Preview February 3, 2026 18:56 View deployment

fix(theme): check for undefined theme

c02894e

vercel bot deployed to Preview February 3, 2026 22:16 View deployment

brandyscarney reviewed Feb 11, 2026

View reviewed changes

thetaPC added 2 commits February 11, 2026 16:24

test(chip): verify customization

f6f7c36

chore(chip): run lint

edd33d3

vercel bot deployed to Preview February 12, 2026 00:27 View deployment

fix(chip): revert cursor back to pointer

f615c06

vercel bot deployed to Preview February 12, 2026 00:32 View deployment

docs(scripts): change variable name

b9ef334

vercel bot deployed to Preview February 12, 2026 00:34 View deployment

feat(chip): make shapes and sizes optional

5830e59

vercel bot deployed to Preview February 12, 2026 00:45 View deployment

test(chip): sync avatar location

9cd5ceb

vercel bot deployed to Preview February 12, 2026 00:47 View deployment

	* Set to `"outline"` for a chip with a border and background.
	* Set to `"outline"` for a chip with a border and no background.

+                      },
+                    },
+                    // Fils

		* Defaults to `"large"` if no size is set in the custom
		* theme config.

	* Defaults to `"large"` if no size is set in the custom
	* theme config.
	* Defaults to `"large"`.

	// default non-semantic states
	// Default non-semantic states

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!

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!

thetaPC Feb 3, 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!

thetaPC Feb 3, 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!

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

thetaPC commented Dec 15, 2025 •

edited

Loading

vercel bot commented Dec 15, 2025 •

edited

Loading

thetaPC Feb 3, 2026 •

edited

Loading

thetaPC Feb 3, 2026 •

edited

Loading