Skip to content

Conversation

@thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Jan 15, 2026

Issue number: internal


What is the current behavior?

The colors for ionic theme have not been set.

What is the new behavior?

  • Add colors for ionic theme.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Preview

@vercel
Copy link

vercel bot commented Jan 15, 2026

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

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

Review with Vercel Agent

@@ -1,9 +1,169 @@
import * as colorTokens from 'outsystems-design-tokens/tokens/color scheme.json';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The OS package does not export these tokens to be consumed in a JS/TS file. The package only provides Sass files to be consumed. As a workaround, I was able to access the original JSON files. I'll be reaching out to Bernardo requesting JS/TS exports once he comes back from vacation. In the mean time, consider this as a temporary solution in order to not be blocked.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The plan was to remove this package from ionic-framework and have them set the token file on mobile UI. Is exporting these tokens part of the plan?

color: {
primary: {
bold: {
base: cachedResolveOsToken(colorTokens.bg.primary.base.default, tokenMap),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the export request is approved, then we can simply replace this with the correct tokens.

// Create a cache to store results
const cache = new Map<any, any>();

export const cachedResolveOsToken = (tokenPath: any, tokenMap: Record<string, any>): any => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned in my previous comment, we only have the JSON files to access the ionic tokens. However, those tokens are not fully mapped to their correct values. This function makes sure to retrieve the right values and saves them to a map so we're not iterating so many times. If the export request is approved, then this function can be removed.

"@global/*": ["src/global/*"]
}
},
"resolveJsonModule": true,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned in my previous comment, we only have the JSON files to access the ionic tokens. This needs to be added in order to import the JSON files to light.tokens.ts or an error will be given.

@thetaPC thetaPC marked this pull request as ready for review January 15, 2026 21:33
@thetaPC thetaPC requested a review from a team as a code owner January 15, 2026 21:33
@thetaPC thetaPC requested review from brandyscarney and gnbm and removed request for gnbm January 15, 2026 21:33
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just the one comment about us removing these tokens from the project & also a topic I brought up offline about the colors needing to match ios and md.

@@ -1,9 +1,169 @@
import * as colorTokens from 'outsystems-design-tokens/tokens/color scheme.json';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The plan was to remove this package from ionic-framework and have them set the token file on mobile UI. Is exporting these tokens part of the plan?

@thetaPC
Copy link
Contributor Author

thetaPC commented Jan 16, 2026

Closing this ticket as ionic will use the same colors as md and ios within this repo.

@thetaPC thetaPC closed this Jan 16, 2026
@thetaPC thetaPC deleted the ionic-theme-colors branch January 16, 2026 21:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants