@edenapp/sdk 0.1.0

package/edencss/README.md

@@ -0,0 +1,214 @@
+# Eden CSS
+
+Frosted glass design system for Eden. Dark theme, glassmorphism, ready-to-use components.
+
+## Usage
+
+Eden CSS is **automatically injected** into apps. No imports needed.
+
+Control injection in `manifest.json`:
+
+```json
+{
+  "window": {
+    "injections": {
+      "css": "full" // "full" | "tokens" | "none"
+    }
+  }
+}
+```
+
+## Design Tokens
+
+All tokens use `--eden-` prefix. **See [`tokens.css`](./tokens.css) for everything.**
+
+```css
+/* Common patterns */
+background: var(--eden-color-bg-glass-medium);
+backdrop-filter: var(--eden-glass-medium);
+color: var(--eden-color-text-primary);
+padding: var(--eden-space-md);
+border-radius: var(--eden-radius-lg);
+box-shadow: var(--eden-shadow-md);
+transition: all var(--eden-transition-base);
+```
+
+| Prefix                | What it does                                         |
+| --------------------- | ---------------------------------------------------- |
+| `--eden-color-*`      | Colors (bg, surface, text, accent, border, semantic) |
+| `--eden-space-*`      | Spacing (xs → 3xl)                                   |
+| `--eden-radius-*`     | Border radius                                        |
+| `--eden-shadow-*`     | Box shadows                                          |
+| `--eden-glass-*`      | Backdrop blur effects                                |
+| `--eden-font-*`       | Typography                                           |
+| `--eden-transition-*` | Animations                                           |
+| `--eden-z-*`          | Z-index layers                                       |
+
+Edit `tokens.json` → run `pnpm run tokens:build` to regenerate.
+
+---
+
+## Utilities
+
+📖 **See [`utilities.css`](./utilities.css) for all classes.**
+
+```html
+<!-- Glass effects -->
+<div class="eden-glass-medium">Frosted glass</div>
+
+<!-- Layout -->
+<div class="eden-flex-center eden-gap-md">Centered with gap</div>
+
+<!-- Spacing: eden-{m|p}-{xs|sm|md|lg|xl} -->
+<div class="eden-p-lg eden-m-sm">Padded & margined</div>
+
+<!-- Text -->
+<span class="eden-text-secondary eden-text-sm">Muted small text</span>
+
+<!-- Interactive (hover lift effect) -->
+<div class="eden-interactive">Hover me</div>
+
+<!-- Animations -->
+<div class="eden-animate-fade-in">Appears smoothly</div>
+```
+
+---
+
+## Components
+
+📖 **See [`components/`](./components/) for all component CSS files.**
+
+### Buttons
+
+```html
+<button class="eden-btn">Default</button>
+<button class="eden-btn eden-btn-primary">Primary</button>
+<button class="eden-btn eden-btn-danger">Danger</button>
+<button class="eden-btn eden-btn-ghost">Ghost</button>
+```
+
+Variants: `primary`, `secondary`, `success`, `danger`, `ghost`, `outline`  
+Sizes: `xs`, `sm`, `md`, `lg`
+
+### Inputs
+
+```html
+<input class="eden-input" placeholder="Text input" />
+<textarea class="eden-textarea"></textarea>
+<select class="eden-select">
+  ...
+</select>
+<input type="checkbox" class="eden-checkbox" />
+<input type="radio" class="eden-radio" />
+```
+
+### Cards
+
+```html
+<div class="eden-card">
+  <div class="eden-card-header">
+    <h3 class="eden-card-title">Title</h3>
+  </div>
+  <div class="eden-card-body">Content</div>
+  <div class="eden-card-footer">
+    <button class="eden-btn eden-btn-primary">Action</button>
+  </div>
+</div>
+```
+
+Variants: `eden-card-glass`, `eden-card-elevated`, `eden-card-interactive`
+
+### Modals
+
+```html
+<div class="eden-modal-overlay">
+  <div class="eden-modal">
+    <div class="eden-modal-header">
+      <h2 class="eden-modal-title">Title</h2>
+      <button class="eden-modal-close">×</button>
+    </div>
+    <div class="eden-modal-body">Content</div>
+    <div class="eden-modal-footer">...</div>
+  </div>
+</div>
+```
+
+### Badges & Tags
+
+```html
+<span class="eden-badge eden-badge-success">Active</span>
+<span class="eden-badge-dot eden-badge-danger"></span>
+<span class="eden-tag">Label</span>
+```
+
+### Lists & Menus
+
+```html
+<ul class="eden-list">
+  <li class="eden-list-item eden-list-item-interactive">Click me</li>
+</ul>
+
+<ul class="eden-menu">
+  <li class="eden-menu-item">Action</li>
+  <li class="eden-menu-divider"></li>
+  <li class="eden-menu-item eden-menu-item-danger">Delete</li>
+</ul>
+```
+
+### Sidebar
+
+```html
+<aside class="eden-sidebar">
+  <div class="eden-sidebar-section">
+    <div class="eden-sidebar-section-title">Section</div>
+    <div class="eden-sidebar-items">
+      <div class="eden-sidebar-item">
+        <div class="eden-sidebar-item-icon">📁</div>
+        <span class="eden-sidebar-item-text">Item</span>
+      </div>
+      <div class="eden-sidebar-item eden-sidebar-item-selected">
+        <div class="eden-sidebar-item-icon">⚙️</div>
+        <span class="eden-sidebar-item-text">Selected</span>
+      </div>
+    </div>
+  </div>
+  <div class="eden-sidebar-divider"></div>
+  <div class="eden-sidebar-section eden-sidebar-section-scrollable">
+    <div class="eden-sidebar-items eden-sidebar-items-scrollable">
+      <!-- scrollable items -->
+    </div>
+  </div>
+</aside>
+```
+
+Sizes: `eden-sidebar-compact`, `eden-sidebar-wide`  
+States: `eden-sidebar-item-selected`, `eden-sidebar-item-disabled`  
+Extras: `eden-sidebar-header`, `eden-sidebar-footer`, `eden-sidebar-search`
+
+### Tabs
+
+```html
+<div class="eden-tabs">
+  <div class="eden-tab-list">
+    <button class="eden-tab eden-tab-active">Tab 1</button>
+    <button class="eden-tab">Tab 2</button>
+  </div>
+  <div class="eden-tab-panels">
+    <div class="eden-tab-panel eden-tab-panel-active">Content</div>
+  </div>
+</div>
+```
+
+### Progress
+
+```html
+<div class="eden-progress">
+  <div class="eden-progress-bar" style="width: 60%"></div>
+</div>
+```
+
+---
+
+## Extras
+
+- **Custom scrollbars** - Applied globally, thin with glass effect

