@xanui/core 1.2.1 → 1.2.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.
Files changed (91) hide show
  1. package/AppRoot/Renderar.js.map +1 -1
  2. package/AppRoot/Renderar.mjs.map +1 -1
  3. package/AppRoot/index.js +17 -12
  4. package/AppRoot/index.js.map +1 -1
  5. package/AppRoot/index.mjs +17 -12
  6. package/AppRoot/index.mjs.map +1 -1
  7. package/RenderServerStyles.js.map +1 -1
  8. package/RenderServerStyles.mjs.map +1 -1
  9. package/Tag/cssPropList.js.map +1 -1
  10. package/Tag/cssPropList.mjs.map +1 -1
  11. package/Tag/index.js.map +1 -1
  12. package/Tag/index.mjs.map +1 -1
  13. package/Tag/useTagProps.js.map +1 -1
  14. package/Tag/useTagProps.mjs.map +1 -1
  15. package/Transition/index.js.map +1 -1
  16. package/Transition/index.mjs.map +1 -1
  17. package/Transition/variants.js.map +1 -1
  18. package/Transition/variants.mjs.map +1 -1
  19. package/breakpoint/BreakpointProvider.js.map +1 -1
  20. package/breakpoint/BreakpointProvider.mjs.map +1 -1
  21. package/breakpoint/useBreakpoint.js.map +1 -1
  22. package/breakpoint/useBreakpoint.mjs.map +1 -1
  23. package/breakpoint/useBreakpointProps.js.map +1 -1
  24. package/breakpoint/useBreakpointProps.mjs.map +1 -1
  25. package/css/aliases.js.map +1 -1
  26. package/css/aliases.mjs.map +1 -1
  27. package/css/getProps.js +36 -0
  28. package/css/getProps.js.map +1 -1
  29. package/css/getProps.mjs +36 -0
  30. package/css/getProps.mjs.map +1 -1
  31. package/css/getValue.js +11 -8
  32. package/css/getValue.js.map +1 -1
  33. package/css/getValue.mjs +11 -8
  34. package/css/getValue.mjs.map +1 -1
  35. package/css/index.js.map +1 -1
  36. package/css/index.mjs.map +1 -1
  37. package/css/types.d.ts +0 -1
  38. package/hooks/useAnimation.js.map +1 -1
  39. package/hooks/useAnimation.mjs.map +1 -1
  40. package/hooks/useColorTemplate.d.ts +35 -4
  41. package/hooks/useColorTemplate.js +39 -4
  42. package/hooks/useColorTemplate.js.map +1 -1
  43. package/hooks/useColorTemplate.mjs +39 -4
  44. package/hooks/useColorTemplate.mjs.map +1 -1
  45. package/hooks/useInterface.d.ts +1 -1
  46. package/hooks/useInterface.js +1 -1
  47. package/hooks/useInterface.js.map +1 -1
  48. package/hooks/useInterface.mjs +1 -1
  49. package/hooks/useInterface.mjs.map +1 -1
  50. package/hooks/usePortal.js +1 -1
  51. package/hooks/usePortal.js.map +1 -1
  52. package/hooks/usePortal.mjs +1 -1
  53. package/hooks/usePortal.mjs.map +1 -1
  54. package/hooks/useScrollbar.js +3 -3
  55. package/hooks/useScrollbar.js.map +1 -1
  56. package/hooks/useScrollbar.mjs +3 -3
  57. package/hooks/useScrollbar.mjs.map +1 -1
  58. package/index.d.ts +1 -1
  59. package/isWindow.js.map +1 -1
  60. package/isWindow.mjs.map +1 -1
  61. package/package.json +1 -1
  62. package/readme.md +109 -109
  63. package/theme/ThemeCssVars.js +1 -1
  64. package/theme/ThemeCssVars.js.map +1 -1
  65. package/theme/ThemeCssVars.mjs +1 -1
  66. package/theme/ThemeCssVars.mjs.map +1 -1
  67. package/theme/ThemeDefaultOptions.js +151 -99
  68. package/theme/ThemeDefaultOptions.js.map +1 -1
  69. package/theme/ThemeDefaultOptions.mjs +151 -99
  70. package/theme/ThemeDefaultOptions.mjs.map +1 -1
  71. package/theme/ThemeProvider.js +8 -2
  72. package/theme/ThemeProvider.js.map +1 -1
  73. package/theme/ThemeProvider.mjs +8 -2
  74. package/theme/ThemeProvider.mjs.map +1 -1
  75. package/theme/core.js.map +1 -1
  76. package/theme/core.mjs.map +1 -1
  77. package/theme/createTheme.js +2 -13
  78. package/theme/createTheme.js.map +1 -1
  79. package/theme/createTheme.mjs +2 -13
  80. package/theme/createTheme.mjs.map +1 -1
  81. package/theme/createThemeSwitcher.js.map +1 -1
  82. package/theme/createThemeSwitcher.mjs.map +1 -1
  83. package/theme/index.js +1 -1
  84. package/theme/index.js.map +1 -1
  85. package/theme/index.mjs +1 -1
  86. package/theme/index.mjs.map +1 -1
  87. package/theme/types.d.ts +10 -45
  88. package/theme/createColor.js +0 -46
  89. package/theme/createColor.js.map +0 -1
  90. package/theme/createColor.mjs +0 -46
  91. package/theme/createColor.mjs.map +0 -1
@@ -1,4 +1,6 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),core=require('./core.js'),ThemeCssVars=require('./ThemeCssVars.js'),index=require('../css/index.js');function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var React__namespace=/*#__PURE__*/_interopNamespaceDefault(React);const ThemeProvider = (_a) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../Tag/index.js'),core=require('./core.js'),ThemeCssVars=require('./ThemeCssVars.js'),index=require('../css/index.js'),createTheme=require('./createTheme.js'),ThemeDefaultOptions=require('./ThemeDefaultOptions.js');function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var React__namespace=/*#__PURE__*/_interopNamespaceDefault(React);createTheme.createTheme("light", ThemeDefaultOptions.lightThemeOptions);
2
+ createTheme.createTheme("dark", ThemeDefaultOptions.darkThemeOptions);
3
+ const ThemeProvider = (_a) => {
2
4
  var { children, theme } = _a, props = tslib.__rest(_a, ["children", "theme"]);
3
5
  let THEME = core.ThemeFactory.get(theme);
4
6
  if (!THEME) {
@@ -18,5 +20,9 @@
18
20
  injectStyle: typeof window !== 'undefined'
19
21
  });
20
22
  }, [theme]);
