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](https://user-images.githubusercontent.com/13263720/165000315-67bfd426-a45d-4706-998e-ad99926b4a45.png)
-
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:
+
-```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.