/** * style.css — Sistema de diseño. * --------------------------------------------------------------------------- * Implementa `documentation/sistema_de_diseno.md`. El documento manda: * este archivo solo publica lo que el documento define, con los nombres que * el documento usa. Un valor que el CSS necesitaría y el documento no define * no se inventa acá: se deja sin estilo y queda anotado como pendiente. * * NOMENCLATURA (ver doc, Foundations > Nomenclatura de Tokens) * Token / Alias → `--ms-` + nombre exacto (color_main → --ms-color_main) * Variable interna → `--_ms-` + nombre (no es API: ningún proyecto la usa) * Atributo de grupo → `data-ms-{grupo}="{valor}"` (data-ms-mode="dark") * * QUÉ NO TRAE * Los escalones reales de cada Esquema. Son datos del Tema: los escribe * el compilador de Tema (`theme-compiler.js`) a partir del JSON que * exporta el Generador de Temas. * La escala que figura en 8.1 es el resguardo para cuando no hay Tema * cargado: es la escala de ejemplo del documento (Colors > Esquema). * * CAPAS DE CASCADA * Todo el sistema vive en la capa `ms.system`; el Tema, en `ms.theme`, que * siempre le gana. El CSS propio de un proyecto, fuera de capas, les gana a * las dos sin pelear por especificidad. * * ALPHA (doc, Colors > Alpha) * No necesita CSS propio: se escribe con color-mix() en el punto de uso. En un * Componente, el grado lo dicta un Alias (doc, Componentes): ej. * color-mix(in oklab, var(--ms-color_main) var(--ms-opacityRole_overlay), transparent). * * CONTRATO CON EL COMPILADOR DE TEMA (lo que `theme-compiler.js` escribe por Esquema, en la capa ms.theme) * --ms-color_0 … --ms-color_100, --ms-color_focus15, --ms-color_focus60, * --ms-color_neutral y la bandera de Tipo de Esquema (--_ms-color_lightHue). * Alias globales: --ms-typographyFamily_*. * Alias de componente: --ms-buttonRadius, --ms-inputRadius, --ms-cardRadius. * --------------------------------------------------------------------------- */ @layer ms.system, ms.theme, ms.attributes; @layer ms.system { /* ============================================================================= 1. RADIUS ========================================================================= */ :root { --ms-radius_0: 0; --ms-radius_2xs: 2px; --ms-radius_xs: 4px; --ms-radius_s: 8px; --ms-radius_m: 12px; --ms-radius_l: 16px; --ms-radius_xl: 24px; --ms-radius_2xl: 32px; --ms-radius_full: 999px; /* Roles de Radius (doc, Tema > Roles): cada Alias de radio de un Componente apunta a uno */ --ms-radiusRole_action: var(--ms-radius_s); --ms-radiusRole_control: var(--ms-radius_xs); --ms-radiusRole_indicator: var(--ms-radius_full); --ms-radiusRole_container: var(--ms-radius_m); --ms-radiusRole_floating: var(--ms-radius_xs); --ms-radiusRole_media: var(--ms-radius_s); --ms-radiusRole_detail: var(--ms-radius_xs); /* Roles de Stroke */ --ms-strokeRole_divider: var(--ms-stroke_1); --ms-strokeRole_outline: var(--ms-stroke_1); --ms-strokeRole_selection: var(--ms-stroke_2); --ms-strokeRole_indicator: var(--ms-stroke_2); --ms-strokeRole_raised: var(--ms-stroke_0); /* Roles de Estilos de transición, en sus tres partes. Lo accionable no tiene Rol: cada variante de action tiene su Alias (doc, Interactions). */ /* Roles de Tamaño de Icons */ --ms-iconSizeRole_control: var(--ms-iconSize_l); /* Roles de Spacing: el aire entre Componentes y dentro de los contenedores */ --ms-spacingRole_container: var(--ms-spacing_16); --ms-spacingRole_cell: var(--ms-spacing_8); --ms-spacingRole_part: var(--ms-spacing_8); --ms-spacingRole_iconText: var(--ms-spacing_12); --ms-spacingRole_item: var(--ms-spacing_4); --ms-spacingRole_block: var(--ms-spacing_16); --ms-spacingRole_group: var(--ms-spacing_32); --ms-spacingRole_inset: var(--ms-spacing_24); /* Roles de opacidad (doc, Tema > Roles): toda transparencia de un Componente sale de uno. Los de texto no bajan de 80 %: es el mínimo que conserva 4.5:1 en solid. */ --ms-opacityRole_disabled: var(--ms-effectOpacity_30); --ms-opacityRole_overlay: var(--ms-effectOpacity_10); --ms-opacityRole_paragraph: var(--ms-effectOpacity_100); --ms-opacityRole_muted: var(--ms-effectOpacity_80); --ms-opacityRole_placeholder: var(--ms-effectOpacity_80); /* Gráfico atenuado (no es texto ni borde): no baja de 60 %, el mínimo que conserva 3:1 en solid. */ --ms-opacityRole_lowGraphic: var(--ms-effectOpacity_60); /* Velo que tapa el contenido detrás de algo que se despliega encima */ --ms-opacityRole_backdrop: var(--ms-effectOpacity_60); /* Capa entre una imagen y su texto: no baja de 60 %, el mínimo que garantiza 4.5:1 sobre cualquier imagen (doc, Colors > Contraste sobre imagen). */ --ms-opacityRole_image: var(--ms-effectOpacity_60); } /* ============================================================================= 1b. STROKE ========================================================================= */ :root { --ms-stroke_0: 0; --ms-stroke_1: 1px; --ms-stroke_2: 2px; --ms-stroke_3: 3px; --ms-stroke_4: 4px; --ms-stroke_5: 5px; --ms-stroke_6: 6px; --ms-stroke_7: 7px; --ms-stroke_8: 8px; --ms-stroke_9: 9px; --ms-stroke_10: 10px; /* Modificadores: el patrón de la línea, en dos partes: el largo de cada trazo (_dash) y el del espacio entre trazos (_gap). La línea la dibuja el sistema: border-style no deja elegir el largo de los trazos. */ --ms-strokeModifier_solid_dash: var(--ms-spacing_12); --ms-strokeModifier_solid_gap: 0px; --ms-strokeModifier_dashed_dash: var(--ms-spacing_12); --ms-strokeModifier_dashed_gap: var(--ms-spacing_8); --ms-strokeModifier_dotted_dash: var(--ms-spacing_2); --ms-strokeModifier_dotted_gap: var(--ms-spacing_4); } /* ============================================================================= 2. SPACING ========================================================================= */ :root { --ms-spacing_0: 0rem; --ms-spacing_2: 0.125rem; --ms-spacing_4: 0.25rem; --ms-spacing_8: 0.5rem; --ms-spacing_12: 0.75rem; --ms-spacing_16: 1rem; --ms-spacing_20: 1.25rem; --ms-spacing_24: 1.5rem; --ms-spacing_28: 1.75rem; --ms-spacing_32: 2rem; --ms-spacing_36: 2.25rem; --ms-spacing_40: 2.5rem; --ms-spacing_44: 2.75rem; --ms-spacing_48: 3rem; --ms-spacing_56: 3.5rem; --ms-spacing_64: 4rem; --ms-spacing_72: 4.5rem; --ms-spacing_80: 5rem; --ms-spacing_96: 6rem; --ms-spacing_128: 8rem; --ms-spacing_160: 10rem; --ms-spacing_192: 12rem; --ms-spacing_224: 14rem; --ms-spacing_256: 16rem; --ms-spacing_320: 20rem; --ms-spacing_384: 24rem; --ms-spacing_448: 28rem; --ms-spacing_512: 32rem; --ms-spacing_600: 37.5rem; --ms-spacing_640: 40rem; --ms-spacing_768: 48rem; --ms-spacing_800: 50rem; --ms-spacing_960: 60rem; --ms-spacing_1024: 64rem; } /* ============================================================================= 3. TYPOGRAPHY Font family: sin valor. Los cinco Tokens los escribe el compilador con la tipografía real que define el Tema. ========================================================================= */ :root { --ms-typographySize_11: 0.6875rem; --ms-typographySize_12: 0.75rem; --ms-typographySize_14: 0.875rem; --ms-typographySize_16: 1rem; --ms-typographySize_18: 1.125rem; --ms-typographySize_20: 1.25rem; --ms-typographySize_24: 1.5rem; --ms-typographySize_28: 1.75rem; --ms-typographySize_32: 2rem; --ms-typographySize_36: 2.25rem; --ms-typographySize_40: 2.5rem; --ms-typographySize_48: 3rem; --ms-typographySize_56: 3.5rem; --ms-typographySize_64: 4rem; --ms-typographySize_80: 5rem; --ms-typographySize_96: 6rem; --ms-typographyLineHeight_90: 0.9; --ms-typographyLineHeight_100: 1; --ms-typographyLineHeight_120: 1.2; --ms-typographyLineHeight_130: 1.3; --ms-typographyLineHeight_150: 1.5; --ms-typographyLineHeight_170: 1.7; --ms-typographyWeight_100: 100; --ms-typographyWeight_200: 200; --ms-typographyWeight_300: 300; --ms-typographyWeight_400: 400; --ms-typographyWeight_500: 500; --ms-typographyWeight_600: 600; --ms-typographyWeight_700: 700; --ms-typographyWeight_800: 800; --ms-typographyWeight_900: 900; --ms-typographyModifier_italic: italic; /* font-style */ --ms-typographyModifier_underline: underline; /* text-decoration-line */ --ms-typographyModifier_lineThrough: line-through; /* text-decoration-line */ --ms-typographyModifier_uppercase: uppercase; /* text-transform */ --ms-typographyAlign_start: start; --ms-typographyAlign_center: center; --ms-typographyAlign_end: end; } /* Font size por Espacio disponible de la ventana (doc, Typography > Font size): desde typographySize_32, los tamaños grandes bajan en medium y en compact. El nombre del Token es su medida en expanded. Los umbrales repiten layoutSpace_medium y _expanded. */ @media (600px <= width < 960px) { :root { --ms-typographySize_32: 2rem; --ms-typographySize_36: 2.25rem; --ms-typographySize_40: 2.25rem; --ms-typographySize_48: 2.75rem; --ms-typographySize_56: 3rem; --ms-typographySize_64: 3.5rem; --ms-typographySize_80: 4rem; --ms-typographySize_96: 5rem; } } @media (width < 600px) { :root { --ms-typographySize_32: 1.75rem; --ms-typographySize_36: 1.875rem; --ms-typographySize_40: 2rem; --ms-typographySize_48: 2.25rem; --ms-typographySize_56: 2.5rem; --ms-typographySize_64: 2.75rem; --ms-typographySize_80: 3rem; --ms-typographySize_96: 3.5rem; } } /* --- Text Styles: Alias globales, con su combinación de partida. Un Tema puede cambiar cualquiera de sus cuatro partes. --- */ :root { --ms-textStyle_displayL_family: var(--ms-typographyFamily_sans); --ms-textStyle_displayL_size: var(--ms-typographySize_80); --ms-textStyle_displayL_lineHeight: var(--ms-typographyLineHeight_100); --ms-textStyle_displayL_weight: var(--ms-typographyWeight_700); --ms-textStyle_displayM_family: var(--ms-typographyFamily_sans); --ms-textStyle_displayM_size: var(--ms-typographySize_64); --ms-textStyle_displayM_lineHeight: var(--ms-typographyLineHeight_100); --ms-textStyle_displayM_weight: var(--ms-typographyWeight_700); --ms-textStyle_displayS_family: var(--ms-typographyFamily_sans); --ms-textStyle_displayS_size: var(--ms-typographySize_48); --ms-textStyle_displayS_lineHeight: var(--ms-typographyLineHeight_100); --ms-textStyle_displayS_weight: var(--ms-typographyWeight_700); --ms-textStyle_headlineL_family: var(--ms-typographyFamily_sans); --ms-textStyle_headlineL_size: var(--ms-typographySize_40); --ms-textStyle_headlineL_lineHeight: var(--ms-typographyLineHeight_120); --ms-textStyle_headlineL_weight: var(--ms-typographyWeight_700); --ms-textStyle_headlineM_family: var(--ms-typographyFamily_sans); --ms-textStyle_headlineM_size: var(--ms-typographySize_32); --ms-textStyle_headlineM_lineHeight: var(--ms-typographyLineHeight_120); --ms-textStyle_headlineM_weight: var(--ms-typographyWeight_700); --ms-textStyle_headlineS_family: var(--ms-typographyFamily_sans); --ms-textStyle_headlineS_size: var(--ms-typographySize_28); --ms-textStyle_headlineS_lineHeight: var(--ms-typographyLineHeight_120); --ms-textStyle_headlineS_weight: var(--ms-typographyWeight_700); --ms-textStyle_titleL_family: var(--ms-typographyFamily_sans); --ms-textStyle_titleL_size: var(--ms-typographySize_24); --ms-textStyle_titleL_lineHeight: var(--ms-typographyLineHeight_130); --ms-textStyle_titleL_weight: var(--ms-typographyWeight_600); --ms-textStyle_titleM_family: var(--ms-typographyFamily_sans); --ms-textStyle_titleM_size: var(--ms-typographySize_20); --ms-textStyle_titleM_lineHeight: var(--ms-typographyLineHeight_130); --ms-textStyle_titleM_weight: var(--ms-typographyWeight_600); --ms-textStyle_titleS_family: var(--ms-typographyFamily_sans); --ms-textStyle_titleS_size: var(--ms-typographySize_18); --ms-textStyle_titleS_lineHeight: var(--ms-typographyLineHeight_130); --ms-textStyle_titleS_weight: var(--ms-typographyWeight_600); --ms-textStyle_bodyL_family: var(--ms-typographyFamily_sans); --ms-textStyle_bodyL_size: var(--ms-typographySize_18); --ms-textStyle_bodyL_lineHeight: var(--ms-typographyLineHeight_150); --ms-textStyle_bodyL_weight: var(--ms-typographyWeight_400); --ms-textStyle_bodyM_family: var(--ms-typographyFamily_sans); --ms-textStyle_bodyM_size: var(--ms-typographySize_16); --ms-textStyle_bodyM_lineHeight: var(--ms-typographyLineHeight_150); --ms-textStyle_bodyM_weight: var(--ms-typographyWeight_400); --ms-textStyle_bodyS_family: var(--ms-typographyFamily_sans); --ms-textStyle_bodyS_size: var(--ms-typographySize_14); --ms-textStyle_bodyS_lineHeight: var(--ms-typographyLineHeight_150); --ms-textStyle_bodyS_weight: var(--ms-typographyWeight_400); --ms-textStyle_labelL_family: var(--ms-typographyFamily_sans); --ms-textStyle_labelL_size: var(--ms-typographySize_16); --ms-textStyle_labelL_lineHeight: var(--ms-typographyLineHeight_120); --ms-textStyle_labelL_weight: var(--ms-typographyWeight_600); --ms-textStyle_labelM_family: var(--ms-typographyFamily_sans); --ms-textStyle_labelM_size: var(--ms-typographySize_14); --ms-textStyle_labelM_lineHeight: var(--ms-typographyLineHeight_120); --ms-textStyle_labelM_weight: var(--ms-typographyWeight_600); --ms-textStyle_labelS_family: var(--ms-typographyFamily_sans); --ms-textStyle_labelS_size: var(--ms-typographySize_12); --ms-textStyle_labelS_lineHeight: var(--ms-typographyLineHeight_120); --ms-textStyle_labelS_weight: var(--ms-typographyWeight_600); --ms-textStyle_code_family: var(--ms-typographyFamily_mono); --ms-textStyle_code_size: var(--ms-typographySize_14); --ms-textStyle_code_lineHeight: var(--ms-typographyLineHeight_150); --ms-textStyle_code_weight: var(--ms-typographyWeight_400); } /* Etiquetas HTML: el Text Style de resguardo de cada una, sin especificidad, para que cualquier Componente lo reemplace con su propio Alias */ :where(body) { font-family: var(--ms-textStyle_bodyM_family); font-size: var(--ms-textStyle_bodyM_size); line-height: var(--ms-textStyle_bodyM_lineHeight); font-weight: var(--ms-textStyle_bodyM_weight); } :where(h1) { font-family: var(--ms-textStyle_headlineL_family); font-size: var(--ms-textStyle_headlineL_size); line-height: var(--ms-textStyle_headlineL_lineHeight); font-weight: var(--ms-textStyle_headlineL_weight); } :where(h2) { font-family: var(--ms-textStyle_headlineM_family); font-size: var(--ms-textStyle_headlineM_size); line-height: var(--ms-textStyle_headlineM_lineHeight); font-weight: var(--ms-textStyle_headlineM_weight); } :where(h3) { font-family: var(--ms-textStyle_titleL_family); font-size: var(--ms-textStyle_titleL_size); line-height: var(--ms-textStyle_titleL_lineHeight); font-weight: var(--ms-textStyle_titleL_weight); } :where(h4) { font-family: var(--ms-textStyle_titleM_family); font-size: var(--ms-textStyle_titleM_size); line-height: var(--ms-textStyle_titleM_lineHeight); font-weight: var(--ms-textStyle_titleM_weight); } :where(h5, h6) { font-family: var(--ms-textStyle_titleS_family); font-size: var(--ms-textStyle_titleS_size); line-height: var(--ms-textStyle_titleS_lineHeight); font-weight: var(--ms-textStyle_titleS_weight); } :where(small, figcaption) { font-family: var(--ms-textStyle_bodyS_family); font-size: var(--ms-textStyle_bodyS_size); line-height: var(--ms-textStyle_bodyS_lineHeight); font-weight: var(--ms-textStyle_bodyS_weight); } :where(code, kbd, samp, pre) { font-family: var(--ms-textStyle_code_family); font-size: var(--ms-textStyle_code_size); line-height: var(--ms-textStyle_code_lineHeight); font-weight: var(--ms-textStyle_code_weight); } :where(th, label, legend, caption) { font-family: var(--ms-textStyle_labelM_family); font-size: var(--ms-textStyle_labelM_size); line-height: var(--ms-textStyle_labelM_lineHeight); font-weight: var(--ms-textStyle_labelM_weight); } :where(code, kbd, samp) { font-size: inherit; line-height: inherit; } /* en línea, siguen al texto que las rodea */ :where(a) { text-decoration-line: var(--ms-typographyModifier_underline); } :where(em, i) { font-style: var(--ms-typographyModifier_italic); } :where(del, s) { text-decoration-line: var(--ms-typographyModifier_lineThrough); } :where(strong, b) { font-weight: var(--ms-typographyWeight_700); } /* ============================================================================= 4. SHAPE — Aspect ratio, Polygon y Clip path ========================================================================= */ :root { --ms-shapeAspectRatio_auto: auto; --ms-shapeAspectRatio_1x1: 1 / 1; --ms-shapeAspectRatio_16x9: 16 / 9; --ms-shapeAspectRatio_4x3: 4 / 3; --ms-shapeAspectRatio_3x4: 3 / 4; --ms-shapeAspectRatio_21x13: 21 / 13; --ms-shapeAspectRatio_21x9: 21 / 9; --ms-shapeAspectRatio_9x16: 9 / 16; --ms-shapeAspectRatio_13x21: 13 / 21; --ms-shapePolygon_triangle: polygon(50% 0%, 100% 100%, 0% 100%); --ms-shapePolygon_rhombus: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); --ms-shapePolygon_pentagon: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); --ms-shapePolygon_hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); --ms-shapeClip_star: polygon(50% 4.775%, 61.226% 39.324%, 97.553% 39.324%, 68.164% 60.676%, 79.389% 95.225%, 50% 73.873%, 20.611% 95.225%, 31.836% 60.676%, 2.447% 39.324%, 38.774% 39.324%); --ms-shapeClip_parallelogram: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); --ms-shapeClip_trapezoid: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); --ms-shapeClip_chevron: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); --ms-shapeClip_arrow: polygon(0% 25%, 60% 25%, 60% 0%, 100% 50%, 60% 100%, 60% 75%, 0% 75%); --ms-shapeClip_cross: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%); --ms-shapeClip_heart: shape(from 50% 100%, curve to 0% 35% with 12% 78% / 0% 58%, curve to 50% 18% with 0% 5% / 38% 0%, curve to 100% 35% with 62% 0% / 100% 5%, curve to 50% 100% with 100% 58% / 88% 78%, close); } /* Silueta elegida con data-ms-shape: un Polygon o un Clip path. Recorta el elemento (y su anillo de foco y su sombra). Sin shape(), heart no recorta. */ [data-ms-shape="triangle"] { clip-path: var(--ms-shapePolygon_triangle); } [data-ms-shape="rhombus"] { clip-path: var(--ms-shapePolygon_rhombus); } [data-ms-shape="pentagon"] { clip-path: var(--ms-shapePolygon_pentagon); } [data-ms-shape="hexagon"] { clip-path: var(--ms-shapePolygon_hexagon); } [data-ms-shape="star"] { clip-path: var(--ms-shapeClip_star); } [data-ms-shape="parallelogram"] { clip-path: var(--ms-shapeClip_parallelogram); } [data-ms-shape="trapezoid"] { clip-path: var(--ms-shapeClip_trapezoid); } [data-ms-shape="chevron"] { clip-path: var(--ms-shapeClip_chevron); } [data-ms-shape="arrow"] { clip-path: var(--ms-shapeClip_arrow); } [data-ms-shape="cross"] { clip-path: var(--ms-shapeClip_cross); } [data-ms-shape="heart"] { clip-path: var(--ms-shapeClip_heart); } /* ============================================================================= 5. MOTIONS — Bezier, Duración y Estilos de transición. Animations: el documento las nombra y describe pero no define sus fotogramas, duración ni curva, así que todavía no tienen @keyframes. ========================================================================= */ :root { /* Animations (doc, Motions > Animations): el Token es la animación entera; sus fotogramas, el @keyframes del mismo nombre. */ --ms-motionAnimation_pulse: motionAnimation_pulse calc(var(--ms-motionDuration_slowest) * 2) var(--ms-motionBezier_easeInOut) infinite; --ms-motionBezier_ease: ease; --ms-motionBezier_easeIn: ease-in; --ms-motionBezier_easeOut: ease-out; --ms-motionBezier_easeInOut: ease-in-out; --ms-motionBezier_linear: linear; --ms-motionDuration_fastest: 0.2s; --ms-motionDuration_fast: 0.3s; --ms-motionDuration_regular: 0.4s; --ms-motionDuration_slow: 0.5s; --ms-motionDuration_slowest: 0.7s; /* Espera: cuánto aguarda el sistema antes de actuar solo. No es movimiento: no cambia con el movimiento reducido. */ --ms-motionWaiting_shortest: 0.6s; --ms-motionWaiting_short: 1.5s; --ms-motionWaiting_regular: 3s; --ms-motionWaiting_long: 6s; --ms-motionWaiting_longest: 10s; /* Estilos de transición: qué hace cada uno en hover, selected y pressed (doc, Motions). mantle no publica valores: su capa es color_mantle en hover y color_surface en selected y pressed, y un color se resuelve en el elemento, no en :root. */ --ms-motionTransition_none_hover: none; --ms-motionTransition_none_selected: none; --ms-motionTransition_none_pressed: none; --ms-motionTransition_darkness_hover: brightness(85%); --ms-motionTransition_darkness_selected: brightness(80%); --ms-motionTransition_darkness_pressed: brightness(70%); /* elevation: la forma de la sombra en cada estado; el color lo pone el elemento */ --ms-motionTransition_elevation_hover_near: var(--ms-effectShadow_4_near); --ms-motionTransition_elevation_hover_far: var(--ms-effectShadow_4_far); --ms-motionTransition_elevation_selected_near: var(--ms-effectShadow_4_near); --ms-motionTransition_elevation_selected_far: var(--ms-effectShadow_4_far); --ms-motionTransition_elevation_pressed_near: var(--ms-effectShadow_2_near); --ms-motionTransition_elevation_pressed_far: var(--ms-effectShadow_2_far); } @keyframes motionAnimation_pulse { 50% { opacity: var(--ms-effectOpacity_40); } } /* ============================================================================= 6. LAYOUTS (doc, Foundations > Layouts) Una Pantalla se mide contra la ventana (@media); una Sección y lo que tiene adentro, contra su contenedor (@container). Los umbrales repiten el valor de layoutSpace_* porque CSS no admite var() en la condición de @media ni de @container. ========================================================================= */ :root { --ms-layoutWidth_content: 800px; --ms-layoutWidth_wide: 1400px; --ms-layoutWidth_full: none; --ms-layoutSpace_compact: 0px; --ms-layoutSpace_medium: 600px; --ms-layoutSpace_expanded: 960px; /* Alias globales de Layouts */ --ms-layoutGap: var(--ms-spacing_24); --ms-layoutSidebarWidth: var(--ms-spacing_256); --ms-layoutRailWidth: var(--ms-spacing_80); --ms-layoutSidebarEndWidth: var(--ms-spacing_320); --ms-layoutGutter_compact: var(--ms-spacing_16); --ms-layoutGutter_medium: var(--ms-spacing_24); --ms-layoutGutter_expanded: var(--ms-spacing_32); --ms-layoutSectionPaddingY: var(--ms-spacing_96); --ms-layoutGridMin: var(--ms-spacing_224); /* Obsoletos: Dirección pasó a Flujos */ --ms-layoutDirection_horizontal: row; --ms-layoutDirection_vertical: column; } /* --- Secciones: Ancho máximo, centradas en su Región, con el relleno lateral del Espacio disponible de la Región (layoutGutter_*) y el de arriba y abajo de layoutSectionPaddingY. Son contenedor de referencia para lo que tienen adentro. Los atributos de Relleno reemplazan ese relleno, lado por lado. --- */ [data-ms-layout-width] { container-type: inline-size; box-sizing: border-box; inline-size: 100%; --_ms-sectionGutter: var(--ms-layoutGutter_compact); padding-block-start: var(--_ms-padBlockStart, var(--_ms-padBlock, var(--_ms-pad, var(--ms-layoutSectionPaddingY)))); padding-block-end: var(--_ms-padBlockEnd, var(--_ms-padBlock, var(--_ms-pad, var(--ms-layoutSectionPaddingY)))); padding-inline-start: var(--_ms-padInlineStart, var(--_ms-padInline, var(--_ms-pad, var(--_ms-sectionGutter)))); padding-inline-end: var(--_ms-padInlineEnd, var(--_ms-padInline, var(--_ms-pad, var(--_ms-sectionGutter)))); } [data-ms-layout-width="content"] { max-width: var(--ms-layoutWidth_content); margin-inline: auto; } [data-ms-layout-width="wide"] { max-width: var(--ms-layoutWidth_wide); margin-inline: auto; } [data-ms-layout-width="full"] { max-width: var(--ms-layoutWidth_full); } @container (min-width: 600px) { [data-ms-layout-width] { --_ms-sectionGutter: var(--ms-layoutGutter_medium); } } @container (min-width: 960px) { [data-ms-layout-width] { --_ms-sectionGutter: var(--ms-layoutGutter_expanded); } } /* --- Disposiciones: apiladas; columnas según el Espacio disponible de su Sección --- */ /* La Card usa data-ms-layout para sus propias Disposiciones (Componentes > Card) */ [data-ms-layout]:where(:not(.ms-card)) { display: flex; flex-direction: column; gap: var(--ms-layoutGap); } [data-ms-layout]:where(:not(.ms-card)) > * { min-inline-size: 0; } [data-ms-layout="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--ms-layoutGridMin), 100%), 1fr)); } @container (min-width: 600px) { :is([data-ms-layout="twoEqual"], [data-ms-layout="four"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- Columnas (doc, Layouts > Columnas): una grilla con data-ms-layout-columns pide un máximo de columnas. El script de los Componentes calcula cuántas entran y de qué ancho, respetando el rango de sus hijos (data-ms-min-width, data-ms-max-width), y publica --_ms-gridColumns y --_ms-gridTrack. Sin script, las columnas pedidas, iguales. --- */ [data-ms-layout="grid"][data-ms-layout-columns] { grid-template-columns: repeat(var(--_ms-gridColumns, var(--_ms-gridWanted, 1)), var(--_ms-gridTrack, minmax(0, 1fr))); } [data-ms-layout-columns="1"] { --_ms-gridWanted: 1; } [data-ms-layout-columns="2"] { --_ms-gridWanted: 2; } [data-ms-layout-columns="3"] { --_ms-gridWanted: 3; } [data-ms-layout-columns="4"] { --_ms-gridWanted: 4; } [data-ms-layout-columns="5"] { --_ms-gridWanted: 5; } [data-ms-layout-columns="6"] { --_ms-gridWanted: 6; } [data-ms-layout-columns="7"] { --_ms-gridWanted: 7; } [data-ms-layout-columns="8"] { --_ms-gridWanted: 8; } [data-ms-layout-columns="9"] { --_ms-gridWanted: 9; } [data-ms-layout-columns="10"] { --_ms-gridWanted: 10; } [data-ms-layout-columns="11"] { --_ms-gridWanted: 11; } [data-ms-layout-columns="12"] { --_ms-gridWanted: 12; } @container (min-width: 960px) { [data-ms-layout="twoAsymmetric"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } [data-ms-layout="twoThirds"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } [data-ms-layout="three"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-ms-layout="four"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- Orden: apiladas, se invierte la columna; en columnas, el orden visual (el de lectura queda como se cargó) --- */ [data-ms-layout][data-ms-order="reverse"] { flex-direction: column-reverse; } [data-ms-layout][data-ms-order="reverse"]:dir(ltr) { direction: rtl; } [data-ms-layout][data-ms-order="reverse"]:dir(ltr) > * { direction: ltr; } [data-ms-layout][data-ms-order="reverse"]:dir(rtl) { direction: ltr; } [data-ms-layout][data-ms-order="reverse"]:dir(rtl) > * { direction: rtl; } /* --- Flujos: cómo se acomodan los elementos de un bloque --- */ [data-ms-layout-flow] { display: flex; } [data-ms-layout-flow="stack"] { flex-direction: column; } [data-ms-layout-flow="row"] { flex-direction: row; } [data-ms-layout-flow="cluster"] { flex-direction: row; flex-wrap: wrap; align-items: center; } [data-ms-layout-flow="switcher"] { flex-direction: row; flex-wrap: wrap; } /* En fila mientras el bloque mide al menos layoutSpace_medium; si no, cada elemento ocupa una línea */ [data-ms-layout-flow="switcher"] > * { flex-grow: 1; flex-basis: calc((var(--ms-layoutSpace_medium) - 100%) * 999); min-inline-size: 0; } [data-ms-layout-flow="reel"] { flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--ms-color_content) var(--ms-opacityRole_lowGraphic), transparent) transparent; } [data-ms-layout-flow="reel"] > * { flex: none; } [data-ms-layout-flow="center"] { flex-direction: column; box-sizing: content-box; max-inline-size: var(--ms-layoutWidth_content); margin-inline: auto; } [data-ms-layout-flow="cover"] { flex-direction: column; justify-content: center; min-block-size: 100dvh; box-sizing: border-box; } [data-ms-layout-flow="cover"]:has(> [data-ms-slot="center"]) { justify-content: flex-start; } [data-ms-layout-flow="cover"] > [data-ms-slot="center"] { margin-block: auto; } /* --- Alineación: data-ms-align en el eje transversal y data-ms-justify en el principal, para todos los hijos; -self, para un solo hijo --- */ [data-ms-align~="start"] { align-items: flex-start; } [data-ms-align~="center"] { align-items: center; } [data-ms-align~="end"] { align-items: flex-end; } [data-ms-align~="stretch"] { align-items: stretch; } /* Obsoleto: between pasó a data-ms-justify; se quita en la próxima versión menor */ [data-ms-align~="between"] { justify-content: space-between; } [data-ms-justify="start"] { justify-content: flex-start; } [data-ms-justify="center"] { justify-content: center; } [data-ms-justify="end"] { justify-content: flex-end; } [data-ms-justify="between"] { justify-content: space-between; } /* En una Disposición, cada bloque se ubica en el ancho de su columna (o de la Sección, apiladas). Sin especificidad, para que data-ms-justify-self del bloque le gane. */ :where([data-ms-layout]:not([data-ms-layout-columns])[data-ms-justify="start"]) > * { margin-inline-end: auto; } :where([data-ms-layout]:not([data-ms-layout-columns])[data-ms-justify="center"]) > * { margin-inline: auto; } :where([data-ms-layout]:not([data-ms-layout-columns])[data-ms-justify="end"]) > * { margin-inline-start: auto; } [data-ms-align-self="start"] { align-self: flex-start; } [data-ms-align-self="center"] { align-self: center; } [data-ms-align-self="end"] { align-self: flex-end; } [data-ms-align-self="stretch"] { align-self: stretch; } /* En el eje principal, un elemento se ubica con márgenes automáticos: en una fila toman el espacio libre de la línea; en una columna, el alto libre del bloque; en una Disposición, el ancho de su columna. */ :is([data-ms-layout-flow="row"], [data-ms-layout-flow="cluster"], [data-ms-layout-flow="switcher"], [data-ms-layout-flow="reel"], [data-ms-layout]) > [data-ms-justify-self="start"] { margin-inline: 0 auto; } :is([data-ms-layout-flow="row"], [data-ms-layout-flow="cluster"], [data-ms-layout-flow="switcher"], [data-ms-layout-flow="reel"], [data-ms-layout]) > [data-ms-justify-self="center"] { margin-inline: auto; } :is([data-ms-layout-flow="row"], [data-ms-layout-flow="cluster"], [data-ms-layout-flow="switcher"], [data-ms-layout-flow="reel"], [data-ms-layout]) > [data-ms-justify-self="end"] { margin-inline: auto 0; } :is([data-ms-layout-flow="stack"], [data-ms-layout-flow="center"], [data-ms-layout-flow="cover"]) > [data-ms-justify-self="start"] { margin-block: 0 auto; } :is([data-ms-layout-flow="stack"], [data-ms-layout-flow="center"], [data-ms-layout-flow="cover"]) > [data-ms-justify-self="center"] { margin-block: auto; } :is([data-ms-layout-flow="stack"], [data-ms-layout-flow="center"], [data-ms-layout-flow="cover"]) > [data-ms-justify-self="end"] { margin-block: auto 0; } /* --- Separación: layoutGap por defecto en toda Disposición; data-ms-gap elige un Token de Spacing --- */ [data-ms-layout]:where(:not(.ms-card)) { gap: var(--ms-layoutGap); } [data-ms-gap="0"] { gap: var(--ms-spacing_0); } [data-ms-gap="2"] { gap: var(--ms-spacing_2); } [data-ms-gap="4"] { gap: var(--ms-spacing_4); } [data-ms-gap="8"] { gap: var(--ms-spacing_8); } [data-ms-gap="12"] { gap: var(--ms-spacing_12); } [data-ms-gap="16"] { gap: var(--ms-spacing_16); } [data-ms-gap="20"] { gap: var(--ms-spacing_20); } [data-ms-gap="24"] { gap: var(--ms-spacing_24); } [data-ms-gap="28"] { gap: var(--ms-spacing_28); } [data-ms-gap="32"] { gap: var(--ms-spacing_32); } [data-ms-gap="36"] { gap: var(--ms-spacing_36); } [data-ms-gap="40"] { gap: var(--ms-spacing_40); } [data-ms-gap="44"] { gap: var(--ms-spacing_44); } [data-ms-gap="48"] { gap: var(--ms-spacing_48); } [data-ms-gap="56"] { gap: var(--ms-spacing_56); } [data-ms-gap="64"] { gap: var(--ms-spacing_64); } [data-ms-gap="72"] { gap: var(--ms-spacing_72); } [data-ms-gap="80"] { gap: var(--ms-spacing_80); } [data-ms-gap="96"] { gap: var(--ms-spacing_96); } [data-ms-gap="128"] { gap: var(--ms-spacing_128); } [data-ms-gap="160"] { gap: var(--ms-spacing_160); } [data-ms-gap="192"] { gap: var(--ms-spacing_192); } [data-ms-gap="224"] { gap: var(--ms-spacing_224); } [data-ms-gap="256"] { gap: var(--ms-spacing_256); } [data-ms-gap="320"] { gap: var(--ms-spacing_320); } [data-ms-gap="384"] { gap: var(--ms-spacing_384); } [data-ms-gap="448"] { gap: var(--ms-spacing_448); } [data-ms-gap="512"] { gap: var(--ms-spacing_512); } [data-ms-gap="600"] { gap: var(--ms-spacing_600); } [data-ms-gap="640"] { gap: var(--ms-spacing_640); } [data-ms-gap="768"] { gap: var(--ms-spacing_768); } [data-ms-gap="800"] { gap: var(--ms-spacing_800); } [data-ms-gap="960"] { gap: var(--ms-spacing_960); } [data-ms-gap="1024"] { gap: var(--ms-spacing_1024); } /* --- Relleno: la página no tiene relleno propio; cada contenedor lo elige con un Token de Spacing. data-ms-padding rellena los cuatro lados; -block e -inline, un eje; -block-start, -block-end, -inline-start e -inline-end, un lado. El lado le gana al eje y el eje a los cuatro lados, sin importar el orden de las reglas: cada atributo guarda su valor en una variable propia (registrada sin herencia, al final del archivo) y cada lado la busca del lado al eje y del eje a los cuatro. --- */ body { margin: 0; } [data-ms-padding] { padding-block-start: var(--_ms-padBlockStart, var(--_ms-padBlock, var(--_ms-pad))); padding-block-end: var(--_ms-padBlockEnd, var(--_ms-padBlock, var(--_ms-pad))); padding-inline-start: var(--_ms-padInlineStart, var(--_ms-padInline, var(--_ms-pad))); padding-inline-end: var(--_ms-padInlineEnd, var(--_ms-padInline, var(--_ms-pad))); } [data-ms-padding-block] { padding-block-start: var(--_ms-padBlockStart, var(--_ms-padBlock, var(--_ms-pad))); padding-block-end: var(--_ms-padBlockEnd, var(--_ms-padBlock, var(--_ms-pad))); } [data-ms-padding-inline] { padding-inline-start: var(--_ms-padInlineStart, var(--_ms-padInline, var(--_ms-pad))); padding-inline-end: var(--_ms-padInlineEnd, var(--_ms-padInline, var(--_ms-pad))); } [data-ms-padding-block-start] { padding-block-start: var(--_ms-padBlockStart, var(--_ms-padBlock, var(--_ms-pad))); } [data-ms-padding-block-end] { padding-block-end: var(--_ms-padBlockEnd, var(--_ms-padBlock, var(--_ms-pad))); } [data-ms-padding-inline-start] { padding-inline-start: var(--_ms-padInlineStart, var(--_ms-padInline, var(--_ms-pad))); } [data-ms-padding-inline-end] { padding-inline-end: var(--_ms-padInlineEnd, var(--_ms-padInline, var(--_ms-pad))); } [data-ms-padding="0"] { --_ms-pad: var(--ms-spacing_0); } [data-ms-padding="2"] { --_ms-pad: var(--ms-spacing_2); } [data-ms-padding="4"] { --_ms-pad: var(--ms-spacing_4); } [data-ms-padding="8"] { --_ms-pad: var(--ms-spacing_8); } [data-ms-padding="12"] { --_ms-pad: var(--ms-spacing_12); } [data-ms-padding="16"] { --_ms-pad: var(--ms-spacing_16); } [data-ms-padding="20"] { --_ms-pad: var(--ms-spacing_20); } [data-ms-padding="24"] { --_ms-pad: var(--ms-spacing_24); } [data-ms-padding="28"] { --_ms-pad: var(--ms-spacing_28); } [data-ms-padding="32"] { --_ms-pad: var(--ms-spacing_32); } [data-ms-padding="36"] { --_ms-pad: var(--ms-spacing_36); } [data-ms-padding="40"] { --_ms-pad: var(--ms-spacing_40); } [data-ms-padding="44"] { --_ms-pad: var(--ms-spacing_44); } [data-ms-padding="48"] { --_ms-pad: var(--ms-spacing_48); } [data-ms-padding="56"] { --_ms-pad: var(--ms-spacing_56); } [data-ms-padding="64"] { --_ms-pad: var(--ms-spacing_64); } [data-ms-padding="72"] { --_ms-pad: var(--ms-spacing_72); } [data-ms-padding="80"] { --_ms-pad: var(--ms-spacing_80); } [data-ms-padding="96"] { --_ms-pad: var(--ms-spacing_96); } [data-ms-padding="128"] { --_ms-pad: var(--ms-spacing_128); } [data-ms-padding="160"] { --_ms-pad: var(--ms-spacing_160); } [data-ms-padding="192"] { --_ms-pad: var(--ms-spacing_192); } [data-ms-padding="224"] { --_ms-pad: var(--ms-spacing_224); } [data-ms-padding="256"] { --_ms-pad: var(--ms-spacing_256); } [data-ms-padding="320"] { --_ms-pad: var(--ms-spacing_320); } [data-ms-padding="384"] { --_ms-pad: var(--ms-spacing_384); } [data-ms-padding="448"] { --_ms-pad: var(--ms-spacing_448); } [data-ms-padding="512"] { --_ms-pad: var(--ms-spacing_512); } [data-ms-padding="600"] { --_ms-pad: var(--ms-spacing_600); } [data-ms-padding="640"] { --_ms-pad: var(--ms-spacing_640); } [data-ms-padding="768"] { --_ms-pad: var(--ms-spacing_768); } [data-ms-padding="800"] { --_ms-pad: var(--ms-spacing_800); } [data-ms-padding="960"] { --_ms-pad: var(--ms-spacing_960); } [data-ms-padding="1024"] { --_ms-pad: var(--ms-spacing_1024); } [data-ms-padding-block="0"] { --_ms-padBlock: var(--ms-spacing_0); } [data-ms-padding-block="2"] { --_ms-padBlock: var(--ms-spacing_2); } [data-ms-padding-block="4"] { --_ms-padBlock: var(--ms-spacing_4); } [data-ms-padding-block="8"] { --_ms-padBlock: var(--ms-spacing_8); } [data-ms-padding-block="12"] { --_ms-padBlock: var(--ms-spacing_12); } [data-ms-padding-block="16"] { --_ms-padBlock: var(--ms-spacing_16); } [data-ms-padding-block="20"] { --_ms-padBlock: var(--ms-spacing_20); } [data-ms-padding-block="24"] { --_ms-padBlock: var(--ms-spacing_24); } [data-ms-padding-block="28"] { --_ms-padBlock: var(--ms-spacing_28); } [data-ms-padding-block="32"] { --_ms-padBlock: var(--ms-spacing_32); } [data-ms-padding-block="36"] { --_ms-padBlock: var(--ms-spacing_36); } [data-ms-padding-block="40"] { --_ms-padBlock: var(--ms-spacing_40); } [data-ms-padding-block="44"] { --_ms-padBlock: var(--ms-spacing_44); } [data-ms-padding-block="48"] { --_ms-padBlock: var(--ms-spacing_48); } [data-ms-padding-block="56"] { --_ms-padBlock: var(--ms-spacing_56); } [data-ms-padding-block="64"] { --_ms-padBlock: var(--ms-spacing_64); } [data-ms-padding-block="72"] { --_ms-padBlock: var(--ms-spacing_72); } [data-ms-padding-block="80"] { --_ms-padBlock: var(--ms-spacing_80); } [data-ms-padding-block="96"] { --_ms-padBlock: var(--ms-spacing_96); } [data-ms-padding-block="128"] { --_ms-padBlock: var(--ms-spacing_128); } [data-ms-padding-block="160"] { --_ms-padBlock: var(--ms-spacing_160); } [data-ms-padding-block="192"] { --_ms-padBlock: var(--ms-spacing_192); } [data-ms-padding-block="224"] { --_ms-padBlock: var(--ms-spacing_224); } [data-ms-padding-block="256"] { --_ms-padBlock: var(--ms-spacing_256); } [data-ms-padding-block="320"] { --_ms-padBlock: var(--ms-spacing_320); } [data-ms-padding-block="384"] { --_ms-padBlock: var(--ms-spacing_384); } [data-ms-padding-block="448"] { --_ms-padBlock: var(--ms-spacing_448); } [data-ms-padding-block="512"] { --_ms-padBlock: var(--ms-spacing_512); } [data-ms-padding-block="600"] { --_ms-padBlock: var(--ms-spacing_600); } [data-ms-padding-block="640"] { --_ms-padBlock: var(--ms-spacing_640); } [data-ms-padding-block="768"] { --_ms-padBlock: var(--ms-spacing_768); } [data-ms-padding-block="800"] { --_ms-padBlock: var(--ms-spacing_800); } [data-ms-padding-block="960"] { --_ms-padBlock: var(--ms-spacing_960); } [data-ms-padding-block="1024"] { --_ms-padBlock: var(--ms-spacing_1024); } [data-ms-padding-inline="0"] { --_ms-padInline: var(--ms-spacing_0); } [data-ms-padding-inline="2"] { --_ms-padInline: var(--ms-spacing_2); } [data-ms-padding-inline="4"] { --_ms-padInline: var(--ms-spacing_4); } [data-ms-padding-inline="8"] { --_ms-padInline: var(--ms-spacing_8); } [data-ms-padding-inline="12"] { --_ms-padInline: var(--ms-spacing_12); } [data-ms-padding-inline="16"] { --_ms-padInline: var(--ms-spacing_16); } [data-ms-padding-inline="20"] { --_ms-padInline: var(--ms-spacing_20); } [data-ms-padding-inline="24"] { --_ms-padInline: var(--ms-spacing_24); } [data-ms-padding-inline="28"] { --_ms-padInline: var(--ms-spacing_28); } [data-ms-padding-inline="32"] { --_ms-padInline: var(--ms-spacing_32); } [data-ms-padding-inline="36"] { --_ms-padInline: var(--ms-spacing_36); } [data-ms-padding-inline="40"] { --_ms-padInline: var(--ms-spacing_40); } [data-ms-padding-inline="44"] { --_ms-padInline: var(--ms-spacing_44); } [data-ms-padding-inline="48"] { --_ms-padInline: var(--ms-spacing_48); } [data-ms-padding-inline="56"] { --_ms-padInline: var(--ms-spacing_56); } [data-ms-padding-inline="64"] { --_ms-padInline: var(--ms-spacing_64); } [data-ms-padding-inline="72"] { --_ms-padInline: var(--ms-spacing_72); } [data-ms-padding-inline="80"] { --_ms-padInline: var(--ms-spacing_80); } [data-ms-padding-inline="96"] { --_ms-padInline: var(--ms-spacing_96); } [data-ms-padding-inline="128"] { --_ms-padInline: var(--ms-spacing_128); } [data-ms-padding-inline="160"] { --_ms-padInline: var(--ms-spacing_160); } [data-ms-padding-inline="192"] { --_ms-padInline: var(--ms-spacing_192); } [data-ms-padding-inline="224"] { --_ms-padInline: var(--ms-spacing_224); } [data-ms-padding-inline="256"] { --_ms-padInline: var(--ms-spacing_256); } [data-ms-padding-inline="320"] { --_ms-padInline: var(--ms-spacing_320); } [data-ms-padding-inline="384"] { --_ms-padInline: var(--ms-spacing_384); } [data-ms-padding-inline="448"] { --_ms-padInline: var(--ms-spacing_448); } [data-ms-padding-inline="512"] { --_ms-padInline: var(--ms-spacing_512); } [data-ms-padding-inline="600"] { --_ms-padInline: var(--ms-spacing_600); } [data-ms-padding-inline="640"] { --_ms-padInline: var(--ms-spacing_640); } [data-ms-padding-inline="768"] { --_ms-padInline: var(--ms-spacing_768); } [data-ms-padding-inline="800"] { --_ms-padInline: var(--ms-spacing_800); } [data-ms-padding-inline="960"] { --_ms-padInline: var(--ms-spacing_960); } [data-ms-padding-inline="1024"] { --_ms-padInline: var(--ms-spacing_1024); } [data-ms-padding-block-start="0"] { --_ms-padBlockStart: var(--ms-spacing_0); } [data-ms-padding-block-start="2"] { --_ms-padBlockStart: var(--ms-spacing_2); } [data-ms-padding-block-start="4"] { --_ms-padBlockStart: var(--ms-spacing_4); } [data-ms-padding-block-start="8"] { --_ms-padBlockStart: var(--ms-spacing_8); } [data-ms-padding-block-start="12"] { --_ms-padBlockStart: var(--ms-spacing_12); } [data-ms-padding-block-start="16"] { --_ms-padBlockStart: var(--ms-spacing_16); } [data-ms-padding-block-start="20"] { --_ms-padBlockStart: var(--ms-spacing_20); } [data-ms-padding-block-start="24"] { --_ms-padBlockStart: var(--ms-spacing_24); } [data-ms-padding-block-start="28"] { --_ms-padBlockStart: var(--ms-spacing_28); } [data-ms-padding-block-start="32"] { --_ms-padBlockStart: var(--ms-spacing_32); } [data-ms-padding-block-start="36"] { --_ms-padBlockStart: var(--ms-spacing_36); } [data-ms-padding-block-start="40"] { --_ms-padBlockStart: var(--ms-spacing_40); } [data-ms-padding-block-start="44"] { --_ms-padBlockStart: var(--ms-spacing_44); } [data-ms-padding-block-start="48"] { --_ms-padBlockStart: var(--ms-spacing_48); } [data-ms-padding-block-start="56"] { --_ms-padBlockStart: var(--ms-spacing_56); } [data-ms-padding-block-start="64"] { --_ms-padBlockStart: var(--ms-spacing_64); } [data-ms-padding-block-start="72"] { --_ms-padBlockStart: var(--ms-spacing_72); } [data-ms-padding-block-start="80"] { --_ms-padBlockStart: var(--ms-spacing_80); } [data-ms-padding-block-start="96"] { --_ms-padBlockStart: var(--ms-spacing_96); } [data-ms-padding-block-start="128"] { --_ms-padBlockStart: var(--ms-spacing_128); } [data-ms-padding-block-start="160"] { --_ms-padBlockStart: var(--ms-spacing_160); } [data-ms-padding-block-start="192"] { --_ms-padBlockStart: var(--ms-spacing_192); } [data-ms-padding-block-start="224"] { --_ms-padBlockStart: var(--ms-spacing_224); } [data-ms-padding-block-start="256"] { --_ms-padBlockStart: var(--ms-spacing_256); } [data-ms-padding-block-start="320"] { --_ms-padBlockStart: var(--ms-spacing_320); } [data-ms-padding-block-start="384"] { --_ms-padBlockStart: var(--ms-spacing_384); } [data-ms-padding-block-start="448"] { --_ms-padBlockStart: var(--ms-spacing_448); } [data-ms-padding-block-start="512"] { --_ms-padBlockStart: var(--ms-spacing_512); } [data-ms-padding-block-start="600"] { --_ms-padBlockStart: var(--ms-spacing_600); } [data-ms-padding-block-start="640"] { --_ms-padBlockStart: var(--ms-spacing_640); } [data-ms-padding-block-start="768"] { --_ms-padBlockStart: var(--ms-spacing_768); } [data-ms-padding-block-start="800"] { --_ms-padBlockStart: var(--ms-spacing_800); } [data-ms-padding-block-start="960"] { --_ms-padBlockStart: var(--ms-spacing_960); } [data-ms-padding-block-start="1024"] { --_ms-padBlockStart: var(--ms-spacing_1024); } [data-ms-padding-block-end="0"] { --_ms-padBlockEnd: var(--ms-spacing_0); } [data-ms-padding-block-end="2"] { --_ms-padBlockEnd: var(--ms-spacing_2); } [data-ms-padding-block-end="4"] { --_ms-padBlockEnd: var(--ms-spacing_4); } [data-ms-padding-block-end="8"] { --_ms-padBlockEnd: var(--ms-spacing_8); } [data-ms-padding-block-end="12"] { --_ms-padBlockEnd: var(--ms-spacing_12); } [data-ms-padding-block-end="16"] { --_ms-padBlockEnd: var(--ms-spacing_16); } [data-ms-padding-block-end="20"] { --_ms-padBlockEnd: var(--ms-spacing_20); } [data-ms-padding-block-end="24"] { --_ms-padBlockEnd: var(--ms-spacing_24); } [data-ms-padding-block-end="28"] { --_ms-padBlockEnd: var(--ms-spacing_28); } [data-ms-padding-block-end="32"] { --_ms-padBlockEnd: var(--ms-spacing_32); } [data-ms-padding-block-end="36"] { --_ms-padBlockEnd: var(--ms-spacing_36); } [data-ms-padding-block-end="40"] { --_ms-padBlockEnd: var(--ms-spacing_40); } [data-ms-padding-block-end="44"] { --_ms-padBlockEnd: var(--ms-spacing_44); } [data-ms-padding-block-end="48"] { --_ms-padBlockEnd: var(--ms-spacing_48); } [data-ms-padding-block-end="56"] { --_ms-padBlockEnd: var(--ms-spacing_56); } [data-ms-padding-block-end="64"] { --_ms-padBlockEnd: var(--ms-spacing_64); } [data-ms-padding-block-end="72"] { --_ms-padBlockEnd: var(--ms-spacing_72); } [data-ms-padding-block-end="80"] { --_ms-padBlockEnd: var(--ms-spacing_80); } [data-ms-padding-block-end="96"] { --_ms-padBlockEnd: var(--ms-spacing_96); } [data-ms-padding-block-end="128"] { --_ms-padBlockEnd: var(--ms-spacing_128); } [data-ms-padding-block-end="160"] { --_ms-padBlockEnd: var(--ms-spacing_160); } [data-ms-padding-block-end="192"] { --_ms-padBlockEnd: var(--ms-spacing_192); } [data-ms-padding-block-end="224"] { --_ms-padBlockEnd: var(--ms-spacing_224); } [data-ms-padding-block-end="256"] { --_ms-padBlockEnd: var(--ms-spacing_256); } [data-ms-padding-block-end="320"] { --_ms-padBlockEnd: var(--ms-spacing_320); } [data-ms-padding-block-end="384"] { --_ms-padBlockEnd: var(--ms-spacing_384); } [data-ms-padding-block-end="448"] { --_ms-padBlockEnd: var(--ms-spacing_448); } [data-ms-padding-block-end="512"] { --_ms-padBlockEnd: var(--ms-spacing_512); } [data-ms-padding-block-end="600"] { --_ms-padBlockEnd: var(--ms-spacing_600); } [data-ms-padding-block-end="640"] { --_ms-padBlockEnd: var(--ms-spacing_640); } [data-ms-padding-block-end="768"] { --_ms-padBlockEnd: var(--ms-spacing_768); } [data-ms-padding-block-end="800"] { --_ms-padBlockEnd: var(--ms-spacing_800); } [data-ms-padding-block-end="960"] { --_ms-padBlockEnd: var(--ms-spacing_960); } [data-ms-padding-block-end="1024"] { --_ms-padBlockEnd: var(--ms-spacing_1024); } [data-ms-padding-inline-start="0"] { --_ms-padInlineStart: var(--ms-spacing_0); } [data-ms-padding-inline-start="2"] { --_ms-padInlineStart: var(--ms-spacing_2); } [data-ms-padding-inline-start="4"] { --_ms-padInlineStart: var(--ms-spacing_4); } [data-ms-padding-inline-start="8"] { --_ms-padInlineStart: var(--ms-spacing_8); } [data-ms-padding-inline-start="12"] { --_ms-padInlineStart: var(--ms-spacing_12); } [data-ms-padding-inline-start="16"] { --_ms-padInlineStart: var(--ms-spacing_16); } [data-ms-padding-inline-start="20"] { --_ms-padInlineStart: var(--ms-spacing_20); } [data-ms-padding-inline-start="24"] { --_ms-padInlineStart: var(--ms-spacing_24); } [data-ms-padding-inline-start="28"] { --_ms-padInlineStart: var(--ms-spacing_28); } [data-ms-padding-inline-start="32"] { --_ms-padInlineStart: var(--ms-spacing_32); } [data-ms-padding-inline-start="36"] { --_ms-padInlineStart: var(--ms-spacing_36); } [data-ms-padding-inline-start="40"] { --_ms-padInlineStart: var(--ms-spacing_40); } [data-ms-padding-inline-start="44"] { --_ms-padInlineStart: var(--ms-spacing_44); } [data-ms-padding-inline-start="48"] { --_ms-padInlineStart: var(--ms-spacing_48); } [data-ms-padding-inline-start="56"] { --_ms-padInlineStart: var(--ms-spacing_56); } [data-ms-padding-inline-start="64"] { --_ms-padInlineStart: var(--ms-spacing_64); } [data-ms-padding-inline-start="72"] { --_ms-padInlineStart: var(--ms-spacing_72); } [data-ms-padding-inline-start="80"] { --_ms-padInlineStart: var(--ms-spacing_80); } [data-ms-padding-inline-start="96"] { --_ms-padInlineStart: var(--ms-spacing_96); } [data-ms-padding-inline-start="128"] { --_ms-padInlineStart: var(--ms-spacing_128); } [data-ms-padding-inline-start="160"] { --_ms-padInlineStart: var(--ms-spacing_160); } [data-ms-padding-inline-start="192"] { --_ms-padInlineStart: var(--ms-spacing_192); } [data-ms-padding-inline-start="224"] { --_ms-padInlineStart: var(--ms-spacing_224); } [data-ms-padding-inline-start="256"] { --_ms-padInlineStart: var(--ms-spacing_256); } [data-ms-padding-inline-start="320"] { --_ms-padInlineStart: var(--ms-spacing_320); } [data-ms-padding-inline-start="384"] { --_ms-padInlineStart: var(--ms-spacing_384); } [data-ms-padding-inline-start="448"] { --_ms-padInlineStart: var(--ms-spacing_448); } [data-ms-padding-inline-start="512"] { --_ms-padInlineStart: var(--ms-spacing_512); } [data-ms-padding-inline-start="600"] { --_ms-padInlineStart: var(--ms-spacing_600); } [data-ms-padding-inline-start="640"] { --_ms-padInlineStart: var(--ms-spacing_640); } [data-ms-padding-inline-start="768"] { --_ms-padInlineStart: var(--ms-spacing_768); } [data-ms-padding-inline-start="800"] { --_ms-padInlineStart: var(--ms-spacing_800); } [data-ms-padding-inline-start="960"] { --_ms-padInlineStart: var(--ms-spacing_960); } [data-ms-padding-inline-start="1024"] { --_ms-padInlineStart: var(--ms-spacing_1024); } [data-ms-padding-inline-end="0"] { --_ms-padInlineEnd: var(--ms-spacing_0); } [data-ms-padding-inline-end="2"] { --_ms-padInlineEnd: var(--ms-spacing_2); } [data-ms-padding-inline-end="4"] { --_ms-padInlineEnd: var(--ms-spacing_4); } [data-ms-padding-inline-end="8"] { --_ms-padInlineEnd: var(--ms-spacing_8); } [data-ms-padding-inline-end="12"] { --_ms-padInlineEnd: var(--ms-spacing_12); } [data-ms-padding-inline-end="16"] { --_ms-padInlineEnd: var(--ms-spacing_16); } [data-ms-padding-inline-end="20"] { --_ms-padInlineEnd: var(--ms-spacing_20); } [data-ms-padding-inline-end="24"] { --_ms-padInlineEnd: var(--ms-spacing_24); } [data-ms-padding-inline-end="28"] { --_ms-padInlineEnd: var(--ms-spacing_28); } [data-ms-padding-inline-end="32"] { --_ms-padInlineEnd: var(--ms-spacing_32); } [data-ms-padding-inline-end="36"] { --_ms-padInlineEnd: var(--ms-spacing_36); } [data-ms-padding-inline-end="40"] { --_ms-padInlineEnd: var(--ms-spacing_40); } [data-ms-padding-inline-end="44"] { --_ms-padInlineEnd: var(--ms-spacing_44); } [data-ms-padding-inline-end="48"] { --_ms-padInlineEnd: var(--ms-spacing_48); } [data-ms-padding-inline-end="56"] { --_ms-padInlineEnd: var(--ms-spacing_56); } [data-ms-padding-inline-end="64"] { --_ms-padInlineEnd: var(--ms-spacing_64); } [data-ms-padding-inline-end="72"] { --_ms-padInlineEnd: var(--ms-spacing_72); } [data-ms-padding-inline-end="80"] { --_ms-padInlineEnd: var(--ms-spacing_80); } [data-ms-padding-inline-end="96"] { --_ms-padInlineEnd: var(--ms-spacing_96); } [data-ms-padding-inline-end="128"] { --_ms-padInlineEnd: var(--ms-spacing_128); } [data-ms-padding-inline-end="160"] { --_ms-padInlineEnd: var(--ms-spacing_160); } [data-ms-padding-inline-end="192"] { --_ms-padInlineEnd: var(--ms-spacing_192); } [data-ms-padding-inline-end="224"] { --_ms-padInlineEnd: var(--ms-spacing_224); } [data-ms-padding-inline-end="256"] { --_ms-padInlineEnd: var(--ms-spacing_256); } [data-ms-padding-inline-end="320"] { --_ms-padInlineEnd: var(--ms-spacing_320); } [data-ms-padding-inline-end="384"] { --_ms-padInlineEnd: var(--ms-spacing_384); } [data-ms-padding-inline-end="448"] { --_ms-padInlineEnd: var(--ms-spacing_448); } [data-ms-padding-inline-end="512"] { --_ms-padInlineEnd: var(--ms-spacing_512); } [data-ms-padding-inline-end="600"] { --_ms-padInlineEnd: var(--ms-spacing_600); } [data-ms-padding-inline-end="640"] { --_ms-padInlineEnd: var(--ms-spacing_640); } [data-ms-padding-inline-end="768"] { --_ms-padInlineEnd: var(--ms-spacing_768); } [data-ms-padding-inline-end="800"] { --_ms-padInlineEnd: var(--ms-spacing_800); } [data-ms-padding-inline-end="960"] { --_ms-padInlineEnd: var(--ms-spacing_960); } [data-ms-padding-inline-end="1024"] { --_ms-padInlineEnd: var(--ms-spacing_1024); } /* --- Pantallas: Regiones hijas del elemento con data-ms-layout-screen. En compact, todo sidebar es offcanvas y el header es sticky; medium y expanded suman rail y docked según la Pantalla. --_ms-presentation deja la Presentación a la vista del script que controla la Región. --- */ [data-ms-layout-screen] { --_ms-start: 0px; --_ms-end: 0px; display: flex; flex-direction: column; min-block-size: 100dvh; box-sizing: border-box; padding-inline: var(--_ms-start) var(--_ms-end); transition: padding var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut); } [data-ms-layout-screen] > [data-ms-layout-region] { box-sizing: border-box; min-inline-size: 0; } [data-ms-layout-screen] > :is([data-ms-layout-region="header"], [data-ms-layout-region="main"], [data-ms-layout-region="footer"]) { container-type: inline-size; } [data-ms-layout-screen] > [data-ms-layout-region="main"] { flex: 1 0 auto; } [data-ms-layout-screen] > [data-ms-layout-region="header"] { --_ms-presentation: sticky; position: sticky; inset-block-start: 0; z-index: 1; } [data-ms-layout-screen] > [data-ms-layout-region="footer"] { --_ms-presentation: static; } /* Sidebars: offcanvas, fuera de la ventana */ [data-ms-layout-screen] > :is([data-ms-layout-region="sidebarStart"], [data-ms-layout-region="sidebarEnd"]) { --_ms-presentation: offcanvas; --_ms-out: -100% 0; position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 3; box-sizing: border-box; inline-size: var(--ms-layoutSidebarWidth); max-inline-size: 100%; overflow-y: auto; translate: var(--_ms-out); visibility: hidden; /* Al salir, se oculta recién cuando terminó de deslizarse */ transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s linear var(--ms-motionDuration_regular); } [data-ms-layout-screen] > [data-ms-layout-region="sidebarEnd"] { --_ms-out: 100% 0; inset-inline: auto 0; } [data-ms-layout-screen]:dir(rtl) > [data-ms-layout-region="sidebarStart"] { --_ms-out: 100% 0; } [data-ms-layout-screen]:dir(rtl) > [data-ms-layout-region="sidebarEnd"] { --_ms-out: -100% 0; } /* Al entrar, se ve desde el primer instante */ [data-ms-layout-screen] > :is([data-ms-layout-region="sidebarStart"], [data-ms-layout-region="sidebarEnd"])[data-ms-state="expanded"] { translate: none; visibility: visible; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), inline-size var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } /* Velo detrás de una Región desplegada encima del contenido */ [data-ms-layout-screen]::after { content: none; position: fixed; inset: 0; z-index: 2; background: color-mix(in oklab, var(--ms-color_canvas) var(--ms-opacityRole_backdrop), transparent); } [data-ms-layout-screen]:has(> :is([data-ms-layout-region="sidebarStart"], [data-ms-layout-region="sidebarEnd"])[data-ms-state="expanded"])::after { content: ""; } /* centered: el contenido centrado con layoutWidth_content; header y footer static */ [data-ms-layout-screen="centered"] > [data-ms-layout-region="header"] { --_ms-presentation: static; position: static; } [data-ms-layout-screen="centered"] > [data-ms-layout-region="main"] { display: flex; flex-direction: column; justify-content: center; inline-size: 100%; max-inline-size: var(--ms-layoutWidth_content); margin-inline: auto; } /* split: en medium y compact, sidebarEnd arriba, de todo el ancho y más bajo */ [data-ms-layout-screen="split"] > [data-ms-layout-region="sidebarEnd"] { --_ms-presentation: static; position: static; order: -1; inline-size: auto; max-inline-size: none; aspect-ratio: var(--ms-shapeAspectRatio_21x9); overflow: hidden; translate: none; visibility: visible; transition: none; } [data-ms-layout-screen="split"]:has(> [data-ms-layout-region="sidebarEnd"][data-ms-state="expanded"])::after { content: none; } @media (600px <= width < 960px) { [data-ms-layout-screen="sidebarFirst"] > [data-ms-layout-region="sidebarStart"] { --_ms-presentation: rail; inset-block-start: 0px; inline-size: var(--ms-layoutRailWidth); translate: none; visibility: visible; overflow-x: hidden; transition: inline-size var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } [data-ms-layout-screen="sidebarFirst"] { --_ms-start: var(--ms-layoutRailWidth); } [data-ms-layout-screen="sidebarFirst"] > [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"] { inline-size: var(--ms-layoutSidebarWidth); } [data-ms-layout-screen="sidebarFirst"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"])::after { content: ""; } /* Rail colapsada: solo los Icons; los textos, ocultos a la vista */ [data-ms-layout-screen="sidebarFirst"] > [data-ms-layout-region="sidebarStart"]:not([data-ms-state="expanded"]) * { font-size: 0; } [data-ms-layout-screen="sidebarFirst"] > [data-ms-layout-region="sidebarStart"]:not([data-ms-state="expanded"]) :is(h1, h2, h3, h4, h5, h6, p, li, summary, a, button, label, header, footer):not(:has(.ms-icon)) { display: none; } [data-ms-layout-screen="headerFirst"] > [data-ms-layout-region="sidebarStart"] { --_ms-presentation: rail; inset-block-start: var(--_ms-headerHeight, 0px); inline-size: var(--ms-layoutRailWidth); translate: none; visibility: visible; overflow-x: hidden; transition: inline-size var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } [data-ms-layout-screen="headerFirst"] { --_ms-start: var(--ms-layoutRailWidth); } [data-ms-layout-screen="headerFirst"] > [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"] { inline-size: var(--ms-layoutSidebarWidth); } [data-ms-layout-screen="headerFirst"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"])::after { content: ""; } /* Rail colapsada: solo los Icons; los textos, ocultos a la vista */ [data-ms-layout-screen="headerFirst"] > [data-ms-layout-region="sidebarStart"]:not([data-ms-state="expanded"]) * { font-size: 0; } [data-ms-layout-screen="headerFirst"] > [data-ms-layout-region="sidebarStart"]:not([data-ms-state="expanded"]) :is(h1, h2, h3, h4, h5, h6, p, li, summary, a, button, label, header, footer):not(:has(.ms-icon)) { display: none; } [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarStart"] { --_ms-presentation: rail; inset-block-start: var(--_ms-headerHeight, 0px); inline-size: var(--ms-layoutRailWidth); translate: none; visibility: visible; overflow-x: hidden; transition: inline-size var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } [data-ms-layout-screen="threeColumn"] { --_ms-start: var(--ms-layoutRailWidth); } [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"] { inline-size: var(--ms-layoutSidebarWidth); } [data-ms-layout-screen="threeColumn"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"])::after { content: ""; } /* Rail colapsada: solo los Icons; los textos, ocultos a la vista */ [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarStart"]:not([data-ms-state="expanded"]) * { font-size: 0; } [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarStart"]:not([data-ms-state="expanded"]) :is(h1, h2, h3, h4, h5, h6, p, li, summary, a, button, label, header, footer):not(:has(.ms-icon)) { display: none; } } @media (min-width: 960px) { [data-ms-layout-screen="sidebarFirst"] > [data-ms-layout-region="sidebarStart"] { --_ms-presentation: docked; inset-block-start: 0px; inline-size: var(--ms-layoutSidebarWidth); translate: none; visibility: visible; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } [data-ms-layout-screen="sidebarFirst"] { --_ms-start: var(--ms-layoutSidebarWidth); } [data-ms-layout-screen="sidebarFirst"] > [data-ms-layout-region="sidebarStart"][data-ms-state="collapsed"] { translate: var(--_ms-out); visibility: hidden; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s linear var(--ms-motionDuration_regular); } [data-ms-layout-screen="sidebarFirst"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="collapsed"]) { --_ms-start: 0px; } [data-ms-layout-screen="headerFirst"] > [data-ms-layout-region="sidebarStart"] { --_ms-presentation: docked; inset-block-start: var(--_ms-headerHeight, 0px); inline-size: var(--ms-layoutSidebarWidth); translate: none; visibility: visible; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } [data-ms-layout-screen="headerFirst"] { --_ms-start: var(--ms-layoutSidebarWidth); } [data-ms-layout-screen="headerFirst"] > [data-ms-layout-region="sidebarStart"][data-ms-state="collapsed"] { translate: var(--_ms-out); visibility: hidden; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s linear var(--ms-motionDuration_regular); } [data-ms-layout-screen="headerFirst"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="collapsed"]) { --_ms-start: 0px; } [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarStart"] { --_ms-presentation: docked; inset-block-start: var(--_ms-headerHeight, 0px); inline-size: var(--ms-layoutSidebarWidth); translate: none; visibility: visible; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } [data-ms-layout-screen="threeColumn"] { --_ms-start: var(--ms-layoutSidebarWidth); } [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarStart"][data-ms-state="collapsed"] { translate: var(--_ms-out); visibility: hidden; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s linear var(--ms-motionDuration_regular); } [data-ms-layout-screen="threeColumn"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="collapsed"]) { --_ms-start: 0px; } [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarEnd"] { --_ms-presentation: docked; inset-block-start: var(--_ms-headerHeight, 0px); inline-size: var(--ms-layoutSidebarEndWidth); translate: none; visibility: visible; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s; } [data-ms-layout-screen="threeColumn"] { --_ms-end: var(--ms-layoutSidebarEndWidth); } [data-ms-layout-screen="threeColumn"] > [data-ms-layout-region="sidebarEnd"][data-ms-state="collapsed"] { translate: var(--_ms-out); visibility: hidden; transition: translate var(--ms-motionDuration_regular) var(--ms-motionBezier_easeOut), visibility 0s linear var(--ms-motionDuration_regular); } [data-ms-layout-screen="threeColumn"]:has(> [data-ms-layout-region="sidebarEnd"][data-ms-state="collapsed"]) { --_ms-end: 0px; } [data-ms-layout-screen="sidebarFirst"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"])::after, [data-ms-layout-screen="headerFirst"]:has(> [data-ms-layout-region="sidebarStart"][data-ms-state="expanded"])::after, [data-ms-layout-screen="threeColumn"]:has(> :is([data-ms-layout-region="sidebarStart"], [data-ms-layout-region="sidebarEnd"])[data-ms-state="expanded"])::after { content: none; } /* split: dos mitades con todo el alto */ [data-ms-layout-screen="split"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-ms-layout-screen="split"] > [data-ms-layout-region="sidebarEnd"] { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: 0; block-size: 100dvh; aspect-ratio: auto; } [data-ms-layout-screen="split"] > [data-ms-layout-region="main"] { grid-column: 1; grid-row: 1; } } /* headerFirst y threeColumn: el header ocupa todo el ancho, por encima de los sidebars */ :is([data-ms-layout-screen="headerFirst"], [data-ms-layout-screen="threeColumn"]) > [data-ms-layout-region="header"] { margin-inline: calc(-1 * var(--_ms-start)) calc(-1 * var(--_ms-end)); } @media (prefers-reduced-motion: reduce) { [data-ms-layout-screen], [data-ms-layout-screen] > [data-ms-layout-region] { transition: none !important; } } /* ============================================================================= 7. GRADIENTS — escalas. Gradiente y Gradient Style todavía no tienen catálogo en el documento. ========================================================================= */ :root { --ms-gradientType_linear: linear-gradient; --ms-gradientType_radial: radial-gradient; --ms-gradientType_conic: conic-gradient; --ms-gradientAngle_0: 0deg; --ms-gradientAngle_45: 45deg; --ms-gradientAngle_90: 90deg; --ms-gradientAngle_135: 135deg; --ms-gradientAngle_180: 180deg; --ms-gradientAngle_225: 225deg; --ms-gradientAngle_270: 270deg; --ms-gradientAngle_315: 315deg; --ms-gradientPosition_center: 50% 50%; --ms-gradientPosition_top: 50% 0%; --ms-gradientPosition_bottom: 50% 100%; --ms-gradientPosition_left: 0% 50%; --ms-gradientPosition_right: 100% 50%; --ms-gradientPosition_topLeft: 0% 0%; --ms-gradientPosition_topRight: 100% 0%; --ms-gradientPosition_bottomLeft: 0% 100%; --ms-gradientPosition_bottomRight: 100% 100%; --ms-gradientShape_circle: circle; --ms-gradientShape_ellipse: ellipse; --ms-gradientExtent_closestSide: closest-side; --ms-gradientExtent_closestCorner: closest-corner; --ms-gradientExtent_farthestSide: farthest-side; --ms-gradientExtent_farthestCorner: farthest-corner; --ms-gradientStepStop_0: 0%; --ms-gradientStepStop_25: 25%; --ms-gradientStepStop_50: 50%; --ms-gradientStepStop_75: 75%; --ms-gradientStepStop_100: 100%; --ms-gradientStepLight_minus100: -100; --ms-gradientStepLight_minus75: -75; --ms-gradientStepLight_minus50: -50; --ms-gradientStepLight_minus25: -25; --ms-gradientStepLight_0: 0; --ms-gradientStepLight_plus25: 25; --ms-gradientStepLight_plus50: 50; --ms-gradientStepLight_plus75: 75; --ms-gradientStepLight_plus100: 100; } /* ============================================================================= 8. COLORS — Esquema → Tipo de Esquema → Modo → Contraste → Neutral. Regla que ordena toda esta sección (doc, Effects): una custom property se resuelve donde se declara, no donde se usa. Un elemento que cambia un eslabón de la cadena —su Modo, su Esquema, su tipo de Contraste o Neutral— tiene que volver a resolver los eslabones que siguen, en ese mismo elemento. Por eso la cadena se declara sobre todo elemento que lleve cualquiera de esos atributos. El Modo y el tipo de Contraste activos viajan como banderas numéricas internas (--_ms-mode_*, --_ms-contrast_*), que sí se heredan tal cual: así un elemento que solo cambia de Esquema conoce el Modo y el Contraste de su ancestro más cercano, y los Tokens se eligen con color-mix() al 0 % o al 100 %. Sin color-mix() (navegadores anteriores a 2023) rige el resguardo por selector de 8.3 y 8.4: funciona en el elemento que declara el atributo, pero un cambio de Esquema solo repinta si ese mismo elemento declara también data-ms-mode y data-ms-contrast. ========================================================================= */ /* ----------------------------------------------------------------------- 8.1 Esquema — resguardo sin Tema: escala de ejemplo del documento. El foco corresponde a esa escala, calculado por el Generador de Temas. ----------------------------------------------------------------------- */ :root { --ms-color_0: #ffffff; --ms-color_5: #e8f1ff; --ms-color_10: #d2e4ff; --ms-color_20: #a4c9ff; --ms-color_30: #75adff; --ms-color_40: #5391ec; --ms-color_50: #3a76cf; --ms-color_60: #1f5cb2; --ms-color_70: #004396; --ms-color_80: #002e6b; --ms-color_90: #001a43; --ms-color_95: #000f2e; --ms-color_100: #000002; --ms-color_focus15: #ffc9a6; --ms-color_focus60: #944a00; --ms-color_neutral: 90; } /* ----------------------------------------------------------------------- 8.2 Tipo de Esquema — una bandera por Esquema: 0 deepHue, 1 lightHue. El compilador la escribe en el bloque de cada Esquema; la cadena (8.5) elige con ella el escalón de color_vivid en dark y la tabla de solid. Resguardo sin Tema: deepHue (la escala de ejemplo es un azul). ----------------------------------------------------------------------- */ :root { --_ms-color_lightHue: 0; } /* ----------------------------------------------------------------------- Banderas internas: Modo, tipo de Contraste y Neutral. ----------------------------------------------------------------------- */ :root { --_ms-mode_dark: 0; --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 0; --_ms-contrast_solid: 0; --_ms-contrast_image: 0; --_ms-color_neutralApplied: 0; } [data-ms-mode="light"] { color-scheme: light; --_ms-mode_dark: 0; } [data-ms-mode="dark"] { color-scheme: dark; --_ms-mode_dark: 1; } [data-ms-contrast="canvasHigh"] { --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 0; --_ms-contrast_solid: 0; --_ms-contrast_image: 0; } [data-ms-contrast="canvasLow"] { --_ms-contrast_mantle: 0; --_ms-contrast_low: 1; --_ms-contrast_highest: 0; --_ms-contrast_solid: 0; --_ms-contrast_image: 0; } [data-ms-contrast="mantleHigh"] { --_ms-contrast_mantle: 1; --_ms-contrast_low: 0; --_ms-contrast_highest: 0; --_ms-contrast_solid: 0; --_ms-contrast_image: 0; } [data-ms-contrast="mantleLow"] { --_ms-contrast_mantle: 1; --_ms-contrast_low: 1; --_ms-contrast_highest: 0; --_ms-contrast_solid: 0; --_ms-contrast_image: 0; } [data-ms-contrast="highest"] { --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 1; --_ms-contrast_solid: 0; --_ms-contrast_image: 0; } [data-ms-contrast="solid"] { --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 0; --_ms-contrast_solid: 1; --_ms-contrast_image: 0; } /* Solid queda fijo en modo light, sea cual sea el Modo de la página: sus Tokens apuntan a Tokens de Modo, que así resuelven siempre igual (doc, Colors > Contraste). */ [data-ms-contrast="solid"] { color-scheme: light; --_ms-mode_dark: 0; } /* Sobre imagen (doc, Colors > Contraste sobre imagen): son canvasHigh con el Modo fijo, dark en imageDark y light en imageLight, como solid fija light. */ [data-ms-contrast="imageDark"] { color-scheme: dark; --_ms-mode_dark: 1; --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 0; --_ms-contrast_solid: 0; --_ms-contrast_image: 1; } [data-ms-contrast="imageLight"] { color-scheme: light; --_ms-mode_dark: 0; --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 0; --_ms-contrast_solid: 0; --_ms-contrast_image: 1; } /* En los Contrastes Low y sobre imagen, el texto ya está en el mínimo de contraste: ninguna opacidad de texto ni de gráfico atenuado baja de 100 %. Con !important le gana también al Tema, que vive en una capa posterior (doc, Tema > Roles). */ [data-ms-contrast="canvasLow"], [data-ms-contrast="mantleLow"], [data-ms-contrast^="image"] { --ms-opacityRole_paragraph: var(--ms-effectOpacity_100) !important; --ms-opacityRole_muted: var(--ms-effectOpacity_100) !important; --ms-opacityRole_placeholder: var(--ms-effectOpacity_100) !important; --ms-opacityRole_lowGraphic: var(--ms-effectOpacity_100) !important; } /* Neutral: no toca el Esquema, prende la bandera y la hereda todo lo de abajo. Cualquier otro Esquema llamado en un contenedor corta esa herencia. */ [data-ms-scheme] { --_ms-color_neutralApplied: 0; } [data-ms-scheme="neutral"] { --_ms-color_neutralApplied: var(--ms-color_neutral); } /* ----------------------------------------------------------------------- 8.3 Modo — resguardo por selector ----------------------------------------------------------------------- */ [data-ms-mode="light"] { --ms-color_base: var(--ms-color_0); --ms-color_wash: var(--ms-color_5); --ms-color_tint: var(--ms-color_10); --ms-color_soft: var(--ms-color_20); --ms-color_mediumSoft: var(--ms-color_30); --ms-color_medium: var(--ms-color_50); --ms-color_vivid: var(--ms-color_60); --ms-color_strong: var(--ms-color_70); --ms-color_deep: var(--ms-color_80); --ms-color_contrast: var(--ms-color_100); --ms-color_light: var(--ms-color_0); --ms-color_dark: var(--ms-color_100); --ms-color_focusVivid: var(--ms-color_focus60); --ms-color_focusContrast: var(--ms-color_focus15); --ms-color_focusLight: var(--ms-color_focus15); --ms-color_focusDark: var(--ms-color_focus60); } [data-ms-mode="dark"], [data-ms-contrast="imageDark"] { --ms-color_base: var(--ms-color_100); --ms-color_wash: var(--ms-color_90); --ms-color_tint: var(--ms-color_80); --ms-color_soft: var(--ms-color_70); --ms-color_mediumSoft: var(--ms-color_60); --ms-color_medium: var(--ms-color_50); --ms-color_vivid: var(--ms-color_30); /* sin color-mix() no hay bandera de Tipo: se usa la tabla de deepHue */ --ms-color_strong: var(--ms-color_20); --ms-color_deep: var(--ms-color_10); --ms-color_contrast: var(--ms-color_0); --ms-color_light: var(--ms-color_0); --ms-color_dark: var(--ms-color_100); --ms-color_focusVivid: var(--ms-color_focus15); --ms-color_focusContrast: var(--ms-color_focus60); --ms-color_focusLight: var(--ms-color_focus15); --ms-color_focusDark: var(--ms-color_focus60); } /* Solid e imageLight fijan el modo light */ [data-ms-contrast="solid"], [data-ms-contrast="imageLight"] { --ms-color_base: var(--ms-color_0); --ms-color_wash: var(--ms-color_5); --ms-color_tint: var(--ms-color_10); --ms-color_soft: var(--ms-color_20); --ms-color_mediumSoft: var(--ms-color_30); --ms-color_medium: var(--ms-color_50); --ms-color_vivid: var(--ms-color_60); --ms-color_strong: var(--ms-color_70); --ms-color_deep: var(--ms-color_80); --ms-color_contrast: var(--ms-color_100); --ms-color_light: var(--ms-color_0); --ms-color_dark: var(--ms-color_100); --ms-color_focusVivid: var(--ms-color_focus60); --ms-color_focusContrast: var(--ms-color_focus15); --ms-color_focusLight: var(--ms-color_focus15); --ms-color_focusDark: var(--ms-color_focus60); } /* ----------------------------------------------------------------------- 8.4 Contraste — resguardo por selector. Cada tipo declara a qué escalón apunta cada Token (--_ms-color_{token}_source); el Token público se arma a partir de esa fuente, porque un Token que se derivara de sí mismo sería una auto-referencia, que CSS resuelve siempre a inválido. ----------------------------------------------------------------------- */ [data-ms-contrast="canvasHigh"], [data-ms-contrast^="image"] { --_ms-color_main_source: var(--ms-color_vivid); --_ms-color_onMain_source: var(--ms-color_base); --_ms-color_canvas_source: var(--ms-color_base); --_ms-color_content_source: var(--ms-color_contrast); --_ms-color_surface_source: var(--ms-color_tint); --_ms-color_onSurface_source: var(--ms-color_strong); --_ms-color_mantle_source: var(--ms-color_wash); --_ms-color_border_source: var(--ms-color_medium); --_ms-color_focus_source: var(--ms-color_focusVivid); } [data-ms-contrast="canvasLow"] { --_ms-color_main_source: var(--ms-color_vivid); --_ms-color_onMain_source: var(--ms-color_base); --_ms-color_canvas_source: var(--ms-color_base); --_ms-color_content_source: var(--ms-color_vivid); --_ms-color_surface_source: var(--ms-color_tint); --_ms-color_onSurface_source: var(--ms-color_strong); --_ms-color_mantle_source: var(--ms-color_wash); --_ms-color_border_source: var(--ms-color_medium); --_ms-color_focus_source: var(--ms-color_focusVivid); } [data-ms-contrast="mantleHigh"] { --_ms-color_main_source: var(--ms-color_vivid); --_ms-color_onMain_source: var(--ms-color_base); --_ms-color_canvas_source: var(--ms-color_wash); --_ms-color_content_source: var(--ms-color_contrast); --_ms-color_surface_source: var(--ms-color_tint); --_ms-color_onSurface_source: var(--ms-color_contrast); --_ms-color_mantle_source: var(--ms-color_base); --_ms-color_border_source: var(--ms-color_medium); --_ms-color_focus_source: var(--ms-color_focusVivid); } [data-ms-contrast="mantleLow"] { --_ms-color_main_source: var(--ms-color_vivid); --_ms-color_onMain_source: var(--ms-color_base); --_ms-color_canvas_source: var(--ms-color_wash); --_ms-color_content_source: var(--ms-color_vivid); --_ms-color_surface_source: var(--ms-color_tint); --_ms-color_onSurface_source: var(--ms-color_strong); --_ms-color_mantle_source: var(--ms-color_base); --_ms-color_border_source: var(--ms-color_medium); --_ms-color_focus_source: var(--ms-color_focusVivid); } [data-ms-contrast="highest"] { --_ms-color_main_source: var(--ms-color_contrast); --_ms-color_onMain_source: var(--ms-color_base); --_ms-color_canvas_source: var(--ms-color_base); --_ms-color_content_source: var(--ms-color_contrast); --_ms-color_surface_source: var(--ms-color_contrast); --_ms-color_onSurface_source: var(--ms-color_base); --_ms-color_mantle_source: var(--ms-color_base); --_ms-color_border_source: var(--ms-color_contrast); --_ms-color_focus_source: var(--ms-color_focusVivid); } [data-ms-contrast="solid"] { /* sin color-mix() no hay bandera de Tipo: tabla de deepHue, en modo light */ --_ms-color_main_source: var(--ms-color_base); --_ms-color_onMain_source: var(--ms-color_vivid); --_ms-color_canvas_source: var(--ms-color_vivid); --_ms-color_content_source: var(--ms-color_base); --_ms-color_surface_source: var(--ms-color_deep); --_ms-color_onSurface_source: var(--ms-color_base); --_ms-color_mantle_source: var(--ms-color_strong); --_ms-color_border_source: var(--ms-color_tint); --_ms-color_focus_source: var(--ms-color_focusLight); } [data-ms-contrast] { --ms-color_main: var(--_ms-color_main_source); --ms-color_main_neutral: var(--_ms-color_main_source); --ms-color_mainContent: var(--_ms-color_main_source); --ms-color_mainContent_neutral: var(--_ms-color_main_source); --ms-color_onMain: var(--_ms-color_onMain_source); --ms-color_onMain_neutral: var(--_ms-color_onMain_source); --ms-color_canvas: var(--_ms-color_canvas_source); --ms-color_canvas_neutral: var(--_ms-color_canvas_source); --ms-color_content: var(--_ms-color_content_source); --ms-color_content_neutral: var(--_ms-color_content_source); --ms-color_surface: var(--_ms-color_surface_source); --ms-color_surface_neutral: var(--_ms-color_surface_source); --ms-color_onSurface: var(--_ms-color_onSurface_source); --ms-color_onSurface_neutral: var(--_ms-color_onSurface_source); --ms-color_mantle: var(--_ms-color_mantle_source); --ms-color_mantle_neutral: var(--_ms-color_mantle_source); --ms-color_border: var(--_ms-color_border_source); --ms-color_border_neutral: var(--_ms-color_border_source); --ms-color_focus: var(--_ms-color_focus_source); --ms-color_focus_neutral: var(--_ms-color_focus_source); } /* Sobre imagen, el contenido de color y el borde van a contrast */ [data-ms-contrast^="image"] { --ms-color_mainContent: var(--ms-color_contrast); --ms-color_mainContent_neutral: var(--ms-color_contrast); --ms-color_border: var(--ms-color_contrast); --ms-color_border_neutral: var(--ms-color_contrast); } /* ----------------------------------------------------------------------- 8.5 Cadena completa con color-mix(): se resuelve en todo elemento que cambia un eslabón, eligiendo cada Token según las banderas heredadas. color-mix(in oklab, A, B 0%) es A; con B al 100 % es B. ----------------------------------------------------------------------- */ @supports (color: color-mix(in oklab, red, blue)) { :root, [data-ms-mode], [data-ms-scheme], [data-ms-contrast] { --_ms-mode_w: calc(var(--_ms-mode_dark) * 100%); --_ms-color_wLightHue: calc(var(--_ms-color_lightHue) * 100%); /* Modo */ --ms-color_base: color-mix(in oklab, var(--ms-color_0), var(--ms-color_100) var(--_ms-mode_w)); --ms-color_wash: color-mix(in oklab, var(--ms-color_5), var(--ms-color_90) var(--_ms-mode_w)); --ms-color_tint: color-mix(in oklab, var(--ms-color_10), var(--ms-color_80) var(--_ms-mode_w)); --ms-color_soft: color-mix(in oklab, var(--ms-color_20), var(--ms-color_70) var(--_ms-mode_w)); --ms-color_mediumSoft: color-mix(in oklab, var(--ms-color_30), var(--ms-color_60) var(--_ms-mode_w)); --ms-color_medium: var(--ms-color_50); /* En dark, vivid sube al 30 (deepHue) o al 10 (lightHue), según la bandera de Tipo */ --ms-color_vivid: color-mix(in oklab, var(--ms-color_60), color-mix(in oklab, var(--ms-color_30), var(--ms-color_10) var(--_ms-color_wLightHue)) var(--_ms-mode_w)); --ms-color_strong: color-mix(in oklab, var(--ms-color_70), var(--ms-color_20) var(--_ms-mode_w)); --ms-color_deep: color-mix(in oklab, var(--ms-color_80), var(--ms-color_10) var(--_ms-mode_w)); --ms-color_contrast: color-mix(in oklab, var(--ms-color_100), var(--ms-color_0) var(--_ms-mode_w)); --ms-color_light: var(--ms-color_0); --ms-color_dark: var(--ms-color_100); --ms-color_focusVivid: color-mix(in oklab, var(--ms-color_focus60), var(--ms-color_focus15) var(--_ms-mode_w)); --ms-color_focusContrast: color-mix(in oklab, var(--ms-color_focus15), var(--ms-color_focus60) var(--_ms-mode_w)); --ms-color_focusLight: var(--ms-color_focus15); --ms-color_focusDark: var(--ms-color_focus60); /* Contraste: pesos de cada bandera */ --_ms-contrast_wMantle: calc(var(--_ms-contrast_mantle) * 100%); --_ms-contrast_wLow: calc(var(--_ms-contrast_low) * 100%); --_ms-contrast_wHighest: calc(var(--_ms-contrast_highest) * 100%); --_ms-contrast_wSolid: calc(var(--_ms-contrast_solid) * 100%); --_ms-contrast_wImage: calc(var(--_ms-contrast_image) * 100%); --_ms-contrast_wMantleHigh: calc(var(--_ms-contrast_mantle) * (1 - var(--_ms-contrast_low)) * 100%); --_ms-contrast_wMantleOrHighest: calc((var(--_ms-contrast_mantle) + var(--_ms-contrast_highest)) * 100%); /* Fuentes: cada Token según las banderas de Contraste; solid toma su tabla de deepHue o de lightHue con la bandera de Tipo (doc, Colors > Contraste). */ --_ms-color_main_source: color-mix(in oklab, color-mix(in oklab, var(--ms-color_vivid), var(--ms-color_contrast) var(--_ms-contrast_wHighest)), color-mix(in oklab, var(--ms-color_base), var(--ms-color_strong) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); --_ms-color_onMain_source: color-mix(in oklab, var(--ms-color_base), color-mix(in oklab, var(--ms-color_vivid), var(--ms-color_base) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); --_ms-color_canvas_source: color-mix(in oklab, color-mix(in oklab, var(--ms-color_base), var(--ms-color_wash) var(--_ms-contrast_wMantle)), color-mix(in oklab, var(--ms-color_vivid), var(--ms-color_tint) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); --_ms-color_content_source: color-mix(in oklab, color-mix(in oklab, var(--ms-color_contrast), var(--ms-color_vivid) var(--_ms-contrast_wLow)), color-mix(in oklab, var(--ms-color_base), var(--ms-color_contrast) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); --_ms-color_surface_source: color-mix(in oklab, color-mix(in oklab, var(--ms-color_tint), var(--ms-color_contrast) var(--_ms-contrast_wHighest)), color-mix(in oklab, var(--ms-color_deep), var(--ms-color_soft) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); --_ms-color_onSurface_source: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--ms-color_strong), var(--ms-color_contrast) var(--_ms-contrast_wMantleHigh)), var(--ms-color_base) var(--_ms-contrast_wHighest)), color-mix(in oklab, var(--ms-color_base), var(--ms-color_contrast) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); --_ms-color_mantle_source: color-mix(in oklab, color-mix(in oklab, var(--ms-color_wash), var(--ms-color_base) var(--_ms-contrast_wMantleOrHighest)), color-mix(in oklab, var(--ms-color_strong), var(--ms-color_wash) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); --_ms-color_border_source: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--ms-color_medium), var(--ms-color_contrast) var(--_ms-contrast_wHighest)), color-mix(in oklab, var(--ms-color_tint), var(--ms-color_medium) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)), var(--ms-color_contrast) var(--_ms-contrast_wImage)); /* mainContent: el color del Esquema como contenido (texto, icono, borde) sobre canvas o mantle. Es main en todos los tipos, salvo sobre imagen, donde va a contrast. */ --_ms-color_mainContent_source: color-mix(in oklab, var(--_ms-color_main_source), var(--ms-color_contrast) var(--_ms-contrast_wImage)); --_ms-color_focus_source: color-mix(in oklab, var(--ms-color_focusVivid), color-mix(in oklab, var(--ms-color_focusLight), var(--ms-color_focusDark) var(--_ms-color_wLightHue)) var(--_ms-contrast_wSolid)); /* Token público = fuente (sin relative color syntax, Neutral no aplica) */ --ms-color_main: var(--_ms-color_main_source); --ms-color_main_neutral: var(--_ms-color_main_source); --ms-color_mainContent: var(--_ms-color_mainContent_source); --ms-color_mainContent_neutral: var(--_ms-color_mainContent_source); --ms-color_onMain: var(--_ms-color_onMain_source); --ms-color_onMain_neutral: var(--_ms-color_onMain_source); --ms-color_canvas: var(--_ms-color_canvas_source); --ms-color_canvas_neutral: var(--_ms-color_canvas_source); --ms-color_content: var(--_ms-color_content_source); --ms-color_content_neutral: var(--_ms-color_content_source); --ms-color_surface: var(--_ms-color_surface_source); --ms-color_surface_neutral: var(--_ms-color_surface_source); --ms-color_onSurface: var(--_ms-color_onSurface_source); --ms-color_onSurface_neutral: var(--_ms-color_onSurface_source); --ms-color_mantle: var(--_ms-color_mantle_source); --ms-color_mantle_neutral: var(--_ms-color_mantle_source); --ms-color_border: var(--_ms-color_border_source); --ms-color_border_neutral: var(--_ms-color_border_source); --ms-color_focus: var(--_ms-color_focus_source); --ms-color_focus_neutral: var(--_ms-color_focus_source); } } /* ----------------------------------------------------------------------- 8.6 Neutral — cada Token de Contraste en dos versiones: la normal sigue a la bandera, la _neutral está siempre desaturada. OKLCH: baja el croma y deja la luminosidad intacta, así el contraste no se mueve. ----------------------------------------------------------------------- */ @supports (color: oklch(from red l c h)) { :root, [data-ms-mode], [data-ms-scheme], [data-ms-contrast] { --ms-color_main: oklch(from var(--_ms-color_main_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_main_neutral: oklch(from var(--_ms-color_main_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_mainContent: oklch(from var(--_ms-color_mainContent_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_mainContent_neutral: oklch(from var(--_ms-color_mainContent_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_onMain: oklch(from var(--_ms-color_onMain_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_onMain_neutral: oklch(from var(--_ms-color_onMain_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_canvas: oklch(from var(--_ms-color_canvas_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_canvas_neutral: oklch(from var(--_ms-color_canvas_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_content: oklch(from var(--_ms-color_content_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_content_neutral: oklch(from var(--_ms-color_content_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_surface: oklch(from var(--_ms-color_surface_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_surface_neutral: oklch(from var(--_ms-color_surface_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_onSurface: oklch(from var(--_ms-color_onSurface_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_onSurface_neutral: oklch(from var(--_ms-color_onSurface_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_mantle: oklch(from var(--_ms-color_mantle_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_mantle_neutral: oklch(from var(--_ms-color_mantle_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_border: oklch(from var(--_ms-color_border_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_border_neutral: oklch(from var(--_ms-color_border_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); --ms-color_focus: oklch(from var(--_ms-color_focus_source) l calc(c * (1 - var(--_ms-color_neutralApplied) / 100)) h); --ms-color_focus_neutral: oklch(from var(--_ms-color_focus_source) l calc(c * (1 - var(--ms-color_neutral) / 100)) h); } } /* ----------------------------------------------------------------------- 8.7 Superficie: el elemento que declara un tipo de Contraste pinta su propio fondo con color_canvas y su texto con color_content. ----------------------------------------------------------------------- */ [data-ms-contrast] { background-color: var(--ms-color_canvas); color: var(--ms-color_content); } /* Borde elegido con data-ms-border (doc, Stroke > Borde): color_border por defecto */ :where([data-ms-border]) { border-color: var(--ms-color_border); } /* Sobre imagen el fondo es la imagen: la capa la pinta 8.10 */ [data-ms-contrast^="image"] { background-color: transparent; } /* ----------------------------------------------------------------------- 8.8 Anillo de foco — color_focus, con grosor y separación de Alias globales (doc, Accesibilidad > Anillo de foco). ----------------------------------------------------------------------- */ :root { --ms-focusRingWidth: var(--ms-stroke_2); --ms-focusRingOffset: var(--ms-spacing_2); } :focus-visible { outline: var(--ms-focusRingWidth) solid var(--ms-color_focus); outline-offset: var(--ms-focusRingOffset); } /* Foco que llegó con el puntero (lo marcan los scripts del sistema): sin anillo. */ [data-ms-focus="pointer"]:focus-visible { outline: none; } /* ----------------------------------------------------------------------- 8.9 Modificadores — giran el matiz de un color ya resuelto, con color relativo (doc, Colors > Modificadores). Gradients los toma de acá. ----------------------------------------------------------------------- */ :root { --ms-colorHue_minus45: -45; --ms-colorHue_minus30: -30; --ms-colorHue_minus15: -15; --ms-colorHue_0: 0; --ms-colorHue_plus15: 15; --ms-colorHue_plus30: 30; --ms-colorHue_plus45: 45; } /* ----------------------------------------------------------------------- 8.10 Contraste sobre imagen (doc, Colors > Contraste sobre imagen). data-ms-contrast="imageDark" o "imageLight" va en el contenedor que tiene la imagen y su texto. La imagen (img, picture o video, hijo directo) queda abajo de todo; encima, la capa que elige el Alias imageLayer: overlay el contenedor entero, con color_canvas en opacityRole_image; gradient cada hijo directo pinta esa misma capa en su caja y la desvanece hacia afuera a lo largo de imageLayerFade; blur overlay, más el desenfoque de imageLayerBlur detrás. El contraste lo garantiza siempre la opacidad mínima del color: el desenfoque y el desvanecido se suman, nunca la reemplazan. Las tres capas son banderas (0 o 1), así que se elige una sin selectores propios: el Tema las escribe en :root; data-ms-image-layer las cambia en un contenedor. ----------------------------------------------------------------------- */ :root { /* Proporcional al ancho del contenedor con la imagen (unidad cqi): el desvanecido acompaña al contenedor sin ajustarlo a mano. */ --ms-imageLayerFade: 25cqi; --ms-imageLayerBlur: var(--ms-effectBlur_5); --_ms-imageLayer_overlay: 1; --_ms-imageLayer_gradient: 0; --_ms-imageLayer_blur: 0; } [data-ms-image-layer="overlay"] { --_ms-imageLayer_overlay: 1; --_ms-imageLayer_gradient: 0; --_ms-imageLayer_blur: 0; } [data-ms-image-layer="gradient"] { --_ms-imageLayer_overlay: 0; --_ms-imageLayer_gradient: 1; --_ms-imageLayer_blur: 0; } [data-ms-image-layer="blur"] { --_ms-imageLayer_overlay: 0; --_ms-imageLayer_gradient: 0; --_ms-imageLayer_blur: 1; } [data-ms-contrast^="image"] { position: relative; isolation: isolate; overflow: hidden; /* Contenedor de consulta: da la medida de cqi a imageLayerFade */ container-type: inline-size; } [data-ms-contrast^="image"] > :is(img, picture, video) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -1; } /* overlay y blur: cubren el contenedor entero. Va en ::after, que ningún contenedor usa (Button usa ::before para su capa de estado), y por encima de la imagen. */ [data-ms-contrast^="image"]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in oklab, var(--ms-color_canvas) calc(var(--ms-opacityRole_image) * (var(--_ms-imageLayer_overlay) + var(--_ms-imageLayer_blur))), transparent); backdrop-filter: blur(calc(var(--ms-imageLayerBlur) * var(--_ms-imageLayer_blur))); } /* gradient: una capa radial alrededor de cada hijo directo, en su ::before. Dos máscaras se suman: el rectángulo exacto de la caja del hijo, que garantiza que todo su texto quede cubierto, y una elipse que pasa por las esquinas de la caja y se desvanece a lo largo de imageLayerFade, para que no se vea el recuadro. La elipse que pasa por las esquinas de un rectángulo mide √2 veces el rectángulo: de ahí el 20.72 % de cada lado y el 1.4144. Button y Card usan su ::before como capa de estado: siendo hijos directos, no la llevan. */ :where([data-ms-contrast^="image"] > :not(img, picture, video)) { position: relative; } :where([data-ms-contrast^="image"] > :not(img, picture, video, .ms-button, .ms-card))::before { content: ""; position: absolute; inset: calc(-20.72% - var(--ms-imageLayerFade)); z-index: -1; pointer-events: none; background: color-mix(in oklab, var(--ms-color_canvas) calc(var(--ms-opacityRole_image) * var(--_ms-imageLayer_gradient)), transparent); mask-image: linear-gradient(var(--ms-color_dark), var(--ms-color_dark)), radial-gradient(farthest-side, var(--ms-color_dark) calc(100% - var(--ms-imageLayerFade)), transparent); mask-size: calc((100% - 2 * var(--ms-imageLayerFade)) / 1.4144) calc((100% - 2 * var(--ms-imageLayerFade)) / 1.4144), 100% 100%; mask-position: center; mask-repeat: no-repeat; } /* ============================================================================= 9. EFFECTS ========================================================================= */ :root { --ms-effectOpacity_10: 10%; --ms-effectOpacity_20: 20%; --ms-effectOpacity_30: 30%; --ms-effectOpacity_40: 40%; --ms-effectOpacity_50: 50%; --ms-effectOpacity_60: 60%; --ms-effectOpacity_70: 70%; --ms-effectOpacity_80: 80%; --ms-effectOpacity_90: 90%; --ms-effectOpacity_100: 100%; --ms-effectBlur_0: 0; --ms-effectBlur_1: 1px; --ms-effectBlur_2: 2px; --ms-effectBlur_3: 4px; --ms-effectBlur_4: 6px; --ms-effectBlur_5: 8px; --ms-effectBlur_6: 12px; --ms-effectBlur_7: 16px; --ms-effectBlur_8: 24px; --ms-effectBlur_9: 32px; --ms-effectGlass_0: blur(0) saturate(100%); --ms-effectGlass_1: blur(1px) saturate(105%); --ms-effectGlass_2: blur(2px) saturate(110%); --ms-effectGlass_3: blur(3px) saturate(115%); --ms-effectGlass_4: blur(4px) saturate(120%); --ms-effectGlass_5: blur(6px) saturate(130%); --ms-effectGlass_6: blur(8px) saturate(140%); --ms-effectGlass_7: blur(12px) saturate(150%); --ms-effectGlass_8: blur(16px) saturate(160%); --ms-effectGlass_9: blur(20px) saturate(170%); } /* Sombras y resplandores (doc, Effects > Shadows): cada uno es la forma de dos capas, cerca (_near) y lejos (_far), sin color. La forma no depende del Esquema ni del Modo, así que se declara una sola vez. El color se arma en el Componente, donde se usa (ver --_ms-shadowColor), con los tres colores de abajo, que sí se resuelven en cada elemento de la cadena. La sombra de color (effectColorShadow) usa la forma de effectShadow. */ :root { --ms-effectShadow_0_near: 0 0 0 0; --ms-effectShadow_0_far: 0 0 0 0; --ms-effectShadow_1_near: 1px 1px 2px 0; --ms-effectShadow_1_far: 0 1px 2px 0; --ms-effectShadow_2_near: 1px 2px 4px -1px; --ms-effectShadow_2_far: 1px 2px 6px -1px; --ms-effectShadow_3_near: 2px 3px 6px -1px; --ms-effectShadow_3_far: 1px 3px 10px -2px; --ms-effectShadow_4_near: 3px 5px 10px -2px; --ms-effectShadow_4_far: 2px 5px 16px -3px; --ms-effectShadow_5_near: 4px 8px 16px -3px; --ms-effectShadow_5_far: 3px 8px 28px -4px; --ms-effectNeon_0_near: 0 0 0 0; --ms-effectNeon_0_far: 0 0 0 0; --ms-effectNeon_1_near: 0 0 4px 0; --ms-effectNeon_1_far: 0 0 8px 0; --ms-effectNeon_2_near: 0 0 8px 0; --ms-effectNeon_2_far: 0 0 16px 0; --ms-effectNeon_3_near: 0 0 12px 0; --ms-effectNeon_3_far: 0 0 24px 0; --ms-effectNeon_4_near: 0 0 20px 0; --ms-effectNeon_4_far: 0 0 40px 0; --ms-effectNeon_5_near: 0 0 32px 0; --ms-effectNeon_5_far: 0 0 64px 0; } @supports (color: oklch(from red l c h)) { :root, [data-ms-mode], [data-ms-scheme], [data-ms-contrast] { --ms-effectShadowColor_neutral: oklch(from var(--ms-color_dark) l c h / var(--ms-effectOpacity_20)); --ms-effectShadowColor_color: oklch(from var(--ms-color_vivid) l c h / var(--ms-effectOpacity_20)); --ms-effectNeonColor_color: oklch(from var(--ms-color_vivid) l c h / var(--ms-effectOpacity_50)); } } /* ============================================================================= 10. ICONS (doc, Foundations > Icons). Un icono se pide por su significado: data-ms-icon toma la variable --ms-icon_{nombre}, que tiene el dibujo de la Librería y el Estilo del Tema. Acá, la Librería por defecto (Lucide, outline); el compilador de Tema la reemplaza en ms.theme. Una línea por icono del Catálogo (Icons/icons.json). ========================================================================= */ :root { --ms-iconSize_s: var(--ms-spacing_16); --ms-iconSize_m: var(--ms-spacing_20); --ms-iconSize_l: var(--ms-spacing_24); --ms-iconSize_xl: var(--ms-spacing_32); --ms-icon_menu: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/menu.svg"); --ms-icon_close: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/x.svg"); --ms-icon_arrowBack: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/arrow-left.svg"); --ms-icon_arrowForward: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/arrow-right.svg"); --ms-icon_arrowUp: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/arrow-up.svg"); --ms-icon_arrowDown: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/arrow-down.svg"); --ms-icon_chevronLeft: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chevron-left.svg"); --ms-icon_chevronRight: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chevron-right.svg"); --ms-icon_chevronUp: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chevron-up.svg"); --ms-icon_chevronDown: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chevron-down.svg"); --ms-icon_home: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/house.svg"); --ms-icon_externalLink: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/external-link.svg"); --ms-icon_moreHorizontal: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/ellipsis.svg"); --ms-icon_moreVertical: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/ellipsis-vertical.svg"); --ms-icon_firstPage: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chevrons-left.svg"); --ms-icon_lastPage: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chevrons-right.svg"); --ms-icon_selector: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chevrons-up-down.svg"); --ms-icon_dragHandle: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/grip-vertical.svg"); --ms-icon_sidebar: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/panel-left.svg"); --ms-icon_search: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/search.svg"); --ms-icon_add: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/plus.svg"); --ms-icon_remove: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/minus.svg"); --ms-icon_edit: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/pencil.svg"); --ms-icon_delete: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/trash-2.svg"); --ms-icon_download: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/download.svg"); --ms-icon_upload: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/upload.svg"); --ms-icon_share: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/share-2.svg"); --ms-icon_copy: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/copy.svg"); --ms-icon_link: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/link.svg"); --ms-icon_filter: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/funnel.svg"); --ms-icon_sort: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/arrow-up-down.svg"); --ms-icon_refresh: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/refresh-cw.svg"); --ms-icon_settings: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/settings.svg"); --ms-icon_fullscreen: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/maximize.svg"); --ms-icon_save: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/save.svg"); --ms-icon_undo: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/undo-2.svg"); --ms-icon_redo: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/redo-2.svg"); --ms-icon_print: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/printer.svg"); --ms-icon_zoomIn: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/zoom-in.svg"); --ms-icon_zoomOut: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/zoom-out.svg"); --ms-icon_exitFullscreen: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/minimize.svg"); --ms-icon_clear: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/circle-x.svg"); --ms-icon_archive: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/archive.svg"); --ms-icon_pin: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/pin.svg"); --ms-icon_qrCode: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/qr-code.svg"); --ms-icon_check: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/check.svg"); --ms-icon_success: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/circle-check.svg"); --ms-icon_error: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/circle-alert.svg"); --ms-icon_warning: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/triangle-alert.svg"); --ms-icon_info: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/info.svg"); --ms-icon_help: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/circle-question-mark.svg"); --ms-icon_notification: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/bell.svg"); --ms-icon_lock: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/lock.svg"); --ms-icon_unlock: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/lock-open.svg"); --ms-icon_visible: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/eye.svg"); --ms-icon_hidden: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/eye-off.svg"); --ms-icon_loading: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/loader-circle.svg"); --ms-icon_blocked: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/ban.svg"); --ms-icon_flag: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/flag.svg"); --ms-icon_verified: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/badge-check.svg"); --ms-icon_notificationOff: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/bell-off.svg"); --ms-icon_security: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/shield.svg"); --ms-icon_play: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/play.svg"); --ms-icon_pause: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/pause.svg"); --ms-icon_volume: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/volume-2.svg"); --ms-icon_mute: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/volume-x.svg"); --ms-icon_image: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/image.svg"); --ms-icon_video: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/video.svg"); --ms-icon_music: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/music.svg"); --ms-icon_microphone: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/mic.svg"); --ms-icon_film: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/film.svg"); --ms-icon_theater: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/drama.svg"); --ms-icon_stop: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/square.svg"); --ms-icon_skipNext: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/skip-forward.svg"); --ms-icon_skipPrevious: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/skip-back.svg"); --ms-icon_camera: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/camera.svg"); --ms-icon_headphones: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/headphones.svg"); --ms-icon_live: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/radio.svg"); --ms-icon_subtitles: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/captions.svg"); --ms-icon_user: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/user.svg"); --ms-icon_users: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/users.svg"); --ms-icon_login: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/log-in.svg"); --ms-icon_logout: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/log-out.svg"); --ms-icon_mail: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/mail.svg"); --ms-icon_phone: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/phone.svg"); --ms-icon_chat: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/message-circle.svg"); --ms-icon_send: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/send.svg"); --ms-icon_userAdd: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/user-plus.svg"); --ms-icon_account: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/circle-user.svg"); --ms-icon_calendar: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/calendar.svg"); --ms-icon_clock: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/clock.svg"); --ms-icon_ticket: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/ticket.svg"); --ms-icon_location: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/map-pin.svg"); --ms-icon_map: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/map.svg"); --ms-icon_globe: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/globe.svg"); --ms-icon_language: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/languages.svg"); --ms-icon_history: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/history.svg"); --ms-icon_duration: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/hourglass.svg"); --ms-icon_reservation: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/calendar-check.svg"); --ms-icon_directions: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/navigation.svg"); --ms-icon_venue: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/building-2.svg"); --ms-icon_file: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/file-text.svg"); --ms-icon_folder: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/folder.svg"); --ms-icon_attachment: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/paperclip.svg"); --ms-icon_cart: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/shopping-cart.svg"); --ms-icon_payment: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/credit-card.svg"); --ms-icon_tag: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/tag.svg"); --ms-icon_receipt: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/receipt.svg"); --ms-icon_wallet: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/wallet.svg"); --ms-icon_gift: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/gift.svg"); --ms-icon_store: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/store.svg"); --ms-icon_discount: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/percent.svg"); --ms-icon_star: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/star.svg"); --ms-icon_favorite: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/heart.svg"); --ms-icon_bookmark: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/bookmark.svg"); --ms-icon_grid: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/layout-grid.svg"); --ms-icon_list: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/list.svg"); --ms-icon_lightMode: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/sun.svg"); --ms-icon_darkMode: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/moon.svg"); --ms-icon_accessibility: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/accessibility.svg"); --ms-icon_thumbsUp: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/thumbs-up.svg"); --ms-icon_thumbsDown: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/thumbs-down.svg"); --ms-icon_award: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/trophy.svg"); --ms-icon_news: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/newspaper.svg"); --ms-icon_book: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/book-open.svg"); --ms-icon_quote: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/quote.svg"); --ms-icon_featured: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/sparkles.svg"); --ms-icon_dashboard: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/layout-dashboard.svg"); --ms-icon_chart: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/chart-column.svg"); --ms-icon_table: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/table.svg"); --ms-icon_layers: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/layers.svg"); --ms-icon_bold: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/bold.svg"); --ms-icon_italic: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/italic.svg"); --ms-icon_underline: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/underline.svg"); --ms-icon_alignLeft: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/text-align-start.svg"); --ms-icon_alignCenter: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/text-align-center.svg"); --ms-icon_alignRight: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/text-align-end.svg"); --ms-icon_listOrdered: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/list-ordered.svg"); --ms-icon_heading: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/heading.svg"); --ms-icon_code: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/code.svg"); --ms-icon_desktop: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/monitor.svg"); --ms-icon_mobile: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/smartphone.svg"); --ms-icon_cloud: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/cloud.svg"); --ms-icon_key: url("https://cdn.jsdelivr.net/npm/lucide-static@1.45.0/icons/key.svg"); } [data-ms-icon="menu"] { --ms-iconImage: var(--ms-icon_menu); } [data-ms-icon="close"] { --ms-iconImage: var(--ms-icon_close); } [data-ms-icon="arrowBack"] { --ms-iconImage: var(--ms-icon_arrowBack); } [data-ms-icon="arrowForward"] { --ms-iconImage: var(--ms-icon_arrowForward); } [data-ms-icon="arrowUp"] { --ms-iconImage: var(--ms-icon_arrowUp); } [data-ms-icon="arrowDown"] { --ms-iconImage: var(--ms-icon_arrowDown); } [data-ms-icon="chevronLeft"] { --ms-iconImage: var(--ms-icon_chevronLeft); } [data-ms-icon="chevronRight"] { --ms-iconImage: var(--ms-icon_chevronRight); } [data-ms-icon="chevronUp"] { --ms-iconImage: var(--ms-icon_chevronUp); } [data-ms-icon="chevronDown"] { --ms-iconImage: var(--ms-icon_chevronDown); } [data-ms-icon="home"] { --ms-iconImage: var(--ms-icon_home); } [data-ms-icon="externalLink"] { --ms-iconImage: var(--ms-icon_externalLink); } [data-ms-icon="moreHorizontal"] { --ms-iconImage: var(--ms-icon_moreHorizontal); } [data-ms-icon="moreVertical"] { --ms-iconImage: var(--ms-icon_moreVertical); } [data-ms-icon="firstPage"] { --ms-iconImage: var(--ms-icon_firstPage); } [data-ms-icon="lastPage"] { --ms-iconImage: var(--ms-icon_lastPage); } [data-ms-icon="selector"] { --ms-iconImage: var(--ms-icon_selector); } [data-ms-icon="dragHandle"] { --ms-iconImage: var(--ms-icon_dragHandle); } [data-ms-icon="sidebar"] { --ms-iconImage: var(--ms-icon_sidebar); } [data-ms-icon="search"] { --ms-iconImage: var(--ms-icon_search); } [data-ms-icon="add"] { --ms-iconImage: var(--ms-icon_add); } [data-ms-icon="remove"] { --ms-iconImage: var(--ms-icon_remove); } [data-ms-icon="edit"] { --ms-iconImage: var(--ms-icon_edit); } [data-ms-icon="delete"] { --ms-iconImage: var(--ms-icon_delete); } [data-ms-icon="download"] { --ms-iconImage: var(--ms-icon_download); } [data-ms-icon="upload"] { --ms-iconImage: var(--ms-icon_upload); } [data-ms-icon="share"] { --ms-iconImage: var(--ms-icon_share); } [data-ms-icon="copy"] { --ms-iconImage: var(--ms-icon_copy); } [data-ms-icon="link"] { --ms-iconImage: var(--ms-icon_link); } [data-ms-icon="filter"] { --ms-iconImage: var(--ms-icon_filter); } [data-ms-icon="sort"] { --ms-iconImage: var(--ms-icon_sort); } [data-ms-icon="refresh"] { --ms-iconImage: var(--ms-icon_refresh); } [data-ms-icon="settings"] { --ms-iconImage: var(--ms-icon_settings); } [data-ms-icon="fullscreen"] { --ms-iconImage: var(--ms-icon_fullscreen); } [data-ms-icon="save"] { --ms-iconImage: var(--ms-icon_save); } [data-ms-icon="undo"] { --ms-iconImage: var(--ms-icon_undo); } [data-ms-icon="redo"] { --ms-iconImage: var(--ms-icon_redo); } [data-ms-icon="print"] { --ms-iconImage: var(--ms-icon_print); } [data-ms-icon="zoomIn"] { --ms-iconImage: var(--ms-icon_zoomIn); } [data-ms-icon="zoomOut"] { --ms-iconImage: var(--ms-icon_zoomOut); } [data-ms-icon="exitFullscreen"] { --ms-iconImage: var(--ms-icon_exitFullscreen); } [data-ms-icon="clear"] { --ms-iconImage: var(--ms-icon_clear); } [data-ms-icon="archive"] { --ms-iconImage: var(--ms-icon_archive); } [data-ms-icon="pin"] { --ms-iconImage: var(--ms-icon_pin); } [data-ms-icon="qrCode"] { --ms-iconImage: var(--ms-icon_qrCode); } [data-ms-icon="check"] { --ms-iconImage: var(--ms-icon_check); } [data-ms-icon="success"] { --ms-iconImage: var(--ms-icon_success); } [data-ms-icon="error"] { --ms-iconImage: var(--ms-icon_error); } [data-ms-icon="warning"] { --ms-iconImage: var(--ms-icon_warning); } [data-ms-icon="info"] { --ms-iconImage: var(--ms-icon_info); } [data-ms-icon="help"] { --ms-iconImage: var(--ms-icon_help); } [data-ms-icon="notification"] { --ms-iconImage: var(--ms-icon_notification); } [data-ms-icon="lock"] { --ms-iconImage: var(--ms-icon_lock); } [data-ms-icon="unlock"] { --ms-iconImage: var(--ms-icon_unlock); } [data-ms-icon="visible"] { --ms-iconImage: var(--ms-icon_visible); } [data-ms-icon="hidden"] { --ms-iconImage: var(--ms-icon_hidden); } [data-ms-icon="loading"] { --ms-iconImage: var(--ms-icon_loading); } [data-ms-icon="blocked"] { --ms-iconImage: var(--ms-icon_blocked); } [data-ms-icon="flag"] { --ms-iconImage: var(--ms-icon_flag); } [data-ms-icon="verified"] { --ms-iconImage: var(--ms-icon_verified); } [data-ms-icon="notificationOff"] { --ms-iconImage: var(--ms-icon_notificationOff); } [data-ms-icon="security"] { --ms-iconImage: var(--ms-icon_security); } [data-ms-icon="play"] { --ms-iconImage: var(--ms-icon_play); } [data-ms-icon="pause"] { --ms-iconImage: var(--ms-icon_pause); } [data-ms-icon="volume"] { --ms-iconImage: var(--ms-icon_volume); } [data-ms-icon="mute"] { --ms-iconImage: var(--ms-icon_mute); } [data-ms-icon="image"] { --ms-iconImage: var(--ms-icon_image); } [data-ms-icon="video"] { --ms-iconImage: var(--ms-icon_video); } [data-ms-icon="music"] { --ms-iconImage: var(--ms-icon_music); } [data-ms-icon="microphone"] { --ms-iconImage: var(--ms-icon_microphone); } [data-ms-icon="film"] { --ms-iconImage: var(--ms-icon_film); } [data-ms-icon="theater"] { --ms-iconImage: var(--ms-icon_theater); } [data-ms-icon="stop"] { --ms-iconImage: var(--ms-icon_stop); } [data-ms-icon="skipNext"] { --ms-iconImage: var(--ms-icon_skipNext); } [data-ms-icon="skipPrevious"] { --ms-iconImage: var(--ms-icon_skipPrevious); } [data-ms-icon="camera"] { --ms-iconImage: var(--ms-icon_camera); } [data-ms-icon="headphones"] { --ms-iconImage: var(--ms-icon_headphones); } [data-ms-icon="live"] { --ms-iconImage: var(--ms-icon_live); } [data-ms-icon="subtitles"] { --ms-iconImage: var(--ms-icon_subtitles); } [data-ms-icon="user"] { --ms-iconImage: var(--ms-icon_user); } [data-ms-icon="users"] { --ms-iconImage: var(--ms-icon_users); } [data-ms-icon="login"] { --ms-iconImage: var(--ms-icon_login); } [data-ms-icon="logout"] { --ms-iconImage: var(--ms-icon_logout); } [data-ms-icon="mail"] { --ms-iconImage: var(--ms-icon_mail); } [data-ms-icon="phone"] { --ms-iconImage: var(--ms-icon_phone); } [data-ms-icon="chat"] { --ms-iconImage: var(--ms-icon_chat); } [data-ms-icon="send"] { --ms-iconImage: var(--ms-icon_send); } [data-ms-icon="userAdd"] { --ms-iconImage: var(--ms-icon_userAdd); } [data-ms-icon="account"] { --ms-iconImage: var(--ms-icon_account); } [data-ms-icon="calendar"] { --ms-iconImage: var(--ms-icon_calendar); } [data-ms-icon="clock"] { --ms-iconImage: var(--ms-icon_clock); } [data-ms-icon="ticket"] { --ms-iconImage: var(--ms-icon_ticket); } [data-ms-icon="location"] { --ms-iconImage: var(--ms-icon_location); } [data-ms-icon="map"] { --ms-iconImage: var(--ms-icon_map); } [data-ms-icon="globe"] { --ms-iconImage: var(--ms-icon_globe); } [data-ms-icon="language"] { --ms-iconImage: var(--ms-icon_language); } [data-ms-icon="history"] { --ms-iconImage: var(--ms-icon_history); } [data-ms-icon="duration"] { --ms-iconImage: var(--ms-icon_duration); } [data-ms-icon="reservation"] { --ms-iconImage: var(--ms-icon_reservation); } [data-ms-icon="directions"] { --ms-iconImage: var(--ms-icon_directions); } [data-ms-icon="venue"] { --ms-iconImage: var(--ms-icon_venue); } [data-ms-icon="file"] { --ms-iconImage: var(--ms-icon_file); } [data-ms-icon="folder"] { --ms-iconImage: var(--ms-icon_folder); } [data-ms-icon="attachment"] { --ms-iconImage: var(--ms-icon_attachment); } [data-ms-icon="cart"] { --ms-iconImage: var(--ms-icon_cart); } [data-ms-icon="payment"] { --ms-iconImage: var(--ms-icon_payment); } [data-ms-icon="tag"] { --ms-iconImage: var(--ms-icon_tag); } [data-ms-icon="receipt"] { --ms-iconImage: var(--ms-icon_receipt); } [data-ms-icon="wallet"] { --ms-iconImage: var(--ms-icon_wallet); } [data-ms-icon="gift"] { --ms-iconImage: var(--ms-icon_gift); } [data-ms-icon="store"] { --ms-iconImage: var(--ms-icon_store); } [data-ms-icon="discount"] { --ms-iconImage: var(--ms-icon_discount); } [data-ms-icon="star"] { --ms-iconImage: var(--ms-icon_star); } [data-ms-icon="favorite"] { --ms-iconImage: var(--ms-icon_favorite); } [data-ms-icon="bookmark"] { --ms-iconImage: var(--ms-icon_bookmark); } [data-ms-icon="grid"] { --ms-iconImage: var(--ms-icon_grid); } [data-ms-icon="list"] { --ms-iconImage: var(--ms-icon_list); } [data-ms-icon="lightMode"] { --ms-iconImage: var(--ms-icon_lightMode); } [data-ms-icon="darkMode"] { --ms-iconImage: var(--ms-icon_darkMode); } [data-ms-icon="accessibility"] { --ms-iconImage: var(--ms-icon_accessibility); } [data-ms-icon="thumbsUp"] { --ms-iconImage: var(--ms-icon_thumbsUp); } [data-ms-icon="thumbsDown"] { --ms-iconImage: var(--ms-icon_thumbsDown); } [data-ms-icon="award"] { --ms-iconImage: var(--ms-icon_award); } [data-ms-icon="news"] { --ms-iconImage: var(--ms-icon_news); } [data-ms-icon="book"] { --ms-iconImage: var(--ms-icon_book); } [data-ms-icon="quote"] { --ms-iconImage: var(--ms-icon_quote); } [data-ms-icon="featured"] { --ms-iconImage: var(--ms-icon_featured); } [data-ms-icon="dashboard"] { --ms-iconImage: var(--ms-icon_dashboard); } [data-ms-icon="chart"] { --ms-iconImage: var(--ms-icon_chart); } [data-ms-icon="table"] { --ms-iconImage: var(--ms-icon_table); } [data-ms-icon="layers"] { --ms-iconImage: var(--ms-icon_layers); } [data-ms-icon="bold"] { --ms-iconImage: var(--ms-icon_bold); } [data-ms-icon="italic"] { --ms-iconImage: var(--ms-icon_italic); } [data-ms-icon="underline"] { --ms-iconImage: var(--ms-icon_underline); } [data-ms-icon="alignLeft"] { --ms-iconImage: var(--ms-icon_alignLeft); } [data-ms-icon="alignCenter"] { --ms-iconImage: var(--ms-icon_alignCenter); } [data-ms-icon="alignRight"] { --ms-iconImage: var(--ms-icon_alignRight); } [data-ms-icon="listOrdered"] { --ms-iconImage: var(--ms-icon_listOrdered); } [data-ms-icon="heading"] { --ms-iconImage: var(--ms-icon_heading); } [data-ms-icon="code"] { --ms-iconImage: var(--ms-icon_code); } [data-ms-icon="desktop"] { --ms-iconImage: var(--ms-icon_desktop); } [data-ms-icon="mobile"] { --ms-iconImage: var(--ms-icon_mobile); } [data-ms-icon="cloud"] { --ms-iconImage: var(--ms-icon_cloud); } [data-ms-icon="key"] { --ms-iconImage: var(--ms-icon_key); } /* ============================================================================= 11. INTERACTIONS — action (doc, Foundations > Interactions). Un elemento accionable declara su variante con data-ms-action; la variante le da su aspecto enabled, su capa de estado (::before) y su reacción en hover, selected y pressed. Un Button sin data-ms-action es filled. El Estilo de transición de cada variante lo elige el Tema con su Alias (actionFilledTransition, …): el compilador escribe en ms.theme las reglas de esa variante con la misma plantilla que armó las de abajo. ========================================================================= */ :root { --ms-actionShadow_near: var(--ms-shadowRole_action_near); --ms-actionShadow_far: var(--ms-shadowRole_action_far); --ms-actionShadow_color: var(--ms-shadowRole_action_color); --ms-actionShadow_neon: var(--ms-shadowRole_action_neon); --ms-actionFloatingShadow_near: var(--ms-shadowRole_floating_near); --ms-actionFloatingShadow_far: var(--ms-shadowRole_floating_far); --ms-actionFloatingShadow_color: var(--ms-shadowRole_floating_color); --ms-actionFloatingShadow_neon: var(--ms-shadowRole_floating_neon); } /* Una variante define colores, no agrega bordes: outline y frame pintan el borde que el elemento ya tiene. selected no reacciona al cursor ni al presionar; el resaltado por teclado ([data-ms-active]) cuenta como hover. */ /* @generated interactions:variants — node designSystem/interactions.js. No se edita a mano. */ /* filled */ :is(:is([data-ms-action="filled"], .ms-button:not([data-ms-action]))) { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: var(--ms-color_main); --_ms-actionColor: var(--ms-color_onMain); --_ms-stateBase: var(--ms-color_main); --_ms-shadowColor: color-mix(in oklab, color-mix(in oklab, var(--ms-effectShadowColor_neutral), var(--ms-effectShadowColor_color) calc(var(--ms-actionShadow_color) * 100%)), var(--ms-effectNeonColor_color) calc(var(--ms-actionShadow_neon) * 100%)); --_ms-actionRestShadow: var(--ms-actionShadow_near) var(--_ms-shadowColor), var(--ms-actionShadow_far) var(--_ms-shadowColor); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } :is(:is([data-ms-action="filled"], .ms-button:not([data-ms-action])))::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } :is(:is([data-ms-action="filled"], .ms-button:not([data-ms-action]))):is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } :is(:is([data-ms-action="filled"], .ms-button:not([data-ms-action]))):is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; filter: var(--ms-motionTransition_darkness_hover); } :is(:is([data-ms-action="filled"], .ms-button:not([data-ms-action]))):is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; filter: var(--ms-motionTransition_darkness_selected); } :is(:is([data-ms-action="filled"], .ms-button:not([data-ms-action]))):active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; filter: var(--ms-motionTransition_darkness_pressed); } /* surface */ [data-ms-action="surface"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: var(--ms-color_surface); --_ms-actionColor: var(--ms-color_onSurface); --_ms-stateBase: var(--ms-color_surface); --_ms-shadowColor: color-mix(in oklab, color-mix(in oklab, var(--ms-effectShadowColor_neutral), var(--ms-effectShadowColor_color) calc(var(--ms-actionShadow_color) * 100%)), var(--ms-effectNeonColor_color) calc(var(--ms-actionShadow_neon) * 100%)); --_ms-actionRestShadow: var(--ms-actionShadow_near) var(--_ms-shadowColor), var(--ms-actionShadow_far) var(--_ms-shadowColor); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="surface"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="surface"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="surface"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; filter: var(--ms-motionTransition_darkness_hover); } [data-ms-action="surface"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; filter: var(--ms-motionTransition_darkness_selected); } [data-ms-action="surface"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; filter: var(--ms-motionTransition_darkness_pressed); } /* ghost */ [data-ms-action="ghost"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: transparent; --_ms-actionColor: var(--ms-color_mainContent); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="ghost"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="ghost"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="ghost"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; } [data-ms-action="ghost"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="ghost"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); } [data-ms-action="ghost"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="ghost"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); } /* content */ [data-ms-action="content"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: transparent; --_ms-actionColor: var(--ms-color_content); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="content"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="content"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="content"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; } [data-ms-action="content"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="content"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); } [data-ms-action="content"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="content"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); } /* outline */ [data-ms-action="outline"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: transparent; --_ms-actionColor: var(--ms-color_mainContent); --_ms-actionBorder: var(--ms-color_mainContent); border-color: var(--_ms-actionBorder); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="outline"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="outline"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="outline"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; } [data-ms-action="outline"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="outline"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); border-color: var(--ms-color_onSurface); } [data-ms-action="outline"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="outline"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); border-color: var(--ms-color_onSurface); } /* floating */ [data-ms-action="floating"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: var(--ms-color_main); --_ms-actionColor: var(--ms-color_onMain); --_ms-stateBase: var(--ms-color_main); --_ms-shadowColor: color-mix(in oklab, color-mix(in oklab, var(--ms-effectShadowColor_neutral), var(--ms-effectShadowColor_color) calc(var(--ms-actionFloatingShadow_color) * 100%)), var(--ms-effectNeonColor_color) calc(var(--ms-actionFloatingShadow_neon) * 100%)); --_ms-actionRestShadow: var(--ms-actionFloatingShadow_near) var(--_ms-shadowColor), var(--ms-actionFloatingShadow_far) var(--_ms-shadowColor); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="floating"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="floating"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="floating"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: var(--ms-motionTransition_elevation_hover_near) var(--_ms-shadowColor), var(--ms-motionTransition_elevation_hover_far) var(--_ms-shadowColor); } [data-ms-action="floating"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: var(--ms-motionTransition_elevation_selected_near) var(--_ms-shadowColor), var(--ms-motionTransition_elevation_selected_far) var(--_ms-shadowColor); } [data-ms-action="floating"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: var(--ms-motionTransition_elevation_pressed_near) var(--_ms-shadowColor), var(--ms-motionTransition_elevation_pressed_far) var(--_ms-shadowColor); } /* check */ [data-ms-action="check"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: transparent; --_ms-actionColor: var(--ms-color_content); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="check"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="check"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="check"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; } [data-ms-action="check"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="check"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); } [data-ms-action="check"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::after { content: ""; flex: none; margin-inline-start: auto; inline-size: var(--ms-iconSize_m); block-size: var(--ms-iconSize_m); background-color: var(--ms-color_mainContent); mask-image: var(--ms-icon_check); mask-size: contain; mask-position: center; mask-repeat: no-repeat; forced-color-adjust: none; } [data-ms-action="check"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)[data-ms-active]::before { opacity: 1; } /* underline */ [data-ms-action="underline"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: transparent; --_ms-actionColor: var(--ms-color_content); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="underline"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="underline"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="underline"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; } [data-ms-action="underline"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="underline"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); } [data-ms-action="underline"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_mainContent); } [data-ms-action="underline"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::after { content: ""; position: absolute; inset: auto 0 0; block-size: var(--_ms-actionLine, var(--ms-strokeRole_indicator)); background: var(--ms-color_mainContent); } /* pill */ [data-ms-action="pill"] { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: transparent; --_ms-actionColor: var(--ms-color_content); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="pill"]::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="pill"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; } [data-ms-action="pill"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; } [data-ms-action="pill"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); } [data-ms-action="pill"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); } [data-ms-action="pill"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { background: var(--ms-color_main); color: var(--ms-color_onMain); } /* link */ [data-ms-action="link"] { color: var(--ms-color_mainContent); text-decoration-line: var(--ms-typographyModifier_underline); text-decoration-thickness: var(--ms-stroke_1); } [data-ms-action="link"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { text-decoration-thickness: var(--ms-stroke_2); } [data-ms-action="link"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { filter: var(--ms-motionTransition_darkness_pressed); } [data-ms-action="link"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_content); text-decoration-line: none; } /* frame */ [data-ms-action="frame"] { border-color: var(--_ms-frameRest, var(--ms-color_border)); --_ms-frameStroke: var(--_ms-frameWidth, var(--ms-strokeRole_outline)); transition: border-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); } [data-ms-action="frame"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { border-color: var(--ms-color_mainContent); } [data-ms-action="frame"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate), [data-ms-action="frame"]:is(input, textarea):focus, [data-ms-action="frame"]:has(:is(input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"]), textarea):focus, [aria-expanded="true"]) { border-color: var(--ms-color_mainContent); --_ms-frameStroke: var(--_ms-frameSelectedWidth, var(--ms-strokeRole_indicator)); } /* toggle */ [data-ms-action="toggle"] { background-color: transparent; border-color: var(--ms-color_content); --_ms-toggleMark: var(--ms-color_content); } [data-ms-action="toggle"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: 0 0 0 var(--_ms-controlHaloSize) var(--ms-color_mantle); } [data-ms-action="toggle"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: 0 0 0 var(--_ms-controlHaloSize) var(--ms-color_surface); } [data-ms-action="toggle"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { background-color: var(--ms-color_main); border-color: var(--ms-color_main); --_ms-toggleMark: var(--ms-color_onMain); } /* choice */ [data-ms-action="choice"] { border-color: var(--ms-color_content); --_ms-choiceMark: var(--ms-color_mainContent); } [data-ms-action="choice"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: 0 0 0 var(--_ms-controlHaloSize) var(--ms-color_mantle); } [data-ms-action="choice"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { box-shadow: 0 0 0 var(--_ms-controlHaloSize) var(--ms-color_surface); } [data-ms-action="choice"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { border-color: var(--ms-color_mainContent); } /* indicator */ [data-ms-action="indicator"]::after { background-color: var(--ms-color_surface); } [data-ms-action="indicator"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::after { background-color: var(--ms-color_mainContent); } [data-ms-action="indicator"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::after { background-color: var(--ms-color_mainContent); } /* row */ [data-ms-action="row"]:is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) > * { background-color: var(--ms-color_mantle); } [data-ms-action="row"]:is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) > *, [data-ms-action="row"]:active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) > * { background-color: var(--ms-color_surface); color: var(--ms-color_onSurface); } /* @end interactions:variants */ /* ============================================================================= 12. COMÚN A LOS COMPONENTES (doc, Consumo > Componentes). Cada Componente tiene su CSS en components/{nombre}/{nombre}.css, con los valores por defecto de sus Alias; acá queda lo que usan varios. Ningún Componente tiene márgenes propios: la separación la pone su contenedor. ========================================================================= */ :root { /* Alto de un control en tamaño m: el mínimo de accesibilidad de lo que se toca, igual en Button y en los campos */ --_ms-controlHeight_m: var(--ms-spacing_44); /* Ancho del halo de toggle y choice (sección 11) */ --_ms-controlHaloSize: var(--ms-spacing_8); } /* Roles de Sombras (doc, Tema > Roles), en sus cuatro partes: forma de las dos capas y banderas de color (_color: sombra de color; _neon: resplandor). */ :root { --ms-shadowRole_action_near: var(--ms-effectShadow_0_near); --ms-shadowRole_action_far: var(--ms-effectShadow_0_far); --ms-shadowRole_action_color: 0; --ms-shadowRole_action_neon: 0; --ms-shadowRole_region_near: var(--ms-effectShadow_2_near); --ms-shadowRole_region_far: var(--ms-effectShadow_2_far); --ms-shadowRole_region_color: 0; --ms-shadowRole_region_neon: 0; --ms-shadowRole_floating_near: var(--ms-effectShadow_3_near); --ms-shadowRole_floating_far: var(--ms-effectShadow_3_far); --ms-shadowRole_floating_color: 0; --ms-shadowRole_floating_neon: 0; } /* Oculto a la vista, presente para el teclado, los lectores y el formulario */ [data-ms-slot="nativeInput"] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Un Button o una lista que el Componente oculta, se oculta aunque su clase le dé display */ :is(.ms-button, ms-file-upload [data-ms-slot="files"])[hidden] { display: none; } /* Tamaño del texto y movimiento elegidos en Accessibility Menu */ :root[data-ms-text-scale="l"] { font-size: var(--ms-typographySize_18); } :root[data-ms-text-scale="xl"] { font-size: var(--ms-typographySize_20); } /* Contraste alto: elegido en Accessibility Menu o pedido por el sistema, toda la página pasa a colorContrast_highest, salvo los bloques solid */ :root[data-ms-high-contrast], :root[data-ms-high-contrast] [data-ms-contrast]:not([data-ms-contrast="solid"], [data-ms-contrast^="image"]) { --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 1; --_ms-contrast_solid: 0; } @media (prefers-contrast: more) { :root, [data-ms-contrast]:not([data-ms-contrast="solid"], [data-ms-contrast^="image"]) { --_ms-contrast_mantle: 0; --_ms-contrast_low: 0; --_ms-contrast_highest: 1; --_ms-contrast_solid: 0; } } :root[data-ms-motion="reduce"] *, :root[data-ms-motion="reduce"] *::before, :root[data-ms-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Aspect ratio elegida con data-ms-ratio (Image, Skeleton block, Card, Gallery) */ [data-ms-ratio="1x1"] { --_ms-ratio: var(--ms-shapeAspectRatio_1x1); } [data-ms-ratio="16x9"] { --_ms-ratio: var(--ms-shapeAspectRatio_16x9); } [data-ms-ratio="4x3"] { --_ms-ratio: var(--ms-shapeAspectRatio_4x3); } [data-ms-ratio="3x4"] { --_ms-ratio: var(--ms-shapeAspectRatio_3x4); } [data-ms-ratio="21x13"] { --_ms-ratio: var(--ms-shapeAspectRatio_21x13); } [data-ms-ratio="21x9"] { --_ms-ratio: var(--ms-shapeAspectRatio_21x9); } [data-ms-ratio="9x16"] { --_ms-ratio: var(--ms-shapeAspectRatio_9x16); } [data-ms-ratio="13x21"] { --_ms-ratio: var(--ms-shapeAspectRatio_13x21); } } /* ============================================================================= ATRIBUTOS DE FOUNDATIONS: texto (doc, Typography > Atributos de texto), borde (Stroke > Borde) y sombra (Effects > Shadows). Capa propia, después del Tema: un atributo sobre un elemento le gana a lo que pone su Componente. Dentro de la capa, los atributos sueltos de texto van después de data-ms-text-style, así le ganan sobre un mismo elemento. Lo que tiene adentro hereda los de texto. ========================================================================= */ @layer ms.attributes { [data-ms-text-style="displayL"] { font-family: var(--ms-textStyle_displayL_family); font-size: var(--ms-textStyle_displayL_size); line-height: var(--ms-textStyle_displayL_lineHeight); font-weight: var(--ms-textStyle_displayL_weight); } [data-ms-text-style="displayM"] { font-family: var(--ms-textStyle_displayM_family); font-size: var(--ms-textStyle_displayM_size); line-height: var(--ms-textStyle_displayM_lineHeight); font-weight: var(--ms-textStyle_displayM_weight); } [data-ms-text-style="displayS"] { font-family: var(--ms-textStyle_displayS_family); font-size: var(--ms-textStyle_displayS_size); line-height: var(--ms-textStyle_displayS_lineHeight); font-weight: var(--ms-textStyle_displayS_weight); } [data-ms-text-style="headlineL"] { font-family: var(--ms-textStyle_headlineL_family); font-size: var(--ms-textStyle_headlineL_size); line-height: var(--ms-textStyle_headlineL_lineHeight); font-weight: var(--ms-textStyle_headlineL_weight); } [data-ms-text-style="headlineM"] { font-family: var(--ms-textStyle_headlineM_family); font-size: var(--ms-textStyle_headlineM_size); line-height: var(--ms-textStyle_headlineM_lineHeight); font-weight: var(--ms-textStyle_headlineM_weight); } [data-ms-text-style="headlineS"] { font-family: var(--ms-textStyle_headlineS_family); font-size: var(--ms-textStyle_headlineS_size); line-height: var(--ms-textStyle_headlineS_lineHeight); font-weight: var(--ms-textStyle_headlineS_weight); } [data-ms-text-style="titleL"] { font-family: var(--ms-textStyle_titleL_family); font-size: var(--ms-textStyle_titleL_size); line-height: var(--ms-textStyle_titleL_lineHeight); font-weight: var(--ms-textStyle_titleL_weight); } [data-ms-text-style="titleM"] { font-family: var(--ms-textStyle_titleM_family); font-size: var(--ms-textStyle_titleM_size); line-height: var(--ms-textStyle_titleM_lineHeight); font-weight: var(--ms-textStyle_titleM_weight); } [data-ms-text-style="titleS"] { font-family: var(--ms-textStyle_titleS_family); font-size: var(--ms-textStyle_titleS_size); line-height: var(--ms-textStyle_titleS_lineHeight); font-weight: var(--ms-textStyle_titleS_weight); } [data-ms-text-style="bodyL"] { font-family: var(--ms-textStyle_bodyL_family); font-size: var(--ms-textStyle_bodyL_size); line-height: var(--ms-textStyle_bodyL_lineHeight); font-weight: var(--ms-textStyle_bodyL_weight); } [data-ms-text-style="bodyM"] { font-family: var(--ms-textStyle_bodyM_family); font-size: var(--ms-textStyle_bodyM_size); line-height: var(--ms-textStyle_bodyM_lineHeight); font-weight: var(--ms-textStyle_bodyM_weight); } [data-ms-text-style="bodyS"] { font-family: var(--ms-textStyle_bodyS_family); font-size: var(--ms-textStyle_bodyS_size); line-height: var(--ms-textStyle_bodyS_lineHeight); font-weight: var(--ms-textStyle_bodyS_weight); } [data-ms-text-style="labelL"] { font-family: var(--ms-textStyle_labelL_family); font-size: var(--ms-textStyle_labelL_size); line-height: var(--ms-textStyle_labelL_lineHeight); font-weight: var(--ms-textStyle_labelL_weight); } [data-ms-text-style="labelM"] { font-family: var(--ms-textStyle_labelM_family); font-size: var(--ms-textStyle_labelM_size); line-height: var(--ms-textStyle_labelM_lineHeight); font-weight: var(--ms-textStyle_labelM_weight); } [data-ms-text-style="labelS"] { font-family: var(--ms-textStyle_labelS_family); font-size: var(--ms-textStyle_labelS_size); line-height: var(--ms-textStyle_labelS_lineHeight); font-weight: var(--ms-textStyle_labelS_weight); } [data-ms-text-style="code"] { font-family: var(--ms-textStyle_code_family); font-size: var(--ms-textStyle_code_size); line-height: var(--ms-textStyle_code_lineHeight); font-weight: var(--ms-textStyle_code_weight); } [data-ms-font-family="sans"] { font-family: var(--ms-typographyFamily_sans); } [data-ms-font-family="serif"] { font-family: var(--ms-typographyFamily_serif); } [data-ms-font-family="slab"] { font-family: var(--ms-typographyFamily_slab); } [data-ms-font-family="hand"] { font-family: var(--ms-typographyFamily_hand); } [data-ms-font-family="mono"] { font-family: var(--ms-typographyFamily_mono); } [data-ms-font-size="11"] { font-size: var(--ms-typographySize_11); } [data-ms-font-size="12"] { font-size: var(--ms-typographySize_12); } [data-ms-font-size="14"] { font-size: var(--ms-typographySize_14); } [data-ms-font-size="16"] { font-size: var(--ms-typographySize_16); } [data-ms-font-size="18"] { font-size: var(--ms-typographySize_18); } [data-ms-font-size="20"] { font-size: var(--ms-typographySize_20); } [data-ms-font-size="24"] { font-size: var(--ms-typographySize_24); } [data-ms-font-size="28"] { font-size: var(--ms-typographySize_28); } [data-ms-font-size="32"] { font-size: var(--ms-typographySize_32); } [data-ms-font-size="36"] { font-size: var(--ms-typographySize_36); } [data-ms-font-size="40"] { font-size: var(--ms-typographySize_40); } [data-ms-font-size="48"] { font-size: var(--ms-typographySize_48); } [data-ms-font-size="56"] { font-size: var(--ms-typographySize_56); } [data-ms-font-size="64"] { font-size: var(--ms-typographySize_64); } [data-ms-font-size="80"] { font-size: var(--ms-typographySize_80); } [data-ms-font-size="96"] { font-size: var(--ms-typographySize_96); } [data-ms-line-height="90"] { line-height: var(--ms-typographyLineHeight_90); } [data-ms-line-height="100"] { line-height: var(--ms-typographyLineHeight_100); } [data-ms-line-height="120"] { line-height: var(--ms-typographyLineHeight_120); } [data-ms-line-height="130"] { line-height: var(--ms-typographyLineHeight_130); } [data-ms-line-height="150"] { line-height: var(--ms-typographyLineHeight_150); } [data-ms-line-height="170"] { line-height: var(--ms-typographyLineHeight_170); } [data-ms-font-weight="100"] { font-weight: var(--ms-typographyWeight_100); } [data-ms-font-weight="200"] { font-weight: var(--ms-typographyWeight_200); } [data-ms-font-weight="300"] { font-weight: var(--ms-typographyWeight_300); } [data-ms-font-weight="400"] { font-weight: var(--ms-typographyWeight_400); } [data-ms-font-weight="500"] { font-weight: var(--ms-typographyWeight_500); } [data-ms-font-weight="600"] { font-weight: var(--ms-typographyWeight_600); } [data-ms-font-weight="700"] { font-weight: var(--ms-typographyWeight_700); } [data-ms-font-weight="800"] { font-weight: var(--ms-typographyWeight_800); } [data-ms-font-weight="900"] { font-weight: var(--ms-typographyWeight_900); } [data-ms-font-modifier~="italic"] { font-style: var(--ms-typographyModifier_italic); } [data-ms-font-modifier~="underline"] { text-decoration-line: var(--ms-typographyModifier_underline); } [data-ms-font-modifier~="lineThrough"] { text-decoration-line: var(--ms-typographyModifier_lineThrough); } [data-ms-font-modifier~="underline"][data-ms-font-modifier~="lineThrough"] { text-decoration-line: var(--ms-typographyModifier_underline) var(--ms-typographyModifier_lineThrough); } [data-ms-font-modifier~="uppercase"] { text-transform: var(--ms-typographyModifier_uppercase); } [data-ms-text-align="start"] { text-align: var(--ms-typographyAlign_start); } [data-ms-text-align="center"] { text-align: var(--ms-typographyAlign_center); } [data-ms-text-align="end"] { text-align: var(--ms-typographyAlign_end); } /* Opacidad del texto: un Rol de opacidad de texto, sobre el color que el texto ya tiene. En los Contrastes Low y sobre imagen el Rol vale 100 % (doc, Tema > Roles de opacidad). */ [data-ms-text-opacity="muted"] { color: color-mix(in oklab, currentColor var(--ms-opacityRole_muted), transparent); } /* Borde (doc, Stroke > Borde): los lados con data-ms-border, el grosor con data-ms-stroke (sin él, strokeRole_outline) y el color con data-ms-border-color. El color por defecto va en ms.system, sin especificidad: en un elemento accionable se lo da el estado de su variante. */ [data-ms-border] { border-style: solid; border-width: 0; } [data-ms-border="all"] { border-width: var(--_ms-borderStroke, var(--ms-strokeRole_outline)); } [data-ms-border="block"] { border-block-width: var(--_ms-borderStroke, var(--ms-strokeRole_outline)); } [data-ms-border="inline"] { border-inline-width: var(--_ms-borderStroke, var(--ms-strokeRole_outline)); } [data-ms-border="block-start"] { border-block-start-width: var(--_ms-borderStroke, var(--ms-strokeRole_outline)); } [data-ms-border="block-end"] { border-block-end-width: var(--_ms-borderStroke, var(--ms-strokeRole_outline)); } [data-ms-border="inline-start"] { border-inline-start-width: var(--_ms-borderStroke, var(--ms-strokeRole_outline)); } [data-ms-border="inline-end"] { border-inline-end-width: var(--_ms-borderStroke, var(--ms-strokeRole_outline)); } [data-ms-stroke="1"] { --_ms-borderStroke: var(--ms-stroke_1); } [data-ms-stroke="2"] { --_ms-borderStroke: var(--ms-stroke_2); } [data-ms-stroke="3"] { --_ms-borderStroke: var(--ms-stroke_3); } [data-ms-stroke="4"] { --_ms-borderStroke: var(--ms-stroke_4); } [data-ms-stroke="5"] { --_ms-borderStroke: var(--ms-stroke_5); } [data-ms-stroke="6"] { --_ms-borderStroke: var(--ms-stroke_6); } [data-ms-stroke="7"] { --_ms-borderStroke: var(--ms-stroke_7); } [data-ms-stroke="8"] { --_ms-borderStroke: var(--ms-stroke_8); } [data-ms-stroke="9"] { --_ms-borderStroke: var(--ms-stroke_9); } [data-ms-stroke="10"] { --_ms-borderStroke: var(--ms-stroke_10); } [data-ms-border-color="border"] { border-color: var(--ms-color_border); } [data-ms-border-color="neutral"] { border-color: var(--ms-color_border_neutral, var(--ms-color_border)); } [data-ms-border-color="content"] { border-color: var(--ms-color_content); } [data-ms-border-color="main"] { border-color: var(--ms-color_main); } /* Tamaño (doc, Layouts > Tamaño): ancho y alto con la escala de Spacing. Un ancho nunca supera el de su contenedor. Una imagen con ancho y alto recorta sin deformarse. */ [data-ms-width="0"] { inline-size: var(--ms-spacing_0); max-inline-size: 100%; } [data-ms-width="2"] { inline-size: var(--ms-spacing_2); max-inline-size: 100%; } [data-ms-width="4"] { inline-size: var(--ms-spacing_4); max-inline-size: 100%; } [data-ms-width="8"] { inline-size: var(--ms-spacing_8); max-inline-size: 100%; } [data-ms-width="12"] { inline-size: var(--ms-spacing_12); max-inline-size: 100%; } [data-ms-width="16"] { inline-size: var(--ms-spacing_16); max-inline-size: 100%; } [data-ms-width="20"] { inline-size: var(--ms-spacing_20); max-inline-size: 100%; } [data-ms-width="24"] { inline-size: var(--ms-spacing_24); max-inline-size: 100%; } [data-ms-width="28"] { inline-size: var(--ms-spacing_28); max-inline-size: 100%; } [data-ms-width="32"] { inline-size: var(--ms-spacing_32); max-inline-size: 100%; } [data-ms-width="36"] { inline-size: var(--ms-spacing_36); max-inline-size: 100%; } [data-ms-width="40"] { inline-size: var(--ms-spacing_40); max-inline-size: 100%; } [data-ms-width="44"] { inline-size: var(--ms-spacing_44); max-inline-size: 100%; } [data-ms-width="48"] { inline-size: var(--ms-spacing_48); max-inline-size: 100%; } [data-ms-width="56"] { inline-size: var(--ms-spacing_56); max-inline-size: 100%; } [data-ms-width="64"] { inline-size: var(--ms-spacing_64); max-inline-size: 100%; } [data-ms-width="72"] { inline-size: var(--ms-spacing_72); max-inline-size: 100%; } [data-ms-width="80"] { inline-size: var(--ms-spacing_80); max-inline-size: 100%; } [data-ms-width="96"] { inline-size: var(--ms-spacing_96); max-inline-size: 100%; } [data-ms-width="128"] { inline-size: var(--ms-spacing_128); max-inline-size: 100%; } [data-ms-width="160"] { inline-size: var(--ms-spacing_160); max-inline-size: 100%; } [data-ms-width="192"] { inline-size: var(--ms-spacing_192); max-inline-size: 100%; } [data-ms-width="224"] { inline-size: var(--ms-spacing_224); max-inline-size: 100%; } [data-ms-width="256"] { inline-size: var(--ms-spacing_256); max-inline-size: 100%; } [data-ms-width="320"] { inline-size: var(--ms-spacing_320); max-inline-size: 100%; } [data-ms-width="384"] { inline-size: var(--ms-spacing_384); max-inline-size: 100%; } [data-ms-width="448"] { inline-size: var(--ms-spacing_448); max-inline-size: 100%; } [data-ms-width="512"] { inline-size: var(--ms-spacing_512); max-inline-size: 100%; } [data-ms-width="600"] { inline-size: var(--ms-spacing_600); max-inline-size: 100%; } [data-ms-width="640"] { inline-size: var(--ms-spacing_640); max-inline-size: 100%; } [data-ms-width="768"] { inline-size: var(--ms-spacing_768); max-inline-size: 100%; } [data-ms-width="800"] { inline-size: var(--ms-spacing_800); max-inline-size: 100%; } [data-ms-width="960"] { inline-size: var(--ms-spacing_960); max-inline-size: 100%; } [data-ms-width="1024"] { inline-size: var(--ms-spacing_1024); max-inline-size: 100%; } [data-ms-width="content"] { inline-size: var(--ms-layoutWidth_content); max-inline-size: 100%; } [data-ms-width="wide"] { inline-size: var(--ms-layoutWidth_wide); max-inline-size: 100%; } [data-ms-width="full"] { inline-size: 100%; } [data-ms-width="auto"] { inline-size: auto; } [data-ms-height="0"] { block-size: var(--ms-spacing_0); } [data-ms-height="2"] { block-size: var(--ms-spacing_2); } [data-ms-height="4"] { block-size: var(--ms-spacing_4); } [data-ms-height="8"] { block-size: var(--ms-spacing_8); } [data-ms-height="12"] { block-size: var(--ms-spacing_12); } [data-ms-height="16"] { block-size: var(--ms-spacing_16); } [data-ms-height="20"] { block-size: var(--ms-spacing_20); } [data-ms-height="24"] { block-size: var(--ms-spacing_24); } [data-ms-height="28"] { block-size: var(--ms-spacing_28); } [data-ms-height="32"] { block-size: var(--ms-spacing_32); } [data-ms-height="36"] { block-size: var(--ms-spacing_36); } [data-ms-height="40"] { block-size: var(--ms-spacing_40); } [data-ms-height="44"] { block-size: var(--ms-spacing_44); } [data-ms-height="48"] { block-size: var(--ms-spacing_48); } [data-ms-height="56"] { block-size: var(--ms-spacing_56); } [data-ms-height="64"] { block-size: var(--ms-spacing_64); } [data-ms-height="72"] { block-size: var(--ms-spacing_72); } [data-ms-height="80"] { block-size: var(--ms-spacing_80); } [data-ms-height="96"] { block-size: var(--ms-spacing_96); } [data-ms-height="128"] { block-size: var(--ms-spacing_128); } [data-ms-height="160"] { block-size: var(--ms-spacing_160); } [data-ms-height="192"] { block-size: var(--ms-spacing_192); } [data-ms-height="224"] { block-size: var(--ms-spacing_224); } [data-ms-height="256"] { block-size: var(--ms-spacing_256); } [data-ms-height="320"] { block-size: var(--ms-spacing_320); } [data-ms-height="384"] { block-size: var(--ms-spacing_384); } [data-ms-height="448"] { block-size: var(--ms-spacing_448); } [data-ms-height="512"] { block-size: var(--ms-spacing_512); } [data-ms-height="600"] { block-size: var(--ms-spacing_600); } [data-ms-height="640"] { block-size: var(--ms-spacing_640); } [data-ms-height="768"] { block-size: var(--ms-spacing_768); } [data-ms-height="800"] { block-size: var(--ms-spacing_800); } [data-ms-height="960"] { block-size: var(--ms-spacing_960); } [data-ms-height="1024"] { block-size: var(--ms-spacing_1024); } [data-ms-height="full"] { block-size: 100%; } [data-ms-height="auto"] { block-size: auto; } :is(img, video)[data-ms-width][data-ms-height] { object-fit: cover; } /* Rango de ancho: el mínimo nunca supera el ancho del contenedor (sin desplazamiento horizontal) */ [data-ms-min-width="0"] { min-inline-size: min(var(--ms-spacing_0), 100%); } [data-ms-min-width="2"] { min-inline-size: min(var(--ms-spacing_2), 100%); } [data-ms-min-width="4"] { min-inline-size: min(var(--ms-spacing_4), 100%); } [data-ms-min-width="8"] { min-inline-size: min(var(--ms-spacing_8), 100%); } [data-ms-min-width="12"] { min-inline-size: min(var(--ms-spacing_12), 100%); } [data-ms-min-width="16"] { min-inline-size: min(var(--ms-spacing_16), 100%); } [data-ms-min-width="20"] { min-inline-size: min(var(--ms-spacing_20), 100%); } [data-ms-min-width="24"] { min-inline-size: min(var(--ms-spacing_24), 100%); } [data-ms-min-width="28"] { min-inline-size: min(var(--ms-spacing_28), 100%); } [data-ms-min-width="32"] { min-inline-size: min(var(--ms-spacing_32), 100%); } [data-ms-min-width="36"] { min-inline-size: min(var(--ms-spacing_36), 100%); } [data-ms-min-width="40"] { min-inline-size: min(var(--ms-spacing_40), 100%); } [data-ms-min-width="44"] { min-inline-size: min(var(--ms-spacing_44), 100%); } [data-ms-min-width="48"] { min-inline-size: min(var(--ms-spacing_48), 100%); } [data-ms-min-width="56"] { min-inline-size: min(var(--ms-spacing_56), 100%); } [data-ms-min-width="64"] { min-inline-size: min(var(--ms-spacing_64), 100%); } [data-ms-min-width="72"] { min-inline-size: min(var(--ms-spacing_72), 100%); } [data-ms-min-width="80"] { min-inline-size: min(var(--ms-spacing_80), 100%); } [data-ms-min-width="96"] { min-inline-size: min(var(--ms-spacing_96), 100%); } [data-ms-min-width="128"] { min-inline-size: min(var(--ms-spacing_128), 100%); } [data-ms-min-width="160"] { min-inline-size: min(var(--ms-spacing_160), 100%); } [data-ms-min-width="192"] { min-inline-size: min(var(--ms-spacing_192), 100%); } [data-ms-min-width="224"] { min-inline-size: min(var(--ms-spacing_224), 100%); } [data-ms-min-width="256"] { min-inline-size: min(var(--ms-spacing_256), 100%); } [data-ms-min-width="320"] { min-inline-size: min(var(--ms-spacing_320), 100%); } [data-ms-min-width="384"] { min-inline-size: min(var(--ms-spacing_384), 100%); } [data-ms-min-width="448"] { min-inline-size: min(var(--ms-spacing_448), 100%); } [data-ms-min-width="512"] { min-inline-size: min(var(--ms-spacing_512), 100%); } [data-ms-min-width="600"] { min-inline-size: min(var(--ms-spacing_600), 100%); } [data-ms-min-width="640"] { min-inline-size: min(var(--ms-spacing_640), 100%); } [data-ms-min-width="768"] { min-inline-size: min(var(--ms-spacing_768), 100%); } [data-ms-min-width="800"] { min-inline-size: min(var(--ms-spacing_800), 100%); } [data-ms-min-width="960"] { min-inline-size: min(var(--ms-spacing_960), 100%); } [data-ms-min-width="1024"] { min-inline-size: min(var(--ms-spacing_1024), 100%); } [data-ms-max-width="0"] { max-inline-size: var(--ms-spacing_0); } [data-ms-max-width="2"] { max-inline-size: var(--ms-spacing_2); } [data-ms-max-width="4"] { max-inline-size: var(--ms-spacing_4); } [data-ms-max-width="8"] { max-inline-size: var(--ms-spacing_8); } [data-ms-max-width="12"] { max-inline-size: var(--ms-spacing_12); } [data-ms-max-width="16"] { max-inline-size: var(--ms-spacing_16); } [data-ms-max-width="20"] { max-inline-size: var(--ms-spacing_20); } [data-ms-max-width="24"] { max-inline-size: var(--ms-spacing_24); } [data-ms-max-width="28"] { max-inline-size: var(--ms-spacing_28); } [data-ms-max-width="32"] { max-inline-size: var(--ms-spacing_32); } [data-ms-max-width="36"] { max-inline-size: var(--ms-spacing_36); } [data-ms-max-width="40"] { max-inline-size: var(--ms-spacing_40); } [data-ms-max-width="44"] { max-inline-size: var(--ms-spacing_44); } [data-ms-max-width="48"] { max-inline-size: var(--ms-spacing_48); } [data-ms-max-width="56"] { max-inline-size: var(--ms-spacing_56); } [data-ms-max-width="64"] { max-inline-size: var(--ms-spacing_64); } [data-ms-max-width="72"] { max-inline-size: var(--ms-spacing_72); } [data-ms-max-width="80"] { max-inline-size: var(--ms-spacing_80); } [data-ms-max-width="96"] { max-inline-size: var(--ms-spacing_96); } [data-ms-max-width="128"] { max-inline-size: var(--ms-spacing_128); } [data-ms-max-width="160"] { max-inline-size: var(--ms-spacing_160); } [data-ms-max-width="192"] { max-inline-size: var(--ms-spacing_192); } [data-ms-max-width="224"] { max-inline-size: var(--ms-spacing_224); } [data-ms-max-width="256"] { max-inline-size: var(--ms-spacing_256); } [data-ms-max-width="320"] { max-inline-size: var(--ms-spacing_320); } [data-ms-max-width="384"] { max-inline-size: var(--ms-spacing_384); } [data-ms-max-width="448"] { max-inline-size: var(--ms-spacing_448); } [data-ms-max-width="512"] { max-inline-size: var(--ms-spacing_512); } [data-ms-max-width="600"] { max-inline-size: var(--ms-spacing_600); } [data-ms-max-width="640"] { max-inline-size: var(--ms-spacing_640); } [data-ms-max-width="768"] { max-inline-size: var(--ms-spacing_768); } [data-ms-max-width="800"] { max-inline-size: var(--ms-spacing_800); } [data-ms-max-width="960"] { max-inline-size: var(--ms-spacing_960); } [data-ms-max-width="1024"] { max-inline-size: var(--ms-spacing_1024); } [data-ms-max-width="content"] { max-inline-size: var(--ms-layoutWidth_content); } [data-ms-max-width="wide"] { max-inline-size: var(--ms-layoutWidth_wide); } /* Shadow (doc, Effects > Shadows): la sombra de un contenedor, en color neutral */ [data-ms-shadow="1"] { box-shadow: var(--ms-effectShadow_1_near) var(--ms-effectShadowColor_neutral), var(--ms-effectShadow_1_far) var(--ms-effectShadowColor_neutral); } [data-ms-shadow="2"] { box-shadow: var(--ms-effectShadow_2_near) var(--ms-effectShadowColor_neutral), var(--ms-effectShadow_2_far) var(--ms-effectShadowColor_neutral); } [data-ms-shadow="3"] { box-shadow: var(--ms-effectShadow_3_near) var(--ms-effectShadowColor_neutral), var(--ms-effectShadow_3_far) var(--ms-effectShadowColor_neutral); } [data-ms-shadow="4"] { box-shadow: var(--ms-effectShadow_4_near) var(--ms-effectShadowColor_neutral), var(--ms-effectShadow_4_far) var(--ms-effectShadowColor_neutral); } [data-ms-shadow="5"] { box-shadow: var(--ms-effectShadow_5_near) var(--ms-effectShadowColor_neutral), var(--ms-effectShadow_5_far) var(--ms-effectShadowColor_neutral); } } /* Fuera de capas: una propiedad registrada no pertenece a ninguna capa de cascada. Relleno (doc, Layouts > Relleno): el valor de cada atributo de Relleno, y el relleno lateral de una Sección, no se heredan: cada contenedor resuelve solo el suyo. */ @property --_ms-pad { syntax: '*'; inherits: false; } @property --_ms-padBlock { syntax: '*'; inherits: false; } @property --_ms-padInline { syntax: '*'; inherits: false; } @property --_ms-padBlockStart { syntax: '*'; inherits: false; } @property --_ms-padBlockEnd { syntax: '*'; inherits: false; } @property --_ms-padInlineStart { syntax: '*'; inherits: false; } @property --_ms-padInlineEnd { syntax: '*'; inherits: false; } @property --_ms-gridColumns { syntax: '*'; inherits: false; } @property --_ms-gridTrack { syntax: '*'; inherits: false; } @property --_ms-gridWanted { syntax: '*'; inherits: false; } @property --_ms-borderStroke { syntax: '*'; inherits: false; } @property --_ms-sectionGutter { syntax: '*'; inherits: false; } /* Registro tipado para animar el ángulo de un Gradiente (doc, Gradient Style > Cómo se transiciona). */ @property --_ms-gradientAngle { syntax: ''; inherits: true; initial-value: 0deg; }