@alveole/theme 1.10.0 → 2.0.0-alpha.1

package/README.md

@@ -87,32 +87,32 @@ Les styles de texte sont organisés en trois catégories :
 ```tsx
 const { text } = useTheme();
 
-// Titres alternatifs (Barlow Bold)
+// Titres alternatifs (Geist SemiBold)
 text['Titres alternatifs'].XS; // 48px
 text['Titres alternatifs'].XL; // 80px
 
-// Titres (Inter Bold — tailles adaptées mobile/desktop)
-text.Titres['H1 - XL']; // Barlow SemiBold, 40px desktop / 32px mobile
+// Titres (Geist SemiBold — tailles adaptées mobile/desktop)
+text.Titres['H1 - XL']; // Geist SemiBold, 40px desktop / 32px mobile
 text.Titres['H3 - MD']; // 28px desktop / 24px mobile
 text.Titres['H6 - XXS']; // 20px desktop / 18px mobile
 
 // Corps de texte
-text['Corps de texte'].SM.Regular; // Inter Regular, 14px
-text['Corps de texte'].MD.SemiBold; // Inter SemiBold, 16px
-text['Corps de texte'].LG.Medium; // Inter Medium, 18px
+text['Corps de texte'].SM.Regular; // Geist Regular, 14px
+text['Corps de texte'].MD.SemiBold; // Geist SemiBold, 16px
+text['Corps de texte'].LG.Medium; // Geist Medium, 18px
 ```
 
 ## Fonts
 
-Les fonts sont chargées automatiquement par `ThemeProvider`. Deux familles sont disponibles : **Inter** (corps de texte) et **Barlow** (titres).
+Les fonts sont chargées automatiquement par `ThemeProvider`. Une seule famille est utilisée : **Geist** (titres et corps de texte).
 
-Sur le web, les fonts sont injectées via des `@font-face` CSS standards (`font-family: Inter; font-weight: 500`). Sur native, elles utilisent le système expo-font.
+Sur le web, les fonts sont injectées via des `@font-face` CSS standards (`font-family: Geist; font-weight: 500`). Sur native, elles utilisent le système expo-font.
 
 ```tsx
 const { font } = useTheme();
 
-font['Inter-Regular']; // 'Inter-Regular' (native) ou utilisé via font-weight (web)
-font['Barlow-Bold'];
+font['Geist-Regular']; // 'Geist-Regular' (native) ou utilisé via font-weight (web)
+font['Geist-Bold'];
 ```
 
 ### fontStyle helper
@@ -123,8 +123,8 @@ Pour créer des styles typés avec la bonne font selon la plateforme :
 import { fontStyle } from '@alveole/theme';
 
 const style = {
-  ...fontStyle('Inter-Bold'), // { fontFamily: 'Inter', fontWeight: '600' } sur web
-  fontSize: 16, // { fontFamily: 'Inter-Bold' } sur native
+  ...fontStyle('Geist-Bold'), // { fontFamily: 'Geist', fontWeight: '600' } sur web
+  fontSize: 16, // { fontFamily: 'Geist-Bold' } sur native
 };
 ```
 
@@ -160,7 +160,7 @@ isVariant('mobile'); // boolean
 const { color } = useTheme();
 
 color.Neutre[700];
-color.Mandarine[50];
+color.Watusi[50];
 color.alpha(color.Neutre[900], 0.5); // 'rgba(55, 58, 63, 0.5)'
 ```
 
@@ -170,7 +170,7 @@ color.alpha(color.Neutre[900], 0.5); // 'rgba(55, 58, 63, 0.5)'
 <ThemeProvider
   color={{
     Neutre: { 100: '#F7F7F7' },
-    Mandarine: { 50: '#FFF3EA' },
+    Watusi: { 50: '#FEF5F2' },
   }}
 >
   <App />
@@ -214,7 +214,7 @@ var(--spacing-3W)
 
 /* Colors */
 var(--color-Neutre-200)
