ionic-team / ionic-team/ionic-framework

feat: Expose token generating function for Material Design

Abierto
#29,849 0 comentarios 0 reacciones 0 asignados Ver en GitHub
type: feature request
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.