package/edencss/components/badges.css

@@ -0,0 +1,180 @@
+/**
+ * Eden Design System - Badge and Tag Components
+ * Frosted glass styled badges and tags
+ */
+
+/* ===== Base Badge ===== */
+.eden-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--eden-space-xs) var(--eden-space-sm);
+  border-radius: var(--eden-radius-sm);
+  font-size: var(--eden-font-size-xs);
+  font-weight: var(--eden-font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--eden-font-letter-spacing-wide);
+  
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-light);
+  -webkit-backdrop-filter: var(--eden-glass-light);
+  
+  border: 1px solid var(--eden-color-border-light);
+  color: var(--eden-color-text-secondary);
+}
+
+/* ===== Badge Variants ===== */
+.eden-badge-primary {
+  background: rgba(74, 158, 255, 0.2);
+  border-color: var(--eden-color-accent-primary);
+  color: var(--eden-color-accent-primary);
+}
+
+.eden-badge-success {
+  background: rgba(81, 207, 102, 0.2);
+  border-color: var(--eden-color-success);
+  color: var(--eden-color-success);
+}
+
+.eden-badge-danger {
+  background: rgba(255, 59, 48, 0.2);
+  border-color: var(--eden-color-danger);
+  color: var(--eden-color-danger);
+}
+
+.eden-badge-warning {
+  background: rgba(255, 217, 61, 0.2);
+  border-color: var(--eden-color-warning);
+  color: var(--eden-color-warning);
+}
+
+.eden-badge-info {
+  background: rgba(77, 171, 247, 0.2);
+  border-color: var(--eden-color-info);
+  color: var(--eden-color-info);
+}
+
+/* ===== Badge Sizes ===== */
+.eden-badge-sm {
+  font-size: 9px;
+  padding: 2px var(--eden-space-xs);
+}
+
+.eden-badge-lg {
+  font-size: var(--eden-font-size-sm);
+  padding: var(--eden-space-sm) var(--eden-space-md);
+}
+
+/* ===== Badge Dot ===== */
+.eden-badge-dot {
+  padding: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--eden-radius-round);
+  border: none;
+}
+
+.eden-badge-dot-animated {
+  animation: eden-pulse 2s infinite;
+}
+
+@keyframes eden-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* ===== Tag ===== */
+.eden-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--eden-space-xs);
+  padding: var(--eden-space-sm) var(--eden-space-md);
+  border-radius: var(--eden-radius-md);
+  font-size: var(--eden-font-size-sm);
+  font-weight: var(--eden-font-weight-medium);
+  
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+  -webkit-backdrop-filter: var(--eden-glass-medium);
+  
+  border: 1px solid var(--eden-color-border-light);
+  color: var(--eden-color-text-primary);
+  
+  transition: all var(--eden-transition-base);
+}
+
+.eden-tag:hover {
+  border-color: var(--eden-color-border-medium);
+  background: var(--eden-color-bg-glass-strong);
+}
+
+/* ===== Tag with Close Button ===== */
+.eden-tag-close {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--eden-radius-xs);
+  border: none;
+  background: transparent;
+  color: var(--eden-color-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  transition: all var(--eden-transition-fast);
+  padding: 0;
+  margin-left: var(--eden-space-xs);
+}
+
+.eden-tag-close:hover {
+  background: var(--eden-color-surface-hover);
+  color: var(--eden-color-text-primary);
+}
+
+/* ===== Tag Group ===== */
+.eden-tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eden-space-sm);
+}
+
+/* ===== Notification Badge ===== */
+.eden-notification-badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--eden-space-xs);
+  border-radius: 999px;
+  
+  background: var(--eden-color-danger);
+  border: 2px solid var(--eden-color-surface-primary);
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  font-size: 10px;
+  font-weight: var(--eden-font-weight-bold);
+  color: white;
+  
+  animation: eden-badge-pop var(--eden-duration-normal) var(--eden-transition-ease-out);
+}
+
+@keyframes eden-badge-pop {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+

package/edencss/components/buttons.css

@@ -0,0 +1,221 @@
+/**
+ * Eden Design System - Button Components
+ * Frosted glass styled buttons with various states and sizes
+ */
+
+/* ===== Base Button ===== */
+.eden-btn {
+  font-family: var(--eden-font-family-base);
+  font-size: var(--eden-font-size-md);
+  font-weight: var(--eden-font-weight-medium);
+  padding: var(--eden-space-md);
+  border-radius: var(--eden-radius-md);
+  border: 1px solid var(--eden-color-border-light);
+  cursor: pointer;
+  transition: all var(--eden-transition-base);
+
+  /* Frosted glass effect */
+  background: var(--eden-color-bg-glass-medium);
+  backdrop-filter: var(--eden-glass-medium);
+  -webkit-backdrop-filter: var(--eden-glass-medium);
+  box-shadow: var(--eden-shadow-sm);
+
+  color: var(--eden-color-text-primary);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--eden-space-sm);
+
+  user-select: none;
+  outline: none;
+}
+
+.eden-btn:hover {
+  background: var(--eden-color-bg-glass-strong);
+  backdrop-filter: var(--eden-glass-strong);
+  -webkit-backdrop-filter: var(--eden-glass-strong);
+  border-color: var(--eden-color-border-medium);
+  transform: translateY(-1px);
+  box-shadow: var(--eden-shadow-md);
+}
+
+.eden-btn:active {
+  transform: translateY(0);
+  box-shadow: var(--eden-shadow-sm);
+}
+
+.eden-btn:focus-visible {
+  outline: 2px solid var(--eden-color-accent-primary);
+  outline-offset: 2px;
+}
+
+.eden-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* ===== Button Variants ===== */
+.eden-btn-primary {
+  background: linear-gradient(135deg, var(--eden-color-accent-blue), var(--eden-color-accent-blue-dark));
+  border-color: transparent;
+  color: white;
+  box-shadow: var(--eden-shadow-md);
+  font-weight: var(--eden-font-weight-semibold);
+}
+
+.eden-btn-primary:hover {
+  filter: brightness(1.15);
+  box-shadow: var(--eden-shadow-lg);
+  border-color: transparent;
+}
+
+.eden-btn-secondary {
+  background: var(--eden-color-surface-tertiary);
+  border-color: var(--eden-color-border-medium);
+}
+
+.eden-btn-secondary:hover {
+  background: var(--eden-color-surface-hover);
+}
+
+.eden-btn-success {
+  background: var(--eden-color-success);
+  border-color: transparent;
+  color: white;
+  font-weight: var(--eden-font-weight-semibold);
+}
+
+.eden-btn-success:hover {
+  background: var(--eden-color-success-hover);
+  box-shadow: var(--eden-shadow-lg);
+}
+
+.eden-btn-danger {
+  background: var(--eden-color-danger);
+  border-color: transparent;
+  color: white;
+  font-weight: var(--eden-font-weight-semibold);
+}
+
+.eden-btn-danger:hover {
+  background: var(--eden-color-danger-hover);
+  box-shadow: var(--eden-shadow-lg);
+}
+
+.eden-btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+.eden-btn-ghost:hover {
+  background: var(--eden-color-bg-glass-light);
+  border-color: var(--eden-color-border-light);
+}
+
+.eden-btn-outline {
+  background: transparent;
+  border-color: var(--eden-color-border-medium);
+}
+
+.eden-btn-outline:hover {
+  background: var(--eden-color-bg-glass-light);
+  border-color: var(--eden-color-accent-primary);
+}
+
+/* ===== Button Sizes ===== */
+.eden-btn-xs {
+  font-size: var(--eden-font-size-xs);
+  padding: var(--eden-space-xs);
+  border-radius: var(--eden-radius-xs);
+}
+
+.eden-btn-sm {
+  font-size: var(--eden-font-size-sm);
+  padding: var(--eden-space-sm);
+  border-radius: var(--eden-radius-sm);
+}
+
+.eden-btn-md {
+  font-size: var(--eden-font-size-md);
+  padding: var(--eden-space-md);
+  border-radius: var(--eden-radius-md);
+}
+
+.eden-btn-lg {
+  font-size: var(--eden-font-size-lg);
+  padding: var(--eden-space-lg);
+  border-radius: var(--eden-radius-lg);
+}
+
+.eden-btn-xl {
+  font-size: var(--eden-font-size-xl);
+  padding: var(--eden-space-xl);
+  border-radius: var(--eden-radius-xl);
+}
+
+/* ===== Button Shapes ===== */
+.eden-btn-square {
+  aspect-ratio: 1;
+}
+
+.eden-btn-pill {
+  border-radius: 999px;
+}
+
+/* ===== Button Groups ===== */
+.eden-btn-group {
+  display: inline-flex;
+  gap: 0;
+}
+
+.eden-btn-group .eden-btn {
+  border-radius: 0;
+}
+
+.eden-btn-group .eden-btn:first-child {
+  border-top-left-radius: var(--eden-radius-md);
+  border-bottom-left-radius: var(--eden-radius-md);
+}
+
+.eden-btn-group .eden-btn:last-child {
+  border-top-right-radius: var(--eden-radius-md);
+  border-bottom-right-radius: var(--eden-radius-md);
+}
+
+.eden-btn-group .eden-btn:not(:last-child) {
+  border-right: none;
+}
+
+/* ===== Floating Action Button ===== */
+.eden-fab {
+  position: fixed;
+  bottom: var(--eden-space-2xl);
+  right: var(--eden-space-2xl);
+  width: 56px;
+  height: 56px;
+  border-radius: var(--eden-radius-round);
+
+  background: linear-gradient(135deg, var(--eden-color-accent-blue), var(--eden-color-accent-blue-dark));
+  border: none;
+  box-shadow: var(--eden-shadow-2xl);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  transition: all var(--eden-transition-base);
+  z-index: var(--eden-z-sticky);
+}
+
+.eden-fab:hover {
+  transform: scale(1.1);
+  box-shadow: var(--eden-shadow-xl);
+}
+
+.eden-fab:active {
+  transform: scale(1);
+}