@starterlib/tokens 0.10.13 → 0.11.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 +125 -3
- package/fesm2022/starterlib-tokens-moteur.mjs +774 -54
- package/fesm2022/starterlib-tokens-moteur.mjs.map +1 -1
- package/fesm2022/starterlib-tokens.mjs +1 -0
- package/fesm2022/starterlib-tokens.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_jetons.scss +13 -0
- package/styles/_typographie.scss +5 -0
- package/styles/exemple-blanc.tokens.json +1941 -0
- package/styles/polices/LICENSE-source-serif.txt +93 -0
- package/styles/polices/source-serif-4-latin-ext-wght-normal.woff2 +0 -0
- package/styles/polices/source-serif-4-latin-wght-normal.woff2 +0 -0
- package/styles/polices-titres.css +39 -0
- package/styles/starter-tokens-exemple-blanc.css +72 -0
- package/styles/starter-tokens.css +71 -3
- package/styles/starter-tokens.tokens.json +240 -0
- package/types/starterlib-tokens-moteur.d.ts +217 -13
- package/types/starterlib-tokens.d.ts +10 -0
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* « code » n'ont pas la meme clarte percue, et deux statuts au meme pas n'ont
|
|
6
6
|
* pas le meme contraste. En OKLCH, la clarte `l` est perceptuelle : deux pas de
|
|
7
7
|
* meme `l` tiennent le meme contraste sur une meme surface, quelle que soit leur
|
|
8
|
-
* teinte. C'est ce qui permet d'engendrer
|
|
8
|
+
* teinte. C'est ce qui permet d'engendrer sept familles chromatiques par une
|
|
9
9
|
* seule table de clartes (`primitives.ts`).
|
|
10
10
|
*
|
|
11
11
|
* Le moteur ne fait que convertir. L'hexadecimal reste ce que consomment la
|
|
@@ -58,7 +58,7 @@ export declare function oklchEnCss({ l, c, h }: Oklch): string;
|
|
|
58
58
|
* donnees (graphique sequentiel, carte de chaleur) sur une rampe.
|
|
59
59
|
*
|
|
60
60
|
* Chaque couleur est DEFINIE en OKLCH et son hexadecimal est DERIVE par le
|
|
61
|
-
* moteur (`oklch.ts`). Les
|
|
61
|
+
* moteur (`oklch.ts`). Les sept familles chromatiques partagent une seule table de
|
|
62
62
|
* clartes : un `succes 600` et un `danger 600` ont la meme clarte, donc le meme
|
|
63
63
|
* contraste sur une meme surface (01 §2, principe P3). Une famille se definit par
|
|
64
64
|
* deux nombres, sa teinte et sa chroma maximale.
|
|
@@ -77,11 +77,11 @@ export type PasNeutre = (typeof PAS_NEUTRES)[number];
|
|
|
77
77
|
/** Rangs de la palette categorielle. */
|
|
78
78
|
export declare const RANGS_DE_SERIE: readonly [1, 2, 3, 4, 5, 6];
|
|
79
79
|
export type RangDeSerie = (typeof RANGS_DE_SERIE)[number];
|
|
80
|
-
/** Clarte OKLCH de chaque pas, commune aux
|
|
80
|
+
/** Clarte OKLCH de chaque pas, commune aux sept familles chromatiques. */
|
|
81
81
|
export declare const L_PAS: Readonly<Record<PasDeRampe, number>>;
|
|
82
82
|
/** Part de la chroma maximale de la famille, par pas : la couleur culmine au pas 600. */
|
|
83
83
|
export declare const C_PAS: Readonly<Record<PasDeRampe, number>>;
|
|
84
|
-
export type NomDeFamille = 'bleu' | 'azur' | 'or' | 'vert' | 'ambre' | 'rouge';
|
|
84
|
+
export type NomDeFamille = 'bleu' | 'azur' | 'or' | 'vert' | 'ambre' | 'rouge' | 'violet';
|
|
85
85
|
export interface FamilleChromatique {
|
|
86
86
|
/** Teinte OKLCH, en degres. */
|
|
87
87
|
readonly teinte: number;
|
|
@@ -115,9 +115,10 @@ export type RampesDuNuancier<V> = {
|
|
|
115
115
|
readonly vert: Readonly<Record<PasDeRampe, V>>;
|
|
116
116
|
readonly ambre: Readonly<Record<PasDeRampe, V>>;
|
|
117
117
|
readonly rouge: Readonly<Record<PasDeRampe, V>>;
|
|
118
|
+
readonly violet: Readonly<Record<PasDeRampe, V>>;
|
|
118
119
|
readonly serie: Readonly<Record<RangDeSerie, V>>;
|
|
119
120
|
};
|
|
120
|
-
/** Les
|
|
121
|
+
/** Les 96 primitives avec leur definition : ce que le nuancier du banc affiche. */
|
|
121
122
|
export declare const definitionsDesPrimitives: RampesDuNuancier<DefinitionDePrimitive>;
|
|
122
123
|
export type NomDeRampe = keyof typeof definitionsDesPrimitives;
|
|
123
124
|
/** Les primitives en hexadecimal : la forme que le theme et la feuille consomment. */
|
|
@@ -386,6 +387,10 @@ export declare const largeur: {
|
|
|
386
387
|
/**
|
|
387
388
|
* Hauteurs de commande (D4) : pas de `xs`, le plancher est 32 px au pointeur fin
|
|
388
389
|
* et 44 px au doigt. `--st-hauteur-commande-defaut` suit la densite.
|
|
390
|
+
*
|
|
391
|
+
* `embarquee` : 48 px, la cible des applications natives (Android), pour un ecran du socle
|
|
392
|
+
* embarque dans la WebView d'une application mobile (ADR 0043 du socle backend, lots 276 et 300) ;
|
|
393
|
+
* la feuille la pose sous `[data-mode='embarque']`, que la coquille met sur `<html>`.
|
|
389
394
|
*/
|
|
390
395
|
export declare const hauteurDeCommande: {
|
|
391
396
|
readonly sm: "2rem";
|
|
@@ -393,6 +398,7 @@ export declare const hauteurDeCommande: {
|
|
|
393
398
|
readonly lg: "2.5rem";
|
|
394
399
|
readonly xl: "2.75rem";
|
|
395
400
|
readonly '2xl': "3.25rem";
|
|
401
|
+
readonly embarquee: "3rem";
|
|
396
402
|
};
|
|
397
403
|
/** Les trois densites (01 §5.6, D10, D29). `confortable` est le defaut, sans attribut. */
|
|
398
404
|
export declare const MODES_DE_DENSITE: readonly ["confortable", "dense", "compacte"];
|
|
@@ -541,6 +547,18 @@ export interface JetonsDeCouleur {
|
|
|
541
547
|
readonly dangerDiscret: CouleurHex;
|
|
542
548
|
readonly surDangerDiscret: CouleurHex;
|
|
543
549
|
readonly dangerDiscretCourant: CouleurHex;
|
|
550
|
+
readonly erreur: CouleurHex;
|
|
551
|
+
readonly surErreur: CouleurHex;
|
|
552
|
+
readonly erreurDiscret: CouleurHex;
|
|
553
|
+
readonly surErreurDiscret: CouleurHex;
|
|
554
|
+
readonly essai: CouleurHex;
|
|
555
|
+
readonly surEssai: CouleurHex;
|
|
556
|
+
readonly essaiDiscret: CouleurHex;
|
|
557
|
+
readonly surEssaiDiscret: CouleurHex;
|
|
558
|
+
readonly serie1: CouleurHex;
|
|
559
|
+
readonly serie2: CouleurHex;
|
|
560
|
+
readonly serie3: CouleurHex;
|
|
561
|
+
readonly serie4: CouleurHex;
|
|
544
562
|
readonly positif: CouleurHex;
|
|
545
563
|
readonly negatif: CouleurHex;
|
|
546
564
|
}
|
|
@@ -555,6 +573,14 @@ export declare const themeClair: JetonsDeCouleur;
|
|
|
555
573
|
*/
|
|
556
574
|
export declare const themeSombre: JetonsDeCouleur;
|
|
557
575
|
export declare const themes: Readonly<Record<NomDeTheme, JetonsDeCouleur>>;
|
|
576
|
+
/**
|
|
577
|
+
* Roles ALIAS (P08-03) : leur valeur par defaut est celle d'un autre role, et la feuille l'ecrit
|
|
578
|
+
* `var(--st-couleur-<cible>)` au lieu d'une copie. Une application qui change `danger` change donc
|
|
579
|
+
* l'erreur avec lui, tant qu'elle (ou sa marque) ne pose pas `erreur` : le rendu des autres
|
|
580
|
+
* consommateurs du socle reste celui d'avant le role. Les valeurs des themes sont celles de la
|
|
581
|
+
* cible, et un essai le verifie.
|
|
582
|
+
*/
|
|
583
|
+
export declare const aliasDeRole: Readonly<Partial<Record<NomDeJeton, NomDeJeton>>>;
|
|
558
584
|
/**
|
|
559
585
|
* Les paires que le contraste doit tenir, dans les DEUX themes. Elles sont
|
|
560
586
|
* declarees ici, et non dans le test, pour qu'un jeton ajoute sans sa paire saute
|
|
@@ -655,7 +681,10 @@ export declare function rolesDesPrimitives(): ReadonlyMap<string, readonly strin
|
|
|
655
681
|
* dans la recette `docs/recettes/police.md`, pas dans le socle.
|
|
656
682
|
*
|
|
657
683
|
* ⚠️ Un style ne pose JAMAIS de couleur : la couleur est un role semantique, le
|
|
658
|
-
* style une forme. Il ne pose la famille que pour la chasse fixe
|
|
684
|
+
* style une forme. Il ne pose la famille que pour la chasse fixe, et pour les titres :
|
|
685
|
+
* `var(--st-police-titre, var(--st-police-base))`. Le jeton de titre n'est declare que par la
|
|
686
|
+
* feuille OPTIONNELLE `styles/polices-titres.css` : sans elle, un titre garde la police de base,
|
|
687
|
+
* et l'application ne charge aucun octet de plus.
|
|
659
688
|
*/
|
|
660
689
|
type Graisse = keyof typeof typographie.graisse;
|
|
661
690
|
type Interlettrage = keyof typeof typographie.interlettrage;
|
|
@@ -673,7 +702,8 @@ export interface StyleComposite {
|
|
|
673
702
|
*/
|
|
674
703
|
readonly interlettrage: Interlettrage | 'approche';
|
|
675
704
|
readonly chiffres?: keyof typeof typographie.chiffres;
|
|
676
|
-
|
|
705
|
+
/** `mono` : la chasse fixe ; `titre` : la police de titre si sa feuille est chargee. */
|
|
706
|
+
readonly famille?: 'mono' | 'titre';
|
|
677
707
|
/** Micro-libelles en capitales : la casse fait partie de la forme. */
|
|
678
708
|
readonly capitales?: true;
|
|
679
709
|
readonly usage: string;
|
|
@@ -747,30 +777,35 @@ export declare const stylesTypographiques: {
|
|
|
747
777
|
readonly interligne: "md";
|
|
748
778
|
readonly graisse: "semi";
|
|
749
779
|
readonly interlettrage: "approche";
|
|
780
|
+
readonly famille: "titre";
|
|
750
781
|
readonly usage: "intertitre, titre de dialogue et de carte (18/24)";
|
|
751
782
|
};
|
|
752
783
|
readonly 'titre-3': {
|
|
753
784
|
readonly taille: "xl";
|
|
754
785
|
readonly graisse: "semi";
|
|
755
786
|
readonly interlettrage: "approche";
|
|
787
|
+
readonly famille: "titre";
|
|
756
788
|
readonly usage: "titre de section";
|
|
757
789
|
};
|
|
758
790
|
readonly 'titre-2': {
|
|
759
791
|
readonly taille: "2xl";
|
|
760
792
|
readonly graisse: "semi";
|
|
761
793
|
readonly interlettrage: "approche";
|
|
794
|
+
readonly famille: "titre";
|
|
762
795
|
readonly usage: "titre de bloc majeur";
|
|
763
796
|
};
|
|
764
797
|
readonly 'titre-1': {
|
|
765
798
|
readonly taille: "3xl";
|
|
766
799
|
readonly graisse: "semi";
|
|
767
800
|
readonly interlettrage: "approche";
|
|
801
|
+
readonly famille: "titre";
|
|
768
802
|
readonly usage: "titre de page (h1 de 32 px, D18)";
|
|
769
803
|
};
|
|
770
804
|
readonly affichage: {
|
|
771
805
|
readonly taille: "4xl";
|
|
772
806
|
readonly graisse: "semi";
|
|
773
807
|
readonly interlettrage: "approche";
|
|
808
|
+
readonly famille: "titre";
|
|
774
809
|
readonly usage: "annonce, titre d ecran de marque";
|
|
775
810
|
};
|
|
776
811
|
readonly 'affichage-grand': {
|
|
@@ -906,6 +941,17 @@ export interface PoliceDuSocle {
|
|
|
906
941
|
};
|
|
907
942
|
}
|
|
908
943
|
export declare const policesDuSocle: readonly PoliceDuSocle[];
|
|
944
|
+
/**
|
|
945
|
+
* Police de TITRE, OPTIONNELLE (niveau 2 bis) : Source Serif 4 (SIL OFL 1.1), axe de graisse seul,
|
|
946
|
+
* auto-hebergee comme les autres. Livree dans sa PROPRE feuille, `styles/polices-titres.css`, qui
|
|
947
|
+
* declare aussi le jeton `--st-police-titre` : les styles `titre-*` et `affichage` le lisent avec la
|
|
948
|
+
* police de base en repli. Qui ne charge pas la feuille garde ses titres dans la police de base et ne
|
|
949
|
+
* paie aucun octet ; qui la charge ne la precharge pas sur un ecran anonyme sous seuil (ADR 0031) :
|
|
950
|
+
* `font-display: optional` et le repli metrise excluent tout decalage a son arrivee.
|
|
951
|
+
*/
|
|
952
|
+
export declare const policesDeTitre: readonly PoliceDuSocle[];
|
|
953
|
+
/** La pile du jeton `--st-police-titre`, posee par la feuille des titres. */
|
|
954
|
+
export declare const pileDeTitre = "'Source Serif 4 Variable', 'Source Serif 4 Repli', Georgia, serif";
|
|
909
955
|
/** Surcharges du repli, en pourcentage, arrondies au centieme. */
|
|
910
956
|
export interface SurchargesDuRepli {
|
|
911
957
|
readonly sizeAdjust: string;
|
|
@@ -921,12 +967,12 @@ export interface SurchargesDuRepli {
|
|
|
921
967
|
export declare function surchargesDuRepli(police: PoliceDuSocle): SurchargesDuRepli;
|
|
922
968
|
/** Les fichiers a precharger par l'hote, dans l'ordre. */
|
|
923
969
|
export declare function fichiersAPrecharger(): readonly string[];
|
|
970
|
+
export declare function feuilleDesPolices(): string;
|
|
924
971
|
/**
|
|
925
|
-
* La feuille `styles/polices.css
|
|
926
|
-
*
|
|
927
|
-
* sa propre origine.
|
|
972
|
+
* La feuille OPTIONNELLE `styles/polices-titres.css` : les faces de la police de titre, son repli
|
|
973
|
+
* metrise, et le jeton `--st-police-titre` qu'elles servent. Adresses relatives, comme les autres.
|
|
928
974
|
*/
|
|
929
|
-
export declare function
|
|
975
|
+
export declare function feuilleDesPolicesDeTitre(): string;
|
|
930
976
|
/**
|
|
931
977
|
* Niveau 3 — jetons de composant. Les quelques reglages qu'une application peut
|
|
932
978
|
* poser sans forker une feuille de style.
|
|
@@ -1007,8 +1053,11 @@ export declare function enKebab(valeur: string): string;
|
|
|
1007
1053
|
export declare function nomDeCouleur(jeton: NomDeJeton): string;
|
|
1008
1054
|
/** Jetons invariants : ils ne dependent pas du theme. */
|
|
1009
1055
|
export declare function cssDesEchelles(): string;
|
|
1010
|
-
/**
|
|
1011
|
-
|
|
1056
|
+
/**
|
|
1057
|
+
* Couleurs, ombres et voile : une declaration chacun, en `light-dark()` ; un role alias en `var()`
|
|
1058
|
+
* de sa cible, sauf `litteral` (le repli du partiel Sass).
|
|
1059
|
+
*/
|
|
1060
|
+
export declare function cssDuTheme(litteral?: boolean): string;
|
|
1012
1061
|
/**
|
|
1013
1062
|
* Mouvement reduit (01 §6, 03 P5) : toute duree non nulle ET tout deplacement a zero.
|
|
1014
1063
|
* Une couche apparait alors en place et d'un coup, sans qu'aucun composant sache
|
|
@@ -1101,6 +1150,8 @@ export declare const encresDAplat: readonly NomDeJeton[];
|
|
|
1101
1150
|
export declare const derogationsDImpression: Readonly<Partial<Record<NomDeJeton, string>>>;
|
|
1102
1151
|
/** Tailles en points a l'impression : le rem y vaut 12 pt, l'echelle se resserre. */
|
|
1103
1152
|
export declare const taillesDImpression: Readonly<Record<keyof typeof typographie.taille, string>>;
|
|
1153
|
+
/** Le reglage d'affichage du prefixe de ton (P08-03) : `masque` (defaut, sans le poser) ou `visible`. */
|
|
1154
|
+
export declare const REGLAGE_DU_PREFIXE_DE_TON = "--st-prefixe-de-ton";
|
|
1104
1155
|
/**
|
|
1105
1156
|
* Feuille complete.
|
|
1106
1157
|
*
|
|
@@ -1115,6 +1166,25 @@ export declare const taillesDImpression: Readonly<Record<keyof typeof typographi
|
|
|
1115
1166
|
* defilement, des champs natifs et un remplissage automatique sombres.
|
|
1116
1167
|
*/
|
|
1117
1168
|
export declare function feuilleDeJetons(): string;
|
|
1169
|
+
/**
|
|
1170
|
+
* La feuille des jetons d'un CUSTOM ELEMENT (lot 299, W03) : les jetons de la feuille de la page,
|
|
1171
|
+
* poses sur `:host`, pour la racine d'ombre d'un element monte dans une page qui ne charge pas la
|
|
1172
|
+
* notre (`@starterlib/elements`). Une seule instance, construite par script et ADOPTEE par chaque
|
|
1173
|
+
* racine (`adoptedStyleSheets`) : hors de `style-src`, sans nonce, sans copie par element. Les
|
|
1174
|
+
* feuilles des composants du socle qu'un element embarque y lisent leurs `var(--st-*)` sans repli.
|
|
1175
|
+
*
|
|
1176
|
+
* Le theme est celui de l'ELEMENT : `data-theme` pose sur lui, sinon la preference du systeme. Rien
|
|
1177
|
+
* ne lit un ancetre de la page : `:host-context()` n'existe ni sous Firefox ni sous Safari (constat
|
|
1178
|
+
* F6 du plan de la phase 2 du socle backend), et ce que la coquille pose sur `<html>` (`data-mode`,
|
|
1179
|
+
* `data-gel`) n'a pas de sens dans une page tierce. Les couleurs restent des `light-dark()` :
|
|
1180
|
+
* `color-scheme`, pose sur l'hote, les resout dans toute la racine. Aucun commentaire : la feuille
|
|
1181
|
+
* part dans le script de l'element.
|
|
1182
|
+
*
|
|
1183
|
+
* Specificite : `:host` pese (0,1,0), `:host([...])` (0,2,0) ; une derogation qui doit l'emporter
|
|
1184
|
+
* sur un attribut le repete (`:host, :host([data-densite])`), et toutes gagnent par l'ORDRE, comme
|
|
1185
|
+
* dans la feuille de la page.
|
|
1186
|
+
*/
|
|
1187
|
+
export declare function feuilleDesJetonsDUnElement(): string;
|
|
1118
1188
|
/**
|
|
1119
1189
|
* Le partiel Sass `_jetons.scss` (lot 299, W02) : `st.jeton('couleur-texte')` rend
|
|
1120
1190
|
* `var(--st-couleur-texte, <valeur du jeton>)`.
|
|
@@ -1144,9 +1214,143 @@ export declare function nombreDeJetonsDeCouleur(jetons?: JetonsDeCouleur): numbe
|
|
|
1144
1214
|
* | `police` | `typographie.famille` | `fontFamily` |
|
|
1145
1215
|
* | `duree` | `duree` | `duration` |
|
|
1146
1216
|
*
|
|
1217
|
+
* Un role ALIAS (`aliasDeRole`, P08-03 : `erreur` vaut `danger` par defaut) part en reference DTCG,
|
|
1218
|
+
* `{couleur.clair.danger}` : un outil le resout, et il suit sa cible comme la feuille.
|
|
1219
|
+
*
|
|
1147
1220
|
* Ce qui ne part pas : les ombres, courbes, cadences et derogations (contraste renforce, impression,
|
|
1148
1221
|
* mouvement reduit) sont des REGLES de la feuille, pas des valeurs a recopier ailleurs.
|
|
1149
1222
|
*/
|
|
1150
1223
|
export declare function jetonsDtcg(): string;
|
|
1224
|
+
/**
|
|
1225
|
+
* Niveau 2 bis — la MARQUE : un theme de marque generique, par valeurs.
|
|
1226
|
+
*
|
|
1227
|
+
* Une application obtient son identite par des VALEURS, jamais par une feuille ecrite a la main : le
|
|
1228
|
+
* README des jetons n'ouvre aucune couleur au niveau 3. Une marque pose, pour chaque theme, la valeur
|
|
1229
|
+
* de roles semantiques ; le moteur rejoue sur le theme qui en resulte TOUTES les gardes de la feuille
|
|
1230
|
+
* par defaut (paires de contraste, ecarts de surface, focus a deux voies, contraste renforce,
|
|
1231
|
+
* impression), et seulement s'il est conforme, engendre une feuille `starter-tokens-<nom>.css` a
|
|
1232
|
+
* charger APRES `starter-tokens.css`.
|
|
1233
|
+
*
|
|
1234
|
+
* Ce qu'une marque change : la valeur des roles (couleurs). Ce qu'elle ne change pas : la structure
|
|
1235
|
+
* (noms des jetons), les rayons, les hauteurs, les echelles — des reglages de niveau 3 ou des
|
|
1236
|
+
* decisions du socle.
|
|
1237
|
+
*
|
|
1238
|
+
* ⚠️ **La feuille par defaut ne bouge pas d'un octet.** Le role `bordureForteElevee` (le contour d'un
|
|
1239
|
+
* champ pose sur une surface elevee : dialogue, menu, popover, conteneur haut) n'y est pas declare, et
|
|
1240
|
+
* la substitution qui le fait lire par les conteneurs eleves vit dans la feuille de MARQUE : sans
|
|
1241
|
+
* marque, un champ dans un dialogue garde exactement le contour d'aujourd'hui, contraste renforce
|
|
1242
|
+
* compris ; avec une marque, il prend le contour que la marque a prouve a 3:1 sur ces surfaces.
|
|
1243
|
+
*/
|
|
1244
|
+
/** Les roles qu'une marque peut poser : les jetons semantiques, plus le contour sur surface elevee. */
|
|
1245
|
+
export type RoleDeMarque = NomDeJeton | 'bordureForteElevee';
|
|
1246
|
+
/** Les valeurs d'un theme de la marque : un sous-ensemble des roles, en hexadecimal `#rrggbb`. */
|
|
1247
|
+
export type CouleursDeMarque = Readonly<Partial<Record<RoleDeMarque, CouleurHex>>>;
|
|
1248
|
+
/** Le theme complet d'une marque : celui du socle, ecrase par les valeurs de la marque. */
|
|
1249
|
+
export type JetonsDeMarque = JetonsDeCouleur & {
|
|
1250
|
+
readonly bordureForteElevee: CouleurHex;
|
|
1251
|
+
};
|
|
1252
|
+
/**
|
|
1253
|
+
* Un ecart de surface que la marque assume sous son seuil, avec son motif : la separation est alors
|
|
1254
|
+
* portee par le FILET, que le moteur exige perceptible (`SEUIL_DE_PERCEPTIBILITE`) sur l'une des deux
|
|
1255
|
+
* surfaces au moins. Sans `theme`, l'exemption vaut dans les deux.
|
|
1256
|
+
*/
|
|
1257
|
+
export interface ExemptionDeMarque {
|
|
1258
|
+
readonly ecart: readonly [RoleDeMarque, RoleDeMarque];
|
|
1259
|
+
readonly theme?: NomDeTheme;
|
|
1260
|
+
readonly raison: string;
|
|
1261
|
+
}
|
|
1262
|
+
/** Une paire de plus, exigee par la marque (un usage qui lui est propre). */
|
|
1263
|
+
export interface PaireDeMarque {
|
|
1264
|
+
readonly premierPlan: RoleDeMarque;
|
|
1265
|
+
readonly arrierePlans: readonly RoleDeMarque[];
|
|
1266
|
+
readonly nature: NatureDuTexte;
|
|
1267
|
+
}
|
|
1268
|
+
/**
|
|
1269
|
+
* Une paire de la marque qu'on pourrait croire permise et qui ne l'est pas : elle doit ECHOUER dans un
|
|
1270
|
+
* theme au moins (une exclusion qui tient redevient une paire), et la regle d'usage est ecrite.
|
|
1271
|
+
*/
|
|
1272
|
+
export interface PaireExclueDeMarque {
|
|
1273
|
+
readonly premierPlan: RoleDeMarque;
|
|
1274
|
+
readonly arrierePlan: RoleDeMarque;
|
|
1275
|
+
readonly raison: string;
|
|
1276
|
+
}
|
|
1277
|
+
export interface ValeursDeMarque {
|
|
1278
|
+
/** `exemple-blanc` : nomme la feuille `starter-tokens-<nom>.css` et le fichier `<nom>.tokens.json`. */
|
|
1279
|
+
readonly nom: string;
|
|
1280
|
+
readonly description?: string;
|
|
1281
|
+
readonly clair: CouleursDeMarque;
|
|
1282
|
+
readonly sombre: CouleursDeMarque;
|
|
1283
|
+
/** Familles de primitives propres a la marque, pour le fichier DTCG : `{ violet: { 600: '#…' } }`. */
|
|
1284
|
+
readonly primitives?: Readonly<Record<string, Readonly<Record<string, CouleurHex>>>>;
|
|
1285
|
+
readonly exemptions?: readonly ExemptionDeMarque[];
|
|
1286
|
+
readonly paires?: readonly PaireDeMarque[];
|
|
1287
|
+
readonly pairesExclues?: readonly PaireExclueDeMarque[];
|
|
1288
|
+
}
|
|
1289
|
+
/** Une marque qui ne tient pas ses gardes : chaque defaut nomme la paire ou la valeur fautive. */
|
|
1290
|
+
export declare class MarqueNonConforme extends Error {
|
|
1291
|
+
readonly defauts: readonly string[];
|
|
1292
|
+
constructor(nom: string, defauts: readonly string[]);
|
|
1293
|
+
}
|
|
1294
|
+
/**
|
|
1295
|
+
* Les paires que toute marque doit tenir : celles du socle, plus le contour sur les surfaces elevees
|
|
1296
|
+
* (3:1, WCAG 1.4.11) — sur la surface aussi, une carte posee dans un dialogue portant ses champs.
|
|
1297
|
+
*/
|
|
1298
|
+
export declare const pairesDuContourEleve: readonly PaireDeMarque[];
|
|
1299
|
+
/**
|
|
1300
|
+
* Les ecarts de surface d'une marque : ceux du socle, plus la surface sur le fond (une carte se
|
|
1301
|
+
* detache de la page). La feuille par defaut le tient deja (1,05:1) ; une marque a fond blanc ne le
|
|
1302
|
+
* peut pas, et l'assume par une exemption ecrite, le filet portant la separation.
|
|
1303
|
+
*/
|
|
1304
|
+
export declare const ecartsDeMarque: readonly {
|
|
1305
|
+
readonly devant: RoleDeMarque;
|
|
1306
|
+
readonly derriere: RoleDeMarque;
|
|
1307
|
+
readonly minimum: number;
|
|
1308
|
+
readonly pourquoi: string;
|
|
1309
|
+
}[];
|
|
1310
|
+
/** Les conteneurs eleves du socle : leurs champs lisent `bordureForteElevee` (feuille de marque seulement). */
|
|
1311
|
+
export declare const conteneursEleves: readonly string[];
|
|
1312
|
+
/**
|
|
1313
|
+
* Le theme complet d'une marque, valeurs en minuscules ; `bordureForteElevee` vaut `bordureForte`
|
|
1314
|
+
* s'il manque, et un role ALIAS non pose (`erreur`...) vaut sa cible DANS LA MARQUE : une marque qui
|
|
1315
|
+
* pose `danger` sans `erreur` peint l'erreur de son danger, comme la feuille (`var()`) le fera.
|
|
1316
|
+
*/
|
|
1317
|
+
export declare function themeDeMarque(valeurs: ValeursDeMarque, theme: NomDeTheme): JetonsDeMarque;
|
|
1318
|
+
/**
|
|
1319
|
+
* Le theme d'une marque sous `prefers-contrast: more` : les alias du socle resolus dans la MARQUE, les
|
|
1320
|
+
* encres foncees du socle la ou la marque n'a pas pose le role, le contour eleve au texte discret.
|
|
1321
|
+
*/
|
|
1322
|
+
export declare function themeDeMarqueSousContrasteRenforce(valeurs: ValeursDeMarque, theme: NomDeTheme): JetonsDeMarque;
|
|
1323
|
+
/**
|
|
1324
|
+
* Les defauts d'une marque, vides si elle est conforme. Chaque defaut nomme la paire ou la valeur
|
|
1325
|
+
* fautive, son rapport et son minimum : c'est ce que la commande `starter-web jetons --marque` et les
|
|
1326
|
+
* essais impriment. Rejoue, dans les deux themes, ce que la feuille par defaut tient :
|
|
1327
|
+
*
|
|
1328
|
+
* - les paires de contraste (4,5:1 texte, 3:1 non textuel), avec celles de la marque et sans ses
|
|
1329
|
+
* exclusions, au rendu normal ET sous `prefers-contrast: more` ;
|
|
1330
|
+
* - le focus a deux voies sur chaque surface (l'anneau ou son lisere a 3:1), aux deux rendus ;
|
|
1331
|
+
* - les ecarts de surface perceptibles, sauf exemption ecrite, auquel cas le filet doit l'etre ;
|
|
1332
|
+
* - les jetons exemptes du socle (`bordure`, `texteDesactive`) restent perceptibles sur la surface ;
|
|
1333
|
+
* - une paire exclue echoue vraiment dans un theme au moins.
|
|
1334
|
+
*/
|
|
1335
|
+
export declare function defautsDeLaMarque(entree: unknown): readonly string[];
|
|
1336
|
+
/**
|
|
1337
|
+
* La feuille d'une marque, a charger APRES `starter-tokens.css` : les couleurs que la marque change,
|
|
1338
|
+
* le contour des conteneurs eleves, puis ses propres blocs de contraste renforce, de contraste force et
|
|
1339
|
+
* d'impression (venue apres la feuille du socle, sa racine ecraserait sinon ceux du socle pour les
|
|
1340
|
+
* roles qu'elle pose). Leve `MarqueNonConforme` si une garde echoue.
|
|
1341
|
+
*/
|
|
1342
|
+
export declare function feuilleDeMarque(valeurs: ValeursDeMarque): string;
|
|
1343
|
+
/** Le fichier DTCG d'une marque : ses deux themes complets, et ses primitives s'il y en a. */
|
|
1344
|
+
export declare function jetonsDtcgDeMarque(valeurs: ValeursDeMarque): string;
|
|
1345
|
+
/**
|
|
1346
|
+
* La marque d'EXEMPLE du socle (« exemple-blanc ») : fond blanc et gris froids d'une charte sobre
|
|
1347
|
+
* (fond = surface, filet, contour, retrait, gris de selection, contour sombre). Elle prouve le
|
|
1348
|
+
* mecanisme dans les essais et au banc : l'exemption « fond = surface » portee par le filet, le retrait
|
|
1349
|
+
* sous le seuil du socle, et un contour sombre trop faible pour les surfaces elevees, que le role
|
|
1350
|
+
* `bordureForteElevee` releve. Elle pose aussi l'ERREUR a l'encre du texte, sur papier gris (P08-03) :
|
|
1351
|
+
* une faute se lit par l'encre, la croix cerclee et le mot, le rouge restant a `danger`. Elle ne porte
|
|
1352
|
+
* la marque d'aucun produit.
|
|
1353
|
+
*/
|
|
1354
|
+
export declare const marqueExempleBlanc: ValeursDeMarque;
|
|
1151
1355
|
|
|
1152
1356
|
export {};
|
|
@@ -27,6 +27,11 @@ export declare const delai: {
|
|
|
27
27
|
readonly attente: 200;
|
|
28
28
|
/** Balayer une barre d'outils ne fait pas clignoter chaque infobulle. */
|
|
29
29
|
readonly survol: 300;
|
|
30
|
+
/**
|
|
31
|
+
* Une pause de frappe : ce qui suit la saisie (la jauge de force du mot de passe) attend la fin d'un
|
|
32
|
+
* groupe de touches, et ne change ni ne s'annonce a chaque touche.
|
|
33
|
+
*/
|
|
34
|
+
readonly frappe: 300;
|
|
30
35
|
/**
|
|
31
36
|
* Ajoute a la plus longue transition avant de retirer une couche sans avoir vu
|
|
32
37
|
* `transitionend` (onglet en arriere-plan, transition annulee).
|
|
@@ -72,6 +77,11 @@ export declare const rythme: {
|
|
|
72
77
|
readonly attente: 200;
|
|
73
78
|
/** Balayer une barre d'outils ne fait pas clignoter chaque infobulle. */
|
|
74
79
|
readonly survol: 300;
|
|
80
|
+
/**
|
|
81
|
+
* Une pause de frappe : ce qui suit la saisie (la jauge de force du mot de passe) attend la fin d'un
|
|
82
|
+
* groupe de touches, et ne change ni ne s'annonce a chaque touche.
|
|
83
|
+
*/
|
|
84
|
+
readonly frappe: 300;
|
|
75
85
|
/**
|
|
76
86
|
* Ajoute a la plus longue transition avant de retirer une couche sans avoir vu
|
|
77
87
|
* `transitionend` (onglet en arriere-plan, transition annulee).
|