@wise/components-theming 0.0.0-experimental-2e39705

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2022 Wise Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1 @@
+# Design System Componentents - Theming

package/dist/cjs/index.d.ts

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from "react";
+// TODO: Change 'light' with 'legacy' in the future
+declare const baseThemes: readonly [
+    "light",
+    "personal"
+];
+declare const extraThemes: readonly [
+    "forest-green",
+    "bright-green"
+];
+declare const screenModes: readonly [
+    "light",
+    "dark"
+];
+// TODO: componentThemes returned back for backward compatibility, refactor this place in the future
+type ComponentTheme = (typeof baseThemes)[number];
+type BaseTheme = (typeof baseThemes)[number];
+type ExtraTheme = (typeof extraThemes)[number];
+type ScreenMode = (typeof screenModes)[number];
+type Theming = {
+    theme?: ComponentTheme | BaseTheme | ExtraTheme;
+    screenMode?: ScreenMode;
+    isNotRootProvider?: boolean | undefined;
+};
+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> & {
+    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, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };

package/dist/cjs/index.js

@@ -0,0 +1,135 @@
+'use strict';
+
+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'];
+var extraThemes = ['forest-green', 'bright-green'];
+var screenModes = ['light', 'dark'];
+var modernThemes = [baseThemes[1]].concat(extraThemes);
+var DEFAULT_BASE_THEME = 'light';
+var DEFAULT_SCREEN_MODE = 'light';
+
+var isThemeModern = function isThemeModern(theme) {
+  return modernThemes.includes(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;
+};
+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;
+};
+
+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);
+  } catch (_unused) {
+    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;
+  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)
+    };
+  }, [theme, screenMode]);
+};
+
+var ThemedChildren = function ThemedChildren(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    children = _ref.children;
+  var _useTheme = useTheme(),
+    themeClass = _useTheme.className;
+  return jsxRuntime.jsx("div", {
+    className: classNames.default(themeClass, className),
+    children: children
+  });
+};
+
+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,
+    _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
+  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);
+      });
+      getThemeClassName(theme, screenMode).split(' ').forEach(function (item) {
+        document.documentElement.classList.add(item);
+      });
+    }
+  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  var contextValue = react.useMemo(function () {
+    return {
+      theme: theme,
+      screenMode: screenMode
+    };
+  }, [screenMode, theme]);
+  return jsxRuntime.jsx(ThemeContext.Provider, {
+    value: contextValue,
+    children: jsxRuntime.jsx(ThemedChildren, {
+      className: className,
+      children: children
+    })
+  });
+};
+
+exports.ThemeProvider = ThemeProvider;
+exports.getThemeClassName = getThemeClassName;
+exports.isExtraTheme = isExtraTheme;
+exports.isForestGreenTheme = isForestGreenTheme;
+exports.isScreenModeDark = isScreenModeDark;
+exports.isThemeModern = isThemeModern;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +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 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

@@ -0,0 +1,44 @@
+import { PropsWithChildren } from "react";
+// TODO: Change 'light' with 'legacy' in the future
+declare const baseThemes: readonly [
+    "light",
+    "personal"
+];
+declare const extraThemes: readonly [
+    "forest-green",
+    "bright-green"
+];
+declare const screenModes: readonly [
+    "light",
+    "dark"
+];
+// TODO: componentThemes returned back for backward compatibility, refactor this place in the future
+type ComponentTheme = (typeof baseThemes)[number];
+type BaseTheme = (typeof baseThemes)[number];
+type ExtraTheme = (typeof extraThemes)[number];
+type ScreenMode = (typeof screenModes)[number];
+type Theming = {
+    theme?: ComponentTheme | BaseTheme | ExtraTheme;
+    screenMode?: ScreenMode;
+    isNotRootProvider?: boolean | undefined;
+};
+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> & {
+    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, isForestGreenTheme, isScreenModeDark, getThemeClassName, ThemeProvider, useTheme };

package/dist/es/index.js

@@ -0,0 +1,127 @@
+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'];
+var extraThemes = ['forest-green', 'bright-green'];
+var screenModes = ['light', 'dark'];
+var modernThemes = [baseThemes[1]].concat(extraThemes);
+var DEFAULT_BASE_THEME = 'light';
+var DEFAULT_SCREEN_MODE = 'light';
+
+var isThemeModern = function isThemeModern(theme) {
+  return modernThemes.includes(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;
+};
+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;
+};
+
+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);
+  } catch (_unused) {
+    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;
+  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)
+    };
+  }, [theme, screenMode]);
+};
+
+var ThemedChildren = function ThemedChildren(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? undefined : _ref$className,
+    children = _ref.children;
+  var _useTheme = useTheme(),
+    themeClass = _useTheme.className;
+  return jsx("div", {
+    className: classNames(themeClass, className),
+    children: children
+  });
+};
+
+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,
+    _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
+  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);
+      });
+      getThemeClassName(theme, screenMode).split(' ').forEach(function (item) {
+        document.documentElement.classList.add(item);
+      });
+    }
+  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+  var contextValue = useMemo(function () {
+    return {
+      theme: theme,
+      screenMode: screenMode
+    };
+  }, [screenMode, theme]);
+  return jsx(ThemeContext.Provider, {
+    value: contextValue,
+    children: jsx(ThemedChildren, {
+      className: className,
+      children: children
+    })
+  });
+};
+
+export { ThemeProvider, getThemeClassName, isExtraTheme, isForestGreenTheme, isScreenModeDark, isThemeModern, useTheme };
+//# sourceMappingURL=index.js.map

