@m4l/styles 7.1.4 → 7.1.6

package/theme/palette/semanticColors.js

@@ -1,154 +1,198 @@
-import { B as a } from "./baseColors.js";
-import { B as i } from "./baseOpacityColors.js";
-const t = {
+import { B as t } from "./baseColors.js";
+import { B as a } from "./baseOpacityColors.js";
+const i = {
   info: {
-    main: a.crayonBlue[50],
-    lighter: a.crayonBlue[70],
-    light: a.crayonBlue[60],
-    dark: a.crayonBlue[40],
-    darker: a.crayonBlue[20],
-    contrastText: a.marbleLight[30],
-    toneOpacityLight: a.crayonBlue.toneOpacity10,
-    toneOpacityDark: a.crayonBlue.toneOpacity20,
-    opacityLight: i.crayon[10],
-    opacityDark: i.crayon[20]
+    main: t.crayonBlue[50],
+    lighter: t.crayonBlue[70],
+    light: t.crayonBlue[60],
+    dark: t.crayonBlue[40],
+    darker: t.crayonBlue[20],
+    contrastText: t.marbleLight[30],
+    // Tone colors
+    toneOpacityLight: t.crayonBlue.toneOpacity10,
+    toneOpacityDark: t.crayonBlue.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.crayon[10],
+    opacityFocusLight: a.crayon[20],
+    opacityActiveLight: a.crayon[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.crayon[20],
+    opacityFocusDark: a.crayon[30],
+    opacityActiveDark: a.crayon[40]
   },
   warning: {
-    main: a.middleYellow[50],
-    lighter: a.middleYellow[90],
-    light: a.middleYellow[70],
-    dark: a.middleYellow[30],
-    darker: a.middleYellow[20],
-    contrastText: a.onyx[20],
-    toneOpacityLight: a.middleYellow.toneOpacity10,
-    toneOpacityDark: a.middleYellow.toneOpacity20,
-    opacityLight: i.middle[10],
-    opacityDark: i.middle[20]
+    main: t.middleYellow[60],
+    lighter: t.middleYellow[90],
+    light: t.middleYellow[70],
+    dark: t.middleYellow[30],
+    darker: t.middleYellow[20],
+    contrastText: t.onyx[20],
+    // Tone colors
+    toneOpacityLight: t.middleYellow.toneOpacity10,
+    toneOpacityDark: t.middleYellow.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.middle[10],
+    opacityFocusLight: a.middle[20],
+    opacityActiveLight: a.middle[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.middle[20],
+    opacityFocusDark: a.middle[30],
+    opacityActiveDark: a.middle[40]
   },
   error: {
-    main: a.flameRed[50],
-    lighter: a.flameRed[70],
-    light: a.flameRed[60],
-    dark: a.flameRed[40],
-    darker: a.flameRed[20],
-    contrastText: a.marbleLight[30],
-    toneOpacityLight: a.flameRed.toneOpacity10,
-    toneOpacityDark: a.flameRed.toneOpacity20,
-    opacityLight: i.flame[10],
-    opacityDark: i.flame[20]
+    main: t.flameRed[50],
+    lighter: t.flameRed[70],
+    light: t.flameRed[60],
+    dark: t.flameRed[40],
+    darker: t.flameRed[20],
+    contrastText: t.marbleLight[30],
+    // Tone colors
+    toneOpacityLight: t.flameRed.toneOpacity10,
+    toneOpacityDark: t.flameRed.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.flame[10],
+    opacityFocusLight: a.flame[20],
+    opacityActiveLight: a.flame[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.flame[20],
+    opacityFocusDark: a.flame[30],
+    opacityActiveDark: a.flame[40]
   },
   success: {
-    main: a.acidGreen[50],
-    lighter: a.acidGreen[70],
-    light: a.acidGreen[60],
-    dark: a.acidGreen[30],
-    darker: a.acidGreen[20],
-    contrastText: a.marbleLight[20],
-    toneOpacityLight: a.acidGreen.toneOpacity10,
-    toneOpacityDark: a.acidGreen.toneOpacity20,
-    opacityLight: i.acid[10],
-    opacityDark: i.acid[20]
+    main: t.acidGreen[50],
+    lighter: t.acidGreen[70],
+    light: t.acidGreen[60],
+    dark: t.acidGreen[30],
+    darker: t.acidGreen[20],
+    contrastText: t.marbleLight[20],
+    // Tone colors
+    toneOpacityLight: t.acidGreen.toneOpacity10,
+    toneOpacityDark: t.acidGreen.toneOpacity20,
+    // opacity backgrounds light
+    opacityHoverLight: a.acid[10],
+    opacityFocusLight: a.acid[20],
+    opacityActiveLight: a.acid[30],
+    // opacity backgrounds Dark
+    opacityHoverDark: a.acid[20],
+    opacityFocusDark: a.acid[30],
+    opacityActiveDark: a.acid[40]
   }
 }, o = {
   info: {
-    main: t.info.main,
-    focusActive: t.info.lighter,
-    hover: t.info.light,
-    opacity: t.info.opacityLight,
-    toneOpacity: t.info.toneOpacityLight,
-    contrastText: t.info.contrastText,
-    hoverOpacity: t.info.opacityLight,
+    main: i.info.main,
+    active: i.info.lighter,
+    hover: i.info.light,
+    opacity: i.info.opacityHoverLight,
+    toneOpacity: i.info.toneOpacityLight,
+    contrastText: i.info.contrastText,
+    hoverOpacity: i.info.opacityHoverLight,
+    focusOpacity: i.info.opacityFocusLight,
+    activeOpacity: i.info.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.info.light,
-    dark: t.info.dark
+    light: i.info.light,
+    dark: i.info.dark
   },
   success: {
-    main: t.success.main,
-    focusActive: t.success.lighter,
-    hover: t.success.light,
-    opacity: t.success.opacityLight,
-    toneOpacity: t.success.toneOpacityLight,
-    contrastText: t.success.contrastText,
-    hoverOpacity: t.success.opacityLight,
+    main: i.success.main,
+    active: i.success.lighter,
+    hover: i.success.light,
+    opacity: i.success.opacityHoverLight,
+    toneOpacity: i.success.toneOpacityLight,
+    contrastText: i.success.contrastText,
+    hoverOpacity: i.success.opacityHoverLight,
+    focusOpacity: i.success.opacityFocusLight,
+    activeOpacity: i.success.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.success.light,
-    dark: t.success.dark
+    light: i.success.light,
+    dark: i.success.dark
   },
   warning: {
-    main: t.warning.main,
-    focusActive: t.warning.lighter,
-    hover: t.warning.light,
-    opacity: t.warning.opacityLight,
-    toneOpacity: t.warning.toneOpacityLight,
-    contrastText: t.warning.contrastText,
-    hoverOpacity: t.warning.opacityLight,
+    main: i.warning.main,
+    active: i.warning.lighter,
+    hover: i.warning.light,
+    opacity: i.warning.opacityHoverLight,
+    toneOpacity: i.warning.toneOpacityLight,
+    contrastText: i.warning.contrastText,
+    hoverOpacity: i.warning.opacityHoverLight,
+    focusOpacity: i.warning.opacityFocusLight,
+    activeOpacity: i.warning.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.warning.light,
-    dark: t.warning.dark
+    light: i.warning.light,
+    dark: i.warning.dark
   },
   error: {
-    main: t.error.main,
-    focusActive: t.error.lighter,
-    hover: t.error.light,
-    opacity: t.error.opacityLight,
-    toneOpacity: t.error.toneOpacityLight,
-    contrastText: t.error.contrastText,
-    hoverOpacity: t.error.opacityLight,
+    main: i.error.main,
+    active: i.error.lighter,
+    hover: i.error.light,
+    opacity: i.error.opacityHoverLight,
+    toneOpacity: i.error.toneOpacityLight,
+    contrastText: i.error.contrastText,
+    hoverOpacity: i.error.opacityHoverLight,
+    focusOpacity: i.error.opacityFocusLight,
+    activeOpacity: i.error.opacityActiveLight,
     //Por compatibilidad con MUI
-    light: t.error.light,
-    dark: t.error.dark
+    light: i.error.light,
+    dark: i.error.dark
   }
-}, c = {
+}, e = {
   info: {
-    main: t.info.main,
-    focusActive: t.info.darker,
-    hover: t.info.dark,
-    opacity: t.info.opacityDark,
-    toneOpacity: t.info.toneOpacityDark,
-    contrastText: t.info.contrastText,
-    hoverOpacity: t.info.opacityDark,
+    main: i.info.main,
+    active: i.info.darker,
+    hover: i.info.dark,
+    opacity: i.info.opacityHoverDark,
+    toneOpacity: i.info.toneOpacityDark,
+    contrastText: i.info.contrastText,
+    hoverOpacity: i.info.opacityHoverDark,
+    focusOpacity: i.info.opacityFocusDark,
+    activeOpacity: i.info.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.info.light,
-    dark: t.info.dark
+    light: i.info.light,
+    dark: i.info.dark
   },
   success: {
-    main: t.success.main,
-    focusActive: t.success.darker,
-    hover: t.success.dark,
-    opacity: t.success.opacityDark,
-    toneOpacity: t.success.toneOpacityDark,
-    contrastText: t.success.contrastText,
-    hoverOpacity: t.success.opacityDark,
+    main: i.success.main,
+    active: i.success.darker,
+    hover: i.success.dark,
+    opacity: i.success.opacityHoverDark,
+    toneOpacity: i.success.toneOpacityDark,
+    contrastText: i.success.contrastText,
+    hoverOpacity: i.success.opacityHoverDark,
+    focusOpacity: i.success.opacityFocusDark,
+    activeOpacity: i.success.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.success.light,
-    dark: t.success.dark
+    light: i.success.light,
+    dark: i.success.dark
   },
   warning: {
-    main: t.warning.main,
-    focusActive: t.warning.darker,
-    hover: t.warning.dark,
-    opacity: t.warning.opacityDark,
-    toneOpacity: t.warning.toneOpacityDark,
-    contrastText: t.warning.contrastText,
-    hoverOpacity: t.warning.opacityDark,
+    main: i.warning.main,
+    active: i.warning.darker,
+    hover: i.warning.dark,
+    opacity: i.warning.opacityHoverDark,
+    toneOpacity: i.warning.toneOpacityDark,
+    contrastText: i.warning.contrastText,
+    hoverOpacity: i.warning.opacityHoverDark,
+    focusOpacity: i.warning.opacityFocusDark,
+    activeOpacity: i.warning.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.warning.light,
-    dark: t.warning.dark
+    light: i.warning.light,
+    dark: i.warning.dark
   },
   error: {
-    main: t.error.main,
-    focusActive: t.error.darker,
-    hover: t.error.dark,
-    opacity: t.error.opacityDark,
-    toneOpacity: t.error.toneOpacityDark,
-    contrastText: t.error.contrastText,
-    hoverOpacity: t.error.opacityDark,
+    main: i.error.main,
+    active: i.error.darker,
+    hover: i.error.dark,
+    opacity: i.error.opacityHoverDark,
+    toneOpacity: i.error.toneOpacityDark,
+    contrastText: i.error.contrastText,
+    hoverOpacity: i.error.opacityHoverDark,
+    focusOpacity: i.error.opacityFocusDark,
+    activeOpacity: i.error.opacityActiveDark,
     //Por compatibilidad con MUI
-    light: t.error.light,
-    dark: t.error.dark
+    light: i.error.light,
+    dark: i.error.dark
   }
 };
 export {
   o as S,
-  c as a
+  e as a
 };

package/theme/shadows.d.ts

@@ -13,6 +13,8 @@ export interface CustomShadowOptions {
     card: string;
     dialog: string;
     dropdown: string;
+    innerShadowContainer: string;
+    innerShadowOutlinedText: string;
 }
 /**
  * Create custom shadows for the theme

package/theme/shadows.js

@@ -1,80 +1,84 @@
-import { alpha as r } from "@mui/material/styles";
-import { G as a } from "./palette/greyPalette.js";
-import { B as s } from "./palette/baseColors.js";
+import { alpha as x } from "@mui/material/styles";
+import { G as r } from "./palette/greyPalette.js";
+import { B as e } from "./palette/baseColors.js";
 import { C as o } from "./palette/commonColors.js";
-const e = a[500], c = "#000000", n = (t) => {
-  const p = r(t, 0.2), x = r(t, 0.14), $ = r(t, 0.12);
+const s = r[500], i = "#000000", a = (t) => {
+  const p = x(t, 0.2), $ = x(t, 0.14), n = x(t, 0.12);
   return [
     "none",
-    `0px 2px 1px -1px ${p},0px 1px 1px 0px ${x},0px 1px 3px 0px ${$}`,
-    `0px 3px 1px -2px ${p},0px 2px 2px 0px ${x},0px 1px 5px 0px ${$}`,
-    `0px 3px 3px -2px ${p},0px 3px 4px 0px ${x},0px 1px 8px 0px ${$}`,
-    `0px 2px 4px -1px ${p},0px 4px 5px 0px ${x},0px 1px 10px 0px ${$}`,
-    `0px 3px 5px -1px ${p},0px 5px 8px 0px ${x},0px 1px 14px 0px ${$}`,
-    `0px 3px 5px -1px ${p},0px 6px 10px 0px ${x},0px 1px 18px 0px ${$}`,
-    `0px 4px 5px -2px ${p},0px 7px 10px 1px ${x},0px 2px 16px 1px ${$}`,
-    `0px 5px 5px -3px ${p},0px 8px 10px 1px ${x},0px 3px 14px 2px ${$}`,
-    `0px 5px 6px -3px ${p},0px 9px 12px 1px ${x},0px 3px 16px 2px ${$}`,
-    `0px 6px 6px -3px ${p},0px 10px 14px 1px ${x},0px 4px 18px 3px ${$}`,
-    `0px 6px 7px -4px ${p},0px 11px 15px 1px ${x},0px 4px 20px 3px ${$}`,
-    `0px 7px 8px -4px ${p},0px 12px 17px 2px ${x},0px 5px 22px 4px ${$}`,
-    `0px 7px 8px -4px ${p},0px 13px 19px 2px ${x},0px 5px 24px 4px ${$}`,
-    `0px 7px 9px -4px ${p},0px 14px 21px 2px ${x},0px 5px 26px 4px ${$}`,
-    `0px 8px 9px -5px ${p},0px 15px 22px 2px ${x},0px 6px 28px 5px ${$}`,
-    `0px 8px 10px -5px ${p},0px 16px 24px 2px ${x},0px 6px 30px 5px ${$}`,
-    `0px 8px 11px -5px ${p},0px 17px 26px 2px ${x},0px 6px 32px 5px ${$}`,
-    `0px 9px 11px -5px ${p},0px 18px 28px 2px ${x},0px 7px 34px 6px ${$}`,
-    `0px 9px 12px -6px ${p},0px 19px 29px 2px ${x},0px 7px 36px 6px ${$}`,
-    `0px 10px 13px -6px ${p},0px 20px 31px 3px ${x},0px 8px 38px 7px ${$}`,
-    `0px 10px 13px -6px ${p},0px 21px 33px 3px ${x},0px 8px 40px 7px ${$}`,
-    `0px 10px 14px -6px ${p},0px 22px 35px 3px ${x},0px 8px 42px 7px ${$}`,
-    `0px 11px 14px -7px ${p},0px 23px 36px 3px ${x},0px 9px 44px 8px ${$}`,
-    `0px 11px 15px -7px ${p},0px 24px 38px 3px ${x},0px 9px 46px 8px ${$}`
+    `0px 2px 1px -1px ${p},0px 1px 1px 0px ${$},0px 1px 3px 0px ${n}`,
+    `0px 3px 1px -2px ${p},0px 2px 2px 0px ${$},0px 1px 5px 0px ${n}`,
+    `0px 3px 3px -2px ${p},0px 3px 4px 0px ${$},0px 1px 8px 0px ${n}`,
+    `0px 2px 4px -1px ${p},0px 4px 5px 0px ${$},0px 1px 10px 0px ${n}`,
+    `0px 3px 5px -1px ${p},0px 5px 8px 0px ${$},0px 1px 14px 0px ${n}`,
+    `0px 3px 5px -1px ${p},0px 6px 10px 0px ${$},0px 1px 18px 0px ${n}`,
+    `0px 4px 5px -2px ${p},0px 7px 10px 1px ${$},0px 2px 16px 1px ${n}`,
+    `0px 5px 5px -3px ${p},0px 8px 10px 1px ${$},0px 3px 14px 2px ${n}`,
+    `0px 5px 6px -3px ${p},0px 9px 12px 1px ${$},0px 3px 16px 2px ${n}`,
+    `0px 6px 6px -3px ${p},0px 10px 14px 1px ${$},0px 4px 18px 3px ${n}`,
+    `0px 6px 7px -4px ${p},0px 11px 15px 1px ${$},0px 4px 20px 3px ${n}`,
+    `0px 7px 8px -4px ${p},0px 12px 17px 2px ${$},0px 5px 22px 4px ${n}`,
+    `0px 7px 8px -4px ${p},0px 13px 19px 2px ${$},0px 5px 24px 4px ${n}`,
+    `0px 7px 9px -4px ${p},0px 14px 21px 2px ${$},0px 5px 26px 4px ${n}`,
+    `0px 8px 9px -5px ${p},0px 15px 22px 2px ${$},0px 6px 28px 5px ${n}`,
+    `0px 8px 10px -5px ${p},0px 16px 24px 2px ${$},0px 6px 30px 5px ${n}`,
+    `0px 8px 11px -5px ${p},0px 17px 26px 2px ${$},0px 6px 32px 5px ${n}`,
+    `0px 9px 11px -5px ${p},0px 18px 28px 2px ${$},0px 7px 34px 6px ${n}`,
+    `0px 9px 12px -6px ${p},0px 19px 29px 2px ${$},0px 7px 36px 6px ${n}`,
+    `0px 10px 13px -6px ${p},0px 20px 31px 3px ${$},0px 8px 38px 7px ${n}`,
+    `0px 10px 13px -6px ${p},0px 21px 33px 3px ${$},0px 8px 40px 7px ${n}`,
+    `0px 10px 14px -6px ${p},0px 22px 35px 3px ${$},0px 8px 42px 7px ${n}`,
+    `0px 11px 14px -7px ${p},0px 23px 36px 3px ${$},0px 9px 44px 8px ${n}`,
+    `0px 11px 15px -7px ${p},0px 24px 38px 3px ${$},0px 9px 46px 8px ${n}`
   ];
 }, O = (t) => {
   const p = {
-    info: `0px 2px 8px 0px ${r(s.patronusBlue[50], 0.2)}`,
-    secondary: `0px 2px 8px 0px ${r(s.patronusBlue[50], 0.24)}`,
-    success: `0px 2px 8px 0px ${r(s.acidGreen[50], 0.2)}`,
-    warning: `0px 2px 8px 0px ${r(s.middleYellow[50], 0.2)}`,
-    error: `0px 2px 8px 0px ${r(s.flameRed[50], 0.2)}`,
+    info: `0px 2px 8px 0px ${x(e.patronusBlue[50], 0.2)}`,
+    secondary: `0px 2px 8px 0px ${x(e.patronusBlue[50], 0.24)}`,
+    success: `0px 2px 8px 0px ${x(e.acidGreen[50], 0.2)}`,
+    warning: `0px 2px 8px 0px ${x(e.middleYellow[50], 0.2)}`,
+    error: `0px 2px 8px 0px ${x(e.flameRed[50], 0.2)}`,
     //
-    card: `0 0 2px 0 ${r(a[500], 0.2)}, 0 12px 24px -4px ${r(
-      a[500],
+    card: `0 0 2px 0 ${x(r[500], 0.2)}, 0 12px 24px -4px ${x(
+      r[500],
       0.12
     )}`,
-    dialog: `-40px 40px 80px -8px ${r(o.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${r(a[500], 0.24)}, -20px 20px 40px -4px ${r(
-      a[500],
+    dialog: `-40px 40px 80px -8px ${x(o.black, 0.24)}`,
+    dropdown: `0 0 2px 0 ${x(r[500], 0.24)}, -20px 20px 40px -4px ${x(
+      r[500],
       0.24
     )}`
   };
   return t === "light" ? {
-    z1: `0px 2px 2px 2px  ${r("#091E42", 0.8)}`,
+    z1: `0px 2px 2px 2px  ${x("#091E42", 0.8)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    z2: `0px 0px ${r("#495859", 0.14)}`,
+    z2: `0px 0px ${x("#495859", 0.14)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    z3: `0px 4px 12px 1px  ${r("#243B46", 0.14)}`,
+    z3: `0px 4px 12px 1px  ${x("#243B46", 0.14)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    z4: `0px 12px 32px 4px  ${r("#243B46", 0.12)}`,
+    z4: `0px 12px 32px 4px  ${x("#243B46", 0.12)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
+    innerShadowContainer: `2px 2px 4px 1px ${x("#1C2121", 0.7)} inset`,
+    innerShadowOutlinedText: `2px 2px 4px 1px ${x("#1C2121", 0.4)} inset`,
     ...p
   } : {
-    z1: `0px 2px 2px 2px  ${r("#000000", 0.16)}`,
+    z1: `0px 2px 2px 2px  ${x("#000000", 0.16)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    z2: `0px 0px ${r("#111414", 0.5)}`,
+    z2: `0px 0px ${x("#111414", 0.5)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    z3: `0px 4px 12px 1px  ${r("#09090A", 0.6)}`,
+    z3: `0px 4px 12px 1px  ${x("#09090A", 0.6)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
-    z4: `0px 12px 32px 4px  ${r("#09090A", 0.35)}`,
+    z4: `0px 12px 32px 4px  ${x("#09090A", 0.35)}`,
     // todo: solicitar a diseño crear token en base porque está quemado
+    innerShadowContainer: `2px 2px 4px 1px ${x("#1C2121", 0.9)} inset`,
+    innerShadowOutlinedText: `2px 2px 4px 1px ${x("#1C2121", 0.4)} inset`,
     ...p
   };
-}, u = {
-  light: n(e),
-  dark: n(c)
+}, m = {
+  light: a(s),
+  dark: a(i)
 };
 export {
   O as c,
-  u as s
+  m as s
 };

package/types/augmentations.d.ts

@@ -23,10 +23,12 @@ declare module '@mui/material/styles' {
     // dark: string; ***  Por compatibilidad con MUI
     // contrastText: string; ***
 
-    focusActive: string;
+    active: string;
     focusVisible: string;
     hover: string;
     hoverOpacity: string;
+    activeOpacity: string;
+    focusOpacity: string;
     opacity: string;
     toneOpacity: string;
   }
@@ -48,6 +50,7 @@ declare module '@mui/material/styles' {
       disabled: string;
       error: string;
     };
+    chips: BaseChipColors;
     general: {
       scrollBar: string;
       gridHover: string;
@@ -70,6 +73,7 @@ declare module '@mui/material/styles' {
       disabled: string;
       error: string;
     };
+    chips: BaseChipColors;
     default: PaletteColor;
     general: {
       scrollBar: string;

package/types/types.d.ts

@@ -51,10 +51,20 @@ export interface PresetColor {
     lighter: string;
     toneOpacityLight: string;
     /**
-     * Permite definir fondos de componentes en estados hover y focus dependiendo de la necesidad.
+     * Permite definir fondos de componentes en estados hover dependiendo del modo de la aplicación web.
      */
-    opacityLight: string;
-    opacityDark: string;
+    opacityHoverLight: string;
+    opacityHoverDark: string;
+    /**
+     * Permite definir fondos de componentes en estados focus dependiendo del modo de la aplicación web.
+     */
+    opacityFocusLight: string;
+    opacityFocusDark: string;
+    /**
+     * Permite definir fondos de componentes en estados active dependiendo del modo de la aplicación web.
+     */
+    opacityActiveLight: string;
+    opacityActiveDark: string;
     dark: string;
     darker: string;
     toneOpacityDark: string;
@@ -96,3 +106,20 @@ export type PresetsOptionsColorMain = Array<{
     value: string;
 }>;
 export type ColorState = 'warning' | 'delete' | 'info' | 'success';
+/**
+ * Opciones de colores para pinta los chips
+ */
+export interface ChipColor {
+    contrastText: string;
+    backgroundColor: string;
+    backgroundHover: string;
+    backgroundActive: string;
+}
+/**
+ * Lista de opciones de colores para pintar los chips
+ */
+export type ChipColorOptions = 'default' | '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.
+ */
+export type BaseChipColors = Record<ChipColorOptions, ChipColor>;