@fakhrirafiki/theme-engine 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 +566 -0
- package/dist/index.d.mts +501 -0
- package/dist/index.d.ts +501 -0
- package/dist/index.js +4696 -0
- package/dist/index.mjs +4653 -0
- package/dist/styles/animations.css +103 -0
- package/dist/styles/base.css +151 -0
- package/dist/styles/components.css +135 -0
- package/dist/styles/index.css +43 -0
- package/dist/styles/tailwind.css +105 -0
- package/dist/styles/utilities.css +226 -0
- package/package.json +73 -0
|
@@ -0,0 +1,226 @@
|
|
|
1
|
+
/* Theme Engine - Dynamic Utilities */
|
|
2
|
+
|
|
3
|
+
@layer utilities {
|
|
4
|
+
/* Dynamic Border Radius Utilities - Override Tailwind defaults with CSS custom properties */
|
|
5
|
+
/* These utilities use the --radius variable to create consistent, themeable border radius values */
|
|
6
|
+
|
|
7
|
+
.rounded-none {
|
|
8
|
+
border-radius: 0px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.rounded-sm {
|
|
12
|
+
border-radius: calc(var(--radius) - 4px);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.rounded {
|
|
16
|
+
border-radius: calc(var(--radius) - 2px); /* Dynamic base rounded */
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.rounded-md {
|
|
20
|
+
border-radius: calc(var(--radius) - 1px);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.rounded-lg {
|
|
24
|
+
border-radius: var(--radius); /* Main radius value */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.rounded-xl {
|
|
28
|
+
border-radius: calc(var(--radius) + 4px);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.rounded-2xl {
|
|
32
|
+
border-radius: calc(var(--radius) + 8px);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.rounded-3xl {
|
|
36
|
+
border-radius: calc(var(--radius) + 12px);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.rounded-full {
|
|
40
|
+
border-radius: 9999px; /* Keep full rounded as circular */
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Individual corners - for completeness */
|
|
44
|
+
.rounded-t {
|
|
45
|
+
border-top-left-radius: calc(var(--radius) - 2px);
|
|
46
|
+
border-top-right-radius: calc(var(--radius) - 2px);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.rounded-r {
|
|
50
|
+
border-top-right-radius: calc(var(--radius) - 2px);
|
|
51
|
+
border-bottom-right-radius: calc(var(--radius) - 2px);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.rounded-b {
|
|
55
|
+
border-bottom-right-radius: calc(var(--radius) - 2px);
|
|
56
|
+
border-bottom-left-radius: calc(var(--radius) - 2px);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.rounded-l {
|
|
60
|
+
border-top-left-radius: calc(var(--radius) - 2px);
|
|
61
|
+
border-bottom-left-radius: calc(var(--radius) - 2px);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Corner-specific utilities for fine-grained control */
|
|
65
|
+
.rounded-tl {
|
|
66
|
+
border-top-left-radius: calc(var(--radius) - 2px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.rounded-tr {
|
|
70
|
+
border-top-right-radius: calc(var(--radius) - 2px);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.rounded-br {
|
|
74
|
+
border-bottom-right-radius: calc(var(--radius) - 2px);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.rounded-bl {
|
|
78
|
+
border-bottom-left-radius: calc(var(--radius) - 2px);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Dynamic spacing utilities based on --spacing variable */
|
|
82
|
+
.space-dynamic > * + * {
|
|
83
|
+
margin-top: var(--spacing);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.space-dynamic-x > * + * {
|
|
87
|
+
margin-left: var(--spacing);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.gap-dynamic {
|
|
91
|
+
gap: var(--spacing);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.p-dynamic {
|
|
95
|
+
padding: var(--spacing);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.px-dynamic {
|
|
99
|
+
padding-left: var(--spacing);
|
|
100
|
+
padding-right: var(--spacing);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.py-dynamic {
|
|
104
|
+
padding-top: var(--spacing);
|
|
105
|
+
padding-bottom: var(--spacing);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.pt-dynamic {
|
|
109
|
+
padding-top: var(--spacing);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.pr-dynamic {
|
|
113
|
+
padding-right: var(--spacing);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.pb-dynamic {
|
|
117
|
+
padding-bottom: var(--spacing);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.pl-dynamic {
|
|
121
|
+
padding-left: var(--spacing);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.m-dynamic {
|
|
125
|
+
margin: var(--spacing);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.mx-dynamic {
|
|
129
|
+
margin-left: var(--spacing);
|
|
130
|
+
margin-right: var(--spacing);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.my-dynamic {
|
|
134
|
+
margin-top: var(--spacing);
|
|
135
|
+
margin-bottom: var(--spacing);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.mt-dynamic {
|
|
139
|
+
margin-top: var(--spacing);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.mr-dynamic {
|
|
143
|
+
margin-right: var(--spacing);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.mb-dynamic {
|
|
147
|
+
margin-bottom: var(--spacing);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.ml-dynamic {
|
|
151
|
+
margin-left: var(--spacing);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Shadow utilities using dynamic shadow variables */
|
|
155
|
+
.shadow-dynamic {
|
|
156
|
+
box-shadow: var(--shadow-offset-x, 0px)
|
|
157
|
+
var(--shadow-offset-y, 2px)
|
|
158
|
+
var(--shadow-blur, 8px)
|
|
159
|
+
var(--shadow-spread, 0px)
|
|
160
|
+
hsl(var(--shadow-color, 0 0% 0%) / var(--shadow-opacity, 0.1));
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.shadow-dynamic-lg {
|
|
164
|
+
box-shadow: var(--shadow-offset-x, 0px)
|
|
165
|
+
calc(var(--shadow-offset-y, 2px) * 2)
|
|
166
|
+
calc(var(--shadow-blur, 8px) * 1.5)
|
|
167
|
+
var(--shadow-spread, 0px)
|
|
168
|
+
hsl(var(--shadow-color, 0 0% 0%) / var(--shadow-opacity, 0.1));
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.drop-shadow-dynamic {
|
|
172
|
+
filter: drop-shadow(var(--shadow-offset-x, 0px)
|
|
173
|
+
var(--shadow-offset-y, 2px)
|
|
174
|
+
var(--shadow-blur, 8px)
|
|
175
|
+
hsl(var(--shadow-color, 0 0% 0%) / var(--shadow-opacity, 0.1)));
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/* Typography utilities using dynamic variables */
|
|
179
|
+
.tracking-dynamic {
|
|
180
|
+
letter-spacing: var(--letter-spacing);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.font-dynamic-sans {
|
|
184
|
+
font-family: var(--font-sans);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.font-dynamic-serif {
|
|
188
|
+
font-family: var(--font-serif);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.font-dynamic-mono {
|
|
192
|
+
font-family: var(--font-mono);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* Theme-aware utilities */
|
|
196
|
+
.bg-theme-card {
|
|
197
|
+
background-color: hsl(var(--card));
|
|
198
|
+
color: hsl(var(--card-foreground));
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.bg-theme-popover {
|
|
202
|
+
background-color: hsl(var(--popover));
|
|
203
|
+
color: hsl(var(--popover-foreground));
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.border-theme {
|
|
207
|
+
border-color: hsl(var(--border));
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.ring-theme {
|
|
211
|
+
ring-color: hsl(var(--ring));
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* Responsive typography scaling with spacing */
|
|
215
|
+
@media (min-width: 768px) {
|
|
216
|
+
.responsive-spacing {
|
|
217
|
+
--spacing: 0.375rem; /* Slightly larger on medium screens */
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
@media (min-width: 1024px) {
|
|
222
|
+
.responsive-spacing {
|
|
223
|
+
--spacing: 0.5rem; /* Even larger on large screens */
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@fakhrirafiki/theme-engine",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Elegant theming system with smooth transitions, custom presets, and complete shadcn/ui support for modern React applications",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./styles": "./dist/styles/index.css",
|
|
15
|
+
"./styles/base.css": "./dist/styles/base.css",
|
|
16
|
+
"./styles/animations.css": "./dist/styles/animations.css",
|
|
17
|
+
"./styles/components.css": "./dist/styles/components.css",
|
|
18
|
+
"./styles/utilities.css": "./dist/styles/utilities.css",
|
|
19
|
+
"./styles/tailwind.css": "./dist/styles/tailwind.css"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"README.md"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --clean",
|
|
27
|
+
"build:css": "cp -r src/styles dist/",
|
|
28
|
+
"build:full": "npm run build && npm run build:css",
|
|
29
|
+
"type-check": "tsc --noEmit",
|
|
30
|
+
"prepublishOnly": "npm run build:full"
|
|
31
|
+
},
|
|
32
|
+
"repository": {
|
|
33
|
+
"type": "git",
|
|
34
|
+
"url": "git+https://github.com/fakhrirafiki/ngobrollink-monorepo.git",
|
|
35
|
+
"directory": "packages/theme-engine"
|
|
36
|
+
},
|
|
37
|
+
"homepage": "https://github.com/fakhrirafiki/ngobrollink-monorepo/tree/main/packages/theme-engine",
|
|
38
|
+
"bugs": {
|
|
39
|
+
"url": "https://github.com/fakhrirafiki/ngobrollink-monorepo/issues"
|
|
40
|
+
},
|
|
41
|
+
"dependencies": {
|
|
42
|
+
"clsx": "^2.1.1"
|
|
43
|
+
},
|
|
44
|
+
"peerDependencies": {
|
|
45
|
+
"framer-motion": ">=12.0.0",
|
|
46
|
+
"react": ">=18.0.0",
|
|
47
|
+
"react-dom": ">=18.0.0"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@types/react": "^18.0.0",
|
|
51
|
+
"@types/react-dom": "^18.0.0",
|
|
52
|
+
"tsup": "^8.5.0",
|
|
53
|
+
"typescript": "^5.0.0"
|
|
54
|
+
},
|
|
55
|
+
"keywords": [
|
|
56
|
+
"theme",
|
|
57
|
+
"dark-mode",
|
|
58
|
+
"light-mode",
|
|
59
|
+
"react",
|
|
60
|
+
"typescript",
|
|
61
|
+
"transitions",
|
|
62
|
+
"shadcn",
|
|
63
|
+
"tailwind",
|
|
64
|
+
"preset",
|
|
65
|
+
"css-variables",
|
|
66
|
+
"color-scheme",
|
|
67
|
+
"theming",
|
|
68
|
+
"ui",
|
|
69
|
+
"components"
|
|
70
|
+
],
|
|
71
|
+
"author": "NgobrolLink Team",
|
|
72
|
+
"license": "MIT"
|
|
73
|
+
}
|