@focus4/styling 11.9.0-rc.0 → 11.9.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/lib/focus4.styling.css +31 -17
  2. package/lib/focus4.styling.d.ts +1 -1
  3. package/lib/focus4.styling.js +22 -1
  4. package/lib/focus4.styling.js.map +1 -1
  5. package/lib/utils/color-scheme.d.ts +4 -0
  6. package/lib/utils/index.d.ts +1 -0
  7. package/lib/utils/mode.d.ts +1 -0
  8. package/package.json +2 -2
package/lib/focus4.styling.css CHANGED
@@ -304,28 +304,24 @@
304
304
  --font-weight-semi-bold: 500;
305
305
  --font-weight-bold: 700;
306
306
 
307
- --shadow-2p: 0 2px 2px 0 rgba(var(--color-black), 0.14), 0 3px 1px -2px rgba(var(--color-black), 0.2),
308
- 0 1px 5px 0 rgba(var(--color-black), 0.12);
309
- --shadow-3p: 0 3px 4px 0 rgba(var(--color-black), 0.14), 0 3px 3px -2px rgba(var(--color-black), 0.2),
310
- 0 1px 8px 0 rgba(var(--color-black), 0.12);
311
- --shadow-4p: 0 4px 5px 0 rgba(var(--color-black), 0.14), 0 1px 10px 0 rgba(var(--color-black), 0.12),
312
- 0 2px 4px -1px rgba(var(--color-black), 0.2);
313
- --shadow-6p: 0 6px 10px 0 rgba(var(--color-black), 0.14), 0 1px 18px 0 rgba(var(--color-black), 0.12),
314
- 0 3px 5px -1px rgba(var(--color-black), 0.2);
315
- --shadow-8p: 0 8px 10px 1px rgba(var(--color-black), 0.14), 0 3px 14px 2px rgba(var(--color-black), 0.12),
316
- 0 5px 5px -3px rgba(var(--color-black), 0.2);
317
- --shadow-16p: 0 16px 24px 2px rgba(var(--color-black), 0.14), 0 6px 30px 5px rgba(var(--color-black), 0.12),
318
- 0 8px 10px -5px rgba(var(--color-black), 0.2);
307
+ --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);
308
+ --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);
309
+ --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);
310
+ --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);
311
+ --shadow-8p: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
312
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
313
+ --shadow-16p: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
314
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
319
315
 
320
316
  --shadow-key-umbra-opacity: 0.2;
321
317
  --shadow-key-penumbra-opacity: 0.14;
322
318
  --shadow-ambient-shadow-opacity: 0.12;
323
319
 
324
- --zdepth-shadow-1: 0 1px 6px rgba(var(--color-black), 0.12), 0 1px 4px rgba(var(--color-black), 0.24);
325
- --zdepth-shadow-2: 0 3px 10px rgba(var(--color-black), 0.16), 0 3px 10px rgba(var(--color-black), 0.23);
326
- --zdepth-shadow-3: 0 10px 30px rgba(var(--color-black), 0.19), 0 6px 10px rgba(var(--color-black), 0.23);
327
- --zdepth-shadow-4: 0 14px 45px rgba(var(--color-black), 0.25), 0 10px 18px rgba(var(--color-black), 0.22);
328
- --zdepth-shadow-5: 0 19px 60px rgba(var(--color-black), 0.3), 0 15px 20px rgba(var(--color-black), 0.22);
320
+ --zdepth-shadow-1: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
321
+ --zdepth-shadow-2: 0 3px 10px rgba(0, 0, 0, 0.16), 0 3px 10px rgba(0, 0, 0, 0.23);
322
+ --zdepth-shadow-3: 0 10px 30px rgba(0, 0, 0, 0.19), 0 6px 10px rgba(0, 0, 0, 0.23);
323
+ --zdepth-shadow-4: 0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22);
324
+ --zdepth-shadow-5: 0 19px 60px rgba(0, 0, 0, 0.3), 0 15px 20px rgba(0, 0, 0, 0.22);
329
325
 
330
326
  --animation-duration: 0.35s;
331
327
  --animation-delay: calc(var(--animation-duration) / 5);
@@ -342,6 +338,24 @@
342
338
  --z-index-low: -100;
343
339
  --z-index-lower: -200;
344
340
  }
341
+
342
+ :root[dark] {
343
+ color-scheme: dark;
344
+
345
+ --color-white: 11, 11, 11;
346
+ --color-black: 238, 238, 238;
347
+
348
+ --palette-grey-50: 22, 22, 22;
349
+ --palette-grey-100: 33, 33, 33;
350
+ --palette-grey-200: 44, 44, 44;
351
+ --palette-grey-300: 66, 66, 66;
352
+ --palette-grey-400: 97, 97, 97;
353
+ --palette-grey-500: 117, 117, 117;
354
+ --palette-grey-600: 158, 158, 158;
355
+ --palette-grey-700: 189, 189, 189;
356
+ --palette-grey-800: 224, 224, 224;
357
+ --palette-grey-900: 238, 238, 238;
358
+ }
345
359
 