-var(--color-Mandarine-50)
+var(--color-Watusi-50)
 ```
 
 ## Références

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

@@ -1 +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"}
+{"version":3,"file":"WebThemeStyles.web.d.ts","sourceRoot":"","sources":["../src/WebThemeStyles.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEpC,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,KAAK,CAAA;CAAE,+BAWzD"}

package/dist/WebThemeStyles.web.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { generateCSSVariables, generateFontFaceCSS, generateFontSmoothingCSS } from './helpers/injectVariableCSS';
-const fontFaceCSS = generateFontFaceCSS();
-const fontSmoothingCSS = generateFontSmoothingCSS();
+import { generateThemeCSSParts } from './helpers/injectVariableCSS';
 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 } })] }));
+    const parts = useMemo(() => generateThemeCSSParts(theme), [theme]);
+    return (_jsx(_Fragment, { children: parts.map((css, index) => (_jsx("style", { precedence: "default", dangerouslySetInnerHTML: { __html: css } }, index))) }));
 }

package/dist/constants/Color.d.ts

@@ -19,19 +19,6 @@ export declare const Colors: {
         readonly 'sun-475': "#3E7F2E";
         readonly 'sun-475-hover': "#28571D";
     };
-    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";
@@ -45,19 +32,6 @@ export declare const Colors: {
         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";
@@ -71,19 +45,6 @@ export declare const Colors: {
         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";
@@ -110,58 +71,6 @@ export declare const Colors: {
         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";
@@ -174,31 +83,6 @@ export declare const Colors: {
         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 Focus: {
         readonly 525: "#0A76F6";
     };

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

@@ -1 +1 @@
-{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/constants/Color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;QAEf,kBAAkB;;;;;;QAMlB,kBAAkB;;QAElB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA6TlB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkClB,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CzB,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"}
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../src/constants/Color.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;QAEf,kBAAkB;;;;;;QAMlB,kBAAkB;;QAElB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyMlB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;QAElB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkClB,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CzB,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"}

package/dist/constants/Color.js

@@ -19,19 +19,6 @@ export const Colors = {
         'sun-475': '#3E7F2E',
         'sun-475-hover': '#28571D',
     },
-    Mandarine: {
-        50: '#FEF9EE',
-        100: '#FDF2D7',
-        200: '#FBE0AD',
-        300: '#F8C979',
-        400: '#F4A843',
-        500: '#F19023',
-        600: '#E27414',
-        700: '#BB5813',
-        800: '#954517',
-        900: '#783B16',
-        950: '#411C09',
-    },
     Lilas: {
         50: '#F6F5FD',
         100: '#EFECFB',
@@ -45,19 +32,6 @@ export const Colors = {
         900: '#4E2E84',
         950: '#301C59',
     },
-    Shakespeare: {
-        50: '#EEFBFD',
-        100: '#D3F3FA',
-        200: '#ADE6F4',
-        300: '#75D3EB',
-        400: '#31B5DA',
-        500: '#1999C1',
-        600: '#187BA2',
-        700: '#1A6484',
-        800: '#1E526C',
-        900: '#1D465C',
-        950: '#0E2D3E',
-    },
     Cerise: {
         50: '#FDF2F8',
         100: '#FCE7F3',
@@ -71,19 +45,6 @@ export const Colors = {
         900: '#841744',
         950: '#510624',
     },
-    Pacifika: {
-        50: '#FFFDE4',
-        100: '#FFFDC5',
-        200: '#FFFF92',
-        300: '#F9FF53',
-        400: '#EEFB20',
-        500: '#D1E200',
-        600: '#A2B500',
-        700: '#738102',
-        800: '#5F6B09',
-        900: '#505A0D',
-        950: '#2A3300',
-    },
     GoldenFizz: {
         50: '#FFFEE5',
         100: '#FEFFC7',
@@ -110,58 +71,6 @@ export const Colors = {
         900: '#404668',
         950: '#2A2D41',
     },
-    ButteryWhite: {
-        50: '#FFFBEA',
-        100: '#FEF4C7',
-        200: '#FDE78A',
-        300: '#FCD54D',
-        400: '#FBC124',
-        500: '#F5A00B',
-        600: '#D97906',
-        700: '#B45509',
-        800: '#92410E',
-        900: '#78360F',
-        950: '#451B03',
-    },
-    CoralRed: {
-        50: '#FEF2F2',
-        100: '#FEE2E2',
-        200: '#FECACA',
-        300: '#FCA5A5',
-        400: '#F77272',
-        500: '#EF4E4E',
-        600: '#DB2727',
-        700: '#B81D1D',
-        800: '#981C1C',
-        900: '#7F1D1D',
-        950: '#450A0A',
-    },
-    Lochmara: {
-        50: '#F1F8FE',
-        100: '#E2F1FC',
-        200: '#BFE2F8',
-        300: '#87CCF2',
-        400: '#47B0E9',
-        500: '#1F97D8',
-        600: '#1177B6',
-        700: '#0F5F95',
-        800: '#11527B',
-        900: '#144566',
-        950: '#0D2C44',
-    },
-    BigStone: {
-        50: '#F2F8FD',
-        100: '#E4EFFA',
-        200: '#C2DFF5',
-        300: '#8CC5ED',
-        400: '#4EA7E2',
-        500: '#288CCF',
-        600: '#196FB0',
-        700: '#16598E',
-        800: '#164C76',
-        900: '#174063',
-        950: '#102A43',
-    },
     PinkVivid: {
         50: '#FFF5F8',
         100: '#FFB8D2',
@@ -174,31 +83,6 @@ export const Colors = {
         800: '#870557',
         900: '#620042',
     },
-    LimeGreen: {
-        50: '#F6FCE9',
-        100: '#EAF7D0',
-        200: '#D7F0A6',
-        300: '#BBE472',
-        400: '#A1D447',
-        500: '#7BB026',
-        600: '#7BB026',
-        700: '#4D711A',
-        800: '#3F5A1A',
-        900: '#374D1A',
-        950: '#1A2A09',
-    },
-    Purple: {
-        50: '#EAE2F8',
-        100: '#CFBCF2',
-        200: '#A081D9',
-        300: '#8662C7',
-        400: '#724BB7',
-        500: '#653CAD',
-        600: '#51279B',
-        700: '#421987',
-        800: '#34126F',
-        900: '#240754',
-    },
     Focus: {
         525: '#0A76F6',
     },

package/dist/constants/Control.d.ts

@@ -0,0 +1,105 @@
+import type { Variant } from './Variant';
+/**
+ * Dimensions partagees par tous les controles (bouton, champ, selecteur, puce).
+ *
+ * Elles sont fixees ici plutot que derivees d'un padding et d'une hauteur de ligne :
+ * c'est ce qui garantit qu'un bouton et un champ places cote a cote s'alignent.
+ *
+ * Deux echelles plutot qu'une (ADR 0013) : les outils professionnels sont compacts,
+ * l'usage au doigt demande de la place. `tablet` se range avec `mobile`, un iPad etant
+ * tactile. L'echelle desktop suit les primitives de Primer.
+ */
+declare const DESKTOP: {
+    readonly xs: {
+        readonly height: 24;
+        readonly paddingInline: 8;
+        readonly gap: 4;
+    };
+    readonly sm: {
+        readonly height: 28;
+        readonly paddingInline: 8;
+        readonly gap: 8;
+    };
+    readonly md: {
+        readonly height: 32;
+        readonly paddingInline: 12;
+        readonly gap: 8;
+    };
+    readonly lg: {
+        readonly height: 40;
+        readonly paddingInline: 16;
+        readonly gap: 8;
+    };
+    readonly xl: {
+        readonly height: 48;
+        readonly paddingInline: 16;
+        readonly gap: 8;
+    };
+};
+export declare const ControlSizes: {
+    readonly desktop: {
+        readonly xs: {
+            readonly height: 24;
+            readonly paddingInline: 8;
+            readonly gap: 4;
+        };
+        readonly sm: {
+            readonly height: 28;
+            readonly paddingInline: 8;
+            readonly gap: 8;
+        };
+        readonly md: {
+            readonly height: 32;
+            readonly paddingInline: 12;
+            readonly gap: 8;
+        };
+        readonly lg: {
+            readonly height: 40;
+            readonly paddingInline: 16;
+            readonly gap: 8;
+        };
+        readonly xl: {
+            readonly height: 48;
+            readonly paddingInline: 16;
+            readonly gap: 8;
+        };
+    };
+    readonly mobile: {
+        readonly xs: {
+            readonly height: 28;
+            readonly paddingInline: 8;
+            readonly gap: 8;
+        };
+        readonly sm: {
+            readonly height: 32;
+            readonly paddingInline: 12;
+            readonly gap: 8;
+        };
+        readonly md: {
+            readonly height: 40;
+            readonly paddingInline: 16;
+            readonly gap: 8;
+        };
+        readonly lg: {
+            readonly height: 48;
+            readonly paddingInline: 24;
+            readonly gap: 8;
+        };
+        readonly xl: {
+            readonly height: 56;
+            readonly paddingInline: 24;
+            readonly gap: 8;
+        };
+    };
+};
+export type ControlDensite = keyof typeof ControlSizes;
+export type ControlSize = {
+    height: number;
+    paddingInline: number;
+    gap: number;
+};
+export type ControlSizeKey = keyof typeof DESKTOP;
+/** Une tablette est tactile : elle suit la densite mobile, jamais celle du desktop. */
+export declare const controlSizesFor: (variant: Variant) => Record<ControlSizeKey, ControlSize>;
+export {};
+//# sourceMappingURL=Control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/constants/Control.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC;;;;;;;;;GASG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;CAMH,CAAC;AAWX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAgD,CAAC;AAE1E,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,YAAY,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AACjF,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,OAAO,CAAC;AAElD,uFAAuF;AACvF,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,KAAG,MAAM,CAAC,cAAc,EAAE,WAAW,CACjB,CAAC"}

package/dist/constants/Control.js

@@ -0,0 +1,28 @@
+/**
+ * Dimensions partagees par tous les controles (bouton, champ, selecteur, puce).
+ *
+ * Elles sont fixees ici plutot que derivees d'un padding et d'une hauteur de ligne :
+ * c'est ce qui garantit qu'un bouton et un champ places cote a cote s'alignent.
+ *
+ * Deux echelles plutot qu'une (ADR 0013) : les outils professionnels sont compacts,
+ * l'usage au doigt demande de la place. `tablet` se range avec `mobile`, un iPad etant
+ * tactile. L'echelle desktop suit les primitives de Primer.
+ */
+const DESKTOP = {
+    xs: { height: 24, paddingInline: 8, gap: 4 },
+    sm: { height: 28, paddingInline: 8, gap: 8 },
+    md: { height: 32, paddingInline: 12, gap: 8 },
+    lg: { height: 40, paddingInline: 16, gap: 8 },
+    xl: { height: 48, paddingInline: 16, gap: 8 },
+};
+/** Reprend les hauteurs actuelles du kit : aucune rupture visuelle sur telephone. */
+const MOBILE = {
+    xs: { height: 28, paddingInline: 8, gap: 8 },
+    sm: { height: 32, paddingInline: 12, gap: 8 },
+    md: { height: 40, paddingInline: 16, gap: 8 },
+    lg: { height: 48, paddingInline: 24, gap: 8 },
+    xl: { height: 56, paddingInline: 24, gap: 8 },
+};
+export const ControlSizes = { desktop: DESKTOP, mobile: MOBILE };
+/** Une tablette est tactile : elle suit la densite mobile, jamais celle du desktop. */
+export const controlSizesFor = (variant) => variant === 'desktop' ? ControlSizes.desktop : ControlSizes.mobile;

package/dist/constants/Elevation.d.ts

@@ -4,7 +4,7 @@ export declare const Elevations: {
     raised: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -17,7 +17,7 @@ export declare const Elevations: {
     overlap: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -30,7 +30,7 @@ export declare const Elevations: {
     lifted: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -44,7 +44,7 @@ export declare const Elevations: {
     0: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -58,7 +58,7 @@ export declare const Elevations: {
     1: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -72,7 +72,7 @@ export declare const Elevations: {
     2: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -86,7 +86,7 @@ export declare const Elevations: {
     3: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;
@@ -100,7 +100,7 @@ export declare const Elevations: {
     4: {
         web: string;
         mobile: {
-            shadowColor: Color;
+            shadowColor: string;
             shadowOffset: {
                 width: number;
                 height: number;

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

@@ -1 +1 @@
-{"version":3,"file":"Elevation.d.ts","sourceRoot":"","sources":["../../src/constants/Elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,UAAU;;;;yBAII,KAAK;;;;;;;;;;;;;yBAUL,KAAK;;;;;;;;;;;;;yBAUL,KAAK;;;;;;;;;;IAO9B,kBAAkB;;;;yBAIgB,KAAK;;;;;;;;;;IAOvC,kBAAkB;;;;yBAIO,KAAK;;;;;;;;;;IAO9B,kBAAkB;;;;yBAIO,KAAK;;;;;;;;;;IAO9B,kBAAkB;;;;yBAIO,KAAK;;;;;;;;;;IAO9B,kBAAkB;;;;yBAIO,KAAK;;;;;;;;;;CAOW,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpE,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,KAAK,CAAC;QACnB,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;QACxC,aAAa,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;QAC1C,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;QACxC,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;KACnC,CAAC;CACH,CAAC"}
+{"version":3,"file":"Elevation.d.ts","sourceRoot":"","sources":["../../src/constants/Elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BrB,kBAAkB;;;;;;;;;;;;;;IAWlB,kBAAkB;;;;;;;;;;;;;;IAWlB,kBAAkB;;;;;;;;;;;;;;IAWlB,kBAAkB;;;;;;;;;;;;;;IAWlB,kBAAkB;;;;;;;;;;;;;;CAWuB,CAAC;AAG5C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpE,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE;QACN,WAAW,EAAE,KAAK,CAAC;QACnB,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;QACxC,aAAa,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;QAC1C,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;QACxC,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;KACnC,CAAC;CACH,CAAC"}