ionic-team / ionic-team/ionic-framework

feat: Expose token generating function for Material Design

Offen
#29,849 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
type: feature request
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.