@focus4/styling 11.9.0 → 11.10.0-rc.1

package/lib/focus4.styling.css

@@ -295,32 +295,15 @@
 
     --preferred-font: "Roboto", "Helvetica", "Arial", sans-serif;
     --font-size: calc(1.6 * var(--unit));
-    --font-size-tiny: calc(1.2 * var(--unit));
     --font-size-small: calc(1.4 * var(--unit));
-    --font-size-normal: var(--font-size);
     --font-size-big: calc(1.8 * var(--unit));
-    --font-weight-thin: 300;
-    --font-weight-normal: 400;
     --font-weight-semi-bold: 500;
     --font-weight-bold: 700;
 
     --shadow-2p: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    --shadow-3p: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
     --shadow-4p: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-    --shadow-6p: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
-    --shadow-8p: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
-        0 5px 5px -3px rgba(0, 0, 0, 0.2);
-    --shadow-16p: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
-        0 8px 10px -5px rgba(0, 0, 0, 0.2);
-
-    --shadow-key-umbra-opacity: 0.2;
-    --shadow-key-penumbra-opacity: 0.14;
-    --shadow-ambient-shadow-opacity: 0.12;
 
     --zdepth-shadow-1: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
-    --zdepth-shadow-2: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
-    --zdepth-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
-    --zdepth-shadow-4: 0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22);
     --zdepth-shadow-5: 0 19px 60px rgba(0, 0, 0, 0.3), 0 15px 20px rgba(0, 0, 0, 0.22);
 
     --animation-duration: 0.35s;
@@ -335,8 +318,6 @@
     --z-index-higher: 200;
     --z-index-high: 100;
     --z-index-normal: 1;
