@alveole/theme 1.10.0 → 2.0.0-alpha.1

package/dist/helpers/elevationStyle.d.ts

@@ -5,7 +5,7 @@ import { ElevationKey } from '../constants';
  * @returns
  */
 export declare const elevationStyle: (level: ElevationKey) => {
-    shadowColor: import("..").Color;
+    shadowColor: string;
     shadowOffset: {
         width: number;
         height: number;

package/dist/helpers/focusRingCSS.d.ts

@@ -0,0 +1,15 @@
+/**
+ * La bague de focus du kit, en CSS plutot qu'en style de composant.
+ *
+ * Elle nait de `:focus-visible`, le seul selecteur qui distingue une arrivee au clavier d'un
+ * clic : c'est la regle commune a Primer, a `@atlaskit/focus-ring` et a Base. Un style pose
+ * depuis un state React branche sur `onFocus` ne le peut pas, `Pressable` de react-native-web
+ * n'exposant qu'un `focused` brut, sans notion de modalite. C'est ce contournement, adopte
+ * parce que jsdom ne resout pas `:focus`, qui faisait apparaitre la bague au clic sur les
+ * boutons et les onglets.
+ *
+ * Elle ne s'applique qu'aux elements portant `FOCUS_ATTRIBUTE`, jamais a la page entiere :
+ * cf. ADR 0008.
+ */
+export declare const generateFocusRingCSS: () => string;
+//# sourceMappingURL=focusRingCSS.d.ts.map

package/dist/helpers/focusRingCSS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusRingCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/focusRingCSS.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,oBAAoB,QAAO,MAU1B,CAAC"}

package/dist/helpers/focusRingCSS.js

@@ -0,0 +1,26 @@
+import { FOCUS_ATTRIBUTE, focusBorder, FocusRingMetrics } from '../constants/Focus';
+/** Un seul point de construction du selecteur : l'attribut ne s'ecrit qu'ici. */
+const marque = (variante) => (variante ? `[${FOCUS_ATTRIBUTE}='${variante}']` : `[${FOCUS_ATTRIBUTE}]`);
+/**
+ * La bague de focus du kit, en CSS plutot qu'en style de composant.
+ *
+ * Elle nait de `:focus-visible`, le seul selecteur qui distingue une arrivee au clavier d'un
+ * clic : c'est la regle commune a Primer, a `@atlaskit/focus-ring` et a Base. Un style pose
+ * depuis un state React branche sur `onFocus` ne le peut pas, `Pressable` de react-native-web
+ * n'exposant qu'un `focused` brut, sans notion de modalite. C'est ce contournement, adopte
+ * parce que jsdom ne resout pas `:focus`, qui faisait apparaitre la bague au clic sur les
+ * boutons et les onglets.
+ *
+ * Elle ne s'applique qu'aux elements portant `FOCUS_ATTRIBUTE`, jamais a la page entiere :
+ * cf. ADR 0008.
+ */
+export const generateFocusRingCSS = () => [
+    // `!important` : Tamagui laisse un `outline: none` en style inline sur certains de ses
+    // conteneurs, et un style inline bat toute feuille de style. Sans lui, la `Tabs.List` -
+    // point d'entree au clavier du composant - restait un arret invisible. Sans danger, la
+    // regle ne touchant que ce qui a demande la bague : un champ, qui eteint son contour au
+    // profit de sa bordure (ADR 0016), ne porte pas la marque.
+    `${marque()}:focus-visible { outline: ${FocusRingMetrics.width}px solid ${focusBorder().borderColor} !important; outline-offset: ${FocusRingMetrics.offset}px !important; }`,
+    `${marque()}:focus:not(:focus-visible) { outline: none !important; }`,
+    `${marque('inset')}:focus-visible { outline-offset: ${FocusRingMetrics.insetOffset}px !important; }`,
+].join('\n');

package/dist/helpers/hexToRgb.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '../constants';
+type Rgb = [number, number, number];
+/** Decompose une couleur hexadecimale, courte (`#369`) ou longue (`#336699`), en ses trois canaux. */
+export declare const hexToRgb: (hexadecimalColor: Color) => Rgb;
+export {};
+//# sourceMappingURL=hexToRgb.d.ts.map

package/dist/helpers/hexToRgb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexToRgb.d.ts","sourceRoot":"","sources":["../../src/helpers/hexToRgb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpC,sGAAsG;AACtG,eAAO,MAAM,QAAQ,GAAI,kBAAkB,KAAK,KAAG,GAUlD,CAAC"}

package/dist/helpers/hexToRgb.js

@@ -0,0 +1,13 @@
+/** Decompose une couleur hexadecimale, courte (`#369`) ou longue (`#336699`), en ses trois canaux. */
+export const hexToRgb = (hexadecimalColor) => {
+    let digits = hexadecimalColor.replace(/^#/, '');
+    if (digits.length === 3)
+        digits = digits
+            .split('')
+            .map(c => c + c)
+            .join('');
+    if (digits.length !== 6)
+        throw new Error('Invalid hex color');
+    const channel = (start) => parseInt(digits.slice(start, start + 2), 16);
+    return [channel(0), channel(2), channel(4)];
+};

package/dist/helpers/injectVariableCSS.d.ts

@@ -1,7 +1,17 @@
 import { Theme } from '../type';
-export declare const generateCSSVariables: (theme: Theme) => string;
-export declare const injectVariableCSS: (theme: Theme) => void;
+/** Ce que la generation du CSS lit du theme : le theme par defaut n'a besoin de rien d'autre. */
+type SourceDuCSS = {
+    color: Pick<Theme['color'], '_constants' | '_rawLight'>;
+};
+export declare const generateCSSVariables: (theme: SourceDuCSS) => string;
+export declare const injectVariableCSS: (theme: SourceDuCSS) => void;
 export declare const generateFontFaceCSS: () => string;
-export declare const generateFontSmoothingCSS: () => string;
-export declare const generateDefaultThemeCSS: () => string;
+/**
+ * Le CSS que le paquet emet sur le web, en morceaux ordonnes. Les deux assembleurs
+ * (le `<style>` de WebThemeStyles et le `dist/default.css` du script de build) passent
+ * par ici : sans ce point unique, la liste serait tenue en phase a la main dans deux
+ * fichiers dont l'un est un script que personne ne relit.
+ */
+export declare const generateThemeCSSParts: (theme?: SourceDuCSS) => string[];
+export {};
 //# sourceMappingURL=injectVariableCSS.d.ts.map

package/dist/helpers/injectVariableCSS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AA6BhC,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,KAAG,MA+CnD,CAAC;AA8CF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,SAY7C,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,MAYtC,CAAC;AAEF,eAAO,MAAM,wBAAwB,QAAO,MAC6E,CAAC;AAE1H,eAAO,MAAM,uBAAuB,QAAO,MAM9B,CAAC"}
+{"version":3,"file":"injectVariableCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/injectVariableCSS.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMhC,iGAAiG;AACjG,KAAK,WAAW,GAAG;IAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC,CAAA;CAAE,CAAC;AAwB/E,eAAO,MAAM,oBAAoB,GAAI,OAAO,WAAW,KAAG,MA8CzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,SAYnD,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,MAYtC,CAAC;AASF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAO,WAA0B,KAAG,MAAM,EAK/E,CAAC"}

package/dist/helpers/injectVariableCSS.js

@@ -3,7 +3,10 @@ import { Elevations } from '../constants/Elevation';
 import { FontWeightMap } from '../constants/Font';
 import { RadiusList } from '../constants/Radius';
 import { CustomTypography } from '../constants/Typography';
+import { generateFocusRingCSS } from './focusRingCSS';
+import { generateLinkCSS } from './linkCSS';
 import { sanitizeCSSKey } from './sanitizeCSSKey';
+import { typographyVariableLines } from './typographyVariables';
 const buildColorVarMap = (constants) => {
     const map = new Map();
     Object.entries(constants).forEach(([name, shades]) => {
@@ -54,10 +57,9 @@ export const generateCSSVariables = (theme) => {
         lines.push(`  --font-${key}-weight: ${weight};`);
     });
     // Semantic tokens typographiques (--typography-{...}-font-size, etc.)
-    collectTypographyLines([], CustomTypography, fontReverseMap, lines);
+    lines.push(...typographyVariableLines(CustomTypography, fontReverseMap));
     // Semantic tokens light (--{category}-{token}: var(--color-...))
-    const light = theme.color._rawLight;
-    Object.entries(light).forEach(([category, tokens]) => {
+    Object.entries(theme.color._rawLight).forEach(([category, tokens]) => {
         if (typeof tokens !== 'object' || tokens === null)
             return;
         lines.push(...generateSemanticTokenLines(category, tokens, colorVarMap));
@@ -65,42 +67,6 @@ export const generateCSSVariables = (theme) => {
     const rootBlock = `:root {\n${lines.join('\n')}\n}`;
     return rootBlock;
 };
-const collectTypographyLines = (path, node, fontReverseMap, lines) => {
-    if (typeof node !== 'object' || node === null)
-        return;
-    const obj = node;
-    if (typeof obj.fontSize === 'number') {
-        const prefix = `  --typography-${path.map(sanitizeCSSKey).join('-')}`;
-        if (typeof obj.fontFamily === 'string') {
-            const weight = typeof obj.fontWeight === 'string' ? obj.fontWeight : '';
-            const fontKey = fontReverseMap.get(`${obj.fontFamily}__${weight}`) ??
-                (obj.fontFamily in FontWeightMap ? obj.fontFamily : undefined);
-            if (fontKey) {
-                lines.push(`${prefix}-font-family: var(--font-${fontKey}-family);`);
-                lines.push(`${prefix}-font-weight: var(--font-${fontKey}-weight);`);
-            }
-            else {
-                lines.push(`${prefix}-font-family: ${obj.fontFamily};`);
-                if (weight)
-                    lines.push(`${prefix}-font-weight: ${weight};`);
-            }
-        }
-        lines.push(`${prefix}-font-size: ${obj.fontSize}px;`);
-        if (typeof obj.lineHeight === 'number') {
-            lines.push(`${prefix}-line-height: ${obj.lineHeight}px;`);
-        }
-        if (typeof obj.letterSpacing === 'number' && obj.letterSpacing !== 0) {
-            lines.push(`${prefix}-letter-spacing: ${obj.letterSpacing}px;`);
-        }
-        if (typeof obj.textTransform === 'string') {
-            lines.push(`${prefix}-text-transform: ${obj.textTransform};`);
-        }
-        return;
-    }
-    Object.entries(obj).forEach(([key, value]) => {
-        collectTypographyLines([...path, key], value, fontReverseMap, lines);
-    });
-};
 export const injectVariableCSS = (theme) => {
     if (typeof document === 'undefined')
         return;
@@ -125,10 +91,21 @@ export const generateFontFaceCSS = () => {
         .join('&');
     return `@import url('https://fonts.googleapis.com/css2?${families}&display=swap');`;
 };
-export const generateFontSmoothingCSS = () => 'body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }';
-export const generateDefaultThemeCSS = () => generateCSSVariables({
+const DefaultTheme = {
     color: {
         _constants: Colors,
         _rawLight: CustomPalette.light,
     },
-});
+};
+/**
+ * Le CSS que le paquet emet sur le web, en morceaux ordonnes. Les deux assembleurs
+ * (le `<style>` de WebThemeStyles et le `dist/default.css` du script de build) passent
+ * par ici : sans ce point unique, la liste serait tenue en phase a la main dans deux
+ * fichiers dont l'un est un script que personne ne relit.
+ */
+export const generateThemeCSSParts = (theme = DefaultTheme) => [
+    generateFontFaceCSS(),
+    generateCSSVariables(theme),
+    generateFocusRingCSS(),
+    generateLinkCSS(),
+];

package/dist/helpers/isRecord.d.ts

@@ -0,0 +1,3 @@
+/** Vrai pour un objet indexable par chaine (ni `null`, ni primitive, ni tableau ecarte a l'usage). */
+export declare const isRecord: (value: unknown) => value is Record<string, unknown>;
+//# sourceMappingURL=isRecord.d.ts.map

package/dist/helpers/isRecord.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isRecord.d.ts","sourceRoot":"","sources":["../../src/helpers/isRecord.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,eAAO,MAAM,QAAQ,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAC5B,CAAC"}

package/dist/helpers/isRecord.js

@@ -0,0 +1,2 @@
+/** Vrai pour un objet indexable par chaine (ni `null`, ni primitive, ni tableau ecarte a l'usage). */
+export const isRecord = (value) => typeof value === 'object' && value !== null;

package/dist/helpers/linkCSS.d.ts

@@ -0,0 +1,2 @@
+export declare const generateLinkCSS: () => string;
+//# sourceMappingURL=linkCSS.d.ts.map

package/dist/helpers/linkCSS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkCSS.d.ts","sourceRoot":"","sources":["../../src/helpers/linkCSS.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAAO,MAAiE,CAAC"}

package/dist/helpers/linkCSS.js

@@ -0,0 +1,2 @@
+import { LINK_ATTRIBUTE } from '../constants/Link';
+export const generateLinkCSS = () => `[${LINK_ATTRIBUTE}] { text-underline-offset: 0.2em; }`;

package/dist/helpers/mapValues.d.ts

@@ -0,0 +1,15 @@
+type MapValues = <T extends object, R>(objet: T, transformation: (valeur: T[keyof T], cle: keyof T & string) => R) => {
+    [K in keyof T]: R;
+};
+/**
+ * Transforme chaque valeur d'un objet en gardant ses cles, et le dit dans son type.
+ *
+ * `Object.fromEntries` rend un `Record<string, R>` : TypeScript ne sait pas prouver que les
+ * cles ressortent identiques. Cette preuve, faite ici par construction (on ne parcourt que les
+ * cles de l'entree), est la seule assertion de type que le depot tolere : les parcours du theme
+ * passent tous par cette fonction plutot que de porter chacun la leur.
+ * Elle est exemptee de la regle par un override de la config ESLint, pas par une directive.
+ */
+export declare const mapValues: MapValues;
+export {};
+//# sourceMappingURL=mapValues.d.ts.map

package/dist/helpers/mapValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapValues.d.ts","sourceRoot":"","sources":["../../src/helpers/mapValues.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,EACnC,KAAK,EAAE,CAAC,EACR,cAAc,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,MAAM,KAAK,CAAC,KAC7D;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC;CAAE,CAAC;AAU3B;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAA6B,SAAS,CAAC"}

package/dist/helpers/mapValues.js

@@ -0,0 +1,11 @@
+const transformeChaqueValeur = (objet, transformation) => Object.fromEntries(Object.entries(objet).map(([cle, valeur]) => [cle, transformation(valeur, cle)]));
+/**
+ * Transforme chaque valeur d'un objet en gardant ses cles, et le dit dans son type.
+ *
+ * `Object.fromEntries` rend un `Record<string, R>` : TypeScript ne sait pas prouver que les
+ * cles ressortent identiques. Cette preuve, faite ici par construction (on ne parcourt que les
+ * cles de l'entree), est la seule assertion de type que le depot tolere : les parcours du theme
+ * passent tous par cette fonction plutot que de porter chacun la leur.
+ * Elle est exemptee de la regle par un override de la config ESLint, pas par une directive.
+ */
+export const mapValues = transformeChaqueValeur;

package/dist/helpers/removeUnsupportedCSSProperties.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"removeUnsupportedCSSProperties.d.ts","sourceRoot":"","sources":["../../src/helpers/removeUnsupportedCSSProperties.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;GAIG;AACH,wBAAgB,8BAA8B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAUjG"}
+{"version":3,"file":"removeUnsupportedCSSProperties.d.ts","sourceRoot":"","sources":["../../src/helpers/removeUnsupportedCSSProperties.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C;;;;GAIG;AACH,wBAAgB,8BAA8B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAMjG"}

package/dist/helpers/removeUnsupportedCSSProperties.js

@@ -1,20 +1,16 @@
 import { Platform } from 'react-native';
 import { UnsupportedCSSProperties } from '../constants';
+/** Les propriétés interdites sur la plateforme courante, chacune ramenée à `undefined`. */
+const annulations = () => Object.fromEntries((UnsupportedCSSProperties[Platform.OS] ?? []).map(propriete => [propriete, undefined]));
 /**
  * Retire les propriétés CSS non supportées pour une platforme
  * @param styles Styles appliqués
  * @returns Les styles sans les propriétés exclues pour la platform
  */
 export function removeUnsupportedCSSProperties(styles) {
-    const platform = Platform.OS;
-    const blocklist = UnsupportedCSSProperties[platform] ?? [];
-    const cleaned = {};
-    for (const key in styles) {
-        const style = { ...styles[key] };
-        for (const prop of blocklist)
-            if (prop in style)
-                style[prop] = undefined;
-        cleaned[key] = style;
-    }
+    const interdites = annulations();
+    const cleaned = { ...styles };
+    for (const key in cleaned)
+        cleaned[key] = { ...cleaned[key], ...interdites };
     return cleaned;
 }

package/dist/helpers/typographyVariables.d.ts

@@ -0,0 +1,22 @@
+/** Couple `${famille}__${poids}` vers la cle de police du catalogue. */
+export type FontCatalogue = Map<string, string>;
+/** La police d'un cran typographique : ses deux attributs ne voyagent jamais l'un sans l'autre. */
+export type Police = {
+    fontFamily: string;
+    fontWeight: string;
+};
+export declare const fontVariableLines: (prefix: string, { fontFamily, fontWeight }: Police, catalogue: FontCatalogue) => string[];
+export type TypographyMetrics = {
+    fontSize: number;
+    lineHeight?: unknown;
+    letterSpacing?: unknown;
+    textTransform?: unknown;
+};
+export declare const metricVariableLines: (prefix: string, metrics: TypographyMetrics) => string[];
+/**
+ * Traduit l'arbre des jetons typographiques en declarations CSS. Chaque feuille est
+ * reconnue a son `fontSize` : au-dessus, ce sont des regroupements dont le nom se
+ * concatene pour former celui de la variable.
+ */
+export declare const typographyVariableLines: (typography: unknown, catalogue: FontCatalogue, path?: string[]) => string[];
+//# sourceMappingURL=typographyVariables.d.ts.map

package/dist/helpers/typographyVariables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typographyVariables.d.ts","sourceRoot":"","sources":["../../src/helpers/typographyVariables.ts"],"names":[],"mappings":"AAGA,wEAAwE;AACxE,MAAM,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAUhD,mGAAmG;AACnG,MAAM,MAAM,MAAM,GAAG;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,eAAO,MAAM,iBAAiB,GAC5B,QAAQ,MAAM,EACd,4BAA4B,MAAM,EAClC,WAAW,aAAa,KACvB,MAAM,EAWR,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,EAAE,SAAS,iBAAiB,KAAG,MAAM,EAOtF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,YAAY,OAAO,EACnB,WAAW,aAAa,EACxB,OAAM,MAAM,EAAO,KAClB,MAAM,EAwBR,CAAC"}

package/dist/helpers/typographyVariables.js

@@ -0,0 +1,49 @@
+import { isRecord } from './isRecord';
+import { sanitizeCSSKey } from './sanitizeCSSKey';
+const resolveFontKey = (fontFamily, fontWeight, catalogue) => {
+    const byFamilyAndWeight = catalogue.get(`${fontFamily}__${fontWeight}`);
+    if (byFamilyAndWeight)
+        return byFamilyAndWeight;
+    // Hors web, `fontStyle` pose la cle du catalogue directement dans `fontFamily`.
+    return Array.from(catalogue.values()).find(key => key === fontFamily);
+};
+export const fontVariableLines = (prefix, { fontFamily, fontWeight }, catalogue) => {
+    const fontKey = resolveFontKey(fontFamily, fontWeight, catalogue);
+    if (fontKey) {
+        return [
+            `${prefix}-font-family: var(--font-${fontKey}-family);`,
+            `${prefix}-font-weight: var(--font-${fontKey}-weight);`,
+        ];
+    }
+    return [`${prefix}-font-family: ${fontFamily};`, ...(fontWeight ? [`${prefix}-font-weight: ${fontWeight};`] : [])];
+};
+export const metricVariableLines = (prefix, metrics) => [
+    `${prefix}-font-size: ${metrics.fontSize}px;`,
+    ...(typeof metrics.lineHeight === 'number' ? [`${prefix}-line-height: ${metrics.lineHeight}px;`] : []),
+    ...(typeof metrics.letterSpacing === 'number' && metrics.letterSpacing !== 0
+        ? [`${prefix}-letter-spacing: ${metrics.letterSpacing}px;`]
+        : []),
+    ...(typeof metrics.textTransform === 'string' ? [`${prefix}-text-transform: ${metrics.textTransform};`] : []),
+];
+/**
+ * Traduit l'arbre des jetons typographiques en declarations CSS. Chaque feuille est
+ * reconnue a son `fontSize` : au-dessus, ce sont des regroupements dont le nom se
+ * concatene pour former celui de la variable.
+ */
+export const typographyVariableLines = (typography, catalogue, path = []) => {
+    if (!isRecord(typography))
+        return [];
+    if (typeof typography.fontSize !== 'number') {
+        return Object.entries(typography).flatMap(([key, value]) => typographyVariableLines(value, catalogue, [...path, key]));
+    }
+    const prefix = `  --typography-${path.map(sanitizeCSSKey).join('-')}`;
+    return [
+        ...(typeof typography.fontFamily === 'string'
+            ? fontVariableLines(prefix, {
+                fontFamily: typography.fontFamily,
+                fontWeight: typeof typography.fontWeight === 'string' ? typography.fontWeight : '',
+            }, catalogue)
+            : []),
+        ...metricVariableLines(prefix, { ...typography, fontSize: typography.fontSize }),
+    ];
+};

package/dist/helpers/useThemeBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeBuilder.d.ts","sourceRoot":"","sources":["../../src/helpers/useThemeBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKrC,OAAO,EAKL,WAAW,EAKX,OAAO,EAGR,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAgDF,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,GAAG,KAAK,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CA0EnF"}
+{"version":3,"file":"useThemeBuilder.d.ts","sourceRoot":"","sources":["../../src/helpers/useThemeBuilder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAKrC,OAAO,EAKL,WAAW,EAKX,OAAO,EAGR,MAAM,cAAc,CAAC;AAWtB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,GAAG,KAAK,GAAG;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CA6EnF"}

package/dist/helpers/useThemeBuilder.js

@@ -2,53 +2,15 @@ import { useFonts } from 'expo-font';
 import { useCallback, useMemo } from 'react';
 import { Platform, useWindowDimensions } from 'react-native';
 import { breakpointToVariant, Colors, CustomPalette, CustomTypography, Fonts, FontsMap, Grilles, Heights, Sizes, Spacings, } from '../constants';
+import { controlSizesFor } from '../constants/Control';
+import { pillSizeFor } from '../constants/Pill';
 import { RadiusList } from '../constants/Radius';
 import { alpha } from './alphaColor';
+import { toCSSVarPalette } from './cssVarPalette';
+import { toCSSVarTypography } from './cssVarTypography';
 import { deepMerge } from './deepMerge';
 import { elevationStyle } from './elevationStyle';
 import { sanitizeCSSKey } from './sanitizeCSSKey';
-const toCSSVarPalette = (palette) => {
-    if (Platform.OS !== 'web')
-        return palette;
-    const light = palette.light;
-    const webLight = {};
-    Object.entries(light).forEach(([category, tokens]) => {
-        if (typeof tokens !== 'object' || tokens === null) {
-            webLight[category] = tokens;
-            return;
-        }
-        webLight[category] = {};
-        Object.entries(tokens).forEach(([token, value]) => {
-            webLight[category][token] = typeof value === 'string' ? `var(--${category}-${token})` : value;
-        });
-    });
-    return { ...palette, light: webLight };
-};
-const toCSSVarTypography = (node, path = []) => {
-    if (typeof node.fontSize === 'number') {
-        const prefix = path.map(sanitizeCSSKey).join('-');
-        const result = { ...node };
-        result.fontFamily = `var(--typography-${prefix}-font-family)`;
-        result.fontWeight = `var(--typography-${prefix}-font-weight)`;
-        result.fontSize = `var(--typography-${prefix}-font-size)`;
-        result.lineHeight = `var(--typography-${prefix}-line-height)`;
-        if (typeof node.letterSpacing === 'number' && node.letterSpacing !== 0) {
-            result.letterSpacing = `var(--typography-${prefix}-letter-spacing)`;
-        }
-        if (typeof node.textTransform === 'string') {
-            result.textTransform = `var(--typography-${prefix}-text-transform)`;
-        }
-        return result;
-    }
-    const result = {};
-    Object.entries(node).forEach(([key, value]) => {
-        result[key] =
-            typeof value === 'object' && value !== null
-                ? toCSSVarTypography(value, [...path, key])
-                : value;
-    });
-    return result;
-};
 export function useThemeBuilder(params) {
     const { width } = useWindowDimensions();
     // Sur web, les fonts sont chargées via @font-face (generateFontFaceCSS), pas via expo-font,
@@ -56,16 +18,14 @@ export function useThemeBuilder(params) {
     const [loadedFonts] = useFonts(Platform.OS === 'web' ? {} : FontsMap);
     const variant = useMemo(() => breakpointToVariant(width), [width]);
     const rawMergedPalette = useMemo(() => deepMerge(CustomPalette, params.color), [params.color]);
-    const mergedPalette = useMemo(() => toCSSVarPalette(rawMergedPalette), [rawMergedPalette]);
+    const mergedPalette = useMemo(() => (Platform.OS === 'web' ? toCSSVarPalette(rawMergedPalette) : rawMergedPalette), [rawMergedPalette]);
     const isReady = useMemo(() => width != null && variant != null && width > 0 && loadedFonts, [loadedFonts, variant, width]);
     const externalPadding = useCallback(() => Platform.OS === 'web'
         ? `var(--spacing-${sanitizeCSSKey(variant === 'mobile' ? '2W' : '3W')})`
         : variant === 'mobile'
             ? Spacings['2W']
             : Spacings['3W'], [variant]);
-    const webTypography = useMemo(() => Platform.OS === 'web'
-        ? toCSSVarTypography(CustomTypography)
-        : CustomTypography, []);
+    const webTypography = useMemo(() => (Platform.OS === 'web' ? toCSSVarTypography(CustomTypography) : CustomTypography), []);
     return {
         // Spacings
         spacing: key => (Platform.OS === 'web' ? `var(--spacing-${sanitizeCSSKey(key)})` : Spacings[key]),
@@ -73,6 +33,10 @@ export function useThemeBuilder(params) {
         externalPadding,
         // Radius
         radius: key => (Platform.OS === 'web' ? `var(--radius-${key})` : RadiusList[key]),
+        // Dimensions des controles : la densite suit la largeur d'ecran, comme externalPadding
+        control: key => controlSizesFor(variant)[key],
+        // Dimensions des puces : une seule densite, une puce n'etant pas une cible tactile
+        pill: pillSizeFor,
         // Grilles
         grilles: Grilles,
         // Breakpoints

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './constants';
+export * from './helpers/contrastColor';
 export * from './helpers/deepMerge';
 export * from './helpers/grayscaleStyle';
 export * from './helpers/injectVariableCSS';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './constants';
+export * from './helpers/contrastColor';
 export * from './helpers/deepMerge';
 export * from './helpers/grayscaleStyle';
 export * from './helpers/injectVariableCSS';

package/dist/type/Theme.d.ts

@@ -1,4 +1,6 @@
 import type { Colors, CustomTypography, Fonts, Grilles, Palette, Spacing, SpacingKey, Variant } from '../constants';
+import type { ControlSize, ControlSizeKey } from '../constants/Control';
+import type { PillSize, PillSizeKey } from '../constants/Pill';
 import { Radius, RadiusKey } from '../constants/Radius';
 import { alpha } from '../helpers/alphaColor';
 import { elevationStyle } from '../helpers/elevationStyle';
@@ -14,6 +16,8 @@ export interface Theme {
     isVariant: (variant: Variant) => boolean;
     shadows: typeof elevationStyle;
     radius: (key: RadiusKey) => Radius;
+    control: (key: ControlSizeKey) => ControlSize;
+    pill: (key: PillSizeKey) => PillSize;
     grilles: typeof Grilles;
     text: Typography & typeof CustomTypography;
     font: typeof Fonts;

package/dist/type/Theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/type/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACpH,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,KAAK;IAEpB,mHAAmH;IACnH,OAAO,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,MAAM,GAAG,MAAM,CAAC;IAC9C,wHAAwH;IACxH,YAAY,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;IAC3C,mEAAmE;IACnE,eAAe,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC;IAGvC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAGzC,OAAO,EAAE,OAAO,cAAc,CAAC;IAG/B,MAAM,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,MAAM,CAAC;IAGnC,OAAO,EAAE,OAAO,OAAO,CAAC;IAGxB,IAAI,EAAE,UAAU,GAAG,OAAO,gBAAgB,CAAC;IAG3C,IAAI,EAAE,OAAO,KAAK,CAAC;IAGnB,KAAK,EAAE;QACL,sCAAsC;QACtC,UAAU,EAAE,OAAO,MAAM,CAAC;QAC1B,4EAA4E;QAC5E,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC7B,GAAG,OAAO,GAAG;QACV,KAAK,EAAE,OAAO,KAAK,CAAC;KACrB,CAAC;CACL"}
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/type/Theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACpH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,KAAK;IAEpB,mHAAmH;IACnH,OAAO,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,MAAM,GAAG,MAAM,CAAC;IAC9C,wHAAwH;IACxH,YAAY,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;IAC3C,mEAAmE;IACnE,eAAe,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC;IAGvC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC;IAGzC,OAAO,EAAE,OAAO,cAAc,CAAC;IAG/B,MAAM,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,MAAM,CAAC;IAGnC,OAAO,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,WAAW,CAAC;IAG9C,IAAI,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,QAAQ,CAAC;IAGrC,OAAO,EAAE,OAAO,OAAO,CAAC;IAGxB,IAAI,EAAE,UAAU,GAAG,OAAO,gBAAgB,CAAC;IAG3C,IAAI,EAAE,OAAO,KAAK,CAAC;IAGnB,KAAK,EAAE;QACL,sCAAsC;QACtC,UAAU,EAAE,OAAO,MAAM,CAAC;QAC1B,4EAA4E;QAC5E,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;KAC7B,GAAG,OAAO,GAAG;QACV,KAAK,EAAE,OAAO,KAAK,CAAC;KACrB,CAAC;CACL"}

package/package.json

@@ -1,22 +1,19 @@
 {
   "name": "@alveole/theme",
-  "version": "1.10.0",
+  "version": "2.0.0-alpha.1",
   "description": "Shared theme tokens and utilities.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
+    "!dist/.tsbuildinfo",
     "README.md"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
-    "lint": "eslint .",
-    "typecheck": "tsc -p tsconfig.build.json --noEmit"
-  },
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
-    "eslint": "9.39.5",
+    "esbuild": "0.28.2",
+    "eslint": "10.10.0",
     "react": "19.2.3",
     "react-native": "0.86.3"
   },
@@ -31,9 +28,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@expo-google-fonts/barlow": "0.4.1",
-    "@expo-google-fonts/inter": "0.4.2",
-    "@uiw/react-signature": "1.3.5",
-    "react-native-signature-canvas": "5.1.1"
+    "@expo-google-fonts/geist": "0.4.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
+    "lint": "eslint . --cache --cache-strategy content",
+    "test:unit": "jest --coverage --runInBand --ci",
+    "typecheck": "tsc -p tsconfig.typecheck.json --noEmit"
   }
-}
+}