@alveole/theme 0.4.0

package/README.md

@@ -0,0 +1,109 @@
+# @alveole/theme
+
+Thème partagé (tokens, typographies, helpers) pour les apps React Native / web.
+
+## Installation
+
+```bash
+npm i @alveole/theme
+```
+
+Peer deps requis : `react`, `react-native`, `expo-font`, `expo-system-ui`, `@tamagui/core`.
+
+## Utilisation rapide
+
+```tsx
+import { ThemeProvider, useTheme, makeStyles } from '@alveole/theme';
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <Screen />
+    </ThemeProvider>
+  );
+}
+
+function Screen() {
+  const { spacing } = useTheme();
+  return <Box style={{ margin: spacing('100') }}>Contenu</Box>;
+}
+```
+
+## Générer des styles
+
+```tsx
+// Exemple.styles.tsx
+import { makeStyles } from '@alveole/theme';
+
+export const useStyles = makeStyles(({ spacing }) => ({
+  container: { padding: spacing('150') },
+}));
+```
+
+```tsx
+// Exemple.tsx
+import { useStyles } from './Exemple.styles';
+
+function Exemple() {
+  const styles = useStyles();
+  return <Box style={styles.container} />;
+}
+```
+
+## Personnaliser la palette
+
+```tsx
+<ThemeProvider
+  color={{
+    Neutre: { 100: '#F7F7F7' },
+    Mandarine: { 50: '#FFF3EA' },
+  }}
+>
+  <App />
+</ThemeProvider>
+```
+
+> (Recommandé) Vous pouvez définir un fichier de configuration à la racine de votre projet `alveole.config.js` afin de surcharger les tokens du thème.
+
+```js
+const { Colors } = require('@alveole/theme');
+
+/** @type {import('@alveole/theme').Palette} */
+const palette = {
+  primary: Colors.VertPrairie['sun-475'],
+
+  background: {
+    button: {
+      primary: {
+        default: Colors.VertPrairie['sun-475'],
+        hover: Colors.VertPrairie['sun-475-hover'],
+      },
+    },
+  },
+};
+
+module.exports = { palette };
+
+// Utiliser dans le provider :
+// <ThemeProvider color={config.palette}>
+```
+
+## Variables CSS (web)
+
+Sur le web, les variables CSS sont injectées automatiquement si besoin par une lib web.
+
+```css
+/* Spacing */
+var(--spacing-050)
+var(--spacing-150)
+
+/* Colors */
+var(--color-Neutre-200)
+var(--color-Mandarine-50)
+```
+
+## Références
+
+- Typage du thème : `src/type/Theme.ts`
+- Palette : `src/constants/Palette.ts`
+- Typographies : `src/constants/Typography.ts`

package/dist/ThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from 'react';
+import { CustomBuilder } from './helpers/useThemeBuilder';
+import type { Theme } from './type';
+export declare const ThemeProvider: (props: PropsWithChildren<CustomBuilder & {
+    loader?: boolean;
+}>) => import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => Theme;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AACA,OAAc,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,eAAO,MAAM,aAAa,GAAI,OAAO,iBAAiB,CAAC,aAAa,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,4CAuB3F,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,KAI3B,CAAC"}

package/dist/ThemeProvider.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SystemUI from 'expo-system-ui';
+import React, { createContext, useContext } from 'react';
+import { Platform, StatusBar } from 'react-native';
+import { injectVariableCSS } from './helpers/injectVariableCSS';
+import { useThemeBuilder } from './helpers/useThemeBuilder';
+import { ThemeProviderLoader } from './ThemeProviderLoader';
+const ThemeContext = createContext(null);
+const MIN_LOADING_DELAY = 0;
+export const ThemeProvider = (props) => {
+    const { loader = true, ...builder } = props;
+    const theme = useThemeBuilder(builder);
+    const [showLoader, setShowLoader] = React.useState(true);
+    React.useEffect(() => {
+        const timeout = setTimeout(() => setShowLoader(false), MIN_LOADING_DELAY);
+        return () => clearTimeout(timeout);
+    }, []);
+    React.useEffect(() => {
+        void SystemUI.setBackgroundColorAsync('white');
+        if (Platform.OS === 'web')
+            injectVariableCSS(theme);
+    }, []);
+    if ((!theme.isReady || showLoader) && loader !== false)
+        return _jsx(ThemeProviderLoader, {});
+    return (_jsxs(ThemeContext.Provider, { value: theme, children: [_jsx(StatusBar, { barStyle: "dark-content", backgroundColor: "white" }), props.children] }));
+};
+export const useTheme = () => {
+    const ctx = useContext(ThemeContext);
+    if (!ctx)
+        throw new Error('useTheme must be used inside ThemeProvider');
+    return ctx;
+};

