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

Simplify Tailwind implementation #110

Merged
merged 8 commits into from
Jul 12, 2024

Conversation

davestewart
Copy link
Contributor

@davestewart davestewart commented Jun 29, 2024

This PR simplifies the Tailwind config, code location and implementation.

It aims to:

  • simplifies the code structure for the plugin developer
  • better-communicates final color usage for the plugin user

Code

  • scattered config is moved to a single file tailwindConfig.ts (perhaps a stepping stone to custom config, too)
  • scattered low-level conversion functions remain in, or moved to conversionTables.ts
  • brittle Tailwind code moved from retrieveColors.ts to tailwindColor.ts (simplifying the code and bringing it in line with other platforms)

Main UI

CleanShot 2024-07-12 at 13 04 05

  • hex / swatches now reflect final Tailwind colors (Figma's other panels show exact colors)
    • note that colors do not reflect transparency of Figma color
  • rounded / custom colors now indicated in comment
  • lines can be copy/pasted in scss format
  • panel title now "Tailwind Colors" rather than "Colors"

Plugin UI

CleanShot 2024-07-12 at 13 08 56

  • Plugin UI now shows correct colors and color names
  • Colors are de-duped
  • Note that [#hex] is shown for non-rounded colors (rather than just #hex) as this is the actual "class name"

davestewart and others added 2 commits July 11, 2024 11:57
* Modify Tailwind color functions to support Figma variables

* Refactor function to arrow function

* Fix fill opacity code

* Add new Tailwind preferences

* Prefer Tailwind color when color matches exactly

* Update UI with shorter labels and tooltips

---------

Co-authored-by: Dave Stewart <dev@davestewart.co.uk>
Refactoring:

* Reorganise all config to separate file
* Simplify Tailwind code

Color:

* Update Tailwind Colors list to clarify conversion
* Update PluginUI to show actual used colors
@davestewart
Copy link
Contributor Author

@bernaferrari – this is now ready to go:

It's up to you what you name this PR as; could be:

  • Simplify Tailwind implementation, or
  • Improve Tailwind color usage information

@bernaferrari bernaferrari merged commit f36be18 into bernaferrari:main Jul 12, 2024
1 check passed
@bernaferrari
Copy link
Owner

Either way the name is fine. Thanks for all the help!

@davestewart
Copy link
Contributor Author

Great! OK, now to move on with the flex wrap stuff

@davestewart
Copy link
Contributor Author

@bernaferrari

Looks like I introduced a bug with the de-duping of colors for non-Tailwind platforms:

CleanShot 2024-07-12 at 13 28 44

Let me take a look now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants