dalila 1.5.13 → 1.7.0

package/src/components/ui/toast/toast.css

@@ -0,0 +1,100 @@
+/* Dalila UI — Toast */
+
+@keyframes d-toast-in {
+  from { opacity: 0; transform: translateY(0.5rem); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.d-toast-container {
+  position: fixed;
+  bottom: var(--d-space-6);
+  right: var(--d-space-6);
+  z-index: var(--d-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--d-space-3);
+  max-width: 24rem;
+  pointer-events: none;
+}
+
+.d-toast-container-tl { top: var(--d-space-6); left: var(--d-space-6); bottom: auto; right: auto; }
+.d-toast-container-tr { top: var(--d-space-6); right: var(--d-space-6); bottom: auto; }
+.d-toast-container-bl { bottom: var(--d-space-6); left: var(--d-space-6); right: auto; }
+
+.d-toast {
+  --_tone: var(--d-text-muted);
+  --_tone-bg: rgba(115, 115, 115, 0.12);
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--d-space-3);
+  padding: var(--d-space-4) var(--d-space-4) var(--d-space-4) var(--d-space-5);
+  background: var(--d-surface-card);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-lg);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  font-family: var(--d-font-sans);
+  animation: d-toast-in var(--d-duration-slow) var(--d-ease) forwards;
+}
+
+.d-toast-icon {
+  flex-shrink: 0;
+  display: inline-block;
+  color: var(--_tone);
+  font-size: 1rem;
+  line-height: 1;
+  margin-top: 0.125rem;
+}
+
+.d-toast-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.d-toast-title {
+  font-size: var(--d-text-sm);
+  font-weight: var(--d-font-semibold);
+  color: var(--d-text-primary);
+}
+
+.d-toast-text {
+  font-size: var(--d-text-sm);
+  color: var(--d-text-secondary);
+  margin: var(--d-space-1) 0 0;
+}
+
+.d-toast-close {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: var(--d-space-1);
+  background: none;
+  border: none;
+  color: var(--d-text-muted);
+  cursor: pointer;
+  border-radius: var(--d-radius-sm);
+  transition: color var(--d-duration-fast) ease;
+}
+
+.d-toast-close:hover {
+  color: var(--d-text-primary);
+}
+
+.d-toast-success {
+  --_tone: var(--d-success);
+  --_tone-bg: var(--d-success-light);
+}
+
+.d-toast-error {
+  --_tone: var(--d-error);
+  --_tone-bg: var(--d-error-light);
+}
+
+.d-toast-warning {
+  --_tone: var(--d-warning);
+  --_tone-bg: var(--d-warning-light);
+}
+
+.d-toast-info {
+  --_tone: var(--d-info);
+  --_tone-bg: var(--d-info-light);
+}

package/src/components/ui/toggle/toggle.css

