mljr-css 0.1.0

package/src/components/avatar.css

@@ -0,0 +1,222 @@
+/* ============================================
+   MLJR CSS Framework - Avatar Component
+   Claymorphism: Soft square default shape
+   ============================================ */
+
+.mljr-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  /* Soft square: rounded corners (30% radius) */
+  border-radius: 30%;
+  background-color: var(--mljr-bg-secondary);
+  font-family: var(--mljr-font-sans);
+  font-weight: 500;
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-primary-600);
+  overflow: hidden;
+  flex-shrink: 0;
+  box-shadow: var(--mljr-clay-shadow-sm);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+}
+
+.mljr-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.mljr-avatar-initials {
+  text-transform: uppercase;
+  user-select: none;
+}
+
+/* Sizes */
+.mljr-avatar-xs {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-avatar-sm {
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-avatar-md {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--mljr-text-sm);
+}
+
+.mljr-avatar-lg {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--mljr-text-lg);
+}
+
+.mljr-avatar-xl {
+  width: 5.5rem;
+  height: 5.5rem;
+  font-size: var(--mljr-text-xl);
+}
+
+.mljr-avatar-2xl {
+  width: 7rem;
+  height: 7rem;
+  font-size: var(--mljr-text-2xl);
+}
+
+/* Status indicator - soft pulsing dot */
+.mljr-avatar-status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: var(--mljr-radius-full);
+  border: 2px solid var(--mljr-bg);
+  z-index: 1;
+}
+
+.mljr-avatar-status-online {
+  background-color: var(--mljr-success);
+  animation: mljr-avatar-status-pulse 2s ease-in-out infinite;
+}
+
+.mljr-avatar-status-offline {
+  background-color: var(--mljr-gray-400);
+}
+
+.mljr-avatar-status-busy {
+  background-color: var(--mljr-error);
+}
+
+.mljr-avatar-status-away {
+  background-color: var(--mljr-warning);
+}
+
+/* mljr-status-pulse animation - distinct from utilities.css version */
+@keyframes mljr-avatar-status-pulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
+  }
+  50% {
+    opacity: 0.85;
+    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
+  }
+}
+
+/* Size adjustments for status */
+.mljr-avatar-xs .mljr-avatar-status {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-width: 1.5px;
+}
+
+.mljr-avatar-sm .mljr-avatar-status {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.mljr-avatar-lg .mljr-avatar-status,
+.mljr-avatar-xl .mljr-avatar-status,
+.mljr-avatar-2xl .mljr-avatar-status {
+  width: 1rem;
+  height: 1rem;
+  border-width: 3px;
+}
+
+/* Ring styles - soft glow effect */
+.mljr-avatar-ring {
+  box-shadow:
+    var(--mljr-clay-shadow-sm),
+    0 0 0 3px var(--mljr-bg),
+    0 0 0 5px var(--mljr-primary-300);
+}
+
+.mljr-avatar-ring-secondary {
+  box-shadow:
+    var(--mljr-clay-shadow-sm),
+    0 0 0 3px var(--mljr-bg),
+    0 0 0 5px var(--mljr-secondary-300);
+}
+
+.mljr-avatar-ring-accent {
+  box-shadow:
+    var(--mljr-clay-shadow-sm),
+    0 0 0 3px var(--mljr-bg),
+    0 0 0 5px var(--mljr-accent-300);
+}
+
+/* Avatar group */
+.mljr-avatar-group {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.mljr-avatar-group .mljr-avatar {
+  margin-left: -0.75rem;
+  box-shadow: var(--mljr-clay-shadow-sm), -2px 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.mljr-avatar-group .mljr-avatar:last-child {
+  margin-left: 0;
+}
+
+/* Placeholder icon */
+.mljr-avatar-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mljr-avatar-placeholder svg {
+  width: 50%;
+  height: 50%;
+  color: var(--mljr-primary-400);
+}
+
+/* Color variants */
+.mljr-avatar-primary {
+  background: var(--mljr-primary-100);
+  color: var(--mljr-primary-600);
+}
+
+.mljr-avatar-secondary {
+  background: var(--mljr-secondary-100);
+  color: var(--mljr-secondary-600);
+}
+
+.mljr-avatar-accent {
+  background: var(--mljr-accent-100);
+  color: var(--mljr-accent-600);
+}
+
+/* Square variant (soft square is now default) */
+.mljr-avatar-square {
+  border-radius: 30%;
+}
+
+/* Circle variant */
+.mljr-avatar-circle {
+  border-radius: 50%;
+}
+
+/* Dark mode */
+.dark .mljr-avatar,
+[data-theme="dark"] .mljr-avatar {
+  background-color: var(--mljr-bg-tertiary);
+  border-color: rgba(68, 64, 60, 0.5);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.dark .mljr-avatar-status,
+[data-theme="dark"] .mljr-avatar-status {
+  border-color: var(--mljr-bg);
+}

package/src/components/badge.css

@@ -0,0 +1,315 @@
+/* ============================================
+   MLJR CSS Framework - Badge Component
+   Claymorphism: Soft pill shapes with shadows
+   ============================================ */
+
+.mljr-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-1);
+  padding: var(--mljr-space-1) var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+  font-weight: 500;
+  line-height: var(--mljr-leading-normal);
+  border-radius: var(--mljr-radius-full);
+  white-space: nowrap;
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transition: all var(--mljr-transition-fast);
+}
+
+/* Default Badge */
+.mljr-badge-default {
+  background-color: var(--mljr-bg-secondary);
+  color: var(--mljr-text);
+}
+
+/* Primary Badge (Orange) */
+.mljr-badge-primary {
+  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);
+}
+
+.dark .mljr-badge-primary,
+[data-theme="dark"] .mljr-badge-primary {
+  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),
+    0 0 8px rgba(249, 115, 22, 0.12);
+}
+
+/* Secondary Badge (Teal) */
+.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);
+}
+
+.dark .mljr-badge-secondary,
+[data-theme="dark"] .mljr-badge-secondary {
+  background-color: rgba(20, 184, 166, 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);
+}
+
+/* Success Badge */
+.mljr-badge-success {
+  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);
+}
+
+.dark .mljr-badge-success,
+[data-theme="dark"] .mljr-badge-success {
+  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),
+    0 0 8px rgba(16, 185, 129, 0.12);
+}
+
+/* Warning Badge */
+.mljr-badge-warning {
+  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);
+}
+
+.dark .mljr-badge-warning,
+[data-theme="dark"] .mljr-badge-warning {
+  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),
+    0 0 8px rgba(234, 179, 8, 0.12);
+}
+
+/* Error Badge */
+.mljr-badge-error {
+  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);
+}
+
+.dark .mljr-badge-error,
+[data-theme="dark"] .mljr-badge-error {
+  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),
+    0 0 8px rgba(239, 68, 68, 0.12);
+}
+
+/* Info Badge */
+.mljr-badge-info {
+  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);
+}
+
+.dark .mljr-badge-info,
+[data-theme="dark"] .mljr-badge-info {
+  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),
+    0 0 8px rgba(59, 130, 246, 0.12);
+}
+
+/* Solid Variants */
+.mljr-badge-primary-solid {
+  background: var(--mljr-gradient-primary);
+  color: white;
+  box-shadow:
+    3px 3px 6px rgba(249, 115, 22, 0.25),
+    -3px -3px 6px rgba(255, 255, 255, 0.8);
+}
+
+.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);
+}
+
+.mljr-badge-success-solid {
+  background: linear-gradient(135deg, var(--mljr-success-light) 0%, var(--mljr-success) 100%);
+  color: white;
+  box-shadow:
+    3px 3px 6px rgba(16, 185, 129, 0.25),
+    -3px -3px 6px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-badge-warning-solid {
+  background: linear-gradient(135deg, var(--mljr-warning-light) 0%, var(--mljr-warning) 100%);
+  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);
+}
+
+.mljr-badge-error-solid {
+  background: linear-gradient(135deg, var(--mljr-error-light) 0%, var(--mljr-error) 100%);
+  color: white;
+  box-shadow:
+    3px 3px 6px rgba(239, 68, 68, 0.25),
+    -3px -3px 6px rgba(255, 255, 255, 0.8);
+}
+
+.mljr-badge-info-solid {
+  background: linear-gradient(135deg, var(--mljr-info-light) 0%, var(--mljr-info) 100%);
+  color: white;
+  box-shadow:
+    3px 3px 6px rgba(59, 130, 246, 0.25),
+    -3px -3px 6px rgba(255, 255, 255, 0.8);
+}
+
+/* Dark mode for solid badges */
+.dark .mljr-badge-primary-solid,
+[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),
+    0 0 10px rgba(249, 115, 22, 0.2);
+}
+
+.dark .mljr-badge-secondary-solid,
+[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);
+}
+
+.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),
+    0 0 10px rgba(16, 185, 129, 0.2);
+}
+
+.dark .mljr-badge-warning-solid,
+[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),
+    0 0 10px rgba(234, 179, 8, 0.2);
+}
+
+.dark .mljr-badge-error-solid,
+[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),
+    0 0 10px rgba(239, 68, 68, 0.2);
+}
+
+.dark .mljr-badge-info-solid,
+[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),
+    0 0 10px rgba(59, 130, 246, 0.2);
+}
+
+/* Outline Variants */
+.mljr-badge-outline {
+  background-color: transparent;
+  color: var(--mljr-text);
+  border: 1.5px solid var(--mljr-border-strong);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-badge-outline-primary {
+  background-color: transparent;
+  color: var(--mljr-primary-600);
+  border: 1.5px solid var(--mljr-primary-300);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-badge-outline-secondary {
+  background-color: transparent;
+  color: var(--mljr-secondary-600);
+  border: 1.5px solid var(--mljr-secondary-300);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+/* Badge Sizes */
+.mljr-badge-sm {
+  padding: 0 var(--mljr-space-2);
+  font-size: 0.625rem;
+}
+
+.mljr-badge-lg {
+  padding: var(--mljr-space-1) var(--mljr-space-4);
+  font-size: var(--mljr-text-sm);
+}
+
+/* Badge with Dot */
+.mljr-badge-dot {
+  padding-left: var(--mljr-space-2);
+}
+
+.mljr-badge-dot::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--mljr-radius-full);
+  background-color: currentColor;
+  box-shadow: 0 0 4px currentColor;
+}
+
+/* Removable Badge */
+.mljr-badge-removable {
+  padding-right: var(--mljr-space-1);
+}
+
+.mljr-badge-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin-left: var(--mljr-space-1);
+  background: none;
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  opacity: 0.7;
+  cursor: pointer;
+  transition: opacity var(--mljr-transition-fast), background-color var(--mljr-transition-fast);
+}
+
+.mljr-badge-remove:hover {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode */
+.dark .mljr-badge,
+[data-theme="dark"] .mljr-badge {
+  box-shadow: var(--mljr-clay-shadow-sm);
+}

package/src/components/breadcrumb.css

@@ -0,0 +1,100 @@
+/* ============================================
+   MLJR CSS Framework - Breadcrumb Component
+   Claymorphism: Soft rounded navigation
+   ============================================ */
+
+.mljr-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mljr-space-1);
+  font-size: var(--mljr-text-sm);
+  font-family: var(--mljr-font-sans);
+}
+
+.mljr-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mljr-space-1);
+  color: var(--mljr-text-muted);
+}
+
+.mljr-breadcrumb-link {
+  color: var(--mljr-text-secondary);
+  text-decoration: none;
+  padding: var(--mljr-space-1) var(--mljr-space-3);
+  border-radius: var(--mljr-radius-sm);
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-breadcrumb-link:hover {
+  color: var(--mljr-primary-600);
+  background: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  transform: translateY(-1px);
+}
+
+.mljr-breadcrumb-link:focus-visible {
+  outline: 3px solid var(--mljr-primary-300);
+  outline-offset: 2px;
+}
+
+/* Current/Active item */
+.mljr-breadcrumb-item-active .mljr-breadcrumb-link,
+.mljr-breadcrumb-link[aria-current="page"] {
+  color: var(--mljr-primary-600);
+  font-weight: 500;
+  background: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+/* Separator */
+.mljr-breadcrumb-separator {
+  color: var(--mljr-text-muted);
+  margin: 0 var(--mljr-space-1);
+  user-select: none;
+  font-size: 0.875em;
+}
+
+/* Contained variant - soft panel background */
+.mljr-breadcrumb-contained {
+  background: var(--mljr-bg);
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  border: 1px solid var(--mljr-border);
+}
+
+.mljr-breadcrumb-contained .mljr-breadcrumb-link:hover {
+  background: var(--mljr-bg-tertiary);
+}
+
+/* Size variants */
+.mljr-breadcrumb-sm {
+  font-size: var(--mljr-text-xs);
+  gap: var(--mljr-space-1);
+}
+
+.mljr-breadcrumb-sm .mljr-breadcrumb-link {
+  padding: var(--mljr-space-1) var(--mljr-space-2);
+}
+
+.mljr-breadcrumb-lg {
+  font-size: var(--mljr-text-base);
+}
+
+.mljr-breadcrumb-lg .mljr-breadcrumb-link {
+  padding: var(--mljr-space-2) var(--mljr-space-4);
+}
+
+/* Dark mode */
+.dark .mljr-breadcrumb-contained,
+[data-theme="dark"] .mljr-breadcrumb-contained {
+  background: var(--mljr-bg-secondary);
+  border-color: var(--mljr-border);
+}
+
+.dark .mljr-breadcrumb-link:hover,
+[data-theme="dark"] .mljr-breadcrumb-link:hover {
+  background: var(--mljr-bg-tertiary);
+}