@xanui/core 1.2.2 → 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.
- package/css/getValue.js +5 -3
- package/css/getValue.js.map +1 -1
- package/css/getValue.mjs +5 -3
- package/css/getValue.mjs.map +1 -1
- package/hooks/useColorTemplate.d.ts +35 -4
- package/hooks/useColorTemplate.js +39 -4
- package/hooks/useColorTemplate.js.map +1 -1
- package/hooks/useColorTemplate.mjs +39 -4
- package/hooks/useColorTemplate.mjs.map +1 -1
- package/hooks/useInterface.d.ts +1 -1
- package/hooks/useInterface.js +1 -1
- package/hooks/useInterface.mjs +1 -1
- package/hooks/usePortal.js +1 -1
- package/hooks/usePortal.js.map +1 -1
- package/hooks/usePortal.mjs +1 -1
- package/hooks/useScrollbar.js +3 -3
- package/hooks/useScrollbar.js.map +1 -1
- package/hooks/useScrollbar.mjs +3 -3
- package/hooks/useScrollbar.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/package.json +1 -1
- package/theme/ThemeCssVars.js +1 -1
- package/theme/ThemeCssVars.js.map +1 -1
- package/theme/ThemeCssVars.mjs +1 -1
- package/theme/ThemeCssVars.mjs.map +1 -1
- package/theme/ThemeDefaultOptions.js +70 -26
- package/theme/ThemeDefaultOptions.js.map +1 -1
- package/theme/ThemeDefaultOptions.mjs +70 -26
- package/theme/ThemeDefaultOptions.mjs.map +1 -1
- package/theme/ThemeProvider.js +2 -3
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +2 -3
- package/theme/ThemeProvider.mjs.map +1 -1
- package/theme/createTheme.js +2 -13
- package/theme/createTheme.js.map +1 -1
- package/theme/createTheme.mjs +2 -13
- package/theme/createTheme.mjs.map +1 -1
- package/theme/index.js +1 -1
- package/theme/index.mjs +1 -1
- package/theme/types.d.ts +9 -46
- package/theme/createColor.js +0 -46
- package/theme/createColor.js.map +0 -1
- package/theme/createColor.mjs +0 -46
- package/theme/createColor.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
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.
|
|
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/createTheme.js
CHANGED
|
@@ -1,20 +1,9 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var
|
|
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.lightThemeOptions, Object.assign(Object.assign(
|
|
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
|
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\"\r\nimport {
|
|
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"}
|
package/theme/createTheme.mjs
CHANGED
|
@@ -1,20 +1,9 @@
|
|
|
1
|
-
import {
|
|
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(lightThemeOptions, Object.assign(Object.assign(
|
|
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\"\r\nimport {
|
|
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"}
|
package/theme/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});
|
|
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
|
package/theme/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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
|
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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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,10 +19,8 @@ type ThemeTypographyItem = {
|
|
|
51
19
|
fontWeight: number;
|
|
52
20
|
};
|
|
53
21
|
type ThemeColor = {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
background: Omit<ThemeColorItem, "text">;
|
|
57
|
-
surface: Omit<ThemeColorItem, "text">;
|
|
22
|
+
common: ThemeColorItem;
|
|
23
|
+
surface: ThemeColorItem;
|
|
58
24
|
brand: ThemeColorItem;
|
|
59
25
|
accent: ThemeColorItem;
|
|
60
26
|
success: ThemeColorItem;
|
|
@@ -91,10 +57,8 @@ interface ThemeOptions {
|
|
|
91
57
|
type ThemeColorItemInput = Partial<Omit<ThemeColorItem, "alpha">>;
|
|
92
58
|
type ThemeTypographyItemInput = Partial<ThemeTypographyItem>;
|
|
93
59
|
type ThemeColorInput = {
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
background?: Omit<ThemeColorItemInput, "text">;
|
|
97
|
-
surface?: Omit<ThemeColorItemInput, "text">;
|
|
60
|
+
common?: ThemeColorItemInput;
|
|
61
|
+
surface?: ThemeColorItemInput;
|
|
98
62
|
brand?: ThemeColorItemInput;
|
|
99
63
|
accent?: ThemeColorItemInput;
|
|
100
64
|
success?: ThemeColorItemInput;
|
|
@@ -103,7 +67,6 @@ type ThemeColorInput = {
|
|
|
103
67
|
danger?: ThemeColorItemInput;
|
|
104
68
|
};
|
|
105
69
|
type ThemeTypographyInputType = {
|
|
106
|
-
fontFamily?: string;
|
|
107
70
|
h1?: ThemeTypographyItemInput;
|
|
108
71
|
h2?: ThemeTypographyItemInput;
|
|
109
72
|
h3?: ThemeTypographyItemInput;
|
|
@@ -124,6 +87,6 @@ interface ThemeOptionInput {
|
|
|
124
87
|
typography?: ThemeTypographyInputType;
|
|
125
88
|
}
|
|
126
89
|
type TypographyRefTypes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "text" | "button" | "small";
|
|
127
|
-
type ColorsRefTypes = "
|
|
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";
|
|
128
91
|
|
|
129
92
|
export type { ColorsRefTypes, ObjectType, ThemeColor, ThemeColorInput, ThemeColorItem, ThemeColorItemInput, ThemeOptionInput, ThemeOptions, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes };
|
package/theme/createColor.js
DELETED
|
@@ -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
|
package/theme/createColor.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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"}
|
package/theme/createColor.mjs
DELETED
|
@@ -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\"\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"}
|