@wise/components-theming 1.1.0 → 1.2.1

package/dist/ThemeProvider.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
+import type { ScreenMode, Theming } from './const';
 export declare const ThemeContext: import("react").Context<{
-    theme: ComponentTheme | BaseTheme | ExtraTheme;
+    theme: NonNullable<Theming['theme']>;
     screenMode: ScreenMode;
 } | undefined>;
 type ThemeProviderProps = PropsWithChildren<Theming> & {

package/dist/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAGzF,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAI1F,eAAO,MAAM,YAAY;WAEZ,cAAc,GAAG,SAAS,GAAG,UAAU;gBAClC,UAAU;cAGhB,CAAC;AAEb,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE9E,eAAO,MAAM,aAAa,mEAMvB,kBAAkB,gCA6BpB,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAGzF,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAInD,eAAO,MAAM,YAAY;WAEZ,YAAY,OAAO,CAAC,OAAO,CAAC,CAAC;gBACxB,UAAU;cAGhB,CAAC;AAEb,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAK9E,eAAO,MAAM,aAAa,mEAMvB,kBAAkB,gCAyBpB,CAAC"}

package/dist/const.d.ts

@@ -2,6 +2,7 @@ export declare const baseThemes: readonly ["light", "personal"];
 export declare const extraThemes: readonly ["forest-green", "bright-green"];
 export declare const screenModes: readonly ["light", "dark"];
 export declare const modernThemes: readonly ["personal", "forest-green", "bright-green"];
+export declare const platformThemes: readonly ["platform", "platform--forest-green"];
 export type ComponentTheme = (typeof baseThemes)[number];
 export type ModernTheme = (typeof modernThemes)[number];
 export type BaseTheme = (typeof baseThemes)[number];
@@ -9,10 +10,12 @@ export type ExtraTheme = (typeof extraThemes)[number];
 export type ForestGreenTheme = (typeof extraThemes)[0];
 export type ScreenMode = (typeof screenModes)[number];
 export type ScreenModeDark = (typeof screenModes)[1];
+export type PlatformTheme = (typeof platformThemes)[0];
+export type PlatformForestGreenTheme = (typeof platformThemes)[1];
 export declare const DEFAULT_BASE_THEME: "light";
 export declare const DEFAULT_SCREEN_MODE: "light";
 export type Theming = {
-    theme?: ComponentTheme | BaseTheme | ExtraTheme;
+    theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
     screenMode?: ScreenMode;
     isNotRootProvider?: boolean | undefined;
 };

package/dist/const.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,gCAAiC,CAAC;AACzD,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,uDAA2C,CAAC;AAGrE,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;AAErD,eAAO,MAAM,kBAAkB,SAAmB,CAAC;AACnD,eAAO,MAAM,mBAAmB,SAAmB,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,CAAC;IAChD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}
+{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../src/const.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,gCAAiC,CAAC;AACzD,eAAO,MAAM,WAAW,2CAA4C,CAAC;AACrE,eAAO,MAAM,WAAW,4BAA6B,CAAC;AACtD,eAAO,MAAM,YAAY,uDAA2C,CAAC;AACrE,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;AAElE,eAAO,MAAM,kBAAkB,SAAmB,CAAC;AACnD,eAAO,MAAM,mBAAmB,SAAmB,CAAC;AAEpD,MAAM,MAAM,OAAO,GAAG;IACpB,KAAK,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,aAAa,GAAG,wBAAwB,CAAC;IAC3F,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAC"}

package/dist/helpers.d.ts

@@ -1,7 +1,7 @@
-import type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode } from './const';
-export declare const isThemeModern: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "personal" | "forest-green" | "bright-green";
-export declare const isExtraTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green" | "bright-green";
-export declare const isForestGreenTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green";
-export declare const isScreenModeDark: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "dark";
-export declare const getThemeClassName: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => string;
+import type { ScreenMode, Theming } from './const';
+export declare const isThemeModern: (theme: Theming['theme']) => theme is "personal" | "forest-green" | "bright-green";
+export declare const isExtraTheme: (theme: Theming['theme']) => theme is "forest-green" | "bright-green";
+export declare const isForestGreenTheme: (theme: Theming['theme']) => theme is "forest-green";
+export declare const isScreenModeDark: (theme: Theming['theme'], screenMode: ScreenMode) => screenMode is "dark";
+export declare const getThemeClassName: (theme: Theming['theme'], screenMode: ScreenMode) => string;
 //# sourceMappingURL=helpers.d.ts.map

