@spark-ui/tailwind-plugins 2.7.0 → 2.8.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/CHANGELOG.md +10 -0
- package/animations/index.doc.mdx +15 -8
- package/animations/index.js +2 -2
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
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.8.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.7.1...@spark-ui/tailwind-plugins@2.8.0) (2023-04-21)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **tailwind-plugins:** update default prefix in tw animation plugin ([2c147cb](https://github.com/adevinta/spark/commit/2c147cb0342ea801d22f1a69c9cea4ffac74b46f))
|
|
11
|
+
|
|
12
|
+
## [2.7.1](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.7.0...@spark-ui/tailwind-plugins@2.7.1) (2023-04-19)
|
|
13
|
+
|
|
14
|
+
**Note:** Version bump only for package @spark-ui/tailwind-plugins
|
|
15
|
+
|
|
6
16
|
# [2.7.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.6.0...@spark-ui/tailwind-plugins@2.7.0) (2023-04-19)
|
|
7
17
|
|
|
8
18
|
### Features
|
package/animations/index.doc.mdx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Meta } from '@storybook/blocks'
|
|
2
|
+
import { Callout } from '@docs/helpers/Callout'
|
|
2
3
|
|
|
3
4
|
<Meta title="utils/Tailwind plugins/animations" />
|
|
4
5
|
|
|
@@ -28,13 +29,13 @@ module.exports = {
|
|
|
28
29
|
|
|
29
30
|
This plugin provides the following **animation-related** declaration properties that are missing by default in **Tailwind**:
|
|
30
31
|
|
|
31
|
-
- **animation-fill-mode**: `
|
|
32
|
-
- **animation-duration**: `
|
|
33
|
-
- **animation-delay**: `
|
|
34
|
-
- **animation-direction**: `
|
|
35
|
-
- **animation-iteration-count**: `
|
|
36
|
-
- **animation-play-running**: `
|
|
37
|
-
- **animation-timing-function**: `
|
|
32
|
+
- **animation-fill-mode**: `spark-anime-fill-{value}` (where `value` can be `forwards`, `backwards`, or `none`)
|
|
33
|
+
- **animation-duration**: `spark-anime-duration-{value}` (where `value` can be any keys of `theme.transitionDuration` or an arbitrary value like `spark-anime-duration-[458ms]`)
|
|
34
|
+
- **animation-delay**: `spark-anime-delay-{value}` (where `value` can be any keys of `theme.transitionDuration` or an arbitrary value like `spark-anime-delay-[458ms]`)
|
|
35
|
+
- **animation-direction**: `spark-anime-direction-{value}` (where `value` can be `normal`, `reverse`, `alternate`, `alternate-reverse`, `revert`, or `revert-layer`)
|
|
36
|
+
- **animation-iteration-count**: `spark-anime-iteration-{value}` (where `value` can be `1`, `2`, `3`, `infinite`, or an arbitrary value like `sp-iteration-[12]`)
|
|
37
|
+
- **animation-play-running**: `spark-anime-play-{value}` (where `value` can be `running`, or `paused`)
|
|
38
|
+
- **animation-timing-function**: `spark-anime-easing-{value}` (where `value` can be, `linear`, `in`, `out`, `in-out`, `in-back`, `out-back`, `in-out-back` or an arbitrary value like `spark-anime-easing-[cubic-bezier(0.95,0.05,0.795,0.035)]`)
|
|
38
39
|
|
|
39
40
|
### @keyframes
|
|
40
41
|
|
|
@@ -47,9 +48,15 @@ This plugin also includes four animation keyframes:
|
|
|
47
48
|
|
|
48
49
|
## Configuration
|
|
49
50
|
|
|
51
|
+
<Callout kind="warning">
|
|
52
|
+
If you change the prefix, you may encounter issues when using Spark components since we use the
|
|
53
|
+
default prefix "spark-anime" in our codebase. Changing the prefix would mean that our class names
|
|
54
|
+
might not be generated in your application. Keep this in mind while making changes.
|
|
55
|
+
</Callout>
|
|
56
|
+
|
|
50
57
|
You can customize the **CSS class prefix** using the `prefixVariant` option.
|
|
51
58
|
|
|
52
|
-
By default, the prefix will be `anime
|
|
59
|
+
By default, the prefix will be `spark-anime` (e.g. `spark-anime-fill-forwards`), but you can change it like so:
|
|
53
60
|
|
|
54
61
|
```js
|
|
55
62
|
// tailwind.config.js
|
package/animations/index.js
CHANGED
|
@@ -38,14 +38,14 @@ module.exports = plugin.withOptions(
|
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
40
|
* @param {Object} options The options for the plugin.
|
|
41
|
-
* @param {string} [options.variantPrefix="
|
|
41
|
+
* @param {string} [options.variantPrefix="spark-anime"] The prefix to use for the animation variants.
|
|
42
42
|
* @returns {Function} The PostCSS plugin function.
|
|
43
43
|
*/
|
|
44
44
|
options =>
|
|
45
45
|
({ addUtilities, addVariant, matchUtilities, theme }) => {
|
|
46
46
|
const opts = options || {}
|
|
47
47
|
|
|
48
|
-
const { variantPrefix = '
|
|
48
|
+
const { variantPrefix = 'spark-anime' } = opts
|
|
49
49
|
|
|
50
50
|
matchUtilities(
|
|
51
51
|
{
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-ui/tailwind-plugins",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.0",
|
|
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": "
|
|
10
|
+
"@spark-ui/theme-utils": "2",
|
|
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": "b3e43a227fc42724538a33eaca1d91d349b531f3"
|
|
22
22
|
}
|