-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f80c40a
commit 27f30fc
Showing
2 changed files
with
91 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,63 @@ | ||
| <div align="center"> | ||
| # 🎨 Fluid Color Palettes — Dynamic Color Palette Generator for Figma and More! | ||
|
|
||
| <img src="https://user-images.githubusercontent.com/13263720/165000315-67bfd426-a45d-4706-998e-ad99926b4a45.png" alt="drawing" width="120"/> | ||
|
|
||
| <h1>Color UI Generator 🎨</h1> | ||
| </div> | ||
| ## 🌈 What is Fluid Color Palettes? | ||
|
|
||
|  | ||
| Welcome to Fluid Color Palettes, where beautiful color palettes meet dynamic functionality! This project powers a Figma plugin that brings fully dynamic variables to your design process. But that's not all! You can also use this tool as a standalone website, offering a modern and minimal UI to visualize and interact with your chosen colors. | ||
|
|
||
| ## 🚀 Features | ||
|
|
||
| ## Features | ||
| - 🆕 **Updated TailwindCSS Support**: Now supporting up to TailwindCSS V3.3.0+ with a new 950 color step. | ||
| - 🎨 **Modern & Minimal UI**: An intuitive interface that brings the joy back into choosing color palettes. | ||
| - 🔴🟢🟣 **Dynamic Palettes**: Generate color palettes from primary, secondary, and tertiary colors, including monochromatic shades. | ||
| - 📷 **Snapshot**: Save the entire UI as a PNG, perfect for using as a color template in your designs. | ||
| - 📋 **Clipboard Friendly**: Easily copy individual colors to your clipboard. | ||
| - 📱 **Mobile-Friendly**: Design on-the-go, directly from your mobile device. | ||
| - 🌞🌜 **Day and Night**: Supports both light and dark modes. | ||
| - 🎛️ **Interactive & Graphic Visualization**: See your palette come alive, either in an interactive format or as a graphic. | ||
| - 📜 **Code Export**: Grab the generated color tokens for different platforms, directly from the 'Code' tab. | ||
|
|
||
| - 🆕 Updated to TailwindCSS V3.3.0+ with new 950 color step. | ||
| ## ✅ Currently Supported Tokens | ||
|
|
||
| - 🎨 Mordern & minimal UI design | ||
| - [x] RAW | ||
| - [x] Tailwind CSS | ||
| - [x] @shadcn/ui | ||
| - [ ] React Native Paper | ||
| - [x] Figma plugin | ||
| - [ ] Webflow plugin | ||
|
|
||
| - 🔴🟢🟣 Ability to generate color palettes, analogous & monochromatic colors from primary, secondary & tertiary colors | ||
|
|
||
| - 📷 Save the entire UI as png, you can then use it as a color template for your UI designs | ||
|
|
||
| - 📋 Copy individual colors to clipboard | ||
|
|
||
| - 📱 Fully mobile friendly | ||
|
|
||
| - 🌞🌜 Supports light/Dark mode | ||
|
|
||
|
|
||
| https://user-images.githubusercontent.com/13263720/165003250-60a8b74d-05f9-4000-8448-28ea93d4e1ae.mp4 | ||
|
|
||
| ## Demo | ||
| ## 🕸️ Website | ||
|
|
||
| [Website](https://fluid-colors.vercel.app/) | ||
|
|
||
| ## Getting Started | ||
| ## 📣 Contributing | ||
|
|
||
| ### 1. Change the name | ||
| <!-- Information on how others can contribute to your project --> | ||
|
|
||
| You can change the `Awesome Color` to any name, e.g. `Brand Green`, `Company Blue`, `My Favorite Color` etc. | ||
| ## 📜 License | ||
|
|
||
| ### 2. Change the colors 🎨 | ||
| MIT License | ||
|
|
||
| Click each `Color Area` from `Base Colors` to change colors | ||
| ## 🙏 Acknowledgments | ||
|
|
||
| https://user-images.githubusercontent.com/13263720/165012924-b3b47869-b602-4c5f-b25a-4a14b3a05d07.mp4 | ||
| Huge shoutout to these awesome libraries that make my project shine 🌟: | ||
|
|
||
| - 🎨 **[Culori](https://github.com/Evercoder/culori)**: Our color wizard for magical color manipulations. | ||
| - 🌈 **[Extract-Colors](https://github.com/Namide/extract-colors)**: The extract artist helping us pull colors out of thin air. | ||
| - 🌟 **[Framer-Motion](https://github.com/framer/motion)**: The spell we cast for our smooth animations. | ||
| - ✨ **[Immer](https://github.com/immerjs/immer)**: Our immutable charm for state management. | ||
| - 🛡️ **[Jsonwebtoken](https://github.com/auth0/node-jsonwebtoken)**: Our secret keeper for secure tokens. | ||
| - 🧙♂️ **[Lucide-React](https://github.com/lucide-icons/lucide)**: Creating icons that enchant the UI. | ||
| - 🚀 **[Next.js](https://github.com/vercel/next.js)**: The magic carpet that takes our project to the web. | ||
| - 🌓 **[Next-Themes](https://github.com/pacocoursey/next-themes)**: The alchemist of light and dark UI themes. | ||
| - ⚛️ **[React](https://github.com/facebook/react) & [React-DOM](https://github.com/facebook/react)**: The heart and soul of our interactive UI. | ||
| - 🌈 **[React-Colorful](https://github.com/omgovich/react-colorful)**: Our colorful companion in palette generation. | ||
| - 🎨 **[Tinycolor2](https://github.com/bgrins/TinyColor)**: Tiny but mighty, a true color genius! | ||
| - 👨💻 **[shadn-ui](https://github.com/shadcn-ui/ui)**: The core components that make up our UI. | ||
| - 🗃️ **[Zustand](https://github.com/pmndrs/zustand)**: Our state management potion brewer. | ||
|
|
||
| ### 3. Save it | ||
| Thank you for helping us bring color and magic to the design and development world! 🎉 | ||
|
|
||
| Click on the `Export As PNG` button to save to your computer! Use it anywhere :) | ||
|
|
||
| ## About | ||
|
|
||
| Read more about the project [here](https://fluid-colors.vercel.app/#tabs) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,63 @@ | ||
| ## Getting Started | ||
| # 🎨 Fluid Color Palettes — Dynamic Color Palette Generator for Figma and More! | ||
|
|
||
| First, run the development server: | ||
| <img src="https://user-images.githubusercontent.com/13263720/165000315-67bfd426-a45d-4706-998e-ad99926b4a45.png" alt="drawing" width="120"/> | ||
|
|
||
| ```bash | ||
| yarn dev | ||
| ``` | ||
| ## 🌈 What is Fluid Color Palettes? | ||
|
|
||
| Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | ||
| Welcome to Fluid Color Palettes, where beautiful color palettes meet dynamic functionality! This project powers a Figma plugin that brings fully dynamic variables to your design process. But that's not all! You can also use this tool as a standalone website, offering a modern and minimal UI to visualize and interact with your chosen colors. | ||
|
|
||
| You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. | ||
| ## 🚀 Features | ||
|
|
||
| [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. | ||
| - 🆕 **Updated TailwindCSS Support**: Now supporting up to TailwindCSS V3.3.0+ with a new 950 color step. | ||
| - 🎨 **Modern & Minimal UI**: An intuitive interface that brings the joy back into choosing color palettes. | ||
| - 🔴🟢🟣 **Dynamic Palettes**: Generate color palettes from primary, secondary, and tertiary colors, including monochromatic shades. | ||
| - 📷 **Snapshot**: Save the entire UI as a PNG, perfect for using as a color template in your designs. | ||
| - 📋 **Clipboard Friendly**: Easily copy individual colors to your clipboard. | ||
| - 📱 **Mobile-Friendly**: Design on-the-go, directly from your mobile device. | ||
| - 🌞🌜 **Day and Night**: Supports both light and dark modes. | ||
| - 🎛️ **Interactive & Graphic Visualization**: See your palette come alive, either in an interactive format or as a graphic. | ||
| - 📜 **Code Export**: Grab the generated color tokens for different platforms, directly from the 'Code' tab. | ||
|
|
||
| The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. | ||
| ## ✅ Currently Supported Tokens | ||
|
|
||
| ## Learn More | ||
| - [x] RAW | ||
| - [x] Tailwind CSS | ||
| - [x] @shadcn/ui | ||
| - [ ] React Native Paper | ||
| - [x] Figma plugin | ||
| - [ ] Webflow plugin | ||
|
|
||
| To learn more about Next.js, take a look at the following resources: | ||
| ## 🕸️ Website | ||
|
|
||
| - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | ||
| - [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial. | ||
| [Website](https://fluid-colors.vercel.app/) | ||
|
|
||
| You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! | ||
| ## 📣 Contributing | ||
|
|
||
| <!-- Information on how others can contribute to your project --> | ||
|
|
||
| ## 📜 License | ||
|
|
||
| MIT License | ||
|
|
||
| ## 🙏 Acknowledgments | ||
|
|
||
| Huge shoutout to these awesome libraries that make my project shine 🌟: | ||
|
|
||
| - 🎨 **[Culori](https://github.com/Evercoder/culori)**: Our color wizard for magical color manipulations. | ||
| - 🌈 **[Extract-Colors](https://github.com/Namide/extract-colors)**: The extract artist helping us pull colors out of thin air. | ||
| - 🌟 **[Framer-Motion](https://github.com/framer/motion)**: The spell we cast for our smooth animations. | ||
| - ✨ **[Immer](https://github.com/immerjs/immer)**: Our immutable charm for state management. | ||
| - 🛡️ **[Jsonwebtoken](https://github.com/auth0/node-jsonwebtoken)**: Our secret keeper for secure tokens. | ||
| - 🧙♂️ **[Lucide-React](https://github.com/lucide-icons/lucide)**: Creating icons that enchant the UI. | ||
| - 🚀 **[Next.js](https://github.com/vercel/next.js)**: The magic carpet that takes our project to the web. | ||
| - 🌓 **[Next-Themes](https://github.com/pacocoursey/next-themes)**: The alchemist of light and dark UI themes. | ||
| - ⚛️ **[React](https://github.com/facebook/react) & [React-DOM](https://github.com/facebook/react)**: The heart and soul of our interactive UI. | ||
| - 🌈 **[React-Colorful](https://github.com/omgovich/react-colorful)**: Our colorful companion in palette generation. | ||
| - 🎨 **[Tinycolor2](https://github.com/bgrins/TinyColor)**: Tiny but mighty, a true color genius! | ||
| - 👨💻 **[shadn-ui](https://github.com/shadcn-ui/ui)**: The core components that make up our UI. | ||
| - 🗃️ **[Zustand](https://github.com/pmndrs/zustand)**: Our state management potion brewer. | ||
|
|
||
| Thank you for helping us bring color and magic to the design and development world! 🎉 | ||
|
|
||
| ## Deploy on Vercel | ||
|
|
||
| The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js. | ||
|
|
||
| Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |