@stackcraftmx/calcita 0.23.0 → 0.26.0

package/dist/theme/components/MuiAppBar.js

@@ -1,4 +1,5 @@
 import { paletteOf } from "./paletteOf.js";
+import { lightDarkStylesOf } from "../lightDarkStyles.js";
 function MuiAppBar() {
   return {
     MuiAppBar: {
@@ -9,11 +10,11 @@ function MuiAppBar() {
           const isPinned = ownerState.position === "sticky" || ownerState.position === "fixed";
           const isPrimary = (ownerState.color ?? "primary") === "primary";
           return {
-            ...isPrimary && {
-              backgroundColor: palette.primary.main,
-              color: palette.primary.contrastText,
-              ...theme.applyStyles("dark", { backgroundColor: palette.background.paper, color: palette.text.primary })
-            },
+            ...isPrimary && lightDarkStylesOf(
+              theme,
+              { backgroundColor: palette.primary.main, color: palette.primary.contrastText },
+              { backgroundColor: palette.background.paper, color: palette.text.primary }
+            ),
             ...isPinned && { borderBottom: `1px solid ${palette.divider}` }
           };
         }

package/dist/theme/components/MuiAppBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MuiAppBar.js","sources":["../../../src/theme/components/MuiAppBar.js"],"sourcesContent":["// La barra de arriba: plana (sin sombra), naranja en claro y del color de las tarjetas en oscuro, con una línea abajo\n// cuando se queda fija al deslizar.\n//\n// Por qué applyStyles('dark') y no theme.palette.mode: el servidor no sabe qué modo eligió la persona; con mode, la barra\n// se pintaba naranja un instante en oscuro. applyStyles lo deja en CSS y el navegador elige antes de pintar.\n// Solo cambia la barra de color principal (el de omisión): una barra con color=\"inherit\" o \"transparent\" se respeta.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\n\nexport function MuiAppBar() {\n    return {\n        MuiAppBar: {\n            defaultProps: {elevation: 0},\n            styleOverrides: {\n                root: ({ownerState, theme}) => {\n                    const palette = paletteOf(theme);\n                    const isPinned = ownerState.position === 'sticky' || ownerState.position === 'fixed';\n                    const isPrimary = (ownerState.color ?? 'primary') === 'primary';\n                    return {\n                        ...(isPrimary && {\n                            backgroundColor: palette.primary.main,\n                            color: palette.primary.contrastText,\n                            ...theme.applyStyles('dark', {backgroundColor: palette.background.paper, color: palette.text.primary}),\n                        }),\n                        ...(isPinned && {borderBottom: `1px solid ${palette.divider}`}),\n                    };\n                },\n            },\n        },\n    };\n}\n"],"names":[],"mappings":";AAUO,SAAS,YAAY;AACxB,SAAO;AAAA,IACH,WAAW;AAAA,MACP,cAAc,EAAC,WAAW,EAAC;AAAA,MAC3B,gBAAgB;AAAA,QACZ,MAAM,CAAC,EAAC,YAAY,MAAK,MAAM;AAC3B,gBAAM,UAAU,UAAU,KAAK;AAC/B,gBAAM,WAAW,WAAW,aAAa,YAAY,WAAW,aAAa;AAC7E,gBAAM,aAAa,WAAW,SAAS,eAAe;AACtD,iBAAO;AAAA,YACH,GAAI,aAAa;AAAA,cACb,iBAAiB,QAAQ,QAAQ;AAAA,cACjC,OAAO,QAAQ,QAAQ;AAAA,cACvB,GAAG,MAAM,YAAY,QAAQ,EAAC,iBAAiB,QAAQ,WAAW,OAAO,OAAO,QAAQ,KAAK,QAAO,CAAC;AAAA,YACjI;AAAA,YACwB,GAAI,YAAY,EAAC,cAAc,aAAa,QAAQ,OAAO,GAAE;AAAA,UACrF;AAAA,QACgB;AAAA,MAChB;AAAA,IACA;AAAA,EACA;AACA;"}
+{"version":3,"file":"MuiAppBar.js","sources":["../../../src/theme/components/MuiAppBar.js"],"sourcesContent":["// La barra de arriba: plana (sin sombra), naranja en claro y del color de las tarjetas en oscuro, con una línea abajo\n// cuando se queda fija al deslizar.\n//\n// Por qué el modo va en CSS (lightDarkStylesOf) y no en theme.palette.mode: el servidor no sabe qué modo eligió la persona;\n// con mode, la barra se pintaba naranja un instante en oscuro. En CSS el navegador elige antes de pintar.\n// Solo cambia la barra de color principal (el de omisión): una barra con color=\"inherit\" o \"transparent\" se respeta.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\n\nexport function MuiAppBar() {\n    return {\n        MuiAppBar: {\n            defaultProps: {elevation: 0},\n            styleOverrides: {\n                root: ({ownerState, theme}) => {\n                    const palette = paletteOf(theme);\n                    const isPinned = ownerState.position === 'sticky' || ownerState.position === 'fixed';\n                    const isPrimary = (ownerState.color ?? 'primary') === 'primary';\n                    return {\n                        ...(isPrimary && lightDarkStylesOf(theme,\n                            {backgroundColor: palette.primary.main, color: palette.primary.contrastText},\n                            {backgroundColor: palette.background.paper, color: palette.text.primary})),\n                        ...(isPinned && {borderBottom: `1px solid ${palette.divider}`}),\n                    };\n                },\n            },\n        },\n    };\n}\n"],"names":[],"mappings":";;AAWO,SAAS,YAAY;AACxB,SAAO;AAAA,IACH,WAAW;AAAA,MACP,cAAc,EAAC,WAAW,EAAC;AAAA,MAC3B,gBAAgB;AAAA,QACZ,MAAM,CAAC,EAAC,YAAY,MAAK,MAAM;AAC3B,gBAAM,UAAU,UAAU,KAAK;AAC/B,gBAAM,WAAW,WAAW,aAAa,YAAY,WAAW,aAAa;AAC7E,gBAAM,aAAa,WAAW,SAAS,eAAe;AACtD,iBAAO;AAAA,YACH,GAAI,aAAa;AAAA,cAAkB;AAAA,cAC/B,EAAC,iBAAiB,QAAQ,QAAQ,MAAM,OAAO,QAAQ,QAAQ,aAAY;AAAA,cAC3E,EAAC,iBAAiB,QAAQ,WAAW,OAAO,OAAO,QAAQ,KAAK,QAAO;AAAA,YAAC;AAAA,YAC5E,GAAI,YAAY,EAAC,cAAc,aAAa,QAAQ,OAAO,GAAE;AAAA,UACrF;AAAA,QACgB;AAAA,MAChB;AAAA,IACA;AAAA,EACA;AACA;"}

package/dist/theme/components/MuiDialog.js

@@ -0,0 +1,13 @@
+function MuiDialog() {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        paper: { outline: 0 }
+      }
+    }
+  };
+}
+export {
+  MuiDialog
+};
+//# sourceMappingURL=MuiDialog.js.map

