@m4l/styles 7.1.7 → 7.1.8

package/theme/palette/baseColors.js

@@ -1,393 +1,363 @@
 const F = {
   patronusBlue: {
-    toneOpacity10: "#EBF3FF",
-    // comprobado
-    toneOpacity20: "#263747",
-    // comprobado
-    10: "#DBE9FF",
-    // comprobado
-    20: "#B6D3FF",
-    // comprobado
-    30: "#6DA8FF",
-    // comprobado
-    40: "#3787FF",
-    // comprobado
+    5: "#EBF3FF",
+    // Comprobado
+    10: "#DBEAFE",
+    // Comprobado
+    20: "#BFDBFE",
+    // Comprobado
+    30: "#93C5FD",
+    // Comprobado
+    40: "#60A5FA",
+    // Comprobado
     50: "#0064FF",
-    // comprobado
-    60: "#0050C8",
-    // comprobado
-    70: "#003A92",
-    // comprobado
-    80: "#00245B",
-    // comprobado
-    90: "#000F24",
-    // comprobado
-    100: "#2C4053"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    60: "#2563EB",
+    // Comprobado
+    70: "#1D4ED8",
+    // Comprobado
+    80: "#1E40AF",
+    // Comprobado
+    90: "#1E3A8A",
+    // Comprobado
+    95: "#263747"
+    // Comprobado
   },
   crayonBlue: {
-    toneOpacity10: "#E5EEFC",
-    // comprobado
-    toneOpacity20: "#263543",
-    // comprobado
+    5: "#E5EEFC",
+    // Comprobado
     10: "#D7E6FC",
-    // comprobado
+    // Comprobado
     20: "#BBD4FA",
-    // comprobado
+    // Comprobado
     30: "#A4C6F9",
-    // comprobado
+    // Comprobado
     40: "#87B4F7",
-    // comprobado
+    // Comprobado
     50: "#5494F3",
-    // comprobado
+    // Comprobado
     60: "#2B7BF0",
-    // comprobado
+    // Comprobado
     70: "#1064E0",
-    // comprobado
+    // Comprobado
     80: "#0E56C2",
-    // comprobado
+    // Comprobado
     90: "#0A3F8F",
-    // comprobado
-    100: "#113366"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#263543"
+    // Comprobado
   },
   middleYellow: {
-    toneOpacity10: "#FBF9E0",
-    // comprobado
-    toneOpacity20: "#3C4027",
-    // comprobado
+    5: "#FBF9E0",
+    // Comprobado
     10: "#FFFDE9",
-    // comprobado
+    // Comprobado
     20: "#FFFBC5",
-    // comprobado
+    // Comprobado
     30: "#FFF688",
-    // comprobado
+    // Comprobado
     40: "#FFF25A",
-    // comprobado
+    // Comprobado
     50: "#FFEF26",
-    // comprobado
+    // Comprobado
     60: "#EFDD00",
-    // comprobado
+    // Comprobado
     70: "#D0C000",
-    // comprobado
+    // Comprobado
     80: "#BBAD00",
-    // comprobado
+    // Comprobado
     90: "#877D00",
-    // comprobado
-    100: "#353100"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#3C4027"
+    // Comprobado
   },
   acidGreen: {
-    toneOpacity10: "#E9F8E5",
-    // comprobado
-    toneOpacity20: "#2A3F2C",
-    // comprobado
+    5: "#E9F8E5",
+    // Comprobado
     10: "#ECFAEA",
-    // comprobado
+    // Comprobado
     20: "#C7F1BF",
-    // comprobado
+    // Comprobado
     30: "#A2E794",
-    // comprobado
+    // Comprobado
     40: "#7CDE69",
-    // comprobado
+    // Comprobado
     50: "#47CC2D",
-    // comprobado
+    // Comprobado
     60: "#3CAD26",
-    // comprobado
-    70: "#2E851D",
-    // comprobado
-    80: "#246617",
-    // comprobado
+    // Comprobado
+    70: "#339320",
+    // Comprobado
+    80: "#2C7D1C",
+    // Comprobado
     90: "#153D0E",
-    // comprobado
-    100: "#0B3D00"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#2A3F2C"
+    // Comprobado
   },
   grassGreen: {
-    toneOpacity10: "#D9ECE6",
-    // comprobado
-    toneOpacity20: "#27423A",
-    // comprobado
+    5: "#D9ECE6",
+    // Comprobado
     10: "#E3F4EB",
-    // comprobado
+    // Comprobado
     20: "#AADEC2",
-    // comprobado
+    // Comprobado
     30: "#7BCCA1",
-    // comprobado
+    // Comprobado
     40: "#3FA26D",
-    // comprobado
+    // Comprobado
     50: "#00804C",
-    // comprobado
+    // Comprobado
     60: "#005B37",
-    // comprobado
-    70: "#004026",
-    // comprobado
-    80: "#002416",
-    // comprobado
+    // Comprobado
+    70: "#00472A",
+    // Comprobado
+    80: "#063723",
+    // Comprobado
     90: "#00120B",
-    // comprobado
-    100: "#2C433D"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#27423A"
+    // Comprobado
   },
   desertBeige: {
-    toneOpacity10: "#F2F0EB",
-    // comprobado
-    toneOpacity20: "#454742",
-    // comprobado
+    5: "#F2F0EB",
+    // Comprobado
     10: "#F6EBE2",
-    // comprobado
+    // Comprobado
     20: "#EDD7C5",
-    // comprobado
+    // Comprobado
     30: "#E7CAB1",
-    // comprobado
+    // Comprobado
     40: "#DDB490",
-    // comprobado
+    // Comprobado
     50: "#D4A276",
-    // comprobado
+    // Comprobado
     60: "#BD8F68",
-    // comprobado
+    // Comprobado
     70: "#AD794C",
-    // comprobado
+    // Comprobado
     80: "#90653F",
-    // comprobado
+    // Comprobado
     90: "#735133",
-    // comprobado
-    100: "#454742"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#454742"
+    // Comprobado
   },
   turquiBlue: {
-    toneOpacity10: "#DEE9EB",
-    // comprobado
-    toneOpacity20: "#314042",
-    // comprobado
+    5: "#DEE9EB",
+    // Comprobado
     10: "#C8E1EC",
-    // comprobado
+    // Comprobado
     20: "#A3CDDF",
-    // comprobado
+    // Comprobado
     30: "#76A5BA",
-    // comprobado
+    // Comprobado
     40: "#377F9D",
-    // comprobado
-    50: "#2A6077",
-    // comprobado
-    60: "#214C5F",
-    // comprobado
-    70: "#1B3F4E",
-    // comprobado
-    80: "#15313C",
-    // comprobado
+    // Comprobado
+    50: "#236C8B",
+    // Comprobado
+    60: "#285B71",
+    // Comprobado
+    70: "#244F61",
+    // Comprobado
+    80: "#1B4555",
+    // Comprobado
     90: "#0F232B",
-    // comprobado
-    100: "#314042"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#2E3D41"
+    // Comprobado
   },
   blazeOrange: {
-    toneOpacity10: "#F4EFE1",
-    // comprobado
-    toneOpacity20: "#474638",
-    // comprobado
+    5: "#F4EFE1",
+    // Comprobado
     10: "#F9E9D0",
-    // comprobado
-    20: "#F4D3A1",
-    // comprobado
-    30: "#F2BD6D",
-    // comprobado
-    40: "#EBAE53",
-    // comprobado
-    50: "#E59722",
-    // comprobado
-    60: "#BA7916",
-    // comprobado
-    70: "#925F11",
-    // comprobado
-    80: "#774D0E",
-    // comprobado
-    90: "#55370A",
-    // comprobado
-    100: "#474638"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    20: "#FED7AA",
+    // Comprobado
+    30: "#FDBA74",
+    // Comprobado
+    40: "#FB923C",
+    // Comprobado
+    50: "#F97316",
+    // Comprobado
+    60: "#EA580C",
+    // Comprobado
+    70: "#C2410C",
+    // Comprobado
+    80: "#9A3412",
+    // Comprobado
+    90: "#7C2D12",
+    // Comprobado
+    95: "#474638"
+    // Comprobado
   },
   flameRed: {
-    toneOpacity10: "#FCDEDC",
-    // comprobado
-    toneOpacity20: "#3E3231",
-    // comprobado
+    5: "#FCDEDC",
+    // Comprobado
     10: "#FCDEDC",
-    // comprobado
+    // Comprobado
     20: "#F9BDB9",
-    // comprobado
+    // Comprobado
     30: "#F79D96",
-    // comprobado
-    40: "#F47C73",
-    // comprobado
+    // Comprobado
+    40: "#F87171",
+    // 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
+    // Comprobado
+    60: "#DC2626",
+    // Comprobado
+    70: "#B91C1C",
+    // Comprobado
+    80: "#991B1B",
+    // Comprobado
+    90: "#3E3231",
+    // Comprobado
+    95: "#3E3231"
+    // Comprobado
   },
   coolGrey: {
-    toneOpacity10: "#",
-    // No aplica
-    toneOpacity20: "#",
+    5: "",
     // No aplica
     10: "#BAC6CC",
-    // comprobado
+    // Comprobado
     20: "#A7B4B9",
-    // comprobado
+    // Comprobado
     30: "#94A1A6",
-    // comprobado
+    // Comprobado
     40: "#818F93",
-    // comprobado
+    // Comprobado
     50: "#687180",
-    // comprobado
+    // Comprobado
     60: "#5C696C",
-    // comprobado
+    // Comprobado
     70: "#495859",
-    // comprobado
+    // Comprobado
     80: "#364546",
-    // comprobado
+    // Comprobado
     90: "#233333",
-    // comprobado
-    100: "#233333"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: ""
+    // No aplica
   },
   brown: {
-    toneOpacity10: "#ECEAE6",
-    // comprobado
-    toneOpacity20: "#43433E",
-    // comprobado
+    5: "#ECEAE6",
+    // Comprobado
     10: "#DFC9BD",
-    // comprobado
+    // Comprobado
     20: "#C59D88",
-    // comprobado
+    // Comprobado
     30: "#B8886E",
-    // comprobado
+    // Comprobado
     40: "#B17D61",
-    // comprobado
+    // Comprobado
     50: "#9E694D",
-    // comprobado
+    // Comprobado
     60: "#875A42",
-    // comprobado
+    // Comprobado
     70: "#7C533D",
-    // comprobado
+    // Comprobado
     80: "#704B37",
-    // comprobado
+    // Comprobado
     90: "#654432",
-    // comprobado
-    100: "#3F413D"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#43433E"
+    // Comprobado
   },
   marbleLight: {
-    toneOpacity10: "#",
-    // No aplica
-    toneOpacity20: "#",
+    5: "",
     // No aplica
     10: "#FFFFFF",
-    // comprobado
+    // Comprobado
     20: "#F9FAFA",
-    // comprobado
+    // Comprobado
     30: "#F4F5F5",
-    // comprobado
+    // Comprobado
     40: "#F0F4F4",
-    // comprobado
+    // Comprobado
     50: "#E6E8EA",
-    // comprobado
+    // Comprobado
     60: "#E1E9EA",
-    // comprobado
+    // 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
+    // Comprobado
+    80: "",
+    // No aplica
+    90: "",
+    // No aplica
+    95: ""
+    // No aplica
   },
   onyx: {
-    toneOpacity10: "#",
-    // No aplica
-    toneOpacity20: "#",
+    5: "",
     // No aplica
     10: "#364040",
-    // comprobado
+    // Comprobado
     20: "#323B3B",
-    // comprobado
+    // Comprobado
     30: "#2A3232",
-    // comprobado
+    // Comprobado
     40: "#252C2C",
-    // comprobado
+    // Comprobado
     50: "#212727",
-    // comprobado
-    60: "#1C212",
-    // comprobado
+    // Comprobado
+    60: "#1C2121",
+    // 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
+    // Comprobado
+    80: "",
+    // No aplica
+    90: "",
+    // No aplica
+    95: ""
+    // No aplica
   },
   mint: {
-    toneOpacity10: "#",
-    // No aplica
-    toneOpacity20: "#",
+    5: "",
     // No aplica
     10: "#9BB4CA",
-    // comprobado
+    // Comprobado
     20: "#A1BDD9",
-    // comprobado
+    // Comprobado
     30: "#A6C5E2",
-    // comprobado
+    // Comprobado
     40: "#BCD6F0",
-    // comprobado
+    // Comprobado
     50: "#C8E1F9",
-    // comprobado
+    // Comprobado
     60: "#BFDBF8",
-    // comprobado
+    // Comprobado
     70: "#C3DEFE",
-    // comprobado
+    // Comprobado
     80: "#DFE7F2",
-    // comprobado
+    // Comprobado
     90: "#F1F2F4",
-    // comprobado
-    100: "#F1F2F4"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: ""
+    // No aplica
   },
   oxford: {
-    toneOpacity10: "#F9FAFA",
-    // comprobado
-    toneOpacity20: "#2A3232",
-    // comprobado
+    5: "#F9FAFA",
+    // Comprobado
     10: "#F7F8F9",
-    // comprobado
+    // Comprobado
     20: "#DCDFE4",
-    // comprobado
+    // Comprobado
     30: "#A7ADB8",
-    // comprobado
-    40: "#8590A2",
-    // comprobado
-    50: "#758195",
-    // comprobado
+    // Comprobado
+    40: "#9EB1C7",
+    // Comprobado
+    50: "#8E9DB4",
+    // Comprobado
     60: "#626F86",
-    // comprobado
+    // Comprobado
     70: "#44546F",
-    // comprobado
-    80: "#2C3E5D",
-    // comprobado
+    // Comprobado
+    80: "#374762",
+    // Comprobado
     90: "#091E42",
-    // comprobado
-    100: "#091E42"
-    // Todo: Validar este color desde figma
+    // Comprobado
+    95: "#2A3232"
+    // Comprobado
   }
 };
 export {

package/theme/palette/baseOpacityColors.js

@@ -91,6 +91,16 @@ const a = {
     60: e(r.mint[60], 0.28),
     70: e(r.mint[10], 0.5)
   },
+  onyx: {
+    10: e(r.onyx[50], 0.08),
+    20: e(r.onyx[50], 0.12),
+    30: e(r.onyx[50], 0.16),
+    40: e(r.onyx[50], 0.32),
+    50: e(r.onyx[50], 0.48),
+    60: e(r.onyx[50], 0.6),
+    70: e(r.onyx[50], 0.72),
+    80: e(r.onyx[70], 0.72)
+  },
   middle: {
     10: e(r.middleYellow[50], 0.08),
     20: e(r.middleYellow[50], 0.12),

package/theme/palette/defaultColors.d.ts

@@ -7,8 +7,8 @@ export declare const PRESET_DEFAULT: DefaultPresetColor;
 /**
  * Opción de paleta default en modo light, se usa para colorear componentes con la variante semántica de tipo default
  */
-export declare const BASE_DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'selected' | 'contrastText'>;
+export declare const BASE_DEFAULT_COLOR_LIGHT: Omit<PaletteColor, 'focusVisible' | 'selected' | 'selectedOpacity' | 'contrastText'>;
 /**
  * Opción de paleta default en modo dark, se usa para colorear componentes con la variante semántica de tipo default
  */
-export declare const BASE_DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'selected' | 'contrastText'>;
+export declare const BASE_DEFAULT_COLOR_DARK: Omit<PaletteColor, 'focusVisible' | 'selected' | 'selectedOpacity' | 'contrastText'>;