package/dist/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,UAAU,EAEV,UAAU,EAEX,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,UACjB,cAAc,GAAG,SAAS,GAAG,UAAU,0DACsB,CAAC;AAEvE,eAAO,MAAM,YAAY,UAAW,cAAc,GAAG,SAAS,GAAG,UAAU,6CAChC,CAAC;AAE5C,eAAO,MAAM,kBAAkB,UACtB,cAAc,GAAG,SAAS,GAAG,UAAU,4BACQ,CAAC;AAEzD,eAAO,MAAM,gBAAgB,UACpB,cAAc,GAAG,SAAS,GAAG,UAAU,cAClC,UAAU,yBAE8C,CAAC;AAEvE,eAAO,MAAM,iBAAiB,UACrB,cAAc,GAAG,SAAS,GAAG,UAAU,cAClC,UAAU,WAevB,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../src/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,UAAU,EAEV,OAAO,EACR,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,aAAa,UAAW,OAAO,CAAC,OAAO,CAAC,0DACR,CAAC;AAE9C,eAAO,MAAM,YAAY,UAAW,OAAO,CAAC,OAAO,CAAC,6CACT,CAAC;AAE5C,eAAO,MAAM,kBAAkB,UAAW,OAAO,CAAC,OAAO,CAAC,4BAChC,CAAC;AAE3B,eAAO,MAAM,gBAAgB,UACpB,OAAO,CAAC,OAAO,CAAC,cACX,UAAU,yBAE8C,CAAC;AAEvE,eAAO,MAAM,iBAAiB,UAAW,OAAO,CAAC,OAAO,CAAC,cAAc,UAAU,WAchF,CAAC"}

package/dist/index.js

@@ -22,7 +22,7 @@ const isForestGreenTheme = theme => theme === extraThemes[0];
 const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
   if (!isThemeModern(theme)) {
-    return `np-theme-${theme}`;
+    return `np-theme-${theme || 'personal'}`;
   }
   let classes = `np-theme-personal`;
   if (isExtraTheme(theme)) {
@@ -79,6 +79,8 @@ const ThemedChildren = ({
 };
 
 const ThemeContext = /*#__PURE__*/react.createContext(undefined);
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
@@ -87,9 +89,6 @@ const ThemeProvider = ({
   className = undefined
 }) => {
   const isContextRoot = react.useContext(ThemeContext) === undefined;
-  // RegEx to check for `np-theme-` class name
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
   // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -101,7 +100,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = react.useMemo(() => ({
     theme,
     screenMode

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","includes","theme","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","FALLBACK_VALUES","isNotProduction","ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","useContext","ThemeContext","RegExp"],"mappings":";;;;;;;;;;AACA;AACO,MAAAA,UAAiB,GAAA,CAAA,OAAA,EAAA,UAAA,CAAA,CAAA;AACjB,MAAAC,WAAiB,GAAA,CAAA,cAAA,EAAA,cAAA,CAAA,CAAA;AACjB,MAAAC,WAAkB,GAAA,CAAA,OAAA,EAAA,MAAA,CAAA,CAAA;AAGnB,MAAoBC,YAAA,GAAA,CAAGH,kBAAkBC,WAAU,CAAA,CAAA;AACnD,MAAiBG,kBAAI,GAAO;AAC5B,MAAeC,mBAAW,UAAU;;ACEnC,MAAAC,qBACE,IAAAH,YAAA,CAAAI,QAAiB,CAASC,KAAA,EAAA;AAG5B,MAAAC,oBAA6B,IAAAR,WAAA,CAAAM,SAAiBC,KAAS,EAAA;AAGvD,MAAAE,0BACE,IAAAF,KAAA,KAAAP,WAAiB,CAAS,CAAA,EAAA;MAG5BU,gBAAsB,GAAAA,CAAAH,KAAA,EAAAI,UACN,KAAAN,aAAY,CAAAE,KAAA,CAAA,IAAaN,WAAA,CAAA,CAAA,CAAA,KAAAU,WACxB;MAIjBC,iBAAuB,GAAAA,CAAAL,KAAA,EAAAI,UACP,KAAA;;;;;;;;;;;;;MCnBbE,eAAS,GAAC;AAClBN,EAAAA,KAAkB,EAAAJ;AAClBQ,EAAAA,UAAgB,EAAAP,mBAAAA;;AAEjB,MAAAU,eAAA,GAAAA,MAAA;EAeD,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBsC,MAAAC,cAAU,GAAAA,CAAA;AAAAC,EAAAA,SAAA,GAAAC,SAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,KAAA;EAAC,MAAQ;AAAAF,IAAAA,WAAWG,UAAAA;GAAA,GAAAC,QAAA,EAAA,CAAA;AAAG,EAAA,oBAAAC,cAAA,CAAA,KAAA,EAAA;AAAAL,IAAAA,SAAA,EAAAM,2BAAA,CAAAH,UAAA,EAAAH,SAAA,CAAA;AAAAE,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAEvE,CAAA;;kBCG4B,gBAAAK,mBAAA,CAAAN,SAAA,CAAA,CAAA;mBAGf,GAAAO,CAAA;AAAAjB,EAAAA,KAAA,GAAAJ,kBAAA;AAAAQ,EAAAA,UAAA,GAAAP,mBAAA;AAAAqB,EAAAA,iBAAA,GAAA,KAAA;EAAAP,QAAA;AAAAF,EAAAA,SAAA,GAAAC,SAAAA;AAAA,CAAA,KAAA;AAEb,EAAA,mBAAuB,GAAGS,gBAAA,CAAAC,YAAkB,CAAA,KAAWV,SAAA,CAAA;AAAE;AAAqB;EAE9E,MAAAE,UAAa,GAAA,IAAAS,MAAA,CAAa,sBAMvB,EAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] 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];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","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: Theming['theme']): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: Theming['theme']): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (theme: Theming['theme']): theme is ForestGreenTheme =>\n  theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: Theming['theme'],\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: Theming['theme'], screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\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: Theming['theme'];\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\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: contextScreenMode } = 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    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && 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  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","undefined","children","themeClass","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","isContextRoot","useEffect","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/dist/index.mjs

