@camtomlabs/malix-design-system 0.1.7 → 0.3.0

package/src/styles.css

@@ -1,5 +1,11 @@
 @import "./tokens.css";
 
+/* Declare the layer here (harmless if reset.css isn't imported) so
+   consumers that skip reset.css still get a named layer for our
+   component styles. When reset.css IS imported, this declaration
+   merges with the one there and the cascade order is preserved. */
+@layer malix-reset, malix-tokens, malix-components, app;
+
 /* ═══════════════════════════════════════════════
    BUTTON — Pencil: KCjkg, 5eAkI, zMyI0, zUoM5
    padding: 10px 20px, gap: 8px, radius-md
@@ -24,7 +30,7 @@
 }
 
 .malix-button[data-hierarchy="primary"] {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
   box-shadow: var(--malix-shadow-btn-primary);
 }
@@ -99,18 +105,59 @@
   height: 18px;
 }
 
+/* Pill variant: full-rounded corners */
+.malix-button[data-variant="pill"] {
+  border-radius: var(--malix-radius-pill);
+}
+
+/* Outline hierarchy: bordered with primary color */
+.malix-button[data-hierarchy="outline"] {
+  background: transparent;
+  border-color: var(--malix-primary);
+  color: var(--malix-primary);
+  box-shadow: none;
+}
+
+.malix-button[data-hierarchy="outline"]:hover {
+  background: var(--malix-primary-light);
+}
+
+/* Danger hierarchy: destructive action button */
+.malix-button[data-hierarchy="danger"] {
+  background: var(--malix-error);
+  color: #ffffff;
+  box-shadow: none;
+}
+
+.malix-button[data-hierarchy="danger"]:hover {
+  background: var(--malix-error-foreground);
+}
+
+/* Size variants */
+.malix-button[data-size="sm"] {
+  padding: 6px 12px;
+  font-size: var(--malix-text-sm);
+  gap: 6px;
+}
+
+.malix-button[data-size="lg"] {
+  padding: 14px 28px;
+  font-size: var(--malix-text-lg);
+  gap: 10px;
+}
+
 .malix-button:focus-visible {
   outline: 2px solid var(--malix-border-focus);
   outline-offset: 2px;
-  box-shadow: 0 0 0 3px rgba(0, 74, 124, 0.1);
+  box-shadow: var(--malix-focus-ring);
 }
 
 .malix-button:disabled {
   cursor: not-allowed;
-  background: var(--malix-foreground-disabled);
-  color: var(--malix-primary-foreground);
+  background: var(--malix-surface-disabled);
+  color: var(--malix-foreground-disabled);
+  border-color: var(--malix-border-disabled);
   box-shadow: none;
-  border-color: transparent;
 }
 
 .malix-button[data-loading="true"] {
@@ -201,7 +248,7 @@
 
 .malix-pill[data-variant="primary"] {
   background: var(--malix-primary-light);
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
 }
 
 .malix-pill[data-variant="success"] {
@@ -248,7 +295,7 @@
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
-  background: var(--malix-surface);
+  background: var(--malix-input-bg);
   border: 1px solid var(--malix-border);
   border-radius: var(--malix-radius-md);
   box-shadow: var(--malix-shadow-input);
@@ -258,6 +305,7 @@
 .malix-input-group__field:focus-within {
   outline: 2px solid var(--malix-border-focus);
   outline-offset: 2px;
+  box-shadow: var(--malix-focus-ring);
 }
 
 .malix-input-group__icon {
@@ -303,6 +351,7 @@
 .malix-input-wrap:focus-within {
   outline: 2px solid var(--malix-border-focus);
   outline-offset: 2px;
+  box-shadow: var(--malix-focus-ring);
 }
 
 .malix-input {
@@ -316,7 +365,7 @@
 }
 
 .malix-input::placeholder {
-  color: var(--malix-foreground-tertiary);
+  color: var(--malix-placeholder);
 }
 
 /* ═══════════════════════════════════════════════
@@ -341,7 +390,7 @@
   font-size: var(--malix-text-xs);
   font-weight: var(--malix-weight-medium);
   box-shadow: var(--malix-shadow-tooltip);
-  z-index: 20;
+  z-index: var(--malix-z-tooltip);
 }
 
 .malix-tooltip[data-placement="top"] {
@@ -368,6 +417,15 @@
   transform: translateY(-50%);
 }
 
+/* Portal tooltip — position: fixed, managed via JS */
+.malix-tooltip[data-portal] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  transform: none;
+  z-index: var(--malix-z-tooltip);
+}
+
 /* ═══════════════════════════════════════════════
    SIDEBAR ITEM — Pencil: tov1r, B0ycx, pPf33
    padding: 10 16, gap: 12, w: 240, radius-md
@@ -648,6 +706,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  border: 1px solid transparent;
   padding: 24px;
   width: 320px;
   background: var(--malix-surface);
@@ -666,6 +725,12 @@
   box-shadow: var(--malix-shadow-card-l3);
 }
 
+/* Dark mode: add visible border since shadows wash out */
+.dark .malix-card,
+[data-theme="dark"] .malix-card {
+  border-color: var(--malix-border);
+}
+
 .malix-card__header {
   display: flex;
   flex-direction: column;
@@ -765,6 +830,117 @@
   border-top: 1px solid #ffffff33;
 }
 
+/* ═══════════════════════════════════════════════
+   CONFIRM DIALOG
+   Semantic dialog with danger/warning/info variants
+   ═══════════════════════════════════════════════ */
+
+.malix-confirm-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 420px;
+  background: var(--malix-surface-elevated);
+  border-radius: var(--malix-radius-lg);
+  box-shadow: var(--malix-shadow-card-l3);
+  overflow: hidden;
+  border: 1px solid transparent;
+  z-index: var(--malix-z-modal);
+}
+
+.dark .malix-confirm-dialog,
+[data-theme="dark"] .malix-confirm-dialog {
+  border-color: var(--malix-border);
+}
+
+.malix-confirm-dialog__content {
+  display: flex;
+  gap: 16px;
+  padding: 24px;
+}
+
+.malix-confirm-dialog__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--malix-radius-md);
+  flex-shrink: 0;
+}
+
+.malix-confirm-dialog[data-variant="default"] .malix-confirm-dialog__icon {
+  background: var(--malix-primary-light);
+  color: var(--malix-primary);
+}
+
+.malix-confirm-dialog[data-variant="danger"] .malix-confirm-dialog__icon {
+  background: var(--malix-error-light);
+  color: var(--malix-error);
+}
+
+.malix-confirm-dialog[data-variant="warning"] .malix-confirm-dialog__icon {
+  background: var(--malix-warning-light);
+  color: var(--malix-warning);
+}
+
+.malix-confirm-dialog[data-variant="info"] .malix-confirm-dialog__icon {
+  background: var(--malix-info-light);
+  color: var(--malix-info);
+}
+
+.malix-confirm-dialog__text {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.malix-confirm-dialog__title {
+  margin: 0;
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-lg);
+  font-weight: var(--malix-weight-semibold);
+  color: var(--malix-foreground);
+}
+
+.malix-confirm-dialog__description {
+  margin: 0;
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-base);
+  color: var(--malix-foreground-secondary);
+  line-height: 1.5;
+}
+
+.malix-confirm-dialog__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--malix-border);
+}
+
+/* Danger confirm button overrides primary colors */
+.malix-confirm-dialog__confirm-btn[data-variant="danger"] {
+  background: var(--malix-error);
+  box-shadow: none;
+}
+
+.malix-confirm-dialog__confirm-btn[data-variant="danger"]:hover {
+  background: var(--malix-error-foreground);
+}
+
+.malix-confirm-dialog__confirm-btn[data-variant="warning"] {
+  background: var(--malix-warning);
+  color: var(--malix-warning-foreground);
+  box-shadow: none;
+}
+
+.malix-confirm-dialog__confirm-btn[data-variant="warning"]:hover {
+  opacity: 0.9;
+}
+
 /* ═══════════════════════════════════════════════
    GLASS POPOVER — Pencil: bgJHS
    w: 300, radius-xl, glass bg
@@ -824,12 +1000,12 @@
 .malix-overlay-backdrop {
   position: fixed;
   inset: 0;
-  background: var(--malix-overlay);
+  background: var(--malix-overlay-backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--malix-space-xl);
-  z-index: 50;
+  z-index: var(--malix-z-overlay);
 }
 
 /* ═══════════════════════════════════════════════
@@ -1014,7 +1190,7 @@
 
 .malix-filter-tabs__tab[data-active] {
   background: var(--malix-primary-light);
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
 }
 
 .malix-filter-tabs__tab[data-active]:hover {
@@ -1045,7 +1221,7 @@
 }
 
 .malix-filter-tabs__tab[data-active] .malix-filter-tabs__tab-count {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
 }
 
@@ -1186,7 +1362,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-progress-bar[data-variant="default"] .malix-progress-bar__fill {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
 }
 
 .malix-progress-bar[data-variant="success"] .malix-progress-bar__fill {
@@ -1299,13 +1475,13 @@ a.malix-breadcrumb__label:hover {
 
 /* active */
 .malix-stepper__step[data-status="active"] .malix-stepper__step-icon {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
-  border: 2px solid var(--malix-cta-primary-bg);
+  border: 2px solid var(--malix-primary-bg);
 }
 
 .malix-stepper__step[data-status="active"] .malix-stepper__step-label {
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
 }
 
 /* pending */
