@glass-ui-kit/cli 0.2.0 → 0.2.2

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.
Files changed (2) hide show
  1. package/dist/index.js +167 -39
  2. package/package.json +59 -58
package/dist/index.js CHANGED
@@ -87,59 +87,171 @@ async function installDependencies(deps, pm) {
87
87
  var GLASS_BASE_STYLES = `
88
88
  @layer base {
89
89
  :root {
90
- /* === Glass UI Tokens (Default) === */
91
- --glass-bg: rgba(255, 255, 255, 0.4);
92
- --glass-border: rgba(255, 255, 255, 0.5);
93
- --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
94
- --glass-blur: 12px;
95
- --glass-saturation: 110%;
96
-
97
- /* === Intensity Variants === */
98
- --glass-bg-strong: rgba(255, 255, 255, 0.75);
90
+ /* === TEXT TOKENS (Light) === */
91
+ --foreground: #18181b;
92
+ --muted-foreground: #3f3f46;
93
+
94
+ /* === BASE PRIMITIVES (Default) === */
95
+ --glass-bg: rgba(255, 255, 255, 0.35);
96
+ --glass-border: rgba(255, 255, 255, 0.6);
97
+ --glass-shadow: var(--glass-shadow-sm);
98
+ --glass-blur: 6px;
99
+
100
+ /* === SHADOW SIZES === */
101
+ --glass-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
102
+ --glass-shadow-md: 0 4px 30px 0 rgba(0, 0, 0, 0.1);
103
+ --glass-shadow-lg: 0 8px 40px 0 rgba(0, 0, 0, 0.2);
104
+
105
+ /* === BORDER RADIUS === */
106
+ --glass-radius-sm: 0.375rem;
107
+ --glass-radius-md: 0.75rem;
108
+ --glass-radius-lg: 1rem;
109
+ --glass-radius-xl: 1.5rem;
110
+
111
+ /* === SEMANTIC VARIANTS === */
112
+ --glass-bg-strong: rgba(255, 255, 255, 0.5);
99
113
  --glass-border-strong: rgba(255, 255, 255, 0.8);
100
- --glass-blur-strong: 20px;
114
+ --glass-blur-strong: 10px;
101
115
 
102
116
  --glass-bg-soft: rgba(255, 255, 255, 0.2);
103
- --glass-border-soft: rgba(255, 255, 255, 0.3);
104
- --glass-blur-soft: 8px;
117
+ --glass-border-soft: rgba(255, 255, 255, 0.4);
118
+ --glass-blur-soft: 2px;
105
119
  }
106
120
 
107
121
  .dark {
108
- /* === Glass UI Tokens (Dark) === */
109
- --glass-bg: rgba(15, 23, 42, 0.6);
110
- --glass-border: rgba(255, 255, 255, 0.08);
111
- --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
112
-
113
- --glass-bg-strong: rgba(15, 23, 42, 0.85);
114
- --glass-border-strong: rgba(255, 255, 255, 0.15);
115
-
116
- --glass-bg-soft: rgba(15, 23, 42, 0.3);
117
- --glass-border-soft: rgba(255, 255, 255, 0.05);
122
+ /* === TEXT TOKENS (Dark) === */
123
+ --foreground: #fafafa;
124
+ --muted-foreground: #d4d4d8;
125
+
126
+ /* === DARK PRIMITIVES === */
127
+ --glass-bg: rgba(255, 255, 255, 0.08);
128
+ --glass-border: rgba(255, 255, 255, 0.1);
129
+ --glass-shadow: var(--glass-shadow-sm);
130
+
131
+ /* === DARK SHADOW SIZES === */
132
+ --glass-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
133
+ --glass-shadow-md: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
134
+ --glass-shadow-lg: 0 8px 40px 0 rgba(0, 0, 0, 0.35);
135
+
136
+ /* === DARK VARIANTS === */
137
+ --glass-bg-strong: rgba(255, 255, 255, 0.15);
138
+ --glass-border-strong: rgba(255, 255, 255, 0.2);
139
+
140
+ --glass-bg-soft: rgba(255, 255, 255, 0.03);
141
+ --glass-border-soft: rgba(255, 255, 255, 0.06);
118
142
  }
119
143
  }
120
144
 
145
+ @theme {
146
+ --color-foreground: var(--foreground);
147
+ --color-muted-foreground: var(--muted-foreground);
148
+ --color-glass-bg: var(--glass-bg);
149
+ --color-glass-border: var(--glass-border);
150
+ --shadow-glass: var(--glass-shadow);
151
+ --shadow-glass-sm: var(--glass-shadow-sm);
152
+ --shadow-glass-md: var(--glass-shadow-md);
153
+ --shadow-glass-lg: var(--glass-shadow-lg);
154
+ --backdrop-blur-glass: var(--glass-blur);
155
+ --radius-glass-sm: var(--glass-radius-sm);
156
+ --radius-glass-md: var(--glass-radius-md);
157
+ --radius-glass-lg: var(--glass-radius-lg);
158
+ --radius-glass-xl: var(--glass-radius-xl);
159
+ }
160
+
161
+ /* --- Global Utilities Injected by Glass UI --- */
162
+
163
+ /* Hide native reveal icons in password inputs */
164
+ input[type="password"]::-ms-reveal,
165
+ input[type="password"]::-ms-clear {
166
+ display: none;
167
+ width: 0;
168
+ height: 0;
169
+ }
170
+
171
+ /* Provisional gradient background to highlight Glassmorphism */
172
+ body {
173
+ /* Pastel gradient for light mode */
174
+ background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
175
+ background-attachment: fixed;
176
+ color: var(--foreground);
177
+ min-height: 100vh;
178
+ }
179
+
180
+ .dark body {
181
+ /* Deep gradient for dark mode */
182
+ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
183
+ background-attachment: fixed;
184
+ color: var(--foreground);
185
+ }
186
+
121
187
  @layer components {
122
- /* La clase base obligatoria */
123
- .glass {
188
+ /* .glass -> La clase fundacional.
189
+ Usa las variables por defecto (--glass-bg, etc).
190
+ */
191
+ .glass,
192
+ .hover\\:glass:hover {
124
193
  background: var(--glass-bg);
125
194
  border: 1px solid var(--glass-border);
126
- backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
127
- -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
195
+ backdrop-filter: blur(var(--glass-blur));
128
196
  box-shadow: var(--glass-shadow);
129
197
  }
130
198
 
131
- /* Variantes sem\xE1nticas (solo reasignan variables) */
132
- .glass-strong {
199
+ /* PRESETS DE INTENSIDAD
200
+ No reescriben propiedades CSS (background, border).
201
+ Solo re-asignan las variables locales.
202
+ */
203
+ .glass-strong,
204
+ .hover\\:glass-strong:hover {
133
205
  --glass-bg: var(--glass-bg-strong);
134
206
  --glass-border: var(--glass-border-strong);
135
207
  --glass-blur: var(--glass-blur-strong);
136
208
  }
137
209
 
138
- .glass-soft {
210
+ .glass-soft,
211
+ .hover\\:glass-soft:hover {
139
212
  --glass-bg: var(--glass-bg-soft);
140
213
  --glass-border: var(--glass-border-soft);
141
214
  --glass-blur: var(--glass-blur-soft);
142
215
  }
216
+
217
+ /* SIZES */
218
+ .input-sm,
219
+ .btn-sm {
220
+ height: 1.5rem;
221
+ padding-left: 0.5rem;
222
+ padding-right: 0.5rem;
223
+ font-size: 0.75rem;
224
+ line-height: 1rem;
225
+ gap: 0.375rem;
226
+ }
227
+
228
+ .input-md,
229
+ .btn-md {
230
+ height: 2rem;
231
+ padding-top: 0.5rem;
232
+ padding-bottom: 0.5rem;
233
+ padding-left: 0.625rem;
234
+ padding-right: 0.625rem;
235
+ font-size: 0.875rem;
236
+ line-height: 1.25rem;
237
+ gap: 0.5rem;
238
+ }
239
+
240
+ .input-lg,
241
+ .btn-lg {
242
+ height: 2.5rem;
243
+ padding-left: 0.875rem;
244
+ padding-right: 0.875rem;
245
+ font-size: 1rem;
246
+ line-height: 1.5rem;
247
+ gap: 0.625rem;
248
+ }
249
+
250
+ /* ICON BUTTON */
251
+ .btn-icon {
252
+ padding: 0;
253
+ aspect-ratio: 1 / 1;
254
+ }
143
255
  }
144
256
  `;
145
257
 
@@ -160,11 +272,15 @@ var init = new Command().name("init").description("Initialize configuration and
160
272
  const pm = await getPackageManager();
161
273
  const cwd = process.cwd();
162
274
  const configPath = "glass.config.json";
275
+ const hasSrc = exists("src");
163
276
  let cssPath = getCssPath(framework);
164
- if (!cssPath) {
165
- cssPath = "src/index.css";
277
+ if (!cssPath || framework === "next") {
278
+ cssPath = hasSrc ? "src/app/globals.css" : "app/globals.css";
166
279
  }
167
- const utilsPath = path2.join(cwd, "src/lib/utils.ts");
280
+ const utilsPath = path2.join(
281
+ cwd,
282
+ hasSrc ? "src/lib/utils.ts" : "lib/utils.ts"
283
+ );
168
284
  if (!exists(configPath)) {
169
285
  await writeFile(
170
286
  configPath,
@@ -173,7 +289,10 @@ var init = new Command().name("init").description("Initialize configuration and
173
289
  framework,
174
290
  style: "default",
175
291
  css: cssPath,
176
- aliases: { components: "@/components/ui", utils: "@/lib/utils" }
292
+ aliases: {
293
+ components: "@/components/ui",
294
+ utils: "@/lib/utils"
295
+ }
177
296
  },
178
297
  null,
179
298
  2
@@ -185,9 +304,11 @@ var init = new Command().name("init").description("Initialize configuration and
185
304
  }
186
305
  if (!exists(utilsPath)) {
187
306
  await writeFile(utilsPath, UTILS_CN);
188
- console.log(chalk.green(" Created src/lib/utils.ts"));
307
+ const displayPath = hasSrc ? "src/lib/utils.ts" : "lib/utils.ts";
308
+ console.log(chalk.green(` Created ${displayPath}`));
189
309
  } else {
190
- console.log(chalk.gray(" src/lib/utils.ts already exists."));
310
+ const displayPath = hasSrc ? "src/lib/utils.ts" : "lib/utils.ts";
311
+ console.log(chalk.gray(` ${displayPath} already exists.`));
191
312
  }
192
313
  let cssContent = "";
193
314
  try {
@@ -199,10 +320,15 @@ var init = new Command().name("init").description("Initialize configuration and
199
320
  } catch (e) {
200
321
  }
201
322
  if (!cssContent.includes("--glass-bg")) {
202
- const newCssContent = `${GLASS_BASE_STYLES}
203
- ${cssContent}`;
323
+ const newCssContent = `@import "tailwindcss";
324
+
325
+ ${GLASS_BASE_STYLES}`;
204
326
  await writeFile(cssPath, newCssContent);
205
- console.log(chalk.green(` Updated ${cssPath} with glass tokens`));
327
+ console.log(
328
+ chalk.green(
329
+ ` Overwrote ${cssPath} with Tailwind import and glass tokens`
330
+ )
331
+ );
206
332
  } else {
207
333
  console.log(chalk.gray(` Tokens already present in ${cssPath}`));
208
334
  }
@@ -376,8 +502,10 @@ var add = new Command2().name("add").description("Add a component to your projec
376
502
  console.error(chalk2.red(`Component '${componentName}' not found.`));
377
503
  process.exit(1);
378
504
  }
505
+ const hasSrc = exists("src");
379
506
  const targetDirAlias = config.aliases.components || "@/components/ui";
380
- const targetDir = targetDirAlias.replace(/^@\//, "./src/");
507
+ const relativeAliasPath = targetDirAlias.replace(/^@\//, "");
508
+ const targetDir = hasSrc ? `./src/${relativeAliasPath}` : `./${relativeAliasPath}`;
381
509
  for (const file of item.files) {
382
510
  const fileName = path4.basename(file.path);
383
511
  const filePath = path4.join(targetDir, fileName);
package/package.json CHANGED
@@ -1,58 +1,59 @@
1
- {
2
- "name": "@glass-ui-kit/cli",
3
- "version": "0.2.0",
4
- "description": "The official CLI for Glass UI. Add glassmorphism components to your React projects in seconds.",
5
- "keywords": [
6
- "glassmorphism",
7
- "design-system",
8
- "react",
9
- "cli",
10
- "ui",
11
- "tailwind"
12
- ],
13
- "homepage": "https://github.com/jntellez/glass-ui#readme",
14
- "bugs": {
15
- "url": "https://github.com/jntellez/glass-ui/issues"
16
- },
17
- "repository": {
18
- "type": "git",
19
- "url": "git+https://github.com/jntellez/glass-ui.git",
20
- "directory": "packages/cli"
21
- },
22
- "license": "MIT",
23
- "author": "Glass UI Team",
24
- "type": "module",
25
- "bin": {
26
- "glass-ui": "./dist/index.js"
27
- },
28
- "files": [
29
- "dist",
30
- "README.md"
31
- ],
32
- "engines": {
33
- "node": ">=18.0.0"
34
- },
35
- "scripts": {
36
- "build": "tsup src/index.ts --format esm --clean",
37
- "dev": "bun run ./src/index.ts",
38
- "lint": "eslint src",
39
- "prepublishOnly": "pnpm run build"
40
- },
41
- "dependencies": {
42
- "chalk": "^5.3.0",
43
- "commander": "^11.1.0",
44
- "node-fetch": "^3.3.2",
45
- "zod": "^3.22.4"
46
- },
47
- "devDependencies": {
48
- "@glass-ui-kit/tsconfig": "workspace:*",
49
- "@glass-ui-kit/schema": "workspace:*",
50
- "@types/node": "^20.11.0",
51
- "bun-types": "latest",
52
- "tsup": "^8.0.1",
53
- "typescript": "^5.3.3"
54
- },
55
- "publishConfig": {
56
- "access": "public"
57
- }
58
- }
1
+ {
2
+ "name": "@glass-ui-kit/cli",
3
+ "version": "0.2.2",
4
+ "description": "The official CLI for Glass UI. Add glassmorphism components to your React projects in seconds.",
5
+ "keywords": [
6
+ "glassmorphism",
7
+ "design-system",
8
+ "react",
9
+ "cli",
10
+ "ui",
11
+ "tailwind"
12
+ ],
13
+ "homepage": "https://github.com/jntellez/glass-ui#readme",
14
+ "bugs": {
15
+ "url": "https://github.com/jntellez/glass-ui/issues"
16
+ },
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/jntellez/glass-ui.git",
20
+ "directory": "packages/cli"
21
+ },
22
+ "license": "MIT",
23
+ "author": "Glass UI Team",
24
+ "type": "module",
25
+ "bin": {
26
+ "glass-ui": "./dist/index.js"
27
+ },
28
+ "files": [
29
+ "dist",
30
+ "README.md"
31
+ ],
32
+ "engines": {
33
+ "node": ">=18.0.0"
34
+ },
35
+ "scripts": {
36
+ "sync": "node scripts/sync-styles.mjs",
37
+ "build": "pnpm run sync && tsup src/index.ts --format esm --clean",
38
+ "dev": "pnpm run sync && bun run ./src/index.ts",
39
+ "lint": "eslint src",
40
+ "prepublishOnly": "pnpm run build"
41
+ },
42
+ "dependencies": {
43
+ "chalk": "^5.3.0",
44
+ "commander": "^11.1.0",
45
+ "node-fetch": "^3.3.2",
46
+ "zod": "^3.22.4"
47
+ },
48
+ "devDependencies": {
49
+ "@glass-ui-kit/tsconfig": "workspace:*",
50
+ "@glass-ui-kit/schema": "workspace:*",
51
+ "@types/node": "^20.11.0",
52
+ "bun-types": "latest",
53
+ "tsup": "^8.0.1",
54
+ "typescript": "^5.3.3"
55
+ },
56
+ "publishConfig": {
57
+ "access": "public"
58
+ }
59
+ }