mljr-css 0.1.0

package/src/base/typography.css

@@ -0,0 +1,286 @@
+/* ============================================
+   MLJR CSS Framework - Typography
+   Detroit: Become Human inspired
+   Clean, thin, geometric - using Inter with light weights
+   ============================================ */
+
+/* Headings - Inter with lighter weights for Detroit minimalist style */
+.mljr-h1 {
+  font-family: var(--mljr-font-display);
+  font-size: var(--mljr-text-4xl);
+  font-weight: 300;
+  line-height: var(--mljr-leading-tight);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mljr-h2 {
+  font-family: var(--mljr-font-display);
+  font-size: var(--mljr-text-3xl);
+  font-weight: 300;
+  line-height: var(--mljr-leading-tight);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.mljr-h3 {
+  font-family: var(--mljr-font-display);
+  font-size: var(--mljr-text-2xl);
+  font-weight: 400;
+  line-height: var(--mljr-leading-tight);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.mljr-h4 {
+  font-family: var(--mljr-font-display);
+  font-size: var(--mljr-text-xl);
+  font-weight: 400;
+  line-height: var(--mljr-leading-tight);
+  letter-spacing: 0.03em;
+}
+
+.mljr-h5 {
+  font-family: var(--mljr-font-display);
+  font-size: var(--mljr-text-lg);
+  font-weight: 400;
+  line-height: var(--mljr-leading-tight);
+  letter-spacing: 0.02em;
+}
+
+.mljr-h6 {
+  font-family: var(--mljr-font-display);
+  font-size: var(--mljr-text-base);
+  font-weight: 400;
+  line-height: var(--mljr-leading-tight);
+  letter-spacing: 0.02em;
+}
+
+/* Paragraph */
+.mljr-p {
+  font-size: var(--mljr-text-base);
+  line-height: var(--mljr-leading-relaxed);
+  color: var(--mljr-text-secondary);
+}
+
+.mljr-lead {
+  font-size: var(--mljr-text-xl);
+  line-height: var(--mljr-leading-relaxed);
+  color: var(--mljr-text-secondary);
+}
+
+.mljr-small {
+  font-size: var(--mljr-text-sm);
+  line-height: var(--mljr-leading-normal);
+}
+
+.mljr-muted {
+  color: var(--mljr-text-muted);
+}
+
+/* Links */
+.mljr-link {
+  color: var(--mljr-primary-600);
+  text-decoration: none;
+  transition: color var(--mljr-transition-fast);
+}
+
+.mljr-link:hover {
+  color: var(--mljr-primary-700);
+  text-decoration: underline;
+}
+
+.mljr-link:focus-visible {
+  outline: 2px solid var(--mljr-ring);
+  outline-offset: 2px;
+  border-radius: var(--mljr-radius-sm);
+}
+
+.mljr-link--secondary {
+  color: var(--mljr-secondary-600);
+}
+
+.mljr-link--secondary:hover {
+  color: var(--mljr-secondary-700);
+}
+
+/* Code */
+.mljr-code {
+  font-family: var(--mljr-font-mono);
+  font-size: var(--mljr-text-sm);
+  background-color: var(--mljr-bg-tertiary);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--mljr-radius-sm);
+}
+
+.mljr-pre {
+  font-family: var(--mljr-font-mono);
+  font-size: var(--mljr-text-sm);
+  background-color: var(--mljr-bg-tertiary);
+  padding: var(--mljr-space-4);
+  border-radius: var(--mljr-radius-md);
+  overflow-x: auto;
+}
+
+/* Blockquote */
+.mljr-blockquote {
+  padding-left: var(--mljr-space-4);
+  border-left: 4px solid var(--mljr-primary-500);
+  font-style: italic;
+  color: var(--mljr-text-secondary);
+}
+
+/* Lists */
+.mljr-list {
+  padding-left: var(--mljr-space-6);
+  list-style-type: disc;
+}
+
+.mljr-list li {
+  margin-bottom: var(--mljr-space-1);
+}
+
+.mljr-list-ordered {
+  padding-left: var(--mljr-space-6);
+  list-style-type: decimal;
+}
+
+.mljr-list-ordered li {
+  margin-bottom: var(--mljr-space-1);
+}
+
+/* Prose - for content areas */
+.mljr-prose {
+  max-width: 65ch;
+  color: var(--mljr-text);
+}
+
+.mljr-prose > * + * {
+  margin-top: var(--mljr-space-4);
+}
+
+.mljr-prose h1,
+.mljr-prose h2,
+.mljr-prose h3,
+.mljr-prose h4 {
+  font-family: var(--mljr-font-display);
+  margin-top: var(--mljr-space-8);
+  margin-bottom: var(--mljr-space-4);
+  letter-spacing: 0.03em;
+}
+
+.mljr-prose h1 {
+  font-size: var(--mljr-text-4xl);
+  font-weight: 700;
+  line-height: var(--mljr-leading-tight);
+  text-transform: uppercase;
+}
+
+.mljr-prose h2 {
+  font-size: var(--mljr-text-3xl);
+  font-weight: 600;
+  line-height: var(--mljr-leading-tight);
+  text-transform: uppercase;
+}
+
+.mljr-prose h3 {
+  font-size: var(--mljr-text-2xl);
+  font-weight: 600;
+  line-height: var(--mljr-leading-tight);
+}
+
+.mljr-prose h4 {
+  font-size: var(--mljr-text-xl);
+  font-weight: 600;
+  line-height: var(--mljr-leading-tight);
+}
+
+.mljr-prose p {
+  line-height: var(--mljr-leading-relaxed);
+}
+
+.mljr-prose a {
+  color: var(--mljr-primary-600);
+  text-decoration: underline;
+}
+
+.mljr-prose a:hover {
+  color: var(--mljr-primary-700);
+}
+
+.mljr-prose strong {
+  font-weight: 600;
+  color: var(--mljr-text);
+}
+
+.mljr-prose ul,
+.mljr-prose ol {
+  padding-left: var(--mljr-space-6);
+}
+
+.mljr-prose ul {
+  list-style-type: disc;
+}
+
+.mljr-prose ol {
+  list-style-type: decimal;
+}
+
+.mljr-prose li {
+  margin-bottom: var(--mljr-space-2);
+}
+
+.mljr-prose blockquote {
+  padding-left: var(--mljr-space-4);
+  border-left: 4px solid var(--mljr-primary-500);
+  font-style: italic;
+  color: var(--mljr-text-secondary);
+}
+
+.mljr-prose code {
+  font-family: var(--mljr-font-mono);
+  font-size: var(--mljr-text-sm);
+  background-color: var(--mljr-bg-tertiary);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--mljr-radius-sm);
+}
+
+.mljr-prose pre {
+  font-family: var(--mljr-font-mono);
+  font-size: var(--mljr-text-sm);
+  background-color: var(--mljr-bg-tertiary);
+  padding: var(--mljr-space-4);
+  border-radius: var(--mljr-radius-md);
+  overflow-x: auto;
+}
+
+.mljr-prose pre code {
+  background: none;
+  padding: 0;
+}
+
+.mljr-prose hr {
+  margin: var(--mljr-space-8) 0;
+  border-color: var(--mljr-border);
+}
+
+.mljr-prose img {
+  border-radius: var(--mljr-radius-md);
+}
+
+.mljr-prose table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.mljr-prose th,
+.mljr-prose td {
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  border: 1px solid var(--mljr-border);
+  text-align: left;
+}
+
+.mljr-prose th {
+  background-color: var(--mljr-bg-secondary);
+  font-weight: 600;
+}

package/src/components/accordion.css

@@ -0,0 +1,210 @@
+/* ============================================
+   MLJR CSS Framework - Accordion Component
+   Claymorphism: Soft rounded accordion with clay shadows
+   ============================================ */
+
+.mljr-accordion {
+  width: 100%;
+  position: relative;
+  background-color: var(--mljr-frosted-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: var(--mljr-radius-xl);
+  box-shadow: var(--mljr-clay-shadow);
+  border: 1px solid var(--mljr-frosted-border);
+  overflow: hidden;
+}
+
+/* Accordion Item */
+.mljr-accordion-item {
+  border-bottom: 1px solid var(--mljr-border);
+}
+
+.mljr-accordion-item:last-child {
+  border-bottom: none;
+}
+
+/* Accordion Trigger */
+.mljr-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--mljr-space-4) var(--mljr-space-5);
+  font-size: var(--mljr-text-sm);
+  font-weight: 500;
+  text-align: left;
+  color: var(--mljr-text);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-accordion-trigger:hover {
+  background-color: var(--mljr-bg-secondary);
+}
+
+.mljr-accordion-trigger:focus-visible {
+  outline: 3px solid var(--mljr-primary-300);
+  outline-offset: -3px;
+  border-radius: var(--mljr-radius-md);
+}
+
+.mljr-accordion-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--mljr-text-muted);
+  transition: transform var(--mljr-transition);
+}
+
+.mljr-accordion-trigger[aria-expanded="true"] .mljr-accordion-icon,
+.mljr-accordion-item.mljr-accordion-item-open .mljr-accordion-icon {
+  transform: rotate(180deg);
+  color: var(--mljr-primary-500);
+}
+
+/* Accordion Content */
+.mljr-accordion-content {
+  overflow: hidden;
+  background-color: transparent;
+}
+
+.mljr-accordion-content[data-state="closed"],
+.mljr-accordion-content.mljr-accordion-content-closed {
+  display: none;
+}
+
+.mljr-accordion-content[data-state="open"],
+.mljr-accordion-content.mljr-accordion-content-open {
+  display: block;
+  animation: mljr-accordion-open var(--mljr-transition);
+}
+
+.mljr-accordion-body {
+  padding: 0 var(--mljr-space-5) var(--mljr-space-4);
+  font-size: var(--mljr-text-sm);
+  color: var(--mljr-text-secondary);
+  line-height: var(--mljr-leading-relaxed);
+}
+
+/* Accordion Variants */
+
+/* Flush (no outer container styling) */
+.mljr-accordion-flush {
+  background-color: transparent;
+  backdrop-filter: none;
+  box-shadow: none;
+  border: none;
+  border-radius: 0;
+}
+
+/* Separated (gaps between items with individual clay cards) */
+.mljr-accordion-separated {
+  background-color: transparent;
+  backdrop-filter: none;
+  box-shadow: none;
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mljr-space-3);
+}
+
+.mljr-accordion-separated .mljr-accordion-item {
+  position: relative;
+  background-color: var(--mljr-frosted-bg);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: var(--mljr-radius-lg);
+  box-shadow: var(--mljr-clay-shadow-sm);
+  border: 1px solid var(--mljr-frosted-border);
+  overflow: hidden;
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-accordion-separated .mljr-accordion-item:hover {
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.mljr-accordion-separated .mljr-accordion-item.mljr-accordion-item-open {
+  box-shadow: var(--mljr-clay-shadow-lg);
+}
+
+/* Contained (highlighted active) */
+.mljr-accordion-contained .mljr-accordion-item.mljr-accordion-item-open .mljr-accordion-trigger {
+  background-color: var(--mljr-bg-secondary);
+  border-bottom: 1px solid var(--mljr-border);
+}
+
+.mljr-accordion-contained .mljr-accordion-item.mljr-accordion-item-open .mljr-accordion-content {
+  background-color: var(--mljr-bg-secondary);
+}
+
+/* Color accents */
+.mljr-accordion-primary .mljr-accordion-trigger[aria-expanded="true"],
+.mljr-accordion-primary .mljr-accordion-item.mljr-accordion-item-open .mljr-accordion-trigger {
+  color: var(--mljr-primary-600);
+  background: linear-gradient(135deg, var(--mljr-primary-50) 0%, transparent 100%);
+}
+
+.mljr-accordion-primary .mljr-accordion-trigger[aria-expanded="true"] .mljr-accordion-icon,
+.mljr-accordion-primary .mljr-accordion-item.mljr-accordion-item-open .mljr-accordion-icon {
+  color: var(--mljr-primary-500);
+}
+
+.mljr-accordion-secondary .mljr-accordion-trigger[aria-expanded="true"],
+.mljr-accordion-secondary .mljr-accordion-item.mljr-accordion-item-open .mljr-accordion-trigger {
+  color: var(--mljr-secondary-600);
+  background: linear-gradient(135deg, var(--mljr-secondary-50) 0%, transparent 100%);
+}
+
+.mljr-accordion-secondary .mljr-accordion-trigger[aria-expanded="true"] .mljr-accordion-icon,
+.mljr-accordion-secondary .mljr-accordion-item.mljr-accordion-item-open .mljr-accordion-icon {
+  color: var(--mljr-secondary-500);
+}
+
+/* Animation */
+@keyframes mljr-accordion-open {
+  from {
+    opacity: 0;
+    max-height: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 500px;
+  }
+}
+
+/* Sizes */
+.mljr-accordion-sm .mljr-accordion-trigger {
+  padding: var(--mljr-space-2) var(--mljr-space-3);
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-accordion-sm .mljr-accordion-body {
+  padding: 0 var(--mljr-space-3) var(--mljr-space-2);
+  font-size: var(--mljr-text-xs);
+}
+
+.mljr-accordion-lg .mljr-accordion-trigger {
+  padding: var(--mljr-space-5) var(--mljr-space-6);
+  font-size: var(--mljr-text-base);
+}
+
+.mljr-accordion-lg .mljr-accordion-body {
+  padding: 0 var(--mljr-space-6) var(--mljr-space-5);
+  font-size: var(--mljr-text-base);
+}
+
+/* Dark mode */
+.dark .mljr-accordion,
+[data-theme="dark"] .mljr-accordion {
+  background-color: var(--mljr-bg-secondary);
+  box-shadow: var(--mljr-clay-shadow);
+}
+
+.dark .mljr-accordion-separated .mljr-accordion-item,
+[data-theme="dark"] .mljr-accordion-separated .mljr-accordion-item {
+  background-color: var(--mljr-bg-secondary);
+}

package/src/components/alert.css

@@ -0,0 +1,231 @@
+/* ============================================
+   MLJR CSS Framework - Alert Component
+   Claymorphism: Soft rounded alerts with shadows
+   ============================================ */
+
+.mljr-alert {
+  display: flex;
+  gap: var(--mljr-space-3);
+  padding: var(--mljr-space-4);
+  border-radius: var(--mljr-radius-lg);
+  font-size: var(--mljr-text-sm);
+  line-height: var(--mljr-leading-normal);
+  box-shadow: var(--mljr-clay-shadow-sm);
+}
+
+.mljr-alert-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mljr-alert-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mljr-alert-title {
+  font-weight: 600;
+  margin-bottom: var(--mljr-space-1);
+}
+
+.mljr-alert-description {
+  opacity: 0.9;
+}
+
+.mljr-alert-close {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mljr-bg-secondary);
+  border: none;
+  border-radius: var(--mljr-radius-full);
+  opacity: 0.7;
+  cursor: pointer;
+  transition: all var(--mljr-transition-fast);
+}
+
+.mljr-alert-close:hover {
+  opacity: 1;
+  background: var(--mljr-bg-tertiary);
+}
+
+/* Default Alert */
+.mljr-alert-default {
+  background-color: var(--mljr-bg-secondary);
+  border: 1px solid var(--mljr-border);
+  color: var(--mljr-text);
+}
+
+/* Info Alert */
+.mljr-alert-info {
+  background-color: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  color: var(--mljr-info-dark);
+  box-shadow:
+    6px 6px 12px rgba(59, 130, 246, 0.12),
+    -4px -4px 10px rgba(255, 255, 255, 0.8);
+}
+
+.dark .mljr-alert-info,
+[data-theme="dark"] .mljr-alert-info {
+  background-color: rgba(59, 130, 246, 0.15);
+  border-color: rgba(59, 130, 246, 0.3);
+  color: var(--mljr-info-light);
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.3),
+    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    0 0 12px rgba(59, 130, 246, 0.15);
+}
+
+/* Success Alert */
+.mljr-alert-success {
+  background-color: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.25);
+  color: var(--mljr-success-dark);
+  box-shadow:
+    6px 6px 12px rgba(16, 185, 129, 0.12),
+    -4px -4px 10px rgba(255, 255, 255, 0.8);
+}
+
+.dark .mljr-alert-success,
+[data-theme="dark"] .mljr-alert-success {
+  background-color: rgba(16, 185, 129, 0.15);
+  border-color: rgba(16, 185, 129, 0.35);
+  color: var(--mljr-success-light);
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.3),
+    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    0 0 12px rgba(16, 185, 129, 0.15);
+}
+
+/* Warning Alert */
+.mljr-alert-warning {
+  background-color: rgba(234, 179, 8, 0.1);
+  border: 1px solid rgba(234, 179, 8, 0.2);
+  color: var(--mljr-warning-dark);
+  box-shadow:
+    6px 6px 12px rgba(234, 179, 8, 0.12),
+    -4px -4px 10px rgba(255, 255, 255, 0.8);
+}
+
+.dark .mljr-alert-warning,
+[data-theme="dark"] .mljr-alert-warning {
+  background-color: rgba(234, 179, 8, 0.15);
+  border-color: rgba(234, 179, 8, 0.3);
+  color: var(--mljr-warning-light);
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.3),
+    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    0 0 12px rgba(234, 179, 8, 0.15);
+}
+
+/* Error Alert */
+.mljr-alert-error {
+  background-color: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.25);
+  color: var(--mljr-error-dark);
+  box-shadow:
+    6px 6px 12px rgba(239, 68, 68, 0.12),
+    -4px -4px 10px rgba(255, 255, 255, 0.8);
+}
+
+.dark .mljr-alert-error,
+[data-theme="dark"] .mljr-alert-error {
+  background-color: rgba(239, 68, 68, 0.15);
+  border-color: rgba(239, 68, 68, 0.35);
+  color: var(--mljr-error-light);
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.3),
+    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    0 0 12px rgba(239, 68, 68, 0.15);
+}
+
+/* Primary Alert (Orange) */
+.mljr-alert-primary {
+  background-color: var(--mljr-primary-50);
+  border: 1px solid var(--mljr-primary-200);
+  color: var(--mljr-primary-700);
+  box-shadow:
+    6px 6px 12px rgba(249, 115, 22, 0.15),
+    -4px -4px 10px rgba(255, 255, 255, 0.8);
+}
+
+.dark .mljr-alert-primary,
+[data-theme="dark"] .mljr-alert-primary {
+  background-color: rgba(249, 115, 22, 0.15);
+  border-color: rgba(249, 115, 22, 0.35);
+  color: var(--mljr-primary-300);
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.3),
+    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    0 0 12px rgba(249, 115, 22, 0.15);
+}
+
+/* Secondary Alert (Teal) */
+.mljr-alert-secondary {
+  background-color: var(--mljr-secondary-50);
+  border: 1px solid var(--mljr-secondary-200);
+  color: var(--mljr-secondary-700);
+  box-shadow:
+    6px 6px 12px rgba(20, 184, 166, 0.15),
+    -4px -4px 10px rgba(255, 255, 255, 0.8);
+}
+
+.dark .mljr-alert-secondary,
+[data-theme="dark"] .mljr-alert-secondary {
+  background-color: rgba(20, 184, 166, 0.15);
+  border-color: rgba(20, 184, 166, 0.35);
+  color: var(--mljr-secondary-300);
+  box-shadow:
+    6px 6px 12px rgba(0, 0, 0, 0.3),
+    -4px -4px 10px rgba(68, 64, 60, 0.1),
+    0 0 12px rgba(20, 184, 166, 0.15);
+}
+
+/* Solid Variants */
+.mljr-alert-info-solid {
+  background: linear-gradient(135deg, var(--mljr-info-light) 0%, var(--mljr-info) 100%);
+  border: none;
+  color: white;
+}
+
+.mljr-alert-success-solid {
+  background: linear-gradient(135deg, var(--mljr-success-light) 0%, var(--mljr-success) 100%);
+  border: none;
+  color: white;
+}
+
+.mljr-alert-warning-solid {
+  background: linear-gradient(135deg, var(--mljr-warning-light) 0%, var(--mljr-warning) 100%);
+  border: none;
+  color: var(--mljr-gray-900);
+}
+
+.mljr-alert-error-solid {
+  background: linear-gradient(135deg, var(--mljr-error-light) 0%, var(--mljr-error) 100%);
+  border: none;
+  color: white;
+}
+
+.mljr-alert-primary-solid {
+  background: var(--mljr-gradient-primary);
+  border: none;
+  color: white;
+}
+
+.mljr-alert-secondary-solid {
+  background: var(--mljr-gradient-secondary);
+  border: none;
+  color: white;
+}
+
+/* Dark mode */
+.dark .mljr-alert,
+[data-theme="dark"] .mljr-alert {
+  box-shadow: var(--mljr-clay-shadow-sm);
+}