-    --z-index-low: -100;
-    --z-index-lower: -200;
 }
 
 :root[dark] {
@@ -388,7 +369,7 @@ h4,
 h5,
 h6 {
     margin: 24px 0;
-    font-weight: var(--font-weight-normal);
+    font-weight: 400;
 }
 
 h1 {

package/lib/focus4.styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus4.styling.js","sources":["../src/utils/animation.ts","../src/utils/get-icon.tsx","../src/utils/color-scheme.ts","../src/utils/scroll-contexts.ts","../src/theme/common.ts","../src/theme/to-bem.ts","../src/theme/use-theme.ts","../src/theme/themr.tsx"],"sourcesContent":["function get() {\n    const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body);\n    const delay = toMs(animationDelay);\n    const duration = toMs(animationDuration);\n    const ease = animationTimingFunction.startsWith(\"cubic-bezier\")\n        ? animationTimingFunction.substring(13).split(\",\").map(parseFloat)\n        : undefined;\n    return { delay, duration, ease };\n}\nexport function getDefaultTransition() {\n    const { delay, duration, ease } = get();\n    return {\n        delay: delay / 1000,\n        duration: duration / 1000,\n        ease\n    };\n}\nexport const springTransition = {\n    type: \"spring\",\n    stiffness: 170,\n    damping: 26,\n    restDelta: 1,\n    restSpeed: 1000\n};\nexport function cssTransitionProps({ enter, enterActive, exit, exitActive }) {\n    const { delay, duration } = get();\n    return {\n        timeout: delay + duration,\n        classNames: {\n            enter,\n            enterActive,\n            exit,\n            exitActive\n        }\n    };\n}\nfunction toMs(d) {\n    if (d.endsWith(\"ms\")) {\n        return +d.substring(0, d.length - 2);\n    }\n    else {\n        return +d.substring(0, d.length - 1) * 1000;\n    }\n}\n//# sourceMappingURL=animation.js.map","import { jsx as _jsx } from \"react/jsx-runtime\";\nimport i18next from \"i18next\";\nexport function getIcon(name, isCustom) {\n    if (isCustom === undefined) {\n        isCustom = i18next.t(`${name}.library`) !== \"material\";\n        name = i18next.t(`${name}.name`);\n    }\n    if (isCustom) {\n        return _jsx(\"span\", { className: `icon-${name}` });\n    }\n    else {\n        return name;\n    }\n}\n//# sourceMappingURL=get-icon.js.map","import { autorun, observable } from \"mobx\";\nexport const colorScheme = observable({ dark: false });\nexport function initColorScheme(disableAutoDarkMode = false) {\n    const ls = localStorage.getItem(\"color-scheme\");\n    if (ls === \"dark\" || (!ls && !disableAutoDarkMode && window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches)) {\n        colorScheme.dark = true;\n    }\n    localStorage.setItem(\"color-scheme\", colorScheme.dark ? \"dark\" : \"light\");\n    autorun(() => {\n        const darkModeAttribute = document.documentElement.hasAttribute(\"dark\");\n        if (colorScheme.dark && !darkModeAttribute) {\n            document.documentElement.setAttribute(\"dark\", \"true\");\n            localStorage.setItem(\"color-scheme\", \"dark\");\n        }\n        else if (!colorScheme.dark && darkModeAttribute) {\n            document.documentElement.removeAttribute(\"dark\");\n            localStorage.setItem(\"color-scheme\", \"light\");\n        }\n    });\n}\n//# sourceMappingURL=color-scheme.js.map","import { createContext } from \"react\";\n/** Contexte d'un Scrollable, expose les méthodes associées. */\nexport const ScrollableContext = createContext({});\n/** Contexte d'un ScrollspyContainer, expose les méthodes associées. */\nexport const ScrollspyContext = createContext({\n    /**\n     * Enregistre un panel dans le Scrollspu\n     * @param name L'id du panel souhaité.\n     * @param panel La description d'un panel\n     */\n    registerPanel(name, panel) {\n        return () => {\n            // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n            name;\n            // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n            panel;\n        };\n    }\n});\n//# sourceMappingURL=scroll-contexts.js.map","import { createContext } from \"react\";\nexport const ThemeContext = createContext({});\n//# sourceMappingURL=common.js.map","import classNames from \"classnames\";\nimport { pick } from \"lodash\";\nexport function toBem(css) {\n    const data = {};\n    for (const key in css) {\n        const [element, modifier] = key.split(\"--\");\n        if (data[element] && modifier) {\n            data[element].push(modifier);\n        }\n        else if (!data[element]) {\n            data[element] = modifier ? [modifier] : [];\n        }\n    }\n    return Object.keys(data).reduce((bem, key) => ({\n        ...bem,\n        [key]: (mods = {}) => {\n            if (mods !== true) {\n                return classNames(css[key], ...data[key].filter(mod => mods[mod]).map(mod => css[`${key}--${mod}`]));\n            }\n            else {\n                return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));\n            }\n        }\n    }), {});\n}\nexport function fromBem(css) {\n    const res = {};\n    for (const key in css) {\n        const value = css[key];\n        if (value) {\n            if (typeof value === \"string\") {\n                res[key] = value;\n            }\n            else {\n                Object.assign(res, value(true));\n            }\n        }\n    }\n    return res;\n}\n//# sourceMappingURL=to-bem.js.map","import { useContext } from \"react\";\nimport { themeable } from \"@focus4/core\";\nimport { ThemeContext } from \"./common\";\nimport { fromBem, toBem } from \"./to-bem\";\n/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */\nexport function useTheme(name, ...themes) {\n    const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};\n    return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x))));\n}\n//# sourceMappingURL=use-theme.js.map","import { upperFirst } from \"lodash\";\nimport { useObserver } from \"mobx-react\";\nimport { useTheme } from \"./use-theme\";\n/**\n * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).\n * @param name Le nom de la clé de theme.\n * @param localTheme Le theme local, fourni par le composant.\n */\nexport function themr(name, localTheme) {\n    function TC({ children, theme }) {\n        const finalTheme = useTheme(name, localTheme, theme);\n        return useObserver(() => children(finalTheme));\n    }\n    TC.displayName = `${upperFirst(name)}ThemeConsumer`;\n    return TC;\n}\n//# sourceMappingURL=themr.js.map"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"focus4.styling.js","sources":["../src/utils/animation.ts","../src/utils/get-icon.tsx","../src/utils/color-scheme.ts","../src/utils/scroll-contexts.ts","../src/theme/common.ts","../src/theme/to-bem.ts","../src/theme/use-theme.ts","../src/theme/themr.tsx"],"sourcesContent":["function get() {\r\n    const {animationDelay, animationDuration, animationTimingFunction} = window.getComputedStyle(document.body);\r\n\r\n    const delay = toMs(animationDelay);\r\n    const duration = toMs(animationDuration);\r\n    const ease = animationTimingFunction.startsWith(\"cubic-bezier\")\r\n        ? animationTimingFunction.substring(13).split(\",\").map(parseFloat)\r\n        : undefined;\r\n\r\n    return {delay, duration, ease};\r\n}\r\n\r\nexport function getDefaultTransition() {\r\n    const {delay, duration, ease} = get();\r\n    return {\r\n        delay: delay / 1000,\r\n        duration: duration / 1000,\r\n        ease\r\n    } as const;\r\n}\r\n\r\nexport const springTransition = {\r\n    type: \"spring\",\r\n    stiffness: 170,\r\n    damping: 26,\r\n    restDelta: 1,\r\n    restSpeed: 1000\r\n} as const;\r\n\r\nexport function cssTransitionProps({\r\n    enter,\r\n    enterActive,\r\n    exit,\r\n    exitActive\r\n}: {\r\n    enter: string;\r\n    enterActive: string;\r\n    exit: string;\r\n    exitActive: string;\r\n}) {\r\n    const {delay, duration} = get();\r\n    return {\r\n        timeout: delay + duration,\r\n        classNames: {\r\n            enter,\r\n            enterActive,\r\n            exit,\r\n            exitActive\r\n        }\r\n    };\r\n}\r\n\r\nfunction toMs(d: string) {\r\n    if (d.endsWith(\"ms\")) {\r\n        return +d.substring(0, d.length - 2);\r\n    } else {\r\n        return +d.substring(0, d.length - 1) * 1000;\r\n    }\r\n}\r\n","import i18next from \"i18next\";\r\nimport {ReactNode} from \"react\";\r\n\r\n/**\r\n * Récupère l'icône correspondante au nom.\r\n * @param name Le nom de l'icône.\r\n * @param isCustom Icône custom ou non.\r\n */\r\nexport function getIcon(name: ReactNode, isCustom: boolean): JSX.Element | string;\r\n/**\r\n * Récupère l'icône par sa clé i18n.\r\n * @param i18nKey La clé i18n de l'icône.\r\n */\r\nexport function getIcon(i18nKey: string): JSX.Element | string;\r\nexport function getIcon(name?: ReactNode, isCustom?: boolean) {\r\n    if (isCustom === undefined) {\r\n        isCustom = i18next.t(`${name as string}.library`) !== \"material\";\r\n        name = i18next.t(`${name as string}.name`);\r\n    }\r\n\r\n    if (isCustom) {\r\n        return <span className={`icon-${name as string}`} />;\r\n    } else {\r\n        return name;\r\n    }\r\n}\r\n","import {autorun, observable} from \"mobx\";\r\n\r\nexport const colorScheme = observable({dark: false});\r\n\r\nexport function initColorScheme(disableAutoDarkMode = false) {\r\n    const ls = localStorage.getItem(\"color-scheme\");\r\n    if (ls === \"dark\" || (!ls && !disableAutoDarkMode && window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches)) {\r\n        colorScheme.dark = true;\r\n    }\r\n    localStorage.setItem(\"color-scheme\", colorScheme.dark ? \"dark\" : \"light\");\r\n\r\n    autorun(() => {\r\n        const darkModeAttribute = document.documentElement.hasAttribute(\"dark\");\r\n        if (colorScheme.dark && !darkModeAttribute) {\r\n            document.documentElement.setAttribute(\"dark\", \"true\");\r\n            localStorage.setItem(\"color-scheme\", \"dark\");\r\n        } else if (!colorScheme.dark && darkModeAttribute) {\r\n            document.documentElement.removeAttribute(\"dark\");\r\n            localStorage.setItem(\"color-scheme\", \"light\");\r\n        }\r\n    });\r\n}\r\n","import {createContext, HTMLProps, ReactPortal} from \"react\";\r\n\r\nexport interface PanelDescriptor {\r\n    node: HTMLDivElement;\r\n    title?: string;\r\n}\r\n\r\n/** Contexte d'un Scrollable, expose les méthodes associées. */\r\nexport const ScrollableContext = createContext<{\r\n    /**\r\n     * Retourne la status du header.\r\n     * @returns La taille du header et s'il est sticky ou non.\r\n     */\r\n    getHeaderStatus(): {sticky: boolean; height: number};\r\n    /**\r\n     * Affiche un élement dans le menu sticky du Scrollable\r\n     * @param node Le noeud React.\r\n     * @param parentNode Noeud à suivre pour positionner l'élément sticky.\r\n     * @param retractable Menu rétractable.\r\n     * @returns Le Portal associé.\r\n     */\r\n    menu(node: JSX.Element, parentNode: HTMLElement | null, retractable: boolean): ReactPortal | null;\r\n    /**\r\n     * Affiche un élement dans le Scrollable.\r\n     * @param node Le noeud React.\r\n     * @returns Le Portal associé.\r\n     */\r\n    portal(node: JSX.Element): ReactPortal;\r\n    /**\r\n     * Enregistre le header dans le Scrollable\r\n     * @param nonStickyElement Le noeud DOM représentant le header non sticky.\r\n     * @param canDeploy Précise si le header est toujours sticky ou non.\r\n     * @returns Le disposer.\r\n     */\r\n    registerHeader(nonStickyElement: HTMLElement, canDeploy: boolean): () => void;\r\n    /**\r\n     * Set les props du header du Scrollable.\r\n     * @param headerProps Les props du header.\r\n     * @returns Le disposer.\r\n     */\r\n    registerHeaderProps(headerProps: HTMLProps<HTMLElement>): void;\r\n    /**\r\n     * Enregistre un observateur d'intersection avec le viewport du Scrollable.\r\n     * @param node Le noeud DOM à observer.\r\n     * @param onIntersect Le callback à appeler lors d'une intersection.\r\n     * @returns Le disposer.\r\n     */\r\n    registerIntersect(node: HTMLElement, onIntersect: (ratio: number, isIntersecting: boolean) => void): () => void;\r\n    /**\r\n     * Scrolle vers la position demandée.\r\n     * @param options Options.\r\n     */\r\n    scrollTo(options?: ScrollToOptions): void;\r\n}>({} as any);\r\n\r\n/** Contexte d'un ScrollspyContainer, expose les méthodes associées. */\r\nexport const ScrollspyContext = createContext({\r\n    /**\r\n     * Enregistre un panel dans le Scrollspu\r\n     * @param name L'id du panel souhaité.\r\n     * @param panel La description d'un panel\r\n     */\r\n    registerPanel(name: string, panel: PanelDescriptor): (() => void) | undefined {\r\n        return () => {\r\n            // eslint-disable-next-line @typescript-eslint/no-unused-expressions\r\n            name;\r\n            // eslint-disable-next-line @typescript-eslint/no-unused-expressions\r\n            panel;\r\n        };\r\n    }\r\n});\r\n","import {createContext} from \"react\";\r\n\r\nexport type CSSElement<T> = T & string & {_element: void};\r\nexport type CSSMod<N extends string, T> = N & T & string & {_mod: void};\r\nexport type CSSToStrings<T> = {[P in keyof T]?: string};\r\n\r\nexport type Mods<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never}[keyof CSS];\r\nexport type ModNames<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never}[keyof CSS];\r\nexport type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {\r\n    [_ in ModNames<CSS, E> | P]: string;\r\n}) &\r\n    (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {[_ in Mods<CSS, E>]?: boolean}) => string);\r\n\r\nexport interface CSSContext {\r\n    [key: string]: {[key: string]: BemFunction | string};\r\n}\r\n\r\nexport const ThemeContext = createContext<CSSContext>({});\r\n","import classNames from \"classnames\";\r\nimport {pick} from \"lodash\";\r\n\r\nimport {BemFunction, CSSElement, CSSMod, CSSToStrings} from \"./common\";\r\n\r\nexport type AllMods<CSS> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never}[keyof CSS];\r\nexport type ToBem<CSS> = Omit<\r\n    {\r\n        [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E>\r\n            ? BemFunction<CSS, P, E>\r\n            : CSS[P] extends CSSMod<infer __, infer ___>\r\n            ? never\r\n            : BemFunction<CSS, P, string>;\r\n    },\r\n    AllMods<CSS>\r\n>;\r\n\r\nexport type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;\r\n\r\nexport function toBem<CSS>(css: CSS): ToBem<CSS> {\r\n    const data: {[key: string]: string[]} = {};\r\n    for (const key in css) {\r\n        const [element, modifier] = key.split(\"--\");\r\n        if (data[element] && modifier) {\r\n            data[element].push(modifier);\r\n        } else if (!data[element]) {\r\n            data[element] = modifier ? [modifier] : [];\r\n        }\r\n    }\r\n\r\n    return Object.keys(data).reduce(\r\n        (bem, key) => ({\r\n            ...bem,\r\n            [key]: (mods: true | {[key: string]: boolean} = {}) => {\r\n                if (mods !== true) {\r\n                    return classNames(\r\n                        (css as any)[key],\r\n                        ...data[key].filter(mod => mods[mod]).map(mod => (css as any)[`${key}--${mod}`])\r\n                    );\r\n                } else {\r\n                    return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));\r\n                }\r\n            }\r\n        }),\r\n        {}\r\n    ) as ToBem<CSS>;\r\n}\r\n\r\nexport function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T> {\r\n    const res: CSSToStrings<T> = {};\r\n\r\n    for (const key in css as any) {\r\n        const value = (css as any)[key];\r\n        if (value) {\r\n            if (typeof value === \"string\") {\r\n                (res as any)[key] = value;\r\n            } else {\r\n                Object.assign(res, value(true));\r\n            }\r\n        }\r\n    }\r\n\r\n    return res;\r\n}\r\n","import {useContext} from \"react\";\r\n\r\nimport {themeable} from \"@focus4/core\";\r\n\r\nimport {CSSToStrings, ThemeContext} from \"./common\";\r\nimport {fromBem, toBem, ToBem} from \"./to-bem\";\r\n\r\n/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */\r\nexport function useTheme<T>(\r\n    name: string,\r\n    ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]\r\n): ToBem<T> {\r\n    const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};\r\n    return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x!))) as T);\r\n}\r\n","import {upperFirst} from \"lodash\";\r\nimport {useObserver} from \"mobx-react\";\r\nimport {FunctionComponent, ReactElement} from \"react\";\r\n\r\nimport {CSSToStrings} from \"./common\";\r\nimport {ToBem} from \"./to-bem\";\r\nimport {useTheme} from \"./use-theme\";\r\n\r\nexport interface ThemeConsumerProps<T> {\r\n    children: (theme: ToBem<T>) => ReactElement;\r\n    theme?: CSSToStrings<T> | Partial<ToBem<T>> | T;\r\n}\r\n\r\n/**\r\n * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).\r\n * @param name Le nom de la clé de theme.\r\n * @param localTheme Le theme local, fourni par le composant.\r\n */\r\nexport function themr<T>(name: string, localTheme?: T): FunctionComponent<ThemeConsumerProps<T>> {\r\n    function TC({children, theme}: ThemeConsumerProps<T>) {\r\n        const finalTheme = useTheme(name, localTheme, theme);\r\n        return useObserver(() => children(finalTheme));\r\n    }\r\n\r\n    TC.displayName = `${upperFirst(name)}ThemeConsumer`;\r\n\r\n    return TC;\r\n}\r\n"],"names":["_jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@focus4/styling",
-    "version": "11.9.0",
+    "version": "11.10.0-rc.1",
     "description": "Focus v4, styling module",
     "main": "lib/focus4.styling.js",
     "repository": {
@@ -18,8 +18,8 @@
         "test-ci": "jest --ci --reporters=default --reporters=jest-junit"
     },
     "dependencies": {
-        "@focus4/core": "11.9.0",
-        "@types/react-dom": "18.2.7",
+        "@focus4/core": "11.10.0-rc.0",
+        "@types/react-dom": "18.2.8",
         "classnames": "2.3.2",
         "mobx-react": "7.6.0",
         "react": "18.2.0",
@@ -31,5 +31,5 @@
         "jest-junit": "16.0.0",
         "ts-jest": "29.1.1"
     },
-    "gitHead": "acb011ccdf4582bec0668d46ec0523c6aac1482c"
+    "gitHead": "aa0269ed53a3dc5a57746f1e3f28ba62f070697a"
 }

package/lib/utils/mode.d.ts

@@ -1 +0,0 @@
-export declare function initMode(disableAutoDarkMode?: boolean): void;