@nauverse/tailwind-dot-grid-backgrounds 1.2.13 โ 2.0.0
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 +100 -98
- package/index.css +99 -0
- package/package.json +47 -37
- package/dist/index.d.ts +0 -10
- package/dist/tailwind-dot-grid-backgrounds.js +0 -101
- package/dist/tailwind-dot-grid-backgrounds.js.map +0 -1
- package/dist/tailwind-dot-grid-backgrounds.umd.cjs +0 -2
- package/dist/tailwind-dot-grid-backgrounds.umd.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -1,160 +1,175 @@
|
|
|
1
1
|
<h1 align="center">
|
|
2
|
-
|
|
2
|
+
tailwind-dot-grid-backgrounds
|
|
3
3
|
<br>
|
|
4
4
|
</h1>
|
|
5
5
|
|
|
6
6
|
<p align="center">
|
|
7
|
-
<img src="https://
|
|
7
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/main/images/header.png" alt="tailwind-dot-grid-backgrounds: dot and grid backgrounds for Tailwind CSS" />
|
|
8
8
|
</p>
|
|
9
9
|
|
|
10
|
-
<h4 align="center">A tiny Tailwind plugin to add dot and grid
|
|
10
|
+
<h4 align="center">A tiny Tailwind CSS plugin to add customizable dot and grid backgrounds fast, in pure CSS</h4>
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
<a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions">
|
|
14
|
-
<img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/
|
|
15
|
-
|
|
13
|
+
<a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml">
|
|
14
|
+
<img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status">
|
|
15
|
+
</a>
|
|
16
|
+
<a href="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/release.yml">
|
|
17
|
+
<img src="https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/actions/workflows/release.yml/badge.svg?branch=main" alt="Release status">
|
|
16
18
|
</a>
|
|
17
19
|
<a href="https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds">
|
|
18
20
|
<img src="https://img.shields.io/npm/v/@nauverse/tailwind-dot-grid-backgrounds.svg?style=flat" alt="npm version">
|
|
19
21
|
</a>
|
|
20
|
-
<a href="https://
|
|
21
|
-
<img src="https://img.shields.io/
|
|
22
|
+
<a href="https://www.npmjs.com/package/@nauverse/tailwind-dot-grid-backgrounds">
|
|
23
|
+
<img src="https://img.shields.io/npm/l/@nauverse/tailwind-dot-grid-backgrounds.svg?style=flat" alt="license">
|
|
22
24
|
</a>
|
|
23
25
|
</p>
|
|
24
26
|
|
|
25
27
|
<p align="center">
|
|
26
|
-
<a href="#
|
|
28
|
+
<a href="#tldr">tl;dr</a> โข
|
|
27
29
|
<a href="#guide-and-examples">Guide and examples</a> โข
|
|
30
|
+
<a href="#migrating-from-v1">Migrating from v1</a> โข
|
|
28
31
|
<a href="#help">Help</a> โข
|
|
29
32
|
<a href="#contribute">Contribute</a>
|
|
30
33
|
</p>
|
|
31
34
|
|
|
35
|
+
| Plugin version | Tailwind CSS | How it works | Branch |
|
|
36
|
+
| -------------- | ------------ | ------------ | ------ |
|
|
37
|
+
| `2.x` (latest) | `^4.0` | Pure CSS (`@utility`), no JavaScript | [`main`](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/main) |
|
|
38
|
+
| `1.x` | `^3.4` | JavaScript plugin | [`v1`](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1) (maintenance, [docs](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/tree/v1#readme)) |
|
|
39
|
+
|
|
40
|
+
Still on Tailwind CSS v3? Install the `v1` line: `npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds@1`.
|
|
41
|
+
|
|
32
42
|
## tl;dr
|
|
33
|
-
This is a Tailwind plugin that allows you to add background grids and background dots in an easy and customizable way
|
|
43
|
+
This is a Tailwind CSS v4 plugin that allows you to add background grids and background dots in an easy and customizable way.
|
|
34
44
|
|
|
35
|
-
### 1.
|
|
45
|
+
### 1. Install the dependency
|
|
36
46
|
```bash
|
|
37
|
-
npm install --save @nauverse/tailwind-dot-grid-backgrounds
|
|
47
|
+
npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds
|
|
38
48
|
```
|
|
39
49
|
|
|
40
|
-
### 2.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
// ... the rest of your config
|
|
46
|
-
plugins: [
|
|
47
|
-
require('@nauverse/tailwind-dot-grid-backgrounds')
|
|
48
|
-
// ... the rest of your Tailwind plugins
|
|
49
|
-
],
|
|
50
|
-
};
|
|
51
|
-
~~~
|
|
50
|
+
### 2. Import it in your CSS, after Tailwind CSS
|
|
51
|
+
```css
|
|
52
|
+
@import "tailwindcss";
|
|
53
|
+
@import "@nauverse/tailwind-dot-grid-backgrounds";
|
|
54
|
+
```
|
|
52
55
|
|
|
53
|
-
### 3. You are done!
|
|
56
|
+
### 3. You are done!
|
|
54
57
|
Try it by adding this HTML to your UI:
|
|
55
58
|
```html
|
|
56
|
-
<div class="h-screen w-screen bg-yellow-300 bg-grid-8-
|
|
59
|
+
<div class="h-screen w-screen bg-yellow-300 bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2"></div>
|
|
57
60
|
```
|
|
58
61
|
|
|
59
62
|
## What
|
|
60
|
-
You could achieve the same by just using some Tailwind code but... I found myself adding this kind of background in my projects very often. So I created a small Tailwind plugin to allow me adding these
|
|
63
|
+
You could achieve the same by just using some Tailwind CSS code but... I found myself adding this kind of background in my projects very often. So I created a small Tailwind CSS plugin to allow me adding these backgrounds while keeping all the customization offered by Tailwind CSS.
|
|
61
64
|
|
|
62
65
|
### Features
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
-
|
|
66
|
-
-
|
|
67
|
-
-
|
|
66
|
+
- Fully integrated with Tailwind CSS: theme colors, opacity modifiers, the spacing scale, arbitrary values and every variant (`hover:`, `md:`, `dark:`...)
|
|
67
|
+
- Pure CSS: just an `@import`, no JavaScript and no configuration
|
|
68
|
+
- Performant: the backgrounds are CSS gradients, and only the classes you use are generated
|
|
69
|
+
- Zero dependencies
|
|
70
|
+
- Tested against the latest and the oldest supported Tailwind CSS v4 releases
|
|
68
71
|
|
|
69
72
|
## Guide and examples
|
|
70
73
|
|
|
71
|
-
|
|
72
|
-
Pattern: `bg-grid-<SIZE>-s-<STROKE_WIDTH>-<COLOR>`
|
|
74
|
+
A pattern is drawn by its color class. Its size and line (or dot) width are optional classes that you can combine with it, so each part can change on its own with variants (for example `md:bg-grid-size-12`).
|
|
73
75
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
76
|
+
### Background grid
|
|
77
|
+
|
|
78
|
+
| Class | What it sets | Default |
|
|
79
|
+
| ----- | ------------ | ------- |
|
|
80
|
+
| `bg-grid-<color>` | Draws the grid with this line color | - |
|
|
81
|
+
| `bg-grid-size-<number>` | The size of the squares, in spacing units (like `w-<number>`) | `8` (`2rem`) |
|
|
82
|
+
| `bg-grid-stroke-<number>` | The width of the lines, in pixels | `1` (`1px`) |
|
|
83
|
+
|
|
84
|
+
- `<color>` accepts any theme color (`neutral-950`, your own `--color-*` variables) with an optional opacity modifier (`bg-grid-blue-700/80`, `bg-grid-blue-700/[35%]`), arbitrary values (`bg-grid-[#ff0000]`), CSS variables (`bg-grid-(--my-color)`) and `current` (`bg-grid-current` has no opacity modifier: use `bg-grid-[color-mix(in_oklab,currentcolor_50%,transparent)]` instead).
|
|
85
|
+
- `bg-grid-size-*` also accepts `--spacing-*` theme keys (`bg-grid-size-cell` with `--spacing-cell: 18px`), arbitrary lengths (`bg-grid-size-[18px]`) and CSS variables (`bg-grid-size-(--cell)`).
|
|
86
|
+
- `bg-grid-stroke-*` also accepts decimals (`bg-grid-stroke-0.5`), arbitrary lengths (`bg-grid-stroke-[0.1rem]`) and CSS variables (`bg-grid-stroke-(--line)`).
|
|
87
|
+
- Arbitrary values are not validated, like in Tailwind CSS itself: `bg-grid-[10px]` generates a class that draws nothing.
|
|
77
88
|
|
|
78
89
|
#### Examples:
|
|
79
|
-
`bg-grid-8-
|
|
90
|
+
`bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2`
|
|
80
91
|
<p align="center">
|
|
81
|
-
<img src="https://
|
|
92
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-8-s-2-neutral-950.png" alt="bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2" />
|
|
82
93
|
</p>
|
|
83
94
|
|
|
84
|
-
`bg-grid-
|
|
95
|
+
`bg-grid-blue-700/80 bg-grid-size-48 bg-grid-stroke-8`
|
|
85
96
|
<p align="center">
|
|
86
|
-
<img src="https://
|
|
97
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-grid-48-s-8-blue-700_80.png" alt="bg-grid-blue-700/80 bg-grid-size-48 bg-grid-stroke-8" />
|
|
87
98
|
</p>
|
|
88
99
|
|
|
89
|
-
### Background
|
|
90
|
-
|
|
100
|
+
### Background dots
|
|
101
|
+
|
|
102
|
+
| Class | What it sets | Default |
|
|
103
|
+
| ----- | ------------ | ------- |
|
|
104
|
+
| `bg-dot-<color>` | Draws the dots with this color | - |
|
|
105
|
+
| `bg-dot-size-<number>` | The distance between the dots (in both axes), in spacing units | `8` (`2rem`) |
|
|
106
|
+
| `bg-dot-radius-<number>` | The radius of the dots, in pixels | `1` (`1px`) |
|
|
91
107
|
|
|
92
|
-
|
|
93
|
-
- `<DOT_SIZE>` is the size of the dots. It allows the numeric values of the `borderWidth` prop in Tailwind and also the value `1` (since Tailwind does not have a `border-1` class).
|
|
94
|
-
- `<COLOR>` is the color of the dots. It allows any valid classname color in Tailwind.
|
|
108
|
+
They accept the same values as their grid counterparts.
|
|
95
109
|
|
|
96
110
|
#### Examples:
|
|
97
|
-
`bg-dot-8-
|
|
111
|
+
`bg-dot-neutral-950 bg-dot-size-8 bg-dot-radius-2`
|
|
98
112
|
<p align="center">
|
|
99
|
-
<img src="https://
|
|
113
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-8-s-2-neutral-950.png" alt="bg-dot-neutral-950 bg-dot-size-8 bg-dot-radius-2" />
|
|
100
114
|
</p>
|
|
101
115
|
|
|
102
|
-
`bg-dot-
|
|
116
|
+
`bg-dot-blue-700/80 bg-dot-size-16 bg-dot-radius-8`
|
|
103
117
|
<p align="center">
|
|
104
|
-
<img src="https://
|
|
118
|
+
<img src="https://raw.githubusercontent.com/TheNaubit/tailwind-dot-grid-backgrounds/f3e4cac4117dee081ed982739d3c38ff12544869/images/bg-dot-16-s-8-blue-700_80.png" alt="bg-dot-blue-700/80 bg-dot-size-16 bg-dot-radius-8" />
|
|
105
119
|
</p>
|
|
106
120
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
Thank you for using *tailwind-dot-grid-backgrounds*!
|
|
110
|
-
|
|
111
|
-
If you need any help using this plugin, feel free to [create a GitHub issue](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues/new/choose), and ask your questions. I'll try to answer as quickly as possible.
|
|
112
|
-
|
|
113
|
-
## Contribute
|
|
114
|
-
|
|
115
|
-
Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome! If you like this project and want to help, but feel like you are stuck, feel free to contact the maintainers.
|
|
121
|
+
### Customizing
|
|
122
|
+
Everything comes from your Tailwind CSS theme:
|
|
116
123
|
|
|
117
|
-
|
|
124
|
+
```css
|
|
125
|
+
@import "tailwindcss";
|
|
126
|
+
@import "@nauverse/tailwind-dot-grid-backgrounds";
|
|
118
127
|
|
|
119
|
-
|
|
128
|
+
@theme {
|
|
129
|
+
--color-brand: #123456; /* bg-grid-brand, bg-dot-brand/50 */
|
|
130
|
+
--spacing-cell: 18px; /* bg-grid-size-cell */
|
|
131
|
+
}
|
|
132
|
+
```
|
|
120
133
|
|
|
121
|
-
|
|
122
|
-
Tested on node version 18.0.0 and npm version 8.6.0.
|
|
134
|
+
The pattern settings are stored in the `--bg-grid-color`, `--bg-grid-size`, `--bg-grid-stroke`, `--bg-dot-color`, `--bg-dot-size` and `--bg-dot-radius` CSS variables. They are registered with `@property` as non-inherited, so a pattern never leaks into the patterns of its children.
|
|
123
135
|
|
|
124
|
-
|
|
136
|
+
## Migrating from v1
|
|
125
137
|
|
|
126
|
-
|
|
127
|
-
git clone git@github.com:TheNaubit/tailwind-dot-grid-backgrounds.git
|
|
128
|
-
```
|
|
138
|
+
Version 2 is for Tailwind CSS v4. It is a pure CSS plugin, and each part of a pattern is now its own class.
|
|
129
139
|
|
|
130
|
-
|
|
140
|
+
1. Upgrade to Tailwind CSS v4 ([upgrade guide](https://tailwindcss.com/docs/upgrade-guide)).
|
|
141
|
+
2. Install the latest version: `npm install --save-dev @nauverse/tailwind-dot-grid-backgrounds@latest`.
|
|
142
|
+
3. Remove the plugin from your `tailwind.config.*` `plugins` (or the `@plugin` directive) and add `@import "@nauverse/tailwind-dot-grid-backgrounds";` after `@import "tailwindcss";`.
|
|
143
|
+
4. Replace the classes. `<SIZE>`, `<STROKE_WIDTH>`/`<DOT_SIZE>` and `<COLOR>` keep the same values:
|
|
131
144
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
145
|
+
| v1 | v2 |
|
|
146
|
+
| -- | -- |
|
|
147
|
+
| `bg-grid-<SIZE>-s-<STROKE_WIDTH>-<COLOR>` | `bg-grid-<COLOR> bg-grid-size-<SIZE> bg-grid-stroke-<STROKE_WIDTH>` |
|
|
148
|
+
| `bg-dot-<SIZE>-s-<DOT_SIZE>-<COLOR>` | `bg-dot-<COLOR> bg-dot-size-<SIZE> bg-dot-radius-<DOT_SIZE>` |
|
|
149
|
+
| `bg-grid-8-s-2-neutral-950` | `bg-grid-neutral-950 bg-grid-size-8 bg-grid-stroke-2` |
|
|
150
|
+
| `bg-dot-16-s-8-blue-700/80` | `bg-dot-blue-700/80 bg-dot-size-16 bg-dot-radius-8` |
|
|
151
|
+
| `bg-grid-px-s-1-red-500` | `bg-grid-red-500 bg-grid-size-[1px]` |
|
|
136
152
|
|
|
137
|
-
|
|
153
|
+
Sizes now follow your spacing scale (`--spacing`) instead of being converted to pixels, and the stroke width and dot radius default to `1px`, so `bg-grid-<COLOR> bg-grid-size-<SIZE>` is enough for 1px lines.
|
|
138
154
|
|
|
139
|
-
|
|
140
|
-
npm run test:run
|
|
141
|
-
```
|
|
155
|
+
## Help
|
|
142
156
|
|
|
143
|
-
|
|
157
|
+
Thank you for using *tailwind-dot-grid-backgrounds*!
|
|
144
158
|
|
|
145
|
-
|
|
146
|
-
npm run build
|
|
147
|
-
```
|
|
159
|
+
If you need any help using this plugin, feel free to [create a GitHub issue](https://github.com/TheNaubit/tailwind-dot-grid-backgrounds/issues/new/choose), and ask your questions. I'll try to answer as quickly as possible.
|
|
148
160
|
|
|
149
|
-
|
|
161
|
+
## Contribute
|
|
150
162
|
|
|
151
|
-
|
|
163
|
+
Contributions of any kind (pull requests, bug reports, feature requests, documentation, design) are more than welcome! Read the [contributing guide](./CONTRIBUTING.md) to get started (and [AGENTS.md](./AGENTS.md) if you use a coding agent).
|
|
152
164
|
|
|
153
|
-
## Contributors
|
|
165
|
+
## Contributors
|
|
154
166
|
|
|
155
167
|
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
156
|
-
[](#contributors
|
|
168
|
+
[](#contributors)
|
|
157
169
|
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
170
|
+
|
|
171
|
+
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
|
172
|
+
|
|
158
173
|
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
159
174
|
<!-- prettier-ignore-start -->
|
|
160
175
|
<!-- markdownlint-disable -->
|
|
@@ -171,17 +186,4 @@ Happy hacking!
|
|
|
171
186
|
|
|
172
187
|
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
173
188
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
## Contributors
|
|
177
|
-
|
|
178
|
-
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
|
179
|
-
<!-- prettier-ignore-start -->
|
|
180
|
-
<!-- markdownlint-disable -->
|
|
181
|
-
|
|
182
|
-
<!-- markdownlint-restore -->
|
|
183
|
-
<!-- prettier-ignore-end -->
|
|
184
|
-
|
|
185
|
-
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
186
|
-
|
|
187
|
-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
|
189
|
+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
package/index.css
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @nauverse/tailwind-dot-grid-backgrounds
|
|
3
|
+
* Dot and grid backgrounds for Tailwind CSS v4, as pure CSS utilities.
|
|
4
|
+
*
|
|
5
|
+
* Grid: bg-grid-<color>[/<opacity>] bg-grid-size-<spacing> bg-grid-stroke-<px>
|
|
6
|
+
* Dots: bg-dot-<color>[/<opacity>] bg-dot-size-<spacing> bg-dot-radius-<px>
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/*
|
|
10
|
+
* The pattern settings must not inherit: a nested element would otherwise reuse the size, stroke or color of its parent pattern.
|
|
11
|
+
* Without a value, each utility falls back to its default (1px lines or dots, every 8 spacing units).
|
|
12
|
+
*/
|
|
13
|
+
@property --bg-grid-color {
|
|
14
|
+
syntax: "*";
|
|
15
|
+
inherits: false;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@property --bg-grid-size {
|
|
19
|
+
syntax: "*";
|
|
20
|
+
inherits: false;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@property --bg-grid-stroke {
|
|
24
|
+
syntax: "*";
|
|
25
|
+
inherits: false;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@property --bg-dot-color {
|
|
29
|
+
syntax: "*";
|
|
30
|
+
inherits: false;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@property --bg-dot-size {
|
|
34
|
+
syntax: "*";
|
|
35
|
+
inherits: false;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
@property --bg-dot-radius {
|
|
39
|
+
syntax: "*";
|
|
40
|
+
inherits: false;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* ---------------------------------- Grid ---------------------------------- */
|
|
44
|
+
|
|
45
|
+
/* The color of the grid lines (theme color, arbitrary value or CSS variable, with an optional opacity modifier). It also draws the grid. */
|
|
46
|
+
@utility bg-grid-* {
|
|
47
|
+
--bg-grid-color: --value(--color-*, [color], [*]);
|
|
48
|
+
--bg-grid-color: --alpha(--value(--color-*, [color], [*]) / calc(--modifier(number) * 1%));
|
|
49
|
+
--bg-grid-color: --alpha(--value(--color-*, [color], [*]) / --modifier([percentage]));
|
|
50
|
+
background-image: linear-gradient(to right, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px)), linear-gradient(to bottom, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px));
|
|
51
|
+
background-size: var(--bg-grid-size, --spacing(8)) var(--bg-grid-size, --spacing(8));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@utility bg-grid-current {
|
|
55
|
+
--bg-grid-color: currentcolor;
|
|
56
|
+
background-image: linear-gradient(to right, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px)), linear-gradient(to bottom, var(--bg-grid-color) var(--bg-grid-stroke, 1px), transparent var(--bg-grid-stroke, 1px));
|
|
57
|
+
background-size: var(--bg-grid-size, --spacing(8)) var(--bg-grid-size, --spacing(8));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* The size of the grid squares: a multiple of the spacing scale, a spacing theme key or an arbitrary length. */
|
|
61
|
+
@utility bg-grid-size-* {
|
|
62
|
+
--bg-grid-size: --spacing(--value(number));
|
|
63
|
+
--bg-grid-size: --value(--spacing-*, [length], [*]);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* The width of the grid lines: a number of pixels or an arbitrary length. */
|
|
67
|
+
@utility bg-grid-stroke-* {
|
|
68
|
+
--bg-grid-stroke: --value(number)px;
|
|
69
|
+
--bg-grid-stroke: --value([length], [*]);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* ---------------------------------- Dots ---------------------------------- */
|
|
73
|
+
|
|
74
|
+
/* The color of the dots (theme color, arbitrary value or CSS variable, with an optional opacity modifier). It also draws the dots. */
|
|
75
|
+
@utility bg-dot-* {
|
|
76
|
+
--bg-dot-color: --value(--color-*, [color], [*]);
|
|
77
|
+
--bg-dot-color: --alpha(--value(--color-*, [color], [*]) / calc(--modifier(number) * 1%));
|
|
78
|
+
--bg-dot-color: --alpha(--value(--color-*, [color], [*]) / --modifier([percentage]));
|
|
79
|
+
background-image: radial-gradient(var(--bg-dot-color) var(--bg-dot-radius, 1px), transparent var(--bg-dot-radius, 1px));
|
|
80
|
+
background-size: var(--bg-dot-size, --spacing(8)) var(--bg-dot-size, --spacing(8));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@utility bg-dot-current {
|
|
84
|
+
--bg-dot-color: currentcolor;
|
|
85
|
+
background-image: radial-gradient(var(--bg-dot-color) var(--bg-dot-radius, 1px), transparent var(--bg-dot-radius, 1px));
|
|
86
|
+
background-size: var(--bg-dot-size, --spacing(8)) var(--bg-dot-size, --spacing(8));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* The distance between the dots (in both axes): a multiple of the spacing scale, a spacing theme key or an arbitrary length. */
|
|
90
|
+
@utility bg-dot-size-* {
|
|
91
|
+
--bg-dot-size: --spacing(--value(number));
|
|
92
|
+
--bg-dot-size: --value(--spacing-*, [length], [*]);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* The radius of the dots: a number of pixels or an arbitrary length. */
|
|
96
|
+
@utility bg-dot-radius-* {
|
|
97
|
+
--bg-dot-radius: --value(number)px;
|
|
98
|
+
--bg-dot-radius: --value([length], [*]);
|
|
99
|
+
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nauverse/tailwind-dot-grid-backgrounds",
|
|
3
|
-
"description": "
|
|
3
|
+
"description": "A tiny Tailwind CSS v4 plugin to add customizable dot and grid backgrounds fast, in pure CSS",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Albert Adler | @IAmAlbertAdler",
|
|
6
6
|
"url": "https://albertadler.com"
|
|
7
7
|
},
|
|
8
8
|
"license": "MIT",
|
|
9
|
-
"homepage": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds",
|
|
9
|
+
"homepage": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds#readme",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
12
|
"url": "https://github.com/TheNaubit/tailwind-dot-grid-backgrounds.git"
|
|
@@ -17,59 +17,69 @@
|
|
|
17
17
|
"keywords": [
|
|
18
18
|
"tailwind",
|
|
19
19
|
"tailwindcss",
|
|
20
|
+
"tailwindcss-v4",
|
|
20
21
|
"tailwindcss-plugin",
|
|
21
|
-
"
|
|
22
|
-
"tailwindcss-dot-background",
|
|
22
|
+
"css",
|
|
23
23
|
"grid-background",
|
|
24
|
-
"dot-background"
|
|
24
|
+
"dot-background",
|
|
25
|
+
"background-pattern"
|
|
25
26
|
],
|
|
26
|
-
"version": "
|
|
27
|
+
"version": "2.0.0",
|
|
27
28
|
"type": "module",
|
|
28
|
-
"
|
|
29
|
-
"module": "./dist/tailwind-dot-grid-backgrounds.js",
|
|
30
|
-
"types": "./dist/index.d.ts",
|
|
31
|
-
"engines": {
|
|
32
|
-
"node": ">=18.0.0"
|
|
33
|
-
},
|
|
29
|
+
"style": "./index.css",
|
|
34
30
|
"exports": {
|
|
35
31
|
".": {
|
|
36
|
-
"
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"types": "./dist/index.d.ts",
|
|
42
|
-
"default": "./dist/tailwind-dot-grid-backgrounds.umd.cjs"
|
|
43
|
-
}
|
|
44
|
-
}
|
|
32
|
+
"style": "./index.css",
|
|
33
|
+
"default": "./index.css"
|
|
34
|
+
},
|
|
35
|
+
"./index.css": "./index.css",
|
|
36
|
+
"./package.json": "./package.json"
|
|
45
37
|
},
|
|
46
38
|
"files": [
|
|
47
|
-
"
|
|
39
|
+
"index.css"
|
|
40
|
+
],
|
|
41
|
+
"sideEffects": [
|
|
42
|
+
"*.css"
|
|
48
43
|
],
|
|
49
44
|
"scripts": {
|
|
50
|
-
"build": "tsc && vite build",
|
|
51
45
|
"test": "vitest",
|
|
52
46
|
"test:run": "vitest run",
|
|
53
|
-
"
|
|
47
|
+
"typecheck": "tsc --noEmit",
|
|
54
48
|
"lint": "biome check",
|
|
55
49
|
"lint:fix": "biome check --write",
|
|
56
50
|
"prepare": "husky"
|
|
57
51
|
},
|
|
58
52
|
"devDependencies": {
|
|
59
|
-
"@biomejs/biome": "
|
|
60
|
-
"@commitlint/cli": "
|
|
61
|
-
"@commitlint/config-conventional": "
|
|
62
|
-
"@
|
|
63
|
-
"@
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"vitest": "
|
|
53
|
+
"@biomejs/biome": "2.5.14",
|
|
54
|
+
"@commitlint/cli": "21.2.3",
|
|
55
|
+
"@commitlint/config-conventional": "21.2.3",
|
|
56
|
+
"@semantic-release/changelog": "6.0.3",
|
|
57
|
+
"@semantic-release/git": "10.0.1",
|
|
58
|
+
"@tailwindcss/node": "4.3.3",
|
|
59
|
+
"@types/node": "24.19.0",
|
|
60
|
+
"husky": "9.1.7",
|
|
61
|
+
"semantic-release": "25.0.9",
|
|
62
|
+
"tailwindcss": "4.3.3",
|
|
63
|
+
"typescript": "7.0.2",
|
|
64
|
+
"vitest": "5.0.2"
|
|
71
65
|
},
|
|
72
66
|
"peerDependencies": {
|
|
73
|
-
"tailwindcss": "
|
|
67
|
+
"tailwindcss": "^4.0.0"
|
|
68
|
+
},
|
|
69
|
+
"devEngines": {
|
|
70
|
+
"runtime": {
|
|
71
|
+
"name": "node",
|
|
72
|
+
"version": "^22.14.0 || >=24.10.0",
|
|
73
|
+
"onFail": "error"
|
|
74
|
+
},
|
|
75
|
+
"packageManager": {
|
|
76
|
+
"name": "npm",
|
|
77
|
+
"version": ">=10.9.0",
|
|
78
|
+
"onFail": "warn"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
"publishConfig": {
|
|
82
|
+
"access": "public",
|
|
83
|
+
"registry": "https://registry.npmjs.org/"
|
|
74
84
|
}
|
|
75
85
|
}
|
package/dist/index.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Config } from 'tailwindcss/types/config';
|
|
2
|
-
import { PluginCreator } from 'tailwindcss/types/config';
|
|
3
|
-
|
|
4
|
-
declare const tailwindDotGridBackgrounds: {
|
|
5
|
-
handler: PluginCreator;
|
|
6
|
-
config?: Partial<Config>;
|
|
7
|
-
};
|
|
8
|
-
export default tailwindDotGridBackgrounds;
|
|
9
|
-
|
|
10
|
-
export { }
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
function d(t) {
|
|
2
|
-
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
|
|
3
|
-
}
|
|
4
|
-
var f = {};
|
|
5
|
-
(function(t) {
|
|
6
|
-
Object.defineProperty(t, "__esModule", {
|
|
7
|
-
value: !0
|
|
8
|
-
}), Object.defineProperty(t, "default", {
|
|
9
|
-
enumerable: !0,
|
|
10
|
-
get: function() {
|
|
11
|
-
return o;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
const u = (r) => Object.assign({}, ...Object.entries(r ?? {}).flatMap(([n, e]) => typeof e == "object" ? Object.entries(u(e)).map(([a, i]) => ({
|
|
15
|
-
[n + (a === "DEFAULT" ? "" : `-${a}`)]: i
|
|
16
|
-
})) : [
|
|
17
|
-
{
|
|
18
|
-
[`${n}`]: e
|
|
19
|
-
}
|
|
20
|
-
])), o = u;
|
|
21
|
-
})(f);
|
|
22
|
-
const _ = /* @__PURE__ */ d(f);
|
|
23
|
-
var s = {}, p = {};
|
|
24
|
-
(function(t) {
|
|
25
|
-
Object.defineProperty(t, "__esModule", {
|
|
26
|
-
value: !0
|
|
27
|
-
}), Object.defineProperty(t, "default", {
|
|
28
|
-
enumerable: !0,
|
|
29
|
-
get: function() {
|
|
30
|
-
return o;
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
function u(r, n) {
|
|
34
|
-
return {
|
|
35
|
-
handler: r,
|
|
36
|
-
config: n
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
u.withOptions = function(r, n = () => ({})) {
|
|
40
|
-
const e = function(a) {
|
|
41
|
-
return {
|
|
42
|
-
__options: a,
|
|
43
|
-
handler: r(a),
|
|
44
|
-
config: n(a)
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
return e.__isOptionsFunction = !0, e.__pluginFunction = r, e.__configFunction = n, e;
|
|
48
|
-
};
|
|
49
|
-
const o = u;
|
|
50
|
-
})(p);
|
|
51
|
-
(function(t) {
|
|
52
|
-
Object.defineProperty(t, "__esModule", {
|
|
53
|
-
value: !0
|
|
54
|
-
}), Object.defineProperty(t, "default", {
|
|
55
|
-
enumerable: !0,
|
|
56
|
-
get: function() {
|
|
57
|
-
return r;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
const u = /* @__PURE__ */ o(p);
|
|
61
|
-
function o(n) {
|
|
62
|
-
return n && n.__esModule ? n : {
|
|
63
|
-
default: n
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
const r = u.default;
|
|
67
|
-
})(s);
|
|
68
|
-
let c = s;
|
|
69
|
-
var g = (c.__esModule ? c : { default: c }).default;
|
|
70
|
-
const b = /* @__PURE__ */ d(g), $ = 16, P = b(
|
|
71
|
-
({
|
|
72
|
-
matchUtilities: t,
|
|
73
|
-
theme: u
|
|
74
|
-
}) => {
|
|
75
|
-
const o = _(u("backgroundColor")), r = ["1", ...Object.keys(u("borderWidth"))], n = Object.entries(u("width")).filter(([, e]) => e.endsWith("rem")).map(([e, a]) => [
|
|
76
|
-
e,
|
|
77
|
-
Number.parseFloat(a.replace("rem", "")) * $
|
|
78
|
-
]);
|
|
79
|
-
for (const e of r)
|
|
80
|
-
for (const [a, i] of n)
|
|
81
|
-
t(
|
|
82
|
-
{
|
|
83
|
-
// This key is for the square grid background
|
|
84
|
-
[`bg-grid-${a}-s-${e}`]: (l) => ({
|
|
85
|
-
backgroundImage: `linear-gradient(to right, ${l} ${e}px, transparent ${e}px),linear-gradient(to bottom, ${l} ${e}px, transparent ${e}px)`,
|
|
86
|
-
backgroundSize: `${i}px ${i}px`
|
|
87
|
-
}),
|
|
88
|
-
// And this key is for the dotted background
|
|
89
|
-
[`bg-dot-${a}-s-${e}`]: (l) => ({
|
|
90
|
-
backgroundImage: `radial-gradient(${l} ${e}px, transparent ${e}px)`,
|
|
91
|
-
backgroundSize: `${i}px ${i}px`
|
|
92
|
-
})
|
|
93
|
-
},
|
|
94
|
-
{ values: o, type: "color" }
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
);
|
|
98
|
-
export {
|
|
99
|
-
P as default
|
|
100
|
-
};
|
|
101
|
-
//# sourceMappingURL=tailwind-dot-grid-backgrounds.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind-dot-grid-backgrounds.js","sources":["../node_modules/tailwindcss/lib/util/flattenColorPalette.js","../node_modules/tailwindcss/lib/util/createPlugin.js","../node_modules/tailwindcss/lib/public/create-plugin.js","../node_modules/tailwindcss/plugin.js","../src/plugin.ts"],"sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst flattenColorPalette = (colors)=>Object.assign({}, ...Object.entries(colors !== null && colors !== void 0 ? colors : {}).flatMap(([color, values])=>typeof values == \"object\" ? Object.entries(flattenColorPalette(values)).map(([number, hex])=>({\n [color + (number === \"DEFAULT\" ? \"\" : `-${number}`)]: hex\n })) : [\n {\n [`${color}`]: values\n }\n ]));\nconst _default = flattenColorPalette;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nfunction createPlugin(plugin, config) {\n return {\n handler: plugin,\n config\n };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n const optionsFunction = function(options) {\n return {\n __options: options,\n handler: pluginFunction(options),\n config: configFunction(options)\n };\n };\n optionsFunction.__isOptionsFunction = true;\n // Expose plugin dependencies so that `object-hash` returns a different\n // value if anything here changes, to ensure a rebuild is triggered.\n optionsFunction.__pluginFunction = pluginFunction;\n optionsFunction.__configFunction = configFunction;\n return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","// @ts-expect-error - flattenColorPalette file does not export a type declaration\nimport flattenColorPalette from \"tailwindcss/lib/util/flattenColorPalette\";\nimport plugin from \"tailwindcss/plugin\";\nimport type { PluginAPI } from \"tailwindcss/types/config\";\n\nconst REM_TO_PX = 16; // 1rem = 16px\n\nconst tailwindDotGridBackgrounds = plugin(\n\t({\n\t\tmatchUtilities,\n\t\ttheme,\n\t}: {\n\t\tmatchUtilities: PluginAPI[\"matchUtilities\"];\n\t\ttheme: PluginAPI[\"theme\"];\n\t}) => {\n\t\t// Obtain the color palette from the theme\n\t\tconst colorPalette = flattenColorPalette(theme(\"backgroundColor\"));\n\n\t\t// The border widths from Tailwind CSS will be the values used for the grid stoke widths. We also add the value \"1\" to the list of border widths (since Tailwind CSS does not include it by default).\n\t\tconst borderWidths = [\"1\", ...Object.keys(theme(\"borderWidth\"))];\n\n\t\t// For the sizes (the size of the squares in the grid or the distance between the dots in the dotted background), we will use the numeric width values from the \"width\" theme object. We will filter out the values that are not in \"rem\" units and convert the remaining values to pixels.\n\t\tconst numericWidths: Array<[string, number]> = (\n\t\t\tObject.entries(theme(\"width\")) as Array<[string, string]>\n\t\t)\n\t\t\t.filter(([, value]) => value.endsWith(\"rem\"))\n\t\t\t.map(([key, value]) => [\n\t\t\t\tkey,\n\t\t\t\tNumber.parseFloat(value.replace(\"rem\", \"\")) * REM_TO_PX,\n\t\t\t]);\n\n\t\t// Now iterate to generate all the utility classes\n\t\tfor (const borderWidth of borderWidths) {\n\t\t\tfor (const [widthKey, widthValue] of numericWidths) {\n\t\t\t\tmatchUtilities(\n\t\t\t\t\t{\n\t\t\t\t\t\t// This key is for the square grid background\n\t\t\t\t\t\t[`bg-grid-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tbackgroundImage: `linear-gradient(to right, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px),linear-gradient(to bottom, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n\t\t\t\t\t\t\t\tbackgroundSize: `${widthValue}px ${widthValue}px`,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t},\n\t\t\t\t\t\t// And this key is for the dotted background\n\t\t\t\t\t\t[`bg-dot-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tbackgroundImage: `radial-gradient(${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n\t\t\t\t\t\t\t\tbackgroundSize: `${widthValue}px ${widthValue}px`,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{ values: colorPalette, type: \"color\" },\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t},\n);\n\nexport default tailwindDotGridBackgrounds;\n"],"names":["exports","_default","flattenColorPalette","colors","color","values","number","hex","createPlugin","plugin","config","pluginFunction","configFunction","optionsFunction","options","_createPlugin","_interop_require_default","require$$0","obj","REM_TO_PX","tailwindDotGridBackgrounds","matchUtilities","theme","colorPalette","borderWidths","numericWidths","value","key","borderWidth","widthKey","widthValue","colorValue"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
(function(a,d){typeof exports=="object"&&typeof module<"u"?module.exports=d():typeof define=="function"&&define.amd?define(d):(a=typeof globalThis<"u"?globalThis:a||self,a["tailwind-dot-grid-backgrounds"]=d())})(this,function(){"use strict";function a(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var d={};(function(t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return i}});const o=r=>Object.assign({},...Object.entries(r??{}).flatMap(([n,e])=>typeof e=="object"?Object.entries(o(e)).map(([u,l])=>({[n+(u==="DEFAULT"?"":`-${u}`)]:l})):[{[`${n}`]:e}])),i=o})(d);const g=a(d);var s={},p={};(function(t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return i}});function o(r,n){return{handler:r,config:n}}o.withOptions=function(r,n=()=>({})){const e=function(u){return{__options:u,handler:r(u),config:n(u)}};return e.__isOptionsFunction=!0,e.__pluginFunction=r,e.__configFunction=n,e};const i=o})(p),function(t){Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return r}});const o=i(p);function i(n){return n&&n.__esModule?n:{default:n}}const r=o.default}(s);let f=s;var _=(f.__esModule?f:{default:f}).default;const b=a(_),$=16;return b(({matchUtilities:t,theme:o})=>{const i=g(o("backgroundColor")),r=["1",...Object.keys(o("borderWidth"))],n=Object.entries(o("width")).filter(([,e])=>e.endsWith("rem")).map(([e,u])=>[e,Number.parseFloat(u.replace("rem",""))*$]);for(const e of r)for(const[u,l]of n)t({[`bg-grid-${u}-s-${e}`]:c=>({backgroundImage:`linear-gradient(to right, ${c} ${e}px, transparent ${e}px),linear-gradient(to bottom, ${c} ${e}px, transparent ${e}px)`,backgroundSize:`${l}px ${l}px`}),[`bg-dot-${u}-s-${e}`]:c=>({backgroundImage:`radial-gradient(${c} ${e}px, transparent ${e}px)`,backgroundSize:`${l}px ${l}px`})},{values:i,type:"color"})})});
|
|
2
|
-
//# sourceMappingURL=tailwind-dot-grid-backgrounds.umd.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind-dot-grid-backgrounds.umd.cjs","sources":["../node_modules/tailwindcss/lib/util/flattenColorPalette.js","../node_modules/tailwindcss/lib/util/createPlugin.js","../node_modules/tailwindcss/lib/public/create-plugin.js","../node_modules/tailwindcss/plugin.js","../src/plugin.ts"],"sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst flattenColorPalette = (colors)=>Object.assign({}, ...Object.entries(colors !== null && colors !== void 0 ? colors : {}).flatMap(([color, values])=>typeof values == \"object\" ? Object.entries(flattenColorPalette(values)).map(([number, hex])=>({\n [color + (number === \"DEFAULT\" ? \"\" : `-${number}`)]: hex\n })) : [\n {\n [`${color}`]: values\n }\n ]));\nconst _default = flattenColorPalette;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nfunction createPlugin(plugin, config) {\n return {\n handler: plugin,\n config\n };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n const optionsFunction = function(options) {\n return {\n __options: options,\n handler: pluginFunction(options),\n config: configFunction(options)\n };\n };\n optionsFunction.__isOptionsFunction = true;\n // Expose plugin dependencies so that `object-hash` returns a different\n // value if anything here changes, to ensure a rebuild is triggered.\n optionsFunction.__pluginFunction = pluginFunction;\n optionsFunction.__configFunction = configFunction;\n return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function() {\n return _default;\n }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","// @ts-expect-error - flattenColorPalette file does not export a type declaration\nimport flattenColorPalette from \"tailwindcss/lib/util/flattenColorPalette\";\nimport plugin from \"tailwindcss/plugin\";\nimport type { PluginAPI } from \"tailwindcss/types/config\";\n\nconst REM_TO_PX = 16; // 1rem = 16px\n\nconst tailwindDotGridBackgrounds = plugin(\n\t({\n\t\tmatchUtilities,\n\t\ttheme,\n\t}: {\n\t\tmatchUtilities: PluginAPI[\"matchUtilities\"];\n\t\ttheme: PluginAPI[\"theme\"];\n\t}) => {\n\t\t// Obtain the color palette from the theme\n\t\tconst colorPalette = flattenColorPalette(theme(\"backgroundColor\"));\n\n\t\t// The border widths from Tailwind CSS will be the values used for the grid stoke widths. We also add the value \"1\" to the list of border widths (since Tailwind CSS does not include it by default).\n\t\tconst borderWidths = [\"1\", ...Object.keys(theme(\"borderWidth\"))];\n\n\t\t// For the sizes (the size of the squares in the grid or the distance between the dots in the dotted background), we will use the numeric width values from the \"width\" theme object. We will filter out the values that are not in \"rem\" units and convert the remaining values to pixels.\n\t\tconst numericWidths: Array<[string, number]> = (\n\t\t\tObject.entries(theme(\"width\")) as Array<[string, string]>\n\t\t)\n\t\t\t.filter(([, value]) => value.endsWith(\"rem\"))\n\t\t\t.map(([key, value]) => [\n\t\t\t\tkey,\n\t\t\t\tNumber.parseFloat(value.replace(\"rem\", \"\")) * REM_TO_PX,\n\t\t\t]);\n\n\t\t// Now iterate to generate all the utility classes\n\t\tfor (const borderWidth of borderWidths) {\n\t\t\tfor (const [widthKey, widthValue] of numericWidths) {\n\t\t\t\tmatchUtilities(\n\t\t\t\t\t{\n\t\t\t\t\t\t// This key is for the square grid background\n\t\t\t\t\t\t[`bg-grid-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tbackgroundImage: `linear-gradient(to right, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px),linear-gradient(to bottom, ${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n\t\t\t\t\t\t\t\tbackgroundSize: `${widthValue}px ${widthValue}px`,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t},\n\t\t\t\t\t\t// And this key is for the dotted background\n\t\t\t\t\t\t[`bg-dot-${widthKey}-s-${borderWidth}`]: (colorValue: string) => {\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tbackgroundImage: `radial-gradient(${colorValue} ${borderWidth}px, transparent ${borderWidth}px)`,\n\t\t\t\t\t\t\t\tbackgroundSize: `${widthValue}px ${widthValue}px`,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\t{ values: colorPalette, type: \"color\" },\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t},\n);\n\nexport default tailwindDotGridBackgrounds;\n"],"names":["exports","_default","flattenColorPalette","colors","color","values","number","hex","createPlugin","plugin","config","pluginFunction","configFunction","optionsFunction","options","_createPlugin","_interop_require_default","require$$0","obj","REM_TO_PX","matchUtilities","theme","colorPalette","borderWidths","numericWidths","value","key","borderWidth","widthKey","widthValue","colorValue"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}
|