@wise/components-theming 0.3.1 → 0.4.1-beta-0eeac85bc9.3

package/dist/cjs/index.d.ts

@@ -2,7 +2,9 @@
 import { PropsWithChildren } from "react";
 declare const componentThemes: readonly [
     "light",
-    "personal"
+    "personal",
+    "personal--dark",
+    "personal--forest-green"
 ];
 type ComponentTheme = (typeof componentThemes)[number];
 type Theming = {

package/dist/cjs/index.js

@@ -3,8 +3,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 
-var modernThemes = ['personal'];
-var darkThemes = [];
+var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
+var darkThemes = ['personal--dark'];
 var DEFAULT_COMPONENT_THEME = 'light';
 
 var isThemeModern = function isThemeModern(theme) {
@@ -51,15 +51,20 @@ var ThemeProvider = function ThemeProvider(_ref) {
   var isRootProvider = 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-.+?\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 (isRootProvider) {
+      var _document$documentEle;
+
       // Remove all the theme classes from the documentElement
-      if (document.documentElement.className.match(themeClass)) {
-        document.documentElement.className = document.documentElement.className.replace(themeClass, '');
-      } // Add the new theme class to the documentElement
+      (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.map(function (item) {
+        document.documentElement.classList.remove(item);
+      }); // Add the new theme class to the documentElement
 
+      if (isThemeModern(theme)) {
+        document.documentElement.classList.add('np-theme-personal');
+      }
 
       document.documentElement.classList.add("np-theme-".concat(theme));
     }

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":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\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 } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = 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-.+?\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      if (document.documentElement.className.match(themeClass)) {\n        document.documentElement.className = document.documentElement.className.replace(\n          themeClass,\n          '',\n        );\n      }\n      // Add the new theme class to the documentElement\n      document.documentElement.classList.add(`np-theme-${theme}`);\n    }\n  }, [isRootProvider, theme, themeClass]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","document","documentElement","match","replace","classList","add","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":["export const componentThemes = ['light', 'personal', 'personal--dark', 'personal--forest-green'] as const;\nexport const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;\nexport const darkThemes = ['personal--dark'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n// test\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 } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\nimport { isThemeModern } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = 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 (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.map((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      // Add the new theme class to the documentElement\n      if (isThemeModern(theme)) {\n        document.documentElement.classList.add('np-theme-personal');\n      }\n      document.documentElement.classList.add(`np-theme-${theme}`);\n    }\n  }, [isRootProvider, theme, themeClass]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","map","item","document","classList","remove","add","Provider","value"],"mappings":"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"}

package/dist/es/index.d.ts

@@ -2,7 +2,9 @@
 import { PropsWithChildren } from "react";
 declare const componentThemes: readonly [
     "light",
-    "personal"
+    "personal",
+    "personal--dark",
+    "personal--forest-green"
 ];
 type ComponentTheme = (typeof componentThemes)[number];
 type Theming = {

package/dist/es/index.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { useContext, useMemo, createContext, useEffect } from 'react';
 
-var modernThemes = ['personal'];
-var darkThemes = [];
+var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
+var darkThemes = ['personal--dark'];
 var DEFAULT_COMPONENT_THEME = 'light';
 
 var isThemeModern = function isThemeModern(theme) {
@@ -49,15 +49,20 @@ var ThemeProvider = function ThemeProvider(_ref) {
   var isRootProvider = 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-.+?\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 (isRootProvider) {
+      var _document$documentEle;
+
       // Remove all the theme classes from the documentElement
-      if (document.documentElement.className.match(themeClass)) {
-        document.documentElement.className = document.documentElement.className.replace(themeClass, '');
-      } // Add the new theme class to the documentElement
+      (_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.map(function (item) {
+        document.documentElement.classList.remove(item);
+      }); // Add the new theme class to the documentElement
 
+      if (isThemeModern(theme)) {
+        document.documentElement.classList.add('np-theme-personal');
+      }
 
       document.documentElement.classList.add("np-theme-".concat(theme));
     }

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":["export const componentThemes = ['light', 'personal'] as const;\nexport const modernThemes = ['personal'] as const;\nexport const darkThemes = [] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\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 } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = 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-.+?\\b/, 'g');\n\n  // useEffect hook used to apply the theme class to the HTML element\n  useEffect(() => {\n    if (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      if (document.documentElement.className.match(themeClass)) {\n        document.documentElement.className = document.documentElement.className.replace(\n          themeClass,\n          '',\n        );\n      }\n      // Add the new theme class to the documentElement\n      document.documentElement.classList.add(`np-theme-${theme}`);\n    }\n  }, [isRootProvider, theme, themeClass]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","document","documentElement","match","replace","classList","add","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":["export const componentThemes = ['light', 'personal', 'personal--dark', 'personal--forest-green'] as const;\nexport const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;\nexport const darkThemes = ['personal--dark'] as const;\n\nexport type ComponentTheme = typeof componentThemes[number];\nexport type ModernTheme = typeof modernThemes[number];\nexport type DarkTheme = typeof darkThemes[number];\n\nexport const DEFAULT_COMPONENT_THEME = 'light' as const;\n\nexport type Theming = {\n  theme?: ComponentTheme;\n};\n","import { ComponentTheme, DarkTheme, ModernTheme, modernThemes, darkThemes } from './const';\n\nexport const isThemeModern = (theme: ComponentTheme): theme is ModernTheme =>\n  modernThemes.includes(theme as ModernTheme);\n\nexport const isThemeDark = (theme: ComponentTheme): theme is DarkTheme =>\n  darkThemes.includes(theme as DarkTheme);\n\nexport const getThemeClassName = (theme: ComponentTheme) => `np-theme-${theme}`;\n","import { useContext, useMemo } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME } from './const';\nimport { getThemeClassName, isThemeDark, isThemeModern } from './helpers';\n\ninterface ThemeHookValue {\n  theme: ComponentTheme;\n  isModern: boolean;\n  isDark: boolean;\n  className: string;\n}\n\nexport const useTheme = (): ThemeHookValue => {\n  const theme = useContext(ThemeContext) ?? DEFAULT_COMPONENT_THEME;\n\n  return useMemo(\n    () => ({\n      theme,\n      isModern: isThemeModern(theme),\n      isDark: isThemeDark(theme),\n      className: getThemeClassName(theme),\n    }),\n    [theme],\n  );\n};\n","import { ReactNode } from 'react';\n\nimport { useTheme } from './useTheme';\n// test\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 } from 'react';\n\nimport { ThemedChildren } from './ThemedChildren';\nimport { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';\nimport { isThemeModern } from './helpers';\n\nexport const ThemeContext = createContext<ComponentTheme | undefined>(undefined);\n\ntype ThemeProviderProps = PropsWithChildren<Theming>;\n\nexport const ThemeProvider = ({\n  theme = DEFAULT_COMPONENT_THEME,\n  children,\n}: ThemeProviderProps) => {\n  const isRootProvider = 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 (isRootProvider) {\n      // Remove all the theme classes from the documentElement\n      document.documentElement.className.match(themeClass)?.map((item) => {\n        document.documentElement.classList.remove(item);\n      });\n      // Add the new theme class to the documentElement\n      if (isThemeModern(theme)) {\n        document.documentElement.classList.add('np-theme-personal');\n      }\n      document.documentElement.classList.add(`np-theme-${theme}`);\n    }\n  }, [isRootProvider, theme, themeClass]);\n\n  return (\n    <ThemeContext.Provider value={theme}>\n      <ThemedChildren>{children}</ThemedChildren>\n    </ThemeContext.Provider>\n  );\n};\n"],"names":["modernThemes","darkThemes","DEFAULT_COMPONENT_THEME","isThemeModern","theme","includes","isThemeDark","getThemeClassName","useTheme","useContext","ThemeContext","useMemo","isModern","isDark","className","ThemedChildren","children","_jsx","createContext","undefined","ThemeProvider","isRootProvider","themeClass","RegExp","useEffect","documentElement","match","map","item","document","classList","remove","add","Provider","value"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/components-theming",
-  "version": "0.3.1",
+  "version": "0.4.1-beta-0eeac85bc9.3+0eeac85bc9",
   "description": "Provides theming support for the Wise Design system components",
   "license": "Apache-2.0",
   "keywords": [
@@ -43,5 +43,5 @@
     "dist/",
     "src/"
   ],
-  "gitHead": "9ab5aa719961b48fde204954813c86fb97fe2f7b"
+  "gitHead": "0eeac85bc9c7ae0de3f8622b608b75838c10c5e6"
 }

package/src/ThemeProvider.spec.tsx

@@ -1,19 +1,9 @@
-import { render, screen, act, waitFor } from '@testing-library/react';
-import React from 'react';
+import { render, screen } from '@testing-library/react';
 
 import { ThemeProvider } from './ThemeProvider';
 
 import {} from './const';
 
-const InValidElement = React.createContext<undefined>(undefined).Provider;
-const ComponentWithClassname = ({
-  className,
-  ...rest
-}: {
-  className?: string;
-  [key: string]: string | undefined;
-}) => <div className={className} {...rest} />;
-
 describe('ThemeProvider', () => {
   it('can nest theme providers', () => {
     render(

package/src/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import { createContext, PropsWithChildren, useContext, useEffect } from 'react';
 
 import { ThemedChildren } from './ThemedChildren';
 import { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';
+import { isThemeModern } from './helpers';
 
 export const ThemeContext = createContext<ComponentTheme | undefined>(undefined);
 
@@ -15,19 +16,19 @@ export const ThemeProvider = ({
 
   // RegEx to check for `np-theme-` class name
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const themeClass = new RegExp(/\bnp-theme-.+?\b/, 'g');
+  const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
 
   // useEffect hook used to apply the theme class to the HTML element
   useEffect(() => {
     if (isRootProvider) {
       // Remove all the theme classes from the documentElement
-      if (document.documentElement.className.match(themeClass)) {
-        document.documentElement.className = document.documentElement.className.replace(
-          themeClass,
-          '',
-        );
-      }
+      document.documentElement.className.match(themeClass)?.map((item) => {
+        document.documentElement.classList.remove(item);
+      });
       // Add the new theme class to the documentElement
+      if (isThemeModern(theme)) {
+        document.documentElement.classList.add('np-theme-personal');
+      }
       document.documentElement.classList.add(`np-theme-${theme}`);
     }
   }, [isRootProvider, theme, themeClass]);

package/src/ThemedChildren.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 import { useTheme } from './useTheme';
-
+// test
 type ThemedChildrenProps = { children: ReactNode };
 
 export const ThemedChildren = ({ children }: ThemedChildrenProps) => {

package/src/const.ts

@@ -1,6 +1,6 @@
-export const componentThemes = ['light', 'personal'] as const;
-export const modernThemes = ['personal'] as const;
-export const darkThemes = [] as const;
+export const componentThemes = ['light', 'personal', 'personal--dark', 'personal--forest-green'] as const;
+export const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;
+export const darkThemes = ['personal--dark'] as const;
 
 export type ComponentTheme = typeof componentThemes[number];
 export type ModernTheme = typeof modernThemes[number];

package/CHANGELOG.md

@@ -1,68 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.3.1](https://github.com/transferwise/neptune-web/compare/@wise/components-theming@0.3.0...@wise/components-theming@0.3.1) (2022-12-30)
-
-**Note:** Version bump only for package @wise/components-theming
-
-
-
-
-
-# [0.3.0](https://github.com/transferwise/neptune-web/compare/@wise/components-theming@0.1.1...@wise/components-theming@0.3.0) (2022-11-22)
-
-
-### Features
-
-* new visual rebrand updates + inter font ([a1b3afa](https://github.com/transferwise/neptune-web/commit/a1b3afa605eccfceeeb41b72ca760e541e6d5769)), closes [#1570](https://github.com/transferwise/neptune-web/issues/1570) [#1551](https://github.com/transferwise/neptune-web/issues/1551) [#1684](https://github.com/transferwise/neptune-web/issues/1684) [#1651](https://github.com/transferwise/neptune-web/issues/1651) [#1712](https://github.com/transferwise/neptune-web/issues/1712) [#1739](https://github.com/transferwise/neptune-web/issues/1739) [#1718](https://github.com/transferwise/neptune-web/issues/1718) [#1744](https://github.com/transferwise/neptune-web/issues/1744) [#1742](https://github.com/transferwise/neptune-web/issues/1742) [#1771](https://github.com/transferwise/neptune-web/issues/1771) [#1777](https://github.com/transferwise/neptune-web/issues/1777) [#1780](https://github.com/transferwise/neptune-web/issues/1780)
-
-
-### BREAKING CHANGES
-
-* This change includes all our new visual rebrand updates and theme for the wise design system, and includes our new inter font for the current and future visual rebrand
-
-
-
-
-
-# [0.2.0](https://github.com/transferwise/neptune-web/compare/@wise/components-theming@0.1.1...@wise/components-theming@0.2.0) (2022-11-21)
-
-
-### Features
-
-* new visual rebrand updates + inter font ([a1b3afa](https://github.com/transferwise/neptune-web/commit/a1b3afa605eccfceeeb41b72ca760e541e6d5769)), closes [#1570](https://github.com/transferwise/neptune-web/issues/1570) [#1551](https://github.com/transferwise/neptune-web/issues/1551) [#1684](https://github.com/transferwise/neptune-web/issues/1684) [#1651](https://github.com/transferwise/neptune-web/issues/1651) [#1712](https://github.com/transferwise/neptune-web/issues/1712) [#1739](https://github.com/transferwise/neptune-web/issues/1739) [#1718](https://github.com/transferwise/neptune-web/issues/1718) [#1744](https://github.com/transferwise/neptune-web/issues/1744) [#1742](https://github.com/transferwise/neptune-web/issues/1742) [#1771](https://github.com/transferwise/neptune-web/issues/1771) [#1777](https://github.com/transferwise/neptune-web/issues/1777) [#1780](https://github.com/transferwise/neptune-web/issues/1780)
-
-
-### BREAKING CHANGES
-
-* This change includes all our new visual rebrand updates and theme for the wise design system, and includes our new inter font for the current and future visual rebrand
-
-
-
-
-
-## [0.1.1](https://github.com/transferwise/neptune-web/compare/@wise/components-theming@0.1.0...@wise/components-theming@0.1.1) (2022-11-07)
-
-
-### Bug Fixes
-
-* **components-theming:** fix build ([#1747](https://github.com/transferwise/neptune-web/issues/1747)) ([f077c1a](https://github.com/transferwise/neptune-web/commit/f077c1aff760b8b65fa663a236cf168360ecdcf8))
-
-
-
-
-
-# 0.1.0 (2022-11-02)
-
-
-### Features
-
-* **components-theming:** Add theme provider package ([#1718](https://github.com/transferwise/neptune-web/issues/1718)) ([ee9d394](https://github.com/transferwise/neptune-web/commit/ee9d394b590f60462986b774c1d9192edf2e1ade))
-
-
-
-
-
-# Change Log