From 27f30fc7e9b802b2bf96717304bceb0ad5eca583 Mon Sep 17 00:00:00 2001 From: Oliver Pan <2216991777@qq.com> Date: Tue, 17 Oct 2023 14:56:20 -0500 Subject: [PATCH] doc: v4 readme --- README.md | 72 ++++++++++++++++++++++++++-------------------- apps/web/README.md | 67 +++++++++++++++++++++++++++++++----------- 2 files changed, 91 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 4745105..6480a62 100644 --- a/README.md +++ b/README.md @@ -1,53 +1,63 @@ -
+# 🎨 Fluid Color Palettes β€” Dynamic Color Palette Generator for Figma and More! drawing -

Color UI Generator 🎨

-
+## 🌈 What is Fluid Color Palettes? -![color UI generator cover](https://user-images.githubusercontent.com/13263720/229339496-d6733470-69a1-4b39-8096-f1ae6f41efaf.png) +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 + -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) diff --git a/apps/web/README.md b/apps/web/README.md index 4fae62a..6480a62 100644 --- a/apps/web/README.md +++ b/apps/web/README.md @@ -1,30 +1,63 @@ -## Getting Started +# 🎨 Fluid Color Palettes β€” Dynamic Color Palette Generator for Figma and More! -First, run the development server: +drawing -```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 + + + +## πŸ“œ 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.