mljr-css 1.0.14 → 1.1.0

package/src/components/avatar.css

@@ -220,3 +220,69 @@
 [data-theme="dark"] .mljr-avatar-status {
   border-color: var(--mljr-bg);
 }
+
+/* ============================================
+   Avatar Group - Stacked avatars with overlap
+   ============================================ */
+
+.mljr-avatar-group {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  padding-left: 0.5rem;
+}
+
+.mljr-avatar-group .mljr-avatar {
+  margin-left: -0.75rem;
+  transition: all var(--mljr-transition-fast);
+  cursor: pointer;
+  border: 3px solid var(--mljr-bg);
+}
+
+.mljr-avatar-group .mljr-avatar:hover {
+  transform: translateY(-4px) scale(1.05);
+  z-index: 10;
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+/* Size-specific overlaps */
+.mljr-avatar-group-xs .mljr-avatar {
+  margin-left: -0.5rem;
+}
+
+.mljr-avatar-group-sm .mljr-avatar {
+  margin-left: -0.625rem;
+}
+
+.mljr-avatar-group-md .mljr-avatar {
+  margin-left: -0.75rem;
+}
+
+.mljr-avatar-group-lg .mljr-avatar {
+  margin-left: -1rem;
+}
+
+.mljr-avatar-group-xl .mljr-avatar {
+  margin-left: -1.25rem;
+}
+
+.mljr-avatar-group-2xl .mljr-avatar {
+  margin-left: -1.5rem;
+}
+
+/* Count indicator ("+N" avatar) */
+.mljr-avatar-count {
+  cursor: default;
+  background: linear-gradient(145deg, var(--mljr-bg-secondary) 0%, var(--mljr-bg-tertiary) 100%);
+  font-size: 0.75em;
+}
+
+.mljr-avatar-count .mljr-avatar-initials {
+  font-weight: 600;
+}
+
+/* Dark mode */
+.dark .mljr-avatar-group .mljr-avatar,
+[data-theme="dark"] .mljr-avatar-group .mljr-avatar {
+  border-color: var(--mljr-bg);
+}

package/src/components/badge.css

@@ -28,8 +28,9 @@
   background-color: var(--mljr-primary-100);
   color: var(--mljr-primary-700);
   box-shadow:
-    3px 3px 6px rgba(249, 115, 22, 0.15),
-    -2px -2px 5px rgba(255, 255, 255, 0.8);
+    3px 3px 6px rgba(249, 115, 22, 0.18),
+    inset -3px -3px 6px rgba(100, 60, 30, 0.08),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.45);
 }
 
 .dark .mljr-badge-primary,
@@ -37,28 +38,31 @@
   background-color: rgba(249, 115, 22, 0.2);
   color: var(--mljr-primary-300);
   box-shadow:
-    3px 3px 6px rgba(0, 0, 0, 0.25),
-    -2px -2px 5px rgba(68, 64, 60, 0.1),
+    3px 3px 6px rgba(0, 0, 0, 0.3),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 8px rgba(249, 115, 22, 0.12);
 }
 
-/* Secondary Badge (Teal) */
+/* Secondary Badge (Purple) */
 .mljr-badge-secondary {
   background-color: var(--mljr-secondary-100);
   color: var(--mljr-secondary-700);
   box-shadow:
-    3px 3px 6px rgba(20, 184, 166, 0.15),
-    -2px -2px 5px rgba(255, 255, 255, 0.8);
+    3px 3px 6px rgba(168, 85, 247, 0.15),
+    inset -3px -3px 6px rgba(80, 30, 140, 0.08),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.45);
 }
 
 .dark .mljr-badge-secondary,
 [data-theme="dark"] .mljr-badge-secondary {
-  background-color: rgba(20, 184, 166, 0.2);
+  background-color: rgba(168, 85, 247, 0.2);
   color: var(--mljr-secondary-300);
   box-shadow:
-    3px 3px 6px rgba(0, 0, 0, 0.25),
-    -2px -2px 5px rgba(68, 64, 60, 0.1),
-    0 0 8px rgba(20, 184, 166, 0.12);
+    3px 3px 6px rgba(0, 0, 0, 0.3),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
+    0 0 8px rgba(168, 85, 247, 0.12);
 }
 
 /* Success Badge */
