@m4l/styles 7.1.6 → 7.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "7.1.6",
+  "version": "7.1.7",
   "license": "UNLICENSED",
   "author": "m4l team",
   "publishConfig": {

package/theme/palette/defaultColors.d.ts

@@ -7,8 +7,8 @@ export declare const PRESET_DEFAULT: DefaultPresetColor;
 /**
  * Opción de paleta default en modo light, se usa para colorear componentes con la variante semántica de tipo default
  */
-export declare const BASE_DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;
+export declare const BASE_DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'selected' | 'contrastText'>;
 /**
  * Opción de paleta default en modo dark, se usa para colorear componentes con la variante semántica de tipo default
  */
-export declare const BASE_DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;
+export declare const BASE_DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'selected' | 'contrastText'>;

package/theme/palette/presetColors.js

@@ -123,6 +123,7 @@ const t = {
     hoverOpacity: t.patronus.opacityHoverLight,
     focusOpacity: t.patronus.opacityFocusLight,
     activeOpacity: t.patronus.opacityActiveLight,
+    selected: t.patronus.opacityHoverLight,
     //Por compatibilidad con MUI
     light: t.patronus.light,
     dark: t.patronus.dark
@@ -138,6 +139,7 @@ const t = {
     hoverOpacity: t.blaze.opacityHoverLight,
     focusOpacity: t.blaze.opacityFocusLight,
     activeOpacity: t.blaze.opacityActiveLight,
+    selected: t.blaze.opacityHoverLight,
     //Por compatibilidad con MUI
     light: t.blaze.light,
     dark: t.blaze.dark
@@ -153,6 +155,7 @@ const t = {
     hoverOpacity: t.brown.opacityHoverLight,
     focusOpacity: t.brown.opacityFocusLight,
     activeOpacity: t.brown.opacityActiveLight,
+    selected: t.brown.opacityHoverLight,
     //Por compatibilidad con MUI
     light: t.brown.light,
     dark: t.brown.dark
@@ -168,6 +171,7 @@ const t = {
     hoverOpacity: t.grass.opacityHoverLight,
     focusOpacity: t.grass.opacityFocusLight,
     activeOpacity: t.grass.opacityActiveLight,
+    selected: t.grass.opacityHoverLight,
     //Por compatibilidad con MUI
     light: t.grass.light,
     dark: t.grass.dark
@@ -183,6 +187,7 @@ const t = {
     hoverOpacity: t.turqui.opacityHoverLight,
     focusOpacity: t.turqui.opacityFocusLight,
     activeOpacity: t.turqui.opacityActiveLight,
+    selected: t.turqui.opacityHoverLight,
     //Por compatibilidad con MUI
     light: t.turqui.light,
     dark: t.turqui.dark
@@ -201,6 +206,7 @@ const t = {
     hoverOpacity: t.patronus.opacityHoverDark,
     focusOpacity: t.patronus.opacityFocusDark,
     activeOpacity: t.patronus.opacityActiveDark,
+    selected: t.patronus.opacityHoverDark,
     //Por compatibilidad con MUI
     light: t.patronus.light,
     dark: t.patronus.dark
@@ -218,6 +224,7 @@ const t = {
     hoverOpacity: t.blaze.opacityHoverDark,
     focusOpacity: t.blaze.opacityFocusDark,
     activeOpacity: t.blaze.opacityActiveDark,
+    selected: t.blaze.opacityHoverDark,
     //Por compatibilidad con MUI
     light: t.blaze.light,
     dark: t.blaze.dark
@@ -235,6 +242,7 @@ const t = {
     hoverOpacity: t.brown.opacityHoverDark,
     focusOpacity: t.brown.opacityFocusDark,
     activeOpacity: t.brown.opacityActiveDark,
+    selected: t.brown.opacityHoverDark,
     //Por compatibilidad con MUI
     light: t.brown.light,
     dark: t.brown.dark
@@ -252,6 +260,7 @@ const t = {
     hoverOpacity: t.grass.opacityHoverDark,
     focusOpacity: t.grass.opacityFocusDark,
     activeOpacity: t.grass.opacityActiveDark,
+    selected: t.grass.opacityHoverDark,
     //Por compatibilidad con MUI
     light: t.grass.light,
     dark: t.grass.dark
@@ -269,6 +278,7 @@ const t = {
     hoverOpacity: t.turqui.opacityHoverDark,
     focusOpacity: t.turqui.opacityFocusDark,
     activeOpacity: t.turqui.opacityActiveDark,
+    selected: t.turqui.opacityHoverDark,
     //Por compatibilidad con MUI
     light: t.turqui.light,
     dark: t.turqui.dark

package/types/augmentations.d.ts

@@ -31,6 +31,7 @@ declare module '@mui/material/styles' {
     focusOpacity: string;
     opacity: string;
     toneOpacity: string;
+    selected: string;
   }
 
   export interface TypeBackground {

package/types/types.d.ts

@@ -93,7 +93,7 @@ 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'>>;
+export type SemanticsPaletteColors = Record<SemanticColorOptionsType, Omit<PaletteColor, 'focusVisible' | 'selected'>>;
 /**
  * Es la configuración de color que se usa fabricar la paleta "default", se encuentra en formato PaletteColor.
  */

package/utils/getPaletteByPreset.d.ts

@@ -23,8 +23,10 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
+            readonly selected: string;
         };
         readonly default: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly contrastText: string;
             readonly light: string;
@@ -70,6 +72,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly transition: string;
         };
         readonly info: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
@@ -84,6 +87,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly toneOpacity: string;
         };
         readonly success: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
@@ -98,6 +102,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly toneOpacity: string;
         };
         readonly warning: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
@@ -112,6 +117,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly toneOpacity: string;
         };
         readonly error: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
@@ -142,8 +148,10 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly focusOpacity: string;
             readonly opacity: string;
             readonly toneOpacity: string;
+            readonly selected: string;
         };
         readonly default: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly contrastText: string;
             readonly light: string;
@@ -189,6 +197,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly transition: string;
         };
         readonly info: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
@@ -203,6 +212,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly toneOpacity: string;
         };
         readonly success: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
@@ -217,6 +227,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly toneOpacity: string;
         };
         readonly warning: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: string;
@@ -231,6 +242,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly toneOpacity: string;
         };
         readonly error: {
+            readonly selected: string;
             readonly focusVisible: string;
             readonly light: string;
             readonly dark: 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 r } from "../theme/palette/baseColors.js";
-import { C as n } from "../theme/palette/commonColors.js";
-import { G as d } from "../theme/palette/greyPalette.js";
-import { S as s, a } from "../theme/palette/semanticColors.js";
-import { B as o } from "../theme/palette/baseOpacityColors.js";
+import { B as e } 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 t = {
+const a = {
   light: {
     scrollBar: "#5663763D",
     gridHover: "#FCFCFC"
@@ -15,130 +15,140 @@ const t = {
     scrollBar: "#5663765D",
     gridHover: "#282E2E"
   }
-}, V = (l) => {
-  const i = u?.[l], e = b?.[l];
+}, V = (t) => {
+  const o = u?.[t], s = b?.[t];
   return {
     light: {
       mode: "light",
-      common: n,
+      common: d,
       primary: {
-        ...i
+        ...o
       },
       default: {
         ...f,
-        focusVisible: i.focusVisible,
-        contrastText: r.onyx[20]
+        selected: o.selected,
+        focusVisible: o.focusVisible,
+        contrastText: e.onyx[20]
       },
-      divider: r.coolGrey[20],
+      divider: e.coolGrey[20],
       text: {
-        primary: r.onyx[20],
-        secondary: r.coolGrey[50],
-        disabled: r.oxford[30]
+        primary: e.onyx[20],
+        secondary: e.coolGrey[50],
+        disabled: e.oxford[30]
       },
       background: {
-        default: r.marbleLight[10],
-        neutral: r.marbleLight[30],
-        surface: r.marbleLight[50],
+        default: e.marbleLight[10],
+        neutral: e.marbleLight[30],
+        surface: e.marbleLight[50],
         hover: f.hover,
         //por compatibilidad de mui
         paper: "#00000000"
       },
       chips: g,
       border: {
-        main: c[l]?.borderMainLight,
-        default: o.oxford[40],
-        secondary: o.oxford[30],
-        dens: o.oxford[60],
-        disabled: o.oxford[10],
-        error: s.error.main
+        main: c[t]?.borderMainLight,
+        default: r.oxford[40],
+        secondary: r.oxford[30],
+        dens: r.oxford[60],
+        disabled: r.oxford[10],
+        error: i.error.main
       },
       general: {
-        scrollBar: t.light.scrollBar,
-        gridHover: t.light.gridHover
+        scrollBar: a.light.scrollBar,
+        gridHover: a.light.gridHover
       },
-      grey: d,
+      grey: n,
       skeleton: {
-        default: o.oxford[10],
-        transition: o.oxford[20]
+        default: r.oxford[10],
+        transition: r.oxford[20]
       },
       info: {
-        ...s.info,
-        focusVisible: i.focusVisible
+        ...i.info,
+        selected: o.selected,
+        focusVisible: o.focusVisible
       },
       success: {
-        ...s.success,
-        focusVisible: i.focusVisible
+        ...i.success,
+        selected: o.selected,
+        focusVisible: o.focusVisible
       },
       warning: {
-        ...s.warning,
-        focusVisible: i.focusVisible
+        ...i.warning,
+        selected: o.selected,
+        focusVisible: o.focusVisible
       },
       error: {
-        ...s.error,
-        focusVisible: i.focusVisible
+        ...i.error,
+        selected: o.selected,
+        focusVisible: o.focusVisible
       }
     },
     dark: {
       mode: "dark",
-      common: n,
+      common: d,
       // no definido en figma
       primary: {
-        ...e
+        ...s
       },
       default: {
         ...m,
-        focusVisible: e?.focusVisible,
-        contrastText: r.marbleLight[30]
+        selected: s?.selected,
+        focusVisible: s?.focusVisible,
+        contrastText: e.marbleLight[30]
       },
       text: {
-        primary: r.marbleLight[30],
-        secondary: r.coolGrey[20],
-        disabled: r.coolGrey[50]
+        primary: e.marbleLight[30],
+        secondary: e.coolGrey[20],
+        disabled: e.coolGrey[50]
       },
-      divider: r.coolGrey[80],
+      divider: e.coolGrey[80],
       background: {
-        default: r.onyx[40],
-        neutral: r.onyx[50],
-        surface: r.onyx[60],
+        default: e.onyx[40],
+        neutral: e.onyx[50],
+        surface: e.onyx[60],
         hover: m.hover,
         //por compatibilidad de mui
         paper: "#00000000"
       },
       chips: O,
       border: {
-        main: c[l]?.borderMainDark,
-        default: o.mint[50],
-        secondary: o.mint[40],
-        dens: o.mint[60],
-        disabled: o.mint[20],
-        error: a.error.main
+        main: c[t]?.borderMainDark,
+        default: r.mint[50],
+        secondary: r.mint[40],
+        dens: r.mint[60],
+        disabled: r.mint[20],
+        error: l.error.main
       },
       general: {
         // no definido en figma
-        scrollBar: t.light.scrollBar,
-        gridHover: t.light.gridHover
+        scrollBar: a.light.scrollBar,
+        gridHover: a.light.gridHover
       },
-      grey: d,
+      grey: n,
       // no definido en figma
       skeleton: {
-        default: o.mint[20],
-        transition: o.mint[40]
+        default: r.mint[20],
+        transition: r.mint[40]
       },
       info: {
-        ...a.info,
-        focusVisible: e.focusVisible
+        ...l.info,
+        selected: s?.selected,
+        focusVisible: s.focusVisible
       },
       success: {
-        ...a.success,
-        focusVisible: e.focusVisible
+        ...l.success,
+        selected: s?.selected,
+        focusVisible: s.focusVisible
       },
       warning: {
-        ...a.warning,
-        focusVisible: e.focusVisible
+        ...l.warning,
+        selected: s?.selected,
+        focusVisible: s.focusVisible
       },
       error: {
-        ...a.error,
-        focusVisible: e.focusVisible
+        ...l.error,
+        selected: s?.selected,
+        focusVisible: s.focusVisible
       }
     }
   };