@wise/components-theming 0.4.1-beta-0eeac85bc9.3 → 0.5.0
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.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/index.js +1 -1
- package/dist/es/index.js.map +1 -1
- package/package.json +2 -2
- package/src/ThemedChildren.tsx +1 -1
- package/src/const.ts +1 -1
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', 'personal--dark', 'personal--forest-green'];
|
|
7
6
|
var darkThemes = ['personal--dark'];
|
|
7
|
+
var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
|
|
8
8
|
var DEFAULT_COMPONENT_THEME = 'light';
|
|
9
9
|
|
|
10
10
|
var isThemeModern = function isThemeModern(theme) {
|
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', 'personal--dark', 'personal--forest-green'] as const;\nexport const
|
|
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 darkThemes = ['personal--dark'] as const;\nexport const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] 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';\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":["darkThemes","modernThemes","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.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', 'personal--dark', 'personal--forest-green'];
|
|
5
4
|
var darkThemes = ['personal--dark'];
|
|
5
|
+
var modernThemes = ['personal', 'personal--dark', 'personal--forest-green'];
|
|
6
6
|
var DEFAULT_COMPONENT_THEME = 'light';
|
|
7
7
|
|
|
8
8
|
var isThemeModern = function isThemeModern(theme) {
|
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', 'personal--dark', 'personal--forest-green'] as const;\nexport const
|
|
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 darkThemes = ['personal--dark'] as const;\nexport const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] 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';\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":["darkThemes","modernThemes","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
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Provides theming support for the Wise Design system components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": [
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"dist/",
|
|
44
44
|
"src/"
|
|
45
45
|
],
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "684525a9919f04b8b01834dc1f5f58981145f931"
|
|
47
47
|
}
|
package/src/ThemedChildren.tsx
CHANGED
package/src/const.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
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
2
|
export const darkThemes = ['personal--dark'] as const;
|
|
3
|
+
export const modernThemes = ['personal', 'personal--dark', 'personal--forest-green'] as const;
|
|
4
4
|
|
|
5
5
|
export type ComponentTheme = typeof componentThemes[number];
|
|
6
6
|
export type ModernTheme = typeof modernThemes[number];
|