Glass-card Nimo aesthetic, scope npm packages under @lightshell

Website: glass blur windows, grain texture canvas, floating dock pill.
npm: rename lightshell -> @lightshell/cli, create-lightshell -> @lightshell/create
to work with granular npm tokens (classic tokens deprecated).

Author: meherpanguluri

npm/create-lightshell/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "create-lightshell",
+  "name": "@lightshell/create",
   "version": "0.1.0",
   "description": "Create a new LightShell desktop app",
   "keywords": ["create", "lightshell", "desktop", "app"],

npm/lightshell/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "lightshell",
+  "name": "@lightshell/cli",
   "version": "0.1.0",
   "description": "Build desktop apps with JavaScript. Ship them under 5MB.",
   "keywords": ["desktop", "app", "framework", "webview", "native", "macos", "linux"],

website/css/desktop.css

@@ -1,10 +1,10 @@
 /* desktop.css — Window chrome, taskbar, icons, wallpaper */
 
-/* Desktop surface */
+/* Desktop canvas */
 .desktop {
   position: fixed;
   inset: 0;
-  background-color: var(--bg-desktop);
+  background-color: var(--canvas-bg);
   z-index: var(--z-desktop);
   overflow: hidden;
 }
@@ -35,9 +35,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
-  width: 80px;
-  padding: 8px 4px;
+  gap: 6px;
+  width: 84px;
+  padding: 10px 4px;
   border-radius: var(--radius-icon);
   cursor: pointer;
   transition: background var(--transition-fast);
