@dsrc-cm/tokens 0.1.1 → 0.2.0

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 (6) hide show
  1. package/README.md +59 -36
  2. package/dist/tokens.css +147 -36
  3. package/dist/tokens.js +124 -13
  4. package/dist/tokens.mjs +147 -36
  5. package/dist/tokens.scss +147 -36
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -20,7 +20,7 @@ npm install @dsrc-cm/tokens
20
20
 
21
21
  ```css
22
22
  .mon-composant {
23
- color: var(--dsrc-color-primaire);
23
+ color: var(--dsrc-color-primary);
24
24
  padding: var(--dsrc-spacing-4);
25
25
  font-family: var(--dsrc-font-family-sans);
26
26
  }
@@ -32,7 +32,7 @@ npm install @dsrc-cm/tokens
32
32
  @import '@dsrc-cm/tokens/scss';
33
33
 
34
34
  .mon-composant {
35
- color: $dsrc-color-primaire;
35
+ color: $dsrc-color-primary;
36
36
  padding: $dsrc-spacing-4;
37
37
  }
38
38
  ```
@@ -40,44 +40,68 @@ npm install @dsrc-cm/tokens
40
40
  ### JavaScript / ESM
41
41
 
42
42
  ```js
43
- import { ColorPrimaire, SpacingUnit } from '@dsrc-cm/tokens';
44
-
45
- console.log(ColorPrimaire); // "#007a2b"
43
+ import tokens from '@dsrc-cm/tokens';
46
44
  ```
47
45
 
48
46
  ### CommonJS
49
47
 
50
48
  ```js
51
- const { ColorPrimaire } = require('@dsrc-cm/tokens');
49
+ const tokens = require('@dsrc-cm/tokens');
50
+ ```
51
+
52
+ ## Système de couleurs (3 couches)
53
+
54
+ Le DSRC utilise une architecture de tokens à 3 couches :
55
+
56
+ ```
57
+ Couche 1 — Primitifs --dsrc-color-green-500 (valeur brute)
58
+ ↓
59
+ Couche 2 — Sémantique --dsrc-color-primary (décision de design)
60
+ ↓
61
+ Couche 3 — Compat --dsrc-color-primaire (ancien nom FR)
52
62
  ```
53
63
 
54
- ## Tokens disponibles
55
-
56
- ### Couleurs
57
-
58
- | Token | Valeur | Usage |
59
- |-------|--------|-------|
60
- | `--dsrc-color-primaire` | `#007A2B` | Vert de l'État — boutons, liens, focus |
61
- | `--dsrc-color-primaire-fonce` | `#005A1E` | Hover, états pressés |
62
- | `--dsrc-color-primaire-clair` | `#E8F5ED` | Fonds, survols légers |
63
- | `--dsrc-color-noir` | `#161616` | Titres, texte principal |
64
- | `--dsrc-color-gris-600` | `#555555` | Texte secondaire |
65
- | `--dsrc-color-gris-200` | `#DEDEDE` | Bordures, séparateurs |
66
- | `--dsrc-color-gris-100` | `#F0F0F0` | Fonds de section |
67
- | `--dsrc-color-blanc` | `#FFFFFF` | Cartes, surfaces |
68
- | `--dsrc-color-fond` | `#FAFAFA` | Fond de page |
69
- | `--dsrc-color-drapeau-vert` | `#009938` | Drapeau camerounais |
70
- | `--dsrc-color-drapeau-rouge` | `#CE003A` | Drapeau camerounais |
71
- | `--dsrc-color-drapeau-jaune` | `#F0B414` | Drapeau camerounais |
72
-
73
- ### Sémantique
74
-
75
- | Token | Usage |
76
- |-------|-------|
77
- | `--dsrc-color-succes-*` | Validation, succès |
78
- | `--dsrc-color-erreur-*` | Erreurs, rejets |
79
- | `--dsrc-color-avertissement-*` | Avertissements |
80
- | `--dsrc-color-info-*` | Informations |
64
+ ### Palettes (8 familles × 10 nuances)
65
+
66
+ | Famille | Ancrage | Nuances |
67
+ |---------|---------|---------|
68
+ | **Green** | `#007A2B` (vert de l'État) | 50–900 |
69
+ | **Red** | `#CE003A` (drapeau) | 50–900 |
70
+ | **Yellow** | `#F0B414` (drapeau) | 50–900 |
71
+ | **Blue** | `#2563EB` (info) | 50–900 |
72
+ | **Gray** | `#161616` → `#F7F7F7` | 50–900 |
73
+ | **Purple** | `#9333EA` | 50–900 |
74
+ | **Teal** | `#14B8A6` | 50–900 |
75
+ | **Orange** | `#F97316` | 50–900 |
76
+
77
+ ### Tokens sémantiques
78
+
79
+ | Token | Référence | Usage |
80
+ |-------|-----------|-------|
81
+ | `--dsrc-color-primary` | `green-500` | Boutons, liens, focus |
82
+ | `--dsrc-color-primary-hover` | `green-600` | État hover |
83
+ | `--dsrc-color-primary-dark` | `green-700` | État pressé |
84
+ | `--dsrc-color-primary-light` | `green-50` | Fonds légers |
85
+ | `--dsrc-color-text` | `gray-900` | Texte principal |
86
+ | `--dsrc-color-text-secondary` | `gray-600` | Texte secondaire |
87
+ | `--dsrc-color-border` | `gray-200` | Bordures |
88
+ | `--dsrc-color-surface` | `white` | Surfaces/cartes |
89
+ | `--dsrc-color-success-bg/text/border` | green | Succès |
90
+ | `--dsrc-color-error-bg/text/border` | red | Erreurs |
91
+ | `--dsrc-color-warning-bg/text/border` | yellow | Alertes |
92
+ | `--dsrc-color-info-bg/text/border` | blue | Informations |
93
+ | `--dsrc-color-flag-green/red/yellow` | — | Drapeau camerounais |
94
+
95
+ ### Rétrocompatibilité
96
+
97
+ Les anciens noms français fonctionnent toujours :
98
+
99
+ | Ancien | Nouveau |
100
+ |--------|---------|
101
+ | `--dsrc-color-primaire` | `--dsrc-color-primary` |
102
+ | `--dsrc-color-noir` | `--dsrc-color-black` |
103
+ | `--dsrc-color-gris-600` | `--dsrc-color-gray-600` |
104
+ | `--dsrc-color-succes-fond` | `--dsrc-color-success-bg` |
81
105
 
82
106
  ### Typographie
83
107
 
@@ -85,13 +109,12 @@ const { ColorPrimaire } = require('@dsrc-cm/tokens');
85
109
  |-------|--------|
86
110
  | `--dsrc-font-family-sans` | `'IBM Plex Sans', sans-serif` |
87
111
  | `--dsrc-font-family-mono` | `'IBM Plex Mono', monospace` |
88
- | `--dsrc-font-size-body` | `1rem` |
89
- | `--dsrc-font-size-small` | `0.875rem` |
112
+ | `--dsrc-font-size-body` | `16px` |
90
113
  | `--dsrc-font-weight-bold` | `700` |
91
114
 
92
115
  ### Espacement
93
116
 
94
- Grille de 4px : `--dsrc-spacing-1` (4px) à `--dsrc-spacing-16` (64px).
117
+ Grille de 4px : `--dsrc-spacing-1` (4px) à `--dsrc-spacing-8` (64px).
95
118
 
96
119
  ### Breakpoints
97
120
 
package/dist/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 23 Feb 2026 16:22:03 GMT
3
+ * Generated on Tue, 24 Feb 2026 01:28:12 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -62,43 +62,154 @@
62
62
  --dsrc-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* Modals, popovers */
63
63
  --dsrc-shadow-md: 0 2px 6px rgba(0,0,0,0.08); /* Cards, dropdowns */
64
64
  --dsrc-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); /* Inputs, boutons */
