@alveole/theme 0.43.3 → 1.0.0

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAGjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAKpC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAChD,aAAa,GAAG;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBA0BtD,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAA6B,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAMpC,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAChD,aAAa,GAAG;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,sBAkCtD,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}

package/dist/ThemeProvider.js

@@ -1,10 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SystemUI from 'expo-system-ui';
 import React, { createContext, useContext } from 'react';
-import { Platform } from 'react-native';
-import { injectFontFaceCSS, injectFontSmoothingCSS, injectVariableCSS } from './helpers/injectVariableCSS';
 import { useThemeBuilder } from './helpers/useThemeBuilder';
 import { ThemeProviderLoader } from './ThemeProviderLoader';
+import { WebThemeStyles } from './WebThemeStyles';
 const ThemeContext = createContext(null);
 const MIN_LOADING_DELAY = 0;
 export const ThemeProvider = (props) => {
@@ -17,19 +16,15 @@ export const ThemeProvider = (props) => {
     }, []);
     React.useEffect(() => {
         void SystemUI.setBackgroundColorAsync('white');
-        if (Platform.OS === 'web') {
-            injectVariableCSS(theme);
-            injectFontSmoothingCSS();
-            injectFontFaceCSS();
-        }
     }, []);
     React.useEffect(() => {
         if (onReady && theme.isReady)
             onReady();
     }, [onReady, theme.isReady]);
-    if ((!theme.isReady || showLoader) && loader !== false)
-        return _jsx(ThemeProviderLoader, {});
-    return _jsx(ThemeContext.Provider, { value: theme, children: props.children });
+    if ((!theme.isReady || showLoader) && loader !== false) {
+        return (_jsxs(_Fragment, { children: [_jsx(WebThemeStyles, { theme: theme }), _jsx(ThemeProviderLoader, {})] }));
+    }
+    return (_jsxs(ThemeContext.Provider, { value: theme, children: [_jsx(WebThemeStyles, { theme: theme }), props.children] }));
 };
 export const useTheme = () => {
     const ctx = useContext(ThemeContext);

package/dist/WebThemeStyles.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from './type';
+export declare function WebThemeStyles(_: {
+    theme: Theme;
+}): null;
+//# sourceMappingURL=WebThemeStyles.d.ts.map

package/dist/WebThemeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebThemeStyles.d.ts","sourceRoot":"","sources":["../src/WebThemeStyles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAGpC,wBAAgB,cAAc,CAAC,CAAC,EAAE;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,QAEjD"}

package/dist/WebThemeStyles.js

@@ -0,0 +1,4 @@
+// Stub natif — les styles CSS sont injectés via useEffect dans ThemeProvider sur native
+export function WebThemeStyles(_) {
+    return null;
+}

package/dist/WebThemeStyles.web.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from './type';
+export declare function WebThemeStyles({ theme }: {
+    theme: Theme;
+}): import("react").JSX.Element;
+//# sourceMappingURL=WebThemeStyles.web.d.ts.map

package/dist/WebThemeStyles.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebThemeStyles.web.d.ts","sourceRoot":"","sources":["../src/WebThemeStyles.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAKpC,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,+BAUzD"}

package/dist/WebThemeStyles.web.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { generateCSSVariables, generateFontFaceCSS, generateFontSmoothingCSS } from './helpers/injectVariableCSS';
+const fontFaceCSS = generateFontFaceCSS();
+const fontSmoothingCSS = generateFontSmoothingCSS();
+export function WebThemeStyles({ theme }) {
+    const cssVariables = useMemo(() => generateCSSVariables(theme), [theme]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { precedence: "default", dangerouslySetInnerHTML: { __html: cssVariables } }), _jsx("style", { precedence: "default", dangerouslySetInnerHTML: { __html: fontFaceCSS } }), _jsx("style", { precedence: "default", dangerouslySetInnerHTML: { __html: fontSmoothingCSS } })] }));
+}

package/dist/constants/Palette.d.ts

@@ -395,6 +395,9 @@ export declare const CustomPalette: {
 export type LeafStrings<T> = T extends string ? string : {
     [K in keyof T]: LeafStrings<T[K]>;
 };
+export type LeafFlexible<T> = T extends string ? string : T extends number ? number | string : {
+    [K in keyof T]: LeafFlexible<T[K]>;
+};
 export type Palette = LeafStrings<typeof CustomPalette>;
 export type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];

