@fakhrirafiki/theme-engine 0.2.6 → 0.4.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 +142 -482
- package/dist/index.d.mts +57 -9
- package/dist/index.d.ts +57 -9
- package/dist/index.js +268 -260
- package/dist/index.mjs +256 -250
- package/dist/styles/animations.css +23 -1
- package/dist/styles/components.css +12 -3
- package/package.json +7 -7
|
@@ -55,6 +55,28 @@
|
|
|
55
55
|
100% { transform: translateX(0); }
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
/* ThemePresetButtons: JS-computed infinite scroll distance */
|
|
59
|
+
@keyframes theme-engine-scroll {
|
|
60
|
+
from {
|
|
61
|
+
transform: translateX(0);
|
|
62
|
+
}
|
|
63
|
+
to {
|
|
64
|
+
transform: translateX(calc(-1 * var(--theme-engine-scroll-distance, 0px)));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.theme-preset-row--animated .theme-preset-track {
|
|
69
|
+
animation-name: theme-engine-scroll;
|
|
70
|
+
animation-duration: var(--theme-engine-scroll-duration, 10s);
|
|
71
|
+
animation-timing-function: var(--theme-engine-scroll-easing, linear);
|
|
72
|
+
animation-iteration-count: infinite;
|
|
73
|
+
will-change: transform;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.theme-preset-row--hover-pause:hover .theme-preset-track {
|
|
77
|
+
animation-play-state: paused;
|
|
78
|
+
}
|
|
79
|
+
|
|
58
80
|
/* Hover effects for interactive elements */
|
|
59
81
|
.theme-hover-lift {
|
|
60
82
|
transition: all 0.2s ease-in-out;
|
|
@@ -100,4 +122,4 @@
|
|
|
100
122
|
|
|
101
123
|
.theme-fade-in {
|
|
102
124
|
animation: fadeIn 0.3s ease-in-out;
|
|
103
|
-
}
|
|
125
|
+
}
|
|
@@ -38,8 +38,17 @@
|
|
|
38
38
|
rotate: 180deg;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
/*
|
|
42
|
-
|
|
41
|
+
/* ThemePresetButtons: lightweight CSS-based animations and hover affordances */
|
|
42
|
+
|
|
43
|
+
/* ThemePresetButtons: hover affordance without motion library */
|
|
44
|
+
.theme-preset-button {
|
|
45
|
+
transition: transform 0.2s ease-out;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.theme-preset-button:hover {
|
|
49
|
+
transform: translateY(-3px) scale(1.02);
|
|
50
|
+
z-index: 20;
|
|
51
|
+
}
|
|
43
52
|
|
|
44
53
|
/* Color boxes within preset buttons - fallback only */
|
|
45
54
|
.theme-color-box {
|
|
@@ -132,4 +141,4 @@
|
|
|
132
141
|
.theme-color-box {
|
|
133
142
|
border-width: 2px;
|
|
134
143
|
}
|
|
135
|
-
}
|
|
144
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fakhrirafiki/theme-engine",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -23,14 +23,15 @@
|
|
|
23
23
|
"README.md"
|
|
24
24
|
],
|
|
25
25
|
"scripts": {
|
|
26
|
-
"
|
|
26
|
+
"gen:preset-ids": "node scripts/generate-built-in-preset-ids.mjs",
|
|
27
|
+
"build": "node scripts/generate-built-in-preset-ids.mjs && tsup --config tsup.config.ts",
|
|
27
28
|
"build:css": "cp -r src/styles dist/",
|
|
28
29
|
"build:full": "npm run build && npm run build:css",
|
|
29
|
-
"type-check": "tsc --noEmit",
|
|
30
|
+
"type-check": "node scripts/generate-built-in-preset-ids.mjs && tsc --noEmit",
|
|
30
31
|
"prepublishOnly": "npm run build:full",
|
|
31
|
-
"publish-patch": "npm version patch && npm publish",
|
|
32
|
-
"publish-minor": "npm version minor && npm publish",
|
|
33
|
-
"publish-major": "npm version major && npm publish"
|
|
32
|
+
"publish-patch": "npm version patch --no-workspaces-update && npm publish",
|
|
33
|
+
"publish-minor": "npm version minor --no-workspaces-update && npm publish",
|
|
34
|
+
"publish-major": "npm version major --no-workspaces-update && npm publish"
|
|
34
35
|
},
|
|
35
36
|
"repository": {
|
|
36
37
|
"type": "git",
|
|
@@ -45,7 +46,6 @@
|
|
|
45
46
|
"clsx": "^2.1.1"
|
|
46
47
|
},
|
|
47
48
|
"peerDependencies": {
|
|
48
|
-
"framer-motion": ">=12.0.0",
|
|
49
49
|
"react": ">=18.0.0",
|
|
50
50
|
"react-dom": ">=18.0.0"
|
|
51
51
|
},
|