@@ -0,0 +1,90 @@
+/* Dalila UI — Toggle */
+
+.d-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--d-space-3);
+
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-base);
+  color: var(--d-text-primary);
+  cursor: pointer;
+  user-select: none;
+}
+
+.d-toggle input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.d-toggle-track {
+  position: relative;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 1.5rem;
+
+  background: var(--d-surface-raised);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-full);
+
+  transition: background var(--d-duration-fast) ease, border-color var(--d-duration-fast) ease;
+}
+
+.d-toggle-track::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.125rem;
+  height: 1.125rem;
+
+  background: #ffffff;
+  border-radius: 50%;
+  transition: transform var(--d-duration) var(--d-ease-bounce);
+}
+
+[data-theme="light"] .d-toggle-track::after {
+  background: #0a0a0a;
+}
+
+.d-toggle input:checked + .d-toggle-track {
+  background: var(--d-accent);
+  border-color: var(--d-accent);
+}
+
+.d-toggle input:checked + .d-toggle-track::after {
+  transform: translateX(1.25rem);
+}
+
+.d-toggle input:focus-visible + .d-toggle-track {
+  outline: none;
+  box-shadow: var(--d-shadow-glow);
+}
+
+.d-toggle input:disabled + .d-toggle-track {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.d-toggle:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.d-toggle-sm .d-toggle-track {
+  width: 2.25rem;
+  height: 1.25rem;
+}
+
+.d-toggle-sm .d-toggle-track::after {
+  width: 0.875rem;
+  height: 0.875rem;
+  top: 2px;
+  left: 2px;
+}
+
+.d-toggle-sm input:checked + .d-toggle-track::after {
+  transform: translateX(1rem);
+}

package/src/components/ui/tokens/tokens.css

@@ -0,0 +1,161 @@
+/* Dalila UI — Design Tokens (Playground-aligned) */
+
+:root,
+[data-theme="light"] {
+  --d-bg: #ffffff;
+  --d-bg-card: #f8f8f8;
+  --d-bg-elevated: #f0f0f0;
+  --d-fg: #0a0a0a;
+  --d-fg-muted: #6b7280;
+  --d-accent: #2563eb;
+  --d-accent-hover: #1d4ed8;
+  --d-border: #e5e5e5;
+
+  --d-primary-50: #eff6ff;
+  --d-primary-100: #dbeafe;
+  --d-primary-200: #bfdbfe;
+  --d-primary-300: #93c5fd;
+  --d-primary-400: #60a5fa;
+  --d-primary-500: #3b82f6;
+  --d-primary-600: #2563eb;
+  --d-primary-700: #1d4ed8;
+  --d-primary-800: #1e40af;
+  --d-primary-900: #1e3a8a;
+
+  --d-accent-50: #fff7ed;
+  --d-accent-100: #ffedd5;
+  --d-accent-200: #fed7aa;
+  --d-accent-300: #fdba74;
+  --d-accent-400: #fb923c;
+  --d-accent-500: #f97316;
+  --d-accent-600: #ea580c;
+  --d-accent-700: #c2410c;
+
+  --d-slate-50: #fafafa;
+  --d-slate-100: #f4f4f5;
+  --d-slate-200: #e4e4e7;
+  --d-slate-300: #d4d4d8;
+  --d-slate-400: #a1a1aa;
+  --d-slate-500: #71717a;
+  --d-slate-600: #52525b;
+  --d-slate-700: #3f3f46;
+  --d-slate-800: #27272a;
+  --d-slate-900: #18181b;
+  --d-slate-950: #09090b;
+
+  /* Backward-compatible aliases expected by old examples */
+  --d-stone-50: var(--d-slate-50);
+  --d-stone-100: var(--d-slate-100);
+  --d-stone-200: var(--d-slate-200);
+  --d-stone-300: var(--d-slate-300);
+  --d-stone-400: var(--d-slate-400);
+  --d-stone-500: var(--d-slate-500);
+  --d-stone-600: var(--d-slate-600);
+  --d-stone-700: var(--d-slate-700);
+  --d-stone-800: var(--d-slate-800);
+  --d-stone-900: var(--d-slate-900);
+  --d-stone-950: var(--d-slate-950);
+
+  --d-success: #16a34a;
+  --d-success-light: rgba(22, 163, 74, 0.12);
+  --d-error: #dc2626;
+  --d-error-light: rgba(220, 38, 38, 0.12);
+  --d-warning: #d97706;
+  --d-warning-light: rgba(217, 119, 6, 0.12);
+  --d-info: #0284c7;
+  --d-info-light: rgba(2, 132, 199, 0.12);
+
+  --d-ring: rgba(37, 99, 235, 0.22);
+
+  --d-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --d-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+
+  --d-text-xs: 0.75rem;
+  --d-text-sm: 0.8125rem;
+  --d-text-base: 0.875rem;
+  --d-text-lg: 1rem;
+  --d-text-xl: 1.25rem;
+  --d-text-2xl: 1.5rem;
+  --d-text-3xl: 2rem;
+
+  --d-font-normal: 400;
+  --d-font-medium: 500;
+  --d-font-semibold: 600;
+  --d-font-bold: 700;
+
+  --d-leading: 1.6;
+
+  --d-space-1: 0.25rem;
+  --d-space-2: 0.5rem;
+  --d-space-3: 0.75rem;
+  --d-space-4: 1rem;
+  --d-space-5: 1.25rem;
+  --d-space-6: 1.5rem;
+  --d-space-8: 2rem;
+  --d-space-10: 2.5rem;
+  --d-space-12: 3rem;
+
+  --d-radius-sm: 6px;
+  --d-radius-md: 8px;
+  --d-radius-lg: 12px;
+  --d-radius-xl: 14px;
+  --d-radius-full: 9999px;
+
+  --d-shadow-xs: none;
+  --d-shadow-sm: none;
+  --d-shadow-md: 0 10px 26px rgba(0, 0, 0, 0.08);
+  --d-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.12);
+  --d-shadow-glow: 0 0 0 1px var(--d-accent);
+
+  --d-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --d-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --d-duration-fast: 120ms;
+  --d-duration: 180ms;
+  --d-duration-slow: 280ms;
+
+  --d-surface-page: var(--d-bg);
+  --d-surface-card: var(--d-bg-card);
+  --d-surface-raised: var(--d-bg-elevated);
+  --d-surface-overlay: rgba(0, 0, 0, 0.4);
+
+  --d-text-primary: var(--d-fg);
+  --d-text-secondary: var(--d-fg-muted);
+  --d-text-muted: var(--d-fg-muted);
+  --d-text-inverse: #ffffff;
+
+  --d-border-color: var(--d-border);
+
+  --d-gradient-brand: linear-gradient(135deg, var(--d-primary-500), #8b5cf6);
+
+  --d-z-dropdown: 50;
+  --d-z-sticky: 100;
+  --d-z-overlay: 200;
+  --d-z-modal: 300;
+  --d-z-toast: 400;
+  --d-z-tooltip: 500;
+}
+
+[data-theme="dark"] {
+  --d-bg: #0a0a0a;
+  --d-bg-card: #141414;
+  --d-bg-elevated: #1a1a1a;
+  --d-fg: #fafafa;
+  --d-fg-muted: #737373;
+  --d-accent: #3b82f6;
+  --d-accent-hover: #2563eb;
+  --d-border: #262626;
+
+  --d-success: #22c55e;
+  --d-success-light: rgba(34, 197, 94, 0.14);
+  --d-error: #ef4444;
+  --d-error-light: rgba(239, 68, 68, 0.14);
+  --d-warning: #f59e0b;
+  --d-warning-light: rgba(245, 158, 11, 0.14);
+  --d-info: #38bdf8;
+  --d-info-light: rgba(56, 189, 248, 0.14);
+
+  --d-ring: rgba(59, 130, 246, 0.35);
+  --d-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
+  --d-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
+  --d-surface-overlay: rgba(0, 0, 0, 0.65);
+}

package/src/components/ui/tooltip/tooltip.css

@@ -0,0 +1,53 @@
+/* Dalila UI — Tooltip */
+
+.d-tooltip {
+  position: relative;
+}
+
+.d-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: var(--d-space-1) var(--d-space-2);
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-xs);
+  font-weight: var(--d-font-medium);
+  color: #fff;
+  background: var(--d-slate-900);
+  border-radius: var(--d-radius-sm);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--d-duration-fast) ease;
+  z-index: var(--d-z-tooltip);
+}
+
+[data-theme="light"] .d-tooltip::after {
+  background: var(--d-slate-800);
+}
+
+.d-tooltip:hover::after {
+  opacity: 1;
+}
+
+.d-tooltip-bottom::after {
+  bottom: auto;
+  top: calc(100% + 6px);
+}
+
+.d-tooltip-left::after {
+  bottom: auto;
+  top: 50%;
+  left: auto;
+  right: calc(100% + 6px);
+  transform: translateY(-50%);
+}
+
+.d-tooltip-right::after {
+  bottom: auto;
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+}

