@memelabui/ui 0.1.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/README.md +104 -0
- package/dist/index.cjs +722 -0
- package/dist/index.d.cts +232 -0
- package/dist/index.d.ts +232 -0
- package/dist/index.js +698 -0
- package/dist/preset/index.cjs +139 -0
- package/dist/preset/index.d.cts +5 -0
- package/dist/preset/index.d.ts +5 -0
- package/dist/preset/index.js +133 -0
- package/dist/styles/index.css +1766 -0
- package/dist/tokens/index.cjs +23 -0
- package/dist/tokens/index.d.cts +32 -0
- package/dist/tokens/index.d.ts +32 -0
- package/dist/tokens/index.js +21 -0
- package/package.json +120 -0
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var plugin = require('tailwindcss/plugin');
|
|
4
|
+
|
|
5
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
6
|
+
|
|
7
|
+
var plugin__default = /*#__PURE__*/_interopDefault(plugin);
|
|
8
|
+
|
|
9
|
+
// src/preset/index.ts
|
|
10
|
+
var memelabPreset = {
|
|
11
|
+
darkMode: "class",
|
|
12
|
+
theme: {
|
|
13
|
+
extend: {
|
|
14
|
+
colors: {
|
|
15
|
+
surface: {
|
|
16
|
+
DEFAULT: "var(--ml-bg)",
|
|
17
|
+
0: "var(--ml-surface-0)",
|
|
18
|
+
50: "var(--ml-surface-50)",
|
|
19
|
+
100: "var(--ml-surface-100)",
|
|
20
|
+
200: "var(--ml-surface-200)",
|
|
21
|
+
300: "var(--ml-surface-300)",
|
|
22
|
+
400: "var(--ml-surface-400)"
|
|
23
|
+
},
|
|
24
|
+
primary: {
|
|
25
|
+
DEFAULT: "var(--ml-primary)",
|
|
26
|
+
light: "var(--ml-primary-light)",
|
|
27
|
+
dark: "var(--ml-primary-dark)"
|
|
28
|
+
},
|
|
29
|
+
accent: {
|
|
30
|
+
DEFAULT: "var(--ml-accent)",
|
|
31
|
+
light: "var(--ml-accent-light)",
|
|
32
|
+
dark: "var(--ml-accent-dark)"
|
|
33
|
+
},
|
|
34
|
+
glow: {
|
|
35
|
+
purple: "var(--ml-glow-purple)",
|
|
36
|
+
pink: "var(--ml-glow-pink)"
|
|
37
|
+
},
|
|
38
|
+
success: "var(--ml-success)",
|
|
39
|
+
warning: "var(--ml-warning)",
|
|
40
|
+
danger: "var(--ml-danger)"
|
|
41
|
+
},
|
|
42
|
+
fontFamily: {
|
|
43
|
+
sans: ["var(--ml-font-sans)"]
|
|
44
|
+
},
|
|
45
|
+
borderRadius: {
|
|
46
|
+
surface: "var(--ml-radius-md)"
|
|
47
|
+
},
|
|
48
|
+
boxShadow: {
|
|
49
|
+
surface: "var(--ml-shadow-surface)",
|
|
50
|
+
"surface-hover": "var(--ml-shadow-surface-hover)",
|
|
51
|
+
glow: "var(--ml-shadow-glow)",
|
|
52
|
+
"glow-lg": "var(--ml-shadow-glow-lg)",
|
|
53
|
+
"glow-accent": "var(--ml-shadow-glow-accent)"
|
|
54
|
+
},
|
|
55
|
+
animation: {
|
|
56
|
+
float: "ml-float 6s ease-in-out infinite",
|
|
57
|
+
"float-delayed": "ml-float 6s ease-in-out 2s infinite",
|
|
58
|
+
gradient: "ml-gradient 15s ease infinite",
|
|
59
|
+
"pulse-glow": "ml-pulse-glow 2s ease-in-out infinite",
|
|
60
|
+
"fade-up": "ml-fade-up 0.8s ease-out forwards",
|
|
61
|
+
"fade-up-delayed": "ml-fade-up 0.8s ease-out 0.2s forwards",
|
|
62
|
+
"modal-backdrop": "ml-modal-backdrop 140ms ease-out both",
|
|
63
|
+
"modal-pop": "ml-modal-pop 160ms cubic-bezier(0.22,1,0.36,1) both",
|
|
64
|
+
shimmer: "ml-shimmer 2s ease-in-out infinite"
|
|
65
|
+
},
|
|
66
|
+
keyframes: {
|
|
67
|
+
"ml-float": {
|
|
68
|
+
"0%, 100%": { transform: "translateY(0px)" },
|
|
69
|
+
"50%": { transform: "translateY(-20px)" }
|
|
70
|
+
},
|
|
71
|
+
"ml-gradient": {
|
|
72
|
+
"0%": { backgroundPosition: "0% 50%" },
|
|
73
|
+
"50%": { backgroundPosition: "100% 50%" },
|
|
74
|
+
"100%": { backgroundPosition: "0% 50%" }
|
|
75
|
+
},
|
|
76
|
+
"ml-pulse-glow": {
|
|
77
|
+
"0%, 100%": { opacity: "1" },
|
|
78
|
+
"50%": { opacity: "0.6" }
|
|
79
|
+
},
|
|
80
|
+
"ml-fade-up": {
|
|
81
|
+
"0%": { opacity: "0", transform: "translateY(30px)" },
|
|
82
|
+
"100%": { opacity: "1", transform: "translateY(0)" }
|
|
83
|
+
},
|
|
84
|
+
"ml-modal-backdrop": {
|
|
85
|
+
from: { opacity: "0" },
|
|
86
|
+
to: { opacity: "1" }
|
|
87
|
+
},
|
|
88
|
+
"ml-modal-pop": {
|
|
89
|
+
from: { opacity: "0", transform: "translateY(6px) scale(0.98)" },
|
|
90
|
+
to: { opacity: "1", transform: "translateY(0) scale(1)" }
|
|
91
|
+
},
|
|
92
|
+
"ml-shimmer": {
|
|
93
|
+
"0%": { transform: "translateX(-200%)" },
|
|
94
|
+
"100%": { transform: "translateX(200%)" }
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
plugins: [
|
|
100
|
+
plugin__default.default(function({ addComponents }) {
|
|
101
|
+
addComponents({
|
|
102
|
+
".glass": {
|
|
103
|
+
borderRadius: "var(--ml-radius-md, 0.75rem)",
|
|
104
|
+
background: "var(--ml-glass-bg, rgba(255, 255, 255, 0.05))",
|
|
105
|
+
backdropFilter: "blur(var(--ml-glass-blur, 16px))",
|
|
106
|
+
WebkitBackdropFilter: "blur(var(--ml-glass-blur, 16px))",
|
|
107
|
+
boxShadow: "0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px var(--ml-glass-border, rgba(255,255,255,0.1))"
|
|
108
|
+
},
|
|
109
|
+
".surface": {
|
|
110
|
+
borderRadius: "var(--ml-radius-md, 0.75rem)",
|
|
111
|
+
background: "rgba(255, 255, 255, 0.06)",
|
|
112
|
+
backdropFilter: "blur(12px)",
|
|
113
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
114
|
+
boxShadow: "var(--ml-shadow-surface, 0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08))"
|
|
115
|
+
},
|
|
116
|
+
".surface-hover": {
|
|
117
|
+
transition: "box-shadow var(--ml-transition-fast, 150ms ease)",
|
|
118
|
+
"&:hover": {
|
|
119
|
+
boxShadow: "var(--ml-shadow-surface-hover, 0 10px 25px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.09))"
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
".text-gradient": {
|
|
123
|
+
background: "linear-gradient(135deg, var(--ml-accent,#667eea) 0%, var(--ml-glow-purple,#764ba2) 50%, var(--ml-glow-pink,#f093fb) 100%)",
|
|
124
|
+
WebkitBackgroundClip: "text",
|
|
125
|
+
WebkitTextFillColor: "transparent",
|
|
126
|
+
backgroundClip: "text"
|
|
127
|
+
},
|
|
128
|
+
".animated-gradient": {
|
|
129
|
+
background: "linear-gradient(270deg, var(--ml-accent,#667eea), var(--ml-glow-purple,#764ba2), var(--ml-glow-pink,#f093fb))",
|
|
130
|
+
backgroundSize: "400% 400%",
|
|
131
|
+
animation: "ml-gradient 15s ease infinite"
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
})
|
|
135
|
+
]
|
|
136
|
+
};
|
|
137
|
+
var preset_default = memelabPreset;
|
|
138
|
+
|
|
139
|
+
module.exports = preset_default;
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import plugin from 'tailwindcss/plugin';
|
|
2
|
+
|
|
3
|
+
// src/preset/index.ts
|
|
4
|
+
var memelabPreset = {
|
|
5
|
+
darkMode: "class",
|
|
6
|
+
theme: {
|
|
7
|
+
extend: {
|
|
8
|
+
colors: {
|
|
9
|
+
surface: {
|
|
10
|
+
DEFAULT: "var(--ml-bg)",
|
|
11
|
+
0: "var(--ml-surface-0)",
|
|
12
|
+
50: "var(--ml-surface-50)",
|
|
13
|
+
100: "var(--ml-surface-100)",
|
|
14
|
+
200: "var(--ml-surface-200)",
|
|
15
|
+
300: "var(--ml-surface-300)",
|
|
16
|
+
400: "var(--ml-surface-400)"
|
|
17
|
+
},
|
|
18
|
+
primary: {
|
|
19
|
+
DEFAULT: "var(--ml-primary)",
|
|
20
|
+
light: "var(--ml-primary-light)",
|
|
21
|
+
dark: "var(--ml-primary-dark)"
|
|
22
|
+
},
|
|
23
|
+
accent: {
|
|
24
|
+
DEFAULT: "var(--ml-accent)",
|
|
25
|
+
light: "var(--ml-accent-light)",
|
|
26
|
+
dark: "var(--ml-accent-dark)"
|
|
27
|
+
},
|
|
28
|
+
glow: {
|
|
29
|
+
purple: "var(--ml-glow-purple)",
|
|
30
|
+
pink: "var(--ml-glow-pink)"
|
|
31
|
+
},
|
|
32
|
+
success: "var(--ml-success)",
|
|
33
|
+
warning: "var(--ml-warning)",
|
|
34
|
+
danger: "var(--ml-danger)"
|
|
35
|
+
},
|
|
36
|
+
fontFamily: {
|
|
37
|
+
sans: ["var(--ml-font-sans)"]
|
|
38
|
+
},
|
|
39
|
+
borderRadius: {
|
|
40
|
+
surface: "var(--ml-radius-md)"
|
|
41
|
+
},
|
|
42
|
+
boxShadow: {
|
|
43
|
+
surface: "var(--ml-shadow-surface)",
|
|
44
|
+
"surface-hover": "var(--ml-shadow-surface-hover)",
|
|
45
|
+
glow: "var(--ml-shadow-glow)",
|
|
46
|
+
"glow-lg": "var(--ml-shadow-glow-lg)",
|
|
47
|
+
"glow-accent": "var(--ml-shadow-glow-accent)"
|
|
48
|
+
},
|
|
49
|
+
animation: {
|
|
50
|
+
float: "ml-float 6s ease-in-out infinite",
|
|
51
|
+
"float-delayed": "ml-float 6s ease-in-out 2s infinite",
|
|
52
|
+
gradient: "ml-gradient 15s ease infinite",
|
|
53
|
+
"pulse-glow": "ml-pulse-glow 2s ease-in-out infinite",
|
|
54
|
+
"fade-up": "ml-fade-up 0.8s ease-out forwards",
|
|
55
|
+
"fade-up-delayed": "ml-fade-up 0.8s ease-out 0.2s forwards",
|
|
56
|
+
"modal-backdrop": "ml-modal-backdrop 140ms ease-out both",
|
|
57
|
+
"modal-pop": "ml-modal-pop 160ms cubic-bezier(0.22,1,0.36,1) both",
|
|
58
|
+
shimmer: "ml-shimmer 2s ease-in-out infinite"
|
|
59
|
+
},
|
|
60
|
+
keyframes: {
|
|
61
|
+
"ml-float": {
|
|
62
|
+
"0%, 100%": { transform: "translateY(0px)" },
|
|
63
|
+
"50%": { transform: "translateY(-20px)" }
|
|
64
|
+
},
|
|
65
|
+
"ml-gradient": {
|
|
66
|
+
"0%": { backgroundPosition: "0% 50%" },
|
|
67
|
+
"50%": { backgroundPosition: "100% 50%" },
|
|
68
|
+
"100%": { backgroundPosition: "0% 50%" }
|
|
69
|
+
},
|
|
70
|
+
"ml-pulse-glow": {
|
|
71
|
+
"0%, 100%": { opacity: "1" },
|
|
72
|
+
"50%": { opacity: "0.6" }
|
|
73
|
+
},
|
|
74
|
+
"ml-fade-up": {
|
|
75
|
+
"0%": { opacity: "0", transform: "translateY(30px)" },
|
|
76
|
+
"100%": { opacity: "1", transform: "translateY(0)" }
|
|
77
|
+
},
|
|
78
|
+
"ml-modal-backdrop": {
|
|
79
|
+
from: { opacity: "0" },
|
|
80
|
+
to: { opacity: "1" }
|
|
81
|
+
},
|
|
82
|
+
"ml-modal-pop": {
|
|
83
|
+
from: { opacity: "0", transform: "translateY(6px) scale(0.98)" },
|
|
84
|
+
to: { opacity: "1", transform: "translateY(0) scale(1)" }
|
|
85
|
+
},
|
|
86
|
+
"ml-shimmer": {
|
|
87
|
+
"0%": { transform: "translateX(-200%)" },
|
|
88
|
+
"100%": { transform: "translateX(200%)" }
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
plugins: [
|
|
94
|
+
plugin(function({ addComponents }) {
|
|
95
|
+
addComponents({
|
|
96
|
+
".glass": {
|
|
97
|
+
borderRadius: "var(--ml-radius-md, 0.75rem)",
|
|
98
|
+
background: "var(--ml-glass-bg, rgba(255, 255, 255, 0.05))",
|
|
99
|
+
backdropFilter: "blur(var(--ml-glass-blur, 16px))",
|
|
100
|
+
WebkitBackdropFilter: "blur(var(--ml-glass-blur, 16px))",
|
|
101
|
+
boxShadow: "0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px var(--ml-glass-border, rgba(255,255,255,0.1))"
|
|
102
|
+
},
|
|
103
|
+
".surface": {
|
|
104
|
+
borderRadius: "var(--ml-radius-md, 0.75rem)",
|
|
105
|
+
background: "rgba(255, 255, 255, 0.06)",
|
|
106
|
+
backdropFilter: "blur(12px)",
|
|
107
|
+
WebkitBackdropFilter: "blur(12px)",
|
|
108
|
+
boxShadow: "var(--ml-shadow-surface, 0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08))"
|
|
109
|
+
},
|
|
110
|
+
".surface-hover": {
|
|
111
|
+
transition: "box-shadow var(--ml-transition-fast, 150ms ease)",
|
|
112
|
+
"&:hover": {
|
|
113
|
+
boxShadow: "var(--ml-shadow-surface-hover, 0 10px 25px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.09))"
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
".text-gradient": {
|
|
117
|
+
background: "linear-gradient(135deg, var(--ml-accent,#667eea) 0%, var(--ml-glow-purple,#764ba2) 50%, var(--ml-glow-pink,#f093fb) 100%)",
|
|
118
|
+
WebkitBackgroundClip: "text",
|
|
119
|
+
WebkitTextFillColor: "transparent",
|
|
120
|
+
backgroundClip: "text"
|
|
121
|
+
},
|
|
122
|
+
".animated-gradient": {
|
|
123
|
+
background: "linear-gradient(270deg, var(--ml-accent,#667eea), var(--ml-glow-purple,#764ba2), var(--ml-glow-pink,#f093fb))",
|
|
124
|
+
backgroundSize: "400% 400%",
|
|
125
|
+
animation: "ml-gradient 15s ease infinite"
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
})
|
|
129
|
+
]
|
|
130
|
+
};
|
|
131
|
+
var preset_default = memelabPreset;
|
|
132
|
+
|
|
133
|
+
export { preset_default as default };
|