@aziontech/theme 1.6.0 → 1.7.0
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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aziontech/theme",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.7.0",
|
|
5
5
|
"author": "aziontech",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
"./tailwind/tailwind-theme.js": "./src/tailwind/tailwind-theme.js",
|
|
64
64
|
"./tailwind/semantic-colors-plugin.js": "./src/tailwind/semantic-colors-plugin.js",
|
|
65
65
|
"./tailwind/semantic-texts-plugin.js": "./src/tailwind/semantic-texts-plugin.js",
|
|
66
|
-
"./tailwind/semantic-spacing-plugin.js": "./src/tailwind/semantic-spacing-plugin.js"
|
|
66
|
+
"./tailwind/semantic-spacing-plugin.js": "./src/tailwind/semantic-spacing-plugin.js",
|
|
67
|
+
"./tailwind/semantic-animations-plugin.js": "./src/tailwind/semantic-animations-plugin.js"
|
|
67
68
|
}
|
|
68
69
|
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tailwind plugin to expose semantic animations and keyframes.
|
|
3
|
+
*
|
|
4
|
+
* This adds animation utilities and keyframes for common UI animations.
|
|
5
|
+
*
|
|
6
|
+
* Usage in tailwind.config.js:
|
|
7
|
+
* ```javascript
|
|
8
|
+
* import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
|
|
9
|
+
* import semanticAnimations from '@aziontech/theme/tailwind/semantic-animations-plugin.js';
|
|
10
|
+
*
|
|
11
|
+
* export default {
|
|
12
|
+
* theme,
|
|
13
|
+
* plugins: [semanticAnimations()],
|
|
14
|
+
* };
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
// Lazy-require to avoid hard dependency for consumers
|
|
19
|
+
const plugin = (() => {
|
|
20
|
+
try {
|
|
21
|
+
return require('tailwindcss/plugin');
|
|
22
|
+
} catch {
|
|
23
|
+
return (handler) => handler;
|
|
24
|
+
}
|
|
25
|
+
})();
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Generate semantic animation utilities and keyframes
|
|
29
|
+
* @returns {import('tailwindcss/plugin').Plugin}
|
|
30
|
+
*/
|
|
31
|
+
export const semanticAnimations = () => {
|
|
32
|
+
return plugin(({ addUtilities, addComponents, theme }) => {
|
|
33
|
+
// Animation utilities
|
|
34
|
+
const animations = {
|
|
35
|
+
'.animate-fade-in': {
|
|
36
|
+
animation: 'fadeIn 220ms ease-in-out',
|
|
37
|
+
},
|
|
38
|
+
'.animate-fade-out': {
|
|
39
|
+
animation: 'fadeOut 220ms ease-in-out',
|
|
40
|
+
},
|
|
41
|
+
'.animate-slide-down': {
|
|
42
|
+
animation: 'slideDown 220ms ease-in-out',
|
|
43
|
+
},
|
|
44
|
+
'.animate-blink': {
|
|
45
|
+
animation: 'blink 1s step-end infinite',
|
|
46
|
+
},
|
|
47
|
+
'.animate-highlight-fade': {
|
|
48
|
+
animation: 'highlight ease-in forwards',
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// Keyframes components
|
|
53
|
+
const keyframes = {
|
|
54
|
+
'@keyframes fadeIn': {
|
|
55
|
+
'0%': { opacity: '0' },
|
|
56
|
+
'100%': { opacity: '1' },
|
|
57
|
+
},
|
|
58
|
+
'@keyframes fadeOut': {
|
|
59
|
+
'0%': { opacity: '1' },
|
|
60
|
+
'100%': { opacity: '0' },
|
|
61
|
+
},
|
|
62
|
+
'@keyframes slideDown': {
|
|
63
|
+
'0%': { height: '0' },
|
|
64
|
+
'100%': { height: 'auto' },
|
|
65
|
+
},
|
|
66
|
+
'@keyframes blink': {
|
|
67
|
+
'0%, 100%': { opacity: '1' },
|
|
68
|
+
'50%': { opacity: '0' },
|
|
69
|
+
},
|
|
70
|
+
'@keyframes highlight': {
|
|
71
|
+
'0%': { backgroundColor: 'var(--surface-hover)', fontWeight: '500' },
|
|
72
|
+
'100%': { backgroundColor: 'var(--surface-hover)', fontWeight: '500' },
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
const variants = ['responsive', 'hover', 'focus', 'active', 'motion-safe', 'motion-reduce'];
|
|
77
|
+
addUtilities(animations, variants);
|
|
78
|
+
addComponents(keyframes);
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
export default semanticAnimations;
|