@salla.sa/twilight-tailwind-theme 2.14.516 → 2.14.518
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/index.js +137 -0
- package/package.json +5 -2
package/index.js
CHANGED
|
@@ -1,5 +1,92 @@
|
|
|
1
1
|
const plugin = require('tailwindcss/plugin')
|
|
2
2
|
|
|
3
|
+
// SAL-73 Phase 3: the new animation system (keyframes, animation utilities and
|
|
4
|
+
// the prefers-reduced-motion overrides) is dormant on master and only registers
|
|
5
|
+
// when TWILIGHT_THEME_V2=true at build time. With the flag off the emitted CSS
|
|
6
|
+
// is identical to the previous release.
|
|
7
|
+
const enableThemeV2 = process.env.TWILIGHT_THEME_V2 === 'true'
|
|
8
|
+
|
|
9
|
+
const v2Keyframes = enableThemeV2 ? {
|
|
10
|
+
fadeInUp: {
|
|
11
|
+
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
12
|
+
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
13
|
+
},
|
|
14
|
+
fadeIn: {
|
|
15
|
+
'0%': { opacity: '0' },
|
|
16
|
+
'100%': { opacity: '1' },
|
|
17
|
+
},
|
|
18
|
+
fadeOut: {
|
|
19
|
+
'0%': { opacity: '1' },
|
|
20
|
+
'100%': { opacity: '0' },
|
|
21
|
+
},
|
|
22
|
+
translateLeft: {
|
|
23
|
+
'0%': { transform: 'translateX(110%)', opacity: '0' },
|
|
24
|
+
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
25
|
+
},
|
|
26
|
+
translateRight: {
|
|
27
|
+
'0%': { transform: 'translateX(-110%)', opacity: '0' },
|
|
28
|
+
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
29
|
+
},
|
|
30
|
+
translateLeftOut: {
|
|
31
|
+
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
32
|
+
'100%': { transform: 'translateX(110%)', opacity: '0' },
|
|
33
|
+
},
|
|
34
|
+
translateRightOut: {
|
|
35
|
+
'0%': { transform: 'translateX(0)', opacity: '1' },
|
|
36
|
+
'100%': { transform: 'translateX(-110%)', opacity: '0' },
|
|
37
|
+
},
|
|
38
|
+
shrinkFly: {
|
|
39
|
+
'0%': { transform: 'scale(1)', opacity: '1' },
|
|
40
|
+
'50%': { transform: 'scale(0.2)', opacity: '1' },
|
|
41
|
+
'100%': { transform: 'scale(0)', opacity: '0' },
|
|
42
|
+
},
|
|
43
|
+
expandHeight: {
|
|
44
|
+
'0%': { height: '0', opacity: '0' },
|
|
45
|
+
'100%': { opacity: '1' },
|
|
46
|
+
},
|
|
47
|
+
collapseHeight: {
|
|
48
|
+
'0%': { opacity: '1' },
|
|
49
|
+
'100%': { height: '0', opacity: '0' },
|
|
50
|
+
},
|
|
51
|
+
slideDownShare: {
|
|
52
|
+
'0%': { transform: 'translateY(-30px) scaleY(0)', opacity: '0' },
|
|
53
|
+
'100%': { transform: 'translateY(0) scaleY(1)', opacity: '1' },
|
|
54
|
+
},
|
|
55
|
+
rubberBand: {
|
|
56
|
+
'0%': { transform: 'scale(1)' },
|
|
57
|
+
'30%': { transform: 'scale(1.25, 0.75)' },
|
|
58
|
+
'40%': { transform: 'scale(0.75, 1.25)' },
|
|
59
|
+
'50%': { transform: 'scale(1.15, 0.85)' },
|
|
60
|
+
'65%': { transform: 'scale(0.95, 1.05)' },
|
|
61
|
+
'75%': { transform: 'scale(1.05, 0.95)' },
|
|
62
|
+
'100%': { transform: 'scale(1)' },
|
|
63
|
+
},
|
|
64
|
+
} : {}
|
|
65
|
+
|
|
66
|
+
const v2Animations = enableThemeV2 ? {
|
|
67
|
+
'fade-in-up': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
68
|
+
'fade-in': 'fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
69
|
+
'fade-out': 'fadeOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
70
|
+
'translate-left': 'translateLeft 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
71
|
+
'translate-right': 'translateRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
72
|
+
'translate-left-out': 'translateLeftOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
73
|
+
'translate-right-out': 'translateRightOut 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
74
|
+
'shrink-fly': 'shrinkFly 1.7s ease-out forwards',
|
|
75
|
+
'expand-height': 'expandHeight 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards',
|
|
76
|
+
'collapse-height': 'collapseHeight 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards',
|
|
77
|
+
'slide-down-share': 'slideDownShare 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
78
|
+
'rubber-band': 'rubberBand 0.8s ease-out',
|
|
79
|
+
'stagger-0': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards',
|
|
80
|
+
'stagger-100': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards',
|
|
81
|
+
'stagger-200': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards',
|
|
82
|
+
'stagger-300': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards',
|
|
83
|
+
'stagger-400': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards',
|
|
84
|
+
'stagger-500': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards',
|
|
85
|
+
'stagger-70': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.07s forwards',
|
|
86
|
+
'stagger-140': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.14s forwards',
|
|
87
|
+
'stagger-210': 'fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.21s forwards',
|
|
88
|
+
} : {}
|
|
89
|
+
|
|
3
90
|
module.exports = plugin(function ({ addUtilities, addVariant, matchUtilities, theme }) {
|
|
4
91
|
addVariant('border', ['&:focus'])
|
|
5
92
|
|
|
@@ -129,6 +216,54 @@ module.exports = plugin(function ({ addUtilities, addVariant, matchUtilities, th
|
|
|
129
216
|
});
|
|
130
217
|
|
|
131
218
|
addUtilities(require('./utilities.json'))
|
|
219
|
+
|
|
220
|
+
// SAL-73 Phase 3: prefers-reduced-motion overrides for the v2 animation
|
|
221
|
+
// utilities. Dormant unless TWILIGHT_THEME_V2=true.
|
|
222
|
+
if (enableThemeV2) {
|
|
223
|
+
addUtilities({
|
|
224
|
+
'@media (prefers-reduced-motion: reduce)': {
|
|
225
|
+
'.animate-fade-in-up, .animate-fade-in, .animate-fade-out': {
|
|
226
|
+
'animation': 'none !important',
|
|
227
|
+
'opacity': '1 !important',
|
|
228
|
+
'transform': 'none !important',
|
|
229
|
+
},
|
|
230
|
+
'.animate-translate-left, .animate-translate-right, .animate-translate-left-out, .animate-translate-right-out': {
|
|
231
|
+
'animation': 'none !important',
|
|
232
|
+
'opacity': '1 !important',
|
|
233
|
+
'transform': 'none !important',
|
|
234
|
+
},
|
|
235
|
+
'.animate-shrink-fly': {
|
|
236
|
+
'animation': 'none !important',
|
|
237
|
+
'opacity': '1 !important',
|
|
238
|
+
'transform': 'none !important',
|
|
239
|
+
},
|
|
240
|
+
'.animate-expand-height, .animate-collapse-height': {
|
|
241
|
+
'animation': 'none !important',
|
|
242
|
+
'opacity': '1 !important',
|
|
243
|
+
'height': 'auto !important',
|
|
244
|
+
},
|
|
245
|
+
'.animate-slide-down-share': {
|
|
246
|
+
'animation': 'none !important',
|
|
247
|
+
'opacity': '1 !important',
|
|
248
|
+
'transform': 'none !important',
|
|
249
|
+
},
|
|
250
|
+
'.animate-stagger-0, .animate-stagger-100, .animate-stagger-200, .animate-stagger-300, .animate-stagger-400, .animate-stagger-500': {
|
|
251
|
+
'animation': 'none !important',
|
|
252
|
+
'opacity': '1 !important',
|
|
253
|
+
'transform': 'none !important',
|
|
254
|
+
},
|
|
255
|
+
'.animate-stagger-70, .animate-stagger-140, .animate-stagger-210': {
|
|
256
|
+
'animation': 'none !important',
|
|
257
|
+
'opacity': '1 !important',
|
|
258
|
+
'transform': 'none !important',
|
|
259
|
+
},
|
|
260
|
+
'.animate-rubber-band': {
|
|
261
|
+
'animation': 'none !important',
|
|
262
|
+
'transform': 'none !important',
|
|
263
|
+
},
|
|
264
|
+
}
|
|
265
|
+
})
|
|
266
|
+
}
|
|
132
267
|
}, {
|
|
133
268
|
important: true,
|
|
134
269
|
darkMode: 'class', // or 'media' or 'class',
|
|
@@ -184,12 +319,14 @@ module.exports = plugin(function ({ addUtilities, addVariant, matchUtilities, th
|
|
|
184
319
|
'0%': { transform: 'translateY(-100%)', opacity: '0' },
|
|
185
320
|
'100%': { transform: 'translateY(-0%)', opacity: '1' }
|
|
186
321
|
},
|
|
322
|
+
...v2Keyframes,
|
|
187
323
|
},
|
|
188
324
|
animation: {
|
|
189
325
|
slideUpFromBottom: 'slideUpFromBottom .6s linear',
|
|
190
326
|
slideDownFromBottom: 'slideDownFromBottom .6s linear',
|
|
191
327
|
slideDownFromTop: 'slideDownFromTop .6s linear',
|
|
192
328
|
slideUPFromTop: 'slideUPFromTop .6s linear',
|
|
329
|
+
...v2Animations,
|
|
193
330
|
},
|
|
194
331
|
}
|
|
195
332
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salla.sa/twilight-tailwind-theme",
|
|
3
|
-
"version": "2.14.
|
|
3
|
+
"version": "2.14.518",
|
|
4
4
|
"license": "GPL-3.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"twilight",
|
|
@@ -28,5 +28,8 @@
|
|
|
28
28
|
"run-when-changed": "^2.1.0",
|
|
29
29
|
"tailwindcss": "^3.1.8"
|
|
30
30
|
},
|
|
31
|
-
"
|
|
31
|
+
"overrides": {
|
|
32
|
+
"minimatch": "3.1.5"
|
|
33
|
+
},
|
|
34
|
+
"gitHead": "71ca14e6fbe582a269ce3a60f260049238f2d307"
|
|
32
35
|
}
|