@xanui/core 1.3.8 → 1.3.9
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/AppRoot/index.cjs +5 -4
- package/AppRoot/index.cjs.map +1 -1
- package/AppRoot/index.d.ts +2 -1
- package/AppRoot/index.js +5 -4
- package/AppRoot/index.js.map +1 -1
- package/Iframe/index.cjs +1 -0
- package/Iframe/index.cjs.map +1 -1
- package/Iframe/index.js +1 -0
- package/Iframe/index.js.map +1 -1
- package/Tag/types.d.ts +1 -1
- package/Tag/useTagProps.cjs +5 -1
- package/Tag/useTagProps.cjs.map +1 -1
- package/Tag/useTagProps.js +5 -1
- package/Tag/useTagProps.js.map +1 -1
- package/Transition/index.cjs +1 -1
- package/Transition/index.cjs.map +1 -1
- package/Transition/index.d.ts +7 -2
- package/Transition/index.js +1 -1
- package/Transition/index.js.map +1 -1
- package/css/getProps.cjs +9 -6
- package/css/getProps.cjs.map +1 -1
- package/css/getProps.js +9 -6
- package/css/getProps.js.map +1 -1
- package/css/getValue.cjs +11 -10
- package/css/getValue.cjs.map +1 -1
- package/css/getValue.js +11 -10
- package/css/getValue.js.map +1 -1
- package/css/index.cjs +0 -32
- package/css/index.cjs.map +1 -1
- package/css/index.d.ts +1 -4
- package/css/index.js +1 -30
- package/css/index.js.map +1 -1
- package/hooks/useColorTemplate.cjs +26 -29
- package/hooks/useColorTemplate.cjs.map +1 -1
- package/hooks/useColorTemplate.d.ts +8 -6
- package/hooks/useColorTemplate.js +26 -29
- package/hooks/useColorTemplate.js.map +1 -1
- package/hooks/useInterface.cjs +1 -0
- package/hooks/useInterface.cjs.map +1 -1
- package/hooks/useInterface.d.ts +1 -3
- package/hooks/useInterface.js +1 -0
- package/hooks/useInterface.js.map +1 -1
- package/index.cjs +0 -3
- package/index.cjs.map +1 -1
- package/index.d.ts +3 -3
- package/index.js +1 -1
- package/package.json +1 -1
- package/readme.md +2 -2
- package/theme/ThemeCssVars.cjs +36 -147
- package/theme/ThemeCssVars.cjs.map +1 -1
- package/theme/ThemeCssVars.js +36 -147
- package/theme/ThemeCssVars.js.map +1 -1
- package/theme/ThemeDefaultOptions.cjs +20 -86
- package/theme/ThemeDefaultOptions.cjs.map +1 -1
- package/theme/ThemeDefaultOptions.js +20 -86
- package/theme/ThemeDefaultOptions.js.map +1 -1
- package/theme/ThemeProvider.cjs +2 -2
- package/theme/ThemeProvider.cjs.map +1 -1
- package/theme/ThemeProvider.js +2 -2
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/core.cjs +14 -9
- package/theme/core.cjs.map +1 -1
- package/theme/core.js +15 -10
- package/theme/core.js.map +1 -1
- package/theme/index.cjs +3 -0
- package/theme/index.cjs.map +1 -1
- package/theme/index.js +1 -0
- package/theme/index.js.map +1 -1
- package/theme/oklch.cjs +249 -0
- package/theme/oklch.cjs.map +1 -0
- package/theme/oklch.js +246 -0
- package/theme/oklch.js.map +1 -0
- package/theme/types.d.ts +26 -72
package/css/getValue.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getValue.js","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\n\nconst getColor = (color: string
|
|
1
|
+
{"version":3,"file":"getValue.js","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\n\nconst getColor = (color: string) => {\n const i = {\n [`${color}`]: `var(--color-${color}-main)`,\n [`${color}.main`]: `var(--color-${color}-main)`,\n [`${color}.light`]: `var(--color-${color}-light)`,\n [`${color}.dark`]: `var(--color-${color}-dark)`,\n [`${color}.contrast`]: `var(--color-${color}-contrast)`,\n [`${color}.muted`]: `var(--color-${color}-muted)`,\n [`${color}.disabled`]: `var(--color-${color}-disabled)`,\n [`${color}.divider`]: `var(--color-${color}-divider)`,\n [`${color}.ghost`]: `var(--color-${color}-ghost)`,\n }\n\n return i\n}\n\nconst withImportant = (important: any, value: any) => important ? value + important : value\nconst colors: any = {\n ...getColor(\"surface\"),\n ...getColor(\"primary\"),\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 \"big\": \"var(--fontsize-big)\",\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 \"big\": \"var(--lineheight-big)\",\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 \"big\": \"var(--fontweight-big)\",\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 \"big\": \"var(--font-big)\",\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 (prop === 'font' && typeof value === \"string\" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\n return withImportant(important, font[value] || value)\n } else 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;AAC/B,IAAA,MAAM,CAAC,GAAG;AACN,QAAA,CAAC,GAAG,KAAK,CAAA,CAAE,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,MAAA,CAAQ;AAC1C,QAAA,CAAC,GAAG,KAAK,CAAA,KAAA,CAAO,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,MAAA,CAAQ;AAC/C,QAAA,CAAC,GAAG,KAAK,CAAA,MAAA,CAAQ,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,OAAA,CAAS;AACjD,QAAA,CAAC,GAAG,KAAK,CAAA,KAAA,CAAO,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,MAAA,CAAQ;AAC/C,QAAA,CAAC,GAAG,KAAK,CAAA,SAAA,CAAW,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,UAAA,CAAY;AACvD,QAAA,CAAC,GAAG,KAAK,CAAA,MAAA,CAAQ,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,OAAA,CAAS;AACjD,QAAA,CAAC,GAAG,KAAK,CAAA,SAAA,CAAW,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,UAAA,CAAY;AACvD,QAAA,CAAC,GAAG,KAAK,CAAA,QAAA,CAAU,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,SAAA,CAAW;AACrD,QAAA,CAAC,GAAG,KAAK,CAAA,MAAA,CAAQ,GAAG,CAAA,YAAA,EAAe,KAAK,CAAA,OAAA,CAAS;KACpD;AAED,IAAA,OAAO,CAAC;AACZ,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,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,QAAQ,CAAC,SAAS,CAAC,CAAA,EACnB,QAAQ,CAAC,SAAS,CAAC,CAAA,EACnB,QAAQ,CAAC,QAAQ,CAAC,CAAA,EAClB,QAAQ,CAAC,MAAM,CAAC,CAAA,EAChB,QAAQ,CAAC,SAAS,CAAC,CAAA,EACnB,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,KAAK,EAAE,qBAAqB;AAC5B,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,KAAK,EAAE,uBAAuB;AAC9B,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,KAAK,EAAE,uBAAuB;AAC9B,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,KAAK,EAAE,iBAAiB;AACxB,IAAA,MAAM,EAAE,kBAAkB;AAC1B,IAAA,QAAQ,EAAE,oBAAoB;AAC9B,IAAA,OAAO,EAAE;CACZ;AAED,MAAM,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;IACpB;AAEA,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;IAChE;AAAO,SAAA,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;QACxI,OAAO,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;IACzD;AAAO,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;IAChE;AAAO,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;IAChE;AAAO,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;IAC9D;AAAO,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;IAC7D;IAEA,OAAO,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;AAC3D;;;;"}
|
package/css/index.cjs
CHANGED
|
@@ -31,41 +31,9 @@ const css = (props, options) => {
|
|
|
31
31
|
} });
|
|
32
32
|
return oncss.css(props, cssOptions);
|
|
33
33
|
};
|
|
34
|
-
const adjustColor = (hex, factor) => {
|
|
35
|
-
hex = hex.replace(/^#/, '');
|
|
36
|
-
let r = parseInt(hex.slice(0, 2), 16);
|
|
37
|
-
let g = parseInt(hex.slice(2, 4), 16);
|
|
38
|
-
let b = parseInt(hex.slice(4, 6), 16);
|
|
39
|
-
r = Math.floor(r * factor);
|
|
40
|
-
g = Math.floor(g * factor);
|
|
41
|
-
b = Math.floor(b * factor);
|
|
42
|
-
r = Math.min(255, Math.max(0, r));
|
|
43
|
-
g = Math.min(255, Math.max(0, g));
|
|
44
|
-
b = Math.min(255, Math.max(0, b));
|
|
45
|
-
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
46
|
-
};
|
|
47
|
-
const adjustTextContrast = (color) => {
|
|
48
|
-
color = color.replace(/^#/, '');
|
|
49
|
-
const r = parseInt(color.slice(0, 2), 16);
|
|
50
|
-
const g = parseInt(color.slice(2, 4), 16);
|
|
51
|
-
const b = parseInt(color.slice(4, 6), 16);
|
|
52
|
-
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
53
|
-
return luminance > 0.5 ? '#111111' : '#FFFFFF';
|
|
54
|
-
};
|
|
55
|
-
const alpha = (color, opacity = 1) => {
|
|
56
|
-
if (typeof opacity !== 'number')
|
|
57
|
-
return color;
|
|
58
|
-
let _opacity = opacity * 100;
|
|
59
|
-
if (!color.startsWith("#"))
|
|
60
|
-
throw new Error(`color must be hex`);
|
|
61
|
-
return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
|
|
62
|
-
};
|
|
63
34
|
|
|
64
35
|
exports.getValue = getValue;
|
|
65
36
|
exports.getProps = getProps;
|
|
66
|
-
exports.adjustColor = adjustColor;
|
|
67
|
-
exports.adjustTextContrast = adjustTextContrast;
|
|
68
|
-
exports.alpha = alpha;
|
|
69
37
|
exports.breakpoints = breakpoints;
|
|
70
38
|
exports.css = css;
|
|
71
39
|
//# sourceMappingURL=index.cjs.map
|
package/css/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","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: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\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\
|
|
1
|
+
{"version":3,"file":"index.cjs","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: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\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\n"],"names":["_css"],"mappings":";;;;;;;AAWO,MAAM,WAAW,GAAG;AACvB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;;MAGC,GAAG,GAAG,CAAC,KAAe,EAAE,OAAwB,KAAI;AAC7D,IAAA,MAAM,UAAU,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,OAAO,CAAA,EAAA,EACV,WAAW;AACX,QAAA,OAAO,EACP,QAAQ,EAAE,CAAC,CAAM,EAAE,CAAM,EAAE,EAAO,EAAE,IAAI,KAAI;YACxC,IAAI,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,EAAE;AACnB,gBAAA,IAAI,IAAI,GAAG,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC;AAC5C,gBAAA,IAAI,IAAI;AAAE,oBAAA,OAAO,IAAI;YACzB;YACA,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAK,CAAC;AAC7B,QAAA,CAAC,EACD,QAAQ,EAAE,CAAC,CAAM,EAAE,CAAM,EAAE,EAAO,EAAE,IAAI,KAAI;YACxC,IAAI,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,EAAE;AACnB,gBAAA,IAAI,EAAE,GAAG,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC;AAC1C,gBAAA,IAAI,EAAE;AAAE,oBAAA,OAAO,EAAE;YACrB;YACA,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;AAC7B,QAAA,CAAC,GACJ;AACD,IAAA,OAAOA,SAAI,CAA0B,KAAK,EAAE,UAAU,CAAC;AAC3D;;;;;;;"}
|
package/css/index.d.ts
CHANGED
|
@@ -9,8 +9,5 @@ declare const breakpoints: {
|
|
|
9
9
|
xl: number;
|
|
10
10
|
};
|
|
11
11
|
declare const css: (props: CSSProps, options?: CSSOptionProps) => oncss.CSSFactoryType;
|
|
12
|
-
declare const adjustColor: (hex: string, factor: number) => string;
|
|
13
|
-
declare const adjustTextContrast: (color: string) => "#111111" | "#FFFFFF";
|
|
14
|
-
declare const alpha: (color: string, opacity?: number) => string;
|
|
15
12
|
|
|
16
|
-
export {
|
|
13
|
+
export { breakpoints, css };
|
package/css/index.js
CHANGED
|
@@ -29,35 +29,6 @@ const css = (props, options) => {
|
|
|
29
29
|
} });
|
|
30
30
|
return css$1(props, cssOptions);
|
|
31
31
|
};
|
|
32
|
-
const adjustColor = (hex, factor) => {
|
|
33
|
-
hex = hex.replace(/^#/, '');
|
|
34
|
-
let r = parseInt(hex.slice(0, 2), 16);
|
|
35
|
-
let g = parseInt(hex.slice(2, 4), 16);
|
|
36
|
-
let b = parseInt(hex.slice(4, 6), 16);
|
|
37
|
-
r = Math.floor(r * factor);
|
|
38
|
-
g = Math.floor(g * factor);
|
|
39
|
-
b = Math.floor(b * factor);
|
|
40
|
-
r = Math.min(255, Math.max(0, r));
|
|
41
|
-
g = Math.min(255, Math.max(0, g));
|
|
42
|
-
b = Math.min(255, Math.max(0, b));
|
|
43
|
-
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
|
44
|
-
};
|
|
45
|
-
const adjustTextContrast = (color) => {
|
|
46
|
-
color = color.replace(/^#/, '');
|
|
47
|
-
const r = parseInt(color.slice(0, 2), 16);
|
|
48
|
-
const g = parseInt(color.slice(2, 4), 16);
|
|
49
|
-
const b = parseInt(color.slice(4, 6), 16);
|
|
50
|
-
const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
|
|
51
|
-
return luminance > 0.5 ? '#111111' : '#FFFFFF';
|
|
52
|
-
};
|
|
53
|
-
const alpha = (color, opacity = 1) => {
|
|
54
|
-
if (typeof opacity !== 'number')
|
|
55
|
-
return color;
|
|
56
|
-
let _opacity = opacity * 100;
|
|
57
|
-
if (!color.startsWith("#"))
|
|
58
|
-
throw new Error(`color must be hex`);
|
|
59
|
-
return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
|
|
60
|
-
};
|
|
61
32
|
|
|
62
|
-
export {
|
|
33
|
+
export { breakpoints, css, getProps, getValue };
|
|
63
34
|
//# sourceMappingURL=index.js.map
|
package/css/index.js.map
CHANGED
|
@@ -1 +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: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\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\
|
|
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: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\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\n"],"names":["_css"],"mappings":";;;;;AAWO,MAAM,WAAW,GAAG;AACvB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;;MAGC,GAAG,GAAG,CAAC,KAAe,EAAE,OAAwB,KAAI;AAC7D,IAAA,MAAM,UAAU,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,OAAO,CAAA,EAAA,EACV,WAAW;AACX,QAAA,OAAO,EACP,QAAQ,EAAE,CAAC,CAAM,EAAE,CAAM,EAAE,EAAO,EAAE,IAAI,KAAI;YACxC,IAAI,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,EAAE;AACnB,gBAAA,IAAI,IAAI,GAAG,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC;AAC5C,gBAAA,IAAI,IAAI;AAAE,oBAAA,OAAO,IAAI;YACzB;YACA,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAK,CAAC;AAC7B,QAAA,CAAC,EACD,QAAQ,EAAE,CAAC,CAAM,EAAE,CAAM,EAAE,EAAO,EAAE,IAAI,KAAI;YACxC,IAAI,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,EAAE;AACnB,gBAAA,IAAI,EAAE,GAAG,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC;AAC1C,gBAAA,IAAI,EAAE;AAAE,oBAAA,OAAO,EAAE;YACrB;YACA,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;AAC7B,QAAA,CAAC,GACJ;AACD,IAAA,OAAOA,KAAI,CAA0B,KAAK,EAAE,UAAU,CAAC;AAC3D;;;;"}
|
|
@@ -2,69 +2,66 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
const useColorTemplate = (color, type) => {
|
|
5
|
-
const is_def = color === "
|
|
6
|
-
if (is_def) {
|
|
7
|
-
color = "divider";
|
|
8
|
-
}
|
|
5
|
+
const is_def = color === "surface";
|
|
9
6
|
if (type === "outline") {
|
|
10
7
|
return {
|
|
11
|
-
|
|
8
|
+
main: {
|
|
12
9
|
bgcolor: `transparent`,
|
|
13
|
-
color: is_def ? `
|
|
10
|
+
color: is_def ? `surface.contrast` : `${color}.main`,
|
|
14
11
|
border: "1px solid",
|
|
15
|
-
borderColor: is_def ? `
|
|
12
|
+
borderColor: is_def ? `surface.muted` : `${color}.main`,
|
|
16
13
|
},
|
|
17
|
-
|
|
14
|
+
hover: {
|
|
18
15
|
bgcolor: `transparent`,
|
|
19
|
-
color: is_def ? `
|
|
16
|
+
color: is_def ? `surface.contrast` : `${color}.light`,
|
|
20
17
|
border: "1px solid",
|
|
21
|
-
borderColor: is_def ? `
|
|
18
|
+
borderColor: is_def ? `surface.muted` : `${color}.light`,
|
|
22
19
|
}
|
|
23
20
|
};
|
|
24
21
|
}
|
|
25
22
|
else if (type === "fill") {
|
|
26
23
|
return {
|
|
27
|
-
|
|
28
|
-
bgcolor: color
|
|
29
|
-
color: is_def ? `
|
|
24
|
+
main: {
|
|
25
|
+
bgcolor: is_def ? `surface.light` : `${color}`,
|
|
26
|
+
color: is_def ? `surface.contrast` : `${color}.contrast`,
|
|
30
27
|
border: "1px solid",
|
|
31
|
-
borderColor: is_def ? `divider
|
|
28
|
+
borderColor: is_def ? `surface.divider` : `${color}.light`,
|
|
32
29
|
},
|
|
33
|
-
|
|
34
|
-
bgcolor: `${color}.
|
|
35
|
-
color: is_def ? `
|
|
30
|
+
hover: {
|
|
31
|
+
bgcolor: is_def ? `surface.dark` : `${color}.light`,
|
|
32
|
+
color: is_def ? `surface.contrast` : `${color}.contrast`,
|
|
36
33
|
border: "1px solid",
|
|
37
|
-
borderColor: is_def ? `divider
|
|
34
|
+
borderColor: is_def ? `surface.divider` : `${color}.light`,
|
|
38
35
|
}
|
|
39
36
|
};
|
|
40
37
|
}
|
|
41
38
|
else if (type === "text") {
|
|
42
39
|
return {
|
|
43
|
-
|
|
40
|
+
main: {
|
|
44
41
|
bgcolor: "transparent",
|
|
45
|
-
color: is_def ? `
|
|
42
|
+
color: is_def ? `surface.contrast` : `${color}.main`,
|
|
46
43
|
border: 0,
|
|
47
44
|
borderColor: `transparent`,
|
|
48
45
|
},
|
|
49
|
-
|
|
46
|
+
hover: {
|
|
50
47
|
bgcolor: "transparent",
|
|
51
|
-
color: is_def ? `
|
|
48
|
+
color: is_def ? `surface.contrast` : `${color}.light`,
|
|
52
49
|
border: 0,
|
|
53
50
|
borderColor: `transparent`,
|
|
54
51
|
}
|
|
55
52
|
};
|
|
56
53
|
}
|
|
57
|
-
else if (type === "
|
|
54
|
+
else if (type === "ghost") {
|
|
58
55
|
return {
|
|
59
|
-
|
|
60
|
-
bgcolor: `${color}.
|
|
61
|
-
color: is_def ? `
|
|
56
|
+
main: {
|
|
57
|
+
bgcolor: `${color}.ghost`,
|
|
58
|
+
color: is_def ? `surface.contrast` : color,
|
|
62
59
|
border: 0,
|
|
63
60
|
borderColor: `transparent`,
|
|
64
61
|
},
|
|
65
|
-
|
|
66
|
-
bgcolor: `${color}.
|
|
67
|
-
color: is_def ? `
|
|
62
|
+
hover: {
|
|
63
|
+
bgcolor: `${color}.ghost`,
|
|
64
|
+
color: is_def ? `surface.contrast` : `${color}.light`,
|
|
68
65
|
border: 0,
|
|
69
66
|
borderColor: `transparent`,
|
|
70
67
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.cjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"useColorTemplate.cjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\n\nimport { ThemeColorKeys } from \"../theme/types\";\n\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"ghost\"\nexport type UseColorTemplateColor = ThemeColorKeys\n\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\n const is_def = color === \"surface\";\n\n if (type === \"outline\") {\n return {\n main: {\n bgcolor: `transparent`,\n color: is_def ? `surface.contrast` : `${color}.main`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.muted` : `${color}.main`,\n },\n hover: {\n bgcolor: `transparent`,\n color: is_def ? `surface.contrast` : `${color}.light`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.muted` : `${color}.light`,\n }\n }\n } else if (type === \"fill\") {\n return {\n main: {\n bgcolor: is_def ? `surface.light` : `${color}`,\n color: is_def ? `surface.contrast` : `${color}.contrast`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.divider` : `${color}.light`,\n },\n hover: {\n bgcolor: is_def ? `surface.dark` : `${color}.light`,\n color: is_def ? `surface.contrast` : `${color}.contrast`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.divider` : `${color}.light`,\n }\n }\n } else if (type === \"text\") {\n return {\n main: {\n bgcolor: \"transparent\",\n color: is_def ? `surface.contrast` : `${color}.main`,\n border: 0,\n borderColor: `transparent`,\n },\n hover: {\n bgcolor: \"transparent\",\n color: is_def ? `surface.contrast` : `${color}.light`,\n border: 0,\n borderColor: `transparent`,\n }\n }\n } else if (type === \"ghost\") {\n return {\n main: {\n bgcolor: `${color}.ghost`,\n color: is_def ? `surface.contrast` : color,\n border: 0,\n borderColor: `transparent`,\n },\n hover: {\n bgcolor: `${color}.ghost`,\n color: is_def ? `surface.contrast` : `${color}.light`,\n border: 0,\n borderColor: `transparent`,\n }\n }\n }\n\n throw new Error(`useColorTemplate: Unknown type ${type}`);\n}\n\nexport default useColorTemplate"],"names":[],"mappings":";;;AAOA;AACI;AAEA;;AAEQ;AACI;;AAEA;;AAEH;AACD;AACI;;AAEA;;AAEH;;;AAEF;;AAEC;;;AAGI;;AAEH;AACD;;;AAGI;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;AACA;AACH;AACD;AACI;;AAEA;AACA;AACH;;;AAEF;;AAEC;;;AAGI;AACA;AACH;AACD;;;AAGI;AACA;AACH;;;AAIT;AACJ;;"}
|
|
@@ -1,26 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { ThemeColorKeys } from '../theme/types.js';
|
|
2
|
+
|
|
3
|
+
type UseColorTemplateType = "fill" | "outline" | "text" | "ghost";
|
|
4
|
+
type UseColorTemplateColor = ThemeColorKeys;
|
|
3
5
|
declare const useColorTemplate: (color: UseColorTemplateColor, type: UseColorTemplateType) => {
|
|
4
|
-
|
|
6
|
+
main: {
|
|
5
7
|
bgcolor: string;
|
|
6
8
|
color: string;
|
|
7
9
|
border: string;
|
|
8
10
|
borderColor: string;
|
|
9
11
|
};
|
|
10
|
-
|
|
12
|
+
hover: {
|
|
11
13
|
bgcolor: string;
|
|
12
14
|
color: string;
|
|
13
15
|
border: string;
|
|
14
16
|
borderColor: string;
|
|
15
17
|
};
|
|
16
18
|
} | {
|
|
17
|
-
|
|
19
|
+
main: {
|
|
18
20
|
bgcolor: string;
|
|
19
21
|
color: string;
|
|
20
22
|
border: number;
|
|
21
23
|
borderColor: string;
|
|
22
24
|
};
|
|
23
|
-
|
|
25
|
+
hover: {
|
|
24
26
|
bgcolor: string;
|
|
25
27
|
color: string;
|
|
26
28
|
border: number;
|
|
@@ -1,68 +1,65 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
const useColorTemplate = (color, type) => {
|
|
3
|
-
const is_def = color === "
|
|
4
|
-
if (is_def) {
|
|
5
|
-
color = "divider";
|
|
6
|
-
}
|
|
3
|
+
const is_def = color === "surface";
|
|
7
4
|
if (type === "outline") {
|
|
8
5
|
return {
|
|
9
|
-
|
|
6
|
+
main: {
|
|
10
7
|
bgcolor: `transparent`,
|
|
11
|
-
color: is_def ? `
|
|
8
|
+
color: is_def ? `surface.contrast` : `${color}.main`,
|
|
12
9
|
border: "1px solid",
|
|
13
|
-
borderColor: is_def ? `
|
|
10
|
+
borderColor: is_def ? `surface.muted` : `${color}.main`,
|
|
14
11
|
},
|
|
15
|
-
|
|
12
|
+
hover: {
|
|
16
13
|
bgcolor: `transparent`,
|
|
17
|
-
color: is_def ? `
|
|
14
|
+
color: is_def ? `surface.contrast` : `${color}.light`,
|
|
18
15
|
border: "1px solid",
|
|
19
|
-
borderColor: is_def ? `
|
|
16
|
+
borderColor: is_def ? `surface.muted` : `${color}.light`,
|
|
20
17
|
}
|
|
21
18
|
};
|
|
22
19
|
}
|
|
23
20
|
else if (type === "fill") {
|
|
24
21
|
return {
|
|
25
|
-
|
|
26
|
-
bgcolor: color
|
|
27
|
-
color: is_def ? `
|
|
22
|
+
main: {
|
|
23
|
+
bgcolor: is_def ? `surface.light` : `${color}`,
|
|
24
|
+
color: is_def ? `surface.contrast` : `${color}.contrast`,
|
|
28
25
|
border: "1px solid",
|
|
29
|
-
borderColor: is_def ? `divider
|
|
26
|
+
borderColor: is_def ? `surface.divider` : `${color}.light`,
|
|
30
27
|
},
|
|
31
|
-
|
|
32
|
-
bgcolor: `${color}.
|
|
33
|
-
color: is_def ? `
|
|
28
|
+
hover: {
|
|
29
|
+
bgcolor: is_def ? `surface.dark` : `${color}.light`,
|
|
30
|
+
color: is_def ? `surface.contrast` : `${color}.contrast`,
|
|
34
31
|
border: "1px solid",
|
|
35
|
-
borderColor: is_def ? `divider
|
|
32
|
+
borderColor: is_def ? `surface.divider` : `${color}.light`,
|
|
36
33
|
}
|
|
37
34
|
};
|
|
38
35
|
}
|
|
39
36
|
else if (type === "text") {
|
|
40
37
|
return {
|
|
41
|
-
|
|
38
|
+
main: {
|
|
42
39
|
bgcolor: "transparent",
|
|
43
|
-
color: is_def ? `
|
|
40
|
+
color: is_def ? `surface.contrast` : `${color}.main`,
|
|
44
41
|
border: 0,
|
|
45
42
|
borderColor: `transparent`,
|
|
46
43
|
},
|
|
47
|
-
|
|
44
|
+
hover: {
|
|
48
45
|
bgcolor: "transparent",
|
|
49
|
-
color: is_def ? `
|
|
46
|
+
color: is_def ? `surface.contrast` : `${color}.light`,
|
|
50
47
|
border: 0,
|
|
51
48
|
borderColor: `transparent`,
|
|
52
49
|
}
|
|
53
50
|
};
|
|
54
51
|
}
|
|
55
|
-
else if (type === "
|
|
52
|
+
else if (type === "ghost") {
|
|
56
53
|
return {
|
|
57
|
-
|
|
58
|
-
bgcolor: `${color}.
|
|
59
|
-
color: is_def ? `
|
|
54
|
+
main: {
|
|
55
|
+
bgcolor: `${color}.ghost`,
|
|
56
|
+
color: is_def ? `surface.contrast` : color,
|
|
60
57
|
border: 0,
|
|
61
58
|
borderColor: `transparent`,
|
|
62
59
|
},
|
|
63
|
-
|
|
64
|
-
bgcolor: `${color}.
|
|
65
|
-
color: is_def ? `
|
|
60
|
+
hover: {
|
|
61
|
+
bgcolor: `${color}.ghost`,
|
|
62
|
+
color: is_def ? `surface.contrast` : `${color}.light`,
|
|
66
63
|
border: 0,
|
|
67
64
|
borderColor: `transparent`,
|
|
68
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\n\nimport { ThemeColorKeys } from \"../theme/types\";\n\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"ghost\"\nexport type UseColorTemplateColor = ThemeColorKeys\n\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\n const is_def = color === \"surface\";\n\n if (type === \"outline\") {\n return {\n main: {\n bgcolor: `transparent`,\n color: is_def ? `surface.contrast` : `${color}.main`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.muted` : `${color}.main`,\n },\n hover: {\n bgcolor: `transparent`,\n color: is_def ? `surface.contrast` : `${color}.light`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.muted` : `${color}.light`,\n }\n }\n } else if (type === \"fill\") {\n return {\n main: {\n bgcolor: is_def ? `surface.light` : `${color}`,\n color: is_def ? `surface.contrast` : `${color}.contrast`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.divider` : `${color}.light`,\n },\n hover: {\n bgcolor: is_def ? `surface.dark` : `${color}.light`,\n color: is_def ? `surface.contrast` : `${color}.contrast`,\n border: \"1px solid\",\n borderColor: is_def ? `surface.divider` : `${color}.light`,\n }\n }\n } else if (type === \"text\") {\n return {\n main: {\n bgcolor: \"transparent\",\n color: is_def ? `surface.contrast` : `${color}.main`,\n border: 0,\n borderColor: `transparent`,\n },\n hover: {\n bgcolor: \"transparent\",\n color: is_def ? `surface.contrast` : `${color}.light`,\n border: 0,\n borderColor: `transparent`,\n }\n }\n } else if (type === \"ghost\") {\n return {\n main: {\n bgcolor: `${color}.ghost`,\n color: is_def ? `surface.contrast` : color,\n border: 0,\n borderColor: `transparent`,\n },\n hover: {\n bgcolor: `${color}.ghost`,\n color: is_def ? `surface.contrast` : `${color}.light`,\n border: 0,\n borderColor: `transparent`,\n }\n }\n }\n\n throw new Error(`useColorTemplate: Unknown type ${type}`);\n}\n\nexport default useColorTemplate"],"names":[],"mappings":";AAOA;AACI;AAEA;;AAEQ;AACI;;AAEA;;AAEH;AACD;AACI;;AAEA;;AAEH;;;AAEF;;AAEC;;;AAGI;;AAEH;AACD;;;AAGI;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;AACA;AACH;AACD;AACI;;AAEA;AACA;AACH;;;AAEF;;AAEC;;;AAGI;AACA;AACH;AACD;;;AAGI;AACA;AACH;;;AAIT;AACJ;;"}
|
package/hooks/useInterface.cjs
CHANGED
|
@@ -9,6 +9,7 @@ require('../css/getValue.cjs');
|
|
|
9
9
|
require('oncss');
|
|
10
10
|
require('../Document/index.cjs');
|
|
11
11
|
require('../css/CSSCacheProvider.cjs');
|
|
12
|
+
require('../theme/ThemeDefaultOptions.cjs');
|
|
12
13
|
|
|
13
14
|
const useInterface = (name, userPorps, defaultProps) => {
|
|
14
15
|
const theme = core.useTheme();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.cjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n let _props = { ...defaultProps, ...userPorps } as P\n if (name in theme.interfaces) {\n return theme.interfaces[name](_props, theme)\n }\n return [_props, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInterface.cjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n let _props = { ...defaultProps, ...userPorps } as P\n if (name in theme.interfaces) {\n return theme.interfaces[name](_props, theme)\n }\n return [_props, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":";;;;;;;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}
|
package/hooks/useInterface.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => P | (P | ThemeOptions)[];
|
|
1
|
+
declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => any;
|
|
4
2
|
|
|
5
3
|
export { useInterface as default };
|
package/hooks/useInterface.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n let _props = { ...defaultProps, ...userPorps } as P\n if (name in theme.interfaces) {\n return theme.interfaces[name](_props, theme)\n }\n return [_props, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n let _props = { ...defaultProps, ...userPorps } as P\n if (name in theme.interfaces) {\n return theme.interfaces[name](_props, theme)\n }\n return [_props, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":";;;;;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}
|
package/index.cjs
CHANGED
|
@@ -49,9 +49,6 @@ exports.Iframe = index$1;
|
|
|
49
49
|
exports.animate = index$6.default;
|
|
50
50
|
exports.useTransition = useTransition;
|
|
51
51
|
exports.useTransitionGroup = useTransitionGroup;
|
|
52
|
-
exports.adjustColor = index$7.adjustColor;
|
|
53
|
-
exports.adjustTextContrast = index$7.adjustTextContrast;
|
|
54
|
-
exports.alpha = index$7.alpha;
|
|
55
52
|
exports.breakpoints = index$7.breakpoints;
|
|
56
53
|
exports.css = index$7.css;
|
|
57
54
|
exports.themeRootClass = index$8.themeRootClass;
|
package/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export { default as useBreakpoint } from './breakpoint/useBreakpoint.js';
|
|
|
5
5
|
export { default as useBreakpointProps, useBreakpointPropsType } from './breakpoint/useBreakpointProps.js';
|
|
6
6
|
export { default as useInterface } from './hooks/useInterface.js';
|
|
7
7
|
export { default as useMergeRefs } from './hooks/useMergeRefs.js';
|
|
8
|
-
export { default as Transition, TransitionProps, TransitionVariantTypes } from './Transition/index.js';
|
|
8
|
+
export { default as Transition, TransitionProps, TransitionVariantCallback, TransitionVariantTypes } from './Transition/index.js';
|
|
9
9
|
export { default as AppRoot, AppRootProps } from './AppRoot/index.js';
|
|
10
10
|
export { default as Portal, PortalProps } from './Portal/index.js';
|
|
11
11
|
export { Renderar } from './AppRoot/Renderar.js';
|
|
@@ -16,11 +16,11 @@ export { default as Iframe, IframeProps } from './Iframe/index.js';
|
|
|
16
16
|
export { AnimateOptions, default as animate } from './animate/index.js';
|
|
17
17
|
export { UseTransitionProps, UseTransitionStatus, default as useTransition } from './hooks/useTransition.js';
|
|
18
18
|
export { UseTransitionGroupItem, UseTransitionGroupProps, default as useTransitionGroup } from './hooks/useTransitionGroup.js';
|
|
19
|
-
export {
|
|
19
|
+
export { breakpoints, css } from './css/index.js';
|
|
20
20
|
export { themeRootClass } from './theme/index.js';
|
|
21
21
|
export { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS } from './css/types.js';
|
|
22
22
|
export { CSSPropAsAttr, TagCSSProperties, TagComponentType, TagProps, TagPropsRoot } from './Tag/types.js';
|
|
23
|
-
export { ColorsRefTypes, ObjectType, ThemeColorOption,
|
|
23
|
+
export { BaseTypographyKeys, ColorsRefTypes, ObjectType, ThemeColorKeys, ThemeColorOption, ThemeInterface, ThemeMode, ThemeOptionInput, ThemeOptions, ThemeTypographyItem, TypographyRefTypes } from './theme/types.js';
|
|
24
24
|
export { default as getValue } from './css/getValue.js';
|
|
25
25
|
export { default as getProps } from './css/getProps.js';
|
|
26
26
|
export { default as ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';
|
package/index.js
CHANGED
|
@@ -16,7 +16,7 @@ export { default as Iframe } from './Iframe/index.js';
|
|
|
16
16
|
export { default as animate } from './animate/index.js';
|
|
17
17
|
export { default as useTransition } from './hooks/useTransition.js';
|
|
18
18
|
export { default as useTransitionGroup } from './hooks/useTransitionGroup.js';
|
|
19
|
-
export {
|
|
19
|
+
export { breakpoints, css } from './css/index.js';
|
|
20
20
|
export { themeRootClass } from './theme/index.js';
|
|
21
21
|
export { default as getValue } from './css/getValue.js';
|
|
22
22
|
export { default as getProps } from './css/getProps.js';
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -40,7 +40,7 @@ export const App = () => {
|
|
|
40
40
|
px={24}
|
|
41
41
|
py={32}
|
|
42
42
|
bgcolor="background"
|
|
43
|
-
color="
|
|
43
|
+
color="surface.contrast"
|
|
44
44
|
gap={24}
|
|
45
45
|
>
|
|
46
46
|
<Tag component="h1" fontSize="h2">
|
|
@@ -58,7 +58,7 @@ export const App = () => {
|
|
|
58
58
|
|
|
59
59
|
## Core Concepts
|
|
60
60
|
|
|
61
|
-
- **Design Tokens** – `createTheme` merges your overrides with defaults and exposes typed references like `
|
|
61
|
+
- **Design Tokens** – `createTheme` merges your overrides with defaults and exposes typed references like `primary.main` or typography presets.
|
|
62
62
|
- **Adaptive Layout** – Wrap your app with `BreakpointProvider` (automatically included by `ThemeProvider` when `isRootProvider` is `true`) to consume breakpoint helpers throughout the tree.
|
|
63
63
|
- **Composable Styles** – `css`, `getValue`, and `getProps` transform alias props, breakpoints, and pseudo selectors into atomic class names. Use them directly for utilities such as scrollbars or keyframes.
|
|
64
64
|
- **Animation Primitives** – `useAnimation` builds scoped keyframes on the fly; `Transition` controls mount/unmount sequences with variants such as `fade`, `slideDown`, or `collapseVertical`.
|