@m4l/styles 7.1.7 → 7.1.8

package/types/types.d.ts

@@ -16,14 +16,13 @@ export type SemanticColorOptionsType = 'info' | 'success' | 'warning' | 'error';
  */
 export type ComponentPalletColor = 'primary' | 'default' | SemanticColorOptionsType;
 export type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
-export type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'oxford' | 'middle' | 'acid' | 'flame' | 'crayon';
+export type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'onyx' | 'oxford' | 'middle' | 'acid' | 'flame' | 'crayon';
 export interface Colors {
     /**
      * ToneOpacity se usa para colorear el fondo de los celdas en el compksonente grid.
      * Requiere un todo de 100 en alpha pero basado en el color de opacidad con fondo ligth o dark.
      */
-    toneOpacity10: string;
-    toneOpacity20: string;
+    5: string;
     10: string;
     20: string;
     30: string;
@@ -33,7 +32,7 @@ export interface Colors {
     70: string;
     80: string;
     90: string;
-    100: string;
+    95: string;
 }
 export interface OpacityColors {
     10: string;
@@ -43,28 +42,48 @@ export interface OpacityColors {
     50: string;
     60: string;
     70: string;
+    80?: string;
 }
 export interface PresetColor {
     main: string;
-    contrastText: string;
-    light: string;
-    lighter: string;
-    toneOpacityLight: string;
+    enabledLight: string;
+    enabledDark: string;
+    enabledOpacityLight: string;
+    enabledOpacityDark: string;
     /**
      * Permite definir fondos de componentes en estados hover dependiendo del modo de la aplicación web.
      */
-    opacityHoverLight: string;
-    opacityHoverDark: string;
+    hoverLight: string;
+    hoverDark: string;
+    hoverOpacityLight: string;
+    hoverOpacityDark: string;
     /**
      * Permite definir fondos de componentes en estados focus dependiendo del modo de la aplicación web.
      */
-    opacityFocusLight: string;
-    opacityFocusDark: string;
+    focusLight: string;
+    focusDark: string;
+    focusOpacityLight: string;
+    focusOpacityDark: string;
+    /**
+     * Permite definir fondos de componentes en estados seleccionados dependiendo del modo de la aplicación web.
+     */
+    selectedLight: string;
+    selectedDark: string;
+    selectedOpacityLight: string;
+    selectedOpacityDark: string;
     /**
      * Permite definir fondos de componentes en estados active dependiendo del modo de la aplicación web.
      */
-    opacityActiveLight: string;
-    opacityActiveDark: string;
+    activeLight: string;
+    activeDark: string;
+    activeOpacityLight: string;
+    activeOpacityDark: string;
+    opacityLight: string;
+    opacityDark: string;
+    contrastText: string;
+    light: string;
+    lighter: string;
+    toneOpacityLight: string;
     dark: string;
     darker: string;
     toneOpacityDark: string;
@@ -85,7 +104,7 @@ export type ThemePresetColors = Record<ThemeUserColor, PresetColor>;
 /**
  * Son los colores semanticos en formato PresetColor
  */
-export type SemanticPresetColors = Record<SemanticColorOptionsType, Omit<PresetColor, 'borderMainDark' | 'borderMainLight'>>;
+export type SemanticPresetColors = Record<SemanticColorOptionsType, Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'selectedLight' | 'selectedDark' | 'selectedOpacityLight' | 'selectedOpacityDark'>>;
 /**
  * Son los colores de las ocpiones del tema, en formato PalletColor
  */
@@ -93,11 +112,11 @@ export type ThemePaletteColors = Record<ThemeUserColor, PaletteColor>;
 /**
  * Son las opcines de paleta de colores semánticos en formato PaletteColor
  */
-export type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible' | 'selected'>>;
+export type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible' | 'selected' | 'selectedOpacity'>>;
 /**
  * Es la configuración de color que se usa fabricar la paleta "default", se encuentra en formato PaletteColor.
  */
-export type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'contrastText'> & {
+export type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'contrastText' | 'selectedLight' | 'selectedDark' | 'selectedOpacityLight' | 'selectedOpacityDark'> & {
     mainLight: string;
     mainDark: string;
 };
@@ -111,6 +130,7 @@ export type ColorState = 'warning' | 'delete' | 'info' | 'success';
  */
 export interface ChipColor {
     contrastText: string;
+    semanticText: string;
     backgroundColor: string;
     backgroundHover: string;
     backgroundActive: string;
@@ -118,7 +138,7 @@ export interface ChipColor {
 /**
  * Lista de opciones de colores para pintar los chips
  */
-export type ChipColorOptions = 'default' | 'warning' | 'warningOpacity' | 'error' | 'errorOpacity' | 'success' | 'successOpacity' | 'info' | 'infoOpacity';
+export type ChipColorOptions = 'default' | 'defaultOpacity' | 'warning' | 'warningOpacity' | 'error' | 'errorOpacity' | 'success' | 'successOpacity' | 'info' | 'infoOpacity';
 /**
  * Representa la definición de la lista de colores para usarse en los chips. Son los colores con los que se van a pintar el componente chip.
  */

package/utils/getPaletteByPreset.d.ts

@@ -15,28 +15,36 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly main: string;
             readonly dark: string;
             readonly contrastText: string;
-            readonly active: string;
-            readonly focusVisible: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly focusVisible: string;
+            readonly selected: string;
+            readonly selectedOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
-            readonly selected: string;
         };
         readonly default: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly contrastText: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -51,7 +59,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly neutral: string;
             readonly surface: string;
             readonly hover: string;
-            readonly paper: "#00000000";
+            readonly backdrop: string;
+            readonly paper: "#000";
         };
         readonly chips: import('../types').BaseChipColors;
         readonly border: {
@@ -73,61 +82,77 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
         };
         readonly info: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
         readonly success: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
         readonly warning: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
         readonly error: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -140,28 +165,36 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly main: string;
             readonly dark: string;
             readonly contrastText: string;
-            readonly active: string;
-            readonly focusVisible: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly focusVisible: string;
+            readonly selected: string;
+            readonly selectedOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
-            readonly selected: string;
         };
         readonly default: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly contrastText: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
@@ -176,7 +209,8 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly neutral: string;
             readonly surface: string;
             readonly hover: string;
-            readonly paper: "#00000000";
+            readonly backdrop: string;
+            readonly paper: "#000";
         };
         readonly chips: import('../types').BaseChipColors;
         readonly border: {
@@ -198,61 +232,77 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
         };
         readonly info: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
         readonly success: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
         readonly warning: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };
         readonly error: {
             readonly selected: string;
+            readonly selectedOpacity: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
             readonly main: string;
             readonly contrastText: string;
-            readonly active: string;
+            readonly enabled: string;
+            readonly enabledOpacity: string;
             readonly hover: string;
             readonly hoverOpacity: string;
-            readonly activeOpacity: string;
+            readonly focus: string;
             readonly focusOpacity: string;
+            readonly active: string;
+            readonly activeOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
         };

package/utils/getPaletteByPreset.js

@@ -1,12 +1,12 @@
-import { P as c, a as u, b } from "../theme/palette/presetColors.js";
-import { B as e } from "../theme/palette/baseColors.js";
+import { P as a, a as y, b as p } from "../theme/palette/presetColors.js";
+import { B as s } from "../theme/palette/baseColors.js";
 import { C as d } from "../theme/palette/commonColors.js";
 import { G as n } from "../theme/palette/greyPalette.js";
-import { S as i, a as l } from "../theme/palette/semanticColors.js";
-import { B as r } from "../theme/palette/baseOpacityColors.js";
-import { B as f, a as m } from "../theme/palette/defaultColors.js";
-import { B as g, a as O } from "../theme/palette/baseChipsPalette.js";
-const a = {
+import { S as o, a as t } from "../theme/palette/semanticColors.js";
+import { B as i } from "../theme/palette/baseOpacityColors.js";
+import { B as f, a as O } from "../theme/palette/defaultColors.js";
+import { B as m, a as u } from "../theme/palette/baseChipsPalette.js";
+const l = {
   light: {
     scrollBar: "#5663763D",
     gridHover: "#FCFCFC"
@@ -15,72 +15,78 @@ const a = {
     scrollBar: "#5663765D",
     gridHover: "#282E2E"
   }
-}, V = (t) => {
-  const o = u?.[t], s = b?.[t];
+}, V = (c) => {
+  const e = y?.[c], r = p?.[c];
   return {
     light: {
       mode: "light",
       common: d,
       primary: {
-        ...o
+        ...e
       },
       default: {
         ...f,
-        selected: o.selected,
-        focusVisible: o.focusVisible,
-        contrastText: e.onyx[20]
+        selected: e.selected,
+        selectedOpacity: e.selectedOpacity,
+        focusVisible: e.focusVisible,
+        contrastText: s.onyx[20]
       },
-      divider: e.coolGrey[20],
+      divider: s.coolGrey[20],
       text: {
-        primary: e.onyx[20],
-        secondary: e.coolGrey[50],
-        disabled: e.oxford[30]
+        primary: s.onyx[20],
+        secondary: s.coolGrey[50],
+        disabled: s.oxford[30]
       },
       background: {
-        default: e.marbleLight[10],
-        neutral: e.marbleLight[30],
-        surface: e.marbleLight[50],
+        default: s.marbleLight[10],
+        neutral: s.marbleLight[30],
+        surface: s.marbleLight[50],
         hover: f.hover,
+        backdrop: i.onyx[80] || "#000",
         //por compatibilidad de mui
-        paper: "#00000000"
+        paper: "#000"
       },
-      chips: g,
+      chips: m,
       border: {
-        main: c[t]?.borderMainLight,
-        default: r.oxford[40],
-        secondary: r.oxford[30],
-        dens: r.oxford[60],
-        disabled: r.oxford[10],
-        error: i.error.main
+        main: a[c]?.borderMainLight,
+        default: i.oxford[40],
+        secondary: i.oxford[30],
+        dens: i.oxford[60],
+        disabled: i.oxford[10],
+        error: o.error.main
       },
       general: {
-        scrollBar: a.light.scrollBar,
-        gridHover: a.light.gridHover
+        scrollBar: l.light.scrollBar,
+        gridHover: l.light.gridHover
       },
       grey: n,
       skeleton: {
-        default: r.oxford[10],
-        transition: r.oxford[20]
+        default: i.oxford[10],
+        transition: i.oxford[20]
       },
       info: {
-        ...i.info,
-        selected: o.selected,
-        focusVisible: o.focusVisible
+        ...o.info,
+        selected: e.selected,
+        selectedOpacity: e.selectedOpacity,
+        focusVisible: e.focusVisible
       },
       success: {
-        ...i.success,
-        selected: o.selected,
-        focusVisible: o.focusVisible
+        ...o.success,
+        selected: e.selected,
+        selectedOpacity: e.selectedOpacity,
+        focusVisible: e.focusVisible
       },
       warning: {
-        ...i.warning,
-        selected: o.selected,
-        focusVisible: o.focusVisible
+        ...o.warning,
+        selected: e.selected,
+        selectedOpacity: e.selectedOpacity,
+        focusVisible: e.focusVisible
       },
       error: {
-        ...i.error,
-        selected: o.selected,
-        focusVisible: o.focusVisible
+        ...o.error,
+        selected: e.selected,
+        selectedOpacity: e.selectedOpacity,
+        focusVisible: e.focusVisible
       }
     },
     dark: {
@@ -88,67 +94,73 @@ const a = {
       common: d,
       // no definido en figma
       primary: {
-        ...s
+        ...r
       },
       default: {
-        ...m,
-        selected: s?.selected,
-        focusVisible: s?.focusVisible,
-        contrastText: e.marbleLight[30]
+        ...O,
+        selected: r?.selected,
+        selectedOpacity: r?.selectedOpacity,
+        focusVisible: r?.focusVisible,
+        contrastText: s.marbleLight[30]
       },
       text: {
-        primary: e.marbleLight[30],
-        secondary: e.coolGrey[20],
-        disabled: e.coolGrey[50]
+        primary: s.marbleLight[30],
+        secondary: s.coolGrey[20],
+        disabled: s.coolGrey[50]
       },
-      divider: e.coolGrey[80],
+      divider: s.coolGrey[80],
       background: {
-        default: e.onyx[40],
-        neutral: e.onyx[50],
-        surface: e.onyx[60],
-        hover: m.hover,
+        default: s.onyx[40],
+        neutral: s.onyx[50],
+        surface: s.onyx[60],
+        hover: O.hover,
+        backdrop: i.onyx[80] || "#000",
         //por compatibilidad de mui
-        paper: "#00000000"
+        paper: "#000"
       },
-      chips: O,
+      chips: u,
       border: {
-        main: c[t]?.borderMainDark,
-        default: r.mint[50],
-        secondary: r.mint[40],
-        dens: r.mint[60],
-        disabled: r.mint[20],
-        error: l.error.main
+        main: a[c]?.borderMainDark,
+        default: i.mint[50],
+        secondary: i.mint[40],
+        dens: i.mint[60],
+        disabled: i.mint[20],
+        error: t.error.main
       },
       general: {
         // no definido en figma
-        scrollBar: a.light.scrollBar,
-        gridHover: a.light.gridHover
+        scrollBar: l.light.scrollBar,
+        gridHover: l.light.gridHover
       },
       grey: n,
       // no definido en figma
       skeleton: {
-        default: r.mint[20],
-        transition: r.mint[40]
+        default: i.mint[20],
+        transition: i.mint[40]
       },
       info: {
-        ...l.info,
-        selected: s?.selected,
-        focusVisible: s.focusVisible
+        ...t.info,
+        selected: r?.selected,
+        selectedOpacity: r?.selectedOpacity,
+        focusVisible: r.focusVisible
       },
       success: {
-        ...l.success,
-        selected: s?.selected,
-        focusVisible: s.focusVisible
+        ...t.success,
+        selected: r?.selected,
+        selectedOpacity: r?.selectedOpacity,
+        focusVisible: r.focusVisible
       },
       warning: {
-        ...l.warning,
-        selected: s?.selected,
-        focusVisible: s.focusVisible
+        ...t.warning,
+        selected: r?.selected,
+        selectedOpacity: r?.selectedOpacity,
+        focusVisible: r.focusVisible
       },
       error: {
-        ...l.error,
-        selected: s?.selected,
-        focusVisible: s.focusVisible
+        ...t.error,
+        selected: r?.selected,
+        selectedOpacity: r?.selectedOpacity,
+        focusVisible: r.focusVisible
       }
     }
   };