65
- --dsrc-color-purple-texte: #6b21a8; /* Texte badge purple */
66
- --dsrc-color-purple-fond: #f3e8ff; /* Fond badge purple */
67
- --dsrc-color-overlay: rgba(0, 0, 0, 0.5); /* Fond overlay modals, sidebars */
68
- --dsrc-color-succes-bordure: #18753c; /* Bordure succes */
69
- --dsrc-color-gris-500: #929292; /* Texte desactive */
70
- --dsrc-color-gris-300: #dddddd; /* Bordures moyennes */
71
- --dsrc-color-primaire-hover: #006223; /* Hover boutons primaires */
72
- --dsrc-color-info-bordure: #2563eb;
73
- --dsrc-color-info-texte: #1e40af;
74
- --dsrc-color-info-fond: #eff6ff;
75
- --dsrc-color-alerte-bordure: #d97706;
76
- --dsrc-color-alerte-texte: #78350f;
77
- --dsrc-color-alerte-fond: #fffbeb;
78
- --dsrc-color-erreur-bordure: #c53030;
79
- --dsrc-color-erreur-texte: #9b1c1c;
80
- --dsrc-color-erreur-fond: #fff0f0;
81
- --dsrc-color-succes-texte: #005a1e;
82
- --dsrc-color-succes-fond: #e8f5ed;
83
- --dsrc-color-drapeau-jaune: #f0b414; /* Drapeau camerounais */
84
- --dsrc-color-drapeau-rouge: #ce003a; /* Drapeau camerounais */
85
- --dsrc-color-drapeau-vert: #009938; /* Drapeau camerounais */
86
- --dsrc-color-fond: #fafafa; /* Fond de page */
87
- --dsrc-color-blanc: #ffffff; /* Cartes, surfaces */
88
- --dsrc-color-gris-50: #f7f7f7;
89
- --dsrc-color-gris-100: #f0f0f0; /* Fonds de section */
90
- --dsrc-color-gris-200: #dedede; /* Bordures, separateurs */
91
- --dsrc-color-gris-400: #909090;
92
- --dsrc-color-gris-600: #555555; /* Texte secondaire, labels */
93
- --dsrc-color-gris-700: #3d3d3d;
94
- --dsrc-color-gris-800: #2b2b2b;
95
- --dsrc-color-noir: #161616; /* Titres, texte principal */
96
- --dsrc-color-primaire-focus: rgba(0, 122, 43, 0.18); /* Outline focus */
97
- --dsrc-color-primaire-clair: #e8f5ed; /* Fonds, survols legers, badges */
98
- --dsrc-color-primaire-fonce: #005a1e; /* Hover, etats presses */
99
- --dsrc-color-primaire: #007a2b; /* Vert d'Etat - Boutons, liens, focus, actif */
65
+ --dsrc-color-error-border: #c53030; /* Error border */
66
+ --dsrc-color-success-border: #18753c; /* Success border */
67
+ --dsrc-color-focus: rgba(0, 122, 43, 0.18); /* Focus ring outline */
68
+ --dsrc-color-overlay: rgba(0, 0, 0, 0.5); /* Modal/sidebar overlay */
69
+ --dsrc-color-background: #fafafa; /* Page background */
70
+ --dsrc-color-black: #161616; /* Headings, body text */
71
+ --dsrc-color-white: #ffffff; /* Cards, surfaces */
72
+ --dsrc-color-orange-900: #7c2d12; /* Darkest orange */
73
+ --dsrc-color-orange-800: #9a3412; /* Darker orange */
74
+ --dsrc-color-orange-700: #c2410c; /* Very dark orange */
75
+ --dsrc-color-orange-600: #ea580c; /* Dark orange */
76
+ --dsrc-color-orange-500: #f97316; /* Standard orange */
77
+ --dsrc-color-orange-400: #fb923c; /* Medium orange */
78
+ --dsrc-color-orange-300: #fdba74; /* Medium-light orange */
79
+ --dsrc-color-orange-200: #fed7aa; /* Light orange */
80
+ --dsrc-color-orange-100: #ffedd5; /* Very light orange */
81
+ --dsrc-color-orange-50: #fff7ed; /* Lightest orange */
82
+ --dsrc-color-teal-900: #134e4a; /* Darkest teal */
83
+ --dsrc-color-teal-800: #115e59; /* Darker teal */
84
+ --dsrc-color-teal-700: #0f766e; /* Very dark teal */
85
+ --dsrc-color-teal-600: #0d9488; /* Dark teal */
86
+ --dsrc-color-teal-500: #14b8a6; /* Standard teal */
87
+ --dsrc-color-teal-400: #2dd4bf; /* Medium teal */
88
+ --dsrc-color-teal-300: #5eead4; /* Medium-light teal */
89
+ --dsrc-color-teal-200: #99f6e4; /* Light teal */
90
+ --dsrc-color-teal-100: #ccfbf1; /* Very light teal */
91
+ --dsrc-color-teal-50: #f0fdfa; /* Lightest teal */
92
+ --dsrc-color-purple-900: #3b0764; /* Darkest purple */
93
+ --dsrc-color-purple-800: #581c87; /* Darker purple */
94
+ --dsrc-color-purple-700: #6b21a8; /* Very dark purple */
95
+ --dsrc-color-purple-600: #7e22ce; /* Dark purple */
96
+ --dsrc-color-purple-500: #9333ea; /* Standard purple */
97
+ --dsrc-color-purple-400: #a855f7; /* Medium purple */
98
+ --dsrc-color-purple-300: #c084fc; /* Medium-light purple */
99
+ --dsrc-color-purple-200: #d8b4fe; /* Light purple */
100
+ --dsrc-color-purple-100: #e9d5ff; /* Very light purple */
101
+ --dsrc-color-purple-50: #f3e8ff; /* Lightest purple */
102
+ --dsrc-color-gray-900: #161616; /* Headings, body text */
103
+ --dsrc-color-gray-800: #2b2b2b; /* Very dark text */
104
+ --dsrc-color-gray-700: #3d3d3d; /* Dark text */
105
+ --dsrc-color-gray-600: #555555; /* Secondary text, labels */
106
+ --dsrc-color-gray-500: #929292; /* Disabled text */
107
+ --dsrc-color-gray-400: #909090; /* Muted text */
108
+ --dsrc-color-gray-300: #dddddd; /* Medium borders */
109
+ --dsrc-color-gray-200: #dedede; /* Borders, separators */
110
+ --dsrc-color-gray-100: #f0f0f0; /* Section backgrounds */
111
+ --dsrc-color-gray-50: #f7f7f7; /* Near-white */
112
+ --dsrc-color-blue-900: #172554; /* Darkest blue */
113
+ --dsrc-color-blue-800: #1e3a8a; /* Very dark blue */
114
+ --dsrc-color-blue-700: #1e40af; /* Info text */
115
+ --dsrc-color-blue-600: #1d4ed8; /* Dark blue */
116
+ --dsrc-color-blue-500: #2563eb; /* Standard blue */
117
+ --dsrc-color-blue-400: #60a5fa; /* Medium blue */
118
+ --dsrc-color-blue-300: #93c5fd; /* Medium-light blue */
119
+ --dsrc-color-blue-200: #bfdbfe; /* Light blue */
120
+ --dsrc-color-blue-100: #dbeafe; /* Very light blue */
121
+ --dsrc-color-blue-50: #eff6ff; /* Lightest blue */
122
+ --dsrc-color-yellow-900: #5c2a0e; /* Darkest amber */
123
+ --dsrc-color-yellow-800: #78350f; /* Warning text */
124
+ --dsrc-color-yellow-700: #92400e; /* Very dark amber */
125
+ --dsrc-color-yellow-600: #b45309; /* Dark amber */
126
+ --dsrc-color-yellow-500: #d97706; /* Standard amber */
127
+ --dsrc-color-yellow-400: #f0b414; /* Cameroon flag yellow */
128
+ --dsrc-color-yellow-300: #f0c844; /* Medium-light yellow */
129
+ --dsrc-color-yellow-200: #fce588; /* Light yellow */
130
+ --dsrc-color-yellow-100: #fff3c4; /* Very light yellow */
131
+ --dsrc-color-yellow-50: #fffbeb; /* Lightest yellow */
132
+ --dsrc-color-red-900: #4a0d0d; /* Darkest red */
133
+ --dsrc-color-red-800: #6b1414; /* Very dark red */
134
+ --dsrc-color-red-700: #861b1b; /* Dark red */
135
+ --dsrc-color-red-600: #9b1c1c; /* Error text */
136
+ --dsrc-color-red-500: #b80033; /* Standard red */
137
+ --dsrc-color-red-400: #ce003a; /* Cameroon flag red */
138
+ --dsrc-color-red-300: #e8566a; /* Medium-light red */
139
+ --dsrc-color-red-200: #f99ba5; /* Light red */
140
+ --dsrc-color-red-100: #ffd4d9; /* Very light red */
141
+ --dsrc-color-red-50: #fff0f0; /* Lightest red */
142
+ --dsrc-color-green-900: #00310f; /* Darkest green */
143
+ --dsrc-color-green-800: #004316; /* Very dark green */
144
+ --dsrc-color-green-700: #005a1e; /* Dark green */
145
+ --dsrc-color-green-600: #006223; /* Hover state */
146
+ --dsrc-color-green-500: #007a2b; /* Primary – Government green */
147
+ --dsrc-color-green-400: #009938; /* Cameroon flag green */
148
+ --dsrc-color-green-300: #4db56b; /* Medium-light green */
149
+ --dsrc-color-green-200: #8fcf9f; /* Light green */
150
+ --dsrc-color-green-100: #c6e7d0; /* Very light green */
151
+ --dsrc-color-green-50: #e8f5ed; /* Lightest green */
100
152
  --dsrc-breakpoint-xl: 1248px; /* Grand ecran */
