@os-design/theming-tools 1.0.3 → 1.0.4
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/utils/color.js +1 -1
- package/dist/cjs/utils/createThemeOverrider.js +3 -3
- package/dist/cjs/utils/createThemeOverrider.js.map +1 -1
- package/dist/cjs/utils/createThemeProvider.js +1 -1
- package/dist/cjs/utils/createThemeProvider.js.map +1 -1
- package/dist/cjs/utils/createUseTheme.js +2 -2
- package/dist/esm/utils/createThemeOverrider.js.map +1 -1
- package/dist/esm/utils/createThemeProvider.js.map +1 -1
- package/dist/types/utils/createThemeOverrider.d.ts +1 -0
- package/dist/types/utils/createThemeOverrider.d.ts.map +1 -1
- package/dist/types/utils/createThemeProvider.d.ts +1 -0
- package/dist/types/utils/createThemeProvider.d.ts.map +1 -1
- package/package.json +3 -3
package/dist/cjs/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
package/dist/cjs/utils/color.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
|
|
8
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
8
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Converts a color to string.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -19,9 +19,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
21
|
|
|
22
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
23
|
|
|
24
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
25
|
|
|
26
26
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
27
27
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","parentTheme","theme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","parentTheme","theme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA;;;;;;;;;;;;;;AAsBA,SAASA,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB;AACA,SAAO,gBAAqD;AAAA,QAAzCC,WAAyC,QAAzCA,WAAyC;AAAA,8BAA5BC,SAA4B;AAAA,QAA5BA,SAA4B,+BAAhB,EAAgB;AAAA,QAAZC,QAAY,QAAZA,QAAY;;AAC1D,oBAMIH,QAAQ,EANZ;AAAA,QACEI,MADF,aACEA,MADF;AAAA,QAESC,WAFT,aAEEC,KAFF;AAAA,QAGaC,eAHb,aAGEL,SAHF;AAAA,QAIeM,iBAJf,aAIEP,WAJF;AAAA,QAKEQ,cALF,aAKEA,cALF;;AAQA,QAAMC,gBAAgB,GAAGT,WAAW,IAAIO,iBAAxC,CAT0D,CAW1D;;AACA,QAAMG,cAAc,GAAG,oBACrB;AAAA,6CACMV,WAAW,GAAG,EAAH,GAAQM,eADzB,GAEM,OAAOL,SAAP,KAAqB,UAArB,GACCA,SAAD,CAAwBG,WAAxB,CADA,GAEAH,SAJN;AAAA,KADqB,EAOrB,CAACD,WAAD,EAAcM,eAAd,EAA+BL,SAA/B,EAA0CG,WAA1C,CAPqB,CAAvB,CAZ0D,CAsB1D;;AACA,QAAMO,UAAU,GAAG,oBACjB;AAAA,aAAM,+BAAcR,MAAM,CAACM,gBAAD,CAApB,EAAwCC,cAAxC,CAAN;AAAA,KADiB,EAEjB,CAACP,MAAD,EAASM,gBAAT,EAA2BC,cAA3B,CAFiB,CAAnB;AAKA,QAAME,YAAY,GAAG,oBACnB;AAAA,aAAO;AACLT,QAAAA,MAAM,EAANA,MADK;AAELF,QAAAA,SAAS,EAAES,cAFN;AAGLV,QAAAA,WAAW,EAAES,gBAHR;AAILD,QAAAA,cAAc,EAAdA;AAJK,OAAP;AAAA,KADmB,EAOnB,CAACC,gBAAD,EAAmBC,cAAnB,EAAmCF,cAAnC,EAAmDL,MAAnD,CAPmB,CAArB;AAUA,wBACE,gCAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAES;AAApB,oBACE,gCAAC,qBAAD;AAAsB,MAAA,KAAK,EAAED;AAA7B,OACGT,QADH,CADF,CADF;AAOD,GA7CD;AA8CD;;eAEcL,oB","sourcesContent":["import React, { useMemo } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\nimport { UseTheme } from './createUseTheme';\nimport overrideTheme from './overrideTheme';\n\nexport interface ThemeOverriderProps<T> {\n /**\n * The active theme of children.\n * @default undefined\n */\n activeTheme?: keyof ThemeMap<T>;\n /**\n * Overrides the active theme parameters.\n * @default undefined\n */\n overrides?: Partial<T> | ((theme: T) => Partial<T>);\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;\n\nfunction createThemeOverrider<T>(\n TC: ThemeContext<T>,\n useTheme: UseTheme<T>\n): ThemeOverrider<T> {\n // eslint-disable-next-line func-names\n return function ({ activeTheme, overrides = {}, children }) {\n const {\n themes,\n theme: parentTheme,\n overrides: parentOverrides,\n activeTheme: parentActiveTheme,\n setActiveTheme,\n } = useTheme();\n\n const localActiveTheme = activeTheme || parentActiveTheme;\n\n // Parents overrides are ignored if the active theme was specified\n const localOverrides = useMemo<Partial<T>>(\n () => ({\n ...(activeTheme ? {} : parentOverrides),\n ...(typeof overrides === 'function'\n ? (overrides as Function)(parentTheme)\n : overrides),\n }),\n [activeTheme, parentOverrides, overrides, parentTheme]\n );\n\n // Make the local theme\n const localTheme = useMemo<T>(\n () => overrideTheme(themes[localActiveTheme], localOverrides),\n [themes, localActiveTheme, localOverrides]\n );\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: localOverrides,\n activeTheme: localActiveTheme,\n setActiveTheme,\n }),\n [localActiveTheme, localOverrides, setActiveTheme, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={localTheme}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeOverrider;\n"],"file":"createThemeOverrider.js"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof";
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAASA,mBAAT,CACEC,EADF,EAEEC,aAFF,EAOoB;AAAA,MAJlBC,YAIkB,uEAJW;AAC3BC,IAAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA,KADkB;AAE3BC,IAAAA,OAAO,EAAE,mBAAM,CAAE;AAFU,GAIX;AAClB;AACA,SAAO,gBAKJ;AAAA,2BAJDC,MAIC;AAAA,QAJDA,MAIC,4BAJQJ,aAIR;AAAA,iCAHDK,YAGC;AAAA,QAHDA,YAGC,kCAHc,OAGd;AAAA,+BAFDC,UAEC;AAAA,QAFDA,UAEC,gCAFY,OAEZ;AAAA,QADDC,QACC,QADDA,QACC;;AACD,oBAAsC,qBACpCH,MAAM,CAACC,YAAD,CAAN,GAAuBA,YAAvB,GAAsC,OADF,CAAtC;AAAA;AAAA,QAAOG,WAAP;AAAA,QAAoBC,eAApB;;AAIA,0BAAU,YAAM;AACd,UAAMC,aAAa;AAAA,4EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBACAT,YAAY,CAACC,OAAb,CAAqBI,UAArB,CADA;;AAAA;AACdK,kBAAAA,KADc;AAEpB,sBAAIA,KAAK,IAAIP,MAAM,CAACO,KAAD,CAAnB,EAA4BF,eAAc,CAACE,KAAD,CAAd;;AAFR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAH;;AAAA,wBAAbD,aAAa;AAAA;AAAA;AAAA,SAAnB;;AAIAA,MAAAA,aAAa;AACd,KAND,EAMG,CAACJ,UAAD,EAAaF,MAAb,CANH;AAQA,QAAMQ,YAAY,GAAG,oBACnB;AAAA,aAAO;AACLR,QAAAA,MAAM,EAANA,MADK;AAELS,QAAAA,SAAS,EAAE,EAFN;AAGLL,QAAAA,WAAW,EAAXA,WAHK;AAILC,QAAAA,cAAc,EAAE,wBAACK,IAAD,EAAU;AACxBL,UAAAA,eAAc,CAACK,IAAD,CAAd;;AACAb,UAAAA,YAAY,CAACE,OAAb,CAAqBG,UAArB,EAAiCQ,IAAjC;AACD;AAPI,OAAP;AAAA,KADmB,EAUnB,CAACN,WAAD,EAAcF,UAAd,EAA0BF,MAA1B,CAVmB,CAArB;AAaA,wBACE,gCAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAEQ;AAApB,oBACE,gCAAC,qBAAD;AAAsB,MAAA,KAAK,EAAER,MAAM,CAACI,WAAD;AAAnC,OACGD,QADH,CADF,CADF;AAOD,GAtCD;AAuCD;;eAEcT,mB","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\n\nexport interface ThemeProviderProps<T> {\n /**\n * Available themes.\n * @default undefined\n */\n themes?: ThemeMap<T>;\n /**\n * The theme used by default.\n * @default light\n */\n initialTheme?: 'light' | 'dark' | string;\n /**\n * The key in the local storage where the active theme is saved.\n * @default theme\n */\n storageKey?: string;\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;\n\nexport interface LocalStorage {\n getItem: (key: string) => string | null | Promise<string | null>;\n setItem: (key: string, value: string) => void | Promise<void>;\n}\n\nfunction createThemeProvider<T>(\n TC: ThemeContext<T>,\n defaultThemes: ThemeMap<T>,\n localStorage: LocalStorage = {\n getItem: () => null,\n setItem: () => {},\n }\n): ThemeProvider<T> {\n // eslint-disable-next-line func-names\n return function ({\n themes = defaultThemes,\n initialTheme = 'light',\n storageKey = 'theme',\n children,\n }) {\n const [activeTheme, setActiveTheme] = useState(\n themes[initialTheme] ? initialTheme : 'light'\n );\n\n useEffect(() => {\n const getSavedTheme = async () => {\n const saved = await localStorage.getItem(storageKey);\n if (saved && themes[saved]) setActiveTheme(saved);\n };\n getSavedTheme();\n }, [storageKey, themes]);\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: {},\n activeTheme,\n setActiveTheme: (name) => {\n setActiveTheme(name);\n localStorage.setItem(storageKey, name);\n },\n }),\n [activeTheme, storageKey, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={themes[activeTheme]}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeProvider;\n"],"file":"createThemeProvider.js"}
|
|
@@ -11,9 +11,9 @@ var _overrideTheme = _interopRequireDefault(require("./overrideTheme"));
|
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
13
|
|
|
14
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
15
15
|
|
|
16
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
17
|
|
|
18
18
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["React","useMemo","ThemeProvider","EmotionThemeProvider","overrideTheme","createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","theme","parentTheme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;AAGA,OAAOC,aAAP,MAA0B,iBAA1B;;
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeOverrider.tsx"],"names":["React","useMemo","ThemeProvider","EmotionThemeProvider","overrideTheme","createThemeOverrider","TC","useTheme","activeTheme","overrides","children","themes","theme","parentTheme","parentOverrides","parentActiveTheme","setActiveTheme","localActiveTheme","localOverrides","localTheme","contextValue"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;AAGA,OAAOC,aAAP,MAA0B,iBAA1B;;AAsBA,SAASC,oBAAT,CACEC,EADF,EAEEC,QAFF,EAGqB;AACnB;AACA,SAAO,UAAU;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,SAAS,GAAG,EAA3B;AAA+BC,IAAAA;AAA/B,GAAV,EAAqD;AAC1D,UAAM;AACJC,MAAAA,MADI;AAEJC,MAAAA,KAAK,EAAEC,WAFH;AAGJJ,MAAAA,SAAS,EAAEK,eAHP;AAIJN,MAAAA,WAAW,EAAEO,iBAJT;AAKJC,MAAAA;AALI,QAMFT,QAAQ,EANZ;AAQA,UAAMU,gBAAgB,GAAGT,WAAW,IAAIO,iBAAxC,CAT0D,CAW1D;;AACA,UAAMG,cAAc,GAAGjB,OAAO,CAC5B,OAAO,EACL,IAAIO,WAAW,GAAG,EAAH,GAAQM,eAAvB,CADK;AAEL,UAAI,OAAOL,SAAP,KAAqB,UAArB,GACCA,SAAD,CAAwBI,WAAxB,CADA,GAEAJ,SAFJ;AAFK,KAAP,CAD4B,EAO5B,CAACD,WAAD,EAAcM,eAAd,EAA+BL,SAA/B,EAA0CI,WAA1C,CAP4B,CAA9B,CAZ0D,CAsB1D;;AACA,UAAMM,UAAU,GAAGlB,OAAO,CACxB,MAAMG,aAAa,CAACO,MAAM,CAACM,gBAAD,CAAP,EAA2BC,cAA3B,CADK,EAExB,CAACP,MAAD,EAASM,gBAAT,EAA2BC,cAA3B,CAFwB,CAA1B;AAKA,UAAME,YAAY,GAAGnB,OAAO,CAC1B,OAAO;AACLU,MAAAA,MADK;AAELF,MAAAA,SAAS,EAAES,cAFN;AAGLV,MAAAA,WAAW,EAAES,gBAHR;AAILD,MAAAA;AAJK,KAAP,CAD0B,EAO1B,CAACC,gBAAD,EAAmBC,cAAnB,EAAmCF,cAAnC,EAAmDL,MAAnD,CAP0B,CAA5B;AAUA,wBACE,oBAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAES;AAApB,oBACE,oBAAC,oBAAD;AAAsB,MAAA,KAAK,EAAED;AAA7B,OACGT,QADH,CADF,CADF;AAOD,GA7CD;AA8CD;;AAED,eAAeL,oBAAf","sourcesContent":["import React, { useMemo } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\nimport { UseTheme } from './createUseTheme';\nimport overrideTheme from './overrideTheme';\n\nexport interface ThemeOverriderProps<T> {\n /**\n * The active theme of children.\n * @default undefined\n */\n activeTheme?: keyof ThemeMap<T>;\n /**\n * Overrides the active theme parameters.\n * @default undefined\n */\n overrides?: Partial<T> | ((theme: T) => Partial<T>);\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;\n\nfunction createThemeOverrider<T>(\n TC: ThemeContext<T>,\n useTheme: UseTheme<T>\n): ThemeOverrider<T> {\n // eslint-disable-next-line func-names\n return function ({ activeTheme, overrides = {}, children }) {\n const {\n themes,\n theme: parentTheme,\n overrides: parentOverrides,\n activeTheme: parentActiveTheme,\n setActiveTheme,\n } = useTheme();\n\n const localActiveTheme = activeTheme || parentActiveTheme;\n\n // Parents overrides are ignored if the active theme was specified\n const localOverrides = useMemo<Partial<T>>(\n () => ({\n ...(activeTheme ? {} : parentOverrides),\n ...(typeof overrides === 'function'\n ? (overrides as Function)(parentTheme)\n : overrides),\n }),\n [activeTheme, parentOverrides, overrides, parentTheme]\n );\n\n // Make the local theme\n const localTheme = useMemo<T>(\n () => overrideTheme(themes[localActiveTheme], localOverrides),\n [themes, localActiveTheme, localOverrides]\n );\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: localOverrides,\n activeTheme: localActiveTheme,\n setActiveTheme,\n }),\n [localActiveTheme, localOverrides, setActiveTheme, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={localTheme}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeOverrider;\n"],"file":"createThemeOverrider.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["React","useEffect","useMemo","useState","ThemeProvider","EmotionThemeProvider","createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,OAA3B,EAAoCC,QAApC,QAAoD,OAApD;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;;
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/createThemeProvider.tsx"],"names":["React","useEffect","useMemo","useState","ThemeProvider","EmotionThemeProvider","createThemeProvider","TC","defaultThemes","localStorage","getItem","setItem","themes","initialTheme","storageKey","children","activeTheme","setActiveTheme","getSavedTheme","saved","contextValue","overrides","name"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,OAA3B,EAAoCC,QAApC,QAAoD,OAApD;AACA,SAASC,aAAa,IAAIC,oBAA1B,QAAsD,gBAAtD;;AAiCA,SAASC,mBAAT,CACEC,EADF,EAEEC,aAFF,EAGEC,YAA0B,GAAG;AAC3BC,EAAAA,OAAO,EAAE,MAAM,IADY;AAE3BC,EAAAA,OAAO,EAAE,MAAM,CAAE;AAFU,CAH/B,EAOoB;AAClB;AACA,SAAO,UAAU;AACfC,IAAAA,MAAM,GAAGJ,aADM;AAEfK,IAAAA,YAAY,GAAG,OAFA;AAGfC,IAAAA,UAAU,GAAG,OAHE;AAIfC,IAAAA;AAJe,GAAV,EAKJ;AACD,UAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCd,QAAQ,CAC5CS,MAAM,CAACC,YAAD,CAAN,GAAuBA,YAAvB,GAAsC,OADM,CAA9C;AAIAZ,IAAAA,SAAS,CAAC,MAAM;AACd,YAAMiB,aAAa,GAAG,YAAY;AAChC,cAAMC,KAAK,GAAG,MAAMV,YAAY,CAACC,OAAb,CAAqBI,UAArB,CAApB;AACA,YAAIK,KAAK,IAAIP,MAAM,CAACO,KAAD,CAAnB,EAA4BF,cAAc,CAACE,KAAD,CAAd;AAC7B,OAHD;;AAIAD,MAAAA,aAAa;AACd,KANQ,EAMN,CAACJ,UAAD,EAAaF,MAAb,CANM,CAAT;AAQA,UAAMQ,YAAY,GAAGlB,OAAO,CAC1B,OAAO;AACLU,MAAAA,MADK;AAELS,MAAAA,SAAS,EAAE,EAFN;AAGLL,MAAAA,WAHK;AAILC,MAAAA,cAAc,EAAGK,IAAD,IAAU;AACxBL,QAAAA,cAAc,CAACK,IAAD,CAAd;AACAb,QAAAA,YAAY,CAACE,OAAb,CAAqBG,UAArB,EAAiCQ,IAAjC;AACD;AAPI,KAAP,CAD0B,EAU1B,CAACN,WAAD,EAAcF,UAAd,EAA0BF,MAA1B,CAV0B,CAA5B;AAaA,wBACE,oBAAC,EAAD,CAAI,QAAJ;AAAa,MAAA,KAAK,EAAEQ;AAApB,oBACE,oBAAC,oBAAD;AAAsB,MAAA,KAAK,EAAER,MAAM,CAACI,WAAD;AAAnC,OACGD,QADH,CADF,CADF;AAOD,GAtCD;AAuCD;;AAED,eAAeT,mBAAf","sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react';\nimport { ThemeContext, ThemeMap } from './createThemeContext';\n\nexport interface ThemeProviderProps<T> {\n /**\n * Available themes.\n * @default undefined\n */\n themes?: ThemeMap<T>;\n /**\n * The theme used by default.\n * @default light\n */\n initialTheme?: 'light' | 'dark' | string;\n /**\n * The key in the local storage where the active theme is saved.\n * @default theme\n */\n storageKey?: string;\n /**\n * The children.\n * @default undefined\n */\n children?: React.ReactNode;\n}\n\nexport type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;\n\nexport interface LocalStorage {\n getItem: (key: string) => string | null | Promise<string | null>;\n setItem: (key: string, value: string) => void | Promise<void>;\n}\n\nfunction createThemeProvider<T>(\n TC: ThemeContext<T>,\n defaultThemes: ThemeMap<T>,\n localStorage: LocalStorage = {\n getItem: () => null,\n setItem: () => {},\n }\n): ThemeProvider<T> {\n // eslint-disable-next-line func-names\n return function ({\n themes = defaultThemes,\n initialTheme = 'light',\n storageKey = 'theme',\n children,\n }) {\n const [activeTheme, setActiveTheme] = useState(\n themes[initialTheme] ? initialTheme : 'light'\n );\n\n useEffect(() => {\n const getSavedTheme = async () => {\n const saved = await localStorage.getItem(storageKey);\n if (saved && themes[saved]) setActiveTheme(saved);\n };\n getSavedTheme();\n }, [storageKey, themes]);\n\n const contextValue = useMemo(\n () => ({\n themes,\n overrides: {},\n activeTheme,\n setActiveTheme: (name) => {\n setActiveTheme(name);\n localStorage.setItem(storageKey, name);\n },\n }),\n [activeTheme, storageKey, themes]\n );\n\n return (\n <TC.Provider value={contextValue}>\n <EmotionThemeProvider theme={themes[activeTheme]}>\n {children}\n </EmotionThemeProvider>\n </TC.Provider>\n );\n };\n}\n\nexport default createThemeProvider;\n"],"file":"createThemeProvider.js"}
|
|
@@ -4,6 +4,7 @@ import { UseTheme } from './createUseTheme';
|
|
|
4
4
|
export interface ThemeOverriderProps<T> {
|
|
5
5
|
activeTheme?: keyof ThemeMap<T>;
|
|
6
6
|
overrides?: Partial<T> | ((theme: T) => Partial<T>);
|
|
7
|
+
children?: React.ReactNode;
|
|
7
8
|
}
|
|
8
9
|
export declare type ThemeOverrider<T> = React.FC<ThemeOverriderProps<T>>;
|
|
9
10
|
declare function createThemeOverrider<T>(TC: ThemeContext<T>, useTheme: UseTheme<T>): ThemeOverrider<T>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeOverrider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeOverrider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAKpC,WAAW,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKhC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"createThemeOverrider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeOverrider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IAKpC,WAAW,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKhC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAKpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,oBAAY,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEjE,iBAAS,oBAAoB,CAAC,CAAC,EAC7B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,EACnB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GACpB,cAAc,CAAC,CAAC,CAAC,CAgDnB;AAED,eAAe,oBAAoB,CAAC"}
|
|
@@ -4,6 +4,7 @@ export interface ThemeProviderProps<T> {
|
|
|
4
4
|
themes?: ThemeMap<T>;
|
|
5
5
|
initialTheme?: 'light' | 'dark' | string;
|
|
6
6
|
storageKey?: string;
|
|
7
|
+
children?: React.ReactNode;
|
|
7
8
|
}
|
|
8
9
|
export declare type ThemeProvider<T> = React.FC<ThemeProviderProps<T>>;
|
|
9
10
|
export interface LocalStorage {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,kBAAkB,CAAC,CAAC;IAKnC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKrB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAKzC,UAAU,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"createThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/utils/createThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,kBAAkB,CAAC,CAAC;IAKnC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;IAKrB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAKzC,UAAU,CAAC,EAAE,MAAM,CAAC;IAKpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,oBAAY,aAAa,CAAC,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACjE,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D;AAED,iBAAS,mBAAmB,CAAC,CAAC,EAC5B,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,EACnB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,EAC1B,YAAY,GAAE,YAGb,GACA,aAAa,CAAC,CAAC,CAAC,CAyClB;AAED,eAAe,mBAAmB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/theming-tools",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"@emotion/react": ">=11",
|
|
35
|
-
"react": ">=
|
|
35
|
+
"react": ">=18"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "990fa0eb8e38bbb94ebea1ba0c825574ff11fe5e"
|
|
38
38
|
}
|