@maboussoleaidant/design-system 0.1.5 → 0.1.7

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.
Files changed (22) hide show
  1. package/README.md +9 -10
  2. package/dist/mba-tailwind.css +18 -0
  3. package/dist/mba-tailwind.css.map +1 -1
  4. package/dist/mba-tailwind.min.css +1 -1
  5. package/package.json +7 -3
  6. package/src/tailwind-preset.css +207 -0
  7. package/src/tokens/_breakpoints.css +29 -0
  8. package/src/tokens/_colors.css +146 -0
  9. package/src/tokens/_radius.css +25 -0
  10. package/src/tokens/_shadows.css +40 -0
  11. package/src/tokens/_spacing.css +25 -0
  12. package/src/tokens/_transitions.css +34 -0
  13. package/src/tokens/_typography.css +157 -0
  14. package/src/tokens/index.css +13 -0
  15. /package/{src/assets → assets}/fonts/Congenial-Bold.woff2 +0 -0
  16. /package/{src/assets → assets}/fonts/Congenial-Medium.woff2 +0 -0
  17. /package/{src/assets → assets}/fonts/Congenial.woff2 +0 -0
  18. /package/{src/assets → assets}/fonts/MaterialSymbolsRounded.woff2 +0 -0
  19. /package/{src/assets → assets}/fonts/OpenSans-Bold.woff2 +0 -0
  20. /package/{src/assets → assets}/fonts/OpenSans-ExtraBold.woff2 +0 -0
  21. /package/{src/assets → assets}/fonts/OpenSans-Regular.woff2 +0 -0
  22. /package/{src/assets → assets}/fonts/OpenSans-SemiBold.woff2 +0 -0