@@ -66,8 +70,9 @@
   background-color: rgba(16, 185, 129, 0.15);
   color: var(--mljr-success-dark);
   box-shadow:
-    3px 3px 6px rgba(16, 185, 129, 0.12),
-    -2px -2px 5px rgba(255, 255, 255, 0.8);
+    3px 3px 6px rgba(16, 185, 129, 0.15),
+    inset -3px -3px 6px rgba(5, 80, 50, 0.06),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.45);
 }
 
 .dark .mljr-badge-success,
@@ -75,8 +80,9 @@
   background-color: rgba(16, 185, 129, 0.2);
   color: var(--mljr-success-light);
   box-shadow:
-    3px 3px 6px rgba(0, 0, 0, 0.25),
-    -2px -2px 5px rgba(68, 64, 60, 0.1),
+    3px 3px 6px rgba(0, 0, 0, 0.3),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 8px rgba(16, 185, 129, 0.12);
 }
 
@@ -85,8 +91,9 @@
   background-color: rgba(234, 179, 8, 0.15);
   color: var(--mljr-warning-dark);
   box-shadow:
-    3px 3px 6px rgba(234, 179, 8, 0.12),
-    -2px -2px 5px rgba(255, 255, 255, 0.8);
+    3px 3px 6px rgba(234, 179, 8, 0.15),
+    inset -3px -3px 6px rgba(120, 80, 5, 0.06),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.45);
 }
 
 .dark .mljr-badge-warning,
@@ -94,8 +101,9 @@
   background-color: rgba(234, 179, 8, 0.2);
   color: var(--mljr-warning-light);
   box-shadow:
-    3px 3px 6px rgba(0, 0, 0, 0.25),
-    -2px -2px 5px rgba(68, 64, 60, 0.1),
+    3px 3px 6px rgba(0, 0, 0, 0.3),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 8px rgba(234, 179, 8, 0.12);
 }
 
@@ -104,8 +112,9 @@
   background-color: rgba(239, 68, 68, 0.15);
   color: var(--mljr-error-dark);
   box-shadow:
-    3px 3px 6px rgba(239, 68, 68, 0.12),
-    -2px -2px 5px rgba(255, 255, 255, 0.8);
+    3px 3px 6px rgba(239, 68, 68, 0.15),
+    inset -3px -3px 6px rgba(120, 30, 30, 0.06),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.45);
 }
 
 .dark .mljr-badge-error,
@@ -113,8 +122,9 @@
   background-color: rgba(239, 68, 68, 0.2);
   color: var(--mljr-error-light);
   box-shadow:
-    3px 3px 6px rgba(0, 0, 0, 0.25),
-    -2px -2px 5px rgba(68, 64, 60, 0.1),
+    3px 3px 6px rgba(0, 0, 0, 0.3),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 8px rgba(239, 68, 68, 0.12);
 }
 
@@ -123,8 +133,9 @@
   background-color: rgba(59, 130, 246, 0.15);
   color: var(--mljr-info-dark);
   box-shadow:
-    3px 3px 6px rgba(59, 130, 246, 0.12),
-    -2px -2px 5px rgba(255, 255, 255, 0.8);
+    3px 3px 6px rgba(59, 130, 246, 0.15),
+    inset -3px -3px 6px rgba(30, 60, 120, 0.06),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.45);
 }
 
 .dark .mljr-badge-info,
@@ -132,8 +143,9 @@
   background-color: rgba(59, 130, 246, 0.2);
   color: var(--mljr-info-light);
   box-shadow:
