brainzlab-ui 0.1.0 → 0.1.1

data/app/assets/stylesheets/brainzlab_ui/components.css

@@ -15,7 +15,7 @@
   color: white;
   font-weight: 500;
   border-radius: 9999px;
-  transition: all 0.2s var(--ease-out-expo);
+  transition: all var(--duration-normal) var(--ease-out-expo);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
@@ -39,7 +39,7 @@
   font-weight: 500;
   border: 1px solid var(--color-cream-300);
   border-radius: 9999px;
-  transition: all 0.2s var(--ease-out-expo);
+  transition: all var(--duration-normal) var(--ease-out-expo);
 }
 
 .btn-secondary:hover {
@@ -58,7 +58,7 @@
   color: var(--color-ink-600);
   font-weight: 500;
   border-radius: 0.75rem;
-  transition: all 0.15s ease;
+  transition: all var(--duration-fast) var(--ease-out);
 }
 
 .btn-ghost:hover {
@@ -76,7 +76,7 @@
   color: white;
   font-weight: 500;
   border-radius: 9999px;
-  transition: all 0.2s var(--ease-out-expo);
+  transition: all var(--duration-normal) var(--ease-out-expo);
 }
 
 .btn-danger:hover {
@@ -85,7 +85,7 @@
 }
 
 .btn-lift {
-  transition: transform 0.2s var(--ease-out-back), box-shadow 0.2s ease;
+  transition: transform var(--duration-normal) var(--ease-out-back), box-shadow var(--duration-normal) var(--ease-out);
 }
 
 .btn-lift:hover {
@@ -107,7 +107,7 @@
   border: 1px solid var(--color-cream-200);
   border-radius: 1rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-  transition: all 0.3s var(--ease-out-expo);
+  transition: all var(--duration-slow) var(--ease-out-expo);
 }
 
 .card:hover {
@@ -118,7 +118,7 @@
 .card-interactive:hover { transform: translateY(-2px); }
 
 .card-lift {
-  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
+  transition: transform var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out);
 }
 
 .card-lift:hover {
@@ -141,7 +141,7 @@
   border-radius: 0.75rem;
   color: var(--color-ink-900);
   font-size: 0.9375rem;
-  transition: all 0.2s ease;
+  transition: all var(--duration-normal) var(--ease-out);
 }
 
 .input::placeholder { color: var(--color-ink-400); }
@@ -207,7 +207,7 @@
   background-position: right 0.75rem center;
   background-repeat: no-repeat;
   background-size: 1.25rem;
-  transition: all 0.2s ease;
+  transition: all var(--duration-normal) var(--ease-out);
 }
 
 .select:focus {
@@ -227,7 +227,7 @@
   font-size: 0.9375rem;
   min-height: 100px;
   resize: vertical;
-  transition: all 0.2s ease;
+  transition: all var(--duration-normal) var(--ease-out);
 }
 
 .textarea:focus {
@@ -292,7 +292,7 @@
   font-weight: 500;
   color: var(--color-ink-600);
   border-radius: 0.75rem;
-  transition: all 0.15s ease;
+  transition: all var(--duration-fast) var(--ease-out);
 }
 
 .nav-item:hover {
@@ -494,3 +494,496 @@
   height: 1px;
   background: var(--color-cream-200);
 }