346
360
  html {
347
361
  color: rgb(var(--color-black));
package/lib/focus4.styling.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import "./variables";
2
2
  import "./global.css";
3
- export { PanelDescriptor, ScrollableContext, ScrollspyContext, cssTransitionProps, getDefaultTransition, getIcon, springTransition } from "./utils";
3
+ export { PanelDescriptor, ScrollableContext, ScrollspyContext, colorScheme, cssTransitionProps, getDefaultTransition, getIcon, initColorScheme, springTransition } from "./utils";
4
4
  export { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, ThemeContext, ToBem, fromBem, themr, toBem, useTheme } from "./theme";
package/lib/focus4.styling.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { createContext, useContext } from 'react';
2
+ import { observable, autorun } from 'mobx';
2
3
  import { jsx } from 'react/jsx-runtime';
3
4
  import i18next from 'i18next';
4
5
  import classNames from 'classnames';
@@ -64,6 +65,26 @@ function getIcon(name, isCustom) {
64
65
  }
65
66
  }
66
67
 
68
+ const colorScheme = observable({ dark: false });
69
+ function initColorScheme(disableAutoDarkMode = false) {
70
+ const ls = localStorage.getItem("color-scheme");
71
+ if (ls === "dark" || (!disableAutoDarkMode && window.matchMedia?.("(prefers-color-scheme: dark)").matches)) {
72
+ colorScheme.dark = true;
73
+ }
74
+ localStorage.setItem("color-scheme", colorScheme.dark ? "dark" : "light");
75
+ autorun(() => {
76
+ const darkModeAttribute = document.documentElement.hasAttribute("dark");
77
+ if (colorScheme.dark && !darkModeAttribute) {
78
+ document.documentElement.setAttribute("dark", "true");
79
+ localStorage.setItem("color-scheme", "dark");
80
+ }
81
+ else if (!colorScheme.dark && darkModeAttribute) {
82
+ document.documentElement.removeAttribute("dark");
83
+ localStorage.setItem("color-scheme", "light");
84
+ }
85
+ });
86
+ }
87
+
67
88
  /** Contexte d'un Scrollable, expose les méthodes associées. */
68
89
  const ScrollableContext = createContext({});
69
90
  /** Contexte d'un ScrollspyContainer, expose les méthodes associées. */
@@ -140,5 +161,5 @@ function themr(name, localTheme) {
140
161
  return TC;
141
162
  }
142
163
 
143
- export { ScrollableContext, ScrollspyContext, ThemeContext, cssTransitionProps, fromBem, getDefaultTransition, getIcon, springTransition, themr, toBem, useTheme };
164
+ export { ScrollableContext, ScrollspyContext, ThemeContext, colorScheme, cssTransitionProps, fromBem, getDefaultTransition, getIcon, initColorScheme, springTransition, themr, toBem, useTheme };
144
165
  //# sourceMappingURL=focus4.styling.js.map