-    3px 3px 6px rgba(0, 0, 0, 0.25),
-    -2px -2px 5px rgba(68, 64, 60, 0.1),
+    3px 3px 6px rgba(0, 0, 0, 0.3),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 8px rgba(59, 130, 246, 0.12);
 }
 
@@ -143,15 +155,17 @@
   color: white;
   box-shadow:
     3px 3px 6px rgba(249, 115, 22, 0.25),
-    -3px -3px 6px rgba(255, 255, 255, 0.8);
+    inset -3px -3px 6px rgba(120, 50, 10, 0.12),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.3);
 }
 
 .mljr-badge-secondary-solid {
   background: var(--mljr-gradient-secondary);
   color: white;
   box-shadow:
-    3px 3px 6px rgba(20, 184, 166, 0.25),
-    -3px -3px 6px rgba(255, 255, 255, 0.8);
+    3px 3px 6px rgba(168, 85, 247, 0.25),
+    inset -3px -3px 6px rgba(80, 30, 140, 0.12),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.3);
 }
 
 .mljr-badge-success-solid {
@@ -159,7 +173,8 @@
   color: white;
   box-shadow:
     3px 3px 6px rgba(16, 185, 129, 0.25),
-    -3px -3px 6px rgba(255, 255, 255, 0.8);
+    inset -3px -3px 6px rgba(5, 100, 60, 0.12),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.3);
 }
 
 .mljr-badge-warning-solid {
@@ -167,7 +182,8 @@
   color: var(--mljr-gray-900);
   box-shadow:
     3px 3px 6px rgba(234, 179, 8, 0.25),
-    -3px -3px 6px rgba(255, 255, 255, 0.8);
+    inset -3px -3px 6px rgba(120, 80, 5, 0.12),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.3);
 }
 
 .mljr-badge-error-solid {
@@ -175,7 +191,8 @@
   color: white;
   box-shadow:
     3px 3px 6px rgba(239, 68, 68, 0.25),
-    -3px -3px 6px rgba(255, 255, 255, 0.8);
+    inset -3px -3px 6px rgba(120, 30, 30, 0.12),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.3);
 }
 
 .mljr-badge-info-solid {
@@ -183,7 +200,8 @@
   color: white;
   box-shadow:
     3px 3px 6px rgba(59, 130, 246, 0.25),
-    -3px -3px 6px rgba(255, 255, 255, 0.8);
+    inset -3px -3px 6px rgba(30, 60, 120, 0.12),
+    inset 3px 3px 6px rgba(255, 255, 255, 0.3);
 }
 
 /* Dark mode for solid badges */
@@ -191,7 +209,8 @@
 [data-theme="dark"] .mljr-badge-primary-solid {
   box-shadow:
     3px 3px 6px rgba(0, 0, 0, 0.35),
-    -3px -3px 6px rgba(68, 64, 60, 0.1),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.08),
     0 0 10px rgba(249, 115, 22, 0.2);
 }
 
@@ -199,15 +218,17 @@
 [data-theme="dark"] .mljr-badge-secondary-solid {
   box-shadow:
     3px 3px 6px rgba(0, 0, 0, 0.35),
-    -3px -3px 6px rgba(68, 64, 60, 0.1),
-    0 0 10px rgba(20, 184, 166, 0.2);
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
+    0 0 10px rgba(168, 85, 247, 0.2);
 }
 
 .dark .mljr-badge-success-solid,
 [data-theme="dark"] .mljr-badge-success-solid {
   box-shadow:
     3px 3px 6px rgba(0, 0, 0, 0.35),
-    -3px -3px 6px rgba(68, 64, 60, 0.1),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 10px rgba(16, 185, 129, 0.2);
 }
 
@@ -215,7 +236,8 @@
 [data-theme="dark"] .mljr-badge-warning-solid {
   box-shadow:
     3px 3px 6px rgba(0, 0, 0, 0.35),
-    -3px -3px 6px rgba(68, 64, 60, 0.1),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 10px rgba(234, 179, 8, 0.2);
 }
 