@@ -1365,7 +1541,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-textarea-group__field::placeholder {
-  color: var(--malix-foreground-tertiary);
+  color: var(--malix-placeholder);
 }
 
 .malix-textarea-group__field:focus {
@@ -1424,7 +1600,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-chat-input__field::placeholder {
-  color: var(--malix-foreground-tertiary);
+  color: var(--malix-placeholder);
 }
 
 .malix-chat-input__send-btn {
@@ -1436,7 +1612,7 @@ a.malix-breadcrumb__label:hover {
   flex-shrink: 0;
   border: none;
   border-radius: var(--malix-radius-sm);
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
   cursor: pointer;
   transition: background-color 120ms ease;
@@ -1542,7 +1718,7 @@ a.malix-breadcrumb__label:hover {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
 }
 
 .malix-file-card__icon > svg {
@@ -1638,8 +1814,8 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-tab-bar__tab[data-active] {
-  color: var(--malix-cta-primary-bg);
-  border-bottom-color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
+  border-bottom-color: var(--malix-primary-bg);
 }
 
 .malix-tab-bar__tab:focus-visible {
@@ -1686,7 +1862,7 @@ a.malix-breadcrumb__label:hover {
 
 .malix-op-status[data-status="active"] {
   background: var(--malix-primary-light);
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
 }
 
 .malix-op-status[data-status="active"] .malix-op-status__icon {
@@ -1899,17 +2075,17 @@ a.malix-breadcrumb__label:hover {
 /* active state */
 .malix-selection-card[data-active] {
   background: var(--malix-primary-light);
-  border: 2px solid var(--malix-cta-primary-bg);
+  border: 2px solid var(--malix-primary-bg);
   padding: 19px;
 }
 
 .malix-selection-card[data-active] .malix-selection-card__icon-wrap {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
 }
 
 .malix-selection-card[data-active] .malix-selection-card__title {
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
 }
 
 /* ═══════════════════════════════════════════════
@@ -2023,11 +2199,11 @@ a.malix-breadcrumb__label:hover {
 
 .malix-badge[data-variant="primary"] {
   background: var(--malix-primary-light);
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
 }
 
 .malix-badge[data-variant="primary"] .malix-badge__dot {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
 }
 
 .malix-badge[data-variant="success"] {
@@ -2159,7 +2335,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-checkbox:hover {
-  border-color: var(--malix-cta-primary-bg);
+  border-color: var(--malix-primary-bg);
 }
 
 .malix-checkbox:focus-visible {
@@ -2168,13 +2344,13 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-checkbox[data-checked="true"] {
-  background: var(--malix-cta-primary-bg);
-  border-color: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
+  border-color: var(--malix-primary-bg);
 }
 
 .malix-checkbox[data-indeterminate="true"] {
-  background: var(--malix-cta-primary-bg);
-  border-color: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
+  border-color: var(--malix-primary-bg);
 }
 
 .malix-checkbox__icon {
@@ -2227,7 +2403,7 @@ a.malix-breadcrumb__label:hover {
   height: 36px;
   background: var(--malix-primary-light);
   border-radius: var(--malix-radius-md);
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
   flex-shrink: 0;
 }
 
@@ -2272,7 +2448,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-data-table__header-row {
-  background: var(--malix-surface-secondary);
+  background: var(--malix-table-header-bg);
 }
 
 .malix-data-table__header-cell {
@@ -2292,11 +2468,11 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-data-table__data-row:not(:last-child) {
-  border-bottom: 1px solid var(--malix-border);
+  border-bottom: 1px solid var(--malix-table-border);
 }
 
 .malix-data-table__data-row:hover {
-  background: var(--malix-surface-secondary);
+  background: var(--malix-table-row-hover);
 }
 
 .malix-data-table__data-row[data-clickable] {
@@ -2337,7 +2513,7 @@ a.malix-breadcrumb__label:hover {
 
 .malix-dropzone[data-dragging="true"] {
   background: var(--malix-primary-light);
-  border-color: var(--malix-cta-primary-bg);
+  border-color: var(--malix-primary-bg);
 }
 
 .malix-dropzone[data-disabled="true"] {
@@ -2369,7 +2545,7 @@ a.malix-breadcrumb__label:hover {
   justify-content: center;
   padding: 6px 16px;
   margin-top: 4px;
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
   border-radius: var(--malix-radius-md);
   font-size: var(--malix-text-sm);
@@ -2468,7 +2644,7 @@ a.malix-breadcrumb__label:hover {
 .malix-onboarding-popover__step {
   font-size: var(--malix-text-xs);
   font-weight: var(--malix-weight-medium);
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
   line-height: 1;
 }
 
@@ -2516,7 +2692,7 @@ a.malix-breadcrumb__label:hover {
 .malix-onboarding-popover__next-btn {
   padding: 8px 20px;
   border: none;
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
   font-family: var(--malix-font-body);
   font-size: var(--malix-text-sm);
@@ -2593,7 +2769,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-pagination__item[data-active] {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
 }
 
@@ -2624,8 +2800,8 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-pricing-card[data-highlighted] {
-  border-color: var(--malix-cta-primary-bg);
-  box-shadow: 0 0 0 1px var(--malix-cta-primary-bg);
+  border-color: var(--malix-primary-bg);
+  box-shadow: 0 0 0 1px var(--malix-primary-bg);
 }
 
 .malix-pricing-card__badge {
@@ -2634,7 +2810,7 @@ a.malix-breadcrumb__label:hover {
   padding: 4px 12px;
   border-radius: var(--malix-radius-pill);
   background: var(--malix-primary-light);
-  color: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-bg);
   font-size: var(--malix-text-xs);
   font-weight: var(--malix-weight-semibold);
   line-height: 1.4;
@@ -2695,7 +2871,7 @@ a.malix-breadcrumb__label:hover {
   padding: 10px 20px;
   border: none;
   border-radius: var(--malix-radius-md);
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
   font-family: var(--malix-font-body);
   font-size: var(--malix-text-base);
@@ -2730,7 +2906,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-radio:hover {
-  border-color: var(--malix-cta-primary-bg);
+  border-color: var(--malix-primary-bg);
 }
 
 .malix-radio:focus-visible {
@@ -2739,7 +2915,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-radio[data-checked="true"] {
-  border-color: var(--malix-cta-primary-bg);
+  border-color: var(--malix-primary-bg);
 }
 
 .malix-radio__dot {
@@ -2751,7 +2927,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-radio[data-checked="true"] .malix-radio__dot {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
 }
 
 .malix-radio[data-disabled="true"] {
@@ -3040,7 +3216,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-toggle[data-checked="true"] {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
 }
 
 .malix-toggle__knob {
@@ -3270,7 +3446,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-chat-bubble[data-variant="user"] {
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
   border-radius: 8px 8px 2px 8px;
 }
@@ -3325,7 +3501,7 @@ a.malix-breadcrumb__label:hover {
   height: 28px;
   min-width: 28px;
   border-radius: var(--malix-radius-pill);
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
 }
 
@@ -3395,7 +3571,7 @@ a.malix-breadcrumb__label:hover {
 }
 
 .malix-ai-panel__input::placeholder {
-  color: var(--malix-foreground-tertiary);
+  color: var(--malix-placeholder);
 }
 
 .malix-ai-panel__send {
@@ -3406,7 +3582,7 @@ a.malix-breadcrumb__label:hover {
   height: 32px;
   min-width: 32px;
   border-radius: var(--malix-radius-md);
-  background: var(--malix-cta-primary-bg);
+  background: var(--malix-primary-bg);
   color: var(--malix-primary-foreground);
   border: none;
   cursor: pointer;