-
Notifications
You must be signed in to change notification settings - Fork 13.4k
feat(theme): add ionic colors #30920
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: ionic-modular
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| @@ -1,9 +1,169 @@ | |||
| import * as colorTokens from 'outsystems-design-tokens/tokens/color scheme.json'; | |||
There was a problem hiding this comment.
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.
| color: { | ||
| primary: { | ||
| bold: { | ||
| base: cachedResolveOsToken(colorTokens.bg.primary.base.default, tokenMap), |
There was a problem hiding this comment.
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 => { |
There was a problem hiding this comment.
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, |
There was a problem hiding this comment.
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.
Issue number: internal
What is the current behavior?
The colors for
ionictheme have not been set.What is the new behavior?
ionictheme.Does this introduce a breaking change?
Other information
Preview