@spark-ui/tailwind-plugins 2.3.7 → 2.3.9
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/CHANGELOG.md +8 -0
- package/animations/index.doc.mdx +4 -5
- package/index.doc.mdx +0 -1
- package/package.json +3 -3
- package/sizings/index.doc.mdx +4 -5
- package/spark-config.doc.mdx +2 -3
- package/spark-theme/index.doc.mdx +3 -4
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,14 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [2.3.9](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.3.8...@spark-ui/tailwind-plugins@2.3.9) (2023-04-06)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @spark-ui/tailwind-plugins
|
9
|
+
|
10
|
+
## [2.3.8](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.3.7...@spark-ui/tailwind-plugins@2.3.8) (2023-03-31)
|
11
|
+
|
12
|
+
**Note:** Version bump only for package @spark-ui/tailwind-plugins
|
13
|
+
|
6
14
|
## [2.3.7](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.3.6...@spark-ui/tailwind-plugins@2.3.7) (2023-03-31)
|
7
15
|
|
8
16
|
**Note:** Version bump only for package @spark-ui/tailwind-plugins
|
package/animations/index.doc.mdx
CHANGED
@@ -1,11 +1,10 @@
|
|
1
1
|
import { Meta } from '@storybook/blocks'
|
2
|
-
import { StoryHeading } from '@docs/helpers/StoryHeading'
|
3
2
|
|
4
3
|
<Meta title="utils/Tailwind plugins/animations" />
|
5
4
|
|
6
5
|
# Tailwind animation plugin
|
7
6
|
|
8
|
-
|
7
|
+
## Installation
|
9
8
|
|
10
9
|
To use our Tailwind animation plugin, simply install the `@spark-ui/tailwind-plugins` package and add the animation plugin to your `tailwind.config.js` file
|
11
10
|
|
@@ -25,7 +24,7 @@ module.exports = {
|
|
25
24
|
|
26
25
|
```
|
27
26
|
|
28
|
-
|
27
|
+
## Usage
|
29
28
|
|
30
29
|
This plugin provides the following **animation-related** declaration properties that are missing by default in **Tailwind**:
|
31
30
|
|
@@ -37,7 +36,7 @@ This plugin provides the following **animation-related** declaration properties
|
|
37
36
|
- **animation-play-running**: `sp-anime-play-{value}` (where `value` can be `running`, or `paused`)
|
38
37
|
- **animation-timing-function**: `sp-anime-easing-{value}` (where `value` can be, `linear`, `in`, `out`, `in-out`, `in-back`, `out-back`, `in-out-back` or an arbitrary value like `sp-anime-easing-[cubic-bezier(0.95,0.05,0.795,0.035)]`)
|
39
38
|
|
40
|
-
|
39
|
+
### @keyframes
|
41
40
|
|
42
41
|
This plugin also includes four animation keyframes:
|
43
42
|
|
@@ -46,7 +45,7 @@ This plugin also includes four animation keyframes:
|
|
46
45
|
- **animate-slide-bottom**: `animate-slide-bottom`
|
47
46
|
- **animate-slide-left**: `animate-slide-left`
|
48
47
|
|
49
|
-
|
48
|
+
## Configuration
|
50
49
|
|
51
50
|
You can customize the **CSS class prefix** using the `prefixVariant` option.
|
52
51
|
|
package/index.doc.mdx
CHANGED
package/package.json
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
{
|
2
2
|
"name": "@spark-ui/tailwind-plugins",
|
3
|
-
"version": "2.3.
|
3
|
+
"version": "2.3.9",
|
4
4
|
"description": "Spark Tailwind plugins",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
7
7
|
},
|
8
8
|
"main": "index.js",
|
9
9
|
"dependencies": {
|
10
|
-
"@spark-ui/theme-utils": "^2.12.
|
10
|
+
"@spark-ui/theme-utils": "^2.12.3",
|
11
11
|
"tailwindcss-radix": "2.8.0"
|
12
12
|
},
|
13
13
|
"peerDependencies": {
|
@@ -18,5 +18,5 @@
|
|
18
18
|
"url": "git@github.com:adevinta/spark.git",
|
19
19
|
"directory": "packages/utils/tailwind-plugins"
|
20
20
|
},
|
21
|
-
"gitHead": "
|
21
|
+
"gitHead": "30b19049cc856f3f9c63a73f2a9b2328f5dbba0d"
|
22
22
|
}
|
package/sizings/index.doc.mdx
CHANGED
@@ -1,11 +1,10 @@
|
|
1
1
|
import { Meta } from '@storybook/blocks'
|
2
|
-
import { StoryHeading } from '@docs/helpers/StoryHeading'
|
3
2
|
|
4
3
|
<Meta title="utils/Tailwind plugins/sizings" />
|
5
4
|
|
6
5
|
# Tailwind sizing plugin
|
7
6
|
|
8
|
-
|
7
|
+
## Installation
|
9
8
|
|
10
9
|
To use our Tailwind sizing plugin, simply install the `@spark-ui/tailwind-plugins` package and add the animation plugin to your `tailwind.config.js` file
|
11
10
|
|
@@ -26,7 +25,7 @@ module.exports = {
|
|
26
25
|
|
27
26
|
```
|
28
27
|
|
29
|
-
|
28
|
+
## Usage
|
30
29
|
|
31
30
|
This plugin predefines a sizing range with the following pixel values:
|
32
31
|
|
@@ -42,7 +41,7 @@ These values are converted into rem units based on the specified **HTML font siz
|
|
42
41
|
|
43
42
|
The plugin generates CSS variables for each size value, which can then be used for `width`, `height`, `max-width`, `max-height`, and `translate` properties.
|
44
43
|
|
45
|
-
|
44
|
+
## Example
|
46
45
|
|
47
46
|
To set the `width` of an element using the sizing plugin, use the `w-sz-{size}` class, where`{size}` is the desired pixel value from the predefined range:
|
48
47
|
|
@@ -52,7 +51,7 @@ To set the `width` of an element using the sizing plugin, use the `w-sz-{size}`
|
|
52
51
|
|
53
52
|
This will set the width of the element to **10px** (0.625rem, if `htmlFontSize` is 16) using the custom sizing scale provided by the plugin.
|
54
53
|
|
55
|
-
|
54
|
+
## Configuration
|
56
55
|
|
57
56
|
You can customize the **base html font size** using the `htmlFontSize` option.
|
58
57
|
|
package/spark-config.doc.mdx
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
import { Meta } from '@storybook/blocks'
|
2
|
-
import { StoryHeading } from '@docs/helpers/StoryHeading'
|
3
2
|
import { Callout } from '@docs/helpers/Callout'
|
4
3
|
|
5
4
|
<Meta title="utils/Tailwind plugins/spark config" />
|
@@ -35,7 +34,7 @@ module.exports = {
|
|
35
34
|
|
36
35
|
```
|
37
36
|
|
38
|
-
|
37
|
+
## Usage
|
39
38
|
|
40
39
|
The plugin streamlines the setup process by wrapping the call to all our other plugins (plus some external ones) with the appropriate options applied.
|
41
40
|
|
@@ -86,7 +85,7 @@ module.exports = {
|
|
86
85
|
|
87
86
|
For more details about our other plugins, please refer to the [**Tailwind plugins documentation**](?path=/docs/utils-tailwind-plugins--docs).
|
88
87
|
|
89
|
-
|
88
|
+
## Configuration
|
90
89
|
|
91
90
|
This plugin can be customized by providing a configuration object with two fields, `themes` and `htmlFontSize`.
|
92
91
|
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import { Meta } from '@storybook/blocks'
|
2
|
-
import { StoryHeading } from '@docs/helpers/StoryHeading'
|
3
2
|
import { Callout } from '@docs/helpers/Callout'
|
4
3
|
|
5
4
|
<Meta title="utils/Tailwind plugins/spark theme" />
|
@@ -34,7 +33,7 @@ module.exports = {
|
|
34
33
|
|
35
34
|
```
|
36
35
|
|
37
|
-
|
36
|
+
## Usage
|
38
37
|
|
39
38
|
The plugin performs two main tasks:
|
40
39
|
|
@@ -45,10 +44,10 @@ The plugin performs two main tasks:
|
|
45
44
|
Once the plugin is configured, all Spark custom classes become available for use.
|
46
45
|
|
47
46
|
```tsx
|
48
|
-
<div className="
|
47
|
+
<div className="text-primary... bg-primary">...</div>
|
49
48
|
```
|
50
49
|
|
51
|
-
|
50
|
+
## Configuration
|
52
51
|
|
53
52
|
This plugin can be customized by providing a configuration object with two fields, `themes` and `htmlFontSize`.
|
54
53
|
|