@spark-ui/tailwind-plugins 2.8.0 → 2.9.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.1](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.9.0...@spark-ui/tailwind-plugins@2.9.1) (2023-04-26)
+
+**Note:** Version bump only for package @spark-ui/tailwind-plugins
+
+# [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

package/animations/index.doc.mdx

@@ -33,7 +33,7 @@ This plugin provides the following **animation-related** declaration properties
 - **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 `sp-iteration-[12]`)
+- **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)]`)
 

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(
   /**
@@ -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,13 +1,13 @@
 {
   "name": "@spark-ui/tailwind-plugins",
-  "version": "2.8.0",
+  "version": "2.9.1",
   "description": "Spark Tailwind plugins",
   "publishConfig": {
     "access": "public"
   },
   "main": "index.js",
   "dependencies": {
-    "@spark-ui/theme-utils": "2",
+    "@spark-ui/theme-utils": "^2.14.0",
     "tailwindcss-radix": "^2.8.0"
   },
   "peerDependencies": {
@@ -18,5 +18,5 @@
     "url": "git@github.com:adevinta/spark.git",
     "directory": "packages/utils/tailwind-plugins"
   },
-  "gitHead": "b3e43a227fc42724538a33eaca1d91d349b531f3"
+  "gitHead": "3153e420fdd5018852408e8387571a4b301c78df"
 }

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 }