@wise/components-theming 1.9.4 → 1.10.0

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.
@@ -15,11 +15,11 @@ const ThemeProvider = ({
15
15
  className = undefined
16
16
  }) => {
17
17
  const isContextRoot = react.useContext(ThemeProviderContext.ThemeContext) === undefined;
18
- const [theme, setTheme] = react.useState(initialTheme);
18
+ const [theme, setTheme] = react.useState(helpers.normalizeTheme(initialTheme));
19
19
  const [screenMode, setScreenMode] = react.useState(initialScreenMode);
20
20
  // Update state when props change (for controlled usage)
21
21
  react.useEffect(() => {
22
- setTheme(initialTheme);
22
+ setTheme(helpers.normalizeTheme(initialTheme));
23
23
  }, [initialTheme]);
24
24
  react.useEffect(() => {
25
25
  setScreenMode(initialScreenMode);
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(initialTheme);\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n useEffect(() => {\n setTheme(initialTheme);\n }, [initialTheme]);\n\n useEffect(() => {\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,yBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,0BAAmB;EACnDC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;EAC5D,MAAM,CAACR,KAAK,EAAEY,QAAQ,CAAC,GAAGC,cAAQ,CAACZ,YAAY,CAAC;EAChD,MAAM,CAACE,UAAU,EAAEW,aAAa,CAAC,GAAGD,cAAQ,CAACT,iBAAiB,CAAC;AAE/D;AACAW,EAAAA,eAAS,CAAC,MAAK;IACbH,QAAQ,CAACX,YAAY,CAAC;AACxB,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBc,EAAAA,eAAS,CAAC,MAAK;IACbD,aAAa,CAACV,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAW,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,aAAa,EAAE;AACjB;AACAO,MAAAA,QAAQ,CAACC,eAAe,CAACV,SAAS,CAACW,KAAK,CAACpB,UAAU,CAAC,EAAEqB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACvB,KAAK,EAAEG,UAAU,CAAC,CACjCqB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACX,aAAa,EAAET,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEtC,EAAA,MAAMuB,YAAY,GAAGC,aAAO,CAC1B,OAAO;IAAE3B,KAAK;IAAEG,UAAU;IAAES,QAAQ;AAAEE,IAAAA;GAAe,CAAC,EACtD,CAACd,KAAK,EAAEG,UAAU,EAAES,QAAQ,EAAEE,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,cAAA,CAACjB,iCAAY,CAACkB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAApB,QAAA,eACzCsB,cAAA,CAACG,6BAAc,EAAA;AAACxB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
1
+ {"version":3,"file":"ThemeProvider.js","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n useEffect(() => {\n setTheme(normalizeTheme(initialTheme));\n }, [initialTheme]);\n\n useEffect(() => {\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,yBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,0BAAmB;EACnDC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,gBAAU,CAACC,iCAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACR,KAAK,EAAEY,QAAQ,CAAC,GAAGC,cAAQ,CAACC,sBAAc,CAACb,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGF,cAAQ,CAACT,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,eAAS,CAAC,MAAK;AACbJ,IAAAA,QAAQ,CAACE,sBAAc,CAACb,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBe,EAAAA,eAAS,CAAC,MAAK;IACbD,aAAa,CAACX,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAY,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIP,aAAa,EAAE;AACjB;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,yBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACZ,aAAa,EAAET,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEtC,EAAA,MAAMwB,YAAY,GAAGC,aAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAES,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAES,QAAQ,EAAEG,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,cAAA,CAAClB,iCAAY,CAACmB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAArB,QAAA,eACzCuB,cAAA,CAACG,6BAAc,EAAA;AAACzB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
@@ -1,7 +1,7 @@
1
1
  import { useContext, useState, useEffect, useMemo } from 'react';
2
2
  import { ThemedChildren } from './ThemedChildren.mjs';
3
3
  import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const.mjs';
4
- import { getThemeClassName } from './helpers.mjs';
4
+ import { normalizeTheme, getThemeClassName } from './helpers.mjs';
5
5
  import { ThemeContext } from './ThemeProviderContext.mjs';
6
6
  import { jsx } from 'react/jsx-runtime';
7
7
 
@@ -13,11 +13,11 @@ const ThemeProvider = ({
13
13
  className = undefined
14
14
  }) => {
15
15
  const isContextRoot = useContext(ThemeContext) === undefined;
16
- const [theme, setTheme] = useState(initialTheme);
16
+ const [theme, setTheme] = useState(normalizeTheme(initialTheme));
17
17
  const [screenMode, setScreenMode] = useState(initialScreenMode);
18
18
  // Update state when props change (for controlled usage)
19
19
  useEffect(() => {
20
- setTheme(initialTheme);
20
+ setTheme(normalizeTheme(initialTheme));
21
21
  }, [initialTheme]);
22
22
  useEffect(() => {
23
23
  setScreenMode(initialScreenMode);
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(initialTheme);\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n useEffect(() => {\n setTheme(initialTheme);\n }, [initialTheme]);\n\n useEffect(() => {\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,kBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,mBAAmB;EACnDC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;EAC5D,MAAM,CAACR,KAAK,EAAEY,QAAQ,CAAC,GAAGC,QAAQ,CAACZ,YAAY,CAAC;EAChD,MAAM,CAACE,UAAU,EAAEW,aAAa,CAAC,GAAGD,QAAQ,CAACT,iBAAiB,CAAC;AAE/D;AACAW,EAAAA,SAAS,CAAC,MAAK;IACbH,QAAQ,CAACX,YAAY,CAAC;AACxB,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBc,EAAAA,SAAS,CAAC,MAAK;IACbD,aAAa,CAACV,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAW,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,aAAa,EAAE;AACjB;AACAO,MAAAA,QAAQ,CAACC,eAAe,CAACV,SAAS,CAACW,KAAK,CAACpB,UAAU,CAAC,EAAEqB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACvB,KAAK,EAAEG,UAAU,CAAC,CACjCqB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACX,aAAa,EAAET,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEtC,EAAA,MAAMuB,YAAY,GAAGC,OAAO,CAC1B,OAAO;IAAE3B,KAAK;IAAEG,UAAU;IAAES,QAAQ;AAAEE,IAAAA;GAAe,CAAC,EACtD,CAACd,KAAK,EAAEG,UAAU,EAAES,QAAQ,EAAEE,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,GAAA,CAACjB,YAAY,CAACkB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAApB,QAAA,eACzCsB,GAAA,CAACG,cAAc,EAAA;AAACxB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
1
+ {"version":3,"file":"ThemeProvider.mjs","sources":["../src/ThemeProvider.tsx"],"sourcesContent":["import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName, normalizeTheme } from './helpers';\nimport { ThemeContext } from './ThemeProviderContext';\n\nexport type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\n\n// RegEx to check for `np-theme-` class name\nconst themeClass = /\\bnp-theme-[a-z-]+\\b/g;\n\nexport const ThemeProvider = ({\n theme: initialTheme = DEFAULT_BASE_THEME,\n screenMode: initialScreenMode = DEFAULT_SCREEN_MODE,\n children,\n className = undefined,\n}: ThemeProviderProps) => {\n const isContextRoot = useContext(ThemeContext) === undefined;\n const [theme, setTheme] = useState(normalizeTheme(initialTheme));\n const [screenMode, setScreenMode] = useState(initialScreenMode);\n\n // Update state when props change (for controlled usage)\n useEffect(() => {\n setTheme(normalizeTheme(initialTheme));\n }, [initialTheme]);\n\n useEffect(() => {\n setScreenMode(initialScreenMode);\n }, [initialScreenMode]);\n\n // useEffect hook used to apply the theme class to the HTML element\n useEffect(() => {\n if (isContextRoot) {\n // Remove all the theme classes from the documentElement\n document.documentElement.className.match(themeClass)?.forEach((item) => {\n document.documentElement.classList.remove(item);\n });\n getThemeClassName(theme, screenMode)\n .split(' ')\n .forEach((item) => {\n document.documentElement.classList.add(item);\n });\n }\n }, [isContextRoot, theme, screenMode]);\n\n const contextValue = useMemo(\n () => ({ theme, screenMode, setTheme, setScreenMode }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n\n return (\n <ThemeContext.Provider value={contextValue}>\n <ThemedChildren className={className}>{children}</ThemedChildren>\n </ThemeContext.Provider>\n );\n};\n"],"names":["themeClass","ThemeProvider","theme","initialTheme","DEFAULT_BASE_THEME","screenMode","initialScreenMode","DEFAULT_SCREEN_MODE","children","className","undefined","isContextRoot","useContext","ThemeContext","setTheme","useState","normalizeTheme","setScreenMode","useEffect","document","documentElement","match","forEach","item","classList","remove","getThemeClassName","split","add","contextValue","useMemo","_jsx","Provider","value","ThemedChildren"],"mappings":";;;;;;;AAWA,MAAMA,UAAU,GAAG,uBAAuB;AAEnC,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,KAAK,EAAEC,YAAY,GAAGC,kBAAkB;EACxCC,UAAU,EAAEC,iBAAiB,GAAGC,mBAAmB;EACnDC,QAAQ;AACRC,EAAAA,SAAS,GAAGC;AAAS,CACF,KAAI;AACvB,EAAA,MAAMC,aAAa,GAAGC,UAAU,CAACC,YAAY,CAAC,KAAKH,SAAS;AAC5D,EAAA,MAAM,CAACR,KAAK,EAAEY,QAAQ,CAAC,GAAGC,QAAQ,CAACC,cAAc,CAACb,YAAY,CAAC,CAAC;EAChE,MAAM,CAACE,UAAU,EAAEY,aAAa,CAAC,GAAGF,QAAQ,CAACT,iBAAiB,CAAC;AAE/D;AACAY,EAAAA,SAAS,CAAC,MAAK;AACbJ,IAAAA,QAAQ,CAACE,cAAc,CAACb,YAAY,CAAC,CAAC;AACxC,EAAA,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;AAElBe,EAAAA,SAAS,CAAC,MAAK;IACbD,aAAa,CAACX,iBAAiB,CAAC;AAClC,EAAA,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;AAEvB;AACAY,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIP,aAAa,EAAE;AACjB;AACAQ,MAAAA,QAAQ,CAACC,eAAe,CAACX,SAAS,CAACY,KAAK,CAACrB,UAAU,CAAC,EAAEsB,OAAO,CAAEC,IAAI,IAAI;QACrEJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACC,MAAM,CAACF,IAAI,CAAC;AACjD,MAAA,CAAC,CAAC;AACFG,MAAAA,iBAAiB,CAACxB,KAAK,EAAEG,UAAU,CAAC,CACjCsB,KAAK,CAAC,GAAG,CAAC,CACVL,OAAO,CAAEC,IAAI,IAAI;QAChBJ,QAAQ,CAACC,eAAe,CAACI,SAAS,CAACI,GAAG,CAACL,IAAI,CAAC;AAC9C,MAAA,CAAC,CAAC;AACN,IAAA;EACF,CAAC,EAAE,CAACZ,aAAa,EAAET,KAAK,EAAEG,UAAU,CAAC,CAAC;AAEtC,EAAA,MAAMwB,YAAY,GAAGC,OAAO,CAC1B,OAAO;IAAE5B,KAAK;IAAEG,UAAU;IAAES,QAAQ;AAAEG,IAAAA;GAAe,CAAC,EACtD,CAACf,KAAK,EAAEG,UAAU,EAAES,QAAQ,EAAEG,aAAa,CAAC,CAC7C;AAED,EAAA,oBACEc,GAAA,CAAClB,YAAY,CAACmB,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,YAAa;IAAArB,QAAA,eACzCuB,GAAA,CAACG,cAAc,EAAA;AAACzB,MAAAA,SAAS,EAAEA,SAAU;AAAAD,MAAAA,QAAA,EAAEA;KAAyB;AAClE,GAAuB,CAAC;AAE5B;;;;"}
package/dist/const.d.ts CHANGED
@@ -1,10 +1,16 @@
1
1
  export declare const baseThemes: readonly ["light", "personal", "business"];
2
2
  export declare const extraThemes: readonly ["forest-green", "bright-green"];
3
3
  export declare const screenModes: readonly ["light", "dark"];
4
+ /**
5
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
6
+ */
4
7
  export declare const modernThemes: readonly ["personal", "business", "forest-green", "bright-green"];
5
8
  export declare const businessThemes: readonly ["business", "business--forest-green", "business--bright-green"];
6
9
  export declare const platformThemes: readonly ["platform", "platform--forest-green"];
7
10
  export type ComponentTheme = (typeof baseThemes)[number];
11
+ /**
12
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
13
+ */
8
14
  export type ModernTheme = (typeof modernThemes)[number];
9
15
  export type BaseTheme = (typeof baseThemes)[number];
10
16
  export type ExtraTheme = (typeof extraThemes)[number];
@@ -16,7 +22,7 @@ export type PlatformForestGreenTheme = (typeof platformThemes)[1];
16
22
  export type BusinessTheme = (typeof businessThemes)[0];
17
23
  export type BusinessForestGreenTheme = (typeof businessThemes)[1];
18
24
  export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
19
- export declare const DEFAULT_BASE_THEME = "light";
25
+ export declare const DEFAULT_BASE_THEME = "personal";
20
26
  export declare const DEFAULT_SCREEN_MODE = "light";
21
27
  export type Theming = {
22
28
  theme?: ComponentTheme | BaseTheme | ExtraTheme | BusinessTheme | BusinessForestGreenTheme | BusinessBrightGreenTheme | PlatformTheme | PlatformForestGreenTheme;
@@ -1 +1 @@
1
- {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,4CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,mEAA0D,CAAC;AACpF,eAAO,MAAM,cAAc,2EAIjB,CAAC;AACX,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,UAAU,CAAC;AAC1C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EACF,cAAc,GACd,SAAS,GACT,UAAU,GACV,aAAa,GACb,wBAAwB,GACxB,wBAAwB,GACxB,aAAa,GACb,wBAAwB,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}
1
+ {"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,4CAA6C,CAAC;AACrE,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD;;GAEG;AACH,eAAO,MAAM,YAAY,mEAA0D,CAAC;AACpF,eAAO,MAAM,cAAc,2EAIjB,CAAC;AACX,eAAO,MAAM,cAAc,iDAAkD,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACzD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAElE,eAAO,MAAM,kBAAkB,aAAa,CAAC;AAC7C,eAAO,MAAM,mBAAmB,UAAU,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EACF,cAAc,GACd,SAAS,GACT,UAAU,GACV,aAAa,GACb,wBAAwB,GACxB,wBAAwB,GACxB,aAAa,GACb,wBAAwB,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}
package/dist/const.js CHANGED
@@ -1,17 +1,13 @@
1
1
  'use strict';
2
2
 
3
3
  // TODO: Change 'light' with 'legacy' in the future
4
- const baseThemes = ['light', 'personal', 'business'];
5
4
  const extraThemes = ['forest-green', 'bright-green'];
6
5
  const screenModes = ['light', 'dark'];
7
- const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
8
- const DEFAULT_BASE_THEME = 'light';
6
+ const DEFAULT_BASE_THEME = 'personal';
9
7
  const DEFAULT_SCREEN_MODE = 'light';
10
8
 
11
9
  exports.DEFAULT_BASE_THEME = DEFAULT_BASE_THEME;
12
10
  exports.DEFAULT_SCREEN_MODE = DEFAULT_SCREEN_MODE;
13
- exports.baseThemes = baseThemes;
14
11
  exports.extraThemes = extraThemes;
15
- exports.modernThemes = modernThemes;
16
12
  exports.screenModes = screenModes;
17
13
  //# sourceMappingURL=const.js.map
package/dist/const.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"const.js","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n 'business',\n 'business--forest-green',\n 'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n theme?:\n | ComponentTheme\n | BaseTheme\n | ExtraTheme\n | BusinessTheme\n | BusinessForestGreenTheme\n | BusinessBrightGreenTheme\n | PlatformTheme\n | PlatformForestGreenTheme;\n screenMode?: ScreenMode;\n /**\n * @deprecated this property has not effect, safe to delete\n */\n isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":";;AAAA;AACO,MAAMA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU;MAC7CC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;MAC9BC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAsBlE,MAAMG,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;;;;;;"}
1
+ {"version":3,"file":"const.js","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n 'business',\n 'business--forest-green',\n 'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'personal';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n theme?:\n | ComponentTheme\n | BaseTheme\n | ExtraTheme\n | BusinessTheme\n | BusinessForestGreenTheme\n | BusinessBrightGreenTheme\n | PlatformTheme\n | PlatformForestGreenTheme;\n screenMode?: ScreenMode;\n /**\n * @deprecated this property has not effect, safe to delete\n */\n isNotRootProvider?: boolean | undefined;\n};\n"],"names":["extraThemes","screenModes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":";;AAAA;MAEaA,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AA6BpC,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;;;;"}
package/dist/const.mjs CHANGED
@@ -1,10 +1,8 @@
1
1
  // TODO: Change 'light' with 'legacy' in the future
2
- const baseThemes = ['light', 'personal', 'business'];
3
2
  const extraThemes = ['forest-green', 'bright-green'];
4
3
  const screenModes = ['light', 'dark'];
5
- const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes];
6
- const DEFAULT_BASE_THEME = 'light';
4
+ const DEFAULT_BASE_THEME = 'personal';
7
5
  const DEFAULT_SCREEN_MODE = 'light';
8
6
 
9
- export { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, baseThemes, extraThemes, modernThemes, screenModes };
7
+ export { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, extraThemes, screenModes };
10
8
  //# sourceMappingURL=const.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"const.mjs","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n 'business',\n 'business--forest-green',\n 'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'light';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n theme?:\n | ComponentTheme\n | BaseTheme\n | ExtraTheme\n | BusinessTheme\n | BusinessForestGreenTheme\n | BusinessBrightGreenTheme\n | PlatformTheme\n | PlatformForestGreenTheme;\n screenMode?: ScreenMode;\n /**\n * @deprecated this property has not effect, safe to delete\n */\n isNotRootProvider?: boolean | undefined;\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":"AAAA;AACO,MAAMA,UAAU,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU;MAC7CC,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;MAC9BC,YAAY,GAAG,CAACH,UAAU,CAAC,CAAC,CAAC,EAAEA,UAAU,CAAC,CAAC,CAAC,EAAE,GAAGC,WAAW;AAsBlE,MAAMG,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;"}
1
+ {"version":3,"file":"const.mjs","sources":["../src/const.ts"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal', 'business'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;\nexport const businessThemes = [\n 'business',\n 'business--forest-green',\n 'business--bright-green',\n] as const;\nexport const platformThemes = ['platform', 'platform--forest-green'] as const;\n\n// TODO: componentThemes returned back for backward compatibility, refactor this place in the future\nexport type ComponentTheme = (typeof baseThemes)[number];\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport type ModernTheme = (typeof modernThemes)[number];\nexport type BaseTheme = (typeof baseThemes)[number];\nexport type ExtraTheme = (typeof extraThemes)[number];\nexport type ForestGreenTheme = (typeof extraThemes)[0];\nexport type ScreenMode = (typeof screenModes)[number];\nexport type ScreenModeDark = (typeof screenModes)[1];\nexport type PlatformTheme = (typeof platformThemes)[0];\nexport type PlatformForestGreenTheme = (typeof platformThemes)[1];\nexport type BusinessTheme = (typeof businessThemes)[0];\nexport type BusinessForestGreenTheme = (typeof businessThemes)[1];\nexport type BusinessBrightGreenTheme = (typeof businessThemes)[2];\n\nexport const DEFAULT_BASE_THEME = 'personal';\nexport const DEFAULT_SCREEN_MODE = 'light';\n\nexport type Theming = {\n theme?:\n | ComponentTheme\n | BaseTheme\n | ExtraTheme\n | BusinessTheme\n | BusinessForestGreenTheme\n | BusinessBrightGreenTheme\n | PlatformTheme\n | PlatformForestGreenTheme;\n screenMode?: ScreenMode;\n /**\n * @deprecated this property has not effect, safe to delete\n */\n isNotRootProvider?: boolean | undefined;\n};\n"],"names":["extraThemes","screenModes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE"],"mappings":"AAAA;MAEaA,WAAW,GAAG,CAAC,cAAc,EAAE,cAAc;MAC7CC,WAAW,GAAG,CAAC,OAAO,EAAE,MAAM;AA6BpC,MAAMC,kBAAkB,GAAG;AAC3B,MAAMC,mBAAmB,GAAG;;;;"}
package/dist/helpers.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import type { ModernTheme, ExtraTheme, ForestGreenTheme, ScreenMode, ScreenModeDark, Theming } from './const';
2
+ /**
3
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
4
+ */
2
5
  export declare const isThemeModern: (theme: NonNullable<Theming["theme"]>) => theme is ModernTheme;
3
6
  export declare const isExtraTheme: (theme: NonNullable<Theming["theme"]>) => theme is ExtraTheme;
4
7
  export declare const isForestGreenTheme: (theme: NonNullable<Theming["theme"]>) => theme is ForestGreenTheme;
5
8
  export declare const isScreenModeDark: (theme: NonNullable<Theming["theme"]>, screenMode: ScreenMode) => screenMode is ScreenModeDark;
6
9
  export declare const getThemeClassName: (theme: NonNullable<Theming["theme"]>, screenMode: ScreenMode) => string;
10
+ export declare const normalizeTheme: (theme: NonNullable<Theming["theme"]>) => NonNullable<Theming["theme"]>;
7
11
  //# sourceMappingURL=helpers.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WACjC,CAAC;AAE9C,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cACqD,CAAC;AAEvE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAuC7F,CAAC"}
1
+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,WAAmB,CAAC;AAElG,eAAO,MAAM,YAAY,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAG,KAAK,IAAI,UAClC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,GAC7B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,KAAK,IAAI,gBAA4C,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAC3B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EACpC,YAAY,UAAU,KACrB,UAAU,IAAI,cAA+C,CAAC;AAEjE,eAAO,MAAM,iBAAiB,GAAI,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,YAAY,UAAU,WAmC7F,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KACnC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAA6C,CAAC"}
package/dist/helpers.js CHANGED
@@ -2,14 +2,14 @@
2
2
 
3
3
  var _const = require('./const.js');
4
4
 
5
- const isThemeModern = theme => _const.modernThemes.includes(theme);
5
+ /**
6
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
7
+ */
8
+ const isThemeModern = theme => true;
6
9
  const isExtraTheme = theme => _const.extraThemes.includes(theme);
7
10
  const isForestGreenTheme = theme => theme === _const.extraThemes[0];
8
- const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && _const.screenModes[1] === screenMode;
11
+ const isScreenModeDark = (theme, screenMode) => _const.screenModes[1] === screenMode;
9
12
  const getThemeClassName = (theme, screenMode) => {
10
- if (['light'].includes(theme)) {
11
- return `np-theme-${theme}`;
12
- }
13
13
  // Personal light is always there by default
14
14
  const themeClasses = ['np-theme-personal'];
15
15
  /* eslint-disable functional/immutable-data */
@@ -40,10 +40,12 @@ const getThemeClassName = (theme, screenMode) => {
40
40
  /* eslint-enable functional/immutable-data */
41
41
  return themeClasses.join(' ');
42
42
  };
43
+ const normalizeTheme = theme => theme === 'light' ? 'personal' : theme;
43
44
 
44
45
  exports.getThemeClassName = getThemeClassName;
45
46
  exports.isExtraTheme = isExtraTheme;
46
47
  exports.isForestGreenTheme = isForestGreenTheme;
47
48
  exports.isScreenModeDark = isScreenModeDark;
48
49
  exports.isThemeModern = isThemeModern;
50
+ exports.normalizeTheme = normalizeTheme;
49
51
  //# sourceMappingURL=helpers.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n theme: NonNullable<Theming['theme']>,\n screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n if (['light'].includes(theme)) {\n return `np-theme-${theme}`;\n }\n\n // Personal light is always there by default\n const themeClasses = ['np-theme-personal'];\n\n /* eslint-disable functional/immutable-data */\n // Personal dark theme\n if (theme === 'personal' && screenMode === 'dark') {\n themeClasses.push(`np-theme-personal--${screenMode}`);\n }\n\n // Personal forest-green and bright-green themes\n else if (['forest-green', 'bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-personal--${theme}`);\n }\n\n // Business light\n else if (theme === 'business') {\n themeClasses.push(`np-theme-business`);\n // Business dark theme\n if (screenMode === 'dark') {\n themeClasses.push(`np-theme-business--${screenMode}`);\n }\n }\n\n // Business forest-green and bright-green themes\n else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-${theme}`);\n }\n\n // Platform themes\n else if (theme.startsWith('platform')) {\n themeClasses.push(`np-theme-${theme}`);\n }\n /* eslint-enable functional/immutable-data */\n return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;;;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,mBAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,kBAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,kBAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;;;;;"}
1
+ {"version":3,"file":"helpers.js","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n theme: NonNullable<Theming['theme']>,\n screenMode: ScreenMode,\n): screenMode is ScreenModeDark => screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n // Personal light is always there by default\n const themeClasses = ['np-theme-personal'];\n\n /* eslint-disable functional/immutable-data */\n // Personal dark theme\n if (theme === 'personal' && screenMode === 'dark') {\n themeClasses.push(`np-theme-personal--${screenMode}`);\n }\n\n // Personal forest-green and bright-green themes\n else if (['forest-green', 'bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-personal--${theme}`);\n }\n\n // Business light\n else if (theme === 'business') {\n themeClasses.push(`np-theme-business`);\n // Business dark theme\n if (screenMode === 'dark') {\n themeClasses.push(`np-theme-business--${screenMode}`);\n }\n }\n\n // Business forest-green and bright-green themes\n else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-${theme}`);\n }\n\n // Platform themes\n else if (theme.startsWith('platform')) {\n themeClasses.push(`np-theme-${theme}`);\n }\n /* eslint-enable functional/immutable-data */\n return themeClasses.join(' ');\n};\n\nexport const normalizeTheme = (\n theme: NonNullable<Theming['theme']>,\n): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);\n"],"names":["isThemeModern","theme","isExtraTheme","extraThemes","includes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join","normalizeTheme"],"mappings":";;;;AAUA;;AAEG;AACI,MAAMA,aAAa,GAAIC,KAAoC,IAA2B;AAEtF,MAAMC,YAAY,GAAID,KAAoC,IAC/DE,kBAAW,CAACC,QAAQ,CAACH,KAAmB;AAEnC,MAAMI,kBAAkB,GAC7BJ,KAAoC,IACNA,KAAK,KAAKE,kBAAW,CAAC,CAAC;AAEhD,MAAMG,gBAAgB,GAAGA,CAC9BL,KAAoC,EACpCM,UAAsB,KACWC,kBAAW,CAAC,CAAC,CAAC,KAAKD;MAEzCE,iBAAiB,GAAGA,CAACR,KAAoC,EAAEM,UAAsB,KAAI;AAChG;AACA,EAAA,MAAMG,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIT,KAAK,KAAK,UAAU,IAAIM,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AACzDS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBV,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AAC7ES,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACW,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOS,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;AAEO,MAAMC,cAAc,GACzBb,KAAoC,IACDA,KAAK,KAAK,OAAO,GAAG,UAAU,GAAGA;;;;;;;;;"}
package/dist/helpers.mjs CHANGED
@@ -1,13 +1,13 @@
1
- import { modernThemes, extraThemes, screenModes } from './const.mjs';
1
+ import { extraThemes, screenModes } from './const.mjs';
2
2
 
3
- const isThemeModern = theme => modernThemes.includes(theme);
3
+ /**
4
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
5
+ */
6
+ const isThemeModern = theme => true;
4
7
  const isExtraTheme = theme => extraThemes.includes(theme);
5
8
  const isForestGreenTheme = theme => theme === extraThemes[0];
6
- const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
9
+ const isScreenModeDark = (theme, screenMode) => screenModes[1] === screenMode;
7
10
  const getThemeClassName = (theme, screenMode) => {
8
- if (['light'].includes(theme)) {
9
- return `np-theme-${theme}`;
10
- }
11
11
  // Personal light is always there by default
12
12
  const themeClasses = ['np-theme-personal'];
13
13
  /* eslint-disable functional/immutable-data */
@@ -38,6 +38,7 @@ const getThemeClassName = (theme, screenMode) => {
38
38
  /* eslint-enable functional/immutable-data */
39
39
  return themeClasses.join(' ');
40
40
  };
41
+ const normalizeTheme = theme => theme === 'light' ? 'personal' : theme;
41
42
 
42
- export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern };
43
+ export { getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern, normalizeTheme };
43
44
  //# sourceMappingURL=helpers.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>\n modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n theme: NonNullable<Theming['theme']>,\n screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n if (['light'].includes(theme)) {\n return `np-theme-${theme}`;\n }\n\n // Personal light is always there by default\n const themeClasses = ['np-theme-personal'];\n\n /* eslint-disable functional/immutable-data */\n // Personal dark theme\n if (theme === 'personal' && screenMode === 'dark') {\n themeClasses.push(`np-theme-personal--${screenMode}`);\n }\n\n // Personal forest-green and bright-green themes\n else if (['forest-green', 'bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-personal--${theme}`);\n }\n\n // Business light\n else if (theme === 'business') {\n themeClasses.push(`np-theme-business`);\n // Business dark theme\n if (screenMode === 'dark') {\n themeClasses.push(`np-theme-business--${screenMode}`);\n }\n }\n\n // Business forest-green and bright-green themes\n else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-${theme}`);\n }\n\n // Platform themes\n else if (theme.startsWith('platform')) {\n themeClasses.push(`np-theme-${theme}`);\n }\n /* eslint-enable functional/immutable-data */\n return themeClasses.join(' ');\n};\n"],"names":["isThemeModern","theme","modernThemes","includes","isExtraTheme","extraThemes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join"],"mappings":";;AAUO,MAAMA,aAAa,GAAIC,KAAoC,IAChEC,YAAY,CAACC,QAAQ,CAACF,KAAoB;AAErC,MAAMG,YAAY,GAAIH,KAAoC,IAC/DI,WAAW,CAACF,QAAQ,CAACF,KAAmB;AAEnC,MAAMK,kBAAkB,GAC7BL,KAAoC,IACNA,KAAK,KAAKI,WAAW,CAAC,CAAC;MAE1CE,gBAAgB,GAAGA,CAC9BN,KAAoC,EACpCO,UAAsB,KAEtBR,aAAa,CAACC,KAAoB,CAAC,IAAIQ,WAAW,CAAC,CAAC,CAAC,KAAKD;MAE/CE,iBAAiB,GAAGA,CAACT,KAAoC,EAAEO,UAAsB,KAAI;EAChG,IAAI,CAAC,OAAO,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;IAC7B,OAAO,CAAA,SAAA,EAAYA,KAAK,CAAA,CAAE;AAC5B,EAAA;AAEA;AACA,EAAA,MAAMU,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIV,KAAK,KAAK,UAAU,IAAIO,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AACzDU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBX,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACL,QAAQ,CAACF,KAAK,CAAC,EAAE;AAC7EU,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACY,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYX,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOU,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;;;;"}
1
+ {"version":3,"file":"helpers.mjs","sources":["../src/helpers.ts"],"sourcesContent":["import type {\n ModernTheme,\n ExtraTheme,\n ForestGreenTheme,\n ScreenMode,\n ScreenModeDark,\n Theming,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\n/**\n * @deprecated \"modern\" theme is released, you should not need check for \"modern\" theme anymore\n */\nexport const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;\n\nexport const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>\n extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n theme: NonNullable<Theming['theme']>,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n theme: NonNullable<Theming['theme']>,\n screenMode: ScreenMode,\n): screenMode is ScreenModeDark => screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {\n // Personal light is always there by default\n const themeClasses = ['np-theme-personal'];\n\n /* eslint-disable functional/immutable-data */\n // Personal dark theme\n if (theme === 'personal' && screenMode === 'dark') {\n themeClasses.push(`np-theme-personal--${screenMode}`);\n }\n\n // Personal forest-green and bright-green themes\n else if (['forest-green', 'bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-personal--${theme}`);\n }\n\n // Business light\n else if (theme === 'business') {\n themeClasses.push(`np-theme-business`);\n // Business dark theme\n if (screenMode === 'dark') {\n themeClasses.push(`np-theme-business--${screenMode}`);\n }\n }\n\n // Business forest-green and bright-green themes\n else if (['business--forest-green', 'business--bright-green'].includes(theme)) {\n themeClasses.push(`np-theme-${theme}`);\n }\n\n // Platform themes\n else if (theme.startsWith('platform')) {\n themeClasses.push(`np-theme-${theme}`);\n }\n /* eslint-enable functional/immutable-data */\n return themeClasses.join(' ');\n};\n\nexport const normalizeTheme = (\n theme: NonNullable<Theming['theme']>,\n): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);\n"],"names":["isThemeModern","theme","isExtraTheme","extraThemes","includes","isForestGreenTheme","isScreenModeDark","screenMode","screenModes","getThemeClassName","themeClasses","push","startsWith","join","normalizeTheme"],"mappings":";;AAUA;;AAEG;AACI,MAAMA,aAAa,GAAIC,KAAoC,IAA2B;AAEtF,MAAMC,YAAY,GAAID,KAAoC,IAC/DE,WAAW,CAACC,QAAQ,CAACH,KAAmB;AAEnC,MAAMI,kBAAkB,GAC7BJ,KAAoC,IACNA,KAAK,KAAKE,WAAW,CAAC,CAAC;AAEhD,MAAMG,gBAAgB,GAAGA,CAC9BL,KAAoC,EACpCM,UAAsB,KACWC,WAAW,CAAC,CAAC,CAAC,KAAKD;MAEzCE,iBAAiB,GAAGA,CAACR,KAAoC,EAAEM,UAAsB,KAAI;AAChG;AACA,EAAA,MAAMG,YAAY,GAAG,CAAC,mBAAmB,CAAC;AAE1C;AACA;AACA,EAAA,IAAIT,KAAK,KAAK,UAAU,IAAIM,UAAU,KAAK,MAAM,EAAE;AACjDG,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,EAAA;AAEA;OACK,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AACzDS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBV,KAAK,EAAE,CAAC;AAClD,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,KAAK,UAAU,EAAE;AAC7BS,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACtC;IACA,IAAIJ,UAAU,KAAK,MAAM,EAAE;AACzBG,MAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,mBAAA,EAAsBJ,UAAU,EAAE,CAAC;AACvD,IAAA;AACF,EAAA;AAEA;OACK,IAAI,CAAC,wBAAwB,EAAE,wBAAwB,CAAC,CAACH,QAAQ,CAACH,KAAK,CAAC,EAAE;AAC7ES,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AAEA;AAAA,OACK,IAAIA,KAAK,CAACW,UAAU,CAAC,UAAU,CAAC,EAAE;AACrCF,IAAAA,YAAY,CAACC,IAAI,CAAC,CAAA,SAAA,EAAYV,KAAK,EAAE,CAAC;AACxC,EAAA;AACA;AACA,EAAA,OAAOS,YAAY,CAACG,IAAI,CAAC,GAAG,CAAC;AAC/B;AAEO,MAAMC,cAAc,GACzBb,KAAoC,IACDA,KAAK,KAAK,OAAO,GAAG,UAAU,GAAGA;;;;"}
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
1
+ export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming, DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE, } from './const';
2
2
  export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, } from './helpers';
3
3
  export { ThemeProvider, type ThemeProviderProps } from './ThemeProvider';
4
4
  export { useTheme } from './useTheme';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAC1F,OAAO,EACL,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EACV,cAAc,EACd,SAAS,EACT,UAAU,EACV,UAAU,EACV,OAAO,EACP,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
@@ -2,6 +2,9 @@ import type { ScreenMode, Theming } from './const';
2
2
  interface ThemeHookValue {
3
3
  theme: NonNullable<Theming['theme']>;
4
4
  screenMode: ScreenMode;
5
+ /**
6
+ * @deprecated there is no more such thing as "modern" theme
7
+ */
5
8
  isModern: boolean;
6
9
  isForestGreenTheme: boolean;
7
10
  isScreenModeDark: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAiBD,eAAO,MAAM,QAAQ,QAAO,cA8B3B,CAAC"}
1
+ {"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrC,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;CACjD;AAiBD,eAAO,MAAM,QAAQ,QAAO,cA0B3B,CAAC"}
package/dist/useTheme.js CHANGED
@@ -26,15 +26,17 @@ const useTheme = () => {
26
26
  }
27
27
  const {
28
28
  theme,
29
- screenMode: contextScreenMode,
29
+ screenMode,
30
30
  setTheme,
31
31
  setScreenMode
32
32
  } = theming ?? FALLBACK_VALUES;
33
- const screenMode = theme === _const.DEFAULT_BASE_THEME ? _const.DEFAULT_SCREEN_MODE : contextScreenMode;
34
33
  return react.useMemo(() => ({
35
34
  theme,
36
35
  screenMode,
37
- isModern: helpers.isThemeModern(theme),
36
+ /**
37
+ * @deprecated there is no more such thing as "modern" theme
38
+ */
39
+ isModern: helpers.isThemeModern(),
38
40
  isForestGreenTheme: helpers.isForestGreenTheme(theme),
39
41
  isScreenModeDark: helpers.isScreenModeDark(theme, screenMode),
40
42
  className: helpers.getThemeClassName(theme, screenMode),
@@ -1 +1 @@
1
- {"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n setTheme: (theme: NonNullable<Theming['theme']>) => void;\n setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n setTheme: () => {},\n setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const {\n theme,\n screenMode: contextScreenMode,\n setTheme,\n setScreenMode,\n } = theming ?? FALLBACK_VALUES;\n\n const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n setTheme,\n setScreenMode,\n }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAkBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC,0BAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IACJhB,KAAK;AACLE,IAAAA,UAAU,EAAEe,iBAAiB;IAC7Bb,QAAQ;AACRC,IAAAA;GACD,GAAGO,OAAO,IAAIb,eAAe;EAE9B,MAAMG,UAAU,GAAGF,KAAK,KAAKC,yBAAkB,GAAGE,0BAAmB,GAAGc,iBAAiB;EAEzF,OAAOC,aAAO,CACZ,OAAO;IACLlB,KAAK;IACLE,UAAU;AACViB,IAAAA,QAAQ,EAAEC,qBAAa,CAACpB,KAAK,CAAC;AAC9BqB,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACrB,KAAK,CAAC;AAC7CsB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACtB,KAAK,EAAEE,UAAU,CAAC;AACrDqB,IAAAA,SAAS,EAAEC,yBAAiB,CAACxB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}
1
+ {"version":3,"file":"useTheme.js","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n /**\n * @deprecated there is no more such thing as \"modern\" theme\n */\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n setTheme: (theme: NonNullable<Theming['theme']>) => void;\n setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n setTheme: () => {},\n setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const { theme, screenMode, setTheme, setScreenMode } = theming ?? FALLBACK_VALUES;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n /**\n * @deprecated there is no more such thing as \"modern\" theme\n */\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n setTheme,\n setScreenMode,\n }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;;;AAqBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,yBAAkB;AACzBC,EAAAA,UAAU,EAAEC,0BAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,iCAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEhB,KAAK;IAAEE,UAAU;IAAEE,QAAQ;AAAEC,IAAAA;GAAe,GAAGO,OAAO,IAAIb,eAAe;EAEjF,OAAOkB,aAAO,CACZ,OAAO;IACLjB,KAAK;IACLE,UAAU;AACV;;AAEG;AACHgB,IAAAA,QAAQ,EAAEC,qBAAa,CAAM,CAAC;AAC9BC,IAAAA,kBAAkB,EAAEA,0BAAkB,CAACpB,KAAK,CAAC;AAC7CqB,IAAAA,gBAAgB,EAAEA,wBAAgB,CAACrB,KAAK,EAAEE,UAAU,CAAC;AACrDoB,IAAAA,SAAS,EAAEC,yBAAiB,CAACvB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}
package/dist/useTheme.mjs CHANGED
@@ -24,15 +24,17 @@ const useTheme = () => {
24
24
  }
25
25
  const {
26
26
  theme,
27
- screenMode: contextScreenMode,
27
+ screenMode,
28
28
  setTheme,
29
29
  setScreenMode
30
30
  } = theming ?? FALLBACK_VALUES;
31
- const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
32
31
  return useMemo(() => ({
33
32
  theme,
34
33
  screenMode,
35
- isModern: isThemeModern(theme),
34
+ /**
35
+ * @deprecated there is no more such thing as "modern" theme
36
+ */
37
+ isModern: isThemeModern(),
36
38
  isForestGreenTheme: isForestGreenTheme(theme),
37
39
  isScreenModeDark: isScreenModeDark(theme, screenMode),
38
40
  className: getThemeClassName(theme, screenMode),
@@ -1 +1 @@
1
- {"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n setTheme: (theme: NonNullable<Theming['theme']>) => void;\n setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n setTheme: () => {},\n setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const {\n theme,\n screenMode: contextScreenMode,\n setTheme,\n setScreenMode,\n } = theming ?? FALLBACK_VALUES;\n\n const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n setTheme,\n setScreenMode,\n }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAkBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC,mBAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IACJhB,KAAK;AACLE,IAAAA,UAAU,EAAEe,iBAAiB;IAC7Bb,QAAQ;AACRC,IAAAA;GACD,GAAGO,OAAO,IAAIb,eAAe;EAE9B,MAAMG,UAAU,GAAGF,KAAK,KAAKC,kBAAkB,GAAGE,mBAAmB,GAAGc,iBAAiB;EAEzF,OAAOC,OAAO,CACZ,OAAO;IACLlB,KAAK;IACLE,UAAU;AACViB,IAAAA,QAAQ,EAAEC,aAAa,CAACpB,KAAK,CAAC;AAC9BqB,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACrB,KAAK,CAAC;AAC7CsB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACtB,KAAK,EAAEE,UAAU,CAAC;AACrDqB,IAAAA,SAAS,EAAEC,iBAAiB,CAACxB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}
1
+ {"version":3,"file":"useTheme.mjs","sources":["../src/useTheme.ts"],"sourcesContent":["import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProviderContext';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n theme: NonNullable<Theming['theme']>;\n screenMode: ScreenMode;\n /**\n * @deprecated there is no more such thing as \"modern\" theme\n */\n isModern: boolean;\n isForestGreenTheme: boolean;\n isScreenModeDark: boolean;\n className: string;\n setTheme: (theme: NonNullable<Theming['theme']>) => void;\n setScreenMode: (screenMode: ScreenMode) => void;\n}\n\nconst FALLBACK_VALUES = {\n theme: DEFAULT_BASE_THEME,\n screenMode: DEFAULT_SCREEN_MODE,\n setTheme: () => {},\n setScreenMode: () => {},\n} as const;\n\nconst isNotProduction = () => {\n try {\n return ['localhost', 'dev-wi.se'].includes(window.location.hostname);\n } catch {\n return false;\n }\n};\n\nexport const useTheme = (): ThemeHookValue => {\n const theming = useContext(ThemeContext);\n\n if (!theming && isNotProduction()) {\n // eslint-disable-next-line no-console\n console.warn('Call to useTheme outside a ThemeProvider');\n }\n\n const { theme, screenMode, setTheme, setScreenMode } = theming ?? FALLBACK_VALUES;\n\n return useMemo(\n () => ({\n theme,\n screenMode,\n /**\n * @deprecated there is no more such thing as \"modern\" theme\n */\n isModern: isThemeModern(theme),\n isForestGreenTheme: isForestGreenTheme(theme),\n isScreenModeDark: isScreenModeDark(theme, screenMode),\n className: getThemeClassName(theme, screenMode),\n setTheme,\n setScreenMode,\n }),\n [theme, screenMode, setTheme, setScreenMode],\n );\n};\n"],"names":["FALLBACK_VALUES","theme","DEFAULT_BASE_THEME","screenMode","DEFAULT_SCREEN_MODE","setTheme","setScreenMode","isNotProduction","includes","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","useMemo","isModern","isThemeModern","isForestGreenTheme","isScreenModeDark","className","getThemeClassName"],"mappings":";;;;;AAqBA,MAAMA,eAAe,GAAG;AACtBC,EAAAA,KAAK,EAAEC,kBAAkB;AACzBC,EAAAA,UAAU,EAAEC,mBAAmB;AAC/BC,EAAAA,QAAQ,EAAEA,MAAK,CAAE,CAAC;EAClBC,aAAa,EAAEA,MAAK,CAAE;CACd;AAEV,MAAMC,eAAe,GAAGA,MAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAACC,QAAQ,CAACC,MAAM,CAACC,QAAQ,CAACC,QAAQ,CAAC;AACtE,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAEM,MAAMC,QAAQ,GAAGA,MAAqB;AAC3C,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,YAAY,CAAC;AAExC,EAAA,IAAI,CAACF,OAAO,IAAIN,eAAe,EAAE,EAAE;AACjC;AACAS,IAAAA,OAAO,CAACC,IAAI,CAAC,0CAA0C,CAAC;AAC1D,EAAA;EAEA,MAAM;IAAEhB,KAAK;IAAEE,UAAU;IAAEE,QAAQ;AAAEC,IAAAA;GAAe,GAAGO,OAAO,IAAIb,eAAe;EAEjF,OAAOkB,OAAO,CACZ,OAAO;IACLjB,KAAK;IACLE,UAAU;AACV;;AAEG;AACHgB,IAAAA,QAAQ,EAAEC,aAAa,CAAM,CAAC;AAC9BC,IAAAA,kBAAkB,EAAEA,kBAAkB,CAACpB,KAAK,CAAC;AAC7CqB,IAAAA,gBAAgB,EAAEA,gBAAgB,CAACrB,KAAK,EAAEE,UAAU,CAAC;AACrDoB,IAAAA,SAAS,EAAEC,iBAAiB,CAACvB,KAAK,EAAEE,UAAU,CAAC;IAC/CE,QAAQ;AACRC,IAAAA;GACD,CAAC,EACF,CAACL,KAAK,EAAEE,UAAU,EAAEE,QAAQ,EAAEC,aAAa,CAAC,CAC7C;AACH;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wise/components-theming",
3
- "version": "1.9.4",
3
+ "version": "1.10.0",
4
4
  "description": "Provides theming support for the Wise Design system components",
5
5
  "license": "Apache-2.0",
6
6
  "keywords": [
@@ -32,25 +32,32 @@ describe('ThemeProvider', () => {
32
32
  expect(screen.getByText('nested-personal').parentElement).toHaveClass('np-theme-personal');
33
33
  });
34
34
 
35
- it('can nest theme providers', () => {
35
+ it('tests deprecated light theme normalization', () => {
36
36
  render(
37
37
  <ThemeProvider theme="light">
38
38
  <div>light</div>
39
39
  <ThemeProvider theme="personal">
40
40
  <div>personal</div>
41
- <ThemeProvider theme="light">
42
- <div>light</div>
43
- </ThemeProvider>
41
+ </ThemeProvider>
42
+ <ThemeProvider theme="personal" screenMode="dark">
43
+ <div>personal-dark</div>
44
44
  </ThemeProvider>
45
45
  </ThemeProvider>,
46
46
  );
47
47
 
48
- // The first provider will not have a className attached to it
49
- expect(screen.getAllByText('light')[0]).not.toHaveClass('np-theme-light');
48
+ // root 'light' theme is normalized to 'personal'
49
+ expect(document.documentElement).toHaveClass('np-theme-personal');
50
+
51
+ // 'light' theme is normalized to 'personal'
52
+ // eslint-disable-next-line testing-library/no-node-access
53
+ expect(screen.getByText('light').parentElement).toHaveClass('np-theme-personal');
50
54
  // eslint-disable-next-line testing-library/no-node-access
51
55
  expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
52
56
  // eslint-disable-next-line testing-library/no-node-access
53
- expect(screen.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
57
+ expect(screen.getByText('personal-dark').parentElement).toHaveClass(
58
+ 'np-theme-personal',
59
+ 'np-theme-personal--dark',
60
+ );
54
61
  });
55
62
 
56
63
  it('updates theming setting based of props updates', async () => {
@@ -165,20 +172,4 @@ describe('ThemeProvider', () => {
165
172
  'np-theme-business--forest-green',
166
173
  );
167
174
  });
168
-
169
- it('matches snapshot', () => {
170
- const { asFragment } = render(
171
- <ThemeProvider theme="light">
172
- <div>light</div>
173
- <ThemeProvider theme="personal">
174
- <div>personal</div>
175
- <ThemeProvider theme="light">
176
- <div>light</div>
177
- </ThemeProvider>
178
- </ThemeProvider>
179
- </ThemeProvider>,
180
- );
181
-
182
- expect(asFragment()).toMatchSnapshot();
183
- });
184
175
  });
@@ -3,7 +3,7 @@ import { PropsWithChildren, useContext, useEffect, useMemo, useState } from 'rea
3
3
  import { ThemedChildren } from './ThemedChildren';
4
4
  import type { Theming } from './const';
5
5
  import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
6
- import { getThemeClassName } from './helpers';
6
+ import { getThemeClassName, normalizeTheme } from './helpers';
7
7
  import { ThemeContext } from './ThemeProviderContext';
8
8
 
9
9
  export type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };
@@ -18,12 +18,12 @@ export const ThemeProvider = ({
18
18
  className = undefined,
19
19
  }: ThemeProviderProps) => {
20
20
  const isContextRoot = useContext(ThemeContext) === undefined;
21
- const [theme, setTheme] = useState(initialTheme);
21
+ const [theme, setTheme] = useState(normalizeTheme(initialTheme));
22
22
  const [screenMode, setScreenMode] = useState(initialScreenMode);
23
23
 
24
24
  // Update state when props change (for controlled usage)
25
25
  useEffect(() => {
26
- setTheme(initialTheme);
26
+ setTheme(normalizeTheme(initialTheme));
27
27
  }, [initialTheme]);
28
28
 
29
29
  useEffect(() => {
package/src/const.ts CHANGED
@@ -2,6 +2,9 @@
2
2
  export const baseThemes = ['light', 'personal', 'business'] as const;
3
3
  export const extraThemes = ['forest-green', 'bright-green'] as const;
4
4
  export const screenModes = ['light', 'dark'] as const;
5
+ /**
6
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
7
+ */
5
8
  export const modernThemes = [baseThemes[1], baseThemes[2], ...extraThemes] as const;
6
9
  export const businessThemes = [
7
10
  'business',
@@ -12,6 +15,9 @@ export const platformThemes = ['platform', 'platform--forest-green'] as const;
12
15
 
13
16
  // TODO: componentThemes returned back for backward compatibility, refactor this place in the future
14
17
  export type ComponentTheme = (typeof baseThemes)[number];
18
+ /**
19
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
20
+ */
15
21
  export type ModernTheme = (typeof modernThemes)[number];
16
22
  export type BaseTheme = (typeof baseThemes)[number];
17
23
  export type ExtraTheme = (typeof extraThemes)[number];
@@ -24,7 +30,7 @@ export type BusinessTheme = (typeof businessThemes)[0];
24
30
  export type BusinessForestGreenTheme = (typeof businessThemes)[1];
25
31
  export type BusinessBrightGreenTheme = (typeof businessThemes)[2];
26
32
 
27
- export const DEFAULT_BASE_THEME = 'light';
33
+ export const DEFAULT_BASE_THEME = 'personal';
28
34
  export const DEFAULT_SCREEN_MODE = 'light';
29
35
 
30
36
  export type Theming = {
package/src/helpers.ts CHANGED
@@ -8,8 +8,10 @@ import type {
8
8
  } from './const';
9
9
  import { extraThemes, screenModes, modernThemes } from './const';
10
10
 
11
- export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme =>
12
- modernThemes.includes(theme as ModernTheme);
11
+ /**
12
+ * @deprecated "modern" theme is released, you should not need check for "modern" theme anymore
13
+ */
14
+ export const isThemeModern = (theme: NonNullable<Theming['theme']>): theme is ModernTheme => true;
13
15
 
14
16
  export const isExtraTheme = (theme: NonNullable<Theming['theme']>): theme is ExtraTheme =>
15
17
  extraThemes.includes(theme as ExtraTheme);
@@ -21,14 +23,9 @@ export const isForestGreenTheme = (
21
23
  export const isScreenModeDark = (
22
24
  theme: NonNullable<Theming['theme']>,
23
25
  screenMode: ScreenMode,
24
- ): screenMode is ScreenModeDark =>
25
- isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;
26
+ ): screenMode is ScreenModeDark => screenModes[1] === screenMode;
26
27
 
27
28
  export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMode: ScreenMode) => {
28
- if (['light'].includes(theme)) {
29
- return `np-theme-${theme}`;
30
- }
31
-
32
29
  // Personal light is always there by default
33
30
  const themeClasses = ['np-theme-personal'];
34
31
 
@@ -64,3 +61,7 @@ export const getThemeClassName = (theme: NonNullable<Theming['theme']>, screenMo
64
61
  /* eslint-enable functional/immutable-data */
65
62
  return themeClasses.join(' ');
66
63
  };
64
+
65
+ export const normalizeTheme = (
66
+ theme: NonNullable<Theming['theme']>,
67
+ ): NonNullable<Theming['theme']> => (theme === 'light' ? 'personal' : theme);
package/src/index.ts CHANGED
@@ -1,6 +1,15 @@
1
1
  'use client';
2
2
 
3
- export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
3
+ export type {
4
+ ComponentTheme,
5
+ BaseTheme,
6
+ ExtraTheme,
7
+ ScreenMode,
8
+ Theming,
9
+ DEFAULT_BASE_THEME,
10
+ DEFAULT_SCREEN_MODE,
11
+ } from './const';
12
+
4
13
  export {
5
14
  isThemeModern,
6
15
  isExtraTheme,
@@ -15,10 +15,10 @@ describe('useTheme', () => {
15
15
  expect(current).toMatchObject({
16
16
  theme: DEFAULT_BASE_THEME,
17
17
  screenMode: DEFAULT_SCREEN_MODE,
18
- isModern: false,
18
+ isModern: true,
19
19
  isForestGreenTheme: false,
20
20
  isScreenModeDark: false,
21
- className: 'np-theme-light',
21
+ className: 'np-theme-personal',
22
22
  });
23
23
  expect(current.setTheme).toBeInstanceOf(Function);
24
24
  expect(current.setScreenMode).toBeInstanceOf(Function);
@@ -83,20 +83,39 @@ describe('useTheme', () => {
83
83
  expect(current.setScreenMode).toBeInstanceOf(Function);
84
84
  });
85
85
 
86
- it('returns default screen mode if used default light theme', () => {
86
+ it('returns default screen mode if used light theme', () => {
87
87
  const {
88
88
  result: { current },
89
89
  } = renderHook(() => useTheme(), {
90
- wrapper: (props) => <ThemeProvider theme={DEFAULT_BASE_THEME} screenMode="dark" {...props} />,
90
+ wrapper: (props) => <ThemeProvider theme="light" {...props} />,
91
91
  });
92
92
 
93
93
  expect(current).toMatchObject({
94
94
  theme: DEFAULT_BASE_THEME,
95
95
  screenMode: DEFAULT_SCREEN_MODE,
96
- isModern: false,
96
+ isModern: true,
97
97
  isForestGreenTheme: false,
98
98
  isScreenModeDark: false,
99
- className: 'np-theme-light',
99
+ className: 'np-theme-personal',
100
+ });
101
+ expect(current.setTheme).toBeInstanceOf(Function);
102
+ expect(current.setScreenMode).toBeInstanceOf(Function);
103
+ });
104
+
105
+ it('returns dark screen mode if used light theme + dark screen mode', () => {
106
+ const {
107
+ result: { current },
108
+ } = renderHook(() => useTheme(), {
109
+ wrapper: (props) => <ThemeProvider theme="light" screenMode="dark" {...props} />,
110
+ });
111
+
112
+ expect(current).toMatchObject({
113
+ theme: DEFAULT_BASE_THEME,
114
+ screenMode: 'dark',
115
+ isModern: true,
116
+ isForestGreenTheme: false,
117
+ isScreenModeDark: true,
118
+ className: 'np-theme-personal np-theme-personal--dark',
100
119
  });
101
120
  expect(current.setTheme).toBeInstanceOf(Function);
102
121
  expect(current.setScreenMode).toBeInstanceOf(Function);
@@ -137,10 +156,10 @@ describe('useTheme', () => {
137
156
  expect(productionValue).toMatchObject({
138
157
  theme: DEFAULT_BASE_THEME,
139
158
  screenMode: DEFAULT_SCREEN_MODE,
140
- isModern: false,
159
+ isModern: true,
141
160
  isForestGreenTheme: false,
142
161
  isScreenModeDark: false,
143
- className: 'np-theme-light',
162
+ className: 'np-theme-personal',
144
163
  });
145
164
  expect(productionValue.setTheme).toBeInstanceOf(Function);
146
165
  expect(productionValue.setScreenMode).toBeInstanceOf(Function);
@@ -162,10 +181,10 @@ describe('useTheme', () => {
162
181
  expect(stagingValue).toMatchObject({
163
182
  theme: DEFAULT_BASE_THEME,
164
183
  screenMode: DEFAULT_SCREEN_MODE,
165
- isModern: false,
184
+ isModern: true,
166
185
  isForestGreenTheme: false,
167
186
  isScreenModeDark: false,
168
- className: 'np-theme-light',
187
+ className: 'np-theme-personal',
169
188
  });
170
189
  expect(stagingValue.setTheme).toBeInstanceOf(Function);
171
190
  expect(stagingValue.setScreenMode).toBeInstanceOf(Function);
@@ -187,10 +206,10 @@ describe('useTheme', () => {
187
206
  expect(localhostValue).toMatchObject({
188
207
  theme: DEFAULT_BASE_THEME,
189
208
  screenMode: DEFAULT_SCREEN_MODE,
190
- isModern: false,
209
+ isModern: true,
191
210
  isForestGreenTheme: false,
192
211
  isScreenModeDark: false,
193
- className: 'np-theme-light',
212
+ className: 'np-theme-personal',
194
213
  });
195
214
  expect(localhostValue.setTheme).toBeInstanceOf(Function);
196
215
  expect(localhostValue.setScreenMode).toBeInstanceOf(Function);
@@ -210,10 +229,10 @@ describe('useTheme', () => {
210
229
  expect(noHostnameValue).toMatchObject({
211
230
  theme: DEFAULT_BASE_THEME,
212
231
  screenMode: DEFAULT_SCREEN_MODE,
213
- isModern: false,
232
+ isModern: true,
214
233
  isForestGreenTheme: false,
215
234
  isScreenModeDark: false,
216
- className: 'np-theme-light',
235
+ className: 'np-theme-personal',
217
236
  });
218
237
  expect(noHostnameValue.setTheme).toBeInstanceOf(Function);
219
238
  expect(noHostnameValue.setScreenMode).toBeInstanceOf(Function);
package/src/useTheme.ts CHANGED
@@ -8,6 +8,9 @@ import { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName
8
8
  interface ThemeHookValue {
9
9
  theme: NonNullable<Theming['theme']>;
10
10
  screenMode: ScreenMode;
11
+ /**
12
+ * @deprecated there is no more such thing as "modern" theme
13
+ */
11
14
  isModern: boolean;
12
15
  isForestGreenTheme: boolean;
13
16
  isScreenModeDark: boolean;
@@ -39,19 +42,15 @@ export const useTheme = (): ThemeHookValue => {
39
42
  console.warn('Call to useTheme outside a ThemeProvider');
40
43
  }
41
44
 
42
- const {
43
- theme,
44
- screenMode: contextScreenMode,
45
- setTheme,
46
- setScreenMode,
47
- } = theming ?? FALLBACK_VALUES;
48
-
49
- const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
45
+ const { theme, screenMode, setTheme, setScreenMode } = theming ?? FALLBACK_VALUES;
50
46
 
51
47
  return useMemo(
52
48
  () => ({
53
49
  theme,
54
50
  screenMode,
51
+ /**
52
+ * @deprecated there is no more such thing as "modern" theme
53
+ */
55
54
  isModern: isThemeModern(theme),
56
55
  isForestGreenTheme: isForestGreenTheme(theme),
57
56
  isScreenModeDark: isScreenModeDark(theme, screenMode),
@@ -1,27 +0,0 @@
1
- // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
-
3
- exports[`ThemeProvider matches snapshot 1`] = `
4
- <DocumentFragment>
5
- <div
6
- class="np-theme-light"
7
- >
8
- <div>
9
- light
10
- </div>
11
- <div
12
- class="np-theme-personal"
13
- >
14
- <div>
15
- personal
16
- </div>
17
- <div
18
- class="np-theme-light"
19
- >
20
- <div>
21
- light
22
- </div>
23
- </div>
24
- </div>
25
- </div>
26
- </DocumentFragment>
27
- `;