@xanui/core 1.1.6 → 1.1.8
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/RenderServerStyles.js +3 -0
- package/RenderServerStyles.js.map +1 -0
- package/RenderServerStyles.mjs +3 -0
- package/RenderServerStyles.mjs.map +1 -0
- package/Tag/cssPropList.js +2 -2
- package/Tag/cssPropList.js.map +1 -1
- package/Tag/cssPropList.mjs.map +1 -1
- package/Tag/index.js +3 -3
- package/Tag/index.js.map +1 -1
- package/Tag/index.mjs.map +1 -1
- package/Tag/types.d.ts +1 -1
- package/Tag/useTagProps.js +3 -3
- package/Tag/useTagProps.js.map +1 -1
- package/Tag/useTagProps.mjs.map +1 -1
- package/Transition/index.js +3 -3
- package/Transition/index.js.map +1 -1
- package/Transition/index.mjs +2 -2
- package/Transition/index.mjs.map +1 -1
- package/Transition/variants.js.map +1 -1
- package/Transition/variants.mjs.map +1 -1
- package/breakpoint/BreakpointProvider.js +3 -3
- package/breakpoint/BreakpointProvider.js.map +1 -1
- package/breakpoint/BreakpointProvider.mjs +2 -2
- package/breakpoint/BreakpointProvider.mjs.map +1 -1
- package/breakpoint/useBreakpoint.js +3 -3
- package/breakpoint/useBreakpoint.js.map +1 -1
- package/breakpoint/useBreakpoint.mjs.map +1 -1
- package/breakpoint/useBreakpointProps.js +3 -3
- package/breakpoint/useBreakpointProps.js.map +1 -1
- package/breakpoint/useBreakpointProps.mjs.map +1 -1
- package/css/aliases.js +2 -2
- package/css/aliases.js.map +1 -1
- package/css/aliases.mjs.map +1 -1
- package/css/getProps.js +2 -2
- package/css/getProps.js.map +1 -1
- package/css/getProps.mjs.map +1 -1
- package/css/getValue.js +2 -2
- package/css/getValue.js.map +1 -1
- package/css/getValue.mjs.map +1 -1
- package/css/index.d.ts +2 -2
- package/css/index.js +4 -4
- package/css/index.js.map +1 -1
- package/css/index.mjs.map +1 -1
- package/index.d.ts +4 -2
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/isWindow.js +1 -1
- package/isWindow.js.map +1 -1
- package/isWindow.mjs.map +1 -1
- package/package.json +5 -27
- package/readme.md +109 -0
- package/theme/ThemeCssVars.js +2 -2
- package/theme/ThemeCssVars.js.map +1 -1
- package/theme/ThemeCssVars.mjs.map +1 -1
- package/theme/ThemeDefaultOptions.js.map +1 -1
- package/theme/ThemeDefaultOptions.mjs.map +1 -1
- package/theme/ThemeProvider.d.ts +2 -3
- package/theme/ThemeProvider.js +14 -47
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +13 -46
- package/theme/ThemeProvider.mjs.map +1 -1
- package/theme/core.js.map +1 -1
- package/theme/core.mjs.map +1 -1
- package/theme/createColor.js +2 -2
- package/theme/createColor.js.map +1 -1
- package/theme/createColor.mjs.map +1 -1
- package/theme/createTheme.d.ts +5 -0
- package/theme/createTheme.js +15 -17
- package/theme/createTheme.js.map +1 -1
- package/theme/createTheme.mjs +16 -18
- package/theme/createTheme.mjs.map +1 -1
- package/theme/createThemeSwitcher.js +2 -2
- package/theme/createThemeSwitcher.js.map +1 -1
- package/theme/createThemeSwitcher.mjs.map +1 -1
- package/theme/index.js +2 -2
- package/theme/index.js.map +1 -1
- package/theme/index.mjs +2 -2
- package/theme/index.mjs.map +1 -1
- package/useAnimation.js.map +1 -1
- package/useAnimation.mjs.map +1 -1
- package/useColorTemplate.js +2 -2
- package/useColorTemplate.js.map +1 -1
- package/useColorTemplate.mjs.map +1 -1
- package/useInterface.js +2 -2
- package/useInterface.js.map +1 -1
- package/useInterface.mjs.map +1 -1
- package/useScrollbar.d.ts +3 -0
- package/useScrollbar.js +40 -0
- package/useScrollbar.js.map +1 -0
- package/useScrollbar.mjs +40 -0
- package/useScrollbar.mjs.map +1 -0
- package/ServerStyleTags.js +0 -3
- package/ServerStyleTags.js.map +0 -1
- package/ServerStyleTags.mjs +0 -3
- package/ServerStyleTags.mjs.map +0 -1
- /package/{ServerStyleTags.d.ts → RenderServerStyles.d.ts} +0 -0
|
@@ -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 { BreakpointProvider } from \"../breakpoint\"\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
|
|
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 { BreakpointProvider } from \"../breakpoint\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport useScrollbar from \"../useScrollbar\"\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n applyScrollbarCss?: boolean;\r\n isRootProvider?: boolean;\r\n renderIsRoot?: React.ReactElement;\r\n}\r\n\r\nconst ThemeProvider = ({ children, theme, applyScrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps) => {\r\n const THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)\r\n applyScrollbarCss ??= true\r\n\r\n 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 css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n })\r\n\r\n applyScrollbarCss && useScrollbar(theme, root_cls)\r\n\r\n css({\r\n \"@global\": {\r\n \"*\": {\r\n m: 0,\r\n p: 0,\r\n outline: \"none\",\r\n boxSizing: \"border-box\",\r\n verticalAlign: \"baseline\",\r\n },\r\n \"html, body\": {\r\n minHeight: \"100%\",\r\n \"-webkit-font-smoothing\": \"antialiased\"\r\n } as any,\r\n \"img, picture, video, canvas, svg\": {\r\n maxWidth: \"100%\",\r\n display: \"block\"\r\n },\r\n \"input, button, textarea, select\": {\r\n font: \"inherit\"\r\n },\r\n \"table\": {\r\n borderCollapse: \"collapse\",\r\n borderSpacing: 0\r\n },\r\n \"ol, ul\": {\r\n listStyle: \"none\"\r\n },\r\n \"a\": {\r\n display: \"inline-block\"\r\n },\r\n \"p, h1, h2, h3, h4, h5, h6\": {\r\n overflowWrap: \"break-word\",\r\n }\r\n }\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n {\r\n isRootProvider ? <BreakpointProvider>\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.background.primary}\r\n fontFamily={THEME.typography.fontFamily}\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 baseClass={`${theme}-theme-root`}\r\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n >\r\n {children}\r\n {renderIsRoot}\r\n </Tag>\r\n </BreakpointProvider> : <Tag\r\n minHeight=\"100%\"\r\n bgcolor={THEME.colors.background.primary}\r\n fontFamily={THEME.typography.fontFamily}\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 baseClass={`${theme}-theme-root`}\r\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n >\r\n {children}\r\n </Tag>\r\n }\r\n </ThemeContex.Provider>\r\n )\r\n}\r\n\r\nexport default ThemeProvider"],"names":["_jsx","_jsxs"],"mappings":"wXAiBA,MAAM,aAAa,GAAG,CAAC,EAAkG,KAAI;AAAtG,IAAA,IAAA,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,YAAY,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAA,MAAA,CAAA,EAAA,EAA5E,4EAA8E,CAAF;IAChG,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,KAAK,CAAiB;AACrD,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,gCAAgC,KAAK,CAAA,CAAE,CAAC;IACpE,iBAAiB,KAAA,IAAA,IAAjB,iBAAiB,KAAA,MAAA,GAAjB,iBAAiB,IAAjB,iBAAiB,GAAK,IAAI,CAAA;AAE1B,IAAA,KAAK,CAAC,OAAO,CAAC,MAAK;AAChB,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,GAAG,CAAC;YACD,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACH,OAAO,CAAA,EAAA,EACV,CAAC,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,EAAA;AAEpC,SAAA,CAAC;AAEF,QAAA,iBAAiB,IAAI,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC;AAElD,QAAA,GAAG,CAAC;AACD,YAAA,SAAS,EAAE;AACR,gBAAA,GAAG,EAAE;AACF,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,CAAC,EAAE,CAAC;AACJ,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,SAAS,EAAE,YAAY;AACvB,oBAAA,aAAa,EAAE,UAAU;AAC3B,iBAAA;AACD,gBAAA,YAAY,EAAE;AACX,oBAAA,SAAS,EAAE,MAAM;AACjB,oBAAA,wBAAwB,EAAE;AACrB,iBAAA;AACR,gBAAA,kCAAkC,EAAE;AACjC,oBAAA,QAAQ,EAAE,MAAM;AAChB,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,iCAAiC,EAAE;AAChC,oBAAA,IAAI,EAAE;AACR,iBAAA;AACD,gBAAA,OAAO,EAAE;AACN,oBAAA,cAAc,EAAE,UAAU;AAC1B,oBAAA,aAAa,EAAE;AACjB,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACP,oBAAA,SAAS,EAAE;AACb,iBAAA;AACD,gBAAA,GAAG,EAAE;AACF,oBAAA,OAAO,EAAE;AACX,iBAAA;AACD,gBAAA,2BAA2B,EAAE;AAC1B,oBAAA,YAAY,EAAE,YAAY;AAC5B;AACH;AACH,SAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAA,QACGA,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,KAAK,YAE5B,cAAc,GAAGA,GAAA,CAAC,kBAAkB,EAAA,EAAA,QAAA,EACjCC,IAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,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,IACT,SAAS,EAAE,GAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,aAEnC,QAAQ,EACR,YAAY,CAAA,EAAA,CAAA,CACV,EAAA,CACY,GAAGD,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACzB,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,OAAO,EACxC,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,IACT,SAAS,EAAE,GAAG,KAAK,CAAA,WAAA,CAAa,EAChC,SAAS,EAAE,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,KAAK,EAAA,QAAA,EAEnC,QAAQ,EAAA,CAAA,CACN,EAAA,CAEW;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 => ThemeFactory.get(React.useContext(ThemeContex)) as any\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":"
|
|
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 => ThemeFactory.get(React.useContext(ThemeContex)) as any\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,MAAoB,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;MAE7E,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"}
|
package/theme/core.mjs.map
CHANGED
|
@@ -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 => ThemeFactory.get(React.useContext(ThemeContex)) as any\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":"
|
|
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 => ThemeFactory.get(React.useContext(ThemeContex)) as any\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,MAAoB,YAAY,CAAC,GAAG,CAACA,cAAK,CAAC,UAAU,CAAC,WAAW,CAAC;MAE7E,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"}
|
package/theme/createColor.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';var index=require('../css/index.js');const createColor = (theme, name) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('../css/index.js');const createColor = (theme, name) => {
|
|
2
2
|
let color = theme.colors[name];
|
|
3
3
|
let { primary, secondary } = color;
|
|
4
4
|
let text = color.text || theme.colors.text.primary;
|
|
@@ -43,4 +43,4 @@
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
};
|
|
46
|
+
};exports.default=createColor;//# sourceMappingURL=createColor.js.map
|
package/theme/createColor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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":"
|
|
1
|
+
{"version":3,"file":"createColor.js","sources":["../../src/theme/createColor.ts"],"sourcesContent":["import { ThemeOptions, ThemeColor } from \"./types\"\r\nimport { alpha } from \"../css\"\r\n\r\nconst createColor = (theme: ThemeOptions, name: keyof ThemeColor) => {\r\n let color = theme.colors[name]\r\n let { primary, secondary } = color as any\r\n let text = (color as any).text || theme.colors.text.primary\r\n let _alpha = alpha(primary, .1)\r\n\r\n const isBag = (a: any, b: any) => name === \"background\" ? a : b\r\n\r\n return {\r\n alpha: _alpha,\r\n template: {\r\n outline: {\r\n bgcolor: \"transparent\",\r\n color: isBag(text, primary),\r\n border: 1,\r\n borderColor: isBag(\"divider\", alpha(primary, .4)),\r\n hover: {\r\n color: isBag(text, primary),\r\n borderColor: isBag(\"divider\", alpha(primary, .8)),\r\n }\r\n },\r\n fill: {\r\n bgcolor: isBag(secondary, primary),\r\n color: text,\r\n hover: {\r\n bgcolor: isBag(alpha(secondary, .6), secondary),\r\n color: text,\r\n }\r\n },\r\n text: {\r\n bgcolor: \"transparent\",\r\n color: isBag(text, primary),\r\n hover: {\r\n bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),\r\n color: isBag(text, primary),\r\n }\r\n },\r\n alpha: {\r\n bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),\r\n color: isBag(text, primary),\r\n hover: {\r\n bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),\r\n color: isBag(text, primary),\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\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 +1 @@
|
|
|
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"}
|
|
1
|
+
{"version":3,"file":"createColor.mjs","sources":["../../src/theme/createColor.ts"],"sourcesContent":["import { ThemeOptions, ThemeColor } from \"./types\"\r\nimport { alpha } from \"../css\"\r\n\r\nconst createColor = (theme: ThemeOptions, name: keyof ThemeColor) => {\r\n let color = theme.colors[name]\r\n let { primary, secondary } = color as any\r\n let text = (color as any).text || theme.colors.text.primary\r\n let _alpha = alpha(primary, .1)\r\n\r\n const isBag = (a: any, b: any) => name === \"background\" ? a : b\r\n\r\n return {\r\n alpha: _alpha,\r\n template: {\r\n outline: {\r\n bgcolor: \"transparent\",\r\n color: isBag(text, primary),\r\n border: 1,\r\n borderColor: isBag(\"divider\", alpha(primary, .4)),\r\n hover: {\r\n color: isBag(text, primary),\r\n borderColor: isBag(\"divider\", alpha(primary, .8)),\r\n }\r\n },\r\n fill: {\r\n bgcolor: isBag(secondary, primary),\r\n color: text,\r\n hover: {\r\n bgcolor: isBag(alpha(secondary, .6), secondary),\r\n color: text,\r\n }\r\n },\r\n text: {\r\n bgcolor: \"transparent\",\r\n color: isBag(text, primary),\r\n hover: {\r\n bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),\r\n color: isBag(text, primary),\r\n }\r\n },\r\n alpha: {\r\n bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),\r\n color: isBag(text, primary),\r\n hover: {\r\n bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),\r\n color: isBag(text, primary),\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\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"}
|
package/theme/createTheme.js
CHANGED
|
@@ -1,21 +1,19 @@
|
|
|
1
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) => {
|
|
2
|
-
if (
|
|
3
|
-
let theme = core.mergeObject(ThemeDefaultOptions.default, Object.assign(Object.assign(Object.assign({}, ({})), options), { name, breakpoints: index.breakpoints }));
|
|
4
|
-
theme = core.mergeObject(theme, {
|
|
5
|
-
colors: {
|
|
6
|
-
background: createColor(theme, "background"),
|
|
7
|
-
brand: createColor(theme, "brand"),
|
|
8
|
-
accent: createColor(theme, "accent"),
|
|
9
|
-
info: createColor(theme, "info"),
|
|
10
|
-
success: createColor(theme, "success"),
|
|
11
|
-
warning: createColor(theme, "warning"),
|
|
12
|
-
danger: createColor(theme, "danger")
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
core.ThemeFactory.set(name, theme);
|
|
16
|
-
}
|
|
17
|
-
else {
|
|
2
|
+
if (core.ThemeFactory.has(name)) {
|
|
18
3
|
throw new Error(`theme "${name}" already exists!`);
|
|
19
4
|
}
|
|
20
|
-
|
|
5
|
+
let theme = core.mergeObject(ThemeDefaultOptions.default, Object.assign(Object.assign(Object.assign({}, (darkMode ? ThemeDefaultOptions.darkColorPallete : {})), options), { name, breakpoints: index.breakpoints }));
|
|
6
|
+
theme = core.mergeObject(theme, {
|
|
7
|
+
colors: {
|
|
8
|
+
background: createColor.default(theme, "background"),
|
|
9
|
+
brand: createColor.default(theme, "brand"),
|
|
10
|
+
accent: createColor.default(theme, "accent"),
|
|
11
|
+
info: createColor.default(theme, "info"),
|
|
12
|
+
success: createColor.default(theme, "success"),
|
|
13
|
+
warning: createColor.default(theme, "warning"),
|
|
14
|
+
danger: createColor.default(theme, "danger")
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
core.ThemeFactory.set(name, theme);
|
|
18
|
+
return theme;
|
|
21
19
|
};exports.createTheme=createTheme;//# sourceMappingURL=createTheme.js.map
|
package/theme/createTheme.js.map
CHANGED
|
@@ -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 (
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport defaultThemeOption, { darkColorPallete } from './ThemeDefaultOptions'\r\nimport { mergeObject, ThemeFactory } from \"./core\"\r\nimport createColor from \"./createColor\"\r\nimport { breakpoints } from \"../css\"\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\r\n if (ThemeFactory.has(name)) {\r\n throw new Error(`theme \"${name}\" already exists!`);\r\n }\r\n\r\n let theme: any = mergeObject(defaultThemeOption, {\r\n ...(darkMode ? darkColorPallete : {}),\r\n ...options,\r\n name,\r\n breakpoints: breakpoints\r\n })\r\n\r\n theme = mergeObject(theme, {\r\n colors: {\r\n background: createColor(theme, \"background\"),\r\n brand: createColor(theme, \"brand\"),\r\n accent: createColor(theme, \"accent\"),\r\n info: createColor(theme, \"info\"),\r\n success: createColor(theme, \"success\"),\r\n warning: createColor(theme, \"warning\"),\r\n danger: createColor(theme, \"danger\")\r\n }\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","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,MAAM,IAAI,KAAK,CAAC,UAAU,IAAI,CAAA,iBAAA,CAAmB,CAAC;IACrD;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"}
|
package/theme/createTheme.mjs
CHANGED
|
@@ -1,21 +1,19 @@
|
|
|
1
|
-
import defaultThemeOption
|
|
2
|
-
if (
|
|
3
|
-
let theme = mergeObject(defaultThemeOption, Object.assign(Object.assign(Object.assign({}, ({})), options), { name, breakpoints: breakpoints }));
|
|
4
|
-
theme = mergeObject(theme, {
|
|
5
|
-
colors: {
|
|
6
|
-
background: createColor(theme, "background"),
|
|
7
|
-
brand: createColor(theme, "brand"),
|
|
8
|
-
accent: createColor(theme, "accent"),
|
|
9
|
-
info: createColor(theme, "info"),
|
|
10
|
-
success: createColor(theme, "success"),
|
|
11
|
-
warning: createColor(theme, "warning"),
|
|
12
|
-
danger: createColor(theme, "danger")
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
ThemeFactory.set(name, theme);
|
|
16
|
-
}
|
|
17
|
-
else {
|
|
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) => {
|
|
2
|
+
if (ThemeFactory.has(name)) {
|
|
18
3
|
throw new Error(`theme "${name}" already exists!`);
|
|
19
4
|
}
|
|
20
|
-
|
|
5
|
+
let theme = mergeObject(defaultThemeOption, Object.assign(Object.assign(Object.assign({}, (darkMode ? darkColorPallete : {})), options), { name, breakpoints: breakpoints }));
|
|
6
|
+
theme = mergeObject(theme, {
|
|
7
|
+
colors: {
|
|
8
|
+
background: createColor(theme, "background"),
|
|
9
|
+
brand: createColor(theme, "brand"),
|
|
10
|
+
accent: createColor(theme, "accent"),
|
|
11
|
+
info: createColor(theme, "info"),
|
|
12
|
+
success: createColor(theme, "success"),
|
|
13
|
+
warning: createColor(theme, "warning"),
|
|
14
|
+
danger: createColor(theme, "danger")
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
ThemeFactory.set(name, theme);
|
|
18
|
+
return theme;
|
|
21
19
|
};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 (
|
|
1
|
+
{"version":3,"file":"createTheme.mjs","sources":["../../src/theme/createTheme.ts"],"sourcesContent":["import { ThemeOptions, ThemeOptionInput } from \"./types\"\r\nimport defaultThemeOption, { darkColorPallete } from './ThemeDefaultOptions'\r\nimport { mergeObject, ThemeFactory } from \"./core\"\r\nimport createColor from \"./createColor\"\r\nimport { breakpoints } from \"../css\"\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {\r\n if (ThemeFactory.has(name)) {\r\n throw new Error(`theme \"${name}\" already exists!`);\r\n }\r\n\r\n let theme: any = mergeObject(defaultThemeOption, {\r\n ...(darkMode ? darkColorPallete : {}),\r\n ...options,\r\n name,\r\n breakpoints: breakpoints\r\n })\r\n\r\n theme = mergeObject(theme, {\r\n colors: {\r\n background: createColor(theme, \"background\"),\r\n brand: createColor(theme, \"brand\"),\r\n accent: createColor(theme, \"accent\"),\r\n info: createColor(theme, \"info\"),\r\n success: createColor(theme, \"success\"),\r\n warning: createColor(theme, \"warning\"),\r\n danger: createColor(theme, \"danger\")\r\n }\r\n })\r\n\r\n ThemeFactory.set(name, theme)\r\n\r\n return theme as ThemeOptions\r\n}\r\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,MAAM,IAAI,KAAK,CAAC,UAAU,IAAI,CAAA,iBAAA,CAAmB,CAAC;IACrD;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,4 +1,4 @@
|
|
|
1
|
-
'use strict';var reactStateBucket=require('react-state-bucket'),core=require('./core.js');const createThemeSwitcher = (defaultTheme, store) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var reactStateBucket=require('react-state-bucket'),core=require('./core.js');const createThemeSwitcher = (defaultTheme, store) => {
|
|
2
2
|
const useThemeState = reactStateBucket.createBucket({ name: defaultTheme }, { store });
|
|
3
3
|
const useThemeSwitcher = () => {
|
|
4
4
|
const state = useThemeState();
|
|
@@ -9,4 +9,4 @@
|
|
|
9
9
|
};
|
|
10
10
|
};
|
|
11
11
|
return useThemeSwitcher;
|
|
12
|
-
};
|
|
12
|
+
};exports.default=createThemeSwitcher;//# sourceMappingURL=createThemeSwitcher.js.map
|
|
@@ -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\nconst createThemeSwitcher = (defaultTheme: string, store?: \"session\" | \"local\") => {\n const useThemeState = createBucket({ name: defaultTheme }, { store })\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":"
|
|
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\nconst createThemeSwitcher = (defaultTheme: string, store?: \"session\" | \"local\") => {\r\n const useThemeState = createBucket({ name: defaultTheme }, { store })\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":"mJAGA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,KAA2B,KAAI;AAC/E,IAAA,MAAM,aAAa,GAAGA,6BAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;IACrE,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\nconst createThemeSwitcher = (defaultTheme: string, store?: \"session\" | \"local\") => {\n const useThemeState = createBucket({ name: defaultTheme }, { store })\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":"gFAGA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,KAA2B,KAAI;AAC/E,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;IACrE,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,
|
|
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\nconst createThemeSwitcher = (defaultTheme: string, store?: \"session\" | \"local\") => {\r\n const useThemeState = createBucket({ name: defaultTheme }, { store })\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":"gFAGA,MAAM,mBAAmB,GAAG,CAAC,YAAoB,EAAE,KAA2B,KAAI;AAC/E,IAAA,MAAM,aAAa,GAAG,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;IACrE,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,2 +1,2 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var ThemeDefaultOptions=require('./ThemeDefaultOptions.js'),createTheme=require('./createTheme.js');require('tslib'),require('react'),require('../Tag/index.js'),require('../breakpoint/BreakpointProvider.js'),require('../css/getValue.js'),require('oncss');var core=require('./core.js');require('react-state-bucket');createTheme.createTheme("light", { colors: ThemeDefaultOptions.lightColorPallete });
|
|
2
|
-
createTheme.createTheme("dark", { colors: ThemeDefaultOptions.darkColorPallete });exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var ThemeDefaultOptions=require('./ThemeDefaultOptions.js'),createTheme=require('./createTheme.js');require('tslib'),require('react/jsx-runtime'),require('react'),require('../Tag/index.js'),require('../breakpoint/BreakpointProvider.js'),require('../css/getValue.js'),require('oncss');var core=require('./core.js');require('react-state-bucket');createTheme.createTheme("light", { colors: ThemeDefaultOptions.lightColorPallete });
|
|
2
|
+
createTheme.createTheme("dark", { colors: ThemeDefaultOptions.darkColorPallete });exports.createTheme=createTheme.createTheme;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;//# sourceMappingURL=index.js.map
|
package/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { lightColorPallete, darkColorPallete } from './ThemeDefaultOptions'\nimport { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nexport type { ThemeProviderProps } from './ThemeProvider'\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { lightColorPallete, darkColorPallete } from './ThemeDefaultOptions'\r\nimport { 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\n\r\ncreateTheme(\"light\", { colors: lightColorPallete })\r\ncreateTheme(\"dark\", { colors: darkColorPallete })\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":["createTheme","lightColorPallete","darkColorPallete"],"mappings":"8ZAOAA,uBAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAEC,qCAAiB,EAAE,CAAC;AACnDD,uBAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAEE,oCAAgB,EAAE,CAAC"}
|
package/theme/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {lightColorPallete,darkColorPallete}from'./ThemeDefaultOptions.mjs';import {createTheme}from'./createTheme.mjs';import'tslib';import'react';import'../Tag/index.mjs';import'../breakpoint/BreakpointProvider.mjs';import'../css/getValue.mjs';import'oncss';export{getTheme,useTheme}from'./core.mjs';import'react-state-bucket';createTheme("light", { colors: lightColorPallete });
|
|
2
|
-
createTheme("dark", { colors: darkColorPallete });//# sourceMappingURL=index.mjs.map
|
|
1
|
+
import {lightColorPallete,darkColorPallete}from'./ThemeDefaultOptions.mjs';import {createTheme}from'./createTheme.mjs';import'tslib';import'react/jsx-runtime';import'react';import'../Tag/index.mjs';import'../breakpoint/BreakpointProvider.mjs';import'../css/getValue.mjs';import'oncss';export{getTheme,useTheme}from'./core.mjs';import'react-state-bucket';createTheme("light", { colors: lightColorPallete });
|
|
2
|
+
createTheme("dark", { colors: darkColorPallete });export{createTheme};//# sourceMappingURL=index.mjs.map
|
package/theme/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { lightColorPallete, darkColorPallete } from './ThemeDefaultOptions'\nimport { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nexport type { ThemeProviderProps } from './ThemeProvider'\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { lightColorPallete, darkColorPallete } from './ThemeDefaultOptions'\r\nimport { 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\n\r\ncreateTheme(\"light\", { colors: lightColorPallete })\r\ncreateTheme(\"dark\", { colors: darkColorPallete })\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":"kWAOA,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;AACnD,WAAW,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,CAAC"}
|
package/useAnimation.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimation.js","sources":["../src/useAnimation.ts"],"sourcesContent":["import { css } from './css'\nimport { useId } from 'react'\nimport { CSSProps } from './css/types'\n\nexport const animationEases = {\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n linear: \"cubic-bezier(0, 0, 1, 1)\",\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n}\n\nexport interface UseAnimationProps {\n delay?: number;\n duration?: number;\n from: CSSProps;\n to: CSSProps;\n ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n let _delay = delay || 0;\n let _duration = duration || 600;\n let _ease = ease || \"easeBounceOut\"\n const id = \"anim\" + useId().replace(/:/g, \"\")\n const anim = css({\n animationName: id,\n animationDelay: _delay + \"ms\",\n animationDuration: _duration + \"ms\",\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\n [`@keyframes ${id}`]: {\n from: from as any,\n to: to as any\n }\n })\n return anim.classname\n}\n\nexport default useAnimation"],"names":["useId","css"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAnimation.js","sources":["../src/useAnimation.ts"],"sourcesContent":["import { css } from './css'\r\nimport { useId } from 'react'\r\nimport { CSSProps } from './css/types'\r\n\r\nexport const animationEases = {\r\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\r\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\r\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\r\n linear: \"cubic-bezier(0, 0, 1, 1)\",\r\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\r\n}\r\n\r\nexport interface UseAnimationProps {\r\n delay?: number;\r\n duration?: number;\r\n from: CSSProps;\r\n to: CSSProps;\r\n ease?: keyof typeof animationEases;\r\n}\r\n\r\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\r\n let _delay = delay || 0;\r\n let _duration = duration || 600;\r\n let _ease = ease || \"easeBounceOut\"\r\n const id = \"anim\" + useId().replace(/:/g, \"\")\r\n const anim = css({\r\n animationName: id,\r\n animationDelay: _delay + \"ms\",\r\n animationDuration: _duration + \"ms\",\r\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\r\n [`@keyframes ${id}`]: {\r\n from: from as any,\r\n to: to as any\r\n }\r\n })\r\n return anim.classname\r\n}\r\n\r\nexport default useAnimation"],"names":["useId","css"],"mappings":"iIAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAGA,WAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAGC,SAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
|
package/useAnimation.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimation.mjs","sources":["../src/useAnimation.ts"],"sourcesContent":["import { css } from './css'\nimport { useId } from 'react'\nimport { CSSProps } from './css/types'\n\nexport const animationEases = {\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n linear: \"cubic-bezier(0, 0, 1, 1)\",\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n}\n\nexport interface UseAnimationProps {\n delay?: number;\n duration?: number;\n from: CSSProps;\n to: CSSProps;\n ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n let _delay = delay || 0;\n let _duration = duration || 600;\n let _ease = ease || \"easeBounceOut\"\n const id = \"anim\" + useId().replace(/:/g, \"\")\n const anim = css({\n animationName: id,\n animationDelay: _delay + \"ms\",\n animationDuration: _duration + \"ms\",\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\n [`@keyframes ${id}`]: {\n from: from as any,\n to: to as any\n }\n })\n return anim.classname\n}\n\nexport default useAnimation"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useAnimation.mjs","sources":["../src/useAnimation.ts"],"sourcesContent":["import { css } from './css'\r\nimport { useId } from 'react'\r\nimport { CSSProps } from './css/types'\r\n\r\nexport const animationEases = {\r\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\r\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\r\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\r\n linear: \"cubic-bezier(0, 0, 1, 1)\",\r\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\r\n}\r\n\r\nexport interface UseAnimationProps {\r\n delay?: number;\r\n duration?: number;\r\n from: CSSProps;\r\n to: CSSProps;\r\n ease?: keyof typeof animationEases;\r\n}\r\n\r\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\r\n let _delay = delay || 0;\r\n let _duration = duration || 600;\r\n let _ease = ease || \"easeBounceOut\"\r\n const id = \"anim\" + useId().replace(/:/g, \"\")\r\n const anim = css({\r\n animationName: id,\r\n animationDelay: _delay + \"ms\",\r\n animationDuration: _duration + \"ms\",\r\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\r\n [`@keyframes ${id}`]: {\r\n from: from as any,\r\n to: to as any\r\n }\r\n })\r\n return anim.classname\r\n}\r\n\r\nexport default useAnimation"],"names":[],"mappings":"4DAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAG,GAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
|
package/useColorTemplate.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
'use strict';require('./theme/index.js');var core=require('./theme/core.js');const useColorTemplate = (color, type) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./theme/index.js');var core=require('./theme/core.js');const useColorTemplate = (color, type) => {
|
|
2
2
|
var _a;
|
|
3
3
|
const theme = core.useTheme();
|
|
4
4
|
let _color = color === 'default' ? "background" : color;
|
|
5
5
|
return (_a = theme.colors[_color]) === null || _a === void 0 ? void 0 : _a.template[type];
|
|
6
|
-
};
|
|
6
|
+
};exports.default=useColorTemplate;//# sourceMappingURL=useColorTemplate.js.map
|
package/useColorTemplate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.js","sources":["../src/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\n\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\n const theme: any = useTheme()\n let _color = color === 'default' ? \"background\" : color as any\n return theme.colors[_color]?.template[type]\n}\n\nexport default useColorTemplate"],"names":["useTheme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useColorTemplate.js","sources":["../src/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\r\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\r\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\r\n\r\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\r\n const theme: any = useTheme()\r\n let _color = color === 'default' ? \"background\" : color as any\r\n return theme.colors[_color]?.template[type]\r\n}\r\n\r\nexport default useColorTemplate"],"names":["useTheme"],"mappings":"sIAIA,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,IAAuB,KAAI;;AAC7E,IAAA,MAAM,KAAK,GAAQA,aAAQ,EAAE;AAC7B,IAAA,IAAI,MAAM,GAAG,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAY;AAC9D,IAAA,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,IAAI,CAAC;AAC/C"}
|
package/useColorTemplate.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.mjs","sources":["../src/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\n\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\n const theme: any = useTheme()\n let _color = color === 'default' ? \"background\" : color as any\n return theme.colors[_color]?.template[type]\n}\n\nexport default useColorTemplate"],"names":[],"mappings":"kEAIA,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,IAAuB,KAAI;;AAC7E,IAAA,MAAM,KAAK,GAAQ,QAAQ,EAAE;AAC7B,IAAA,IAAI,MAAM,GAAG,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAY;AAC9D,IAAA,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,IAAI,CAAC;AAC/C"}
|
|
1
|
+
{"version":3,"file":"useColorTemplate.mjs","sources":["../src/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\r\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\r\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\r\n\r\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\r\n const theme: any = useTheme()\r\n let _color = color === 'default' ? \"background\" : color as any\r\n return theme.colors[_color]?.template[type]\r\n}\r\n\r\nexport default useColorTemplate"],"names":[],"mappings":"kEAIA,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,IAAuB,KAAI;;AAC7E,IAAA,MAAM,KAAK,GAAQ,QAAQ,EAAE;AAC7B,IAAA,IAAI,MAAM,GAAG,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAY;AAC9D,IAAA,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,IAAI,CAAC;AAC/C"}
|
package/useInterface.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
'use strict';require('./theme/index.js');var core=require('./theme/core.js');const useInterface = (name, userPorps, defaultProps) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./theme/index.js');var core=require('./theme/core.js');const useInterface = (name, userPorps, defaultProps) => {
|
|
2
2
|
const theme = core.useTheme();
|
|
3
3
|
const _interface = theme.interfaces[name];
|
|
4
4
|
if (_interface) {
|
|
5
5
|
defaultProps = _interface(Object.assign(Object.assign({}, defaultProps), userPorps), theme);
|
|
6
6
|
}
|
|
7
7
|
return [Object.assign(Object.assign({}, defaultProps), userPorps), theme];
|
|
8
|
-
};
|
|
8
|
+
};exports.default=useInterface;//# sourceMappingURL=useInterface.js.map
|
package/useInterface.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.js","sources":["../src/useInterface.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n const _interface = theme.interfaces[name]\n\n if (_interface) {\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\n }\n return [{ ...defaultProps, ...userPorps }, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInterface.js","sources":["../src/useInterface.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n const theme = useTheme()\r\n const _interface = theme.interfaces[name]\r\n\r\n if (_interface) {\r\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\r\n }\r\n return [{ ...defaultProps, ...userPorps }, theme]\r\n}\r\n\r\nexport default useInterface"],"names":["useTheme"],"mappings":"sIAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}
|
package/useInterface.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.mjs","sources":["../src/useInterface.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n const _interface = theme.interfaces[name]\n\n if (_interface) {\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\n }\n return [{ ...defaultProps, ...userPorps }, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInterface.mjs","sources":["../src/useInterface.ts"],"sourcesContent":["import { useTheme } from \"./theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n const theme = useTheme()\r\n const _interface = theme.interfaces[name]\r\n\r\n if (_interface) {\r\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\r\n }\r\n return [{ ...defaultProps, ...userPorps }, theme]\r\n}\r\n\r\nexport default useInterface"],"names":[],"mappings":"kEAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}
|
package/useScrollbar.js
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('./theme/index.js');var index=require('./css/index.js'),core=require('./theme/core.js');const useScrollbar = (themeName, root_cls) => {
|
|
2
|
+
const theme = core.getTheme(themeName);
|
|
3
|
+
if (!theme)
|
|
4
|
+
throw new Error(`theme "${themeName}" not found for ScrollbarCss`);
|
|
5
|
+
let thumbSize = 10;
|
|
6
|
+
let thumbColor = theme.colors.text.secondary;
|
|
7
|
+
let trackColor = theme.colors.divider;
|
|
8
|
+
root_cls = root_cls || "";
|
|
9
|
+
let clss = {
|
|
10
|
+
"*": root_cls ? `${root_cls} *` : `*`,
|
|
11
|
+
"scrollbar": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,
|
|
12
|
+
"scrollbarThumb": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,
|
|
13
|
+
"scrollbarThumbHover": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,
|
|
14
|
+
"scrollbarTrack": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,
|
|
15
|
+
};
|
|
16
|
+
return index.css({
|
|
17
|
+
"@global": {
|
|
18
|
+
[clss['*']]: {
|
|
19
|
+
scrollbarWidth: "thin",
|
|
20
|
+
scrollbarColor: `${thumbColor} ${trackColor}`,
|
|
21
|
+
},
|
|
22
|
+
[clss["scrollbar"]]: {
|
|
23
|
+
width: thumbSize,
|
|
24
|
+
height: thumbSize,
|
|
25
|
+
},
|
|
26
|
+
[clss["scrollbarThumb"]]: {
|
|
27
|
+
backgroundColor: thumbColor,
|
|
28
|
+
borderRadius: "5px",
|
|
29
|
+
border: "2px solid #f4f4f4",
|
|
30
|
+
},
|
|
31
|
+
[clss["scrollbarThumbHover"]]: {
|
|
32
|
+
backgroundColor: thumbColor,
|
|
33
|
+
},
|
|
34
|
+
[clss['scrollbarTrack']]: {
|
|
35
|
+
backgroundColor: trackColor,
|
|
36
|
+
borderRadius: "5px",
|
|
37
|
+
},
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
};exports.default=useScrollbar;//# sourceMappingURL=useScrollbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollbar.js","sources":["../src/useScrollbar.ts"],"sourcesContent":["import { getTheme } from './theme'\r\nimport { css } from './css'\r\n\r\nconst useScrollbar = (themeName: string, root_cls?: string): string => {\r\n const theme = getTheme(themeName)\r\n if (!theme) throw new Error(`theme \"${themeName}\" not found for ScrollbarCss`);\r\n\r\n let thumbSize = 10\r\n let thumbColor = theme.colors.text.secondary\r\n let trackColor = theme.colors.divider\r\n root_cls = root_cls || \"\"\r\n let clss = {\r\n \"*\": root_cls ? `${root_cls} *` : `*`,\r\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\r\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\r\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\r\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\r\n }\r\n\r\n return css({\r\n \"@global\": {\r\n [clss['*']]: {\r\n scrollbarWidth: \"thin\",\r\n scrollbarColor: `${thumbColor} ${trackColor}`,\r\n },\r\n [clss[\"scrollbar\"]]: {\r\n width: thumbSize,\r\n height: thumbSize,\r\n },\r\n [clss[\"scrollbarThumb\"]]: {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"5px\",\r\n border: \"2px solid #f4f4f4\",\r\n },\r\n [clss[\"scrollbarThumbHover\"]]: {\r\n backgroundColor: thumbColor,\r\n },\r\n [clss['scrollbarTrack']]: {\r\n backgroundColor: trackColor,\r\n borderRadius: \"5px\",\r\n },\r\n }\r\n }) as any\r\n}\r\n\r\nexport default useScrollbar\r\n"],"names":["getTheme","css"],"mappings":"sKAGA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAiB,KAAY;AACnE,IAAA,MAAM,KAAK,GAAGA,aAAQ,CAAC,SAAS,CAAC;AACjC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,UAAU,SAAS,CAAA,4BAAA,CAA8B,CAAC;IAE9E,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;AAC5C,IAAA,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AACrC,IAAA,QAAQ,GAAG,QAAQ,IAAI,EAAE;AACzB,IAAA,IAAI,IAAI,GAAG;QACR,GAAG,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI,GAAG,CAAA,CAAA,CAAG;AACrC,QAAA,WAAW,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,qBAAA,EAAwB,QAAQ,CAAA,oBAAA,CAAsB,GAAG,CAAA,mBAAA,CAAqB;AACjH,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;AACxI,QAAA,qBAAqB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,iCAAA,EAAoC,QAAQ,CAAA,gCAAA,CAAkC,GAAG,CAAA,+BAAA,CAAiC;AAC/J,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;KAC1I;AAED,IAAA,OAAOC,SAAG,CAAC;AACR,QAAA,SAAS,EAAE;AACR,YAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;AACV,gBAAA,cAAc,EAAE,MAAM;AACtB,gBAAA,cAAc,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,UAAU,CAAA,CAAE;AAC/C,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG;AAClB,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,MAAM,EAAE,mBAAmB;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG;AAC5B,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACH;AACH,KAAA,CAAQ;AACZ"}
|
package/useScrollbar.mjs
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import'./theme/index.mjs';import {css}from'./css/index.mjs';import {getTheme}from'./theme/core.mjs';const useScrollbar = (themeName, root_cls) => {
|
|
2
|
+
const theme = getTheme(themeName);
|
|
3
|
+
if (!theme)
|
|
4
|
+
throw new Error(`theme "${themeName}" not found for ScrollbarCss`);
|
|
5
|
+
let thumbSize = 10;
|
|
6
|
+
let thumbColor = theme.colors.text.secondary;
|
|
7
|
+
let trackColor = theme.colors.divider;
|
|
8
|
+
root_cls = root_cls || "";
|
|
9
|
+
let clss = {
|
|
10
|
+
"*": root_cls ? `${root_cls} *` : `*`,
|
|
11
|
+
"scrollbar": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,
|
|
12
|
+
"scrollbarThumb": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,
|
|
13
|
+
"scrollbarThumbHover": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,
|
|
14
|
+
"scrollbarTrack": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,
|
|
15
|
+
};
|
|
16
|
+
return css({
|
|
17
|
+
"@global": {
|
|
18
|
+
[clss['*']]: {
|
|
19
|
+
scrollbarWidth: "thin",
|
|
20
|
+
scrollbarColor: `${thumbColor} ${trackColor}`,
|
|
21
|
+
},
|
|
22
|
+
[clss["scrollbar"]]: {
|
|
23
|
+
width: thumbSize,
|
|
24
|
+
height: thumbSize,
|
|
25
|
+
},
|
|
26
|
+
[clss["scrollbarThumb"]]: {
|
|
27
|
+
backgroundColor: thumbColor,
|
|
28
|
+
borderRadius: "5px",
|
|
29
|
+
border: "2px solid #f4f4f4",
|
|
30
|
+
},
|
|
31
|
+
[clss["scrollbarThumbHover"]]: {
|
|
32
|
+
backgroundColor: thumbColor,
|
|
33
|
+
},
|
|
34
|
+
[clss['scrollbarTrack']]: {
|
|
35
|
+
backgroundColor: trackColor,
|
|
36
|
+
borderRadius: "5px",
|
|
37
|
+
},
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
};export{useScrollbar as default};//# sourceMappingURL=useScrollbar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useScrollbar.mjs","sources":["../src/useScrollbar.ts"],"sourcesContent":["import { getTheme } from './theme'\r\nimport { css } from './css'\r\n\r\nconst useScrollbar = (themeName: string, root_cls?: string): string => {\r\n const theme = getTheme(themeName)\r\n if (!theme) throw new Error(`theme \"${themeName}\" not found for ScrollbarCss`);\r\n\r\n let thumbSize = 10\r\n let thumbColor = theme.colors.text.secondary\r\n let trackColor = theme.colors.divider\r\n root_cls = root_cls || \"\"\r\n let clss = {\r\n \"*\": root_cls ? `${root_cls} *` : `*`,\r\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\r\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\r\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\r\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\r\n }\r\n\r\n return css({\r\n \"@global\": {\r\n [clss['*']]: {\r\n scrollbarWidth: \"thin\",\r\n scrollbarColor: `${thumbColor} ${trackColor}`,\r\n },\r\n [clss[\"scrollbar\"]]: {\r\n width: thumbSize,\r\n height: thumbSize,\r\n },\r\n [clss[\"scrollbarThumb\"]]: {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"5px\",\r\n border: \"2px solid #f4f4f4\",\r\n },\r\n [clss[\"scrollbarThumbHover\"]]: {\r\n backgroundColor: thumbColor,\r\n },\r\n [clss['scrollbarTrack']]: {\r\n backgroundColor: trackColor,\r\n borderRadius: \"5px\",\r\n },\r\n }\r\n }) as any\r\n}\r\n\r\nexport default useScrollbar\r\n"],"names":[],"mappings":"oGAGA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAiB,KAAY;AACnE,IAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;AACjC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,UAAU,SAAS,CAAA,4BAAA,CAA8B,CAAC;IAE9E,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;AAC5C,IAAA,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO;AACrC,IAAA,QAAQ,GAAG,QAAQ,IAAI,EAAE;AACzB,IAAA,IAAI,IAAI,GAAG;QACR,GAAG,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI,GAAG,CAAA,CAAA,CAAG;AACrC,QAAA,WAAW,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,qBAAA,EAAwB,QAAQ,CAAA,oBAAA,CAAsB,GAAG,CAAA,mBAAA,CAAqB;AACjH,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;AACxI,QAAA,qBAAqB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,iCAAA,EAAoC,QAAQ,CAAA,gCAAA,CAAkC,GAAG,CAAA,+BAAA,CAAiC;AAC/J,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;KAC1I;AAED,IAAA,OAAO,GAAG,CAAC;AACR,QAAA,SAAS,EAAE;AACR,YAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;AACV,gBAAA,cAAc,EAAE,MAAM;AACtB,gBAAA,cAAc,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,UAAU,CAAA,CAAE;AAC/C,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG;AAClB,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,MAAM,EAAE,mBAAmB;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG;AAC5B,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACH;AACH,KAAA,CAAQ;AACZ"}
|
package/ServerStyleTags.js
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
'use strict';var React=require('react'),oncss=require('oncss');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 ServerStyleTags = () => {
|
|
2
|
-
return Array.from(oncss.CSSFactory.values()).map((c, idx) => React__namespace.createElement("style", { key: c.classname + idx, "data-oncss": c.classname, dangerouslySetInnerHTML: { __html: c.css } }));
|
|
3
|
-
};module.exports=ServerStyleTags;//# sourceMappingURL=ServerStyleTags.js.map
|
package/ServerStyleTags.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ServerStyleTags.js","sources":["../src/ServerStyleTags.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CSSFactory } from 'oncss'\n\nconst ServerStyleTags = () => {\n return Array.from(CSSFactory.values()).map((c, idx) => <style\n key={c.classname + idx}\n data-oncss={c.classname}\n dangerouslySetInnerHTML={{ __html: c.css }}\n />)\n}\n\nexport default ServerStyleTags"],"names":["CSSFactory","React"],"mappings":"+ZAGM,MAAA,eAAe,GAAG,MAAK;AACzB,IAAA,OAAO,KAAK,CAAC,IAAI,CAACA,gBAAU,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAKC,gBACnD,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,gBACV,CAAC,CAAC,SAAS,EACvB,uBAAuB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,EAAA,CAC5C,CAAC;AACP"}
|
package/ServerStyleTags.mjs
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import*as React from'react';import {CSSFactory}from'oncss';const ServerStyleTags = () => {
|
|
2
|
-
return Array.from(CSSFactory.values()).map((c, idx) => React.createElement("style", { key: c.classname + idx, "data-oncss": c.classname, dangerouslySetInnerHTML: { __html: c.css } }));
|
|
3
|
-
};export{ServerStyleTags as default};//# sourceMappingURL=ServerStyleTags.mjs.map
|
package/ServerStyleTags.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ServerStyleTags.mjs","sources":["../src/ServerStyleTags.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CSSFactory } from 'oncss'\n\nconst ServerStyleTags = () => {\n return Array.from(CSSFactory.values()).map((c, idx) => <style\n key={c.classname + idx}\n data-oncss={c.classname}\n dangerouslySetInnerHTML={{ __html: c.css }}\n />)\n}\n\nexport default ServerStyleTags"],"names":[],"mappings":"2DAGM,MAAA,eAAe,GAAG,MAAK;AACzB,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,KACnD,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,gBACV,CAAC,CAAC,SAAS,EACvB,uBAAuB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,GAAG,EAAE,EAAA,CAC5C,CAAC;AACP"}
|
|
File without changes
|