@@ -223,7 +245,8 @@
 [data-theme="dark"] .mljr-badge-error-solid {
   box-shadow:
     3px 3px 6px rgba(0, 0, 0, 0.35),
-    -3px -3px 6px rgba(68, 64, 60, 0.1),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 10px rgba(239, 68, 68, 0.2);
 }
 
@@ -231,7 +254,8 @@
 [data-theme="dark"] .mljr-badge-info-solid {
   box-shadow:
     3px 3px 6px rgba(0, 0, 0, 0.35),
-    -3px -3px 6px rgba(68, 64, 60, 0.1),
+    inset -3px -3px 6px rgba(0, 0, 0, 0.15),
+    inset 3px 3px 6px rgba(255, 200, 150, 0.06),
     0 0 10px rgba(59, 130, 246, 0.2);
 }
 
@@ -282,6 +306,23 @@
   box-shadow: 0 0 4px currentColor;
 }
 
+/* Badge Icon */
+.mljr-badge-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+.mljr-badge-sm .mljr-badge-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.mljr-badge-lg .mljr-badge-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 /* Removable Badge */
 .mljr-badge-removable {
   padding-right: var(--mljr-space-1);

package/src/components/breadcrumb.css

@@ -20,6 +20,9 @@
 }
 
 .mljr-breadcrumb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-1);
   color: var(--mljr-text-secondary);
   text-decoration: none;
   padding: var(--mljr-space-1) var(--mljr-space-3);

package/src/components/button.css

@@ -51,53 +51,49 @@
   background: var(--mljr-gradient-primary);
   color: white;
   box-shadow:
-    6px 6px 12px rgba(249, 115, 22, 0.3),
-    -6px -6px 12px rgba(255, 255, 255, 0.8),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    6px 6px 14px rgba(249, 115, 22, 0.3),
+    inset -6px -6px 14px rgba(120, 50, 10, 0.15),
+    inset 6px 6px 14px rgba(255, 255, 255, 0.35);
 }
 
 .mljr-btn-primary:hover {
   background: linear-gradient(135deg, var(--mljr-primary-300) 0%, var(--mljr-primary-500) 100%);
   box-shadow:
-    8px 8px 16px rgba(249, 115, 22, 0.35),
-    -8px -8px 16px rgba(255, 255, 255, 0.9),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    8px 8px 18px rgba(249, 115, 22, 0.35),
+    inset -8px -8px 18px rgba(120, 50, 10, 0.15),
+    inset 8px 8px 18px rgba(255, 255, 255, 0.4);
 }
 
 .mljr-btn-primary:active {
   background: linear-gradient(135deg, var(--mljr-primary-500) 0%, var(--mljr-primary-700) 100%);
   box-shadow:
-    inset 4px 4px 8px rgba(0, 0, 0, 0.2),
-    inset -4px -4px 8px rgba(255, 255, 255, 0.1);
+    inset 4px 4px 10px rgba(0, 0, 0, 0.25),
+    inset -4px -4px 10px rgba(255, 255, 255, 0.15);
 }
 
-/* Secondary Button (Teal) */
+/* Secondary Button (Purple) */
 .mljr-btn-secondary {
   background: var(--mljr-gradient-secondary);
   color: white;
   box-shadow:
-    6px 6px 12px rgba(20, 184, 166, 0.25),
-    -6px -6px 12px rgba(255, 255, 255, 0.8),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    6px 6px 14px rgba(168, 85, 247, 0.25),
+    inset -6px -6px 14px rgba(80, 30, 140, 0.15),
+    inset 6px 6px 14px rgba(255, 255, 255, 0.35);
 }
 
 .mljr-btn-secondary:hover {
   background: linear-gradient(135deg, var(--mljr-secondary-300) 0%, var(--mljr-secondary-500) 100%);
   box-shadow:
-    8px 8px 16px rgba(20, 184, 166, 0.3),
-    -8px -8px 16px rgba(255, 255, 255, 0.9),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    8px 8px 18px rgba(168, 85, 247, 0.3),
+    inset -8px -8px 18px rgba(80, 30, 140, 0.15),
+    inset 8px 8px 18px rgba(255, 255, 255, 0.4);
 }
 
 .mljr-btn-secondary:active {
   background: linear-gradient(135deg, var(--mljr-secondary-500) 0%, var(--mljr-secondary-700) 100%);
   box-shadow:
-    inset 4px 4px 8px rgba(0, 0, 0, 0.2),
-    inset -4px -4px 8px rgba(255, 255, 255, 0.1);
+    inset 4px 4px 10px rgba(0, 0, 0, 0.25),
+    inset -4px -4px 10px rgba(255, 255, 255, 0.15);
 }
 
 /* Outline Button Primary */
