@m4l/styles 7.1.4 → 7.1.6

package/theme/palette/baseChipsPalette.js

@@ -0,0 +1,117 @@
+import { B as o } from "./baseColors.js";
+import { B as r } from "./baseOpacityColors.js";
+const e = {
+  default: {
+    contrastText: o.marbleLight[10],
+    backgroundColor: o.oxford[40],
+    backgroundHover: o.oxford[60],
+    backgroundActive: o.oxford[70]
+  },
+  warning: {
+    contrastText: o.onyx[20],
+    backgroundColor: o.middleYellow[40],
+    backgroundHover: o.middleYellow[60],
+    backgroundActive: o.middleYellow[70]
+  },
+  warningOpacity: {
+    contrastText: o.onyx[20],
+    backgroundColor: r.middle[40],
+    backgroundHover: r.middle[60],
+    backgroundActive: r.middle[70]
+  },
+  error: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: o.flameRed[50],
+    backgroundHover: o.flameRed[60],
+    backgroundActive: o.flameRed[70]
+  },
+  errorOpacity: {
+    contrastText: o.onyx[20],
+    backgroundColor: r.flame[30],
+    backgroundHover: r.flame[50],
+    backgroundActive: r.flame[70]
+  },
+  success: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: o.acidGreen[50],
+    backgroundHover: o.acidGreen[60],
+    backgroundActive: o.acidGreen[70]
+  },
+  successOpacity: {
+    contrastText: o.onyx[20],
+    backgroundColor: r.acid[20],
+    backgroundHover: r.acid[40],
+    backgroundActive: r.acid[70]
+  },
+  info: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: o.crayonBlue[50],
+    backgroundHover: o.crayonBlue[60],
+    backgroundActive: o.crayonBlue[70]
+  },
+  infoOpacity: {
+    contrastText: o.onyx[20],
+    backgroundColor: r.crayon[20],
+    backgroundHover: r.crayon[40],
+    backgroundActive: r.crayon[60]
+  }
+}, n = {
+  default: {
+    contrastText: o.marbleLight[10],
+    backgroundColor: o.oxford[40],
+    backgroundHover: o.oxford[60],
+    backgroundActive: o.oxford[70]
+  },
+  warning: {
+    contrastText: o.onyx[20],
+    backgroundColor: o.middleYellow[40],
+    backgroundHover: o.middleYellow[60],
+    backgroundActive: o.middleYellow[70]
+  },
+  warningOpacity: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: r.middle[40],
+    backgroundHover: r.middle[60],
+    backgroundActive: r.middle[70]
+  },
+  error: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: o.flameRed[50],
+    backgroundHover: o.flameRed[60],
+    backgroundActive: o.flameRed[70]
+  },
+  errorOpacity: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: r.flame[30],
+    backgroundHover: r.flame[60],
+    backgroundActive: r.flame[70]
+  },
+  success: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: o.acidGreen[50],
+    backgroundHover: o.acidGreen[60],
+    backgroundActive: o.acidGreen[70]
+  },
+  successOpacity: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: r.acid[20],
+    backgroundHover: r.acid[40],
+    backgroundActive: r.acid[70]
+  },
+  info: {
+    contrastText: o.marbleLight[30],
+    backgroundColor: o.crayonBlue[50],
+    backgroundHover: o.crayonBlue[60],
+    backgroundActive: o.crayonBlue[70]
+  },
+  infoOpacity: {
+    contrastText: o.marbleLight[20],
+    backgroundColor: r.crayon[30],
+    backgroundHover: r.crayon[50],
+    backgroundActive: r.crayon[70]
+  }
+};
+export {
+  e as B,
+  n as a
+};

package/theme/palette/baseOpacityColors.js