package/dist/theme/components/MuiDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MuiDialog.js","sources":["../../../src/theme/components/MuiDialog.js"],"sourcesContent":["// Las ventanas (Dialog): sin el contorno de foco del navegador alrededor de la ventana entera.\n//\n// Desde MUI 7.3 el foco, al abrir, cae en la ventana misma (el Paper con role=\"dialog\"), para que el lector de pantalla diga\n// su título. MUI le quita el contorno a su contenedor («para ratón, toque y teclado», dice su código), pero no a la ventana,\n// y Chrome la marcaba con un borde azul aunque se abriera con clic. La ventana no es un control: lo que se pica adentro\n// conserva su aro al llegar con Tab.\n//\n// Funciones puras, sin React: function (regla de la casa).\nexport function MuiDialog() {\n    return {\n        MuiDialog: {\n            styleOverrides: {\n                paper: {outline: 0},\n            },\n        },\n    };\n}\n"],"names":[],"mappings":"AAQO,SAAS,YAAY;AACxB,SAAO;AAAA,IACH,WAAW;AAAA,MACP,gBAAgB;AAAA,QACZ,OAAO,EAAC,SAAS,EAAC;AAAA,MAClC;AAAA,IACA;AAAA,EACA;AACA;"}

package/dist/theme/components/glassComponents.js