21
- return (jsxRuntime.jsxs(core.ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsxRuntime.jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsxRuntime.jsx(index$1.default, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, color: THEME.colors.text.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children }))] }));
23
+ return (jsxRuntime.jsxs(core.ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsxRuntime.jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsxRuntime.jsx(index$1.default, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.common.primary, color: THEME.colors.common.text.primary, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { sxr: {
24
+ "& a": {
25
+ color: THEME.colors.brand.primary || 'inherit',
26
+ },
27
+ }, baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children }))] }));
22
28
  };exports.default=ThemeProvider;//# sourceMappingURL=ThemeProvider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n let THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) {\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\n }\n\n const globalStyle: any = React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n return css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n }, {\n injectStyle: typeof window !== 'undefined'\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n {\n typeof window === 'undefined' && <style\n precedence={globalStyle.classname}\n href={globalStyle.classname}\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\n />\n }\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n color={THEME.colors.text.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["__rest","ThemeFactory","React","css","ThemeCssVars","_jsxs","ThemeContex","_jsx","Tag"],"mappings":"woBAaA,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAGC,iBAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAGA,iBAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAA,MAAM,WAAW,GAAQC,gBAAK,CAAC,OAAO,CAAC,MAAK;AACzC,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,OAAOC,SAAG,CAAC;YACR,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAGC,oBAAY,CAAC,KAAK,CAAC,EAAA;SAEpC,EAAE;AACA,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,QACGC,eAAA,CAACC,gBAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAE5B,OAAO,MAAM,KAAK,WAAW,IAAIC,cAAA,CAAA,OAAA,EAAA,EAC9B,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,IAAI,EAAE,WAAW,CAAC,SAAS,EAC3B,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,EAAA,CACrD,EAELA,cAAA,CAACC,eAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAChC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,EAAA,EACT,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,EAAA,QAAA,EAEnC,QAAQ,EAAA,CAAA,CACN,CAAA,EAAA,CACc;AAE7B"}
1
+ {"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createTheme } from \"./createTheme\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n}\r\n\r\ncreateTheme(\"light\", lightThemeOptions)\r\ncreateTheme(\"dark\", darkThemeOptions)\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) {\r\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n }\r\n\r\n const globalStyle: any = React.useMemo(() => {\r\n const root_cls = `.xui-${theme}-theme-root`\r\n let gkeys = Object.keys(THEME.globalStyle || {})\r\n let gstyles: any = {}\r\n gkeys.forEach((key) => {\r\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n })\r\n\r\n return css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n {\r\n typeof window === 'undefined' && <style\r\n precedence={globalStyle.classname}\r\n href={globalStyle.classname}\r\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\r\n />\r\n }\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.common.primary}\r\n color={THEME.colors.common.text.primary}\r\n fontSize={THEME.typography.text.fontSize}\r\n fontWeight={THEME.typography.text.fontWeight}\r\n lineHeight={THEME.typography.text.lineHeight}\r\n {...props}\r\n sxr={{\r\n \"& a\": {\r\n color: THEME.colors.brand.primary || 'inherit',\r\n },\r\n }}\r\n baseClass={`${theme}-theme-root`}\r\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n >\r\n {children}\r\n </Tag>\r\n </ThemeContex.Provider>\r\n )\r\n}\r\n\r\nexport default ThemeProvider"],"names":["createTheme","lightThemeOptions","darkThemeOptions","__rest","ThemeFactory","React","css","ThemeCssVars","_jsxs","ThemeContex","_jsx","Tag"],"mappings":"wuBAcAA,uBAAW,CAAC,OAAO,EAAEC,qCAAiB,CAAC;AACvCD,uBAAW,CAAC,MAAM,EAAEE,oCAAgB,CAAC;AAErC,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAAC,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAGC,iBAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAGA,iBAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAA,MAAM,WAAW,GAAQC,gBAAK,CAAC,OAAO,CAAC,MAAK;AACzC,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,OAAOC,SAAG,CAAC;YACR,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAGC,oBAAY,CAAC,KAAK,CAAC,EAAA;SAEpC,EAAE;AACA,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACGC,gBAACC,gBAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAE5B,OAAO,MAAM,KAAK,WAAW,IAAIC,cAAA,CAAA,OAAA,EAAA,EAC9B,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,IAAI,EAAE,WAAW,CAAC,SAAS,EAC3B,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,GACrD,EAELA,cAAA,CAACC,eAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,EACpC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,EAAA,EACT,GAAG,EAAE;AACF,oBAAA,KAAK,EAAE;wBACJ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,SAAS;AAChD,qBAAA;iBACH,EACD,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,YAEnC,QAAQ,EAAA,CAAA,CACN,CAAA,EAAA,CACc;AAE7B"}
@@ -1,4 +1,6 @@
1
- import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import Tag from'../Tag/index.mjs';import {ThemeFactory,ThemeContex}from'./core.mjs';import ThemeCssVars from'./ThemeCssVars.mjs';import {css}from'../css/index.mjs';const ThemeProvider = (_a) => {
1
+ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import*as React from'react';import Tag from'../Tag/index.mjs';import {ThemeFactory,ThemeContex}from'./core.mjs';import ThemeCssVars from'./ThemeCssVars.mjs';import {css}from'../css/index.mjs';import {createTheme}from'./createTheme.mjs';import {lightThemeOptions,darkThemeOptions}from'./ThemeDefaultOptions.mjs';createTheme("light", lightThemeOptions);
2
+ createTheme("dark", darkThemeOptions);
3
+ const ThemeProvider = (_a) => {
2
4
  var { children, theme } = _a, props = __rest(_a, ["children", "theme"]);
3
5
  let THEME = ThemeFactory.get(theme);
4
6
  if (!THEME) {
@@ -18,5 +20,9 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import*as Re
18
20
  injectStyle: typeof window !== 'undefined'
19
21
  });
20
22
  }, [theme]);
21
- return (jsxs(ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.background.primary, color: THEME.colors.text.primary, fontFamily: THEME.typography.fontFamily, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children }))] }));
23
+ return (jsxs(ThemeContex.Provider, { value: theme, children: [typeof window === 'undefined' && jsx("style", { precedence: globalStyle.classname, href: globalStyle.classname, dangerouslySetInnerHTML: { __html: globalStyle.css } }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: THEME.colors.common.primary, color: THEME.colors.common.text.primary, fontSize: THEME.typography.text.fontSize, fontWeight: THEME.typography.text.fontWeight, lineHeight: THEME.typography.text.lineHeight }, props, { sxr: {
24
+ "& a": {
25
+ color: THEME.colors.brand.primary || 'inherit',
26
+ },
27
+ }, baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children }))] }));
22
28
  };export{ThemeProvider as default};//# sourceMappingURL=ThemeProvider.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n theme: string;\n}\n\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\n let THEME = ThemeFactory.get(theme) as ThemeOptions\n if (!THEME) {\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\n }\n\n const globalStyle: any = React.useMemo(() => {\n const root_cls = `.xui-${theme}-theme-root`\n let gkeys = Object.keys(THEME.globalStyle || {})\n let gstyles: any = {}\n gkeys.forEach((key) => {\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\n })\n\n return css({\n \"@global\": {\n ...gstyles,\n [root_cls]: ThemeCssVars(THEME)\n }\n }, {\n injectStyle: typeof window !== 'undefined'\n })\n }, [theme])\n\n return (\n <ThemeContex.Provider value={theme}>\n {\n typeof window === 'undefined' && <style\n precedence={globalStyle.classname}\n href={globalStyle.classname}\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\n />\n }\n <Tag\n minHeight=\"100%\"\n bgcolor={THEME.colors.background.primary}\n color={THEME.colors.text.primary}\n fontFamily={THEME.typography.fontFamily}\n fontSize={THEME.typography.text.fontSize}\n fontWeight={THEME.typography.text.fontWeight}\n lineHeight={THEME.typography.text.lineHeight}\n {...props}\n baseClass={`${theme}-theme-root`}\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n >\n {children}\n </Tag>\n </ThemeContex.Provider>\n )\n}\n\nexport default ThemeProvider"],"names":["_jsxs","_jsx"],"mappings":"oQAaA,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAA,MAAM,WAAW,GAAQ,KAAK,CAAC,OAAO,CAAC,MAAK;AACzC,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,GAAG,CAAC;YACR,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,EAAA;SAEpC,EAAE;AACA,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,QACGA,IAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAE5B,OAAO,MAAM,KAAK,WAAW,IAAIC,GAAA,CAAA,OAAA,EAAA,EAC9B,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,IAAI,EAAE,WAAW,CAAC,SAAS,EAC3B,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,EAAA,CACrD,EAELA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAChC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,UAAU,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,EAAA,EACT,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,EAAA,QAAA,EAEnC,QAAQ,EAAA,CAAA,CACN,CAAA,EAAA,CACc;AAE7B"}
