@camtomlabs/malix-design-system 0.1.7 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camtomlabs/malix-design-system",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "Malix Design System combined package with components, tokens, and bundled styles.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -14,7 +14,9 @@
     "dist",
     "src/styles.css",
     "src/tokens.css",
-    "src/tokens.registry.json"
+    "src/tokens.registry.json",
+    "tailwind.preset.js",
+    "stylelint.config.cjs"
   ],
   "repository": {
     "type": "git",
@@ -39,9 +41,12 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./css": "./src/styles.css",
     "./styles.css": "./src/styles.css",
     "./tokens.css": "./src/tokens.css",
-    "./tokens.registry.json": "./src/tokens.registry.json"
+    "./tokens.registry.json": "./src/tokens.registry.json",
+    "./tailwind.preset": "./tailwind.preset.js",
+    "./stylelint.config": "./stylelint.config.cjs"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -50,13 +55,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tsup": "^8.5.1"
-  },
   "scripts": {
     "build": "tsup",
     "lint": "eslint src"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.6.2"
   }
-}
+}

package/src/styles.css

@@ -24,7 +24,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 +99,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 +242,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 +289,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 +299,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 +345,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 +359,7 @@
 }
 
 .malix-input::placeholder {
-  color: var(--malix-foreground-tertiary);
+  color: var(--malix-placeholder);
 }
 
 /* ═══════════════════════════════════════════════
@@ -341,7 +384,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 +411,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 +700,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  border: 1px solid transparent;
   padding: 24px;
   width: 320px;
   background: var(--malix-surface);
@@ -666,6 +719,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 +824,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 +994,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 +1184,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 +1215,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 +1356,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 +1469,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 +1535,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 +1594,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 +1606,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 +1712,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 +1808,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 +1856,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 +2069,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 +2193,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 +2329,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 +2338,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 +2397,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 +2442,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 +2462,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 +2507,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 +2539,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 +2638,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 +2686,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 +2763,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 +2794,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 +2804,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 +2865,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 +2900,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 +2909,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 +2921,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 +3210,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 +3440,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 +3495,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 +3565,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 +3576,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;