@@ -46,7 +46,7 @@
   background: var(--bg-icon-hover);
 }
 .desktop-icon:active {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.07);
 }
 
 .desktop-icon .icon-img {
@@ -61,21 +61,22 @@
 .desktop-icon .icon-label {
   font-size: 0.8rem;
   font-weight: 600;
-  color: #2a2a2a;
+  color: var(--text-primary);
   text-align: center;
-  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
   line-height: 1.3;
   word-break: break-word;
   max-width: 80px;
 }
 
-/* Window */
+/* Window — glass card */
 .window {
   position: absolute;
   background: var(--bg-window);
+  backdrop-filter: blur(25px) saturate(160%);
+  -webkit-backdrop-filter: blur(25px) saturate(160%);
   border-radius: var(--radius-window);
   box-shadow: var(--shadow-window);
-  border: 1px solid var(--border-window);
+  border: 1px solid var(--glass-border);
   display: flex;
   flex-direction: column;
   min-width: 280px;
@@ -204,7 +205,7 @@
 .window-body {
   flex: 1;
   overflow: auto;
-  padding: 20px;
+  padding: 24px;
   font-size: 0.9rem;
   line-height: 1.65;
   color: var(--text-primary);
@@ -248,7 +249,7 @@
 /* Taskbar — floating dock pill */
 .taskbar {
   position: fixed;
-  bottom: 24px;
+  bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
   right: auto;
@@ -258,7 +259,7 @@
   border-radius: 100px;
   display: flex;
   align-items: center;
-  padding: 8px 10px;
+  padding: 8px 12px;
   z-index: var(--z-taskbar);
   box-shadow: var(--shadow-taskbar);
   gap: 6px;
@@ -337,7 +338,7 @@
   .desktop {
     overflow-y: auto;
     padding: 16px;
-    padding-bottom: 64px;
+    padding-bottom: 80px;
   }
 
   .window {
@@ -454,8 +455,8 @@
   margin-top: 16px;
 }
 .example-card {
-  background: #fafaf9;
-  border: 1px solid rgba(0,0,0,0.03);
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.6);
   border-radius: 16px;
   padding: 14px 16px;
 }
@@ -492,8 +493,8 @@
   line-height: 1.4;
 }
 .example-code {
-  background: rgba(0,0,0,0.04);
-  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
   padding: 10px 12px;
   overflow-x: auto;
   margin: 0;
@@ -502,5 +503,5 @@
   font-family: var(--font-mono);
   font-size: 0.75rem;
   line-height: 1.5;
-  color: var(--text);
+  color: var(--text-primary);
 }

website/css/shared.css

@@ -1,10 +1,12 @@
 /* shared.css — Typography, colors, resets, responsive */
 
 :root {
-  --bg-desktop: #f5f4f0;
-  --bg-window: #ffffff;
-  --bg-window-header: #fafaf9;
-  --bg-window-header-inactive: #f5f5f3;
+  --canvas-bg: #f5f4f0;
+  --glass-bg: rgba(255, 255, 255, 0.45);
+  --glass-border: rgba(255, 255, 255, 0.3);
+  --bg-window: rgba(255, 255, 255, 0.6);
+  --bg-window-header: rgba(255, 255, 255, 0.35);
+  --bg-window-header-inactive: rgba(245, 244, 240, 0.4);
   --bg-taskbar: #ffffff;
   --bg-icon-hover: rgba(0, 0, 0, 0.04);
   --bg-tooltip: rgba(30, 30, 30, 0.9);
@@ -13,17 +15,16 @@
   --text-secondary: #6b6b6b;
   --text-muted: #999999;
   --text-desktop: #1a1a1a;
-  --text-desktop-shadow: none;
   --text-link: #1a1a1a;
 
-  --border-window: rgba(255, 255, 255, 0.7);
-  --border-subtle: rgba(0, 0, 0, 0.03);
+  --border-window: rgba(255, 255, 255, 0.5);
+  --border-subtle: rgba(0, 0, 0, 0.04);
 
-  --shadow-window: 0 30px 60px rgba(0, 0, 0, 0.05);
-  --shadow-window-focused: 0 30px 60px rgba(0, 0, 0, 0.08);
-  --shadow-taskbar: 0 15px 40px rgba(0, 0, 0, 0.1);
+  --shadow-window: 0 25px 50px rgba(0, 0, 0, 0.06);
+  --shadow-window-focused: 0 25px 50px rgba(0, 0, 0, 0.1);
+  --shadow-taskbar: 0 10px 40px rgba(0, 0, 0, 0.1);
 
-  --radius-window: 32px;
+  --radius-window: 28px;
   --radius-btn: 14px;
   --radius-icon: 16px;
 
@@ -44,7 +45,7 @@
 
   --accent: #1a1a1a;
   --accent-light: #f0f0ee;
-  --green: #40916c;
+  --green: #2d5a4c;
   --yellow: #dda15e;
   --red: #e07a5f;
   --orange: #d4a373;
@@ -83,7 +84,7 @@ pre {
   background: #1e1e2e;
   color: #cdd6f4;
   padding: 1rem;
-  border-radius: var(--radius-btn);
+  border-radius: 12px;
   overflow-x: auto;
   font-size: 0.8125rem;
   line-height: 1.6;
@@ -94,7 +95,7 @@ pre {
 code {
   background: rgba(0, 0, 0, 0.06);
   padding: 0.15em 0.4em;
-  border-radius: 3px;
+  border-radius: 4px;
   font-size: 0.875em;
 }
 
@@ -120,28 +121,25 @@ button {
 /* Scrollbar normalization */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
+::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }
 
 /* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.6rem 1.2rem;
-  border-radius: var(--radius-btn);
+  padding: 0.7rem 1.5rem;
+  border-radius: 100px;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   transition: all var(--transition-fast);
   white-space: nowrap;
 }
 
 .btn-primary {
   background: var(--accent);
   color: white;
-  border-radius: 100px;
-  font-weight: 600;
-  padding: 0.7rem 1.5rem;
 }
 .btn-primary:hover {
   background: #333;
@@ -151,9 +149,6 @@ button {
 .btn-secondary {
   background: var(--accent-light);
   color: var(--text-primary);
-  border-radius: 100px;
-  font-weight: 600;
-  padding: 0.7rem 1.5rem;
 }
 .btn-secondary:hover {
   background: #e8e8e5;