1
+ {"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createTheme } from \"./createTheme\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n}\r\n\r\ncreateTheme(\"light\", lightThemeOptions)\r\ncreateTheme(\"dark\", darkThemeOptions)\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) {\r\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n }\r\n\r\n const globalStyle: any = React.useMemo(() => {\r\n const root_cls = `.xui-${theme}-theme-root`\r\n let gkeys = Object.keys(THEME.globalStyle || {})\r\n let gstyles: any = {}\r\n gkeys.forEach((key) => {\r\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n })\r\n\r\n return css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n {\r\n typeof window === 'undefined' && <style\r\n precedence={globalStyle.classname}\r\n href={globalStyle.classname}\r\n dangerouslySetInnerHTML={{ __html: globalStyle.css }}\r\n />\r\n }\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.common.primary}\r\n color={THEME.colors.common.text.primary}\r\n fontSize={THEME.typography.text.fontSize}\r\n fontWeight={THEME.typography.text.fontWeight}\r\n lineHeight={THEME.typography.text.lineHeight}\r\n {...props}\r\n sxr={{\r\n \"& a\": {\r\n color: THEME.colors.brand.primary || 'inherit',\r\n },\r\n }}\r\n baseClass={`${theme}-theme-root`}\r\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n >\r\n {children}\r\n </Tag>\r\n </ThemeContex.Provider>\r\n )\r\n}\r\n\r\nexport default ThemeProvider"],"names":["_jsxs","_jsx"],"mappings":"2XAcA,WAAW,CAAC,OAAO,EAAE,iBAAiB,CAAC;AACvC,WAAW,CAAC,MAAM,EAAE,gBAAgB,CAAC;AAErC,MAAM,aAAa,GAAG,CAAqC,EAAoD,KAAI;QAAxD,EAAE,QAAQ,EAAE,KAAK,EAAA,GAAA,EAAmC,EAA9B,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;IACnF,IAAI,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;IACnD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,6BAA6B,KAAK,CAAA,6DAAA,CAA+D,CAAC;AAChH,QAAA,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAiB;IACpD;AAEA,IAAA,MAAM,WAAW,GAAQ,KAAK,CAAC,OAAO,CAAC,MAAK;AACzC,QAAA,MAAM,QAAQ,GAAG,CAAA,KAAA,EAAQ,KAAK,aAAa;AAC3C,QAAA,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;QAChD,IAAI,OAAO,GAAQ,EAAE;AACrB,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AACnB,YAAA,OAAO,CAAC,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,GAAG,CAAA,CAAE,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC,GAAU,CAAC;AAChE,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,GAAG,CAAC;YACR,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,EAAA;SAEpC,EAAE;AACA,YAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,QACGA,KAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CAE5B,OAAO,MAAM,KAAK,WAAW,IAAIC,GAAA,CAAA,OAAA,EAAA,EAC9B,UAAU,EAAE,WAAW,CAAC,SAAS,EACjC,IAAI,EAAE,WAAW,CAAC,SAAS,EAC3B,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,CAAC,GAAG,EAAE,GACrD,EAELA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,EACpC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EACvC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAC5C,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,EAAA,EACxC,KAAK,EAAA,EACT,GAAG,EAAE;AACF,oBAAA,KAAK,EAAE;wBACJ,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,SAAS;AAChD,qBAAA;iBACH,EACD,SAAS,EAAE,CAAA,EAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,YAEnC,QAAQ,EAAA,CAAA,CACN,CAAA,EAAA,CACc;AAE7B"}
package/theme/core.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => {\n const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\n if (!theme) {\n console.error(\"Theme not found, returning light theme as fallback\")\n return ThemeFactory.get(\"light\") as any\n }\n return theme\n}\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n a = { ...a }\n b = { ...b }\n for (const key in b) {\n const v = (b as any)[key]\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n a[key] = mergeObject(a[key], b[key])\n } else {\n a[key] = v\n }\n }\n return a\n}\n"],"names":[],"mappings":"iGAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,MAAmB;AACxC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAQ;IACpE,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AACA,IAAA,OAAO,KAAK;AACf;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX"}
1
+ {"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\r\nimport { ObjectType, ThemeOptions } from \"./types\"\r\n\r\nexport const ThemeFactory = new Map<string, ThemeOptions>()\r\nexport const ThemeContex = React.createContext(\"light\")\r\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\r\nexport const useTheme = (): ThemeOptions => {\r\n const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\r\n if (!theme) {\r\n console.error(\"Theme not found, returning light theme as fallback\")\r\n return ThemeFactory.get(\"light\") as any\r\n }\r\n return theme\r\n}\r\n\r\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\r\n a = { ...a }\r\n b = { ...b }\r\n for (const key in b) {\r\n const v = (b as any)[key]\r\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\r\n a[key] = mergeObject(a[key], b[key])\r\n } else {\r\n a[key] = v\r\n }\r\n }\r\n return a\r\n}\r\n"],"names":[],"mappings":"iGAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,MAAmB;AACxC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAQ;IACpE,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AACA,IAAA,OAAO,KAAK;AACf;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX"}
@@ -1 +1 @@
1
- {"version":3,"file":"core.mjs","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => {\n const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\n if (!theme) {\n console.error(\"Theme not found, returning light theme as fallback\")\n return ThemeFactory.get(\"light\") as any\n }\n return theme\n}\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n a = { ...a }\n b = { ...b }\n for (const key in b) {\n const v = (b as any)[key]\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n a[key] = mergeObject(a[key], b[key])\n } else {\n a[key] = v\n }\n }\n return a\n}\n"],"names":["React"],"mappings":"kCAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,MAAmB;AACxC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAACA,cAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAQ;IACpE,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AACA,IAAA,OAAO,KAAK;AACf;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAACA,cAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX"}
1
+ {"version":3,"file":"core.mjs","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\r\nimport { ObjectType, ThemeOptions } from \"./types\"\r\n\r\nexport const ThemeFactory = new Map<string, ThemeOptions>()\r\nexport const ThemeContex = React.createContext(\"light\")\r\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\r\nexport const useTheme = (): ThemeOptions => {\r\n const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\r\n if (!theme) {\r\n console.error(\"Theme not found, returning light theme as fallback\")\r\n return ThemeFactory.get(\"light\") as any\r\n }\r\n return theme\r\n}\r\n\r\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\r\n a = { ...a }\r\n b = { ...b }\r\n for (const key in b) {\r\n const v = (b as any)[key]\r\n if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\r\n a[key] = mergeObject(a[key], b[key])\r\n } else {\r\n a[key] = v\r\n }\r\n }\r\n return a\r\n}\r\n"],"names":["React"],"mappings":"kCAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,MAAmB;AACxC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAACA,cAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAQ;IACpE,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AACA,IAAA,OAAO,KAAK;AACf;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAACA,cAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX"}
@@ -1,20 +1,9 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var ThemeDefaultOptions=require('./ThemeDefaultOptions.js'),core=require('./core.js'),createColor=require('./createColor.js'),index=require('../css/index.js');const createTheme = (name, options, darkMode) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var core=require('./core.js'),index=require('../css/index.js'),ThemeDefaultOptions=require('./ThemeDefaultOptions.js');const createTheme = (name, options, darkMode) => {
2
2
  if (core.ThemeFactory.has(name)) {
3
3
  console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`);
4
4
  return core.ThemeFactory.get(name);
5
5
  }
6
- let theme = core.mergeObject(ThemeDefaultOptions.default, Object.assign(Object.assign(Object.assign({}, (darkMode ? ThemeDefaultOptions.darkColorPallete : {})), options), { name, breakpoints: index.breakpoints }));
7
- theme = core.mergeObject(theme, {
8
- colors: {
9
- background: createColor.default(theme, "background"),
10
- brand: createColor.default(theme, "brand"),
11
- accent: createColor.default(theme, "accent"),
12
- info: createColor.default(theme, "info"),
13
- success: createColor.default(theme, "success"),
14
- warning: createColor.default(theme, "warning"),
15
- danger: createColor.default(theme, "danger")
16
- }
17
- });
6
+ let theme = core.mergeObject(darkMode ? ThemeDefaultOptions.darkThemeOptions : ThemeDefaultOptions.lightThemeOptions, Object.assign(Object.assign({}, options), { name, breakpoints: index.breakpoints }));
18
7
  core.ThemeFactory.set(name, theme);
19
8
  return theme;
20
9
  };exports.createTheme=createTheme;//# sourceMappingURL=createTheme.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"createTheme.js","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\nimport defaultThemeOption, { darkColorPallete } from './ThemeDefaultOptions'\nimport { mergeObject, ThemeFactory } from \"./core\"\nimport createColor from \"./createColor\"\nimport { breakpoints } from \"../css\"\n\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\n if (ThemeFactory.has(name)) {\n console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\n return ThemeFactory.get(name) as ThemeOptions\n }\n\n let theme: any = mergeObject(defaultThemeOption, {\n ...(darkMode ? darkColorPallete : {}),\n ...options,\n name,\n breakpoints: breakpoints\n })\n\n theme = mergeObject(theme, {\n colors: {\n background: createColor(theme, \"background\"),\n brand: createColor(theme, \"brand\"),\n accent: createColor(theme, \"accent\"),\n info: createColor(theme, \"info\"),\n success: createColor(theme, \"success\"),\n warning: createColor(theme, \"warning\"),\n danger: createColor(theme, \"danger\")\n }\n })\n\n ThemeFactory.set(name, theme)\n\n return theme as ThemeOptions\n}\n"],"names":["ThemeFactory","mergeObject","defaultThemeOption","darkColorPallete","breakpoints","createColor"],"mappings":"qOAMO,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,OAAyB,EAAE,QAAkB,KAAkB;AACtG,IAAA,IAAIA,iBAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,CAAA,mEAAA,CAAqE,CAAC;AACnH,QAAA,OAAOA,iBAAY,CAAC,GAAG,CAAC,IAAI,CAAiB;IAChD;IAEA,IAAI,KAAK,GAAQC,gBAAW,CAACC,2BAAkB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GACxC,QAAQ,GAAGC,oCAAgB,GAAG,EAAE,EAAC,EAClC,OAAO,CAAA,EAAA,EACV,IAAI,EACJ,WAAW,EAAEC,iBAAW,EAAA,CAAA,CACzB;AAEF,IAAA,KAAK,GAAGH,gBAAW,CAAC,KAAK,EAAE;AACxB,QAAA,MAAM,EAAE;AACL,YAAA,UAAU,EAAEI,mBAAW,CAAC,KAAK,EAAE,YAAY,CAAC;AAC5C,YAAA,KAAK,EAAEA,mBAAW,CAAC,KAAK,EAAE,OAAO,CAAC;AAClC,YAAA,MAAM,EAAEA,mBAAW,CAAC,KAAK,EAAE,QAAQ,CAAC;AACpC,YAAA,IAAI,EAAEA,mBAAW,CAAC,KAAK,EAAE,MAAM,CAAC;AAChC,YAAA,OAAO,EAAEA,mBAAW,CAAC,KAAK,EAAE,SAAS,CAAC;AACtC,YAAA,OAAO,EAAEA,mBAAW,CAAC,KAAK,EAAE,SAAS,CAAC;AACtC,YAAA,MAAM,EAAEA,mBAAW,CAAC,KAAK,EAAE,QAAQ;AACrC;AACH,KAAA,CAAC;AAEF,IAAAL,iBAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;AAE7B,IAAA,OAAO,KAAqB;AAC/B"}
1
+ {"version":3,"file":"createTheme.js","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { mergeObject, ThemeFactory } from \"./core\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\r\n if (ThemeFactory.has(name)) {\r\n console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\r\n return ThemeFactory.get(name) as ThemeOptions\r\n }\r\n\r\n let theme: any = mergeObject(darkMode ? darkThemeOptions : lightThemeOptions, {\r\n ...options,\r\n name,\r\n breakpoints: breakpoints\r\n })\r\n\r\n ThemeFactory.set(name, theme)\r\n\r\n return theme as ThemeOptions\r\n}\r\n"],"names":["ThemeFactory","mergeObject","darkThemeOptions","lightThemeOptions","breakpoints"],"mappings":"6LAKO,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,OAAyB,EAAE,QAAkB,KAAkB;AACtG,IAAA,IAAIA,iBAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,CAAA,mEAAA,CAAqE,CAAC;AACnH,QAAA,OAAOA,iBAAY,CAAC,GAAG,CAAC,IAAI,CAAiB;IAChD;IAEA,IAAI,KAAK,GAAQC,gBAAW,CAAC,QAAQ,GAAGC,oCAAgB,GAAGC,qCAAiB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACtE,OAAO,CAAA,EAAA,EACV,IAAI,EACJ,WAAW,EAAEC,iBAAW,EAAA,CAAA,CACzB;AAEF,IAAAJ,iBAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;AAE7B,IAAA,OAAO,KAAqB;AAC/B"}
@@ -1,20 +1,9 @@
1
- import defaultThemeOption,{darkColorPallete}from'./ThemeDefaultOptions.mjs';import {ThemeFactory,mergeObject}from'./core.mjs';import createColor from'./createColor.mjs';import {breakpoints}from'../css/index.mjs';const createTheme = (name, options, darkMode) => {
1
+ import {ThemeFactory,mergeObject}from'./core.mjs';import {breakpoints}from'../css/index.mjs';import {lightThemeOptions,darkThemeOptions}from'./ThemeDefaultOptions.mjs';const createTheme = (name, options, darkMode) => {
2
2
  if (ThemeFactory.has(name)) {
3
3
  console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`);
4
4
  return ThemeFactory.get(name);
5
5
  }
