@wise/components-theming 0.7.4 → 0.8.0

package/dist/cjs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PropsWithChildren } from "react";
 // TODO: Change 'light' with 'legacy' in the future
 declare const baseThemes: readonly [
@@ -25,17 +24,21 @@ type Theming = {
 };
 declare const isThemeModern: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "personal" | "forest-green" | "bright-green";
 declare const isExtraTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green" | "bright-green";
+declare const isForestGreenTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green";
 declare const isScreenModeDark: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "dark";
 declare const getThemeClassName: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => string;
-type ThemeProviderProps = PropsWithChildren<Theming>;
-declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children }: ThemeProviderProps) => JSX.Element;
+type ThemeProviderProps = PropsWithChildren<Theming> & {
+    className?: string;
+};
+declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className }: ThemeProviderProps) => JSX.Element;
 interface ThemeHookValue {
     theme: ComponentTheme | BaseTheme | ExtraTheme;
     screenMode: ScreenMode;
     isModern: boolean;
+    isForestGreenTheme: boolean;
     isScreenModeDark: boolean;
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
 export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming };
-export { isThemeModern, isExtraTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };
+export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -2,6 +2,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var classNames = require('classnames');
 
 // TODO: Change 'light' with 'legacy' in the future
 var baseThemes = ['light', 'personal'];
