Esta sección muestra cómo se aplican las diferentes escalas tipográficas, incluyendo tamaños, alturas de línea y pesos de fuente.
Variable: `--font-heading-xxl` (`44px`) / `--font-lh-heading-xxl` (`50px`) / `--font-weight-bold` (`700px`)
Variable: `--font-heading-xl` (`36px`) / `--font-lh-heading-xl` (`43px`) / `--font-weight-bold` (`700px`)
Variable: `--font-heading-lg` (`28px`) / `--font-lh-heading-lg` (`36px`) / `--font-weight-bold` (`700px`)
Variable: `--font-heading-md` (`22px`) / `--font-lh-heading-md` (`34px`) / `--font-weight-bold` (`700px`)
Variable: `--font-body-lg` (`20px`) / `--font-lh-body-lg` (`28px`) / `--font-weight-bold` (`700px`)
Variable: `--font-body-md` (`16px`) / `--font-lh-body-md` (`20px`) / `--font-weight-bold` (`700px`)
The quick brown fox jumps over the lazy dog
Variable: `--font-body-md` (`16px`) / `--font-lh-body-md` (`20px`) / `--font-weight-regular` (`400px`)
The quick brown fox jumps over the lazy dog
Variable: `--font-body-sm` (`14px`) / `--font-lh-body-sm` (`18px`) / `--font-weight-medium` (`500px`)
The quick brown fox jumps over the lazy dog
Variable: `--font-body-xs` (`13px`) / `--font-lh-body-xs` (`18px`) / `--font-weight-light` (`300px`)
1234567890 - The quick brown fox jumps over the lazy dog
Variable: `--font-family-number` (`Lato Mono`) / `--font-weight-black` (`900px`)
Esta sección ilustra visualmente la escala de espaciado y tamaño definida por las variables --scale-l-* y --spaces-*, fundamentales para la consistencia en el diseño.
`--scale-l-0` = 0px
`--scale-l-2` = 2px
`--scale-l-4` = 4px
`--scale-l-6` = 6px
`--scale-l-8` = 8px
`--scale-l-10` = 10px
`--scale-l-12` = 12px
`--scale-l-13` = 13px
`--scale-l-14` = 14px
`--scale-l-16` = 16px
`--scale-l-18` = 18px
`--scale-l-20` = 20px
`--scale-l-22` = 22px
`--scale-l-24` = 24px
`--scale-l-26` = 26px
`--scale-l-28` = 28px
`--scale-l-30` = 30px
`--scale-l-32` = 32px
`--scale-l-34` = 34px
`--scale-l-36` = 36px
`--scale-l-37` = 37px
`--scale-l-38` = 38px
`--scale-l-40` = 40px
`--scale-l-42` = 42px
`--scale-l-43` = 43px
`--scale-l-44` = 44px
`--scale-l-46` = 46px
`--scale-l-48` = 48px
`--scale-l-50` = 50px
`--scale-l-54` = 54px
`--scale-l-56` = 56px
`--scale-l-62` = 62px
`--scale-l-64` = 64px
`--scale-l-67` = 67px
`--scale-l-72` = 72px
`--scale-l-78` = 78px
`--scale-l-80` = 80px
`--scale-l-88` = 88px
`--scale-l-96` = 96px
`--scale-l-104` = 104px
`--scale-l-112` = 112px
`--scale-l-120` = 120px
`--scale-l-128` = 128px
`--scale-l-144` = 144px
`--scale-l-168` = 168px
`--scale-scale-l-192` = 192px
Esta sección muestra la aplicación de diferentes radios de esquina (border-radius) usando las variables definidas, incluyendo su encadenamiento.
`--corner-sm` (`var(--scale-l-4)`) = 4px
`--corner-md` (`var(--scale-l-8)`) = 8px
`--corner-lg` (`var(--scale-l-10)`) = 10px
Esta sección muestra la aplicación de diferentes niveles de opacidad usando las variables definidas.
`--opacity-opacity-strong` = 0.3
`--opacity-medium` = 0.5
`--opacity-subtle` = 0.8
Esta sección presenta una colección de componentes UI reutilizables, cada uno con su vista previa, descripción y la anatomía de su implementación en HTML y CSS, considerando la accesibilidad (ARIA).
Los botones activan una acción, como enviar un formulario o mostrar/ocultar un componente de la interfaz.
El botón de tipo "Fill" es un botón primario con un fondo sólido, ideal para acciones destacadas y llamadas a la acción principales. Proporciona una fuerte señal visual para la interacción del usuario.
<!-- HTML -->
<button class="btn-fill" aria-label="Descripción de la acción del botón">Texto del Botón</button>
<button class="btn-fill" aria-label="Botón deshabilitado" disabled>Botón Deshabilitado</button>
/* CSS */
.btn-fill {
display: inline-flex;
padding: var(--spaces-sm) var(--spaces-md);
justify-content: center;
align-items: center;
gap: var(--spaces-xs);
border-radius: var(--corner-sm);
background: var(--color-global-a-state-default);
color: var(--color-white);
font-size: var(--font-button-text);
font-weight: var(--font-weight-bold);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
}
.btn-fill:hover {
background: var(--color-global-a-state-hover);
}
.btn-fill:active {
background: var(--color-global-a-state-active);
}
.btn-fill:disabled {
background: var(--color-global-a-state-disabled);
color: var(--color-neutral-base);
cursor: not-allowed;
}
El botón de tipo "Outline" presenta un borde y texto con el color de marca, pero un fondo transparente. Es ideal para acciones secundarias o cuando se necesita mantener la jerarquía visual sin saturar la interfaz.
<!-- HTML -->
<button class="btn-outline" aria-label="Descripción de la acción del botón">Texto del Botón</button>
<button class="btn-outline" aria-label="Botón deshabilitado" disabled>Botón Deshabilitado</button>
/* CSS */
.btn-outline {
display: inline-flex;
padding: var(--spaces-sm) var(--spaces-md); /* Corregido según tus variables globales */
justify-content: center;
align-items: center;
gap: var(--spaces-xs); /* Corregido según tus variables globales */
border-radius: var(--corner-sm); /* Corregido según tus variables globales */
border: 1px solid var(--color-global-a-state-default); /* Corregido según tus variables globales */
background: transparent;
color: var(--color-global-a-state-default); /* Corregido según tus variables globales */
font-size: var(--font-button-text);
font-weight: var(--font-weight-bold); /* Corregido según tus variables globales */
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
}
.btn-outline:hover {
border: 1px solid var(--color-global-a-state-hover); /* Corregido según tus variables globales */
color: var(--color-global-a-state-hover); /* Corregido según tus variables globales */
}
.btn-outline:active {
background: var(--color-global-a-state-lightest); /* Sugerencia: un fondo muy sutil al hacer clic */
border: 1px solid var(--color-global-a-state-active);
color: var(--color-global-a-state-active);
}
.btn-outline:disabled {
border: 1px solid var(--color-path-disabled); /* Corregido según tus variables globales */
color: var(--color-path-disabled); /* Corregido según tus variables globales */
cursor: not-allowed;
opacity: 0.7;
}
Los chips son pequeños componentes interactivos o informativos que representan un atributo, texto, entidad o acción. Se utilizan para filtrar, seleccionar o categorizar contenido. También conocido como: Etiqueta, Etiqueta, Chip Una etiqueta pequeña, que generalmente aparece dentro o cerca de otro componente de interfaz más grande, y que representa un estado, una propiedad o algún otro metadato.
El Chip de tipo "Fill" es un chip con un fondo sólido, ideal para destacar elementos de categorización o etiquetas en la interfaz.
<!-- HTML -->
<span class="chip-fill" role="status" aria-label="Descripción de la etiqueta">Texto del Chip</span>
<span class="chip-fill disabled" role="status" aria-label="Etiqueta deshabilitada" aria-disabled="true">Texto del Chip (Disabled)</span>
/* CSS */
.chip-fill {
display: inline-flex;
padding: var(--spaces-xs) var(--spaces-sm); /* Corregido según tus variables globales */
justify-content: center;
align-items: center;
gap: var(--spaces-xs); /* Corregido según tus variables globales */
border-radius: var(--corner-md); /* Corregido según tus variables globales */
background: var(--color-global-b-accent); /* Corregido según tus variables globales */
color: var(--color-white);
font-size: var(--font-body-sm);
font-weight: var(--font-weight-regular); /* Corregido según tus variables globales */
white-space: nowrap;
cursor: default;
transition: all 0.2s ease-in-out;
}
.chip-fill:hover {
background: var(--color-global-b-accent-dark); /* Corregido según tus variables globales */
cursor: pointer;
}
.chip-fill.disabled {
background: var(--color-neutral-lighter); /* Corregido según tus variables globales */
color: var(--color-path-disabled); /* Corregido según tus variables globales */
cursor: not-allowed;
}
El Chip de tipo "Outline" es una variante con un borde y texto de color, pero con un fondo transparente. Es ideal para etiquetas secundarias o filtros que deben ser menos prominentes pero aún interactivos.
<!-- HTML -->
<span class="chip-outline" role="status" aria-label="Descripción de la etiqueta">Texto del Chip</span>
<span class="chip-outline disabled" role="status" aria-label="Etiqueta deshabilitada" aria-disabled="true">Texto del Chip (Disabled)</span>
/* CSS */
.chip-outline {
display: inline-flex;
padding: var(--spaces-xs) var(--spaces-sm);
justify-content: center;
align-items: center;
gap: var(--spaces-xs);
border-radius: var(--corner-md);
border: 1px solid var(--color-global-b-accent); /* Borde de color de marca B */
background: transparent;
color: var(--color-global-b-accent); /* Color del texto de marca B */
font-size: var(--font-body-sm);
font-weight: var(--font-weight-regular);
white-space: nowrap;
cursor: default;
transition: all 0.2s ease-in-out;
}
.chip-outline:hover {
background: var(--color-global-b-accent-lightest); /* Fondo muy sutil en hover */
color: var(--color-global-b-accent-dark); /* Texto un poco más oscuro en hover */
border-color: var(--color-global-b-accent-dark);
cursor: pointer;
}
.chip-outline.disabled {
border: 1px solid var(--color-path-disabled);
color: var(--color-path-disabled);
background: transparent;
cursor: not-allowed;
}
Esta sección contiene componentes interactivos utilizados en formularios para la entrada de datos o selección de opciones por parte del usuario.
Un checkbox permite al usuario seleccionar una o varias opciones de un conjunto. El diseño personaliza la apariencia del control manteniendo la funcionalidad y accesibilidad nativas.
<!-- HTML -->
<div class="checkbox-wrapper">
<input type="checkbox" id="myCheckbox" class="minecon-checkbox"
aria-checked="false" aria-label="Descripción de la opción">
<label for="myCheckbox" class="minecon-checkbox-label">Texto de la Opción</label>
</div>
<!-- Checkbox deshabilitado -->
<div class="checkbox-wrapper">
<input type="checkbox" id="myCheckboxDisabled" class="minecon-checkbox" disabled
aria-disabled="true" aria-label="Descripción de la opción deshabilitada">
<label for="myCheckboxDisabled" class="minecon-checkbox-label disabled">Texto de la Opción (Deshabilitada)</label>
</div>
/* CSS */
.checkbox-wrapper {
display: inline-flex;
padding: var(--spaces-xxs);
align-items: center;
gap: var(--spaces-sm);
cursor: pointer; /* Para todo el wrapper */
}
/* Ocultar el checkbox nativo */
.minecon-checkbox {
/* Ocultar visualmente pero mantener accesible */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Estilo para el label que actúa como el texto y el indicador visual */
.minecon-checkbox-label {
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
color: var(--color-path-strong);
font-size: var(--font-body-sm);
font-weight: var(--font-weight-regular);
line-height: var(--font-lh-body-md); /* Ajustado para consistencia */
}
/* El cuadro visual del checkbox */
.minecon-checkbox-label::before {
content: '';
display: block;
width: var(--scale-l-16); /* 16px */
height: var(--scale-l-16); /* 16px */
border: 1.5px solid var(--color-global-a-state-default);
border-radius: var(--corner-xs); /* 4px, definido en global.css como --scale-l-4 */
background-color: var(--color-white); /* Fondo blanco por defecto */
margin-right: var(--spaces-xs); /* Espacio entre el cuadro y el texto */
flex-shrink: 0; /* Evita que el cuadro se encoja */
transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* El checkmark (icono de éxito) */
.minecon-checkbox-label::after {
content: '';
position: absolute;
top: 2px;
left: 1.3px;
width: var(--scale-l-16); /* 16px */
height: var(--scale-l-16); /* 16px */
background-image: url('data:image/svg+xml;utf8,'); /* Icono de checkmark SVG en blanco */
background-size: cover;
background-repeat: no-repeat;
opacity: 0; /* Inicialmente oculto */
transition: opacity 0.2s ease;
}
/* Estado marcado */
.minecon-checkbox:checked + .minecon-checkbox-label::before {
background-color: var(--color-global-a-state-default);
border-color: var(--color-global-a-state-default);
}
.minecon-checkbox:checked + .minecon-checkbox-label::after {
opacity: 1; /* Mostrar checkmark */
}
/* Estado deshabilitado */
.minecon-checkbox:disabled + .minecon-checkbox-label {
cursor: not-allowed;
color: var(--color-path-disabled); /* Texto deshabilitado */
}
.minecon-checkbox:disabled + .minecon-checkbox-label::before {
background-color: var(--color-neutral-lighter); /* Fondo del cuadro deshabilitado */
border-color: var(--color-path-disabled); /* Borde del cuadro deshabilitado */
}
.minecon-checkbox:disabled:checked + .minecon-checkbox-label::after {
background-image: url('data:image/svg+xml;utf8,'); /* Checkmark deshabilitado (gris) */
opacity: 1; /* El checkmark sigue visible si está marcado */
}
/* Estado Focus (accesibilidad) */
.minecon-checkbox:focus + .minecon-checkbox-label::before {
outline: 2px solid var(--color-global-a-accent); /* Anillo de foco */
outline-offset: 2px;
}
/* Estado Hover */
.checkbox-wrapper:hover .minecon-checkbox-label::before {
border-color: var(--color-global-a-state-hover); /* Borde más oscuro en hover */
}
.checkbox-wrapper:hover .minecon-checkbox:checked + .minecon-checkbox-label::before {
background-color: var(--color-global-a-state-hover); /* Fondo más oscuro en hover si está marcado */
}
Un radio button permite al usuario seleccionar una *única* opción de un conjunto mutuamente excluyente. Se personaliza su apariencia para mantener la consistencia visual y la accesibilidad.
<!-- Grupo de Radio Buttons (importante el mismo 'name' para exclusividad) -->
<div class="radio-wrapper">
<input type="radio" id="myRadio1" name="myRadioGroup" class="minecon-radio"
aria-checked="false" aria-label="Descripción de la opción 1">
<label for="myRadio1" class="minecon-radio-label">Opción 1</label>
</div>
<div class="radio-wrapper">
<input type="radio" id="myRadio2" name="myRadioGroup" class="minecon-radio" checked
aria-checked="true" aria-label="Descripción de la opción 2">
<label for="myRadio2" class="minecon-radio-label">Opción 2</label>
</div>
<!-- Radio Button deshabilitado -->
<div class="radio-wrapper">
<input type="radio" id="myRadioDisabled" name="anotherRadioGroup" class="minecon-radio" disabled
aria-disabled="true" aria-label="Descripción de la opción deshabilitada">
<label for="myRadioDisabled" class="minecon-radio-label disabled">Opción Deshabilitada</label>
</div>
/* CSS */
.radio-wrapper {
display: inline-flex;
padding: var(--spaces-xxs); /* 2px de tu Figma original */
align-items: center;
gap: var(--spaces-sm); /* 8px de tu Figma original */
cursor: pointer;
}
/* Ocultar el radio button nativo */
.minecon-radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Estilo para el label que actúa como el texto y el indicador visual */
.minecon-radio-label {
display: inline-flex;
align-items: center;
position: relative;
cursor: pointer;
color: var(--color-path-strong);
font-size: var(--font-body-sm);
font-weight: var(--font-weight-regular);
line-height: var(--font-lh-body-md); /* Homologado al Checkbox */
}
/* El círculo exterior del radio button */
.minecon-radio-label::before {
content: '';
display: block;
width: var(--scale-l-16); /* 16px */
height: var(--scale-l-16); /* 16px */
border: 1.5px solid var(--color-global-a-state-default); /* Color del borde por defecto */
border-radius: 50%; /* Redondo */
background-color: var(--color-white);
margin-right: var(--spaces-xs); /* Espacio entre el círculo y el texto */
flex-shrink: 0;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* El punto central del radio button */
.minecon-radio-label::after {
content: '';
position: absolute;
/* Ajusta top/left para centrar el punto dentro del círculo */
top: 6.1px;
left: 5.2px;
width: var(--scale-l-8); /* Aproximadamente 8px para el punto central */
height: var(--scale-l-8);
border-radius: 50%;
background-color: var(--color-global-a-state-default); /* Color del punto */
opacity: 0; /* Oculto por defecto */
transition: opacity 0.2s ease, background-color 0.2s ease;
}
/* Estado marcado */
.minecon-radio:checked + .minecon-radio-label::before {
border-color: var(--color-global-a-state-default); /* El borde sigue siendo de color de marca */
/* No hay cambio de background-color para el círculo exterior en el estado checked */
}
.minecon-radio:checked + .minecon-radio-label::after {
opacity: 1; /* Mostrar el punto central */
}
/* Estado deshabilitado */
.minecon-radio:disabled + .minecon-radio-label {
cursor: not-allowed;
color: var(--color-path-disabled);
}
.minecon-radio:disabled + .minecon-radio-label::before {
background-color: var(--color-neutral-lighter);
border-color: var(--color-path-disabled);
}
.minecon-radio:disabled:checked + .minecon-radio-label::after {
background-color: var(--color-path-disabled); /* Punto central en gris deshabilitado */
opacity: 1; /* El punto sigue visible si está marcado */
}
/* Estado Focus (accesibilidad) */
.minecon-radio:focus + .minecon-radio-label::before {
outline: 2px solid var(--color-global-a-accent);
outline-offset: 2px;
}
/* Estado Hover para todo el wrapper */
.radio-wrapper:hover .minecon-radio-label::before {
border-color: var(--color-global-a-state-hover); /* Borde más oscuro en hover */
}
.radio-wrapper:hover .minecon-radio:checked + .minecon-radio-label::after {
background-color: var(--color-global-a-state-hover); /* Punto más oscuro en hover si está marcado */
}