@apia/theme 0.0.6 → 0.0.9-alpha.0

package/LICENSE.md

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) [year] [fullname]
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,93 @@
+import { Theme, ThemeUICSSObject, ResponsiveStyleValue } from 'theme-ui';
+import * as theme_ui_jsx_runtime from 'theme-ui/jsx-runtime';
+import { FC, ReactNode } from 'react';
+import * as _theme_ui_css from '@theme-ui/css';
+
+declare function useMainTheme(customTheme?: Theme): Theme;
+
+/**
+ * Permite crear un componente cuyos estilos pueden ser redefinidos por un
+ * usuario final.
+ *
+ * Esto es así puesto que los estilos definidos serán agregados a un árbol que
+ * el usuario puede consultar y sobreescribir. De esta manera los estilos
+ * finales del componente serán aquellos definidos en este método pero
+ * sobreescritos por los definidos por el usuario si es que existen.
+ *
+ * **Importante** Para aplicar la variante, se aplica un box alrededor del
+ * componente que se está renderizando, con className="variant__holder". En caso
+ * de que se quisiera evitar este comportamiento, se debe pasar unwraped = true
+ *
+ * @param displayName Este parámetro es importante para el debugger de React.
+ * @param stylesPath La ruta donde se aplicarán los estilos, es importante asegurarse de que esa ruta ya no está siendo utilizada por otro componente.
+ * @param styles Un objeto de estilos de ThemeUI
+ * @param Component La definición del componente.
+ * @returns Un componente reutilizable y exportable que tiene estilos aplicados.
+ */
+declare function makeStyledComponent<T extends object>(displayName: string, stylesPath: string, styles: ThemeUICSSObject, Component: FC<T>, unwraped?: boolean): ((props: T) => theme_ui_jsx_runtime.JSX.Element) & {
+    displayName: string;
+};
+
+/**
+ * Esta función permite agregar estilos al tema principal de la aplicación, de
+ * modo que estén disponibles para cualquier componente que lo requirea.
+ *
+ * @example
+ *
+ * injectStyles('buttons.myRedButton', {
+ *   variant: 'buttons.primary',
+ *   backgroundColor: 'red',
+ * })
+ */
+declare function injectStyles(path: string, styles: ThemeUICSSObject): void;
+
+interface TThemeProvider {
+    children: ReactNode;
+    customTheme?: Theme;
+}
+declare const ThemeProvider: ({ children, customTheme }: TThemeProvider) => theme_ui_jsx_runtime.JSX.Element;
+
+/**
+ * Esta función devuelve un array de valores para los distintos breakpoints.
+ *
+ * **Importante** Debido a un issue con ThemeUI, es necesario agregar un
+ * breakpoint inicial de 0px para las vistas de impresión. El comportamiento por
+ * defecto será, si se pasa un valor para el índice 4, esta será tomada como
+ * vista de impresión, sino se tomará el valor de mayor índice menor que 4.
+ *
+ * @example
+ *
+ * display: responsive({0: 'none', 3: 'block'}) // display: ['block', 'none', null, null, 'block'];
+ */
+declare function responsive<T>(values: {
+    print?: T;
+    [key: number]: undefined | T;
+}): ResponsiveStyleValue<T>;
+/**
+ * Este método permite aplicar espacios (gaps, márgenes y paddings) que se
+ * tendrán un comportamiento responsivo por defecto. Esto es, cuando tenemos un
+ * padding en una vista de escritorio, probablemente sea demasiado grande al
+ * llevarlo a celular. Con esta función se elimina el problema de calcular para
+ * cada elemento en forma individual y el problema se convierte en encontrar
+ * una única fórmula que quede correcta para todos los breakpoints.
+ *
+ * @example
+ *
+ * '.wellPaddedElement': {
+ *    p: spacing(6),
+ *    pt: spacing(8)
+ * }
+ */
+declare function spacing(index: number): number | false | (number | _theme_ui_css.ThemeUIEmpty)[];
+declare const smallButton: {
+    py: number;
+    px: number;
+    fontSize: string;
+};
+declare const focusOutline: ThemeUICSSObject;
+declare function getVariant(variant: string): {
+    variant: string;
+    'data-variant': string;
+};
+
+export { ThemeProvider, focusOutline, getVariant, injectStyles, makeStyledComponent, responsive, smallButton, spacing, useMainTheme };

package/dist/index.js