@@ -66,8 +66,8 @@ const a = {
   },
   marble: {
     10: e(r.marbleLight[10], 0.08),
-    20: e(r.marbleLight[10], 0.16),
-    30: e(r.marbleLight[10], 0.12),
+    20: e(r.marbleLight[10], 0.12),
+    30: e(r.marbleLight[10], 0.16),
     40: e(r.marbleLight[10], 0.32),
     50: e(r.marbleLight[10], 0.48),
     60: e(r.marbleLight[10], 0.6),

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 DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;
+export declare const BASE_DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | '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 DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;
+export declare const BASE_DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'contrastText'>;

package/theme/palette/defaultColors.js

@@ -1,5 +1,5 @@
 import { B as i } from "./baseOpacityColors.js";
-import { B as o } from "./baseColors.js";
+import { B as a } from "./baseColors.js";
 const t = {
   mainLight: i.oxford[10],
   mainDark: i.mint[20],
@@ -7,32 +7,43 @@ const t = {
   light: i.oxford[20],
   dark: i.mint[30],
   darker: i.mint[50],
-  toneOpacityLight: o.oxford.toneOpacity10,
-  toneOpacityDark: o.oxford.toneOpacity20,
-  opacityLight: i.oxford[30],
-  opacityDark: i.oxford[30]
-}, c = {
+  // Tone colors
+  toneOpacityLight: a.oxford.toneOpacity10,
+  toneOpacityDark: a.oxford.toneOpacity20,
+  // opacity backgrounds light
+  opacityHoverLight: i.oxford[10],
+  opacityFocusLight: i.oxford[20],
+  opacityActiveLight: i.oxford[30],
+  // opacity backgrounds Dark
+  opacityHoverDark: i.marble[10],
+  opacityFocusDark: i.marble[20],
+  opacityActiveDark: i.marble[30]
+}, r = {
   main: t.mainLight,
-  focusActive: t.lighter,
+  active: t.lighter,
   hover: t.light,
   opacity: t.toneOpacityLight,
   toneOpacity: t.toneOpacityLight,
-  hoverOpacity: t.opacityLight,
+  hoverOpacity: t.opacityHoverLight,
+  focusOpacity: t.opacityFocusLight,
+  activeOpacity: t.opacityActiveLight,
   //Por compatibilidad con MUI
   light: t.light,
   dark: t.dark
-}, n = {
+}, e = {
   main: t.mainLight,
-  focusActive: t.lighter,
+  active: t.lighter,
   hover: t.dark,
   opacity: t.toneOpacityDark,
   toneOpacity: t.toneOpacityDark,
-  hoverOpacity: t.opacityDark,
+  hoverOpacity: t.opacityHoverDark,
+  focusOpacity: t.opacityFocusDark,
+  activeOpacity: t.opacityActiveDark,
   //Por compatibilidad con MUI
   light: t.light,
   dark: t.dark
 };
 export {
-  c as D,
-  n as a
+  r as B,
+  e as a
 };

package/theme/palette/presetColors.js

@@ -1,5 +1,5 @@
 import { B as a } from "./baseColors.js";
-import { B as r } from "./baseOpacityColors.js";
+import { B as i } from "./baseOpacityColors.js";
 const t = {
   patronus: {
     main: a.patronusBlue[50],
@@ -8,12 +8,20 @@ const t = {
     dark: a.patronusBlue[30],
     darker: a.patronusBlue[10],
     contrastText: a.marbleLight[30],
+    // Tone colors
     toneOpacityLight: a.patronusBlue.toneOpacity10,
     toneOpacityDark: a.patronusBlue.toneOpacity20,
-    opacityLight: r.patronus[10],
-    opacityDark: r.patronus[20],
-    borderMainDark: r.patronus[50],
-    borderMainLight: r.patronus[50]
+    // opacity backgrounds light
+    opacityHoverLight: i.patronus[10],
+    opacityFocusLight: i.patronus[20],
+    opacityActiveLight: i.patronus[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: i.patronus[20],
+    opacityFocusDark: i.patronus[30],
+    opacityActiveDark: i.patronus[40],
+    // border
+    borderMainDark: i.patronus[50],
+    borderMainLight: i.patronus[50]
   },
   turqui: {
     lighter: a.turquiBlue[70],
@@ -22,12 +30,20 @@ const t = {
     dark: a.turquiBlue[30],
     darker: a.turquiBlue[10],
     contrastText: a.marbleLight[30],
-    toneOpacityLight: a.marbleLight.toneOpacity10,
-    toneOpacityDark: a.marbleLight.toneOpacity20,
-    opacityLight: r.turqui[10],
-    opacityDark: r.turqui[20],
-    borderMainDark: r.turqui[50],
-    borderMainLight: r.turqui[50]
+    // Tone colors
+    toneOpacityLight: a.turquiBlue.toneOpacity10,
+    toneOpacityDark: a.turquiBlue.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: i.turqui[10],
+    opacityFocusLight: i.turqui[20],
+    opacityActiveLight: i.turqui[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: i.turqui[20],
+    opacityFocusDark: i.turqui[30],
+    opacityActiveDark: i.turqui[40],
+    // border
+    borderMainDark: i.turqui[50],
+    borderMainLight: i.turqui[50]
   },
   grass: {
     lighter: a.grassGreen[70],
@@ -36,12 +52,20 @@ const t = {
     dark: a.grassGreen[30],
     darker: a.grassGreen[10],
     contrastText: a.marbleLight[30],
+    // Tone colors
     toneOpacityLight: a.grassGreen.toneOpacity10,
     toneOpacityDark: a.grassGreen.toneOpacity20,
-    opacityLight: r.turqui[10],
-    opacityDark: r.turqui[20],
-    borderMainDark: r.turqui[50],
-    borderMainLight: r.turqui[50]
+    // opacity backgrounds light
+    opacityHoverLight: i.grass[10],
+    opacityFocusLight: i.grass[20],
+    opacityActiveLight: i.grass[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: i.grass[20],
+    opacityFocusDark: i.grass[30],
+    opacityActiveDark: i.grass[40],
+    // border
+    borderMainDark: i.grass[50],
+    borderMainLight: i.grass[50]
   },
   brown: {
     lighter: a.brown[70],
@@ -50,12 +74,20 @@ const t = {
     dark: a.brown[30],
     darker: a.brown[10],
     contrastText: a.marbleLight[30],
+    // Tone colors
     toneOpacityLight: a.brown.toneOpacity10,
     toneOpacityDark: a.brown.toneOpacity20,
-    opacityLight: r.turqui[10],
-    opacityDark: r.turqui[20],
-    borderMainDark: r.turqui[50],
-    borderMainLight: r.turqui[50]
+    // opacity backgrounds light
+    opacityHoverLight: i.brown[10],
+    opacityFocusLight: i.brown[20],
+    opacityActiveLight: i.brown[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: i.brown[20],
+    opacityFocusDark: i.brown[30],
+    opacityActiveDark: i.brown[40],
+    // border
+    borderMainDark: i.brown[50],
+    borderMainLight: i.brown[50]
   },
   blaze: {
     lighter: a.blazeOrange[70],
@@ -64,36 +96,48 @@ const t = {
     dark: a.blazeOrange[30],
     darker: a.blazeOrange[10],
     contrastText: a.marbleLight[30],
+    // Tone colors
     toneOpacityLight: a.blazeOrange.toneOpacity10,
     toneOpacityDark: a.blazeOrange.toneOpacity20,
-    opacityLight: r.blaze[10],
-    opacityDark: r.blaze[20],
-    borderMainDark: r.blaze[50],
-    borderMainLight: r.blaze[50]
+    // opacity backgrounds light
+    opacityHoverLight: i.blaze[10],
+    opacityFocusLight: i.blaze[20],
+    opacityActiveLight: i.blaze[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: i.blaze[20],
+    opacityFocusDark: i.blaze[30],
+    opacityActiveDark: i.blaze[40],
+    // border
+    borderMainDark: i.blaze[50],
+    borderMainLight: i.blaze[50]
   }
 }, s = {
   patronus: {
     main: t.patronus.main,
     focusVisible: t.patronus.light,
-    focusActive: t.patronus.lighter,
+    active: t.patronus.lighter,
     hover: t.patronus.light,
-    opacity: t.patronus.opacityLight,
+    opacity: t.patronus.opacityHoverLight,
     toneOpacity: t.patronus.toneOpacityLight,
     contrastText: t.patronus.contrastText,
+    hoverOpacity: t.patronus.opacityHoverLight,
+    focusOpacity: t.patronus.opacityFocusLight,
+    activeOpacity: t.patronus.opacityActiveLight,
     //Por compatibilidad con MUI
-    hoverOpacity: t.patronus.opacityLight,
     light: t.patronus.light,
     dark: t.patronus.dark
   },
   blaze: {
     main: t.blaze.main,
     focusVisible: t.blaze.light,
-    focusActive: t.blaze.lighter,
+    active: t.blaze.lighter,
     hover: t.blaze.light,
-    opacity: t.blaze.opacityLight,
+    opacity: t.blaze.opacityHoverLight,
     toneOpacity: t.blaze.toneOpacityLight,
     contrastText: t.blaze.contrastText,
-    hoverOpacity: t.blaze.opacityLight,
+    hoverOpacity: t.blaze.opacityHoverLight,
+    focusOpacity: t.blaze.opacityFocusLight,
+    activeOpacity: t.blaze.opacityActiveLight,
     //Por compatibilidad con MUI
     light: t.blaze.light,
     dark: t.blaze.dark
@@ -101,12 +145,14 @@ const t = {
   brown: {
     main: t.brown.main,
     focusVisible: t.brown.light,
-    focusActive: t.brown.lighter,
+    active: t.brown.lighter,
     hover: t.brown.light,
-    opacity: t.brown.opacityLight,
+    opacity: t.brown.opacityHoverLight,
     toneOpacity: t.brown.toneOpacityLight,
     contrastText: t.brown.contrastText,
-    hoverOpacity: t.brown.opacityLight,
+    hoverOpacity: t.brown.opacityHoverLight,
+    focusOpacity: t.brown.opacityFocusLight,
+    activeOpacity: t.brown.opacityActiveLight,
     //Por compatibilidad con MUI
     light: t.brown.light,
     dark: t.brown.dark
@@ -114,12 +160,14 @@ const t = {
   grass: {
     main: t.grass.main,
     focusVisible: t.grass.light,
-    focusActive: t.grass.lighter,
+    active: t.grass.lighter,
     hover: t.grass.light,
-    opacity: t.grass.opacityLight,
+    opacity: t.grass.opacityHoverLight,
     toneOpacity: t.grass.toneOpacityLight,
     contrastText: t.grass.contrastText,
-    hoverOpacity: t.grass.opacityLight,
+    hoverOpacity: t.grass.opacityHoverLight,
+    focusOpacity: t.grass.opacityFocusLight,
+    activeOpacity: t.grass.opacityActiveLight,
     //Por compatibilidad con MUI
     light: t.grass.light,
     dark: t.grass.dark
@@ -127,28 +175,32 @@ const t = {
   turqui: {
     main: t.turqui.main,
     focusVisible: t.turqui.light,
-    focusActive: t.turqui.lighter,
+    active: t.turqui.lighter,
     hover: t.turqui.light,
-    opacity: t.turqui.opacityLight,
+    opacity: t.turqui.opacityHoverLight,
     toneOpacity: t.turqui.toneOpacityLight,
     contrastText: t.turqui.contrastText,
-    hoverOpacity: t.turqui.opacityLight,
+    hoverOpacity: t.turqui.opacityHoverLight,
+    focusOpacity: t.turqui.opacityFocusLight,
+    activeOpacity: t.turqui.opacityActiveLight,
     //Por compatibilidad con MUI
     light: t.turqui.light,
     dark: t.turqui.dark
   }
-}, c = {
+}, n = {
   patronus: {
     main: t.patronus.main,
     focusVisible: t.patronus.light,
     // validar para dark
-    focusActive: t.patronus.lighter,
+    active: t.patronus.lighter,
     // validar para dark
     hover: t.patronus.dark,
-    opacity: t.patronus.opacityDark,
+    opacity: t.patronus.opacityHoverDark,
     toneOpacity: t.patronus.toneOpacityDark,
     contrastText: t.patronus.contrastText,
-    hoverOpacity: t.patronus.opacityDark,
+    hoverOpacity: t.patronus.opacityHoverDark,
+    focusOpacity: t.patronus.opacityFocusDark,
+    activeOpacity: t.patronus.opacityActiveDark,
     //Por compatibilidad con MUI
     light: t.patronus.light,
     dark: t.patronus.dark
@@ -157,13 +209,15 @@ const t = {
     main: t.blaze.main,
     focusVisible: t.blaze.light,
     // validar para dark
-    focusActive: t.blaze.lighter,
+    active: t.blaze.lighter,
     // validar para dark
     hover: t.blaze.dark,
-    opacity: t.blaze.opacityDark,
+    opacity: t.blaze.opacityHoverDark,
     toneOpacity: t.blaze.toneOpacityDark,
     contrastText: t.blaze.contrastText,
-    hoverOpacity: t.blaze.opacityDark,
+    hoverOpacity: t.blaze.opacityHoverDark,
+    focusOpacity: t.blaze.opacityFocusDark,
+    activeOpacity: t.blaze.opacityActiveDark,
     //Por compatibilidad con MUI
     light: t.blaze.light,
     dark: t.blaze.dark
@@ -172,13 +226,15 @@ const t = {
     main: t.brown.main,
     focusVisible: t.brown.light,
     // validar para dark
-    focusActive: t.brown.lighter,
+    active: t.brown.lighter,
     // validar para dark
     hover: t.brown.dark,
-    opacity: t.brown.opacityDark,
+    opacity: t.brown.opacityHoverDark,
     toneOpacity: t.brown.toneOpacityDark,
     contrastText: t.brown.contrastText,
-    hoverOpacity: t.brown.opacityDark,
+    hoverOpacity: t.brown.opacityHoverDark,
+    focusOpacity: t.brown.opacityFocusDark,
+    activeOpacity: t.brown.opacityActiveDark,
     //Por compatibilidad con MUI
     light: t.brown.light,
     dark: t.brown.dark
@@ -187,13 +243,15 @@ const t = {
     main: t.grass.main,
     focusVisible: t.grass.light,
     // validar para dark
-    focusActive: t.grass.lighter,
+    active: t.grass.lighter,
     // validar para dark
     hover: t.grass.dark,
-    opacity: t.grass.opacityDark,
+    opacity: t.grass.opacityHoverDark,
     toneOpacity: t.grass.toneOpacityDark,
     contrastText: t.grass.contrastText,
-    hoverOpacity: t.grass.opacityDark,
+    hoverOpacity: t.grass.opacityHoverDark,
+    focusOpacity: t.grass.opacityFocusDark,
+    activeOpacity: t.grass.opacityActiveDark,
     //Por compatibilidad con MUI
     light: t.grass.light,
     dark: t.grass.dark
@@ -202,24 +260,26 @@ const t = {
     main: t.turqui.main,
     focusVisible: t.turqui.light,
     // validar para dark
-    focusActive: t.turqui.lighter,
+    active: t.turqui.lighter,
     // validar para dark
     hover: t.turqui.dark,
-    opacity: t.turqui.opacityDark,
+    opacity: t.turqui.opacityHoverDark,
     toneOpacity: t.turqui.toneOpacityDark,
     contrastText: t.turqui.contrastText,
-    hoverOpacity: t.turqui.opacityDark,
+    hoverOpacity: t.turqui.opacityHoverDark,
+    focusOpacity: t.turqui.opacityFocusDark,
+    activeOpacity: t.turqui.opacityActiveDark,
     //Por compatibilidad con MUI
     light: t.turqui.light,
     dark: t.turqui.dark
   }
-}, o = Object.keys(t), u = o.map((i) => ({
-  name: i,
-  value: t[i].main
+}, o = Object.keys(t), p = o.map((r) => ({
+  name: r,
+  value: t[r].main
 }));
 export {
   t as P,
   s as a,
-  c as b,
-  u as p
+  n as b,
+  p
 };