101
153
  --dsrc-breakpoint-lg: 992px; /* Desktop */
102
154
  --dsrc-breakpoint-md: 768px; /* Tablette */
103
155
  --dsrc-breakpoint-sm: 576px; /* Mobile paysage */
156
+ --dsrc-color-purple-texte: var(--dsrc-color-purple-700); /* COMPAT */
157
+ --dsrc-color-purple-fond: var(--dsrc-color-purple-50); /* COMPAT */
158
+ --dsrc-color-erreur-bordure: var(--dsrc-color-error-border); /* COMPAT */
159
+ --dsrc-color-succes-bordure: var(--dsrc-color-success-border); /* COMPAT */
160
+ --dsrc-color-gris-800: var(--dsrc-color-gray-800); /* COMPAT */
161
+ --dsrc-color-gris-700: var(--dsrc-color-gray-700); /* COMPAT */
162
+ --dsrc-color-gris-600: var(--dsrc-color-gray-600); /* COMPAT */
163
+ --dsrc-color-gris-500: var(--dsrc-color-gray-500); /* COMPAT */
164
+ --dsrc-color-gris-400: var(--dsrc-color-gray-400); /* COMPAT */
165
+ --dsrc-color-gris-300: var(--dsrc-color-gray-300); /* COMPAT */
166
+ --dsrc-color-gris-200: var(--dsrc-color-gray-200); /* COMPAT */
167
+ --dsrc-color-gris-100: var(--dsrc-color-gray-100); /* COMPAT */
168
+ --dsrc-color-gris-50: var(--dsrc-color-gray-50); /* COMPAT */
169
+ --dsrc-color-fond: var(--dsrc-color-background); /* COMPAT */
170
+ --dsrc-color-blanc: var(--dsrc-color-white); /* COMPAT */
171
+ --dsrc-color-noir: var(--dsrc-color-black); /* COMPAT */
172
+ --dsrc-color-primaire-focus: var(--dsrc-color-focus); /* COMPAT */
173
+ --dsrc-color-info-border: var(--dsrc-color-blue-500); /* Info border */
174
+ --dsrc-color-info-text: var(--dsrc-color-blue-700); /* Info text */
175
+ --dsrc-color-info-bg: var(--dsrc-color-blue-50); /* Info background */
176
+ --dsrc-color-warning-border: var(--dsrc-color-yellow-500); /* Warning border */
177
+ --dsrc-color-warning-text: var(--dsrc-color-yellow-800); /* Warning text */
178
+ --dsrc-color-warning-bg: var(--dsrc-color-yellow-50); /* Warning background */
179
+ --dsrc-color-error-text: var(--dsrc-color-red-600); /* Error text */
180
+ --dsrc-color-error-bg: var(--dsrc-color-red-50); /* Error background */
181
+ --dsrc-color-success-text: var(--dsrc-color-green-700); /* Success text */
182
+ --dsrc-color-success-bg: var(--dsrc-color-green-50); /* Success background */
183
+ --dsrc-color-surface-alt: var(--dsrc-color-gray-100); /* Alternate surface (sections) */
184
+ --dsrc-color-surface: var(--dsrc-color-white); /* Card/surface background */
185
+ --dsrc-color-border-strong: var(--dsrc-color-gray-300); /* Stronger border */
186
+ --dsrc-color-border: var(--dsrc-color-gray-200); /* Default border color */
187
+ --dsrc-color-text-inverted: var(--dsrc-color-white); /* Text on dark backgrounds */
188
+ --dsrc-color-text-disabled: var(--dsrc-color-gray-500); /* Disabled text */
189
+ --dsrc-color-text-secondary: var(--dsrc-color-gray-600); /* Secondary/label text */
190
+ --dsrc-color-text: var(--dsrc-color-gray-900); /* Default text color */
191
+ --dsrc-color-primary-hover: var(--dsrc-color-green-600); /* Primary hover state */
192
+ --dsrc-color-primary-dark: var(--dsrc-color-green-700); /* Primary dark / hover */
193
+ --dsrc-color-primary-light: var(--dsrc-color-green-50); /* Primary light background */
194
+ --dsrc-color-primary: var(--dsrc-color-green-500); /* Primary action color */
195
+ --dsrc-color-flag-yellow: var(--dsrc-color-yellow-400); /* Cameroon flag yellow */
196
+ --dsrc-color-flag-red: var(--dsrc-color-red-400); /* Cameroon flag red */
197
+ --dsrc-color-flag-green: var(--dsrc-color-green-400); /* Cameroon flag green */
198
+ --dsrc-color-info-bordure: var(--dsrc-color-info-border); /* COMPAT */
199
+ --dsrc-color-info-texte: var(--dsrc-color-info-text); /* COMPAT */
200
+ --dsrc-color-info-fond: var(--dsrc-color-info-bg); /* COMPAT */
201
+ --dsrc-color-alerte-bordure: var(--dsrc-color-warning-border); /* COMPAT */
202
+ --dsrc-color-alerte-texte: var(--dsrc-color-warning-text); /* COMPAT */
203
+ --dsrc-color-alerte-fond: var(--dsrc-color-warning-bg); /* COMPAT */
204
+ --dsrc-color-erreur-texte: var(--dsrc-color-error-text); /* COMPAT */
205
+ --dsrc-color-erreur-fond: var(--dsrc-color-error-bg); /* COMPAT */
206
+ --dsrc-color-succes-texte: var(--dsrc-color-success-text); /* COMPAT */
207
+ --dsrc-color-succes-fond: var(--dsrc-color-success-bg); /* COMPAT */
208
+ --dsrc-color-drapeau-jaune: var(--dsrc-color-flag-yellow); /* COMPAT */
209
+ --dsrc-color-drapeau-rouge: var(--dsrc-color-flag-red); /* COMPAT */
210
+ --dsrc-color-drapeau-vert: var(--dsrc-color-flag-green); /* COMPAT */
211
+ --dsrc-color-primaire-hover: var(--dsrc-color-primary-hover); /* COMPAT */
212
+ --dsrc-color-primaire-clair: var(--dsrc-color-primary-light); /* COMPAT */
213
+ --dsrc-color-primaire-fonce: var(--dsrc-color-primary-dark); /* COMPAT */
214
+ --dsrc-color-primaire: var(--dsrc-color-primary); /* COMPAT: ancien nom francais */
104
215
  }