@@ -179,25 +175,23 @@
   background: linear-gradient(135deg, var(--mljr-error-light) 0%, var(--mljr-error) 100%);
   color: white;
   box-shadow:
-    6px 6px 12px rgba(239, 68, 68, 0.25),
-    -6px -6px 12px rgba(255, 255, 255, 0.8),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    6px 6px 14px rgba(239, 68, 68, 0.25),
+    inset -6px -6px 14px rgba(150, 30, 30, 0.15),
+    inset 6px 6px 14px rgba(255, 255, 255, 0.35);
 }
 
 .mljr-btn-danger:hover {
   background: linear-gradient(135deg, var(--mljr-error) 0%, var(--mljr-error-light) 100%);
   box-shadow:
-    8px 8px 16px rgba(239, 68, 68, 0.3),
-    -8px -8px 16px rgba(255, 255, 255, 0.9),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    8px 8px 18px rgba(239, 68, 68, 0.3),
+    inset -8px -8px 18px rgba(150, 30, 30, 0.15),
+    inset 8px 8px 18px rgba(255, 255, 255, 0.4);
 }
 
 .mljr-btn-danger:active {
   box-shadow:
-    inset 4px 4px 8px rgba(0, 0, 0, 0.2),
-    inset -4px -4px 8px rgba(255, 255, 255, 0.1);
+    inset 4px 4px 10px rgba(0, 0, 0, 0.25),
+    inset -4px -4px 10px rgba(255, 255, 255, 0.15);
 }
 
 /* Success Button */
@@ -205,25 +199,23 @@
   background: linear-gradient(135deg, var(--mljr-success-light) 0%, var(--mljr-success) 100%);
   color: white;
   box-shadow:
-    6px 6px 12px rgba(16, 185, 129, 0.25),
-    -6px -6px 12px rgba(255, 255, 255, 0.8),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    6px 6px 14px rgba(16, 185, 129, 0.25),
+    inset -6px -6px 14px rgba(5, 100, 60, 0.15),
+    inset 6px 6px 14px rgba(255, 255, 255, 0.35);
 }
 
 .mljr-btn-success:hover {
   background: linear-gradient(135deg, var(--mljr-success) 0%, var(--mljr-success-light) 100%);
   box-shadow:
-    8px 8px 16px rgba(16, 185, 129, 0.3),
-    -8px -8px 16px rgba(255, 255, 255, 0.9),
-    inset 2px 2px 4px rgba(255, 255, 255, 0.3),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
+    8px 8px 18px rgba(16, 185, 129, 0.3),
+    inset -8px -8px 18px rgba(5, 100, 60, 0.15),
+    inset 8px 8px 18px rgba(255, 255, 255, 0.4);
 }
 
 .mljr-btn-success:active {
   box-shadow:
-    inset 4px 4px 8px rgba(0, 0, 0, 0.2),
-    inset -4px -4px 8px rgba(255, 255, 255, 0.1);
+    inset 4px 4px 10px rgba(0, 0, 0, 0.25),
+    inset -4px -4px 10px rgba(255, 255, 255, 0.15);
 }
 
 /* Button Sizes */
