@m4l/styles 6.1.1 → 6.2.1

package/theme/{palette-voCQl3kP.js → palette-C5yYre7Z.js}

@@ -2,214 +2,393 @@ import { alpha as a } from "@mui/material/styles";
 const t = {
   patronusBlue: {
     toneOpacity10: "#EBF3FF",
+    // comprobado
     toneOpacity20: "#263747",
+    // comprobado
     10: "#DBE9FF",
+    // comprobado
     20: "#B6D3FF",
+    // comprobado
     30: "#6DA8FF",
+    // comprobado
     40: "#3787FF",
+    // comprobado
     50: "#0064FF",
+    // comprobado
     60: "#0050C8",
+    // comprobado
     70: "#003A92",
+    // comprobado
     80: "#00245B",
+    // comprobado
     90: "#000F24",
+    // comprobado
     100: "#2C4053"
+    // Todo: Validar este color desde figma
   },
   crayonBlue: {
     toneOpacity10: "#E5EEFC",
+    // comprobado
     toneOpacity20: "#263543",
-    10: "#D9E9FF",
-    20: "#88B7FC",
-    30: "#6AA4F9",
-    40: "#5494F3",
-    50: "#2774E6",
-    60: "#2367CC",
-    70: "#1F5AB3",
-    80: "#1A4D99",
-    90: "#113366",
+    // comprobado
+    10: "#D7E6FC",
+    // comprobado
+    20: "#BBD4FA",
+    // comprobado
+    30: "#A4C6F9",
+    // comprobado
+    40: "#87B4F7",
+    // comprobado
+    50: "#5494F3",
+    // comprobado
+    60: "#2B7BF0",
+    // comprobado
+    70: "#1064E0",
+    // comprobado
+    80: "#0E56C2",
+    // comprobado
+    90: "#0A3F8F",
+    // comprobado
     100: "#113366"
+    // Todo: Validar este color desde figma
   },
   middleYellow: {
     toneOpacity10: "#FBF9E0",
+    // comprobado
     toneOpacity20: "#3C4027",
-    10: "#FFFBCE",
-    20: "#FFF79C",
-    30: "#FFF46B",
-    40: "#FFF039",
-    50: "#FFEC08",
-    60: "#E5D400",
-    70: "#9E9200",
-    80: "#696100",
-    90: "#353100",
+    // comprobado
+    10: "#FFFDE9",
+    // comprobado
+    20: "#FFFBC5",
+    // comprobado
+    30: "#FFF688",
+    // comprobado
+    40: "#FFF25A",
+    // comprobado
+    50: "#FFEF26",
+    // comprobado
+    60: "#EFDD00",
+    // comprobado
+    70: "#D0C000",
+    // comprobado
+    80: "#BBAD00",
+    // comprobado
+    90: "#877D00",
+    // comprobado
     100: "#353100"
+    // Todo: Validar este color desde figma
   },
   acidGreen: {
     toneOpacity10: "#E9F8E5",
+    // comprobado
     toneOpacity20: "#2A3F2C",
-    10: "#CDFFC2",
-    20: "#A8FF97",
-    30: "#83FF6B",
-    40: "#5EFF40",
-    50: "#39FF14",
-    60: "#47CC2D",
-    70: "#1F9009",
-    80: "#176E05",
-    90: "#0B3D00",
+    // comprobado
+    10: "#ECFAEA",
+    // comprobado
+    20: "#C7F1BF",
+    // comprobado
+    30: "#A2E794",
+    // comprobado
+    40: "#7CDE69",
+    // comprobado
+    50: "#47CC2D",
+    // comprobado
+    60: "#3CAD26",
+    // comprobado
+    70: "#2E851D",
+    // comprobado
+    80: "#246617",
+    // comprobado
+    90: "#153D0E",
+    // comprobado
     100: "#0B3D00"
+    // Todo: Validar este color desde figma
   },
   grassGreen: {
     toneOpacity10: "#D9ECE6",
+    // comprobado
     toneOpacity20: "#27423A",
+    // comprobado
     10: "#E3F4EB",
+    // comprobado
     20: "#AADEC2",
+    // comprobado
     30: "#7BCCA1",
+    // comprobado
     40: "#3FA26D",
+    // comprobado
     50: "#00804C",
+    // comprobado
     60: "#005B37",
+    // comprobado
     70: "#004026",
+    // comprobado
     80: "#002416",
+    // comprobado
     90: "#00120B",
+    // comprobado
     100: "#2C433D"
+    // Todo: Validar este color desde figma
   },
   desertBeige: {
     toneOpacity10: "#F2F0EB",
+    // comprobado
     toneOpacity20: "#454742",
+    // comprobado
     10: "#F6EBE2",
+    // comprobado
     20: "#EDD7C5",
+    // comprobado
     30: "#E7CAB1",
+    // comprobado
     40: "#DDB490",
+    // comprobado
     50: "#D4A276",
+    // comprobado
     60: "#BD8F68",
+    // comprobado
     70: "#AD794C",
+    // comprobado
     80: "#90653F",
+    // comprobado
     90: "#735133",
+    // comprobado
     100: "#454742"
+    // Todo: Validar este color desde figma
   },
   turquiBlue: {
     toneOpacity10: "#DEE9EB",
+    // comprobado
     toneOpacity20: "#314042",
+    // comprobado
     10: "#C8E1EC",
+    // comprobado
     20: "#A3CDDF",
+    // comprobado
     30: "#76A5BA",
+    // comprobado
     40: "#377F9D",
+    // comprobado
     50: "#2A6077",
+    // comprobado
     60: "#214C5F",
+    // comprobado
     70: "#1B3F4E",
+    // comprobado
     80: "#15313C",
+    // comprobado
     90: "#0F232B",
+    // comprobado
     100: "#314042"
+    // Todo: Validar este color desde figma
   },
   blazeOrange: {
     toneOpacity10: "#F4EFE1",
+    // comprobado
     toneOpacity20: "#474638",
+    // comprobado
     10: "#F9E9D0",
+    // comprobado
     20: "#F4D3A1",
+    // comprobado
     30: "#F2BD6D",
+    // comprobado
     40: "#EBAE53",
+    // comprobado
     50: "#E59722",
+    // comprobado
     60: "#BA7916",
+    // comprobado
     70: "#925F11",
+    // comprobado
     80: "#774D0E",
-    90: "#735133",
+    // comprobado
+    90: "#55370A",
+    // comprobado
     100: "#474638"
+    // Todo: Validar este color desde figma
   },
   flameRed: {
     toneOpacity10: "#FCDEDC",
+    // comprobado
     toneOpacity20: "#3E3231",
-    10: "#FFD8D8",
-    20: "#F59292",
-    30: "#F66A6A",
-    40: "#F15B50",
-    50: "#F71919",
-    60: "#D31616",
-    70: "#AF1212",
+    // comprobado
+    10: "#FCDEDC",
+    // comprobado
+    20: "#F9BDB9",
+    // comprobado
+    30: "#F79D96",
+    // comprobado
+    40: "#F47C73",
+    // comprobado
+    50: "#F15B50",
+    // comprobado
+    60: "#EE382B",
+    // comprobado
+    70: "#D01E11",
+    // comprobado
     80: "#8A0F0F",
+    // Todo: Validar este color desde figma
     90: "#660C0C",
+    // Todo: Validar este color desde figma
     100: "#660C0C"
+    // Todo: Validar este color desde figma
   },
   coolGrey: {
     toneOpacity10: "#",
+    // No aplica
     toneOpacity20: "#",
+    // No aplica
     10: "#BAC6CC",
+    // comprobado
     20: "#A7B4B9",
+    // comprobado
     30: "#94A1A6",
+    // comprobado
     40: "#818F93",
-    50: "#6E7C80",
-    60: "#5C6A6C",
+    // comprobado
+    50: "#687180",
+    // comprobado
+    60: "#5C696C",
+    // comprobado
     70: "#495859",
+    // comprobado
     80: "#364546",
+    // comprobado
     90: "#233333",
+    // comprobado
     100: "#233333"
+    // Todo: Validar este color desde figma
   },
   brown: {
     toneOpacity10: "#ECEAE6",
+    // comprobado
     toneOpacity20: "#43433E",
+    // comprobado
     10: "#DFC9BD",
+    // comprobado
     20: "#C59D88",
+    // comprobado
     30: "#B8886E",
+    // comprobado
     40: "#B17D61",
+    // comprobado
     50: "#9E694D",
+    // comprobado
     60: "#875A42",
+    // comprobado
     70: "#7C533D",
+    // comprobado
     80: "#704B37",
+    // comprobado
     90: "#654432",
+    // comprobado
     100: "#3F413D"
+    // Todo: Validar este color desde figma
   },
   marbleLight: {
     toneOpacity10: "#",
+    // No aplica
     toneOpacity20: "#",
+    // No aplica
     10: "#FFFFFF",
+    // comprobado
     20: "#F9FAFA",
-    //'#F5F9FA',
+    // comprobado
     30: "#F4F5F5",
+    // comprobado
     40: "#F0F4F4",
+    // comprobado
     50: "#E6E8EA",
+    // comprobado
     60: "#E1E9EA",
+    // comprobado
     70: "#E2E7E9",
+    // comprobado
     80: "#fff0",
+    // Todo: Validar este color desde figma
     90: "#fff0",
+    // Todo: Validar este color desde figma
     100: "#fff0"
+    // Todo: Validar este color desde figma
   },
   onyx: {
     toneOpacity10: "#",
+    // No aplica
     toneOpacity20: "#",
+    // No aplica
     10: "#364040",
+    // comprobado
     20: "#323B3B",
+    // comprobado
     30: "#2A3232",
+    // comprobado
     40: "#252C2C",
+    // comprobado
     50: "#212727",
-    60: "#1C2121",
+    // comprobado
+    60: "#1C212",
+    // comprobado
     70: "#090A0A",
+    // comprobado
     80: "#fff0",
+    // Todo: Validar este color desde figma
     90: "#fff0",
+    // Todo: Validar este color desde figma
     100: "#fff0"
+    // Todo: Validar este color desde figma
   },
   mint: {
     toneOpacity10: "#",
+    // No aplica
     toneOpacity20: "#",
+    // No aplica
     10: "#9BB4CA",
+    // comprobado
     20: "#A1BDD9",
+    // comprobado
     30: "#A6C5E2",
+    // comprobado
     40: "#BCD6F0",
+    // comprobado
     50: "#C8E1F9",
+    // comprobado
     60: "#BFDBF8",
+    // comprobado
     70: "#C3DEFE",
+    // comprobado
     80: "#DFE7F2",
+    // comprobado
     90: "#F1F2F4",
+    // comprobado
     100: "#F1F2F4"
+    // Todo: Validar este color desde figma
   },
   oxford: {
     toneOpacity10: "#F9FAFA",
+    // comprobado
     toneOpacity20: "#2A3232",
+    // comprobado
     10: "#F7F8F9",
+    // comprobado
     20: "#DCDFE4",
-    30: "#B3B9C4",
+    // comprobado
+    30: "#A7ADB8",
+    // comprobado
     40: "#8590A2",
+    // comprobado
     50: "#758195",
+    // comprobado
     60: "#626F86",
+    // comprobado
     70: "#44546F",
+    // comprobado
     80: "#2C3E5D",
+    // comprobado
     90: "#091E42",
+    // comprobado
     100: "#091E42"
+    // Todo: Validar este color desde figma
   }
 }, e = {
   patronus: {
@@ -554,10 +733,10 @@ const t = {
 }, c = Object.keys(r), p = c.map((n) => ({
   name: n,
   value: r[n].main
-})), u = {
+})), y = {
   black: "#000",
   white: "#fff"
-}, y = {
+}, u = {
   0: "#FFFFFF",
   100: "#F9FAFB",
   200: "#F4F6F8",
@@ -641,7 +820,6 @@ const t = {
 }, h = {
   info: {
     main: i.info.main,
-    focusVisible: i.info.light,
     focusActive: i.info.lighter,
     hover: i.info.light,
     opacity: i.info.opacityLight,
@@ -654,7 +832,6 @@ const t = {
   },
   success: {
     main: i.success.main,
-    focusVisible: i.success.light,
     focusActive: i.success.lighter,
     hover: i.success.light,
     opacity: i.success.opacityLight,
@@ -667,7 +844,6 @@ const t = {
   },
   warning: {
     main: i.warning.main,
-    focusVisible: i.warning.light,
     focusActive: i.warning.lighter,
     hover: i.warning.light,
     opacity: i.warning.opacityLight,
@@ -680,7 +856,6 @@ const t = {
   },
   error: {
     main: i.error.main,
-    focusVisible: i.error.light,
     focusActive: i.error.lighter,
     hover: i.error.light,
     opacity: i.error.opacityLight,
@@ -694,7 +869,6 @@ const t = {
 }, d = {
   info: {
     main: i.info.main,
-    focusVisible: i.info.dark,
     focusActive: i.info.darker,
     hover: i.info.dark,
     opacity: i.info.opacityDark,
@@ -707,7 +881,6 @@ const t = {
   },
   success: {
     main: i.success.main,
-    focusVisible: i.success.dark,
     focusActive: i.success.darker,
     hover: i.success.dark,
     opacity: i.success.opacityDark,
@@ -720,7 +893,6 @@ const t = {
   },
   warning: {
     main: i.warning.main,
-    focusVisible: i.warning.dark,
     focusActive: i.warning.darker,
     hover: i.warning.dark,
     opacity: i.warning.opacityDark,
@@ -733,7 +905,6 @@ const t = {
   },
   error: {
     main: i.error.main,
-    focusVisible: i.error.dark,
     focusActive: i.error.darker,
     hover: i.error.dark,
     opacity: i.error.opacityDark,
@@ -765,7 +936,7 @@ const t = {
   //Por compatibilidad con MUI
   light: o.light,
   dark: o.dark
-}, b = {
+}, k = {
   main: o.mainLight,
   focusActive: o.lighter,
   hover: o.dark,
@@ -778,13 +949,13 @@ const t = {
 };
 export {
   t as B,
-  u as C,
+  y as C,
   O as D,
-  y as G,
+  u as G,
   r as P,
   h as S,
   e as a,
-  b,
+  k as b,
   d as c,
   l as d,
   g as e,

package/theme/{shadows-Cek_1mpN.js → shadows-BTb924yW.js}

@@ -1,5 +1,5 @@
 import { alpha as a } from "@mui/material/styles";
-import { G as n, B as s, C as e } from "./palette-voCQl3kP.js";
+import { G as n, B as s, C as e } from "./palette-C5yYre7Z.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 [

package/theme/sizes/types.d.ts

@@ -2,6 +2,7 @@
  * Conjunto de valores predeterminados utilizados para definir el radio de borde en los
  * componentes de la aplicación web.
 */
+import { Typography } from "../typography/types";
 export interface BaseBorderRadius {
     'r0': string;
     'r0.5': string;
@@ -70,4 +71,5 @@ export interface Size {
     mobile: PointerQrSizes;
     desktop: PointerQrSizes;
     borderRadius: BaseBorderRadius;
+    typography: Typography;
 }

package/theme/typography/baseFontSize.d.ts

@@ -0,0 +1,2 @@
+import { BaseFontSize } from "./types";
+export declare const BASE_FONT_SIZE: BaseFontSize;

package/theme/typography/baseLineHeight.d.ts

@@ -0,0 +1,8 @@
+export declare const BASE_LINE_HEIGHT: {
+    lh1: string;
+    lh2: string;
+    lh3: string;
+    lh4: string;
+    lh5: string;
+    lh6: string;
+};

package/theme/typography/baseWeight.d.ts

@@ -0,0 +1,2 @@
+import { BaseWeight } from "./types";
+export declare const BASE_WEIGHT: BaseWeight;

package/theme/typography/types.d.ts

@@ -0,0 +1,98 @@
+import { Sizes } from "../sizes";
+/**
+ * Conjunto predefinido de tamaños para textos en la aplicación web.
+*/
+export interface BaseFontSize {
+    pt10: string;
+    pt11: string;
+    pt12: string;
+    pt13: string;
+    pt14: string;
+    pt15: string;
+    pt16: string;
+    pt17: string;
+    pt18: string;
+    pt19: string;
+    pt20: string;
+    pt21: string;
+    pt22: string;
+    pt23: string;
+    pt24: string;
+    pt25: string;
+    pt26: string;
+    pt27: string;
+    pt28: string;
+    pt29: string;
+    pt30: string;
+    pt31: string;
+    pt32: string;
+    pt33: string;
+    pt34: string;
+    pt35: string;
+    pt36: string;
+    pt37: string;
+    pt38: string;
+    pt39: string;
+    pt40: string;
+    pt41: string;
+    pt42: string;
+    pt43: string;
+    pt44: string;
+    pt45: string;
+    pt46: string;
+    pt47: string;
+    pt48: string;
+    pt49: string;
+    pt50: string;
+    pt51: string;
+    pt52: string;
+    pt53: string;
+    pt54: string;
+    pt55: string;
+    pt56: string;
+    pt57: string;
+    pt58: string;
+    pt59: string;
+    pt60: string;
+}
+/**
+ * Lista de variantes semánticas en tipografía que se pueden utilizar en la aplicación web.
+*/
+export declare type TypographyVariants = 'h1' | 'h2' | 'h3' | 'h5' | 'subtitle' | 'paragraph' | 'body';
+/**
+ * Son los valores de tamaño para las diferentes variantes semánticas de tipografía.
+*/
+export declare type TypographySizesValues = Record<TypographyVariants, string>;
+/**
+ * Representa las condiciones de tamaño en la aplicación web y define los diferentes valores en las variantes semánticas de tipografía.
+*/
+export declare type TypographySizes = Record<Sizes, TypographySizesValues>;
+/**
+ * Representa el conjunto de opciones predefinidas para asignar las altura de línea en los textos de la aplicación web.
+*/
+export interface BaseLineHeight {
+    lh1: string;
+    lh2: string;
+    lh3: string;
+    lh4: string;
+    lh5: string;
+    lh6: string;
+}
+/**
+ * Representa el conjunto de opciones predefinidas para asginar los grosores de texto en la aplicación web.
+*/
+export interface BaseWeight {
+    regular: number;
+    dens: number;
+    number: number;
+}
+/**
+ * Representa el conjunto con el que los desarrolladores seleccionan el tamaño de los direntes textos en la aplicación web.
+*/
+export interface Typography {
+    mobile: TypographySizes;
+    desktop: TypographySizes;
+    lineHeight: BaseLineHeight;
+    weight: BaseWeight;
+    letterSpacing: number;
+}

package/theme/typography/typography.d.ts

@@ -0,0 +1,2 @@
+import { Typography } from "./types";
+export declare const TYPOGRAPHY: Typography;

package/theme/typography/typographySizes.d.ts

@@ -0,0 +1,3 @@
+import { TypographySizes } from "./types";
+export declare const TYPOGRAPHY_SIZES_MOBILE: TypographySizes;
+export declare const TYPOGRAPHY_SIZES_DESKTOP: TypographySizes;