@camtomlabs/malix-design-system 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -0
- package/package.json +5 -2
- package/src/compat-bootstrap.css +51 -0
package/README.md
CHANGED
|
@@ -46,6 +46,27 @@ Layer cascade order:
|
|
|
46
46
|
malix-reset → malix-tokens → malix-components → app
|
|
47
47
|
```
|
|
48
48
|
|
|
49
|
+
### Using Malix alongside Bootstrap (or other unlayered frameworks)
|
|
50
|
+
|
|
51
|
+
CSS spec: **unlayered styles always beat layered styles**, regardless of
|
|
52
|
+
source order or specificity. Since Bootstrap, Tailwind Preflight, and most
|
|
53
|
+
legacy CSS frameworks don't use `@layer`, their global `body` rules will
|
|
54
|
+
override Malix's layered reset.
|
|
55
|
+
|
|
56
|
+
Import the compatibility stylesheet **after** Bootstrap and Malix:
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
60
|
+
import '@camtomlabs/malix-design-system/reset.css'; // optional
|
|
61
|
+
import '@camtomlabs/malix-design-system/styles.css';
|
|
62
|
+
import '@camtomlabs/malix-design-system/compat-bootstrap.css'; // ← add this
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
This file is intentionally unlayered so it wins over Bootstrap's global
|
|
66
|
+
`body { font-family }`, `a { color }`, and heading declarations. It only
|
|
67
|
+
overrides properties where Bootstrap and Malix conflict — it is safe to
|
|
68
|
+
import even if you later remove Bootstrap.
|
|
69
|
+
|
|
49
70
|
## Usage
|
|
50
71
|
|
|
51
72
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@camtomlabs/malix-design-system",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "Malix Design System combined package with components, tokens, and bundled styles.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -9,13 +9,15 @@
|
|
|
9
9
|
"sideEffects": [
|
|
10
10
|
"./src/styles.css",
|
|
11
11
|
"./src/tokens.css",
|
|
12
|
-
"./src/reset.css"
|
|
12
|
+
"./src/reset.css",
|
|
13
|
+
"./src/compat-bootstrap.css"
|
|
13
14
|
],
|
|
14
15
|
"files": [
|
|
15
16
|
"dist",
|
|
16
17
|
"src/styles.css",
|
|
17
18
|
"src/tokens.css",
|
|
18
19
|
"src/reset.css",
|
|
20
|
+
"src/compat-bootstrap.css",
|
|
19
21
|
"src/tokens.registry.json",
|
|
20
22
|
"tailwind.preset.js",
|
|
21
23
|
"stylelint.config.cjs",
|
|
@@ -48,6 +50,7 @@
|
|
|
48
50
|
"./styles.css": "./src/styles.css",
|
|
49
51
|
"./tokens.css": "./src/tokens.css",
|
|
50
52
|
"./reset.css": "./src/reset.css",
|
|
53
|
+
"./compat-bootstrap.css": "./src/compat-bootstrap.css",
|
|
51
54
|
"./tokens.registry.json": "./src/tokens.registry.json",
|
|
52
55
|
"./tailwind.preset": "./tailwind.preset.js",
|
|
53
56
|
"./stylelint.config": "./stylelint.config.cjs",
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @camtomlabs/malix-design-system/compat-bootstrap.css
|
|
3
|
+
*
|
|
4
|
+
* Opt-in overrides for projects that use Bootstrap alongside Malix.
|
|
5
|
+
*
|
|
6
|
+
* Problem: Bootstrap does not use CSS @layer, so its unlayered styles
|
|
7
|
+
* always win over Malix's layered styles (per CSS cascade spec).
|
|
8
|
+
* This file provides unlayered overrides for the critical properties
|
|
9
|
+
* that Bootstrap sets globally and that conflict with Malix tokens.
|
|
10
|
+
*
|
|
11
|
+
* Usage — import AFTER Bootstrap and AFTER Malix styles:
|
|
12
|
+
*
|
|
13
|
+
* import 'bootstrap/dist/css/bootstrap.min.css';
|
|
14
|
+
* import '@camtomlabs/malix-design-system/reset.css'; // optional
|
|
15
|
+
* import '@camtomlabs/malix-design-system/styles.css';
|
|
16
|
+
* import '@camtomlabs/malix-design-system/compat-bootstrap.css';
|
|
17
|
+
*
|
|
18
|
+
* This file intentionally lives OUTSIDE any @layer so it wins over
|
|
19
|
+
* Bootstrap's unlayered declarations. It only targets properties where
|
|
20
|
+
* Bootstrap and Malix conflict; it does not reset anything else.
|
|
21
|
+
*
|
|
22
|
+
* When you remove Bootstrap from your project, remove this import too.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
/* ── Typography ────────────────────────────────── */
|
|
26
|
+
body {
|
|
27
|
+
font-family: var(--malix-font-body);
|
|
28
|
+
color: var(--malix-foreground);
|
|
29
|
+
line-height: 1.5;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* ── Links ─────────────────────────────────────── */
|
|
33
|
+
a {
|
|
34
|
+
color: var(--malix-primary);
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
a:hover {
|
|
39
|
+
color: var(--malix-primary-hover);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* ── Headings ──────────────────────────────────── */
|
|
43
|
+
h1, h2, h3, h4, h5, h6 {
|
|
44
|
+
font-family: var(--malix-font-body);
|
|
45
|
+
color: var(--malix-foreground);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* ── Form elements ─────────────────────────────── */
|
|
49
|
+
button, input, select, textarea {
|
|
50
|
+
font-family: var(--malix-font-body);
|
|
51
|
+
}
|