6
- let theme = mergeObject(defaultThemeOption, Object.assign(Object.assign(Object.assign({}, (darkMode ? darkColorPallete : {})), options), { name, breakpoints: breakpoints }));
7
- theme = mergeObject(theme, {
8
- colors: {
9
- background: createColor(theme, "background"),
10
- brand: createColor(theme, "brand"),
11
- accent: createColor(theme, "accent"),
12
- info: createColor(theme, "info"),
13
- success: createColor(theme, "success"),
14
- warning: createColor(theme, "warning"),
15
- danger: createColor(theme, "danger")
16
- }
17
- });
6
+ let theme = mergeObject(darkMode ? darkThemeOptions : lightThemeOptions, Object.assign(Object.assign({}, options), { name, breakpoints: breakpoints }));
18
7
  ThemeFactory.set(name, theme);
19
8
  return theme;
20
9
  };export{createTheme};//# sourceMappingURL=createTheme.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"createTheme.mjs","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\nimport defaultThemeOption, { darkColorPallete } from './ThemeDefaultOptions'\nimport { mergeObject, ThemeFactory } from \"./core\"\nimport createColor from \"./createColor\"\nimport { breakpoints } from \"../css\"\n\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\n if (ThemeFactory.has(name)) {\n console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\n return ThemeFactory.get(name) as ThemeOptions\n }\n\n let theme: any = mergeObject(defaultThemeOption, {\n ...(darkMode ? darkColorPallete : {}),\n ...options,\n name,\n breakpoints: breakpoints\n })\n\n theme = mergeObject(theme, {\n colors: {\n background: createColor(theme, \"background\"),\n brand: createColor(theme, \"brand\"),\n accent: createColor(theme, \"accent\"),\n info: createColor(theme, \"info\"),\n success: createColor(theme, \"success\"),\n warning: createColor(theme, \"warning\"),\n danger: createColor(theme, \"danger\")\n }\n })\n\n ThemeFactory.set(name, theme)\n\n return theme as ThemeOptions\n}\n"],"names":[],"mappings":"oNAMO,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,OAAyB,EAAE,QAAkB,KAAkB;AACtG,IAAA,IAAI,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,CAAA,mEAAA,CAAqE,CAAC;AACnH,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAiB;IAChD;IAEA,IAAI,KAAK,GAAQ,WAAW,CAAC,kBAAkB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GACxC,QAAQ,GAAG,gBAAgB,GAAG,EAAE,EAAC,EAClC,OAAO,CAAA,EAAA,EACV,IAAI,EACJ,WAAW,EAAE,WAAW,EAAA,CAAA,CACzB;AAEF,IAAA,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE;AACxB,QAAA,MAAM,EAAE;AACL,YAAA,UAAU,EAAE,WAAW,CAAC,KAAK,EAAE,YAAY,CAAC;AAC5C,YAAA,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;AAClC,YAAA,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC;AACpC,YAAA,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;AAChC,YAAA,OAAO,EAAE,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC;AACtC,YAAA,OAAO,EAAE,WAAW,CAAC,KAAK,EAAE,SAAS,CAAC;AACtC,YAAA,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,QAAQ;AACrC;AACH,KAAA,CAAC;AAEF,IAAA,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;AAE7B,IAAA,OAAO,KAAqB;AAC/B"}