@@ -347,37 +339,67 @@
 .dark .mljr-btn-primary,
 [data-theme="dark"] .mljr-btn-primary {
   box-shadow:
-    6px 6px 12px rgba(0, 0, 0, 0.4),
-    -6px -6px 12px rgba(68, 64, 60, 0.15),
-    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.2);
+    6px 6px 14px rgba(0, 0, 0, 0.4),
+    inset -6px -6px 14px rgba(0, 0, 0, 0.2),
+    inset 6px 6px 14px rgba(255, 200, 150, 0.1);
 }
 
 .dark .mljr-btn-primary:hover,
 [data-theme="dark"] .mljr-btn-primary:hover {
   box-shadow:
-    8px 8px 16px rgba(0, 0, 0, 0.45),
-    -8px -8px 16px rgba(68, 64, 60, 0.18),
-    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.2),
+    8px 8px 18px rgba(0, 0, 0, 0.45),
+    inset -8px -8px 18px rgba(0, 0, 0, 0.2),
+    inset 8px 8px 18px rgba(255, 200, 150, 0.12),
     0 0 20px rgba(249, 115, 22, 0.3);
 }
 
 .dark .mljr-btn-secondary,
 [data-theme="dark"] .mljr-btn-secondary {
   box-shadow:
-    6px 6px 12px rgba(0, 0, 0, 0.4),
-    -6px -6px 12px rgba(68, 64, 60, 0.15),
-    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.2);
+    6px 6px 14px rgba(0, 0, 0, 0.4),
+    inset -6px -6px 14px rgba(0, 0, 0, 0.2),
+    inset 6px 6px 14px rgba(255, 200, 150, 0.1);
 }
 
 .dark .mljr-btn-secondary:hover,
 [data-theme="dark"] .mljr-btn-secondary:hover {
   box-shadow:
-    8px 8px 16px rgba(0, 0, 0, 0.45),
-    -8px -8px 16px rgba(68, 64, 60, 0.18),
-    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
-    inset -1px -1px 2px rgba(0, 0, 0, 0.2),
-    0 0 20px rgba(20, 184, 166, 0.3);
+    8px 8px 18px rgba(0, 0, 0, 0.45),
+    inset -8px -8px 18px rgba(0, 0, 0, 0.2),
+    inset 8px 8px 18px rgba(255, 200, 150, 0.12),
+    0 0 20px rgba(168, 85, 247, 0.3);
+}
+
+.dark .mljr-btn-danger,
+[data-theme="dark"] .mljr-btn-danger {
+  box-shadow:
+    6px 6px 14px rgba(0, 0, 0, 0.4),
+    inset -6px -6px 14px rgba(0, 0, 0, 0.2),
+    inset 6px 6px 14px rgba(255, 200, 150, 0.1);
+}
+
+.dark .mljr-btn-danger:hover,
+[data-theme="dark"] .mljr-btn-danger:hover {
+  box-shadow:
+    8px 8px 18px rgba(0, 0, 0, 0.45),
+    inset -8px -8px 18px rgba(0, 0, 0, 0.2),
+    inset 8px 8px 18px rgba(255, 200, 150, 0.12),
+    0 0 20px rgba(239, 68, 68, 0.3);
+}
+
+.dark .mljr-btn-success,
+[data-theme="dark"] .mljr-btn-success {
+  box-shadow:
+    6px 6px 14px rgba(0, 0, 0, 0.4),
+    inset -6px -6px 14px rgba(0, 0, 0, 0.2),
+    inset 6px 6px 14px rgba(255, 200, 150, 0.1);
+}
+
+.dark .mljr-btn-success:hover,
+[data-theme="dark"] .mljr-btn-success:hover {
+  box-shadow:
+    8px 8px 18px rgba(0, 0, 0, 0.45),
+    inset -8px -8px 18px rgba(0, 0, 0, 0.2),
+    inset 8px 8px 18px rgba(255, 200, 150, 0.12),
+    0 0 20px rgba(16, 185, 129, 0.3);
 }