@apia/theme 0.0.9-alpha.0 → 0.1.0

package/cleanDist.json

@@ -0,0 +1,3 @@
+{
+  "cleanDist": 0.006456232710121412
+}

package/dist/index.d.ts

@@ -1,50 +1,13 @@
-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;
+import * as react from 'react';
+import { ReactNode, FC } from 'react';
+import { Theme, ResponsiveStyleValue, ThemeUICSSObject } from 'theme-ui';
 
 interface TThemeProvider {
     children: ReactNode;
     customTheme?: Theme;
 }
+declare const ThemeProviderContext: react.Context<Theme>;
 declare const ThemeProvider: ({ children, customTheme }: TThemeProvider) => theme_ui_jsx_runtime.JSX.Element;
 
 /**
@@ -78,7 +41,7 @@ declare function responsive<T>(values: {
  *    pt: spacing(8)
  * }
  */
-declare function spacing(index: number): number | false | (number | _theme_ui_css.ThemeUIEmpty)[];
+declare function spacing(index: number): ResponsiveStyleValue<number>;
 declare const smallButton: {
     py: number;
     px: number;
@@ -90,4 +53,281 @@ declare function getVariant(variant: string): {
     'data-variant': string;
 };
 
-export { ThemeProvider, focusOutline, getVariant, injectStyles, makeStyledComponent, responsive, smallButton, spacing, useMainTheme };
+interface TGetColorsAndStatesOptions {
+    mergeObject?: Record<string, any>;
+    states?: {
+        active?: boolean;
+        checked?: boolean;
+        default?: boolean;
+        disabled?: boolean;
+        focus?: boolean;
+        hover?: boolean;
+        readonly?: boolean;
+        selected?: boolean;
+    };
+}
+/**
+ * Esta función es útil para devolver los estados calculados por la aplicación
+ * dentro del objeto colors de ThemeUI. Si se desea calcular los estados en
+ * base a un color, se debe utilizar el método getColorsAndStatesByColor.
+ */
+declare function getColorsAndStatesByPath(path: string, options?: TGetColorsAndStatesOptions): Record<string, ThemeUICSSObject>;
+
+interface IColorDefinition {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: string;
+}
+interface IActionOpacity {
+    light: string;
+    dark: string;
+}
+interface TStates {
+    active?: boolean;
+    checked?: boolean;
+    default?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    readonly?: boolean;
+    selected?: boolean;
+}
+type TGetColorStateDefinition = Pick<ThemeUICSSObject, 'backgroundColor' | 'borderColor' | 'borderLeftColor' | 'borderRightColor' | 'borderBottomColor' | 'borderTopColor' | 'color'>;
+type TColorStateRetriever = (color: string, state: keyof TStates) => string;
+type TStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates) => TGetColorStateDefinition;
+type TStatesRetriever = (definition: Partial<TGetColorStateDefinition>, states?: TStates) => ThemeUICSSObject;
+interface TActionDefinition<OpacityColor = undefined | string | IActionOpacity> {
+    active: OpacityColor;
+    activeOpacity: number;
+    disabled: OpacityColor;
+    disabledOpacity: number;
+    focus: OpacityColor;
+    focusOpacity: number;
+    hover: OpacityColor;
+    hoverOpacity: number;
+    readonly: OpacityColor;
+    readonlyOpacity: number;
+    selected: OpacityColor;
+    selectedOpacity: number;
+}
+type TColorModifier = (color: string, ratio?: number) => string;
+interface TPalette<ColorDefinition = IColorDefinition, ColorModifier = TColorModifier, ActionDefinition = TActionDefinition> {
+    action: ActionDefinition;
+    background: {
+        default: string;
+        overlay: string;
+        paper: string;
+    };
+    border: {
+        article: string;
+        field: string;
+        section: string;
+    };
+    common: {
+        white: string;
+        black: string;
+    };
+    error: ColorDefinition;
+    gray?: {
+        100: string;
+        150: string;
+        200: string;
+        250: string;
+        300: string;
+        350: string;
+        400: string;
+        450: string;
+        500: string;
+        550: string;
+        600: string;
+        650: string;
+        700: string;
+        750: string;
+        800: string;
+        850: string;
+        900: string;
+        950: string;
+    };
+    info: ColorDefinition;
+    primary: ColorDefinition;
+    secondary: ColorDefinition;
+    spacing: (index: number) => ResponsiveStyleValue<number>;
+    success: ColorDefinition;
+    text: {
+        accent: string;
+        disabled: string;
+        icon: string;
+        link: string;
+        primary: string;
+        secondary: string;
+        title: string;
+    };
+    warning: ColorDefinition;
+    lightenRatio?: number;
+    darkenRatio?: number;
+    /**
+     * Acepta un ratio entre 0 y 100
+     */
+    lightenColor?: ColorModifier;
+    /**
+     * Acepta un ratio entre 0 y 100
+     */
+    darkenColor?: ColorModifier;
+    getContrastText?: ColorModifier;
+    responsive: typeof responsive;
+    queryColumnsMultiplier?: number;
+}
+type TBuildStateObject = <T extends Partial<ThemeUICSSObject>>(props: T, state: keyof Required<TStates> | 'checked') => ThemeUICSSObject;
+type TParsedPalette = Required<TPalette<Required<IColorDefinition>, TColorModifier, Required<TActionDefinition<IActionOpacity>>>> & {
+    buildStateObject: TBuildStateObject;
+    getColor: TColorStateRetriever;
+    getOneState: TStateRetriever;
+    getStatesForColors: TStatesRetriever;
+    getStatesFromDefinition: TStatesRetriever;
+    getStatesFromPath: typeof getColorsAndStatesByPath;
+};
+declare global {
+    interface Window {
+        currentPalette: TParsedPalette;
+        customPalette?: TPalette;
+        defaultPalette?: TPalette;
+    }
+}
+
+declare function getPalette(arg?: TPalette | boolean): TParsedPalette;
+
+/**
+ * Este método está pensado para usarse únicamente dentro de applyStates, si se
+ * desea obtener un objeto con las propiedades correspondientes a un estado,
+ * utilizar el método getColorStates.
+ */
+declare const applyStatesGetColor: TStatesRetriever;
+
+/**
+ * Este método acepta un objeto con backgroundColor y borderColor y aplica el
+ * estado pasado como segundo parámetro de la siguiente manera:
+ *
+ * Si se pasa backgroundColor, se devuelve un backgroundColor y un color, que
+ * corresponden al backgroundColor con el estado aplicado y un color calculado
+ * con la función getContrastText.
+ *
+ * Si se pasa borderColor, se devuelve un nuevo borderColor calculado con el
+ * estado aplicado.
+ */
+declare const getColorState: TStateRetriever;
+
+/**
+ * Con este método es posible construir un objeto con las propiedades
+ * necesarias para aplicar los colores correspondientes a los estados deseados
+ * a partir de la definición provista.
+ */
+declare const getColorStates: TStatesRetriever;
+
+/**
+ * Esta función calcula los colores de los estados a partir de la definición
+ * pasada.
+ */
+declare function getColorsAndStatesByDefinition(definition: Partial<TGetColorStateDefinition>, options?: TGetColorsAndStatesOptions): ThemeUICSSObject;
+
+/**
+ * Esta función arma un objeto con los colores que se deben aplicar para
+ * garantizar que el resultado sea el esperado, por ejemplo, al aplicar un
+ * color a un border. Esto es así ya que en ThemeUI hay situaciones en las que
+ * si no se aplican el color de borde a cada uno de los lados, no se aplica el
+ * color deseado.
+ *
+ * Ejemplo de lo antedicho es:
+ *
+ * borderRight: '1px solid',
+ * borderColor: 'red'.
+ *
+ * En este caso, el borde derecho no será rojo como se espera, ya que la
+ * propiedad borderRight aplicará un borderRightColor: 'initial', que solamente
+ * puede ser reescrito por borderRightColor: 'red'.
+ */
+declare function getColorsByDefinition(definition: Partial<TGetColorStateDefinition>, options?: {
+    mergeObject?: Record<string, any>;
+}): TGetColorStateDefinition & Record<string, any>;
+
+/**
+ * Esta función NO CALCULA ningún color, simplemente devuelve un objeto con las
+ * rutas de color con el formato de ThemeUI. Es útil cuando se desea aplicar
+ * colores definidos en el objeto colors.
+ *
+ * Si se desea generar un objeto con los colores a partir de una definición de
+ * colores del tipo TGetColorStateDefinition se debe utilizar el método
+ * getColorsByDefinition.
+ */
+declare function getColorsByPath(path: string, options?: {
+    mergeObject?: Record<string, any>;
+}): TGetColorStateDefinition & Record<string, any>;
+
+/**
+
+ * Este método acepta un color y aplica el estado pasado como segundo
+
+ * parámetro. De esta forma se puede obtener el color correspondiente al estado
+
+ * calculado automáticamente por la aplicación.
+
+ */
+declare const getOneColorState: TColorStateRetriever;
+
+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;
+/**
+ * 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({
+ *  layout: {
+ *    panels: {
+ *      myPanel: {
+ *        ...
+ *      }
+ *    }
+ *  }
+ * })
+ */
+declare function injectStyles(styles: ThemeUICSSObject): void;
+
+export { ThemeProvider, ThemeProviderContext, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getPalette, getVariant, injectStyles, makeStyledComponent, responsive, smallButton, spacing, useMainTheme };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}