+
+/* ----------------------------------------
+   ACCESSIBILITY - FOCUS STATES
+   ---------------------------------------- */
+
+/* Button focus states */
+.btn-primary:focus-visible,
+.btn-secondary:focus-visible,
+.btn-ghost:focus-visible,
+.btn-danger:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+.btn-secondary:focus-visible {
+  outline-color: var(--color-ink-700);
+}
+
+.btn-danger:focus-visible {
+  outline-color: var(--color-error-500);
+}
+
+/* Link focus states */
+a:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Nav item focus */
+.nav-item:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: -2px;
+}
+
+/* Card focus states (for interactive/clickable cards) */
+.card:focus-visible,
+.card-interactive:focus-visible,
+.card-lift:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Badge focus states (for interactive badges) */
+.badge:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Avatar focus states (for clickable avatars) */
+.avatar:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Table row focus states */
+.table tbody tr:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: -2px;
+}
+
+/* Stat card focus states */
+.stat-card:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Checkbox focus states */
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* Skip link for keyboard navigation */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--color-primary-500);
+  color: white;
+  padding: 0.5rem 1rem;
+  z-index: 100;
+  text-decoration: none;
+  font-weight: 500;
+  border-radius: 0 0 0.5rem 0;
+  transition: top var(--duration-normal) var(--ease-out);
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* ----------------------------------------
+   SKELETONS / LOADING STATES
+   ---------------------------------------- */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-cream-200) 0%,
+    var(--color-cream-100) 50%,
+    var(--color-cream-200) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-md);
+}
+
+.skeleton-text {
+  height: 1em;
+  margin-bottom: 0.5em;
+  border-radius: var(--radius-sm);
+}
+
+.skeleton-text:last-child {
+  width: 80%;
+}
+
+.skeleton-avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+
+.skeleton-card {
+  height: 200px;
+  border-radius: var(--radius-lg);
+}
+
+.skeleton-button {
+  height: 2.5rem;
+  width: 100px;
+  border-radius: 9999px;
+}
+
+/* Dark mode skeleton */
+.dark .skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-dark-surface) 0%,
+    var(--color-dark-surface-light) 50%,
+    var(--color-dark-surface) 100%
+  );
+  background-size: 200% 100%;
+}
+
+/* Pulse loading indicator */
+.loading-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Spinner */
+.spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--color-cream-300);
+  border-top-color: var(--color-primary-500);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.spinner-sm { width: 1rem; height: 1rem; }
+.spinner-lg { width: 2rem; height: 2rem; }
+
+.dark .spinner {
+  border-color: var(--color-dark-border);
+  border-top-color: var(--color-primary-400);
+}
+
+/* ============================================
+   DARK MODE VARIANTS
+   ============================================
+   Activated via .dark class on html/body element
+   Follows the landing page's dark mode approach
+*/
+
+/* ----------------------------------------
+   DARK MODE - BUTTONS
+   ---------------------------------------- */
+.dark .btn-primary {
+  background: var(--color-cream-200);
+  color: var(--color-ink-950);
+}
+
+.dark .btn-primary:hover {
+  background: var(--color-cream-100);
+  box-shadow: 0 4px 12px rgba(232, 225, 215, 0.2);
+}
+
+.dark .btn-secondary {
+  background: transparent;
+  color: var(--color-dark-text);
+  border-color: var(--color-dark-border);
+}
+
+.dark .btn-secondary:hover {
+  background: var(--color-dark-surface-light);
+  border-color: var(--color-dark-text-muted);
+  color: var(--color-dark-text);
+}
+
+.dark .btn-ghost {
+  color: var(--color-dark-text-muted);
+}
+
+.dark .btn-ghost:hover {
+  background: var(--color-dark-surface-light);
+  color: var(--color-dark-text);
+}
+
+.dark .btn-danger {
+  background: var(--color-error-600);
+}
+
+.dark .btn-danger:hover {
+  background: var(--color-error-500);
+}
+
+/* ----------------------------------------
+   DARK MODE - CARDS
+   ---------------------------------------- */
+.dark .card {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+  box-shadow: var(--shadow-dark-soft);
+}
+
+.dark .card:hover {
+  border-color: var(--color-dark-text-muted);
+  box-shadow: var(--shadow-dark-medium);
+}
+
+.dark .card-header {
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .card-footer {
+  border-top-color: var(--color-dark-border);
+}
+
+.dark .card-lift:hover {
+  box-shadow: var(--shadow-dark-large);
+}
+
+/* ----------------------------------------
+   DARK MODE - FORM ELEMENTS
+   ---------------------------------------- */
+.dark .input {
+  background: var(--color-dark-surface-light);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text);
+}
+
+.dark .input::placeholder {
+  color: var(--color-dark-text-muted);
+}
+
+.dark .input:focus {
+  background: var(--color-dark-surface);
+  border-color: var(--color-primary-400);
+  box-shadow: 0 0 0 3px rgba(199, 123, 88, 0.2);
+}
+
+.dark .input:disabled {
+  background: var(--color-dark-bg);
+  color: var(--color-dark-text-muted);
+}
+
+.dark .label {
+  color: var(--color-dark-text);
+}
+
+.dark .select {
+  background-color: var(--color-dark-surface-light);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+}
+
+.dark .select:focus {
+  background-color: var(--color-dark-surface);
+  border-color: var(--color-primary-400);
+  box-shadow: 0 0 0 3px rgba(199, 123, 88, 0.2);
+}
+
+.dark .textarea {
+  background: var(--color-dark-surface-light);
+  border-color: var(--color-dark-border);
+  color: var(--color-dark-text);
+}
+
+.dark .textarea:focus {
+  background: var(--color-dark-surface);
+  border-color: var(--color-primary-400);
+  box-shadow: 0 0 0 3px rgba(199, 123, 88, 0.2);
+}
+
+.dark .search-input-wrapper .search-icon {
+  color: var(--color-dark-text-muted);
+}
+
+/* ----------------------------------------
+   DARK MODE - BADGES
+   ---------------------------------------- */
+.dark .badge-primary {
+  background: rgba(199, 123, 88, 0.2);
+  color: var(--color-primary-300);
+}
+
+.dark .badge-success {
+  background: rgba(34, 197, 94, 0.2);
+  color: var(--color-success-400);
+}
+
+.dark .badge-error {
+  background: rgba(239, 68, 68, 0.2);
+  color: var(--color-error-400);
+}
+
+.dark .badge-warning {
+  background: rgba(245, 158, 11, 0.2);
+  color: var(--color-warning-400);
+}
+
+.dark .badge-info {
+  background: rgba(59, 130, 246, 0.2);
+  color: var(--color-info-400);
+}
+
+.dark .badge-neutral {
+  background: var(--color-dark-surface-light);
+  color: var(--color-dark-text-muted);
+}
+
+/* ----------------------------------------
+   DARK MODE - NAVIGATION
+   ---------------------------------------- */
+.dark .nav-item {
+  color: var(--color-dark-text-muted);
+}
+
+.dark .nav-item:hover {
+  background: var(--color-dark-surface-light);
+  color: var(--color-dark-text);
+}
+
+.dark .nav-item.active {
+  background: rgba(199, 123, 88, 0.15);
+  color: var(--color-primary-300);
+}
+
+/* ----------------------------------------
+   DARK MODE - ALERTS
+   ---------------------------------------- */
+.dark .alert-success {
+  background: rgba(34, 197, 94, 0.15);
+  border-color: rgba(34, 197, 94, 0.3);
+  color: var(--color-success-400);
+}
+
+.dark .alert-error {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: var(--color-error-400);
+}
+
+.dark .alert-warning {
+  background: rgba(245, 158, 11, 0.15);
+  border-color: rgba(245, 158, 11, 0.3);
+  color: var(--color-warning-400);
+}
+
+.dark .alert-info {
+  background: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+  color: var(--color-info-400);
+}
+
+/* ----------------------------------------
+   DARK MODE - AVATARS
+   ---------------------------------------- */
+.dark .avatar-primary {
+  background: rgba(199, 123, 88, 0.2);
+  color: var(--color-primary-300);
+}
+
+.dark .avatar-neutral {
+  background: var(--color-dark-surface-light);
+  color: var(--color-dark-text-muted);
+}
+
+/* ----------------------------------------
+   DARK MODE - TABLES
+   ---------------------------------------- */
+.dark .table-wrapper {
+  border-color: var(--color-dark-border);
+}
+
+.dark .table th {
+  background: var(--color-dark-surface);
+  color: var(--color-dark-text-muted);
+  border-bottom-color: var(--color-dark-border);
+}
+
+.dark .table td {
+  color: var(--color-dark-text);
+  border-bottom-color: var(--color-dark-surface-light);
+}
+
+.dark .table tbody tr:hover {
+  background: var(--color-dark-surface-light);
+}
+
+/* ----------------------------------------
+   DARK MODE - STAT CARDS
+   ---------------------------------------- */
+.dark .stat-card {
+  background: var(--color-dark-surface);
+  border-color: var(--color-dark-border);
+}
+
+.dark .stat-label {
+  color: var(--color-dark-text-muted);
+}
+
+.dark .stat-value {
+  color: var(--color-dark-text);
+}
+
+/* ----------------------------------------
+   DARK MODE - EMPTY STATES
+   ---------------------------------------- */
+.dark .empty-state-icon {
+  color: var(--color-dark-text-muted);
+}
+
+.dark .empty-state-title {
+  color: var(--color-dark-text);
+}
+
+.dark .empty-state-description {
+  color: var(--color-dark-text-muted);
+}
+
+/* ----------------------------------------
+   DARK MODE - SECTION HEADERS
+   ---------------------------------------- */
+.dark .section-header {
+  color: var(--color-dark-text);
+}
+
+.dark .section-subheader {
+  color: var(--color-dark-text-muted);
+}
+
+/* ----------------------------------------
+   DARK MODE - DIVIDERS
+   ---------------------------------------- */
+.dark .divider {
+  background: var(--color-dark-border);
+}
+
+/* ----------------------------------------
+   DARK MODE - FOCUS STATES
+   ---------------------------------------- */
+.dark .btn-primary:focus-visible,
+.dark .btn-secondary:focus-visible,
+.dark .btn-ghost:focus-visible {
+  outline-color: var(--color-primary-400);
+}
+
+.dark .btn-danger:focus-visible {
+  outline-color: var(--color-error-400);
+}
+
+.dark a:focus-visible {
+  outline-color: var(--color-primary-400);
+}
+
+.dark .nav-item:focus-visible {
+  outline-color: var(--color-primary-400);
+}
+
+.dark .card:focus-visible,
+.dark .card-interactive:focus-visible,
+.dark .card-lift:focus-visible {
+  outline-color: var(--color-primary-400);
+}
+
+.dark .skip-link {
+  background: var(--color-primary-400);
+  color: var(--color-ink-950);
+}