package/dist/ThemeProviderLoader.d.ts

@@ -0,0 +1,2 @@
+export declare const ThemeProviderLoader: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProviderLoader.d.ts.map

package/dist/ThemeProviderLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProviderLoader.d.ts","sourceRoot":"","sources":["../src/ThemeProviderLoader.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,+CAM/B,CAAC"}

package/dist/ThemeProviderLoader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActivityIndicator, View } from 'react-native';
+export const ThemeProviderLoader = () => {
+    return (_jsx(View, { style: { flex: 1, justifyContent: 'center', alignItems: 'center' }, children: _jsx(ActivityIndicator, { size: "large" }) }));
+};

package/dist/constants/Breakpoint.d.ts

@@ -0,0 +1,10 @@
+export declare const Breakpoints: {
+    readonly SM: 576;
+    readonly MD: 768;
+    readonly LG: 992;
+    readonly XL: 1248;
+};
+export type BreakpointKey = keyof typeof Breakpoints;
+export type Breakpoint = (typeof Breakpoints)[BreakpointKey];
+export declare const breakpointToVariant: (width: number) => "mobile" | "tablet" | "desktop";
+//# sourceMappingURL=Breakpoint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breakpoint.d.ts","sourceRoot":"","sources":["../../src/constants/Breakpoint.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAGX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,aAAa,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,oCAIhD,CAAC"}

package/dist/constants/Breakpoint.js

@@ -0,0 +1,14 @@
+import { Variants } from './Variant';
+export const Breakpoints = {
+    SM: 576,
+    MD: 768,
+    LG: 992,
+    XL: 1248,
+};
+export const breakpointToVariant = (width) => {
+    if (width < Breakpoints.MD)
+        return Variants.Mobile;
+    if (width >= Breakpoints.LG)
+        return Variants.Desktop;
+    return Variants.Tablet;
+};

package/dist/constants/Color.d.ts