package/src/components/ui/typography/typography.css

@@ -0,0 +1,81 @@
+/* Dalila UI — Typography */
+
+.d-h1, .d-h2, .d-h3, .d-h4, .d-h5, .d-h6 {
+  font-family: var(--d-font-sans);
+  font-weight: var(--d-font-bold);
+  color: var(--d-text-primary);
+  line-height: 1.3;
+  margin: 0;
+}
+
+.d-h1 { font-size: var(--d-text-3xl); letter-spacing: -0.02em; }
+.d-h2 { font-size: var(--d-text-2xl); letter-spacing: -0.01em; }
+.d-h3 { font-size: var(--d-text-xl); }
+.d-h4 { font-size: var(--d-text-lg); }
+.d-h5 { font-size: var(--d-text-base); font-weight: var(--d-font-semibold); }
+.d-h6 { font-size: var(--d-text-sm); font-weight: var(--d-font-semibold); }
+
+.d-text {
+  font-family: var(--d-font-sans);
+  font-size: var(--d-text-base);
+  color: var(--d-text-primary);
+  line-height: var(--d-leading);
+  margin: 0;
+}
+
+.d-text-xs { font-size: var(--d-text-xs); }
+.d-text-sm { font-size: var(--d-text-sm); }
+.d-text-lg { font-size: var(--d-text-lg); }
+.d-text-xl { font-size: var(--d-text-xl); }
+.d-text-muted { color: var(--d-text-muted); }
+.d-text-accent { color: var(--d-accent); }
+.d-text-success { color: var(--d-success); }
+.d-text-error { color: var(--d-error); }
+.d-text-warning { color: var(--d-warning); }
+.d-text-mono { font-family: var(--d-font-mono); }
+.d-text-bold { font-weight: var(--d-font-bold); }
+.d-text-semibold { font-weight: var(--d-font-semibold); }
+.d-text-medium { font-weight: var(--d-font-medium); }
+
+.d-link {
+  color: var(--d-accent);
+  text-decoration: none;
+  transition: color var(--d-duration-fast) ease;
+}
+
+.d-link:hover {
+  color: var(--d-accent-hover);
+  text-decoration: underline;
+}
+
+.d-link-muted {
+  color: var(--d-text-muted);
+}
+
+.d-link-muted:hover {
+  color: var(--d-text-primary);
+}
+
+.d-code {
+  font-family: var(--d-font-mono);
+  font-size: 0.875em;
+  padding: 1px 5px;
+  background: var(--d-surface-raised);
+  border-radius: var(--d-radius-sm);
+  color: var(--d-accent);
+}
+
+.d-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  padding: 0.125rem 0.375rem;
+  font-family: var(--d-font-mono);
+  font-size: var(--d-text-xs);
+  color: var(--d-text-muted);
+  background: var(--d-surface-raised);
+  border: 1px solid var(--d-border-color);
+  border-radius: var(--d-radius-sm);
+  box-shadow: 0 1px 0 var(--d-border-color);
+}