package/dist/es/index.js.map

@@ -0,0 +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 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

@@ -0,0 +1,69 @@
+{
+  "name": "@wise/components-theming",
+  "version": "0.0.0-experimental-2e39705",
+  "description": "Provides theming support for the Wise Design system components",
+  "license": "Apache-2.0",
+  "keywords": [
+    "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",
+    "@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"
+  },
+  "peerDependencies": {
+    "react": ">=16.14",
+    "react-dom": ">=16.14"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/es/index.d.ts",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "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.spec.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+
+import { ThemeProvider } from './ThemeProvider';
+
+import {} from './const';
+
+describe('ThemeProvider', () => {
+  it('can nest theme providers', () => {
+    render(
+      <ThemeProvider theme="light">
+        <div>light</div>
+        <ThemeProvider theme="personal">
+          <div>personal</div>
+          <ThemeProvider theme="light">
+            <div>light</div>
+          </ThemeProvider>
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    // The first provider will not have a className attached to it
+    expect(screen.getAllByText('light')[0]).not.toHaveClass('np-theme-light');
+    // 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.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
+  });
+
+  it('matches snapshot', () => {
+    const { asFragment } = render(
+      <ThemeProvider theme="light">
+        <div>light</div>
+        <ThemeProvider theme="personal">
+          <div>personal</div>
+          <ThemeProvider theme="light">
+            <div>light</div>
+          </ThemeProvider>
+        </ThemeProvider>
+      </ThemeProvider>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/ThemeProvider.tsx

@@ -0,0 +1,53 @@
+import { createContext, PropsWithChildren, useContext, useEffect, useMemo } from 'react';
+
+import { ThemedChildren } from './ThemedChildren';
+import type { ComponentTheme, BaseTheme, ExtraTheme, 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;
+      screenMode: ScreenMode;
+    }
+  | undefined
+>(undefined);
+
+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;
+
+  // 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) {
+      // Remove all the theme classes from the documentElement
+      document.documentElement.className.match(themeClass)?.forEach((item) => {
+        document.documentElement.classList.remove(item);
+      });
+      getThemeClassName(theme, screenMode)
+        .split(' ')
+        .forEach((item) => {
+          document.documentElement.classList.add(item);
+        });
+    }
+  }, [isNotRootProvider, isContextRoot, theme, screenMode, themeClass]);
+
+  const contextValue = useMemo(() => ({ theme, screenMode }), [screenMode, theme]);
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      <ThemedChildren className={className}>{children}</ThemedChildren>
+    </ThemeContext.Provider>
+  );
+};

package/src/ThemedChildren.tsx

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

package/src/__snapshots__/ThemeProvider.spec.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThemeProvider matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="np-theme-light"
+  >
+    <div>
+      light
+    </div>
+    <div
+      class="np-theme-personal"
+    >
+      <div>
+        personal
+      </div>
+      <div
+        class="np-theme-light"
+      >
+        <div>
+          light
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/const.ts

@@ -0,0 +1,23 @@
+// TODO: Change 'light' with 'legacy' in the future
+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;
+
+// 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 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;
+
+export type Theming = {
+  theme?: ComponentTheme | BaseTheme | ExtraTheme;
+  screenMode?: ScreenMode;
+  isNotRootProvider?: boolean | undefined;
+};

package/src/helpers.ts

@@ -0,0 +1,46 @@
+import type {
+  ComponentTheme,
+  ModernTheme,
+  BaseTheme,
+  ExtraTheme,
+  ForestGreenTheme,
+  ScreenMode,
+  ScreenModeDark,
+} 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 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,
+): screenMode is ScreenModeDark =>
+  isThemeModern(theme as ModernTheme) && screenModes[1] === screenMode;
+
+export const getThemeClassName = (
+  theme: ComponentTheme | BaseTheme | ExtraTheme,
+  screenMode: ScreenMode,
+) => {
+  if (!isThemeModern(theme)) {
+    return `np-theme-${theme}`;
+  }
+
+  let classes = `np-theme-personal`;
+
+  if (isExtraTheme(theme)) {
+    classes += ` ${classes}--${theme}`;
+  } else if (screenModes[1] === screenMode) {
+    classes += ` ${classes}--${screenMode}`;
+  }
+
+  return classes;
+};

package/src/index.ts

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

package/src/useTheme.spec.tsx

@@ -0,0 +1,224 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { ThemeProvider } from './ThemeProvider';
+import { DEFAULT_BASE_THEME, DEFAULT_SCREEN_MODE } from './const';
+import { useTheme } from './useTheme';
+
+describe('useTheme', () => {
+  it('returns default light theme', () => {
+    jest.spyOn(console, 'warn').mockImplementation();
+
+    const {
+      result: { current },
+    } = renderHook(() => useTheme());
+
+    expect(current).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    jest.clearAllMocks();
+  });
+
+  it('returns personal theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'personal' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'personal',
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: true,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-personal',
+    });
+  });
+
+  it('returns forest-green theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'forest-green' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'forest-green',
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: true,
+      isForestGreenTheme: true,
+      isScreenModeDark: false,
+      className: 'np-theme-personal np-theme-personal--forest-green',
+    });
+  });
+
+  it('returns bright-green theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'bright-green' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'bright-green',
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: true,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-personal np-theme-personal--bright-green',
+    });
+  });
+
+  it('returns default screen mode if used default light theme', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: DEFAULT_BASE_THEME,
+        screenMode: 'dark' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+  });
+
+  it('returns dark screen mode', () => {
+    const {
+      result: { current },
+    } = renderHook(() => useTheme(), {
+      wrapper: ThemeProvider,
+      initialProps: {
+        theme: 'personal' as const,
+        screenMode: 'dark' as const,
+      },
+    });
+
+    expect(current).toStrictEqual({
+      theme: 'personal',
+      screenMode: 'dark',
+      isModern: true,
+      isForestGreenTheme: false,
+      isScreenModeDark: true,
+      className: 'np-theme-personal np-theme-personal--dark',
+    });
+  });
+
+  it('warns when used outside a theme provider on staging or localhost', () => {
+    jest.spyOn(console, 'warn').mockImplementation();
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        hostname: 'wise.com',
+      },
+      writable: true,
+    });
+
+    const {
+      result: { current: productionValue },
+    } = renderHook(() => useTheme());
+
+    expect(productionValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).not.toHaveBeenCalled();
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        hostname: 'dev-wi.se',
+      },
+      writable: true,
+    });
+
+    const {
+      result: { current: stagingValue },
+    } = renderHook(() => useTheme());
+
+    expect(stagingValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledTimes(1);
+
+    Object.defineProperty(window, 'location', {
+      value: {
+        hostname: 'localhost',
+      },
+      writable: true,
+    });
+
+    const {
+      result: { current: localhostValue },
+    } = renderHook(() => useTheme());
+
+    expect(localhostValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledTimes(2);
+
+    Object.defineProperty(window, 'location', {
+      value: undefined,
+      writable: true,
+    });
+
+    const {
+      result: { current: noHostnameValue },
+    } = renderHook(() => useTheme());
+
+    expect(noHostnameValue).toStrictEqual({
+      theme: DEFAULT_BASE_THEME,
+      screenMode: DEFAULT_SCREEN_MODE,
+      isModern: false,
+      isForestGreenTheme: false,
+      isScreenModeDark: false,
+      className: 'np-theme-light',
+    });
+
+    // eslint-disable-next-line no-console
+    expect(console.warn).toHaveBeenCalledTimes(2);
+
+    jest.clearAllMocks();
+  });
+});

