@spark-ui/tailwind-plugins 8.1.8 → 9.0.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.0.0](https://github.com/adevinta/spark/compare/v8.1.8...v9.0.0) (2025-02-06)
+
+**Note:** Version bump only for package @spark-ui/tailwind-plugins
+
 ## [8.1.8](https://github.com/adevinta/spark/compare/v8.1.7...v8.1.8) (2025-01-28)
 
 **Note:** Version bump only for package @spark-ui/tailwind-plugins

package/index.js

@@ -4,8 +4,6 @@ const sizings = require('./sizings')
 const utilities = require('./utilities')
 const variants = require('./variants')
 const sparkTheme = require('./spark-theme')
-const tailwindConfigViewerUtils = require('./tailwind-config-viewer')
-const tailwindConfigViewerMisc = require('./tailwind-config-viewer/misc')
 const tailwindcssRadix = require('tailwindcss-radix')
 
 /**
@@ -38,6 +36,4 @@ module.exports = {
   variants,
   sparkTheme,
   sparkConfig,
-  tailwindConfigViewerUtils,
-  tailwindConfigViewerMisc,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tailwind-plugins",
-  "version": "8.1.8",
+  "version": "9.0.0",
   "description": "Spark Tailwind plugins",
   "publishConfig": {
     "access": "public"
@@ -15,7 +15,7 @@
   ],
   "main": "index.js",
   "dependencies": {
-    "@spark-ui/theme-utils": "^8.1.8",
+    "@spark-ui/theme-utils": "^9.0.0",
     "tailwindcss-radix": "2.9.0"
   },
   "peerDependencies": {
@@ -35,5 +35,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "e29d6cfd8145f8ce93cc94062c33ce62a07476e0"
+  "gitHead": "8fe6ef5b52e2440947f6278e00d00c89410a9ca8"
 }

package/animations/index.doc.mdx

@@ -1,73 +0,0 @@
-import { Meta } from '@storybook/blocks'
-import { Callout } from '@docs/helpers/Callout'
-
-<Meta title="utils/Tailwind plugins/animations" />
-
-# Tailwind animation plugin
-
-## Installation
-
-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
-
-```bash
-$ npm i @spark-ui/tailwind-plugins
-```
-
-```js
-// tailwind.config.js
-
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-module.exports = {
-  ...,
-  plugins: [sparkPlugins.animations()],
-}
-
-```
-
-## Usage
-
-This plugin provides the following **animation-related** declaration properties that are missing by default in **Tailwind**:
-
-- **animation-fill-mode**: `spark-anime-fill-{value}` (where `value` can be `forwards`, `backwards`, or `none`)
-- **animation-duration**: `spark-anime-duration-{value}` (where `value` can be any keys of `theme.transitionDuration` or an arbitrary value like `spark-anime-duration-[458ms]`)
-- **animation-delay**: `spark-anime-delay-{value}` (where `value` can be any keys of `theme.transitionDuration` or an arbitrary value like `spark-anime-delay-[458ms]`)
-- **animation-direction**: `spark-anime-direction-{value}` (where `value` can be `normal`, `reverse`, `alternate`, `alternate-reverse`, `revert`, or `revert-layer`)
-- **animation-iteration-count**: `spark-anime-iteration-{value}` (where `value` can be `1`, `2`, `3`, `infinite`, or an arbitrary value like `spark-anime-iteration-[12]`)
-- **animation-play-running**: `spark-anime-play-{value}` (where `value` can be `running`, or `paused`)
-- **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)]`)
-
-### @keyframes
-
-This plugin also includes four animation keyframes:
-
-- **animate-slide-top**: `animate-slide-top`
-- **animate-slide-right**: `animate-slide-right`
-- **animate-slide-bottom**: `animate-slide-bottom`
-- **animate-slide-left**: `animate-slide-left`
-
-## Configuration
-
-<Callout kind="warning">
-  If you change the prefix, you may encounter issues when using Spark components since we use the
-  default prefix "spark-anime" in our codebase. Changing the prefix would mean that our class names
-  might not be generated in your application. Keep this in mind while making changes.
-</Callout>
-
-You can customize the **CSS class prefix** using the `prefixVariant` option.
-
-By default, the prefix will be `spark-anime` (e.g. `spark-anime-fill-forwards`), but you can change it like so:
-
-```js
-// tailwind.config.js
-
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-module.exports = {
-  ...,
-  plugins: [sparkPlugins.animations({ prefixVariant: 'bar' })],
-}
-
-```
-
-This will change the prefix to `bar` (e.g. `bar-fill-forwards`).

package/index.doc.mdx

@@ -1,12 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="utils/Tailwind plugins/Index" />
-
-# Tailwind plugins
-
-Below there is a list of our Tailwind plugins:
-
-- [spark config](?path=/docs/utils-tailwind-plugins-spark-config--docs)
-- [spark theme](?path=/docs/utils-tailwind-plugins-spark-theme--docs)
-- [animations](?path=/docs/utils-tailwind-plugins-animations--docs)
-- [sizings](?path=/docs/utils-tailwind-plugins-sizings--docs)

package/sizings/index.doc.mdx

@@ -1,72 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="utils/Tailwind plugins/sizings" />
-
-# Tailwind sizing plugin
-
-## Installation
-
-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
-
-```bash
-$ npm i @spark-ui/tailwind-plugins
-```
-
-```js
-// tailwind.config.js
-
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-module.exports = {
-  ...,
-  plugins: [sparkPlugins.sizings({ htmlFontSize: 16 // The base font size for your application (default: 16)
-  })],
-}
-
-```
-
-## Usage
-
-This plugin predefines a sizing range with the following pixel values:
-
-```ts
-const sizingRange = [
-  0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 56, 64, 80, 96, 112, 128, 144,
-  160, 176, 192, 208, 224, 240, 256, 288, 320, 384, 400, 416, 432, 448, 464, 480, 512, 544, 576,
-  608, 640, 672, 704, 736, 768, 800, 832, 864,
-]
-```
-
-These values are converted into rem units based on the specified **HTML font size** (see [configuration](#configuration)).
-
-The plugin generates CSS variables for each size value, which can then be used for `width`, `height`, `max-width`, `max-height`, and `translate` properties.
-
-## Example
-
-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:
-
-```tsx
-<div className="w-sz-10">...</div>
-```
-
-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.
-
-## Configuration
-
-You can customize the **base html font size** using the `htmlFontSize` option.
-
-By default, the base will be `16`, but you can change it like so:
-
-```js
-// tailwind.config.js
-
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-module.exports = {
-  ...,
-  plugins: [sparkPlugins.sizings({ htmlFontSize: 10 })],
-}
-
-```
-
-This will ensure that the `rem`-based values are accurately calculated according to your application's HTML font size.

package/spark-config.doc.mdx

@@ -1,135 +0,0 @@
-import { Meta } from '@storybook/blocks'
-import { Callout } from '@docs/helpers/Callout'
-
-<Meta title="utils/Tailwind plugins/spark config" />
-
-# Tailwind spark config plugin
-
-## Installation
-
-To use our Tailwind spark theme plugin, simply install the `@spark-ui/tailwind-plugins` package and add the spark theme plugin to your `tailwind.config.js` file
-
-```bash
-$ npm i @spark-ui/tailwind-plugins
-```
-
-```js
-// tailwind.config.js
-
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-module.exports = {
-  ...,
-  plugins: [
-    ...sparkPlugins.sparkConfig({
-      htmlFontSize: 16 // The base font size for your application (default: 16),
-      themes: {
-        default: yourDefaultTheme,
-        dark: yourDarkTheme,
-        foo: someOtherTheme,
-        ...rest
-      } //
-  })],
-}
-
-```
-
-## Usage
-
-The plugin streamlines the setup process by wrapping the call to all our other plugins (plus some external ones) with the appropriate options applied.
-
-This approach eliminates the need for manually calling each of our plugins. Here's a comparison:
-
-**without the plugin:**
-
-```js
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./packages/**/*.{js,ts,jsx,tsx}', './documentation/**/*.{js,ts,jsx,tsx,mdx}'],
-  plugins: [
-    sparkPlugins.sparkTheme({
-      htmlFontSize: 10,
-      themes: {
-        default: themeUtils.defaultTheme,
-        dark: themeUtils.defaultThemeDark,
-      },
-    }),
-    sparkPlugins.sizings({ htmlFontSize: 10 }),
-    sparkPlugins.animations(),
-    ...
-  ],
-}
-```
-
-**with the plugin:**
-
-```js
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./packages/**/*.{js,ts,jsx,tsx}', './documentation/**/*.{js,ts,jsx,tsx,mdx}'],
-  plugins: [
-    ...sparkPlugins.sparkConfig({
-      htmlFontSize: 10,
-      themes: {
-        default: themeUtils.defaultTheme,
-        dark: themeUtils.defaultThemeDark,
-      },
-    }),
-  ],
-}
-```
-
-For more details about our other plugins, please refer to the [**Tailwind plugins documentation**](?path=/docs/utils-tailwind-plugins--docs).
-
-## Configuration
-
-This plugin can be customized by providing a configuration object with two fields, `themes` and `htmlFontSize`.
-
-**themes**:
-
-An object containing your themes. Each key in the object will be extracted to a `[data-theme]` attribute, and the values will be converted to CSS custom properties inside the `css` file generated by Tailwing. **Note that this object requires a key with a value of default**, which specifies the default theme for your project.
-
-For example, if your `themes` object looks like this:
-
-```js
-
-sparkPlugins.sparkConfig({
-  themes: {
-    default: yourDefaultTheme,
-    alternative: someAlternativeTheme,
-  },
-}),
-```
-
-Tailwind will generate the following CSS:
-
-```css
-:root {
-  /* ...tokens from yourDefaultTheme */
-}
-
-[data-theme='alternative'] {
-  /* ...tokens from someAlternativeTheme */
-}
-```
-
-You can populate the `themes` object with as many themes as desired, with the only requirement being that they conform to our `Theme` interface. The Theme interface can be accessed through the [**@spark-ui/theme-utils**](?path=/docs/utils-theme--docs#theme) package.
-
-**htmlFontSize (optional)**:
-
-Spark uses a base font size of **16 pixels** as a standard value for calculating the sizes of all other font-related properties defined in the theme. For example, our `spacing.lg` value is defined as **1rem**, which is equal to 16 pixels (based on the default base font size of 16 pixels).
-
-However, if your application uses a different base font size, such as **10 pixels** for example, this can cause issues with the sizing of elements in the application. To account for this, you can set the `htmlFontSize` to the appropriate value for your application's base font size. This will adjust the `rem` based values in Spark to be relative to the new base font size.
-
-This will ensure that the `rem`-based values are accurately calculated according to your application's HTML font size.
-
-<Callout>
-To better understand what happens when you adjust `htmlFontSize`, it's useful to know that we use CSS custom properties to define the values of our design tokens, such as `spacing.lg`.
-
-By default, the value for this token is expressed as `--spacing-lg: 1rem;`. However, when you define a `htmlFontSize` of 10, for example, this value will be updated to `--spacing-lg: 1.6rem;`
-
-</Callout>

package/spark-theme/index.doc.mdx

@@ -1,97 +0,0 @@
-import { Meta } from '@storybook/blocks'
-import { Callout } from '@docs/helpers/Callout'
-
-<Meta title="utils/Tailwind plugins/spark theme" />
-
-# Tailwind spark theme plugin
-
-## Installation
-
-To use our Tailwind spark theme plugin, simply install the `@spark-ui/tailwind-plugins` package and add the spark theme plugin to your `tailwind.config.js` file
-
-```bash
-$ npm i @spark-ui/tailwind-plugins
-```
-
-```js
-// tailwind.config.js
-
-const sparkPlugins = require('@spark-ui/tailwind-plugins')
-
-module.exports = {
-  ...,
-  plugins: [sparkPlugins.sparkTheme({
-    htmlFontSize: 16 // The base font size for your application (default: 16),
-    themes: {
-      default: yourDefaultTheme,
-      dark: yourDarkTheme,
-      foo: someOtherTheme,
-      ...rest
-    } //
-  })],
-}
-
-```
-
-## Usage
-
-The plugin performs two main tasks:
-
-- first, it converts every value within the objects inside the themes object into **CSS variables**, which is helpful for managing **multiple themes**.
-
-- Second, it provides Tailwind with an internal mapping to retrieve these CSS variables This is necessary because, by default, Tailwind does not use CSS variables, but rather direct values.
-
-Once the plugin is configured, all Spark custom classes become available for use.
-
-```tsx
-<div className="text-on-main... bg-main">...</div>
-```
-
-## Configuration
-
-This plugin can be customized by providing a configuration object with two fields, `themes` and `htmlFontSize`.
-
-**themes**:
-
-An object containing your themes. Each key in the object will be extracted to a `[data-theme]` attribute, and the values will be converted to CSS custom properties inside the `css` file generated by Tailwing. **Note that this object requires a key with a value of default**, which specifies the default theme for your project.
-
-For example, if your `themes` object looks like this:
-
-```js
-
-sparkPlugins.sparkTheme({
-  themes: {
-    default: yourDefaultTheme,
-    alternative: someAlternativeTheme,
-  },
-}),
-```
-
-Tailwind will generate the following CSS:
-
-```css
-:root {
-  /* ...tokens from yourDefaultTheme */
-}
-
-[data-theme='alternative'] {
-  /* ...tokens from someAlternativeTheme */
-}
-```
-
-You can populate the `themes` object with as many themes as desired, with the only requirement being that they conform to our `Theme` interface. The Theme interface can be accessed through the [**@spark-ui/theme-utils**](?path=/docs/utils-theme--docs#theme) package.
-
-**htmlFontSize (optional)**:
-
-Spark uses a base font size of **16 pixels** as a standard value for calculating the sizes of all other font-related properties defined in the theme. For example, our `spacing.lg` value is defined as **1rem**, which is equal to 16 pixels (based on the default base font size of 16 pixels).
-
-However, if your application uses a different base font size, such as **10 pixels** for example, this can cause issues with the sizing of elements in the application. To account for this, you can set the `htmlFontSize` to the appropriate value for your application's base font size. This will adjust the `rem` based values in Spark to be relative to the new base font size.
-
-This will ensure that the `rem`-based values are accurately calculated according to your application's HTML font size.
-
-<Callout>
-To better understand what happens when you adjust `htmlFontSize`, it's useful to know that we use CSS custom properties to define the values of our design tokens, such as `spacing.lg`.
-
-By default, the value for this token is expressed as `--spacing-lg: 1rem;`. However, when you define a `htmlFontSize` of 10, for example, this value will be updated to `--spacing-lg: 1.6rem;`
-
-</Callout>