package/src/tokens/_colors.css ADDED
@@ -0,0 +1,146 @@
1
+ /**
2
+ * MBA Design System - Couleurs
3
+ *
4
+ * Palette de couleurs extraite du Design System Figma
5
+ * Préfixe: --mba-color-
6
+ */
7
+
8
+ :root {
9
+ /* ===========================================
10
+ BASICS
11
+ =========================================== */
12
+ --mba-color-white: #FFFFFF;
13
+ --mba-color-black: #1C1C1D;
14
+
15
+ /* ===========================================
16
+ GREY (Neutral)
17
+ =========================================== */
18
+ --mba-color-grey-50: #F2F2F3;
19
+ --mba-color-grey-100: #D7D7DB;
20
+ --mba-color-grey-300: #B6B6BC;
21
+ --mba-color-grey-400: #71717A;
22
+ --mba-color-grey-800: #303034;
23
+
24
+ /* ===========================================
25
+ PRIMARY (Violet)
26
+ Couleur principale de la marque
27
+ =========================================== */
28
+ --mba-color-primary-50: #FFF6FF;
29
+ --mba-color-primary-100: #EDD7EF;
30
+ --mba-color-primary-400: #C097C3;
31
+ --mba-color-primary-500: #703973; /* Couleur déposée */
32
+ --mba-color-primary-800: #461C52;
33
+ --mba-color-primary-900: #2C1133;
34
+
35
+ /* ===========================================
36
+ SECONDARY
37
+ =========================================== */
38
+ --mba-color-secondary-500: #FDC785;
39
+
40
+ /* ===========================================
41
+ PRIMARY PRO (Blue)
42
+ Couleur pour l'offre Pro/Entreprise
43
+ =========================================== */
44
+ --mba-color-primary-pro-50: #F7FAFD;
45
+ --mba-color-primary-pro-100: #DFEDF7;
46
+ --mba-color-primary-pro-400: #6A88AA;
47
+ --mba-color-primary-pro-500: #395172;
48
+ --mba-color-primary-pro-800: #122042;
49
+
50
+ /* ===========================================
51
+ ALERT - ERROR / REQUIRED (Rouge)
52
+ =========================================== */
53
+ --mba-color-error-100: #FFDED1;
54
+ --mba-color-error-300: #F8B09E;
55
+ --mba-color-error-400: #D9514E;
56
+ --mba-color-error-500: #C1121F;
57
+ --mba-color-error-800: #6F052A;
58
+
59
+ /* ===========================================
60
+ ALERT - SUCCESS / VALIDATION (Vert)
61
+ =========================================== */
62
+ --mba-color-success-100: #E6FADE;
63
+ --mba-color-success-300: #B7E7AC;
64
+ --mba-color-success-400: #74C474;
65
+ --mba-color-success-500: #489E50;
66
+ --mba-color-success-800: #165B30;
67
+
68
+ /* ===========================================
69
+ ALERT - WARNING / IN PROGRESS (Jaune)
70
+ =========================================== */
71
+ --mba-color-warning-50: #FEFAEC;
72
+ --mba-color-warning-100: #FBF2CB;
73
+ --mba-color-warning-300: #F8E199;
74
+ --mba-color-warning-400: #D6A73D;
75
+ --mba-color-warning-500: #BC7F09;
76
+ --mba-color-warning-800: #6D3D02;
77
+
78
+ /* ===========================================
79
+ ALERT - INFO / NEUTRAL (Bleu)
80
+ =========================================== */
81
+ --mba-color-info-50: #F1FBFE;
82
+ --mba-color-info-100: #E2F6FC;
83
+ --mba-color-info-300: #C6EAF9;
84
+ --mba-color-info-400: #8ABDE0;
85
+ --mba-color-info-500: #649CCC;
86
+ --mba-color-info-800: #1F4076;
87
+
88
+ /* ===========================================
89
+ CUSTOM PALETTE - Brick
90
+ (Ultra light et dark - pour tags, articles, backgrounds)
91
+ =========================================== */
92
+ --mba-color-brick-light: #FCF4F0;
93
+ --mba-color-brick: #AC5118;
94
+
95
+ /* ===========================================
96
+ CUSTOM PALETTE - Forest
97
+ =========================================== */
98
+ --mba-color-forest-light: #DEF8EF;
99
+ --mba-color-forest: #16654C;
100
+
101
+ /* ===========================================
102
+ CUSTOM PALETTE - Rose
103
+ =========================================== */
104
+ --mba-color-rose-light: #FAEFF4;
105
+ --mba-color-rose: #B83C75;
106
+
107
+ /* ===========================================
108
+ CUSTOM PALETTE - Pastels (Nouveau)
109
+ Note: Non accessibles pour texte/titre
110
+ =========================================== */
111
+ --mba-color-pastel-bleuet: #EBF2FF;
112
+ --mba-color-pastel-lavender: #EEEDFF;
113
+ --mba-color-pastel-narcisse: #FFF6E4;
114
+ --mba-color-pastel-oranger: #FFF2EB;
115
+
116
+ /* ===========================================
117
+ CUSTOM - Beige (Background cards)
118
+ =========================================== */
119
+ --mba-color-beige: #F9F5F0;
120
+
121
+ /* ===========================================
122
+ GRADIENT
123
+ =========================================== */
124
+ --mba-gradient-sunset: linear-gradient(117deg, #C7E5FA 4.74%, #E9CDF3 49.92%, #FBE4C1 95.1%);
125
+
126
+ /* ===========================================
127
+ SEMANTIC COLORS
128
+ (Utilise uniquement les tokens Figma existants)
129
+ =========================================== */
130
+ --mba-color-background: var(--mba-color-white);
131
+ --mba-color-surface: var(--mba-color-grey-50);
132
+ --mba-color-surface-raised: var(--mba-color-white);
133
+ --mba-color-border: var(--mba-color-grey-100);
134
+ --mba-color-border-strong: var(--mba-color-grey-300);
135
+
136
+ --mba-color-text: var(--mba-color-black);
137
+ --mba-color-text-muted: var(--mba-color-grey-400);
138
+ --mba-color-text-subtle: var(--mba-color-grey-300);
139
+ --mba-color-text-inverse: var(--mba-color-white);
140
+
141
+ --mba-color-link: var(--mba-color-primary-500);
142
+ --mba-color-link-hover: var(--mba-color-primary-800);
143
+
144
+ /* Focus ring (accessibilité) */
145
+ --mba-focus-ring: 0 0 0 3px rgba(112, 57, 115, 0.25);
146
+ }
package/src/tokens/_radius.css ADDED
@@ -0,0 +1,25 @@
1
+ /**
2
+ * MBA Design System - Border Radius
3
+ *
4
+ * Échelle de rayons de bordure extraite du Design System Figma
5
+ * Préfixe: --mba-radius-
6
+ */
7
+
8
+ :root {
9
+ /* ===========================================
10
+ ÉCHELLE FIGMA
11
+ =========================================== */
12
+ --mba-radius-2xs: 0.25rem; /* 4px */
13
+ --mba-radius-xs: 0.5rem; /* 8px */
14
+ --mba-radius-sm: 1rem; /* 16px */
15
+ --mba-radius-md: 1.5rem; /* 24px */
16
+ --mba-radius-lg: 2rem; /* 32px */
17
+ --mba-radius-xl: 3rem; /* 48px */
18
+ --mba-radius-xxl: 4rem; /* 64px */
19
+
20
+ /* ===========================================
21
+ VALEURS UTILITAIRES
22
+ =========================================== */
23
+ --mba-radius-none: 0;
24
+ --mba-radius-full: 9999px;
25
+ }
package/src/tokens/_shadows.css ADDED
@@ -0,0 +1,40 @@
1
+ /**
2
+ * MBA Design System - Ombres (Elevation)
3
+ *
4
+ * Échelle d'élévation extraite du Design System Figma
5
+ * Couleur de base: Grey 400 (#71717A / rgba(113, 113, 122))
6
+ * Préfixe: --mba-shadow-
7
+ */
8
+
9
+ :root {
10
+ /* ===========================================
11
+ ÉCHELLE FIGMA (Elevation)
12
+ Double couche: 4% + 8% opacité
13
+ =========================================== */
14
+
15
+ /* XXS - blur 4px */
16
+ --mba-shadow-xxs:
17
+ 0 2px 4px 0 rgba(113, 113, 122, 0.04),
18
+ 1px 2px 4px 0 rgba(113, 113, 122, 0.08);
19
+
20
+ /* XS - blur 8px */
21
+ --mba-shadow-xs:
22
+ 0 2px 8px 0 rgba(113, 113, 122, 0.04),
23
+ 1px 2px 8px 0 rgba(113, 113, 122, 0.08);
24
+
25
+ /* SM - blur 16px */
26
+ --mba-shadow-sm:
27
+ 0 2px 16px 0 rgba(113, 113, 122, 0.04),
28
+ 1px 2px 16px 0 rgba(113, 113, 122, 0.08);
29
+
30
+ /* MD - blur 24px */
31
+ --mba-shadow-md:
32
+ 0 2px 24px 0 rgba(113, 113, 122, 0.04),
33
+ 1px 2px 24px 0 rgba(113, 113, 122, 0.08);
34
+
35
+ /* ===========================================
36
+ VALEURS UTILITAIRES
37
+ =========================================== */
38
+ --mba-shadow-none: 0 0 #0000;
39
+ --mba-shadow-inner: inset 0 2px 4px 0 rgba(113, 113, 122, 0.08);
40
+ }
package/src/tokens/_spacing.css ADDED
@@ -0,0 +1,25 @@
1
+ /**
2
+ * MBA Design System - Espacements
3
+ *
4
+ * Échelle d'espacements extraite du Design System Figma
5
+ * Préfixe: --mba-space-
6
+ */
7
+
8
+ :root {
9
+ /* ===========================================
10
+ ÉCHELLE FIGMA
11
+ =========================================== */
12
+ --mba-space-xxs: 0.25rem; /* 4px */
13
+ --mba-space-xs: 0.5rem; /* 8px */
14
+ --mba-space-sm: 1rem; /* 16px */
15
+ --mba-space-md: 1.5rem; /* 24px */
16
+ --mba-space-lg: 2rem; /* 32px */
17
+ --mba-space-xl: 3rem; /* 48px */
18
+ --mba-space-xxl: 4rem; /* 64px */
19
+
20
+ /* ===========================================
21
+ VALEURS UTILITAIRES
22
+ =========================================== */
23
+ --mba-space-0: 0;
24
+ --mba-space-px: 1px;
25
+ }
package/src/tokens/_transitions.css ADDED
@@ -0,0 +1,34 @@
1
+ /**
2
+ * MBA Design System - Transitions
3
+ *
4
+ * Durées et easings pour les animations
5
+ */
6
+
7
+ :root {
8
+ /* ===========================================
9
+ DUREES
10
+ =========================================== */
11
+ --mba-duration-75: 75ms;
12
+ --mba-duration-100: 100ms;
13
+ --mba-duration-150: 150ms;
14
+ --mba-duration-200: 200ms;
15
+ --mba-duration-300: 300ms;
16
+ --mba-duration-500: 500ms;
17
+ --mba-duration-700: 700ms;
18
+ --mba-duration-1000: 1000ms;
19
+
20
+ /* ===========================================
21
+ EASINGS
22
+ =========================================== */
23
+ --mba-ease-linear: linear;
24
+ --mba-ease-in: cubic-bezier(0.4, 0, 1, 1);
25
+ --mba-ease-out: cubic-bezier(0, 0, 0.2, 1);
26
+ --mba-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
27
+
28
+ /* ===========================================
29
+ TRANSITIONS PRECONSTRUITES
30
+ =========================================== */
31
+ --mba-transition-fast: var(--mba-duration-150) var(--mba-ease-in-out);
32
+ --mba-transition-base: var(--mba-duration-200) var(--mba-ease-in-out);
33
+ --mba-transition-slow: var(--mba-duration-300) var(--mba-ease-in-out);
34
+ }
package/src/tokens/_typography.css ADDED
@@ -0,0 +1,157 @@
1
+ /**
2
+ * MBA Design System - Typographie
3
+ *
4
+ * Polices: Open Sans (textes) + Congenial (titres)
5
+ * Source: Design System Figma
6
+ */
7
+
8
+ :root {
9
+ /* ===========================================
10
+ FAMILLES DE POLICES
11
+ =========================================== */
12
+ --mba-font-family-text: "Open Sans", ui-sans-serif, system-ui, sans-serif;
13
+ --mba-font-family-heading: "Congenial", ui-sans-serif, system-ui, sans-serif;
14
+ --mba-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
15
+
16
+ /* ===========================================
17
+ TAILLES DE POLICE (Figma Scale)
18
+ =========================================== */
19
+ --mba-font-size-xxs: 0.875rem; /* 14px */
20
+ --mba-font-size-xs: 1rem; /* 16px */
21
+ --mba-font-size-sm: 1.125rem; /* 18px */
22
+ --mba-font-size-md: 1.5rem; /* 24px */
23
+ --mba-font-size-xl: 2rem; /* 32px */
24
+ --mba-font-size-xxl: 3rem; /* 48px */
25
+
26
+ /* ===========================================
27
+ FONT WEIGHTS
28
+ =========================================== */
29
+ --mba-font-weight-regular: 400;
30
+ --mba-font-weight-semibold: 600;
31
+ --mba-font-weight-bold: 700;
32
+ --mba-font-weight-extrabold: 800;
33
+
34
+ /* ===========================================
35
+ LINE HEIGHTS
36
+ =========================================== */
37
+ --mba-leading-none: 1;
38
+ --mba-leading-tight: 1.25;
39
+ --mba-leading-snug: 1.375;
40
+ --mba-leading-normal: 1.5;
41
+ --mba-leading-relaxed: 1.625;
42
+ --mba-leading-loose: 2;
43
+
44
+ /* ===========================================
45
+ LETTER SPACING
46
+ =========================================== */
47
+ --mba-tracking-tighter: -0.05em;
48
+ --mba-tracking-tight: -0.025em;
49
+ --mba-tracking-normal: 0em;
50
+ --mba-tracking-wide: 0.025em;
51
+ --mba-tracking-wider: 0.05em;
52
+ --mba-tracking-widest: 0.1em;
53
+ }
54
+
55
+ /* ===========================================
56
+ HEADING PRESETS (Congenial)
57
+ =========================================== */
58
+
59
+ /* XXL - 48px Bold */
60
+ .mba-heading-xxl {
61
+ font-family: var(--mba-font-family-heading);
62
+ font-size: var(--mba-font-size-xxl);
63
+ font-weight: var(--mba-font-weight-bold);
64
+ line-height: var(--mba-leading-tight);
65
+ }
66
+
67
+ /* XL - 32px Bold */
68
+ .mba-heading-xl {
69
+ font-family: var(--mba-font-family-heading);
70
+ font-size: var(--mba-font-size-xl);
71
+ font-weight: var(--mba-font-weight-bold);
72
+ line-height: var(--mba-leading-tight);
73
+ }
74
+
75
+ /* MD - 24px Bold (Figma: extra-bold, mais Congenial ExtraBold non dispo) */
76
+ .mba-heading-md {
77
+ font-family: var(--mba-font-family-heading);
78
+ font-size: var(--mba-font-size-md);
79
+ font-weight: var(--mba-font-weight-bold);
80
+ line-height: var(--mba-leading-snug);
81
+ }
82
+
83
+ /* SM - 18px Bold */
84
+ .mba-heading-sm {
85
+ font-family: var(--mba-font-family-heading);
86
+ font-size: var(--mba-font-size-sm);
87
+ font-weight: var(--mba-font-weight-bold);
88
+ line-height: var(--mba-leading-normal);
89
+ }
90
+
91
+ /* XS - 16px Bold */
92
+ .mba-heading-xs {
93
+ font-family: var(--mba-font-family-heading);
94
+ font-size: var(--mba-font-size-xs);
95
+ font-weight: var(--mba-font-weight-bold);
96
+ line-height: var(--mba-leading-normal);
97
+ }
98
+
99
+ /* XXS - 14px Bold */
100
+ .mba-heading-xxs {
101
+ font-family: var(--mba-font-family-heading);
102
+ font-size: var(--mba-font-size-xxs);
103
+ font-weight: var(--mba-font-weight-bold);
104
+ line-height: var(--mba-leading-normal);
105
+ }
106
+
107
+ /* ===========================================
108
+ TEXT PRESETS (Open Sans)
109
+ =========================================== */
110
+
111
+ /* XXL - 48px */
112
+ .mba-text-xxl {
113
+ font-family: var(--mba-font-family-text);
114
+ font-size: var(--mba-font-size-xxl);
115
+ font-weight: var(--mba-font-weight-regular);
116
+ line-height: var(--mba-leading-normal);
117
+ }
118
+
119
+ /* XL - 32px */
120
+ .mba-text-xl {
121
+ font-family: var(--mba-font-family-text);
122
+ font-size: var(--mba-font-size-xl);
123
+ font-weight: var(--mba-font-weight-regular);
124
+ line-height: var(--mba-leading-normal);
125
+ }
126
+
127
+ /* MD - 24px */
128
+ .mba-text-md {
129
+ font-family: var(--mba-font-family-text);
130
+ font-size: var(--mba-font-size-md);
131
+ font-weight: var(--mba-font-weight-regular);
132
+ line-height: var(--mba-leading-normal);
133
+ }
134
+
135
+ /* SM - 18px */
136
+ .mba-text-sm {
137
+ font-family: var(--mba-font-family-text);
138
+ font-size: var(--mba-font-size-sm);
139
+ font-weight: var(--mba-font-weight-regular);
140
+ line-height: var(--mba-leading-normal);
141
+ }
142
+
143
+ /* XS - 16px (Base) */
144
+ .mba-text-xs {
145
+ font-family: var(--mba-font-family-text);
146
+ font-size: var(--mba-font-size-xs);
147
+ font-weight: var(--mba-font-weight-regular);
148
+ line-height: var(--mba-leading-normal);
149
+ }
150
+
151
+ /* XXS - 14px */
152
+ .mba-text-xxs {
153
+ font-family: var(--mba-font-family-text);
154
+ font-size: var(--mba-font-size-xxs);
155
+ font-weight: var(--mba-font-weight-regular);
156
+ line-height: var(--mba-leading-normal);
157
+ }
package/src/tokens/index.css ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * MBA Design System - Tokens
3
+ *
4
+ * Point d'entrée pour tous les design tokens
5
+ */
6
+
7
+ @import "./_colors.css";
8
+ @import "./_typography.css";
9
+ @import "./_spacing.css";
10
+ @import "./_radius.css";
11
+ @import "./_shadows.css";
12
+ @import "./_transitions.css";
13
+ @import "./_breakpoints.css";
/package/{src/assets → assets}/fonts/Congenial.woff2 RENAMED
File without changes