package/src/useTheme.ts

@@ -0,0 +1,53 @@
+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, isForestGreenTheme, isScreenModeDark, getThemeClassName } from './helpers';
+
+interface ThemeHookValue {
+  theme: ComponentTheme | BaseTheme | ExtraTheme;
+  screenMode: ScreenMode;
+  isModern: boolean;
+  isForestGreenTheme: boolean;
+  isScreenModeDark: boolean;
+  className: string;
+}
+
+const FALLBACK_VALUES = {
+  theme: DEFAULT_BASE_THEME,
+  screenMode: DEFAULT_SCREEN_MODE,
+};
+
+const isNotProduction = () => {
+  try {
+    return ['localhost', 'dev-wi.se'].includes(window.location.hostname);
+  } catch {
+    return false;
+  }
+};
+
+export const useTheme = (): ThemeHookValue => {
+  const theming = useContext(ThemeContext);
+
+  if (!theming && isNotProduction()) {
+    // eslint-disable-next-line no-console
+    console.warn('Call to useTheme outside a ThemeProvider');
+  }
+
+  const { theme, screenMode: contextScreenMode } = theming ?? FALLBACK_VALUES;
+
+  const screenMode = theme === DEFAULT_BASE_THEME ? DEFAULT_SCREEN_MODE : contextScreenMode;
+
+  return useMemo(
+    () => ({
+      theme,
+      screenMode,
+      isModern: isThemeModern(theme),
+      isForestGreenTheme: isForestGreenTheme(theme),
+      isScreenModeDark: isScreenModeDark(theme, screenMode),
+      className: getThemeClassName(theme, screenMode),
+    }),
+    [theme, screenMode],
+  );
+};