@wise/components-theming 0.3.0 → 0.4.1-beta-0eeac85bc9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.d.ts +3 -1
- package/dist/cjs/index.js +11 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.d.ts +3 -1
- package/dist/es/index.js +11 -6
- package/dist/es/index.js.map +1 -1
- package/package.json +3 -3
- package/src/ThemeProvider.spec.tsx +1 -11
- package/src/ThemeProvider.tsx +8 -7
- package/src/ThemedChildren.tsx +1 -1
- package/src/const.ts +3 -3
- package/CHANGELOG.md +0 -60
package/dist/cjs/index.d.ts
CHANGED
package/dist/cjs/index.js
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var react = require('react');
|
|
5
5
|
|
|
6
|
-
var modernThemes = ['personal'];
|
|
7
|
-
var darkThemes = [];
|
|
6
|
+
var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
|
|
7
|
+
var darkThemes = ['personal--dark'];
|
|
8
8
|
var DEFAULT_COMPONENT_THEME = 'light';
|
|
9
9
|
|
|
10
10
|
var isThemeModern = function isThemeModern(theme) {
|
|
@@ -51,15 +51,20 @@ var ThemeProvider = function ThemeProvider(_ref) {
|
|
|
51
51
|
var isRootProvider = react.useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
|
|
52
52
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
53
53
|
|
|
54
|
-
var themeClass = new RegExp(/\bnp-theme
|
|
54
|
+
var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g'); // useEffect hook used to apply the theme class to the HTML element
|
|
55
55
|
|
|
56
56
|
react.useEffect(function () {
|
|
57
57
|
if (isRootProvider) {
|
|
58
|
+
var _document$documentEle;
|
|
59
|
+
|
|
58
60
|
// Remove all the theme classes from the documentElement
|
|
59
|
-
|
|
60
|
-
document.documentElement.
|
|
61
|
-
} // Add the new theme class to the documentElement
|
|
61
|
+
(_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.map(function (item) {
|
|
62
|
+
document.documentElement.classList.remove(item);
|
|
63
|
+
}); // Add the new theme class to the documentElement
|
|
62
64
|
|
|
65
|
+
if (isThemeModern(theme)) {
|
|
66
|
+
document.documentElement.classList.add('np-theme-personal');
|
|
67
|
+
}
|
|
63
68
|
|
|
64
69
|
document.documentElement.classList.add("np-theme-".concat(theme));
|
|
65
70
|
}
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +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
|
|
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', '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
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useContext, useMemo, createContext, useEffect } from 'react';
|
|
3
3
|
|
|
4
|
-
var modernThemes = ['personal'];
|
|
5
|
-
var darkThemes = [];
|
|
4
|
+
var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
|
|
5
|
+
var darkThemes = ['personal--dark'];
|
|
6
6
|
var DEFAULT_COMPONENT_THEME = 'light';
|
|
7
7
|
|
|
8
8
|
var isThemeModern = function isThemeModern(theme) {
|
|
@@ -49,15 +49,20 @@ var ThemeProvider = function ThemeProvider(_ref) {
|
|
|
49
49
|
var isRootProvider = useContext(ThemeContext) === undefined; // RegEx to check for `np-theme-` class name
|
|
50
50
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
51
51
|
|
|
52
|
-
var themeClass = new RegExp(/\bnp-theme
|
|
52
|
+
var themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g'); // useEffect hook used to apply the theme class to the HTML element
|
|
53
53
|
|
|
54
54
|
useEffect(function () {
|
|
55
55
|
if (isRootProvider) {
|
|
56
|
+
var _document$documentEle;
|
|
57
|
+
|
|
56
58
|
// Remove all the theme classes from the documentElement
|
|
57
|
-
|
|
58
|
-
document.documentElement.
|
|
59
|
-
} // Add the new theme class to the documentElement
|
|
59
|
+
(_document$documentEle = document.documentElement.className.match(themeClass)) === null || _document$documentEle === void 0 ? void 0 : _document$documentEle.map(function (item) {
|
|
60
|
+
document.documentElement.classList.remove(item);
|
|
61
|
+
}); // Add the new theme class to the documentElement
|
|
60
62
|
|
|
63
|
+
if (isThemeModern(theme)) {
|
|
64
|
+
document.documentElement.classList.add('np-theme-personal');
|
|
65
|
+
}
|
|
61
66
|
|
|
62
67
|
document.documentElement.classList.add("np-theme-".concat(theme));
|
|
63
68
|
}
|
package/dist/es/index.js.map
CHANGED
|
@@ -1 +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
|
|
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', '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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/components-theming",
|
|
3
|
-
"version": "0.3
|
|
3
|
+
"version": "0.4.1-beta-0eeac85bc9.3+0eeac85bc9",
|
|
4
4
|
"description": "Provides theming support for the Wise Design system components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": [
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"@types/react-dom": "17.0.18",
|
|
20
20
|
"rollup": "3.2.3",
|
|
21
21
|
"rollup-plugin-ts": "3.0.2",
|
|
22
|
-
"typescript": "4.
|
|
22
|
+
"typescript": "4.9.4"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"react": ">=16.14",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"dist/",
|
|
44
44
|
"src/"
|
|
45
45
|
],
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "0eeac85bc9c7ae0de3f8622b608b75838c10c5e6"
|
|
47
47
|
}
|
|
@@ -1,19 +1,9 @@
|
|
|
1
|
-
import { render, screen
|
|
2
|
-
import React from 'react';
|
|
1
|
+
import { render, screen } from '@testing-library/react';
|
|
3
2
|
|
|
4
3
|
import { ThemeProvider } from './ThemeProvider';
|
|
5
4
|
|
|
6
5
|
import {} from './const';
|
|
7
6
|
|
|
8
|
-
const InValidElement = React.createContext<undefined>(undefined).Provider;
|
|
9
|
-
const ComponentWithClassname = ({
|
|
10
|
-
className,
|
|
11
|
-
...rest
|
|
12
|
-
}: {
|
|
13
|
-
className?: string;
|
|
14
|
-
[key: string]: string | undefined;
|
|
15
|
-
}) => <div className={className} {...rest} />;
|
|
16
|
-
|
|
17
7
|
describe('ThemeProvider', () => {
|
|
18
8
|
it('can nest theme providers', () => {
|
|
19
9
|
render(
|
package/src/ThemeProvider.tsx
CHANGED
|
@@ -2,6 +2,7 @@ import { createContext, PropsWithChildren, useContext, useEffect } from 'react';
|
|
|
2
2
|
|
|
3
3
|
import { ThemedChildren } from './ThemedChildren';
|
|
4
4
|
import { ComponentTheme, DEFAULT_COMPONENT_THEME, Theming } from './const';
|
|
5
|
+
import { isThemeModern } from './helpers';
|
|
5
6
|
|
|
6
7
|
export const ThemeContext = createContext<ComponentTheme | undefined>(undefined);
|
|
7
8
|
|
|
@@ -15,19 +16,19 @@ export const ThemeProvider = ({
|
|
|
15
16
|
|
|
16
17
|
// RegEx to check for `np-theme-` class name
|
|
17
18
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18
|
-
const themeClass = new RegExp(/\bnp-theme
|
|
19
|
+
const themeClass = new RegExp(/\bnp-theme-[a-z-]+\b/, 'g');
|
|
19
20
|
|
|
20
21
|
// useEffect hook used to apply the theme class to the HTML element
|
|
21
22
|
useEffect(() => {
|
|
22
23
|
if (isRootProvider) {
|
|
23
24
|
// Remove all the theme classes from the documentElement
|
|
24
|
-
|
|
25
|
-
document.documentElement.
|
|
26
|
-
|
|
27
|
-
'',
|
|
28
|
-
);
|
|
29
|
-
}
|
|
25
|
+
document.documentElement.className.match(themeClass)?.map((item) => {
|
|
26
|
+
document.documentElement.classList.remove(item);
|
|
27
|
+
});
|
|
30
28
|
// Add the new theme class to the documentElement
|
|
29
|
+
if (isThemeModern(theme)) {
|
|
30
|
+
document.documentElement.classList.add('np-theme-personal');
|
|
31
|
+
}
|
|
31
32
|
document.documentElement.classList.add(`np-theme-${theme}`);
|
|
32
33
|
}
|
|
33
34
|
}, [isRootProvider, theme, themeClass]);
|
package/src/ThemedChildren.tsx
CHANGED
package/src/const.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export const componentThemes = ['light', 'personal'] as const;
|
|
2
|
-
export const modernThemes = ['personal'] as const;
|
|
3
|
-
export const darkThemes = [] as const;
|
|
1
|
+
export const componentThemes = ['light', 'personal', 'personal--dark', 'personal--forest-green'] as const;
|
|
2
|
+
export const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;
|
|
3
|
+
export const darkThemes = ['personal--dark'] as const;
|
|
4
4
|
|
|
5
5
|
export type ComponentTheme = typeof componentThemes[number];
|
|
6
6
|
export type ModernTheme = typeof modernThemes[number];
|
package/CHANGELOG.md
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
# Change Log
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
# [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)
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
### Features
|
|
10
|
-
|
|
11
|
-
* 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)
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
### BREAKING CHANGES
|
|
15
|
-
|
|
16
|
-
* 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
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
# [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)
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
### Features
|
|
26
|
-
|
|
27
|
-
* 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)
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
### BREAKING CHANGES
|
|
31
|
-
|
|
32
|
-
* 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
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
## [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)
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
### Bug Fixes
|
|
42
|
-
|
|
43
|
-
* **components-theming:** fix build ([#1747](https://github.com/transferwise/neptune-web/issues/1747)) ([f077c1a](https://github.com/transferwise/neptune-web/commit/f077c1aff760b8b65fa663a236cf168360ecdcf8))
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
# 0.1.0 (2022-11-02)
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
### Features
|
|
53
|
-
|
|
54
|
-
* **components-theming:** Add theme provider package ([#1718](https://github.com/transferwise/neptune-web/issues/1718)) ([ee9d394](https://github.com/transferwise/neptune-web/commit/ee9d394b590f60462986b774c1d9192edf2e1ade))
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
# Change Log
|