@maboussoleaidant/design-system 0.1.3 → 0.1.5
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 +37 -13
- package/dist/mba-design-system.css +1512 -252
- package/dist/mba-design-system.css.map +1 -0
- package/dist/mba-design-system.min.css +1 -1
- package/dist/mba-tailwind.css +1065 -177
- package/dist/mba-tailwind.css.map +1 -0
- package/dist/mba-tailwind.min.css +1 -1
- package/dist/mba-tokens-only.css +2 -0
- package/dist/mba-tokens-only.css.map +1 -0
- package/package.json +5 -2
- package/src/assets/fonts/Congenial-Bold.woff2 +0 -0
- package/src/assets/fonts/Congenial-Medium.woff2 +0 -0
- package/src/assets/fonts/Congenial.woff2 +0 -0
- package/src/assets/fonts/MaterialSymbolsRounded.woff2 +0 -0
- package/src/assets/fonts/OpenSans-Bold.woff2 +0 -0
- package/src/assets/fonts/OpenSans-ExtraBold.woff2 +0 -0
- package/src/assets/fonts/OpenSans-Regular.woff2 +0 -0
- package/src/assets/fonts/OpenSans-SemiBold.woff2 +0 -0
package/README.md
CHANGED
|
@@ -10,31 +10,55 @@ npm install @maboussoleaidant/design-system
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
###
|
|
13
|
+
### Option 1 : Composants MBA uniquement (sans Tailwind)
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
// angular.json
|
|
17
|
-
"styles": [
|
|
18
|
-
"node_modules/@maboussoleaidant/design-system/dist/mba-tailwind.css"
|
|
19
|
-
]
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
### WordPress / Sites vitrines (via CDN)
|
|
15
|
+
Pour les sites WordPress ou vitrines qui n'ont besoin que des composants `.mba-*` :
|
|
23
16
|
|
|
24
17
|
```html
|
|
25
|
-
<!-- Composants .mba-* uniquement -->
|
|
26
18
|
<link rel="stylesheet" href="https://unpkg.com/@maboussoleaidant/design-system/dist/mba-design-system.min.css">
|
|
19
|
+
```
|
|
27
20
|
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
Ou en import CSS :
|
|
22
|
+
```css
|
|
23
|
+
@import "@maboussoleaidant/design-system";
|
|
30
24
|
```
|
|
31
25
|
|
|
32
|
-
###
|
|
26
|
+
### Option 2 : Avec Tailwind JIT (recommandé pour les apps)
|
|
27
|
+
|
|
28
|
+
Pour les applications Angular/React/Astro qui utilisent Tailwind, **utilisez le JIT** pour avoir accès à toutes les classes Tailwind avec les tokens MBA :
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
/* styles.css */
|
|
32
|
+
@import "@maboussoleaidant/design-system";
|
|
33
|
+
@import "tailwindcss";
|
|
34
|
+
|
|
35
|
+
@theme {
|
|
36
|
+
/* Copier le mapping depuis src/tailwind.css ou voir la doc Storybook */
|
|
37
|
+
--color-primary-500: var(--mba-color-primary-500);
|
|
38
|
+
--spacing-sm: var(--mba-space-sm);
|
|
39
|
+
/* ... */
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
> **Note :** Le fichier `mba-tailwind.css` pré-compilé ne contient que les classes Tailwind utilisées dans le Storybook du DS. Pour un projet réel, utilisez le JIT ci-dessus.
|
|
44
|
+
|
|
45
|
+
### Option 3 : Tokens uniquement
|
|
46
|
+
|
|
47
|
+
Pour intégrer uniquement les variables CSS (couleurs, spacing, etc.) :
|
|
33
48
|
|
|
34
49
|
```css
|
|
35
50
|
@import "@maboussoleaidant/design-system/tokens";
|
|
36
51
|
```
|
|
37
52
|
|
|
53
|
+
### Polices
|
|
54
|
+
|
|
55
|
+
Les polices (Open Sans, Congenial, Material Symbols) sont incluses dans le package. Les chemins sont relatifs à `src/assets/fonts/`. Selon votre bundler, vous devrez peut-être configurer la copie des assets :
|
|
56
|
+
|
|
57
|
+
```javascript
|
|
58
|
+
// Vite : les imports CSS résolvent automatiquement les fonts
|
|
59
|
+
// Webpack : configurer file-loader/asset-modules pour .woff2
|
|
60
|
+
```
|
|
61
|
+
|
|
38
62
|
## Développement
|
|
39
63
|
|
|
40
64
|
```bash
|