ionic-team / ionic-team/ionic-framework

feat: Expose token generating function for Material Design

Ouverte
#29,849 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
type: feature request
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.