@stackcraftmx/calcita 0.25.0 → 0.26.0

package/dist/observability/logger.js

@@ -17,10 +17,27 @@ function currentLevel() {
   }
   return defaultLevel;
 }
+const sinks = [];
+function addLogSink(sink) {
+  sinks.push(sink);
+  return () => {
+    const position = sinks.indexOf(sink);
+    if (position !== -1) {
+      sinks.splice(position, 1);
+    }
+  };
+}
 function emit(level, namespace, message, context) {
   if (LEVELS[level] > currentLevel()) {
     return;
   }
+  const entry = { level, namespace, message, ...context !== void 0 && { context }, timestamp: Date.now() };
+  for (const sink of sinks) {
+    try {
+      sink(entry);
+    } catch {
+    }
+  }
   const write = level === "debug" ? console.log : console[level] ?? console.log;
   if (context === void 0) {
     write(`[${namespace}] ${message}`);
@@ -37,6 +54,7 @@ function createLogger(namespace) {
   };
 }
 export {
+  addLogSink,
   createLogger,
   setLogLevel
 };

package/dist/observability/logger.js.map

@@ -1 +1 @@
-{"version":3,"file":"logger.js","sources":["../../src/observability/logger.js"],"sourcesContent":["// Logger con espacio de nombres sobre console.\n//\n// Por qué un envoltorio y no una librería: corre en el navegador, son pocas líneas legibles y, cuando haga falta un\n// reporte externo (Sentry o el que sea), se enchufa en emit() sin tocar cada llamada.\n//\n// Reglas:\n//   - datos estructurados: log.warn('mensaje', {status, requestId}); nunca concatenar cadenas.\n//   - IMPORTANTE: sin datos personales. Nada de correos, nombres, contraseñas ni contenido de archivos: solo ids,\n//     códigos, status y el request_id (misma regla que el backend: logs sin datos personales).\n//   - por omisión solo salen error y warn. La aplicación pide todo en desarrollo con setLogLevel('debug') (el paquete no\n//     sabe si la aplicación corre en desarrollo: import.meta.env es de quien construye). Para ver más en una instalación\n//     ya desplegada:\n//       localStorage.setItem('calcita:logLevel', 'debug')\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\nconst LEVELS = {error: 0, warn: 1, info: 2, debug: 3};\n\nconst LOG_LEVEL_STORAGE_KEY = 'calcita:logLevel';\n\n// el nivel cuando nadie lo pidió en localStorage; lo cambia la aplicación con setLogLevel\nlet defaultLevel = LEVELS.warn;\n\n/**\n * El nivel de lo que sale en consola: 'error', 'warn', 'info' o 'debug'. Lo llama la aplicación al arrancar, por ejemplo\n * setLogLevel(import.meta.env.DEV ? 'debug' : 'warn').\n *\n * @param {'error'|'warn'|'info'|'debug'} level\n * @returns {void}\n */\nexport function setLogLevel(level) {\n    if (!(level in LEVELS)) {\n        throw new Error(`setLogLevel espera error, warn, info o debug y recibió «${level}»`);\n    }\n    defaultLevel = LEVELS[level];\n}\n\nfunction currentLevel() {\n    try {\n        const override = window.localStorage?.getItem(LOG_LEVEL_STORAGE_KEY);\n        if (override && override in LEVELS) {\n            return LEVELS[override];\n        }\n    } catch {\n        // ventana privada o almacenamiento bloqueado: usamos el nivel por defecto\n    }\n    return defaultLevel;\n}\n\nfunction emit(level, namespace, message, context) {\n    if (LEVELS[level] > currentLevel()) {\n        return;\n    }\n\n    // OJO: debug sale por console.log a propósito; console.debug cae en \"Verbose\" y DevTools lo esconde\n    const write = level === 'debug' ? console.log : (console[level] ?? console.log);\n    if (context === undefined) {\n        write(`[${namespace}] ${message}`);\n    } else {\n        write(`[${namespace}] ${message}`, context);\n    }\n}\n\n/**\n * Logger que antepone [namespace] a cada mensaje.\n *\n * @param {string} namespace p. ej. 'api', 'session'\n */\nexport function createLogger(namespace) {\n    return {\n        error: (message, context) => emit('error', namespace, message, context),\n        warn: (message, context) => emit('warn', namespace, message, context),\n        info: (message, context) => emit('info', namespace, message, context),\n        debug: (message, context) => emit('debug', namespace, message, context),\n    };\n}\n"],"names":[],"mappings":"AAgBA,MAAM,SAAS,EAAC,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA;AAEnD,MAAM,wBAAwB;AAG9B,IAAI,eAAe,OAAO;AASnB,SAAS,YAAY,OAAO;AAC/B,MAAI,EAAE,SAAS,SAAS;AACpB,UAAM,IAAI,MAAM,2DAA2D,KAAK,GAAG;AAAA,EACvF;AACA,iBAAe,OAAO,KAAK;AAC/B;AAEA,SAAS,eAAe;AACpB,MAAI;AACA,UAAM,WAAW,OAAO,cAAc,QAAQ,qBAAqB;AACnE,QAAI,YAAY,YAAY,QAAQ;AAChC,aAAO,OAAO,QAAQ;AAAA,IAC1B;AAAA,EACJ,QAAQ;AAAA,EAER;AACA,SAAO;AACX;AAEA,SAAS,KAAK,OAAO,WAAW,SAAS,SAAS;AAC9C,MAAI,OAAO,KAAK,IAAI,gBAAgB;AAChC;AAAA,EACJ;AAGA,QAAM,QAAQ,UAAU,UAAU,QAAQ,MAAO,QAAQ,KAAK,KAAK,QAAQ;AAC3E,MAAI,YAAY,QAAW;AACvB,UAAM,IAAI,SAAS,KAAK,OAAO,EAAE;AAAA,EACrC,OAAO;AACH,UAAM,IAAI,SAAS,KAAK,OAAO,IAAI,OAAO;AAAA,EAC9C;AACJ;AAOO,SAAS,aAAa,WAAW;AACpC,SAAO;AAAA,IACH,OAAO,CAAC,SAAS,YAAY,KAAK,SAAS,WAAW,SAAS,OAAO;AAAA,IACtE,MAAM,CAAC,SAAS,YAAY,KAAK,QAAQ,WAAW,SAAS,OAAO;AAAA,IACpE,MAAM,CAAC,SAAS,YAAY,KAAK,QAAQ,WAAW,SAAS,OAAO;AAAA,IACpE,OAAO,CAAC,SAAS,YAAY,KAAK,SAAS,WAAW,SAAS,OAAO;AAAA,EAAA;AAE9E;"}
+{"version":3,"file":"logger.js","sources":["../../src/observability/logger.js"],"sourcesContent":["// Logger con espacio de nombres sobre console.\n//\n// Por qué un envoltorio y no una librería: corre en el navegador, son pocas líneas legibles y un reporte externo (Sentry,\n// Datadog, un endpoint propio) se enchufa con addLogSink sin tocar cada llamada:\n//   addLogSink((entry) => Sentry.logger[entry.level](`[${entry.namespace}] ${entry.message}`, entry.context));\n// Cada salida recibe lo mismo que sale en consola (respeta el nivel); una salida que truena no tumba la app.\n//\n// Reglas:\n//   - datos estructurados: log.warn('mensaje', {status, requestId}); nunca concatenar cadenas.\n//   - IMPORTANTE: sin datos personales. Nada de correos, nombres, contraseñas ni contenido de archivos: solo ids,\n//     códigos, status y el request_id (misma regla que el backend: logs sin datos personales).\n//   - por omisión solo salen error y warn. La aplicación pide todo en desarrollo con setLogLevel('debug') (el paquete no\n//     sabe si la aplicación corre en desarrollo: import.meta.env es de quien construye). Para ver más en una instalación\n//     ya desplegada:\n//       localStorage.setItem('calcita:logLevel', 'debug')\n//\n// Funciones puras, no renderizan: function (regla de la casa).\n\nconst LEVELS = {error: 0, warn: 1, info: 2, debug: 3};\n\nconst LOG_LEVEL_STORAGE_KEY = 'calcita:logLevel';\n\n// el nivel cuando nadie lo pidió en localStorage; lo cambia la aplicación con setLogLevel\nlet defaultLevel = LEVELS.warn;\n\n/**\n * El nivel de lo que sale en consola: 'error', 'warn', 'info' o 'debug'. Lo llama la aplicación al arrancar, por ejemplo\n * setLogLevel(import.meta.env.DEV ? 'debug' : 'warn').\n *\n * @param {'error'|'warn'|'info'|'debug'} level\n * @returns {void}\n */\nexport function setLogLevel(level) {\n    if (!(level in LEVELS)) {\n        throw new Error(`setLogLevel espera error, warn, info o debug y recibió «${level}»`);\n    }\n    defaultLevel = LEVELS[level];\n}\n\nfunction currentLevel() {\n    try {\n        const override = window.localStorage?.getItem(LOG_LEVEL_STORAGE_KEY);\n        if (override && override in LEVELS) {\n            return LEVELS[override];\n        }\n    } catch {\n        // ventana privada o almacenamiento bloqueado: usamos el nivel por defecto\n    }\n    return defaultLevel;\n}\n\n// las salidas propias del proyecto (addLogSink), además de la consola\nconst sinks = [];\n\n/**\n * Una salida propia para lo que se anota (un reporte externo): recibe cada anotación que sale en consola, con su nivel.\n *\n * @param {(entry: {level: 'error'|'warn'|'info'|'debug', namespace: string, message: string, context?: object, timestamp: number}) => void} sink\n * @returns {() => void} para quitarla\n */\nexport function addLogSink(sink) {\n    sinks.push(sink);\n    return () => {\n        const position = sinks.indexOf(sink);\n        if (position !== -1) {\n            sinks.splice(position, 1);\n        }\n    };\n}\n\nfunction emit(level, namespace, message, context) {\n    if (LEVELS[level] > currentLevel()) {\n        return;\n    }\n    const entry = {level, namespace, message, ...(context !== undefined && {context}), timestamp: Date.now()};\n    for (const sink of sinks) {\n        try {\n            sink(entry);\n        } catch {\n            // una salida con un error no debe tumbar la app ni la anotación en consola\n        }\n    }\n\n    // OJO: debug sale por console.log a propósito; console.debug cae en \"Verbose\" y DevTools lo esconde\n    const write = level === 'debug' ? console.log : (console[level] ?? console.log);\n    if (context === undefined) {\n        write(`[${namespace}] ${message}`);\n    } else {\n        write(`[${namespace}] ${message}`, context);\n    }\n}\n\n/**\n * Logger que antepone [namespace] a cada mensaje.\n *\n * @param {string} namespace p. ej. 'api', 'session'\n */\nexport function createLogger(namespace) {\n    return {\n        error: (message, context) => emit('error', namespace, message, context),\n        warn: (message, context) => emit('warn', namespace, message, context),\n        info: (message, context) => emit('info', namespace, message, context),\n        debug: (message, context) => emit('debug', namespace, message, context),\n    };\n}\n"],"names":[],"mappings":"AAkBA,MAAM,SAAS,EAAC,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA;AAEnD,MAAM,wBAAwB;AAG9B,IAAI,eAAe,OAAO;AASnB,SAAS,YAAY,OAAO;AAC/B,MAAI,EAAE,SAAS,SAAS;AACpB,UAAM,IAAI,MAAM,2DAA2D,KAAK,GAAG;AAAA,EACvF;AACA,iBAAe,OAAO,KAAK;AAC/B;AAEA,SAAS,eAAe;AACpB,MAAI;AACA,UAAM,WAAW,OAAO,cAAc,QAAQ,qBAAqB;AACnE,QAAI,YAAY,YAAY,QAAQ;AAChC,aAAO,OAAO,QAAQ;AAAA,IAC1B;AAAA,EACJ,QAAQ;AAAA,EAER;AACA,SAAO;AACX;AAGA,MAAM,QAAQ,CAAA;AAQP,SAAS,WAAW,MAAM;AAC7B,QAAM,KAAK,IAAI;AACf,SAAO,MAAM;AACT,UAAM,WAAW,MAAM,QAAQ,IAAI;AACnC,QAAI,aAAa,IAAI;AACjB,YAAM,OAAO,UAAU,CAAC;AAAA,IAC5B;AAAA,EACJ;AACJ;AAEA,SAAS,KAAK,OAAO,WAAW,SAAS,SAAS;AAC9C,MAAI,OAAO,KAAK,IAAI,gBAAgB;AAChC;AAAA,EACJ;AACA,QAAM,QAAQ,EAAC,OAAO,WAAW,SAAS,GAAI,YAAY,UAAa,EAAC,QAAA,GAAW,WAAW,KAAK,MAAI;AACvG,aAAW,QAAQ,OAAO;AACtB,QAAI;AACA,WAAK,KAAK;AAAA,IACd,QAAQ;AAAA,IAER;AAAA,EACJ;AAGA,QAAM,QAAQ,UAAU,UAAU,QAAQ,MAAO,QAAQ,KAAK,KAAK,QAAQ;AAC3E,MAAI,YAAY,QAAW;AACvB,UAAM,IAAI,SAAS,KAAK,OAAO,EAAE;AAAA,EACrC,OAAO;AACH,UAAM,IAAI,SAAS,KAAK,OAAO,IAAI,OAAO;AAAA,EAC9C;AACJ;AAOO,SAAS,aAAa,WAAW;AACpC,SAAO;AAAA,IACH,OAAO,CAAC,SAAS,YAAY,KAAK,SAAS,WAAW,SAAS,OAAO;AAAA,IACtE,MAAM,CAAC,SAAS,YAAY,KAAK,QAAQ,WAAW,SAAS,OAAO;AAAA,IACpE,MAAM,CAAC,SAAS,YAAY,KAAK,QAAQ,WAAW,SAAS,OAAO;AAAA,IACpE,OAAO,CAAC,SAAS,YAAY,KAAK,SAAS,WAAW,SAAS,OAAO;AAAA,EAAA;AAE9E;"}

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/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