@@ -1,48 +1,24 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  default: () => src_default
-});
-module.exports = __toCommonJS(src_exports);
-var theme = {
-  fonts: {
-    body: "system-ui, sans-serif",
-    heading: '"Avenir Next", sans-serif',
-    monospace: "Menlo, monospace"
-  },
-  colors: {
-    text: "#000",
-    background: "#fff",
-    primary: "red"
-  },
-  styles: {
-    root: {
-      button: {
-        cursor: "pointer"
-      }
-    }
-  }
-};
-var src_default = theme;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
-//# sourceMappingURL=index.js.map
+var lodash = require('lodash');
+var util = require('@apia/util');
+var react = require('react');
+var S = require('tinycolor2');
+var themeUi = require('theme-ui');
+var jsxRuntime = require('theme-ui/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var S__default = /*#__PURE__*/_interopDefault(S);
+
+var xe=Object.defineProperty,Se=Object.defineProperties;var Te=Object.getOwnPropertyDescriptors;var H=Object.getOwnPropertySymbols;var ke=Object.prototype.hasOwnProperty,ve=Object.prototype.propertyIsEnumerable;var L=(e,t,r)=>t in e?xe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,o=(e,t)=>{for(var r in t||(t={}))ke.call(t,r)&&L(e,r,t[r]);if(H)for(var r of H(t))ve.call(t,r)&&L(e,r,t[r]);return e},u=(e,t)=>Se(e,Te(t));function m(e){var d;let t=[];for(let i=0;i<=6;i++)t[i+1]=(d=e[i])!=null?d:null;if(e.print)t[0]=e.print;else for(let i=5;i>=0;i--)e[i]!==void 0&&(t[0]=e[i]);return t}function l(e){var t;return (t=_.spacing(e))!=null?t:e}var y={py:2,px:4,fontSize:"0.9em"},w={outlineColor:"outlineColor",outlineWidth:"3px",outlineStyle:"solid",outlineOffset:"-3px"};function V(e){return {variant:e,"data-variant":e}}var A={light:"#009",dark:"#fff"},q="#ccc",we=Array(50).fill(1).map((e,t)=>m({0:Math.ceil(t/2.5),1:Math.ceil(t/2.1),2:Math.ceil(t/1.7),3:Math.ceil(t/1.3),4:t})),Oe={action:{disabled:q,disabledOpacity:.6,active:A,activeOpacity:.4,focus:A,focusOpacity:.2,hover:A,hoverOpacity:.3,readonly:q,readonlyOpacity:.4,selected:A.light,selectedOpacity:.6},background:{default:"#f4f4f4",overlay:"rgba(0, 0, 0, 0.2)",paper:"white"},border:{article:"#cacaca",field:"#444",section:"#aaa"},common:{black:"black",white:"white"},info:{main:"#fff"},primary:{main:"#00496c"},secondary:{main:"#6c757d"},spacing:e=>we[e],text:{accent:"#609",disabled:"#555",icon:"white",link:"#00496c",primary:"#4a4a4a",secondary:"white",title:"#00496c"},error:{main:"#db7678",light:"#fff2f4"},success:{main:"#8bde8b",light:"#e7ffd9"},warning:{main:"#f8f588",light:"#fffdd9"},darkenRatio:15,lightenRatio:35,responsive:m,queryColumnsMultiplier:2},_=Oe;function Pe(e){return o(o({},e),e.borderColor?{borderLeftColor:e.borderColor,borderRightColor:e.borderColor,borderBottomColor:e.borderColor,borderTopColor:e.borderColor}:void 0)}var U=Pe;var Ie=(e,t)=>{var h,C,k,T;if(t==="default")return U(e);let r=O(),d=r.action[`${t}Opacity`],i=t==="checked"?"selected":t,a=S__default.default.mix((h=e.backgroundColor)!=null?h:"",S__default.default((C=e.backgroundColor)!=null?C:"").isLight()?r.action[i].light:r.action[i].dark,100*d).toRgbString();return U(o(o({},e.backgroundColor?{backgroundColor:t==="checked"?(k=e.backgroundColor)!=null?k:"":a,color:t==="checked"?S__default.default.mix(S__default.default((T=e.color)!=null?T:"black"),S__default.default(r.action.selected.dark),100*r.action.selectedOpacity).toRgbString():window.currentPalette.getContrastText(a)}:null),e.borderColor?{borderColor:S__default.default.mix(e.borderColor,S__default.default(e.borderColor).isLight()?r.action[i].light:r.action[i].dark,100*d).toRgbString()}:null))},f=Ie;var je=(e,t)=>{let r=(t==null?void 0:t.default)!==!1?lodash.cloneDeep(e):{};return (t==null?void 0:t.active)!==!1&&(r.active=f(e,"active")),(t==null?void 0:t.disabled)!==!1&&(r.disabled=f(e,"disabled")),(t==null?void 0:t.focus)!==!1&&(r.focus=f(e,"focus")),(t==null?void 0:t.hover)!==!1&&(r.hover=f(e,"hover")),(t==null?void 0:t.readonly)!==!1&&(r.readonly=f(e,"readonly")),(t==null?void 0:t.selected)!==!1&&(r.selected=f(e,"selected")),(t==null?void 0:t.checked)!==!1&&(r.checked=f(e,"checked")),r},P=je;function W(e,t){e.forEach(r=>{Object.entries(r).forEach(([d,i])=>{if(typeof i=="string")return;let a=i;a.active||(a.active={}),a.checked||(a.checked={}),a.focus||(a.focus={}),a.disabled||(a.disabled={}),a.hover||(a.hover={}),a.selected||(a.selected={});let h=P(a,t);r[d]=lodash.merge(h,a);});});}function J(e){return !!e&&typeof e=="object"&&"main"in e}function K(e,t){return S__default.default(e).lighten(t!=null?t:20).toRgbString()}function Q(e,t){return S__default.default(e).darken(t!=null?t:20).toRgbString()}function X(e){let t=S__default.default(e);return S__default.default.readability("white",t)<S__default.default.readability("black",t)?"black":"white"}var Be=(e,t)=>{switch(t){case"active":return {"&:active":e,"input[role]:active ~ &":e,"input[role]:active ~ & path":e};case"checked":return {"&:checked":e,"input[role]:checked ~ &":e,"input[role]:checked ~ & path":e};case"disabled":return {"&:disabled":e,"input[role]:disabled ~ &":e,"input[role]:disabled ~ & path":e};case"focus":{let r=lodash.merge({},w,e);return {"&:focus":r,"input[role]:focus ~ &":r}}case"hover":return {'&:hover:not([readonly], :disabled,[aria-selected="true"],:active)':e,'input[role]:hover:not([readonly], :active, :disabled) ~ &:not(:disabled,[aria-selected="true"])':e,'input[role]:hover:not([readonly], :active, :disabled) ~ &:not(:disabled,[aria-selected="true"]) path':e};case"readonly":return {"&[readonly]":e,"input[role][readonly] ~ &":e,"input[role][readonly] ~ & path":e,"&.readonly input ~ &, &.readOnly input ~ &":e,"&.readonly input ~ & path, &.readOnly input ~ & path":e,"&.readonly, &.readOnly":e};case"selected":return {"&:selected":e,"input[role]:selected ~ &":e,"input[role]:selected ~ & path":e,'&[aria-selected="true"]':e};default:return e}},b=Be;function p(e,t){return lodash.merge(U({color:`${e}.color`,backgroundColor:`${e}.backgroundColor`,borderColor:`${e}.borderColor`}),t==null?void 0:t.mergeObject)}function n(e,t){var T,I,c,s,g,R,j,D;let r=p(`${e}.active`,t),d=p(`${e}.checked`,t),i=o({cursor:"not-allowed"},p(`${e}.disabled`,t)),a=p(`${e}.hover`,t),h=((T=t==null?void 0:t.states)==null?void 0:T.focus)!==!1?p(`${e}.focus`,t):{},C=o({cursor:"notAllowed"},p(`${e}.readonly`,t)),k=p(`${e}.selected`,t);return lodash.merge(o(o(o(o(o(o(o(o({},((I=t==null?void 0:t.states)==null?void 0:I.default)!==!1?p(e,t):null),((c=t==null?void 0:t.states)==null?void 0:c.checked)!==!1?b(d,"checked"):null),b(h,"focus")),((s=t==null?void 0:t.states)==null?void 0:s.hover)!==!1?b(a,"hover"):null),((g=t==null?void 0:t.states)==null?void 0:g.selected)!==!1?b(k,"selected"):null),((R=t==null?void 0:t.states)==null?void 0:R.active)!==!1?b(r,"active"):null),((j=t==null?void 0:t.states)==null?void 0:j.disabled)!==!1?b(i,"disabled"):null),((D=t==null?void 0:t.states)==null?void 0:D.readonly)!==!1?b(C,"readonly"):null),t==null?void 0:t.mergeObject)}var Me=(e,t)=>o(o(o(o(o(o(o(o({},(t==null?void 0:t.default)!==!1?e:null),(t==null?void 0:t.checked)!==!1?b(f(e,"checked"),"checked"):null),b(f(e,"focus"),"focus")),(t==null?void 0:t.selected)!==!1?b(f(e,"selected"),"selected"):null),(t==null?void 0:t.hover)!==!1?b(f(e,"hover"),"hover"):null),(t==null?void 0:t.active)!==!1?b(f(e,"active"),"active"):null),(t==null?void 0:t.disabled)!==!1?b(f(e,"disabled"),"disabled"):null),(t==null?void 0:t.readonly)!==!1?b(f(e,"readonly"),"readonly"):null),Y=Me;var We=(e,t)=>{if(t==="default")return e;let r=t==="checked"?"selected":t,d=O(),i=d.action[`${t}Opacity`];return S__default.default.mix(e,S__default.default(e).isLight()?d.action[r].light:d.action[r].dark,100*i).toRgbString()},ee=We;function z(e){var d,i,a,h,C,k,T,I;let t=lodash.cloneDeep(e);t.lightenColor=(d=e.lightenColor)!=null?d:(c,s)=>K(c,s!=null?s:e.lightenRatio),t.darkenColor=(i=e.darkenColor)!=null?i:(c,s)=>Q(c,s!=null?s:e.darkenRatio),t.getContrastText=(a=e.getContrastText)!=null?a:X,Object.entries(e).forEach(([c,s])=>{var R,j,D;let g=s;J(g)?t[c]={main:g.main,light:(R=g.light)!=null?R:t.lightenColor(g.main),dark:(j=g.dark)!=null?j:t.darkenColor(g.main),contrastText:(D=g.contrastText)!=null?D:t.getContrastText(g.main)}:t[c]=s;}),t.border.article=(h=t.border.article)!=null?h:t.secondary.main,t.border.field=(C=t.border.field)!=null?C:t.text.primary,t.border.section=(k=t.border.section)!=null?k:t.primary.main;function r(c){var s,g;return typeof c=="string"?{dark:c,light:c}:{dark:(s=c.dark)!=null?s:c.light,light:(g=c.light)!=null?g:c.dark}}t.action.active=r(t.action.active),t.action.disabled=r(t.action.disabled),t.action.focus=r(t.action.focus),t.action.hover=r(t.action.hover),t.action.readonly=r(t.action.readonly),t.action.selected=r(t.action.selected),t.buildStateObject=b,t.getColor=ee,t.getStatesForColors=P,t.getOneState=f,t.getStatesFromDefinition=Y,t.getStatesFromPath=n,t.gray=(T=t.gray)!=null?T:{};for(let c=1;c<=18;c++){let s=Math.round(13.37962962962963*c);t.gray[c*50]=(I=t.gray[c*50])!=null?I:`rgb(${s},${s},${s})`;}return t}var te="#004085",Ne="#cce5ff",F="white";function oe(){let e=O();return e.getStatesFromDefinition({backgroundColor:e.background.paper,color:e.text.primary},{active:!1,checked:!1,default:!1,disabled:!1,hover:!1,focus:!1,readonly:!1})}function O(e){let t=e===!0,r=typeof e!="boolean"?e:void 0;return window.currentPalette&&!t||(window.currentPalette=z(lodash.merge(_,window.defaultPalette,r!=null?r:window.customPalette))),window.currentPalette}function E(){var r;let e=lodash.cloneDeep((r=window.currentPalette)!=null?r:O()),t={palette:u(o({},e),{lightenColor:void 0,darkenColor:void 0,getContrastText:void 0,buildStateObject:void 0,getColor:void 0,getOneState:void 0,getStatesForColors:void 0,getStatesFromDefinition:void 0,getStatesFromPath:void 0}),accordion:{borderColor:e.border.section},buttons:{accordion:{backgroundColor:e.primary.main,borderColor:e.border.section,color:e.primary.contrastText},accordionPrimary:{backgroundColor:e.primary.main,borderColor:e.border.section,color:e.primary.contrastText},close:u(o({},P({color:e.text.primary,backgroundColor:e.background.paper})),{backgroundColor:"transparent"}),collapsibleAsidePanelTitle:{color:e.text.primary},deletableInputButton:{backgroundColor:"transparent",color:e.secondary.main,active:{color:e.darkenColor(e.secondary.main,40)},disabled:{color:e.secondary.main},focus:{color:e.darkenColor(e.secondary.main,20)},hover:{color:e.darkenColor(e.secondary.main,20)}},icon:{backgroundColor:e.secondary.main,color:e.secondary.contrastText,hover:{color:e.secondary.contrastText},focus:{color:e.secondary.contrastText}},iconAlert:{backgroundColor:"transparent",color:"#e5c200",active:{backgroundColor:"transparent",color:S__default.default("#e5c200").darken(10).toRgbString()},focus:{backgroundColor:"transparent",color:S__default.default("#e5c200").darken(5).toRgbString()},hover:{backgroundColor:"transparent",color:S__default.default("#e5c200").darken(5).toRgbString()}},iconPrimary:{backgroundColor:e.primary.main,color:e.primary.contrastText,active:{color:e.primary.contrastText},focus:{color:e.primary.contrastText},hover:{color:e.primary.contrastText}},iconToggled:{backgroundColor:e.primary.main,color:e.primary.contrastText,active:{color:e.primary.contrastText},focus:{color:e.common.white},hover:{color:e.common.white}},iconOutline:{backgroundColor:e.background.paper,color:e.primary.main,borderColor:e.border.article},link:{backgroundColor:"transparent",color:e.text.primary,borderColor:"transparent",active:{color:e.text.primary},focus:{color:e.text.primary},hover:{color:e.text.primary}},openTab:{backgroundColor:e.primary.main,color:e.primary.contrastText,borderColor:e.primary.dark},outline:{backgroundColor:e.background.paper,color:e.getContrastText(e.background.paper),borderColor:e.primary.main},outlineDanger:{backgroundColor:e.background.paper,color:e.primary.main,borderColor:e.primary.main,active:{borderColor:e.darkenColor(e.error.dark,e.action.activeOpacity*80),backgroundColor:e.darkenColor(e.error.dark,e.action.activeOpacity*80),color:e.getContrastText(e.darkenColor(e.error.dark,e.action.activeOpacity*80))},focus:{borderColor:e.darkenColor(e.error.dark,e.action.activeOpacity*60),backgroundColor:e.darkenColor(e.error.dark,e.action.activeOpacity*60),color:e.getContrastText(e.darkenColor(e.error.dark,e.action.activeOpacity*60))},hover:{borderColor:e.darkenColor(e.error.dark,e.action.activeOpacity*70),backgroundColor:e.darkenColor(e.error.dark,e.action.activeOpacity*70),color:e.getContrastText(e.darkenColor(e.error.dark,e.action.activeOpacity*70))}},outlineWarning:{backgroundColor:e.background.paper,color:e.text.primary,borderColor:e.primary.main,active:{borderColor:e.warning.main,backgroundColor:e.warning.main,color:e.warning.contrastText},focus:{borderColor:e.warning.main,backgroundColor:e.warning.main,color:e.warning.contrastText},hover:{borderColor:e.warning.main,backgroundColor:e.warning.main,color:e.warning.contrastText}},primary:{backgroundColor:e.primary.main,color:e.primary.contrastText,borderColor:e.primary.main},secondary:{backgroundColor:e.secondary.main,color:e.secondary.contrastText,borderColor:e.secondary.main},tab:{backgroundColor:e.background.paper,color:e.getContrastText(e.background.paper),borderColor:e.border.article},toggleIcon:{color:e.secondary.contrastText,backgroundColor:e.secondary.main,borderColor:e.border.field,danger:{backgroundColor:e.error.main,borderColor:e.border.field,color:e.error.contrastText},toggled:{backgroundColor:e.primary.main,borderColor:e.border.field,color:e.primary.contrastText}},transparentIcon:{backgroundColor:"transparent",color:e.text.primary,hover:{color:e.primary.main},focus:{color:e.primary.main}}},dropzone:{backgroundColor:e.background.paper,borderColor:e.border.section,color:e.background.default},form:{backgroundColor:e.background.paper,fields:{backgroundColor:e.background.paper,color:e.text.primary,borderColor:e.border.field},radio:{backgroundColor:"transparent",color:S__default.default(window.currentPalette.text.primary).lighten(15).toRgbString(),borderColor:e.text.primary,active:{backgroundColor:"transparent",color:S__default.default(window.currentPalette.text.primary).lighten(0).toRgbString()},checked:{backgroundColor:"red",color:S__default.default(window.currentPalette.text.primary).lighten(15).toRgbString()},disabled:{backgroundColor:"transparent",color:S__default.default(window.currentPalette.text.primary).lighten(55).toRgbString()},hover:{backgroundColor:"transparent",color:S__default.default(window.currentPalette.text.primary).lighten(7).toRgbString()},readonly:{color:S__default.default(window.currentPalette.text.primary).lighten(38).toRgbString(),backgroundColor:"transparent"}}},modal:{borderColor:e.border.section,backgroundColor:e.background.paper},notifications:{error:{backgroundColor:e.error.light,color:e.getContrastText(e.error.light),borderColor:e.error.main},success:{backgroundColor:e.success.light,color:e.getContrastText(e.success.light),borderColor:e.success.main},warning:{backgroundColor:e.warning.light,color:e.getContrastText(e.warning.light),borderColor:e.warning.main}},pagination:{color:e.primary.contrastText,backgroundColor:e.primary.main},printView:{main:{backgroundColor:e.background.default,page:{backgroundColor:e.background.paper,borderColor:e.border.article}},list:{table:{borderColor:e.border.section},th:{backgroundColor:"#eee"},cell:{borderColor:e.border.article}}},scrollbars:{bar:{color:e.secondary.main,backgroundColor:e.background.default,hover:{backgroundColor:e.lightenColor(e.background.default,10),color:e.lightenColor(e.secondary.main,10)},active:{backgroundColor:e.lightenColor(e.background.default,10),color:e.lightenColor(e.secondary.main,20)}}},tab:{backgroundColor:e.background.paper,borderColor:e.border.section},topBar:{backgroundColor:e.primary.main},accent:e.text.accent,background:e.background.default,iconWarning:"rgb(246 222 87)",muted:e.text.disabled,primary:e.primary.main,secondary:e.secondary.main,text:e.text.primary,warning:e.warning.main,danger:e.error.main,link:e.text.accent,success:e.success.main,title:e.text.title,lightBorder:"hsl(0, 12%, 85%)",outlineColor:e.lightenColor(e.getColor(e.primary.main,"selected"),30),baseGrey:"#dfdfdf",darkBorder:"hsl(247, 98%, 10%)",darkBlue:te,disabled:"#efefef",favorite:"#e5c200",filtersRowBackground:F,formBackground:F,grey:"#777",gridRowHighlight:"#e1f3ff",highlightButton:"hsl(61, 100%, 91%)",lightBlue:Ne,oddRow:"#f0f5ff",paginationBackground:"hsl(229deg, 75%, 90%)",readOnlyText:"#737373",required:"darkred",scrollbarBack:"rgb(206, 206, 206)",scrollbarFront:"rgb(156, 156, 156)",sysExceptionNotificationBg:"#f8d7da",sysMessageNotificationBg:"#fff3cd",tabBackground:"white",treeRuler:"#ccc",white:F,priorityNone:"gray",priorityLow:e.success.main,priorityNormal:"rgb(255 211 34)",priorityHigh:"rgb(255 150 0)",priorityUrgent:"red",charts:{front:te}};return W([t==null?void 0:t.buttons,t==null?void 0:t.form]),t}var Ge={primary:{border:"1px solid",borderLeft:"12px solid",borderRadius:"alerts",display:"flex",flexDirection:"column",fontWeight:"normal",maxHeight:"60vh",overflow:"auto",p:0,"&:focus":{outline:"none"},".notification__header":{display:"flex",alignItems:"center",justifyContent:"space-between",position:"sticky",top:0,width:"100%",p:l(5)},".notification__title":{fontSize:18,fontWeight:"bold",color:"palette.text.primary",display:"flex",gap:l(5),alignItems:"center"},".notification__closeButton":{flexShrink:0},".notification__body":{alignItems:"center",display:"flex",flexDirection:"row",gap:l(5),width:"100%",p:l(5)},".notification__header ~ .notification__body":{pt:0},".notification__content":{display:"flex",alignItems:"stretch",flexDirection:"column",gap:l(5),width:"100%"},".notification__icon":{flexShrink:0,height:"iconMd",svg:{height:"iconMd",width:"iconMd"}},".notification__message":{display:"flex",flexDirection:"column",fontWeight:"normal",gap:l(3),width:"100%",wordBreak:"break-word"},".notification__trace":{maxWidth:"100%",overflow:"hidden",maxHeight:"30vh",flexShrink:0,backgroundColor:"rgba(10,10,10,0.02)",pt:l(5),".notification__traceLabel":{pl:l(5)},".notification__traceText":{fontWeight:"normal",p:l(5),maxHeight:"30vh",overflow:"auto",maxWidth:"100%",position:"relative"}},"&:focus .notification__closeButton":w},warning:{variant:"alerts.primary","&, & .notification__header":o({},p("notifications.warning"))},danger:{variant:"alerts.primary","&, & .notification__header":o({},p("notifications.error"))},success:{variant:"alerts.primary","&, & .notification__header":o({},p("notifications.success"))}},re=Ge;var $e={inherit:{color:"inherit",background:"inherit",border:"none",borderRadius:0,font:"inherit",cursor:"pointer",padding:0,margin:0},collapsibleAsidePanelTitle:o({variant:"buttons.inherit",display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%"},n("buttons.collapsibleAsidePanelTitle")),primary:u(o({borderWidth:"2px",borderStyle:"solid",variant:"text.default",py:m({0:3,4:4}),px:m({0:5,4:6}),display:"inline-block",width:m({0:"100%",1:"auto"}),cursor:"pointer",borderRadius:"buttons",fontWeight:"normal",userSelect:"none",transition:"background-color 300ms ease-out, color 300ms ease-out",wordBreak:"keep-all"},n("buttons.primary")),{"&:focus, &:focus-visible":{outlineColor:"#00daff"}}),"primary-sm":o({variant:"buttons.primary","&:focus, &:focus-visible":{}},y),secondary:o({variant:"buttons.primary","&:focus, &:focus-visible":{},borderWidth:"0px",borderStyle:"solid"},n("buttons.secondary")),"secondary-sm":o({variant:"buttons.secondary"},y),"light-secondary":o({variant:"buttons.secondary"},n("buttons.lightSecondary")),danger:o({variant:"buttons.primary","&:focus, &:focus-visible":{}},n("buttons.danger")),"danger-sm":o({variant:"buttons.danger"},y),warning:o({variant:"buttons.primary","&:focus, &:focus-visible":{}},n("buttons.warning")),"warning-sm":o({variant:"buttons.warning"},y),close:o({cursor:"pointer",ml:"auto",mr:"2",borderRadius:"buttons"},n("buttons.close")),accordion:{variant:"buttons.primary","&:focus, &:focus-visible":{},cursor:"pointer",m:l(0),py:m({0:3,4:4}),px:m({0:5,4:6}),width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",borderRadius:"buttons",textAlign:"left",fontFamily:"heading",fontSize:"text.default",textDecoration:"none",textTransform:"none",fontWeight:"bold",border:"none",transition:"background-color 300ms ease-out, color 300ms ease-out",userSelect:"text","&, *":n("buttons.accordion")},"accordion-primary":o({variant:"buttons.accordion",border:"none"},n("buttons.accordionPrimary")),icon:u(o({display:"flex",justifyContent:"center",alignItems:"center",p:l(0),m:l(0),bg:"secondary",cursor:"pointer",transition:"background-color 300ms ease-out, color 300ms ease-out",borderRadius:"buttons",border:"none"},n("buttons.icon")),{svg:{width:"auto",height:"20px",display:"block"},"&.isToggled":o({},n("buttons.iconToggled"))}),"icon-primary":o({variant:"buttons.icon"},n("buttons.iconPrimary")),"icon-outline":o({variant:"buttons.icon",bg:"white",border:"1px solid"},n("buttons.iconOutline")),"icon-outline-danger":o({variant:"buttons.icon",bg:"white",border:"1px solid"},n("buttons.outlineDanger")),"icon-only":o({variant:"buttons.icon"},n("buttons.iconOnly")),link:o({variant:"inherit",width:"auto",border:"none",textDecoration:"underline",px:2,py:1,borderRadius:"buttons",cursor:"pointer",textTransform:"none",transition:"background-color 300ms ease-out, color 300ms ease-out"},n("buttons.link")),"link-sm":o({variant:"buttons.link"},y),outline:o({variant:"buttons.primary",borderWidth:"2px",borderStyle:"solid",borderRadius:"buttons","&:focus, &:focus-visible":{}},n("buttons.outline")),"outline-sm":o({variant:"buttons.outline"},y),"transparent-sm":o({variant:"buttons.outline","&:focus, &:focus-visible":{},bg:"transparent",color:"inherit",border:"none",font:"inherit",textTransform:"inherit"},y),"outline-danger":o({variant:"buttons.outline","&:focus, &:focus-visible":{}},n("buttons.outlineDanger")),"outline-danger-sm":o({variant:"buttons.outline-danger"},y),"outline-warning":o({variant:"buttons.outline","&:focus, &:focus-visible":{}},n("buttons.outlineWarning")),"outline-warning-sm":o({variant:"buttons.outline-warning"},y),"outline-extended":{variant:"buttons.outline",gridColumnStart:1,gridColumnEnd:3,width:"100%"},"outline-danger-extended":{variant:"buttons.outline-danger",gridColumnStart:1,gridColumnEnd:3,width:"100%"},"primary-extended":{variant:"buttons.primary","&:focus, &:focus-visible":{},gridColumnStart:1,gridColumnEnd:3,width:"100%"},query:{extended:{variant:"buttons.outline","&:focus, &:focus-visible":{},gridColumnStart:1,gridColumnEnd:3}},tableAccordion:o({variant:"buttons.accordion",fontSize:"text.default",p:l(3),wordBreak:"keep-all",a:{color:"background"}},n("buttons.tableAccordion")),tableHeader:o({variant:"buttons.tableAccordion",alignItems:"center",justifyContent:"center",height:"100%",border:"none",svg:{ml:l(2)}},n("buttons.tableHeader"))},ne=$e;var He=o({display:"inline-flex",borderRadius:"default",flexBasis:"32px",flexShrink:0,width:"32px",height:"32px",alignItems:"center",justifyContent:"center",p:"3px",border:"1px solid",svg:{width:"20px"}},n("form.fields",{states:{active:!1,hover:!1,focus:!1}})),ie=He;var Le=u(o({borderRadius:"default"},n("form.fields",{states:{active:!1,focus:!1,hover:!1}})),{backgroundColor:"unset",alignItems:"center","&.nativeCheckbox":{appearance:"none",width:"25px",height:"25px",border:"solid 1px #cccccc",marginRight:"8px",position:"relative",cursor:"pointer","&:checked::before":{content:'"\u2713"',color:"palette.text.primary",position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",top:0,left:0,right:0,bottom:0,fontSize:"larger",fontWeight:"bolder",borderRadius:"5px",cursor:"pointer"},"&:indeterminate::before":{content:'"-"',color:"palette.text.primary",position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",top:"-1px",left:0,right:0,bottom:0,fontSize:"xx-large",fontWeight:"600",borderRadius:"5px",cursor:"pointer"}}}),ae=Le;var Ve=u(o({display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:"stretch",gap:l(2),width:"100%","&.readOnly":{input:{color:"Text.fields",bg:"Background.fields"}},".iconInput":{width:"100%",position:"relative"},'input:hover~.delete_date_button:not(:disabled,[aria-selected="true"]), input:hover~.delete_date_button:not(:disabled,[aria-selected="true"]) path, .delete_date_button':o({position:"absolute",right:"59px",padding:0,top:"calc(50% - 10px)",margin:0,marginRight:0,borderRadius:"100%",width:"20px",height:"20px"},n("buttons.icon-outline")),input:{flexShrink:1},"& > div":{display:"flex",gap:l(2),flexShrink:0,width:"auto",maxWidth:"100%",minWidth:0,button:{width:"45px",flexShrink:0}}},n("form.fields",{states:{hover:!1,active:!1,focus:!1}})),{backgroundColor:void 0}),le=Ve;var qe={display:"flex",gap:l(1),justifyContent:"stretch",alignItems:"center","&.readOnly":{input:o({},p("form.fields"))},input:{height:"50px",width:"100%"},button:{display:"flex",width:"45px",flexShrink:0,height:"50px"}},ce=qe;var Je=u(o({variant:"text.default",border:"1px solid",borderRadius:"default",padding:m({0:3,3:4}),"::placeholder":{color:"#b0b0b0"}},n("form.fields",{states:{active:!1,hover:!1,focus:!1}})),{material:{input:{borderLeft:"none",borderRight:"none",borderTop:"none",borderBottomColor:"palette.border.section","& + .input__underline":{transform:"scale(1)"},"&:focus":{outline:"none","~::after":{animationName:"growHorizontal",animationDuration:"150ms",animationTimingFunction:"ease-out",content:'""',display:"block",height:"0",outlineColor:"palette.primary.main",outlineStyle:"solid",outlineWidth:"1.5px",outlineOffset:0,position:"fixed",transformOrigin:"center center",width:"100%"}}}}}),de=Je;var Ke={variant:"text.default",alignItems:"center",width:"auto",textTransform:"none",cursor:"pointer","&:not(.radio-label)":{fontWeight:"bold"},"&.required":{position:"relative","&::before":{color:"danger",position:"absolute",content:'"*"',top:0,left:"-10px"}},"&:last-of-type":{"input, textarea, select":{mb:l(0)}}},se=Ke;var Qe=o({width:"32px",height:"32px",input:{height:"32px !important"}},n("form.radio")),ue=Qe;var Xe=o({variant:"text.default",display:"inline-block",fontFamily:"body",p:l(4),pr:7,borderRadius:"default",width:"100%",maxWidth:"100%"},n("form.fields",{states:{active:!1,hover:!1,focus:!1}})),me=Xe;var Ye=o({variant:"text.default",height:"100%",padding:"4px",borderRadius:"default",border:"1px solid",width:"100%",transition:"background-color 100ms ease-out, color 100ms ease-out",overflow:"auto",option:u(o({padding:2},oe()),{"&:checked":{backgroundColor:window.currentPalette.getColor(window.currentPalette.background.paper,"selected"),color:window.currentPalette.getContrastText(window.currentPalette.getColor(window.currentPalette.background.paper,"selected"))}}),"+ svg":{display:"none"}},n("form.fields",{states:{active:!1,hover:!1,focus:!1}})),fe=Ye;var Ze={"+ span":{fontSize:14,fontWeight:"normal",wordBreak:"break-all"},backgroundColor:"form.fields.checked.borderColor"},be=Ze;var et={"&, & textarea":{height:"100%",minHeight:"130px",resize:"vertical"},textarea:{variant:"forms.input"}},pe=et;var tt={border:"1px solid",borderColor:"palette.border.field",display:"inline-block",position:"relative",pr:"45px",".deletableInput__input":{border:"none"},".deletableInput__deleteButton":o({height:"100%",outlineOffset:"-2px",position:"absolute",right:0,top:0,width:"45px"},n("buttons.deletableInputButton")),"&:focus-within:not(.asMaterial)":u(o({},w),{".deletableInput__input:focus":{outline:"none"},".deletableInput__deleteButton:focus":{outline:"none"}}),"&.asMaterial":{borderLeft:"none",borderRight:"none",borderTop:"none",borderBottomColor:"palette.border.section","& + .input__underline":{transform:"scale(1)"},".deletableInput__input:focus":{outline:"none","~.input__underline::after":{animationName:"growHorizontal",animationDuration:"150ms",animationTimingFunction:"ease-out",content:'""',display:"block",height:"0",outlineColor:"palette.primary.main",outlineStyle:"solid",outlineWidth:"1.5px",outlineOffset:0,position:"absolute",transformOrigin:"center center",left:0,right:0}}}},ge=tt;var ot=()=>({checkbox:ae,customCheckbox:ie,dateInput:le,deletableInput:ge,iconInput:ce,input:de,label:se,radio:ue,select:me,selectMultiple:fe,switch:be,textarea:pe,'input[type="date"]':{variant:"forms.input"}}),he=ot;var it=e=>e,at={};new class extends util.EventEmitter{};function M(e){return it(lodash.merge({alerts:re,breakpoints:["0px","250px","500px","700px","1000px","1260px","1580px"],buttons:ne,colors:E(),fonts:{body:"Arial",heading:"inherit",monospace:"Menlo, monospace"},fontSizes:Array(60).fill(1).map((t,r)=>r),forms:he(),layout:at,lineHeights:{body:1.5,heading:1.125},letterSpacings:{body:"0.01em",heading:"-0.015em"},radii:{alerts:0,buttons:0,default:0},shadows:{modals:"",tabs:""},space:[0,2,4,8,12,16,24,32,40,48,64,80,96,112,128],sizes:{applicationMenu:"350px",floatingNotifications:"min(550px, calc(100vw - 30px))",root:"992px",mainImage:"64px",twoColumns:"calc(992px + 350px)",twoColumnsCentered:"calc(992px + 350px + 16px)",iconxs:"12px",iconsm:"16px",iconmd:"22px",iconlg:"32px",iconxl:"48px"},styles:{root:{"*":{fontFamily:"body",fontWeight:"body",fontSize:"100%",height:"100%",code:{fontFamily:"monospace"}},h1:{fontSize:m({0:26,3:32})},h2:{fontSize:m({0:22,3:28})},h3:{fontSize:m({0:19,3:25})},h4:{fontSize:m({0:18,3:22})},h5:{fontSize:m({0:18,3:22})},h6:{fontSize:m({0:17,3:17})},"h1,h2,h3,h4,h5,h6":{letterSpacing:"heading",lineHeight:"heading",variant:"text.title"},"*:not(h1, h2, h3, h4, h5, h6, code)":{fontFamily:"body",fontSize:16,fontWeight:"body",letterSpacing:"body",lineHeight:"body"}}},zIndices:{stickyElements:600,menu:1e3,maximizedTables:1100,modal:1200,tooltip:1400,notifications:1600,contextMenu:1800},useRootStyles:!0},e!=null?e:{}))}var N=new class extends util.EventEmitter{};function G(e){let[t,r]=react.useState(M(e));return util.useMount(()=>N.on("newStyles",d=>{let i=util.setValueByPath({},d.path,d.styles);r(a=>lodash.merge(o({},a),i));})),t}var $=({children:e,customTheme:t})=>{let r=M(t);return jsxRuntime.jsx(themeUi.ThemeProvider,{theme:r,children:e})};function mn(e,t,r,d,i=!1){let a=util.setValueByPath({},t,r);return Object.assign(h=>{let C=react.useRef(0);return i?jsxRuntime.jsx($,{customTheme:a,children:jsxRuntime.jsx(react.Suspense,{children:jsxRuntime.jsx(ye,{avoidFirstRender:C,children:jsxRuntime.jsx(d,o({},h))})})}):jsxRuntime.jsx($,{customTheme:a,children:jsxRuntime.jsx(react.Suspense,{children:jsxRuntime.jsx(ye,{avoidFirstRender:C,children:jsxRuntime.jsx(themeUi.Box,u(o({className:"variant__holder"},V(t)),{children:jsxRuntime.jsx(d,o({},h))}))})})})},{displayName:e})}var ye=({avoidFirstRender:e,children:t})=>(e.current++,e.current<=1?null:jsxRuntime.jsx(jsxRuntime.Fragment,{children:t}));function hn(e,t){N.emit("newStyles",{path:e,styles:t});}var On=({children:e,customTheme:t})=>{let r=G(t);return console.log({theme:r}),jsxRuntime.jsx(themeUi.ThemeProvider,{theme:r,children:e})};
+
+exports.ThemeProvider = On;
+exports.focusOutline = w;
+exports.getVariant = V;
+exports.injectStyles = hn;
+exports.makeStyledComponent = mn;
+exports.responsive = m;
+exports.smallButton = y;
+exports.spacing = l;
+exports.useMainTheme = G;

package/package.json

@@ -1,30 +1,35 @@
 {
   "name": "@apia/theme",
-  "version": "0.0.6",
+  "version": "0.0.9-alpha.0",
   "description": "> TODO: description",
   "author": "alexisleite <alexisleite@live.com>",
   "homepage": "",
   "license": "MIT",
+  "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "lib"
-  ],
   "scripts": {
-    "build": "tsup src/index.ts",
-    "dev": "npm run build -- --watch",
-    "test": "node ./__tests__/theme.test.js"
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@apia/util": "^0.0.9-alpha.0",
+    "lodash": "^4.17.21",
+    "tinycolor2": "^1.6.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.192",
     "@types/theme-ui": "^0.6.0",
+    "@types/tinycolor2": "^1.4.3",
     "tsup": "^6.6.3",
+    "type-fest": "^3.6.1",
     "typescript": "^4.9.5"
   },
-  "dependencies": {
+  "peerDependencies": {
     "@emotion/react": "^11.10.6",
+    "react": "^18.2.0",
     "theme-ui": "^0.15.5"
   },
-  "gitHead": "f9fd1b9e4e9e0be548bdc4825bdc06665ec78fe2",
+  "gitHead": "44a7f4d12bba024c862a7a811b79547c6a8030b1",
   "repository": {
     "type": "git",
     "url": "http://corp-gitlab-01.domst.st.net/products/apia/ApiaNPMPackages.git",