@@ -1,5 +1,6 @@
 import { GLASS_MENU_RADIUS_PIXELS, GLASS_PANEL_RADIUS_PIXELS, GLASS_INSET_PIXELS, solidFallbackOf, glassDropOf, accentTextStylesOf, glassStylesOf, insideContentSelectorOf, canvasFieldStylesOf, GLASS_LENS_FLAG_SELECTOR, glassSurfaceOf, materialStylesOf, whiteLabelFillOf, fieldWellStylesOf, glassOpacityOf } from "../glassSurface.js";
 import { mergeStyles } from "../mergeComponents.js";
+import { lightDarkStylesOf } from "../lightDarkStyles.js";
 import { textSizeOf } from "../appleTracking.js";
 import { paletteOf } from "./paletteOf.js";
 const MENU_ROW_INSET_PIXELS = 4;
@@ -100,14 +101,10 @@ function whiteLabelOf(theme, colorName) {
       "&:hover": { backgroundColor: `color-mix(in srgb, ${fill} ${100 - PROMINENT_HOVER_SHADE_PERCENT}%, black)` }
     };
   };
-  return { ...schemeStylesOf("light"), ...theme.applyStyles("dark", schemeStylesOf("dark")) };
+  return lightDarkStylesOf(theme, schemeStylesOf("light"), schemeStylesOf("dark"));
 }
 function monogramOf(theme) {
-  return {
-    color: WHITE_LABEL,
-    backgroundColor: MONOGRAM_GRAY.light,
-    ...theme.applyStyles("dark", { color: WHITE_LABEL, backgroundColor: MONOGRAM_GRAY.dark })
-  };
+  return lightDarkStylesOf(theme, { color: WHITE_LABEL, backgroundColor: MONOGRAM_GRAY.light }, { color: WHITE_LABEL, backgroundColor: MONOGRAM_GRAY.dark });
 }
 function tintedControlOf(theme, toneColor) {
   const fillOf = (percent) => `color-mix(in srgb, ${toneColor} ${percent}%, transparent)`;
@@ -115,12 +112,11 @@ function tintedControlOf(theme, toneColor) {
   return {
     ...plain,
     color: paletteOf(theme).text.primary,
-    backgroundColor: fillOf(TINTED_FILL_PERCENT.light.rest),
-    "&:hover": { ...plain, backgroundColor: fillOf(TINTED_FILL_PERCENT.light.hover) },
-    ...theme.applyStyles("dark", {
-      backgroundColor: fillOf(TINTED_FILL_PERCENT.dark.rest),
-      "&:hover": { backgroundColor: fillOf(TINTED_FILL_PERCENT.dark.hover) }
-    })
+    ...lightDarkStylesOf(
+      theme,
+      { backgroundColor: fillOf(TINTED_FILL_PERCENT.light.rest), "&:hover": { ...plain, backgroundColor: fillOf(TINTED_FILL_PERCENT.light.hover) } },
+      { backgroundColor: fillOf(TINTED_FILL_PERCENT.dark.rest), "&:hover": { backgroundColor: fillOf(TINTED_FILL_PERCENT.dark.hover) } }
+    )
   };
 }
 function fieldFillOf(theme) {
@@ -359,11 +355,11 @@ function glassComponents({ surfaces = false } = {}) {
           return {
             ...surface,
             // de color: su vidrio lleva el color oscurecido lo justo para la letra blanca (whiteLabelFillOf)
-            ...lightFill && { ...glassSurfaceOf(lightFill, { opacity: PROMINENT_GLASS_OPACITY }), color: WHITE_LABEL },
-            ...darkFill && theme.applyStyles("dark", {
-              ...glassSurfaceOf(darkFill, { opacity: PROMINENT_GLASS_OPACITY, isDark: true }),
-              color: WHITE_LABEL
-            }),
+            ...lightDarkStylesOf(
+              theme,
+              lightFill ? { ...glassSurfaceOf(lightFill, { opacity: PROMINENT_GLASS_OPACITY }), color: WHITE_LABEL } : {},
+              darkFill ? { ...glassSurfaceOf(darkFill, { opacity: PROMINENT_GLASS_OPACITY, isDark: true }), color: WHITE_LABEL } : {}
+            ),
             transition: theme.transitions.create(["background-color", "box-shadow", "transform"], { duration: theme.transitions.duration.short }),
             // MUI cambia el fondo y la sombra al pasar y al apretar: el vidrio se queda, y al apretar se hunde
             "&:hover": { backgroundColor: surface.backgroundColor },
@@ -463,8 +459,11 @@ function glassComponents({ surfaces = false } = {}) {
             overflow: "hidden",
             [insideContentSelectorOf()]: {
               ...plain,
-              backgroundColor: groupFillOf(TINTED_FILL_PERCENT.light.rest),
-              ...theme.applyStyles("dark", { backgroundColor: groupFillOf(TINTED_FILL_PERCENT.dark.rest) })
+              ...lightDarkStylesOf(
+                theme,
+                { backgroundColor: groupFillOf(TINTED_FILL_PERCENT.light.rest) },
+                { backgroundColor: groupFillOf(TINTED_FILL_PERCENT.dark.rest) }
+              )
             }
           };
         },
@@ -644,8 +643,11 @@ function glassComponents({ surfaces = false } = {}) {
           const whiteMark = { background: "linear-gradient(#fff, #fff) center / 58% 58% no-repeat", borderRadius: 4 };
           return {
             "&.Mui-checked .MuiSvgIcon-root, &.MuiCheckbox-indeterminate .MuiSvgIcon-root": whiteMark,
-            ...lightFill && { "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: lightFill } },
-            ...darkFill && theme.applyStyles("dark", { "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: darkFill } })
+            ...lightDarkStylesOf(
+              theme,
+              lightFill ? { "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: lightFill } } : {},
+              darkFill ? { "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: darkFill } } : {}
+            )
           };
         }
       }
@@ -671,13 +673,12 @@ function glassComponents({ surfaces = false } = {}) {
           const lightFill = fillOf("light");
           const darkFill = fillOf("dark");
           return {
-            color: STEP_PENDING_GRAY.light,
             "& .MuiStepIcon-text": { fill: WHITE_LABEL },
-            ...lightFill && { "&.Mui-active, &.Mui-completed": { color: lightFill } },
-            ...theme.applyStyles("dark", {
-              color: STEP_PENDING_GRAY.dark,
-              ...darkFill && { "&.Mui-active, &.Mui-completed": { color: darkFill } }
-            })
+            ...lightDarkStylesOf(
+              theme,
+              { color: STEP_PENDING_GRAY.light, ...lightFill && { "&.Mui-active, &.Mui-completed": { color: lightFill } } },
+              { color: STEP_PENDING_GRAY.dark, ...darkFill && { "&.Mui-active, &.Mui-completed": { color: darkFill } } }
+            )
           };
         }
       }
@@ -803,9 +804,8 @@ function glassComponents({ surfaces = false } = {}) {
         }),
         track: ({ theme }) => ({
           opacity: 1,
-          backgroundColor: SWITCH_OFF_TRACK.light,
           transition: theme.transitions.create(["background-color"], { duration: theme.transitions.duration.short }),
-          ...theme.applyStyles("dark", { backgroundColor: SWITCH_OFF_TRACK.dark })
+          ...lightDarkStylesOf(theme, { backgroundColor: SWITCH_OFF_TRACK.light }, { backgroundColor: SWITCH_OFF_TRACK.dark })
         })
       }
     },
@@ -841,8 +841,7 @@ function glassComponents({ surfaces = false } = {}) {
         },
         rail: ({ theme }) => ({
           opacity: 1,
-          backgroundColor: SLIDER_RAIL.light,
-          ...theme.applyStyles("dark", { backgroundColor: SLIDER_RAIL.dark })
+          ...lightDarkStylesOf(theme, { backgroundColor: SLIDER_RAIL.light }, { backgroundColor: SLIDER_RAIL.dark })
         }),
         root: ({ ownerState }) => ownerState.orientation === "vertical" ? { width: SLIDER_TRACK_PIXELS } : { height: SLIDER_TRACK_PIXELS }
       }
@@ -880,6 +879,8 @@ function glassComponents({ surfaces = false } = {}) {
   };
 }
 export {
+  MONOGRAM_GRAY,
+  WHITE_LABEL,
   glassComponents
 };
 //# sourceMappingURL=glassComponents.js.map