@spark-ui/tailwind-plugins 2.3.6 → 2.3.8

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 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.8](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.3.7...@spark-ui/tailwind-plugins@2.3.8) (2023-03-31)
7
+
8
+ **Note:** Version bump only for package @spark-ui/tailwind-plugins
9
+
10
+ ## [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)
11
+
12
+ **Note:** Version bump only for package @spark-ui/tailwind-plugins
13
+
6
14
  ## [2.3.6](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.3.5...@spark-ui/tailwind-plugins@2.3.6) (2023-03-30)
7
15
 
8
16
  **Note:** Version bump only for package @spark-ui/tailwind-plugins
@@ -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
- <StoryHeading label="Installation" as="h2" />
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
- <StoryHeading label="Usage" as="h2" />
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
- <StoryHeading label="@keyframes" as="h3" />
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
- <StoryHeading label="Configuration" as="h2" />
48
+ ## Configuration
50
49
 
51
50
  You can customize the **CSS class prefix** using the `prefixVariant` option.
52
51
 
package/index.doc.mdx CHANGED
@@ -1,5 +1,4 @@
1
1
  import { Meta } from '@storybook/blocks'
2
- import { StoryHeading } from '@docs/helpers/StoryHeading'
3
2
 
4
3
  <Meta title="utils/Tailwind plugins" />
5
4
 
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@spark-ui/tailwind-plugins",
3
- "version": "2.3.6",
3
+ "version": "2.3.8",
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.0",
10
+ "@spark-ui/theme-utils": "^2.12.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": "bf4bdfac98c8d00af127495d3468721b8509cf30"
21
+ "gitHead": "92768ee141d0617f99ff07870b74fe7a4b33ccfb"
22
22
  }
@@ -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
- <StoryHeading label="Installation" as="h2" />
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
- <StoryHeading label="Usage" as="h2" />
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
- <StoryHeading label="Example" as="h2" />
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
- <StoryHeading label="Configuration" as="h2" />
54
+ ## Configuration
56
55
 
57
56
  You can customize the **base html font size** using the `htmlFontSize` option.
58
57
 
@@ -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
- <StoryHeading label="Usage" as="h2" />
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
- <StoryHeading label="Configuration" as="h2" />
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
- <StoryHeading label="Usage" as="h2" />
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="bg-primary text-primary...">...</div>
47
+ <div className="text-primary... bg-primary">...</div>
49
48
  ```
50
49
 
51
- <StoryHeading label="Configuration" as="h2" />
50
+ ## Configuration
52
51
 
53
52
  This plugin can be customized by providing a configuration object with two fields, `themes` and `htmlFontSize`.
54
53