Selleo / design-system

Design System
https://designsystem.selleo.com
4 stars 1 forks source link

feat: add ring colors #86

Closed qbart closed 1 year ago

qbart commented 1 year ago

Overview

I am trying to implement ring colors to support this: image

Currently no colors are generated for rings so I can't use: ring-2 ring-brand-primary-500

But interesting thing is that locally when I add rings to Avatars it works:

image

Final bundle designsystem.selleo.com/selleo-ds.css does not contain ring colors. Does it happen because tailwind exports only used classes and since rings are not used in components they won't be exported?

Documentation suggests that's you can explicitly add ring colors so I did but I am not sure if that fixes the problem of the final bundle.

netlify[bot] commented 1 year ago

Deploy Preview for selleo-designsystem ready!

Name Link
Latest commit ce7cd0dfd89563ea75ee9966400383ea77dab1c7
Latest deploy log https://app.netlify.com/sites/selleo-designsystem/deploys/6414e75763cd9b0008d7af9b
Deploy Preview https://deploy-preview-86--selleo-designsystem.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

qbart commented 1 year ago

Edit: I've looked at the final bundle in deploy preview but ring colors are not there, so this PR is good for nothing.

k1eu commented 1 year ago

@qbart in order for it to be in the bundle it has to be used in the components we're generating the bundle for. But the class usage wasn't even though of soo.. What I can suggest is to get the tailwind.config.js from selleo-tailwind package in this repository for now. Later on I'd like to have it as a tailwind config in npm

qbart commented 1 year ago

ok, so I will close this one