@m4l/styles 2.0.4 → 3.0.0

package/theme/palette-DM0gXxA2.js

@@ -0,0 +1,584 @@
+import F from "@mui/material/styles/createPalette";
+import { alpha as r } from "@mui/material/styles";
+const e = {
+  patronusBlue: {
+    "00": "#D9E9FC",
+    10: "#DBE9FF",
+    20: "#B6D3FF",
+    30: "#6DA8FF",
+    40: "#3787FF",
+    50: "#0064FF",
+    60: "#0050C8",
+    70: "#003A92",
+    80: "#00245B",
+    90: "#000F24",
+    100: "#2C4053"
+  },
+  crayonBlue: {
+    "00": "#D9E9FF",
+    10: "#D9E9FF",
+    20: "#88B7FC",
+    30: "#6AA4F9",
+    40: "#5494F3",
+    50: "#2774E6",
+    60: "#2367CC",
+    70: "#1F5AB3",
+    80: "#1A4D99",
+    90: "#113366",
+    100: "#113366"
+  },
+  middleYellow: {
+    "00": "#FFFBCE",
+    10: "#FFFBCE",
+    20: "#FFF79C",
+    30: "#FFF46B",
+    40: "#FFF039",
+    50: "#FFEC08",
+    60: "#E5D400",
+    70: "#9E9200",
+    80: "#696100",
+    90: "#353100",
+    100: "#353100"
+  },
+  acidGreen: {
+    "00": "#CDFFC2",
+    10: "#CDFFC2",
+    20: "#A8FF97",
+    30: "#83FF6B",
+    40: "#5EFF40",
+    50: "#39FF14",
+    60: "#47CC2D",
+    70: "#1F9009",
+    80: "#176E05",
+    90: "#0B3D00",
+    100: "#0B3D00"
+  },
+  grassGreen: {
+    "00": "#D9ECE6",
+    10: "#E3F4EB",
+    20: "#AADEC2",
+    30: "#7BCCA1",
+    40: "#3FA26D",
+    50: "#00804C",
+    60: "#005B37",
+    70: "#004026",
+    80: "#002416",
+    90: "#00120B",
+    100: "#2C433D"
+  },
+  desertBeige: {
+    "00": "#F2F0EB",
+    10: "#F6EBE2",
+    20: "#EDD7C5",
+    30: "#E7CAB1",
+    40: "#DDB490",
+    50: "#D4A276",
+    60: "#BD8F68",
+    70: "#AD794C",
+    80: "#90653F",
+    90: "#735133",
+    100: "#454742"
+  },
+  turquiBlue: {
+    "00": "#DEE9EB",
+    10: "#C8E1EC",
+    20: "#A3CDDF",
+    30: "#76A5BA",
+    40: "#377F9D",
+    50: "#2A6077",
+    60: "#214C5F",
+    70: "#1B3F4E",
+    80: "#15313C",
+    90: "#0F232B",
+    100: "#314042"
+  },
+  blazeOrange: {
+    "00": "#F4EFE1",
+    10: "#F9E9D0",
+    20: "#F4D3A1",
+    30: "#F2BD6D",
+    40: "#EBAE53",
+    50: "#E59722",
+    60: "#BA7916",
+    70: "#925F11",
+    80: "#774D0E",
+    90: "#735133",
+    100: "#474638"
+  },
+  flameRed: {
+    "00": "#FFD8D8",
+    10: "#FFD8D8",
+    20: "#F59292",
+    30: "#F66A6A",
+    40: "#F15B50",
+    50: "#F71919",
+    60: "#D31616",
+    70: "#AF1212",
+    80: "#8A0F0F",
+    90: "#660C0C",
+    100: "#660C0C"
+  },
+  coolGrey: {
+    "00": "#BAC6CC",
+    10: "#BAC6CC",
+    20: "#A7B4B9",
+    30: "#94A1A6",
+    40: "#818F93",
+    50: "#6E7C80",
+    60: "#5C6A6C",
+    70: "#495859",
+    80: "#364546",
+    90: "#233333",
+    100: "#233333"
+  },
+  brown: {
+    "00": "#ECEAE6",
+    10: "#DFC9BD",
+    20: "#C59D88",
+    30: "#B8886E",
+    40: "#B17D61",
+    50: "#9E694D",
+    60: "#875A42",
+    70: "#7C533D",
+    80: "#704B37",
+    90: "#654432",
+    100: "#3F413D"
+  },
+  marbleLight: {
+    "00": "#FFFFFF",
+    10: "#FFFFFF",
+    20: "#F9FAFA",
+    //'#F5F9FA',
+    30: "#F4F5F5",
+    40: "#F0F4F4",
+    50: "#E6E8EA",
+    60: "#E1E9EA",
+    70: "#E2E7E9",
+    80: "#fff0",
+    90: "#fff0",
+    100: "#fff0"
+  },
+  onyx: {
+    "00": "#364040",
+    10: "#364040",
+    20: "#323B3B",
+    30: "#2A3232",
+    40: "#252C2C",
+    50: "#212727",
+    60: "#1C2121",
+    70: "#090A0A",
+    80: "#fff0",
+    90: "#fff0",
+    100: "#fff0"
+  },
+  mint: {
+    "00": "#9BB4CA",
+    10: "#9BB4CA",
+    20: "#A1BDD9",
+    30: "#A6C5E2",
+    40: "#BCD6F0",
+    50: "#C8E1F9",
+    60: "#BFDBF8",
+    70: "#C3DEFE",
+    80: "#DFE7F2",
+    90: "#F1F2F4",
+    100: "#F1F2F4"
+  },
+  oxford: {
+    "00": "#F7F8F9",
+    10: "#F7F8F9",
+    20: "#DCDFE4",
+    30: "#B3B9C4",
+    40: "#8590A2",
+    50: "#758195",
+    60: "#626F86",
+    70: "#44546F",
+    80: "#2C3E5D",
+    90: "#091E42",
+    100: "#091E42"
+  }
+};
+function o(i) {
+  return {
+    4: r(i, 0.04),
+    6: r(i, 0.06),
+    8: r(i, 0.08),
+    10: r(i, 0.1),
+    12: r(i, 0.12),
+    14: r(i, 0.14),
+    16: r(i, 0.16),
+    18: r(i, 0.18),
+    28: r(i, 0.28),
+    31: r(i, 0.31),
+    32: r(i, 0.32),
+    48: r(i, 0.48),
+    60: r(i, 0.6),
+    72: r(i, 0.72)
+  };
+}
+const a = {
+  patronus: o(e.patronusBlue[50]),
+  turqui: o(e.turquiBlue[50]),
+  grass: o(e.grassGreen[50]),
+  brown: o(e.brown[50]),
+  beige: o(e.desertBeige[50]),
+  orange: o(e.blazeOrange[50]),
+  cool: o(e.coolGrey[70]),
+  marble: o(e.marbleLight[10]),
+  oxford: o(e.oxford[90]),
+  mint: {
+    4: r(e.mint[40], 0.04),
+    6: r(e.mint[40], 0.06),
+    8: r(e.mint[20], 0.08),
+    10: r(e.mint[50], 0.1),
+    12: r(e.mint[20], 0.12),
+    14: r(e.mint[30], 0.14),
+    16: r(e.mint[70], 0.16),
+    18: r(e.mint[70], 0.18),
+    28: r(e.mint[60], 0.28),
+    31: r(e.mint[60], 0.31),
+    32: r(e.mint[60], 0.32),
+    48: r(e.mint[10], 0.48),
+    60: r(e.mint[10], 0.6),
+    72: r(e.mint[10], 0.72)
+  }
+}, n = {
+  active: "",
+  activeOpacity: "",
+  hover: "",
+  focus: "",
+  selected: "",
+  toneOpacity: ""
+}, t = {
+  patronus: {
+    lighter: e.patronusBlue[10],
+    light: e.patronusBlue[30],
+    main: e.patronusBlue[50],
+    dark: e.patronusBlue[40],
+    darker: e.patronusBlue[60],
+    contrastText: "",
+    ...n
+  },
+  turqui: {
+    lighter: e.turquiBlue[10],
+    light: e.turquiBlue[30],
+    main: e.turquiBlue[50],
+    dark: e.turquiBlue[70],
+    darker: e.turquiBlue[80],
+    contrastText: "",
+    ...n
+  },
+  grass: {
+    lighter: e.grassGreen[10],
+    light: e.grassGreen[40],
+    main: e.grassGreen[50],
+    dark: e.grassGreen[70],
+    darker: e.grassGreen[80],
+    contrastText: "",
+    ...n
+  },
+  brown: {
+    lighter: e.brown[10],
+    light: e.brown[30],
+    main: e.brown[50],
+    dark: e.brown[70],
+    darker: e.brown[90],
+    contrastText: "",
+    ...n
+  },
+  blaze: {
+    lighter: e.blazeOrange[10],
+    light: e.blazeOrange[30],
+    main: e.blazeOrange[50],
+    dark: e.blazeOrange[70],
+    darker: e.blazeOrange[80],
+    contrastText: "",
+    ...n
+  }
+}, u = {
+  patronus: {
+    active: t.patronus.main,
+    activeOpacity: a.patronus[8],
+    focus: t.patronus.dark,
+    hover: t.patronus.dark,
+    selected: a.patronus[48],
+    toneOpacity: e.patronusBlue["00"]
+  },
+  blaze: {
+    active: t.blaze.main,
+    activeOpacity: a.orange[8],
+    focus: t.blaze.dark,
+    hover: t.blaze.dark,
+    selected: a.orange[48],
+    toneOpacity: e.blazeOrange["00"]
+  },
+  brown: {
+    active: t.brown.main,
+    activeOpacity: a.brown[12],
+    focus: t.brown.dark,
+    hover: t.brown.dark,
+    selected: a.brown[48],
+    toneOpacity: e.brown["00"]
+  },
+  grass: {
+    active: t.grass.main,
+    activeOpacity: a.grass[8],
+    focus: t.grass.dark,
+    hover: t.grass.dark,
+    selected: a.grass[48],
+    toneOpacity: e.grassGreen["00"]
+  },
+  turqui: {
+    active: t.turqui.main,
+    activeOpacity: a.turqui[8],
+    focus: t.turqui.dark,
+    hover: t.turqui.dark,
+    selected: a.turqui[48],
+    toneOpacity: e.turquiBlue["00"]
+  }
+}, B = {
+  patronus: {
+    active: t.patronus.main,
+    activeOpacity: a.patronus[8],
+    focus: t.patronus.light,
+    hover: t.patronus.light,
+    selected: a.patronus[48],
+    toneOpacity: e.patronusBlue[100]
+  },
+  blaze: {
+    active: t.blaze.main,
+    activeOpacity: a.orange[8],
+    focus: t.blaze.light,
+    hover: t.blaze.light,
+    selected: a.orange[48],
+    toneOpacity: e.blazeOrange[100]
+  },
+  brown: {
+    active: t.brown.main,
+    activeOpacity: a.brown[12],
+    focus: t.brown.light,
+    hover: t.brown.light,
+    selected: a.brown[48],
+    toneOpacity: e.brown[100]
+  },
+  grass: {
+    active: t.grass.main,
+    activeOpacity: a.grass[8],
+    focus: t.grass.light,
+    hover: t.grass.light,
+    selected: a.grass[48],
+    toneOpacity: e.grassGreen[100]
+  },
+  turqui: {
+    active: t.turqui.main,
+    activeOpacity: a.turqui[8],
+    focus: t.turqui.light,
+    hover: t.turqui.light,
+    selected: a.turqui[48],
+    toneOpacity: e.turquiBlue[100]
+  }
+}, m = Object.keys(t), h = m.map((i) => ({
+  name: i,
+  value: t[i].main
+})), g = {
+  black: "#000",
+  white: "#fff"
+}, E = {
+  0: "#FFFFFF",
+  100: "#F9FAFB",
+  200: "#F4F6F8",
+  300: "#DFE3E8",
+  400: "#C4CDD5",
+  500: "#919EAB",
+  600: "#637381",
+  700: "#454F5B",
+  800: "#212B36",
+  900: "#161C24",
+  5008: r("#919EAB", 0.08),
+  50012: r("#919EAB", 0.12),
+  50016: r("#919EAB", 0.16),
+  50024: r("#919EAB", 0.24),
+  50032: r("#919EAB", 0.32),
+  50048: r("#919EAB", 0.48),
+  50056: r("#919EAB", 0.56),
+  50080: r("#919EAB", 0.8),
+  50: "",
+  A100: "",
+  A200: "",
+  A400: "",
+  A700: ""
+}, y = {
+  info: {
+    lighter: e.crayonBlue[10],
+    light: e.crayonBlue[30],
+    main: e.crayonBlue[50],
+    dark: e.crayonBlue[60],
+    darker: e.crayonBlue[70],
+    contrastText: "",
+    active: e.crayonBlue[50],
+    activeOpacity: r(e.crayonBlue[50], 0.08),
+    hover: e.crayonBlue[70],
+    focus: e.crayonBlue[70],
+    toneOpacity: r(e.crayonBlue[50], 0.12),
+    selected: r(e.crayonBlue[50], 0.45)
+  },
+  success: {
+    lighter: e.acidGreen[10],
+    light: e.acidGreen[30],
+    main: e.acidGreen[60],
+    dark: e.acidGreen[70],
+    darker: e.acidGreen[80],
+    contrastText: "",
+    active: e.acidGreen[60],
+    activeOpacity: r(e.acidGreen[60], 0.08),
+    hover: e.acidGreen[70],
+    focus: e.acidGreen[70],
+    toneOpacity: r(e.acidGreen[60], 0.12),
+    selected: r(e.acidGreen[60], 0.45)
+  },
+  warning: {
+    lighter: e.middleYellow[10],
+    light: e.middleYellow[30],
+    main: e.middleYellow[60],
+    dark: e.middleYellow[70],
+    darker: e.middleYellow[80],
+    contrastText: "",
+    active: e.middleYellow[60],
+    activeOpacity: r(e.middleYellow[60], 0.08),
+    hover: e.middleYellow[70],
+    focus: e.middleYellow[70],
+    toneOpacity: r(e.middleYellow[60], 0.12),
+    selected: r(e.middleYellow[60], 0.45)
+  },
+  error: {
+    lighter: e.flameRed[10],
+    light: e.flameRed[30],
+    main: e.flameRed[40],
+    dark: e.flameRed[60],
+    darker: e.flameRed[70],
+    contrastText: "",
+    active: e.flameRed[40],
+    activeOpacity: r(e.flameRed[40], 0.08),
+    hover: e.flameRed[60],
+    focus: e.flameRed[60],
+    toneOpacity: r(e.flameRed[40], 0.12),
+    selected: r(e.flameRed[40], 0.45)
+  }
+}, c = {
+  light: {
+    scrollBar: "#5663763D",
+    gridHover: "#FCFCFC"
+  },
+  dark: {
+    scrollBar: "#5663765D",
+    gridHover: "#282E2E"
+  }
+}, p = (i) => ({
+  ...y,
+  common: g,
+  primary: t[i],
+  grey: E,
+  skeleton: {
+    default: a.cool[16],
+    transition: a.cool[8]
+  }
+}), C = (i) => {
+  const l = p(i), s = u?.[i], d = B?.[i];
+  return {
+    light: F({
+      ...l,
+      mode: "light",
+      divider: e.coolGrey[20],
+      text: {
+        primary: e.onyx[20],
+        secondary: e.coolGrey[50],
+        disabled: e.coolGrey[20]
+      },
+      background: {
+        default: e.marbleLight[10],
+        // todo: revisar contra figma (old state.default)
+        hover: a.oxford[4],
+        // todo: revisar contra figma (old state.hoverDefault)
+        surface: a.oxford[4],
+        subtle: e.marbleLight[10],
+        main: e.marbleLight[30],
+        // todo: background.neutral
+        bold: e.marbleLight[60],
+        // background.background
+        backdrop: a.oxford[72],
+        // hace referencia a alpha(`${theme.colorSchemes.finalTheme.palette.patronus?.onyx[60]}`, 0.8)
+        reverse: e.onyx[50],
+        header: e.marbleLight[20]
+      },
+      border: {
+        active: s?.active,
+        selected: s?.selected,
+        default: a.oxford[4],
+        // before oxford 12 (hoverDefault)
+        primary: a.oxford[16],
+        secondary: a.oxford[10],
+        disabled: a.oxford[4],
+        dense: a.oxford[31],
+        line: e.coolGrey[10]
+      },
+      general: {
+        scrollBar: c.light.scrollBar,
+        gridHover: c.light.gridHover
+      },
+      primary: {
+        ...l.primary,
+        ...s
+      }
+    }),
+    dark: F({
+      ...l,
+      mode: "dark",
+      divider: e.coolGrey[80],
+      text: {
+        primary: e.marbleLight[30],
+        secondary: e.coolGrey[20],
+        disabled: e.coolGrey[50]
+      },
+      background: {
+        default: e.onyx[40],
+        // todo: revisar contra figma (old state default)
+        hover: a.mint[14],
+        // todo: revisar contra figma (old state hoverDefault)
+        surface: a.mint[8],
+        subtle: e.onyx[30],
+        main: e.onyx[50],
+        bold: e.onyx[60],
+        backdrop: a.oxford[72],
+        reverse: e.marbleLight[10],
+        header: e.onyx[30]
+      },
+      border: {
+        active: d?.active,
+        selected: d?.selected,
+        default: a.mint[8],
+        primary: a.mint[18],
+        secondary: a.mint[14],
+        disabled: a.mint[8],
+        dense: a.mint[28],
+        line: e.coolGrey[60]
+      },
+      general: {
+        scrollBar: c.dark.scrollBar,
+        gridHover: c.dark.gridHover
+      },
+      primary: {
+        ...l.primary,
+        ...d
+      }
+    })
+  };
+};
+export {
+  e as B,
+  g as C,
+  E as G,
+  t as P,
+  a,
+  C as g,
+  h as p
+};