1
+ {"version":3,"file":"createTheme.mjs","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport { mergeObject, ThemeFactory } from \"./core\"\r\nimport { breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\r\n if (ThemeFactory.has(name)) {\r\n console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`)\r\n return ThemeFactory.get(name) as ThemeOptions\r\n }\r\n\r\n let theme: any = mergeObject(darkMode ? darkThemeOptions : lightThemeOptions, {\r\n ...options,\r\n name,\r\n breakpoints: breakpoints\r\n })\r\n\r\n ThemeFactory.set(name, theme)\r\n\r\n return theme as ThemeOptions\r\n}\r\n"],"names":[],"mappings":"wKAKO,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,OAAyB,EAAE,QAAkB,KAAkB;AACtG,IAAA,IAAI,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACzB,QAAA,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,CAAA,mEAAA,CAAqE,CAAC;AACnH,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAiB;IAChD;IAEA,IAAI,KAAK,GAAQ,WAAW,CAAC,QAAQ,GAAG,gBAAgB,GAAG,iBAAiB,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACtE,OAAO,CAAA,EAAA,EACV,IAAI,EACJ,WAAW,EAAE,WAAW,EAAA,CAAA,CACzB;AAEF,IAAA,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;AAE7B,IAAA,OAAO,KAAqB;AAC/B"}
@@ -1 +1 @@
1
- {"version":3,"file":"createThemeSwitcher.js","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket } from \"react-state-bucket\"\nimport { getTheme } from \"./core\"\n\nexport type ThemeSwitcherOption = {\n store?: \"memory\" | \"session\" | \"local\",\n onChange?: (theme: string) => void\n}\n\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\n\n const useThemeState = createBucket({ name: defaultTheme }, {\n store: option?.store || \"memory\",\n onChange: (key, value) => {\n option?.onChange && option?.onChange(value)\n }\n })\n\n const useThemeSwitcher = () => {\n const state = useThemeState()\n return {\n name: state.get(\"name\"),\n theme: getTheme(state.get(\"name\")),\n change: (theme: string) => state.set(\"name\", theme)\n }\n }\n return useThemeSwitcher\n}\n\n\nexport default createThemeSwitcher"],"names":["createBucket","getTheme"],"mappings":"mJAQA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,MAA4B,KAAI;IAEhF,MAAM,aAAa,GAAGA,6BAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE;QACxD,KAAK,EAAE,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,QAAQ;AAChC,QAAA,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACtB,YAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC9C;AACF,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC3B,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;QAC7B,OAAO;AACJ,YAAA,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;YACvB,KAAK,EAAEC,aAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAClC,YAAA,MAAM,EAAE,CAAC,KAAa,KAAK,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK;SACpD;AACJ,IAAA,CAAC;AACD,IAAA,OAAO,gBAAgB;AAC1B"}
1
+ {"version":3,"file":"createThemeSwitcher.js","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket } from \"react-state-bucket\"\r\nimport { getTheme } from \"./core\"\r\n\r\nexport type ThemeSwitcherOption = {\r\n store?: \"memory\" | \"session\" | \"local\",\r\n onChange?: (theme: string) => void\r\n}\r\n\r\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\r\n\r\n const useThemeState = createBucket({ name: defaultTheme }, {\r\n store: option?.store || \"memory\",\r\n onChange: (key, value) => {\r\n option?.onChange && option?.onChange(value)\r\n }\r\n })\r\n\r\n const useThemeSwitcher = () => {\r\n const state = useThemeState()\r\n return {\r\n name: state.get(\"name\"),\r\n theme: getTheme(state.get(\"name\")),\r\n change: (theme: string) => state.set(\"name\", theme)\r\n }\r\n }\r\n return useThemeSwitcher\r\n}\r\n\r\n\r\nexport default createThemeSwitcher"],"names":["createBucket","getTheme"],"mappings":"mJAQA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,MAA4B,KAAI;IAEhF,MAAM,aAAa,GAAGA,6BAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE;QACxD,KAAK,EAAE,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,QAAQ;AAChC,QAAA,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACtB,YAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC9C;AACF,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC3B,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;QAC7B,OAAO;AACJ,YAAA,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;YACvB,KAAK,EAAEC,aAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAClC,YAAA,MAAM,EAAE,CAAC,KAAa,KAAK,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK;SACpD;AACJ,IAAA,CAAC;AACD,IAAA,OAAO,gBAAgB;AAC1B"}
@@ -1 +1 @@
1
- {"version":3,"file":"createThemeSwitcher.mjs","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket } from \"react-state-bucket\"\nimport { getTheme } from \"./core\"\n\nexport type ThemeSwitcherOption = {\n store?: \"memory\" | \"session\" | \"local\",\n onChange?: (theme: string) => void\n}\n\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\n\n const useThemeState = createBucket({ name: defaultTheme }, {\n store: option?.store || \"memory\",\n onChange: (key, value) => {\n option?.onChange && option?.onChange(value)\n }\n })\n\n const useThemeSwitcher = () => {\n const state = useThemeState()\n return {\n name: state.get(\"name\"),\n theme: getTheme(state.get(\"name\")),\n change: (theme: string) => state.set(\"name\", theme)\n }\n }\n return useThemeSwitcher\n}\n\n\nexport default createThemeSwitcher"],"names":[],"mappings":"gFAQA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,MAA4B,KAAI;IAEhF,MAAM,aAAa,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE;QACxD,KAAK,EAAE,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,QAAQ;AAChC,QAAA,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACtB,YAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC9C;AACF,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC3B,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;QAC7B,OAAO;AACJ,YAAA,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;YACvB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAClC,YAAA,MAAM,EAAE,CAAC,KAAa,KAAK,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK;SACpD;AACJ,IAAA,CAAC;AACD,IAAA,OAAO,gBAAgB;AAC1B"}
1
+ {"version":3,"file":"createThemeSwitcher.mjs","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["import { createBucket } from \"react-state-bucket\"\r\nimport { getTheme } from \"./core\"\r\n\r\nexport type ThemeSwitcherOption = {\r\n store?: \"memory\" | \"session\" | \"local\",\r\n onChange?: (theme: string) => void\r\n}\r\n\r\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\r\n\r\n const useThemeState = createBucket({ name: defaultTheme }, {\r\n store: option?.store || \"memory\",\r\n onChange: (key, value) => {\r\n option?.onChange && option?.onChange(value)\r\n }\r\n })\r\n\r\n const useThemeSwitcher = () => {\r\n const state = useThemeState()\r\n return {\r\n name: state.get(\"name\"),\r\n theme: getTheme(state.get(\"name\")),\r\n change: (theme: string) => state.set(\"name\", theme)\r\n }\r\n }\r\n return useThemeSwitcher\r\n}\r\n\r\n\r\nexport default createThemeSwitcher"],"names":[],"mappings":"gFAQA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,MAA4B,KAAI;IAEhF,MAAM,aAAa,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE;QACxD,KAAK,EAAE,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,QAAQ;AAChC,QAAA,QAAQ,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACtB,YAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC9C;AACF,KAAA,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;AAC3B,QAAA,MAAM,KAAK,GAAG,aAAa,EAAE;QAC7B,OAAO;AACJ,YAAA,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;YACvB,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;AAClC,YAAA,MAAM,EAAE,CAAC,KAAa,KAAK,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,KAAK;SACpD;AACJ,IAAA,CAAC;AACD,IAAA,OAAO,gBAAgB;AAC1B"}
package/theme/index.js CHANGED
@@ -1 +1 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./ThemeDefaultOptions.js');var core=require('./core.js');require('../css/getValue.js'),require('oncss'),require('tslib'),require('react/jsx-runtime'),require('react'),require('../Tag/index.js'),require('react-state-bucket');const themeRootClass = (theme) => `.xui-${theme}-theme-root`;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;exports.themeRootClass=themeRootClass;//# sourceMappingURL=index.js.map
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var core=require('./core.js');require('../css/getValue.js'),require('oncss'),require('./ThemeDefaultOptions.js');var ThemeProvider=require('./ThemeProvider.js');require('react-state-bucket');const themeRootClass = (theme) => `.xui-${theme}-theme-root`;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;exports.ThemeProvider=ThemeProvider.default;exports.themeRootClass=themeRootClass;//# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nexport type { ThemeProviderProps } from './ThemeProvider'\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n ThemeProvider,\n createThemeSwitcher,\n createTheme,\n getTheme,\n useTheme\n}\n\n"],"names":[],"mappings":"+SAOO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA"}
1
+ {"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\r\nimport ThemeProvider from './ThemeProvider'\r\nimport createThemeSwitcher from './createThemeSwitcher'\r\nimport { getTheme, useTheme } from './core'\r\nexport type { ThemeProviderProps } from './ThemeProvider'\r\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\r\n\r\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\r\n\r\nexport {\r\n ThemeProvider,\r\n createThemeSwitcher,\r\n createTheme,\r\n getTheme,\r\n useTheme\r\n}\r\n\r\n"],"names":[],"mappings":"qQAOO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA"}
package/theme/index.mjs CHANGED
@@ -1 +1 @@
1
- import'./ThemeDefaultOptions.mjs';export{getTheme,useTheme}from'./core.mjs';import'../css/getValue.mjs';import'oncss';import'tslib';import'react/jsx-runtime';import'react';import'../Tag/index.mjs';import'react-state-bucket';const themeRootClass = (theme) => `.xui-${theme}-theme-root`;export{themeRootClass};//# sourceMappingURL=index.mjs.map
1
+ export{getTheme,useTheme}from'./core.mjs';import'../css/getValue.mjs';import'oncss';import'./ThemeDefaultOptions.mjs';export{default as ThemeProvider}from'./ThemeProvider.mjs';import'react-state-bucket';const themeRootClass = (theme) => `.xui-${theme}-theme-root`;export{themeRootClass};//# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nexport type { ThemeProviderProps } from './ThemeProvider'\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n ThemeProvider,\n createThemeSwitcher,\n createTheme,\n getTheme,\n useTheme\n}\n\n"],"names":[],"mappings":"gOAOO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\r\nimport ThemeProvider from './ThemeProvider'\r\nimport createThemeSwitcher from './createThemeSwitcher'\r\nimport { getTheme, useTheme } from './core'\r\nexport type { ThemeProviderProps } from './ThemeProvider'\r\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\r\n\r\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\r\n\r\nexport {\r\n ThemeProvider,\r\n createThemeSwitcher,\r\n createTheme,\r\n getTheme,\r\n useTheme\r\n}\r\n\r\n"],"names":[],"mappings":"2MAOO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA"}
package/theme/types.d.ts CHANGED
@@ -6,43 +6,11 @@ type ObjectType = {
6
6
  type ThemeColorItem = {
7
7
  primary: string;
8
8
  secondary: string;
9
- text: string;
10
9
  alpha: string;
11
- template: {
12
- outline: {
13
- bgcolor: string;
14
- color: string;
15
- border: number;
16
- borderColor: string;
17
- hover: {
18
- bgcolor: string;
19
- color: string;
20
- };
21
- };
22
- fill: {
23
- bgcolor: string;
24
- color: string;
25
- hover: {
26
- bgcolor: string;
27
- color: string;
28
- };
29
- };
30
- text: {
31
- bgcolor: string;
32
- color: string;
33
- hover: {
34
- bgcolor: string;
35
- color: string;
36
- };
37
- };
38
- alpha: {
39
- bgcolor: string;
40
- color: string;
41
- hover: {
42
- bgcolor: string;
43
- color: string;
44
- };
45
- };
10
+ divider: string;
11
+ text: {
12
+ primary: string;
13
+ secondary: string;
46
14
  };
47
15
  };
48
16
  type ThemeTypographyItem = {
@@ -51,9 +19,8 @@ type ThemeTypographyItem = {
51
19
  fontWeight: number;
52
20
  };
53
21
  type ThemeColor = {
54
- background: Omit<ThemeColorItem, "text">;
55
- text: Omit<ThemeColorItem, "text" | "alpha" | "template">;
56
- divider: string;
22
+ common: ThemeColorItem;
23
+ surface: ThemeColorItem;
57
24
  brand: ThemeColorItem;
58
25
  accent: ThemeColorItem;
59
26
  success: ThemeColorItem;
@@ -62,13 +29,13 @@ type ThemeColor = {
62
29
  danger: ThemeColorItem;
63
30
  };
64
31
  type ThemeTypographyType = {
65
- fontFamily: string;
66
32
  h1: ThemeTypographyItem;
67
33
  h2: ThemeTypographyItem;
68
34
  h3: ThemeTypographyItem;
69
35
  h4: ThemeTypographyItem;
70
36
  h5: ThemeTypographyItem;
71
37
  h6: ThemeTypographyItem;
38
+ big: ThemeTypographyItem;
72
39
  text: ThemeTypographyItem;
73
40
  button: ThemeTypographyItem;
74
41
  small: ThemeTypographyItem;
@@ -90,9 +57,8 @@ interface ThemeOptions {
90
57
  type ThemeColorItemInput = Partial<Omit<ThemeColorItem, "alpha">>;
91
58
  type ThemeTypographyItemInput = Partial<ThemeTypographyItem>;
92
59
  type ThemeColorInput = {
93
- background?: Omit<ThemeColorItemInput, "text">;
94
- text?: Omit<ThemeColorItemInput, "text">;
95
- divider?: string;
60
+ common?: ThemeColorItemInput;
61
+ surface?: ThemeColorItemInput;
96
62
  brand?: ThemeColorItemInput;
97
63
  accent?: ThemeColorItemInput;
98
64
  success?: ThemeColorItemInput;
@@ -101,7 +67,6 @@ type ThemeColorInput = {
101
67
  danger?: ThemeColorItemInput;
102
68
  };
103
69
  type ThemeTypographyInputType = {
104
- fontFamily?: string;
105
70
  h1?: ThemeTypographyItemInput;
106
71
  h2?: ThemeTypographyItemInput;
107
72
  h3?: ThemeTypographyItemInput;
@@ -122,6 +87,6 @@ interface ThemeOptionInput {
122
87
  typography?: ThemeTypographyInputType;
123
88
  }
124
89
  type TypographyRefTypes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "text" | "button" | "small";
125
- type ColorsRefTypes = "text" | "text.primary" | "text.secondary" | "background" | "background.primary" | "background.secondary" | "background.alpha" | "brand" | "brand.primary" | "brand.secondary" | "brand.alpha" | "brand.text" | "accent" | "accent.primary" | "accent.secondary" | "accent.alpha" | "accent.text" | "info" | "info.primary" | "info.secondary" | "info.alpha" | "info.text" | "success" | "success.primary" | "success.secondary" | "success.alpha" | "success.text" | "warning" | "warning.primary" | "warning.secondary" | "warning.alpha" | "warning.text" | "danger" | "danger.primary" | "danger.secondary" | "danger.alpha" | "danger.text";
90
+ type ColorsRefTypes = "common" | "common.primary" | "common.secondary" | "common.alpha" | "common.divider" | "common.text.primary" | "common.text.secondary" | "surface" | "surface.primary" | "surface.secondary" | "surface.divider" | "surface.alpha" | "surface.text.primary" | "surface.text.secondary" | "brand" | "brand.primary" | "brand.secondary" | "brand.alpha" | "brand.divider" | "brand.text.primary" | "brand.text.secondary" | "accent" | "accent.primary" | "accent.secondary" | "accent.alpha" | "accent.divider" | "accent.text.primary" | "accent.text.secondary" | "info" | "info.primary" | "info.secondary" | "info.alpha" | "info.divider" | "info.text.primary" | "info.text.secondary" | "success" | "success.primary" | "success.secondary" | "success.alpha" | "success.divider" | "success.text.primary" | "success.text.secondary" | "warning" | "warning.primary" | "warning.secondary" | "warning.alpha" | "warning.divider" | "warning.text.primary" | "warning.text.secondary" | "danger" | "danger.primary" | "danger.secondary" | "danger.alpha" | "danger.divider" | "danger.text.primary" | "danger.text.secondary";
126
91
 
127
92
  export type { ColorsRefTypes, ObjectType, ThemeColor, ThemeColorInput, ThemeColorItem, ThemeColorItemInput, ThemeOptionInput, ThemeOptions, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes };
@@ -1,46 +0,0 @@
1
- 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js');const createColor = (theme, name) => {
2
- let color = theme.colors[name];
3
- let { primary, secondary } = color;
4
- let text = color.text || theme.colors.text.primary;
5
- let _alpha = index.alpha(primary, .1);
6
- const isBag = (a, b) => name === "background" ? a : b;
7
- return {
8
- alpha: _alpha,
9
- template: {
10
- outline: {
11
- bgcolor: "transparent",
12
- color: isBag(text, primary),
13
- border: 1,
14
- borderColor: isBag("divider", index.alpha(primary, .4)),
15
- hover: {
16
- color: isBag(text, primary),
17
- borderColor: isBag("divider", index.alpha(primary, .8)),
18
- }
19
- },
20
- fill: {
21
- bgcolor: isBag(secondary, primary),
22
- color: text,
23
- hover: {
24
- bgcolor: isBag(index.alpha(secondary, .6), secondary),
25
- color: text,
26
- }
27
- },
28
- text: {
29
- bgcolor: "transparent",
30
- color: isBag(text, primary),
31
- hover: {
32
- bgcolor: isBag(index.alpha(secondary, .6), index.alpha(primary, .1)),
33
- color: isBag(text, primary),
34
- }
35
- },
36
- alpha: {
37
- bgcolor: isBag(index.alpha(secondary, .5), index.alpha(primary, .1)),
38
- color: isBag(text, primary),
39
- hover: {
40
- bgcolor: isBag(index.alpha(secondary, .8), index.alpha(primary, .15)),
41
- color: isBag(text, primary),
42
- }
43
- }
44
- }
45
- };
46
- };exports.default=createColor;//# sourceMappingURL=createColor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createColor.js","sources":["../../src/theme/createColor.ts"],"sourcesContent":["import { ThemeOptions, ThemeColor } from \"./types\"\nimport { alpha } from \"../css\"\n\nconst createColor = (theme: ThemeOptions, name: keyof ThemeColor) => {\n let color = theme.colors[name]\n let { primary, secondary } = color as any\n let text = (color as any).text || theme.colors.text.primary\n let _alpha = alpha(primary, .1)\n\n const isBag = (a: any, b: any) => name === \"background\" ? a : b\n\n return {\n alpha: _alpha,\n template: {\n outline: {\n bgcolor: \"transparent\",\n color: isBag(text, primary),\n border: 1,\n borderColor: isBag(\"divider\", alpha(primary, .4)),\n hover: {\n color: isBag(text, primary),\n borderColor: isBag(\"divider\", alpha(primary, .8)),\n }\n },\n fill: {\n bgcolor: isBag(secondary, primary),\n color: text,\n hover: {\n bgcolor: isBag(alpha(secondary, .6), secondary),\n color: text,\n }\n },\n text: {\n bgcolor: \"transparent\",\n color: isBag(text, primary),\n hover: {\n bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),\n color: isBag(text, primary),\n }\n },\n alpha: {\n bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),\n color: isBag(text, primary),\n hover: {\n bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),\n color: isBag(text, primary),\n }\n }\n }\n }\n}\n\nexport default createColor"],"names":["alpha"],"mappings":"2GAGA,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,IAAsB,KAAI;IACjE,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;AAC9B,IAAA,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAY;AACzC,IAAA,IAAI,IAAI,GAAI,KAAa,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;IAC3D,IAAI,MAAM,GAAGA,WAAK,CAAC,OAAO,EAAE,EAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,CAAC,CAAM,EAAE,CAAM,KAAK,IAAI,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC;IAE/D,OAAO;AACJ,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE;AACP,YAAA,OAAO,EAAE;AACN,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC3B,gBAAA,MAAM,EAAE,CAAC;gBACT,WAAW,EAAE,KAAK,CAAC,SAAS,EAAEA,WAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACjD,gBAAA,KAAK,EAAE;AACJ,oBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;oBAC3B,WAAW,EAAE,KAAK,CAAC,SAAS,EAAEA,WAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACnD;AACH,aAAA;AACD,YAAA,IAAI,EAAE;AACH,gBAAA,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;AAClC,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,KAAK,EAAE;oBACJ,OAAO,EAAE,KAAK,CAACA,WAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC;AAC/C,oBAAA,KAAK,EAAE,IAAI;AACb;AACH,aAAA;AACD,YAAA,IAAI,EAAE;AACH,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC3B,gBAAA,KAAK,EAAE;AACJ,oBAAA,OAAO,EAAE,KAAK,CAACA,WAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAEA,WAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACxD,oBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC7B;AACH,aAAA;AACD,YAAA,KAAK,EAAE;AACJ,gBAAA,OAAO,EAAE,KAAK,CAACA,WAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAEA,WAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACxD,gBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC3B,gBAAA,KAAK,EAAE;AACJ,oBAAA,OAAO,EAAE,KAAK,CAACA,WAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAEA,WAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACzD,oBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC7B;AACH;AACH;KACH;AACJ"}
@@ -1,46 +0,0 @@
1
- import {alpha}from'../css/index.mjs';const createColor = (theme, name) => {
2
- let color = theme.colors[name];
3
- let { primary, secondary } = color;
4
- let text = color.text || theme.colors.text.primary;
5
- let _alpha = alpha(primary, .1);
6
- const isBag = (a, b) => name === "background" ? a : b;
7
- return {
8
- alpha: _alpha,
9
- template: {
10
- outline: {
11
- bgcolor: "transparent",
12
- color: isBag(text, primary),
13
- border: 1,
14
- borderColor: isBag("divider", alpha(primary, .4)),
15
- hover: {
16
- color: isBag(text, primary),
17
- borderColor: isBag("divider", alpha(primary, .8)),
18
- }
19
- },
20
- fill: {
21
- bgcolor: isBag(secondary, primary),
22
- color: text,
23
- hover: {
24
- bgcolor: isBag(alpha(secondary, .6), secondary),
25
- color: text,
26
- }
27
- },
28
- text: {
29
- bgcolor: "transparent",
30
- color: isBag(text, primary),
31
- hover: {
32
- bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),
33
- color: isBag(text, primary),
34
- }
35
- },
36
- alpha: {
37
- bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),
38
- color: isBag(text, primary),
39
- hover: {
40
- bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),
41
- color: isBag(text, primary),
42
- }
43
- }
44
- }
45
- };
46
- };export{createColor as default};//# sourceMappingURL=createColor.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createColor.mjs","sources":["../../src/theme/createColor.ts"],"sourcesContent":["import { ThemeOptions, ThemeColor } from \"./types\"\nimport { alpha } from \"../css\"\n\nconst createColor = (theme: ThemeOptions, name: keyof ThemeColor) => {\n let color = theme.colors[name]\n let { primary, secondary } = color as any\n let text = (color as any).text || theme.colors.text.primary\n let _alpha = alpha(primary, .1)\n\n const isBag = (a: any, b: any) => name === \"background\" ? a : b\n\n return {\n alpha: _alpha,\n template: {\n outline: {\n bgcolor: \"transparent\",\n color: isBag(text, primary),\n border: 1,\n borderColor: isBag(\"divider\", alpha(primary, .4)),\n hover: {\n color: isBag(text, primary),\n borderColor: isBag(\"divider\", alpha(primary, .8)),\n }\n },\n fill: {\n bgcolor: isBag(secondary, primary),\n color: text,\n hover: {\n bgcolor: isBag(alpha(secondary, .6), secondary),\n color: text,\n }\n },\n text: {\n bgcolor: \"transparent\",\n color: isBag(text, primary),\n hover: {\n bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),\n color: isBag(text, primary),\n }\n },\n alpha: {\n bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),\n color: isBag(text, primary),\n hover: {\n bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),\n color: isBag(text, primary),\n }\n }\n }\n }\n}\n\nexport default createColor"],"names":[],"mappings":"qCAGA,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,IAAsB,KAAI;IACjE,IAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;AAC9B,IAAA,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAY;AACzC,IAAA,IAAI,IAAI,GAAI,KAAa,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO;IAC3D,IAAI,MAAM,GAAG,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,CAAC,CAAM,EAAE,CAAM,KAAK,IAAI,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC;IAE/D,OAAO;AACJ,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE;AACP,YAAA,OAAO,EAAE;AACN,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC3B,gBAAA,MAAM,EAAE,CAAC;gBACT,WAAW,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACjD,gBAAA,KAAK,EAAE;AACJ,oBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;oBAC3B,WAAW,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACnD;AACH,aAAA;AACD,YAAA,IAAI,EAAE;AACH,gBAAA,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC;AAClC,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,KAAK,EAAE;oBACJ,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC;AAC/C,oBAAA,KAAK,EAAE,IAAI;AACb;AACH,aAAA;AACD,YAAA,IAAI,EAAE;AACH,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC3B,gBAAA,KAAK,EAAE;AACJ,oBAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACxD,oBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC7B;AACH,aAAA;AACD,YAAA,KAAK,EAAE;AACJ,gBAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AACxD,gBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC3B,gBAAA,KAAK,EAAE;AACJ,oBAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACzD,oBAAA,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC7B;AACH;AACH;KACH;AACJ"}