@@ -16,7 +16,7 @@ const isForestGreenTheme = theme => theme === extraThemes[0];
 const isScreenModeDark = (theme, screenMode) => isThemeModern(theme) && screenModes[1] === screenMode;
 const getThemeClassName = (theme, screenMode) => {
   if (!isThemeModern(theme)) {
-    return `np-theme-${theme}`;
+    return `np-theme-${theme || 'personal'}`;
   }
   let classes = `np-theme-personal`;
   if (isExtraTheme(theme)) {
@@ -73,6 +73,8 @@ const ThemedChildren = ({
 };
 
 const ThemeContext = /*#__PURE__*/createContext(undefined);
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
 const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
@@ -81,9 +83,6 @@ const ThemeProvider = ({
   className = undefined
 }) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
-  // RegEx to check for `np-theme-` class name
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -95,7 +94,7 @@ const ThemeProvider = ({
         document.documentElement.classList.add(item);
       });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
   const contextValue = useMemo(() => ({
     theme,
     screenMode

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","includes","theme","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","FALLBACK_VALUES","isNotProduction","ThemedChildren","className","undefined","children","themeClass","useTheme","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","useContext","ThemeContext","RegExp"],"mappings":";;;;AACA;AACO,MAAAA,UAAiB,GAAA,CAAA,OAAA,EAAA,UAAA,CAAA,CAAA;AACjB,MAAAC,WAAiB,GAAA,CAAA,cAAA,EAAA,cAAA,CAAA,CAAA;AACjB,MAAAC,WAAkB,GAAA,CAAA,OAAA,EAAA,MAAA,CAAA,CAAA;AAGnB,MAAoBC,YAAA,GAAA,CAAGH,kBAAkBC,WAAU,CAAA,CAAA;AACnD,MAAiBG,kBAAI,GAAO;AAC5B,MAAeC,mBAAW,UAAU;;ACEnC,MAAAC,qBACE,IAAAH,YAAA,CAAAI,QAAiB,CAASC,KAAA,EAAA;AAG5B,MAAAC,oBAA6B,IAAAR,WAAA,CAAAM,SAAiBC,KAAS,EAAA;AAGvD,MAAAE,0BACE,IAAAF,KAAA,KAAAP,WAAiB,CAAS,CAAA,EAAA;MAG5BU,gBAAsB,GAAAA,CAAAH,KAAA,EAAAI,UACN,KAAAN,aAAY,CAAAE,KAAA,CAAA,IAAaN,WAAA,CAAA,CAAA,CAAA,KAAAU,WACxB;MAIjBC,iBAAuB,GAAAA,CAAAL,KAAA,EAAAI,UACP,KAAA;;;;;;;;;;;;;MCnBbE,eAAS,GAAC;AAClBN,EAAAA,KAAkB,EAAAJ;AAClBQ,EAAAA,UAAgB,EAAAP,mBAAAA;;AAEjB,MAAAU,eAAA,GAAAA,MAAA;EAeD,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBsC,MAAAC,cAAU,GAAAA,CAAA;AAAAC,EAAAA,SAAA,GAAAC,SAAA;AAAAC,EAAAA,QAAAA;AAAA,CAAA,KAAA;EAAC,MAAQ;AAAAF,IAAAA,WAAWG,UAAAA;GAAA,GAAAC,QAAA,EAAA,CAAA;AAAG,EAAA,oBAAAC,GAAA,CAAA,KAAA,EAAA;AAAAL,IAAAA,SAAA,EAAAM,UAAA,CAAAH,UAAA,EAAAH,SAAA,CAAA;AAAAE,IAAAA,QAAA,EAAAA,QAAAA;AAAA,GAAA,CAAA,CAAA;AAEvE,CAAA;;kBCG4B,gBAAAK,aAAA,CAAAN,SAAA,CAAA,CAAA;mBAGf,GAAAO,CAAA;AAAAjB,EAAAA,KAAA,GAAAJ,kBAAA;AAAAQ,EAAAA,UAAA,GAAAP,mBAAA;AAAAqB,EAAAA,iBAAA,GAAA,KAAA;EAAAP,QAAA;AAAAF,EAAAA,SAAA,GAAAC,SAAAA;AAAA,CAAA,KAAA;AAEb,EAAA,mBAAuB,GAAGS,UAAA,CAAAC,YAAkB,CAAA,KAAWV,SAAA,CAAA;AAAE;AAAqB;EAE9E,MAAAE,UAAa,GAAA,IAAAS,MAAA,CAAa,sBAMvB,EAAA,GAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../src/const.ts","../src/helpers.ts","../src/useTheme.ts","../src/ThemedChildren.tsx","../src/ThemeProvider.tsx"],"sourcesContent":["// TODO: Change 'light' with 'legacy' in the future\nexport const baseThemes = ['light', 'personal'] as const;\nexport const extraThemes = ['forest-green', 'bright-green'] as const;\nexport const screenModes = ['light', 'dark'] as const;\nexport const modernThemes = [baseThemes[1], ...extraThemes] 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];\n\nexport const DEFAULT_BASE_THEME = 'light' as const;\nexport const DEFAULT_SCREEN_MODE = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","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: Theming['theme']): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: Theming['theme']): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (theme: Theming['theme']): theme is ForestGreenTheme =>\n  theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: Theming['theme'],\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (theme: Theming['theme'], screenMode: ScreenMode) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme || 'personal'}`;\n  }\n\n  let classes = `np-theme-personal`;\n\n  if (isExtraTheme(theme)) {\n    classes += ` ${classes}--${theme}`;\n  } else if (screenModes[1] === screenMode) {\n    classes += ` ${classes}--${screenMode}`;\n  }\n\n  return classes;\n};\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\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: Theming['theme'];\n  screenMode: ScreenMode;\n  isModern: boolean;\n  isForestGreenTheme: boolean;\n  isScreenModeDark: boolean;\n  className: string;\n}\n\nconst FALLBACK_VALUES = {\n  theme: DEFAULT_BASE_THEME,\n  screenMode: DEFAULT_SCREEN_MODE,\n};\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: contextScreenMode } = 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    }),\n    [theme, screenMode],\n  );\n};\n","import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { className?: string; children: ReactNode };\n\nexport const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {\n  const { className: themeClass } = useTheme();\n\n  return <div className={classNames(themeClass, className)}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ScreenMode, Theming } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { getThemeClassName } from './helpers';\n\nexport const ThemeContext = createContext<\n  | {\n      theme: NonNullable<Theming['theme']>;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype 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 = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n  className = undefined,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (!isNotRootProvider && 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  }, [isNotRootProvider, isContextRoot, theme, screenMode]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren className={className}>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","undefined","children","themeClass","_jsx","classNames","createContext","ThemeProvider","isNotRootProvider","isContextRoot","useEffect","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/dist/useTheme.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';
+import type { ScreenMode, Theming } from './const';
 interface ThemeHookValue {
-    theme: ComponentTheme | BaseTheme | ExtraTheme;
+    theme: Theming['theme'];
     screenMode: ScreenMode;
     isModern: boolean;
     isForestGreenTheme: boolean;

package/dist/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../src/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIjF,UAAU,cAAc;IACtB,KAAK,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;CACnB;AAeD,eAAO,MAAM,QAAQ,QAAO,cAuB3B,CAAC"}
+{"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,OAAO,CAAC,OAAO,CAAC,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;CACnB;AAeD,eAAO,MAAM,QAAQ,QAAO,cAuB3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -12,33 +12,31 @@
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.22.15",
-    "classnames": "^2.3.2"
+    "@babel/runtime": "^7.24.5",
+    "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.22.15",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-typescript": "^11.1.3",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@transferwise/eslint-config": "^7.4.0",
-    "@tsconfig/recommended": "^1.0.2",
-    "@types/babel__core": "^7.20.1",
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@tsconfig/recommended": "^1.0.6",
+    "@types/babel__core": "^7.20.5",
     "@types/jest": "^29.5.12",
-    "@types/node": "^18.15.12",
-    "@types/react": "^17.0.65",
-    "@types/react-dom": "^17.0.20",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "classnames": "^2.3.2",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.25",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "classnames": "^2.5.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^3.28.1",
-    "typescript": "4.9.4"
+    "rollup": "^4.17.2",
+    "typescript": "4.9.5"
   },
   "peerDependencies": {
     "react": ">=16.14",
@@ -72,7 +70,7 @@
     "lint": "pnpm run lint:check",
     "lint:check": "npm-run-all --parallel lint:check:*",
     "lint:check:format": "prettier --check --ignore-path ../../.prettierignore .",
-    "lint:check:js+ts": "eslint --ext .js,.jsx,.mjs,.ts,.tsx,.mts --ignore-path ../../.gitignore .",
+    "lint:check:js+ts": "eslint --ext .js,.jsx,.mjs,.cjs,.ts,.tsx,.mts,.cts --ignore-path ../../.gitignore .",
     "lint:check:types": "tsc --noEmit --emitDeclarationOnly false",
     "lint:fix": "npm-run-all --serial lint:fix:*",
     "lint:fix:format": "prettier --write --ignore-path ../../.prettierignore .",

package/src/ThemeProvider.spec.tsx

@@ -26,6 +26,29 @@ describe('ThemeProvider', () => {
     expect(screen.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
   });
 
+  it('sets platform themes', () => {
+    render(
+      <ThemeProvider theme="personal">
+        <div>personal</div>
+        <ThemeProvider theme="platform">
+          <div>platform</div>
+        </ThemeProvider>
+        <ThemeProvider theme="platform--forest-green">
+          <div>platform--forest-green</div>
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('platform').parentElement).toHaveClass('np-theme-platform');
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('platform--forest-green').parentElement).toHaveClass(
+      'np-theme-platform--forest-green',
+    );
+  });
+
   it('matches snapshot', () => {
     const { asFragment } = render(
       <ThemeProvider theme="light">

package/src/ThemeProvider.tsx

@@ -1,13 +1,13 @@
 import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';
 
 import { ThemedChildren } from './ThemedChildren';
-import type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
+import type { ScreenMode, Theming } from './const';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
 import { getThemeClassName } from './helpers';
 
 export const ThemeContext = createContext<
   | {
-      theme: ComponentTheme | BaseTheme | ExtraTheme;
+      theme: NonNullable<Theming['theme']>;
       screenMode: ScreenMode;
     }
   | undefined
@@ -15,6 +15,9 @@ export const ThemeContext = createContext<
 
 type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };
 
+// RegEx to check for `np-theme-` class name
+const themeClass = /\bnp-theme-[a-z-]+\b/g;
+
 export const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
@@ -24,10 +27,6 @@ export const ThemeProvider = ({
 }: ThemeProviderProps) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
 
-  // RegEx to check for `np-theme-` class name
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
-
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (!isNotRootProvider && isContextRoot) {
@@ -41,7 +40,7 @@ export const ThemeProvider = ({
           document.documentElement.classList.add(item);
         });
     }
-  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  }, [isNotRootProvider, isContextRoot, theme, screenMode]);
 
   const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);
 

package/src/const.ts

@@ -3,6 +3,7 @@ export const baseThemes = ['light', 'personal'] as const;
 export const extraThemes = ['forest-green', 'bright-green'] as const;
 export const screenModes = ['light', 'dark'] as const;
 export const modernThemes = [baseThemes[1], ...extraThemes] as const;
+export const platformThemes = ['platform', 'platform--forest-green'] as const;
 
 // TODO: componentThemes returned back for backward compatibility, refactor this place in the future
 export type ComponentTheme = (typeof baseThemes)[number];
@@ -12,12 +13,14 @@ export type ExtraTheme = (typeof extraThemes)[number];
 export type ForestGreenTheme = (typeof extraThemes)[0];
 export type ScreenMode = (typeof screenModes)[number];
 export type ScreenModeDark = (typeof screenModes)[1];
+export type PlatformTheme = (typeof platformThemes)[0];
+export type PlatformForestGreenTheme = (typeof platformThemes)[1];
 
 export const DEFAULT_BASE_THEME = 'light' as const;
 export const DEFAULT_SCREEN_MODE = 'light' as const;
 
 export type Theming = {
-  theme?: ComponentTheme | BaseTheme | ExtraTheme;
+  theme?: ComponentTheme | BaseTheme | ExtraTheme | PlatformTheme | PlatformForestGreenTheme;
   screenMode?: ScreenMode;
   isNotRootProvider?: boolean | undefined;
 };

package/src/helpers.ts

@@ -1,37 +1,31 @@
 import type {
-  ComponentTheme,
   ModernTheme,
-  BaseTheme,
   ExtraTheme,
   ForestGreenTheme,
   ScreenMode,
   ScreenModeDark,
+  Theming,
 } from './const';
 import { extraThemes, screenModes, modernThemes } from './const';
 
-export const isThemeModern = (
-  theme: ComponentTheme | BaseTheme | ExtraTheme,
-): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);
+export const isThemeModern = (theme: Theming['theme']): theme is ModernTheme =>
+  modernThemes.includes(theme as ModernTheme);
 
-export const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>
+export const isExtraTheme = (theme: Theming['theme']): theme is ExtraTheme =>
   extraThemes.includes(theme as ExtraTheme);
 
-export const isForestGreenTheme = (
-  theme: ComponentTheme | BaseTheme | ExtraTheme,
-): theme is ForestGreenTheme => theme === extraThemes[0];
+export const isForestGreenTheme = (theme: Theming['theme']): theme is ForestGreenTheme =>
+  theme === extraThemes[0];
 
 export const isScreenModeDark = (
-  theme: ComponentTheme | BaseTheme | ExtraTheme,
+  theme: Theming['theme'],
   screenMode: ScreenMode,
 ): screenMode is ScreenModeDark =>
   isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;
 
-export const getThemeClassName = (
-  theme: ComponentTheme | BaseTheme | ExtraTheme,
-  screenMode: ScreenMode,
-) => {
+export const getThemeClassName = (theme: Theming['theme'], screenMode: ScreenMode) => {
   if (!isThemeModern(theme)) {
-    return `np-theme-${theme}`;
+    return `np-theme-${theme || 'personal'}`;
   }
 
   let classes = `np-theme-personal`;

package/src/useTheme.ts

@@ -1,12 +1,12 @@
 import { useContext, useMemo } from 'react';
 
 import { ThemeContext } from './ThemeProvider';
-import type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';
+import type { ScreenMode, Theming } from './const';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
 import { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';
 
 interface ThemeHookValue {
-  theme: ComponentTheme | BaseTheme | ExtraTheme;
+  theme: Theming['theme'];
   screenMode: ScreenMode;
   isModern: boolean;
   isForestGreenTheme: boolean;