ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.05k stars 13.51k forks source link

feat: extend CSS utilities approach #22844

Open alvarosabu opened 3 years ago

alvarosabu commented 3 years ago

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

At the moment, CSS utilities cover:

However, I'm missing color utilities between others.

On the rise of utility-first CSS approaches (TailwindCSS as an example) will be nice to extend the available CSS utilities to be able to compose more complex design easier. Prototyping could be even faster.

Describe Preferred Solution

  1. Extend content space utilities (padding, margin) to use an ion-p-t-{multiple} class (.ion-margin) is currently fix to a default of 16px
  2. Color utilities for text and background ion-text-{color}-{shade} ex: ion-text-primary-400, ion-text-{color}-{shade} ex: ion-bg-secondary-400

It will be also beneficial to use PostCSS to the flow to purge unused generated utilities similar to what TailwindCSS offers, which would allow more customized grades of margins for example, without increasing significantly the bundle size.

Describe Alternatives

Of course, adding TailwindCSS directly to an ionic project could be an option, but it will be in parallel with the current ionic CSS it's a little bit overkill. Would be nice to have it "native" from Ionic.

In case the request fits the interests of the project, I can do a PR with a basic draft for this and contribute for it's implementation.

Kind regards

liamdebeasi commented 3 years ago

Thanks for the feature request. We recently did some investigation regarding this (see: https://twitter.com/LiamDeBeasi/status/1354859194994847746) so we are definitely interested in finding ways to make it easier to theme in Ionic Framework. At the moment we are still discussing what approach we should take, but we will certainly take this feedback into consideration.

alvarosabu commented 3 years ago

Awesome, feel free to contact me if you need extra pair of hands, cheers.

aparajita commented 6 months ago

@liamdebeasi @alvarosabu If you really want to take the utility approach, then why not use Tailwind? Along with my ionic-tailwind plugin, it provides everything you are looking for, such as ion-text-{color}-{shade}.