@camtomlabs/malix-design-system 0.3.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camtomlabs/malix-design-system",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Malix Design System combined package with components, tokens, and bundled styles.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -9,13 +9,15 @@
   "sideEffects": [
     "./src/styles.css",
     "./src/tokens.css",
-    "./src/reset.css"
+    "./src/reset.css",
+    "./src/compat-bootstrap.css"
   ],
   "files": [
     "dist",
     "src/styles.css",
     "src/tokens.css",
     "src/reset.css",
+    "src/compat-bootstrap.css",
     "src/tokens.registry.json",
     "tailwind.preset.js",
     "stylelint.config.cjs",
@@ -48,6 +50,7 @@
     "./styles.css": "./src/styles.css",
     "./tokens.css": "./src/tokens.css",
     "./reset.css": "./src/reset.css",
+    "./compat-bootstrap.css": "./src/compat-bootstrap.css",
     "./tokens.registry.json": "./src/tokens.registry.json",
     "./tailwind.preset": "./tailwind.preset.js",
     "./stylelint.config": "./stylelint.config.cjs",

package/src/compat-bootstrap.css

@@ -0,0 +1,51 @@
+/**
+ * @camtomlabs/malix-design-system/compat-bootstrap.css
+ *
+ * Opt-in overrides for projects that use Bootstrap alongside Malix.
+ *
+ * Problem: Bootstrap does not use CSS @layer, so its unlayered styles
+ * always win over Malix's layered styles (per CSS cascade spec).
+ * This file provides unlayered overrides for the critical properties
+ * that Bootstrap sets globally and that conflict with Malix tokens.
+ *
+ * Usage — import AFTER Bootstrap and AFTER Malix styles:
+ *
+ *   import 'bootstrap/dist/css/bootstrap.min.css';
+ *   import '@camtomlabs/malix-design-system/reset.css';   // optional
+ *   import '@camtomlabs/malix-design-system/styles.css';
+ *   import '@camtomlabs/malix-design-system/compat-bootstrap.css';
+ *
+ * This file intentionally lives OUTSIDE any @layer so it wins over
+ * Bootstrap's unlayered declarations. It only targets properties where
+ * Bootstrap and Malix conflict; it does not reset anything else.
+ *
+ * When you remove Bootstrap from your project, remove this import too.
+ */
+
+/* ── Typography ────────────────────────────────── */
+body {
+  font-family: var(--malix-font-body);
+  color: var(--malix-foreground);
+  line-height: 1.5;
+}
+
+/* ── Links ─────────────────────────────────────── */
+a {
+  color: var(--malix-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--malix-primary-hover);
+}
+
+/* ── Headings ──────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--malix-font-body);
+  color: var(--malix-foreground);
+}
+
+/* ── Form elements ─────────────────────────────── */
+button, input, select, textarea {
+  font-family: var(--malix-font-body);
+}

package/src/styles.css

@@ -941,6 +941,133 @@
   opacity: 0.9;
 }
 
+/* ═══════════════════════════════════════════════
+   DIALOG — canonical composable modal
+   Slot-based: <Dialog.Header>, <Dialog.Body>, <Dialog.Footer>
+   Variants: default | danger | warning | info
+   Sizes: sm (400px) | md (560px) | lg (720px)
+   ═══════════════════════════════════════════════ */
+
+.malix-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: min(85vh, 720px);
+  background: var(--malix-surface-elevated);
+  border: 1px solid var(--malix-border);
+  border-radius: var(--malix-radius-lg);
+  box-shadow: var(--malix-shadow-card-l3);
+  z-index: var(--malix-z-modal);
+  overflow: hidden;
+}
+
+.malix-dialog:focus {
+  outline: none;
+}
+
+.malix-dialog[data-size="sm"] {
+  max-width: 400px;
+}
+
+.malix-dialog[data-size="md"] {
+  max-width: 560px;
+}
+
+.malix-dialog[data-size="lg"] {
+  max-width: 720px;
+}
+
+.malix-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--malix-border);
+}
+
+.malix-dialog[data-variant="danger"] .malix-dialog__header {
+  border-bottom-color: var(--malix-error-light);
+}
+
+.malix-dialog[data-variant="warning"] .malix-dialog__header {
+  border-bottom-color: var(--malix-warning-light);
+}
+
+.malix-dialog[data-variant="info"] .malix-dialog__header {
+  border-bottom-color: var(--malix-info-light);
+}
+
+.malix-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);
+  line-height: 1.4;
+}
+
+.malix-dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  margin: -6px -6px -6px 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--malix-radius-sm);
+  cursor: pointer;
+  color: var(--malix-foreground-secondary);
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.malix-dialog__close:hover {
+  background: var(--malix-surface-hover);
+  color: var(--malix-foreground);
+}
+
+.malix-dialog__close:focus-visible {
+  outline: 2px solid var(--malix-primary);
+  outline-offset: 2px;
+}
+
+.malix-dialog__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 20px 24px;
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-base);
+  color: var(--malix-foreground-secondary);
+  line-height: 1.6;
+}
+
+.malix-dialog__footer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--malix-border);
+  background: var(--malix-surface-secondary);
+}
+
+.malix-dialog__footer[data-align="end"] {
+  justify-content: flex-end;
+}
+
+.malix-dialog__footer[data-align="start"] {
+  justify-content: flex-start;
+}
+
+.malix-dialog__footer[data-align="center"] {
+  justify-content: center;
+}
+
+.malix-dialog__footer[data-align="between"] {
+  justify-content: space-between;
+}
+
 /* ═══════════════════════════════════════════════
    GLASS POPOVER — Pencil: bgJHS
    w: 300, radius-xl, glass bg