Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Component: Conic Gradient #203

Closed
endigo9740 opened this issue Sep 7, 2022 · 4 comments · Fixed by #285
Closed

New Component: Conic Gradient #203

endigo9740 opened this issue Sep 7, 2022 · 4 comments · Fixed by #285
Assignees
Labels
enhancement New feature or request feature request Request a feature or introduce and update to the project. ready to test Ready to be tested for quality assurance.

Comments

@endigo9740
Copy link
Contributor

Note this component already exists here:
https://github.com/Brain-Bones/skeleton/blob/dev/src/lib/ConicGradient/ConicGradient.svelte

It's currently incomplete as I was struggling to find a proper means to pass in the color values. The radial gradient doesn't like CSS variables, and Tailwind doesn't currently have a utility class for this (to my knowledge).

It may be possible a third party Tailwind library exists for this, so some research should be done to determine the best means to handle this.

If we cannot find an adaquate solution it may be best to sunset this one. We'll then purge it from the library.

@endigo9740 endigo9740 added enhancement New feature or request feature request Request a feature or introduce and update to the project. labels Sep 7, 2022
@endigo9740 endigo9740 self-assigned this Sep 7, 2022
@endigo9740
Copy link
Contributor Author

endigo9740 commented Sep 25, 2022

Official docs:
https://tailwindcss.com/docs/configuration#referencing-in-java-script

But this seems to inflate the bundle size if used, per their own instructions. Vite would not import the Tailwind config as is, but we could do this:
https://lobotuerto.com/notes/import-tailwind-config-in-vite

However, given the issues this cause I don't advise we go this route. Instead, we may just limit to using only Tailwind's default colors, like so:
https://stackoverflow.com/questions/61118060/how-to-access-tailwind-colors-from-javascript

@endigo9740
Copy link
Contributor Author

I've pushed a PR that updates this component to support three methods of adding color stops:

  1. Provide rgb(vars(--color-primary-500)) for theme colors
  2. Provide colors: ['purple',500] for default Tailwind colors
  3. Provide any standard CSS color as a string, including named colors, hex, HSL, etc.

I also updated the documentation and test cases to be current and re-enabled the component in the sidebar navigation.

@endigo9740 endigo9740 linked a pull request Sep 25, 2022 that will close this issue
@endigo9740 endigo9740 added the ready to test Ready to be tested for quality assurance. label Sep 25, 2022
@endigo9740
Copy link
Contributor Author

endigo9740 commented Sep 26, 2022

Per @ryceg recommend let's add a Typescript interface definition for the data information. Location/name TBD, but something like:

.../ConicGradients/types.ts

@endigo9740
Copy link
Contributor Author

The types have been added and included in the index.ts package export.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feature request Request a feature or introduce and update to the project. ready to test Ready to be tested for quality assurance.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant