@stackcraftmx/calcita 0.0.0-stage → 0.23.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"glassComponents.js","sources":["../../../src/theme/components/glassComponents.js"],"sourcesContent":["// Los ajustes de componentes de MUI para el vidrio líquido: la interpretación de cada componente según la guía de Apple\n// (Human Interface Guidelines; glassSurface.js explica las dos capas). Cada bloque cita la regla de la que sale.\n//\n//   - VIDRIO en lo que flota y en la navegación: la barra de arriba, los menús y ventanitas (Popover, las listas del\n//     Autocomplete, el calendario de MUI X, los menús y paneles de la tabla), los cajones y el menú lateral, los diálogos,\n//     los tooltips y los avisos de MUI (Snackbar), el botón flotante (Fab) y la barra de abajo (BottomNavigation).\n//   - VIDRIO en los controles que van sobre el lienzo: el botón con borde, el grupo de botones y los chips que se pican son\n//     cápsulas de vidrio. DENTRO de una tarjeta, un diálogo o un menú son el «bordered» de Apple (un relleno tenue de su\n//     color), porque ahí el vidrio no tiene nada que dejar ver. El principal lleva el brillo; la «gota» marca lo elegido\n//     (pestañas, botones de opción, paginación, la barra de abajo); el interruptor es el de iPhone y su perilla, como la del\n//     deslizador, crece al apretarla; el «cargando» es la ruedita de iPhone y la barra de progreso, una cápsula delgada.\n//   - MATERIAL en el contenido, solo si el proyecto lo pide con createToolkitTheme({glass: {surfaces: true}}): tarjetas\n//     (Paper outlined y Card), acordeón, avisos (Alert) y la tabla sin fondo propio.\n//   - Esquinas concéntricas (los renglones de los menús a 4 px del borde) y títulos sin mayúsculas.\n// createToolkitTheme({glass: …}) los suma después de los normales (mergeComponents).\n//\n// Lo que NO lleva vidrio a propósito: un diálogo a pantalla completa (fullScreen) y ContentDialog, que son para leer, y lo\n// que solo informa dentro del contenido (la etiqueta del estado en un renglón de la tabla).\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {\n    GLASS_INSET_PIXELS, GLASS_LENS_FLAG_SELECTOR, GLASS_MENU_RADIUS_PIXELS, GLASS_PANEL_RADIUS_PIXELS, accentTextStylesOf, glassDropOf, glassOpacityOf,\n    canvasFieldStylesOf, fieldWellStylesOf, glassStylesOf, glassSurfaceOf, whiteLabelFillOf,\n    insideContentSelectorOf, materialStylesOf, solidFallbackOf,\n} from '@/theme/glassSurface.js';\nimport {mergeStyles} from '@/theme/mergeComponents.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {paletteOf} from '@/theme/components/paletteOf.js';\n\n// los renglones de un menú quedan a 4 px del borde, con la esquina del menú menos ese margen\nconst MENU_ROW_INSET_PIXELS = 4;\n// lo que se hunde un botón al apretarlo y lo que crece la perilla del interruptor y del deslizador\nconst PRESSED_SCALE = 0.97;\nconst PRESSED_THUMB_SCALE = 1.25;\n// el deslizador de Apple (la imagen de «Sliders»): perilla en cápsula blanca, pista de 6 px y el resto de la pista gris\nconst SLIDER_THUMB = Object.freeze({long: 30, short: 20, shadow: '0 1px 2px rgba(0, 0, 0, 0.25), 0 3px 8px rgba(0, 0, 0, 0.18)'});\nconst SLIDER_TRACK_PIXELS = 6;\nconst SLIDER_RAIL = Object.freeze({light: 'rgba(120, 120, 128, 0.24)', dark: 'rgba(120, 120, 128, 0.40)'});\nconst PILL_RADIUS = 999;\n// el alto de un botón de un renglón por tamaño (el que tenía con el interlineado de MUI) y el interlineado cuando se parte\nconst BUTTON_HEIGHT_PIXELS = Object.freeze({small: 31, medium: 38, large: 42});\nconst BUTTON_LINE_HEIGHT = 1.3;\n// el brillo del vidrio sobre algo sólido de color (el botón principal, la etiqueta elegida): luz arriba y sombra abajo\nconst PROMINENT_SHEEN_IMAGE = 'linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%)';\nconst PROMINENT_SHEEN_SHADOW = 'inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12)';\n// cuánto color de su tipo lleva el material de un aviso (por ciento sobre el color de las tarjetas): en oscuro un poco más,\n// porque sobre gris oscuro el tinte se apaga\nconst ALERT_TINT_PERCENT = Object.freeze({light: 14, dark: 20});\n// los tooltips y los avisos de MUI son oscuros en los dos modos: un poco más opacos, porque su texto es chico\nconst DARK_FLOATING_OPACITY = 0.88;\n// la palomita del renglón elegido de un menú (con texto alterno vacío: el lector de pantalla ya dice «seleccionado»)\nconst MENU_CHECKMARK_CONTENT = '\"✓\" / \"\"';\n// los títulos chicos que eran en mayúsculas (overline): con vidrio, como se escriben\nconst SENTENCE_CASE_TITLE_PIXELS = 13;\nconst REDUCED_MOTION_QUERY = '@media (prefers-reduced-motion: reduce)';\n// la ruedita de «cargando» de iPhone: 8 rayitas que giran a saltos (una vuelta en 0.8 s), la de adelante más fuerte y\n// las de atrás desvanecidas como cola\nconst ACTIVITY_SPOKE_COUNT = 8;\nconst ACTIVITY_SPIN_DURATION = '0.8s';\nconst ACTIVITY_TAIL_MIN_OPACITY = 0.15;\nconst ACTIVITY_TAIL_MAX_OPACITY = 0.85;\n// la barra de progreso de Apple: una cápsula delgada\nconst PROGRESS_BAR_HEIGHT_PIXELS = 6;\n// lo más ancho de una hoja que sale de arriba o de abajo en una pantalla ancha\nconst SHEET_MAX_WIDTH_PIXELS = 640;\n// el relleno del control «bordered» (por ciento de su color): quieto y con el cursor encima; en oscuro, más, porque sobre\n// gris oscuro un tinte tenue no se ve\nconst TINTED_FILL_PERCENT = Object.freeze({light: {rest: 12, hover: 18}, dark: {rest: 22, hover: 30}});\n// la letra de los controles llenos de color, y cuánto más se oscurecen con el cursor encima (whiteLabelOf)\nconst WHITE_LABEL = '#FFFFFF';\nconst PROMINENT_HOVER_SHADE_PERCENT = 12;\n// el círculo de los pasos que faltan, con su número blanco: grises de Apple que leen el blanco a 4.5 : 1 o más\nconst STEP_PENDING_GRAY = Object.freeze({light: '#6E6E73', dark: '#48484A'});\n// el fondo del monograma (avatar con iniciales): grises de Apple; con blanco encima, 5.07 : 1 en claro y 6.07 : 1 en oscuro\n// lo que se separa el texto de su interruptor (px)\nconst SWITCH_LABEL_GAP_PIXELS = 12;\nconst MONOGRAM_GRAY = Object.freeze({light: '#6E6E73', dark: '#636366'});\n// el botón flotante de color con letra blanca va lleno: con vidrio al 92 % lo claro de atrás le bajaba el contraste a\n// 4.23 : 1 (medido con la auditoría)\nconst PROMINENT_GLASS_OPACITY = 1;\n// los campos: la esquina dentro de una tarjeta, el gris del relleno (por ciento del color del texto) y qué tan fuerte es el\n// aro al escribir\nconst FIELD_RADIUS_PIXELS = 12;\nconst FIELD_RING_PERCENT = 40;\nconst FIELD_RING_PIXELS = Object.freeze({focused: 3, error: 2});\n// el botoncito del combo box (px)\nconst COMBO_BUTTON_PIXELS = 28;\nconst COMBO_BUTTON_RADIUS_PIXELS = 6;\n// lo que se separa el botón de la orilla del campo, el aire entre la ⓧ y el botón, y lo que mide la ⓧ\nconst COMBO_INSET_PIXELS = 6;\nconst COMBO_GAP_PIXELS = 6;\nconst COMBO_CLEAR_PIXELS = 26;\n// los chevrones de Apple como máscaras (el ⌃⌄ de las listas y el ⌄ del combo box): los pinta el color del texto\nconst CHEVRON_PATHS = Object.freeze({upDown: 'M8 9.5l4-4 4 4M8 14.5l4 4 4-4', down: 'M6 9.5l6 6 6-6'});\nconst chevronSvgOf = (path) => `url(\"data:image/svg+xml,${encodeURIComponent(\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"${path}\"/></svg>`,\n)}\")`;\nconst UP_DOWN_CHEVRON_MASK = chevronSvgOf(CHEVRON_PATHS.upDown);\nconst CHEVRON_DOWN_MASK = chevronSvgOf(CHEVRON_PATHS.down);\n\n/**\n * Un chevrón dibujado con máscara: el color lo pone el texto (currentColor).\n *\n * @param {string} mask el url(...) del dibujo\n * @returns {object}\n */\nfunction chevronMaskOf(mask) {\n    return {\n        backgroundColor: 'currentColor',\n        maskImage: mask,\n        WebkitMaskImage: mask,\n        maskSize: '100% 100%',\n        WebkitMaskSize: '100% 100%',\n        maskRepeat: 'no-repeat',\n        WebkitMaskRepeat: 'no-repeat',\n    };\n}\n// el interruptor de iPhone (px): cápsula con la perilla blanca adentro; el chico, para renglones densos\nconst SWITCH_SIZES = Object.freeze({\n    medium: {width: 46, height: 28, thumb: 24},\n    small: {width: 36, height: 22, thumb: 18},\n});\nconst SWITCH_THUMB_MARGIN_PIXELS = 2;\n// la pista apagada del interruptor: el gris de relleno de Apple (systemFill), en claro y en oscuro\nconst SWITCH_OFF_TRACK = Object.freeze({light: 'rgba(120, 120, 128, 0.20)', dark: 'rgba(120, 120, 128, 0.36)'});\n\n/**\n * El dibujo de la ruedita (SVG con 8 rayitas redondeadas, cada una con su opacidad) para usarlo como máscara: el color lo\n * pone el fondo (currentColor), así sigue al `color` del componente en claro y en oscuro.\n *\n * @returns {string} el valor para mask-image\n */\nfunction activitySpokesMaskOf() {\n    const degreesPerSpoke = 360 / ACTIVITY_SPOKE_COUNT;\n    const tailStep = (ACTIVITY_TAIL_MAX_OPACITY - ACTIVITY_TAIL_MIN_OPACITY) / (ACTIVITY_SPOKE_COUNT - 2);\n    const spokes = Array.from({length: ACTIVITY_SPOKE_COUNT}, (unused, index) => {\n        // la rayita 0 (arriba) es la de adelante; girando a la derecha, la siguiente es la más tenue y la cola crece hacia atrás\n        const opacity = index === 0 ? 1 : ACTIVITY_TAIL_MIN_OPACITY + (index - 1) * tailStep;\n        return `<rect x=\"11\" y=\"2\" width=\"2\" height=\"6\" rx=\"1\" opacity=\"${opacity.toFixed(2)}\" transform=\"rotate(${index * degreesPerSpoke} 12 12)\"/>`;\n    }).join('');\n    return `url(\"data:image/svg+xml,${encodeURIComponent(`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">${spokes}</svg>`)}\")`;\n}\n\nconst ACTIVITY_SPOKES_MASK = activitySpokesMaskOf();\n\n/**\n * Lo que se hunde al apretar (sin movimiento si la persona pidió reducirlo).\n *\n * @param {string} pressedTransform el transform al apretar\n * @returns {object}\n */\nfunction pressedMotionOf(pressedTransform) {\n    return {\n        '&:active': {transform: pressedTransform},\n        [REDUCED_MOTION_QUERY]: {'&:active': {transform: 'none'}},\n    };\n}\n\n/**\n * El vidrio de un color de la paleta (primary, secondary…) o, para 'default', el de las tarjetas.\n *\n * @param {object} theme\n * @param {string|undefined} colorName el `color` del componente\n * @returns {object}\n */\nfunction tintedGlassOf(theme, colorName) {\n    const tint = colorName && colorName !== 'default' && colorName !== 'inherit' ? paletteOf(theme)[colorName]?.main : null;\n    return tint ? glassSurfaceOf(tint, {opacity: glassOpacityOf(theme)}) : glassStylesOf(theme);\n}\n\n/**\n * El vidrio de lo que es oscuro en los dos modos (tooltip, aviso de MUI), sobre su propio color.\n *\n * @param {string} darkColor\n * @returns {object}\n */\nfunction darkGlassOf(darkColor) {\n    return glassSurfaceOf(darkColor, {opacity: DARK_FLOATING_OPACITY, isDark: true});\n}\n\n/**\n * Una tarjeta del contenido de material: el borde de la tarjeta se vuelve transparente (la línea fina del material ya la\n * marca; con los dos se veía doble) y conserva su grosor para que nada se mueva.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction contentMaterialOf(theme) {\n    return {...materialStylesOf(theme), borderColor: 'transparent'};\n}\n\n/**\n * Un control lleno de color (botón principal, etiqueta elegida, numerito) lleva letra BLANCA sobre su color oscurecido lo\n * justo para leerse (whiteLabelFillOf), en claro y en oscuro. En oscuro la paleta traía letra negra sobre el naranja y se\n * veía feo («El suyo», «Guardar»); en claro, el blanco sobre el naranja tal cual daba 2.85 : 1 (lo reportaron: «les está\n * costando leerlo»). Sale del color crudo de cada paleta: con el color que elija el proyecto; los que ya se leen no cambian.\n *\n * @param {object} theme\n * @param {string} colorName primary, error, success…\n * @returns {object} los estilos de claro y de oscuro (sin ellos si el color no viene en hexadecimal)\n */\nfunction whiteLabelOf(theme, colorName) {\n    const schemeStylesOf = (scheme) => {\n        const fill = whiteLabelFillOf(theme.colorSchemes?.[scheme]?.palette?.[colorName]?.main);\n        if (!fill) {\n            return {};\n        }\n        return {\n            backgroundColor: fill,\n            color: WHITE_LABEL,\n            '&:hover': {backgroundColor: `color-mix(in srgb, ${fill} ${100 - PROMINENT_HOVER_SHADE_PERCENT}%, black)`},\n        };\n    };\n    return {...schemeStylesOf('light'), ...theme.applyStyles('dark', schemeStylesOf('dark'))};\n}\n\n/**\n * El monograma de Apple: iniciales blancas sobre gris, en claro y en oscuro (MONOGRAM_GRAY).\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction monogramOf(theme) {\n    return {\n        color: WHITE_LABEL,\n        backgroundColor: MONOGRAM_GRAY.light,\n        ...theme.applyStyles('dark', {color: WHITE_LABEL, backgroundColor: MONOGRAM_GRAY.dark}),\n    };\n}\n\n/**\n * Un control dentro del contenido (un botón con borde o un chip que se pica dentro de una tarjeta): el botón «bordered» de\n * Apple, un relleno tenue de su color sin vidrio, sin borde y sin sombra. La letra va de UN SOLO color (la del texto) y el\n * color va en el relleno: con la letra naranja sobre su tinte naranja, en oscuro daba 4.41 : 1 y no se leía (reporte: «el\n * blanco sería mejor opción para las letras»); con la letra del texto da 9.14 : 1. HIG «Buttons»: «Avoid applying a\n * similar color to button labels and content layer backgrounds».\n *\n * @param {object} theme\n * @param {string} toneColor el color del control (el principal, el de error… o el del texto si es neutro)\n * @returns {object}\n */\nfunction tintedControlOf(theme, toneColor) {\n    const fillOf = (percent) => `color-mix(in srgb, ${toneColor} ${percent}%, transparent)`;\n    const plain = {backgroundImage: 'none', backdropFilter: 'none', WebkitBackdropFilter: 'none', boxShadow: 'none', borderColor: 'transparent'};\n    return {\n        ...plain,\n        color: paletteOf(theme).text.primary,\n        backgroundColor: fillOf(TINTED_FILL_PERCENT.light.rest),\n        '&:hover': {...plain, backgroundColor: fillOf(TINTED_FILL_PERCENT.light.hover)},\n        ...theme.applyStyles('dark', {\n            backgroundColor: fillOf(TINTED_FILL_PERCENT.dark.rest),\n            '&:hover': {backgroundColor: fillOf(TINTED_FILL_PERCENT.dark.hover)},\n        }),\n    };\n}\n\n/**\n * Un campo dentro de una tarjeta: el «pozo» de Apple (fieldWellStylesOf, en glassSurface.js, el mismo de FormSection).\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction fieldFillOf(theme) {\n    return fieldWellStylesOf(theme);\n}\n\n/**\n * El aro de un campo: del color principal al escribir y rojo si tiene error. Es un contorno (outline) y no un borde, para\n * que nada se mueva y siga la esquina del campo.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction fieldRingsOf(theme) {\n    const palette = paletteOf(theme);\n    const ringOf = (color, width) => ({outline: `${width}px solid color-mix(in srgb, ${color} ${FIELD_RING_PERCENT}%, transparent)`, outlineOffset: 0});\n    return {\n        '&.Mui-focused': ringOf(palette.primary.main, FIELD_RING_PIXELS.focused),\n        '&.Mui-error': ringOf(palette.error.main, FIELD_RING_PIXELS.error),\n        '&.Mui-error.Mui-focused': ringOf(palette.error.main, FIELD_RING_PIXELS.focused),\n    };\n}\n\n/**\n * Un cajón que sale encima del contenido (el menú del teléfono, un panel de la derecha, la hoja de abajo): flota separado\n * de la orilla con sus esquinas, como las hojas de Apple. El fijo del menú lateral lo acomoda AppLayout.\n *\n * @param {string} anchor de qué orilla sale\n * @returns {object}\n */\nfunction floatingDrawerOf(anchor) {\n    const inset = `${GLASS_INSET_PIXELS}px`;\n    const fullLength = `calc(100% - ${GLASS_INSET_PIXELS * 2}px)`;\n    // la hoja de arriba o de abajo, en una pantalla ancha, va al centro y no de orilla a orilla (como las hojas de iPad y Mac)\n    const centeredSheet = {maxWidth: SHEET_MAX_WIDTH_PIXELS, marginInline: 'auto'};\n    const placementByAnchor = {\n        left: {top: inset, left: inset, height: fullLength},\n        right: {top: inset, right: inset, height: fullLength},\n        top: {top: inset, left: inset, right: inset, maxHeight: fullLength, ...centeredSheet},\n        bottom: {bottom: inset, left: inset, right: inset, maxHeight: fullLength, ...centeredSheet},\n    };\n    return {...placementByAnchor[anchor], borderRadius: GLASS_PANEL_RADIUS_PIXELS};\n}\n\n/**\n * @param {object} [options]\n * @param {boolean} [options.surfaces] también el contenido (tarjetas, acordeón, avisos, tabla) con material; por omisión no\n * @returns {object} el `components` del tema de MUI\n */\nexport function glassComponents({surfaces = false} = {}) {\n    return {\n        ...(surfaces && {\n            MuiPaper: {\n                styleOverrides: {\n                    root: ({ownerState, theme}) => (ownerState.variant === 'outlined' ? contentMaterialOf(theme) : {}),\n                },\n            },\n            MuiCard: {\n                styleOverrides: {\n                    root: ({theme}) => contentMaterialOf(theme),\n                },\n            },\n            // el acordeón (HIG «Disclosure controls»): cada sección es su propia tarjeta de material, separada de la\n            // siguiente, en vez de la línea gris de MUI entre ellas; todas con la misma esquina (MUI redondeaba solo la\n            // primera y la última)\n            MuiAccordion: {\n                styleOverrides: {\n                    root: ({theme}) => ({\n                        ...contentMaterialOf(theme),\n                        '&, &:first-of-type, &:last-of-type': {borderRadius: GLASS_MENU_RADIUS_PIXELS},\n                        '&::before': {display: 'none'},\n                        '&, &.Mui-expanded': {margin: `0 0 ${GLASS_INSET_PIXELS}px`},\n                        '&:last-of-type, &.Mui-expanded:last-of-type': {marginBottom: 0},\n                    }),\n                },\n            },\n            // los avisos dentro del contenido (Alert): el de omisión, material teñido del color de su tipo (verde, rojo,\n            // ámbar, azul): HIG «Color» permite color en el vidrio para «status indicators»; el de borde, material sin tinte\n            // con su borde de color; el relleno, de su color con el brillo del botón principal\n            MuiAlert: {\n                styleOverrides: {\n                    root: ({ownerState, theme}) => {\n                        if (ownerState.variant === 'filled') {\n                            return {backgroundImage: PROMINENT_SHEEN_IMAGE, boxShadow: PROMINENT_SHEEN_SHADOW};\n                        }\n                        if (ownerState.variant === 'outlined') {\n                            return materialStylesOf(theme);\n                        }\n                        const palette = paletteOf(theme);\n                        const severityColor = (palette[ownerState.colorSeverity] ?? palette.info).main;\n                        const tintOf = (percent) => `color-mix(in srgb, ${severityColor} ${percent}%, ${palette.background.paper})`;\n                        return materialStylesOf(theme, {color: tintOf(ALERT_TINT_PERCENT.light), darkColor: tintOf(ALERT_TINT_PERCENT.dark)});\n                    },\n                },\n            },\n        }),\n        // los títulos chicos en mayúsculas (variant=\"overline\": el de SectionCard, MetricCard, los campos, los ajustes): Apple\n        // dejó de poner los encabezados en mayúsculas («section headers no longer render entirely in capital letters»,\n        // Adopting Liquid Glass) y los títulos de sus cajas van «sentence-style» (HIG «Boxes»)\n        MuiTypography: {\n            styleOverrides: {\n                overline: {textTransform: 'none', fontWeight: 600, ...textSizeOf(SENTENCE_CASE_TITLE_PIXELS)},\n            },\n        },\n        // la barra de arriba (la del color principal, fija o no): vidrio NEUTRO en claro y en oscuro. HIG «Toolbars»: «Reduce\n        // the use of toolbar backgrounds and tinted controls»; un vidrio naranja al 80 % se veía sólido. El brillo del borde\n        // ya la separa del contenido: la línea de abajo sobra\n        MuiAppBar: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => {\n                    const isPrimary = (ownerState.color ?? 'primary') === 'primary';\n                    if (!isPrimary) {\n                        return {};\n                    }\n                    return {...glassStylesOf(theme), color: paletteOf(theme).text.primary, borderBottom: 'none'};\n                },\n            },\n        },\n        MuiPopover: {\n            styleOverrides: {\n                paper: ({theme}) => ({...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS}),\n            },\n        },\n        // los renglones de un menú: concéntricos con el menú, y el elegido (la opción actual de una lista) con su palomita\n        // y no con un fondo de color (HIG «Menus»: «Consider using a checkmark to show that an attribute is currently in\n        // effect»)\n        MuiMenuItem: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    marginInline: MENU_ROW_INSET_PIXELS,\n                    borderRadius: GLASS_MENU_RADIUS_PIXELS - MENU_ROW_INSET_PIXELS,\n                    '&.Mui-selected': {backgroundColor: 'transparent'},\n                    '&.Mui-selected:hover': {backgroundColor: paletteOf(theme).action.hover},\n                    // con el teclado encima, el renglón elegido sí se marca: si no, no se ve dónde está el foco\n                    '&.Mui-selected.Mui-focusVisible, &.Mui-selected:focus-visible': {backgroundColor: paletteOf(theme).action.selected},\n                    '&.Mui-selected::after': {\n                        content: MENU_CHECKMARK_CONTENT,\n                        marginInlineStart: 'auto',\n                        paddingInlineStart: theme.spacing(2),\n                        ...accentTextStylesOf(theme),\n                        fontWeight: 600,\n                    },\n                }),\n            },\n        },\n        // el «combo box» de Apple (HIG «Combo boxes»): el campo con un botoncito cuadrado del color principal y su ⌄ blanco\n        // al final; abierto, el ⌄ no gira (en Apple se queda igual)\n        MuiAutocomplete: {\n            styleOverrides: {\n                paper: ({theme}) => ({...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS}),\n                option: {marginInline: MENU_ROW_INSET_PIXELS, borderRadius: GLASS_MENU_RADIUS_PIXELS - MENU_ROW_INSET_PIXELS},\n                popupIndicator: ({theme}) => ({\n                        width: COMBO_BUTTON_PIXELS,\n                        height: COMBO_BUTTON_PIXELS,\n                        padding: 0,\n                        borderRadius: COMBO_BUTTON_RADIUS_PIXELS,\n                        backgroundImage: PROMINENT_SHEEN_IMAGE,\n                        ...whiteLabelOf(theme, 'primary'),\n                        '& svg': {display: 'none'},\n                        '&::after': {content: '\"\"', width: 14, height: 14, ...chevronMaskOf(CHEVRON_DOWN_MASK)},\n                }),\n                popupIndicatorOpen: {transform: 'none'},\n                // el botón y la ⓧ con aire: el botón a 6 px de la orilla, con esquina concéntrica con la del campo (12 - 6), y la\n                // ⓧ separada de él (iban pegados entre sí y a la orilla: «pegadísimo», lo reportaron)\n                // OJO: MUI ya lo centra (top 50% + translate); restarle la mitad del botón lo subía 14 px fuera del campo\n                endAdornment: {right: COMBO_INSET_PIXELS, display: 'flex', alignItems: 'center', gap: COMBO_GAP_PIXELS},\n                clearIndicator: ({theme}) => ({padding: 4, marginRight: 0, color: paletteOf(theme).text.secondary, '& .MuiSvgIcon-root': {fontSize: '1.125rem'}}),\n                inputRoot: {\n                    '.MuiAutocomplete-hasPopupIcon &': {paddingRight: COMBO_INSET_PIXELS + COMBO_BUTTON_PIXELS + COMBO_GAP_PIXELS * 2},\n                    '.MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon &': {paddingRight: COMBO_INSET_PIXELS + COMBO_BUTTON_PIXELS + COMBO_GAP_PIXELS * 3 + COMBO_CLEAR_PIXELS},\n                },\n            },\n        },\n        // las listas para elegir (Select): el ⌃⌄ de los botones de Apple que abren una lista («pop-up buttons») en lugar del\n        // triángulo de MUI; tampoco gira al abrir\n        MuiSelect: {\n            styleOverrides: {\n                icon: {\n                    width: 16,\n                    height: 16,\n                    top: 'calc(50% - 8px)',\n                    '& path': {display: 'none'},\n                    ...chevronMaskOf(UP_DOWN_CHEVRON_MASK),\n                },\n                iconOpen: {transform: 'none'},\n            },\n        },\n        // el calendario de MUI X (/date-pickers) en escritorio; en el teléfono sale en un diálogo (MuiDialog)\n        MuiPickerPopper: {\n            styleOverrides: {\n                paper: ({theme}) => ({...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS}),\n            },\n        },\n        // la tabla (MUI X Data Grid): el menú de cada columna y los paneles de filtros y columnas\n        MuiDataGrid: {\n            styleOverrides: {\n                // con el contenido de material: la tabla va dentro de su tarjeta (ServerTable la pone en un Paper outlined)\n                // y su fondo propio, sólido, tapaba el material. La columna pegada a la izquierda sigue sólida (ServerTable le\n                // pone el papel) para que no se vea lo que pasa por debajo al deslizar de lado.\n                // OJO: la tabla pone sus colores con una etiqueta <style> propia (clase MuiDataGridVariables-…) que va después\n                // en la página; con la misma fuerza ganaba ella y la tabla seguía blanca. Con dos clases (&.MuiDataGrid-root)\n                // gana esta.\n                ...(surfaces && {\n                    root: {'&.MuiDataGrid-root': {'--DataGrid-t-color-background-base': 'transparent', '--DataGrid-t-header-background-base': 'transparent'}},\n                }),\n                panelContent: ({theme}) => ({...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS}),\n                menu: ({theme}) => ({'& .MuiPaper-root': {...glassStylesOf(theme), borderRadius: GLASS_MENU_RADIUS_PIXELS}}),\n            },\n        },\n        // los cajones: de vidrio; los que salen encima del contenido flotan separados de la orilla (Adopting Liquid Glass:\n        // «half sheets are inset from the edge of the display to allow content to peek through from beneath them»)\n        MuiDrawer: {\n            styleOverrides: {\n                paper: ({ownerState, theme}) => ({\n                    ...glassStylesOf(theme),\n                    ...(ownerState.variant === 'temporary' && floatingDrawerOf(ownerState.anchor ?? 'left')),\n                }),\n            },\n        },\n        MuiDialog: {\n            styleOverrides: {\n                paper: ({ownerState, theme}) => (ownerState.fullScreen ? {} : {...glassStylesOf(theme), borderRadius: GLASS_PANEL_RADIUS_PIXELS}),\n                // la hoja de lectura (ContentDialog) deja la barra de arriba a la vista para no perder dónde se está: sin\n                // desenfoque detrás, o la barra se volvía ilegible\n                backdrop: ({ownerState}) => (ownerState.fullScreen\n                    ? {'&:not(.MuiBackdrop-invisible)': {backdropFilter: 'none', WebkitBackdropFilter: 'none'}}\n                    : {}),\n            },\n        },\n        // detrás de un diálogo: menos oscuro y desenfocado (el vidrio del diálogo se lee mejor sobre algo ya borroso)\n        MuiBackdrop: {\n            styleOverrides: {\n                root: {\n                    '&:not(.MuiBackdrop-invisible)': {\n                        backgroundColor: 'rgba(0, 0, 0, 0.4)',\n                        backdropFilter: 'blur(6px)',\n                        WebkitBackdropFilter: 'blur(6px)',\n                        ...solidFallbackOf({backgroundColor: 'rgba(0, 0, 0, 0.6)', backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n                    },\n                },\n            },\n        },\n        MuiTooltip: {\n            styleOverrides: {\n                tooltip: ({theme}) => ({...darkGlassOf(paletteOf(theme).Tooltip?.bg ?? paletteOf(theme).grey[700]), borderRadius: 8}),\n                arrow: ({theme}) => ({color: darkGlassOf(paletteOf(theme).Tooltip?.bg ?? paletteOf(theme).grey[700]).backgroundColor}),\n            },\n        },\n        MuiSnackbarContent: {\n            styleOverrides: {\n                root: ({theme}) => ({...darkGlassOf(paletteOf(theme).SnackbarContent?.bg ?? paletteOf(theme).grey[900]), borderRadius: GLASS_MENU_RADIUS_PIXELS}),\n            },\n        },\n        MuiFab: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => {\n                    const surface = tintedGlassOf(theme, ownerState.color);\n                    const fillOf = (scheme) => whiteLabelFillOf(theme.colorSchemes?.[scheme]?.palette?.[ownerState.color]?.main);\n                    const lightFill = fillOf('light');\n                    const darkFill = fillOf('dark');\n                    return {\n                        ...surface,\n                        // de color: su vidrio lleva el color oscurecido lo justo para la letra blanca (whiteLabelFillOf)\n                        ...(lightFill && {...glassSurfaceOf(lightFill, {opacity: PROMINENT_GLASS_OPACITY}), color: WHITE_LABEL}),\n                        ...(darkFill && theme.applyStyles('dark', {\n                            ...glassSurfaceOf(darkFill, {opacity: PROMINENT_GLASS_OPACITY, isDark: true}),\n                            color: WHITE_LABEL,\n                        })),\n                        transition: theme.transitions.create(['background-color', 'box-shadow', 'transform'], {duration: theme.transitions.duration.short}),\n                        // MUI cambia el fondo y la sombra al pasar y al apretar: el vidrio se queda, y al apretar se hunde\n                        '&:hover': {backgroundColor: surface.backgroundColor},\n                        '&:active': {boxShadow: surface.boxShadow, transform: `scale(${PRESSED_SCALE})`},\n                        [REDUCED_MOTION_QUERY]: {'&:active': {transform: 'none'}},\n                    };\n                },\n            },\n        },\n        MuiBottomNavigation: {\n            styleOverrides: {\n                root: ({theme}) => ({...glassStylesOf(theme), borderRadius: PILL_RADIUS, padding: MENU_ROW_INSET_PIXELS, gap: MENU_ROW_INSET_PIXELS, height: 64}),\n            },\n        },\n        MuiBottomNavigationAction: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    borderRadius: PILL_RADIUS,\n                    minWidth: 0,\n                    // con mergeStyles: las dos partes traen su modo oscuro y la suma simple borraba la de la gota\n                    '&.Mui-selected': mergeStyles(glassDropOf(theme), accentTextStylesOf(theme)),\n                }),\n            },\n        },\n        // los botones (HIG «Buttons»): cápsulas («prefer circular or capsule-shape buttons»), que se hunden al apretarlas\n        // («Always include a press state»)\n        MuiButton: {\n            styleOverrides: {\n                // con texto largo la etiqueta se parte en dos renglones: con el interlineado de MUI (1.75) y la esquina de cápsula\n                // salía un óvalo grande con los renglones separados (lo reportaron). Interlineado 1.3, el MISMO alto de un renglón\n                // que antes (minHeight) y la esquina de la mitad de ese alto: con un renglón es cápsula; con dos, rectángulo\n                // redondeado, como los botones de Apple que no caben\n                root: ({ownerState, theme}) => ({\n                    lineHeight: BUTTON_LINE_HEIGHT,\n                    minHeight: BUTTON_HEIGHT_PIXELS[ownerState.size ?? 'medium'] ?? BUTTON_HEIGHT_PIXELS.medium,\n                    borderRadius: `${(BUTTON_HEIGHT_PIXELS[ownerState.size ?? 'medium'] ?? BUTTON_HEIGHT_PIXELS.medium) / 2}px`,\n                    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color', 'transform'], {\n                        duration: theme.transitions.duration.short,\n                    }),\n                    ...pressedMotionOf(`scale(${PRESSED_SCALE})`),\n                }),\n                // el principal (contained) es el «prominente» de Apple: el color va en el fondo («To emphasize primary\n                // actions, apply color to the background rather than to symbols or text», HIG «Color»), con el brillo del\n                // vidrio para que se lea sobre cualquier cosa\n                contained: ({ownerState, theme}) => ({\n                    backgroundImage: PROMINENT_SHEEN_IMAGE,\n                    boxShadow: PROMINENT_SHEEN_SHADOW,\n                    '&:hover, &:active, &.Mui-focusVisible': {boxShadow: PROMINENT_SHEEN_SHADOW},\n                    ...whiteLabelOf(theme, ownerState.color ?? 'primary'),\n                    '&.Mui-disabled': {backgroundImage: 'none', boxShadow: 'none'},\n                }),\n                // el de solo texto («borderless» de Apple): la letra del color del tema, pero legible (accentTextStylesOf); el\n                // naranja tal cual sobre una tarjeta clara daba 2.78 : 1\n                text: ({ownerState, theme}) => (paletteOf(theme)[ownerState.color] ? accentTextStylesOf(theme, ownerState.color) : {}),\n                // el de borde es el «botón de vidrio» de Apple: una cápsula de vidrio sin borde de color (el filo del vidrio\n                // ya la dibuja; con los dos se veía un doble aro). Con el color de omisión (primary) la letra va de un solo\n                // color: «Prefer the default monochromatic appearance of button labels» y no repetir en la letra el color\n                // del fondo (HIG «Buttons»); con otro color a propósito (error, success…) la letra lo conserva. Al pasar el\n                // cursor, un toque de color encima del vidrio, sin perder el vidrio\n                // DENTRO de una tarjeta, un diálogo o un menú (cualquier Paper) ya no es vidrio: ahí no hay nada detrás que el\n                // vidrio deje ver y se leía como «cápsula blanca con sombra» (lo dijo el autor). Apple: «Don't use Liquid Glass\n                // in the content layer»; en el contenido usa el botón «bordered», un relleno tenue de su color. Los que van\n                // dentro de un grupo los pinta el grupo (por eso el :not)\n                outlined: ({ownerState, theme}) => {\n                    const palette = paletteOf(theme);\n                    const isDefaultColor = (ownerState.color ?? 'primary') === 'primary';\n                    const toneColor = palette[ownerState.color]?.main ?? palette.text.primary;\n                    const label = isDefaultColor || !palette[ownerState.color] ? {color: palette.text.primary} : accentTextStylesOf(theme, ownerState.color);\n                    const glass = glassStylesOf(theme, {isControl: true});\n                    const hoverTint = `color-mix(in srgb, ${isDefaultColor ? palette.text.primary : toneColor} 10%, transparent)`;\n                    return {\n                        // con mergeStyles: el vidrio y la letra traen su modo oscuro; la suma simple borraba el del vidrio\n                        ...mergeStyles(glass, label),\n                        borderColor: 'transparent',\n                        '&:hover': {...glass, borderColor: 'transparent', backgroundImage: `linear-gradient(${hoverTint}, ${hoverTint})`},\n                        '&.Mui-disabled': {borderColor: 'transparent'},\n                        [insideContentSelectorOf(':not(.MuiButtonGroup-grouped)')]: tintedControlOf(theme, toneColor),\n                    };\n                },\n            },\n        },\n        // el grupo de botones con borde: UNA cápsula de vidrio con los botones adentro, separados por una línea fina, como\n        // los grupos de una barra de Apple que comparten fondo (HIG «Toolbars»: agrupar por función); adentro los botones\n        // no llevan vidrio propio, porque vidrio sobre vidrio no se lee\n        MuiButtonGroup: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => {\n                    // acostado es una cápsula; de pie, una tarjetita con esquinas de menú (una cápsula de pie se veía como óvalo)\n                    const borderRadius = ownerState.orientation === 'vertical' ? GLASS_MENU_RADIUS_PIXELS : PILL_RADIUS;\n                    if (ownerState.variant !== 'outlined') {\n                        return {borderRadius};\n                    }\n                    // dentro de una tarjeta, la cápsula es un relleno tenue y no vidrio (lo mismo que el botón con borde)\n                    const plain = {backgroundImage: 'none', backdropFilter: 'none', WebkitBackdropFilter: 'none', boxShadow: 'none'};\n                    const groupFillOf = (percent) => `color-mix(in srgb, ${paletteOf(theme).text.primary} ${percent}%, transparent)`;\n                    return {\n                        ...glassStylesOf(theme, {isControl: true}),\n                        borderRadius,\n                        overflow: 'hidden',\n                        [insideContentSelectorOf()]: {\n                            ...plain,\n                            backgroundColor: groupFillOf(TINTED_FILL_PERCENT.light.rest),\n                            ...theme.applyStyles('dark', {backgroundColor: groupFillOf(TINTED_FILL_PERCENT.dark.rest)}),\n                        },\n                    };\n                },\n                grouped: ({ownerState, theme}) => {\n                    if (ownerState.variant !== 'outlined') {\n                        return {};\n                    }\n                    const plain = {backgroundColor: 'transparent', backgroundImage: 'none', backdropFilter: 'none', WebkitBackdropFilter: 'none', boxShadow: 'none'};\n                    const separator = `1px solid ${paletteOf(theme).divider}`;\n                    return {\n                        ...plain,\n                        border: 0,\n                        '&:hover': {...plain, backgroundColor: paletteOf(theme).action.hover},\n                        // OJO: el lente del botón (con la marca de <body>) le ganaba a esta regla y el botón volvía a ser\n                        // vidrio dentro de su grupo; con la marca también aquí, gana el grupo (medido en Chrome)\n                        [`${GLASS_LENS_FLAG_SELECTOR} &`]: plain,\n                        ...(ownerState.orientation === 'vertical'\n                            ? {'&:not(:last-of-type)': {borderBottom: separator}}\n                            : {'&:not(:last-of-type)': {borderRight: separator}}),\n                    };\n                },\n            },\n        },\n        // las ligas: el color del tema, legible (accentTextStylesOf); la de color=\"inherit\" se respeta\n        MuiLink: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => (paletteOf(theme)[ownerState.color] ? accentTextStylesOf(theme, ownerState.color) : {}),\n            },\n        },\n        // las etiquetas que se pican (filtros rápidos, rango de fechas) son controles, y Apple los pinta como sus botones de\n        // vidrio: la no elegida es una cápsula de vidrio sin borde de color (como el botón con borde) y la elegida va de su\n        // color con el brillo del botón principal (el «prominente»). Las que solo informan (el estado en un renglón de la\n        // tabla) son contenido y se quedan como están: «Don't use Liquid Glass in the content layer» (HIG «Materials»).\n        // OJO: MUI marca el cursor encima y el foco con dos clases (&.MuiChip-clickable:hover); con una sola, ganaba su gris.\n        // el avatar con iniciales es el «monograma» de Apple (el de Contactos): iniciales BLANCAS sobre un gris que las deja leer.\n        // El de MUI ponía letras oscuras sobre gris en claro y claras sobre gris en oscuro, y casi no se leían (lo reportaron).\n        // Un avatar con foto no cambia (la foto tapa el fondo)\n        MuiAvatar: {\n            styleOverrides: {\n                colorDefault: ({theme}) => monogramOf(theme),\n            },\n        },\n        MuiChip: {\n            styleOverrides: {\n                // el avatar dentro de una etiqueta («Con avatar»): el mismo monograma; MUI le ponía su gris de letra\n                avatar: ({theme}) => monogramOf(theme),\n                root: ({ownerState, theme}) => {\n                    const isFilledWithColor = ownerState.variant !== 'outlined' && ownerState.color && ownerState.color !== 'default';\n                    const darkLabel = isFilledWithColor ? whiteLabelOf(theme, ownerState.color) : {};\n                    // la de borde con color («Administración» en Mi perfil): su letra del color pero legible; tal cual daba\n                    // 2.78 : 1 sobre blanco (medido con la auditoría)\n                    const hasColor = ownerState.color && ownerState.color !== 'default' && paletteOf(theme)[ownerState.color];\n                    const outlinedText = ownerState.variant === 'outlined' && hasColor ? accentTextStylesOf(theme, ownerState.color) : {};\n                    if (!ownerState.clickable) {\n                        return {...darkLabel, ...outlinedText};\n                    }\n                    if (ownerState.variant === 'outlined') {\n                        const glass = glassStylesOf(theme, {isControl: true});\n                        const hoverTint = `color-mix(in srgb, ${paletteOf(theme).text.primary} 8%, transparent)`;\n                        const hoverGlass = {...glass, borderColor: 'transparent', backgroundImage: `linear-gradient(${hoverTint}, ${hoverTint})`};\n                        return {\n                            ...glass,\n                            borderColor: 'transparent',\n                            '&.MuiChip-clickable:hover, &.Mui-focusVisible': hoverGlass,\n                            // dentro de una tarjeta, un relleno tenue y no vidrio (como el botón con borde)\n                            [insideContentSelectorOf()]: tintedControlOf(theme, paletteOf(theme).text.primary),\n                        };\n                    }\n                    return {backgroundImage: PROMINENT_SHEEN_IMAGE, boxShadow: PROMINENT_SHEEN_SHADOW, ...darkLabel};\n                },\n            },\n        },\n        // el numerito (Badge) de color: en oscuro, letra blanca sobre su color oscurecido\n        MuiBadge: {\n            styleOverrides: {\n                badge: ({ownerState, theme}) => (ownerState.color && ownerState.color !== 'default' ? whiteLabelOf(theme, ownerState.color) : {}),\n            },\n        },\n        // los campos (HIG «Text fields» y las imágenes de la propia guía): la etiqueta va ARRIBA y fuera del campo, siempre a\n        // la vista («include a separate label describing the field», porque la pista desaparece al escribir), en vez de la\n        // que flota sobre el borde en MUI. Los de línea (variant=\"standard\") se quedan como MUI los pinta\n        MuiInputLabel: {\n            defaultProps: {shrink: true},\n            styleOverrides: {\n                root: ({ownerState, theme}) => (ownerState.variant === 'standard' ? {} : {\n                    position: 'relative',\n                    transform: 'none',\n                    maxWidth: '100%',\n                    marginBottom: theme.spacing(0.75),\n                    ...textSizeOf(SENTENCE_CASE_TITLE_PIXELS),\n                    fontWeight: 600,\n                    lineHeight: 1.4,\n                    whiteSpace: 'normal',\n                    pointerEvents: 'auto',\n                    color: paletteOf(theme).text.secondary,\n                }),\n            },\n        },\n        // el campo con borde de MUI (el de omisión, el de los Select, los Autocomplete y los campos del framework): sobre el\n        // lienzo es una lámina de vidrio con esquinas de 12 px (la imagen de «Text fields» de Apple) y el buscador, una cápsula\n        // (el de la barra de iPad); dentro de una tarjeta, el relleno gris de los campos de Apple (fieldFillOf). Sin el borde de\n        // MUI en ningún caso: lo marca el aro (fieldRingsOf). Dentro de una FormSection el campo es un renglón (FormSection.jsx)\n        MuiOutlinedInput: {\n            defaultProps: {notched: false},\n            styleOverrides: {\n                root: ({ownerState, theme}) => ({\n                    ...canvasFieldStylesOf(theme),\n                    borderRadius: ownerState.type === 'search' ? PILL_RADIUS : FIELD_RADIUS_PIXELS,\n                    '& .MuiOutlinedInput-notchedOutline': {borderColor: 'transparent'},\n                    '&:hover .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-error .MuiOutlinedInput-notchedOutline': {\n                        borderColor: 'transparent',\n                    },\n                    ...fieldRingsOf(theme),\n                    [insideContentSelectorOf()]: fieldFillOf(theme),\n                }),\n            },\n        },\n        // el campo relleno de MUI: el mismo relleno de Apple, sin la raya de abajo, con el texto centrado (MUI le dejaba\n        // arriba el lugar de la etiqueta, que ahora va afuera)\n        MuiFilledInput: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => ({\n                    ...fieldFillOf(theme),\n                    '&::before, &::after': {display: 'none'},\n                    ...(ownerState.multiline && {padding: '16.5px 14px'}),\n                    ...fieldRingsOf(theme),\n                }),\n                input: ({ownerState}) => (ownerState.multiline ? {} : {\n                    paddingTop: ownerState.size === 'small' ? 8.5 : 16.5,\n                    paddingBottom: ownerState.size === 'small' ? 8.5 : 16.5,\n                    paddingInline: 14,\n                }),\n            },\n        },\n        // el campo de fecha de MUI X (/date-pickers) tiene su propia pieza: lo mismo que el campo con borde\n        MuiPickersOutlinedInput: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    ...canvasFieldStylesOf(theme),\n                    borderRadius: FIELD_RADIUS_PIXELS,\n                    '& .MuiPickersOutlinedInput-notchedOutline': {borderColor: 'transparent'},\n                    '&:hover .MuiPickersOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline, &.Mui-error .MuiPickersOutlinedInput-notchedOutline': {\n                        borderColor: 'transparent',\n                    },\n                    ...fieldRingsOf(theme),\n                    [insideContentSelectorOf()]: fieldFillOf(theme),\n                }),\n            },\n        },\n        // los botones de opción: una tira apenas marcada y la opción elegida en su gota. Acostados y sin fullWidth, todas las\n        // opciones miden lo mismo (la más ancha manda): «all segments are usually equal in width» (HIG «Segmented controls»)\n        MuiToggleButtonGroup: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => ({\n                    backgroundColor: paletteOf(theme).action.hover,\n                    borderRadius: PILL_RADIUS,\n                    padding: 3,\n                    gap: 2,\n                    // la tira mide lo que sus opciones (dentro de una columna se estiraba a todo lo ancho), salvo fullWidth\n                    ...(!ownerState.fullWidth && {width: 'fit-content', maxWidth: '100%'}),\n                    ...(!ownerState.fullWidth && ownerState.orientation !== 'vertical' && {\n                        display: 'inline-grid',\n                        gridAutoFlow: 'column',\n                        gridAutoColumns: '1fr',\n                    }),\n                    '& .MuiToggleButtonGroup-grouped': {border: 0, margin: 0, borderRadius: PILL_RADIUS},\n                    '& .MuiToggleButtonGroup-grouped.Mui-selected, & .MuiToggleButtonGroup-grouped.Mui-selected:hover': glassDropOf(theme),\n                }),\n            },\n        },\n        // la casilla: la palomita BLANCA sobre el color oscurecido lo justo (whiteLabelFillOf), como las de Apple. La de MUI es\n        // un hueco en el cuadro y en oscuro se veía la palomita negra (lo reportaron: «espantoso»); un cuadrito blanco detrás\n        // del dibujo la vuelve blanca. Vale igual para la casilla «mixta»\n        MuiCheckbox: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => {\n                    const colorName = ownerState.color ?? 'primary';\n                    const fillOf = (scheme) => whiteLabelFillOf(theme.colorSchemes?.[scheme]?.palette?.[colorName]?.main);\n                    const lightFill = fillOf('light');\n                    const darkFill = fillOf('dark');\n                    const whiteMark = {background: 'linear-gradient(#fff, #fff) center / 58% 58% no-repeat', borderRadius: 4};\n                    return {\n                        '&.Mui-checked .MuiSvgIcon-root, &.MuiCheckbox-indeterminate .MuiSvgIcon-root': whiteMark,\n                        ...(lightFill && {'&.Mui-checked, &.MuiCheckbox-indeterminate': {color: lightFill}}),\n                        ...(darkFill && theme.applyStyles('dark', {'&.Mui-checked, &.MuiCheckbox-indeterminate': {color: darkFill}})),\n                    };\n                },\n            },\n        },\n        // el interruptor con su texto: el de iPhone no trae el margen que MUI usa para separar el texto, y salía pegado (lo\n        // reportaron). 12 px entre los dos; con el texto antes (labelPlacement=\"start\"), el texto a la izquierda y el\n        // interruptor a la derecha del renglón, como en Ajustes\n        MuiFormControlLabel: {\n            styleOverrides: {\n                root: {\n                    '&:has(.MuiSwitch-root)': {gap: SWITCH_LABEL_GAP_PIXELS, marginLeft: 0},\n                    '&:has(.MuiSwitch-root).MuiFormControlLabel-labelPlacementStart': {marginRight: 0, justifyContent: 'space-between'},\n                },\n            },\n        },\n        // el número de los pasos (Stepper): blanco sobre el círculo. El activo y los hechos, del color del tema oscurecido lo justo\n        // para el blanco (whiteLabelFillOf); los que faltan, gris de Apple. En oscuro la paleta ponía el número negro sobre el\n        // naranja y no se notaba el «1» (lo reportaron)\n        MuiStepIcon: {\n            styleOverrides: {\n                root: ({theme}) => {\n                    const fillOf = (scheme) => whiteLabelFillOf(theme.colorSchemes?.[scheme]?.palette?.primary?.main);\n                    const lightFill = fillOf('light');\n                    const darkFill = fillOf('dark');\n                    return {\n                        color: STEP_PENDING_GRAY.light,\n                        '& .MuiStepIcon-text': {fill: WHITE_LABEL},\n                        ...(lightFill && {'&.Mui-active, &.Mui-completed': {color: lightFill}}),\n                        ...theme.applyStyles('dark', {\n                            color: STEP_PENDING_GRAY.dark,\n                            ...(darkFill && {'&.Mui-active, &.Mui-completed': {color: darkFill}}),\n                        }),\n                    };\n                },\n            },\n        },\n        // el día del calendario de MUI X (como el de Apple): el elegido en un círculo tenue de su color con el número legible,\n        // y hoy, con el número del color del tema (legible); nada de letra negra sobre el naranja\n        MuiPickersDay: {\n            styleOverrides: {\n                root: ({theme}) => {\n                    const palette = paletteOf(theme);\n                    const selected = {\n                        backgroundColor: `color-mix(in srgb, ${palette.primary.main} 22%, transparent)`,\n                        ...accentTextStylesOf(theme),\n                        fontWeight: 600,\n                    };\n                    return {\n                        '&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus': selected,\n                        '&.MuiPickersDay-today:not(.Mui-selected)': {border: 0, ...accentTextStylesOf(theme), fontWeight: 600},\n                    };\n                },\n            },\n        },\n        // las pestañas: la misma tira, y la marca de abajo se vuelve la gota detrás de la pestaña elegida (se desliza sola)\n        MuiTabs: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => (ownerState.vertical ? {} : {\n                    minHeight: 0,\n                    padding: MENU_ROW_INSET_PIXELS,\n                    borderRadius: PILL_RADIUS,\n                    backgroundColor: paletteOf(theme).action.hover,\n                    width: 'fit-content',\n                    maxWidth: '100%',\n                    '& .MuiTab-root': {minHeight: 36, paddingBlock: 6, paddingInline: 16, borderRadius: PILL_RADIUS, zIndex: 1},\n                    '& .MuiTab-root.Mui-selected': {color: paletteOf(theme).text.primary},\n                }),\n                indicator: ({ownerState, theme}) => (ownerState.vertical ? {display: 'none'} : {...glassDropOf(theme), height: '100%', borderRadius: PILL_RADIUS, zIndex: 0}),\n                // de pie son una lista para navegar, como el menú lateral: la elegida en su gota y no con la rayita de MUI\n                // OJO: la gota iba pegada a la línea de la derecha y sin aire entre pestañas («todo pegado»): se separan\n                vertical: ({theme}) => ({\n                    paddingRight: theme.spacing(1),\n                    '& .MuiTab-root': {\n                        minHeight: 40, borderRadius: GLASS_MENU_RADIUS_PIXELS, alignItems: 'flex-start', marginBlock: 3, paddingInline: theme.spacing(2),\n                    },\n                    '& .MuiTab-root.Mui-focusVisible': {outlineOffset: 2},\n                    '& .MuiTab-root.Mui-selected': {...glassDropOf(theme), color: paletteOf(theme).text.primary},\n                }),\n            },\n        },\n        // los pasos con puntos del teléfono: en su lugar, sin fondo propio (sobre una tarjeta se veía un rectángulo); pegados\n        // abajo o arriba de la pantalla, flotan de vidrio\n        MuiMobileStepper: {\n            styleOverrides: {\n                root: ({ownerState, theme}) => (ownerState.position === 'static' ? {background: 'transparent'} : glassStylesOf(theme)),\n            },\n        },\n        // un renglón elegido de una lista (la carpeta abierta): en su gota, como el menú lateral (HIG «Sidebars»)\n        MuiListItemButton: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    '&.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible': mergeStyles(glassDropOf(theme), accentTextStylesOf(theme)),\n                }),\n            },\n        },\n        // la paginación: la página actual en su gota, como lo elegido en los demás controles\n        MuiPaginationItem: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    '&.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible': {\n                        ...glassDropOf(theme),\n                        borderColor: 'transparent',\n                        color: paletteOf(theme).text.primary,\n                    },\n                }),\n            },\n        },\n        // el interruptor: la perilla con brillo, que crece al apretarla (HIG «Materials»: los controles como el interruptor\n        // «take on a Liquid Glass appearance… when a person activates it»)\n        // Y tiene la forma del de iPhone: una cápsula con la perilla blanca ADENTRO (el de MUI pone la perilla encima de una\n        // pista delgada); prendido, la pista es del color del interruptor; apagado, el gris de relleno de Apple\n        MuiSwitch: {\n            styleOverrides: {\n                // OJO: las medidas van aquí, colgadas de la raíz: MUI pone las del interruptor chico con un selector así de\n                // fuerte (.raíz .MuiSwitch-switchBase.Mui-checked) y, puestas en cada pieza, ganaba la suya (la perilla se\n                // salía de la pista)\n                root: ({ownerState}) => {\n                    const size = SWITCH_SIZES[ownerState.size] ?? SWITCH_SIZES.medium;\n                    return {\n                        width: size.width,\n                        height: size.height,\n                        padding: 0,\n                        overflow: 'visible',\n                        '& .MuiSwitch-switchBase': {padding: 0, margin: SWITCH_THUMB_MARGIN_PIXELS},\n                        '& .MuiSwitch-switchBase.Mui-checked': {transform: `translateX(${size.width - size.thumb - SWITCH_THUMB_MARGIN_PIXELS * 2}px)`},\n                        '& .MuiSwitch-thumb': {width: size.thumb, height: size.thumb},\n                        '& .MuiSwitch-track': {borderRadius: size.height / 2},\n                    };\n                },\n                switchBase: ({ownerState, theme}) => {\n                    const palette = paletteOf(theme);\n                    const onColor = (palette[ownerState.color] ?? palette.primary).main;\n                    return {\n                        color: palette.common.white,\n                        '&.Mui-checked': {\n                            color: palette.common.white,\n                            '& + .MuiSwitch-track': {backgroundColor: onColor, opacity: 1},\n                        },\n                        '&.Mui-disabled + .MuiSwitch-track, &.Mui-checked.Mui-disabled + .MuiSwitch-track': {opacity: 0.4},\n                        '&.Mui-disabled .MuiSwitch-thumb': {opacity: 0.8},\n                        // con el teclado, un aro alrededor de la perilla\n                        '&.Mui-focusVisible .MuiSwitch-thumb': {outline: `2px solid ${onColor}`, outlineOffset: 2},\n                        '&:hover': {backgroundColor: 'transparent'},\n                        '&:active .MuiSwitch-thumb': {transform: `scale(${PRESSED_THUMB_SCALE})`},\n                        [REDUCED_MOTION_QUERY]: {'&:active .MuiSwitch-thumb': {transform: 'none'}},\n                    };\n                },\n                thumb: ({theme}) => ({\n                    boxShadow: 'inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.12)',\n                    transition: theme.transitions.create(['transform'], {duration: theme.transitions.duration.shortest}),\n                }),\n                track: ({theme}) => ({\n                    opacity: 1,\n                    backgroundColor: SWITCH_OFF_TRACK.light,\n                    transition: theme.transitions.create(['background-color'], {duration: theme.transitions.duration.short}),\n                    ...theme.applyStyles('dark', {backgroundColor: SWITCH_OFF_TRACK.dark}),\n                }),\n            },\n        },\n        // el deslizador: la perilla clara (como la de Apple) que, al arrastrarla, crece y se vuelve una lupa de vidrio\n        MuiSlider: {\n            styleOverrides: {\n                thumb: ({ownerState, theme}) => {\n                    const palette = paletteOf(theme);\n                    const centered = ownerState.orientation === 'vertical' ? 'translate(-50%, 50%)' : 'translate(-50%, -50%)';\n                    const pressedGlass = {\n                        backgroundColor: `color-mix(in srgb, ${palette.background.paper} 45%, transparent)`,\n                        backdropFilter: 'blur(2px) saturate(180%)',\n                        WebkitBackdropFilter: 'blur(2px) saturate(180%)',\n                        ...solidFallbackOf({backgroundColor: palette.background.paper, backdropFilter: 'none', WebkitBackdropFilter: 'none'}),\n                    };\n                    const isVertical = ownerState.orientation === 'vertical';\n                    return {\n                        width: isVertical ? SLIDER_THUMB.short : SLIDER_THUMB.long,\n                        height: isVertical ? SLIDER_THUMB.long : SLIDER_THUMB.short,\n                        borderRadius: PILL_RADIUS,\n                        backgroundColor: palette.common.white,\n                        border: 0,\n                        boxShadow: SLIDER_THUMB.shadow,\n                        // MUI pone un halo del color al pasar el cursor; en Apple la perilla solo se ve, sin halo\n                        '&:hover, &.Mui-focusVisible': {boxShadow: SLIDER_THUMB.shadow},\n                        '&.Mui-focusVisible': {outline: `2px solid ${palette.primary.main}`, outlineOffset: 2},\n                        transition: theme.transitions.create(['box-shadow', 'left', 'bottom', 'transform', 'background-color'], {\n                            duration: theme.transitions.duration.shortest,\n                        }),\n                        '&.Mui-active': {transform: `${centered} scale(${PRESSED_THUMB_SCALE})`, ...pressedGlass},\n                        [REDUCED_MOTION_QUERY]: {'&.Mui-active': {transform: centered}},\n                    };\n                },\n                rail: ({theme}) => ({\n                    opacity: 1,\n                    backgroundColor: SLIDER_RAIL.light,\n                    ...theme.applyStyles('dark', {backgroundColor: SLIDER_RAIL.dark}),\n                }),\n                root: ({ownerState}) => (ownerState.orientation === 'vertical' ? {width: SLIDER_TRACK_PIXELS} : {height: SLIDER_TRACK_PIXELS}),\n            },\n        },\n        // lo que espera (HIG «Progress indicators»): el «cargando» sin cuánto falta es la ruedita de iPhone, rayitas que giran\n        // a saltos con la cola desvanecida (no el anillo de MUI): se dibuja con una máscara y gira con la misma animación de\n        // MUI, solo que en 8 saltos. El que sí dice cuánto falta conserva el anillo, con su pista de fondo y la punta redonda.\n        // Cambian solos todos los «cargando» del framework: el de los botones, la pantalla de espera y las tablas.\n        // La ruedita sigue girando aunque la persona pida menos movimiento: Apple pide «Keep progress indicators moving».\n        MuiCircularProgress: {\n            defaultProps: {enableTrackSlot: true},\n            styleOverrides: {\n                root: ({ownerState}) => (ownerState.variant === 'determinate' ? {} : {\n                    backgroundColor: 'currentColor',\n                    maskImage: ACTIVITY_SPOKES_MASK,\n                    WebkitMaskImage: ACTIVITY_SPOKES_MASK,\n                    maskSize: '100% 100%',\n                    WebkitMaskSize: '100% 100%',\n                    maskRepeat: 'no-repeat',\n                    WebkitMaskRepeat: 'no-repeat',\n                    animationDuration: ACTIVITY_SPIN_DURATION,\n                    animationTimingFunction: `steps(${ACTIVITY_SPOKE_COUNT})`,\n                    '& .MuiCircularProgress-svg': {visibility: 'hidden'},\n                }),\n                circle: ({ownerState}) => (ownerState.variant === 'determinate' ? {strokeLinecap: 'round'} : {}),\n            },\n        },\n        // la barra de progreso: la cápsula delgada de Apple, con la pista gris neutra y la parte llena de punta redonda\n        MuiLinearProgress: {\n            styleOverrides: {\n                root: ({theme}) => ({height: PROGRESS_BAR_HEIGHT_PIXELS, borderRadius: PILL_RADIUS, backgroundColor: paletteOf(theme).action.hover}),\n                bar: {borderRadius: PILL_RADIUS},\n            },\n        },\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/theme/components/minimalComponents.js

@@ -0,0 +1,146 @@
+import { paletteOf } from "./paletteOf.js";
+import { textSizeOf } from "../appleTracking.js";
+import { accentTextStylesOf } from "../glassSurface.js";
+const MINIMAL_BACKGROUND = Object.freeze({
+  light: { default: "#F2F2F7", paper: "#FFFFFF" },
+  dark: { default: "#000000", paper: "#1C1C1E" }
+});
+const TONAL_FILL = Object.freeze({ light: "rgba(118, 118, 128, 0.12)", dark: "rgba(118, 118, 128, 0.24)" });
+const TINT_PERCENT = Object.freeze({ rest: 14, hover: 22, ring: 45 });
+const RADIUS_PIXELS = Object.freeze({ card: 16, control: 10, group: 12, segment: 9 });
+const SMALL_TITLE_PIXELS = 13;
+function tintOf(theme, colorName = "primary", percent = TINT_PERCENT.rest) {
+  const palette = paletteOf(theme);
+  const color = (palette[colorName] ?? palette.primary).main;
+  return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
+}
+function tonalFillOf(theme) {
+  return { backgroundColor: TONAL_FILL.light, ...theme.applyStyles("dark", { backgroundColor: TONAL_FILL.dark }) };
+}
+function selectedTintOf(theme) {
+  return { backgroundColor: tintOf(theme), ...accentTextStylesOf(theme) };
+}
+const FLOATING_TONE = Object.freeze({ light: "#E5E5EA", dark: "#2C2C2E" });
+function minimalFloatingStylesOf(theme) {
+  return { backgroundColor: FLOATING_TONE.light, ...theme.applyStyles("dark", { backgroundColor: FLOATING_TONE.dark }) };
+}
+function minimalComponents() {
+  return {
+    MuiPaper: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: { backgroundImage: "none", boxShadow: "none" },
+        outlined: { border: 0 },
+        rounded: { borderRadius: RADIUS_PIXELS.card }
+      }
+    },
+    MuiCard: { defaultProps: { elevation: 0 } },
+    // la barra del mismo tono que el fondo: sin raya ni sombra, solo su contenido
+    MuiAppBar: {
+      defaultProps: { elevation: 0, color: "inherit" },
+      styleOverrides: {
+        root: ({ theme }) => ({ backgroundColor: paletteOf(theme).background.default, color: paletteOf(theme).text.primary, boxShadow: "none", borderBottom: 0 })
+      }
+    },
+    // el menú lateral también del tono del fondo, sin raya: lo separa el espacio, no una línea
+    MuiDrawer: {
+      styleOverrides: {
+        paper: ({ theme }) => ({ backgroundColor: paletteOf(theme).background.default, borderRight: 0, backgroundImage: "none" })
+      }
+    },
+    MuiButton: {
+      defaultProps: { disableElevation: true },
+      styleOverrides: {
+        root: { borderRadius: RADIUS_PIXELS.control, boxShadow: "none" },
+        // el de borde es «tonal»: el tinte de su color, sin la raya
+        outlined: ({ ownerState, theme }) => ({
+          border: 0,
+          backgroundColor: tintOf(theme, ownerState.color),
+          "&:hover": { border: 0, backgroundColor: tintOf(theme, ownerState.color, TINT_PERCENT.hover) }
+        })
+      }
+    },
+    MuiButtonGroup: { defaultProps: { disableElevation: true } },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          ...tonalFillOf(theme),
+          borderRadius: RADIUS_PIXELS.control,
+          "&.Mui-focused": { outline: `2px solid ${tintOf(theme, "primary", TINT_PERCENT.ring)}` },
+          "&.Mui-error": { outline: `2px solid ${tintOf(theme, "error", TINT_PERCENT.ring)}` }
+        }),
+        notchedOutline: { border: 0 }
+      }
+    },
+    MuiFilledInput: {
+      defaultProps: { disableUnderline: true },
+      styleOverrides: { root: ({ theme }) => ({ ...tonalFillOf(theme), borderRadius: RADIUS_PIXELS.control }) }
+    },
+    // la etiqueta con borde también es tonal: el tinte de su color (o el gris si no lleva color)
+    MuiChip: {
+      styleOverrides: {
+        outlined: ({ ownerState, theme }) => ({
+          border: 0,
+          ...ownerState.color && ownerState.color !== "default" ? { backgroundColor: tintOf(theme, ownerState.color) } : tonalFillOf(theme)
+        })
+      }
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({ borderRadius: RADIUS_PIXELS.control, "&.Mui-selected, &.Mui-selected:hover": selectedTintOf(theme) })
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: ({ theme }) => ({ "&.Mui-selected, &.Mui-selected:hover": selectedTintOf(theme) })
+      }
+    },
+    // el grupo de botones (el control segmentado): una tira gris y lo elegido en blanco (claro) o un escalón arriba (oscuro)
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: ({ theme }) => ({ ...tonalFillOf(theme), border: 0, borderRadius: RADIUS_PIXELS.group, padding: 3, gap: 3 }),
+        grouped: { border: 0, borderRadius: `${RADIUS_PIXELS.segment}px !important` }
+      }
+    },
+    MuiToggleButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          border: 0,
+          "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: paletteOf(theme).background.paper, color: paletteOf(theme).text.primary },
+          ...theme.applyStyles("dark", { "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: "rgba(118, 118, 128, 0.36)" } })
+        })
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: ({ theme }) => ({ "&.Mui-selected": accentTextStylesOf(theme) })
+      }
+    },
+    // las tablas sin rayas entre renglones: el encabezado se distingue por su tono
+    MuiTableCell: {
+      styleOverrides: {
+        root: { borderBottom: 0 },
+        head: ({ theme }) => ({ ...tonalFillOf(theme), fontWeight: 600 })
+      }
+    },
+    MuiDataGrid: {
+      styleOverrides: {
+        root: { border: 0, "--DataGrid-rowBorderColor": "transparent" },
+        columnHeaders: ({ theme }) => tonalFillOf(theme)
+      }
+    },
+    MuiAlert: { styleOverrides: { root: { border: 0 } } },
+    // los títulos chicos como se escriben (Apple ya no los pone en mayúsculas), con el espaciado de su tamaño
+    MuiTypography: {
+      styleOverrides: {
+        overline: { textTransform: "none", fontWeight: 600, ...textSizeOf(SMALL_TITLE_PIXELS) }
+      }
+    }
+  };
+}
+export {
+  MINIMAL_BACKGROUND,
+  minimalComponents,
+  minimalFloatingStylesOf
+};
+//# sourceMappingURL=minimalComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"minimalComponents.js","sources":["../../../src/theme/components/minimalComponents.js"],"sourcesContent":["// El estilo minimalista (createToolkitTheme({look: 'minimal'})): plano y tonal, como pidió el autor («casi solo colores, sin\n// bordes, que el mismo color diga dónde están las superficies»; su referencia: BELOW y Samurai Jack, formas de bloques de\n// color sin contorno y una sola luz de acento).\n//\n// Las reglas:\n//   - sin bordes ni sombras: las superficies se separan por su tono, con los grises de Apple (el fondo agrupado gris y las\n//     tarjetas un escalón arriba, MINIMAL_BACKGROUND; los campos, el gris de relleno, TONAL_FILL);\n//   - un solo color de acento: el botón principal, lo elegido (un tinte suave de su color, sin marco) y las ligas; lo demás\n//     neutro. El botón con borde y la etiqueta con borde pasan a «tonales»: el tinte de su color, sin la raya;\n//   - sin vidrio ni degradados: superficies sólidas.\n// Va encima de los ajustes del framework (toolkitComponents) y el proyecto puede sumar los suyos encima.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {accentTextStylesOf} from '@/theme/glassSurface.js';\n\n/** Los fondos del minimalista: el gris agrupado de Apple y la tarjeta un escalón arriba, en claro y en oscuro. */\nexport const MINIMAL_BACKGROUND = Object.freeze({\n    light: {default: '#F2F2F7', paper: '#FFFFFF'},\n    dark: {default: '#000000', paper: '#1C1C1E'},\n});\n\n// el gris de relleno de Apple para campos y grupos (más claro que el fondo en oscuro)\nconst TONAL_FILL = Object.freeze({light: 'rgba(118, 118, 128, 0.12)', dark: 'rgba(118, 118, 128, 0.24)'});\n// el tinte de lo elegido y de los controles tonales (por ciento de su color) y al pasar el cursor\nconst TINT_PERCENT = Object.freeze({rest: 14, hover: 22, ring: 45});\n// las esquinas: tarjetas y controles (px)\nconst RADIUS_PIXELS = Object.freeze({card: 16, control: 10, group: 12, segment: 9});\n// los títulos chicos (overline), como se escriben (px)\nconst SMALL_TITLE_PIXELS = 13;\n\n/**\n * El tinte de un color del tema (lo elegido, un botón tonal).\n *\n * @param {object} theme\n * @param {string} [colorName]\n * @param {number} [percent]\n * @returns {string}\n */\nfunction tintOf(theme, colorName = 'primary', percent = TINT_PERCENT.rest) {\n    const palette = paletteOf(theme);\n    const color = (palette[colorName] ?? palette.primary).main;\n    return `color-mix(in srgb, ${color} ${percent}%, transparent)`;\n}\n\n/**\n * El relleno gris de un campo o de un grupo, en claro y en oscuro.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction tonalFillOf(theme) {\n    return {backgroundColor: TONAL_FILL.light, ...theme.applyStyles('dark', {backgroundColor: TONAL_FILL.dark})};\n}\n\n/**\n * Lo elegido: el tinte suave del acento y su letra legible, sin marco ni gota.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction selectedTintOf(theme) {\n    return {backgroundColor: tintOf(theme), ...accentTextStylesOf(theme)};\n}\n\n// lo que flota sobre el contenido en el minimalista (la barra de pestañas del teléfono, el aviso de versión nueva): el gris\n// 5 de Apple, un escalón más oscuro que las tarjetas. Del color de las tarjetas «se perdía» sobre ellas (lo dijo el autor\n// de la primera barra de abajo del minimalista); así se distingue sin borde ni sombra, sobre tarjetas y sobre el fondo\nconst FLOATING_TONE = Object.freeze({light: '#E5E5EA', dark: '#2C2C2E'});\n\n/**\n * La superficie de lo que flota en el minimalista, sólida, en claro y en oscuro.\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function minimalFloatingStylesOf(theme) {\n    return {backgroundColor: FLOATING_TONE.light, ...theme.applyStyles('dark', {backgroundColor: FLOATING_TONE.dark})};\n}\n\n/**\n * @returns {object} el `components` del tema de MUI para el estilo minimalista\n */\nexport function minimalComponents() {\n    return {\n        MuiPaper: {\n            defaultProps: {elevation: 0},\n            styleOverrides: {\n                root: {backgroundImage: 'none', boxShadow: 'none'},\n                outlined: {border: 0},\n                rounded: {borderRadius: RADIUS_PIXELS.card},\n            },\n        },\n        MuiCard: {defaultProps: {elevation: 0}},\n        // la barra del mismo tono que el fondo: sin raya ni sombra, solo su contenido\n        MuiAppBar: {\n            defaultProps: {elevation: 0, color: 'inherit'},\n            styleOverrides: {\n                root: ({theme}) => ({backgroundColor: paletteOf(theme).background.default, color: paletteOf(theme).text.primary, boxShadow: 'none', borderBottom: 0}),\n            },\n        },\n        // el menú lateral también del tono del fondo, sin raya: lo separa el espacio, no una línea\n        MuiDrawer: {\n            styleOverrides: {\n                paper: ({theme}) => ({backgroundColor: paletteOf(theme).background.default, borderRight: 0, backgroundImage: 'none'}),\n            },\n        },\n        MuiButton: {\n            defaultProps: {disableElevation: true},\n            styleOverrides: {\n                root: {borderRadius: RADIUS_PIXELS.control, boxShadow: 'none'},\n                // el de borde es «tonal»: el tinte de su color, sin la raya\n                outlined: ({ownerState, theme}) => ({\n                    border: 0,\n                    backgroundColor: tintOf(theme, ownerState.color),\n                    '&:hover': {border: 0, backgroundColor: tintOf(theme, ownerState.color, TINT_PERCENT.hover)},\n                }),\n            },\n        },\n        MuiButtonGroup: {defaultProps: {disableElevation: true}},\n        MuiOutlinedInput: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    ...tonalFillOf(theme),\n                    borderRadius: RADIUS_PIXELS.control,\n                    '&.Mui-focused': {outline: `2px solid ${tintOf(theme, 'primary', TINT_PERCENT.ring)}`},\n                    '&.Mui-error': {outline: `2px solid ${tintOf(theme, 'error', TINT_PERCENT.ring)}`},\n                }),\n                notchedOutline: {border: 0},\n            },\n        },\n        MuiFilledInput: {\n            defaultProps: {disableUnderline: true},\n            styleOverrides: {root: ({theme}) => ({...tonalFillOf(theme), borderRadius: RADIUS_PIXELS.control})},\n        },\n        // la etiqueta con borde también es tonal: el tinte de su color (o el gris si no lleva color)\n        MuiChip: {\n            styleOverrides: {\n                outlined: ({ownerState, theme}) => ({\n                    border: 0,\n                    ...(ownerState.color && ownerState.color !== 'default' ? {backgroundColor: tintOf(theme, ownerState.color)} : tonalFillOf(theme)),\n                }),\n            },\n        },\n        MuiListItemButton: {\n            styleOverrides: {\n                root: ({theme}) => ({borderRadius: RADIUS_PIXELS.control, '&.Mui-selected, &.Mui-selected:hover': selectedTintOf(theme)}),\n            },\n        },\n        MuiMenuItem: {\n            styleOverrides: {\n                root: ({theme}) => ({'&.Mui-selected, &.Mui-selected:hover': selectedTintOf(theme)}),\n            },\n        },\n        // el grupo de botones (el control segmentado): una tira gris y lo elegido en blanco (claro) o un escalón arriba (oscuro)\n        MuiToggleButtonGroup: {\n            styleOverrides: {\n                root: ({theme}) => ({...tonalFillOf(theme), border: 0, borderRadius: RADIUS_PIXELS.group, padding: 3, gap: 3}),\n                grouped: {border: 0, borderRadius: `${RADIUS_PIXELS.segment}px !important`},\n            },\n        },\n        MuiToggleButton: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    border: 0,\n                    '&.Mui-selected, &.Mui-selected:hover': {backgroundColor: paletteOf(theme).background.paper, color: paletteOf(theme).text.primary},\n                    ...theme.applyStyles('dark', {'&.Mui-selected, &.Mui-selected:hover': {backgroundColor: 'rgba(118, 118, 128, 0.36)'}}),\n                }),\n            },\n        },\n        MuiTab: {\n            styleOverrides: {\n                root: ({theme}) => ({'&.Mui-selected': accentTextStylesOf(theme)}),\n            },\n        },\n        // las tablas sin rayas entre renglones: el encabezado se distingue por su tono\n        MuiTableCell: {\n            styleOverrides: {\n                root: {borderBottom: 0},\n                head: ({theme}) => ({...tonalFillOf(theme), fontWeight: 600}),\n            },\n        },\n        MuiDataGrid: {\n            styleOverrides: {\n                root: {border: 0, '--DataGrid-rowBorderColor': 'transparent'},\n                columnHeaders: ({theme}) => tonalFillOf(theme),\n            },\n        },\n        MuiAlert: {styleOverrides: {root: {border: 0}}},\n        // los títulos chicos como se escriben (Apple ya no los pone en mayúsculas), con el espaciado de su tamaño\n        MuiTypography: {\n            styleOverrides: {\n                overline: {textTransform: 'none', fontWeight: 600, ...textSizeOf(SMALL_TITLE_PIXELS)},\n            },\n        },\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/theme/components/paletteOf.js

