@starterlib/tokens 0.1.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.
- package/README.md +64 -0
- package/fesm2022/starterlib-tokens.mjs +420 -0
- package/fesm2022/starterlib-tokens.mjs.map +1 -0
- package/package.json +38 -0
- package/styles/starter-tokens.css +175 -0
- package/types/starterlib-tokens.d.ts +277 -0
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# Tokens
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.1.0.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build tokens
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
cd dist/tokens
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
40
|
+
```bash
|
|
41
|
+
npm publish
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Running unit tests
|
|
45
|
+
|
|
46
|
+
To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
ng test
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Running end-to-end tests
|
|
53
|
+
|
|
54
|
+
For end-to-end (e2e) testing, run:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
ng e2e
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
61
|
+
|
|
62
|
+
## Additional Resources
|
|
63
|
+
|
|
64
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
@@ -0,0 +1,420 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Niveau 1 — primitives. Palette brute, sans intention d'usage.
|
|
3
|
+
* Aucun composant ne consomme ce niveau directement : il passe par le
|
|
4
|
+
* niveau semantique, sinon un changement de nuance se propage a l'aveugle.
|
|
5
|
+
*/
|
|
6
|
+
const primitives = {
|
|
7
|
+
neutre: {
|
|
8
|
+
0: '#ffffff',
|
|
9
|
+
50: '#f7f8fa',
|
|
10
|
+
100: '#eef1f5',
|
|
11
|
+
200: '#dde2e9',
|
|
12
|
+
300: '#c3ccd7',
|
|
13
|
+
400: '#94a1b2',
|
|
14
|
+
500: '#6b7889',
|
|
15
|
+
600: '#4d5868',
|
|
16
|
+
700: '#39414e',
|
|
17
|
+
800: '#232a34',
|
|
18
|
+
900: '#141920',
|
|
19
|
+
950: '#0b0e13',
|
|
20
|
+
},
|
|
21
|
+
bleu: {
|
|
22
|
+
50: '#eff5ff',
|
|
23
|
+
100: '#dbe8fe',
|
|
24
|
+
200: '#bfd6fe',
|
|
25
|
+
300: '#93bbfd',
|
|
26
|
+
400: '#609afa',
|
|
27
|
+
500: '#3b7df6',
|
|
28
|
+
600: '#255eeb',
|
|
29
|
+
700: '#1d4ed8',
|
|
30
|
+
800: '#1e40af',
|
|
31
|
+
900: '#1e3a8a',
|
|
32
|
+
},
|
|
33
|
+
vert: {
|
|
34
|
+
100: '#d7f5e3',
|
|
35
|
+
300: '#7fd6a4',
|
|
36
|
+
500: '#1a9d54',
|
|
37
|
+
600: '#15803d',
|
|
38
|
+
700: '#116932',
|
|
39
|
+
900: '#0a3d1e',
|
|
40
|
+
},
|
|
41
|
+
ambre: {
|
|
42
|
+
100: '#fdf0d5',
|
|
43
|
+
300: '#f3c969',
|
|
44
|
+
500: '#b4730b',
|
|
45
|
+
600: '#a16207',
|
|
46
|
+
700: '#854d0e',
|
|
47
|
+
900: '#432a06',
|
|
48
|
+
},
|
|
49
|
+
rouge: {
|
|
50
|
+
100: '#fde2e2',
|
|
51
|
+
300: '#f3a3a3',
|
|
52
|
+
500: '#d92d2d',
|
|
53
|
+
600: '#b91c1c',
|
|
54
|
+
700: '#991b1b',
|
|
55
|
+
900: '#4c1010',
|
|
56
|
+
},
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Echelles non chromatiques. Elles ne changent pas entre le theme clair et le
|
|
61
|
+
* theme sombre : une distance ni une graisse ne dependent de la luminosite.
|
|
62
|
+
*/
|
|
63
|
+
/** Pas de 4 px. Une valeur hors echelle est un defaut de conception. */
|
|
64
|
+
const espacement = {
|
|
65
|
+
'0': '0',
|
|
66
|
+
'1': '0.25rem',
|
|
67
|
+
'2': '0.5rem',
|
|
68
|
+
'3': '0.75rem',
|
|
69
|
+
'4': '1rem',
|
|
70
|
+
'5': '1.25rem',
|
|
71
|
+
'6': '1.5rem',
|
|
72
|
+
'8': '2rem',
|
|
73
|
+
'10': '2.5rem',
|
|
74
|
+
'12': '3rem',
|
|
75
|
+
'16': '4rem',
|
|
76
|
+
'20': '5rem',
|
|
77
|
+
'24': '6rem',
|
|
78
|
+
};
|
|
79
|
+
const rayon = {
|
|
80
|
+
none: '0',
|
|
81
|
+
xs: '0.125rem',
|
|
82
|
+
sm: '0.25rem',
|
|
83
|
+
md: '0.5rem',
|
|
84
|
+
lg: '0.75rem',
|
|
85
|
+
xl: '1rem',
|
|
86
|
+
pleine: '9999px',
|
|
87
|
+
};
|
|
88
|
+
const typographie = {
|
|
89
|
+
famille: {
|
|
90
|
+
base: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
91
|
+
mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace",
|
|
92
|
+
},
|
|
93
|
+
taille: {
|
|
94
|
+
xs: '0.75rem',
|
|
95
|
+
sm: '0.875rem',
|
|
96
|
+
md: '1rem',
|
|
97
|
+
lg: '1.125rem',
|
|
98
|
+
xl: '1.25rem',
|
|
99
|
+
'2xl': '1.5rem',
|
|
100
|
+
'3xl': '1.875rem',
|
|
101
|
+
'4xl': '2.25rem',
|
|
102
|
+
},
|
|
103
|
+
graisse: { normale: '400', moyenne: '500', semi: '600', grasse: '700' },
|
|
104
|
+
interligne: { serre: '1.25', normal: '1.5', large: '1.75' },
|
|
105
|
+
};
|
|
106
|
+
/**
|
|
107
|
+
* Les ombres restent discretes : une elevation forte sur fond sombre se lit
|
|
108
|
+
* comme une salissure, jamais comme une hauteur.
|
|
109
|
+
*/
|
|
110
|
+
const ombre = {
|
|
111
|
+
none: 'none',
|
|
112
|
+
sm: '0 1px 2px 0 rgb(0 0 0 / 0.06)',
|
|
113
|
+
md: '0 2px 6px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.06)',
|
|
114
|
+
lg: '0 8px 20px -4px rgb(0 0 0 / 0.12), 0 3px 8px -3px rgb(0 0 0 / 0.07)',
|
|
115
|
+
xl: '0 20px 40px -8px rgb(0 0 0 / 0.16)',
|
|
116
|
+
};
|
|
117
|
+
/**
|
|
118
|
+
* Durees courtes : au-dela de 250 ms une interface bancaire parait lente.
|
|
119
|
+
* Toute animation doit se desactiver sous `prefers-reduced-motion`.
|
|
120
|
+
*/
|
|
121
|
+
const duree = {
|
|
122
|
+
instantane: '0ms',
|
|
123
|
+
rapide: '120ms',
|
|
124
|
+
normale: '200ms',
|
|
125
|
+
lente: '320ms',
|
|
126
|
+
};
|
|
127
|
+
const courbe = {
|
|
128
|
+
standard: 'cubic-bezier(0.2, 0, 0, 1)',
|
|
129
|
+
entrant: 'cubic-bezier(0, 0, 0, 1)',
|
|
130
|
+
sortant: 'cubic-bezier(0.3, 0, 1, 1)',
|
|
131
|
+
};
|
|
132
|
+
/**
|
|
133
|
+
* Plans d'empilement nommes. Un `z-index` ecrit a la main dans un composant
|
|
134
|
+
* est un defaut : il finira par passer devant ou derriere sans qu'on sache
|
|
135
|
+
* pourquoi.
|
|
136
|
+
*/
|
|
137
|
+
const plan = {
|
|
138
|
+
base: '0',
|
|
139
|
+
contenuEleve: '10',
|
|
140
|
+
entete: '100',
|
|
141
|
+
tiroir: '200',
|
|
142
|
+
superposition: '300',
|
|
143
|
+
dialogue: '400',
|
|
144
|
+
infobulle: '500',
|
|
145
|
+
notification: '600',
|
|
146
|
+
};
|
|
147
|
+
/** Points de rupture. Mobile d'abord : ces valeurs sont des minimums. */
|
|
148
|
+
const rupture = {
|
|
149
|
+
sm: '480px',
|
|
150
|
+
md: '768px',
|
|
151
|
+
lg: '1024px',
|
|
152
|
+
xl: '1280px',
|
|
153
|
+
'2xl': '1536px',
|
|
154
|
+
};
|
|
155
|
+
/** Cible tactile minimale. Sous 44 px, l'echec de pointage devient courant. */
|
|
156
|
+
const cibleTactileMinimale = '44px';
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* Calcul de contraste WCAG 2.1. Il vit dans les jetons, et non dans les tests,
|
|
160
|
+
* parce qu'une SPA peut avoir a verifier une couleur fournie a l'execution
|
|
161
|
+
* (theme d'un client, statut colore par une donnee).
|
|
162
|
+
*/
|
|
163
|
+
/** Accepte `#rgb` et `#rrggbb`. Leve sur toute autre forme : une couleur
|
|
164
|
+
* illisible ne doit pas se transformer en noir par defaut. */
|
|
165
|
+
function versRvb(hex) {
|
|
166
|
+
const v = hex.trim().replace(/^#/, '');
|
|
167
|
+
const complet = v.length === 3
|
|
168
|
+
? v
|
|
169
|
+
.split('')
|
|
170
|
+
.map((c) => c + c)
|
|
171
|
+
.join('')
|
|
172
|
+
: v;
|
|
173
|
+
if (!/^[0-9a-fA-F]{6}$/.test(complet)) {
|
|
174
|
+
throw new Error(`Couleur hexadecimale invalide : ${hex}`);
|
|
175
|
+
}
|
|
176
|
+
return {
|
|
177
|
+
r: parseInt(complet.slice(0, 2), 16),
|
|
178
|
+
g: parseInt(complet.slice(2, 4), 16),
|
|
179
|
+
b: parseInt(complet.slice(4, 6), 16),
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
function canalLineaire(valeur8bits) {
|
|
183
|
+
const c = valeur8bits / 255;
|
|
184
|
+
return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
185
|
+
}
|
|
186
|
+
/** Luminance relative WCAG, entre 0 (noir) et 1 (blanc). */
|
|
187
|
+
function luminanceRelative(couleur) {
|
|
188
|
+
const { r, g, b } = typeof couleur === 'string' ? versRvb(couleur) : couleur;
|
|
189
|
+
return 0.2126 * canalLineaire(r) + 0.7152 * canalLineaire(g) + 0.0722 * canalLineaire(b);
|
|
190
|
+
}
|
|
191
|
+
/** Rapport de contraste, entre 1 et 21. L'ordre des arguments est indifferent. */
|
|
192
|
+
function rapportDeContraste(a, b) {
|
|
193
|
+
const la = luminanceRelative(a);
|
|
194
|
+
const lb = luminanceRelative(b);
|
|
195
|
+
const clair = Math.max(la, lb);
|
|
196
|
+
const sombre = Math.min(la, lb);
|
|
197
|
+
return (clair + 0.05) / (sombre + 0.05);
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Seuils WCAG. `composant` couvre les bordures, icones et limites de champ :
|
|
201
|
+
* la norme 1.4.11 leur demande 3:1, pas 4.5:1.
|
|
202
|
+
*/
|
|
203
|
+
function seuilExige(niveau, nature) {
|
|
204
|
+
if (nature === 'composant')
|
|
205
|
+
return 3;
|
|
206
|
+
if (niveau === 'AAA')
|
|
207
|
+
return nature === 'grand' ? 4.5 : 7;
|
|
208
|
+
return nature === 'grand' ? 3 : 4.5;
|
|
209
|
+
}
|
|
210
|
+
function respecteLeContraste(premierPlan, arrierePlan, niveau = 'AA', nature = 'courant') {
|
|
211
|
+
return rapportDeContraste(premierPlan, arrierePlan) >= seuilExige(niveau, nature);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
const themeClair = {
|
|
215
|
+
fond: primitives.neutre[50],
|
|
216
|
+
surface: primitives.neutre[0],
|
|
217
|
+
surfaceElevee: primitives.neutre[0],
|
|
218
|
+
surfaceEnfoncee: primitives.neutre[100],
|
|
219
|
+
surfaceSurvol: primitives.neutre[100],
|
|
220
|
+
texte: primitives.neutre[900],
|
|
221
|
+
texteDiscret: primitives.neutre[600],
|
|
222
|
+
texteDesactive: primitives.neutre[400],
|
|
223
|
+
texteInverse: primitives.neutre[0],
|
|
224
|
+
bordure: primitives.neutre[200],
|
|
225
|
+
// 4.49:1 sur `surface` : c'est la bordure qui IDENTIFIE un champ,
|
|
226
|
+
// elle est soumise a WCAG 1.4.11. La neutre 400 n'atteignait que 2.63:1.
|
|
227
|
+
bordureForte: primitives.neutre[500],
|
|
228
|
+
anneauFocus: primitives.bleu[600],
|
|
229
|
+
primaire: primitives.bleu[700],
|
|
230
|
+
primaireSurvol: primitives.bleu[800],
|
|
231
|
+
surPrimaire: primitives.neutre[0],
|
|
232
|
+
primaireDiscret: primitives.bleu[50],
|
|
233
|
+
surPrimaireDiscret: primitives.bleu[900],
|
|
234
|
+
succes: primitives.vert[600],
|
|
235
|
+
surSucces: primitives.neutre[0],
|
|
236
|
+
succesDiscret: primitives.vert[100],
|
|
237
|
+
surSuccesDiscret: primitives.vert[900],
|
|
238
|
+
avertissement: primitives.ambre[600],
|
|
239
|
+
surAvertissement: primitives.neutre[0],
|
|
240
|
+
avertissementDiscret: primitives.ambre[100],
|
|
241
|
+
surAvertissementDiscret: primitives.ambre[900],
|
|
242
|
+
danger: primitives.rouge[600],
|
|
243
|
+
dangerSurvol: primitives.rouge[700],
|
|
244
|
+
surDanger: primitives.neutre[0],
|
|
245
|
+
dangerDiscret: primitives.rouge[100],
|
|
246
|
+
surDangerDiscret: primitives.rouge[900],
|
|
247
|
+
};
|
|
248
|
+
const themeSombre = {
|
|
249
|
+
fond: primitives.neutre[950],
|
|
250
|
+
surface: primitives.neutre[900],
|
|
251
|
+
surfaceElevee: primitives.neutre[800],
|
|
252
|
+
surfaceEnfoncee: primitives.neutre[950],
|
|
253
|
+
surfaceSurvol: primitives.neutre[800],
|
|
254
|
+
texte: primitives.neutre[100],
|
|
255
|
+
texteDiscret: primitives.neutre[300],
|
|
256
|
+
texteDesactive: primitives.neutre[500],
|
|
257
|
+
texteInverse: primitives.neutre[950],
|
|
258
|
+
bordure: primitives.neutre[700],
|
|
259
|
+
bordureForte: primitives.neutre[500],
|
|
260
|
+
anneauFocus: primitives.bleu[300],
|
|
261
|
+
primaire: primitives.bleu[300],
|
|
262
|
+
primaireSurvol: primitives.bleu[200],
|
|
263
|
+
surPrimaire: primitives.neutre[950],
|
|
264
|
+
primaireDiscret: primitives.bleu[900],
|
|
265
|
+
surPrimaireDiscret: primitives.bleu[100],
|
|
266
|
+
succes: primitives.vert[300],
|
|
267
|
+
surSucces: primitives.neutre[950],
|
|
268
|
+
succesDiscret: primitives.vert[900],
|
|
269
|
+
surSuccesDiscret: primitives.vert[100],
|
|
270
|
+
avertissement: primitives.ambre[300],
|
|
271
|
+
surAvertissement: primitives.neutre[950],
|
|
272
|
+
avertissementDiscret: primitives.ambre[900],
|
|
273
|
+
surAvertissementDiscret: primitives.ambre[100],
|
|
274
|
+
danger: primitives.rouge[300],
|
|
275
|
+
dangerSurvol: primitives.rouge[100],
|
|
276
|
+
surDanger: primitives.neutre[950],
|
|
277
|
+
dangerDiscret: primitives.rouge[900],
|
|
278
|
+
surDangerDiscret: primitives.rouge[100],
|
|
279
|
+
};
|
|
280
|
+
const themes = {
|
|
281
|
+
clair: themeClair,
|
|
282
|
+
sombre: themeSombre,
|
|
283
|
+
};
|
|
284
|
+
const pairesDeContraste = [
|
|
285
|
+
{ premierPlan: 'texte', arrierePlan: 'surface', nature: 'courant' },
|
|
286
|
+
{ premierPlan: 'texte', arrierePlan: 'fond', nature: 'courant' },
|
|
287
|
+
{ premierPlan: 'texte', arrierePlan: 'surfaceElevee', nature: 'courant' },
|
|
288
|
+
{ premierPlan: 'texte', arrierePlan: 'surfaceEnfoncee', nature: 'courant' },
|
|
289
|
+
{ premierPlan: 'texteDiscret', arrierePlan: 'surface', nature: 'courant' },
|
|
290
|
+
{ premierPlan: 'texteDiscret', arrierePlan: 'fond', nature: 'courant' },
|
|
291
|
+
{ premierPlan: 'texteInverse', arrierePlan: 'primaire', nature: 'courant' },
|
|
292
|
+
{ premierPlan: 'bordureForte', arrierePlan: 'surface', nature: 'composant' },
|
|
293
|
+
{ premierPlan: 'anneauFocus', arrierePlan: 'surface', nature: 'composant' },
|
|
294
|
+
{ premierPlan: 'anneauFocus', arrierePlan: 'fond', nature: 'composant' },
|
|
295
|
+
{ premierPlan: 'surPrimaire', arrierePlan: 'primaire', nature: 'courant' },
|
|
296
|
+
{ premierPlan: 'surPrimaire', arrierePlan: 'primaireSurvol', nature: 'courant' },
|
|
297
|
+
{ premierPlan: 'surPrimaireDiscret', arrierePlan: 'primaireDiscret', nature: 'courant' },
|
|
298
|
+
{ premierPlan: 'primaire', arrierePlan: 'surface', nature: 'courant' },
|
|
299
|
+
{ premierPlan: 'surSucces', arrierePlan: 'succes', nature: 'courant' },
|
|
300
|
+
{ premierPlan: 'surSuccesDiscret', arrierePlan: 'succesDiscret', nature: 'courant' },
|
|
301
|
+
{ premierPlan: 'succes', arrierePlan: 'surface', nature: 'composant' },
|
|
302
|
+
{ premierPlan: 'surAvertissement', arrierePlan: 'avertissement', nature: 'courant' },
|
|
303
|
+
{
|
|
304
|
+
premierPlan: 'surAvertissementDiscret',
|
|
305
|
+
arrierePlan: 'avertissementDiscret',
|
|
306
|
+
nature: 'courant',
|
|
307
|
+
},
|
|
308
|
+
{ premierPlan: 'avertissement', arrierePlan: 'surface', nature: 'composant' },
|
|
309
|
+
{ premierPlan: 'surDanger', arrierePlan: 'danger', nature: 'courant' },
|
|
310
|
+
{ premierPlan: 'surDanger', arrierePlan: 'dangerSurvol', nature: 'courant' },
|
|
311
|
+
{ premierPlan: 'surDangerDiscret', arrierePlan: 'dangerDiscret', nature: 'courant' },
|
|
312
|
+
{ premierPlan: 'danger', arrierePlan: 'surface', nature: 'courant' },
|
|
313
|
+
];
|
|
314
|
+
const exemptesDeContraste = [
|
|
315
|
+
{
|
|
316
|
+
jeton: 'bordure',
|
|
317
|
+
raison: 'Separateur decoratif (bord de carte, filet de tableau). WCAG 1.4.11 ne ' +
|
|
318
|
+
"s'applique qu'aux bordures porteuses d'information ; celle qui identifie " +
|
|
319
|
+
'un champ est `bordureForte`, elle, controlee a 3:1.',
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
jeton: 'texteDesactive',
|
|
323
|
+
raison: 'WCAG 1.4.3 exempte explicitement les commandes desactivees. Le statut ' +
|
|
324
|
+
"desactive n'est jamais porte par la seule couleur : l'attribut aria le dit.",
|
|
325
|
+
},
|
|
326
|
+
];
|
|
327
|
+
/** Seuil de perceptibilite des jetons exemptes : ils n'ont pas de minimum
|
|
328
|
+
* normatif, mais un separateur invisible ne separe rien. */
|
|
329
|
+
const SEUIL_DE_PERCEPTIBILITE = 1.2;
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* Les proprietes CSS personnalisees sont ENGENDREES depuis les jetons
|
|
333
|
+
* TypeScript, jamais ecrites a la main en parallele. Deux sources de verite
|
|
334
|
+
* pour une meme couleur finissent toujours par diverger ; ici la derive est
|
|
335
|
+
* impossible, et la CI verifie que le fichier livre correspond au code.
|
|
336
|
+
*/
|
|
337
|
+
const PREFIXE = '--st';
|
|
338
|
+
function aplatir(prefixe, valeurs) {
|
|
339
|
+
const entrees = Object.entries(valeurs);
|
|
340
|
+
return entrees.map(([cle, valeur]) => ` ${prefixe}-${cle}: ${valeur};`);
|
|
341
|
+
}
|
|
342
|
+
function couleursEnCss(jetons) {
|
|
343
|
+
const entrees = Object.entries(jetons);
|
|
344
|
+
return entrees.map(([cle, valeur]) => ` ${PREFIXE}-couleur-${enKebab(cle)}: ${valeur};`);
|
|
345
|
+
}
|
|
346
|
+
function enKebab(valeur) {
|
|
347
|
+
return valeur.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
|
348
|
+
}
|
|
349
|
+
/** Jetons invariants : ils ne dependent pas du theme. */
|
|
350
|
+
function cssDesEchelles() {
|
|
351
|
+
return [
|
|
352
|
+
...aplatir(`${PREFIXE}-espacement`, espacement),
|
|
353
|
+
...aplatir(`${PREFIXE}-rayon`, rayon),
|
|
354
|
+
...aplatir(`${PREFIXE}-ombre`, ombre),
|
|
355
|
+
...aplatir(`${PREFIXE}-duree`, duree),
|
|
356
|
+
...aplatir(`${PREFIXE}-courbe`, courbe),
|
|
357
|
+
...aplatir(`${PREFIXE}-plan`, plan),
|
|
358
|
+
...aplatir(`${PREFIXE}-rupture`, rupture),
|
|
359
|
+
...aplatir(`${PREFIXE}-police`, typographie.famille),
|
|
360
|
+
...aplatir(`${PREFIXE}-taille`, typographie.taille),
|
|
361
|
+
...aplatir(`${PREFIXE}-graisse`, typographie.graisse),
|
|
362
|
+
...aplatir(`${PREFIXE}-interligne`, typographie.interligne),
|
|
363
|
+
` ${PREFIXE}-cible-tactile-min: ${cibleTactileMinimale};`,
|
|
364
|
+
].join('\n');
|
|
365
|
+
}
|
|
366
|
+
function cssDuTheme(theme) {
|
|
367
|
+
return couleursEnCss(themes[theme]).join('\n');
|
|
368
|
+
}
|
|
369
|
+
/**
|
|
370
|
+
* Feuille complete. Le theme clair est la valeur par defaut ; le sombre
|
|
371
|
+
* s'applique soit par preference systeme, soit par attribut explicite, et
|
|
372
|
+
* l'attribut l'emporte dans les deux sens (un utilisateur qui choisit le
|
|
373
|
+
* clair sur un systeme sombre doit obtenir le clair).
|
|
374
|
+
*/
|
|
375
|
+
function feuilleDeJetons() {
|
|
376
|
+
return `/* Engendre par @starterlib/tokens — ne pas modifier a la main.
|
|
377
|
+
Regenerer : pnpm tokens:css */
|
|
378
|
+
|
|
379
|
+
:root {
|
|
380
|
+
color-scheme: light dark;
|
|
381
|
+
${cssDesEchelles()}
|
|
382
|
+
${cssDuTheme('clair')}
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
:root[data-theme='sombre'] {
|
|
386
|
+
${cssDuTheme('sombre')}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
@media (prefers-color-scheme: dark) {
|
|
390
|
+
:root:not([data-theme='clair']) {
|
|
391
|
+
${cssDuTheme('sombre')
|
|
392
|
+
.split('\n')
|
|
393
|
+
.map((l) => ` ${l}`)
|
|
394
|
+
.join('\n')}
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
@media (prefers-reduced-motion: reduce) {
|
|
399
|
+
:root {
|
|
400
|
+
${PREFIXE}-duree-rapide: 0ms;
|
|
401
|
+
${PREFIXE}-duree-normale: 0ms;
|
|
402
|
+
${PREFIXE}-duree-lente: 0ms;
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
`;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/**
|
|
409
|
+
* @starterlib/tokens — niveau 1 et 2 du systeme de design.
|
|
410
|
+
*
|
|
411
|
+
* Ce paquet ne depend d'AUCUNE bibliotheque, Angular compris : il doit rester
|
|
412
|
+
* consommable par un rendu de courriel, un export PDF ou un outil de design.
|
|
413
|
+
*/
|
|
414
|
+
|
|
415
|
+
/**
|
|
416
|
+
* Generated bundle index. Do not edit.
|
|
417
|
+
*/
|
|
418
|
+
|
|
419
|
+
export { PREFIXE, SEUIL_DE_PERCEPTIBILITE, cibleTactileMinimale, courbe, cssDesEchelles, cssDuTheme, duree, espacement, exemptesDeContraste, feuilleDeJetons, luminanceRelative, ombre, pairesDeContraste, plan, primitives, rapportDeContraste, rayon, respecteLeContraste, rupture, seuilExige, themeClair, themeSombre, themes, typographie, versRvb };
|
|
420
|
+
//# sourceMappingURL=starterlib-tokens.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"starterlib-tokens.mjs","sources":["../../../../packages/tokens/src/lib/primitives.ts","../../../../packages/tokens/src/lib/echelles.ts","../../../../packages/tokens/src/lib/contraste.ts","../../../../packages/tokens/src/lib/theme.ts","../../../../packages/tokens/src/lib/css.ts","../../../../packages/tokens/src/public-api.ts","../../../../packages/tokens/src/starterlib-tokens.ts"],"sourcesContent":["/**\n * Niveau 1 — primitives. Palette brute, sans intention d'usage.\n * Aucun composant ne consomme ce niveau directement : il passe par le\n * niveau semantique, sinon un changement de nuance se propage a l'aveugle.\n */\nexport const primitives = {\n neutre: {\n 0: '#ffffff',\n 50: '#f7f8fa',\n 100: '#eef1f5',\n 200: '#dde2e9',\n 300: '#c3ccd7',\n 400: '#94a1b2',\n 500: '#6b7889',\n 600: '#4d5868',\n 700: '#39414e',\n 800: '#232a34',\n 900: '#141920',\n 950: '#0b0e13',\n },\n bleu: {\n 50: '#eff5ff',\n 100: '#dbe8fe',\n 200: '#bfd6fe',\n 300: '#93bbfd',\n 400: '#609afa',\n 500: '#3b7df6',\n 600: '#255eeb',\n 700: '#1d4ed8',\n 800: '#1e40af',\n 900: '#1e3a8a',\n },\n vert: {\n 100: '#d7f5e3',\n 300: '#7fd6a4',\n 500: '#1a9d54',\n 600: '#15803d',\n 700: '#116932',\n 900: '#0a3d1e',\n },\n ambre: {\n 100: '#fdf0d5',\n 300: '#f3c969',\n 500: '#b4730b',\n 600: '#a16207',\n 700: '#854d0e',\n 900: '#432a06',\n },\n rouge: {\n 100: '#fde2e2',\n 300: '#f3a3a3',\n 500: '#d92d2d',\n 600: '#b91c1c',\n 700: '#991b1b',\n 900: '#4c1010',\n },\n} as const;\n","/**\n * Echelles non chromatiques. Elles ne changent pas entre le theme clair et le\n * theme sombre : une distance ni une graisse ne dependent de la luminosite.\n */\n\n/** Pas de 4 px. Une valeur hors echelle est un defaut de conception. */\nexport const espacement = {\n '0': '0',\n '1': '0.25rem',\n '2': '0.5rem',\n '3': '0.75rem',\n '4': '1rem',\n '5': '1.25rem',\n '6': '1.5rem',\n '8': '2rem',\n '10': '2.5rem',\n '12': '3rem',\n '16': '4rem',\n '20': '5rem',\n '24': '6rem',\n} as const;\n\nexport const rayon = {\n none: '0',\n xs: '0.125rem',\n sm: '0.25rem',\n md: '0.5rem',\n lg: '0.75rem',\n xl: '1rem',\n pleine: '9999px',\n} as const;\n\nexport const typographie = {\n famille: {\n base: \"system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif\",\n mono: \"ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace\",\n },\n taille: {\n xs: '0.75rem',\n sm: '0.875rem',\n md: '1rem',\n lg: '1.125rem',\n xl: '1.25rem',\n '2xl': '1.5rem',\n '3xl': '1.875rem',\n '4xl': '2.25rem',\n },\n graisse: { normale: '400', moyenne: '500', semi: '600', grasse: '700' },\n interligne: { serre: '1.25', normal: '1.5', large: '1.75' },\n} as const;\n\n/**\n * Les ombres restent discretes : une elevation forte sur fond sombre se lit\n * comme une salissure, jamais comme une hauteur.\n */\nexport const ombre = {\n none: 'none',\n sm: '0 1px 2px 0 rgb(0 0 0 / 0.06)',\n md: '0 2px 6px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.06)',\n lg: '0 8px 20px -4px rgb(0 0 0 / 0.12), 0 3px 8px -3px rgb(0 0 0 / 0.07)',\n xl: '0 20px 40px -8px rgb(0 0 0 / 0.16)',\n} as const;\n\n/**\n * Durees courtes : au-dela de 250 ms une interface bancaire parait lente.\n * Toute animation doit se desactiver sous `prefers-reduced-motion`.\n */\nexport const duree = {\n instantane: '0ms',\n rapide: '120ms',\n normale: '200ms',\n lente: '320ms',\n} as const;\n\nexport const courbe = {\n standard: 'cubic-bezier(0.2, 0, 0, 1)',\n entrant: 'cubic-bezier(0, 0, 0, 1)',\n sortant: 'cubic-bezier(0.3, 0, 1, 1)',\n} as const;\n\n/**\n * Plans d'empilement nommes. Un `z-index` ecrit a la main dans un composant\n * est un defaut : il finira par passer devant ou derriere sans qu'on sache\n * pourquoi.\n */\nexport const plan = {\n base: '0',\n contenuEleve: '10',\n entete: '100',\n tiroir: '200',\n superposition: '300',\n dialogue: '400',\n infobulle: '500',\n notification: '600',\n} as const;\n\n/** Points de rupture. Mobile d'abord : ces valeurs sont des minimums. */\nexport const rupture = {\n sm: '480px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\n '2xl': '1536px',\n} as const;\n\n/** Cible tactile minimale. Sous 44 px, l'echec de pointage devient courant. */\nexport const cibleTactileMinimale = '44px';\n","/**\n * Calcul de contraste WCAG 2.1. Il vit dans les jetons, et non dans les tests,\n * parce qu'une SPA peut avoir a verifier une couleur fournie a l'execution\n * (theme d'un client, statut colore par une donnee).\n */\n\nexport interface Rvb {\n readonly r: number;\n readonly g: number;\n readonly b: number;\n}\n\n/** Accepte `#rgb` et `#rrggbb`. Leve sur toute autre forme : une couleur\n * illisible ne doit pas se transformer en noir par defaut. */\nexport function versRvb(hex: string): Rvb {\n const v = hex.trim().replace(/^#/, '');\n const complet =\n v.length === 3\n ? v\n .split('')\n .map((c) => c + c)\n .join('')\n : v;\n if (!/^[0-9a-fA-F]{6}$/.test(complet)) {\n throw new Error(`Couleur hexadecimale invalide : ${hex}`);\n }\n return {\n r: parseInt(complet.slice(0, 2), 16),\n g: parseInt(complet.slice(2, 4), 16),\n b: parseInt(complet.slice(4, 6), 16),\n };\n}\n\nfunction canalLineaire(valeur8bits: number): number {\n const c = valeur8bits / 255;\n return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n}\n\n/** Luminance relative WCAG, entre 0 (noir) et 1 (blanc). */\nexport function luminanceRelative(couleur: string | Rvb): number {\n const { r, g, b } = typeof couleur === 'string' ? versRvb(couleur) : couleur;\n return 0.2126 * canalLineaire(r) + 0.7152 * canalLineaire(g) + 0.0722 * canalLineaire(b);\n}\n\n/** Rapport de contraste, entre 1 et 21. L'ordre des arguments est indifferent. */\nexport function rapportDeContraste(a: string | Rvb, b: string | Rvb): number {\n const la = luminanceRelative(a);\n const lb = luminanceRelative(b);\n const clair = Math.max(la, lb);\n const sombre = Math.min(la, lb);\n return (clair + 0.05) / (sombre + 0.05);\n}\n\nexport type NiveauContraste = 'AA' | 'AAA';\nexport type NatureDuTexte = 'courant' | 'grand' | 'composant';\n\n/**\n * Seuils WCAG. `composant` couvre les bordures, icones et limites de champ :\n * la norme 1.4.11 leur demande 3:1, pas 4.5:1.\n */\nexport function seuilExige(niveau: NiveauContraste, nature: NatureDuTexte): number {\n if (nature === 'composant') return 3;\n if (niveau === 'AAA') return nature === 'grand' ? 4.5 : 7;\n return nature === 'grand' ? 3 : 4.5;\n}\n\nexport function respecteLeContraste(\n premierPlan: string,\n arrierePlan: string,\n niveau: NiveauContraste = 'AA',\n nature: NatureDuTexte = 'courant',\n): boolean {\n return rapportDeContraste(premierPlan, arrierePlan) >= seuilExige(niveau, nature);\n}\n","import { primitives } from './primitives';\nimport type { NatureDuTexte } from './contraste';\n\n/**\n * Niveau 2 — jetons semantiques. C'est le SEUL niveau que les composants\n * consomment. Le nom dit le role, jamais la couleur : `danger` reste `danger`\n * si la charte passe du rouge a l'orange.\n */\nexport interface JetonsDeCouleur {\n readonly fond: string;\n readonly surface: string;\n readonly surfaceElevee: string;\n readonly surfaceEnfoncee: string;\n readonly surfaceSurvol: string;\n\n readonly texte: string;\n readonly texteDiscret: string;\n readonly texteDesactive: string;\n readonly texteInverse: string;\n\n readonly bordure: string;\n readonly bordureForte: string;\n readonly anneauFocus: string;\n\n readonly primaire: string;\n readonly primaireSurvol: string;\n readonly surPrimaire: string;\n readonly primaireDiscret: string;\n readonly surPrimaireDiscret: string;\n\n readonly succes: string;\n readonly surSucces: string;\n readonly succesDiscret: string;\n readonly surSuccesDiscret: string;\n\n readonly avertissement: string;\n readonly surAvertissement: string;\n readonly avertissementDiscret: string;\n readonly surAvertissementDiscret: string;\n\n readonly danger: string;\n readonly dangerSurvol: string;\n readonly surDanger: string;\n readonly dangerDiscret: string;\n readonly surDangerDiscret: string;\n}\n\nexport type NomDeTheme = 'clair' | 'sombre';\n\nexport const themeClair: JetonsDeCouleur = {\n fond: primitives.neutre[50],\n surface: primitives.neutre[0],\n surfaceElevee: primitives.neutre[0],\n surfaceEnfoncee: primitives.neutre[100],\n surfaceSurvol: primitives.neutre[100],\n\n texte: primitives.neutre[900],\n texteDiscret: primitives.neutre[600],\n texteDesactive: primitives.neutre[400],\n texteInverse: primitives.neutre[0],\n\n bordure: primitives.neutre[200],\n // 4.49:1 sur `surface` : c'est la bordure qui IDENTIFIE un champ,\n // elle est soumise a WCAG 1.4.11. La neutre 400 n'atteignait que 2.63:1.\n bordureForte: primitives.neutre[500],\n anneauFocus: primitives.bleu[600],\n\n primaire: primitives.bleu[700],\n primaireSurvol: primitives.bleu[800],\n surPrimaire: primitives.neutre[0],\n primaireDiscret: primitives.bleu[50],\n surPrimaireDiscret: primitives.bleu[900],\n\n succes: primitives.vert[600],\n surSucces: primitives.neutre[0],\n succesDiscret: primitives.vert[100],\n surSuccesDiscret: primitives.vert[900],\n\n avertissement: primitives.ambre[600],\n surAvertissement: primitives.neutre[0],\n avertissementDiscret: primitives.ambre[100],\n surAvertissementDiscret: primitives.ambre[900],\n\n danger: primitives.rouge[600],\n dangerSurvol: primitives.rouge[700],\n surDanger: primitives.neutre[0],\n dangerDiscret: primitives.rouge[100],\n surDangerDiscret: primitives.rouge[900],\n};\n\nexport const themeSombre: JetonsDeCouleur = {\n fond: primitives.neutre[950],\n surface: primitives.neutre[900],\n surfaceElevee: primitives.neutre[800],\n surfaceEnfoncee: primitives.neutre[950],\n surfaceSurvol: primitives.neutre[800],\n\n texte: primitives.neutre[100],\n texteDiscret: primitives.neutre[300],\n texteDesactive: primitives.neutre[500],\n texteInverse: primitives.neutre[950],\n\n bordure: primitives.neutre[700],\n bordureForte: primitives.neutre[500],\n anneauFocus: primitives.bleu[300],\n\n primaire: primitives.bleu[300],\n primaireSurvol: primitives.bleu[200],\n surPrimaire: primitives.neutre[950],\n primaireDiscret: primitives.bleu[900],\n surPrimaireDiscret: primitives.bleu[100],\n\n succes: primitives.vert[300],\n surSucces: primitives.neutre[950],\n succesDiscret: primitives.vert[900],\n surSuccesDiscret: primitives.vert[100],\n\n avertissement: primitives.ambre[300],\n surAvertissement: primitives.neutre[950],\n avertissementDiscret: primitives.ambre[900],\n surAvertissementDiscret: primitives.ambre[100],\n\n danger: primitives.rouge[300],\n dangerSurvol: primitives.rouge[100],\n surDanger: primitives.neutre[950],\n dangerDiscret: primitives.rouge[900],\n surDangerDiscret: primitives.rouge[100],\n};\n\nexport const themes: Readonly<Record<NomDeTheme, JetonsDeCouleur>> = {\n clair: themeClair,\n sombre: themeSombre,\n};\n\n/**\n * Les paires que le contraste doit tenir. Elles sont declarees ici, et non\n * dans le test, pour qu'un jeton ajoute sans sa paire saute aux yeux : le\n * test verifie aussi que chaque couleur de premier plan est couverte.\n */\nexport interface PaireDeContraste {\n readonly premierPlan: keyof JetonsDeCouleur;\n readonly arrierePlan: keyof JetonsDeCouleur;\n readonly nature: NatureDuTexte;\n}\n\nexport const pairesDeContraste: readonly PaireDeContraste[] = [\n { premierPlan: 'texte', arrierePlan: 'surface', nature: 'courant' },\n { premierPlan: 'texte', arrierePlan: 'fond', nature: 'courant' },\n { premierPlan: 'texte', arrierePlan: 'surfaceElevee', nature: 'courant' },\n { premierPlan: 'texte', arrierePlan: 'surfaceEnfoncee', nature: 'courant' },\n { premierPlan: 'texteDiscret', arrierePlan: 'surface', nature: 'courant' },\n { premierPlan: 'texteDiscret', arrierePlan: 'fond', nature: 'courant' },\n { premierPlan: 'texteInverse', arrierePlan: 'primaire', nature: 'courant' },\n\n { premierPlan: 'bordureForte', arrierePlan: 'surface', nature: 'composant' },\n { premierPlan: 'anneauFocus', arrierePlan: 'surface', nature: 'composant' },\n { premierPlan: 'anneauFocus', arrierePlan: 'fond', nature: 'composant' },\n\n { premierPlan: 'surPrimaire', arrierePlan: 'primaire', nature: 'courant' },\n { premierPlan: 'surPrimaire', arrierePlan: 'primaireSurvol', nature: 'courant' },\n { premierPlan: 'surPrimaireDiscret', arrierePlan: 'primaireDiscret', nature: 'courant' },\n { premierPlan: 'primaire', arrierePlan: 'surface', nature: 'courant' },\n\n { premierPlan: 'surSucces', arrierePlan: 'succes', nature: 'courant' },\n { premierPlan: 'surSuccesDiscret', arrierePlan: 'succesDiscret', nature: 'courant' },\n { premierPlan: 'succes', arrierePlan: 'surface', nature: 'composant' },\n\n { premierPlan: 'surAvertissement', arrierePlan: 'avertissement', nature: 'courant' },\n {\n premierPlan: 'surAvertissementDiscret',\n arrierePlan: 'avertissementDiscret',\n nature: 'courant',\n },\n { premierPlan: 'avertissement', arrierePlan: 'surface', nature: 'composant' },\n\n { premierPlan: 'surDanger', arrierePlan: 'danger', nature: 'courant' },\n { premierPlan: 'surDanger', arrierePlan: 'dangerSurvol', nature: 'courant' },\n { premierPlan: 'surDangerDiscret', arrierePlan: 'dangerDiscret', nature: 'courant' },\n { premierPlan: 'danger', arrierePlan: 'surface', nature: 'courant' },\n];\n\n/**\n * Jetons volontairement HORS du controle de contraste, avec leur raison.\n * Une exemption non ecrite est un oubli ; ecrite, elle se discute.\n */\nexport interface Exemption {\n readonly jeton: keyof JetonsDeCouleur;\n readonly raison: string;\n}\n\nexport const exemptesDeContraste: readonly Exemption[] = [\n {\n jeton: 'bordure',\n raison:\n 'Separateur decoratif (bord de carte, filet de tableau). WCAG 1.4.11 ne ' +\n \"s'applique qu'aux bordures porteuses d'information ; celle qui identifie \" +\n 'un champ est `bordureForte`, elle, controlee a 3:1.',\n },\n {\n jeton: 'texteDesactive',\n raison:\n 'WCAG 1.4.3 exempte explicitement les commandes desactivees. Le statut ' +\n \"desactive n'est jamais porte par la seule couleur : l'attribut aria le dit.\",\n },\n];\n\n/** Seuil de perceptibilite des jetons exemptes : ils n'ont pas de minimum\n * normatif, mais un separateur invisible ne separe rien. */\nexport const SEUIL_DE_PERCEPTIBILITE = 1.2;\n","import {\n duree,\n courbe,\n espacement,\n ombre,\n plan,\n rayon,\n rupture,\n typographie,\n cibleTactileMinimale,\n} from './echelles';\nimport { themes, type JetonsDeCouleur, type NomDeTheme } from './theme';\n\n/**\n * Les proprietes CSS personnalisees sont ENGENDREES depuis les jetons\n * TypeScript, jamais ecrites a la main en parallele. Deux sources de verite\n * pour une meme couleur finissent toujours par diverger ; ici la derive est\n * impossible, et la CI verifie que le fichier livre correspond au code.\n */\n\nexport const PREFIXE = '--st';\n\nfunction aplatir(prefixe: string, valeurs: Readonly<Record<string, string>>): string[] {\n const entrees = Object.entries(valeurs);\n return entrees.map(([cle, valeur]) => ` ${prefixe}-${cle}: ${valeur};`);\n}\n\nfunction couleursEnCss(jetons: JetonsDeCouleur): string[] {\n const entrees = Object.entries(jetons) as [string, string][];\n return entrees.map(([cle, valeur]) => ` ${PREFIXE}-couleur-${enKebab(cle)}: ${valeur};`);\n}\n\nfunction enKebab(valeur: string): string {\n return valeur.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\n/** Jetons invariants : ils ne dependent pas du theme. */\nexport function cssDesEchelles(): string {\n return [\n ...aplatir(`${PREFIXE}-espacement`, espacement),\n ...aplatir(`${PREFIXE}-rayon`, rayon),\n ...aplatir(`${PREFIXE}-ombre`, ombre),\n ...aplatir(`${PREFIXE}-duree`, duree),\n ...aplatir(`${PREFIXE}-courbe`, courbe),\n ...aplatir(`${PREFIXE}-plan`, plan),\n ...aplatir(`${PREFIXE}-rupture`, rupture),\n ...aplatir(`${PREFIXE}-police`, typographie.famille),\n ...aplatir(`${PREFIXE}-taille`, typographie.taille),\n ...aplatir(`${PREFIXE}-graisse`, typographie.graisse),\n ...aplatir(`${PREFIXE}-interligne`, typographie.interligne),\n ` ${PREFIXE}-cible-tactile-min: ${cibleTactileMinimale};`,\n ].join('\\n');\n}\n\nexport function cssDuTheme(theme: NomDeTheme): string {\n return couleursEnCss(themes[theme]).join('\\n');\n}\n\n/**\n * Feuille complete. Le theme clair est la valeur par defaut ; le sombre\n * s'applique soit par preference systeme, soit par attribut explicite, et\n * l'attribut l'emporte dans les deux sens (un utilisateur qui choisit le\n * clair sur un systeme sombre doit obtenir le clair).\n */\nexport function feuilleDeJetons(): string {\n return `/* Engendre par @starterlib/tokens — ne pas modifier a la main.\n Regenerer : pnpm tokens:css */\n\n:root {\n color-scheme: light dark;\n${cssDesEchelles()}\n${cssDuTheme('clair')}\n}\n\n:root[data-theme='sombre'] {\n${cssDuTheme('sombre')}\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme='clair']) {\n${cssDuTheme('sombre')\n .split('\\n')\n .map((l) => ` ${l}`)\n .join('\\n')}\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n :root {\n ${PREFIXE}-duree-rapide: 0ms;\n ${PREFIXE}-duree-normale: 0ms;\n ${PREFIXE}-duree-lente: 0ms;\n }\n}\n`;\n}\n","/**\n * @starterlib/tokens — niveau 1 et 2 du systeme de design.\n *\n * Ce paquet ne depend d'AUCUNE bibliotheque, Angular compris : il doit rester\n * consommable par un rendu de courriel, un export PDF ou un outil de design.\n */\nexport * from './lib/primitives';\nexport * from './lib/echelles';\nexport * from './lib/contraste';\nexport * from './lib/theme';\nexport * from './lib/css';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@starterlib/tokens",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Jetons de design du socle frontal starter : couleurs semantiques, echelles, contraste WCAG. Aucune dependance, Angular compris.",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"access": "public"
|
|
9
|
+
},
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "git+https://github.com/Arnoldkom/starter-web-platform.git",
|
|
13
|
+
"directory": "packages/tokens"
|
|
14
|
+
},
|
|
15
|
+
"homepage": "https://github.com/Arnoldkom/starter-web-platform/tree/main/packages/tokens#readme",
|
|
16
|
+
"keywords": [
|
|
17
|
+
"starter",
|
|
18
|
+
"socle-frontal",
|
|
19
|
+
"tokens"
|
|
20
|
+
],
|
|
21
|
+
"exports": {
|
|
22
|
+
"./styles/starter-tokens.css": "./styles/starter-tokens.css",
|
|
23
|
+
"./styles/*": "./styles/*",
|
|
24
|
+
"./package.json": {
|
|
25
|
+
"default": "./package.json"
|
|
26
|
+
},
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./types/starterlib-tokens.d.ts",
|
|
29
|
+
"default": "./fesm2022/starterlib-tokens.mjs"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"module": "fesm2022/starterlib-tokens.mjs",
|
|
33
|
+
"typings": "types/starterlib-tokens.d.ts",
|
|
34
|
+
"type": "module",
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"tslib": "^2.3.0"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
/* Engendre par @starterlib/tokens — ne pas modifier a la main.
|
|
2
|
+
Regenerer : pnpm tokens:css */
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
color-scheme: light dark;
|
|
6
|
+
--st-espacement-0: 0;
|
|
7
|
+
--st-espacement-1: 0.25rem;
|
|
8
|
+
--st-espacement-2: 0.5rem;
|
|
9
|
+
--st-espacement-3: 0.75rem;
|
|
10
|
+
--st-espacement-4: 1rem;
|
|
11
|
+
--st-espacement-5: 1.25rem;
|
|
12
|
+
--st-espacement-6: 1.5rem;
|
|
13
|
+
--st-espacement-8: 2rem;
|
|
14
|
+
--st-espacement-10: 2.5rem;
|
|
15
|
+
--st-espacement-12: 3rem;
|
|
16
|
+
--st-espacement-16: 4rem;
|
|
17
|
+
--st-espacement-20: 5rem;
|
|
18
|
+
--st-espacement-24: 6rem;
|
|
19
|
+
--st-rayon-none: 0;
|
|
20
|
+
--st-rayon-xs: 0.125rem;
|
|
21
|
+
--st-rayon-sm: 0.25rem;
|
|
22
|
+
--st-rayon-md: 0.5rem;
|
|
23
|
+
--st-rayon-lg: 0.75rem;
|
|
24
|
+
--st-rayon-xl: 1rem;
|
|
25
|
+
--st-rayon-pleine: 9999px;
|
|
26
|
+
--st-ombre-none: none;
|
|
27
|
+
--st-ombre-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
|
|
28
|
+
--st-ombre-md: 0 2px 6px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.06);
|
|
29
|
+
--st-ombre-lg: 0 8px 20px -4px rgb(0 0 0 / 0.12), 0 3px 8px -3px rgb(0 0 0 / 0.07);
|
|
30
|
+
--st-ombre-xl: 0 20px 40px -8px rgb(0 0 0 / 0.16);
|
|
31
|
+
--st-duree-instantane: 0ms;
|
|
32
|
+
--st-duree-rapide: 120ms;
|
|
33
|
+
--st-duree-normale: 200ms;
|
|
34
|
+
--st-duree-lente: 320ms;
|
|
35
|
+
--st-courbe-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
36
|
+
--st-courbe-entrant: cubic-bezier(0, 0, 0, 1);
|
|
37
|
+
--st-courbe-sortant: cubic-bezier(0.3, 0, 1, 1);
|
|
38
|
+
--st-plan-base: 0;
|
|
39
|
+
--st-plan-contenuEleve: 10;
|
|
40
|
+
--st-plan-entete: 100;
|
|
41
|
+
--st-plan-tiroir: 200;
|
|
42
|
+
--st-plan-superposition: 300;
|
|
43
|
+
--st-plan-dialogue: 400;
|
|
44
|
+
--st-plan-infobulle: 500;
|
|
45
|
+
--st-plan-notification: 600;
|
|
46
|
+
--st-rupture-sm: 480px;
|
|
47
|
+
--st-rupture-md: 768px;
|
|
48
|
+
--st-rupture-lg: 1024px;
|
|
49
|
+
--st-rupture-xl: 1280px;
|
|
50
|
+
--st-rupture-2xl: 1536px;
|
|
51
|
+
--st-police-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
52
|
+
--st-police-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
|
|
53
|
+
--st-taille-xs: 0.75rem;
|
|
54
|
+
--st-taille-sm: 0.875rem;
|
|
55
|
+
--st-taille-md: 1rem;
|
|
56
|
+
--st-taille-lg: 1.125rem;
|
|
57
|
+
--st-taille-xl: 1.25rem;
|
|
58
|
+
--st-taille-2xl: 1.5rem;
|
|
59
|
+
--st-taille-3xl: 1.875rem;
|
|
60
|
+
--st-taille-4xl: 2.25rem;
|
|
61
|
+
--st-graisse-normale: 400;
|
|
62
|
+
--st-graisse-moyenne: 500;
|
|
63
|
+
--st-graisse-semi: 600;
|
|
64
|
+
--st-graisse-grasse: 700;
|
|
65
|
+
--st-interligne-serre: 1.25;
|
|
66
|
+
--st-interligne-normal: 1.5;
|
|
67
|
+
--st-interligne-large: 1.75;
|
|
68
|
+
--st-cible-tactile-min: 44px;
|
|
69
|
+
--st-couleur-fond: #f7f8fa;
|
|
70
|
+
--st-couleur-surface: #ffffff;
|
|
71
|
+
--st-couleur-surface-elevee: #ffffff;
|
|
72
|
+
--st-couleur-surface-enfoncee: #eef1f5;
|
|
73
|
+
--st-couleur-surface-survol: #eef1f5;
|
|
74
|
+
--st-couleur-texte: #141920;
|
|
75
|
+
--st-couleur-texte-discret: #4d5868;
|
|
76
|
+
--st-couleur-texte-desactive: #94a1b2;
|
|
77
|
+
--st-couleur-texte-inverse: #ffffff;
|
|
78
|
+
--st-couleur-bordure: #dde2e9;
|
|
79
|
+
--st-couleur-bordure-forte: #6b7889;
|
|
80
|
+
--st-couleur-anneau-focus: #255eeb;
|
|
81
|
+
--st-couleur-primaire: #1d4ed8;
|
|
82
|
+
--st-couleur-primaire-survol: #1e40af;
|
|
83
|
+
--st-couleur-sur-primaire: #ffffff;
|
|
84
|
+
--st-couleur-primaire-discret: #eff5ff;
|
|
85
|
+
--st-couleur-sur-primaire-discret: #1e3a8a;
|
|
86
|
+
--st-couleur-succes: #15803d;
|
|
87
|
+
--st-couleur-sur-succes: #ffffff;
|
|
88
|
+
--st-couleur-succes-discret: #d7f5e3;
|
|
89
|
+
--st-couleur-sur-succes-discret: #0a3d1e;
|
|
90
|
+
--st-couleur-avertissement: #a16207;
|
|
91
|
+
--st-couleur-sur-avertissement: #ffffff;
|
|
92
|
+
--st-couleur-avertissement-discret: #fdf0d5;
|
|
93
|
+
--st-couleur-sur-avertissement-discret: #432a06;
|
|
94
|
+
--st-couleur-danger: #b91c1c;
|
|
95
|
+
--st-couleur-danger-survol: #991b1b;
|
|
96
|
+
--st-couleur-sur-danger: #ffffff;
|
|
97
|
+
--st-couleur-danger-discret: #fde2e2;
|
|
98
|
+
--st-couleur-sur-danger-discret: #4c1010;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:root[data-theme='sombre'] {
|
|
102
|
+
--st-couleur-fond: #0b0e13;
|
|
103
|
+
--st-couleur-surface: #141920;
|
|
104
|
+
--st-couleur-surface-elevee: #232a34;
|
|
105
|
+
--st-couleur-surface-enfoncee: #0b0e13;
|
|
106
|
+
--st-couleur-surface-survol: #232a34;
|
|
107
|
+
--st-couleur-texte: #eef1f5;
|
|
108
|
+
--st-couleur-texte-discret: #c3ccd7;
|
|
109
|
+
--st-couleur-texte-desactive: #6b7889;
|
|
110
|
+
--st-couleur-texte-inverse: #0b0e13;
|
|
111
|
+
--st-couleur-bordure: #39414e;
|
|
112
|
+
--st-couleur-bordure-forte: #6b7889;
|
|
113
|
+
--st-couleur-anneau-focus: #93bbfd;
|
|
114
|
+
--st-couleur-primaire: #93bbfd;
|
|
115
|
+
--st-couleur-primaire-survol: #bfd6fe;
|
|
116
|
+
--st-couleur-sur-primaire: #0b0e13;
|
|
117
|
+
--st-couleur-primaire-discret: #1e3a8a;
|
|
118
|
+
--st-couleur-sur-primaire-discret: #dbe8fe;
|
|
119
|
+
--st-couleur-succes: #7fd6a4;
|
|
120
|
+
--st-couleur-sur-succes: #0b0e13;
|
|
121
|
+
--st-couleur-succes-discret: #0a3d1e;
|
|
122
|
+
--st-couleur-sur-succes-discret: #d7f5e3;
|
|
123
|
+
--st-couleur-avertissement: #f3c969;
|
|
124
|
+
--st-couleur-sur-avertissement: #0b0e13;
|
|
125
|
+
--st-couleur-avertissement-discret: #432a06;
|
|
126
|
+
--st-couleur-sur-avertissement-discret: #fdf0d5;
|
|
127
|
+
--st-couleur-danger: #f3a3a3;
|
|
128
|
+
--st-couleur-danger-survol: #fde2e2;
|
|
129
|
+
--st-couleur-sur-danger: #0b0e13;
|
|
130
|
+
--st-couleur-danger-discret: #4c1010;
|
|
131
|
+
--st-couleur-sur-danger-discret: #fde2e2;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@media (prefers-color-scheme: dark) {
|
|
135
|
+
:root:not([data-theme='clair']) {
|
|
136
|
+
--st-couleur-fond: #0b0e13;
|
|
137
|
+
--st-couleur-surface: #141920;
|
|
138
|
+
--st-couleur-surface-elevee: #232a34;
|
|
139
|
+
--st-couleur-surface-enfoncee: #0b0e13;
|
|
140
|
+
--st-couleur-surface-survol: #232a34;
|
|
141
|
+
--st-couleur-texte: #eef1f5;
|
|
142
|
+
--st-couleur-texte-discret: #c3ccd7;
|
|
143
|
+
--st-couleur-texte-desactive: #6b7889;
|
|
144
|
+
--st-couleur-texte-inverse: #0b0e13;
|
|
145
|
+
--st-couleur-bordure: #39414e;
|
|
146
|
+
--st-couleur-bordure-forte: #6b7889;
|
|
147
|
+
--st-couleur-anneau-focus: #93bbfd;
|
|
148
|
+
--st-couleur-primaire: #93bbfd;
|
|
149
|
+
--st-couleur-primaire-survol: #bfd6fe;
|
|
150
|
+
--st-couleur-sur-primaire: #0b0e13;
|
|
151
|
+
--st-couleur-primaire-discret: #1e3a8a;
|
|
152
|
+
--st-couleur-sur-primaire-discret: #dbe8fe;
|
|
153
|
+
--st-couleur-succes: #7fd6a4;
|
|
154
|
+
--st-couleur-sur-succes: #0b0e13;
|
|
155
|
+
--st-couleur-succes-discret: #0a3d1e;
|
|
156
|
+
--st-couleur-sur-succes-discret: #d7f5e3;
|
|
157
|
+
--st-couleur-avertissement: #f3c969;
|
|
158
|
+
--st-couleur-sur-avertissement: #0b0e13;
|
|
159
|
+
--st-couleur-avertissement-discret: #432a06;
|
|
160
|
+
--st-couleur-sur-avertissement-discret: #fdf0d5;
|
|
161
|
+
--st-couleur-danger: #f3a3a3;
|
|
162
|
+
--st-couleur-danger-survol: #fde2e2;
|
|
163
|
+
--st-couleur-sur-danger: #0b0e13;
|
|
164
|
+
--st-couleur-danger-discret: #4c1010;
|
|
165
|
+
--st-couleur-sur-danger-discret: #fde2e2;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@media (prefers-reduced-motion: reduce) {
|
|
170
|
+
:root {
|
|
171
|
+
--st-duree-rapide: 0ms;
|
|
172
|
+
--st-duree-normale: 0ms;
|
|
173
|
+
--st-duree-lente: 0ms;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Niveau 1 — primitives. Palette brute, sans intention d'usage.
|
|
3
|
+
* Aucun composant ne consomme ce niveau directement : il passe par le
|
|
4
|
+
* niveau semantique, sinon un changement de nuance se propage a l'aveugle.
|
|
5
|
+
*/
|
|
6
|
+
declare const primitives: {
|
|
7
|
+
readonly neutre: {
|
|
8
|
+
readonly 0: "#ffffff";
|
|
9
|
+
readonly 50: "#f7f8fa";
|
|
10
|
+
readonly 100: "#eef1f5";
|
|
11
|
+
readonly 200: "#dde2e9";
|
|
12
|
+
readonly 300: "#c3ccd7";
|
|
13
|
+
readonly 400: "#94a1b2";
|
|
14
|
+
readonly 500: "#6b7889";
|
|
15
|
+
readonly 600: "#4d5868";
|
|
16
|
+
readonly 700: "#39414e";
|
|
17
|
+
readonly 800: "#232a34";
|
|
18
|
+
readonly 900: "#141920";
|
|
19
|
+
readonly 950: "#0b0e13";
|
|
20
|
+
};
|
|
21
|
+
readonly bleu: {
|
|
22
|
+
readonly 50: "#eff5ff";
|
|
23
|
+
readonly 100: "#dbe8fe";
|
|
24
|
+
readonly 200: "#bfd6fe";
|
|
25
|
+
readonly 300: "#93bbfd";
|
|
26
|
+
readonly 400: "#609afa";
|
|
27
|
+
readonly 500: "#3b7df6";
|
|
28
|
+
readonly 600: "#255eeb";
|
|
29
|
+
readonly 700: "#1d4ed8";
|
|
30
|
+
readonly 800: "#1e40af";
|
|
31
|
+
readonly 900: "#1e3a8a";
|
|
32
|
+
};
|
|
33
|
+
readonly vert: {
|
|
34
|
+
readonly 100: "#d7f5e3";
|
|
35
|
+
readonly 300: "#7fd6a4";
|
|
36
|
+
readonly 500: "#1a9d54";
|
|
37
|
+
readonly 600: "#15803d";
|
|
38
|
+
readonly 700: "#116932";
|
|
39
|
+
readonly 900: "#0a3d1e";
|
|
40
|
+
};
|
|
41
|
+
readonly ambre: {
|
|
42
|
+
readonly 100: "#fdf0d5";
|
|
43
|
+
readonly 300: "#f3c969";
|
|
44
|
+
readonly 500: "#b4730b";
|
|
45
|
+
readonly 600: "#a16207";
|
|
46
|
+
readonly 700: "#854d0e";
|
|
47
|
+
readonly 900: "#432a06";
|
|
48
|
+
};
|
|
49
|
+
readonly rouge: {
|
|
50
|
+
readonly 100: "#fde2e2";
|
|
51
|
+
readonly 300: "#f3a3a3";
|
|
52
|
+
readonly 500: "#d92d2d";
|
|
53
|
+
readonly 600: "#b91c1c";
|
|
54
|
+
readonly 700: "#991b1b";
|
|
55
|
+
readonly 900: "#4c1010";
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Echelles non chromatiques. Elles ne changent pas entre le theme clair et le
|
|
61
|
+
* theme sombre : une distance ni une graisse ne dependent de la luminosite.
|
|
62
|
+
*/
|
|
63
|
+
/** Pas de 4 px. Une valeur hors echelle est un defaut de conception. */
|
|
64
|
+
declare const espacement: {
|
|
65
|
+
readonly '0': "0";
|
|
66
|
+
readonly '1': "0.25rem";
|
|
67
|
+
readonly '2': "0.5rem";
|
|
68
|
+
readonly '3': "0.75rem";
|
|
69
|
+
readonly '4': "1rem";
|
|
70
|
+
readonly '5': "1.25rem";
|
|
71
|
+
readonly '6': "1.5rem";
|
|
72
|
+
readonly '8': "2rem";
|
|
73
|
+
readonly '10': "2.5rem";
|
|
74
|
+
readonly '12': "3rem";
|
|
75
|
+
readonly '16': "4rem";
|
|
76
|
+
readonly '20': "5rem";
|
|
77
|
+
readonly '24': "6rem";
|
|
78
|
+
};
|
|
79
|
+
declare const rayon: {
|
|
80
|
+
readonly none: "0";
|
|
81
|
+
readonly xs: "0.125rem";
|
|
82
|
+
readonly sm: "0.25rem";
|
|
83
|
+
readonly md: "0.5rem";
|
|
84
|
+
readonly lg: "0.75rem";
|
|
85
|
+
readonly xl: "1rem";
|
|
86
|
+
readonly pleine: "9999px";
|
|
87
|
+
};
|
|
88
|
+
declare const typographie: {
|
|
89
|
+
readonly famille: {
|
|
90
|
+
readonly base: "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
|
|
91
|
+
readonly mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
|
|
92
|
+
};
|
|
93
|
+
readonly taille: {
|
|
94
|
+
readonly xs: "0.75rem";
|
|
95
|
+
readonly sm: "0.875rem";
|
|
96
|
+
readonly md: "1rem";
|
|
97
|
+
readonly lg: "1.125rem";
|
|
98
|
+
readonly xl: "1.25rem";
|
|
99
|
+
readonly '2xl': "1.5rem";
|
|
100
|
+
readonly '3xl': "1.875rem";
|
|
101
|
+
readonly '4xl': "2.25rem";
|
|
102
|
+
};
|
|
103
|
+
readonly graisse: {
|
|
104
|
+
readonly normale: "400";
|
|
105
|
+
readonly moyenne: "500";
|
|
106
|
+
readonly semi: "600";
|
|
107
|
+
readonly grasse: "700";
|
|
108
|
+
};
|
|
109
|
+
readonly interligne: {
|
|
110
|
+
readonly serre: "1.25";
|
|
111
|
+
readonly normal: "1.5";
|
|
112
|
+
readonly large: "1.75";
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
/**
|
|
116
|
+
* Les ombres restent discretes : une elevation forte sur fond sombre se lit
|
|
117
|
+
* comme une salissure, jamais comme une hauteur.
|
|
118
|
+
*/
|
|
119
|
+
declare const ombre: {
|
|
120
|
+
readonly none: "none";
|
|
121
|
+
readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.06)";
|
|
122
|
+
readonly md: "0 2px 6px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.06)";
|
|
123
|
+
readonly lg: "0 8px 20px -4px rgb(0 0 0 / 0.12), 0 3px 8px -3px rgb(0 0 0 / 0.07)";
|
|
124
|
+
readonly xl: "0 20px 40px -8px rgb(0 0 0 / 0.16)";
|
|
125
|
+
};
|
|
126
|
+
/**
|
|
127
|
+
* Durees courtes : au-dela de 250 ms une interface bancaire parait lente.
|
|
128
|
+
* Toute animation doit se desactiver sous `prefers-reduced-motion`.
|
|
129
|
+
*/
|
|
130
|
+
declare const duree: {
|
|
131
|
+
readonly instantane: "0ms";
|
|
132
|
+
readonly rapide: "120ms";
|
|
133
|
+
readonly normale: "200ms";
|
|
134
|
+
readonly lente: "320ms";
|
|
135
|
+
};
|
|
136
|
+
declare const courbe: {
|
|
137
|
+
readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
|
|
138
|
+
readonly entrant: "cubic-bezier(0, 0, 0, 1)";
|
|
139
|
+
readonly sortant: "cubic-bezier(0.3, 0, 1, 1)";
|
|
140
|
+
};
|
|
141
|
+
/**
|
|
142
|
+
* Plans d'empilement nommes. Un `z-index` ecrit a la main dans un composant
|
|
143
|
+
* est un defaut : il finira par passer devant ou derriere sans qu'on sache
|
|
144
|
+
* pourquoi.
|
|
145
|
+
*/
|
|
146
|
+
declare const plan: {
|
|
147
|
+
readonly base: "0";
|
|
148
|
+
readonly contenuEleve: "10";
|
|
149
|
+
readonly entete: "100";
|
|
150
|
+
readonly tiroir: "200";
|
|
151
|
+
readonly superposition: "300";
|
|
152
|
+
readonly dialogue: "400";
|
|
153
|
+
readonly infobulle: "500";
|
|
154
|
+
readonly notification: "600";
|
|
155
|
+
};
|
|
156
|
+
/** Points de rupture. Mobile d'abord : ces valeurs sont des minimums. */
|
|
157
|
+
declare const rupture: {
|
|
158
|
+
readonly sm: "480px";
|
|
159
|
+
readonly md: "768px";
|
|
160
|
+
readonly lg: "1024px";
|
|
161
|
+
readonly xl: "1280px";
|
|
162
|
+
readonly '2xl': "1536px";
|
|
163
|
+
};
|
|
164
|
+
/** Cible tactile minimale. Sous 44 px, l'echec de pointage devient courant. */
|
|
165
|
+
declare const cibleTactileMinimale = "44px";
|
|
166
|
+
|
|
167
|
+
/**
|
|
168
|
+
* Calcul de contraste WCAG 2.1. Il vit dans les jetons, et non dans les tests,
|
|
169
|
+
* parce qu'une SPA peut avoir a verifier une couleur fournie a l'execution
|
|
170
|
+
* (theme d'un client, statut colore par une donnee).
|
|
171
|
+
*/
|
|
172
|
+
interface Rvb {
|
|
173
|
+
readonly r: number;
|
|
174
|
+
readonly g: number;
|
|
175
|
+
readonly b: number;
|
|
176
|
+
}
|
|
177
|
+
/** Accepte `#rgb` et `#rrggbb`. Leve sur toute autre forme : une couleur
|
|
178
|
+
* illisible ne doit pas se transformer en noir par defaut. */
|
|
179
|
+
declare function versRvb(hex: string): Rvb;
|
|
180
|
+
/** Luminance relative WCAG, entre 0 (noir) et 1 (blanc). */
|
|
181
|
+
declare function luminanceRelative(couleur: string | Rvb): number;
|
|
182
|
+
/** Rapport de contraste, entre 1 et 21. L'ordre des arguments est indifferent. */
|
|
183
|
+
declare function rapportDeContraste(a: string | Rvb, b: string | Rvb): number;
|
|
184
|
+
type NiveauContraste = 'AA' | 'AAA';
|
|
185
|
+
type NatureDuTexte = 'courant' | 'grand' | 'composant';
|
|
186
|
+
/**
|
|
187
|
+
* Seuils WCAG. `composant` couvre les bordures, icones et limites de champ :
|
|
188
|
+
* la norme 1.4.11 leur demande 3:1, pas 4.5:1.
|
|
189
|
+
*/
|
|
190
|
+
declare function seuilExige(niveau: NiveauContraste, nature: NatureDuTexte): number;
|
|
191
|
+
declare function respecteLeContraste(premierPlan: string, arrierePlan: string, niveau?: NiveauContraste, nature?: NatureDuTexte): boolean;
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* Niveau 2 — jetons semantiques. C'est le SEUL niveau que les composants
|
|
195
|
+
* consomment. Le nom dit le role, jamais la couleur : `danger` reste `danger`
|
|
196
|
+
* si la charte passe du rouge a l'orange.
|
|
197
|
+
*/
|
|
198
|
+
interface JetonsDeCouleur {
|
|
199
|
+
readonly fond: string;
|
|
200
|
+
readonly surface: string;
|
|
201
|
+
readonly surfaceElevee: string;
|
|
202
|
+
readonly surfaceEnfoncee: string;
|
|
203
|
+
readonly surfaceSurvol: string;
|
|
204
|
+
readonly texte: string;
|
|
205
|
+
readonly texteDiscret: string;
|
|
206
|
+
readonly texteDesactive: string;
|
|
207
|
+
readonly texteInverse: string;
|
|
208
|
+
readonly bordure: string;
|
|
209
|
+
readonly bordureForte: string;
|
|
210
|
+
readonly anneauFocus: string;
|
|
211
|
+
readonly primaire: string;
|
|
212
|
+
readonly primaireSurvol: string;
|
|
213
|
+
readonly surPrimaire: string;
|
|
214
|
+
readonly primaireDiscret: string;
|
|
215
|
+
readonly surPrimaireDiscret: string;
|
|
216
|
+
readonly succes: string;
|
|
217
|
+
readonly surSucces: string;
|
|
218
|
+
readonly succesDiscret: string;
|
|
219
|
+
readonly surSuccesDiscret: string;
|
|
220
|
+
readonly avertissement: string;
|
|
221
|
+
readonly surAvertissement: string;
|
|
222
|
+
readonly avertissementDiscret: string;
|
|
223
|
+
readonly surAvertissementDiscret: string;
|
|
224
|
+
readonly danger: string;
|
|
225
|
+
readonly dangerSurvol: string;
|
|
226
|
+
readonly surDanger: string;
|
|
227
|
+
readonly dangerDiscret: string;
|
|
228
|
+
readonly surDangerDiscret: string;
|
|
229
|
+
}
|
|
230
|
+
type NomDeTheme = 'clair' | 'sombre';
|
|
231
|
+
declare const themeClair: JetonsDeCouleur;
|
|
232
|
+
declare const themeSombre: JetonsDeCouleur;
|
|
233
|
+
declare const themes: Readonly<Record<NomDeTheme, JetonsDeCouleur>>;
|
|
234
|
+
/**
|
|
235
|
+
* Les paires que le contraste doit tenir. Elles sont declarees ici, et non
|
|
236
|
+
* dans le test, pour qu'un jeton ajoute sans sa paire saute aux yeux : le
|
|
237
|
+
* test verifie aussi que chaque couleur de premier plan est couverte.
|
|
238
|
+
*/
|
|
239
|
+
interface PaireDeContraste {
|
|
240
|
+
readonly premierPlan: keyof JetonsDeCouleur;
|
|
241
|
+
readonly arrierePlan: keyof JetonsDeCouleur;
|
|
242
|
+
readonly nature: NatureDuTexte;
|
|
243
|
+
}
|
|
244
|
+
declare const pairesDeContraste: readonly PaireDeContraste[];
|
|
245
|
+
/**
|
|
246
|
+
* Jetons volontairement HORS du controle de contraste, avec leur raison.
|
|
247
|
+
* Une exemption non ecrite est un oubli ; ecrite, elle se discute.
|
|
248
|
+
*/
|
|
249
|
+
interface Exemption {
|
|
250
|
+
readonly jeton: keyof JetonsDeCouleur;
|
|
251
|
+
readonly raison: string;
|
|
252
|
+
}
|
|
253
|
+
declare const exemptesDeContraste: readonly Exemption[];
|
|
254
|
+
/** Seuil de perceptibilite des jetons exemptes : ils n'ont pas de minimum
|
|
255
|
+
* normatif, mais un separateur invisible ne separe rien. */
|
|
256
|
+
declare const SEUIL_DE_PERCEPTIBILITE = 1.2;
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Les proprietes CSS personnalisees sont ENGENDREES depuis les jetons
|
|
260
|
+
* TypeScript, jamais ecrites a la main en parallele. Deux sources de verite
|
|
261
|
+
* pour une meme couleur finissent toujours par diverger ; ici la derive est
|
|
262
|
+
* impossible, et la CI verifie que le fichier livre correspond au code.
|
|
263
|
+
*/
|
|
264
|
+
declare const PREFIXE = "--st";
|
|
265
|
+
/** Jetons invariants : ils ne dependent pas du theme. */
|
|
266
|
+
declare function cssDesEchelles(): string;
|
|
267
|
+
declare function cssDuTheme(theme: NomDeTheme): string;
|
|
268
|
+
/**
|
|
269
|
+
* Feuille complete. Le theme clair est la valeur par defaut ; le sombre
|
|
270
|
+
* s'applique soit par preference systeme, soit par attribut explicite, et
|
|
271
|
+
* l'attribut l'emporte dans les deux sens (un utilisateur qui choisit le
|
|
272
|
+
* clair sur un systeme sombre doit obtenir le clair).
|
|
273
|
+
*/
|
|
274
|
+
declare function feuilleDeJetons(): string;
|
|
275
|
+
|
|
276
|
+
export { PREFIXE, SEUIL_DE_PERCEPTIBILITE, cibleTactileMinimale, courbe, cssDesEchelles, cssDuTheme, duree, espacement, exemptesDeContraste, feuilleDeJetons, luminanceRelative, ombre, pairesDeContraste, plan, primitives, rapportDeContraste, rayon, respecteLeContraste, rupture, seuilExige, themeClair, themeSombre, themes, typographie, versRvb };
|
|
277
|
+
export type { Exemption, JetonsDeCouleur, NatureDuTexte, NiveauContraste, NomDeTheme, PaireDeContraste, Rvb };
|