@m4l/styles 7.1.27 → 7.1.29-beta.1

package/theme/palette/presetColors.js

@@ -38,9 +38,9 @@ const a = {
     // comprobado,
     activeOpacityDark: e.patronus[50],
     // comprobado,
-    focusOpacityLight: e.patronus[5] || "#fff",
+    focusOpacityLight: e.patronus[10] || "#fff",
     // comprobado,
-    focusOpacityDark: e.patronus[10],
+    focusOpacityDark: e.patronus[20],
     // comprobado,
     opacityLight: e.patronus[10],
     // comprobado,
@@ -54,13 +54,13 @@ const a = {
     // comprobado,,
     dark: t.patronusBlue[30],
     // comprobado,,
-    darker: t.patronusBlue[30],
+    darker: t.patronusBlue[10],
     // comprobado,,
     contrastText: t.marbleLight[30],
     // comprobado,
     semanticTextLight: t.patronusBlue[70],
     // comprobado,
-    semanticTextDark: t.patronusBlue[40],
+    semanticTextDark: t.patronusBlue[30],
     // comprobado,
     // Tone colors
     toneOpacityLight: t.patronusBlue[5],
@@ -68,9 +68,81 @@ const a = {
     toneOpacityDark: t.patronusBlue[95],
     // comprobado,
     // border
-    borderMainDark: e.patronus[50],
+    borderMainLight: e.patronus[40],
     // comprobado,
-    borderMainLight: e.patronus[50]
+    borderMainDark: e.patronus[40]
+    // comprobado,
+  },
+  grass: {
+    enabledLight: t.grassGreen[50],
+    // comprobado
+    enabledDark: t.grassGreen[50],
+    // comprobado
+    hoverLight: t.grassGreen[40],
+    // comprobado,
+    hoverDark: t.grassGreen[40],
+    // comprobado,
+    selectedLight: t.grassGreen[60],
+    // comprobado,
+    selectedDark: t.grassGreen[60],
+    // comprobado,
+    activeLight: t.grassGreen[70],
+    // comprobado,
+    activeDark: t.grassGreen[70],
+    // comprobado,
+    focusLight: t.grassGreen[40],
+    // comprobado,
+    focusDark: t.grassGreen[60],
+    // comprobado,
+    enabledOpacityLight: e.grass[30],
+    // comprobado
+    enabledOpacityDark: e.grass[30],
+    // comprobado,
+    hoverOpacityLight: e.grass[20],
+    // comprobado,
+    hoverOpacityDark: e.grass[20],
+    // comprobado,
+    selectedOpacityLight: e.grass[30],
+    // comprobado,
+    selectedOpacityDark: e.grass[40],
+    // comprobado,
+    activeOpacityLight: e.grass[40],
+    // comprobado,
+    activeOpacityDark: e.grass[50],
+    // comprobado,
+    focusOpacityLight: e.grass[10],
+    // comprobado,
+    focusOpacityDark: e.grass[15] || "#fff",
+    // comprobado,
+    opacityLight: e.grass[10],
+    // comprobado,
+    opacityDark: e.grass[10],
+    // comprobado,
+    main: t.grassGreen[50],
+    // comprobado,,
+    light: t.grassGreen[30],
+    // comprobado,,
+    lighter: t.grassGreen[70],
+    // comprobado,,
+    dark: t.grassGreen[20],
+    // comprobado,,
+    darker: t.grassGreen[10],
+    // comprobado,,
+    contrastText: t.marbleLight[30],
+    // comprobado,
+    semanticTextLight: t.grassGreen[60],
+    // comprobado,
+    semanticTextDark: t.grassGreen[30],
+    // comprobado,
+    // Tone colors
+    toneOpacityLight: t.grassGreen[5],
+    // comprobado,
+    toneOpacityDark: t.grassGreen[95],
+    // comprobado,
+    // border
+    borderMainLight: e.grass[40],
+    // comprobado,
+    borderMainDark: e.grass[40]
     // comprobado,
   },
   turqui: {
@@ -132,7 +204,7 @@ const a = {
     // comprobado,
     semanticTextLight: t.turquiBlue[50],
     // comprobado,
-    semanticTextDark: t.turquiBlue[40],
+    semanticTextDark: t.turquiBlue[20],
     // comprobado,
     // Tone colors
     toneOpacityLight: t.turquiBlue[5],
@@ -140,9 +212,9 @@ const a = {
     toneOpacityDark: t.turquiBlue[95],
     // comprobado,
     // border
-    borderMainDark: e.turqui[50],
+    borderMainLight: e.turqui[40],
     // comprobado,
-    borderMainLight: e.turqui[50]
+    borderMainDark: e.turqui[40]
     // comprobado,
   },
   brown: {
@@ -180,7 +252,7 @@ const a = {
     // comprobado,
     activeOpacityLight: e.brown[40],
     // comprobado,
-    activeOpacityDark: e.brown[40],
+    activeOpacityDark: e.brown[50],
     // comprobado,
     focusOpacityLight: e.brown[10],
     // comprobado,
@@ -204,7 +276,7 @@ const a = {
     // comprobado,
     semanticTextLight: t.brown[50],
     // comprobado,
-    semanticTextDark: t.brown[40],
+    semanticTextDark: t.brown[10],
     // comprobado,
     // Tone colors
     toneOpacityLight: t.brown[5],
@@ -212,9 +284,9 @@ const a = {
     toneOpacityDark: t.brown[95],
     // comprobado,
     // border
-    borderMainDark: e.brown[50],
+    borderMainDark: e.brown[40],
     // comprobado,
-    borderMainLight: e.brown[50]
+    borderMainLight: e.brown[40]
     // comprobado,
   },
   blaze: {
@@ -284,81 +356,9 @@ const a = {
     toneOpacityDark: t.blazeOrange[95],
     // comprobado,
     // border
-    borderMainDark: e.blaze[50],
-    // comprobado,
-    borderMainLight: e.blaze[50]
-    // comprobado,
-  },
-  grass: {
-    enabledLight: t.grassGreen[50],
-    // comprobado
-    enabledDark: t.grassGreen[50],
-    // comprobado
-    hoverLight: t.grassGreen[40],
-    // comprobado,
-    hoverDark: t.grassGreen[40],
-    // comprobado,
-    selectedLight: t.grassGreen[60],
-    // comprobado,
-    selectedDark: t.grassGreen[60],
-    // comprobado,
-    activeLight: t.grassGreen[70],
-    // comprobado,
-    activeDark: t.grassGreen[70],
-    // comprobado,
-    focusLight: t.grassGreen[40],
-    // comprobado,
-    focusDark: t.grassGreen[60],
-    // comprobado,
-    enabledOpacityLight: e.grass[30],
-    // comprobado
-    enabledOpacityDark: e.grass[30],
-    // comprobado,
-    hoverOpacityLight: e.grass[20],
-    // comprobado,
-    hoverOpacityDark: e.grass[20],
-    // comprobado,
-    selectedOpacityLight: e.grass[30],
-    // comprobado,
-    selectedOpacityDark: e.grass[40],
-    // comprobado,
-    activeOpacityLight: e.grass[40],
-    // comprobado,
-    activeOpacityDark: e.grass[50],
-    // comprobado,
-    focusOpacityLight: e.grass[10],
-    // comprobado,
-    focusOpacityDark: e.grass[15] || "#fff",
-    // comprobado,
-    opacityLight: e.grass[10],
-    // comprobado,
-    opacityDark: e.grass[10],
-    // comprobado,
-    main: t.grassGreen[50],
-    // comprobado,,
-    light: t.grassGreen[30],
-    // comprobado,,
-    lighter: t.grassGreen[70],
-    // comprobado,,
-    dark: t.grassGreen[20],
-    // comprobado,,
-    darker: t.grassGreen[10],
-    // comprobado,,
-    contrastText: t.marbleLight[30],
-    // comprobado,
-    semanticTextLight: t.grassGreen[60],
-    // comprobado,
-    semanticTextDark: t.grassGreen[40],
-    // comprobado,
-    // Tone colors
-    toneOpacityLight: t.grassGreen[5],
-    // comprobado,
-    toneOpacityDark: t.grassGreen[95],
-    // comprobado,
-    // border
-    borderMainDark: e.grass[50],
+    borderMainLight: e.blaze[40],
     // comprobado,
-    borderMainLight: e.grass[50]
+    borderMainDark: e.blaze[40]
     // comprobado,
   }
 }, o = {

package/theme/palette/semanticColors.js

@@ -197,7 +197,7 @@ const e = {
     // Tone colors
     toneOpacityLight: a.flameRed[5],
     // comprobado,
-    toneOpacityDark: a.flameRed[95]
+    toneOpacityDark: a.flameRed[90]
   },
   success: {
     enabledLight: a.acidGreen[50],
@@ -232,7 +232,7 @@ const e = {
     // comprobado,
     selectedOpacityDark: t.acid[40],
     // comprobado,
-    activeOpacityLight: t.acid[40],
+    activeOpacityLight: t.acid[50],
     // comprobado,
     activeOpacityDark: t.acid[50],
     // comprobado,

package/theme/typography/baseLetterSpacing.js

@@ -1,6 +1,7 @@
-const E = {
-  "0.5": "0.5px"
+const n = {
+  normal: "0.5px",
+  dens: "0.8px"
 };
 export {
-  E as B
+  n as B
 };

package/theme/typography/baseWeight.js

@@ -1,7 +1,8 @@
 const e = {
-  regular: 500,
-  dens: 700,
-  number: 0
+  regular: 520,
+  dens: 720,
+  number: 0,
+  medium: 600
 };
 export {
   e as B

package/theme/typography/types.d.ts

@@ -58,12 +58,13 @@ export interface BaseFontSize {
 /**
  * Lista de variantes semánticas en tipografía que se pueden utilizar en la aplicación web.
  */
-export type TypographyVariants = 'h1' | 'h2' | 'h3' | 'h5' | 'subtitle' | 'subtitleDens' | 'paragraph' | 'paragraphDens' | 'body' | 'bodyDens';
+export type TypographyVariants = 'h1' | 'h2' | 'h3' | 'h5' | 'subtitle' | 'subtitleDens' | 'paragraph' | 'paragraphDens' | 'caption' | 'captionDens' | 'body' | 'bodyDens';
 /**
  *  Representa los valores predefinidos para los espaciados entre caracteres en la aplicación web.
  */
 export interface BaseLetterSpacing {
-    '0.5': '0.5px';
+    normal: string;
+    dens: string;
 }
 /**
  * Lista de atributos css que se pueden aplicar a los textos en la aplicación web.
@@ -101,6 +102,7 @@ export interface BaseWeight {
     regular: number;
     dens: number;
     number: number;
+    medium: number;
 }
 /**
  * Representa el conjunto con el que los desarrolladores seleccionan el tamaño de los direntes textos en la aplicación web.

package/theme/typography/typography.js

@@ -1,14 +1,14 @@
 import { B as o } from "./baseLetterSpacing.js";
 import { B as E } from "./baseLineHeight.js";
-import { B as t } from "./baseWeight.js";
-import { T as r, a as S } from "./typographySizes.js";
-const a = {
-  mobile: r,
-  desktop: S,
+import { B as r } from "./baseWeight.js";
+import { T as t, a as m } from "./typographySizes.js";
+const _ = {
+  mobile: t,
+  desktop: m,
   lineHeight: E,
-  weight: t,
-  letterSpacing: o["0.5"]
+  weight: r,
+  letterSpacing: o.normal
 };
 export {
-  a as T
+  _ as T
 };

package/theme/typography/typographySizes.js

@@ -2,67 +2,79 @@ import { B as e } from "./baseFontSize.js";
 import { B as t } from "./baseLetterSpacing.js";
 import { B as n } from "./baseLineHeight.js";
 import { B as i } from "./baseWeight.js";
-const a = {
+const g = {
   small: {
     h1: {
       fontSize: e.pt42,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt32,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt26,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt20,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
-      fontSize: e.pt17,
+      fontSize: e.pt15,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
-      fontSize: e.pt17,
+      fontSize: e.pt15,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
-      fontSize: e.pt15,
+      fontSize: e.pt13,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
-      fontSize: e.pt15,
+      fontSize: e.pt13,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
-      fontSize: e.pt13,
+      fontSize: e.pt11,
       fontWeight: i.regular,
-      lineHeight: n.lh3,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.normal
     },
     bodyDens: {
+      fontSize: e.pt11,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt13,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
       fontSize: e.pt13,
       fontWeight: i.dens,
-      lineHeight: n.lh3,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.dens
     }
   },
   medium: {
@@ -70,124 +82,148 @@ const a = {
       fontSize: e.pt44,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt32,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt28,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt20,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
-      fontSize: e.pt18,
+      fontSize: e.pt16,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
-      fontSize: e.pt18,
+      fontSize: e.pt16,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
-      fontSize: e.pt15,
+      fontSize: e.pt14,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
-      fontSize: e.pt15,
+      fontSize: e.pt14,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
-      fontSize: e.pt14,
+      fontSize: e.pt12,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     bodyDens: {
-      fontSize: e.pt14,
+      fontSize: e.pt12,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt13,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
+      fontSize: e.pt13,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
     }
   }
-}, h = {
+}, p = {
   small: {
     h1: {
       fontSize: e.pt54,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt42,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt30,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt26,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
       fontSize: e.pt14,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
       fontSize: e.pt14,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
       fontSize: e.pt12,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
       fontSize: e.pt12,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
       fontSize: e.pt10,
       fontWeight: i.regular,
-      lineHeight: n.lh1,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.normal
     },
     bodyDens: {
       fontSize: e.pt10,
       fontWeight: i.dens,
-      lineHeight: n.lh1,
-      letterSpacing: t["0.5"]
+      lineHeight: n.normal,
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt12,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
+      fontSize: e.pt12,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
     }
   },
   medium: {
@@ -195,65 +231,77 @@ const a = {
       fontSize: e.pt56,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h2: {
       fontSize: e.pt44,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h3: {
       fontSize: e.pt32,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     h5: {
       fontSize: e.pt28,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitle: {
       fontSize: e.pt15,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     subtitleDens: {
       fontSize: e.pt15,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     paragraph: {
       fontSize: e.pt13,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     paragraphDens: {
       fontSize: e.pt13,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
     },
     body: {
       fontSize: e.pt11,
       fontWeight: i.regular,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.normal
     },
     bodyDens: {
       fontSize: e.pt11,
       fontWeight: i.dens,
       lineHeight: n.normal,
-      letterSpacing: t["0.5"]
+      letterSpacing: t.dens
+    },
+    caption: {
+      fontSize: e.pt12,
+      fontWeight: i.regular,
+      lineHeight: n.normal,
+      letterSpacing: t.normal
+    },
+    captionDens: {
+      fontSize: e.pt12,
+      fontWeight: i.dens,
+      lineHeight: n.normal,
+      letterSpacing: t.dens
     }
   }
 };
 export {
-  a as T,
-  h as a
+  g as T,
+  p as a
 };