package/dist/constants/Palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Palette.d.ts","sourceRoot":"","sources":["../../src/constants/Palette.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Palette.d.ts","sourceRoot":"","sources":["../../src/constants/Palette.ts"],"names":[],"mappings":"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"}

package/dist/constants/Typography.d.ts

@@ -90,40 +90,40 @@ export declare const CustomTypography: {
     };
     readonly 'Corps de texte': {
         readonly XS: {
-            readonly CapsBold: {
+            readonly Regular: {
                 readonly fontSize: 12;
                 readonly lineHeight: 20;
                 readonly letterSpacing: 0;
-                readonly textTransform: "uppercase";
+                readonly fontFamily: string;
+                readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
             };
-            readonly SemiBold: {
+            readonly Bold: {
                 readonly fontSize: 12;
                 readonly lineHeight: 20;
                 readonly letterSpacing: 0;
                 readonly fontFamily: string;
                 readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
             };
-            readonly fontFamily: string;
-            readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
-            readonly Regular: {
+            readonly Caps: {
                 readonly fontSize: 12;
                 readonly lineHeight: 20;
                 readonly letterSpacing: 0;
+                readonly textTransform: "uppercase";
                 readonly fontFamily: string;
                 readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
             };
-            readonly Bold: {
+            readonly CapsBold: {
                 readonly fontSize: 12;
                 readonly lineHeight: 20;
                 readonly letterSpacing: 0;
+                readonly textTransform: "uppercase";
                 readonly fontFamily: string;
                 readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
             };
-            readonly Caps: {
+            readonly SemiBold: {
                 readonly fontSize: 12;
                 readonly lineHeight: 20;
                 readonly letterSpacing: 0;
-                readonly textTransform: "uppercase";
                 readonly fontFamily: string;
                 readonly fontWeight?: import("react-native").TextStyle["fontWeight"];
             };

package/dist/constants/Typography.js

@@ -101,8 +101,8 @@ export const CustomTypography = {
                 letterSpacing: 0,
                 textTransform: 'uppercase',
             },
-            ...fontStyle('Inter-Bold'),
             CapsBold: {
+                ...fontStyle('Inter-Bold'),
                 fontSize: 12,
                 lineHeight: 20,
                 letterSpacing: 0,

package/dist/helpers/alphaColor.d.ts

@@ -1,12 +1,5 @@
 import { Color } from '../constants';
 type Between0And1 = number;
-type RGBAColor = `rgba${string}`;
-/**
- * Génère une couleur avec de l’opacité à partir d’une valeur hexadecimal
- * @param hexadecimalColor - La couleur hexadecimal (Issue du thème ou string)
- * @param opacity - Entre 0 et 1
- * @returns La valeur rgba, par exemple: 'rgba(235, 220, 200, 0.5)'
- */
-export declare const alpha: (hexadecimalColor: Color, opacity: Between0And1) => RGBAColor;
+export declare const alpha: (hexadecimalColor: Color, opacity: Between0And1) => string;
 export {};
 //# sourceMappingURL=alphaColor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"alphaColor.d.ts","sourceRoot":"","sources":["../../src/helpers/alphaColor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,KAAK,YAAY,GAAG,MAAM,CAAC;AAC3B,KAAK,SAAS,GAAG,OAAO,MAAM,EAAE,CAAC;AAEjC;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,kBAAkB,KAAK,EAAE,SAAS,YAAY,KAAG,SAYtE,CAAC"}
+{"version":3,"file":"alphaColor.d.ts","sourceRoot":"","sources":["../../src/helpers/alphaColor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,KAAK,YAAY,GAAG,MAAM,CAAC;AAE3B,eAAO,MAAM,KAAK,GAAI,kBAAkB,KAAK,EAAE,SAAS,YAAY,KAAG,MAetE,CAAC"}

package/dist/helpers/alphaColor.js

@@ -1,10 +1,7 @@
-/**
- * Génère une couleur avec de l’opacité à partir d’une valeur hexadecimal
- * @param hexadecimalColor - La couleur hexadecimal (Issue du thème ou string)
- * @param opacity - Entre 0 et 1
- * @returns La valeur rgba, par exemple: 'rgba(235, 220, 200, 0.5)'
- */
 export const alpha = (hexadecimalColor, opacity) => {
+    if (hexadecimalColor.startsWith('var(')) {
+        return `color-mix(in srgb, ${hexadecimalColor} ${Math.round(opacity * 100)}%, transparent)`;
+    }
     hexadecimalColor = hexadecimalColor.replace(/^#/, '');
     if (hexadecimalColor.length === 3)
         hexadecimalColor = hexadecimalColor

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

@@ -1 +1 @@
-{"version":3,"file":"elevationStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/elevationStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAc,MAAM,cAAc,CAAC;AAKxD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,YAAY;;;;;;;;;;;aAKjD,CAAC"}
+{"version":3,"file":"elevationStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/elevationStyle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAc,MAAM,cAAc,CAAC;AAKxD;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,YAAY;;;;;;;;;;;aAIjD,CAAC"}

package/dist/helpers/elevationStyle.js

@@ -7,10 +7,9 @@ const isElevationKey = (key) => Object.prototype.hasOwnProperty.call(Elevations,
  * @returns
  */
 export const elevationStyle = (level) => {
-    const value = isElevationKey(level) ? Elevations[level] : undefined;
-    if (value == null)
+    if (!isElevationKey(level))
         return;
     if (Platform.OS === 'web')
-        return { boxShadow: value.web };
-    return value.mobile;
+        return { boxShadow: `var(--elevation-${level})` };
+    return Elevations[level].mobile;
 };

package/dist/helpers/injectVariableCSS.d.ts

@@ -1,5 +1,9 @@
 import { Theme } from '../type';
+export declare const generateCSSVariables: (theme: Theme) => string;
 export declare const injectFontFaceCSS: () => void;
 export declare const injectFontSmoothingCSS: () => void;
 export declare const injectVariableCSS: (theme: Theme) => void;
+export declare const generateFontFaceCSS: () => string;
+export declare const generateFontSmoothingCSS: () => string;
+export declare const generateDefaultThemeCSS: () => string;
 //# 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":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAoBhC,eAAO,MAAM,iBAAiB,YAiB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,YAYlC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,SAY7C,CAAC"}
+{"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,MA2DnD,CAAC;AA8CF,eAAO,MAAM,iBAAiB,YAiB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,YAYlC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,SAY7C,CAAC;AAEF,eAAO,MAAM,mBAAmB,QAAO,MAMxB,CAAC;AAEhB,eAAO,MAAM,wBAAwB,QAAO,MAC6E,CAAC;AAE1H,eAAO,MAAM,uBAAuB,QAAO,MAO9B,CAAC"}

package/dist/helpers/injectVariableCSS.js

@@ -1,8 +1,34 @@
-import { Spacings } from '../constants';
+import { Colors, CustomPalette, Spacings } from '../constants';
+import { Elevations } from '../constants/Elevation';
 import { FontWeightMap, FontsMap } from '../constants/Font';
-const generateCSSVariables = (theme) => {
+import { RadiusList } from '../constants/Radius';
+import { CustomTypography } from '../constants/Typography';
+import { sanitizeCSSKey } from './sanitizeCSSKey';
+const buildColorVarMap = (constants) => {
+    const map = new Map();
+    Object.entries(constants).forEach(([name, shades]) => {
+        Object.entries(shades).forEach(([variant, value]) => {
+            if (typeof value === 'string') {
+                map.set(value, `--color-${name}-${variant}`);
+            }
+        });
+    });
+    return map;
+};
+const generateSemanticTokenLines = (category, tokens, colorVarMap) => {
+    const lines = [];
+    Object.entries(tokens).forEach(([token, value]) => {
+        if (typeof value !== 'string')
+            return;
+        const varRef = colorVarMap.get(value);
+        lines.push(`  --${category}-${token}: ${varRef ? `var(${varRef})` : value};`);
+    });
+    return lines;
+};
+export const generateCSSVariables = (theme) => {
     const lines = [];
-    // Couleurs
+    const colorVarMap = buildColorVarMap(theme.color._constants);
+    // Couleurs palette
     Object.entries(theme.color._constants).forEach(([key, colors]) => {
         Object.entries(colors).forEach(([variant, value]) => {
             lines.push(`  --color-${key}-${variant}: ${value};`);
@@ -10,9 +36,81 @@ const generateCSSVariables = (theme) => {
     });
     // Spacing
     Object.entries(Spacings).forEach(([key, value]) => {
-        lines.push(`  --spacing-${key}: ${value}px;`);
+        lines.push(`  --spacing-${sanitizeCSSKey(key)}: ${value}px;`);
+    });
+    // Radius
+    Object.entries(RadiusList).forEach(([key, value]) => {
+        lines.push(`  --radius-${key}: ${value}px;`);
+    });
+    // Elevations
+    Object.entries(Elevations).forEach(([key, value]) => {
+        lines.push(`  --elevation-${key}: ${value.web};`);
+    });
+    // Font base variables + reverse map pour les tokens typographiques
+    const fontReverseMap = new Map();
+    Object.entries(FontWeightMap).forEach(([key, { familyWithFallback, weight }]) => {
+        fontReverseMap.set(`${familyWithFallback}__${weight}`, key);
+        lines.push(`  --font-${key}-family: ${familyWithFallback};`);
+        lines.push(`  --font-${key}-weight: ${weight};`);
+    });
+    // Semantic tokens typographiques (--typography-{...}-font-size, etc.)
+    collectTypographyLines([], CustomTypography, fontReverseMap, lines);
+    // Semantic tokens light (--{category}-{token}: var(--color-...))
+    const light = theme.color._rawLight;
+    Object.entries(light).forEach(([category, tokens]) => {
+        if (typeof tokens !== 'object' || tokens === null)
+            return;
+        lines.push(...generateSemanticTokenLines(category, tokens, colorVarMap));
+    });
+    const rootBlock = `:root {\n${lines.join('\n')}\n}`;
+    // Overrides dark mode
+    const darkLines = [];
+    const dark = theme.color.dark;
+    Object.entries(dark).forEach(([category, tokens]) => {
+        if (typeof tokens !== 'object' || tokens === null)
+            return;
+        darkLines.push(...generateSemanticTokenLines(category, tokens, colorVarMap));
+    });
+    if (darkLines.length === 0)
+        return rootBlock;
+    const darkBlock = `@media (prefers-color-scheme: dark) {\n  :root {\n${darkLines.map(l => '  ' + l).join('\n')}\n  }\n}`;
+    return `${rootBlock}\n\n${darkBlock}`;
+};
+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);
     });
-    return `:root {\n${lines.join('\n')}\n}`;
 };
 export const injectFontFaceCSS = () => {
     if (typeof document === 'undefined')
@@ -55,3 +153,17 @@ export const injectVariableCSS = (theme) => {
     styleTag.innerHTML = generateCSSVariables(theme);
     document.head.appendChild(styleTag);
 };
+export const generateFontFaceCSS = () => Object.entries(FontsMap)
+    .map(([key, src]) => {
+    const { family, weight } = FontWeightMap[key];
+    return `@font-face {\n  font-family: '${family}';\n  src: url('${src}') format('truetype');\n  font-weight: ${weight};\n  font-style: normal;\n}`;
+})
+    .join('\n');
+export const generateFontSmoothingCSS = () => 'body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }';
+export const generateDefaultThemeCSS = () => generateCSSVariables({
+    color: {
+        _constants: Colors,
+        _rawLight: CustomPalette.light,
+        dark: CustomPalette.dark,
+    },
+});

package/dist/helpers/sanitizeCSSKey.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sanitizeCSSKey.d.ts","sourceRoot":"","sources":["../../src/helpers/sanitizeCSSKey.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,MAInB,CAAC"}

package/dist/helpers/sanitizeCSSKey.js

@@ -0,0 +1,4 @@
+export const sanitizeCSSKey = (key) => key
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '');

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;AAMtB,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,CAkDnF"}
+{"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,EAIR,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,CAuEnF"}

package/dist/helpers/useThemeBuilder.js

@@ -1,36 +1,87 @@
 import { useFonts } from 'expo-font';
 import { useCallback, useMemo } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { Platform, useWindowDimensions } from 'react-native';
 import { breakpointToVariant, Colors, CustomPalette, CustomTypography, Fonts, FontsMap, Grilles, Heights, Sizes, Spacings, } from '../constants';
 import { RadiusList } from '../constants/Radius';
 import { alpha } from './alphaColor';
 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();
     const [loadedFonts] = useFonts(FontsMap);
     const variant = useMemo(() => breakpointToVariant(width), [width]);
-    const mergedPalette = useMemo(() => deepMerge(CustomPalette, params.color), [params.color]);
+    const rawMergedPalette = useMemo(() => deepMerge(CustomPalette, params.color), [params.color]);
+    const mergedPalette = useMemo(() => toCSSVarPalette(rawMergedPalette), [rawMergedPalette]);
     const isReady = useMemo(() => width != null && variant != null && width > 0 && loadedFonts, [loadedFonts, variant, width]);
-    const externalPadding = useCallback(() => (variant === 'mobile' ? Spacings['2W'] : Spacings['3W']), [variant]);
+    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, []);
     return {
         // Spacings
-        spacing: key => Spacings[key],
+        spacing: key => (Platform.OS === 'web' ? `var(--spacing-${sanitizeCSSKey(key)})` : Spacings[key]),
         externalPadding,
         // Radius
-        radius: key => RadiusList[key],
+        radius: key => (Platform.OS === 'web' ? `var(--radius-${key})` : RadiusList[key]),
         // Grilles
         grilles: Grilles,
         // Breakpoints
         variant,
         isVariant: useCallback(match => variant === match, [variant]),
         // Colors
-        color: { _constants: Colors, alpha, ...mergedPalette },
+        color: { _constants: Colors, _rawLight: rawMergedPalette.light, alpha, ...mergedPalette },
         // Shadows
         shadows: elevationStyle,
         // Typographies
         text: {
-            ...CustomTypography,
+            ...webTypography,
             fontSize: Sizes,
             lineHeight: Heights,
         },

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './helpers/deepMerge';
+export * from './helpers/injectVariableCSS';
 export * from './helpers/isSpacingKey';
 export * from './helpers/makeStyles';
 export * from './ThemeProvider';

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,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,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,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC"}

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './helpers/deepMerge';
+export * from './helpers/injectVariableCSS';
 export * from './helpers/isSpacingKey';
 export * from './helpers/makeStyles';
 export * from './ThemeProvider';

package/dist/type/Theme.d.ts

@@ -1,4 +1,4 @@
-import type { Colors, CustomPalette, CustomTypography, Fonts, Grilles, Spacing, SpacingKey, Variant } from '../constants';
+import type { Colors, CustomTypography, Fonts, Grilles, Palette, Spacing, SpacingKey, Variant } from '../constants';
 import { Radius, RadiusKey } from '../constants/Radius';
 import { alpha } from '../helpers/alphaColor';
 import { elevationStyle } from '../helpers/elevationStyle';
@@ -17,7 +17,9 @@ export interface Theme {
     color: {
         /** @deprecated Utiliser la palette */
         _constants: typeof Colors;
-    } & typeof CustomPalette & {
+        /** Palette light avec valeurs hex brutes, utilisée par injectVariableCSS */
+        _rawLight: Palette['light'];
+    } & Palette & {
         alpha: typeof alpha;
     };
 }

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,EACV,MAAM,EACN,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,OAAO,EACR,MAAM,cAAc,CAAC;AACtB,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,OAAO,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;IACtC,mEAAmE;IACnE,eAAe,EAAE,MAAM,OAAO,CAAC;IAG/B,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;KAC3B,GAAG,OAAO,aAAa,GAAG;QACvB,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,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,OAAO,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,OAAO,CAAC;IACtC,mEAAmE;IACnE,eAAe,EAAE,MAAM,OAAO,CAAC;IAG/B,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alveole/theme",
-  "version": "0.43.3",
+  "version": "1.0.0",
   "description": "Shared theme tokens and utilities.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,7 +17,9 @@
   },
   "devDependencies": {
     "@alveole/eslint-config": "file:../eslint-config",
-    "eslint": "^9.39.2"
+    "eslint": "9.39.4",
+    "react": "19.2.3",
+    "react-native": "0.85.3"
   },
   "peerDependencies": {
     "@tamagui/core": "*",
@@ -30,7 +32,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@uiw/react-signature": "^1.3.5",
-    "react-native-signature-canvas": "^5.0.2"
+    "@uiw/react-signature": "1.3.5",
+    "react-native-signature-canvas": "5.1.0"
   }
 }