@@ -0,0 +1,7 @@
+function paletteOf(theme) {
+  return (theme.vars ?? theme).palette;
+}
+export {
+  paletteOf
+};
+//# sourceMappingURL=paletteOf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paletteOf.js","sources":["../../../src/theme/components/paletteOf.js"],"sourcesContent":["// La paleta que deben leer los ajustes de componentes.\n//\n// OJO, trampa pagada: theme.vars solo existe con el tema en modo variables CSS (createToolkitTheme lo prende). Con\n// theme.vars un mismo ajuste sirve en claro y en oscuro sin volver a pintar; sin él se lee la paleta normal.\n//\n// Funciones puras, sin React: function (regla de la casa).\n\n/**\n * @param {object} theme el tema de MUI\n * @returns {object} la paleta (con variables CSS si las hay)\n */\nexport function paletteOf(theme) {\n    return (theme.vars ?? theme).palette;\n}\n"],"names":[],"mappings":"AAWO,SAAS,UAAU,OAAO;AAC7B,UAAQ,MAAM,QAAQ,OAAO;AACjC;"}

package/dist/theme/createToolkitTheme.js

@@ -0,0 +1,100 @@
+"use client";
+import { createTheme, responsiveFontSizes } from "@mui/material/styles";
+import { glassComponents } from "./components/glassComponents.js";
+import { GLASS_OPACITY } from "./glassSurface.js";
+import { mergeComponents } from "./mergeComponents.js";
+import { stackcraftDarkPalette, stackcraftLightPalette } from "./stackcraftPalette.js";
+import { trackingOf } from "./appleTracking.js";
+import { toolkitComponents } from "./toolkitComponents.js";
+import { minimalComponents, MINIMAL_BACKGROUND } from "./components/minimalComponents.js";
+import { createLogger } from "../observability/logger.js";
+const log = createLogger("theme");
+let hasWarnedAboutGlassSurfaces = false;
+const SYSTEM_FONT_FAMILY = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+const CORNER_RADIUS_PIXELS = 8;
+const SHADOW_LEVELS = 25;
+const THEME_LOOK = Object.freeze({ standard: "standard", minimal: "minimal" });
+const TOP_BAR = Object.freeze({ band: "band", capsules: "capsules" });
+function glassSettingsOf(glass) {
+  if (!glass) {
+    return false;
+  }
+  const requested = glass === true ? {} : glass;
+  const opacity = requested.opacity ?? GLASS_OPACITY;
+  if (typeof opacity !== "number" || opacity < 0 || opacity > 1) {
+    throw new RangeError(`createToolkitTheme: glass.opacity va de 0 a 1 (llegó ${opacity}).`);
+  }
+  const surfaces = Boolean(requested.surfaces);
+  if (surfaces && !hasWarnedAboutGlassSurfaces) {
+    hasWarnedAboutGlassSurfaces = true;
+    log.warn("glass.surfaces pone vidrio también en el contenido (tarjetas, avisos, tabla): pesa más en equipos modestos y la guía de Apple no lo recomienda («no use Liquid Glass en la capa del contenido»). Úselo en una portada o una demostración, no en pantallas de trabajo.");
+  }
+  return { opacity, surfaces };
+}
+function createToolkitTheme({
+  colorSchemes = { light: { palette: stackcraftLightPalette }, dark: { palette: stackcraftDarkPalette } },
+  colorSchemeSelector = "class",
+  fontFamily = SYSTEM_FONT_FAMILY,
+  glass = false,
+  look = THEME_LOOK.standard,
+  bar = TOP_BAR.capsules,
+  components = {},
+  overrides = {}
+} = {}) {
+  if (!Object.values(TOP_BAR).includes(bar)) {
+    throw new RangeError(`createToolkitTheme: bar es '${TOP_BAR.capsules}' o '${TOP_BAR.band}' (llegó ${bar}).`);
+  }
+  const isMinimal = look === THEME_LOOK.minimal;
+  const glassSettings = isMinimal ? null : glassSettingsOf(glass);
+  const frameworkComponents = isMinimal ? mergeComponents(toolkitComponents(), minimalComponents()) : glassSettings ? mergeComponents(toolkitComponents(), glassComponents({ surfaces: glassSettings.surfaces })) : toolkitComponents();
+  const schemes = isMinimal ? Object.fromEntries(Object.entries(colorSchemes).map(([mode, scheme]) => [mode, {
+    ...scheme,
+    palette: { ...scheme.palette, background: MINIMAL_BACKGROUND[mode] ?? scheme.palette?.background }
+  }])) : colorSchemes;
+  const baseTheme = createTheme({
+    cssVariables: { colorSchemeSelector },
+    colorSchemes: schemes,
+    // el espaciado entre letras (tracking) de la tabla de SF Pro de Apple para cada tamaño (appleTracking.js). MUI
+    // trae uno POSITIVO pensado para Roboto (+0.15 px en el texto, +0.4 px en botones y textos chicos) y con la letra del
+    // sistema se veía la letra separada (lo reportaron: «kerning»); Apple, de 13 a 22 pt, lo cierra
+    typography: {
+      fontFamily,
+      h1: { letterSpacing: trackingOf(96) },
+      h2: { letterSpacing: trackingOf(60) },
+      h3: { letterSpacing: trackingOf(48) },
+      h4: { letterSpacing: trackingOf(34) },
+      h5: { fontWeight: 600, letterSpacing: trackingOf(24) },
+      h6: { fontWeight: 600, letterSpacing: trackingOf(20) },
+      subtitle1: { letterSpacing: trackingOf(16) },
+      subtitle2: { letterSpacing: trackingOf(14) },
+      body1: { fontSize: "1rem", letterSpacing: trackingOf(16) },
+      body2: { fontSize: "0.9375rem", letterSpacing: trackingOf(15) },
+      button: { fontSize: "0.9375rem", textTransform: "none", fontWeight: 500, letterSpacing: trackingOf(15) },
+      caption: { letterSpacing: trackingOf(12) }
+    },
+    transitions: {
+      duration: {
+        shortest: 150,
+        shorter: 180,
+        short: 200,
+        standard: 220,
+        complex: 280,
+        enteringScreen: 220,
+        leavingScreen: 220
+      }
+    },
+    shape: { borderRadius: CORNER_RADIUS_PIXELS },
+    components: mergeComponents(frameworkComponents, components),
+    // sin sombras en el minimalista: lo plano es la idea
+    ...isMinimal && { shadows: Array(SHADOW_LEVELS).fill("none") },
+    toolkit: { glass: glassSettings, look, bar },
+    ...overrides
+  });
+  return responsiveFontSizes(baseTheme);
+}
+export {
+  THEME_LOOK,
+  TOP_BAR,
+  createToolkitTheme
+};
+//# sourceMappingURL=createToolkitTheme.js.map

