search

hazelcast / hive

Design system built with A11Y in mind
Apache License 2.0
18 stars 4 forks source link

[UI Core Library] Create a shared tailwindcss config #87

Open aigoncharov opened 3 years ago

jvorcak commented 3 years ago

If it's OK I'll take this and discuss with @pawelklasa since we already need this for pubic pages on .cloud.

jvorcak commented 3 years ago

One way of doing this could be to define everything in tailwind.config.js and just @apply the rules in our _typography.scss, _colors.scss, etc.

That way, the source of truth will be in a tailwind.config.js, one will be able to use it from class helpers and also in our scss shared files:

Pros:

✅ one source of truth easily shared between .cloud, MC, frontend-shared & possibly other projects in Hazelcast ✅ we could even re-use this for other Hazelcast projects - even those that don't have React dependency, e.g. frontpage etc, which could be awesome for design consistency ✅ possibility to make tree-shake unused classes in all of the projects

Cons: ⚠️ We will be dependent on tailwindcss, also on @apply syntax, but I don't think it's a bad thing

Can you think of any disadvantages guys? 🤔

WDYT @jozefhruska @aigoncharov @danad02 @jankoritak @utkukaratas

aigoncharov commented 3 years ago

@jvorcak I have had a chance to play with tailwind recently. I found that "@apply" helper is not flexible enough. For example, you cannot define animation transition time separately, only animation as whole. We would also be stripped of scss math. I mean we would not be able to define some base grid size in tailwind, and multiply it in our scss easily with @apply. I think we should not import from tailwind, but we should import into tailwind.

jvorcak commented 3 years ago

That seems like a fair point, we would still get a generated tailwind.config.js that we could still use on other places, right?

aigoncharov commented 3 years ago

Yep. We just need to figure out the best way to import stuff from SCSS into tailwind. Or from JS into both tailwind and SCSS.

aigoncharov commented 3 years ago

@jvorcak @jozefhruska so what are you currently doing in Cloud? One of the options could be using https://github.com/pmowrer/node-sass-json-importer. Then we could have a .js file with constants, and import them in tailwind and in SCSS