Todos los componentes (204)

Resaltado

Tipografía · Mark · .amset-mark

Qué es y cuándo usarlo

Un trozo de texto resaltado a mano, dentro de una frase: lo que hay que mirar antes que el resto.

Cuándo usarlo

Lo que importa de un párrafo: un plazo, una condición, el dato que ha cambiado.
tone elige el color: highlight (por defecto, el dorado suave de un rotulador), accent (el color de marca), secondary o tertiary.

Cuándo no

Las coincidencias de una búsqueda dentro de un resultado: Highlight, que las busca y las marca solo.
Un estado («Pendiente», «Pagado»): Tag. Un número sobre un icono: Badge.
Dar énfasis a una palabra al leer en voz alta: eso es <strong> o <em>, no un resalte.

Teclado: no participa. No es interactivo.

Accesibilidad: es un <mark> de verdad, así que el color no es lo único que dice que está resaltado: el elemento lleva el significado. Aun así, no todos los lectores de pantalla anuncian un <mark>; si lo resaltado es imprescindible para entender la frase, la frase también lo dice con palabras. El texto es la tinta principal sobre el dorado suave en highlight, y en los demás tonos el texto de su familia sobre su fondo suave (--amset-accent-text sobre --amset-accent-soft…), en los dos temas.

Aspecto fino: --amset-mark-background y --amset-mark-color; cada tone los cambia.

Cómo se ve

El resultado con el trozo buscado resaltado.

<Text>El resultado con <Mark>el trozo buscado</Mark> resaltado.</Text>

Props

Se importa con import { Mark } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`tone`	`"accent" \| "secondary" \| "tertiary" \| "highlight"`	`highlight` es el amarillo de resaltar; `accent`, el color de marca.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-mark-background`	`var(--amset-gold-soft)`
`--amset-mark-color`	`var(--amset-ink)`

Cómo se cambia

.amset-mark {
  --amset-mark-background: ...;
  --amset-mark-color: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: