@xanui/core 1.1.2 → 1.1.5
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/ServerStyleTags.js +3 -0
- package/ServerStyleTags.js.map +1 -0
- package/ServerStyleTags.mjs +3 -0
- package/ServerStyleTags.mjs.map +1 -0
- package/Tag/cssPropList.js +186 -0
- package/Tag/cssPropList.js.map +1 -0
- package/{src/Tag/cssPropList.ts → Tag/cssPropList.mjs} +2 -7
- package/Tag/cssPropList.mjs.map +1 -0
- package/Tag/index.js +6 -0
- package/Tag/index.js.map +1 -0
- package/Tag/index.mjs +6 -0
- package/Tag/index.mjs.map +1 -0
- package/Tag/useTagProps.js +21 -0
- package/Tag/useTagProps.js.map +1 -0
- package/Tag/useTagProps.mjs +21 -0
- package/Tag/useTagProps.mjs.map +1 -0
- package/Transition/index.js +93 -0
- package/Transition/index.js.map +1 -0
- package/Transition/index.mjs +93 -0
- package/Transition/index.mjs.map +1 -0
- package/Transition/variants.js +158 -0
- package/Transition/variants.js.map +1 -0
- package/{src/Transition/variants.ts → Transition/variants.mjs} +44 -64
- package/Transition/variants.mjs.map +1 -0
- package/breakpoint/BreakpointProvider.js +43 -0
- package/breakpoint/BreakpointProvider.js.map +1 -0
- package/breakpoint/BreakpointProvider.mjs +43 -0
- package/breakpoint/BreakpointProvider.mjs.map +1 -0
- package/breakpoint/useBreakpoint.js +23 -0
- package/breakpoint/useBreakpoint.js.map +1 -0
- package/breakpoint/useBreakpoint.mjs +23 -0
- package/breakpoint/useBreakpoint.mjs.map +1 -0
- package/breakpoint/useBreakpointProps.js +42 -0
- package/breakpoint/useBreakpointProps.js.map +1 -0
- package/breakpoint/useBreakpointProps.mjs +42 -0
- package/breakpoint/useBreakpointProps.mjs.map +1 -0
- package/css/aliases.js +29 -0
- package/css/aliases.js.map +1 -0
- package/css/aliases.mjs +29 -0
- package/css/aliases.mjs.map +1 -0
- package/{src/css/getProps.ts → css/getProps.js} +15 -21
- package/css/getProps.js.map +1 -0
- package/css/getProps.mjs +32 -0
- package/css/getProps.mjs.map +1 -0
- package/{src/css/getValue.ts → css/getValue.js} +40 -65
- package/css/getValue.js.map +1 -0
- package/css/getValue.mjs +92 -0
- package/css/getValue.mjs.map +1 -0
- package/css/index.js +55 -0
- package/css/index.js.map +1 -0
- package/css/index.mjs +55 -0
- package/css/index.mjs.map +1 -0
- package/index.d.ts +629 -0
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.mjs +1 -0
- package/index.mjs.map +1 -0
- package/isWindow.js +1 -0
- package/isWindow.js.map +1 -0
- package/isWindow.mjs +1 -0
- package/isWindow.mjs.map +1 -0
- package/package.json +50 -51
- package/theme/ThemeCssVars.js +5 -0
- package/theme/ThemeCssVars.js.map +1 -0
- package/theme/ThemeCssVars.mjs +5 -0
- package/theme/ThemeCssVars.mjs.map +1 -0
- package/theme/ThemeDefaultOptions.js +131 -0
- package/theme/ThemeDefaultOptions.js.map +1 -0
- package/{src/theme/ThemeDefaultOptions.ts → theme/ThemeDefaultOptions.mjs} +17 -32
- package/theme/ThemeDefaultOptions.mjs.map +1 -0
- package/theme/ThemeProvider.js +88 -0
- package/theme/ThemeProvider.js.map +1 -0
- package/theme/ThemeProvider.mjs +88 -0
- package/theme/ThemeProvider.mjs.map +1 -0
- package/theme/core.js +18 -0
- package/theme/core.js.map +1 -0
- package/theme/core.mjs +18 -0
- package/theme/core.mjs.map +1 -0
- package/theme/createColor.js +46 -0
- package/theme/createColor.js.map +1 -0
- package/theme/createColor.mjs +46 -0
- package/theme/createColor.mjs.map +1 -0
- package/theme/createTheme.js +21 -0
- package/theme/createTheme.js.map +1 -0
- package/theme/createTheme.mjs +21 -0
- package/theme/createTheme.mjs.map +1 -0
- package/theme/createThemeSwitcher.js +12 -0
- package/theme/createThemeSwitcher.js.map +1 -0
- package/theme/createThemeSwitcher.mjs +12 -0
- package/theme/createThemeSwitcher.mjs.map +1 -0
- package/theme/index.js +2 -0
- package/theme/index.js.map +1 -0
- package/theme/index.mjs +2 -0
- package/theme/index.mjs.map +1 -0
- package/useAnimation.js +25 -0
- package/useAnimation.js.map +1 -0
- package/{src/useAnimation.ts → useAnimation.mjs} +10 -25
- package/useAnimation.mjs.map +1 -0
- package/useColorTemplate.js +6 -0
- package/useColorTemplate.js.map +1 -0
- package/useColorTemplate.mjs +6 -0
- package/useColorTemplate.mjs.map +1 -0
- package/useInterface.js +8 -0
- package/useInterface.js.map +1 -0
- package/useInterface.mjs +8 -0
- package/useInterface.mjs.map +1 -0
- package/main.tsx +0 -97
- package/src/ServerStyleTags.tsx +0 -12
- package/src/Tag/index.tsx +0 -11
- package/src/Tag/types.ts +0 -183
- package/src/Tag/useTagProps.ts +0 -28
- package/src/Transition/index.tsx +0 -148
- package/src/breakpoint/index.tsx +0 -52
- package/src/breakpoint/useBreakpoint.ts +0 -31
- package/src/breakpoint/useBreakpointProps.ts +0 -57
- package/src/css/aliases.ts +0 -35
- package/src/css/index.ts +0 -78
- package/src/css/types.ts +0 -60
- package/src/index.ts +0 -34
- package/src/isWindow.ts +0 -3
- package/src/theme/ThemeCssVars.ts +0 -107
- package/src/theme/ThemeProvider.tsx +0 -140
- package/src/theme/core.ts +0 -21
- package/src/theme/createColor.ts +0 -53
- package/src/theme/createTheme.ts +0 -33
- package/src/theme/createThemeSwitcher.ts +0 -18
- package/src/theme/index.tsx +0 -17
- package/src/theme/types.ts +0 -181
- package/src/useColorTemplate.ts +0 -11
- package/src/useInterface.ts +0 -13
- package/tsconfig.json +0 -28
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBreakpointProps.mjs","sources":["../../src/breakpoint/useBreakpointProps.ts"],"sourcesContent":["import React, { isValidElement } from \"react\"\nimport useBreakpoint from \"./useBreakpoint\"\nimport { BreakpointKeys } from \"../css/types\"\n\nexport type useBreakpointPropsType<P> = P | {\n [key in BreakpointKeys]?: P\n}\n\nconst useBreakpoinProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {\n const bpoint = useBreakpoint()\n const stringifiedElement = JSON.stringify(props, (key, value) => {\n if (key === '_owner' || key === '_store') {\n return undefined; // Skip circular references\n }\n return value;\n }, 2);\n\n let format: any = React.useMemo(() => {\n\n const _format: any = {\n xs: {},\n sm: {},\n md: {},\n lg: {},\n xl: {}\n }\n for (let prop in props) {\n let val = (props as any)[prop]\n if (!isValidElement(val) && typeof val === 'object') {\n for (let breakpoin in val) {\n _format[breakpoin][prop] = (props as any)[prop][breakpoin]\n }\n } else {\n _format.xs[prop] = (props as any)[prop]\n }\n }\n\n return _format\n }, [stringifiedElement, bpoint.value])\n\n return React.useMemo(() => {\n let _props = format.xs || {};\n for (let key of ['sm', 'md', 'lg', 'xl']) {\n if (bpoint.isOrDown(key as any)) {\n _props = { ..._props, ...format[key] };\n }\n if (bpoint.is(key as any)) {\n break;\n }\n }\n return _props;\n }, [format, bpoint.value]);\n}\n\n\n\nexport default useBreakpoinProps"],"names":["React"],"mappings":"iGAQA,MAAM,iBAAiB,GAAG,CAAmB,KAAgC,KAA+B;AACzG,IAAA,MAAM,MAAM,GAAG,aAAa,EAAE;AAC9B,IAAA,MAAM,kBAAkB,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AAC7D,QAAA,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,EAAE;YACvC,OAAO,SAAS,CAAC;AACnB;AACD,QAAA,OAAO,KAAK;KACd,EAAE,CAAC,CAAC;AAEL,IAAA,IAAI,MAAM,GAAQA,cAAK,CAAC,OAAO,CAAC,MAAK;AAElC,QAAA,MAAM,OAAO,GAAQ;AAClB,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE,EAAE;AACN,YAAA,EAAE,EAAE;SACN;AACD,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE;AACrB,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,IAAI,CAAC;YAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAClD,gBAAA,KAAK,IAAI,SAAS,IAAI,GAAG,EAAE;AACxB,oBAAA,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;AAC5D;AACH;AAAM,iBAAA;gBACJ,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;AACzC;AACH;AAED,QAAA,OAAO,OAAO;KAChB,EAAE,CAAC,kBAAkB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;AAEtC,IAAA,OAAOA,cAAK,CAAC,OAAO,CAAC,MAAK;AACvB,QAAA,IAAI,MAAM,GAAG,MAAM,CAAC,EAAE,IAAI,EAAE;AAC5B,QAAA,KAAK,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;AACvC,YAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAU,CAAC,EAAE;gBAC9B,MAAM,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,MAAM,CAAK,EAAA,MAAM,CAAC,GAAG,CAAC,CAAE;AACxC;AACD,YAAA,IAAI,MAAM,CAAC,EAAE,CAAC,GAAU,CAAC,EAAE;gBACxB;AACF;AACH;AACD,QAAA,OAAO,MAAM;KACf,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;AAC7B"}
|
package/css/aliases.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';const isStr = (v, or) => typeof v === 'string' ? v : or;
|
|
2
|
+
const aliases = {
|
|
3
|
+
bgcolor: (v) => ({ backgroundColor: v }),
|
|
4
|
+
bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
|
|
5
|
+
bg: (v) => ({ background: v }),
|
|
6
|
+
p: (v) => ({ padding: isStr(v, 8 * v) }),
|
|
7
|
+
pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
|
|
8
|
+
pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
|
|
9
|
+
pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
|
|
10
|
+
pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),
|
|
11
|
+
px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),
|
|
12
|
+
py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),
|
|
13
|
+
m: (v) => ({ margin: isStr(v, 8 * v) }),
|
|
14
|
+
mt: (v) => ({ marginTop: isStr(v, 8 * v) }),
|
|
15
|
+
mr: (v) => ({ marginRight: isStr(v, 8 * v) }),
|
|
16
|
+
mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),
|
|
17
|
+
ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),
|
|
18
|
+
mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),
|
|
19
|
+
my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),
|
|
20
|
+
radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
21
|
+
borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
22
|
+
shadow: (v) => ({ boxShadow: v }),
|
|
23
|
+
flexBox: (v) => (v ? { display: "flex" } : {}),
|
|
24
|
+
flexRow: (v) => (v ? { flexDirection: "row" } : {}),
|
|
25
|
+
flexColumn: (v) => (v ? { flexDirection: "column" } : {}),
|
|
26
|
+
flexWraped: (v) => (v ? { flexWrap: "wrap" } : {}),
|
|
27
|
+
direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),
|
|
28
|
+
gap: (v) => ({ gap: isStr(v, 8 * v) }),
|
|
29
|
+
};module.exports=aliases;//# sourceMappingURL=aliases.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aliases.js","sources":["../../src/css/aliases.ts"],"sourcesContent":["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n bgcolor: (v) => ({ backgroundColor: v }),\n bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: \"cover\", backgroundRepeat: \"no-repeat\" }),\n bg: (v) => ({ background: v }),\n p: (v) => ({ padding: isStr(v, 8 * v) }),\n pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\n pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\n pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\n pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\n px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\n py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\n m: (v) => ({ margin: isStr(v, 8 * v) }),\n mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\n mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\n mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\n ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\n mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\n my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\n radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n shadow: (v) => ({ boxShadow: v }),\n flexBox: (v) => (v ? { display: \"flex\" } : {}),\n flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\n flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\n flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\n direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),\n gap: (v) => ({ gap: isStr(v, 8 * v) }),\n};\n\nexport default aliases"],"names":[],"mappings":"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"}
|
package/css/aliases.mjs
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
const isStr = (v, or) => typeof v === 'string' ? v : or;
|
|
2
|
+
const aliases = {
|
|
3
|
+
bgcolor: (v) => ({ backgroundColor: v }),
|
|
4
|
+
bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "no-repeat" }),
|
|
5
|
+
bg: (v) => ({ background: v }),
|
|
6
|
+
p: (v) => ({ padding: isStr(v, 8 * v) }),
|
|
7
|
+
pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
|
|
8
|
+
pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
|
|
9
|
+
pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
|
|
10
|
+
pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),
|
|
11
|
+
px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),
|
|
12
|
+
py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),
|
|
13
|
+
m: (v) => ({ margin: isStr(v, 8 * v) }),
|
|
14
|
+
mt: (v) => ({ marginTop: isStr(v, 8 * v) }),
|
|
15
|
+
mr: (v) => ({ marginRight: isStr(v, 8 * v) }),
|
|
16
|
+
mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),
|
|
17
|
+
ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),
|
|
18
|
+
mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),
|
|
19
|
+
my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),
|
|
20
|
+
radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
21
|
+
borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
|
|
22
|
+
shadow: (v) => ({ boxShadow: v }),
|
|
23
|
+
flexBox: (v) => (v ? { display: "flex" } : {}),
|
|
24
|
+
flexRow: (v) => (v ? { flexDirection: "row" } : {}),
|
|
25
|
+
flexColumn: (v) => (v ? { flexDirection: "column" } : {}),
|
|
26
|
+
flexWraped: (v) => (v ? { flexWrap: "wrap" } : {}),
|
|
27
|
+
direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),
|
|
28
|
+
gap: (v) => ({ gap: isStr(v, 8 * v) }),
|
|
29
|
+
};export{aliases as default};//# sourceMappingURL=aliases.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aliases.mjs","sources":["../../src/css/aliases.ts"],"sourcesContent":["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n bgcolor: (v) => ({ backgroundColor: v }),\n bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: \"cover\", backgroundRepeat: \"no-repeat\" }),\n bg: (v) => ({ background: v }),\n p: (v) => ({ padding: isStr(v, 8 * v) }),\n pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\n pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\n pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\n pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\n px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\n py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\n m: (v) => ({ margin: isStr(v, 8 * v) }),\n mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\n mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\n mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\n ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\n mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\n my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\n radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n shadow: (v) => ({ boxShadow: v }),\n flexBox: (v) => (v ? { display: \"flex\" } : {}),\n flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\n flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\n flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\n direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),\n gap: (v) => ({ gap: isStr(v, 8 * v) }),\n};\n\nexport default aliases"],"names":[],"mappings":"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"}
|
|
@@ -1,38 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const getProps = (prop: string, value: string, _css: CSSProps) => {
|
|
1
|
+
'use strict';const getProps = (prop, value, _css) => {
|
|
4
2
|
let important;
|
|
5
3
|
if (typeof value === 'string') {
|
|
6
|
-
const split = value.split("!")
|
|
7
|
-
important = split[1] ? "!important" : ""
|
|
8
|
-
value = split[0]
|
|
4
|
+
const split = value.split("!");
|
|
5
|
+
important = split[1] ? "!important" : "";
|
|
6
|
+
value = split[0];
|
|
9
7
|
}
|
|
10
|
-
|
|
11
8
|
if (prop === 'disabled') {
|
|
12
|
-
if (
|
|
9
|
+
if (value === true) {
|
|
13
10
|
return {
|
|
14
11
|
pointerEvents: "none!important",
|
|
15
12
|
cursor: "default!important",
|
|
16
13
|
userSelect: "none!important",
|
|
17
14
|
opacity: ".8!important"
|
|
18
|
-
}
|
|
15
|
+
};
|
|
19
16
|
}
|
|
20
|
-
return {}
|
|
17
|
+
return {};
|
|
21
18
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
let p: any = {
|
|
19
|
+
if (value && typeof value === "number" && ["border", "borderRight", "borderLeft", "borderTop", "borderBottom"].includes(prop)) {
|
|
20
|
+
const keys = Object.keys(_css);
|
|
21
|
+
let p = {
|
|
26
22
|
[`${prop}Width`]: value + 'px' + (important || ""),
|
|
27
|
-
}
|
|
23
|
+
};
|
|
28
24
|
if (!keys.includes(`${prop}Color`)) {
|
|
29
|
-
p[`${prop}Color`] = "divider"
|
|
25
|
+
p[`${prop}Color`] = "divider";
|
|
30
26
|
}
|
|
31
27
|
if (!keys.includes(`${prop}Style`)) {
|
|
32
|
-
p[`${prop}Style`] = "solid"
|
|
28
|
+
p[`${prop}Style`] = "solid";
|
|
33
29
|
}
|
|
34
|
-
return p
|
|
30
|
+
return p;
|
|
35
31
|
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export default getProps
|
|
32
|
+
};module.exports=getProps;//# sourceMappingURL=getProps.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getProps.js","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n let important;\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (prop === 'disabled') {\n if ((value as any) === true) {\n return {\n pointerEvents: \"none!important\",\n cursor: \"default!important\",\n userSelect: \"none!important\",\n opacity: \".8!important\"\n } as any\n }\n return {}\n }\n\n if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n const keys: any = Object.keys(_css)\n let p: any = {\n [`${prop}Width`]: value + 'px' + (important || \"\"),\n }\n if (!keys.includes(`${prop}Color`)) {\n p[`${prop}Color`] = \"divider\"\n }\n if (!keys.includes(`${prop}Style`)) {\n p[`${prop}Style`] = \"solid\"\n }\n return p\n }\n}\n\nexport default getProps"],"names":[],"mappings":"aAEM,MAAA,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAC7D,IAAA,IAAI,SAAS;AACb,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AACnB;IAED,IAAI,IAAI,KAAK,UAAU,EAAE;QACrB,IAAK,KAAa,KAAK,IAAI,EAAE;YACzB,OAAO;AACH,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE;aACL;AACX;AACD,QAAA,OAAO,EAAE;AACZ;IAED,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAW,CAAC,EAAE;QAClI,MAAM,IAAI,GAAQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAC,GAAQ;AACT,YAAA,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,GAAG,KAAK,GAAG,IAAI,IAAI,SAAS,IAAI,EAAE,CAAC;SACrD;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,SAAS;AAChC;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,OAAO;AAC9B;AACD,QAAA,OAAO,CAAC;AACX;AACL"}
|
package/css/getProps.mjs
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const getProps = (prop, value, _css) => {
|
|
2
|
+
let important;
|
|
3
|
+
if (typeof value === 'string') {
|
|
4
|
+
const split = value.split("!");
|
|
5
|
+
important = split[1] ? "!important" : "";
|
|
6
|
+
value = split[0];
|
|
7
|
+
}
|
|
8
|
+
if (prop === 'disabled') {
|
|
9
|
+
if (value === true) {
|
|
10
|
+
return {
|
|
11
|
+
pointerEvents: "none!important",
|
|
12
|
+
cursor: "default!important",
|
|
13
|
+
userSelect: "none!important",
|
|
14
|
+
opacity: ".8!important"
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return {};
|
|
18
|
+
}
|
|
19
|
+
if (value && typeof value === "number" && ["border", "borderRight", "borderLeft", "borderTop", "borderBottom"].includes(prop)) {
|
|
20
|
+
const keys = Object.keys(_css);
|
|
21
|
+
let p = {
|
|
22
|
+
[`${prop}Width`]: value + 'px' + (important || ""),
|
|
23
|
+
};
|
|
24
|
+
if (!keys.includes(`${prop}Color`)) {
|
|
25
|
+
p[`${prop}Color`] = "divider";
|
|
26
|
+
}
|
|
27
|
+
if (!keys.includes(`${prop}Style`)) {
|
|
28
|
+
p[`${prop}Style`] = "solid";
|
|
29
|
+
}
|
|
30
|
+
return p;
|
|
31
|
+
}
|
|
32
|
+
};export{getProps as default};//# sourceMappingURL=getProps.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getProps.mjs","sources":["../../src/css/getProps.ts"],"sourcesContent":["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n let important;\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (prop === 'disabled') {\n if ((value as any) === true) {\n return {\n pointerEvents: \"none!important\",\n cursor: \"default!important\",\n userSelect: \"none!important\",\n opacity: \".8!important\"\n } as any\n }\n return {}\n }\n\n if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n const keys: any = Object.keys(_css)\n let p: any = {\n [`${prop}Width`]: value + 'px' + (important || \"\"),\n }\n if (!keys.includes(`${prop}Color`)) {\n p[`${prop}Color`] = \"divider\"\n }\n if (!keys.includes(`${prop}Style`)) {\n p[`${prop}Style`] = \"solid\"\n }\n return p\n }\n}\n\nexport default getProps"],"names":[],"mappings":"AAEM,MAAA,QAAQ,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,IAAc,KAAI;AAC7D,IAAA,IAAI,SAAS;AACb,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AACnB;IAED,IAAI,IAAI,KAAK,UAAU,EAAE;QACrB,IAAK,KAAa,KAAK,IAAI,EAAE;YACzB,OAAO;AACH,gBAAA,aAAa,EAAE,gBAAgB;AAC/B,gBAAA,MAAM,EAAE,mBAAmB;AAC3B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,OAAO,EAAE;aACL;AACX;AACD,QAAA,OAAO,EAAE;AACZ;IAED,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,QAAQ,CAAC,IAAW,CAAC,EAAE;QAClI,MAAM,IAAI,GAAQ,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAC,GAAQ;AACT,YAAA,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,GAAG,KAAK,GAAG,IAAI,IAAI,SAAS,IAAI,EAAE,CAAC;SACrD;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,SAAS;AAChC;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAG,EAAA,IAAI,CAAO,KAAA,CAAA,CAAC,EAAE;AAChC,YAAA,CAAC,CAAC,CAAG,EAAA,IAAI,OAAO,CAAC,GAAG,OAAO;AAC9B;AACD,QAAA,OAAO,CAAC;AACX;AACL"}
|
|
@@ -1,44 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const getColor = (color: string) => {
|
|
1
|
+
'use strict';const getColor = (color) => {
|
|
4
2
|
return {
|
|
5
3
|
[`${color}`]: `var(--color-${color}-primary)`,
|
|
6
4
|
[`${color}.primary`]: `var(--color-${color}-primary)`,
|
|
7
5
|
[`${color}.secondary`]: `var(--color-${color}-secondary)`,
|
|
8
6
|
[`${color}.text`]: `var(--color-${color}-text)`,
|
|
9
7
|
[`${color}.alpha`]: `var(--color-${color}-alpha)`
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
"text": `var(--color-text-primary)`,
|
|
16
|
-
"text.primary": `var(--color-text-primary)`,
|
|
17
|
-
"text.secondary": `var(--color-text-secondary)`,
|
|
18
|
-
|
|
19
|
-
"background": `var(--color-background-primary)`,
|
|
20
|
-
"background.primary": `var(--color-background-primary)`,
|
|
21
|
-
"background.secondary": `var(--color-background-secondary)`,
|
|
22
|
-
"background.alpha": `var(--color-background-alpha)`,
|
|
23
|
-
"divider": `var(--color-divider)`,
|
|
24
|
-
|
|
25
|
-
...getColor("brand"),
|
|
26
|
-
...getColor("accent"),
|
|
27
|
-
...getColor("info"),
|
|
28
|
-
...getColor("success"),
|
|
29
|
-
...getColor("warning"),
|
|
30
|
-
...getColor("danger"),
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const breakpoints: any = {
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
const withImportant = (important, value) => important ? value + important : value;
|
|
11
|
+
const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ "text": `var(--color-text-primary)`, "text.primary": `var(--color-text-primary)`, "text.secondary": `var(--color-text-secondary)`, "background": `var(--color-background-primary)`, "background.primary": `var(--color-background-primary)`, "background.secondary": `var(--color-background-secondary)`, "background.alpha": `var(--color-background-alpha)`, "divider": `var(--color-divider)` }, getColor("brand")), getColor("accent")), getColor("info")), getColor("success")), getColor("warning")), getColor("danger"));
|
|
12
|
+
const breakpoints = {
|
|
34
13
|
"xs": "var(--bp-xs)",
|
|
35
14
|
"sm": "var(--bp-sm)",
|
|
36
15
|
"md": "var(--bp-md)",
|
|
37
16
|
"lg": "var(--bp-lg)",
|
|
38
17
|
"xl": "var(--bp-xl)"
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
let fontsizes: any = {
|
|
18
|
+
};
|
|
19
|
+
let fontsizes = {
|
|
42
20
|
"h1": "var(--fontsize-h1)",
|
|
43
21
|
"h2": "var(--fontsize-h2)",
|
|
44
22
|
"h3": "var(--fontsize-h3)",
|
|
@@ -48,9 +26,8 @@ let fontsizes: any = {
|
|
|
48
26
|
"text": "var(--fontsize-text)",
|
|
49
27
|
"button": "var(--fontsize-button)",
|
|
50
28
|
"small": "var(--fontsize-small)"
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
let lineHeights: any = {
|
|
29
|
+
};
|
|
30
|
+
let lineHeights = {
|
|
54
31
|
"h1": "var(--lineheight-h1)",
|
|
55
32
|
"h2": "var(--lineheight-h2)",
|
|
56
33
|
"h3": "var(--lineheight-h3)",
|
|
@@ -60,9 +37,8 @@ let lineHeights: any = {
|
|
|
60
37
|
"text": "var(--lineheight-text)",
|
|
61
38
|
"button": "var(--lineheight-button)",
|
|
62
39
|
"small": "var(--lineheight-small)"
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
let fontWeights: any = {
|
|
40
|
+
};
|
|
41
|
+
let fontWeights = {
|
|
66
42
|
"h1": "var(--fontweight-h1)",
|
|
67
43
|
"h2": "var(--fontweight-h2)",
|
|
68
44
|
"h3": "var(--fontweight-h3)",
|
|
@@ -72,9 +48,8 @@ let fontWeights: any = {
|
|
|
72
48
|
"text": "var(--fontweight-text)",
|
|
73
49
|
"button": "var(--fontweight-button)",
|
|
74
50
|
"small": "var(--fontweight-small)"
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
let font: any = {
|
|
51
|
+
};
|
|
52
|
+
let font = {
|
|
78
53
|
"h1": "var(--font-h1)",
|
|
79
54
|
"h2": "var(--font-h2)",
|
|
80
55
|
"h3": "var(--font-h3)",
|
|
@@ -84,34 +59,34 @@ let font: any = {
|
|
|
84
59
|
"text": "var(--font-text)",
|
|
85
60
|
"button": "var(--font-button)",
|
|
86
61
|
"small": "var(--font-small)"
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
const getValue = (prop: any, value: string | number, _css: CSSProps): any => {
|
|
62
|
+
};
|
|
63
|
+
const getValue = (prop, value, _css) => {
|
|
90
64
|
let important;
|
|
91
|
-
|
|
92
65
|
if (typeof value === 'string') {
|
|
93
|
-
const split = value.split("!")
|
|
94
|
-
important = split[1] ? "!important" : ""
|
|
95
|
-
value = split[0]
|
|
66
|
+
const split = value.split("!");
|
|
67
|
+
important = split[1] ? "!important" : "";
|
|
68
|
+
value = split[0];
|
|
96
69
|
}
|
|
97
|
-
|
|
98
70
|
if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {
|
|
99
|
-
return withImportant(important, breakpoints[value] || value)
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
return withImportant(important,
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
return withImportant(important,
|
|
71
|
+
return withImportant(important, breakpoints[value] || value);
|
|
72
|
+
}
|
|
73
|
+
else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {
|
|
74
|
+
return withImportant(important, "var(--font-family)");
|
|
75
|
+
}
|
|
76
|
+
if (prop === 'font' && typeof value === "string" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
77
|
+
return withImportant(important, font[value] || value);
|
|
78
|
+
}
|
|
79
|
+
if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
80
|
+
return withImportant(important, fontWeights[value] || value);
|
|
81
|
+
}
|
|
82
|
+
else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
83
|
+
return withImportant(important, lineHeights[value] || value);
|
|
84
|
+
}
|
|
85
|
+
else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {
|
|
86
|
+
return withImportant(important, fontsizes[value] || value);
|
|
87
|
+
}
|
|
88
|
+
else if (typeof value === "number" && ["shadow", "boxShadow"].includes(prop)) {
|
|
89
|
+
return withImportant(important, `var(--shadow-${value})`);
|
|
112
90
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export default getValue
|
|
91
|
+
return withImportant(important, colors[value] || value);
|
|
92
|
+
};module.exports=getValue;//# sourceMappingURL=getValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getValue.js","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\n\nconst getColor = (color: string) => {\n return {\n [`${color}`]: `var(--color-${color}-primary)`,\n [`${color}.primary`]: `var(--color-${color}-primary)`,\n [`${color}.secondary`]: `var(--color-${color}-secondary)`,\n [`${color}.text`]: `var(--color-${color}-text)`,\n [`${color}.alpha`]: `var(--color-${color}-alpha)`\n }\n}\n\nconst withImportant = (important: any, value: any) => important ? value + important : value\nconst colors: any = {\n \"text\": `var(--color-text-primary)`,\n \"text.primary\": `var(--color-text-primary)`,\n \"text.secondary\": `var(--color-text-secondary)`,\n\n \"background\": `var(--color-background-primary)`,\n \"background.primary\": `var(--color-background-primary)`,\n \"background.secondary\": `var(--color-background-secondary)`,\n \"background.alpha\": `var(--color-background-alpha)`,\n \"divider\": `var(--color-divider)`,\n\n ...getColor(\"brand\"),\n ...getColor(\"accent\"),\n ...getColor(\"info\"),\n ...getColor(\"success\"),\n ...getColor(\"warning\"),\n ...getColor(\"danger\"),\n}\n\nconst breakpoints: any = {\n \"xs\": \"var(--bp-xs)\",\n \"sm\": \"var(--bp-sm)\",\n \"md\": \"var(--bp-md)\",\n \"lg\": \"var(--bp-lg)\",\n \"xl\": \"var(--bp-xl)\"\n}\n\nlet fontsizes: any = {\n \"h1\": \"var(--fontsize-h1)\",\n \"h2\": \"var(--fontsize-h2)\",\n \"h3\": \"var(--fontsize-h3)\",\n \"h4\": \"var(--fontsize-h4)\",\n \"h5\": \"var(--fontsize-h5)\",\n \"h6\": \"var(--fontsize-h6)\",\n \"text\": \"var(--fontsize-text)\",\n \"button\": \"var(--fontsize-button)\",\n \"small\": \"var(--fontsize-small)\"\n}\n\nlet lineHeights: any = {\n \"h1\": \"var(--lineheight-h1)\",\n \"h2\": \"var(--lineheight-h2)\",\n \"h3\": \"var(--lineheight-h3)\",\n \"h4\": \"var(--lineheight-h4)\",\n \"h5\": \"var(--lineheight-h5)\",\n \"h6\": \"var(--lineheight-h6)\",\n \"text\": \"var(--lineheight-text)\",\n \"button\": \"var(--lineheight-button)\",\n \"small\": \"var(--lineheight-small)\"\n}\n\nlet fontWeights: any = {\n \"h1\": \"var(--fontweight-h1)\",\n \"h2\": \"var(--fontweight-h2)\",\n \"h3\": \"var(--fontweight-h3)\",\n \"h4\": \"var(--fontweight-h4)\",\n \"h5\": \"var(--fontweight-h5)\",\n \"h6\": \"var(--fontweight-h6)\",\n \"text\": \"var(--fontweight-text)\",\n \"button\": \"var(--fontweight-button)\",\n \"small\": \"var(--fontweight-small)\"\n}\n\nlet font: any = {\n \"h1\": \"var(--font-h1)\",\n \"h2\": \"var(--font-h2)\",\n \"h3\": \"var(--font-h3)\",\n \"h4\": \"var(--font-h4)\",\n \"h5\": \"var(--font-h5)\",\n \"h6\": \"var(--font-h6)\",\n \"text\": \"var(--font-text)\",\n \"button\": \"var(--font-button)\",\n \"small\": \"var(--font-small)\"\n}\n\nconst getValue = (prop: any, value: string | number, _css: CSSProps): any => {\n let important;\n\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {\n return withImportant(important, breakpoints[value] || value)\n } else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {\n return withImportant(important, \"var(--font-family)\")\n } if (prop === 'font' && typeof value === \"string\" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, font[value] || value)\n } if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, fontWeights[value] || value)\n } else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, lineHeights[value] || value)\n } else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {\n return withImportant(important, fontsizes[value] || value)\n } else if (typeof value === \"number\" && [\"shadow\", \"boxShadow\"].includes(prop)) {\n return withImportant(important, `var(--shadow-${value})`)\n }\n\n return withImportant(important, colors[value] || value)\n}\n\nexport default getValue"],"names":[],"mappings":"aAEA,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAI;IAC/B,OAAO;AACH,QAAA,CAAC,GAAG,KAAK,CAAA,CAAE,GAAG,CAAA,YAAA,EAAe,KAAK,CAAW,SAAA,CAAA;AAC7C,QAAA,CAAC,GAAG,KAAK,CAAA,QAAA,CAAU,GAAG,CAAA,YAAA,EAAe,KAAK,CAAW,SAAA,CAAA;AACrD,QAAA,CAAC,GAAG,KAAK,CAAA,UAAA,CAAY,GAAG,CAAA,YAAA,EAAe,KAAK,CAAa,WAAA,CAAA;AACzD,QAAA,CAAC,GAAG,KAAK,CAAA,KAAA,CAAO,GAAG,CAAA,YAAA,EAAe,KAAK,CAAQ,MAAA,CAAA;AAC/C,QAAA,CAAC,GAAG,KAAK,CAAA,MAAA,CAAQ,GAAG,CAAA,YAAA,EAAe,KAAK,CAAS,OAAA;KACpD;AACL,CAAC;AAED,MAAM,aAAa,GAAG,CAAC,SAAc,EAAE,KAAU,KAAK,SAAS,GAAG,KAAK,GAAG,SAAS,GAAG,KAAK;AAC3F,MAAM,MAAM,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACR,MAAM,EAAE,CAA2B,yBAAA,CAAA,EACnC,cAAc,EAAE,CAA2B,yBAAA,CAAA,EAC3C,gBAAgB,EAAE,6BAA6B,EAE/C,YAAY,EAAE,CAAA,+BAAA,CAAiC,EAC/C,oBAAoB,EAAE,CAAA,+BAAA,CAAiC,EACvD,sBAAsB,EAAE,CAAA,iCAAA,CAAmC,EAC3D,kBAAkB,EAAE,CAAA,6BAAA,CAA+B,EACnD,SAAS,EAAE,CAAsB,oBAAA,CAAA,EAAA,EAE9B,QAAQ,CAAC,OAAO,CAAC,CACjB,EAAA,QAAQ,CAAC,QAAQ,CAAC,CAAA,EAClB,QAAQ,CAAC,MAAM,CAAC,CAAA,EAChB,QAAQ,CAAC,SAAS,CAAC,CACnB,EAAA,QAAQ,CAAC,SAAS,CAAC,CAAA,EACnB,QAAQ,CAAC,QAAQ,CAAC,CACxB;AAED,MAAM,WAAW,GAAQ;AACrB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,IAAI,EAAE;CACT;AAED,IAAI,SAAS,GAAQ;AACjB,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,IAAI,EAAE,oBAAoB;AAC1B,IAAA,MAAM,EAAE,sBAAsB;AAC9B,IAAA,QAAQ,EAAE,wBAAwB;AAClC,IAAA,OAAO,EAAE;CACZ;AAED,IAAI,WAAW,GAAQ;AACnB,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,MAAM,EAAE,wBAAwB;AAChC,IAAA,QAAQ,EAAE,0BAA0B;AACpC,IAAA,OAAO,EAAE;CACZ;AAED,IAAI,WAAW,GAAQ;AACnB,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,MAAM,EAAE,wBAAwB;AAChC,IAAA,QAAQ,EAAE,0BAA0B;AACpC,IAAA,OAAO,EAAE;CACZ;AAED,IAAI,IAAI,GAAQ;AACZ,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,MAAM,EAAE,kBAAkB;AAC1B,IAAA,QAAQ,EAAE,oBAAoB;AAC9B,IAAA,OAAO,EAAE;CACZ;AAEK,MAAA,QAAQ,GAAG,CAAC,IAAS,EAAE,KAAsB,EAAE,IAAc,KAAS;AACxE,IAAA,IAAI,SAAS;AAEb,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AAC9B,QAAA,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,EAAE;AACxC,QAAA,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AACnB;AAED,IAAA,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QAC5E,OAAO,aAAa,CAAC,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;AAC/D;AAAM,SAAA,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,KAAK,KAAK,SAAS,EAAE;AAC5E,QAAA,OAAO,aAAa,CAAC,SAAS,EAAE,oBAAoB,CAAC;AACxD;AAAC,IAAA,IAAI,IAAI,KAAK,MAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QACnI,OAAO,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;AACxD;AAAC,IAAA,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QAChK,OAAO,aAAa,CAAC,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;AAC/D;AAAM,SAAA,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QACrK,OAAO,aAAa,CAAC,SAAS,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;AAC/D;AAAM,SAAA,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC9E,OAAO,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;AAC7D;AAAM,SAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QAC5E,OAAO,aAAa,CAAC,SAAS,EAAE,gBAAgB,KAAK,CAAA,CAAA,CAAG,CAAC;AAC5D;IAED,OAAO,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;AAC3D"}
|
package/css/getValue.mjs
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
const getColor = (color) => {
|
|
2
|
+
return {
|
|
3
|
+
[`${color}`]: `var(--color-${color}-primary)`,
|
|
4
|
+
[`${color}.primary`]: `var(--color-${color}-primary)`,
|
|
5
|
+
[`${color}.secondary`]: `var(--color-${color}-secondary)`,
|
|
6
|
+
[`${color}.text`]: `var(--color-${color}-text)`,
|
|
7
|
+
[`${color}.alpha`]: `var(--color-${color}-alpha)`
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
const withImportant = (important, value) => important ? value + important : value;
|
|
11
|
+
const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ "text": `var(--color-text-primary)`, "text.primary": `var(--color-text-primary)`, "text.secondary": `var(--color-text-secondary)`, "background": `var(--color-background-primary)`, "background.primary": `var(--color-background-primary)`, "background.secondary": `var(--color-background-secondary)`, "background.alpha": `var(--color-background-alpha)`, "divider": `var(--color-divider)` }, getColor("brand")), getColor("accent")), getColor("info")), getColor("success")), getColor("warning")), getColor("danger"));
|
|
12
|
+
const breakpoints = {
|
|
13
|
+
"xs": "var(--bp-xs)",
|
|
14
|
+
"sm": "var(--bp-sm)",
|
|
15
|
+
"md": "var(--bp-md)",
|
|
16
|
+
"lg": "var(--bp-lg)",
|
|
17
|
+
"xl": "var(--bp-xl)"
|
|
18
|
+
};
|
|
19
|
+
let fontsizes = {
|
|
20
|
+
"h1": "var(--fontsize-h1)",
|
|
21
|
+
"h2": "var(--fontsize-h2)",
|
|
22
|
+
"h3": "var(--fontsize-h3)",
|
|
23
|
+
"h4": "var(--fontsize-h4)",
|
|
24
|
+
"h5": "var(--fontsize-h5)",
|
|
25
|
+
"h6": "var(--fontsize-h6)",
|
|
26
|
+
"text": "var(--fontsize-text)",
|
|
27
|
+
"button": "var(--fontsize-button)",
|
|
28
|
+
"small": "var(--fontsize-small)"
|
|
29
|
+
};
|
|
30
|
+
let lineHeights = {
|
|
31
|
+
"h1": "var(--lineheight-h1)",
|
|
32
|
+
"h2": "var(--lineheight-h2)",
|
|
33
|
+
"h3": "var(--lineheight-h3)",
|
|
34
|
+
"h4": "var(--lineheight-h4)",
|
|
35
|
+
"h5": "var(--lineheight-h5)",
|
|
36
|
+
"h6": "var(--lineheight-h6)",
|
|
37
|
+
"text": "var(--lineheight-text)",
|
|
38
|
+
"button": "var(--lineheight-button)",
|
|
39
|
+
"small": "var(--lineheight-small)"
|
|
40
|
+
};
|
|
41
|
+
let fontWeights = {
|
|
42
|
+
"h1": "var(--fontweight-h1)",
|
|
43
|
+
"h2": "var(--fontweight-h2)",
|
|
44
|
+
"h3": "var(--fontweight-h3)",
|
|
45
|
+
"h4": "var(--fontweight-h4)",
|
|
46
|
+
"h5": "var(--fontweight-h5)",
|
|
47
|
+
"h6": "var(--fontweight-h6)",
|
|
48
|
+
"text": "var(--fontweight-text)",
|
|
49
|
+
"button": "var(--fontweight-button)",
|
|
50
|
+
"small": "var(--fontweight-small)"
|
|
51
|
+
};
|
|
52
|
+
let font = {
|
|
53
|
+
"h1": "var(--font-h1)",
|
|
54
|
+
"h2": "var(--font-h2)",
|
|
55
|
+
"h3": "var(--font-h3)",
|
|
56
|
+
"h4": "var(--font-h4)",
|
|
57
|
+
"h5": "var(--font-h5)",
|
|
58
|
+
"h6": "var(--font-h6)",
|
|
59
|
+
"text": "var(--font-text)",
|
|
60
|
+
"button": "var(--font-button)",
|
|
61
|
+
"small": "var(--font-small)"
|
|
62
|
+
};
|
|
63
|
+
const getValue = (prop, value, _css) => {
|
|
64
|
+
let important;
|
|
65
|
+
if (typeof value === 'string') {
|
|
66
|
+
const split = value.split("!");
|
|
67
|
+
important = split[1] ? "!important" : "";
|
|
68
|
+
value = split[0];
|
|
69
|
+
}
|
|
70
|
+
if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {
|
|
71
|
+
return withImportant(important, breakpoints[value] || value);
|
|
72
|
+
}
|
|
73
|
+
else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {
|
|
74
|
+
return withImportant(important, "var(--font-family)");
|
|
75
|
+
}
|
|
76
|
+
if (prop === 'font' && typeof value === "string" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
77
|
+
return withImportant(important, font[value] || value);
|
|
78
|
+
}
|
|
79
|
+
if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
80
|
+
return withImportant(important, fontWeights[value] || value);
|
|
81
|
+
}
|
|
82
|
+
else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {
|
|
83
|
+
return withImportant(important, lineHeights[value] || value);
|
|
84
|
+
}
|
|
85
|
+
else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {
|
|
86
|
+
return withImportant(important, fontsizes[value] || value);
|
|
87
|
+
}
|
|
88
|
+
else if (typeof value === "number" && ["shadow", "boxShadow"].includes(prop)) {
|
|
89
|
+
return withImportant(important, `var(--shadow-${value})`);
|
|
90
|
+
}
|
|
91
|
+
return withImportant(important, colors[value] || value);
|
|
92
|
+
};export{getValue as default};//# sourceMappingURL=getValue.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getValue.mjs","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\n\nconst getColor = (color: string) => {\n return {\n [`${color}`]: `var(--color-${color}-primary)`,\n [`${color}.primary`]: `var(--color-${color}-primary)`,\n [`${color}.secondary`]: `var(--color-${color}-secondary)`,\n [`${color}.text`]: `var(--color-${color}-text)`,\n [`${color}.alpha`]: `var(--color-${color}-alpha)`\n }\n}\n\nconst withImportant = (important: any, value: any) => important ? value + important : value\nconst colors: any = {\n \"text\": `var(--color-text-primary)`,\n \"text.primary\": `var(--color-text-primary)`,\n \"text.secondary\": `var(--color-text-secondary)`,\n\n \"background\": `var(--color-background-primary)`,\n \"background.primary\": `var(--color-background-primary)`,\n \"background.secondary\": `var(--color-background-secondary)`,\n \"background.alpha\": `var(--color-background-alpha)`,\n \"divider\": `var(--color-divider)`,\n\n ...getColor(\"brand\"),\n ...getColor(\"accent\"),\n ...getColor(\"info\"),\n ...getColor(\"success\"),\n ...getColor(\"warning\"),\n ...getColor(\"danger\"),\n}\n\nconst breakpoints: any = {\n \"xs\": \"var(--bp-xs)\",\n \"sm\": \"var(--bp-sm)\",\n \"md\": \"var(--bp-md)\",\n \"lg\": \"var(--bp-lg)\",\n \"xl\": \"var(--bp-xl)\"\n}\n\nlet fontsizes: any = {\n \"h1\": \"var(--fontsize-h1)\",\n \"h2\": \"var(--fontsize-h2)\",\n \"h3\": \"var(--fontsize-h3)\",\n \"h4\": \"var(--fontsize-h4)\",\n \"h5\": \"var(--fontsize-h5)\",\n \"h6\": \"var(--fontsize-h6)\",\n \"text\": \"var(--fontsize-text)\",\n \"button\": \"var(--fontsize-button)\",\n \"small\": \"var(--fontsize-small)\"\n}\n\nlet lineHeights: any = {\n \"h1\": \"var(--lineheight-h1)\",\n \"h2\": \"var(--lineheight-h2)\",\n \"h3\": \"var(--lineheight-h3)\",\n \"h4\": \"var(--lineheight-h4)\",\n \"h5\": \"var(--lineheight-h5)\",\n \"h6\": \"var(--lineheight-h6)\",\n \"text\": \"var(--lineheight-text)\",\n \"button\": \"var(--lineheight-button)\",\n \"small\": \"var(--lineheight-small)\"\n}\n\nlet fontWeights: any = {\n \"h1\": \"var(--fontweight-h1)\",\n \"h2\": \"var(--fontweight-h2)\",\n \"h3\": \"var(--fontweight-h3)\",\n \"h4\": \"var(--fontweight-h4)\",\n \"h5\": \"var(--fontweight-h5)\",\n \"h6\": \"var(--fontweight-h6)\",\n \"text\": \"var(--fontweight-text)\",\n \"button\": \"var(--fontweight-button)\",\n \"small\": \"var(--fontweight-small)\"\n}\n\nlet font: any = {\n \"h1\": \"var(--font-h1)\",\n \"h2\": \"var(--font-h2)\",\n \"h3\": \"var(--font-h3)\",\n \"h4\": \"var(--font-h4)\",\n \"h5\": \"var(--font-h5)\",\n \"h6\": \"var(--font-h6)\",\n \"text\": \"var(--font-text)\",\n \"button\": \"var(--font-button)\",\n \"small\": \"var(--font-small)\"\n}\n\nconst getValue = (prop: any, value: string | number, _css: CSSProps): any => {\n let important;\n\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {\n return withImportant(important, breakpoints[value] || value)\n } else if (['fontFamily', 'font-family'].includes(prop) && value === 'default') {\n return withImportant(important, \"var(--font-family)\")\n } if (prop === 'font' && typeof value === \"string\" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, font[value] || value)\n } if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, fontWeights[value] || value)\n } else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, lineHeights[value] || value)\n } else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {\n return withImportant(important, fontsizes[value] || value)\n } else if (typeof value === \"number\" && [\"shadow\", \"boxShadow\"].includes(prop)) {\n return withImportant(important, `var(--shadow-${value})`)\n }\n\n return withImportant(important, colors[value] || value)\n}\n\nexport default getValue"],"names":[],"mappings":"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"}
|
package/css/index.js
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var getValue=require('./getValue.js'),getProps=require('./getProps.js'),aliases=require('./aliases.js'),oncss=require('oncss');const breakpoints = {
|
|
2
|
+
xs: 0,
|
|
3
|
+
sm: 600,
|
|
4
|
+
md: 900,
|
|
5
|
+
lg: 1200,
|
|
6
|
+
xl: 1536
|
|
7
|
+
};
|
|
8
|
+
const css = (props, options) => {
|
|
9
|
+
const cssOptions = Object.assign(Object.assign({}, options), { breakpoints,
|
|
10
|
+
aliases, getValue: (p, v, _c, dept) => {
|
|
11
|
+
if (options === null || options === void 0 ? void 0 : options.getValue) {
|
|
12
|
+
let _val = options === null || options === void 0 ? void 0 : options.getValue(p, v, _c, dept);
|
|
13
|
+
if (_val)
|
|
14
|
+
return _val;
|
|
15
|
+
}
|
|
16
|
+
return getValue(p, v);
|
|
17
|
+
}, getProps: (p, v, _c, dept) => {
|
|
18
|
+
if (options === null || options === void 0 ? void 0 : options.getProps) {
|
|
19
|
+
let _p = options === null || options === void 0 ? void 0 : options.getProps(p, v, _c, dept);
|
|
20
|
+
if (_p)
|
|
21
|
+
return _p;
|
|
22
|
+
}
|
|
23
|
+
return getProps(p, v, _c);
|
|
24
|
+
} });
|
|
25
|
+
return oncss.css(props, cssOptions);
|
|
26
|
+
};
|
|
27
|
+
const adjustColor = (hex, factor) => {
|
|
28
|
+
hex = hex.replace(/^#/, '');
|
|
29
|
+
let r = parseInt(hex.slice(0, 2), 16);
|
|
30
|
+
let g = parseInt(hex.slice(2, 4), 16);
|
|
31
|
+
let b = parseInt(hex.slice(4, 6), 16);
|
|
32
|
+
r = Math.floor(r * factor);
|
|
33
|
+
g = Math.floor(g * factor);
|
|
34
|
+
b = Math.floor(b * factor);
|
|
35
|
+
r = Math.min(255, Math.max(0, r));
|
|
36
|
+
g = Math.min(255, Math.max(0, g));
|
|
37
|
+
b = Math.min(255, Math.max(0, b));
|
|
38
|
+
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
39
|
+
};
|
|
40
|
+
const adjustTextContrast = (color) => {
|
|
41
|
+
color = color.replace(/^#/, '');
|
|
42
|
+
const r = parseInt(color.slice(0, 2), 16);
|
|
43
|
+
const g = parseInt(color.slice(2, 4), 16);
|
|
44
|
+
const b = parseInt(color.slice(4, 6), 16);
|
|
45
|
+
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
46
|
+
return luminance > 0.5 ? '#111111' : '#FFFFFF';
|
|
47
|
+
};
|
|
48
|
+
const alpha = (color, opacity = 1) => {
|
|
49
|
+
if (typeof opacity !== 'number')
|
|
50
|
+
return color;
|
|
51
|
+
let _opacity = opacity * 100;
|
|
52
|
+
if (!color.startsWith("#"))
|
|
53
|
+
throw new Error(`color must be hex`);
|
|
54
|
+
return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
|
|
55
|
+
};exports.getValue=getValue;exports.getProps=getProps;exports.adjustColor=adjustColor;exports.adjustTextContrast=adjustTextContrast;exports.alpha=alpha;exports.breakpoints=breakpoints;exports.css=css;//# sourceMappingURL=index.js.map
|
package/css/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n getValue,\n getProps\n}\n\nexport const breakpoints = {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n const cssOptions: CSSOptionProps = {\n ...options,\n breakpoints,\n aliases,\n getValue: (p: any, v: any, _c: any, dept) => {\n if (options?.getValue) {\n let _val = options?.getValue(p, v, _c, dept)\n if (_val) return _val\n }\n return getValue(p, v, _c)\n },\n getProps: (p: any, v: any, _c: any, dept) => {\n if (options?.getProps) {\n let _p = options?.getProps(p, v, _c, dept)\n if (_p) return _p\n }\n return getProps(p, v, _c)\n },\n }\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n hex = hex.replace(/^#/, '')\n\n let r = parseInt(hex.slice(0, 2), 16)\n let g = parseInt(hex.slice(2, 4), 16)\n let b = parseInt(hex.slice(4, 6), 16)\n\n r = Math.floor(r * factor)\n g = Math.floor(g * factor)\n b = Math.floor(b * factor)\n\n r = Math.min(255, Math.max(0, r))\n g = Math.min(255, Math.max(0, g))\n b = Math.min(255, Math.max(0, b))\n\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n color = color.replace(/^#/, '')\n const r = parseInt(color.slice(0, 2), 16);\n const g = parseInt(color.slice(2, 4), 16);\n const b = parseInt(color.slice(4, 6), 16);\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n if (typeof opacity !== 'number') return color\n let _opacity = opacity * 100\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":"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"}
|
package/css/index.mjs
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import getValue from'./getValue.mjs';import getProps from'./getProps.mjs';import aliases from'./aliases.mjs';import {css as css$1}from'oncss';const breakpoints = {
|
|
2
|
+
xs: 0,
|
|
3
|
+
sm: 600,
|
|
4
|
+
md: 900,
|
|
5
|
+
lg: 1200,
|
|
6
|
+
xl: 1536
|
|
7
|
+
};
|
|
8
|
+
const css = (props, options) => {
|
|
9
|
+
const cssOptions = Object.assign(Object.assign({}, options), { breakpoints,
|
|
10
|
+
aliases, getValue: (p, v, _c, dept) => {
|
|
11
|
+
if (options === null || options === void 0 ? void 0 : options.getValue) {
|
|
12
|
+
let _val = options === null || options === void 0 ? void 0 : options.getValue(p, v, _c, dept);
|
|
13
|
+
if (_val)
|
|
14
|
+
return _val;
|
|
15
|
+
}
|
|
16
|
+
return getValue(p, v);
|
|
17
|
+
}, getProps: (p, v, _c, dept) => {
|
|
18
|
+
if (options === null || options === void 0 ? void 0 : options.getProps) {
|
|
19
|
+
let _p = options === null || options === void 0 ? void 0 : options.getProps(p, v, _c, dept);
|
|
20
|
+
if (_p)
|
|
21
|
+
return _p;
|
|
22
|
+
}
|
|
23
|
+
return getProps(p, v, _c);
|
|
24
|
+
} });
|
|
25
|
+
return css$1(props, cssOptions);
|
|
26
|
+
};
|
|
27
|
+
const adjustColor = (hex, factor) => {
|
|
28
|
+
hex = hex.replace(/^#/, '');
|
|
29
|
+
let r = parseInt(hex.slice(0, 2), 16);
|
|
30
|
+
let g = parseInt(hex.slice(2, 4), 16);
|
|
31
|
+
let b = parseInt(hex.slice(4, 6), 16);
|
|
32
|
+
r = Math.floor(r * factor);
|
|
33
|
+
g = Math.floor(g * factor);
|
|
34
|
+
b = Math.floor(b * factor);
|
|
35
|
+
r = Math.min(255, Math.max(0, r));
|
|
36
|
+
g = Math.min(255, Math.max(0, g));
|
|
37
|
+
b = Math.min(255, Math.max(0, b));
|
|
38
|
+
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
39
|
+
};
|
|
40
|
+
const adjustTextContrast = (color) => {
|
|
41
|
+
color = color.replace(/^#/, '');
|
|
42
|
+
const r = parseInt(color.slice(0, 2), 16);
|
|
43
|
+
const g = parseInt(color.slice(2, 4), 16);
|
|
44
|
+
const b = parseInt(color.slice(4, 6), 16);
|
|
45
|
+
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
46
|
+
return luminance > 0.5 ? '#111111' : '#FFFFFF';
|
|
47
|
+
};
|
|
48
|
+
const alpha = (color, opacity = 1) => {
|
|
49
|
+
if (typeof opacity !== 'number')
|
|
50
|
+
return color;
|
|
51
|
+
let _opacity = opacity * 100;
|
|
52
|
+
if (!color.startsWith("#"))
|
|
53
|
+
throw new Error(`color must be hex`);
|
|
54
|
+
return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
|
|
55
|
+
};export{adjustColor,adjustTextContrast,alpha,breakpoints,css,getProps,getValue};//# sourceMappingURL=index.mjs.map
|