@spark-ui/tailwind-plugins 2.11.1 → 2.13.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.13.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.12.0...@spark-ui/tailwind-plugins@2.13.0) (2023-06-19)
+
+### Features
+
+- **tailwind-plugins:** spark plugin now offer retina screens tailwind classes ([0ff5027](https://github.com/adevinta/spark/commit/0ff502759cd734ab1a7b696ec5490853318c9df3))
+
+# [2.12.0](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.11.1...@spark-ui/tailwind-plugins@2.12.0) (2023-06-15)
+
+### Features
+
+- **tailwind-plugins:** handle motion tokens inside tw spark-theme plugin ([ffb5792](https://github.com/adevinta/spark/commit/ffb57926d273c3a7e74ad6b397afba2432710819))
+
 ## [2.11.1](https://github.com/adevinta/spark/compare/@spark-ui/tailwind-plugins@2.11.0...@spark-ui/tailwind-plugins@2.11.1) (2023-06-12)
 
 **Note:** Version bump only for package @spark-ui/tailwind-plugins

package/index.js

@@ -2,6 +2,7 @@
 const animations = require('./animations')
 const sizings = require('./sizings')
 const utilities = require('./utilities')
+const variants = require('./variants')
 const sparkTheme = require('./spark-theme')
 const tailwindConfigViewerMisc = require('./tailwind.config.viewer.misc')
 const tailwindcssRadix = require('tailwindcss-radix')
@@ -24,6 +25,7 @@ const sparkConfig = ({ htmlFontSize, themes }) => {
     sizings({ htmlFontSize }),
     animations(),
     utilities(),
+    variants(),
     tailwindcssRadix({ variantPrefix: 'spark' }),
   ]
 }
@@ -32,6 +34,7 @@ module.exports = {
   animations,
   sizings,
   utilities,
+  variants,
   sparkTheme,
   sparkConfig,
   tailwindConfigViewerMisc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/tailwind-plugins",
-  "version": "2.11.1",
+  "version": "2.13.0",
   "description": "Spark Tailwind plugins",
   "publishConfig": {
     "access": "public"
@@ -23,5 +23,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "842feaa1261f595643cd1b04ca552691891992c3"
+  "gitHead": "85732c1cddb7e2affbdd2df99be113cfd70d72af"
 }

package/spark-theme/constants.js

@@ -10,22 +10,58 @@ const unassignedColors = {
   transparent: 'transparent',
 }
 
-const transitionDurationLookup = {
+const transitionDelayDurationLookup = {
   0: '0ms',
   50: '50ms',
   100: '100ms',
+  150: '150ms',
   200: '200ms',
+  250: '250ms',
   300: '300ms',
+  350: '350ms',
   400: '400ms',
+  450: '450ms',
   500: '500ms',
   600: '600ms',
+  700: '700ms',
+  800: '800ms',
+  900: '900ms',
+  1000: '1000ms',
+  1500: '1500ms',
+  2000: '2000ms',
+  2500: '2500ms',
+}
+
+const transitionDurationLookup = {
+  DEFAULT: '250ms',
+  0: '0s',
+  50: '50ms',
+  100: '100ms',
+  150: '150ms',
+  200: '200ms',
+  250: '250ms',
+  300: '300ms',
+  350: '350ms',
+  400: '400ms',
+  450: '450ms',
+  500: '500ms',
+  550: '550ms',
+  600: '500ms',
+  700: '700ms',
   800: '800ms',
+  900: '900ms',
+  1000: '1000ms',
 }
 
 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)',
+  DEFAULT: 'cubic-bezier(0.2, 0, 0, 1)',
+  linear: 'cubic-bezier(0, 0, 1, 1)',
+  standard: 'cubic-bezier(0.2, 0, 0, 1)',
+  accelerate: 'cubic-bezier(0.3, 0, 0.8, 1.15)',
+  decelerate: 'cubic-bezier(0.05, 0.7, 0.1, 1)',
+  'standard-back': 'cubic-bezier(0.3, -0.05, 0.7, -0.5)',
+  'accelerate-back': 'cubic-bezier(0.45,1.45, 0.8, 1)',
+  'decelerate-back': 'cubic-bezier(0.42, 0, 0.58, 1)',
 }
 
 const DEFAULT_KEY = 'DEFAULT'
@@ -34,6 +70,7 @@ module.exports = {
   tailwindCategoryKeys,
   unassignedColors,
   transitionDurationLookup,
+  transitionDelayDurationLookup,
   transitionTimingFunctionLookup,
   DEFAULT_KEY,
 }

package/spark-theme/getCSSVariableReferences.js

@@ -3,6 +3,7 @@ const {
   DEFAULT_KEY,
   tailwindCategoryKeys,
   transitionDurationLookup,
+  transitionDelayDurationLookup,
   transitionTimingFunctionLookup,
   unassignedColors,
 } = require('./constants')
@@ -109,6 +110,7 @@ function getCSSVariableReferences(_theme) {
     ...themeCpy,
     colors: { ...themeCpy.colors, ...unassignedColors },
     transitionDuration: transitionDurationLookup,
+    transitionDelay: transitionDelayDurationLookup,
     extend: {
       transitionTimingFunction: transitionTimingFunctionLookup,
     },

package/variants/index.js

@@ -0,0 +1,6 @@
+/* eslint-disable-next-line @typescript-eslint/no-var-requires */
+const plugin = require('tailwindcss/plugin')
+
+module.exports = plugin.withOptions(options => ({ addVariant }) => {
+  addVariant('retina', '@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)')
+})