@m4l/styles 7.1.5 → 7.1.6

package/package.json

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

package/theme/palette/baseChipsPalette.d.ts

@@ -0,0 +1,9 @@
+import { BaseChipColors } from '../../types';
+/**
+ * Lista de colores definidos para pintar los tags en modo light
+ */
+export declare const BASE_TAG_OBJECT_COLORS_LIGHT: BaseChipColors;
+/**
+ * Lista de colores definidos para pintar los tags en modo light
+ */
+export declare const BASE_TAG_OBJECT_COLORS_DARK: BaseChipColors;

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/semanticColors.js

@@ -21,7 +21,7 @@ const i = {
     opacityActiveDark: a.crayon[40]
   },
   warning: {
-    main: t.middleYellow[50],
+    main: t.middleYellow[60],
     lighter: t.middleYellow[90],
     light: t.middleYellow[70],
     dark: t.middleYellow[30],

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

@@ -50,6 +50,7 @@ declare module '@mui/material/styles' {
       disabled: string;
       error: string;
     };
+    chips: BaseChipColors;
     general: {
       scrollBar: string;
       gridHover: string;
@@ -72,6 +73,7 @@ declare module '@mui/material/styles' {
       disabled: string;
       error: string;
     };
+    chips: BaseChipColors;
     default: PaletteColor;
     general: {
       scrollBar: string;

package/types/types.d.ts

@@ -106,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>;

package/utils/getPaletteByPreset.d.ts

@@ -51,6 +51,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly hover: string;
             readonly paper: "#00000000";
         };
+        readonly chips: import('../types').BaseChipColors;
         readonly border: {
             readonly main: string;
             readonly default: string;
@@ -169,6 +170,7 @@ export declare const getPaletteByPreset: (themeUserColor: ThemeUserColor) => {
             readonly hover: string;
             readonly paper: "#00000000";
         };
+        readonly chips: import('../types').BaseChipColors;
         readonly border: {
             readonly main: string;
             readonly default: string;

package/utils/getPaletteByPreset.js

@@ -1,10 +1,11 @@
-import { P as n, a as m, b } from "../theme/palette/presetColors.js";
+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 c } from "../theme/palette/commonColors.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 f, a as u } from "../theme/palette/defaultColors.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 = {
   light: {
     scrollBar: "#5663763D",
@@ -14,12 +15,12 @@ const t = {
     scrollBar: "#5663765D",
     gridHover: "#282E2E"
   }
-}, p = (l) => {
-  const i = m?.[l], e = b?.[l];
+}, V = (l) => {
+  const i = u?.[l], e = b?.[l];
   return {
     light: {
       mode: "light",
-      common: c,
+      common: n,
       primary: {
         ...i
       },
@@ -42,8 +43,9 @@ const t = {
         //por compatibilidad de mui
         paper: "#00000000"
       },
+      chips: g,
       border: {
-        main: n[l]?.borderMainLight,
+        main: c[l]?.borderMainLight,
         default: o.oxford[40],
         secondary: o.oxford[30],
         dens: o.oxford[60],
@@ -78,13 +80,13 @@ const t = {
     },
     dark: {
       mode: "dark",
-      common: c,
+      common: n,
       // no definido en figma
       primary: {
         ...e
       },
       default: {
-        ...u,
+        ...m,
         focusVisible: e?.focusVisible,
         contrastText: r.marbleLight[30]
       },
@@ -98,12 +100,13 @@ const t = {
         default: r.onyx[40],
         neutral: r.onyx[50],
         surface: r.onyx[60],
-        hover: u.hover,
+        hover: m.hover,
         //por compatibilidad de mui
         paper: "#00000000"
       },
+      chips: O,
       border: {
-        main: n[l]?.borderMainDark,
+        main: c[l]?.borderMainDark,
         default: o.mint[50],
         secondary: o.mint[40],
         dens: o.mint[60],
@@ -141,5 +144,5 @@ const t = {
   };
 };
 export {
-  p as g
+  V as g
 };

package/theme/palette/tagsPalette.d.ts

@@ -1,13 +0,0 @@
-export interface TagColor {
-    contrastText: string;
-    backgroundColor: string;
-}
-export type TagColorOptions = 'default' | 'warning' | 'warningOpacity' | 'error' | 'errorOpacity' | 'success' | 'successOpacity' | 'info' | 'infoOpacity';
-/**
- * Lista de colores definidos para pintar los tags en modo light
- */
-export declare const BASE_TAG_OBJECT_COLORS_LIGHT: Record<TagColorOptions, TagColor>;
-/**
- * Lista de colores definidos para pintar los tags en modo light
- */
-export declare const BASE_TAG_OBJECT_COLORS_DARK: Record<TagColorOptions, TagColor>;