package/dist/theme/createToolkitTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createToolkitTheme.js","sources":["../../src/theme/createToolkitTheme.js"],"sourcesContent":["// El tema del framework: el estilo de Stackcraft (del tema de walk-ot) con claro y oscuro. Es opcional: ToolkitProvider\n// funciona con cualquier tema de MUI.\n//\n//   const theme = createToolkitTheme();                                  // los colores de Stackcraft\n//   const theme = createToolkitTheme({glass: true});                     // con vidrio líquido en lo que flota\n//   const theme = createToolkitTheme({glass: {opacity: 0.7}});           // con vidrio más transparente (por omisión 0.8)\n//   const theme = createToolkitTheme({glass: {surfaces: true}});         // también las tarjetas del contenido (con advertencia)\n//   const theme = createToolkitTheme({glass: true, bar: TOP_BAR.band});  // la barra de arriba en franja (por omisión, cápsulas)\n//   const theme = createToolkitTheme({colorSchemes: {light: {palette: {primary: {main: '#0B5FFF'}}}, dark: {...}}});\n//\n// Lo que trae, con su porqué:\n//   - variables CSS y los dos modos: ColorSchemeToggle cambia de modo sin volver a pintar, y las gráficas leen sus colores\n//     de las variables (var(--mui-palette-text-primary)); sin ellas su texto se quedaba negro en oscuro.\n//   - colorSchemeSelector 'class': el modo lo elige la persona con el botón (con 'media' solo mandaría el sistema\n//     operativo y el botón no haría nada). Con Next.js va con <InitColorSchemeScript attribute=\"class\" />.\n//   - letra base de 16 px: con menos, el iPhone hace zoom al entrar a un campo. body1 16 px y body2 15 px en el teléfono;\n//     responsiveFontSizes los ajusta por ancho de pantalla.\n//   - transiciones de 220 ms, iguales al abrir y al cerrar: más ágiles que las de Material (300 ms) y sin el desfase de\n//     30 ms entre lo que solo conoce una transición (la barra) y lo que conoce dos (el menú lateral).\n//   - esquinas de 8 px y los ajustes de componentes de toolkitComponents().\n//   - glass: el vidrio líquido en lo que flota y en los controles (glassSurface.js explica dónde y por qué). Queda anotado\n//     en theme.toolkit.glass para que los componentes del framework que flotan (el marco, los avisos) lo sepan sin otra prop.\n//   - components: los ajustes propios del proyecto se SUMAN a los del framework (mergeComponents), no los borran.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {createTheme, responsiveFontSizes} from '@mui/material/styles';\n\nimport {glassComponents} from '@/theme/components/glassComponents.js';\nimport {GLASS_OPACITY} from '@/theme/glassSurface.js';\nimport {mergeComponents} from '@/theme/mergeComponents.js';\nimport {stackcraftDarkPalette, stackcraftLightPalette} from '@/theme/stackcraftPalette.js';\nimport {trackingOf} from '@/theme/appleTracking.js';\nimport {toolkitComponents} from '@/theme/toolkitComponents.js';\nimport {MINIMAL_BACKGROUND, minimalComponents} from '@/theme/components/minimalComponents.js';\nimport {createLogger} from '@/observability/logger.js';\n\nconst log = createLogger('theme');\n// el aviso de las tarjetas de vidrio sale una vez por pestaña: el tema se vuelve a armar cada vez que cambia algo (un\n// configurador de tema lo arma en cada clic) y la consola se llenaba del mismo aviso\nlet hasWarnedAboutGlassSurfaces = false;\n\nconst SYSTEM_FONT_FAMILY = 'system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif';\nconst CORNER_RADIUS_PIXELS = 8;\n// cuántos niveles de sombra trae el tema de MUI (del 0 al 24)\nconst SHADOW_LEVELS = 25;\n\n/** El estilo del tema: el de Stackcraft (con vidrio o sin él) o el minimalista, plano y tonal. */\nexport const THEME_LOOK = Object.freeze({standard: 'standard', minimal: 'minimal'});\n\n/**\n * La barra de arriba, con vidrio y con el minimalista: por omisión como las ventanas de macOS Tahoe, sin franja (el nombre\n * y los botones en cápsulas por grupo; lo eligió el autor al verlas), o la franja de lado a lado. Con vidrio las cápsulas\n * son de vidrio y el contenido pasa por debajo desenfocado; con el minimalista son bloques del tono de las tarjetas sobre\n * el color del fondo (AppLayout). El estilo de Stackcraft sin vidrio se queda con su barra de siempre.\n */\nexport const TOP_BAR = Object.freeze({band: 'band', capsules: 'capsules'});\n\n/**\n * Lo que pidió el proyecto del vidrio, ya revisado: false (sin vidrio) o {opacity, surfaces}.\n *\n * @param {boolean|{opacity?: number, surfaces?: boolean}} glass\n * @returns {false|{opacity: number, surfaces: boolean}}\n */\nfunction glassSettingsOf(glass) {\n    if (!glass) {\n        return false;\n    }\n    const requested = glass === true ? {} : glass;\n    const opacity = requested.opacity ?? GLASS_OPACITY;\n    // un 80 en lugar de 0.8 daría un color inválido y la barra saldría sin fondo, sin ningún aviso\n    if (typeof opacity !== 'number' || opacity < 0 || opacity > 1) {\n        throw new RangeError(`createToolkitTheme: glass.opacity va de 0 a 1 (llegó ${opacity}).`);\n    }\n    const surfaces = Boolean(requested.surfaces);\n    // se permite, pero con advertencia: la guía de Apple pide el contenido sin vidrio y cada tarjeta desenfoca lo de atrás\n    if (surfaces && !hasWarnedAboutGlassSurfaces) {\n        hasWarnedAboutGlassSurfaces = true;\n        log.warn('glass.surfaces pone vidrio también en el contenido (tarjetas, avisos, tabla): pesa más en equipos modestos '\n            + 'y la guía de Apple no lo recomienda («no use Liquid Glass en la capa del contenido»). Úselo en una portada o una '\n            + 'demostración, no en pantallas de trabajo.');\n    }\n    return {opacity, surfaces};\n}\n\n/**\n * @param {object} [options]\n * @param {{light?: object|boolean, dark?: object|boolean}} [options.colorSchemes] los colores de cada modo; por omisión los de\n *     Stackcraft; true: los de MUI tal cual\n * @param {'class'|'data'|'media'|string} [options.colorSchemeSelector] cómo se elige el modo; por omisión 'class'\n * @param {string} [options.fontFamily] por omisión la letra del sistema\n * @param {boolean|{opacity?: number, surfaces?: boolean}} [options.glass] vidrio líquido en lo que flota y en los\n *     controles; por omisión no. Con {opacity} se elige qué tan opaco (0 a 1; por omisión GLASS_OPACITY, 0.6) y con\n *     {surfaces: true} también las tarjetas del contenido (por omisión sólidas, como pide la guía; avisa en consola)\n * @param {'standard'|'minimal'} [options.look] el estilo (THEME_LOOK): el de Stackcraft (por omisión) o el minimalista,\n *     plano y tonal (sin bordes ni sombras: las superficies se separan por su tono; sin vidrio aunque se pida)\n * @param {'capsules'|'band'} [options.bar] la barra de arriba con vidrio o con el minimalista (TOP_BAR): por omisión en\n *     cápsulas; 'band' la franja de lado a lado\n * @param {object} [options.components] ajustes propios de componentes (se suman; en el mismo estilo ganan los del proyecto)\n * @param {object} [options.overrides] cualquier otra cosa de createTheme (breakpoints, spacing…)\n * @returns {object} el tema de MUI\n */\nexport function createToolkitTheme({\n    colorSchemes = {light: {palette: stackcraftLightPalette}, dark: {palette: stackcraftDarkPalette}},\n    colorSchemeSelector = 'class',\n    fontFamily = SYSTEM_FONT_FAMILY,\n    glass = false,\n    look = THEME_LOOK.standard,\n    bar = TOP_BAR.capsules,\n    components = {},\n    overrides = {},\n} = {}) {\n    // un nombre mal escrito dejaría la franja sin avisar: mejor que truene al armar el tema\n    if (!Object.values(TOP_BAR).includes(bar)) {\n        throw new RangeError(`createToolkitTheme: bar es '${TOP_BAR.capsules}' o '${TOP_BAR.band}' (llegó ${bar}).`);\n    }\n    const isMinimal = look === THEME_LOOK.minimal;\n    // el minimalista es sólido: sin vidrio aunque se pida\n    const glassSettings = isMinimal ? null : glassSettingsOf(glass);\n    const frameworkComponents = isMinimal\n        ? mergeComponents(toolkitComponents(), minimalComponents())\n        : (glassSettings ? mergeComponents(toolkitComponents(), glassComponents({surfaces: glassSettings.surfaces})) : toolkitComponents());\n    // el minimalista separa las superficies por su tono: el fondo gris agrupado y la tarjeta un escalón arriba\n    const schemes = isMinimal\n        ? Object.fromEntries(Object.entries(colorSchemes).map(([mode, scheme]) => [mode, {\n            ...scheme, palette: {...scheme.palette, background: MINIMAL_BACKGROUND[mode] ?? scheme.palette?.background},\n        }]))\n        : colorSchemes;\n    const baseTheme = createTheme({\n        cssVariables: {colorSchemeSelector},\n        colorSchemes: schemes,\n        // el espaciado entre letras (tracking) de la tabla de SF Pro de Apple para cada tamaño (appleTracking.js). MUI\n        // trae uno POSITIVO pensado para Roboto (+0.15 px en el texto, +0.4 px en botones y textos chicos) y con la letra del\n        // sistema se veía la letra separada (lo reportaron: «kerning»); Apple, de 13 a 22 pt, lo cierra\n        typography: {\n            fontFamily,\n            h1: {letterSpacing: trackingOf(96)},\n            h2: {letterSpacing: trackingOf(60)},\n            h3: {letterSpacing: trackingOf(48)},\n            h4: {letterSpacing: trackingOf(34)},\n            h5: {fontWeight: 600, letterSpacing: trackingOf(24)},\n            h6: {fontWeight: 600, letterSpacing: trackingOf(20)},\n            subtitle1: {letterSpacing: trackingOf(16)},\n            subtitle2: {letterSpacing: trackingOf(14)},\n            body1: {fontSize: '1rem', letterSpacing: trackingOf(16)},\n            body2: {fontSize: '0.9375rem', letterSpacing: trackingOf(15)},\n            button: {fontSize: '0.9375rem', textTransform: 'none', fontWeight: 500, letterSpacing: trackingOf(15)},\n            caption: {letterSpacing: trackingOf(12)},\n        },\n        transitions: {\n            duration: {\n                shortest: 150,\n                shorter: 180,\n                short: 200,\n                standard: 220,\n                complex: 280,\n                enteringScreen: 220,\n                leavingScreen: 220,\n            },\n        },\n        shape: {borderRadius: CORNER_RADIUS_PIXELS},\n        components: mergeComponents(frameworkComponents, components),\n        // sin sombras en el minimalista: lo plano es la idea\n        ...(isMinimal && {shadows: Array(SHADOW_LEVELS).fill('none')}),\n        toolkit: {glass: glassSettings, look, bar},\n        ...overrides,\n    });\n    return responsiveFontSizes(baseTheme);\n}\n"],"names":[],"mappings":"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"}