package/theme/{shadows-C9Ji2xrX.js → shadows-GTYqExFA.js}

@@ -1,7 +1,7 @@
-import { alpha as r } from "@mui/material/styles";
-import { p as a, P as e } from "./palette-CR1CkF2l.js";
-const s = a.light.grey[500], o = "#000000", n = (t) => {
-  const p = r(t, 0.2), x = r(t, 0.14), $ = r(t, 0.12);
+import { alpha as a } from "@mui/material/styles";
+import { G as n, B as s, C as e } from "./palette-DM0gXxA2.js";
+const o = n[500], c = "#000000", t = (r) => {
+  const p = a(r, 0.2), x = a(r, 0.14), $ = a(r, 0.12);
   return [
     "none",
     `0px 2px 1px -1px ${p},0px 1px 1px 0px ${x},0px 1px 3px 0px ${$}`,
@@ -29,42 +29,40 @@ const s = a.light.grey[500], o = "#000000", n = (t) => {
     `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 ${$}`
   ];
-}, i = (t) => {
+}, i = (r) => {
   const p = {
-    info: `0px 2px 8px 0px ${r(e.patronusBlue[50], 0.2)}`,
-    secondary: `0px 2px 8px 0px ${r(a.light.secondary.main, 0.24)}`,
-    success: `0px 2px 8px 0px ${r(e.acidGreen[50], 0.2)}`,
-    warning: `0px 2px 8px 0px ${r(e.middleYellow[50], 0.2)}`,
-    error: `0px 2px 8px 0px ${r(e.flameRed[50], 0.2)}`,
+    info: `0px 2px 8px 0px ${a(s.patronusBlue[50], 0.2)}`,
+    secondary: `0px 2px 8px 0px ${a(s.patronusBlue[50], 0.24)}`,
+    success: `0px 2px 8px 0px ${a(s.acidGreen[50], 0.2)}`,
+    warning: `0px 2px 8px 0px ${a(s.middleYellow[50], 0.2)}`,
+    error: `0px 2px 8px 0px ${a(s.flameRed[50], 0.2)}`,
     //
-    card: `0 0 2px 0 ${r(a.light.grey[500], 0.2)}, 0 12px 24px -4px ${r(
-      a.light.grey[500],
+    card: `0 0 2px 0 ${a(n[500], 0.2)}, 0 12px 24px -4px ${a(
+      n[500],
       0.12
     )}`,
-    dialog: `-40px 40px 80px -8px ${r(a.light.common.black, 0.24)}`,
-    dropdown: `0 0 2px 0 ${r(a.light.grey[500], 0.24)}, -20px 20px 40px -4px ${r(
-      a.light.grey[500],
+    dialog: `-40px 40px 80px -8px ${a(e.black, 0.24)}`,
+    dropdown: `0 0 2px 0 ${a(n[500], 0.24)}, -20px 20px 40px -4px ${a(
+      n[500],
       0.24
     )}`
   };
-  return t === "light" ? {
+  return r === "light" ? {
     z1: "0px 0px 03px 1px rgba(9, 30, 66, 0.12)",
     z2: "0px 0px 4px 2px rgba(73, 88, 89, 0.14)",
     z3: "0px 0px 8px 2px rgba(36, 59, 70, 0.14)",
     z4: "0px 0px 18px 6px rgba(36, 59, 70, 0.12)",
-    //
     ...p
   } : {
     z1: "0px 0px 2px 2px rgba(0, 0, 0, 0.16)",
     z2: "0px 0px 4px 2px rgba(17, 20, 20, 0.5)",
     z3: "0px 0px 8px 2px rgba(9, 9, 10, 0.60)",
     z4: "0px 0px 18px 6px rgba(9, 10, 10, 0.65)",
-    //
     ...p
   };
 }, l = {
-  light: n(s),
-  dark: n(o)
+  light: t(o),
+  dark: t(c)
 };
 export {
   i as c,