package/dist/tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 23 Feb 2026 16:22:03 GMT
3
+ * Generated on Tue, 24 Feb 2026 01:28:12 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -8,25 +8,141 @@ module.exports = {
8
8
  "BreakpointMd": "768px",
9
9
  "BreakpointLg": "992px",
10
10
  "BreakpointXl": "1248px",
11
+ "ColorGreen50": "#e8f5ed",
12
+ "ColorGreen100": "#c6e7d0",
13
+ "ColorGreen200": "#8fcf9f",
14
+ "ColorGreen300": "#4db56b",
15
+ "ColorGreen400": "#009938",
16
+ "ColorGreen500": "#007a2b",
17
+ "ColorGreen600": "#006223",
18
+ "ColorGreen700": "#005a1e",
19
+ "ColorGreen800": "#004316",
20
+ "ColorGreen900": "#00310f",
21
+ "ColorRed50": "#fff0f0",
22
+ "ColorRed100": "#ffd4d9",
23
+ "ColorRed200": "#f99ba5",
24
+ "ColorRed300": "#e8566a",
25
+ "ColorRed400": "#ce003a",
26
+ "ColorRed500": "#b80033",
27
+ "ColorRed600": "#9b1c1c",
28
+ "ColorRed700": "#861b1b",
29
+ "ColorRed800": "#6b1414",
30
+ "ColorRed900": "#4a0d0d",
31
+ "ColorYellow50": "#fffbeb",
32
+ "ColorYellow100": "#fff3c4",
33
+ "ColorYellow200": "#fce588",
34
+ "ColorYellow300": "#f0c844",
35
+ "ColorYellow400": "#f0b414",
36
+ "ColorYellow500": "#d97706",
37
+ "ColorYellow600": "#b45309",
38
+ "ColorYellow700": "#92400e",
39
+ "ColorYellow800": "#78350f",
40
+ "ColorYellow900": "#5c2a0e",
41
+ "ColorBlue50": "#eff6ff",
42
+ "ColorBlue100": "#dbeafe",
43
+ "ColorBlue200": "#bfdbfe",
44
+ "ColorBlue300": "#93c5fd",
45
+ "ColorBlue400": "#60a5fa",
46
+ "ColorBlue500": "#2563eb",
47
+ "ColorBlue600": "#1d4ed8",
48
+ "ColorBlue700": "#1e40af",
49
+ "ColorBlue800": "#1e3a8a",
50
+ "ColorBlue900": "#172554",
51
+ "ColorGray50": "#f7f7f7",
52
+ "ColorGray100": "#f0f0f0",
53
+ "ColorGray200": "#dedede",
54
+ "ColorGray300": "#dddddd",
55
+ "ColorGray400": "#909090",
56
+ "ColorGray500": "#929292",
57
+ "ColorGray600": "#555555",
58
+ "ColorGray700": "#3d3d3d",
59
+ "ColorGray800": "#2b2b2b",
60
+ "ColorGray900": "#161616",
61
+ "ColorPurple50": "#f3e8ff",
62
+ "ColorPurple100": "#e9d5ff",
63
+ "ColorPurple200": "#d8b4fe",
64
+ "ColorPurple300": "#c084fc",
65
+ "ColorPurple400": "#a855f7",
66
+ "ColorPurple500": "#9333ea",
67
+ "ColorPurple600": "#7e22ce",
68
+ "ColorPurple700": "#6b21a8",
69
+ "ColorPurple800": "#581c87",
70
+ "ColorPurple900": "#3b0764",
71
+ "ColorTeal50": "#f0fdfa",
72
+ "ColorTeal100": "#ccfbf1",
73
+ "ColorTeal200": "#99f6e4",
74
+ "ColorTeal300": "#5eead4",
75
+ "ColorTeal400": "#2dd4bf",
76
+ "ColorTeal500": "#14b8a6",
77
+ "ColorTeal600": "#0d9488",
78
+ "ColorTeal700": "#0f766e",
79
+ "ColorTeal800": "#115e59",
80
+ "ColorTeal900": "#134e4a",
81
+ "ColorOrange50": "#fff7ed",
82
+ "ColorOrange100": "#ffedd5",
83
+ "ColorOrange200": "#fed7aa",
84
+ "ColorOrange300": "#fdba74",
85
+ "ColorOrange400": "#fb923c",
86
+ "ColorOrange500": "#f97316",
87
+ "ColorOrange600": "#ea580c",
88
+ "ColorOrange700": "#c2410c",
89
+ "ColorOrange800": "#9a3412",
90
+ "ColorOrange900": "#7c2d12",
91
+ "ColorWhite": "#ffffff",
92
+ "ColorBlack": "#161616",
93
+ "ColorBackground": "#fafafa",
94
+ "ColorOverlay": "#000000",
95
+ "ColorFocus": "#007a2b",
96
+ "ColorFlagGreen": "#009938",
97
+ "ColorFlagRed": "#ce003a",
98
+ "ColorFlagYellow": "#f0b414",
99
+ "ColorPrimary": "#007a2b",
100
+ "ColorPrimaryLight": "#e8f5ed",
101
+ "ColorPrimaryDark": "#005a1e",
102
+ "ColorPrimaryHover": "#006223",
103
+ "ColorText": "#161616",
104
+ "ColorTextSecondary": "#555555",
105
+ "ColorTextDisabled": "#929292",
106
+ "ColorTextInverted": "#ffffff",
107
+ "ColorBorder": "#dedede",
108
+ "ColorBorderStrong": "#dddddd",
109
+ "ColorSurface": "#ffffff",
110
+ "ColorSurfaceAlt": "#f0f0f0",
111
+ "ColorSuccessBg": "#e8f5ed",
112
+ "ColorSuccessText": "#005a1e",
113
+ "ColorSuccessBorder": "#18753c",
114
+ "ColorErrorBg": "#fff0f0",
115
+ "ColorErrorText": "#9b1c1c",
116
+ "ColorErrorBorder": "#c53030",
117
+ "ColorWarningBg": "#fffbeb",
118
+ "ColorWarningText": "#78350f",
119
+ "ColorWarningBorder": "#d97706",
120
+ "ColorInfoBg": "#eff6ff",
121
+ "ColorInfoText": "#1e40af",
122
+ "ColorInfoBorder": "#2563eb",
11
123
  "ColorPrimaire": "#007a2b",
12
124
  "ColorPrimaireFonce": "#005a1e",
13
125
  "ColorPrimaireClair": "#e8f5ed",
126
+ "ColorPrimaireHover": "#006223",
14
127
  "ColorPrimaireFocus": "#007a2b",
15
128
  "ColorNoir": "#161616",
16
- "ColorGris800": "#2b2b2b",
17
- "ColorGris700": "#3d3d3d",
18
- "ColorGris600": "#555555",
19
- "ColorGris400": "#909090",
20
- "ColorGris200": "#dedede",
21
- "ColorGris100": "#f0f0f0",
22
- "ColorGris50": "#f7f7f7",
23
129
  "ColorBlanc": "#ffffff",
24
130
  "ColorFond": "#fafafa",
131
+ "ColorGris50": "#f7f7f7",
132
+ "ColorGris100": "#f0f0f0",
133
+ "ColorGris200": "#dedede",
134
+ "ColorGris300": "#dddddd",
135
+ "ColorGris400": "#909090",
136
+ "ColorGris500": "#929292",
137
+ "ColorGris600": "#555555",
138
+ "ColorGris700": "#3d3d3d",
139
+ "ColorGris800": "#2b2b2b",
25
140
  "ColorDrapeauVert": "#009938",
26
141
  "ColorDrapeauRouge": "#ce003a",
27
142
  "ColorDrapeauJaune": "#f0b414",
28
143
  "ColorSuccesFond": "#e8f5ed",
29
144
  "ColorSuccesTexte": "#005a1e",
145
+ "ColorSuccesBordure": "#18753c",
30
146
  "ColorErreurFond": "#fff0f0",
31
147
  "ColorErreurTexte": "#9b1c1c",
32
148
  "ColorErreurBordure": "#c53030",
@@ -36,11 +152,6 @@ module.exports = {
36
152
  "ColorInfoFond": "#eff6ff",
37
153
  "ColorInfoTexte": "#1e40af",
38
154
  "ColorInfoBordure": "#2563eb",
39
- "ColorPrimaireHover": "#006223",
40
- "ColorGris300": "#dddddd",
41
- "ColorGris500": "#929292",
42
- "ColorSuccesBordure": "#18753c",
43
- "ColorOverlay": "#000000",
44
155
  "ColorPurpleFond": "#f3e8ff",
45
156
  "ColorPurpleTexte": "#6b21a8",
46
157
  "ShadowSm": "0 1px 2px rgba(0,0,0,0.06)",
package/dist/tokens.mjs CHANGED
@@ -1,47 +1,158 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 23 Feb 2026 16:22:03 GMT
3
+ * Generated on Tue, 24 Feb 2026 01:28:12 GMT
4
4
  */
5
5
 
6
6
  export const BreakpointSm = "576px"; // Mobile paysage
7
7
  export const BreakpointMd = "768px"; // Tablette
8
8
  export const BreakpointLg = "992px"; // Desktop
9
9
  export const BreakpointXl = "1248px"; // Grand ecran
10
- export const ColorPrimaire = "#007a2b"; // Vert d'Etat - Boutons, liens, focus, actif
11
- export const ColorPrimaireFonce = "#005a1e"; // Hover, etats presses
12
- export const ColorPrimaireClair = "#e8f5ed"; // Fonds, survols legers, badges
13
- export const ColorPrimaireFocus = "#007a2b"; // Outline focus
14
- export const ColorNoir = "#161616"; // Titres, texte principal
15
- export const ColorGris800 = "#2b2b2b";
16
- export const ColorGris700 = "#3d3d3d";
17
- export const ColorGris600 = "#555555"; // Texte secondaire, labels
18
- export const ColorGris400 = "#909090";
19
- export const ColorGris200 = "#dedede"; // Bordures, separateurs
20
- export const ColorGris100 = "#f0f0f0"; // Fonds de section
21
- export const ColorGris50 = "#f7f7f7";
22
- export const ColorBlanc = "#ffffff"; // Cartes, surfaces
23
- export const ColorFond = "#fafafa"; // Fond de page
24
- export const ColorDrapeauVert = "#009938"; // Drapeau camerounais
25
- export const ColorDrapeauRouge = "#ce003a"; // Drapeau camerounais
26
- export const ColorDrapeauJaune = "#f0b414"; // Drapeau camerounais
27
- export const ColorSuccesFond = "#e8f5ed";
28
- export const ColorSuccesTexte = "#005a1e";
29
- export const ColorErreurFond = "#fff0f0";
30
- export const ColorErreurTexte = "#9b1c1c";
31
- export const ColorErreurBordure = "#c53030";
32
- export const ColorAlerteFond = "#fffbeb";
33
- export const ColorAlerteTexte = "#78350f";
34
- export const ColorAlerteBordure = "#d97706";
35
- export const ColorInfoFond = "#eff6ff";
36
- export const ColorInfoTexte = "#1e40af";
37
- export const ColorInfoBordure = "#2563eb";
38
- export const ColorPrimaireHover = "#006223"; // Hover boutons primaires
39
- export const ColorGris300 = "#dddddd"; // Bordures moyennes
40
- export const ColorGris500 = "#929292"; // Texte desactive
41
- export const ColorSuccesBordure = "#18753c"; // Bordure succes
42
- export const ColorOverlay = "#000000"; // Fond overlay modals, sidebars
43
- export const ColorPurpleFond = "#f3e8ff"; // Fond badge purple
44
- export const ColorPurpleTexte = "#6b21a8"; // Texte badge purple
10
+ export const ColorGreen50 = "#e8f5ed"; // Lightest green
11
+ export const ColorGreen100 = "#c6e7d0"; // Very light green
12
+ export const ColorGreen200 = "#8fcf9f"; // Light green
13
+ export const ColorGreen300 = "#4db56b"; // Medium-light green
14
+ export const ColorGreen400 = "#009938"; // Cameroon flag green
15
+ export const ColorGreen500 = "#007a2b"; // Primary – Government green
16
+ export const ColorGreen600 = "#006223"; // Hover state
17
+ export const ColorGreen700 = "#005a1e"; // Dark green
18
+ export const ColorGreen800 = "#004316"; // Very dark green
19
+ export const ColorGreen900 = "#00310f"; // Darkest green
20
+ export const ColorRed50 = "#fff0f0"; // Lightest red
21
+ export const ColorRed100 = "#ffd4d9"; // Very light red
22
+ export const ColorRed200 = "#f99ba5"; // Light red
23
+ export const ColorRed300 = "#e8566a"; // Medium-light red
24
+ export const ColorRed400 = "#ce003a"; // Cameroon flag red
25
+ export const ColorRed500 = "#b80033"; // Standard red
26
+ export const ColorRed600 = "#9b1c1c"; // Error text
27
+ export const ColorRed700 = "#861b1b"; // Dark red
28
+ export const ColorRed800 = "#6b1414"; // Very dark red
29
+ export const ColorRed900 = "#4a0d0d"; // Darkest red
30
+ export const ColorYellow50 = "#fffbeb"; // Lightest yellow
31
+ export const ColorYellow100 = "#fff3c4"; // Very light yellow
32
+ export const ColorYellow200 = "#fce588"; // Light yellow
33
+ export const ColorYellow300 = "#f0c844"; // Medium-light yellow
34
+ export const ColorYellow400 = "#f0b414"; // Cameroon flag yellow
35
+ export const ColorYellow500 = "#d97706"; // Standard amber
36
+ export const ColorYellow600 = "#b45309"; // Dark amber
37
+ export const ColorYellow700 = "#92400e"; // Very dark amber
38
+ export const ColorYellow800 = "#78350f"; // Warning text
39
+ export const ColorYellow900 = "#5c2a0e"; // Darkest amber
40
+ export const ColorBlue50 = "#eff6ff"; // Lightest blue
41
+ export const ColorBlue100 = "#dbeafe"; // Very light blue
42
+ export const ColorBlue200 = "#bfdbfe"; // Light blue
43
+ export const ColorBlue300 = "#93c5fd"; // Medium-light blue
44
+ export const ColorBlue400 = "#60a5fa"; // Medium blue
45
+ export const ColorBlue500 = "#2563eb"; // Standard blue
46
+ export const ColorBlue600 = "#1d4ed8"; // Dark blue
47
+ export const ColorBlue700 = "#1e40af"; // Info text
48
+ export const ColorBlue800 = "#1e3a8a"; // Very dark blue
49
+ export const ColorBlue900 = "#172554"; // Darkest blue
50
+ export const ColorGray50 = "#f7f7f7"; // Near-white
51
+ export const ColorGray100 = "#f0f0f0"; // Section backgrounds
52
+ export const ColorGray200 = "#dedede"; // Borders, separators
53
+ export const ColorGray300 = "#dddddd"; // Medium borders
54
+ export const ColorGray400 = "#909090"; // Muted text
55
+ export const ColorGray500 = "#929292"; // Disabled text
56
+ export const ColorGray600 = "#555555"; // Secondary text, labels
57
+ export const ColorGray700 = "#3d3d3d"; // Dark text
58
+ export const ColorGray800 = "#2b2b2b"; // Very dark text
59
+ export const ColorGray900 = "#161616"; // Headings, body text
60
+ export const ColorPurple50 = "#f3e8ff"; // Lightest purple
61
+ export const ColorPurple100 = "#e9d5ff"; // Very light purple
62
+ export const ColorPurple200 = "#d8b4fe"; // Light purple
63
+ export const ColorPurple300 = "#c084fc"; // Medium-light purple
64
+ export const ColorPurple400 = "#a855f7"; // Medium purple
65
+ export const ColorPurple500 = "#9333ea"; // Standard purple
66
+ export const ColorPurple600 = "#7e22ce"; // Dark purple
67
+ export const ColorPurple700 = "#6b21a8"; // Very dark purple
68
+ export const ColorPurple800 = "#581c87"; // Darker purple
69
+ export const ColorPurple900 = "#3b0764"; // Darkest purple
70
+ export const ColorTeal50 = "#f0fdfa"; // Lightest teal
71
+ export const ColorTeal100 = "#ccfbf1"; // Very light teal
72
+ export const ColorTeal200 = "#99f6e4"; // Light teal
73
+ export const ColorTeal300 = "#5eead4"; // Medium-light teal
74
+ export const ColorTeal400 = "#2dd4bf"; // Medium teal
75
+ export const ColorTeal500 = "#14b8a6"; // Standard teal
76
+ export const ColorTeal600 = "#0d9488"; // Dark teal
77
+ export const ColorTeal700 = "#0f766e"; // Very dark teal
78
+ export const ColorTeal800 = "#115e59"; // Darker teal
79
+ export const ColorTeal900 = "#134e4a"; // Darkest teal
80
+ export const ColorOrange50 = "#fff7ed"; // Lightest orange
81
+ export const ColorOrange100 = "#ffedd5"; // Very light orange
82
+ export const ColorOrange200 = "#fed7aa"; // Light orange
83
+ export const ColorOrange300 = "#fdba74"; // Medium-light orange
84
+ export const ColorOrange400 = "#fb923c"; // Medium orange
85
+ export const ColorOrange500 = "#f97316"; // Standard orange
86
+ export const ColorOrange600 = "#ea580c"; // Dark orange
87
+ export const ColorOrange700 = "#c2410c"; // Very dark orange
88
+ export const ColorOrange800 = "#9a3412"; // Darker orange
89
+ export const ColorOrange900 = "#7c2d12"; // Darkest orange
90
+ export const ColorWhite = "#ffffff"; // Cards, surfaces
91
+ export const ColorBlack = "#161616"; // Headings, body text
92
+ export const ColorBackground = "#fafafa"; // Page background
93
+ export const ColorOverlay = "#000000"; // Modal/sidebar overlay
94
+ export const ColorFocus = "#007a2b"; // Focus ring outline
95
+ export const ColorFlagGreen = "#009938"; // Cameroon flag green
96
+ export const ColorFlagRed = "#ce003a"; // Cameroon flag red
97
+ export const ColorFlagYellow = "#f0b414"; // Cameroon flag yellow
98
+ export const ColorPrimary = "#007a2b"; // Primary action color
99
+ export const ColorPrimaryLight = "#e8f5ed"; // Primary light background
100
+ export const ColorPrimaryDark = "#005a1e"; // Primary dark / hover
101
+ export const ColorPrimaryHover = "#006223"; // Primary hover state
102
+ export const ColorText = "#161616"; // Default text color
103
+ export const ColorTextSecondary = "#555555"; // Secondary/label text
104
+ export const ColorTextDisabled = "#929292"; // Disabled text
105
+ export const ColorTextInverted = "#ffffff"; // Text on dark backgrounds
106
+ export const ColorBorder = "#dedede"; // Default border color
107
+ export const ColorBorderStrong = "#dddddd"; // Stronger border
108
+ export const ColorSurface = "#ffffff"; // Card/surface background
109
+ export const ColorSurfaceAlt = "#f0f0f0"; // Alternate surface (sections)
110
+ export const ColorSuccessBg = "#e8f5ed"; // Success background
111
+ export const ColorSuccessText = "#005a1e"; // Success text
112
+ export const ColorSuccessBorder = "#18753c"; // Success border
113
+ export const ColorErrorBg = "#fff0f0"; // Error background
114
+ export const ColorErrorText = "#9b1c1c"; // Error text
115
+ export const ColorErrorBorder = "#c53030"; // Error border
116
+ export const ColorWarningBg = "#fffbeb"; // Warning background
117
+ export const ColorWarningText = "#78350f"; // Warning text
118
+ export const ColorWarningBorder = "#d97706"; // Warning border
119
+ export const ColorInfoBg = "#eff6ff"; // Info background
120
+ export const ColorInfoText = "#1e40af"; // Info text
121
+ export const ColorInfoBorder = "#2563eb"; // Info border
122
+ export const ColorPrimaire = "#007a2b"; // COMPAT: ancien nom francais
123
+ export const ColorPrimaireFonce = "#005a1e"; // COMPAT
124
+ export const ColorPrimaireClair = "#e8f5ed"; // COMPAT
125
+ export const ColorPrimaireHover = "#006223"; // COMPAT
126
+ export const ColorPrimaireFocus = "#007a2b"; // COMPAT
127
+ export const ColorNoir = "#161616"; // COMPAT
128
+ export const ColorBlanc = "#ffffff"; // COMPAT
129
+ export const ColorFond = "#fafafa"; // COMPAT
130
+ export const ColorGris50 = "#f7f7f7"; // COMPAT
131
+ export const ColorGris100 = "#f0f0f0"; // COMPAT
132
+ export const ColorGris200 = "#dedede"; // COMPAT
133
+ export const ColorGris300 = "#dddddd"; // COMPAT
134
+ export const ColorGris400 = "#909090"; // COMPAT
135
+ export const ColorGris500 = "#929292"; // COMPAT
136
+ export const ColorGris600 = "#555555"; // COMPAT
137
+ export const ColorGris700 = "#3d3d3d"; // COMPAT
138
+ export const ColorGris800 = "#2b2b2b"; // COMPAT
139
+ export const ColorDrapeauVert = "#009938"; // COMPAT
140
+ export const ColorDrapeauRouge = "#ce003a"; // COMPAT
141
+ export const ColorDrapeauJaune = "#f0b414"; // COMPAT
142
+ export const ColorSuccesFond = "#e8f5ed"; // COMPAT
143
+ export const ColorSuccesTexte = "#005a1e"; // COMPAT
144
+ export const ColorSuccesBordure = "#18753c"; // COMPAT
145
+ export const ColorErreurFond = "#fff0f0"; // COMPAT
146
+ export const ColorErreurTexte = "#9b1c1c"; // COMPAT
147
+ export const ColorErreurBordure = "#c53030"; // COMPAT
148
+ export const ColorAlerteFond = "#fffbeb"; // COMPAT
149
+ export const ColorAlerteTexte = "#78350f"; // COMPAT
150
+ export const ColorAlerteBordure = "#d97706"; // COMPAT
151
+ export const ColorInfoFond = "#eff6ff"; // COMPAT
152
+ export const ColorInfoTexte = "#1e40af"; // COMPAT
153
+ export const ColorInfoBordure = "#2563eb"; // COMPAT
154
+ export const ColorPurpleFond = "#f3e8ff"; // COMPAT
155
+ export const ColorPurpleTexte = "#6b21a8"; // COMPAT
45
156
  export const ShadowSm = "0 1px 2px rgba(0,0,0,0.06)"; // Inputs, boutons
46
157
  export const ShadowMd = "0 2px 6px rgba(0,0,0,0.08)"; // Cards, dropdowns
47
158
  export const ShadowLg = "0 8px 24px rgba(0,0,0,0.12)"; // Modals, popovers
package/dist/tokens.scss CHANGED
@@ -1,46 +1,157 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Feb 2026 16:22:03 GMT
3
+ // Generated on Tue, 24 Feb 2026 01:28:12 GMT
4
4
 
5
5
  $dsrc-breakpoint-sm: 576px; // Mobile paysage
6
6
  $dsrc-breakpoint-md: 768px; // Tablette
7
7
  $dsrc-breakpoint-lg: 992px; // Desktop
8
8
  $dsrc-breakpoint-xl: 1248px; // Grand ecran
9
- $dsrc-color-primaire: #007a2b; // Vert d'Etat - Boutons, liens, focus, actif
10
- $dsrc-color-primaire-fonce: #005a1e; // Hover, etats presses
11
- $dsrc-color-primaire-clair: #e8f5ed; // Fonds, survols legers, badges
12
- $dsrc-color-primaire-focus: rgba(0, 122, 43, 0.18); // Outline focus
13
- $dsrc-color-noir: #161616; // Titres, texte principal
14
- $dsrc-color-gris-800: #2b2b2b;
15
- $dsrc-color-gris-700: #3d3d3d;
16
- $dsrc-color-gris-600: #555555; // Texte secondaire, labels
17
- $dsrc-color-gris-400: #909090;
18
- $dsrc-color-gris-200: #dedede; // Bordures, separateurs
19
- $dsrc-color-gris-100: #f0f0f0; // Fonds de section
20
- $dsrc-color-gris-50: #f7f7f7;
21
- $dsrc-color-blanc: #ffffff; // Cartes, surfaces
22
- $dsrc-color-fond: #fafafa; // Fond de page
23
- $dsrc-color-drapeau-vert: #009938; // Drapeau camerounais
24
- $dsrc-color-drapeau-rouge: #ce003a; // Drapeau camerounais
25
- $dsrc-color-drapeau-jaune: #f0b414; // Drapeau camerounais
26
- $dsrc-color-succes-fond: #e8f5ed;
27
- $dsrc-color-succes-texte: #005a1e;
28
- $dsrc-color-erreur-fond: #fff0f0;
29
- $dsrc-color-erreur-texte: #9b1c1c;
30
- $dsrc-color-erreur-bordure: #c53030;
31
- $dsrc-color-alerte-fond: #fffbeb;
32
- $dsrc-color-alerte-texte: #78350f;
33
- $dsrc-color-alerte-bordure: #d97706;
34
- $dsrc-color-info-fond: #eff6ff;
35
- $dsrc-color-info-texte: #1e40af;
36
- $dsrc-color-info-bordure: #2563eb;
37
- $dsrc-color-primaire-hover: #006223; // Hover boutons primaires
38
- $dsrc-color-gris-300: #dddddd; // Bordures moyennes
39
- $dsrc-color-gris-500: #929292; // Texte desactive
40
- $dsrc-color-succes-bordure: #18753c; // Bordure succes
41
- $dsrc-color-overlay: rgba(0, 0, 0, 0.5); // Fond overlay modals, sidebars
42
- $dsrc-color-purple-fond: #f3e8ff; // Fond badge purple
43
- $dsrc-color-purple-texte: #6b21a8; // Texte badge purple
9
+ $dsrc-color-green-50: #e8f5ed; // Lightest green
10
+ $dsrc-color-green-100: #c6e7d0; // Very light green
11
+ $dsrc-color-green-200: #8fcf9f; // Light green
12
+ $dsrc-color-green-300: #4db56b; // Medium-light green
13
+ $dsrc-color-green-400: #009938; // Cameroon flag green
14
+ $dsrc-color-green-500: #007a2b; // Primary – Government green
15
+ $dsrc-color-green-600: #006223; // Hover state
16
+ $dsrc-color-green-700: #005a1e; // Dark green
17
+ $dsrc-color-green-800: #004316; // Very dark green
18
+ $dsrc-color-green-900: #00310f; // Darkest green
19
+ $dsrc-color-red-50: #fff0f0; // Lightest red
20
+ $dsrc-color-red-100: #ffd4d9; // Very light red
21
+ $dsrc-color-red-200: #f99ba5; // Light red
22
+ $dsrc-color-red-300: #e8566a; // Medium-light red
23
+ $dsrc-color-red-400: #ce003a; // Cameroon flag red
24
+ $dsrc-color-red-500: #b80033; // Standard red
25
+ $dsrc-color-red-600: #9b1c1c; // Error text
26
+ $dsrc-color-red-700: #861b1b; // Dark red
27
+ $dsrc-color-red-800: #6b1414; // Very dark red
28
+ $dsrc-color-red-900: #4a0d0d; // Darkest red
29
+ $dsrc-color-yellow-50: #fffbeb; // Lightest yellow
30
+ $dsrc-color-yellow-100: #fff3c4; // Very light yellow
31
+ $dsrc-color-yellow-200: #fce588; // Light yellow
32
+ $dsrc-color-yellow-300: #f0c844; // Medium-light yellow
33
+ $dsrc-color-yellow-400: #f0b414; // Cameroon flag yellow
34
+ $dsrc-color-yellow-500: #d97706; // Standard amber
35
+ $dsrc-color-yellow-600: #b45309; // Dark amber
36
+ $dsrc-color-yellow-700: #92400e; // Very dark amber
37
+ $dsrc-color-yellow-800: #78350f; // Warning text
38
+ $dsrc-color-yellow-900: #5c2a0e; // Darkest amber
39
+ $dsrc-color-blue-50: #eff6ff; // Lightest blue
40
+ $dsrc-color-blue-100: #dbeafe; // Very light blue
41
+ $dsrc-color-blue-200: #bfdbfe; // Light blue
42
+ $dsrc-color-blue-300: #93c5fd; // Medium-light blue
43
+ $dsrc-color-blue-400: #60a5fa; // Medium blue
44
+ $dsrc-color-blue-500: #2563eb; // Standard blue
45
+ $dsrc-color-blue-600: #1d4ed8; // Dark blue
46
+ $dsrc-color-blue-700: #1e40af; // Info text
47
+ $dsrc-color-blue-800: #1e3a8a; // Very dark blue
48
+ $dsrc-color-blue-900: #172554; // Darkest blue
49
+ $dsrc-color-gray-50: #f7f7f7; // Near-white
50
+ $dsrc-color-gray-100: #f0f0f0; // Section backgrounds
51
+ $dsrc-color-gray-200: #dedede; // Borders, separators
52
+ $dsrc-color-gray-300: #dddddd; // Medium borders
53
+ $dsrc-color-gray-400: #909090; // Muted text
54
+ $dsrc-color-gray-500: #929292; // Disabled text
55
+ $dsrc-color-gray-600: #555555; // Secondary text, labels
56
+ $dsrc-color-gray-700: #3d3d3d; // Dark text
57
+ $dsrc-color-gray-800: #2b2b2b; // Very dark text
58
+ $dsrc-color-gray-900: #161616; // Headings, body text
59
+ $dsrc-color-purple-50: #f3e8ff; // Lightest purple
60
+ $dsrc-color-purple-100: #e9d5ff; // Very light purple
61
+ $dsrc-color-purple-200: #d8b4fe; // Light purple
62
+ $dsrc-color-purple-300: #c084fc; // Medium-light purple
63
+ $dsrc-color-purple-400: #a855f7; // Medium purple
64
+ $dsrc-color-purple-500: #9333ea; // Standard purple
65
+ $dsrc-color-purple-600: #7e22ce; // Dark purple
66
+ $dsrc-color-purple-700: #6b21a8; // Very dark purple
67
+ $dsrc-color-purple-800: #581c87; // Darker purple
68
+ $dsrc-color-purple-900: #3b0764; // Darkest purple
69
+ $dsrc-color-teal-50: #f0fdfa; // Lightest teal
70
+ $dsrc-color-teal-100: #ccfbf1; // Very light teal
71
+ $dsrc-color-teal-200: #99f6e4; // Light teal
72
+ $dsrc-color-teal-300: #5eead4; // Medium-light teal
73
+ $dsrc-color-teal-400: #2dd4bf; // Medium teal
74
+ $dsrc-color-teal-500: #14b8a6; // Standard teal
75
+ $dsrc-color-teal-600: #0d9488; // Dark teal
76
+ $dsrc-color-teal-700: #0f766e; // Very dark teal
77
+ $dsrc-color-teal-800: #115e59; // Darker teal
78
+ $dsrc-color-teal-900: #134e4a; // Darkest teal
79
+ $dsrc-color-orange-50: #fff7ed; // Lightest orange
80
+ $dsrc-color-orange-100: #ffedd5; // Very light orange
81
+ $dsrc-color-orange-200: #fed7aa; // Light orange
82
+ $dsrc-color-orange-300: #fdba74; // Medium-light orange
83
+ $dsrc-color-orange-400: #fb923c; // Medium orange
84
+ $dsrc-color-orange-500: #f97316; // Standard orange
85
+ $dsrc-color-orange-600: #ea580c; // Dark orange
86
+ $dsrc-color-orange-700: #c2410c; // Very dark orange
87
+ $dsrc-color-orange-800: #9a3412; // Darker orange
88
+ $dsrc-color-orange-900: #7c2d12; // Darkest orange
89
+ $dsrc-color-white: #ffffff; // Cards, surfaces
90
+ $dsrc-color-black: #161616; // Headings, body text
91
+ $dsrc-color-background: #fafafa; // Page background
92
+ $dsrc-color-overlay: rgba(0, 0, 0, 0.5); // Modal/sidebar overlay
93
+ $dsrc-color-focus: rgba(0, 122, 43, 0.18); // Focus ring outline
94
+ $dsrc-color-flag-green: #009938; // Cameroon flag green
95
+ $dsrc-color-flag-red: #ce003a; // Cameroon flag red
96
+ $dsrc-color-flag-yellow: #f0b414; // Cameroon flag yellow
97
+ $dsrc-color-primary: #007a2b; // Primary action color
98
+ $dsrc-color-primary-light: #e8f5ed; // Primary light background
99
+ $dsrc-color-primary-dark: #005a1e; // Primary dark / hover
100
+ $dsrc-color-primary-hover: #006223; // Primary hover state
101
+ $dsrc-color-text: #161616; // Default text color
102
+ $dsrc-color-text-secondary: #555555; // Secondary/label text
103
+ $dsrc-color-text-disabled: #929292; // Disabled text
104
+ $dsrc-color-text-inverted: #ffffff; // Text on dark backgrounds
105
+ $dsrc-color-border: #dedede; // Default border color
106
+ $dsrc-color-border-strong: #dddddd; // Stronger border
107
+ $dsrc-color-surface: #ffffff; // Card/surface background
108
+ $dsrc-color-surface-alt: #f0f0f0; // Alternate surface (sections)
109
+ $dsrc-color-success-bg: #e8f5ed; // Success background
110
+ $dsrc-color-success-text: #005a1e; // Success text
111
+ $dsrc-color-success-border: #18753c; // Success border
112
+ $dsrc-color-error-bg: #fff0f0; // Error background
113
+ $dsrc-color-error-text: #9b1c1c; // Error text
114
+ $dsrc-color-error-border: #c53030; // Error border
115
+ $dsrc-color-warning-bg: #fffbeb; // Warning background
116
+ $dsrc-color-warning-text: #78350f; // Warning text
117
+ $dsrc-color-warning-border: #d97706; // Warning border
118
+ $dsrc-color-info-bg: #eff6ff; // Info background
119
+ $dsrc-color-info-text: #1e40af; // Info text
120
+ $dsrc-color-info-border: #2563eb; // Info border
121
+ $dsrc-color-primaire: #007a2b; // COMPAT: ancien nom francais
122
+ $dsrc-color-primaire-fonce: #005a1e; // COMPAT
123
+ $dsrc-color-primaire-clair: #e8f5ed; // COMPAT
124
+ $dsrc-color-primaire-hover: #006223; // COMPAT
125
+ $dsrc-color-primaire-focus: rgba(0, 122, 43, 0.18); // COMPAT
126
+ $dsrc-color-noir: #161616; // COMPAT
127
+ $dsrc-color-blanc: #ffffff; // COMPAT
128
+ $dsrc-color-fond: #fafafa; // COMPAT
129
+ $dsrc-color-gris-50: #f7f7f7; // COMPAT
130
+ $dsrc-color-gris-100: #f0f0f0; // COMPAT
131
+ $dsrc-color-gris-200: #dedede; // COMPAT
132
+ $dsrc-color-gris-300: #dddddd; // COMPAT
133
+ $dsrc-color-gris-400: #909090; // COMPAT
134
+ $dsrc-color-gris-500: #929292; // COMPAT
135
+ $dsrc-color-gris-600: #555555; // COMPAT
136
+ $dsrc-color-gris-700: #3d3d3d; // COMPAT
137
+ $dsrc-color-gris-800: #2b2b2b; // COMPAT
138
+ $dsrc-color-drapeau-vert: #009938; // COMPAT
139
+ $dsrc-color-drapeau-rouge: #ce003a; // COMPAT
140
+ $dsrc-color-drapeau-jaune: #f0b414; // COMPAT
141
+ $dsrc-color-succes-fond: #e8f5ed; // COMPAT
142
+ $dsrc-color-succes-texte: #005a1e; // COMPAT
143
+ $dsrc-color-succes-bordure: #18753c; // COMPAT
144
+ $dsrc-color-erreur-fond: #fff0f0; // COMPAT
145
+ $dsrc-color-erreur-texte: #9b1c1c; // COMPAT
146
+ $dsrc-color-erreur-bordure: #c53030; // COMPAT
147
+ $dsrc-color-alerte-fond: #fffbeb; // COMPAT
148
+ $dsrc-color-alerte-texte: #78350f; // COMPAT
149
+ $dsrc-color-alerte-bordure: #d97706; // COMPAT
150
+ $dsrc-color-info-fond: #eff6ff; // COMPAT
151
+ $dsrc-color-info-texte: #1e40af; // COMPAT
152
+ $dsrc-color-info-bordure: #2563eb; // COMPAT
153
+ $dsrc-color-purple-fond: #f3e8ff; // COMPAT
154
+ $dsrc-color-purple-texte: #6b21a8; // COMPAT
44
155
  $dsrc-shadow-sm: 0 1px 2px rgba(0,0,0,0.06); // Inputs, boutons
45
156
  $dsrc-shadow-md: 0 2px 6px rgba(0,0,0,0.08); // Cards, dropdowns
46
157
  $dsrc-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); // Modals, popovers
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dsrc-cm/tokens",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Design tokens for DSRC - Cameroon State Design System",
5
5
  "main": "dist/tokens.js",
6
6
  "module": "dist/tokens.mjs",