@glass-ui-kit/cli 0.2.0 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Juan Tellez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -87,59 +87,171 @@ async function installDependencies(deps, pm) {
 var GLASS_BASE_STYLES = `
 @layer base {
   :root {
-    /* === Glass UI Tokens (Default) === */
-    --glass-bg: rgba(255, 255, 255, 0.4);
-    --glass-border: rgba(255, 255, 255, 0.5);
-    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
-    --glass-blur: 12px;
-    --glass-saturation: 110%;
-
-    /* === Intensity Variants === */
-    --glass-bg-strong: rgba(255, 255, 255, 0.75);
+    /* === TEXT TOKENS (Light) === */
+    --foreground: #18181b;
+    --muted-foreground: #3f3f46;
+
+    /* === BASE PRIMITIVES (Default) === */
+    --glass-bg: rgba(255, 255, 255, 0.35);
+    --glass-border: rgba(255, 255, 255, 0.6);
+    --glass-shadow: var(--glass-shadow-sm);
+    --glass-blur: 6px;
+
+    /* === SHADOW SIZES === */
+    --glass-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
+    --glass-shadow-md: 0 4px 30px 0 rgba(0, 0, 0, 0.1);
+    --glass-shadow-lg: 0 8px 40px 0 rgba(0, 0, 0, 0.2);
+
+    /* === BORDER RADIUS === */
+    --glass-radius-sm: 0.375rem;
+    --glass-radius-md: 0.75rem;
+    --glass-radius-lg: 1rem;
+    --glass-radius-xl: 1.5rem;
+
+    /* === SEMANTIC VARIANTS === */
+    --glass-bg-strong: rgba(255, 255, 255, 0.5);
     --glass-border-strong: rgba(255, 255, 255, 0.8);
-    --glass-blur-strong: 20px;
+    --glass-blur-strong: 10px;
 
     --glass-bg-soft: rgba(255, 255, 255, 0.2);
-    --glass-border-soft: rgba(255, 255, 255, 0.3);
-    --glass-blur-soft: 8px;
+    --glass-border-soft: rgba(255, 255, 255, 0.4);
+    --glass-blur-soft: 2px;
   }
 
   .dark {
-    /* === Glass UI Tokens (Dark) === */
-    --glass-bg: rgba(15, 23, 42, 0.6);
-    --glass-border: rgba(255, 255, 255, 0.08);
-    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
-
-    --glass-bg-strong: rgba(15, 23, 42, 0.85);
-    --glass-border-strong: rgba(255, 255, 255, 0.15);
-    
-    --glass-bg-soft: rgba(15, 23, 42, 0.3);
-    --glass-border-soft: rgba(255, 255, 255, 0.05);
+    /* === TEXT TOKENS (Dark) === */
+    --foreground: #fafafa;
+    --muted-foreground: #d4d4d8;
+
+    /* === DARK PRIMITIVES === */
+    --glass-bg: rgba(255, 255, 255, 0.08);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-shadow: var(--glass-shadow-sm);
+
+    /* === DARK SHADOW SIZES === */
+    --glass-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    --glass-shadow-md: 0 4px 30px 0 rgba(0, 0, 0, 0.2);
+    --glass-shadow-lg: 0 8px 40px 0 rgba(0, 0, 0, 0.35);
+
+    /* === DARK VARIANTS === */
+    --glass-bg-strong: rgba(255, 255, 255, 0.15);
+    --glass-border-strong: rgba(255, 255, 255, 0.2);
+
+    --glass-bg-soft: rgba(255, 255, 255, 0.03);
+    --glass-border-soft: rgba(255, 255, 255, 0.06);
   }
 }
 
+@theme {
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-glass-bg: var(--glass-bg);
+  --color-glass-border: var(--glass-border);
+  --shadow-glass: var(--glass-shadow);
+  --shadow-glass-sm: var(--glass-shadow-sm);
+  --shadow-glass-md: var(--glass-shadow-md);
+  --shadow-glass-lg: var(--glass-shadow-lg);
+  --backdrop-blur-glass: var(--glass-blur);
+  --radius-glass-sm: var(--glass-radius-sm);
+  --radius-glass-md: var(--glass-radius-md);
+  --radius-glass-lg: var(--glass-radius-lg);
+  --radius-glass-xl: var(--glass-radius-xl);
+}
+
+/* --- Global Utilities Injected by Glass UI --- */
+
+/* Hide native reveal icons in password inputs */
+input[type="password"]::-ms-reveal,
+input[type="password"]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+/* Provisional gradient background to highlight Glassmorphism */
+body {
+  /* Pastel gradient for light mode */
+  background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
+  background-attachment: fixed;
+  color: var(--foreground);
+  min-height: 100vh;
+}
+
+.dark body {
+  /* Deep gradient for dark mode */
+  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+  background-attachment: fixed;
+  color: var(--foreground);
+}
+
 @layer components {
-  /* La clase base obligatoria */
-  .glass {
+  /* .glass -> La clase fundacional.
+    Usa las variables por defecto (--glass-bg, etc).
+  */
+  .glass,
+  .hover\\:glass:hover {
     background: var(--glass-bg);
     border: 1px solid var(--glass-border);
-    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
-    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    backdrop-filter: blur(var(--glass-blur));
     box-shadow: var(--glass-shadow);
   }
 
-  /* Variantes sem\xE1nticas (solo reasignan variables) */
-  .glass-strong {
+  /* PRESETS DE INTENSIDAD
+    No reescriben propiedades CSS (background, border).
+    Solo re-asignan las variables locales.
+  */
+  .glass-strong,
+  .hover\\:glass-strong:hover {
     --glass-bg: var(--glass-bg-strong);
     --glass-border: var(--glass-border-strong);
     --glass-blur: var(--glass-blur-strong);
   }
 
-  .glass-soft {
+  .glass-soft,
+  .hover\\:glass-soft:hover {
     --glass-bg: var(--glass-bg-soft);
     --glass-border: var(--glass-border-soft);
     --glass-blur: var(--glass-blur-soft);
   }
+
+  /* SIZES */
+  .input-sm,
+  .btn-sm {
+    height: 1.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    gap: 0.375rem;
+  }
+
+  .input-md,
+  .btn-md {
+    height: 2rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    gap: 0.5rem;
+  }
+
+  .input-lg,
+  .btn-lg {
+    height: 2.5rem;
+    padding-left: 0.875rem;
+    padding-right: 0.875rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    gap: 0.625rem;
+  }
+
+  /* ICON BUTTON */
+  .btn-icon {
+    padding: 0;
+    aspect-ratio: 1 / 1;
+  }
 }
 `;
 
@@ -199,8 +311,9 @@ var init = new Command().name("init").description("Initialize configuration and
     } catch (e) {
     }
     if (!cssContent.includes("--glass-bg")) {
-      const newCssContent = `${GLASS_BASE_STYLES}
-${cssContent}`;
+      const newCssContent = `${cssContent.trimEnd()}
+
+${GLASS_BASE_STYLES}`;
       await writeFile(cssPath, newCssContent);
       console.log(chalk.green(`  Updated ${cssPath} with glass tokens`));
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glass-ui-kit/cli",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "The official CLI for Glass UI. Add glassmorphism components to your React projects in seconds.",
   "keywords": [
     "glassmorphism",
@@ -32,12 +32,6 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "scripts": {
-    "build": "tsup src/index.ts --format esm --clean",
-    "dev": "bun run ./src/index.ts",
-    "lint": "eslint src",
-    "prepublishOnly": "pnpm run build"
-  },
   "dependencies": {
     "chalk": "^5.3.0",
     "commander": "^11.1.0",
@@ -45,14 +39,20 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@glass-ui-kit/tsconfig": "workspace:*",
-    "@glass-ui-kit/schema": "workspace:*",
     "@types/node": "^20.11.0",
     "bun-types": "latest",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "@glass-ui-kit/tsconfig": "0.0.1",
+    "@glass-ui-kit/schema": "0.0.1"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "sync": "node scripts/sync-styles.mjs",
+    "build": "pnpm run sync && tsup src/index.ts --format esm --clean",
+    "dev": "pnpm run sync && bun run ./src/index.ts",
+    "lint": "eslint src"
   }
-}
+}