package/lib/focus4.styling.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"focus4.styling.js","sources":["../src/utils/animation.ts","../src/utils/get-icon.tsx","../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 { 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":";;;;;;;;AAAA,SAAS,GAAG,GAAG;AACf,IAAI,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAClH,IAAI,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;AACvC,IAAI,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,CAAC;AAC7C,IAAI,MAAM,IAAI,GAAG,uBAAuB,CAAC,UAAU,CAAC,cAAc,CAAC;AACnE,UAAU,uBAAuB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC;AAC1E,UAAU,SAAS,CAAC;AACpB,IAAI,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACrC,CAAC;AACM,SAAS,oBAAoB,GAAG;AACvC,IAAI,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,GAAG,EAAE,CAAC;AAC5C,IAAI,OAAO;AACX,QAAQ,KAAK,EAAE,KAAK,GAAG,IAAI;AAC3B,QAAQ,QAAQ,EAAE,QAAQ,GAAG,IAAI;AACjC,QAAQ,IAAI;AACZ,KAAK,CAAC;AACN,CAAC;AACW,MAAC,gBAAgB,GAAG;AAChC,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,SAAS,EAAE,GAAG;AAClB,IAAI,OAAO,EAAE,EAAE;AACf,IAAI,SAAS,EAAE,CAAC;AAChB,IAAI,SAAS,EAAE,IAAI;AACnB,EAAE;AACK,SAAS,kBAAkB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE;AAC7E,IAAI,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,GAAG,EAAE,CAAC;AACtC,IAAI,OAAO;AACX,QAAQ,OAAO,EAAE,KAAK,GAAG,QAAQ;AACjC,QAAQ,UAAU,EAAE;AACpB,YAAY,KAAK;AACjB,YAAY,WAAW;AACvB,YAAY,IAAI;AAChB,YAAY,UAAU;AACtB,SAAS;AACT,KAAK,CAAC;AACN,CAAC;AACD,SAAS,IAAI,CAAC,CAAC,EAAE;AACjB,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAC1B,QAAQ,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC7C,KAAK;AACL,SAAS;AACT,QAAQ,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;AACpD,KAAK;AACL;;ACzCO,SAAS,OAAO,CAAC,IAAI,EAAE,QAAQ,EAAE;AACxC,IAAI,IAAI,QAAQ,KAAK,SAAS,EAAE;AAChC,QAAQ,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,UAAU,CAAC;AAC/D,QAAQ,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACzC,KAAK;AACL,IAAI,IAAI,QAAQ,EAAE;AAClB,QAAQ,OAAOA,GAAI,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;AAC3D,KAAK;AACL,SAAS;AACT,QAAQ,OAAO,IAAI,CAAC;AACpB,KAAK;AACL;;ACZA;AACY,MAAC,iBAAiB,GAAG,aAAa,CAAC,EAAE,EAAE;AACnD;AACY,MAAC,gBAAgB,GAAG,aAAa,CAAC;AAC9C;AACA;AACA;AACA;AACA;AACA,IAAI,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC/B,QAAQ,OAAO,MAAM;AAKrB,SAAS,CAAC;AACV,KAAK;AACL,CAAC;;ACjBW,MAAC,YAAY,GAAG,aAAa,CAAC,EAAE;;ACCrC,SAAS,KAAK,CAAC,GAAG,EAAE;AAC3B,IAAI,MAAM,IAAI,GAAG,EAAE,CAAC;AACpB,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;AAC3B,QAAQ,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AACpD,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,QAAQ,EAAE;AACvC,YAAY,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACzC,SAAS;AACT,aAAa,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;AACjC,YAAY,IAAI,CAAC,OAAO,CAAC,GAAG,QAAQ,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC;AACvD,SAAS;AACT,KAAK;AACL,IAAI,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM;AACnD,QAAQ,GAAG,GAAG;AACd,QAAQ,CAAC,GAAG,GAAG,CAAC,IAAI,GAAG,EAAE,KAAK;AAC9B,YAAY,IAAI,IAAI,KAAK,IAAI,EAAE;AAC/B,gBAAgB,OAAO,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrH,aAAa;AACb,iBAAiB;AACjB,gBAAgB,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACjF,aAAa;AACb,SAAS;AACT,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;AACZ,CAAC;AACM,SAAS,OAAO,CAAC,GAAG,EAAE;AAC7B,IAAI,MAAM,GAAG,GAAG,EAAE,CAAC;AACnB,IAAI,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;AAC3B,QAAQ,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;AAC/B,QAAQ,IAAI,KAAK,EAAE;AACnB,YAAY,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3C,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AACjC,aAAa;AACb,iBAAiB;AACjB,gBAAgB,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;AAChD,aAAa;AACb,SAAS;AACT,KAAK;AACL,IAAI,OAAO,GAAG,CAAC;AACf;;ACnCA;AACO,SAAS,QAAQ,CAAC,IAAI,EAAE,GAAG,MAAM,EAAE;AAC1C,IAAI,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC;AACvE,IAAI,OAAO,KAAK,CAAC,SAAS,CAAC,YAAY,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzF;;ACLA;AACA;AACA;AACA;AACA;AACO,SAAS,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE;AACxC,IAAI,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;AACrC,QAAQ,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AAC7D,QAAQ,OAAO,WAAW,CAAC,MAAM,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AACvD,KAAK;AACL,IAAI,EAAE,CAAC,WAAW,GAAG,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC;AACxD,IAAI,OAAO,EAAE,CAAC;AACd;;;;"}
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\" || (!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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"}
package/lib/utils/color-scheme.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const colorScheme: {
2
+ dark: boolean;
3
+ };
4
+ export declare function initColorScheme(disableAutoDarkMode?: boolean): void;
package/lib/utils/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { cssTransitionProps, getDefaultTransition, springTransition } from "./animation";
2
2
  export { getIcon } from "./get-icon";
3
+ export { colorScheme, initColorScheme } from "./color-scheme";
3
4
  export { PanelDescriptor, ScrollableContext, ScrollspyContext } from "./scroll-contexts";
package/lib/utils/mode.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function initMode(disableAutoDarkMode?: boolean): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@focus4/styling",
3
- "version": "11.9.0-rc.0",
3
+ "version": "11.9.0-rc.1",
4
4
  "description": "Focus v4, styling module",
5
5
  "main": "lib/focus4.styling.js",
6
6
  "repository": {
@@ -31,5 +31,5 @@
31
31
  "jest-junit": "16.0.0",
32
32
  "ts-jest": "29.1.1"
33
33
  },
34
- "gitHead": "b95cd52e9de679dd908eee838725bf37c1b16251"
34
+ "gitHead": "cec186abef542fce15f7cfb1775d8f8cc18aae46"
35
35
  }