@@ -0,0 +1,357 @@
+export declare const Colors: {
+    readonly VertPrairie: {
+        readonly 50: "#F3FDE7";
+        readonly 100: "#E3FBC8";
+        readonly 200: "#C5F59A";
+        readonly 300: "#9EED61";
+        readonly 400: "#85E23F";
+        readonly 'sun-475-hover': "#28571D";
+        readonly 'sun-475': "#3E7F2E";
+        readonly 'main-646': "#60BB46";
+        readonly 850: "#BEE2B0";
+        readonly 925: "#D7EED0";
+        readonly 950: "#E6F4E1";
+        readonly 975: "#F3FAF1";
+    };
+    readonly Mandarine: {
+        readonly 50: "#FEF9EE";
+        readonly 100: "#FDF2D7";
+        readonly 200: "#FBE0AD";
+        readonly 300: "#F8C979";
+        readonly 400: "#F4A843";
+        readonly 500: "#F19023";
+        readonly 600: "#E27414";
+        readonly 700: "#BB5813";
+        readonly 800: "#954517";
+        readonly 900: "#783B16";
+        readonly 950: "#411C09";
+    };
+    readonly Lilas: {
+        readonly 50: "#F6F5FD";
+        readonly 100: "#EFECFB";
+        readonly 200: "#E0DCF8";
+        readonly 300: "#C9BFF3";
+        readonly 400: "#AD9BEA";
+        readonly 500: "#8C6CDF";
+        readonly 600: "#8053D4";
+        readonly 700: "#7041C0";
+        readonly 800: "#5D36A1";
+        readonly 900: "#4E2E84";
+        readonly 950: "#301C59";
+    };
+    readonly Shakespeare: {
+        readonly 50: "#EEFBFD";
+        readonly 100: "#D3F3FA";
+        readonly 200: "#ADE6F4";
+        readonly 300: "#75D3EB";
+        readonly 400: "#31B5DA";
+        readonly 500: "#1999C1";
+        readonly 600: "#187BA2";
+        readonly 700: "#1A6484";
+        readonly 800: "#1E526C";
+        readonly 900: "#1D465C";
+        readonly 950: "#0E2D3E";
+    };
+    readonly Cerise: {
+        readonly 50: "#FDF2F8";
+        readonly 100: "#FCE7F3";
+        readonly 200: "#FBCFE8";
+        readonly 300: "#FAA7D5";
+        readonly 400: "#F571B7";
+        readonly 500: "#EE469A";
+        readonly 600: "#DA2275";
+        readonly 700: "#C0165E";
+        readonly 800: "#9E164E";
+        readonly 900: "#841744";
+        readonly 950: "#510624";
+    };
+    readonly Pacifika: {
+        readonly 50: "#FFFDE4";
+        readonly 100: "#FFFDC5";
+        readonly 200: "#FFFF92";
+        readonly 300: "#F9FF53";
+        readonly 400: "#EEFB20";
+        readonly 500: "#D1E200";
+        readonly 600: "#A2B500";
+        readonly 700: "#738102";
+        readonly 800: "#5F6B09";
+        readonly 900: "#505A0D";
+        readonly 950: "#2A3300";
+    };
+    readonly GoldenFizz: {
+        readonly 50: "#FFFEE5";
+        readonly 100: "#FEFFC7";
+        readonly 200: "#FCFF95";
+        readonly 300: "#F4FE58";
+        readonly 400: "#E4F40E";
+        readonly 500: "#C9DC06";
+        readonly 600: "#9DB000";
+        readonly 700: "#758506";
+        readonly 800: "#5D690B";
+        readonly 900: "#4D580F";
+        readonly 950: "#293102";
+    };
+    readonly GrisPolaire: {
+        readonly 50: "#F4F6FA";
+        readonly 100: "#E6EBF3";
+        readonly 200: "#D3DBEA";
+        readonly 300: "#B4C3DC";
+        readonly 400: "#90A4CA";
+        readonly 500: "#7589BC";
+        readonly 600: "#6372AD";
+        readonly 700: "#57639E";
+        readonly 800: "#4B5282";
+        readonly 900: "#404668";
+        readonly 950: "#2A2D41";
+    };
+    readonly ButteryWhite: {
+        readonly 50: "#FFFBEA";
+        readonly 100: "#FEF4C7";
+        readonly 200: "#FDE78A";
+        readonly 300: "#FCD54D";
+        readonly 400: "#FBC124";
+        readonly 500: "#F5A00B";
+        readonly 600: "#D97906";
+        readonly 700: "#B45509";
+        readonly 800: "#92410E";
+        readonly 900: "#78360F";
+        readonly 950: "#451B03";
+    };
+    readonly CoralRed: {
+        readonly 50: "#FEF2F2";
+        readonly 100: "#FEE2E2";
+        readonly 200: "#FECACA";
+        readonly 300: "#FCA5A5";
+        readonly 400: "#F77272";
+        readonly 500: "#EF4E4E";
+        readonly 600: "#DB2727";
+        readonly 700: "#B81D1D";
+        readonly 800: "#981C1C";
+        readonly 900: "#7F1D1D";
+        readonly 950: "#450A0A";
+    };
+    readonly Lochmara: {
+        readonly 50: "#F1F8FE";
+        readonly 100: "#E2F1FC";
+        readonly 200: "#BFE2F8";
+        readonly 300: "#87CCF2";
+        readonly 400: "#47B0E9";
+        readonly 500: "#1F97D8";
+        readonly 600: "#1177B6";
+        readonly 700: "#0F5F95";
+        readonly 800: "#11527B";
+        readonly 900: "#144566";
+        readonly 950: "#0D2C44";
+    };
+    readonly BigStone: {
+        readonly 50: "#F2F8FD";
+        readonly 100: "#E4EFFA";
+        readonly 200: "#C2DFF5";
+        readonly 300: "#8CC5ED";
+        readonly 400: "#4EA7E2";
+        readonly 500: "#288CCF";
+        readonly 600: "#196FB0";
+        readonly 700: "#16598E";
+        readonly 800: "#164C76";
+        readonly 900: "#174063";
+        readonly 950: "#102A43";
+    };
+    readonly PinkVivid: {
+        readonly 50: "#FFF5F8";
+        readonly 100: "#FFB8D2";
+        readonly 200: "#FF8CBA";
+        readonly 300: "#F364A2";
+        readonly 400: "#E8368F";
+        readonly 500: "#D9127C";
+        readonly 600: "#BC0A6F";
+        readonly 700: "#A30664";
+        readonly 800: "#870557";
+        readonly 900: "#620042";
+    };
+    readonly LimeGreen: {
+        readonly 50: "#F6FCE9";
+        readonly 100: "#EAF7D0";
+        readonly 200: "#D7F0A6";
+        readonly 300: "#BBE472";
+        readonly 400: "#A1D447";
+        readonly 500: "#7BB026";
+        readonly 600: "#7BB026";
+        readonly 700: "#4D711A";
+        readonly 800: "#3F5A1A";
+        readonly 900: "#374D1A";
+        readonly 950: "#1A2A09";
+    };
+    readonly Purple: {
+        readonly 50: "#EAE2F8";
+        readonly 100: "#CFBCF2";
+        readonly 200: "#A081D9";
+        readonly 300: "#8662C7";
+        readonly 400: "#724BB7";
+        readonly 500: "#653CAD";
+        readonly 600: "#51279B";
+        readonly 700: "#421987";
+        readonly 800: "#34126F";
+        readonly 900: "#240754";
+    };
+    readonly RougeErreur: {
+        readonly 975: "#FEF5F4";
+        readonly 950: "#FDEAE8";
+        readonly 925: "#FCDFDC";
+        readonly 850: "#FAC0BB";
+        readonly 'main-525': "#E62C1C";
+        readonly 425: "#C62416";
+    };
+    readonly Mariner: {
+        readonly 50: "#F1F7FE";
+        readonly 100: "#E2EEFC";
+        readonly 200: "#BEDDF9";
+        readonly 300: "#85C0F4";
+        readonly 400: "#44A0EC";
+        readonly 500: "#1C85DB";
+        readonly 600: "#1070CA";
+        readonly 700: "#0D5297";
+        readonly 800: "#0F477D";
+        readonly 900: "#123C68";
+        readonly 950: "#0C2645";
+    };
+    readonly MountainMeadow: {
+        readonly 50: "#EFFAF4";
+        readonly 100: "#D7F4E1";
+        readonly 200: "#B3E7C9";
+        readonly 300: "#81D4A9";
+        readonly 400: "#47B881";
+        readonly 500: "#2A9F6A";
+        readonly 600: "#1C7F54";
+        readonly 700: "#166645";
+        readonly 800: "#145139";
+        readonly 900: "#114330";
+        readonly 950: "#09251C";
+    };
+    readonly Watusi: {
+        readonly 50: "#FEF5F2";
+        readonly 100: "#FFE9E1";
+        readonly 200: "#FFD6C7";
+        readonly 300: "#FEBBA3";
+        readonly 400: "#FB946E";
+        readonly 500: "#F27041";
+        readonly 600: "#E05522";
+        readonly 700: "#BA461C";
+        readonly 800: "#9B3C19";
+        readonly 900: "#81361B";
+        readonly 950: "#461909";
+    };
+    readonly Sunshade: {
+        readonly 50: "#FDF9E9";
+        readonly 100: "#FBF2C6";
+        readonly 200: "#F9E18F";
+        readonly 300: "#F5C94F";
+        readonly 400: "#F0B429";
+        readonly 500: "#DF9913";
+        readonly 600: "#C1750D";
+        readonly 700: "#9A530E";
+        readonly 800: "#7F4214";
+        readonly 900: "#6D3616";
+        readonly 950: "#3F1B09";
+    };
+    readonly BleuCiel: {
+        readonly 975: "#EDFAFE";
+        readonly 950: "#DBF6FD";
+        readonly 925: "#C5F0FC";
+        readonly 850: "#7CDEF9";
+        readonly 'main-686': "#31B5DA";
+        readonly 525: "#1288A7";
+        readonly 425: "#076D8A";
+        readonly 'sun-335': "#04566D";
+        readonly 200: "#123F4B";
+        readonly 125: "#0B2E38";
+        readonly 100: "#082932";
+        readonly 75: "#072128";
+    };
+    readonly Monza: {
+        readonly 50: "#FFF0F2";
+        readonly 100: "#FFE5E9";
+        readonly 200: "#FFC1C9";
+        readonly 300: "#FF95A2";
+        readonly 400: "#FF596E";
+        readonly 500: "#FF2641";
+        readonly 600: "#FC0624";
+        readonly 700: "#D60019";
+        readonly 800: "#AF051A";
+        readonly 900: "#900C1C";
+        readonly 950: "#50000A";
+    };
+    readonly SlateGrey: {
+        readonly 50: "#F4F8F9";
+        readonly 100: "#EBF2F4";
+        readonly 200: "#DBE7EA";
+        readonly 300: "#C5D6DC";
+        readonly 400: "#ADC2CC";
+        readonly 500: "#98ADBC";
+        readonly 600: "#8197AA";
+        readonly 700: "#66788A";
+        readonly 800: "#5B6B78";
+        readonly 900: "#4D5862";
+        readonly 950: "#2D3339";
+    };
+    readonly Neutre: {
+        readonly 50: "#151617";
+        readonly 75: "#1D1E20";
+        readonly 100: "#232427";
+        readonly 125: "#282A2D";
+        readonly 150: "#2D2F32";
+        readonly 175: "#323439";
+        readonly 200: "#373A3F";
+        readonly 425: "#5F6571";
+        readonly 525: "#747E91";
+        readonly 625: "#8D97AC";
+        readonly 850: "#CED5E1";
+        readonly 900: "#DEE3EC";
+        readonly 925: "#E6EAF1";
+        readonly 950: "#EFF1F6";
+        readonly 975: "#F4F6FA";
+        readonly 1000: "#FFFFFF";
+    };
+    readonly BleuCaptive: {
+        readonly 975: "#F2F9FF";
+        readonly 950: "#E5F1FE";
+        readonly 925: "#D2E8FE";
+        readonly 850: "#B4D9FE";
+        readonly 625: "#2591FE";
+        readonly 'main-525': "#0379EF";
+        readonly 200: "#033B72";
+        readonly 125: "#012B53";
+        readonly 'sun-100': "#012448";
+        readonly 75: "#011E3A";
+    };
+    readonly VertSuccess: {
+        readonly 975: "#EEFBF3";
+        readonly 950: "#B9FDD5";
+        readonly 925: "#87FCB8";
+        readonly 850: "#3EEA86";
+        readonly 625: "#27A65C";
+        readonly 'main-525': "#238C4F";
+        readonly 425: "#1B7440";
+        readonly 200: "#1E412D";
+        readonly 125: "#1B2F23";
+        readonly 100: "#18271E";
+        readonly 75: "#16221B";
+    };
+    readonly LightBlueVivid: {
+        readonly 50: "#F0FBFF";
+        readonly 100: "#D6F3FD";
+        readonly 200: "#A8E4FA";
+        readonly 300: "#79D1F4";
+        readonly 400: "#4ABDE9";
+        readonly 500: "#2FA4DC";
+        readonly 600: "#1177B6";
+        readonly 700: "#0E6398";
+        readonly 800: "#0C507B";
+        readonly 900: "#093E60";
+        readonly 950: "#072C45";
+    };
+};
+export type ColorKey = keyof typeof Colors;
+export type ColorNuance = keyof (typeof Colors)[ColorKey];
+export type ColorItem = (typeof Colors)[ColorKey][ColorNuance];
+export type Color = ColorItem | string;
+//# sourceMappingURL=Color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/constants/Color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+VT,CAAC;AAGX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC;AAC/D,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,MAAM,CAAC"}