Skip to content

Commit 2484794

Browse files
BlankParticleBlankParticle
committed
feat: 🎉 Initial Working Version
0 parents  commit 2484794

File tree

9 files changed

+1789
-0
lines changed

9 files changed

+1789
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
dist/

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 BlankParticle
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
# ✨ Tailwind Plugin Realtime Colors
2+
3+
This plugin allows you to load colors from URL of [Realtime Colors](https://www.realtimecolors.com/).
4+
5+
---
6+
7+
<div align="center">
8+
<a href="https://github.com/BlankParticle/tailwind-plugin-realtime-colors/stargazers">
9+
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/BlankParticle/tailwind-plugin-realtime-colors?style=for-the-badge"/>
10+
</a>
11+
<a href="https://github.com/BlankParticle/tailwind-plugin-realtime-colors/graphs/contributors">
12+
<img alt="GitHub contributors" src="https://img.shields.io/github/contributors/BlankParticle/tailwind-plugin-realtime-colors?style=for-the-badge"/>
13+
</a>
14+
<a href="https://github.com/BlankParticle/tailwind-plugin-realtime-colors/blob/main/LICENSE">
15+
<img alt="License" src="https://img.shields.io/github/license/BlankParticle/tailwind-plugin-realtime-colors?style=for-the-badge"/>
16+
</a>
17+
<a href="https://github.com/sponsors/BlankParticle">
18+
<img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/BlankParticle?style=for-the-badge"/>
19+
</a>
20+
</div>
21+
<br/>
22+
23+
# ❄️ Installation
24+
25+
First install the package using a package manager of your choice.
26+
27+
```bash
28+
# using npm
29+
npm install tailwind-plugin-realtime-colors
30+
# or pnpm
31+
pnpm install tailwind-plugin-realtime-colors
32+
# or bun
33+
bun add tailwind-plugin-realtime-colors
34+
```
35+
36+
If you haven't setup Tailwind CSS yet, you can follow the [official guide](https://tailwindcss.com/docs/installation).
37+
38+
Now go to [Realtime Colors](https://www.realtimecolors.com/) and choose your colors and copy the URL.
39+
40+
Now add the plugin to your `tailwind.config.js` file.
41+
42+
```js
43+
// tailwind.config.js
44+
45+
// Using ESM Syntax
46+
import realtimeColors from "tailwind-plugin-realtime-colors";
47+
export default {
48+
// ...
49+
plugins: [realtimeColors("https://www.realtimecolors.com/?colors=...")],
50+
// ...
51+
};
52+
53+
// Using CommonJS Modules
54+
const realtimeColors = require("tailwind-plugin-realtime-colors");
55+
module.exports = {
56+
// ...
57+
plugins: [realtimeColors("https://www.realtimecolors.com/?colors=...")],
58+
// ...
59+
};
60+
```
61+
62+
Paste the your url as the argument for the plugin.
63+
64+
Now you can use the colors in your CSS.
65+
66+
```html
67+
<div class="bg-primary-500 text-text hover:bg-secondary-400/90">
68+
Hello World
69+
</div>
70+
```
71+
72+
# 🛠️ Configuration
73+
74+
You can configure the plugin by either passing an url and a optional config object or by passing a config object with colors.
75+
76+
```js
77+
realtimeColors("https://www.realtimecolors.com/?colors=...", {
78+
theme: true,
79+
});
80+
81+
// or pass a config object with colors
82+
realtimeColors({
83+
colors: {
84+
text: "#ededee",
85+
background: "#0c0d13",
86+
primary: "#9aa5d1",
87+
secondary: "#243579",
88+
accent: "#3053dc",
89+
},
90+
theme: true,
91+
});
92+
```
93+
94+
## 🔎 Options
95+
96+
| `option` | `type` | `default` | `description` |
97+
| ---------------- | ---------- | ------------------------------------ | -------------------------------------------------------------------------------------------- |
98+
| `colors` | `object` | `{}` | The colors to use. If you pass an url, this will be ignored. |
99+
| `theme` | `boolean` | `true` | Whether to generate invert variant and use them with css variables. |
100+
| `shades` | `string[]` | `["primary", "secondary", "accent"]` | The colors to generate shades of |
101+
| `prefix` | `string` | `""` | The prefix to use for the colors. |
102+
| `shadeAlgorithm` | `string` | `"tailwind"` | The algorithm to use for generating shades. See [Shading Algorithms](#🎨-shading-algorithms) |
103+
104+
### 🎨 Shading Algorithms
105+
106+
| Algorithm | Description | Notes |
107+
| ---------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
108+
| `tailwind` | Uses a `Tint` and `Shade` based approach like TailwindCSS. | Generates better results. This is the default. |
109+
| `realtimeColors` | Uses the same algorithm like Realtime Colors. | Shades are not that great. You can use this if you want feature parity with Realtime Colors. |
110+
111+
## 🏗️ How to contribute
112+
113+
### 🐛 Reporting Bugs
114+
115+
If you encounter any bugs, please report them in the [Issues](https://github.com/BlankParticle/tailwind-plugin-realtime-colors/issues).
116+
117+
### 🎋 Adding new features
118+
119+
You need to first [fork](https://docs.github.com/en/get-started/quickstart/contributing-to-projects#about-forking) this repository and then [clone](https://docs.github.com/en/get-started/quickstart/contributing-to-projects#cloning-a-fork) it to your local machine.
120+
121+
```bash
122+
git clone https://github.com/<your-username>/tailwind-plugin-realtime-colors
123+
cd tailwind-plugin-realtime-colors
124+
```
125+
126+
Now you need to create a new branch for your changes. For features, you may want to use `feat/<feature-name>` as the branch name.
127+
128+
```bash
129+
git checkout -b feat/<feature-name>
130+
```
131+
132+
Now you can make your changes. After you are done, you need to commit your changes.
133+
134+
```bash
135+
git add .
136+
git commit -m "feat: ✨ My Awesome feature"
137+
```
138+
139+
We follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit messages.
140+
141+
Now you need to push the changes to your forked repository.
142+
143+
```bash
144+
git push origin feat/<feature-name>
145+
```
146+
147+
Now you need to create a [Pull Request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects#making-a-pull-request) to the original repository. And you are done!
148+
149+
We will review your changes and merge them if everything looks good.
150+
151+
### 💸 Sponsorship
152+
153+
If you find this plugin useful, please consider [sponsoring me](https://github.com/sponsors/BlankParticle). This will help me spend more time on these projects.
154+
155+
# 📜 License
156+
157+
This project is licensed under the [MIT License](https://github.com/BlankParticle/tailwind-plugin-realtime-colors/blob/main/LICENSE).

‎biome.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
3+
"organizeImports": {
4+
"enabled": true
5+
},
6+
"linter": {
7+
"enabled": true,
8+
"rules": {
9+
"recommended": true
10+
}
11+
},
12+
"formatter": {
13+
"enabled": true,
14+
"lineWidth": 100,
15+
"indentStyle": "space",
16+
"formatWithErrors": true
17+
}
18+
}

‎package.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "tailwind-plugin-realtime-colors",
3+
"main": "dist/plugin.js",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "tsup src/*.ts --watch --dts",
7+
"build:cjs": "tsup src/*.ts --format cjs --dts",
8+
"build:esm": "tsup src/*.ts --format esm --dts",
9+
"build": "pnpm clean && pnpm run build:cjs && pnpm run build:esm",
10+
"clean": "rm -rf dist",
11+
"check": "biome check src/*.ts",
12+
"fix": "biome check src/*.ts --apply",
13+
"format": "biome format src/*.ts --write"
14+
},
15+
"exports": {
16+
"import": "./dist/plugin.js",
17+
"require": "./dist/plugin.cjs"
18+
},
19+
"devDependencies": {
20+
"@biomejs/biome": "1.4.1",
21+
"@types/node": "^20.10.2",
22+
"tsup": "^8.0.1",
23+
"typescript": "^5.3.2"
24+
},
25+
"peerDependencies": {
26+
"tailwindcss": "^3.3.5"
27+
}
28+
}

0 commit comments

Comments
 (0)