@@ -17,6 +18,9 @@ var isThemeModern = function isThemeModern(theme) {
 var isExtraTheme = function isExtraTheme(theme) {
   return extraThemes.includes(theme);
 };
+var isForestGreenTheme = function isForestGreenTheme(theme) {
+  return theme === extraThemes[0];
+};
 var isScreenModeDark = function isScreenModeDark(theme, screenMode) {
   return isThemeModern(theme) && screenModes[1] === screenMode;
 };
@@ -24,15 +28,12 @@ var getThemeClassName = function getThemeClassName(theme, screenMode) {
   if (!isThemeModern(theme)) {
     return "np-theme-".concat(theme);
   }
-
   var classes = "np-theme-personal";
-
   if (isExtraTheme(theme)) {
     classes += " ".concat(classes, "--").concat(theme);
   } else if (screenModes[1] === screenMode) {
     classes += " ".concat(classes, "--").concat(screenMode);
   }
-
   return classes;
 };
 
@@ -40,7 +41,6 @@ var FALLBACK_VALUES = {
   theme: DEFAULT_BASE_THEME,
   screenMode: DEFAULT_SCREEN_MODE
 };
-
 var isNotProduction = function isNotProduction() {
   try {
     return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
@@ -48,25 +48,22 @@ var isNotProduction = function isNotProduction() {
     return false;
   }
 };
-
 var useTheme = function useTheme() {
   var theming = react.useContext(ThemeContext);
-
   if (!theming && isNotProduction()) {
     // eslint-disable-next-line no-console
     console.warn('Call to useTheme outside a ThemeProvider');
   }
-
   var _ref = theming !== null && theming !== void 0 ? theming : FALLBACK_VALUES,
-      theme = _ref.theme,
-      contextScreenMode = _ref.screenMode;
-
+    theme = _ref.theme,
+    contextScreenMode = _ref.screenMode;
   var screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
   return react.useMemo(function () {
     return {
       theme: theme,
       screenMode: screenMode,
       isModern: isThemeModern(theme),
+      isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),
       className: getThemeClassName(theme, screenMode)
     };
@@ -74,13 +71,13 @@ var useTheme = function useTheme() {
 };
 
 var ThemedChildren = function ThemedChildren(_ref) {
-  var children = _ref.children;
-
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    children = _ref.children;
   var _useTheme = useTheme(),
-      className = _useTheme.className;
-
+    themeClass = _useTheme.className;
   return jsxRuntime.jsx("div", {
-    className: className,
+    className: classNames.default(themeClass, className),
     children: children
   });
 };
@@ -88,21 +85,22 @@ var ThemedChildren = function ThemedChildren(_ref) {
 var ThemeContext = /*#__PURE__*/react.createContext(undefined);
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_BASE_THEME : _ref$theme,
-      _ref$screenMode = _ref.screenMode,
-      screenMode = _ref$screenMode === void 0 ? DEFAULT_SCREEN_MODE : _ref$screenMode,
-      _ref$isNotRootProvide = _ref.isNotRootProvider,
-      isNotRootProvider = _ref$isNotRootProvide === void 0 ? false : _ref$isNotRootProvide,
-      children = _ref.children;
-  var isContextRoot = react.useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
+    theme = _ref$theme === void 0 ? DEFAULT_BASE_THEME : _ref$theme,
+    _ref$screenMode = _ref.screenMode,
+    screenMode = _ref$screenMode === void 0 ? DEFAULT_SCREEN_MODE : _ref$screenMode,
+    _ref$isNotRootProvide = _ref.isNotRootProvider,
+    isNotRootProvider = _ref$isNotRootProvide === void 0 ? false : _ref$isNotRootProvide,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className;
+  var isContextRoot = react.useContext(ThemeContext) === undefined;
+  // RegEx to check for `np-theme-` class name
   // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g'); // useEffect hook used to apply the theme class to the HTML element
-
+  var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
+  // useEffect hook used to apply the theme class to the HTML element
   react.useEffect(function () {
     if (!isNotRootProvider && isContextRoot) {
       var _document$documentEle;
-
       // Remove all the theme classes from the documentElement
       (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.forEach(function (item) {
         document.documentElement.classList.remove(item);
@@ -121,6 +119,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
   return jsxRuntime.jsx(ThemeContext.Provider, {
     value: contextValue,
     children: jsxRuntime.jsx(ThemedChildren, {
+      className: className,
       children: children
     })
   });
@@ -129,6 +128,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
 exports.ThemeProvider = ThemeProvider;
 exports.getThemeClassName = getThemeClassName;
 exports.isExtraTheme = isExtraTheme;
+exports.isForestGreenTheme = isForestGreenTheme;
 exports.isScreenModeDark = isScreenModeDark;
 exports.isThemeModern = isThemeModern;
 exports.useTheme = useTheme;

package/dist/cjs/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":["// 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;\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 ScreenMode = typeof screenModes[number];\nexport type ScreenModeDark = typeof screenModes[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;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\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 { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: 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      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, 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: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\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, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isNotRootProvider","isContextRoot","themeClass","RegExp","useEffect","documentElement","match","forEach","item","document","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}
+{"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;\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];\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;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\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 { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\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 { ComponentTheme, BaseTheme, ExtraTheme, 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: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\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  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\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, themeClass]);\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","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/dist/es/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PropsWithChildren } from "react";
 // TODO: Change 'light' with 'legacy' in the future
 declare const baseThemes: readonly [
@@ -25,17 +24,21 @@ type Theming = {
 };
 declare const isThemeModern: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "personal" | "forest-green" | "bright-green";
 declare const isExtraTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green" | "bright-green";
+declare const isForestGreenTheme: (theme: ComponentTheme | BaseTheme | ExtraTheme) => theme is "forest-green";
 declare const isScreenModeDark: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => screenMode is "dark";
 declare const getThemeClassName: (theme: ComponentTheme | BaseTheme | ExtraTheme, screenMode: ScreenMode) => string;
-type ThemeProviderProps = PropsWithChildren<Theming>;
-declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children }: ThemeProviderProps) => JSX.Element;
+type ThemeProviderProps = PropsWithChildren<Theming> & {
+    className?: string;
+};
+declare const ThemeProvider: ({ theme, screenMode, isNotRootProvider, children, className }: ThemeProviderProps) => JSX.Element;
 interface ThemeHookValue {
     theme: ComponentTheme | BaseTheme | ExtraTheme;
     screenMode: ScreenMode;
     isModern: boolean;
+    isForestGreenTheme: boolean;
     isScreenModeDark: boolean;
     className: string;
 }
 declare const useTheme: () => ThemeHookValue;
 export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming };
-export { isThemeModern, isExtraTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };
+export { isThemeModern, isExtraTheme, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };

package/dist/es/index.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useMemo, createContext, useEffect } from 'react';
+import classNames from 'classnames';
 
 // TODO: Change 'light' with 'legacy' in the future
 var baseThemes = ['light', 'personal'];
@@ -15,6 +16,9 @@ var isThemeModern = function isThemeModern(theme) {
 var isExtraTheme = function isExtraTheme(theme) {
   return extraThemes.includes(theme);
 };
+var isForestGreenTheme = function isForestGreenTheme(theme) {
+  return theme === extraThemes[0];
+};
 var isScreenModeDark = function isScreenModeDark(theme, screenMode) {
   return isThemeModern(theme) && screenModes[1] === screenMode;
 };
@@ -22,15 +26,12 @@ var getThemeClassName = function getThemeClassName(theme, screenMode) {
   if (!isThemeModern(theme)) {
     return "np-theme-".concat(theme);
   }
-
   var classes = "np-theme-personal";
-
   if (isExtraTheme(theme)) {
     classes += " ".concat(classes, "--").concat(theme);
   } else if (screenModes[1] === screenMode) {
     classes += " ".concat(classes, "--").concat(screenMode);
   }
-
   return classes;
 };
 
@@ -38,7 +39,6 @@ var FALLBACK_VALUES = {
   theme: DEFAULT_BASE_THEME,
   screenMode: DEFAULT_SCREEN_MODE
 };
-
 var isNotProduction = function isNotProduction() {
   try {
     return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
@@ -46,25 +46,22 @@ var isNotProduction = function isNotProduction() {
     return false;
   }
 };
-
 var useTheme = function useTheme() {
   var theming = useContext(ThemeContext);
-
   if (!theming && isNotProduction()) {
     // eslint-disable-next-line no-console
     console.warn('Call to useTheme outside a ThemeProvider');
   }
-
   var _ref = theming !== null && theming !== void 0 ? theming : FALLBACK_VALUES,
-      theme = _ref.theme,
-      contextScreenMode = _ref.screenMode;
-
+    theme = _ref.theme,
+    contextScreenMode = _ref.screenMode;
   var screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
   return useMemo(function () {
     return {
       theme: theme,
       screenMode: screenMode,
       isModern: isThemeModern(theme),
+      isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),
       className: getThemeClassName(theme, screenMode)
     };
@@ -72,13 +69,13 @@ var useTheme = function useTheme() {
 };
 
 var ThemedChildren = function ThemedChildren(_ref) {
-  var children = _ref.children;
-
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    children = _ref.children;
   var _useTheme = useTheme(),
-      className = _useTheme.className;
-
+    themeClass = _useTheme.className;
   return jsx("div", {
-    className: className,
+    className: classNames(themeClass, className),
     children: children
   });
 };
@@ -86,21 +83,22 @@ var ThemedChildren = function ThemedChildren(_ref) {
 var ThemeContext = /*#__PURE__*/createContext(undefined);
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? DEFAULT_BASE_THEME : _ref$theme,
-      _ref$screenMode = _ref.screenMode,
-      screenMode = _ref$screenMode === void 0 ? DEFAULT_SCREEN_MODE : _ref$screenMode,
-      _ref$isNotRootProvide = _ref.isNotRootProvider,
-      isNotRootProvider = _ref$isNotRootProvide === void 0 ? false : _ref$isNotRootProvide,
-      children = _ref.children;
-  var isContextRoot = useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
+    theme = _ref$theme === void 0 ? DEFAULT_BASE_THEME : _ref$theme,
+    _ref$screenMode = _ref.screenMode,
+    screenMode = _ref$screenMode === void 0 ? DEFAULT_SCREEN_MODE : _ref$screenMode,
+    _ref$isNotRootProvide = _ref.isNotRootProvider,
+    isNotRootProvider = _ref$isNotRootProvide === void 0 ? false : _ref$isNotRootProvide,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className;
+  var isContextRoot = useContext(ThemeContext) === undefined;
+  // RegEx to check for `np-theme-` class name
   // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g'); // useEffect hook used to apply the theme class to the HTML element
-
+  var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
+  // useEffect hook used to apply the theme class to the HTML element
   useEffect(function () {
     if (!isNotRootProvider && isContextRoot) {
       var _document$documentEle;
-
       // Remove all the theme classes from the documentElement
       (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.forEach(function (item) {
         document.documentElement.classList.remove(item);
@@ -119,10 +117,11 @@ var ThemeProvider = function ThemeProvider(_ref) {
   return jsx(ThemeContext.Provider, {
     value: contextValue,
     children: jsx(ThemedChildren, {
+      className: className,
       children: children
     })
   });
 };
 
-export { ThemeProvider, getThemeClassName, isExtraTheme, isScreenModeDark, isThemeModern, useTheme };
+export { ThemeProvider, getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern, useTheme };
 //# sourceMappingURL=index.js.map

package/dist/es/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":["// 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;\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 ScreenMode = typeof screenModes[number];\nexport type ScreenModeDark = typeof screenModes[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;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\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 { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\n  screenMode: ScreenMode;\n  isModern: 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      isScreenModeDark: isScreenModeDark(theme, screenMode),\n      className: getThemeClassName(theme, screenMode),\n    }),\n    [theme, screenMode],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n\ntype ThemedChildrenProps = { children: ReactNode };\n\nexport const ThemedChildren = ({ children }: ThemedChildrenProps) => {\n  const { className } = useTheme();\n\n  return <div className={className}>{children}</div>;\n};\n","import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport type { ComponentTheme, BaseTheme, ExtraTheme, 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: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_BASE_THEME,\n  screenMode = DEFAULT_SCREEN_MODE,\n  isNotRootProvider = false,\n  children,\n}: ThemeProviderProps) => {\n  const isContextRoot = useContext(ThemeContext) === undefined;\n\n  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\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, themeClass]);\n\n  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["baseThemes","extraThemes","screenModes","modernThemes","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","useTheme","theming","useContext","ThemeContext","console","warn","contextScreenMode","useMemo","isModern","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isNotRootProvider","isContextRoot","themeClass","RegExp","useEffect","documentElement","match","forEach","item","document","classList","remove","split","add","contextValue","Provider","value"],"mappings":";;;AAAA;AACO,IAAMA,UAAU,GAAG,CAAC,OAAD,EAAU,UAAV,CAAnB,CAAA;AACA,IAAMC,WAAW,GAAG,CAAC,cAAD,EAAiB,cAAjB,CAApB,CAAA;AACA,IAAMC,WAAW,GAAG,CAAC,OAAD,EAAU,MAAV,CAApB,CAAA;AACA,IAAMC,YAAY,GAAIH,CAAAA,UAAU,CAAC,CAAD,CAAd,CAAsBC,CAAAA,MAAAA,CAAAA,WAAtB,CAAlB,CAAA;AAUA,IAAMG,kBAAkB,GAAG,OAA3B,CAAA;AACA,IAAMC,mBAAmB,GAAG,OAA5B;;ICLMC,aAAa,GAAG,SAAhBA,aAAgB,CAC3BC,KAD2B,EAAA;AAAA,EAAA,OAEFJ,YAAY,CAACK,QAAb,CAAsBD,KAAtB,CAFE,CAAA;AAAA,EAAtB;IAIME,YAAY,GAAG,SAAfA,YAAe,CAACF,KAAD,EAAA;AAAA,EAAA,OAC1BN,WAAW,CAACO,QAAZ,CAAqBD,KAArB,CAD0B,CAAA;AAAA,EAArB;AAGA,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,CAC9BH,KAD8B,EAE9BI,UAF8B,EAAA;EAAA,OAI9BL,aAAa,CAACC,KAAD,CAAb,IAAuCL,WAAW,CAAC,CAAD,CAAX,KAAmBS,UAJ5B,CAAA;AAAA,EAAzB;AAMA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAC/BL,KAD+B,EAE/BI,UAF+B,EAG7B;AACF,EAAA,IAAI,CAACL,aAAa,CAACC,KAAD,CAAlB,EAA2B;AACzB,IAAA,OAAA,WAAA,CAAA,MAAA,CAAmBA,KAAnB,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,IAAIM,OAAO,GAAX,mBAAA,CAAA;;AAEA,EAAA,IAAIJ,YAAY,CAACF,KAAD,CAAhB,EAAyB;AACvBM,IAAAA,OAAO,IAAQA,GAAAA,CAAAA,MAAAA,CAAAA,OAAR,EAAoBN,IAAAA,CAAAA,CAAAA,MAAAA,CAAAA,KAApB,CAAP,CAAA;GADF,MAEO,IAAIL,WAAW,CAAC,CAAD,CAAX,KAAmBS,UAAvB,EAAmC;AACxCE,IAAAA,OAAO,IAAQA,GAAAA,CAAAA,MAAAA,CAAAA,OAAR,EAAoBF,IAAAA,CAAAA,CAAAA,MAAAA,CAAAA,UAApB,CAAP,CAAA;AACD,GAAA;;AAED,EAAA,OAAOE,OAAP,CAAA;AACD;;ACzBD,IAAMC,eAAe,GAAG;AACtBP,EAAAA,KAAK,EAAEH,kBADe;AAEtBO,EAAAA,UAAU,EAAEN,mBAAAA;AAFU,CAAxB,CAAA;;AAKA,IAAMU,eAAe,GAAG,SAAlBA,eAAkB,GAAK;EAC3B,IAAI;AACF,IAAA,OAAO,CAAC,WAAD,EAAc,WAAd,CAA2BP,CAAAA,QAA3B,CAAoCQ,MAAM,CAACC,QAAP,CAAgBC,QAApD,CAAP,CAAA;AACD,GAFD,CAEE,OAAM,OAAA,EAAA;AACN,IAAA,OAAO,KAAP,CAAA;AACD,GAAA;AACF,CAND,CAAA;;AAQaC,IAAAA,QAAQ,GAAG,SAAXA,QAAW,GAAqB;AAC3C,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACC,YAAD,CAA1B,CAAA;;AAEA,EAAA,IAAI,CAACF,OAAD,IAAYL,eAAe,EAA/B,EAAmC;AACjC;IACAQ,OAAO,CAACC,IAAR,CAAa,0CAAb,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,IAAA,IAAA,GAAiDJ,OAAjD,KAAiDA,IAAAA,IAAAA,OAAjD,KAAiDA,KAAAA,CAAAA,GAAAA,OAAjD,GAA4DN,eAA5D;MAAQP,KAAR,QAAQA,KAAR;MAA2BkB,iBAA3B,QAAed,UAAf,CAAA;;EAEA,IAAMA,UAAU,GAAGJ,KAAK,KAAKH,kBAAV,GAA+BC,mBAA/B,GAAqDoB,iBAAxE,CAAA;AAEA,EAAA,OAAOC,OAAO,CACZ,YAAA;IAAA,OAAO;AACLnB,MAAAA,KAAK,EAALA,KADK;AAELI,MAAAA,UAAU,EAAVA,UAFK;AAGLgB,MAAAA,QAAQ,EAAErB,aAAa,CAACC,KAAD,CAHlB;AAILG,MAAAA,gBAAgB,EAAEA,gBAAgB,CAACH,KAAD,EAAQI,UAAR,CAJ7B;AAKLiB,MAAAA,SAAS,EAAEhB,iBAAiB,CAACL,KAAD,EAAQI,UAAR,CAAA;KAL9B,CAAA;AAAA,GADY,EAQZ,CAACJ,KAAD,EAAQI,UAAR,CARY,CAAd,CAAA;AAUD;;AC5CM,IAAMkB,cAAc,GAAG,SAAjBA,cAAiB,CAAsC,IAAA,EAAA;EAAA,IAAnCC,QAAmC,QAAnCA,QAAmC,CAAA;;AAClE,EAAA,IAAA,SAAA,GAAsBX,QAAQ,EAA9B;MAAQS,SAAR,aAAQA,SAAR,CAAA;;EAEA,OAAOG,GAAAA,CAAAA,KAAAA,EAAAA;AAAKH,IAAAA,SAAS,EAAEA,SAAhB;IAAyBE,QAAGA,EAAAA,QAAAA;GAAnC,CAAA,CAAA;AACD,CAJM;;ACCA,IAAMR,YAAY,gBAAGU,aAAa,CAMvCC,SANuC,CAAlC,CAAA;AAUMC,IAAAA,aAAa,GAAG,SAAhBA,aAAgB,CAKJ,IAAA,EAAA;AAAA,EAAA,IAAA,UAAA,GAAA,IAAA,CAJvB3B,KAIuB;MAJvBA,KAIuB,2BAJfH,kBAIe,GAAA,UAAA;AAAA,MAAA,eAAA,GAAA,IAAA,CAHvBO,UAGuB;MAHvBA,UAGuB,gCAHVN,mBAGU,GAAA,eAAA;AAAA,MAAA,qBAAA,GAAA,IAAA,CAFvB8B,iBAEuB;MAFvBA,iBAEuB,sCAFH,KAEG,GAAA,qBAAA;MADvBL,QACuB,QADvBA,QACuB,CAAA;EACvB,IAAMM,aAAa,GAAGf,UAAU,CAACC,YAAD,CAAV,KAA6BW,SAAnD,CADuB;AAIvB;;EACA,IAAMI,UAAU,GAAG,IAAIC,MAAJ,CAAW,sBAAX,EAAmC,GAAnC,CAAnB,CALuB;;AAQvBC,EAAAA,SAAS,CAAC,YAAK;AACb,IAAA,IAAI,CAACJ,iBAAD,IAAsBC,aAA1B,EAAyC;AAAA,MAAA,IAAA,qBAAA,CAAA;;AACvC;AACA,MAAA,CAAA,qBAAA,GAAA,QAAQ,CAACI,eAAT,CAAyBZ,SAAzB,CAAmCa,KAAnC,CAAyCJ,UAAzC,CAAsDK,MAAAA,IAAAA,IAAAA,qBAAAA,KAAAA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAAA,CAAAA,OAAtD,CAA8D,UAACC,IAAD,EAAS;AACrEC,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCC,MAAnC,CAA0CH,IAA1C,CAAA,CAAA;OADF,CAAA,CAAA;AAGA/B,MAAAA,iBAAiB,CAACL,KAAD,EAAQI,UAAR,CAAjB,CACGoC,KADH,CACS,GADT,CAEGL,CAAAA,OAFH,CAEW,UAACC,IAAD,EAAS;AAChBC,QAAAA,QAAQ,CAACJ,eAAT,CAAyBK,SAAzB,CAAmCG,GAAnC,CAAuCL,IAAvC,CAAA,CAAA;OAHJ,CAAA,CAAA;AAKD,KAAA;AACF,GAZQ,EAYN,CAACR,iBAAD,EAAoBC,aAApB,EAAmC7B,KAAnC,EAA0CI,UAA1C,EAAsD0B,UAAtD,CAZM,CAAT,CAAA;EAcA,IAAMY,YAAY,GAAGvB,OAAO,CAAC,YAAA;IAAA,OAAO;AAAEnB,MAAAA,KAAK,EAALA,KAAF;AAASI,MAAAA,UAAU,EAAVA,UAAAA;KAAhB,CAAA;AAAA,GAAD,EAAgC,CAACA,UAAD,EAAaJ,KAAb,CAAhC,CAA5B,CAAA;AAEA,EAAA,OACEwB,GAACT,CAAAA,YAAY,CAAC4B,QAAd,EAAsB;AAACC,IAAAA,KAAK,EAAEF,YAAR;IAAoBnB,QACxCC,EAAAA,GAAAA,CAACF,cAAD,EAAe;MAAAC,QAAEA,EAAAA,QAAAA;KAAjB,CAAA;AADoB,GAAtB,CADF,CAAA;AAKD;;;;"}
+{"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;\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];\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;\n  screenMode?: ScreenMode;\n  isNotRootProvider?: boolean | undefined;\n};\n","import type {\n  ComponentTheme,\n  ModernTheme,\n  BaseTheme,\n  ExtraTheme,\n  ForestGreenTheme,\n  ScreenMode,\n  ScreenModeDark,\n} from './const';\nimport { extraThemes, screenModes, modernThemes } from './const';\n\nexport const isThemeModern = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ModernTheme => modernThemes.includes(theme as ModernTheme);\n\nexport const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>\n  extraThemes.includes(theme as ExtraTheme);\n\nexport const isForestGreenTheme = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n): theme is ForestGreenTheme => theme === extraThemes[0];\n\nexport const isScreenModeDark = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n): screenMode is ScreenModeDark =>\n  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;\n\nexport const getThemeClassName = (\n  theme: ComponentTheme | BaseTheme | ExtraTheme,\n  screenMode: ScreenMode,\n) => {\n  if (!isThemeModern(theme)) {\n    return `np-theme-${theme}`;\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 { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';\nimport { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';\nimport { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme | BaseTheme | ExtraTheme;\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 { ComponentTheme, BaseTheme, ExtraTheme, 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: ComponentTheme | BaseTheme | ExtraTheme;\n      screenMode: ScreenMode;\n    }\n  | undefined\n>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };\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  // RegEx to check for `np-theme-` class name\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const themeClass = new RegExp(/\\bnp-theme-[a-z-]+\\b/, 'g');\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, themeClass]);\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","concat","DEFAULT_BASE_THEME","DEFAULT_SCREEN_MODE","isThemeModern","theme","includes","isExtraTheme","isForestGreenTheme","isScreenModeDark","screenMode","getThemeClassName","classes","FALLBACK_VALUES","isNotProduction","window","location","hostname","_unused","useTheme","theming","useContext","ThemeContext","console","warn","_ref","contextScreenMode","useMemo","isModern","className","ThemedChildren","_ref$className","undefined","children","_useTheme","themeClass","_jsx","classNames","createContext","ThemeProvider","_ref$theme","_ref$screenMode","_ref$isNotRootProvide","isNotRootProvider","isContextRoot","RegExp","useEffect","_document$documentEle","document","documentElement","match","forEach","item","classList","remove","split","add","contextValue","Provider","value"],"mappings":"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"}

package/package.json

@@ -1,22 +1,34 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
-    "wise",
-    "jestconfig"
+    "wise"
   ],
   "repository": {
     "type": "git",
     "fullname": "transferwise/neptune-web",
     "url": "git+https://github.com/transferwise/neptune-web.git"
   },
+  "dependencies": {
+    "classnames": "^2.3.2"
+  },
   "devDependencies": {
     "@babel/plugin-syntax-import-assertions": "7.20.0",
     "@rollup/plugin-typescript": "11.0.0",
-    "@types/react": "17.0.52",
-    "@types/react-dom": "17.0.18",
+    "@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",
+    "@transferwise/test-config": "^5.0.2",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^18.15.12",
+    "@types/react": "^17.0.59",
+    "@types/react-dom": "^17.0.20",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "classnames": "^2.3.2",
+    "jest": "^27.0.6",
     "rollup": "3.2.3",
     "rollup-plugin-ts": "3.0.2",
     "typescript": "4.9.4"
@@ -25,14 +37,6 @@
     "react": ">=16.14",
     "react-dom": ">=16.14"
   },
-  "scripts": {
-    "build": "rollup --config --sourcemap --configPlugin rollup-plugin-ts",
-    "test": "jest --env=jsdom --maxWorkers=4 --config=../../node_modules/@transferwise/test-config/jest.config.js",
-    "test:watch": "jest --watch --env=jsdom --config=../../node_modules/@transferwise/test-config/jest.config.js",
-    "lint": "jest --maxWorkers=4 --config ../../node_modules/@transferwise/test-config/test/jest.lint.js && yarn lint:ts",
-    "lint:ts": "tsc --noEmit --emitDeclarationOnly false",
-    "lint:fix": "eslint 'src/**/*.js' --fix"
-  },
   "exports": {
     ".": {
       "import": "./dist/es/index.js",
@@ -49,5 +53,17 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6439551ab2f62ec2206adbf4a49761bdcbbe2127"
-}
+  "scripts": {
+    "build": "rollup --config --sourcemap",
+    "test": "jest --maxWorkers=4",
+    "test:watch": "jest --watch --env=jsdom",
+    "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:types": "tsc --noEmit --emitDeclarationOnly false",
+    "lint:fix": "npm-run-all --serial lint:fix:*",
+    "lint:fix:format": "prettier --write --ignore-path ../../.prettierignore .",
+    "lint:fix:js+ts": "pnpm run lint:check:js+ts --fix"
+  }
+}

package/src/ThemeProvider.tsx

@@ -13,13 +13,14 @@ export const ThemeContext = createContext<
   | undefined
 >(undefined);
 
-type ThemeProviderProps = PropsWithChildren<Theming>;
+type ThemeProviderProps = PropsWithChildren<Theming> & { className?: string };
 
 export const ThemeProvider = ({
   theme = DEFAULT_BASE_THEME,
   screenMode = DEFAULT_SCREEN_MODE,
   isNotRootProvider = false,
   children,
+  className = undefined,
 }: ThemeProviderProps) => {
   const isContextRoot = useContext(ThemeContext) === undefined;
 
@@ -46,7 +47,7 @@ export const ThemeProvider = ({
 
   return (
     <ThemeContext.Provider value={contextValue}>
-      <ThemedChildren>{children}</ThemedChildren>
+      <ThemedChildren className={className}>{children}</ThemedChildren>
     </ThemeContext.Provider>
   );
 };

package/src/ThemedChildren.tsx

@@ -1,11 +1,12 @@
+import classNames from 'classnames';
 import { ReactNode } from 'react';
 
 import { useTheme } from './useTheme';
 
-type ThemedChildrenProps = { children: ReactNode };
+type ThemedChildrenProps = { className?: string; children: ReactNode };
 
-export const ThemedChildren = ({ children }: ThemedChildrenProps) => {
-  const { className } = useTheme();
+export const ThemedChildren = ({ className = undefined, children }: ThemedChildrenProps) => {
+  const { className: themeClass } = useTheme();
 
-  return <div className={className}>{children}</div>;
+  return <div className={classNames(themeClass, className)}>{children}</div>;
 };

package/src/const.ts

@@ -5,12 +5,13 @@ export const screenModes = ['light', 'dark'] as const;
 export const modernThemes = [baseThemes[1], ...extraThemes] as const;
 
 // TODO: componentThemes returned back for backward compatibility, refactor this place in the future
-export type ComponentTheme = typeof baseThemes[number];
-export type ModernTheme = typeof modernThemes[number];
-export type BaseTheme = typeof baseThemes[number];
-export type ExtraTheme = typeof extraThemes[number];
-export type ScreenMode = typeof screenModes[number];
-export type ScreenModeDark = typeof screenModes[1];
+export type ComponentTheme = (typeof baseThemes)[number];
+export type ModernTheme = (typeof modernThemes)[number];
+export type BaseTheme = (typeof baseThemes)[number];
+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 const DEFAULT_BASE_THEME = 'light' as const;
 export const DEFAULT_SCREEN_MODE = 'light' as const;

package/src/helpers.ts

@@ -3,6 +3,7 @@ import type {
   ModernTheme,
   BaseTheme,
   ExtraTheme,
+  ForestGreenTheme,
   ScreenMode,
   ScreenModeDark,
 } from './const';
@@ -15,6 +16,10 @@ export const isThemeModern = (
 export const isExtraTheme = (theme: ComponentTheme | BaseTheme | ExtraTheme): theme is ExtraTheme =>
   extraThemes.includes(theme as ExtraTheme);
 
+export const isForestGreenTheme = (
+  theme: ComponentTheme | BaseTheme | ExtraTheme,
+): theme is ForestGreenTheme => theme === extraThemes[0];
+
 export const isScreenModeDark = (
   theme: ComponentTheme | BaseTheme | ExtraTheme,
   screenMode: ScreenMode,

package/src/index.ts

@@ -1,5 +1,11 @@
 export type { ComponentTheme, BaseTheme, ExtraTheme, ScreenMode, Theming } from './const';
-export { isThemeModern, isExtraTheme, isScreenModeDark, getThemeClassName } from './helpers';
+export {
+  isThemeModern,
+  isExtraTheme,
+  isForestGreenTheme,
+  isScreenModeDark,
+  getThemeClassName,
+} from './helpers';
 
 export { ThemeProvider } from './ThemeProvider';
 export { useTheme } from './useTheme';

package/src/useTheme.spec.tsx

@@ -16,6 +16,7 @@ describe('useTheme', () => {
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
@@ -37,6 +38,7 @@ describe('useTheme', () => {
       theme: 'personal',
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: true,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-personal',
     });
@@ -56,6 +58,7 @@ describe('useTheme', () => {
       theme: 'forest-green',
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: true,
+      isForestGreenTheme: true,
       isScreenModeDark: false,
       className: 'np-theme-personal np-theme-personal--forest-green',
     });
@@ -75,6 +78,7 @@ describe('useTheme', () => {
       theme: 'bright-green',
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: true,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-personal np-theme-personal--bright-green',
     });
@@ -95,6 +99,7 @@ describe('useTheme', () => {
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
@@ -115,6 +120,7 @@ describe('useTheme', () => {
       theme: 'personal',
       screenMode: 'dark',
       isModern: true,
+      isForestGreenTheme: false,
       isScreenModeDark: true,
       className: 'np-theme-personal np-theme-personal--dark',
     });
@@ -138,6 +144,7 @@ describe('useTheme', () => {
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
@@ -160,6 +167,7 @@ describe('useTheme', () => {
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
@@ -182,6 +190,7 @@ describe('useTheme', () => {
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-light',
     });
@@ -202,6 +211,7 @@ describe('useTheme', () => {
       theme: DEFAULT_BASE_THEME,
       screenMode: DEFAULT_SCREEN_MODE,
       isModern: false,
+      isForestGreenTheme: false,
       isScreenModeDark: false,
       className: 'np-theme-light',
     });

package/src/useTheme.ts

@@ -3,12 +3,13 @@ import { useContext, useMemo } from 'react';
 import { ThemeContext } from './ThemeProvider';
 import type { ComponentTheme, BaseTheme, ScreenMode, ExtraTheme } from './const';
 import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
-import { isThemeModern, isScreenModeDark, getThemeClassName } from './helpers';
+import { isThemeModern, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';
 
 interface ThemeHookValue {
   theme: ComponentTheme | BaseTheme | ExtraTheme;
   screenMode: ScreenMode;
   isModern: boolean;
+  isForestGreenTheme: boolean;
   isScreenModeDark: boolean;
   className: string;
 }
@@ -43,6 +44,7 @@ export const useTheme = (): ThemeHookValue => {
       theme,
       screenMode,
       isModern: isThemeModern(theme),
+      isForestGreenTheme: isForestGreenTheme(theme),
       isScreenModeDark: isScreenModeDark(theme, screenMode),
       className: getThemeClassName(theme, screenMode),
     }),