ionic-team / ionic-team/ionic-framework
feat: Expose token generating function for Material Design
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.
### Describe the Feature Request
Currently it is very tedious to theme ionic dynamically at runtime using for example a seed color. The functions required to do so are already there and used in the docs.
### Describe the Use Case
This is very common use-case as material design 3 (material you) has taken over android design system. Still ionic lacks behind for many years now, https://github.com/ionic-team/ionic-framework/issues/24282 was opened almost 3 years ago.
### Describe Preferred Solution
_No response_
### Describe Alternatives
For a while a have been using a hacky custom made lib - https://github.com/tanishqmanuja/ionic-color-injector. But an official alternative would allow for wider use cases.
Also then bridging the remaining gap using https://www.npmjs.com/package/@material/material-color-utilities would be awesome for users.
### Related Code
_No response_
### Additional Information
3 Categories of color token in ionic:
- Theme Colors (54 Tokens, 9 Colors with 6 Tokens each)
https://ionicframework.com/docs/theming/colors
Generator: https://ionicframework.com/docs/theming/themes#stepped-color-generator
- Application Colors (26 Tokens)
https://ionicframework.com/docs/theming/themes#application-colors
Generator: N/A
- Stepped Colors (38 Tokens, 19 for each background and text)
Ref: https://ionicframework.com/docs/theming/themes#stepped-colors
Generator: https://ionicframework.com/docs/theming/themes#stepped-color-generator
Source: https://github.com/ionic-team/ionic-docs/tree/main/src/components/page/theming
Core Functionality: https://github.com/ionic-team/ionic-docs/tree/main/src/components/page/theming/_utils
Contributor guide
Assessment
This issue has not been assessed yet.