mljr-css 0.1.0

package/src/utilities/utilities.css

@@ -0,0 +1,598 @@
+/* ============================================
+   MLJR CSS Framework - Utilities
+   Claymorphism: Soft rounded utility classes
+   ============================================ */
+
+/* Display */
+.mljr-hidden { display: none; }
+.mljr-block { display: block; }
+.mljr-inline { display: inline; }
+.mljr-inline-block { display: inline-block; }
+
+/* Visibility */
+.mljr-visible { visibility: visible; }
+.mljr-invisible { visibility: hidden; }
+
+/* Overflow */
+.mljr-overflow-auto { overflow: auto; }
+.mljr-overflow-hidden { overflow: hidden; }
+.mljr-overflow-scroll { overflow: scroll; }
+.mljr-overflow-x-auto { overflow-x: auto; }
+.mljr-overflow-y-auto { overflow-y: auto; }
+
+/* Position */
+.mljr-relative { position: relative; }
+.mljr-absolute { position: absolute; }
+.mljr-fixed { position: fixed; }
+.mljr-sticky { position: sticky; }
+
+/* Inset */
+.mljr-inset-0 { inset: 0; }
+.mljr-top-0 { top: 0; }
+.mljr-right-0 { right: 0; }
+.mljr-bottom-0 { bottom: 0; }
+.mljr-left-0 { left: 0; }
+
+/* Z-index */
+.mljr-z-0 { z-index: 0; }
+.mljr-z-10 { z-index: 10; }
+.mljr-z-20 { z-index: 20; }
+.mljr-z-30 { z-index: 30; }
+.mljr-z-40 { z-index: 40; }
+.mljr-z-50 { z-index: 50; }
+
+/* Width & Height */
+.mljr-w-full { width: 100%; }
+.mljr-w-auto { width: auto; }
+.mljr-w-screen { width: 100vw; }
+.mljr-h-full { height: 100%; }
+.mljr-h-auto { height: auto; }
+.mljr-h-screen { height: 100vh; }
+.mljr-min-h-screen { min-height: 100vh; }
+
+/* Margin */
+.mljr-m-0 { margin: 0; }
+.mljr-m-auto { margin: auto; }
+.mljr-mx-auto { margin-left: auto; margin-right: auto; }
+.mljr-my-auto { margin-top: auto; margin-bottom: auto; }
+.mljr-mt-0 { margin-top: 0; }
+.mljr-mt-1 { margin-top: var(--mljr-space-1); }
+.mljr-mt-2 { margin-top: var(--mljr-space-2); }
+.mljr-mt-3 { margin-top: var(--mljr-space-3); }
+.mljr-mt-4 { margin-top: var(--mljr-space-4); }
+.mljr-mt-6 { margin-top: var(--mljr-space-6); }
+.mljr-mt-8 { margin-top: var(--mljr-space-8); }
+.mljr-mb-0 { margin-bottom: 0; }
+.mljr-mb-1 { margin-bottom: var(--mljr-space-1); }
+.mljr-mb-2 { margin-bottom: var(--mljr-space-2); }
+.mljr-mb-3 { margin-bottom: var(--mljr-space-3); }
+.mljr-mb-4 { margin-bottom: var(--mljr-space-4); }
+.mljr-mb-6 { margin-bottom: var(--mljr-space-6); }
+.mljr-mb-8 { margin-bottom: var(--mljr-space-8); }
+
+/* Padding */
+.mljr-p-0 { padding: 0; }
+.mljr-p-1 { padding: var(--mljr-space-1); }
+.mljr-p-2 { padding: var(--mljr-space-2); }
+.mljr-p-3 { padding: var(--mljr-space-3); }
+.mljr-p-4 { padding: var(--mljr-space-4); }
+.mljr-p-6 { padding: var(--mljr-space-6); }
+.mljr-p-8 { padding: var(--mljr-space-8); }
+.mljr-px-4 { padding-left: var(--mljr-space-4); padding-right: var(--mljr-space-4); }
+.mljr-py-4 { padding-top: var(--mljr-space-4); padding-bottom: var(--mljr-space-4); }
+
+/* Text */
+.mljr-text-left { text-align: left; }
+.mljr-text-center { text-align: center; }
+.mljr-text-right { text-align: right; }
+.mljr-text-justify { text-align: justify; }
+
+.mljr-text-xs { font-size: var(--mljr-text-xs); }
+.mljr-text-sm { font-size: var(--mljr-text-sm); }
+.mljr-text-base { font-size: var(--mljr-text-base); }
+.mljr-text-lg { font-size: var(--mljr-text-lg); }
+.mljr-text-xl { font-size: var(--mljr-text-xl); }
+.mljr-text-2xl { font-size: var(--mljr-text-2xl); }
+.mljr-text-3xl { font-size: var(--mljr-text-3xl); }
+.mljr-text-4xl { font-size: var(--mljr-text-4xl); }
+
+.mljr-font-normal { font-weight: 400; }
+.mljr-font-medium { font-weight: 500; }
+.mljr-font-semibold { font-weight: 600; }
+.mljr-font-bold { font-weight: 700; }
+
+.mljr-uppercase { text-transform: uppercase; }
+.mljr-lowercase { text-transform: lowercase; }
+.mljr-capitalize { text-transform: capitalize; }
+
+.mljr-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mljr-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.mljr-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Colors */
+.mljr-text-primary { color: var(--mljr-primary-600); }
+.mljr-text-secondary { color: var(--mljr-secondary-600); }
+.mljr-text-success { color: var(--mljr-success); }
+.mljr-text-warning { color: var(--mljr-warning); }
+.mljr-text-error { color: var(--mljr-error); }
+.mljr-text-info { color: var(--mljr-info); }
+.mljr-text-muted { color: var(--mljr-text-muted); }
+
+.mljr-bg-primary { background-color: var(--mljr-primary-600); }
+.mljr-bg-secondary { background-color: var(--mljr-secondary-600); }
+.mljr-bg-success { background-color: var(--mljr-success); }
+.mljr-bg-warning { background-color: var(--mljr-warning); }
+.mljr-bg-error { background-color: var(--mljr-error); }
+.mljr-bg-info { background-color: var(--mljr-info); }
+
+/* Border */
+.mljr-border { border: 1px solid var(--mljr-border); }
+.mljr-border-0 { border: none; }
+.mljr-border-t { border-top: 1px solid var(--mljr-border); }
+.mljr-border-b { border-bottom: 1px solid var(--mljr-border); }
+.mljr-border-l { border-left: 1px solid var(--mljr-border); }
+.mljr-border-r { border-right: 1px solid var(--mljr-border); }
+
+.mljr-rounded { border-radius: var(--mljr-radius); }
+.mljr-rounded-sm { border-radius: var(--mljr-radius-sm); }
+.mljr-rounded-md { border-radius: var(--mljr-radius-md); }
+.mljr-rounded-lg { border-radius: var(--mljr-radius-lg); }
+.mljr-rounded-xl { border-radius: var(--mljr-radius-xl); }
+.mljr-rounded-2xl { border-radius: var(--mljr-radius-2xl); }
+.mljr-rounded-full { border-radius: var(--mljr-radius-full); }
+.mljr-rounded-none { border-radius: 0; }
+
+/* Shadow */
+.mljr-shadow-sm { box-shadow: var(--mljr-shadow-sm); }
+.mljr-shadow { box-shadow: var(--mljr-shadow); }
+.mljr-shadow-md { box-shadow: var(--mljr-shadow-md); }
+.mljr-shadow-lg { box-shadow: var(--mljr-shadow-lg); }
+.mljr-shadow-xl { box-shadow: var(--mljr-shadow-xl); }
+.mljr-shadow-none { box-shadow: none; }
+
+/* Opacity */
+.mljr-opacity-0 { opacity: 0; }
+.mljr-opacity-25 { opacity: 0.25; }
+.mljr-opacity-50 { opacity: 0.5; }
+.mljr-opacity-75 { opacity: 0.75; }
+.mljr-opacity-100 { opacity: 1; }
+
+/* Cursor */
+.mljr-cursor-pointer { cursor: pointer; }
+.mljr-cursor-not-allowed { cursor: not-allowed; }
+.mljr-cursor-wait { cursor: wait; }
+
+/* Pointer Events */
+.mljr-pointer-events-none { pointer-events: none; }
+.mljr-pointer-events-auto { pointer-events: auto; }
+
+/* User Select */
+.mljr-select-none { user-select: none; }
+.mljr-select-text { user-select: text; }
+.mljr-select-all { user-select: all; }
+
+/* Screen Reader Only */
+.mljr-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Focus Ring */
+.mljr-focus-ring:focus-visible {
+  outline: 3px solid var(--mljr-primary-300);
+  outline-offset: 2px;
+}
+
+/* Transition */
+.mljr-transition { transition: all var(--mljr-transition); }
+.mljr-transition-fast { transition: all var(--mljr-transition-fast); }
+.mljr-transition-slow { transition: all var(--mljr-transition-slow); }
+.mljr-transition-none { transition: none; }
+
+/* Animation */
+.mljr-animate-spin {
+  animation: mljr-spin 1s linear infinite;
+}
+
+.mljr-animate-pulse {
+  animation: mljr-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.mljr-animate-bounce {
+  animation: mljr-bounce 1s infinite;
+}
+
+@keyframes mljr-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes mljr-bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+/* Responsive Utilities */
+@media (min-width: 640px) {
+  .mljr-sm\:hidden { display: none; }
+  .mljr-sm\:block { display: block; }
+  .mljr-sm\:flex { display: flex; }
+  .mljr-sm\:grid { display: grid; }
+}
+
+@media (min-width: 768px) {
+  .mljr-md\:hidden { display: none; }
+  .mljr-md\:block { display: block; }
+  .mljr-md\:flex { display: flex; }
+  .mljr-md\:grid { display: grid; }
+}
+
+@media (min-width: 1024px) {
+  .mljr-lg\:hidden { display: none; }
+  .mljr-lg\:block { display: block; }
+  .mljr-lg\:flex { display: flex; }
+  .mljr-lg\:grid { display: grid; }
+}
+
+/* ============================================
+   Claymorphism Utilities
+   Soft, rounded, playful 3D effects
+   ============================================ */
+
+/* Clay Shadow - Raised/convex effect */
+.mljr-clay {
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-clay-sm {
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-clay-lg {
+  box-shadow: var(--mljr-clay-shadow-lg);
+}
+
+/* Clay Inset - Pressed/concave effect */
+.mljr-clay-inset {
+  box-shadow: var(--mljr-clay-inset);
+}
+
+.mljr-clay-inset-sm {
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+/* Clay Button - Raised with inner highlight */
+.mljr-clay-btn {
+  box-shadow: var(--mljr-clay-btn);
+}
+
+/* Hover clay effects */
+.mljr-hover-clay:hover {
+  box-shadow: var(--mljr-clay-shadow);
+  transform: translateY(-2px);
+  transition: all var(--mljr-transition);
+}
+
+.mljr-hover-clay-lg:hover {
+  box-shadow: var(--mljr-clay-shadow-lg);
+  transform: translateY(-4px);
+  transition: all var(--mljr-transition);
+}
+
+/* Active/pressed clay effect */
+.mljr-active-clay:active {
+  box-shadow: var(--mljr-clay-inset-sm);
+  transform: translateY(0);
+}
+
+/* Frosted Glass Effect */
+.mljr-frosted {
+  background: var(--mljr-frosted-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--mljr-frosted-border);
+}
+
+.mljr-frosted-strong {
+  background: var(--mljr-frosted-bg-strong);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--mljr-frosted-border-strong);
+}
+
+.mljr-frosted-subtle {
+  background: var(--mljr-frosted-bg-subtle);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--mljr-frosted-border);
+}
+
+/* Rounded Clay - Large border radius for clay look */
+.mljr-rounded-clay {
+  border-radius: var(--mljr-radius-xl);
+}
+
+.mljr-rounded-clay-sm {
+  border-radius: var(--mljr-radius-lg);
+}
+
+.mljr-rounded-clay-lg {
+  border-radius: var(--mljr-radius-2xl);
+}
+
+/* ============================================
+   Gradient Utilities (Soft/Warm)
+   ============================================ */
+
+/* Gradient text */
+.mljr-gradient-text-primary {
+  background: linear-gradient(135deg, var(--mljr-primary-500) 0%, var(--mljr-primary-700) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.mljr-gradient-text-secondary {
+  background: linear-gradient(135deg, var(--mljr-secondary-400) 0%, var(--mljr-secondary-600) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.mljr-gradient-text-accent {
+  background: linear-gradient(135deg, var(--mljr-accent-400) 0%, var(--mljr-accent-600) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Multi-color gradient (brand colors) */
+.mljr-gradient-text-brand {
+  background: linear-gradient(135deg, var(--mljr-primary-400) 0%, var(--mljr-accent-500) 50%, var(--mljr-secondary-500) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Background gradients */
+.mljr-bg-gradient-primary {
+  background: var(--mljr-gradient-primary);
+}
+
+.mljr-bg-gradient-secondary {
+  background: var(--mljr-gradient-secondary);
+}
+
+.mljr-bg-gradient-accent {
+  background: var(--mljr-gradient-accent);
+}
+
+.mljr-bg-gradient-brand {
+  background: var(--mljr-gradient-brand);
+}
+
+/* Soft warm mesh gradient */
+.mljr-bg-mesh-warm {
+  background:
+    radial-gradient(ellipse at 20% 30%, rgba(249, 115, 22, 0.15) 0%, transparent 55%),
+    radial-gradient(ellipse at 80% 70%, rgba(168, 85, 247, 0.12) 0%, transparent 55%),
+    radial-gradient(ellipse at 50% 100%, rgba(20, 184, 166, 0.1) 0%, transparent 55%),
+    var(--mljr-bg);
+}
+
+/* Animated gradient background */
+.mljr-bg-gradient-animated {
+  background: linear-gradient(
+    -45deg,
+    var(--mljr-primary-300),
+    var(--mljr-primary-500),
+    var(--mljr-secondary-400),
+    var(--mljr-accent-400)
+  );
+  background-size: 400% 400%;
+  animation: mljr-gradient-shift 8s ease infinite;
+}
+
+@keyframes mljr-gradient-shift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* ============================================
+   Status Indicators (Soft/Rounded)
+   ============================================ */
+
+/* Soft status dot */
+.mljr-status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--mljr-radius-full);
+  display: inline-block;
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-status-dot-primary {
+  background: var(--mljr-gradient-primary);
+}
+
+.mljr-status-dot-secondary {
+  background: var(--mljr-gradient-secondary);
+}
+
+.mljr-status-dot-success {
+  background: var(--mljr-success);
+}
+
+.mljr-status-dot-warning {
+  background: var(--mljr-warning);
+}
+
+.mljr-status-dot-error {
+  background: var(--mljr-error);
+}
+
+/* Pulsing status dot */
+.mljr-status-dot-pulse {
+  animation: mljr-status-pulse 2s ease-in-out infinite;
+}
+
+@keyframes mljr-status-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(0.9);
+  }
+}
+
+/* ============================================
+   Playful Hover Effects
+   ============================================ */
+
+/* Lift on hover */
+.mljr-hover-lift:hover {
+  transform: translateY(-4px);
+  transition: transform var(--mljr-transition);
+}
+
+/* Scale on hover */
+.mljr-hover-scale:hover {
+  transform: scale(1.02);
+  transition: transform var(--mljr-transition);
+}
+
+/* Subtle bounce on hover */
+.mljr-hover-bounce:hover {
+  animation: mljr-subtle-bounce 0.4s ease;
+}
+
+@keyframes mljr-subtle-bounce {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+  100% { transform: translateY(0); }
+}
+
+/* Soft glow on hover (warm) */
+.mljr-hover-glow:hover {
+  box-shadow:
+    var(--mljr-clay-shadow),
+    0 0 20px rgba(249, 115, 22, 0.15);
+  transition: box-shadow var(--mljr-transition);
+}
+
+/* ============================================
+   Soft Panel/Container Utilities
+   ============================================ */
+
+/* Soft panel - combines clay effects */
+.mljr-soft-panel {
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-xl);
+  box-shadow: var(--mljr-clay-shadow);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.dark .mljr-soft-panel,
+[data-theme="dark"] .mljr-soft-panel {
+  background: var(--mljr-bg-secondary);
+  border-color: rgba(68, 64, 60, 0.3);
+}
+
+/* Inset panel - pressed appearance */
+.mljr-inset-panel {
+  background: var(--mljr-bg-secondary);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-inset-sm);
+}
+
+/* Floating panel - elevated appearance */
+.mljr-floating-panel {
+  background: var(--mljr-bg);
+  border-radius: var(--mljr-radius-2xl);
+  box-shadow: var(--mljr-clay-shadow-lg);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+}
+
+.dark .mljr-floating-panel,
+[data-theme="dark"] .mljr-floating-panel {
+  background: var(--mljr-bg-secondary);
+  border-color: rgba(68, 64, 60, 0.4);
+}
+
+/* ============================================
+   Display Font Utility
+   ============================================ */
+
+.mljr-font-display {
+  font-family: var(--mljr-font-display);
+}
+
+/* ============================================
+   Soft Shimmer Animation
+   ============================================ */
+
+.mljr-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+
+.mljr-shimmer::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 60%
+  );
+  transform: translateX(-100%);
+  animation: mljr-shimmer 2.5s ease-in-out infinite;
+}
+
+@keyframes mljr-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.dark .mljr-shimmer::after,
+[data-theme="dark"] .mljr-shimmer::after {
+  background: linear-gradient(
+    105deg,
+    transparent 40%,
+    rgba(255, 255, 255, 0.1) 50%,
+    transparent 60%
+  );
+}