@spark-ui/tailwind-plugins 2.7.1 → 2.9.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.9.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.8.0...@spark-ui/tailwind-plugins@2.9.0) (2023-04-24)
+
+### Features
+
+- **tailwind-plugins:** update transition theme values to match figma ([92f37c2](https://github.com/adevinta/spark/commit/92f37c23e89d5b491a8feef9cf8764c0dc4c1b66)), closes [#642](https://github.com/adevinta/spark/issues/642)
+
+# [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)
+
+### Features
+
+- **tailwind-plugins:** update default prefix in tw animation plugin ([2c147cb](https://github.com/adevinta/spark/commit/2c147cb0342ea801d22f1a69c9cea4ffac74b46f))
+
 ## [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)
 
 **Note:** Version bump only for package @spark-ui/tailwind-plugins

package/animations/index.doc.mdx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/blocks'
+import { Callout } from '@docs/helpers/Callout'
 
 <Meta title="utils/Tailwind plugins/animations" />
 
@@ -28,13 +29,13 @@ module.exports = {
 
 This plugin provides the following **animation-related** declaration properties that are missing by default in **Tailwind**:
 
-- **animation-fill-mode**: `sp-anime-fill-{value}` (where `value` can be `forwards`, `backwards`, or `none`)
-- **animation-duration**: `sp-anime-duration-{value}` (where `value` can be any keys of `theme.transitionDuration` or an arbitrary value like `sp-anime-duration-[458ms]`)
-- **animation-delay**: `sp-anime-delay-{value}` (where `value` can be any keys of `theme.transitionDuration` or an arbitrary value like `sp-anime-delay-[458ms]`)
-- **animation-direction**: `sp-anime-direction-{value}` (where `value` can be `normal`, `reverse`, `alternate`, `alternate-reverse`, `revert`, or `revert-layer`)
-- **animation-iteration-count**: `sp-anime-iteration-{value}` (where `value` can be `1`, `2`, `3`, `infinite`, or an arbitrary value like `sp-iteration-[12]`)
-- **animation-play-running**: `sp-anime-play-{value}` (where `value` can be `running`, or `paused`)
-- **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)]`)
+- **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
 
@@ -47,9 +48,15 @@ This plugin also includes four animation keyframes:
 
 ## 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 `anime-sp` (e.g. `sp-anime-fill-forwards`), but you can change it like so:
+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

package/animations/index.js

@@ -16,19 +16,13 @@ const fillModes = ['none', 'forwards', 'backwards', 'both']
 const directions = ['normal', 'reverse', 'alternate', 'alternate-reverse']
 const playStates = ['running', 'paused']
 
-const easingLookup = {
-  'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)',
-  'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-  'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',
-}
+const commonValuesObj = arrToObj(commonValues)
 
-const durationLookup = {
-  1500: '1.5s',
-  2000: '2s',
-  3000: '3s',
-}
+function removeKeyFromObj(obj, key) {
+  const { [key]: _, ...rest } = obj
 
-const commonValuesObj = arrToObj(commonValues)
+  return rest
+}
 
 module.exports = plugin.withOptions(
   /**
@@ -38,14 +32,14 @@ module.exports = plugin.withOptions(
 
   /**
    * @param {Object} options The options for the plugin.
-   * @param {string} [options.variantPrefix="sp-anime"] The prefix to use for the animation variants.
+   * @param {string} [options.variantPrefix="spark-anime"] The prefix to use for the animation variants.
    * @returns {Function} The PostCSS plugin function.
    */
   options =>
     ({ addUtilities, addVariant, matchUtilities, theme }) => {
       const opts = options || {}
 
-      const { variantPrefix = 'sp-anime' } = opts
+      const { variantPrefix = 'spark-anime' } = opts
 
       matchUtilities(
         {
@@ -53,7 +47,12 @@ module.exports = plugin.withOptions(
             animationDuration: value,
           }),
         },
-        { values: { ...theme('transitionDuration'), ...durationLookup, ...commonValuesObj } }
+        {
+          values: {
+            ...removeKeyFromObj(theme('transitionDuration'), 'DEFAULT'),
+            ...commonValuesObj,
+          },
+        }
       )
 
       matchUtilities(
@@ -62,7 +61,12 @@ module.exports = plugin.withOptions(
             animationDelay: value,
           }),
         },
-        { values: { ...theme('transitionDuration'), ...durationLookup, ...commonValuesObj } }
+        {
+          values: {
+            ...removeKeyFromObj(theme('transitionDuration'), 'DEFAULT'),
+            ...commonValuesObj,
+          },
+        }
       )
 
       matchUtilities(
@@ -80,7 +84,12 @@ module.exports = plugin.withOptions(
             animationTimingFunction: value,
           }),
         },
-        { values: { ...theme('transitionTimingFunction'), ...easingLookup, ...commonValuesObj } }
+        {
+          values: {
+            ...removeKeyFromObj(theme('transitionTimingFunction'), 'DEFAULT'),
+            ...commonValuesObj,
+          },
+        }
       )
 
       fillModes.forEach(mode => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tailwind-plugins",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "description": "Spark Tailwind plugins",
   "publishConfig": {
     "access": "public"
@@ -18,5 +18,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/tailwind-plugins"
   },
-  "gitHead": "6ac8a30fcc1b265923a881263c6de954202a8d24"
+  "gitHead": "59d89564ec85b0af42fa8619f5d3025c4994dac4"
 }

package/spark-theme/constants.js

@@ -10,6 +10,30 @@ const unassignedColors = {
   transparent: 'transparent',
 }
 
+const transitionDurationLookup = {
+  0: '0ms',
+  50: '50ms',
+  100: '100ms',
+  200: '200ms',
+  300: '300ms',
+  400: '400ms',
+  500: '500ms',
+  600: '600ms',
+  800: '800ms',
+}
+
+const transitionTimingFunctionLookup = {
+  'in-back': 'cubic-bezier(0.3, -0.05, 0.7, -0.5)',
+  'out-back': 'cubic-bezier(0.45, 1.45, 0.8, 1)',
+  'in-out-back': 'cubic-bezier(0.42, 0, 0.58, 1)',
+}
+
 const DEFAULT_KEY = 'DEFAULT'
 
-module.exports = { tailwindCategoryKeys, unassignedColors, DEFAULT_KEY }
+module.exports = {
+  tailwindCategoryKeys,
+  unassignedColors,
+  transitionDurationLookup,
+  transitionTimingFunctionLookup,
+  DEFAULT_KEY,
+}

package/spark-theme/getCSSVariableReferences.js

@@ -1,5 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { DEFAULT_KEY, tailwindCategoryKeys, unassignedColors } = require('./constants')
+const {
+  DEFAULT_KEY,
+  tailwindCategoryKeys,
+  transitionDurationLookup,
+  transitionTimingFunctionLookup,
+  unassignedColors,
+} = require('./constants')
 const {
   doubleHyphensRegex,
   hasNumber,
@@ -105,7 +111,14 @@ function getCSSVariableReferences(_theme) {
 
   traverse(themeCpy)
 
-  return { ...themeCpy, colors: { ...themeCpy.colors, ...unassignedColors } }
+  return {
+    ...themeCpy,
+    colors: { ...themeCpy.colors, ...unassignedColors },
+    transitionDuration: transitionDurationLookup,
+    extend: {
+      transitionTimingFunction: transitionTimingFunctionLookup,
+    },
+  }
 }
 
 module.exports = { getCSSVariableReferences }