@nattui/tailwind-colors 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +82 -0
- package/package.json +30 -0
- package/src/index.css +5 -0
- package/src/root.css +1740 -0
- package/src/tailwind.css +162 -0
- package/src/theme-gray.css +959 -0
- package/src/theme-primary.css +3999 -0
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# @nattui/tailwind-colors
|
|
2
|
+
|
|
3
|
+
Centralized CSS and Tailwind color definitions for consistent styling across projects.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @nattui/tailwind-colors
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @nattui/tailwind-colors
|
|
11
|
+
# or
|
|
12
|
+
bun add @nattui/tailwind-colors
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Import in your CSS
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
@import "@nattui/tailwind-colors";
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Or import directly in your main CSS file:
|
|
24
|
+
|
|
25
|
+
```css
|
|
26
|
+
@import "@nattui/tailwind-colors/src/index.css";
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Using CSS Variables
|
|
30
|
+
|
|
31
|
+
All colors are available as CSS custom properties:
|
|
32
|
+
|
|
33
|
+
```css
|
|
34
|
+
.my-element {
|
|
35
|
+
background-color: var(--color-gray-1);
|
|
36
|
+
color: var(--color-primary-9);
|
|
37
|
+
border-color: var(--color-gray-a3);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Using with Tailwind CSS
|
|
42
|
+
|
|
43
|
+
The package includes Tailwind CSS theme definitions. After importing, you can use colors in your Tailwind classes:
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<div class="bg-gray-1 text-primary-9 border-gray-a3">
|
|
47
|
+
Content
|
|
48
|
+
</div>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Theme Classes
|
|
52
|
+
|
|
53
|
+
Apply theme classes to switch between color variants:
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<!-- Gray theme -->
|
|
57
|
+
<div class="color-gray-gray">
|
|
58
|
+
<!-- Uses gray color palette -->
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- Primary theme (gold) -->
|
|
62
|
+
<div class="color-primary-gold">
|
|
63
|
+
<!-- Uses gold color palette -->
|
|
64
|
+
</div>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Color System
|
|
68
|
+
|
|
69
|
+
### Color Scales
|
|
70
|
+
|
|
71
|
+
Each color palette includes:
|
|
72
|
+
|
|
73
|
+
- **Base colors**: `--color-{name}-1` through `--color-{name}-12`
|
|
74
|
+
- **Alpha variants**: `--color-{name}-a1` through `--color-{name}-a12`
|
|
75
|
+
- **Light variants**: `--color-{name}-light-1` through `--color-{name}-light-12`
|
|
76
|
+
- **Dark variants**: `--color-{name}-dark-1` through `--color-{name}-dark-12`
|
|
77
|
+
|
|
78
|
+
### Available Color Palettes
|
|
79
|
+
|
|
80
|
+
- **Gray**: Neutral grayscale palette with light and dark variants
|
|
81
|
+
- **Primary**: Brand color palette with multiple color options (e.g., gold) and light/dark variants
|
|
82
|
+
- **Black & White**: Base colors with alpha variants
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nattui/tailwind-colors",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Centralized CSS and Tailwind color definitions for consistent styling across projects",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"colors",
|
|
7
|
+
"css",
|
|
8
|
+
"design-system",
|
|
9
|
+
"palette",
|
|
10
|
+
"tailwind",
|
|
11
|
+
"theme"
|
|
12
|
+
],
|
|
13
|
+
"homepage": "https://github.com/nattui/tailwind-colors#readme",
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/nattui/tailwind-colors/issues"
|
|
16
|
+
},
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "git+https://github.com/nattui/tailwind-colors.git"
|
|
20
|
+
},
|
|
21
|
+
"author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
|
|
22
|
+
"type": "module",
|
|
23
|
+
"style": "src/index.css",
|
|
24
|
+
"scripts": {
|
|
25
|
+
"format:package": "bunx sort-package-json"
|
|
26
|
+
},
|
|
27
|
+
"publishConfig": {
|
|
28
|
+
"access": "public"
|
|
29
|
+
}
|
|
30
|
+
}
|